/* =============================================================================
   QUICKADS HOUSE THEME v2. Neon on black.

   One stylesheet for all 15 Fashion Photoshoot pages. Inlined at the
   /*@theme*\/ marker by showcase-site/build.mjs, cms-pages/build.mjs and
   make-webpages.mjs when they run with --variant=v2.

   Tokens measured from the live reference pages: /shopify-marketing-agency,
   /facebook-ads-agency-for-ecommerce, /white-label-facebook-ads-agency.

   Do not add a second stylesheet. Genuinely page-local rules (wall filters,
   eye-test quiz) live at the bottom of that page under a comment.

   Contents
     1  tokens
     2  base + type
     3  chrome: nav, footer
     4  bands and section heads
     5  hero
     6  blocks: card, tile, steps, stats, table, faq, cta, related
     7  data graphics on the dark panel
     8  showcase components: contact sheet, input rows, receipt, wall, quiz
     9  layout pass: one content width per band
   ============================================================================= */

/* -- 1  tokens ------------------------------------------------------------- */

:root{
  --neon:#c8f040;
  --neon-fill:#c6f24e;
  --neon-deep:#a8d900;
  --neon-tint:#f7fbec;

  --ink:#0e0f0c;          /* near-black: hero, dark bands, footer */
  --surface-2:#0d0d10;
  --surface-3:#15170f;

  --page:#fbfaf4;         /* warm cream ground */
  --page-alt:#f5f3ea;     /* alternating band */
  --card:#ffffff;

  --on-dark:#fbfaf4;
  --on-dark-mute:#cfd0da;
  --on-dark-faint:#9a9aa6;
  --on-light:#0e0f0c;
  --on-light-mute:#3a3b32;
  --on-light-faint:#6b6b60;

  --line-dark:rgba(251,250,244,.14);
  --line-light:#e6e3d8;

  --display:"DM Sans","Segoe UI",system-ui,sans-serif;
  --body:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  --serif:"Instrument Serif",Georgia,serif;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,"Cascadia Mono",Consolas,monospace;

  --wrap:1160px;
  --content:56rem;        /* one content width for every block in a band */
  --gut:clamp(1.25rem,4vw,2.34rem);
  --band:clamp(3.25rem,7vw,4.625rem);
  --r:14px;

  /* data graphics: sequential ramp validated against the dark panel surface
     (monotone lightness, adjacent delta-L >= .06, single hue 4 degree spread) */
  --d1:#54700f; --d2:#6f8f1f; --d3:#9dc72f; --d4:#c8f040;
  --d-mute:#8a8f84;
  --panel:#0e0f0c; --panel-2:#15170f; --panel-line:rgba(251,250,244,.14);

  /* verdict colors, used only inside measurements and QC marks */
  --ok:#c8f040; --warn:#e8c341; --bad:#e8836c;
}

/* -- 2  base + type -------------------------------------------------------- */

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--page);
  color:var(--on-light);
  font-family:var(--body);
  font-size:17px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:clip;
}
img{max-width:100%;display:block}
/* The handoff build stamps width and height on every static image so the page
   does not reflow as they load. Those attributes are presentational hints: with
   a CSS width and no height:auto the attribute height WINS and the picture is
   stretched. It rendered the batch page's contact sheets at 1376x2304 instead
   of 1376x1101. This rule is the general fix; do not remove it, and do not rely
   on per-component height:auto, which is what missed this one. */
img[width][height]{height:auto}
figure{margin:0}
p{margin:0}
a{color:inherit}

h1,h2,h3{
  font-family:var(--display);
  font-weight:800;
  letter-spacing:-.02em;
  line-height:1.05;
  text-transform:capitalize;
  margin:0;
  text-wrap:balance;
}
h1{font-size:clamp(2.1rem,4.6vw,3.3rem)}
h2{font-size:clamp(1.65rem,3.4vw,2.5rem)}
h3{font-size:clamp(1.1rem,1.8vw,1.3rem);letter-spacing:-.01em}

/* Serif italic is the one emphasis in a headline. Neon on dark, ink on light:
   neon text on cream fails contrast, so it is a fill there, never a color. */
h1 em,h2 em,h3 em{
  font-family:var(--serif);font-style:italic;font-weight:400;
  text-transform:none;letter-spacing:0;
}
.hero h1 em,.band--dark h2 em,.band--dark h3 em{color:var(--neon)}

.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--gut)}
.center{text-align:center}
.measure{max-width:44rem;margin-inline:auto}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.cite{font-size:.8125rem;color:var(--on-light-faint)}
.band--dark .cite{color:var(--on-dark-faint)}
.note{font-size:.8125rem;color:var(--on-light-faint)}
/* Centred only as a standalone caption directly under a block. A .note nested
   inside a component is that component's body copy and stays left-aligned:
   centring 300 characters is unreadable. */
.band .wrap > .note{text-align:center}
.note--left{text-align:left;max-width:44rem;margin:1.25rem 0 0}
.band--dark .note{color:var(--on-dark-faint)}

:focus-visible{outline:2px solid var(--neon-deep);outline-offset:3px}
::selection{background:var(--neon);color:#0f0f0f}
[hidden]{display:none !important}
@media (prefers-reduced-motion:reduce){*{transition:none !important;animation:none !important}}

/* -- 3  chrome ------------------------------------------------------------- */

.nav{background:var(--ink);border-bottom:1px solid var(--line-dark);position:sticky;top:0;z-index:40}
.nav .wrap{display:flex;align-items:center;gap:1.5rem;min-height:66px;flex-wrap:wrap}
.brand{font-family:var(--display);font-weight:800;font-size:1.2rem;color:var(--on-dark);
  text-decoration:none;letter-spacing:-.02em;margin-right:auto;
  display:inline-flex;align-items:center;min-height:44px}
.brand span{color:var(--neon)}
.nav nav{display:flex;gap:1.4rem;flex-wrap:wrap}
.nav nav a{font-family:var(--display);font-weight:500;font-size:.9375rem;color:var(--on-dark-mute);text-decoration:none}
.nav nav a:hover{color:#fff}
@media (max-width:860px){.nav nav{display:none}}

.site-foot{background:var(--ink);color:var(--on-dark-mute);padding-block:3.25rem 2rem;border-top:1px solid var(--line-dark)}
.foot-grid{display:grid;gap:2.25rem;grid-template-columns:1fr}
@media (min-width:52rem){.foot-grid{grid-template-columns:1.4fr repeat(4,1fr)}}
.foot-about p{font-size:.9375rem;color:var(--on-dark-mute);max-width:22rem}
.foot-col h4{font-family:var(--display);font-weight:700;font-size:.72rem;letter-spacing:.13em;
  text-transform:uppercase;color:#fff;margin:0 0 .85rem}
.foot-col ul{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.foot-col a{color:var(--on-dark-mute);text-decoration:none;font-size:.9063rem}
.foot-col a:hover{color:var(--neon)}
.foot-legal{margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid var(--line-dark);
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.8438rem;color:var(--on-dark-faint)}
.foot-legal a{color:var(--on-dark-mute);text-decoration:none}
.foot-legal a:hover{color:var(--neon)}

/* -- 4  bands and section heads -------------------------------------------- */

.band{padding-block:var(--band)}
.band--page{background:var(--page)}
.band--alt{background:var(--page-alt)}
.band--dark{background:var(--ink);color:var(--on-dark)}
.band--dark h2,.band--dark h3{color:#fff}

/* The eyebrow is a sentence, not a row of chips, so it must not be a flex
   container. As inline-flex every run of text between its inline <span>s became
   a separate flex item, and with flex-wrap:nowrap each item then wrapped inside
   its own narrow column: on a phone "The wall .", the count and the tail read as
   three broken stacks side by side. Inline-block lets the whole thing wrap as
   one run, and the rule becomes an inline mark rather than a flex item.
   Any eyebrow holding a <span> (a live count, a shot date) depends on this. */
.eyebrow{
  display:inline-block;
  font-family:var(--display);font-weight:700;font-size:.75rem;
  letter-spacing:.13em;text-transform:uppercase;color:var(--on-light-faint);
}
.eyebrow::before{
  content:"";display:inline-block;width:18px;height:2px;background:currentColor;
  vertical-align:middle;margin-right:.55rem;
}
/* A <span> inside an eyebrow is always one atomic value - a live count, a shot
   date - so it must not break across lines. Without this, "shot 2026-08-21"
   wrapped after the hyphen and read as "SHOT 2026- / 08-21". */
.eyebrow span{white-space:nowrap}
/* a long eyebrow costs three lines on a phone at the full tracking */
@media (max-width:40rem){
  .eyebrow{letter-spacing:.08em}
  .eyebrow::before{width:14px;margin-right:.4rem}
}
.band--dark .eyebrow,.hero .eyebrow{color:var(--neon)}

.head{text-align:center;max-width:46rem;margin:0 auto 2.75rem}
.head .eyebrow{margin-bottom:1rem}
.head .deck{margin-top:1.05rem;color:var(--on-light-mute);font-size:1.0625rem}
.band--dark .head .deck{color:var(--on-dark-mute)}

/* -- 5  hero --------------------------------------------------------------- */

.hero{background:var(--ink);color:var(--on-dark);text-align:center;
  padding-block:clamp(3.5rem,8vw,5.75rem) clamp(3rem,6vw,4.5rem)}
.hero h1{color:var(--on-dark);margin:1.1rem auto 0;text-wrap:normal;max-width:none}
.hero h1 .l{display:block;overflow-wrap:break-word}   /* deliberate line break */
.hero .deck{margin:1.4rem auto 0;max-width:44rem;color:var(--on-dark-mute);
  font-size:1.0625rem;text-wrap:balance}
.hero .fine{margin-top:1.5rem;max-width:46rem;margin-inline:auto;font-size:.8125rem;color:var(--on-dark-faint)}
@media (max-width:44rem){.hero h1{text-wrap:balance;font-size:clamp(1.85rem,7.2vw,2.6rem)}}

/* hero stat tiles: equal height, labels on a common baseline */
.proof{margin-top:2.75rem}
.proof-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(11rem,100%),1fr));gap:1px;
  background:var(--line-dark);border:1px solid var(--line-dark);border-radius:var(--r);overflow:hidden;
  max-width:56rem;margin:0 auto}
.proof-item{background:var(--ink);padding:1.35rem 1.15rem;display:flex;flex-direction:column;
  justify-content:space-between;gap:.5rem;min-height:7.25rem;text-align:left}
.proof-item .n{font-family:var(--display);font-weight:800;font-size:clamp(1.25rem,2.1vw,1.6rem);
  color:var(--neon);letter-spacing:-.02em;line-height:1.1;text-wrap:balance;display:block}
.proof-item .k{display:block;color:var(--on-dark-faint);font-size:.8125rem;line-height:1.35}
/* a qualifier line that is not a headline number */
.proof-item--line{align-items:flex-start;justify-content:center}
.proof-item--line .k{font-size:.9375rem;color:var(--on-dark-mute)}
.proof-item--line b{color:var(--neon);font-weight:700}

/* -- 6  blocks ------------------------------------------------------------- */

/* buttons */
.btn{
  display:inline-block;font-family:var(--display);font-weight:700;font-size:.9375rem;
  padding:12px 22px;border-radius:999px;text-decoration:none;border:1px solid transparent;
  line-height:1.25;transition:transform .12s ease,background .15s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn--neon{background:var(--neon);color:#0f0f0f;border-color:var(--neon)}
.btn--neon:hover{background:var(--neon-fill)}
.btn--dark{background:var(--ink);color:var(--on-dark);border-color:var(--ink)}
.btn--ghost{background:transparent;color:var(--on-dark);border-color:var(--line-dark)}
.btn--ghost:hover{border-color:var(--neon);color:var(--neon)}
.btn--white{background:#fff;color:var(--ink);border-color:#fff}
.btn-row{display:flex;gap:.85rem;flex-wrap:wrap;justify-content:center;margin-top:2rem}

/* series nav: the six showcase pages, one strip under the site's own navbar.
   Dark ground on purpose. On the published pages this sits between the site's
   dark Navbar-BlackMode-New and the dark hero, so a light strip would cut the
   header block in half; ink keeps the three as one stack.
   Wraps rather than scrolls horizontally: six mono labels do not fit at 390px,
   and a scroller hides pages the strip exists to expose. */
.seriesnav{background:var(--ink);border-bottom:1px solid var(--line-dark)}
.seriesnav ul{
  list-style:none;margin:0 auto;max-width:var(--wrap);
  padding:.5rem var(--gut);
  display:flex;flex-wrap:wrap;justify-content:center;gap:0 clamp(1rem,3vw,2.1rem);
}
.seriesnav a{
  display:inline-flex;align-items:center;min-height:44px;
  font-family:var(--mono);font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--on-dark-faint);text-decoration:none;
  border-bottom:2px solid transparent;
}
.seriesnav a:hover{color:var(--on-dark)}
/* the current page is stated once, with aria-current, and the neon rule is its
   only visual carrier: neon as a fill is legal on ink, as text it would not be. */
.seriesnav [aria-current="page"]{color:var(--on-dark);border-bottom-color:var(--neon)}
@media (max-width:40rem){
  .seriesnav a{font-size:.6875rem;letter-spacing:.08em;min-height:40px}
}

/* prose card, the "answer" pattern the AEO blocks use */
.card{
  background:var(--card);border:1px solid var(--line-light);border-left:4px solid var(--neon);
  border-radius:var(--r);padding:clamp(1.5rem,3vw,2.25rem);
}
.card .kicker{
  display:block;font-family:var(--display);font-weight:700;font-size:.7rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--on-light-faint);margin-bottom:1rem;
}
.card p+p{margin-top:1.1rem}
.card p{color:var(--on-light-mute)}
.card b,.card strong{color:var(--on-light);font-weight:700}
.card a{color:var(--on-light);text-decoration-color:var(--neon-deep);text-underline-offset:.2em}
.band--dark .card{background:var(--surface-3);border-color:var(--line-dark);border-left-color:var(--neon)}
.band--dark .card p{color:var(--on-dark-mute)}
.band--dark .card b{color:#fff}
.band--dark .card a{color:#fff}

/* lists inside a card: the v1 .plain list, restyled rather than re-marked-up */
.card ul,.card ol{margin:.9rem 0 0;padding-left:1.2rem;display:grid;gap:.6rem}
.card > ul:first-child,.card > ol:first-child{margin-top:0}
.card li{color:var(--on-light-mute)}
.card li b{color:var(--on-light);font-family:var(--display);font-weight:700}
.card ul li::marker{color:var(--neon-deep)}
.card ol li::marker{font-family:var(--display);font-weight:700;color:var(--on-light-faint)}
.band--dark .card li{color:var(--on-dark-mute)}
.band--dark .card li b{color:#fff}

/* feature grid */
.grid{list-style:none;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:1rem}
.grid > *{flex:1 1 calc((100% - 2rem)/3);min-width:15rem;max-width:calc((100% - 2rem)/3)}
.grid[data-n="1"] > *{flex-basis:100%;max-width:34rem}
.grid[data-n="2"] > *,.grid[data-n="4"] > *{flex-basis:calc((100% - 1rem)/2);max-width:calc((100% - 1rem)/2)}
@media (max-width:60rem){
  .grid > *,.grid[data-n="2"] > *,.grid[data-n="4"] > *{
    flex-basis:calc((100% - 1rem)/2);max-width:calc((100% - 1rem)/2)}
}
@media (max-width:40rem){
  .grid > *,.grid[data-n="2"] > *,.grid[data-n="4"] > *{flex-basis:100%;max-width:100%}
}
.tile{background:var(--card);border:1px solid var(--line-light);border-radius:var(--r);padding:1.4rem 1.5rem}
.tile .mark{width:26px;height:26px;border-radius:50%;background:var(--neon);color:#0f0f0f;display:grid;
  place-items:center;font-family:var(--display);font-weight:800;font-size:.8125rem;margin-bottom:.85rem}
.tile b{display:block;font-family:var(--display);font-weight:700;color:var(--on-light);
  margin-bottom:.3rem;font-size:1.0625rem;letter-spacing:-.01em}
.tile p,.tile span.t{color:var(--on-light-mute);font-size:.9688rem;display:block}
.band--dark .tile{background:var(--surface-3);border-color:var(--line-dark)}
.band--dark .tile b{color:#fff}
.band--dark .tile p,.band--dark .tile span.t{color:var(--on-dark-mute)}

/* numbered steps */
.steps{counter-reset:s;list-style:none;padding:0;display:grid;gap:.85rem}
.step{counter-increment:s;display:grid;grid-template-columns:auto 1fr;gap:1rem;align-items:start;
  background:var(--card);border:1px solid var(--line-light);border-radius:var(--r);padding:1.25rem 1.4rem}
.step::before{content:counter(s);font-family:var(--display);font-weight:800;font-size:.875rem;
  width:28px;height:28px;border-radius:50%;background:var(--ink);color:var(--neon);display:grid;place-items:center}
.step b{color:var(--on-light);font-weight:700}
.step span.t{color:var(--on-light-mute);font-size:.9688rem}
.band--dark .step{background:var(--surface-3);border-color:var(--line-dark)}
.band--dark .step b{color:#fff}
.band--dark .step span.t{color:var(--on-dark-mute)}
.band--dark .step::before{background:var(--neon);color:#0f0f0f}

/* stat strip */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(13rem,100%),1fr));gap:1rem}
.stat{background:var(--ink);color:var(--on-dark);border-radius:var(--r);padding:1.5rem}
.stat .n{font-family:var(--display);font-weight:800;font-size:clamp(1.6rem,3vw,2.3rem);
  color:var(--neon);line-height:1.05;letter-spacing:-.02em}
.stat .k{display:block;margin-top:.45rem;font-family:var(--display);font-weight:700;font-size:.9375rem;color:#fff}
.stat p{margin-top:.3rem;color:var(--on-dark-mute);font-size:.875rem}

/* table */
.tablewrap{overflow-x:auto;border:1px solid var(--line-light);border-radius:var(--r);background:var(--card)}
table.rates{border-collapse:collapse;width:100%;min-width:22rem}
table.rates th,table.rates td{padding:.9rem 1.1rem;text-align:left;border-bottom:1px solid var(--line-light);
  font-size:.9688rem;color:var(--on-light-mute)}
table.rates th{font-family:var(--display);font-weight:700;font-size:.7rem;letter-spacing:.11em;
  text-transform:uppercase;color:var(--on-light);background:var(--page-alt)}
table.rates tr:last-child td{border-bottom:0}
table.rates td:first-child{font-weight:600;color:var(--on-light)}

/* FAQ */
.faq{display:grid;gap:.7rem}
.faq details{background:var(--card);border:1px solid var(--line-light);border-radius:var(--r);padding:1.1rem 1.35rem}
.faq details[open]{border-color:var(--neon-deep)}
.faq summary{
  font-family:var(--display);font-weight:700;font-size:1.0313rem;color:var(--on-light);
  cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:1rem;align-items:center;
  min-height:44px;   /* the whole row is the tap target, not just the text box */
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-weight:700;color:var(--neon-deep);font-size:1.25rem;line-height:1;flex:none}
.faq details[open] summary::after{content:"\2013"}
.faq .a{margin-top:.8rem;color:var(--on-light-mute);font-size:.9688rem}
.faq .a a{text-decoration-color:var(--neon-deep);text-underline-offset:.2em}

/* neon CTA band */
.cta{background:var(--neon);border-radius:var(--r);padding:clamp(1.75rem,4vw,2.75rem);
  display:grid;gap:1.5rem 2.5rem;align-items:center;grid-template-columns:1fr}
@media (min-width:56rem){.cta{grid-template-columns:1.35fr auto}}
.cta h2{color:#0f0f0f;font-size:clamp(1.5rem,3vw,2.1rem)}
.cta p{color:#22240f;margin-top:.7rem;max-width:38rem}
.cta p+p{margin-top:.8rem}
.cta .fine{margin-top:.9rem;font-size:.8125rem;color:#3c3f22}
.cta .btn-row{margin-top:0;justify-content:flex-start}

/* related links */
.related{border-top:1px solid var(--line-light);padding-top:1.75rem;
  padding-bottom:clamp(2.25rem,5vw,3.5rem);margin-top:var(--band)}
.related .eyebrow{margin-bottom:.9rem}
.related ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem}
/* Chips take the button's box: same 12px/22px padding and the same 1.25 line
   height, so a chip and a .btn read as one system and the label sits centred.

   display, align-items and min-height are all declared here on purpose. Each
   page's head custom code still carries an older tap-target patch,
   `.related a{display:inline-flex;align-items:center;min-height:44px}`, and
   this stylesheet loads after it. With the previous inline-block box that
   min-height won and did the damage: an inline-block is block flow, so a forced
   height leaves its text at the top. Measured, the chip label sat 9.8px below
   the top edge and 17.2px above the bottom one. Centring it with flex, and
   restating min-height here, makes the box independent of that patch. */
.related a{
  display:inline-flex;align-items:center;justify-content:center;min-height:0;
  padding:12px 22px;border:1px solid var(--line-light);border-radius:999px;
  background:var(--card);text-decoration:none;
  font-size:.875rem;line-height:1.25;color:var(--on-light-mute)}
.related a:hover{border-color:var(--neon-deep);color:var(--on-light)}
/* the notes under the row are copy, not a caption: they line up with the pills
   rather than being centred by the layout pass below */
.related .note{text-align:left;margin-left:0;margin-right:0;max-width:46rem}

/* -- 7  data graphics on the dark panel ------------------------------------ */

.figure{background:var(--panel);border-radius:var(--r);padding:clamp(1.5rem,3vw,2.25rem);color:var(--on-dark)}
.figure .fig-head{display:grid;grid-template-columns:1fr;gap:.4rem;margin-bottom:1.5rem}
.figure .fig-title{font-family:var(--display);font-weight:700;font-size:1.0625rem;color:#fff;letter-spacing:-.01em}
.figure .fig-note{font-size:.8125rem;color:var(--on-dark-faint);max-width:24rem}
.figure figcaption{margin-top:1.4rem;padding-top:1rem;border-top:1px solid var(--panel-line);
  font-size:.8125rem;color:var(--on-dark-faint)}
.band--dark .figure{background:var(--panel-2)}
@media (min-width:46rem){
  .figure .fig-head{grid-template-columns:1fr minmax(15rem,20rem);gap:2rem;align-items:start}
  .figure .fig-note{text-align:right;max-width:none}
}
/* a figure sitting in a narrow column keeps its head stacked */
.figure--narrow .fig-head{grid-template-columns:1fr;gap:.4rem}
.figure--narrow .fig-note{text-align:left;max-width:none}

/* legend, always present for 2+ series */
.legend{display:flex;gap:1.25rem;flex-wrap:wrap;margin-bottom:1.25rem}
.legend span{display:inline-flex;align-items:center;gap:.45rem;font-size:.8125rem;color:var(--on-dark-mute)}
.legend i{width:10px;height:10px;border-radius:3px;flex:none}

/* dumbbell, before to after, one hue two shades */
.dumb{display:grid;gap:1.15rem}
.dumb-row{display:grid;grid-template-columns:minmax(7rem,10rem) 1fr;gap:1rem;align-items:center}
.dumb-lab{font-size:.875rem;color:var(--on-dark-mute)}
.dumb-track{position:relative;height:34px}
.dumb-track::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:var(--panel-line)}
.dumb-bar{position:absolute;top:50%;transform:translateY(-50%);height:4px;border-radius:2px;background:var(--d2)}
.dumb-dot{position:absolute;top:50%;transform:translate(-50%,-50%);width:14px;height:14px;border-radius:50%;
  box-shadow:0 0 0 2px var(--panel)}
.dumb-dot.from{background:var(--d2)}
.dumb-dot.to{background:var(--d4)}
.dumb-val{position:absolute;top:50%;transform:translate(-50%,-160%);font-family:var(--display);
  font-weight:700;font-size:.8125rem;color:var(--on-dark-mute);white-space:nowrap}
.dumb-val.to{color:#fff}
/* the axis sits under the track only, not under the label column */
.dumb-axis{display:grid;grid-template-columns:minmax(7rem,10rem) 1fr;gap:1rem;margin-top:.25rem}
.dumb-axis .ticks{display:flex;justify-content:space-between;font-size:.75rem;
  color:var(--on-dark-faint);font-variant-numeric:tabular-nums}

/* magnitude bars, sequential */
.bars{display:grid;gap:.9rem}
.bar-row{display:grid;grid-template-columns:minmax(8rem,13rem) 1fr;gap:1rem;align-items:center}
.bar-lab{font-size:.875rem;color:var(--on-dark-mute)}
.bar-track{position:relative;height:24px;display:flex;align-items:center}
.bar-fill{height:20px;border-radius:0 4px 4px 0;background:var(--d2);min-width:3px}
.bar-val{margin-left:.6rem;font-family:var(--display);font-weight:700;font-size:.875rem;color:#fff;white-space:nowrap}

/* meter, one ratio against a limit */
.meter{margin-top:.4rem}
.meter-track{height:14px;border-radius:7px;background:rgba(200,240,64,.16);overflow:hidden}
.meter-fill{height:100%;border-radius:7px;background:var(--d4)}
.meter-legend{display:flex;justify-content:space-between;margin-top:.6rem;font-size:.8125rem;color:var(--on-dark-mute)}
.meter-legend b{color:#fff}

/* The chain: five links, and how far each kind of vendor reaches.

   This is a real <table>. It was divs, which read as run-on text when copied
   and gave a screen reader no row or column relationship at all. The visual is
   unchanged; the semantics are not. Row header first, then five cells. */
table.chain{width:100%;border-collapse:separate;border-spacing:2px;table-layout:fixed}
table.chain th[scope="row"]{
  width:9.5rem;text-align:left;vertical-align:middle;padding:.7rem .8rem .7rem 0;
  font-family:var(--display);font-weight:700;font-size:.72rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--on-dark-faint)}
/* the caption reads as the figure's footnote, where figcaption used to sit */
table.chain caption{display:table-caption;caption-side:bottom;text-align:left;font-size:.8125rem;
  color:var(--on-dark-faint);padding-top:1.15rem;margin-top:.25rem;
  border-top:1px solid var(--panel-line)}
/* height:1px lets the cell's child resolve a percentage height, so every chip
   fills its column evenly instead of shrinking to its own text */
table.chain td{padding:0;height:1px}
table.chain td .link{display:flex;align-items:center;justify-content:center;
  width:100%;height:100%;min-height:3.1rem}
/* On a phone each row becomes a labelled 2-up grid. The table element itself
   stays display:table so the caption keeps its place at the bottom; only the
   rows change layout. */
@media (max-width:44rem){
  table.chain{table-layout:auto}
  table.chain tr{display:grid;grid-template-columns:1fr 1fr;gap:2px;padding-bottom:1.25rem}
  table.chain th[scope="row"]{grid-column:1 / -1;width:auto;padding:0 0 .4rem}
  table.chain td{display:block;height:auto}
  table.chain td .link{min-height:2.9rem}
}

/* The div version of this figure is gone: every page uses the table above.
   The old .chain rule set display:grid, and because the table carries the same
   class name it was winning, which knocked the table out of table layout and
   left caption-side inert. Do not reintroduce a bare .chain rule. */
/* an empty cell keeps a faint slot so the row still reads as one chain */
.link{padding:.7rem .8rem;font-family:var(--display);font-weight:600;font-size:.8125rem;line-height:1.3;
  background:rgba(138,143,132,.09);color:var(--on-dark-faint);border-radius:3px;text-align:center}
.link.on{background:var(--d4);color:#0f0f0f}
.link.off{background:rgba(138,143,132,.2);color:#c9cdc4}

/* variant multiplication */
.mult{display:flex;align-items:center;justify-content:center;gap:clamp(.5rem,2vw,1.25rem);flex-wrap:wrap;text-align:center}
.mult .m{display:grid;gap:.15rem}
.mult .m .v{font-family:var(--display);font-weight:800;font-size:clamp(1.35rem,3vw,2rem);color:#fff;line-height:1}
.mult .m .l{font-size:.75rem;color:var(--on-dark-faint)}
.mult .op{font-family:var(--display);font-weight:700;color:var(--d-mute);font-size:1.1rem}
.mult .m.out .v{color:var(--d4)}

/* slot strip, image_link + additional_image_link */
.slots{display:flex;gap:3px;flex-wrap:wrap}
.slots i{width:30px;height:38px;border-radius:3px;background:rgba(138,143,132,.16);display:block}
.slots i.filled{background:var(--d4)}

@media (max-width:34rem){
  .dumb-row,.bar-row{grid-template-columns:1fr;gap:.35rem}
  .dumb-lab,.bar-lab{font-size:.8125rem}
  .dumb-axis{grid-template-columns:1fr}
  .dumb-axis .spacer{display:none}
}

/* -- 8  showcase components ------------------------------------------------ */

/* Every image below carries width/height attributes AND an aspect-ratio. The
   attributes map to presentational hints, so without height:auto the attribute
   height wins and each frame renders at full natural size. Do not remove it. */
.sheet img,.inrow img,.tri img,.tile-3 img{height:auto}   /* redundant with img[width][height], kept explicit */

/* contact sheet: the run, all frames on screen at once */
.sheet{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.sheet .frame{background:var(--card);border:1px solid var(--line-light);border-radius:var(--r);
  padding:.55rem .55rem .4rem;transition:border-color .15s ease,transform .2s ease}
.sheet .frame:hover{border-color:var(--neon-deep);transform:translateY(-3px)}
.sheet .frame img{width:100%;aspect-ratio:3/4;object-fit:cover;
  border-radius:calc(var(--r) - 6px);background:var(--page-alt)}
.sheet figcaption{display:flex;gap:.4rem;align-items:center;flex-wrap:wrap;padding:.6rem .25rem .2rem;
  font-family:var(--mono);font-size:.6563rem;letter-spacing:.08em;text-transform:uppercase;color:var(--on-light-faint)}
.sheet figcaption span + span::before{content:"\00b7";margin-right:.4rem;color:var(--line-light)}
.sheet .frame.is-ref{border-color:var(--neon-deep);border-width:2px}
.sheet .pin{display:inline-block;background:var(--ink);color:var(--neon);padding:.14rem .45rem;
  border-radius:999px;font-weight:700}
.sheet--dense{grid-template-columns:repeat(6,minmax(0,1fr));gap:.4rem}
.sheet--dense .frame{padding:.25rem}
.sheet--dense figcaption{font-size:.5625rem;padding:.35rem .15rem .1rem}
@media (max-width:60rem){.sheet--dense{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:44rem){
  .sheet{grid-template-columns:1fr 1fr;gap:.6rem}
  /* The reference frame used to span both columns at 16/9. That is a letterbox
     crop of a full-length figure: object-fit:cover kept the middle and threw
     away the head and the hem, which on a garment page is the product. It now
     sits in the grid like every other frame, at the same 3/4. */
  .sheet--dense{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* frames rise once on load, then the page stays still */
@media (prefers-reduced-motion:no-preference){
  .sheet .frame{opacity:0;transform:translateY(12px);animation:rise .55s ease forwards}
  .sheet .frame:nth-child(1){animation-delay:.05s}
  .sheet .frame:nth-child(2){animation-delay:.12s}
  .sheet .frame:nth-child(3){animation-delay:.19s}
  .sheet .frame:nth-child(4){animation-delay:.26s}
  .sheet .frame:nth-child(5){animation-delay:.33s}
  .sheet .frame:nth-child(6){animation-delay:.40s}
  .sheet .frame:nth-child(7){animation-delay:.47s}
  .sheet .frame:nth-child(8){animation-delay:.54s}
  .sheet .frame:nth-child(9){animation-delay:.61s}
  @keyframes rise{to{opacity:1;transform:none}}
}

/* input row: what you send, what comes back, what carried across */
.inputs{display:grid;gap:1rem}
.inrow{display:grid;grid-template-columns:1.15fr minmax(0,1fr) minmax(0,1fr);gap:1.25rem 1.5rem;align-items:start;
  background:var(--card);border:1px solid var(--line-light);border-radius:var(--r);padding:1.5rem}
.inrow figure{position:relative}
.inrow img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:calc(var(--r) - 6px);background:var(--page-alt)}
.inrow .tag{position:absolute;left:.5rem;bottom:.5rem;font-family:var(--mono);font-size:.6563rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;padding:.28rem .6rem;border-radius:999px;
  background:rgba(251,250,244,.92);color:var(--on-light-mute);border:1px solid var(--line-light)}
.inrow .tag.out{background:var(--neon);color:#0f0f0f;border-color:var(--neon)}
.inrow .what{margin-bottom:.6rem}
.inrow h3{color:var(--on-light)}
.inrow p{color:var(--on-light-mute);font-size:.9375rem;margin-top:.6rem}
.inrow .held{margin-top:.95rem;font-size:.875rem;line-height:1.6;color:var(--on-light-mute);
  border-left:3px solid var(--neon);padding-left:.85rem}
.inrow .held b{display:block;font-family:var(--display);font-size:.6563rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--on-light-faint);margin-bottom:.25rem}
@media (max-width:60rem){
  .inrow{grid-template-columns:1fr 1fr}
  .inrow .copy{grid-column:1 / -1;order:-1}
}
@media (max-width:34rem){.inrow{grid-template-columns:1fr}}

/* three-frame row: your photograph, a generic tool, delivered */
.tri{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.75rem}
.tri figure{position:relative}
.tri img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:calc(var(--r) - 6px);
  border:1px solid var(--line-light);background:var(--page-alt)}
.tri figcaption{font-family:var(--mono);font-size:.6563rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--on-light-faint);padding-top:.45rem}
.tri .is-ours img{border-color:var(--neon-deep);border-width:2px}
.tri .is-ours figcaption{color:var(--on-light)}
@media (max-width:34rem){.tri{grid-template-columns:1fr;gap:.5rem}}

/* delivery receipt, mono rows on the dark panel */
.receipt{font-family:var(--mono);font-size:.8125rem;line-height:1.75;font-variant-numeric:tabular-nums}
.receipt .hd{font-weight:700;letter-spacing:.12em;color:#fff;border-bottom:1px solid var(--panel-line);
  padding-bottom:.55rem;margin-bottom:.75rem}
.receipt .row{display:flex;gap:1.5rem;justify-content:space-between;flex-wrap:wrap;
  padding-block:.25rem;color:var(--on-dark-mute)}
.receipt .row b{font-weight:400;color:var(--on-dark-faint)}
.receipt .row span{color:#fff;text-align:right}
.receipt .row span.ok{color:var(--neon);font-weight:700}
.receipt .row span.bad{color:var(--bad);font-weight:700}

/* wall tile: input, unguarded pass, delivered */
.wallgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(15rem,100%),1fr));gap:1rem}
.tile-3{background:var(--card);border:1px solid var(--line-light);border-radius:var(--r);
  padding:.55rem;cursor:pointer;transition:border-color .15s ease,transform .2s ease}
.tile-3:hover{border-color:var(--neon-deep);transform:translateY(-3px)}
.tile-3 .pair{display:grid;grid-template-columns:1fr 1fr;gap:.3rem}
.tile-3 img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:calc(var(--r) - 8px);background:var(--page-alt)}
.tile-3 .cap{font-size:.875rem;color:var(--on-light-mute);padding:.6rem .3rem .2rem}
.tile-3 .cap b{display:block;font-family:var(--display);color:var(--on-light);font-size:.9375rem}
.fixed-mark{display:inline-flex;align-items:center;gap:.35rem;font-family:var(--display);font-weight:700;
  font-size:.625rem;letter-spacing:.1em;text-transform:uppercase;background:var(--neon);color:#0f0f0f;
  padding:.2rem .5rem;border-radius:999px}
.filterbar{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:center;margin-bottom:1.75rem}
.filterbar button{font-family:var(--display);font-weight:700;font-size:.8125rem;padding:.45rem .95rem;
  border-radius:999px;border:1px solid var(--line-light);background:var(--card);color:var(--on-light-mute);cursor:pointer}
.filterbar button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--neon)}

/* eye test quiz shell */
.quiz{background:var(--card);border:1px solid var(--line-light);border-radius:var(--r);
  padding:clamp(1.25rem,3vw,2rem)}
.quiz .pair{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.quiz .pick{border:2px solid var(--line-light);border-radius:var(--r);padding:.4rem;background:var(--card);cursor:pointer}
.quiz .pick:hover{border-color:var(--neon-deep)}
.quiz .pick img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:calc(var(--r) - 8px)}
.quiz .pick.correct{border-color:var(--neon-deep)}
.quiz .pick.wrong{border-color:var(--bad)}
.quiz .score{font-family:var(--display);font-weight:800;font-size:clamp(2rem,5vw,3rem);color:var(--on-light)}
@media (max-width:34rem){.quiz .pair{grid-template-columns:1fr}}

/* -- 9  layout pass -------------------------------------------------------- */

/* every block in a band shares the same left and right edges. The picture
   blocks get the full wrap; text blocks get the reading measure. */
.card,.figure,.tablewrap,.note,.stats,.faq,.steps,.grid,.split,.receipt-wrap,
.related{
  max-width:var(--content);margin-left:auto;margin-right:auto;width:100%}
.related .note{margin-left:0;margin-right:0}
/* .related is a text block and belongs on the reading measure with .card, not
   in the picture group below. Grouped with the full-wrap blocks it ran 95px
   wider on each side than the card above it, so the chips started outside every
   other left edge on the page and the row read as though it was not aligned. */
.sheet,.inputs,.wallgrid,.tri{max-width:var(--wrap);margin-left:auto;margin-right:auto;width:100%}
.head{max-width:46rem;margin-left:auto;margin-right:auto}

/* copy on the left, the thing it describes on the right */
.split{display:grid;gap:1rem;grid-template-columns:1fr}
@media (min-width:56rem){.split{grid-template-columns:1.35fr 1fr;align-items:start}}
.receipt-wrap{display:grid;gap:1rem;grid-template-columns:1fr}
@media (min-width:56rem){.receipt-wrap{grid-template-columns:1.15fr 1fr;align-items:start}}

/* breathing room between stacked blocks inside one band */
.band .wrap > *:not(.head) + *:not(.head){margin-top:1.35rem}
.band .wrap > .note + *{margin-top:1.35rem}

/* ==========================================================================
   10  v1 token aliases, temporary.

   The five converted showcase pages keep their own component CSS (contact
   sheets, comparison rows, the wall grid, the quiz), and those rules were
   written against the v1 light theme's variable names. Aliasing is what let
   that markup and its JavaScript come across untouched.

   Page-local CSS is inlined after this file, so where a class name collides
   with a house component the page still wins.

   Delete this block when those five pages are rebuilt on house components.
   Nothing in the 8 SEO pages or the catalog uses it.
   ========================================================================== */
:root{
  --sweep:var(--page);
  --sweep-2:var(--page-alt);
  --sweep-3:#e9ebee;
  --ink-2:var(--on-light-mute);   /* v1 meaning: muted body ink */
  --ink-3:var(--on-light-faint);  /* v1 meaning: faint ink */
  --rule:var(--line-light);
  --rule-strong:#c7cbd2;
  --accent:var(--neon);
  --accent-strong:var(--neon-fill);
  --accent-deep:var(--neon-deep);
  --accent-soft:#ecffb0;
  --accent-quiet:var(--neon-tint);
  --on-accent:#0f0f0f;
  --band-ok:#17705a;   --band-ok-bg:#e2f0ea;
  --band-mid:#8d6206;  --band-mid-bg:#f5ead2;
  --band-bad:#ab2118;  --band-bad-bg:#f6e0dd;
  --sans:var(--body);
  --measure:44rem;
  --gutter:var(--gut);
}