/* ============================================================================
   SYSTEMS BY VEGA — design system
   ----------------------------------------------------------------------------
   The catalog wearing the original agency identity, preserved at 3be3bcb.
   Every token below is lifted verbatim from that file — nothing reinterpreted:

     --paper #F1F4F8  --panel #FFFFFF  --ink #161B22  --ink-soft #48515F
     --hair #DCE2EA   --amber #E8791B  --amber-deep #C9620C
     --con #141821    --con-2 #1C2230  --con-hair #2C3444
     --con-text #E8ECF2  --con-muted #949EAE  --con-amber #F3922F
     Archivo · IBM Plex Sans · IBM Plex Mono · the V-square

   THE BAND SYSTEM IS THE STRUCTURE.
   The agency page ran full-width bands in three tones — paper, white panel,
   and dark console — and never put two of the same tone next to each other.
   That rhythm is what made a long page readable, so the catalog inherits it.

   Bands are assigned BY EXISTING ID. No markup was added to carry them, which
   is why catalog-render.js, the registry and every data hook are untouched.
   Each band declares a local token set and every component below reads those
   locals — so one component definition renders correctly on all three grounds
   instead of needing a dark variant.

   WHAT CAME FROM THE AGENCY PAGE AND EARNS ITS PLACE:
     .scard        → the catalog card: 13px radius, soft shadow, -3px hover
     .scard.feat   → an OPEN card: amber border + amber-tinted glow. The old
                     page used this to mark its one featured service; here it
                     marks the two businesses you can actually buy today. Same
                     device, same job.
     .step         → the mono eyebrow with an amber rule
     .psign        → the caveat block
   ========================================================================= */

:root{
  /* ---- verbatim from 3be3bcb ---------------------------------------- */
  --paper:      #F1F4F8;
  --panel:      #FFFFFF;
  --ink:        #161B22;
  --ink-soft:   #48515F;
  --hair:       #DCE2EA;
  --amber:      #E8791B;
  --amber-deep: #C9620C;
  --con:        #141821;
  --con-2:      #1C2230;
  --con-hair:   #2C3444;
  --con-text:   #E8ECF2;
  --con-muted:  #949EAE;
  --con-amber:  #F3922F;
  --shadow:     0 1px 2px rgba(20,28,40,.05),0 10px 30px rgba(20,28,40,.07);

  /* amber-deep is #C9620C, which lands at 4.4:1 on white — just under AA for
     body-sized text. Small amber labels use this darkened cousin instead; the
     original amber is kept for borders, fills and large type where it passes. */
  --amber-text: #A94E06;

  /* Family second-colours. The catalog always sits on a light ground, so
     these are chosen dark and saturated enough to carry 9.5px mono type at
     AA — a pastel would look better and fail the reader. Sale & Resale wears
     the house amber, because it is the family holding both open platforms. */
  --fam-sale-resale:   #A9560A;
  --fam-haul-clear:    #14705A;
  --fam-curb-exterior: #1B5E8F;
  --fam-auto:          #5B3E8F;
  --fam-home-trade:    #9C3A2A;
  --fam-people-pets:   #4A6B1F;

  --display: 'Archivo', system-ui, 'Segoe UI', sans-serif;
  --body:    'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --mono:    'IBM Plex Mono', ui-monospace, Consolas, monospace;

  /* Own Your Town plate tokens — verbatim from GarageSaleBiz HEAD:niches.html */
  --plate-ink:    #16130E;
  --flame:        #E8471F;   /* arrows only — outlined in ink, so not a text bg */
  --stamp:        #C0311F;   /* the source palette rubber-stamp red */
  --open-green:   #17703D;   /* source #1E8A4C darkened */
  --metal:        #A8ADB5;
  --shadow-hard:  6px 6px 0 rgba(0,0,0,.5);
  --shadow-hover: 10px 12px 0 rgba(0,0,0,.55);

  --lift-1: 0 1px 2px rgba(0,0,0,.35), 0 6px 18px -8px rgba(0,0,0,.5);
  --lift-2: 0 1px 0 rgba(255,255,255,.06) inset, 0 18px 44px -16px rgba(0,0,0,.75);

  --shell:1080px; --narrow:700px; --gutter:24px; --tap:48px;
}

/* ======================================================== THE BAND SYSTEM ==
   Three grounds. Assigned by ID so no markup carries a band class. Order on
   the page is deliberate and never repeats a tone back to back:

     nav        dark        #catalog   paper       #founder   dark
     hero       dark        #line      white       #websites  white
     #how       white       #proof     dark        #faq       paper
                            #registry  paper       footer     dark

   In page order: dark, white, paper, white, dark, paper, dark, white, paper,
   dark. No tone ever repeats back to back — a repeat is what makes a long
   page read as one flat slab, which is the failure this rhythm exists to
   avoid. Only four bands are dark, and they are spaced so the eye resets
   between them.
*/
.plate, #catalog, #proof, #founder, .foot{
  --bg:      var(--con);
  --surface: var(--con-2);
  --surface-2:#171C26;
  --tx:      var(--con-text);
  --tx-2:    #B7C0CC;
  --tx-3:    var(--con-muted);
  --rule:    var(--con-hair);
  --rule-2:  #39434F;
  --acc:     var(--con-amber);
  --acc-tx:  var(--con-amber);
  --acc-ink: #1a1206;
  --elev:    var(--lift-1);
  --elev-2:  var(--lift-2);
  --feat:      var(--con-amber);
  --feat-glow: rgba(243,146,47,.20);
  /* Family colours are re-declared brighter here. The light-ground set below
     is chosen dark enough to read on paper, which makes it invisible on
     #141821 — the same hue cannot serve both grounds. */
  --fam-sale-resale:   #F3922F;
  --fam-haul-clear:    #4FD1A5;
  --fam-curb-exterior: #6FB8F0;
  --fam-auto:          #B79BFF;
  --fam-home-trade:    #FF8A6B;
  --fam-people-pets:   #A9D65C;
  background:var(--bg);
  color:var(--tx);
}
#how, #line, #websites{
  --bg:      var(--panel);
  --surface: var(--paper);
  --surface-2:var(--panel);
  --tx:      var(--ink);
  --tx-2:    var(--ink-soft);
  --tx-3:    #5A6472;   /* 6.0:1 on white, 5.4:1 on paper */
  --rule:    var(--hair);
  --rule-2:  #C3CCD8;
  --acc:     var(--amber);
  --acc-tx:  var(--amber-text);
  --acc-ink: #1a1206;
  --elev:    var(--shadow);
  --elev-2:  0 14px 36px rgba(20,28,40,.1);
  --feat:      var(--amber);
  --feat-glow: rgba(232,121,27,.14);
  background:var(--bg);
  color:var(--tx);
}
#registry, #faq{
  --bg:      var(--paper);
  --surface: var(--panel);
  --surface-2:var(--panel);
  --tx:      var(--ink);
  --tx-2:    var(--ink-soft);
  --tx-3:    #5A6472;   /* 6.0:1 on white, 5.4:1 on paper */
  --rule:    var(--hair);
  --rule-2:  #C3CCD8;
  --acc:     var(--amber);
  --acc-tx:  var(--amber-text);
  --acc-ink: #1a1206;
  --elev:    var(--shadow);
  --elev-2:  0 14px 36px rgba(20,28,40,.1);
  --feat:      var(--amber);
  --feat-glow: rgba(232,121,27,.14);
  background:var(--bg);
  color:var(--tx);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  background:var(--paper);color:var(--ink);
  font-family:var(--body);font-size:16px;line-height:1.62;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,svg{max-width:100%;height:auto;display:block}
.wrap{max-width:var(--shell);margin:0 auto;padding:0 var(--gutter)}
.wrap-narrow{max-width:var(--narrow);margin:0 auto;padding:0 var(--gutter)}
.mono{font-family:var(--mono)}
:focus-visible{outline:2px solid var(--acc,var(--amber));outline-offset:3px}

/* ---------------------------------------------------------------- type --- */
.eyebrow{
  font-family:var(--mono);font-weight:600;font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--acc-tx);display:inline-flex;align-items:center;gap:10px;
}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--acc)}
.display{font-family:var(--display);font-weight:900;line-height:1.02;letter-spacing:-.03em}
h1.display{font-size:clamp(36px,6.2vw,64px);text-transform:none;max-width:18ch;margin:0 auto}
h2{font-family:var(--display);font-weight:800;font-size:clamp(26px,4vw,38px);
  letter-spacing:-.02em;line-height:1.08;color:var(--tx)}
h3{font-family:var(--display);font-weight:700;font-size:18px;letter-spacing:-.01em;color:var(--tx)}
.lede{font-size:17px;color:var(--tx-2);max-width:62ch}
.fine{font-family:var(--mono);font-size:11.5px;line-height:1.7;color:var(--tx-3)}

/* -------------------------------------------------------------- buttons --- */
.btn{font-family:var(--display);font-weight:700;font-size:15.5px;text-decoration:none;
  padding:15px 28px;min-height:var(--tap);display:inline-flex;align-items:center;
  justify-content:center;gap:8px;border:1px solid transparent;border-radius:9px;cursor:pointer;
  transition:background .18s,color .18s,border-color .18s,transform .18s,box-shadow .18s}
.btn-pri{background:var(--acc);color:var(--acc-ink);border-color:var(--acc)}
.btn-pri:hover{transform:translateY(-2px);box-shadow:0 10px 26px -10px var(--acc)}
.btn-sec{background:transparent;color:var(--tx);border-color:var(--rule-2)}
.btn-sec:hover{border-color:var(--acc);color:var(--acc-tx);transform:translateY(-2px)}
.btn-block{width:100%}
.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none}

.link{font-family:var(--display);font-weight:700;font-size:13.5px;color:var(--acc-tx);
  text-decoration:none;border-bottom:2px solid transparent;padding-bottom:2px;
  transition:border-color .15s}
.link:hover{border-bottom-color:var(--acc)}


/* ------------------------------------------------------------------ nav --- */
.nav{position:sticky;top:0;z-index:60;background:rgba(20,24,33,.92);
  backdrop-filter:blur(10px);border-bottom:1px solid #232a37}
.nav-in{max-width:var(--shell);margin:0 auto;padding:11px var(--gutter);display:flex;
  align-items:center;justify-content:space-between;gap:16px}
/* The V-square, rebuilt in CSS. The brand lives here at normal size — the
   hero is for the message, not the logo. */
.nav-brand{font-family:var(--display);font-weight:800;font-size:16px;letter-spacing:-.01em;
  text-decoration:none;color:#fff;display:inline-flex;align-items:center;gap:10px;min-height:44px}
.nav-brand::before{
  content:"V";width:24px;height:24px;border-radius:6px;
  background:linear-gradient(135deg,var(--con-amber),var(--amber-deep));
  display:grid;place-items:center;color:#1a1206;
  font-size:13px;font-weight:900;font-family:var(--display);flex:0 0 auto;
}
.nav-links{display:flex;align-items:center;gap:8px}
.nav-links a{font-family:var(--display);font-weight:700;font-size:13.5px;color:#C2CAD6;
  text-decoration:none;padding:9px 14px;min-height:var(--tap);display:inline-flex;
  align-items:center;border-radius:7px;transition:color .18s,background .18s}
.nav-links a:hover{color:#fff;background:rgba(255,255,255,.07)}
@media (max-width:820px){.nav-links{display:none}}

/* ------------------------------------------------------------- masthead --- */
/* Headline-led and sized like the agency hero — clamp(36px,6.2vw,64px). The
   wordmark deliberately does not appear here. */
.plate{padding:0 0 0;position:relative;overflow:hidden}
.plate::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(760px 340px at 82% -10%,rgba(243,146,47,.16),transparent 70%)}
.plate > *{position:relative}
.plate-body{padding:64px 0 8px;text-align:center}
.plate-sub{font-family:var(--mono);font-weight:600;font-size:12px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--acc);margin:0 0 22px}
.thesis{font-family:var(--body);font-weight:400;font-size:clamp(17px,2.2vw,20.5px);
  line-height:1.6;max-width:56ch;margin:24px auto 0;color:var(--tx-2)}
.thesis em{font-style:normal;color:var(--acc);font-weight:600}
.plate-cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin:34px 0 46px}

/* The agency page's hero chips, carrying the three real figures. */
.ledger-bar{display:grid;grid-template-columns:repeat(3,1fr);
  background:rgba(255,255,255,.04);border:1px solid #283040;border-radius:10px;
  overflow:hidden;margin-bottom:56px}
.ledger-cell{padding:20px 12px;text-align:center;border-right:1px solid #283040}
.ledger-cell:last-child{border-right:0}
.ledger-cell b{display:block;font-family:var(--display);font-weight:900;
  font-size:clamp(28px,4.6vw,40px);line-height:1;color:var(--acc);
  font-variant-numeric:lining-nums tabular-nums}
.ledger-cell span{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--tx-3);margin-top:9px}

/* -------------------------------------------------------------- sections --- */
.section{padding:64px 0;border-top:1px solid var(--rule)}
/* Bands are full-width and butt against each other; a hairline between two
   different grounds is noise, so only same-tone neighbours keep one. */
#proof, #registry, #catalog, #how, #line, #websites, #faq, #founder{border-top:0}
.section-head{margin-bottom:30px}
.section-head h2{margin:12px 0 16px}

.plate-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding-bottom:14px;border-bottom:1px solid var(--rule)}
.plate-no{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--fam);border:1px solid var(--fam);
  border-radius:6px;padding:4px 10px}
.plate-title{font-family:var(--display);font-weight:800;font-size:clamp(20px,3.4vw,30px);
  letter-spacing:-.022em;color:var(--tx)}
.plate-note{font-size:14.5px;color:var(--tx-2);margin:14px 0 24px;max-width:66ch}
.family{margin-bottom:52px}
.family:last-child{margin-bottom:0}

/* ---------------------------------------------------------- the catalog ---
   THE "OWN YOUR TOWN" PLATE, ported from GarageSaleBiz HEAD:niches.html.
   Every device is the original's: the ruled surface, two galvanised staples
   punched through the top edge, the tilted circular sticker, the stamped
   status pill, the mono index label, the dashed divider, the red-arrow row.

   ONE ADAPTATION. The source had six yellow plates. Twenty-nine would be a
   yellow wall and the eye would stop separating them, so the paper tone varies
   by family — yellow kept for Sale & Resale, the family holding both open
   platforms. The board then reads as different forms pinned up together
   rather than one sign repeated.

   Every paper carries the same near-black ink and all six are light enough to
   do it at AA. The plates sit on the dark catalog band, which is what makes
   them read as pinned objects rather than as the page itself.               */

.family[data-fam="sale-resale"]   { --pa:#FFCE3B; --pb:#F5BE1E; }  /* yard-sign yellow */
.family[data-fam="haul-clear"]    { --pa:#DCC29A; --pb:#D0B387; }  /* kraft */
.family[data-fam="curb-exterior"] { --pa:#AEDCC4; --pb:#9CD0B6; }  /* mint */
.family[data-fam="auto"]          { --pa:#B4C9E2; --pb:#A4BAD7; }  /* carbon blue */
.family[data-fam="home-trade"]    { --pa:#F2C6C0; --pb:#E7B4AD; }  /* receipt pink */
.family[data-fam="people-pets"]   { --pa:#E6DFA8; --pb:#DAD296; }  /* manila */

.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:34px 26px;padding-top:10px}
@media (max-width:900px){.grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.grid{grid-template-columns:1fr;gap:30px}}

/* the plate */
.entry.sheet{
  position:relative;
  display:flex;flex-direction:column;
  padding:26px 22px 20px;
  color:var(--plate-ink);
  background:
    repeating-linear-gradient(180deg, rgba(0,0,0,.05) 0 2px, rgba(255,255,255,.05) 2px 4px, transparent 4px 9px),
    linear-gradient(180deg, var(--pa,#FFCE3B), var(--pb,#F5BE1E));
  border:3px solid var(--plate-ink);
  border-radius:6px;
  box-shadow:var(--shadow-hard);
  transition:transform .16s ease, box-shadow .16s ease;
}
@media (min-width:601px){.entry.sheet{min-height:268px}}

/* Pinned by hand, not machine-set. Kept under 1.2deg so a row of three still
   reads as a row. */
.grid > .entry.sheet:nth-child(odd){transform:rotate(-1deg)}
.grid > .entry.sheet:nth-child(even){transform:rotate(1deg)}
.entry.sheet:hover{transform:rotate(0) translateY(-5px);box-shadow:var(--shadow-hover);z-index:2}
.entry.sheet:focus-within{transform:rotate(0);z-index:2}

/* staples through the top edge */
.staple{
  position:absolute;top:-5px;width:22px;height:8px;border-radius:2px;
  background:linear-gradient(180deg,#C9CED6,var(--metal) 55%,#7E848E);
  border:1px solid #5C616A;box-shadow:0 1px 0 rgba(0,0,0,.4);
}
.staple.l{left:14%;transform:rotate(-2deg)}
.staple.r{right:14%;transform:rotate(2deg)}

/* the tilted circular sticker */
.sticker{
  position:absolute;top:-16px;right:-12px;
  width:74px;height:74px;border-radius:50%;
  display:grid;place-items:center;text-align:center;
  transform:rotate(9deg);
  border:3px solid var(--plate-ink);
  box-shadow:3px 3px 0 rgba(0,0,0,.45);
  font-family:var(--mono);font-weight:600;line-height:1.05;
  z-index:3;
}
/* The price sticker carries white text, and the source flame (#E8471F) gives
   only 3.92:1 against it. --stamp is the same palette one step deeper and
   reaches 5.7:1. The flame stays where it belongs — the CTA arrow, which is
   outlined in ink and is decorative, not a text background. */
.sticker.hot{background:var(--stamp);color:#fff}
.sticker.soon{background:#F6F0E1;color:var(--plate-ink)}
.sticker .big{font-size:17px;display:block}
.sticker .small{font-size:8px;letter-spacing:.1em;text-transform:uppercase;display:block;margin-top:2px}

/* index label + stamped status pill */
.card-meta{display:flex;align-items:center;gap:8px;margin-bottom:10px;flex-wrap:wrap;
  padding-right:66px}          /* clears the sticker */
.code{font-family:var(--mono);font-weight:600;font-size:11px;letter-spacing:.16em;color:var(--plate-ink)}
.tok{
  font-family:var(--mono);font-size:9px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  padding:3px 8px;border-radius:99px;border:2px solid var(--plate-ink);
}
/* #1E8A4C under white is 4.38:1 — a hair under AA at pill size. Darkened
   just far enough to clear it; the shift is invisible next to the original. */
.tok.open{background:var(--open-green);color:#fff}
.tok.wait{background:transparent;color:var(--plate-ink)}
.tok.site{background:rgba(22,19,14,.09);color:var(--plate-ink)}

.entry.sheet h3{
  font-family:var(--display);font-weight:900;
  font-size:clamp(23px,3.4vw,28px);line-height:1.02;letter-spacing:-.02em;
  text-transform:uppercase;color:var(--plate-ink);
}
.entry.sheet .job{margin-top:9px;font-size:14px;line-height:1.5;font-weight:500;
  color:rgba(22,19,14,.84)}
.entry.sheet .caveat{
  margin-top:11px;padding:8px 10px;font-family:var(--mono);font-size:10.5px;line-height:1.5;
  color:rgba(22,19,14,.8);background:rgba(255,255,255,.42);
  border:1px solid rgba(22,19,14,.28);border-radius:4px;
}

/* dashed divider + red-arrow CTA row */
.entry-foot{margin-top:auto;padding-top:0}
.card-go{
  margin-top:14px;padding-top:12px;border-top:2px dashed rgba(22,19,14,.4);
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  min-height:44px;text-decoration:none;color:var(--plate-ink);
  font-family:var(--mono);font-weight:600;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
}
.card-go:hover span{text-decoration:underline;text-underline-offset:3px}
.go-arrow{width:26px;height:14px;flex:none}
.go-arrow path{fill:var(--flame);stroke:var(--plate-ink);stroke-width:4}
.card-note{margin-top:8px;font-family:var(--mono);font-size:10.5px;line-height:1.5;
  color:rgba(22,19,14,.72)}
.card-note b{font-weight:700;color:var(--plate-ink)}
.card-alt{
  display:inline-flex;align-items:center;min-height:44px;margin-top:2px;
  font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(22,19,14,.74);text-decoration:underline;text-underline-offset:3px;
}
.card-alt:hover{color:var(--plate-ink)}

/* the two you can buy today stay the loudest things on the board */
.entry.sheet.is-open{border-width:4px;box-shadow:var(--shadow-hover)}
.entry.sheet.is-website-only{opacity:.94}

/* Narrow screens: the sticker overhangs the plate by 12px and the plates are
   rotated, so both are pulled in to keep the band from scrolling sideways. */
@media (max-width:600px){
  .grid > .entry.sheet:nth-child(odd),
  .grid > .entry.sheet:nth-child(even){transform:none}
  .entry.sheet:hover{transform:translateY(-4px)}
  .sticker{width:64px;height:64px;top:-12px;right:-6px}
  .sticker .big{font-size:15px}
  .card-meta{padding-right:58px}
}

.legend{display:flex;gap:22px;flex-wrap:wrap;margin-top:26px;font-family:var(--mono);
  font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--tx-3)}
.legend i{font-style:normal;color:var(--acc)}

/* ---------------------------------------------------------------- forms --- */
.field{margin-bottom:16px}
.field label{display:block;font-family:var(--display);font-size:13px;font-weight:700;
  color:var(--tx-2);margin-bottom:7px}
.field input,.field select{width:100%;font-family:var(--body);font-size:16px;padding:13px 14px;
  min-height:var(--tap);background:var(--surface);color:var(--tx);
  border:1px solid var(--rule-2);border-radius:9px;transition:border-color .16s,box-shadow .16s}
.field input:focus,.field select:focus{border-color:var(--acc);
  box-shadow:0 0 0 3px rgba(232,121,27,.16);outline:none}
.field input::placeholder{color:var(--tx-3)}
.row-2{display:grid;grid-template-columns:1fr 124px;gap:10px}
@media (max-width:480px){.row-2{grid-template-columns:1fr}}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.note{font-family:var(--body);font-size:14.5px;line-height:1.6;padding:14px 16px;
  border:1px solid var(--rule);border-radius:11px;background:var(--surface);
  color:var(--tx-2);box-shadow:var(--elev)}
.note-ok{border-left:3px solid var(--amber)}
.note-err{border-left:3px solid #C0392B}

/* ---------------------------------------------------------------- proof --- */
.proof-grid{display:grid;grid-template-columns:1.4fr .6fr;gap:20px;align-items:start}
@media (max-width:900px){.proof-grid{grid-template-columns:1fr}}
.proof-side{display:grid;gap:20px}
@media (max-width:900px){.proof-side{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.proof-side{grid-template-columns:1fr}}
.proof-shot{display:block;border:1px solid var(--rule);border-radius:13px;overflow:hidden;
  background:var(--surface);line-height:0;box-shadow:var(--elev-2);
  transition:transform .18s,border-color .18s}
a.proof-shot:hover{transform:translateY(-3px);border-color:var(--acc)}
.proof-cap{font-size:13.5px;color:var(--tx-2);margin-top:12px;line-height:1.55}
.proof-cap b{color:var(--tx);font-weight:600}

/* ------------------------------------------------------------- registry --- */
.reg-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:32px}
@media (max-width:820px){.reg-grid{grid-template-columns:1fr;gap:26px}}
.reg-card{background:var(--surface);border:1px solid var(--rule);border-radius:13px;
  overflow:hidden;box-shadow:var(--elev-2)}
.reg-card-head{background:var(--surface-2);color:var(--acc-tx);font-family:var(--mono);
  font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  padding:12px 16px;border-bottom:1px solid var(--rule)}
.reg-card-body{padding:10px 16px 16px}
.reg-card-body p{font-family:var(--mono);font-size:12.5px;line-height:2;margin:0;color:var(--tx-2)}
.reg-count{margin:16px;padding:16px;background:var(--surface-2);border:1px solid var(--rule);
  border-radius:10px;text-align:center}
.reg-count b{display:block;font-family:var(--display);font-weight:900;font-size:34px;
  line-height:1;color:var(--acc)}
.reg-count span{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--tx-3);margin-top:8px}
.reg-body p{color:var(--tx-2)}
.reg-body p + p{margin-top:16px}

/* -------------------------------------------------------- founder / faq --- */
.founder{background:var(--surface);border:1px solid var(--rule);border-radius:13px;
  padding:30px;color:var(--tx-2);box-shadow:var(--elev)}
.founder p + p{margin-top:16px}
.founder b{color:var(--tx)}

.qa{border-bottom:1px solid var(--rule)}
.qa button{width:100%;text-align:left;background:none;border:0;cursor:pointer;
  font-family:var(--display);font-weight:700;font-size:16.5px;color:var(--tx);
  padding:19px 36px 19px 0;min-height:var(--tap);position:relative}
.qa button::after{content:"+";position:absolute;right:6px;top:50%;transform:translateY(-50%);
  font-family:var(--mono);font-size:19px;color:var(--acc-tx)}
.qa.open button::after{content:"–"}
.qa-a{display:none;padding:0 0 20px;color:var(--tx-2);font-size:15px;max-width:70ch}
.qa.open .qa-a{display:block}

/* --------------------------------------------------------------- footer --- */
.foot{padding:38px 0 52px;color:var(--tx-2)}
.foot b{color:#fff}
.foot-legal{font-family:var(--mono);font-size:11px;line-height:1.75;color:var(--tx-3);
  max-width:80ch;margin-top:18px}

.mcta{position:fixed;left:0;right:0;bottom:0;z-index:70;display:none;gap:8px;
  padding:10px var(--gutter);background:rgba(20,24,33,.94);backdrop-filter:blur(10px);
  border-top:1px solid #232a37;
  --acc:var(--con-amber); --acc-ink:#1a1206; --tx:#fff; --rule-2:#39434F;}
.mcta .btn{flex:1;font-size:14px;padding:12px 14px}
@media (max-width:820px){.mcta{display:flex}body{padding-bottom:78px}}

/* --------------------------------------------------------------- motion --- */
/* Default state is VISIBLE. The animation is opt-in via .anim, which sbv.js
   adds immediately before it starts observing — so a blocked or broken script
   leaves the catalog on screen instead of invisible. */
.reveal{transition:opacity .5s cubic-bezier(.2,.7,.3,1),transform .5s cubic-bezier(.2,.7,.3,1)}
.anim .reveal{opacity:0;transform:translateY(14px)}
.anim .reveal.in{opacity:1;transform:none}
.anim .grid .entry:nth-child(3n-1){transition-delay:.06s}
.anim .grid .entry:nth-child(3n){transition-delay:.12s}
@media (prefers-reduced-motion:reduce){
  .anim .reveal{opacity:1;transform:none;transition:none}
  .anim .grid .entry{transition-delay:0s !important}
  .entry:hover,.btn:hover,a.proof-shot:hover{transform:none}
}