/* =====================================================================
   Supracited v7: the inner pages. Generated by site/build_census.py; do not hand-edit.
   Part 1: fonts, tokens, base, buttons, header and footer, copied verbatim from /css/site.v51.css (the home
   copies the same block). Part 2: site/styles/site.v60.part2.css. Then the geometry classes.
   ===================================================================== */
@font-face{font-family:"Manrope";font-style:normal;font-weight:400;font-display:swap;src:url("/fonts/manrope-400.woff2") format("woff2")}
@font-face{font-family:"Manrope";font-style:normal;font-weight:500;font-display:swap;src:url("/fonts/manrope-500.woff2") format("woff2")}
@font-face{font-family:"Manrope";font-style:normal;font-weight:600;font-display:swap;src:url("/fonts/manrope-600.woff2") format("woff2")}
@font-face{font-family:"Manrope";font-style:normal;font-weight:700;font-display:swap;src:url("/fonts/manrope-700.woff2") format("woff2")}

:root{
  --white:#FFFFFF;
  --tray:#F1F5F4;
  --ink:#0C1715;
  --muted:#444C59;
  --teal:#0B5F59;
  --teal-press:#084A45;
  --tint:#D5EEEA;
  --hair:#D9E0DF;
  --empty:#B9C6C4;
  --track:#E6ECEB;

  --font:"Manrope","Helvetica Neue",Arial,sans-serif;
  --ease-draw:cubic-bezier(0.2,0,0,1);
  --lift:0 1px 2px rgba(12,23,21,.06),0 12px 32px -8px rgba(12,23,21,.12);

  /* type: mobile value at 390px, desktop value at 1280px */
  --fs-h1:clamp(2.25rem,1.483rem + 3.146vw,4rem);          /* 36 / 64 */
  --fs-h2:clamp(1.75rem,1.421rem + 1.348vw,2.5rem);        /* 28 / 40 */
  --fs-h3:clamp(1.25rem,1.195rem + .2247vw,1.375rem);      /* 20 / 22 */
  --fs-lede:clamp(1.1875rem,1.105rem + .3371vw,1.375rem);  /* 19 / 22 */
  --fs-body:clamp(1.0625rem,1.035rem + .1124vw,1.125rem);  /* 17 / 18 */
  --fs-small:clamp(.9375rem,.9101rem + .1124vw,1rem);      /* 15 / 16 */
  --fs-stat:clamp(2.5rem,2.281rem + .8989vw,3rem);         /* 40 / 48 */
  --fs-price:clamp(2.125rem,1.961rem + .6742vw,2.5rem);    /* 34 / 40 */
  --fs-line:clamp(1.375rem,1.211rem + .6742vw,1.75rem);    /* 22 / 28 */
  --fs-q:clamp(1.125rem,1.07rem + .2247vw,1.25rem);        /* 18 / 20 */

  /* container: fluid under 1024 (the viewport is narrower than the cap), 1200 from 1024, 1320 from 1600 */
  --margin:20px;
  --container:1200px;
  --section:64px;
}
@media (min-width:720px){:root{--margin:32px}}
@media (min-width:1024px){:root{--margin:64px;--section:96px}}
@media (min-width:1600px){:root{--container:1320px}}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{font-family:"Manrope","Helvetica Neue",Arial,sans-serif;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--white);color:var(--ink);font-family:var(--font);font-size:var(--fs-body);line-height:1.6;font-weight:400;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-wrap:break-word}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
p{text-wrap:pretty}
strong,b{font-weight:600}
code{font-family:inherit;font-weight:600}
a{color:var(--teal);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;transition:text-decoration-thickness 150ms}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.skip-link{position:absolute;left:-9999px;top:8px;z-index:20;background:var(--white);color:var(--ink);padding:8px 16px;border:1.5px solid var(--ink);border-radius:10px;font-weight:600}
.skip-link:focus{left:8px}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.container{width:100%;max-width:calc(var(--container) + 2 * var(--margin));margin:0 auto;padding:0 var(--margin)}
.section{margin-top:var(--section)}
.stack>*+*{margin-top:16px}
.stack-sm>*+*{margin-top:8px}
.stack-gap{margin-top:16px}
.stack-gap-sm{margin-top:8px}
.stack-gap-lg{margin-top:32px}
.measure{max-width:68ch}
main p{max-width:68ch}
.nowrap{white-space:nowrap}

/* ---------- type ---------- */
.h1{font-size:var(--fs-h1);line-height:1.05;font-weight:700;letter-spacing:-.02em;text-wrap:balance}
.h2{font-size:var(--fs-h2);line-height:1.15;font-weight:700;letter-spacing:-.015em;text-wrap:balance}
.h3{font-size:var(--fs-h3);line-height:1.3;font-weight:600;text-wrap:balance}
.lede{font-size:var(--fs-lede);line-height:1.5;max-width:68ch}
.eyebrow{font-size:16px;line-height:1.5;font-weight:600;color:var(--teal)}
.cap,.meta{font-size:var(--fs-small);line-height:1.5;color:var(--muted)}
.label{font-size:var(--fs-small);line-height:1.5;font-weight:500}
.num{font-variant-numeric:tabular-nums}
.sec-head{max-width:820px;margin-bottom:32px}
.sec-head .h2{margin-top:8px}
.sec-head .eyebrow+.h2{margin-top:8px}
.sec-head>.h2:first-child{margin-top:0}
.sec-lede{margin-top:16px;max-width:68ch}
.engine-line{margin-top:12px;font-size:var(--fs-small);font-weight:500}
.footnote{margin-top:16px;font-size:var(--fs-small);line-height:1.5;color:var(--muted);max-width:68ch}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 24px;border-radius:10px;font-family:var(--font);font-size:17px;font-weight:600;line-height:1.2;text-decoration:none;white-space:nowrap;cursor:pointer;transition:background-color 150ms,border-color 150ms,color 150ms}
.btn-fill{background:var(--teal);color:var(--white);border:0}
.btn-fill:hover,.btn-fill:active{background:var(--teal-press);color:var(--white)}
.btn-line{background:var(--white);color:var(--ink);border:1.5px solid var(--ink)}
.btn-line:hover{border-color:var(--teal);color:var(--teal)}
.btn-line:active{background:var(--tint);color:var(--ink)}
.btn-sm{min-height:44px;padding:0 16px;font-size:16px}
.link-ink{color:var(--ink);font-weight:600;text-decoration-color:var(--teal);text-decoration-thickness:2px;text-underline-offset:4px}
.link-ink:hover{text-decoration-thickness:3px}
.link-strong{font-weight:600}

/* ---------- header ---------- */
.site-header{position:relative;z-index:10;background:var(--white);border-bottom:1px solid var(--hair)}
.head{display:flex;align-items:center;justify-content:space-between;gap:16px;height:72px}
.wordmark{display:inline-flex;align-items:center;gap:10px;color:var(--ink);font-size:20px;font-weight:700;line-height:1;letter-spacing:-.01em;text-decoration:none}
.wordmark-mark{display:inline-block;flex:none;width:14px;height:14px;border-radius:3px;background:var(--teal)}
.nav{display:flex;align-items:center;gap:24px}
.nav-links{display:flex;align-items:center;gap:24px}
.nav-links a{color:var(--ink);font-size:16px;font-weight:500;text-decoration-color:transparent;text-decoration-thickness:2px;text-underline-offset:6px;transition:text-decoration-color 150ms}
.nav-links a:hover{text-decoration-color:var(--teal)}
.nav-links a[aria-current="page"]{text-decoration-color:var(--teal)}
.t-short{display:none}
.menu{display:none;position:static}
.menu>summary{display:flex;align-items:center;gap:8px;min-height:44px;padding:0 4px;font-size:16px;font-weight:600;line-height:1;cursor:pointer;list-style:none}
.menu>summary::-webkit-details-marker{display:none}
.menu>summary::after{content:"+";font-size:20px;font-weight:600;color:var(--teal);line-height:1;width:12px;text-align:center}
.menu[open]>summary::after{content:"\2212"}
.menu-list{position:absolute;left:0;right:0;top:72px;background:var(--white);border-bottom:1px solid var(--hair);padding:8px var(--margin) 16px}
.menu-list a{display:block;padding:12px 0;color:var(--ink);font-size:17px;font-weight:500;text-decoration:none;border-bottom:1px solid var(--hair)}
.menu-list li:last-child a{border-bottom:0}
.menu-list a[aria-current="page"]{text-decoration:underline;text-decoration-color:var(--teal);text-decoration-thickness:2px;text-underline-offset:6px}
@media (min-width:900px) and (max-width:1023px){.nav,.nav-links{gap:16px}}
@media (max-width:899px){
  .nav-links{display:none}
  .menu{display:block}
  .nav{gap:12px}
}
@media (max-width:719px){
  .t-full{display:none}
  .t-short{display:inline}
}
/* v5.1: wordmark, Snapshot and Menu fit from 352px; narrower, the menu carries "Free snapshot" */
@media (max-width:389px){
  .head{gap:12px}
  .nav{gap:8px}
  .nav>.btn-sm{padding:0 12px}
  .menu>summary{padding:0}
}
@media (max-width:351px){.nav>.btn{display:none}}

/* ---------- footer ---------- */
.site-footer{margin-top:var(--section);background:var(--teal);color:var(--white);padding:64px 0 48px}
@media (max-width:719px){.site-footer{padding:48px 0 40px}}
.site-footer a{color:var(--white);text-decoration-thickness:1px}
.site-footer a:hover{text-decoration-thickness:2px}
.site-footer :focus-visible{outline-color:var(--white)}
.foot{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,2fr);gap:32px 48px}
@media (max-width:899px){.foot{grid-template-columns:minmax(0,1fr)}}
.site-footer .wordmark{color:var(--white)}
.site-footer .wordmark-mark{background:var(--white)}
.foot-tag{margin-top:12px;font-size:16px;line-height:1.5}
.foot-mail{margin-top:16px;font-size:16px}
.foot-links{display:flex;flex-wrap:wrap;gap:10px 24px;font-size:16px;font-weight:500}
.foot-excl{margin-top:24px;font-size:16px;line-height:1.55;max-width:62ch}
.foot-meta{margin-top:16px;font-size:16px;line-height:1.5}

.site-footer.site-footer--flush{margin-top:0}

/* =========================== part 2: the inner pages, in the home's language ===========================
   One family (Manrope), sentence case, nothing under 15px, paragraphs capped near 68ch. The home's tokens, its
   tray and tint bands, its crisp white cards and its shelf: boxes on rails, box height = how often AI named it.
   No eyebrow above sections (one in the page hero), no shadows on cards, no gradients, no style attributes:
   every size that comes from data is a class (.pc-N, .lo-N, .hi-N, .x-N, .w-N), generated at the end. */
:root{
  --wall:#e1ede9;--wall-in:#d0dfdb;--floor:#eef3f1;--rail:#f8fbfa;--rail-ink:#3b4a47;
  --frame:#a6b2b0;--frame-top:#c6d0ce;--frame-side:#8e9b99;
  --bx1:#b9dfd7;--bx1-top:#e0f3ef;--bx1-side:#92c3b8;
  --bx2:#7dc1b4;--bx2-top:#b0dcd3;--bx2-side:#5f9f92;
  --bx3:#0B5F59;--bx3-top:#1f7b73;--bx3-side:#084A45;
  --ease:cubic-bezier(.23,1,.32,1);
  --band:clamp(3rem,1.6rem + 4.2vw,5.5rem);
}

/* ---------- type, at the home's scale ---------- */
.h1{font-size:clamp(2.25rem,1.6rem + 2.2vw,3.375rem);line-height:1.06;letter-spacing:-.03em;font-weight:700;text-wrap:balance}
.h2{font-size:clamp(1.5rem,1.2rem + .8vw,2rem);line-height:1.2;letter-spacing:-.015em;font-weight:700;text-wrap:balance}
.h3{font-size:1.1875rem;line-height:1.3;font-weight:700;letter-spacing:-.005em;text-wrap:balance}
.eyebrow{font-size:16px;line-height:1.5;font-weight:600;color:var(--teal)}
.muted{color:var(--muted)}
.small{font-size:15px;line-height:1.5}
.t-ink{color:var(--ink)}

/* ---------- page hero ---------- */
.ph{padding-block:clamp(2.5rem,1.4rem + 3.2vw,4.5rem) clamp(2.25rem,1.4rem + 2.6vw,4rem)}
.ph .h1{margin-top:.75rem;max-width:20ch}
.ph .h1:first-child{margin-top:0}
.ph .h1.h1--long{max-width:24ch;font-size:clamp(2.125rem,1.55rem + 1.9vw,3rem)}
.ph-status{font-size:15px;line-height:1.5;color:var(--muted)}
.ph-sub{margin-top:1.1rem;font-size:1.1875rem;line-height:1.55;color:var(--muted);max-width:50ch}
.ph-sub a{color:var(--ink);text-decoration-color:var(--teal);text-decoration-thickness:2px;text-underline-offset:4px}
.ph-acts{margin-top:1.75rem;display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px}
.ph-note{margin-top:1.25rem;font-size:15px;line-height:1.5;color:var(--muted);max-width:56ch}
.ph-grid{display:grid;gap:2.5rem;align-items:center}
@media (min-width:64rem){
  .ph-grid{grid-template-columns:minmax(0,1fr) minmax(0,31rem);gap:clamp(3rem,5vw,5rem)}
  .ph-grid--wide{grid-template-columns:minmax(0,1fr) minmax(0,34rem)}
}
@media (max-width:719px){.ph-acts .btn{width:100%}}

/* ---------- bands: the colour change is the divider ---------- */
.band{padding-block:var(--band)}
.band--tray{background:var(--tray)}
.band:not(.band--tray)+.band:not(.band--tray){padding-top:0}
.band--first{padding-top:clamp(1.5rem,1rem + 1.5vw,2.5rem)}
.sh{max-width:50rem;margin-bottom:2rem}
.sh-lede{margin-top:.65rem;color:var(--muted);max-width:62ch}
.sh-meta{margin-top:.65rem;font-size:15px;line-height:1.5;font-weight:600;color:var(--ink)}
.after{margin-top:1.5rem;max-width:68ch}
.foot-note{margin-top:1.25rem;font-size:15px;line-height:1.55;color:var(--muted);max-width:72ch}
.foot-note+.foot-note{margin-top:.5rem}
.more{display:inline-block;margin-top:1.25rem;padding:.5rem 0;font-size:1rem;font-weight:600;color:var(--ink);text-decoration-color:var(--teal);text-decoration-thickness:2px;text-underline-offset:4px}
.more:hover{text-decoration-thickness:3px}
.two{display:grid;gap:2rem clamp(2rem,5vw,4.5rem)}
@media (min-width:56rem){.two{grid-template-columns:repeat(2,minmax(0,1fr))}.two--wide-left{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr)}}

/* ---------- cards: white, crisp, no shadow ---------- */
.card{min-width:0;padding:24px;border:1px solid var(--hair);border-radius:14px;background:var(--white)}
.card--hi{border:2px solid var(--teal);padding:23px}
@media (max-width:719px){.card{padding:20px}.card--hi{padding:19px}}
.card-tag{display:inline-block;margin-bottom:12px;padding:2px 12px;border-radius:999px;background:var(--tint);font-size:15px;font-weight:600;line-height:1.5}
.card .h3+p,.card .h3+.card-big{margin-top:.5rem}
.card p{font-size:1rem;line-height:1.6}
.card .card-big,.card-big{font-size:clamp(1.75rem,1.5rem + .8vw,2.125rem);line-height:1.05;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.card .card-big-l,.card-big-l{margin-top:.35rem;font-size:15px;line-height:1.45;color:var(--muted)}
.card-links{margin-top:1rem;display:flex;flex-wrap:wrap;gap:6px 22px;font-size:16px;font-weight:600}
.cards3{display:grid;gap:16px}
@media (min-width:62rem){.cards3{grid-template-columns:repeat(3,minmax(0,1fr));align-items:start}}
.cards2{display:grid;gap:16px}
@media (min-width:48rem){.cards2{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ticked list */
.ticks>li{position:relative;padding-left:22px;font-size:1rem;line-height:1.55}
.ticks>li+li{margin-top:8px}
.ticks>li::before{content:"";position:absolute;left:0;top:.72em;width:10px;height:2px;background:var(--teal)}
.ticks-h{margin-top:18px;font-size:15px;font-weight:700;line-height:1.5}
.ticks-h+.ticks{margin-top:8px}

/* rules: items under a 2px teal rule, the home's census cards */
.rules{display:grid;gap:2rem clamp(1.5rem,3vw,2.5rem)}
@media (min-width:56rem){.rules{grid-template-columns:repeat(3,minmax(0,1fr))}.rules--2{grid-template-columns:repeat(2,minmax(0,1fr))}.rules--4{grid-template-columns:repeat(4,minmax(0,1fr))}}
.rules>li{min-width:0;padding-top:1rem;border-top:2px solid var(--teal)}
.rules h3{font-size:1.125rem;line-height:1.35;font-weight:700;letter-spacing:-.01em}
.rules h3 a{color:var(--ink);text-decoration:none}
.rules h3 a:hover{color:var(--teal)}
.rules p{margin-top:.45rem;font-size:1rem;line-height:1.6;color:var(--muted)}
.rules .r-more{margin-top:.6rem;font-size:16px;font-weight:600}
.rules .r-big{margin-top:.35rem;font-size:clamp(1.625rem,1.4rem + .7vw,2rem);line-height:1.1;font-weight:700;letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums}

/* ---------- numbered steps (a real sequence) ---------- */
.steps{display:grid;gap:1.75rem clamp(1.5rem,3vw,2.75rem);counter-reset:st}
@media (min-width:48rem){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:64rem){.steps{grid-template-columns:repeat(3,minmax(0,1fr))}}
.steps>li{counter-increment:st;position:relative;min-width:0;padding-left:52px}
.steps>li::before{content:counter(st);position:absolute;left:0;top:-2px;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--white);border:1.5px solid var(--teal);font-size:16px;font-weight:700;color:var(--teal)}
.band--tray .steps>li::before{background:var(--tray)}
.steps h3{font-size:1.125rem;line-height:1.35;font-weight:700}
.steps p{margin-top:.35rem;font-size:1rem;line-height:1.6;color:var(--muted)}

/* ---------- details blocks for depth ---------- */
.folds{border-top:1px solid var(--hair)}
.fold{border-bottom:1px solid var(--hair)}
.fold>summary{position:relative;display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 14px;min-height:44px;padding:16px 44px 16px 0;cursor:pointer;list-style:none}
.fold>summary::-webkit-details-marker{display:none}
.fold>summary::after{content:"+";position:absolute;right:4px;top:50%;transform:translateY(-50%);width:20px;text-align:center;font-size:22px;font-weight:600;line-height:1;color:var(--teal)}
.fold[open]>summary::after{content:"\2212"}
.fold>summary:hover .f-name{color:var(--teal)}
.fold>summary:focus-visible{outline:2px solid var(--teal);outline-offset:2px;border-radius:4px}
.f-name{font-size:18px;font-weight:700;line-height:1.4;color:var(--ink)}
.f-what{font-size:16px;line-height:1.4;color:var(--muted)}
.fold-body{padding:4px 0 28px}
.fold-body>*+*{margin-top:14px}
.fold-body>.scroll-hint+.table-scroll{margin-top:8px}
.fold-body p{max-width:68ch}
.folds--tight{margin-top:1.5rem}

/* ---------- terms strip and start box (the home's last two zones) ---------- */
.terms-zone{border-block:1px solid var(--hair)}
.terms-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem 2rem;padding-block:1.25rem}
.comply{font-size:1rem;line-height:1.55;color:var(--ink);max-width:70ch}
.terms-zone .more{margin-top:0}
.start-zone{padding-block:clamp(2.5rem,1.6rem + 3vw,4.5rem)}
.start-box{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.25rem 2.5rem;padding:clamp(1.5rem,3vw,2.5rem);border-radius:16px;background:var(--tint)}
.start-box h2{font-size:clamp(1.375rem,1.15rem + .7vw,1.75rem);line-height:1.25;font-weight:700;letter-spacing:-.015em}
.start-box p{margin-top:.4rem;font-size:1rem;line-height:1.55;color:#24433f;max-width:52ch}
@media (max-width:60rem){.start-box>.btn{width:100%}}

/* ---------- tags ---------- */
.tag{display:inline-block;font-size:15px;font-weight:600;line-height:1.5;padding:2px 12px;border-radius:999px;color:var(--ink)}
.tag--pub{background:var(--tint)}
.tag--wait{background:var(--white);border:1px solid var(--muted);padding:1px 11px}
.kind{display:inline-block;font-size:15px;font-weight:500;line-height:1.4;padding:1px 10px;border-radius:999px;color:var(--ink);white-space:nowrap}
.kind--brand{background:var(--tint);padding:2.5px 11.5px}
.kind--store{border:1.5px solid var(--teal)}
.kind--ingredient{border:1.5px dotted var(--muted)}

/* ---------- hero figures: the census's three numbers ---------- */
.figs{border:1px solid var(--hair);border-radius:14px;background:var(--white)}
.fig{padding:18px 24px}
.fig+.fig{border-top:1px solid var(--hair)}
.fig-n{font-size:clamp(2.125rem,1.9rem + .8vw,2.625rem);line-height:1;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums;white-space:nowrap}
.fig-l{margin-top:8px;font-size:16px;font-weight:700;line-height:1.4}
.fig-g{margin-top:2px;font-size:15px;line-height:1.5;color:var(--muted)}
.fig-s{margin-top:6px;font-size:15px;line-height:1.45;color:var(--muted)}
@media (max-width:719px){.fig{padding:16px 18px}}

/* ---------- the census shelf: one box per name, height = share of answers ---------- */
.cs-key{display:flex;flex-wrap:wrap;align-items:center;gap:8px 22px;font-size:15px;line-height:1.45;color:var(--muted)}
.cs-key li{display:inline-flex;align-items:center;gap:8px;color:var(--ink);font-weight:600}
.cs-sw{display:inline-block;width:16px;height:16px;border-radius:2px;background:var(--bx3)}
.cs-sw.k-store{background:var(--bx2)}
.cs-sw.k-ingredient{background:var(--bx1);outline:1px solid var(--bx1-side);outline-offset:-1px}
.cs-sw.k-range{width:2px;height:18px;border-radius:0;background:var(--ink)}
.cs-key .cs-txt{font-weight:400;color:var(--muted)}
.cshelf{--H:8.75rem;--head:2.25rem;--d:9px;--cols:8;position:relative;margin:calc(14px + 1.25rem) 14px 0 0;padding:10px 10px 12px;background:var(--frame)}
.cshelf::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:14px;background:var(--frame-top);transform-origin:0 100%;transform:skewX(-45deg)}
.cshelf::after{content:"";position:absolute;top:0;bottom:0;left:100%;width:14px;background:var(--frame-side);transform-origin:0 0;transform:skewY(-45deg)}
.cs-list{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));row-gap:10px;background:var(--frame)}
.cs-slot{position:relative;display:flex;flex-direction:column;min-width:0;background:var(--wall)}
.cs-area{position:relative;order:1;height:calc(var(--H) + var(--head));border-top:4px solid var(--wall-in)}
.cs-in{position:absolute;left:0;right:0;bottom:0;height:var(--H)}
.cs-box{position:absolute;left:14%;right:calc(22% + var(--d));bottom:0;height:var(--p);min-height:3px;background:var(--bx3)}
.cs-box::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:var(--d);background:var(--bx3-top);transform-origin:0 100%;transform:skewX(-45deg)}
.cs-box::after{content:"";position:absolute;top:0;bottom:0;left:100%;width:var(--d);background:var(--bx3-side);transform-origin:0 0;transform:skewY(-45deg)}
.k-store .cs-box{background:var(--bx2)}.k-store .cs-box::before{background:var(--bx2-top)}.k-store .cs-box::after{background:var(--bx2-side)}
.k-ingredient .cs-box{background:var(--bx1)}.k-ingredient .cs-box::before{background:var(--bx1-top)}.k-ingredient .cs-box::after{background:var(--bx1-side)}
.cs-rng{position:absolute;right:10%;bottom:var(--lo);height:calc(var(--hi) - var(--lo));min-height:2px;width:2px;background:var(--ink)}
.cs-rng::before,.cs-rng::after{content:"";position:absolute;left:-3px;width:8px;height:2px;background:var(--ink)}
.cs-rng::before{top:0}.cs-rng::after{bottom:0}
.cs-n{position:absolute;left:0;right:calc(8% + var(--d));display:flex;justify-content:center;gap:.25em;top:calc(4px + var(--head) + var(--H) * (1 - var(--pn)) - var(--d) - 1.6rem);text-align:center;font-size:16px;font-weight:700;line-height:1.1;color:var(--ink);white-space:nowrap;font-variant-numeric:tabular-nums}
.cs-of{font-weight:600;color:var(--muted)}
.cs-rail{order:2;flex:1 0 auto;padding:9px 10px 11px;background:var(--rail);border-top:5px solid var(--floor);text-align:center}
.cs-name{display:block;font-size:15px;font-weight:700;line-height:1.3;color:var(--ink);text-wrap:balance}
.cs-kind{display:block;font-size:15px;line-height:1.35;color:var(--muted)}
.cs-r{display:block;margin-top:2px;font-size:15px;line-height:1.35;color:var(--muted);font-variant-numeric:tabular-nums}
.cs-fill .cs-rail{min-height:2rem}
@media (min-width:720px) and (max-width:1099px){.cshelf.cols-6 .cs-slot.cs-fill,.cshelf.cols-7 .cs-slot.cs-fill,.cshelf.cols-8 .cs-slot.cs-fill{display:none}}
@media (max-width:719px){.cs-slot.cs-fill{display:none}}
.cols-1{--cols:1}.cols-2{--cols:2}.cols-3{--cols:3}.cols-4{--cols:4}.cols-5{--cols:5}.cols-6{--cols:6}.cols-7{--cols:7}.cols-8{--cols:8}
@media (min-width:720px) and (max-width:1099px){.cshelf.cols-6,.cshelf.cols-7,.cshelf.cols-8{--cols:5}}
.cshelf--mini{--H:6.5rem;--head:2rem;--d:7px;margin-top:calc(10px + 1rem);margin-right:10px;padding:8px 8px 10px}
.cshelf--mini::before{height:10px}.cshelf--mini::after{width:10px}
@media (min-width:720px){.cshelf--mini .cs-of{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}}
@media (max-width:719px){
  .cshelf,.cshelf--mini{margin:0;padding:0;background:none}
  .cshelf::before,.cshelf::after{display:none}
  .cs-list{grid-template-columns:minmax(0,1fr);row-gap:0;background:none;border-top:1px solid var(--hair)}
  .cs-slot{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"name n" "bar bar" "meta meta";column-gap:12px;padding:12px 0;background:none;border-bottom:1px solid var(--hair)}
  .cs-rail{display:contents}
  .cs-name{grid-area:name;align-self:baseline;font-size:16px;text-align:left}
  .cs-kind,.cs-r{display:inline;margin:0}
  .cs-meta{grid-area:meta;margin-top:12px;font-size:15px;line-height:1.4;color:var(--muted);text-align:left}
  .cs-kind::after{content:"\00a0\00b7\00a0"}
  .cs-area{grid-area:bar;height:16px;margin-top:8px;border:0;background:var(--track);border-radius:3px}
  .cs-in{top:0;height:100%}
  .cs-box{left:0;right:auto;top:0;bottom:0;height:auto;width:var(--p);min-width:3px;border-radius:3px}
  .cs-box::before,.cs-box::after{display:none}
  .cs-rng{right:auto;left:var(--lo);top:calc(100% + 5px);bottom:auto;height:2px;width:calc(var(--hi) - var(--lo));min-width:2px}
  .cs-rng::before,.cs-rng::after{left:auto;top:-3px;width:2px;height:8px}
  .cs-rng::before{left:0}.cs-rng::after{right:0}
  .cs-n{position:static;grid-area:n;align-self:baseline;font-size:16px;text-align:right}
}
@media (min-width:720px){.cs-meta{display:contents}}

/* three small shelves side by side: the same six questions, from memory and with search */
.cmp{display:grid;gap:1.5rem}
@media (min-width:64rem){.cmp{grid-template-columns:repeat(3,minmax(0,1fr));gap:2rem}}
.cmp-h{font-size:16px;font-weight:700;line-height:1.4}
.cmp-s{font-size:15px;line-height:1.45;color:var(--muted)}
.finding{max-width:46rem}
.finding-l{font-size:clamp(1.1875rem,1.1rem + .35vw,1.375rem);line-height:1.45;font-weight:600;letter-spacing:-.005em;color:var(--ink)}
.finding p+p{margin-top:.75rem}
.plain{margin-top:1rem;padding:14px 18px;border-radius:12px;background:var(--white);border:1px solid var(--hair);font-size:1rem;line-height:1.55;max-width:68ch}

/* ---------- model by brand: a compact grid of filled boxes ---------- */
.mg-wrap{margin-top:2rem}
.mgrid{width:100%;border-collapse:separate;border-spacing:6px;table-layout:fixed;margin:-6px}
.mgrid th,.mgrid td{padding:0;text-align:left;vertical-align:middle}
.mgrid thead th{padding:0 0 4px;font-size:15px;font-weight:700;line-height:1.3;text-align:center;color:var(--ink)}
.mgrid thead th:first-child{width:13.5rem}
.mgrid tbody th{padding-right:10px;font-weight:400}
.mg-name{display:block;font-size:16px;font-weight:700;line-height:1.3;color:var(--ink)}
.mg-sub{display:block;font-size:15px;line-height:1.35;color:var(--muted)}
.mg-c{position:relative;display:flex;align-items:flex-start;justify-content:center;padding-top:7px;height:3.25rem;border-radius:6px;background:var(--wall);overflow:hidden;font-variant-numeric:tabular-nums}
.mg-c::before{content:"";position:absolute;left:0;right:0;bottom:0;height:var(--p);background:var(--bx2)}
.mg-k{position:relative;font-size:17px;font-weight:700;line-height:1;color:var(--ink)}
.mg-of{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.mgrid tr.is-thin .mg-c{background:var(--white);border:1.5px dashed var(--slot-line,#6f8c87)}
@media (max-width:719px){
  .mgrid,.mgrid thead,.mgrid tbody{display:block}
  .mgrid{margin:0}
  .mgrid tr{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px}
  .mgrid thead th:first-child{display:none}
  .mgrid thead th{padding-bottom:2px;font-weight:600}
  .mgrid tbody th{grid-column:1/-1;padding:12px 0 2px}
  .mg-name,.mg-sub{display:inline}
  .mg-name::after{content:"\00a0\00b7\00a0";font-weight:400;color:var(--muted)}
  .mg-c{height:2.75rem;border-radius:5px}
}

/* ---------- one answer per square (how it works) ---------- */
.dgrid{display:grid;gap:7px}
.dgrid{gap:12px}
.dg-row{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"q n" "c c";align-items:baseline;gap:5px 12px}
.dg-q{grid-area:q}.dg-n{grid-area:n}.dg-cells{grid-area:c}
.dg-q{font-size:15px;font-weight:600;line-height:1.3;color:var(--ink)}
.dg-cells{display:grid;grid-template-columns:repeat(20,minmax(0,1fr));gap:3px}
.dg-cells>span{display:block;aspect-ratio:1;border:1.5px solid var(--empty);border-radius:2px}
.dg-cells>span.on{background:var(--teal);border-color:var(--teal)}
.dg-n{font-size:15px;font-weight:600;color:var(--ink);text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.dg-cap{margin-top:14px;font-size:15px;line-height:1.5;color:var(--muted)}
.dg-total{margin-bottom:14px;font-size:16px;font-weight:700}
@media (max-width:519px){.dg-cells{gap:2px}}
.dg-card{padding:28px}
@media (max-width:719px){.dg-card{padding:20px}}

/* ---------- the scale shelf (studies): one box per 200 simulated buyer conversations ---------- */
.scale{position:relative;margin:14px 14px 0 0;padding:10px 10px 12px;background:var(--frame)}
.scale::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:14px;background:var(--frame-top);transform-origin:0 100%;transform:skewX(-45deg)}
.scale::after{content:"";position:absolute;top:0;bottom:0;left:100%;width:14px;background:var(--frame-side);transform-origin:0 0;transform:skewY(-45deg)}
.sc-shelf{background:var(--wall);border-top:4px solid var(--wall-in)}
.sc-shelf+.sc-shelf{margin-top:10px}
.sc-boxes{display:flex;flex-wrap:wrap-reverse;align-content:flex-start;gap:13px 9px;height:calc(2 * 1.5rem + 13px + 20px);padding:20px calc(10px + 6px) 0 12px}
.sc-boxes>span{position:relative;display:block;flex:0 0 calc((100% - 9 * 9px) / 10);height:1.5rem;background:var(--bx1)}
.sc-boxes>span::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:6px;background:var(--bx1-top);transform-origin:0 100%;transform:skewX(-45deg)}
.sc-boxes>span::after{content:"";position:absolute;top:0;bottom:0;left:100%;width:6px;background:var(--bx1-side);transform-origin:0 0;transform:skewY(-45deg)}
.sc-2 .sc-boxes>span{background:var(--bx2)}.sc-2 .sc-boxes>span::before{background:var(--bx2-top)}.sc-2 .sc-boxes>span::after{background:var(--bx2-side)}
.sc-3 .sc-boxes>span{background:var(--bx3)}.sc-3 .sc-boxes>span::before{background:var(--bx3-top)}.sc-3 .sc-boxes>span::after{background:var(--bx3-side)}
.sc-rail{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:2px 14px;margin-top:10px;padding:9px 12px 10px;background:var(--rail);border-top:5px solid var(--floor)}
.sc-name{font-size:16px;font-weight:700;color:var(--ink)}
.sc-v{font-size:15px;font-weight:600;color:var(--rail-ink);font-variant-numeric:tabular-nums}
.sc-cap{margin-top:12px;font-size:15px;line-height:1.5;color:var(--muted)}

/* ---------- tables ---------- */
.table-scroll{overflow-x:auto;border:1px solid var(--hair);border-radius:14px;background:var(--white)}
.table-scroll:focus-visible{outline-offset:2px}
.data{width:100%;border-collapse:collapse;font-size:16px;line-height:1.5}
.data caption{caption-side:top;text-align:left;padding:14px 18px;font-size:15px;color:var(--muted);border-bottom:1px solid var(--hair)}
.data th,.data td{padding:14px 16px;text-align:left;vertical-align:top;border-bottom:1px solid var(--hair)}
.data thead th{font-size:15px;font-weight:700;background:var(--tray);color:var(--ink);vertical-align:bottom;min-width:96px}
.data tbody th{font-weight:600}
.data tbody tr:last-child>*{border-bottom:0}
.data .num{text-align:right;font-variant-numeric:tabular-nums}
.data td.num{white-space:nowrap}
.data .nowrap{white-space:nowrap}
.data .td-bar{min-width:240px;width:28%}
.data .td-bar .cap{margin-top:8px}
.data--census{min-width:980px}
.data--routes{min-width:720px}
.data--integrity{min-width:820px}
.data--models{min-width:1180px}
.data--models td{white-space:nowrap}
.data--doms{min-width:0}
.scroll-hint{display:none;margin-bottom:8px;font-size:15px;color:var(--muted)}
@media (max-width:719px){.scroll-hint{display:block}}
.bar{position:relative;display:block;height:12px;border-radius:6px;background:var(--track)}
.bar-fill{position:absolute;top:0;bottom:0;border-radius:6px;background:var(--teal);min-width:4px}
.bar-tick{position:absolute;top:-4px;width:2px;height:20px;margin-left:-1px;background:var(--ink)}
.bar-tick.x-0{margin-left:0}
.bar-tick.x-100{margin-left:-2px}
.flag{font-weight:700}

/* sources, grouped by what they are */
.srcgroups{display:grid;gap:1.75rem clamp(1.5rem,3vw,2.5rem)}
@media (min-width:48rem){.srcgroups{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:75rem){.srcgroups{grid-template-columns:repeat(4,minmax(0,1fr))}.srcgroups.g-5{grid-template-columns:repeat(3,minmax(0,1fr))}}
.srcgroup{min-width:0;padding-top:1rem;border-top:2px solid var(--teal)}
.srcgroup-h{font-size:1.0625rem;line-height:1.35;font-weight:700}
.srcgroup-list{margin-top:.5rem}
.srcgroup-list li{padding:9px 0;border-top:1px solid var(--hair)}
.srcgroup-list li:first-child{border-top:0}
.src-domain{display:block;font-size:16px;font-weight:600;line-height:1.4;overflow-wrap:anywhere}
.src-count,.src-type{display:block;font-size:15px;line-height:1.45}
.src-count{color:var(--ink)}
.src-type{color:var(--muted)}
.srcgroup-empty{margin-top:.5rem;font-size:15px;line-height:1.5;color:var(--muted)}
.doms{display:flex;flex-wrap:wrap;gap:8px 10px;margin-top:1rem}
.doms li{padding:6px 12px;border:1px solid var(--hair);border-radius:999px;background:var(--white);font-size:15px;line-height:1.4}
.doms strong{font-weight:700}
.doms span{color:var(--muted)}

/* questions and corrections */
.qlist{counter-reset:q;display:grid;gap:0 clamp(2rem,4vw,3.5rem)}
@media (min-width:56rem){.qlist--2{grid-template-columns:repeat(2,minmax(0,1fr))}}
.qlist li{counter-increment:q;display:grid;grid-template-columns:28px minmax(0,1fr);gap:8px;padding:11px 0;border-top:1px solid var(--hair);font-size:1rem;line-height:1.5}
.qlist li::before{content:counter(q);font-weight:700;color:var(--teal)}
.qlist--rules li{grid-template-columns:32px minmax(0,1fr);padding:14px 0;font-size:1.0625rem}
.corrections li{padding:11px 0;border-top:1px solid var(--hair);font-size:15px;line-height:1.55;color:var(--muted);max-width:90ch}
.corrections li:first-child{border-top:0;padding-top:0}

/* other censuses */
.ccards{display:grid;gap:1.75rem clamp(1.25rem,3vw,2.5rem)}
@media (min-width:48rem){.ccards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:75rem){.ccards{grid-template-columns:repeat(4,minmax(0,1fr))}}
.ccards li{min-width:0;padding-top:1rem;border-top:2px solid var(--teal)}
.ccards h3{font-size:1.125rem;line-height:1.35;font-weight:700;letter-spacing:-.01em}
.ccards h3 a{color:var(--ink);text-decoration:none}
.ccards h3 a:hover{color:var(--teal);text-decoration:underline}
.ccards p{margin-top:.4rem;font-size:1rem;line-height:1.55;color:var(--muted)}

/* ---------- census index cards ---------- */
.cats{display:grid;gap:16px}
@media (min-width:52rem){.cats{grid-template-columns:repeat(2,minmax(0,1fr))}}
.cat{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:10px;min-width:0;padding:26px;border:1px solid var(--hair);border-radius:14px;background:var(--white);transition:border-color 150ms}
@media (hover:hover) and (pointer:fine){.cat:hover{border-color:var(--teal)}}
@media (max-width:719px){.cat{padding:20px}}
.cat-title{font-size:1.375rem;line-height:1.25;font-weight:700;letter-spacing:-.015em}
.cat-title a{color:var(--ink);text-decoration:none}
.cat-title a::after{content:"";position:absolute;inset:0;border-radius:14px}
.cat-title a:focus-visible{outline:none}
.cat-title a:focus-visible::after{outline:2px solid var(--teal);outline-offset:2px}
.cat-find{font-size:1.0625rem;line-height:1.5;font-weight:600;color:var(--ink)}
.cat-asked{font-size:1rem;line-height:1.55;color:var(--muted)}
.cat-meta{font-size:15px;line-height:1.5;color:var(--muted)}
.cat-link{margin-top:auto;padding-top:4px;font-size:16px;font-weight:600;color:var(--ink);text-decoration:underline;text-decoration-color:var(--teal);text-decoration-thickness:2px;text-underline-offset:4px}
.cat--row{margin-top:16px;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 32px}
.cat--row .cat-body{flex:1 1 420px;min-width:0}
.cat--row .cat-title{font-size:1.25rem}
.cat--row .cat-find{margin-top:4px;font-weight:400;font-size:1rem;color:var(--muted)}
.cat-links{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:8px 24px;font-size:16px;font-weight:600}
.qg{display:grid;grid-template-columns:repeat(20,10px);grid-auto-rows:10px;gap:3px;margin-top:4px}
.qg--10{grid-template-columns:repeat(10,10px)}
.qg>span{display:block;border:1.5px solid var(--empty);border-radius:1px}
.qg>span.on{background:var(--teal);border-color:var(--teal)}
.qg-cap{margin-top:8px;font-size:15px;line-height:1.5;color:var(--muted)}
@media (max-width:389px){.qg{grid-template-columns:repeat(20,9px);grid-auto-rows:9px;gap:2px}.qg--10{grid-template-columns:repeat(10,9px)}}

/* ---------- the annotated answer ---------- */
.answer{max-width:58rem;background:var(--white);border:1px solid var(--hair);border-radius:16px;padding:32px;min-width:0}
@media (max-width:719px){.answer{border-radius:14px;padding:20px}}
.ans-meta{font-size:15px;line-height:1.5;color:var(--muted)}
.ans-q{margin-top:6px;font-size:var(--fs-q);line-height:1.35;font-weight:700}
.ans-engine{margin-top:6px;font-size:15px;line-height:1.5;color:var(--muted)}
.ans-body{margin-top:20px;padding-top:24px;border-top:1px solid var(--hair);display:grid;grid-template-columns:minmax(0,448fr) 32px minmax(0,216fr);grid-template-rows:auto auto auto;row-gap:20px}
.ans-body::before{content:"";grid-column:2;grid-row:1/span 3;justify-self:center;width:1px;background:var(--hair)}
.ans-quote{grid-column:1;grid-row:1/span 3;display:grid;grid-template-rows:subgrid;font-size:var(--fs-body);line-height:1.65;font-variant-ligatures:no-contextual}
.ans-quote p{min-width:0}
.ans-notes{grid-column:3;grid-row:1/span 3;display:grid;grid-template-rows:subgrid}
.ans-notes>li{display:grid;align-content:start;gap:16px;min-width:0}
.note{position:relative;line-height:1.45}
.note::before{content:"";position:absolute;left:-26px;top:11px;width:20px;height:2px;background:var(--teal);transform-origin:right center}
.note-names{display:block;font-size:16px;font-weight:600;color:var(--ink)}
.note-kind{display:block;font-size:15px;font-weight:500;color:var(--ink)}
.note-count{display:block;font-size:15px;color:var(--muted)}
.note--verdict{background:var(--tint);padding:12px 14px;border-radius:8px}
.note--verdict::before{top:23px}
.verdict-line{display:block;font-size:17px;font-weight:700;line-height:1.4;color:var(--ink)}
.verdict-sub{display:block;margin-top:4px;font-size:15px;line-height:1.45;color:var(--ink)}
@media (max-width:899px){.ans-body{grid-template-columns:minmax(0,368fr) 32px minmax(0,208fr)}}
@media (max-width:719px){
  .ans-body{display:block;padding-top:20px}
  .ans-body::before{display:none}
  .ans-quote{display:block}
  .ans-quote p+p{margin-top:16px}
  .ans-notes{display:block;margin-top:24px}
  .ans-notes>li{gap:12px}
  .ans-notes>li+li{margin-top:12px}
  .note{padding-left:15px}
  .note::before{left:0;top:0;bottom:0;width:3px;height:auto;transform-origin:center top}
  .note--verdict{padding:12px 14px 12px 17px;border-radius:0 8px 8px 0}
}
.m{position:relative;z-index:0;color:inherit;background:none;padding:0 2px;white-space:nowrap}
.m-brand,.m-store{background-image:linear-gradient(var(--tint),var(--tint));background-repeat:no-repeat;background-position:0 0;background-size:100% 100%;border-radius:2px}
.m-store::after,.m-ing::after{content:"";position:absolute;left:0;right:0;bottom:-5px;height:2px;background:var(--teal);transform-origin:left center}
.m-ing{padding:0}
.m-ing::after{bottom:-3px;height:0;background:none;border-bottom:2px dotted var(--teal)}
.ans-src{margin-top:24px;padding-top:20px;border-top:1px solid var(--hair)}
.ans-src-h{font-size:16px;font-weight:700;line-height:1.5}
.ans-src-list{margin-top:8px}
.ans-src-list li{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:2px 16px;padding:8px 0;border-top:1px solid var(--hair)}
.ans-src-list li:first-child{border-top:0}
.ans-src-list .src-domain,.ans-src-list .src-type{display:block}
.ans-foot{margin-top:16px;font-size:15px;line-height:1.5;color:var(--muted)}
@media (max-width:719px){.ans-src-list li{grid-template-columns:minmax(0,1fr)}}
@keyframes draw-fill{from{background-size:0% 100%}}
@keyframes draw-x{from{transform:scaleX(0)}}
@keyframes draw-y{from{transform:scaleY(0)}}
@media (prefers-reduced-motion:no-preference){
  .answer .m-brand,.answer .m-store{animation:draw-fill 200ms var(--ease-draw) backwards}
  .answer .m-store::after,.answer .m-ing::after{animation:draw-x 200ms var(--ease-draw) backwards}
  .answer .note::before{animation:draw-x 200ms var(--ease-draw) backwards}
  .answer .md1,.answer .md1::after{animation-delay:40ms}
  .answer .md2,.answer .md2::after{animation-delay:80ms}
  .answer .md3,.answer .md3::after{animation-delay:120ms}
  .answer .md4,.answer .md4::after{animation-delay:160ms}
  .answer .md5,.answer .md5::after{animation-delay:200ms}
  .answer .md6,.answer .md6::after{animation-delay:240ms}
  .answer .md7,.answer .md7::after{animation-delay:280ms}
  .answer .md8,.answer .md8::after{animation-delay:320ms}
  .answer .md9,.answer .md9::after{animation-delay:360ms}
  .answer .nd0::before{animation-delay:200ms}
  .answer .nd1::before{animation-delay:260ms}
  .answer .nd2::before{animation-delay:320ms}
  .answer .nd3::before{animation-delay:380ms}
}
@media (prefers-reduced-motion:no-preference) and (max-width:719px){.answer .note::before{animation-name:draw-y}}

/* ---------- method: the keyboards grid ---------- */
.sgrid{display:flex;flex-wrap:wrap;gap:10px}
.sgrid-grp{display:inline-grid;grid-template-columns:repeat(3,22px);gap:3px}
.sgrid .cell{display:block;width:22px;height:22px;border:1.5px solid var(--empty)}
.sgrid .cell.on{background:var(--teal);border-color:var(--teal)}

/* ---------- forms (Shelf Check) ---------- */
.form-card{max-width:720px;border:1px solid var(--hair);border-radius:16px;padding:32px;background:var(--white)}
@media (max-width:719px){.form-card{padding:20px}}
.field+.field{margin-top:20px}
.field label{display:block;font-size:16px;font-weight:600;line-height:1.5;margin-bottom:6px}
.field input{display:block;width:100%;min-height:48px;padding:10px 14px;font-family:var(--font);font-size:17px;color:var(--ink);background:var(--white);border:1.5px solid var(--muted);border-radius:10px}
.field input::placeholder{color:var(--muted);opacity:1}
.field input:focus-visible{outline:2px solid var(--teal);outline-offset:2px;border-color:var(--teal)}
.form-actions{margin-top:28px}
.hint{margin-top:20px;font-size:15px;line-height:1.5;color:var(--muted)}
.links-row{display:flex;flex-wrap:wrap;gap:12px 28px;margin-top:24px;font-weight:600}

/* ---------- press feedback and reduced motion ---------- */
.btn{transition:background-color 150ms,border-color 150ms,color 150ms,transform 160ms var(--ease)}
.btn:active{transform:scale(.97)}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* ---------- geometry as classes (CSP: no style attributes) ---------- */
.x-0{left:0%}.x-1{left:1%}.x-2{left:2%}.x-3{left:3%}.x-4{left:4%}.x-5{left:5%}.x-6{left:6%}.x-7{left:7%}.x-8{left:8%}.x-9{left:9%}.x-10{left:10%}.x-11{left:11%}.x-12{left:12%}.x-13{left:13%}.x-14{left:14%}.x-15{left:15%}.x-16{left:16%}.x-17{left:17%}.x-18{left:18%}.x-19{left:19%}.x-20{left:20%}.x-21{left:21%}.x-22{left:22%}.x-23{left:23%}.x-24{left:24%}.x-25{left:25%}.x-26{left:26%}.x-27{left:27%}.x-28{left:28%}.x-29{left:29%}.x-30{left:30%}.x-31{left:31%}.x-32{left:32%}.x-33{left:33%}.x-34{left:34%}.x-35{left:35%}.x-36{left:36%}.x-37{left:37%}.x-38{left:38%}.x-39{left:39%}.x-40{left:40%}.x-41{left:41%}.x-42{left:42%}.x-43{left:43%}.x-44{left:44%}.x-45{left:45%}.x-46{left:46%}.x-47{left:47%}.x-48{left:48%}.x-49{left:49%}.x-50{left:50%}.x-51{left:51%}.x-52{left:52%}.x-53{left:53%}.x-54{left:54%}.x-55{left:55%}.x-56{left:56%}.x-57{left:57%}.x-58{left:58%}.x-59{left:59%}.x-60{left:60%}.x-61{left:61%}.x-62{left:62%}.x-63{left:63%}.x-64{left:64%}.x-65{left:65%}.x-66{left:66%}.x-67{left:67%}.x-68{left:68%}.x-69{left:69%}.x-70{left:70%}.x-71{left:71%}.x-72{left:72%}.x-73{left:73%}.x-74{left:74%}.x-75{left:75%}.x-76{left:76%}.x-77{left:77%}.x-78{left:78%}.x-79{left:79%}.x-80{left:80%}.x-81{left:81%}.x-82{left:82%}.x-83{left:83%}.x-84{left:84%}.x-85{left:85%}.x-86{left:86%}.x-87{left:87%}.x-88{left:88%}.x-89{left:89%}.x-90{left:90%}.x-91{left:91%}.x-92{left:92%}.x-93{left:93%}.x-94{left:94%}.x-95{left:95%}.x-96{left:96%}.x-97{left:97%}.x-98{left:98%}.x-99{left:99%}.x-100{left:100%}
.w-0{width:0%}.w-1{width:1%}.w-2{width:2%}.w-3{width:3%}.w-4{width:4%}.w-5{width:5%}.w-6{width:6%}.w-7{width:7%}.w-8{width:8%}.w-9{width:9%}.w-10{width:10%}.w-11{width:11%}.w-12{width:12%}.w-13{width:13%}.w-14{width:14%}.w-15{width:15%}.w-16{width:16%}.w-17{width:17%}.w-18{width:18%}.w-19{width:19%}.w-20{width:20%}.w-21{width:21%}.w-22{width:22%}.w-23{width:23%}.w-24{width:24%}.w-25{width:25%}.w-26{width:26%}.w-27{width:27%}.w-28{width:28%}.w-29{width:29%}.w-30{width:30%}.w-31{width:31%}.w-32{width:32%}.w-33{width:33%}.w-34{width:34%}.w-35{width:35%}.w-36{width:36%}.w-37{width:37%}.w-38{width:38%}.w-39{width:39%}.w-40{width:40%}.w-41{width:41%}.w-42{width:42%}.w-43{width:43%}.w-44{width:44%}.w-45{width:45%}.w-46{width:46%}.w-47{width:47%}.w-48{width:48%}.w-49{width:49%}.w-50{width:50%}.w-51{width:51%}.w-52{width:52%}.w-53{width:53%}.w-54{width:54%}.w-55{width:55%}.w-56{width:56%}.w-57{width:57%}.w-58{width:58%}.w-59{width:59%}.w-60{width:60%}.w-61{width:61%}.w-62{width:62%}.w-63{width:63%}.w-64{width:64%}.w-65{width:65%}.w-66{width:66%}.w-67{width:67%}.w-68{width:68%}.w-69{width:69%}.w-70{width:70%}.w-71{width:71%}.w-72{width:72%}.w-73{width:73%}.w-74{width:74%}.w-75{width:75%}.w-76{width:76%}.w-77{width:77%}.w-78{width:78%}.w-79{width:79%}.w-80{width:80%}.w-81{width:81%}.w-82{width:82%}.w-83{width:83%}.w-84{width:84%}.w-85{width:85%}.w-86{width:86%}.w-87{width:87%}.w-88{width:88%}.w-89{width:89%}.w-90{width:90%}.w-91{width:91%}.w-92{width:92%}.w-93{width:93%}.w-94{width:94%}.w-95{width:95%}.w-96{width:96%}.w-97{width:97%}.w-98{width:98%}.w-99{width:99%}.w-100{width:100%}
.pc-0{--p:0%;--pn:0}.pc-1{--p:1%;--pn:0.01}.pc-2{--p:2%;--pn:0.02}.pc-3{--p:3%;--pn:0.03}.pc-4{--p:4%;--pn:0.04}.pc-5{--p:5%;--pn:0.05}.pc-6{--p:6%;--pn:0.06}.pc-7{--p:7%;--pn:0.07}.pc-8{--p:8%;--pn:0.08}.pc-9{--p:9%;--pn:0.09}.pc-10{--p:10%;--pn:0.1}.pc-11{--p:11%;--pn:0.11}.pc-12{--p:12%;--pn:0.12}.pc-13{--p:13%;--pn:0.13}.pc-14{--p:14%;--pn:0.14}.pc-15{--p:15%;--pn:0.15}.pc-16{--p:16%;--pn:0.16}.pc-17{--p:17%;--pn:0.17}.pc-18{--p:18%;--pn:0.18}.pc-19{--p:19%;--pn:0.19}.pc-20{--p:20%;--pn:0.2}.pc-21{--p:21%;--pn:0.21}.pc-22{--p:22%;--pn:0.22}.pc-23{--p:23%;--pn:0.23}.pc-24{--p:24%;--pn:0.24}.pc-25{--p:25%;--pn:0.25}.pc-26{--p:26%;--pn:0.26}.pc-27{--p:27%;--pn:0.27}.pc-28{--p:28%;--pn:0.28}.pc-29{--p:29%;--pn:0.29}.pc-30{--p:30%;--pn:0.3}.pc-31{--p:31%;--pn:0.31}.pc-32{--p:32%;--pn:0.32}.pc-33{--p:33%;--pn:0.33}.pc-34{--p:34%;--pn:0.34}.pc-35{--p:35%;--pn:0.35}.pc-36{--p:36%;--pn:0.36}.pc-37{--p:37%;--pn:0.37}.pc-38{--p:38%;--pn:0.38}.pc-39{--p:39%;--pn:0.39}.pc-40{--p:40%;--pn:0.4}.pc-41{--p:41%;--pn:0.41}.pc-42{--p:42%;--pn:0.42}.pc-43{--p:43%;--pn:0.43}.pc-44{--p:44%;--pn:0.44}.pc-45{--p:45%;--pn:0.45}.pc-46{--p:46%;--pn:0.46}.pc-47{--p:47%;--pn:0.47}.pc-48{--p:48%;--pn:0.48}.pc-49{--p:49%;--pn:0.49}.pc-50{--p:50%;--pn:0.5}.pc-51{--p:51%;--pn:0.51}.pc-52{--p:52%;--pn:0.52}.pc-53{--p:53%;--pn:0.53}.pc-54{--p:54%;--pn:0.54}.pc-55{--p:55%;--pn:0.55}.pc-56{--p:56%;--pn:0.56}.pc-57{--p:57%;--pn:0.57}.pc-58{--p:58%;--pn:0.58}.pc-59{--p:59%;--pn:0.59}.pc-60{--p:60%;--pn:0.6}.pc-61{--p:61%;--pn:0.61}.pc-62{--p:62%;--pn:0.62}.pc-63{--p:63%;--pn:0.63}.pc-64{--p:64%;--pn:0.64}.pc-65{--p:65%;--pn:0.65}.pc-66{--p:66%;--pn:0.66}.pc-67{--p:67%;--pn:0.67}.pc-68{--p:68%;--pn:0.68}.pc-69{--p:69%;--pn:0.69}.pc-70{--p:70%;--pn:0.7}.pc-71{--p:71%;--pn:0.71}.pc-72{--p:72%;--pn:0.72}.pc-73{--p:73%;--pn:0.73}.pc-74{--p:74%;--pn:0.74}.pc-75{--p:75%;--pn:0.75}.pc-76{--p:76%;--pn:0.76}.pc-77{--p:77%;--pn:0.77}.pc-78{--p:78%;--pn:0.78}.pc-79{--p:79%;--pn:0.79}.pc-80{--p:80%;--pn:0.8}.pc-81{--p:81%;--pn:0.81}.pc-82{--p:82%;--pn:0.82}.pc-83{--p:83%;--pn:0.83}.pc-84{--p:84%;--pn:0.84}.pc-85{--p:85%;--pn:0.85}.pc-86{--p:86%;--pn:0.86}.pc-87{--p:87%;--pn:0.87}.pc-88{--p:88%;--pn:0.88}.pc-89{--p:89%;--pn:0.89}.pc-90{--p:90%;--pn:0.9}.pc-91{--p:91%;--pn:0.91}.pc-92{--p:92%;--pn:0.92}.pc-93{--p:93%;--pn:0.93}.pc-94{--p:94%;--pn:0.94}.pc-95{--p:95%;--pn:0.95}.pc-96{--p:96%;--pn:0.96}.pc-97{--p:97%;--pn:0.97}.pc-98{--p:98%;--pn:0.98}.pc-99{--p:99%;--pn:0.99}.pc-100{--p:100%;--pn:1}
.lo-0{--lo:0%}.lo-1{--lo:1%}.lo-2{--lo:2%}.lo-3{--lo:3%}.lo-4{--lo:4%}.lo-5{--lo:5%}.lo-6{--lo:6%}.lo-7{--lo:7%}.lo-8{--lo:8%}.lo-9{--lo:9%}.lo-10{--lo:10%}.lo-11{--lo:11%}.lo-12{--lo:12%}.lo-13{--lo:13%}.lo-14{--lo:14%}.lo-15{--lo:15%}.lo-16{--lo:16%}.lo-17{--lo:17%}.lo-18{--lo:18%}.lo-19{--lo:19%}.lo-20{--lo:20%}.lo-21{--lo:21%}.lo-22{--lo:22%}.lo-23{--lo:23%}.lo-24{--lo:24%}.lo-25{--lo:25%}.lo-26{--lo:26%}.lo-27{--lo:27%}.lo-28{--lo:28%}.lo-29{--lo:29%}.lo-30{--lo:30%}.lo-31{--lo:31%}.lo-32{--lo:32%}.lo-33{--lo:33%}.lo-34{--lo:34%}.lo-35{--lo:35%}.lo-36{--lo:36%}.lo-37{--lo:37%}.lo-38{--lo:38%}.lo-39{--lo:39%}.lo-40{--lo:40%}.lo-41{--lo:41%}.lo-42{--lo:42%}.lo-43{--lo:43%}.lo-44{--lo:44%}.lo-45{--lo:45%}.lo-46{--lo:46%}.lo-47{--lo:47%}.lo-48{--lo:48%}.lo-49{--lo:49%}.lo-50{--lo:50%}.lo-51{--lo:51%}.lo-52{--lo:52%}.lo-53{--lo:53%}.lo-54{--lo:54%}.lo-55{--lo:55%}.lo-56{--lo:56%}.lo-57{--lo:57%}.lo-58{--lo:58%}.lo-59{--lo:59%}.lo-60{--lo:60%}.lo-61{--lo:61%}.lo-62{--lo:62%}.lo-63{--lo:63%}.lo-64{--lo:64%}.lo-65{--lo:65%}.lo-66{--lo:66%}.lo-67{--lo:67%}.lo-68{--lo:68%}.lo-69{--lo:69%}.lo-70{--lo:70%}.lo-71{--lo:71%}.lo-72{--lo:72%}.lo-73{--lo:73%}.lo-74{--lo:74%}.lo-75{--lo:75%}.lo-76{--lo:76%}.lo-77{--lo:77%}.lo-78{--lo:78%}.lo-79{--lo:79%}.lo-80{--lo:80%}.lo-81{--lo:81%}.lo-82{--lo:82%}.lo-83{--lo:83%}.lo-84{--lo:84%}.lo-85{--lo:85%}.lo-86{--lo:86%}.lo-87{--lo:87%}.lo-88{--lo:88%}.lo-89{--lo:89%}.lo-90{--lo:90%}.lo-91{--lo:91%}.lo-92{--lo:92%}.lo-93{--lo:93%}.lo-94{--lo:94%}.lo-95{--lo:95%}.lo-96{--lo:96%}.lo-97{--lo:97%}.lo-98{--lo:98%}.lo-99{--lo:99%}.lo-100{--lo:100%}
.hi-0{--hi:0%}.hi-1{--hi:1%}.hi-2{--hi:2%}.hi-3{--hi:3%}.hi-4{--hi:4%}.hi-5{--hi:5%}.hi-6{--hi:6%}.hi-7{--hi:7%}.hi-8{--hi:8%}.hi-9{--hi:9%}.hi-10{--hi:10%}.hi-11{--hi:11%}.hi-12{--hi:12%}.hi-13{--hi:13%}.hi-14{--hi:14%}.hi-15{--hi:15%}.hi-16{--hi:16%}.hi-17{--hi:17%}.hi-18{--hi:18%}.hi-19{--hi:19%}.hi-20{--hi:20%}.hi-21{--hi:21%}.hi-22{--hi:22%}.hi-23{--hi:23%}.hi-24{--hi:24%}.hi-25{--hi:25%}.hi-26{--hi:26%}.hi-27{--hi:27%}.hi-28{--hi:28%}.hi-29{--hi:29%}.hi-30{--hi:30%}.hi-31{--hi:31%}.hi-32{--hi:32%}.hi-33{--hi:33%}.hi-34{--hi:34%}.hi-35{--hi:35%}.hi-36{--hi:36%}.hi-37{--hi:37%}.hi-38{--hi:38%}.hi-39{--hi:39%}.hi-40{--hi:40%}.hi-41{--hi:41%}.hi-42{--hi:42%}.hi-43{--hi:43%}.hi-44{--hi:44%}.hi-45{--hi:45%}.hi-46{--hi:46%}.hi-47{--hi:47%}.hi-48{--hi:48%}.hi-49{--hi:49%}.hi-50{--hi:50%}.hi-51{--hi:51%}.hi-52{--hi:52%}.hi-53{--hi:53%}.hi-54{--hi:54%}.hi-55{--hi:55%}.hi-56{--hi:56%}.hi-57{--hi:57%}.hi-58{--hi:58%}.hi-59{--hi:59%}.hi-60{--hi:60%}.hi-61{--hi:61%}.hi-62{--hi:62%}.hi-63{--hi:63%}.hi-64{--hi:64%}.hi-65{--hi:65%}.hi-66{--hi:66%}.hi-67{--hi:67%}.hi-68{--hi:68%}.hi-69{--hi:69%}.hi-70{--hi:70%}.hi-71{--hi:71%}.hi-72{--hi:72%}.hi-73{--hi:73%}.hi-74{--hi:74%}.hi-75{--hi:75%}.hi-76{--hi:76%}.hi-77{--hi:77%}.hi-78{--hi:78%}.hi-79{--hi:79%}.hi-80{--hi:80%}.hi-81{--hi:81%}.hi-82{--hi:82%}.hi-83{--hi:83%}.hi-84{--hi:84%}.hi-85{--hi:85%}.hi-86{--hi:86%}.hi-87{--hi:87%}.hi-88{--hi:88%}.hi-89{--hi:89%}.hi-90{--hi:90%}.hi-91{--hi:91%}.hi-92{--hi:92%}.hi-93{--hi:93%}.hi-94{--hi:94%}.hi-95{--hi:95%}.hi-96{--hi:96%}.hi-97{--hi:97%}.hi-98{--hi:98%}.hi-99{--hi:99%}.hi-100{--hi:100%}