/*
    Zinc Light — shared design system.

    A neutral zinc system (the Tailwind/shadcn zinc ramp) rather than the SensibleBots brand
    palette. This is a deliberate, requested departure from BRAND-GUIDELINES sections 6 and 7:
    navy/cream grounds and the Playfair display serif are replaced by zinc neutrals and Inter
    throughout, and the primary action colour is zinc-900 rather than gold. Gold appears only in
    the logo artwork and on the pricing cards' borders - buttons and links stay zinc.

    Two brand rules still hold and are NOT overridden here:
      - The lockup is never recoloured (section 5). Because the dark lockup carries a baked-in
        #131C31 ink panel, it cannot sit on a zinc-900 (#18181B) ground without showing as a
        rectangle - so the footer uses a LIGHT ground and the LIGHT lockup, and no logo is placed
        on the dark band at all.
      - Figures in any price column are IBM Plex Mono with tabular numerals (section 7).

    Logo sizing is unchanged and still derives from section 3 - see wwwroot/brand/README.md.
*/
:root{
  /* Zinc ramp */
  --z-50:#FAFAFA; --z-100:#F4F4F5; --z-200:#E4E4E7; --z-300:#D4D4D8; --z-400:#A1A1AA;
  --z-500:#71717A; --z-600:#52525B; --z-700:#3F3F46; --z-800:#27272A; --z-900:#18181B;
  --z-950:#09090B;

  /* Roles */
  --bg:#FFFFFF; --bg-alt:var(--z-50); --card:#FFFFFF;
  --text:var(--z-950); --muted:var(--z-500); --line:var(--z-200);
  --dark:var(--z-900); --dark-card:var(--z-800); --dark-line:var(--z-700);
  --dark-text:var(--z-50); --dark-muted:var(--z-400);

  /* Brand gold, the one colour borrowed back out of the logo (BRAND-GUIDELINES section 6:
     #B2892F on light grounds, #CFA64A on dark). Every pricing card sits on a light ground, so
     the light value is the one actually in use. This is brand furniture - section 6's "gold
     never means profit" still holds, so gold must not be used to mark a gain, a winning
     position, or a performance number anywhere in the app. */
  --gold:#B2892F; --gold-on-dark:#CFA64A;
  --gold-line:rgba(178,137,47,.5);
  --gold-wash:rgba(178,137,47,.05);
  --gold-glow:0 4px 24px -8px rgba(178,137,47,.45);
  /* Dark-ground counterparts, for the same hover treatment on the "How it works" band. */
  --gold-on-dark-wash:rgba(207,166,74,.10);
  --gold-on-dark-glow:0 4px 24px -8px rgba(207,166,74,.45);

  --f-body:"Inter",-apple-system,"Segoe UI",sans-serif;
  --f-mono:"IBM Plex Mono","SF Mono",Menlo,monospace;
  --wrap:1120px;
  --radius:8px; --radius-lg:12px;
  --ring:0 1px 2px 0 rgba(9,9,11,.05);
  --shadow:0 4px 24px -8px rgba(9,9,11,.12);
}
.zinc{ font-family:var(--f-body); font-size:16px; line-height:1.6; color:var(--text);
  background:var(--bg); -webkit-font-smoothing:antialiased; }
.zinc *,.zinc *::before,.zinc *::after{ box-sizing:border-box; }
.zinc img,.zinc svg{ display:block; max-width:100%; }
.zinc a{ color:inherit; }
.zinc :focus-visible{ outline:2px solid var(--z-900); outline-offset:2px; border-radius:4px; }
.zinc .wrap{ max-width:var(--wrap); margin:0 auto; padding:0 24px; }
.zinc h1,.zinc h2,.zinc h3,.zinc h4{ font-family:var(--f-body); margin:0;
  color:var(--text); font-weight:600; line-height:1.15; letter-spacing:-.025em; }
.zinc h1{ font-size:clamp(2.25rem,5vw,3.4rem); letter-spacing:-.035em; }
.zinc h2{ font-size:clamp(1.6rem,3vw,2.2rem); }
.zinc .lede{ font-size:clamp(1rem,1.4vw,1.12rem); color:var(--muted); margin:0; line-height:1.6; }

/* The brand tagline, verbatim and never reworded (section 8). Section 8 also specifies gold; the
   Zinc Light direction deliberately keeps gold to the logo alone, so it is set in zinc here. The
   0.34em tracking is kept. */
.zinc .tagline{ font-family:var(--f-body); font-size:.72rem; font-weight:500;
  letter-spacing:.34em; text-transform:uppercase; color:var(--muted); margin:0; }
.zinc .on-dark .tagline{ color:var(--dark-muted); }

.zinc .eyebrow{ display:inline-flex; align-items:center;
  font-family:var(--f-body); font-size:.72rem; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.zinc .on-dark .eyebrow{ color:var(--dark-muted); }

/* Buttons */
.zinc .btn{ display:inline-flex; align-items:center; justify-content:center;
  padding:11px 20px; border-radius:var(--radius); font-weight:500; font-size:.9rem;
  text-decoration:none; border:1px solid transparent; white-space:nowrap; cursor:pointer;
  transition:background .18s ease,border-color .18s ease,color .18s ease,box-shadow .18s ease; }
/* Buttons stay zinc; only the hover borrows the cards' gold, so the whole page answers the
   pointer in one voice without gold becoming an action colour. */
.zinc .btn-gold,.zinc .btn-navy{ background:var(--z-900); color:#FFFFFF; box-shadow:var(--ring); }
.zinc .btn-gold:hover,.zinc .btn-navy:hover{ background:var(--z-800); box-shadow:var(--gold-glow); }
.zinc .btn-line{ border-color:var(--line); color:var(--text); background:var(--bg); box-shadow:var(--ring); }
.zinc .btn-line:hover{ background:var(--gold-wash); border-color:var(--gold); box-shadow:var(--gold-glow); }
.zinc .on-dark .btn-gold{ background:#FFFFFF; color:var(--z-900); }
/* A soft gold shadow is invisible on a zinc-900 ground, so the dark CTA gets the ring instead -
   in #CFA64A, the value section 6 specifies for gold on dark. */
.zinc .on-dark .btn-gold:hover{ background:#FFFFFF; box-shadow:0 0 0 2px var(--gold-on-dark); }
.zinc .btn[disabled]{ opacity:.5; cursor:default; }
.zinc .btn-lg{ padding:13px 24px; font-size:.95rem; }

/* Nav */
.zinc .nav{ position:fixed; inset:0 0 auto 0; z-index:60; height:92px; display:flex; align-items:center;
  transition:background .2s ease, border-color .2s ease; border-bottom:1px solid transparent; }
.zinc .nav.stuck{ background:rgba(255,255,255,.85); backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px); border-bottom-color:var(--line); }
.zinc .nav-inner{ display:flex; align-items:center; justify-content:space-between; width:100%; }
/* Lockups are canvas-retightened the way sensibleinvesting.ca crops its own - see
   wwwroot/brand/README.md. The mark fills 0.831 of the rendered height, so 68px puts the tile at
   56px and the lockup at 286px wide: the same footprint the parent site's header logo has. The
   92px nav leaves 12px above and below, over the 8.3px of layout clear space section 3 requires
   on top of what the file itself carries. */
.zinc .logo{ height:68px; width:auto; }
.zinc .nav-links{ display:flex; align-items:center; gap:26px; }
.zinc .nav-links a:not(.btn){ text-decoration:none; font-size:.9rem; font-weight:500; color:var(--muted);
  transition:color .18s ease, text-shadow .18s ease; }
/* Same gold hover as the pricing cards/hero pills - a text-shadow glow stands in for the
   box-shadow glow those have, since a plain link carries no box to glow. */
.zinc .nav-links a:not(.btn):hover{ color:var(--gold); text-shadow:0 0 16px rgba(178,137,47,.35); }

/* Hamburger toggle - hidden above 720px, where .nav-links is always visible inline. */
.zinc .nav-toggle{ display:none; flex-direction:column; justify-content:center; align-items:center;
  gap:5px; width:40px; height:40px; padding:0; border:0; background:none; cursor:pointer; }
.zinc .nav-toggle span{ display:block; width:22px; height:2px; background:var(--z-900); border-radius:2px;
  transition:transform .2s ease, opacity .2s ease; }
.zinc .nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.zinc .nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.zinc .nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* Hero */
.zinc .hero{ padding:182px 0 104px; text-align:center; }
.zinc .hero h1{ margin:20px auto 22px; max-width:20ch; }
.zinc .hero .lede{ margin:0 auto; max-width:60ch; }
.zinc .hero .lede b{ font-weight:600; color:var(--text); }
.zinc .props{ display:flex; justify-content:center; flex-wrap:wrap; gap:8px; margin-top:30px; }
.zinc .prop{ display:inline-flex; align-items:center; gap:8px;
  font-size:.8rem; font-weight:500; color:var(--z-600);
  border:1px solid var(--line); background:var(--bg); border-radius:999px; padding:6px 14px;
  transition:border-color .18s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease; }
.zinc .prop::before{ content:""; width:5px; height:5px; border-radius:50%; background:var(--z-400);
  transition:background-color .18s ease; }
/* Same gold hover as the pricing cards - the pills read as touchable, which is the point. */
.zinc .prop:hover{ border-color:var(--gold); background:var(--gold-wash); color:var(--text);
  box-shadow:var(--gold-glow); }
.zinc .prop:hover::before{ background:var(--gold); }
.zinc .hero-ctas{ display:flex; justify-content:center; flex-wrap:wrap; gap:10px; margin-top:32px; }

/* Hero showcase - three quiet lines about the house bot that take turns under the CTAs. No
   box, no buttons: it is set in the hero's own type so the hero stays one centred
   composition. The slides share one grid cell, so the block keeps the tallest slide's height
   and only the opacity moves. This is the one place in the hero that wears the site's gold
   as a surface: gold hairline, gold-lined cards on the gold wash, gold labels and links.
   Outcome figures stay green/red - gold never means profit, same rule as the bot's page. */
.zinc .show{ max-width:640px; margin:44px auto 0; padding-top:24px; position:relative; }
.zinc .show::before{ content:""; position:absolute; top:0; left:50%; width:56px; height:2px;
  margin-left:-28px; border-radius:2px; background:var(--gold); }
.zinc .show-track{ display:grid; }
.zinc .show-slide{ grid-area:1/1; margin:0; font-size:.92rem; line-height:1.6; color:var(--muted);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  opacity:0; visibility:hidden; transform:translateY(6px);
  transition:opacity .5s ease, transform .5s ease, visibility 0s linear .5s; }
.zinc .show-slide.is-active{ opacity:1; visibility:visible; transform:none; transition-delay:0s; }
.zinc .show-slide b{ font-weight:600; color:var(--text); }
.zinc .show-slide a{ color:var(--gold); font-weight:500; text-decoration:none;
  border-bottom:1px solid var(--gold-line); transition:border-color .18s ease, color .18s ease, text-shadow .18s ease; }
.zinc .show-slide a:hover{ color:var(--text); border-bottom-color:var(--gold); text-shadow:0 0 16px rgba(178,137,47,.35); }
.zinc .show-avatar{ width:84px; height:84px; border-radius:50%; object-fit:cover;
  border:2px solid var(--gold); box-shadow:0 0 0 5px var(--gold-wash), var(--gold-glow); margin-bottom:6px; }
.zinc .show-name{ font-size:1.15rem; font-weight:600; color:var(--text); letter-spacing:-.01em; }
/* Slide two: the performance figures as small cards in the pricing cards' own gold dress -
   gold hairline, gold wash, gold label - at pill size so they stay part of the hero. */
.zinc .show-cards{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-top:4px; }
.zinc .show-card{ display:flex; flex-direction:column; align-items:center; gap:3px; min-width:104px;
  padding:10px 14px; border:1px solid var(--gold-line); border-radius:var(--radius); background:var(--gold-wash);
  transition:border-color .18s ease, box-shadow .18s ease, background-color .18s ease; }
.zinc .show-card:hover{ border-color:var(--gold); box-shadow:var(--gold-glow); }
.zinc .show-card .k{ font-size:.66rem; text-transform:uppercase; letter-spacing:.1em; color:var(--gold); font-weight:500; }
.zinc .show-card .v{ font-family:var(--f-mono); font-size:1.02rem; font-weight:600; color:var(--text);
  line-height:1.1; font-variant-numeric:tabular-nums; white-space:nowrap; }
.zinc .show-card .up{ color:#1E7F4F; }
.zinc .show-card .down{ color:#B42318; }
.zinc .show-note{ font-size:.76rem; color:var(--z-400); }
.zinc .show-dots{ display:flex; justify-content:center; gap:8px; margin-top:14px; }
.zinc .show-dot{ width:6px; height:6px; border-radius:50%; border:0; padding:0; background:var(--gold-line);
  cursor:pointer; transition:background-color .18s ease, transform .18s ease; }
.zinc .show-dot.is-active{ background:var(--gold); transform:scale(1.3); }
.zinc .show-dot:hover{ background:var(--gold); }

.zinc .head2{ display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:end; }
.zinc .head2 h2{ margin:14px 0 0; }

/* How it works — the one dark band. No logo is ever placed here (see the file header). */
.zinc .how{ background:var(--dark); color:var(--dark-text); padding:96px 0; }
.zinc .how h2{ color:var(--dark-text); }
.zinc .how .lede{ color:var(--dark-muted); }
.zinc .steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:52px; counter-reset:step; }
.zinc .step{ background:var(--dark-card); border:1px solid var(--dark-line);
  border-radius:var(--radius-lg); padding:22px 20px; counter-increment:step;
  transition:border-color .18s ease, box-shadow .18s ease, background-color .18s ease; }
/* Same gold hover as the pricing cards, in the dark-ground variant. */
.zinc .step:hover{ border-color:var(--gold-on-dark); background:var(--gold-on-dark-wash);
  box-shadow:var(--gold-on-dark-glow); }
.zinc .step::before{ content:counter(step); display:flex; align-items:center; justify-content:center;
  width:28px; height:28px; border-radius:var(--radius); background:var(--z-50); color:var(--z-900);
  font-family:var(--f-mono); font-weight:600; font-size:.8rem; margin-bottom:14px; }
.zinc .step h4{ font-size:1rem; color:var(--dark-text); margin:0 0 6px; letter-spacing:-.01em; }
.zinc .step p{ font-size:.86rem; color:var(--dark-muted); margin:0; line-height:1.55; }
.zinc .scope-note{ margin-top:26px; font-size:.82rem; color:var(--z-400); }
/* This line carries the Exchange Patron CTA, so the link has to read as one on a dark ground. */
.zinc .scope-note a{ color:var(--z-50); text-decoration:underline;
  text-underline-offset:3px; text-decoration-color:var(--z-600); font-weight:500; }
.zinc .scope-note a:hover{ text-decoration-color:var(--z-50); }

/* Why */
.zinc .why{ padding:96px 0; }
.zinc .why .head2{ margin-bottom:44px; }
/* Strategy-bot section: same light band and cards as Why, a hairline keeps the two from
   reading as one very long section. */
.zinc .practice{ border-top:1px solid var(--line); }
.zinc .cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.zinc .c{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:28px 26px; box-shadow:var(--ring);
  transition:border-color .2s ease, box-shadow .2s ease, background-color .2s ease; }
/* Same gold hover as the pricing cards. */
.zinc .c:hover{ border-color:var(--gold); background:var(--gold-wash); box-shadow:var(--gold-glow); }
.zinc .c .n{ font-size:.72rem; font-weight:500; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted); }
.zinc .c h3{ font-size:1.15rem; margin:12px 0 10px; }
.zinc .c p{ font-size:.92rem; color:var(--muted); margin:0; }
/* The footer line sits at the same height on every card in a row: the card is a column flex
   box and the footer is pushed to its bottom, with the body text keeping a 16px minimum gap. */
.zinc .c{ display:flex; flex-direction:column; }
.zinc .c p:not(.vs){ margin-bottom:16px; }
.zinc .c .vs{ margin-top:auto; padding-top:14px; border-top:1px solid var(--line);
  font-size:.8rem; color:var(--z-400); }

/* Pricing */
.zinc .pricing{ background:var(--bg-alt); border-top:1px solid var(--line);
  border-bottom:1px solid var(--line); padding:96px 0; }
.zinc .price-head{ text-align:center; max-width:620px; margin:0 auto 44px; }
.zinc .price-head h2{ margin:14px 0 12px; }
/* The pricing cards are the one place the zinc system lets the logo's gold back in. A softened
   gold hairline at rest, full strength on hover and on the featured card - enough warmth to make
   the boxes charming without turning gold into a status colour. */
.zinc .plan{ background:var(--card); border:1px solid var(--gold-line); border-radius:var(--radius-lg);
  padding:28px 26px; display:flex; flex-direction:column; height:100%; box-shadow:var(--ring);
  transition:border-color .18s ease, box-shadow .18s ease, background-color .18s ease; }
.zinc .plan:hover{ border-color:var(--gold); background:var(--gold-wash); box-shadow:var(--gold-glow); }
/* The featured card was distinguished by a near-black border; with every card now gold-edged it
   needs a stronger gold instead - a second ring rather than a thicker border, so nothing shifts. */
.zinc .plan.best{ border-color:var(--gold); background:var(--gold-wash);
  box-shadow:0 0 0 1px var(--gold), var(--gold-glow); position:relative; }
/* Sold out is a dead card: no hover warmth, or it invites a click that goes nowhere. */
.zinc .plan.soldout{ opacity:.55; }
.zinc .plan.soldout:hover{ border-color:var(--gold-line); background:var(--card); box-shadow:var(--ring); }
/* Disabled is the same treatment for a card that isn't purchasable yet at all (the regular plan,
   shown for comparison while the campaign is on) - not sold out, just not on sale. */
.zinc .plan.disabled{ opacity:.55; }
.zinc .plan.disabled:hover{ border-color:var(--gold-line); background:var(--card); box-shadow:var(--ring); }
/* Near-black on gold, not white: white on #B2892F is 3.2:1 and this pill is 0.62rem. */
.zinc .plan .flag-tag{ position:absolute; top:-11px; left:26px; background:var(--gold); color:var(--z-900);
  font-size:.62rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  padding:4px 11px; border-radius:999px; }
.zinc .plan h3{ font-size:1.1rem; }
.zinc .plan .blurb{ margin-top:8px; font-size:.86rem; color:var(--muted); }
/* Perk bullets. The marker is a gold dot drawn with ::before rather than list-style, so it can
   take the brand colour and stay optically centred on the first line of a wrapping bullet. */
.zinc .plan .perks{ list-style:none; margin:14px 0 0; padding:0;
  display:flex; flex-direction:column; gap:9px; }
.zinc .plan .perks li{ position:relative; padding-left:18px;
  font-size:.85rem; line-height:1.5; color:var(--muted); }
.zinc .plan .perks li::before{ content:""; position:absolute; left:0; top:.5em;
  width:5px; height:5px; border-radius:50%; background:var(--gold); }
/* Section 7 still applies: figures in a price column are mono with tabular numerals.
   margin-top:auto bottom-anchors the whole price/seats/button group, so the four figures line up
   across the row however unevenly the blurbs above them wrap - without it, Exchange Patron's
   five-line blurb pushes its price half a card below Early Access's. */
.zinc .plan .amt{ margin-top:auto; padding-top:18px; font-family:var(--f-mono); font-size:1.7rem; font-weight:600;
  font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1;
  color:var(--text); line-height:1; letter-spacing:-.02em; }
.zinc .plan .amt span{ font-family:var(--f-mono); font-size:.75rem; font-weight:400; color:var(--muted); }
.zinc .plan .seats{ margin-top:10px; font-family:var(--f-mono); font-size:.72rem;
  font-variant-numeric:tabular-nums; color:var(--muted); }
.zinc .plan .seats .badge-soldout{ background:var(--z-200); color:var(--z-600); padding:2px 9px;
  border-radius:999px; font-size:.68rem; font-family:var(--f-body); letter-spacing:.06em; }
/* The bottom anchor moved up to .amt, so the button just needs normal spacing (and its own
   symmetric padding back - the old padding-top override made it 3px taller on top than bottom). */
.zinc .plan .btn{ margin-top:18px; }
/* auto-fit rather than a fixed column count: which tiers show is now admin-toggled, and the
   landing page also adds its own extra (regular-plan) card - the count is not always 4, so a
   fixed repeat(4,1fr) would strand a lone last-row card instead of letting the row reflow.
   195px (not 220px) is deliberate: at --wrap's 1120px (1072px inside the padding), 5 cards at
   195px + 4 gaps of 16px is 1039px - the landing page's worst case (4 tiers + the regular-plan
   card) still fits in ONE row rather than stranding a 5th card alone on its own row. */
.zinc .tiers-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(195px,1fr)); gap:16px; }

/* Close */
.zinc .close{ background:var(--dark); color:var(--dark-text); text-align:center; padding:96px 0; }
.zinc .close h2{ color:var(--dark-text); margin:16px auto 14px; max-width:20ch; }
.zinc .close .lede{ color:var(--dark-muted); max-width:52ch; margin:0 auto; }
.zinc .close .btn{ margin-top:30px; }
.zinc .close-micro{ margin-top:16px; font-size:.78rem; color:var(--z-500); }

/* Footer. Light ground on purpose: the dark lockup carries a baked-in #131C31 panel that would
   show as a rectangle on zinc-900, so the footer stays light and uses the LIGHT lockup. */
.zinc footer{ background:var(--bg); color:var(--muted); padding:56px 0 36px; font-size:.88rem;
  border-top:1px solid var(--line); }
.zinc .foot-grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:36px; }
.zinc .foot-logo{ height:68px; width:auto; }
/* 14px clears brand §3: a quarter-tile is 49 user units, 20 of which are already
   inside the cropped canvas, and the remaining 29 are 8.4px at this render height. */
.zinc .foot-brand address{ font-style:normal; margin-top:14px; line-height:1.7; font-size:.84rem; }
.zinc .foot-col h4{ font-size:.72rem; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; color:var(--text); margin-bottom:14px; }
.zinc .foot-col ul{ list-style:none; display:flex; flex-direction:column; gap:9px; margin:0; padding:0; }
.zinc .foot-col a{ text-decoration:none; }
.zinc .foot-col a:hover{ color:var(--text); }
.zinc .foot-legal{ margin-top:40px; padding-top:20px; border-top:1px solid var(--line);
  display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap;
  font-size:.76rem; color:var(--z-400); line-height:1.65; }
.zinc .foot-legal .disc{ max-width:66ch; }

/* Motion */
.zinc .rev{ opacity:0; transform:translateY(12px); transition:opacity .5s ease, transform .5s ease; }
.zinc .rev.in{ opacity:1; transform:none; }
html:has(.zinc){ scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){
  html:has(.zinc){ scroll-behavior:auto; }
  .zinc .rev{ opacity:1; transform:none; transition:none; }
  .zinc .c:hover{ box-shadow:var(--ring); }
}

/* Responsive */
@media (max-width:1000px){
  .zinc .head2{ grid-template-columns:1fr; gap:20px; align-items:start; }
  .zinc .steps{ grid-template-columns:repeat(2,1fr); }
  .zinc .cards{ grid-template-columns:1fr; }
  .zinc .foot-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:720px){
  .zinc .hero{ padding:132px 0 76px; }
  .zinc .how,.zinc .why,.zinc .pricing,.zinc .close{ padding:68px 0; }
  /* A 286px lockup plus the CTA overflows a 360px phone. 46px renders the mark 186px wide, still
     clear of section 3's 180px minimum - that floor, not the layout, is what sets this value. */
  .zinc .nav{ height:76px; }
  .zinc .logo{ height:46px; }
  .zinc .foot-logo{ height:56px; }
  .zinc .steps{ grid-template-columns:1fr; }
  .zinc .tiers-grid{ grid-template-columns:1fr; }
  .zinc .show{ margin-top:36px; }
  .zinc .show-slide{ font-size:.88rem; }
  .zinc .foot-grid{ grid-template-columns:1fr; }

  /* Nav collapses to a hamburger-triggered dropdown instead of hiding the links outright, so
     "How it works"/"Why us"/"Sign in" stay reachable without scrolling past a wall of anchors. */
  .zinc .nav-toggle{ display:flex; }
  .zinc .nav-links{ position:absolute; top:76px; left:0; right:0; flex-direction:column;
    align-items:stretch; gap:0; background:var(--bg); border-bottom:1px solid var(--line);
    box-shadow:var(--shadow); max-height:0; overflow:hidden; opacity:0; pointer-events:none;
    transition:max-height .25s ease, opacity .2s ease; }
  .zinc .nav-links.open{ max-height:320px; opacity:1; pointer-events:auto; }
  .zinc .nav-links a:not(.btn){ display:block; padding:14px 24px; border-bottom:1px solid var(--line); }
  .zinc .nav-links a.btn{ margin:14px 24px; }
}

/* ---------------------------------------------------------------------------
   Content pages (Membership, Sponsors)

   The landing page brings its own nav/sections; these are ordinary pages inside
   _LayoutMarketing's shell, so they need the primitives Bootstrap used to supply.
   Same tokens, same radii, same button classes as above - nothing new invented.
   --------------------------------------------------------------------------- */
.zinc .page{ max-width:640px; margin:0 auto; }
.zinc .page-narrow{ max-width:460px; margin:0 auto; }
.zinc .page h1{ font-size:1.6rem; margin:0 0 6px; }
.zinc .page-lede{ color:var(--muted); font-size:.95rem; margin:0 0 28px; }
.zinc .center{ text-align:center; }

/* Panel — the card equivalent for a form or a block of content */
.zinc .panel{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:28px 26px; box-shadow:var(--ring); }

/* Forms */
.zinc .field{ margin-bottom:18px; }
.zinc .field:last-of-type{ margin-bottom:24px; }
.zinc label{ display:block; font-size:.85rem; font-weight:500; color:var(--text); margin-bottom:6px; }
.zinc .input{ display:block; width:100%; padding:9px 12px; font-family:var(--f-body); font-size:.92rem;
  color:var(--text); background:var(--bg); border:1px solid var(--z-300); border-radius:var(--radius);
  transition:border-color .15s ease, box-shadow .15s ease; }
.zinc .input:focus{ outline:none; border-color:var(--z-900); box-shadow:0 0 0 3px rgba(9,9,11,.08); }
.zinc .input::placeholder{ color:var(--z-400); }
.zinc .help{ margin:6px 0 0; font-size:.8rem; color:var(--muted); }
.zinc .error{ display:block; margin-top:6px; font-size:.8rem; color:#B4392B; }
.zinc .error:empty{ display:none; }
.zinc .btn-block{ width:100%; }

/* Search row — input and button joined */
.zinc .input-row{ display:flex; gap:8px; margin-bottom:26px; }
.zinc .input-row .input{ flex:1; }

/* Alerts */
.zinc .alert{ border:1px solid var(--line); border-radius:var(--radius); padding:12px 14px;
  font-size:.9rem; background:var(--z-50); color:var(--z-700); margin-bottom:20px; }
.zinc .alert-strong{ background:var(--z-900); border-color:var(--z-900); color:var(--z-50); }
.zinc .alert-warn{ background:#FEFCE8; border-color:#FDE68A; color:#854D0E; }
.zinc .alert-danger{ background:#FEF2F2; border-color:#FECACA; color:#B4392B; }
.zinc .alert-success{ background:#F0FDF4; border-color:#BBF7D0; color:#15803D; }

/* List rows — the list-group equivalent */
.zinc .list{ border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden;
  background:var(--card); box-shadow:var(--ring); }
.zinc .list-row{ display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:13px 16px; text-decoration:none; color:var(--text); font-size:.92rem;
  border-bottom:1px solid var(--line); transition:background .12s ease; }
.zinc .list-row:last-child{ border-bottom:none; }
.zinc .list-row:hover{ background:var(--z-50); }
.zinc .list-row .chev{ color:var(--z-400); flex:none; }

/* Badge */
.zinc .badge{ display:inline-block; background:var(--z-100); color:var(--z-600);
  border-radius:999px; padding:2px 9px; font-size:.7rem; font-weight:500; letter-spacing:.02em; }

/* Quiet back/forward link */
.zinc .link-quiet{ display:inline-block; margin-top:20px; font-size:.88rem; color:var(--muted);
  text-decoration:none; }
.zinc .link-quiet:hover{ color:var(--text); text-decoration:underline; text-underline-offset:3px; }

.zinc .strong{ font-weight:600; }

/* Shell used by _LayoutMarketing (Membership, Sponsors) */
.zinc .page-header{ border-bottom:1px solid var(--line); padding:18px 0; }
/* Hold the footer at the bottom of the viewport rather than letting it ride up under a short
   page - a bot profile with two open positions was ending with the footer a few pixels below
   the last card, which reads as the page having been cut off. min-height on the shell, and
   .page-main takes the slack. Opted into by .page-shell so the landing layout, which shares
   this stylesheet and has no .page-main, is untouched. */
/* margin:0 belongs with min-height:100vh, not apart from it. .zinc never zeroed the body's
   default 8px margin - harmless while every page was taller than the window, but with a
   100vh floor it becomes 100vh + 16px and puts a scrollbar on a page that fits exactly.
   Scoped to .page-shell so the landing and auth layouts keep the margin they render with
   today; here it also lets the header and footer rules reach the window edge. */
.zinc.page-shell{ margin:0; min-height:100vh; display:flex; flex-direction:column; }
.zinc.page-shell .page-main{ flex:1 0 auto; }
.zinc .page-main{ padding:56px 0 72px; }
.zinc .page-footer{ border-top:1px solid var(--line); padding:32px 0 40px; text-align:center; }
.zinc .page-footer .tagline{ margin-bottom:14px; }
.zinc .foot-links{ display:flex; justify-content:center; flex-wrap:wrap; gap:22px; margin:0 0 12px; }
.zinc .foot-links a{ font-size:.85rem; color:var(--muted); text-decoration:none; }
.zinc .foot-links a:hover{ color:var(--text); }
.zinc .foot-copy{ margin:0; font-size:.78rem; color:var(--z-400); }
@media (max-width:720px){
  .zinc .page-main{ padding:40px 0 56px; }
}

/* ---------------------------------------------------------------------------
   Auth pages (_LayoutAuth): sign in, forgot/reset password, 2FA, confirmations.
   The layout supplies the whole shell, so each page only renders its heading and
   form - the centred-wrapper markup used to be copy-pasted into all ten.
   --------------------------------------------------------------------------- */
.zinc .auth-shell{ min-height:100vh; display:flex; flex-direction:column;
  align-items:center; justify-content:center; padding:40px 20px; }
.zinc .auth-logo{ height:56px; width:auto; margin-bottom:22px; }
.zinc .auth-card{ width:100%; max-width:420px; background:var(--card);
  border:1px solid var(--line); border-radius:var(--radius-lg); padding:32px 30px;
  box-shadow:var(--shadow); }
.zinc .auth-card h1{ font-size:1.35rem; text-align:center; margin:0 0 22px; }
.zinc .auth-card .page-lede{ text-align:center; margin-bottom:22px; }
.zinc .auth-foot{ margin-top:22px; font-size:.85rem; color:var(--muted); text-align:center; }
.zinc .auth-foot a{ color:var(--text); text-decoration:underline; text-underline-offset:3px; }
.zinc .auth-note{ margin:18px 0 0; font-size:.82rem; color:var(--muted); text-align:center; }
.zinc .auth-note a{ color:var(--text); }

/* Label row with a trailing link (e.g. "Password  ...  Forgot password?") */
.zinc .label-row{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.zinc .label-row a{ font-size:.8rem; color:var(--muted); text-decoration:none; }
.zinc .label-row a:hover{ color:var(--text); text-decoration:underline; text-underline-offset:3px; }

/* Password field with a reveal toggle. Text, not an icon font: the feather icons
   lived in Dashkit's bundle, which the zinc pages no longer load. */
.zinc .input-reveal{ position:relative; }
.zinc .input-reveal .input{ padding-right:64px; }
.zinc .reveal-btn{ position:absolute; top:50%; right:8px; transform:translateY(-50%);
  background:none; border:0; padding:4px 6px; font-family:var(--f-body); font-size:.78rem;
  font-weight:500; color:var(--muted); cursor:pointer; border-radius:4px; }
.zinc .reveal-btn:hover{ color:var(--text); background:var(--z-100); }

/* Checkbox */
.zinc .check{ display:flex; align-items:center; gap:9px; margin-bottom:20px; }
.zinc .check input{ width:16px; height:16px; accent-color:var(--z-900); margin:0; }
.zinc .check label{ margin:0; font-weight:400; font-size:.88rem; color:var(--z-600); }