/* Prism Division public site — shared shell.
   Brand Lock: Paper, Graphite, Prism Indigo, Spectral Rose, Field.
   Every page on the public site loads exactly this file. */

:root {
  --paper: #f5f3ee;
  --graphite: #171921;
  --indigo: #3b2fd1;
  --rose: #e8486b;
  --field: #05060e;

  --ink: var(--graphite);
  --ink-muted: #5b5e6b;
  --ink-faint: #86899a;
  --rule: rgba(23, 25, 33, 0.13);
  --rule-soft: rgba(23, 25, 33, 0.07);
  --card: #fbfaf7;

  --shell: min(1080px, 100% - 40px);
  --measure: 62ch;

  --display: "Space Grotesk", "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, .display {
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: -0.022em;
  line-height: 1.08;
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: clamp(34px, 8vw, 62px); }
h2 { font-size: clamp(25px, 4.6vw, 36px); }
h3 { font-size: clamp(17px, 2.4vw, 19px); letter-spacing: -0.012em; line-height: 1.25; }

p { margin: 0; }

a { color: inherit; }

.shell { width: var(--shell); margin-inline: auto; }

/* ---------- accents ---------- */

.spectral-rule {
  height: 2px;
  border: 0;
  margin: 0;
  background: linear-gradient(90deg, var(--indigo), var(--rose));
}

.eyebrow {
  font-family: var(--body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0;
}

/* ---------- header ---------- */

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--field);
  color: var(--paper);
  padding: 12px 18px;
  border-radius: 0 0 10px 0;
  z-index: 20;
}
.skip:focus { left: 0; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(245, 243, 238, 0.9);
  backdrop-filter: saturate(150%) blur(10px);
  border-bottom: 1px solid var(--rule-soft);
}

.site-header .shell {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 64px;
  flex-wrap: wrap;
  padding-block: 8px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  margin-right: auto;
  padding: 6px 2px;
}
.brand svg { width: 24px; height: 24px; display: block; }
.brand-name {
  font-family: var(--display);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.06em;
}
.brand-name b { color: var(--rose); }

.site-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
/* `:not(.btn)` is load-bearing, not tidiness. `.site-nav a` outranks
   `.btn-primary` on specificity (a class plus a type beats a class), so
   without it the muted link colour paints itself over the Sign in button's
   indigo: grey on indigo measured 1.30:1 against a 4.5:1 floor, on the
   primary call to action of all six public pages. */
.site-nav a:not(.btn) {
  text-decoration: none;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--ink-muted);
  padding: 10px 12px;
  border-radius: 9px;
  transition: color 0.12s ease, background 0.12s ease;
}
.site-nav a:not(.btn):hover { color: var(--ink); background: rgba(23, 25, 33, 0.05); }
.site-nav a:not(.btn)[aria-current="page"] { color: var(--ink); }

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 48px;
  padding: 12px 22px;
  border-radius: 11px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid transparent;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}
.btn-primary {
  background: var(--indigo);
  color: #fff;
  box-shadow: 0 10px 24px -14px rgba(59, 47, 209, 0.9);
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 14px 28px -14px rgba(59, 47, 209, 0.95); }
.btn-primary:active { transform: translateY(0); }
.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--rule);
}
.btn-ghost:hover { background: rgba(23, 25, 33, 0.045); }
.btn svg { width: 18px; height: 18px; flex-shrink: 0; }

/* 44px, not 40: this is the size of a finger, and the small variant is what
   the header's Sign in uses on a phone. */
.btn-sm { min-height: 44px; padding: 8px 16px; font-size: 14px; border-radius: 9px; }

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* ---------- sections ---------- */

.section { padding: clamp(52px, 9vw, 92px) 0; }
.section + .section { border-top: 1px solid var(--rule-soft); }

.lede {
  font-size: clamp(17px, 2.6vw, 20px);
  line-height: 1.5;
  color: var(--ink-muted);
  max-width: 54ch;
}

.prose { max-width: var(--measure); }
.prose h2 { margin-top: 44px; }
.prose h2 + p { margin-top: 14px; }
.prose p { margin-top: 14px; color: var(--ink-muted); }
.prose ul { margin: 14px 0 0; padding-left: 20px; color: var(--ink-muted); }
.prose li { margin-top: 8px; }
.prose strong { color: var(--ink); font-weight: 600; }
.prose a { color: var(--indigo); text-underline-offset: 3px; }

.grid { display: grid; gap: 18px; grid-template-columns: 1fr; }

.card {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 16px;
  padding: 24px;
}
.card p { margin-top: 8px; color: var(--ink-muted); font-size: 14.5px; }

/* Numbered steps — the number is a typographic mark, not a badge in a box. */
.step-num {
  font-family: var(--display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--indigo);
  display: block;
  margin-bottom: 12px;
}

/* ---------- home composition (typographic, no screenshots) ---------- */

.flow {
  border: 1px solid var(--rule);
  border-radius: 18px;
  background: var(--card);
  overflow: hidden;
}
.flow-row {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--rule-soft);
  flex-wrap: wrap;
}
.flow-row:last-child { border-bottom: 0; }
.flow-state {
  font-family: var(--display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--indigo);
  min-width: 128px;
}
.flow-row:last-child .flow-state { color: var(--rose); }
.flow-text { font-size: 14.5px; color: var(--ink-muted); flex: 1 1 220px; }

/* ---------- dark band ---------- */

.field-band {
  background: var(--field);
  color: var(--paper);
}
.field-band h2 { color: var(--paper); }
.field-band p { color: rgba(245, 243, 238, 0.72); }
.field-band .btn-ghost { color: var(--paper); border-color: rgba(245, 243, 238, 0.28); }
.field-band .btn-ghost:hover { background: rgba(245, 243, 238, 0.09); }

/* ---------- pricing ---------- */

.plan { display: flex; flex-direction: column; }
.plan-name { font-family: var(--display); font-size: 21px; font-weight: 600; }
.plan-for { margin-top: 6px; color: var(--ink-muted); font-size: 14.5px; }
.plan ul {
  list-style: none;
  margin: 20px 0 24px;
  padding: 0;
  border-top: 1px solid var(--rule-soft);
}
.plan li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 0;
  border-bottom: 1px solid var(--rule-soft);
  font-size: 14.5px;
}
.plan li svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 3px; }
.plan li.off { color: var(--ink-faint); }
.plan .btn { margin-top: auto; }

/* ---------- footer ---------- */

.site-footer {
  border-top: 1px solid var(--rule);
  padding: 36px 0 48px;
  font-size: 14px;
  color: var(--ink-muted);
}
.site-footer .shell {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  align-items: center;
}
.site-footer nav { display: flex; flex-wrap: wrap; gap: 4px; margin-left: auto; }
.site-footer a {
  text-decoration: none;
  padding: 10px 10px;
  border-radius: 8px;
  color: var(--ink-muted);
}
.site-footer a:hover { color: var(--ink); background: rgba(23, 25, 33, 0.05); }

/* ---------- a11y ---------- */

:is(a, button):focus-visible {
  outline: 2px solid var(--indigo);
  outline-offset: 3px;
  border-radius: 8px;
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

@media (min-width: 720px) {
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
}

/* ---------- auth (the Persuade/Operate boundary: login, signup, reset) ----
   One column, mobile first. These pages are served by the API from Jinja
   templates but wear the public site's skin, so the seam between the
   marketing site and the product is a change of task, not of brand. */

.auth-main {
  width: var(--shell);
  margin-inline: auto;
  padding: clamp(28px, 7vw, 56px) 0 64px;
}
.auth-card { max-width: 420px; margin-inline: auto; }
.auth-card h1 { font-size: clamp(28px, 7vw, 36px); }
.auth-sub {
  margin-top: 12px;
  color: var(--ink-muted);
  font-size: 15.5px;
  line-height: 1.5;
}

/* The fork an invited person actually faces, shown instead of explained.
   A business is invited at a role address (info@, hello@, contact@) and that
   address is usually a Google ALIAS: "Continue with Google" cannot sign it
   in, and the only way through is the page labelled "Forgot password" --
   which reads as "I lost mine" to someone who never had one. Maria Paula
   got stuck exactly there on 2026-09-12. Two paths with an icon each say in
   three words what a paragraph was failing to say. */
.auth-paths {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 26px;
}
@media (max-width: 520px) {
  .auth-paths { grid-template-columns: 1fr; }
}
.auth-path {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  min-height: 44px;
  border: 1px solid var(--rule-soft);
  border-radius: 12px;
  background: transparent;
  text-decoration: none;
  transition: border-color 0.12s ease, background 0.12s ease;
}
.auth-path:hover {
  border-color: rgba(59, 47, 209, 0.45);
  background: rgba(59, 47, 209, 0.035);
}
/* House rule: a real icon carries no background box, only its stroke. */
.auth-path svg { width: 22px; height: 22px; flex-shrink: 0; }
.auth-path-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.auth-path-text b {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.25;
}
.auth-path-text small {
  font-size: 12.5px;
  color: var(--ink-muted);
  line-height: 1.3;
}

.auth-google { width: 100%; margin-top: 26px; }
.auth-google svg { width: 18px; height: 18px; }

.auth-or {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 22px 0 4px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.auth-or::before,
.auth-or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--rule-soft);
}

.auth-form { display: flex; flex-direction: column; gap: 16px; margin-top: 18px; }
.auth-field { display: flex; flex-direction: column; gap: 6px; }
.auth-field label {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
}
.auth-field input {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid var(--rule);
  border-radius: 11px;
  background: var(--card);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px; /* 16px keeps iOS Safari from zooming on focus. */
  line-height: 1.4;
}
.auth-field input:focus-visible {
  outline: 2px solid var(--indigo);
  outline-offset: 2px;
  border-color: transparent;
}
.auth-field input[aria-invalid="true"] { border-color: var(--rose); }
.auth-hint { font-size: 13px; color: var(--ink-faint); }
.auth-error {
  font-size: 13px;
  color: var(--rose);
  font-weight: 500;
}
.auth-error:empty { display: none; }

.auth-form .btn-primary { width: 100%; margin-top: 4px; }
.auth-form button[disabled] {
  opacity: 0.6;
  cursor: progress;
  transform: none;
  box-shadow: none;
}

.auth-note {
  margin-top: 18px;
  padding: 12px 14px;
  border-radius: 11px;
  border: 1px solid var(--rule);
  background: var(--card);
  font-size: 14px;
  color: var(--ink-muted);
}
.auth-note.bad { border-color: var(--rose); color: var(--ink); }

.auth-links {
  margin-top: 26px;
  padding-top: 18px;
  border-top: 1px solid var(--rule-soft);
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  font-size: 14px;
}
.auth-links a { color: var(--indigo); text-decoration: none; text-underline-offset: 3px; }
.auth-links a:hover { text-decoration: underline; }
.auth-links .auth-links-legal { color: var(--ink-faint); }

@media (min-width: 600px) {
  .auth-main { padding-top: clamp(40px, 8vh, 84px); }
}