/* ============================================================================
   Spendit — spendit.ca
   One stylesheet for every page. Derived from the app's design tokens
   (spendit-fa/src/constants/tokens.ts) so the site and the product read as
   one thing. If a colour or a font changes there, change it here too.

   The app is light-only (app.json → userInterfaceStyle: "light") and the
   whole "Clean" direction is an off-white world, so this site commits to a
   single light theme rather than shipping a dark variant that would look
   like a different brand.
   ========================================================================= */

/* --- Faces ---------------------------------------------------------------
   Self-hosted latin-subset variable fonts (73 KB total). Self-hosted rather
   than loaded from Google so there is no third-party render-blocking request
   and no silent fallback if fonts.gstatic.com is unreachable. */

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('/fonts/manrope-latin-var.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/inter-latin-var.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- Tokens ------------------------------------------------------------- */

:root {
  color-scheme: light;

  /* Colour — mirrors tokens.ts. --forest is the one addition: the ink pushed
     darker and further toward the accent's hue, for the footer band. */
  --paper:      #F7F8F5;
  --surface:    #FFFFFF;
  --surface-2:  #F0F4F2;
  --rule:       #E3E8E5;
  --rule-soft:  #EDF1EF;
  --ink:        #102A24;
  --ink-2:      #4A5A55;
  --ink-3:      #7A8580;
  --pine:       #0E7A63;
  --pine-deep:  #0B6450;
  --pine-wash:  #DFF3ED;
  --forest:     #0B211C;
  --clay:       #B23A3A;
  --clay-wash:  #FCE8E8;

  /* Type */
  --display: 'Manrope', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --text:    'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;

  --t-hero:  clamp(2.5rem, 1.35rem + 4.6vw, 4.5rem);
  --t-d1:    clamp(2rem, 1.5rem + 2vw, 2.875rem);
  --t-d2:    clamp(1.3rem, 1.13rem + 0.8vw, 1.6875rem);
  --t-d3:    1.0625rem;
  --t-lede:  clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
  --t-body:  1rem;
  --t-small: 0.875rem;
  --t-fine:  0.8125rem;
  --t-label: 0.6875rem;

  /* Layout */
  --frame: 1140px;
  --gut:   clamp(20px, 5vw, 44px);
  --rail:  152px;
  --measure: 66ch;
}

/* --- Reset -------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  overflow-x: clip;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  overflow-x: clip;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--text);
  font-size: var(--t-body);
  font-weight: 400;
  line-height: 1.6;
  font-optical-sizing: auto;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }

h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; }

a { color: var(--pine); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { color: var(--pine-deep); }

:focus-visible {
  outline: 2px solid var(--pine);
  outline-offset: 3px;
  border-radius: 3px;
}

::selection { background: var(--pine-wash); color: var(--ink); }

.skip {
  position: absolute;
  left: -9999px;
  top: 8px;
  z-index: 50;
  padding: 10px 16px;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 8px;
  font-size: var(--t-small);
  font-weight: 500;
  text-decoration: none;
}
.skip:focus { left: 12px; }

/* --- Frame + rail --------------------------------------------------------
   Every page is one measured column. `.rail` adds a narrow left gutter that
   carries a label or a clause number — on the legal pages that number is how
   you cite the clause, so the rail carries information, not decoration. */

.frame {
  width: 100%;
  max-width: var(--frame);
  margin-inline: auto;
  padding-inline: var(--gut);
}

.rail {
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr);
  column-gap: 40px;
  align-items: start;
}

@media (max-width: 880px) {
  .rail { grid-template-columns: minmax(0, 1fr); row-gap: 14px; }
}

.rail-label {
  font-size: var(--t-label);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding-top: 0.55em;
}

@media (min-width: 881px) {
  .rail-label { position: sticky; top: 92px; }
}

/* --- Type registers ------------------------------------------------------ */

.display-1 {
  font-family: var(--display);
  font-size: var(--t-hero);
  font-weight: 300;
  line-height: 1.04;
  letter-spacing: -0.04em;
  text-wrap: balance;
}

.display-2 {
  font-family: var(--display);
  font-size: var(--t-d1);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.display-3 {
  font-family: var(--display);
  font-size: var(--t-d2);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.lede {
  font-size: var(--t-lede);
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 46ch;
  text-wrap: pretty;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.eyebrow::after {
  content: '';
  width: 28px;
  height: 1px;
  background: var(--rule);
}

.fine { font-size: var(--t-fine); color: var(--ink-3); line-height: 1.6; }

/* --- Masthead ------------------------------------------------------------ */

.masthead {
  position: sticky;
  top: 0;
  z-index: 30;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 200ms ease;
}

.masthead[data-scrolled='true'] { border-bottom-color: var(--rule); }

.masthead-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 68px;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--display);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.035em;
  color: var(--ink);
  text-decoration: none;
}

.wordmark svg { color: var(--pine); flex: none; }

.masthead-nav {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.4vw, 30px);
  font-size: var(--t-small);
}

.masthead-nav a {
  color: var(--ink-2);
  text-decoration: none;
  font-weight: 450;
}

.masthead-nav a:hover { color: var(--ink); }

.masthead-nav a[aria-current='page'] { color: var(--ink); font-weight: 550; }

@media (max-width: 620px) {
  .masthead-nav .nav-optional { display: none; }
}

/* --- Buttons ------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 13px 22px;
  border: 1px solid transparent;
  border-radius: 10px;
  font-family: var(--text);
  font-size: var(--t-small);
  font-weight: 550;
  line-height: 1.2;
  letter-spacing: 0.005em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease,
              border-color 160ms ease, transform 160ms ease;
}

.btn:active { transform: translateY(1px); }

.btn-primary {
  background: var(--pine);
  color: #FFFFFF;
}
.btn-primary:hover { background: var(--pine-deep); color: #FFFFFF; }

.btn-quiet {
  background: transparent;
  border-color: var(--rule);
  color: var(--ink);
}
.btn-quiet:hover { border-color: var(--ink-3); color: var(--ink); background: var(--surface); }

.btn-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: var(--t-small);
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  padding: 13px 2px;
}
.btn-link:hover { color: var(--pine); }
.btn-link svg { transition: transform 160ms ease; }
.btn-link:hover svg { transform: translateX(3px); }

/* --- Hero (home) ---------------------------------------------------------
   Type in the measured frame; the photograph takes the right column and, on
   wide viewports, bleeds past the frame to the viewport edge. */

.hero { position: relative; overflow-x: clip; }

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: clamp(36px, 5vw, 64px);
  padding-block: clamp(48px, 7vw, 92px) clamp(52px, 7vw, 96px);
}

@media (min-width: 900px) {
  .hero-grid { grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr); }
}

.hero-type {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(18px, 2.2vw, 26px);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
}

.hero-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  padding-top: 4px;
  font-size: var(--t-fine);
  color: var(--ink-3);
}

.hero-trust li { list-style: none; display: flex; align-items: center; gap: 7px; }
.hero-trust svg { color: var(--pine); flex: none; }

.hero-figure { position: relative; margin: 0; }

.hero-figure img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: center 62%;
  border-radius: 14px;
  background: var(--surface-2);
}

@media (min-width: 900px) {
  .hero-figure img {
    aspect-ratio: 4 / 3;
    border-radius: 14px 0 0 14px;
  }
  /* Bleed the photo from the frame edge to the viewport edge, and dissolve
     its left edge into the paper so it meets the type quietly. The offset is
     the frame's own padding plus whatever margin the centred frame leaves —
     and it errs long, since overshoot is clipped and a gap would not be. */
  .hero-figure {
    margin-right: calc(-1 * var(--gut) - max(0px, (100vw - var(--frame)) / 2));
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 7%);
            mask-image: linear-gradient(to right, transparent 0, #000 7%);
  }
}

.hero-credit {
  margin-top: 10px;
  font-size: var(--t-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.hero-credit a { color: inherit; text-decoration-color: var(--rule); }
.hero-credit a:hover { color: var(--ink-2); }

@media (min-width: 900px) {
  .hero-credit { padding-left: 8%; }
}

/* Load sequence: one orchestrated moment, then the page sits still. */
@media (prefers-reduced-motion: no-preference) {
  .rise { animation: rise 620ms cubic-bezier(0.22, 0.61, 0.36, 1) both; }
  .rise-1 { animation-delay: 40ms; }
  .rise-2 { animation-delay: 110ms; }
  .rise-3 { animation-delay: 180ms; }
  .rise-4 { animation-delay: 250ms; }
  .rise-5 { animation-delay: 320ms; }
}

@keyframes rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* --- Sections ------------------------------------------------------------ */

.band { border-top: 1px solid var(--rule); }
.band-tint { background: var(--surface); }

.band-in { padding-block: clamp(52px, 7vw, 88px); }

.section-head {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: var(--measure);
  margin-bottom: clamp(28px, 4vw, 44px);
}

.section-head p { color: var(--ink-2); max-width: 54ch; text-wrap: pretty; }

/* --- Steps ---------------------------------------------------------------
   Numbered because this genuinely is a sequence — you cannot get a budget
   before answering the quiz. */

.steps { list-style: none; display: grid; gap: 0; }

.steps li {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  column-gap: 20px;
  padding-block: clamp(20px, 2.6vw, 28px);
  border-top: 1px solid var(--rule);
}
.steps li:last-child { border-bottom: 1px solid var(--rule); }

.step-n {
  font-family: var(--display);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--pine);
  padding-top: 0.15em;
}

.step-body { display: flex; flex-direction: column; gap: 6px; }
.step-body h3 { font-size: var(--t-d3); font-weight: 600; letter-spacing: -0.01em; }
.step-body p { color: var(--ink-2); max-width: 62ch; text-wrap: pretty; }

/* --- Feature list (hairline definition list, not a card grid) ------------ */

.deflist { display: grid; gap: 0; }

.deflist > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
  padding-block: 22px;
  border-top: 1px solid var(--rule);
}

.deflist > div:last-child { border-bottom: 1px solid var(--rule); }

@media (min-width: 760px) {
  .deflist > div {
    grid-template-columns: 240px minmax(0, 1fr);
    column-gap: 40px;
    align-items: baseline;
  }
}

.deflist dt {
  display: flex;
  align-items: center;
  gap: 11px;
  font-weight: 600;
  font-size: var(--t-body);
  letter-spacing: -0.005em;
}
.deflist dt svg { color: var(--pine); flex: none; }
.deflist dd { color: var(--ink-2); max-width: 62ch; text-wrap: pretty; }

/* --- Plans --------------------------------------------------------------- */

.plans {
  display: grid;
  gap: clamp(20px, 3vw, 28px);
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 760px) {
  .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.plan {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: clamp(24px, 3vw, 30px);
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 14px;
}

/* On a white band the card takes the paper tone instead, so a card is always
   one step away from whatever it sits on. */
.band-tint .plan { background: var(--paper); }

.plan-accent { border-color: var(--pine-wash); background: var(--pine-wash); }

.plan-name {
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.plan-accent .plan-name { color: var(--pine-deep); }

.plan h3 {
  font-family: var(--display);
  font-size: 1.375rem;
  font-weight: 400;
  letter-spacing: -0.025em;
  line-height: 1.25;
}

.plan ul { list-style: none; display: flex; flex-direction: column; gap: 9px; }

.plan li {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 10px;
  font-size: var(--t-small);
  color: var(--ink-2);
}
.plan li svg { color: var(--pine); margin-top: 0.28em; }

.plan-note {
  margin-top: auto;
  padding-top: 6px;
  font-size: var(--t-fine);
  color: var(--ink-3);
  text-wrap: pretty;
}

/* --- Legal pages --------------------------------------------------------- */

.page-head { padding-block: clamp(40px, 5.5vw, 68px) clamp(28px, 3.5vw, 40px); }

.page-head-in { display: flex; flex-direction: column; gap: 14px; max-width: var(--measure); }

.stamp {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--rule);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.stamp-warn { background: var(--clay-wash); border-color: #F3D6D6; color: var(--clay); }

.legal { padding-bottom: clamp(56px, 7vw, 88px); }

.legal-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(28px, 4vw, 44px);
  align-items: start;
}

@media (min-width: 1000px) {
  .legal-grid { grid-template-columns: 232px minmax(0, 1fr); column-gap: 56px; }
}

/* Contents: inline block on narrow screens, sticky index on wide ones. */
.toc {
  padding: 20px 22px;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 12px;
}

@media (min-width: 1000px) {
  .toc {
    position: sticky;
    top: 92px;
    max-height: calc(100vh - 124px);
    overflow-y: auto;
    padding: 0 0 0 16px;
    background: none;
    border: none;
    border-left: 1px solid var(--rule);
    border-radius: 0;
  }
}

.toc h2 {
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 12px;
}

.toc ol { list-style: none; counter-reset: toc; display: flex; flex-direction: column; gap: 2px; }

.toc a {
  counter-increment: toc;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 8px;
  padding: 5px 0;
  font-size: var(--t-fine);
  line-height: 1.45;
  color: var(--ink-2);
  text-decoration: none;
}

.toc a::before {
  content: counter(toc);
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

.toc a:hover { color: var(--ink); }
.toc a[aria-current='true'] { color: var(--pine); font-weight: 550; }
.toc a[aria-current='true']::before { color: var(--pine); }

.legal-body { counter-reset: clause; max-width: var(--measure); }

.legal-body > p { color: var(--ink-2); margin-bottom: 14px; text-wrap: pretty; }

.clause {
  counter-increment: clause;
  padding-block: clamp(26px, 3.4vw, 38px);
  border-top: 1px solid var(--rule);
  scroll-margin-top: 96px;
}

.clause:first-of-type { border-top: none; padding-top: 0; }

/* Pages whose sections aren't a numbered sequence (delete-account) reuse the
   same clause rhythm without inventing clause numbers for it. */
.legal-body.unnumbered { counter-reset: none; }
.legal-body.unnumbered .clause > h2::before { content: none; }

.clause > h2 {
  position: relative;
  font-family: var(--display);
  font-size: var(--t-d2);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.22;
  margin-bottom: 14px;
  text-wrap: balance;
}

.clause > h2::before {
  content: counter(clause);
  display: block;
  margin-bottom: 8px;
  font-family: var(--text);
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

@media (min-width: 1000px) {
  .clause > h2 { margin-left: 0; }
}

.clause h3 {
  font-size: var(--t-d3);
  font-weight: 600;
  letter-spacing: -0.005em;
  margin: 24px 0 8px;
}

.clause p { color: var(--ink-2); margin-bottom: 12px; text-wrap: pretty; }
.clause p:last-child { margin-bottom: 0; }

.clause ul, .clause ol { color: var(--ink-2); margin: 10px 0 16px; padding-left: 1.35em; }
.clause ul { list-style: disc; }
.clause ol { list-style: decimal; }
.clause li { margin-bottom: 6px; padding-left: 4px; }
.clause li::marker { color: var(--ink-3); }
.clause ul:last-child, .clause ol:last-child { margin-bottom: 0; }

.clause strong { color: var(--ink); font-weight: 600; }

.callout {
  padding: 18px 20px;
  margin: 18px 0;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 12px;
  color: var(--ink-2);
  font-size: var(--t-small);
}
.callout strong { color: var(--ink); }

.table-scroll { overflow-x: auto; margin: 16px 0; }

table {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  font-size: var(--t-small);
}

th, td {
  text-align: left;
  padding: 12px 14px;
  border-bottom: 1px solid var(--rule);
  color: var(--ink-2);
  vertical-align: top;
}

thead th {
  color: var(--ink);
  font-weight: 600;
  font-size: var(--t-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-bottom-color: var(--ink-3);
  white-space: nowrap;
}

/* --- Index / link rows --------------------------------------------------- */

.measured { max-width: var(--measure); }

.linkrows { list-style: none; display: grid; gap: 0; }

.linkrows li { border-top: 1px solid var(--rule); }
.linkrows li:last-child { border-bottom: 1px solid var(--rule); }

.linkrow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  column-gap: 24px;
  row-gap: 4px;
  padding: 20px 0;
  text-decoration: none;
  color: var(--ink);
}

.linkrow:hover { color: var(--pine); }
.linkrow span { font-weight: 550; }
.linkrow em { font-style: normal; font-size: var(--t-small); color: var(--ink-3); }
.linkrow:hover em { color: var(--ink-2); }

/* --- Colophon ------------------------------------------------------------ */

.colophon {
  background: var(--forest);
  color: #C9D6D1;
  font-size: var(--t-small);
}

.colophon-in {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 28px 40px;
  padding-block: clamp(40px, 5vw, 60px);
}

.colophon-brand { display: flex; flex-direction: column; gap: 12px; max-width: 40ch; }

.colophon .wordmark { color: #FFFFFF; }
.colophon .wordmark svg { color: #6FBFA8; }

.colophon p { color: #93A8A2; line-height: 1.6; }

.colophon nav { display: flex; flex-direction: column; gap: 9px; }

.colophon a { color: #C9D6D1; text-decoration: none; }
.colophon a:hover { color: #FFFFFF; text-decoration: underline; }

.colophon-fine {
  padding-block: 20px 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px 28px;
  font-size: var(--t-fine);
  color: #7E948E;
}

.colophon :focus-visible { outline-color: #6FBFA8; }

/* --- Print — people do print a terms of service ------------------------- */

@media print {
  .masthead, .colophon, .toc, .skip, .hero-figure { display: none !important; }
  body { background: #FFFFFF; font-size: 11pt; }
  .legal-grid { display: block; }
  .legal-body { max-width: none; }
  .clause { break-inside: avoid; border-top: 1px solid #CCC; }
  a { color: inherit; text-decoration: none; }
  .clause a::after { content: ' (' attr(href) ')'; font-size: 9pt; color: #666; }
}

/* ── Beta signup form ──────────────────────────────────────────────────────
   Only used on /beta. Built from the same tokens as .btn and .callout so the
   form reads as part of the system rather than a bolted-on widget. */

.signup {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 460px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.field label {
  font-family: var(--display);
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.field input {
  font-family: var(--text);
  font-size: var(--t-body);
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 13px 14px;
  width: 100%;
}

.field input::placeholder { color: var(--ink-3); }

.field input:focus-visible {
  outline: none;
  border-color: var(--pine);
  box-shadow: 0 0 0 3px var(--pine-wash);
}

.signup .btn { align-self: flex-start; }

.signup-note {
  font-size: var(--t-fine);
  color: var(--ink-3);
  max-width: var(--measure);
}

/* Status messages, revealed by site.js after a submit. */
.signup-status {
  display: none;
  font-size: var(--t-small);
  border-radius: 10px;
  padding: 12px 14px;
}

.signup-status[data-state="ok"] {
  display: block;
  background: var(--pine-wash);
  color: var(--pine-deep);
}

.signup-status[data-state="error"] {
  display: block;
  background: var(--clay-wash);
  color: var(--clay);
}

/* Ordered join steps on /beta. */
.joinsteps {
  list-style: none;
  counter-reset: join;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.joinsteps li {
  counter-increment: join;
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 14px;
  align-items: start;
}

.joinsteps li::before {
  content: counter(join);
  font-family: var(--display);
  font-size: var(--t-fine);
  font-weight: 700;
  color: var(--pine);
  background: var(--pine-wash);
  border-radius: 50%;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
}

.joinsteps h3 {
  font-family: var(--display);
  font-size: var(--t-d3);
  font-weight: 650;
  margin: 0 0 3px;
}

.joinsteps p { margin: 0; color: var(--ink-2); font-size: var(--t-small); }