/* PropRecall — the house style.
 *
 * Single source of truth for the brand: the static landing page and every
 * server-rendered page (sign-in, magic-link landing, WhatsApp connect) link
 * this same file, so the onboarding flow never drifts from the marketing page.
 * Page-specific layout stays with its own page; only tokens, typography and
 * the pieces both surfaces use live here.
 *
 * The Rails pages serve this under a `default-src 'none'` CSP, so it must stay
 * self-contained: no @import, no url() to anywhere but our own origin.
 */

:root {
  color-scheme: light dark;
  --ground: #F4EFE6;
  --paper: #FBF8F2;
  --raise: #FFFFFF;
  --ink: #16202B;
  --ink-soft: #4A5A66;
  --ink-faint: #8494A0;
  --hair: #E4DCCE;
  --hair-strong: #D6CBB8;
  --navy: #0B1C33;
  --navy-2: #16324F;
  --navy-ink: #EFE7D5;
  --gold: #B08637;
  --gold-soft: #C9A25B;
  --emerald: #1B8E63;
  --emerald-wash: rgba(27,142,99,.10);
  --danger: #B3261E;
  --danger-wash: rgba(179,38,30,.09);
  --shadow: 0 1px 2px rgba(11,28,51,.05), 0 8px 24px rgba(11,28,51,.06);
  --shadow-lift: 0 2px 4px rgba(11,28,51,.06), 0 18px 40px rgba(11,28,51,.12);
}
@media (prefers-color-scheme: dark) {
  :root {
    --ground: #0A1524;
    --paper: #0F1F33;
    --raise: #16293F;
    --ink: #EFEAE0;
    --ink-soft: #A9B6C2;
    --ink-faint: #6B7B8A;
    --hair: #21344A;
    --hair-strong: #2C4058;
    --navy: #05101E;
    --navy-2: #0E2439;
    --gold: #D8B265;
    --gold-soft: #C9A25B;
    --emerald: #3FBE89;
    --emerald-wash: rgba(63,190,137,.12);
    --danger: #F2837B;
    --danger-wash: rgba(242,131,123,.12);
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 10px 28px rgba(0,0,0,.35);
    --shadow-lift: 0 2px 6px rgba(0,0,0,.4), 0 22px 50px rgba(0,0,0,.5);
  }
}

/* ---------- base ---------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: "Fraunces", Georgia, "Times New Roman", serif; font-weight: 500; text-wrap: balance; margin: 0; }
p { margin: 0; }
a { color: inherit; }
img, svg { max-width: 100%; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; }

.wrap { max-width: 1060px; margin: 0 auto; padding-inline: clamp(18px, 5vw, 48px); }
.spacer { flex: 1; }

.eyebrow {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold); font-weight: 500;
}

/* ---------- masthead + footer ---------- */
.nav { border-bottom: 1px solid var(--hair); }
.nav .wrap { display: flex; align-items: center; gap: 14px; padding-block: 18px; }
.mark { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.logo {
  width: 40px; height: 40px; border-radius: 11px; flex: none; display: block;
  box-shadow: var(--shadow); border: 1px solid rgba(255,255,255,.06);
}
.brand { font-weight: 600; letter-spacing: .01em; }
.brand small { display: block; color: var(--ink-faint); font-weight: 400; font-size: 12.5px; letter-spacing: .02em; }

footer { border-top: 1px solid var(--hair); }
footer .wrap {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px;
  padding-block: 26px; font-size: 13px; color: var(--ink-faint);
}
footer a { text-decoration: none; }
footer a:hover { color: var(--ink); }
.sig { font-family: "IBM Plex Mono", ui-monospace, monospace; letter-spacing: .1em; text-transform: uppercase; font-size: 11.5px; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: "IBM Plex Sans", system-ui, sans-serif;
  font-size: 14.5px; font-weight: 600; text-decoration: none;
  padding: 11px 20px; border-radius: 12px; border: 1px solid transparent;
  cursor: pointer;
  transition: transform .14s ease, box-shadow .14s ease;
}
.btn-primary { background: var(--navy); color: var(--navy-ink); box-shadow: var(--shadow); }
.btn-ghost { background: transparent; color: var(--ink-soft); border-color: var(--hair-strong); }
.btn-ghost:hover { color: var(--ink); }

/* The one button that leaves for WhatsApp wears WhatsApp's own green, so the
   step is recognisable before it is read. Dark ink on it, not white: white on
   #25D366 falls under 3:1 and this is the button the whole flow depends on. */
.btn-whatsapp { background: #25D366; color: #04291A; box-shadow: var(--shadow); }
.btn-lg { font-size: 16px; padding: 15px 26px; border-radius: 13px; width: 100%; }
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-lift); }
.nav .btn { padding: 9px 16px; font-size: 14px; }
@media (prefers-reduced-motion: reduce) { .btn { transition: none; } .btn:hover { transform: none; } }

/* Both store badges are drawn edge to edge in their own box, so one height
   lines them up. Artwork is never recoloured, cropped or rescaled unevenly —
   both brands require it used as supplied. */
.badge { display: block; border-radius: 9px; }
.badge img { display: block; height: 48px; width: auto; }
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 30px; }
.cta-note { margin-top: 14px; font-size: 13px; color: var(--ink-faint); }

/* ---------- onboarding shell (server-rendered pages) ---------- */
.shell { display: flex; flex-direction: column; min-height: 100vh; }
.shell main { flex: 1; display: flex; align-items: center; padding-block: clamp(32px, 6vw, 64px); }
.shell main .wrap { width: 100%; }

.panel {
  max-width: 460px; margin: 0 auto;
  background: var(--paper); border: 1px solid var(--hair); border-radius: 20px;
  padding: clamp(26px, 5vw, 38px); box-shadow: var(--shadow);
}
.panel h1 { font-size: clamp(25px, 4.4vw, 31px); letter-spacing: -.012em; margin-top: 10px; }
.panel .lede { color: var(--ink-soft); margin-top: 12px; font-size: 15px; }
.panel .lede + .lede { margin-top: 10px; }
/* A button is an action, not the next sentence: it gets air above it so it
   never reads as glued to the line that explains it. */
.panel .lede + .btn, .panel .prereq + .btn { margin-top: 26px; }
.panel form { margin-top: 24px; display: flex; flex-direction: column; gap: 12px; }
.panel .btn { width: 100%; }

.field {
  font-size: 16px; padding: 14px 16px; border-radius: 12px; width: 100%;
  border: 1px solid var(--hair-strong); background: var(--raise); color: var(--ink);
  font-family: inherit;
}
.field::placeholder { color: var(--ink-faint); }
.field:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }

.who { font-weight: 600; color: var(--ink); }
.mono { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 15px; letter-spacing: .01em; }

/* A short banner above the copy: the outcome of the step that just ran. */
.notice {
  display: flex; gap: 10px; align-items: flex-start;
  border-radius: 12px; padding: 12px 14px; font-size: 14px; line-height: 1.45;
  margin-top: 4px;
}
.notice-bad { background: var(--danger-wash); color: var(--danger); }
.notice-good { background: var(--emerald-wash); color: var(--emerald); }
.notice b { font-weight: 600; }

/* The connected number, once Meta hands it back. */
.linked {
  display: flex; align-items: center; gap: 12px; margin-top: 22px;
  border: 1px solid var(--hair); border-radius: 14px; background: var(--raise);
  padding: 14px 16px;
}
.linked .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--emerald); flex: none; }
.linked small { display: block; color: var(--ink-faint); font-size: 12px; }

/* ---------- the four steps of onboarding ---------- */
.steps { display: flex; gap: 8px; list-style: none; margin: 0 0 22px; padding: 0; }
.steps li {
  flex: 1; font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-faint); padding-top: 9px; border-top: 2px solid var(--hair-strong);
}
.steps li.done { color: var(--gold-soft); border-top-color: var(--gold-soft); }
.steps li.now { color: var(--gold); border-top-color: var(--gold); font-weight: 500; }
@media (max-width: 480px) {
  /* Four labels don't fit; keep the bar, show only where you are. */
  .steps li { font-size: 0; padding-top: 7px; }
  .steps li.now { font-size: 10.5px; }
}

/* ---------- WhatsApp connect launcher extras ---------- */
.status { margin-top: 16px; min-height: 20px; font-size: 14px; color: var(--ink-soft); }
#log {
  max-width: 460px; margin: 24px auto 40px; text-align: left;
  background: var(--navy); border: 1px solid var(--hair); border-radius: 12px;
  padding: 12px; font: 12px/1.45 "IBM Plex Mono", ui-monospace, Menlo, monospace;
  color: #B9C4CF; white-space: pre-wrap; word-break: break-word;
}
#log b { color: var(--gold-soft); }
#log .err { color: #F2837B; }

/* button_to renders a form; in the masthead it must not push the row around. */
.nav form { margin: 0; }
/* Store badges sitting inside a panel rather than a marketing hero: this is
   the last thing asked of a broker, so it is centred and reads as an arrival. */
.panel .cta-row { margin-top: 22px; gap: 10px; justify-content: center; }

/* Everything below the badges is the account itself, not a step to take:
   set apart by a hairline so the page reads as done above it. */
.aside { margin-top: 30px; padding-top: 24px; border-top: 1px solid var(--hair); }
.aside-head { font-size: 13.5px; color: var(--ink-faint); }
.aside .linked { margin-top: 10px; }
.aside .btn { margin-top: 12px; width: 100%; }

/* A prerequisite, not a warning: stated before the step so it can be met,
   rather than discovered as a failure two screens later. */
.prereq {
  margin-top: 22px; padding: 14px 16px; border-radius: 12px;
  background: var(--raise); border: 1px solid var(--hair-strong);
  border-left: 3px solid var(--gold);
}
.prereq strong {
  display: block; font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--gold); font-weight: 500;
}
.prereq p { margin-top: 5px; font-size: 14.5px; color: var(--ink); }

/* The way back out of a step, kept deliberately unattractive: below the rule,
   small and in red, so it reads as undoing rather than as the next thing. */
.undo {
  margin-top: 30px; padding-top: 22px;
  border-top: 1px solid var(--hair); text-align: center;
}
.undo a {
  color: var(--danger); font-size: 13.5px; text-decoration: none;
  border-bottom: 1px solid transparent;
}
.undo a:hover { border-bottom-color: currentColor; }

/* A reading page rather than a form: the guide needs a longer measure than the
   460px the onboarding steps are set to. */
.panel-wide { max-width: 760px; }

/* ---------- the guide's numbered walk-through ---------- */
.walk { list-style: none; margin: 34px 0 0; padding: 0; counter-reset: walk; }
.walk > li {
  counter-increment: walk;
  position: relative; padding: 0 0 26px 52px;
  border-left: 1px solid var(--hair); margin-left: 15px;
}
.walk > li:last-child { border-left-color: transparent; padding-bottom: 0; }
/* The number sits on the rule, so the nine screens read as one thread. */
.walk > li::before {
  content: counter(walk, decimal-leading-zero);
  position: absolute; left: -15px; top: -2px;
  width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--navy); color: var(--navy-ink);
  font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 11.5px;
}
.walk h2 { font-size: 19px; letter-spacing: -.008em; margin: 0 0 2px; }
/* What Meta calls the screen, so a broker can match the page to the step. */
.walk .screen {
  display: block; font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-faint); margin-bottom: 7px;
}
.walk p { margin-top: 9px; font-size: 15px; color: var(--ink-soft); }
.walk b, .walk strong { color: var(--ink); font-weight: 600; }
.walk .tip {
  margin-top: 12px; padding: 11px 14px; border-radius: 11px;
  background: var(--raise); border: 1px solid var(--hair);
  font-size: 14px; color: var(--ink-soft);
}
.walk .tip.warn { border-left: 3px solid var(--danger); }
/* The note under a step's button: quieter than the button, still findable. */
.panel .cta-note { text-align: center; }
.panel .cta-note a { color: var(--gold); text-decoration: none; border-bottom: 1px solid var(--gold-soft); }

/* ---------- two things to do, in order ---------- */
.pair { list-style: none; counter-reset: pair; margin: 26px 0 0; padding: 0; }
.pair > li { counter-increment: pair; padding-left: 42px; position: relative; }
.pair > li + li { margin-top: 26px; padding-top: 26px; border-top: 1px solid var(--hair); }
.pair > li::before {
  content: counter(pair);
  position: absolute; left: 0; top: 0;
  width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--navy); color: var(--navy-ink);
  font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 13px;
}
.pair > li + li::before { top: 26px; }
.pair h2 { font-size: 18px; letter-spacing: -.008em; margin: 3px 0 0; }
.pair p { margin-top: 6px; font-size: 14.5px; color: var(--ink-soft); }
.pair .btn { margin-top: 14px; }
/* Plain dashed list inside a step: the fields to fill, or the two OS paths. */
.dashed { list-style: none; margin: 10px 0 0; padding: 0; }
.dashed li {
  position: relative; padding-left: 16px; margin-top: 6px;
  font-size: 15px; color: var(--ink-soft);
}
.dashed li::before { content: "—"; position: absolute; left: 0; color: var(--ink-faint); }

/* The human fallback at the foot of a step. Set off by a rule, because it is
   not part of the task — it is what to do when the task goes wrong. */
.help {
  margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--hair);
  text-align: center;
}
.help strong {
  display: block; font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-faint); font-weight: 500;
}
.help p { margin-top: 8px; font-size: 14.5px; color: var(--ink-soft); line-height: 1.7; }
.help a { color: var(--gold); text-decoration: none; border-bottom: 1px solid var(--gold-soft); }

/* ---------- the guide, one screen at a time ---------- */
/* `stepping` is added by the script, so the guide degrades to its long form
   rather than to an empty page when nothing runs. */
.stepper.stepping .walk > li { display: none; }
.stepper.stepping .walk > li.now { display: block; }
/* Alone on the page, a step needs no thread running down the left of it. */
.stepper.stepping .walk > li {
  border-left-color: transparent; padding-bottom: 0;
}
.stepper.stepping .walk > li::before { content: attr(data-n); }
/* "Before you start" is advice for the start and clutter after it. */
.stepper.stepping:not([data-step="1"]) .prereq { display: none; }
.stepper .eyebrow b { color: var(--gold); font-weight: 500; }

.walk-nav { display: flex; align-items: center; gap: 12px; margin-top: 30px; }
.walk-nav .spacer { flex: 1; }
/* Both overrides earn their keep against panel defaults: .panel .btn is full
   width, which would leave two buttons filling the row, and `display` set on a
   class beats the [hidden] attribute's own display:none. */
.walk-nav .btn { display: inline-flex; align-items: center; gap: 8px; width: auto; }
.walk-nav .btn[hidden] { display: none; }
/* Green on the navy button: the tick is the part that says "this one is done",
   so it carries the colour rather than the whole button. */
.walk-nav .tick { color: #45D483; flex: none; }
/* The Finish button is itself green, so a green tick would vanish into it —
   carry the button's own dark ink there instead. */
.walk-nav .btn-whatsapp .tick { color: #04291A; }