/* ============================================================
   CheckFirst NG — studio design system
   Visual language modelled on orionix.framer.website:
   warm off-white ground, white cards on a hairline ring plus a
   soft shadow, pill controls, Fraunces display serif against
   Inter UI and Geist Mono micro-labels, a single red spark.

   Brief section 6 still governs: light ground, dark text, one
   accent, content capped at 1180-1240px, one column on mobile,
   and every status carries its words as well as its colour.
   ============================================================ */

:root{
  --bg:#F9F8F6;
  --bg-2:#F2F0EC;
  --surface:#FFFFFF;
  --surface-2:#FBFAF8;
  --dark:#141414;
  --dark-2:#1E1E1E;

  --ink:#141414;
  --ink-2:#6B6B6B;
  --ink-3:#A4A4A4;

  --line:rgba(0,0,0,.08);
  --line-2:rgba(0,0,0,.14);
  --line-3:rgba(0,0,0,.24);

  /* the single accent — a red spark, used deliberately and rarely */
  --accent:#FF0000;
  --accent-soft:#FFECEA;
  --accent-glow:rgba(255,0,0,.2);

  /* status — colour AND words, never colour alone */
  --ok:#0F7A4F;    --ok-bg:#E9F4EE;    --ok-line:#BCDECB;
  --warn:#A26800;  --warn-bg:#FBF0DC;  --warn-line:#E8CE99;
  --risk:#D22B1F;  --risk-bg:#FCEBE9;  --risk-line:#F3C0BA;
  --pend:#6B6B6B;  --pend-bg:#F0EEEA;  --pend-line:#DAD6CE;

  --ring:0 0 0 1px rgba(0,0,0,.05);
  --shadow-1:0 0 0 1px rgba(0,0,0,.04),0 1px 2px rgba(0,0,0,.04);
  --shadow-2:0 0 0 1px rgba(0,0,0,.04),0 10px 30px -14px rgba(0,0,0,.16);
  --shadow-3:0 0 0 1px rgba(0,0,0,.05),0 24px 48px -16px rgba(0,0,0,.18);

  --display:"Fraunces",Georgia,"Times New Roman",serif;
  --sans:"Inter",-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --mono:"Geist Mono","JetBrains Mono",ui-monospace,Consolas,monospace;

  --panel:#141414;
  --panel-ink:#F2F0EC;
  --wrap:1220px;
  --r:20px;
  --r-sm:12px;
  --r-xs:8px;
  --pill:100px;
  --head-h:66px;
}

:root[data-theme="dark"]{
  --bg:#0F0F0F;
  --bg-2:#141414;
  --surface:#171717;
  --surface-2:#1C1C1C;
  --dark:#F2F0EC;
  --dark-2:#E6E3DD;
  --ink:#F5F3EF;
  --ink-2:#A8A49D;
  --ink-3:#77736C;
  --line:rgba(255,255,255,.10);
  --line-2:rgba(255,255,255,.16);
  --line-3:rgba(255,255,255,.28);
  --accent:#FF4438;
  --accent-soft:#2A1512;
  --accent-glow:rgba(255,68,56,.25);
  --ok:#4FBE8B;    --ok-bg:#122019;    --ok-line:#254434;
  --warn:#D9A445;  --warn-bg:#211A0E;  --warn-line:#463719;
  --risk:#F0776A;  --risk-bg:#241412;  --risk-line:#4A2621;
  --pend:#A8A49D;  --pend-bg:#1C1C1C;  --pend-line:#2E2E2E;
  --panel:#1C1C1C;
  --ring:0 0 0 1px rgba(255,255,255,.07);
  --shadow-1:0 0 0 1px rgba(255,255,255,.06),0 1px 2px rgba(0,0,0,.5);
  --shadow-2:0 0 0 1px rgba(255,255,255,.06),0 10px 30px -14px rgba(0,0,0,.8);
  --shadow-3:0 0 0 1px rgba(255,255,255,.08),0 24px 48px -16px rgba(0,0,0,.9);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--sans);font-size:15px;line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4{margin:0;font-weight:500;letter-spacing:-.02em;line-height:1.15}
h1,h2{font-family:var(--display);font-weight:400;letter-spacing:-.025em;text-wrap:balance}
h1{font-size:clamp(34px,5vw,64px);line-height:1.04}
p{margin:0}
ul,ol{margin:0}
::selection{background:var(--ink);color:var(--bg)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}

.app-shell{min-height:100vh;display:flex;flex-direction:column}
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding-inline:26px}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.stack{display:flex;flex-direction:column}
.center{text-align:center}

/* --- floating header ------------------------------------------ */
.site-head{position:sticky;top:0;z-index:60;padding-top:12px;background:transparent}
.head-in{
  display:flex;align-items:center;gap:18px;height:52px;padding:0 8px 0 16px;
  background:color-mix(in srgb,var(--surface) 82%,transparent);
  backdrop-filter:saturate(180%) blur(14px);-webkit-backdrop-filter:saturate(180%) blur(14px);
  border-radius:var(--pill);box-shadow:var(--shadow-2);
}
.brand{display:flex;align-items:center;gap:9px;flex:1 1 0;min-width:0}
.brand-mark{
  width:26px;height:26px;flex:none;display:grid;place-items:center;
  color:var(--accent);font-size:22px;line-height:1;
}
.brand-name{font-family:var(--display);font-size:19px;font-weight:500;letter-spacing:-.02em;white-space:nowrap}
.brand-name span{color:var(--ink-3)}

.nav{display:flex;align-items:center;gap:2px;flex:0 0 auto}
.nav a{
  font-size:13.5px;font-weight:450;color:var(--ink-2);
  padding:8px 13px;border-radius:var(--pill);white-space:nowrap;transition:color .16s,background .16s;
}
.nav a:hover{color:var(--ink);background:var(--bg-2)}
.nav a.on{color:var(--ink);background:var(--bg-2)}
.nav a.cta{background:var(--dark);color:var(--bg);font-weight:500;padding:9px 17px}
.nav a.cta:hover{background:var(--accent);color:#fff}

.head-tools{display:flex;align-items:center;gap:6px;flex:1 1 0;justify-content:flex-end}
.head-search{
  display:flex;align-items:center;gap:8px;height:34px;padding:0 8px 0 13px;
  border:1px solid var(--line);border-radius:var(--pill);background:var(--surface);
  color:var(--ink-3);font-size:12.5px;cursor:pointer;min-width:172px;transition:border-color .16s,color .16s;
}
.head-search:hover{border-color:var(--line-2);color:var(--ink-2)}
.head-search span{flex:1;text-align:left}
.kbd{
  font-family:var(--mono);font-size:10px;line-height:1;padding:3px 6px;
  border:1px solid var(--line);border-radius:6px;color:var(--ink-3);background:var(--bg-2);
}
.icon-btn{
  width:34px;height:34px;border-radius:50%;border:1px solid var(--line);
  background:var(--surface);color:var(--ink-2);display:grid;place-items:center;
  cursor:pointer;flex:none;transition:border-color .16s,color .16s;
}
.icon-btn:hover{border-color:var(--line-2);color:var(--ink)}
.burger{display:none}

/* --- buttons -------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-size:14px;font-weight:500;letter-spacing:-.01em;
  padding:12px 22px;border-radius:var(--pill);border:1px solid transparent;
  cursor:pointer;white-space:nowrap;transition:background .16s,border-color .16s,color .16s,transform .16s;
}
.btn:active{transform:scale(.985)}
.btn-primary{background:var(--dark);color:var(--bg)}
.btn-primary:hover{background:var(--accent);color:#fff}
.btn-ghost{background:var(--surface);border-color:var(--line);color:var(--ink);box-shadow:var(--shadow-1)}
.btn-ghost:hover{border-color:var(--line-2)}
.btn-sm{padding:9px 16px;font-size:13px}

/* --- structural furniture -------------------------------------- */
.eyebrow,.rule-label{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);font-weight:400;
}
.eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);flex:none;box-shadow:0 0 8px var(--accent-glow)}
.rule-label{display:flex;width:100%}
.rule-label::after{content:"";flex:1;height:1px;background:var(--line)}

.section{padding-block:clamp(52px,6vw,86px)}
.band{background:var(--bg-2)}
.band-dark{background:var(--panel);color:var(--panel-ink)}
.band-dark .section-head p,.band-dark .legend p{color:rgba(242,240,236,.66)}
.band-dark .eyebrow,.band-dark .rule-label{color:rgba(242,240,236,.5)}
.band-dark .legend > div{background:rgba(255,255,255,.04);box-shadow:0 0 0 1px rgba(255,255,255,.08)}

.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:26px;margin-bottom:30px;flex-wrap:wrap}
.section-head h2{font-size:clamp(26px,3.2vw,40px);line-height:1.1;max-width:24ch}
.section-head p{font-size:15px;color:var(--ink-2);margin-top:12px;max-width:56ch;line-height:1.6}
.section-head a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.head-center{flex-direction:column;align-items:center;text-align:center;gap:0}
.head-center .section-head-in{display:flex;flex-direction:column;align-items:center;gap:14px}
.head-center h2{max-width:22ch}
.head-center p{margin-top:0}

.crumbs{
  display:flex;gap:8px;align-items:center;flex-wrap:wrap;
  font-family:var(--mono);font-size:11px;color:var(--ink-3);padding-block:22px 0;
}
.crumbs a:hover{color:var(--ink)}
.crumbs span[aria-current]{color:var(--ink-2)}

.grid{display:grid;gap:16px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}

/* --- hero ------------------------------------------------------ */
.hero{position:relative;overflow:hidden;padding-block:clamp(48px,7vw,96px) clamp(28px,3vw,44px)}
.hero::after{
  content:"";position:absolute;left:50%;top:-10%;width:1px;height:70%;
  background:linear-gradient(180deg,transparent,var(--accent),transparent);
  opacity:.35;transform:translateX(-50%) rotate(4deg);pointer-events:none;
}
.hero-in{display:flex;flex-direction:column;align-items:center;text-align:center;gap:20px;position:relative;z-index:1}
.hero h1{max-width:18ch;font-size:clamp(34px,4.6vw,58px)}
.hero h1 em{font-style:italic;color:var(--ink)}
.hero-sub{font-size:clamp(15px,1.5vw,17.5px);line-height:1.6;color:var(--ink-2);max-width:56ch}
.hero-corner{
  position:absolute;bottom:14px;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);display:flex;gap:10px;align-items:center;
}
.hero-corner.left{left:26px}
.hero-corner.right{right:26px}

/* the floating chip under the headline — the reference's signature */
.chipbar{
  display:inline-flex;align-items:center;gap:4px;padding:6px;
  background:var(--surface);border-radius:var(--pill);box-shadow:var(--shadow-2);
}
.chipbar .cb{
  display:inline-flex;align-items:center;gap:7px;padding:6px 13px;border-radius:var(--pill);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);
}
.chipbar .cb i{width:6px;height:6px;border-radius:50%;flex:none}
.chipbar .div{width:1px;height:18px;background:var(--line);margin-inline:2px}

.hero-tags{display:flex;flex-wrap:wrap;gap:7px;align-items:center;justify-content:center}
.hero-tags span{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.hero-tags a{
  font-size:13px;padding:6px 13px;border-radius:var(--pill);
  background:var(--surface);color:var(--ink-2);box-shadow:var(--shadow-1);transition:color .16s,transform .16s;
}
.hero-tags a:hover{color:var(--ink);transform:translateY(-1px)}

/* search — the primary action (brief 6) */
.searchbox{position:relative;width:100%;max-width:620px}
.searchbox form{display:flex;gap:8px;align-items:center;padding:7px;background:var(--surface);border-radius:var(--pill);box-shadow:var(--shadow-2)}
.search-field{flex:1;display:flex;align-items:center;gap:11px;padding-left:16px;min-width:0}
.search-field svg{color:var(--ink-3);flex:none}
.search-field input{flex:1;border:0;background:transparent;outline:none;padding:11px 0;font-size:15px;min-width:0}
.search-field input::placeholder{color:var(--ink-3)}
.search-field .kbd{flex:none}

.ac{
  position:absolute;left:0;right:0;top:calc(100% + 10px);z-index:40;text-align:left;
  background:var(--surface);border-radius:var(--r-sm);box-shadow:var(--shadow-3);overflow:hidden;
}
.ac a{display:flex;align-items:center;gap:11px;padding:12px 16px;border-bottom:1px solid var(--line);color:var(--ink)}
.ac a:last-child{border-bottom:0}
.ac a:hover{background:var(--bg-2)}
.ac .ac-name{font-weight:500;font-size:14px;flex:1}
.ac .ac-cat{font-family:var(--mono);font-size:10px;color:var(--ink-3)}
.ac-empty{padding:16px;color:var(--ink-2);font-size:14px}
.ac-empty a{text-decoration:underline}

/* --- marquee ---------------------------------------------------- */
.marquee{
  overflow:hidden;border-block:1px solid var(--line);background:var(--surface);
  padding-block:14px;white-space:nowrap;
}
.marquee-in{display:inline-flex;gap:0;animation:mq 42s linear infinite;will-change:transform}
.marquee:hover .marquee-in{animation-play-state:paused}
.mq-item{
  display:inline-flex;align-items:center;gap:12px;padding-inline:22px;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);
}
.mq-item i{width:6px;height:6px;border-radius:50%;flex:none}
.mq-item b{font-weight:500;color:var(--ink)}
.mq-sep{color:var(--ink-3)}
@keyframes mq{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* --- metric strip ----------------------------------------------- */
.kpi-row{
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;
}
.kpi{
  background:var(--surface);border-radius:var(--r-sm);padding:18px 20px;
  display:flex;flex-direction:column;gap:7px;box-shadow:var(--shadow-1);
}
.kpi .k{
  display:flex;align-items:center;gap:7px;
  font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);
}
.kpi .v{font-family:var(--display);font-size:34px;font-weight:400;letter-spacing:-.03em;line-height:1}
.kpi .s{font-size:12px;color:var(--ink-3);line-height:1.45}
.dot{width:7px;height:7px;border-radius:50%;flex:none;display:inline-block}
.dot-verified{background:var(--ok)}
.dot-caution{background:var(--warn)}
.dot-risk{background:var(--risk)}
.dot-review{background:var(--pend)}
.dot-all{background:var(--accent)}

/* --- status pills ---------------------------------------------- */
.stamp{
  display:inline-flex;align-items:center;gap:7px;flex:none;
  font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.09em;text-transform:uppercase;
  padding:5px 11px;border-radius:var(--pill);border:1px solid;white-space:nowrap;line-height:1.4;
}
.stamp i{font-style:normal;width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.stamp-lg{font-size:11px;padding:7px 14px}
.s-verified{color:var(--ok);background:var(--ok-bg);border-color:var(--ok-line)}
.s-caution{color:var(--warn);background:var(--warn-bg);border-color:var(--warn-line)}
.s-risk{color:var(--risk);background:var(--risk-bg);border-color:var(--risk-line)}
.s-review{color:var(--pend);background:var(--pend-bg);border-color:var(--pend-line)}
.vbar{display:none}

.tag{
  display:inline-flex;align-items:center;padding:4px 11px;border-radius:var(--pill);
  background:var(--bg-2);color:var(--ink-2);font-size:11.5px;white-space:nowrap;
}

.logo{
  width:38px;height:38px;border-radius:var(--r-xs);flex:none;color:#fff;
  display:grid;place-items:center;font-size:13px;font-weight:600;letter-spacing:-.02em;
}
.logo-lg{width:56px;height:56px;border-radius:var(--r-sm);font-size:19px}
.stars{color:var(--warn);font-size:11px;letter-spacing:.5px;white-space:nowrap}

/* --- record cards ------------------------------------------------ */
.card{
  background:var(--surface);border-radius:var(--r);overflow:hidden;
  display:flex;flex-direction:column;box-shadow:var(--shadow-1);
  transition:box-shadow .2s,transform .2s;
}
.card:hover{box-shadow:var(--shadow-2);transform:translateY(-3px)}
.card-in{padding:20px;display:flex;flex-direction:column;gap:13px;flex:1}
.card-top{display:flex;align-items:flex-start;gap:12px}
.card-title{flex:1;min-width:0}
.card-cat{
  font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);
  display:block;margin-bottom:5px;
}
.card-title h3{font-family:var(--display);font-size:20px;font-weight:400;letter-spacing:-.02em}
.card-title h3 a:hover{color:var(--accent)}
.card-sum{
  font-size:13.5px;line-height:1.6;color:var(--ink-2);
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;
}
.card-foot{
  margin-top:auto;padding-top:13px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;align-items:center;gap:8px;
  font-family:var(--mono);font-size:10.5px;color:var(--ink-3);font-variant-numeric:tabular-nums;
}

/* --- registry table --------------------------------------------- */
.tablewrap{background:var(--surface);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-1)}
.tablescroll{overflow-x:auto}
.table{width:100%;border-collapse:collapse;font-size:13.5px;min-width:740px}
.table thead th{
  text-align:left;padding:13px 20px;border-bottom:1px solid var(--line);
  font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);font-weight:400;white-space:nowrap;
}
.table tbody td{padding:14px 20px;border-bottom:1px solid var(--line);vertical-align:middle}
.table tbody tr:last-child td{border-bottom:0}
.table tbody tr:hover{background:var(--bg-2)}
.t-name{display:flex;align-items:center;gap:12px;min-width:0}
.t-name b{font-family:var(--display);font-weight:400;font-size:16px;letter-spacing:-.02em;display:block}
.t-name a:hover b{color:var(--accent)}
.t-sum{display:block;color:var(--ink-3);font-size:12px;margin-top:2px;line-height:1.4;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:52ch}
.t-meta{font-family:var(--mono);font-size:11.5px;color:var(--ink-3);white-space:nowrap;font-variant-numeric:tabular-nums}
.t-cat{font-size:12.5px;color:var(--ink-2);white-space:nowrap}
.t-go{font-family:var(--mono);font-size:11.5px;color:var(--ink-3)}
.table tbody tr:hover .t-go{color:var(--accent)}

/* --- category + guide tiles --------------------------------------- */
.cat-card{
  display:flex;flex-direction:column;gap:8px;padding:22px;
  background:var(--surface);border-radius:var(--r);box-shadow:var(--shadow-1);
  transition:box-shadow .2s,transform .2s;
}
.cat-card:hover{box-shadow:var(--shadow-2);transform:translateY(-3px)}
.cat-card .n{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.cat-card strong{font-family:var(--display);font-size:22px;font-weight:400;letter-spacing:-.025em}
.cat-card > span:last-child{font-size:13.5px;line-height:1.6;color:var(--ink-2)}

.guide-card{
  display:flex;flex-direction:column;gap:10px;padding:22px;
  background:var(--surface);border-radius:var(--r);box-shadow:var(--shadow-1);
  transition:box-shadow .2s,transform .2s;
}
.guide-card:hover{box-shadow:var(--shadow-2);transform:translateY(-3px)}
.g-meta{display:flex;gap:7px;align-items:center}
.g-meta span{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);
  background:var(--bg-2);padding:4px 10px;border-radius:var(--pill);
}
.guide-card h3{font-family:var(--display);font-size:21px;font-weight:400;letter-spacing:-.025em;line-height:1.22}
.guide-card p{font-size:13.5px;line-height:1.6;color:var(--ink-2)}

/* --- reader reports (quote cards) ---------------------------------- */
.ureview{
  background:var(--surface);border-radius:var(--r);padding:22px;
  display:flex;flex-direction:column;gap:12px;box-shadow:var(--shadow-1);
}
.ur-body{font-family:var(--display);font-size:16.5px;font-weight:400;line-height:1.5;color:var(--ink);letter-spacing:-.01em}
.ur-head{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:auto;padding-top:12px;border-top:1px solid var(--line)}
.ur-name{font-size:13px;font-weight:500}
.ur-date{font-family:var(--mono);font-size:10.5px;color:var(--ink-3);margin-left:auto}
.badge{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;
  padding:3px 9px;border-radius:var(--pill);border:1px solid var(--line);color:var(--ink-3);
}
.badge-ev{color:var(--ok);border-color:var(--ok-line);background:var(--ok-bg)}
.reply{
  background:var(--bg-2);border-radius:var(--r-sm);padding:13px 15px;
  font-size:12.5px;line-height:1.6;color:var(--ink-2);
}
.reply b{
  display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:5px;
}

/* --- verdict legend ---------------------------------------------- */
.legend{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.legend > div{
  background:var(--surface);border-radius:var(--r);padding:20px;
  display:flex;flex-direction:column;gap:12px;align-items:flex-start;box-shadow:var(--shadow-1);
}
.legend p{font-size:13px;line-height:1.6;color:var(--ink-2)}

/* --- numbered steps (reference: the stacked service list) ---------- */
.numsteps{display:flex;flex-direction:column}
.numstep{
  display:grid;grid-template-columns:auto 1fr;gap:26px;align-items:start;
  padding-block:26px;border-top:1px solid var(--line);
}
.numstep:last-child{border-bottom:1px solid var(--line)}
.numstep .no{font-family:var(--mono);font-size:11px;color:var(--ink-3);letter-spacing:.1em;padding-top:6px}
.numstep h3{font-family:var(--display);font-size:clamp(21px,2.4vw,28px);font-weight:400;letter-spacing:-.025em;margin-bottom:9px}
.numstep p{font-size:14.5px;line-height:1.65;color:var(--ink-2);max-width:62ch}
.numstep .tags{display:flex;gap:7px;flex-wrap:wrap;margin-top:13px}

/* --- filter toolbar ---------------------------------------------- */
.filters{
  display:flex;flex-direction:column;gap:10px;padding:14px;margin-bottom:22px;
  background:var(--surface);border-radius:var(--r-sm);box-shadow:var(--shadow-1);
}
.chips{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.chip{
  display:inline-flex;align-items:center;gap:7px;cursor:pointer;
  font-size:12.5px;font-weight:450;padding:7px 13px;border-radius:var(--pill);
  border:1px solid var(--line);background:var(--surface);color:var(--ink-2);
  transition:background .16s,border-color .16s,color .16s;
}
.chip:hover{border-color:var(--line-2);color:var(--ink)}
.chip.on{background:var(--dark);border-color:var(--dark);color:var(--bg)}
.chip-count{font-family:var(--mono);font-size:10px;opacity:.6}
.select{
  margin-left:auto;padding:7px 13px;border-radius:var(--pill);border:1px solid var(--line);
  background:var(--surface);font-size:12.5px;color:var(--ink-2);cursor:pointer;
}

/* --- record header (single review) ------------------------------ */
.masthead{padding-block:26px 30px}
.mast-top{display:flex;gap:20px;align-items:flex-start}
.mast-id{flex:1;min-width:0}
.mast-id h1{font-size:clamp(28px,3.6vw,46px);line-height:1.08;margin-top:10px;max-width:22ch}
.mast-meta{
  display:flex;align-items:center;gap:0;flex-wrap:wrap;margin-top:20px;
  background:var(--surface);border-radius:var(--pill);padding:6px;box-shadow:var(--shadow-1);
  width:fit-content;max-width:100%;
}
.mast-meta > *{padding:7px 15px;display:flex;align-items:center;gap:8px;position:relative}
.mast-meta > * + *::before{
  content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:1px;height:16px;background:var(--line);
}
.mast-updated{font-family:var(--mono);font-size:11px;color:var(--ink-3);white-space:nowrap}
.mast-verdict{
  font-family:var(--display);font-size:clamp(17px,1.8vw,22px);font-weight:400;
  line-height:1.5;color:var(--ink);max-width:66ch;letter-spacing:-.015em;
}
.mast-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.mast-top .mast-actions{margin-left:auto;flex:none}

.rev-grid{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:52px;align-items:start;padding-block:34px 70px}
.rail{position:sticky;top:calc(var(--head-h) + 22px);display:flex;flex-direction:column;gap:14px}

.panel{background:var(--surface);border-radius:var(--r-sm);overflow:hidden;box-shadow:var(--shadow-1)}
.panel-h{
  padding:13px 18px;border-bottom:1px solid var(--line);
  font-family:var(--mono);font-size:10px;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3);
}
.panel-b{padding:18px}
.panel-b a:not(.btn){color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.panel-b .btn-primary{color:var(--bg);text-decoration:none}

/* --- long-form body ---------------------------------------------- */
.prose{font-size:16.5px;line-height:1.72;color:var(--ink-2);max-width:70ch;display:flex;flex-direction:column;gap:20px}
.prose h2{
  font-family:var(--display);font-size:clamp(22px,2.4vw,29px);font-weight:400;letter-spacing:-.025em;color:var(--ink);
  margin-top:22px;padding-top:26px;border-top:1px solid var(--line);
  display:flex;align-items:baseline;gap:14px;line-height:1.15;
}
.prose h2 .num{font-family:var(--mono);font-size:11px;font-weight:400;color:var(--accent);letter-spacing:.1em}
.prose h3{font-family:var(--display);font-size:19px;font-weight:400;letter-spacing:-.02em;color:var(--ink);margin-top:6px}
.prose ul,.prose ol{padding-left:22px;display:flex;flex-direction:column;gap:10px}
.prose li{padding-left:4px}
.prose li::marker{color:var(--ink-3)}
.prose strong{font-weight:600;color:var(--ink)}
.prose em{font-style:italic}
.prose a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}

.callout{
  font-size:14.5px;line-height:1.65;background:var(--surface);
  border-radius:var(--r-sm);padding:20px 22px;color:var(--ink-2);box-shadow:var(--shadow-1);
}
.callout b{
  display:block;font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--accent);margin-bottom:9px;
}

.pc{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.pc > div{border-radius:var(--r-sm);overflow:hidden;background:var(--surface);box-shadow:var(--shadow-1)}
.pc h4{
  margin:0;padding:13px 18px;font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;
  border-bottom:1px solid var(--line);
}
.pros h4{color:var(--ok)}
.cons h4{color:var(--risk)}
.pc ul{list-style:none;padding:16px 18px;display:flex;flex-direction:column;gap:11px;margin:0}
.pc li{font-size:13.5px;line-height:1.6;color:var(--ink-2);padding-left:19px;position:relative}
.pros li::before{content:"+";position:absolute;left:0;color:var(--ok);font-family:var(--mono);font-size:12px}
.cons li::before{content:"−";position:absolute;left:0;color:var(--risk);font-family:var(--mono);font-size:12px}

.sources{
  list-style:none;padding:0;display:flex;flex-direction:column;
  background:var(--surface);border-radius:var(--r-sm);overflow:hidden;box-shadow:var(--shadow-1);
}
.sources li{display:flex;gap:14px;padding:14px 18px;border-bottom:1px solid var(--line);align-items:flex-start}
.sources li:last-child{border-bottom:0}
.sources .idx{font-family:var(--mono);font-size:10.5px;color:var(--accent);flex:none;padding-top:3px}
.sources .src-t{display:block;font-size:14px;font-weight:500;line-height:1.45;color:var(--ink)}
.sources .src-m{display:block;font-family:var(--mono);font-size:10.5px;color:var(--ink-3);margin-top:4px}

.facts{width:100%;border-collapse:collapse}
.facts tr{border-bottom:1px solid var(--line)}
.facts tr:last-child{border-bottom:0}
.facts th{
  text-align:left;padding:10px 0;vertical-align:top;width:42%;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-3);font-weight:400;
}
.facts td{padding:10px 0 10px 12px;font-size:13px;line-height:1.5;color:var(--ink)}

.serp{display:flex;flex-direction:column;gap:3px;font-family:Arial,sans-serif}
.serp .u{font-size:11px;color:var(--ink-3)}
.serp .t{font-size:15px;color:#1a0dab;line-height:1.35}
:root[data-theme="dark"] .serp .t{color:#8ab4f8}
.serp .d{font-size:12px;color:var(--ink-2);line-height:1.5}

.toc{display:flex;flex-direction:column;font-size:13px}
.toc a{color:var(--ink-2);padding:8px 0;border-bottom:1px solid var(--line);line-height:1.4}
.toc a:last-child{border-bottom:0}
.toc a:hover{color:var(--ink)}

.rating-row{
  display:flex;gap:26px;align-items:center;flex-wrap:wrap;
  background:var(--surface);border-radius:var(--r);padding:22px;box-shadow:var(--shadow-1);
}
.big-score{font-family:var(--display);font-size:52px;font-weight:400;line-height:1;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.dist{flex:1;min-width:220px;display:flex;flex-direction:column;gap:5px}
.dist-row{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:10.5px;color:var(--ink-3)}
.dist-bar{flex:1;height:6px;background:var(--bg-2);border-radius:var(--pill);overflow:hidden}
.dist-bar i{display:block;height:100%;background:var(--warn);border-radius:var(--pill)}

/* --- forms ------------------------------------------------------ */
.hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.form{display:flex;flex-direction:column;gap:17px}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:13px;font-weight:500}
.field .hint{font-size:12px;color:var(--ink-3);line-height:1.5}
.field input[type=text],.field input[type=email],.field input[type=url],.field textarea,.field select{
  width:100%;padding:12px 16px;border:1px solid var(--line);border-radius:var(--pill);
  background:var(--bg);color:var(--ink);font-size:14px;transition:border-color .16s,background .16s;
}
.field textarea{min-height:128px;resize:vertical;line-height:1.6;border-radius:var(--r-sm)}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--ink);background:var(--surface)}
.field.err input,.field.err textarea,.field.err select{border-color:var(--risk)}
.err-msg{color:var(--risk);font-size:12px;display:none;line-height:1.45;padding-left:16px}
.field.err .err-msg{display:block}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:15px}
.starpick{display:flex;gap:6px}
.starpick button{
  width:38px;height:38px;border:1px solid var(--line);border-radius:50%;
  background:var(--surface);cursor:pointer;font-size:15px;color:var(--ink-3);line-height:1;transition:all .14s;
}
.starpick button:hover{border-color:var(--line-2)}
.starpick button.on{background:var(--warn-bg);border-color:var(--warn-line);color:var(--warn)}
.check{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:var(--ink-2);line-height:1.55}
.check input{margin-top:2px;width:15px;height:15px;accent-color:var(--accent);flex:none}
.check a{text-decoration:underline;text-underline-offset:3px}
.filebox{
  border:1px dashed var(--line-2);border-radius:var(--r-sm);padding:16px;
  font-size:12.5px;color:var(--ink-3);text-align:center;background:var(--bg);line-height:1.55;
}
.notice{
  border-radius:var(--r-sm);padding:16px 18px;font-size:13.5px;line-height:1.6;
  background:var(--ok-bg);color:var(--ok);display:flex;gap:12px;align-items:flex-start;
  box-shadow:0 0 0 1px var(--ok-line);
}
.notice b{display:block;font-weight:600;margin-bottom:4px;color:var(--ink)}
.notice span:last-child{color:var(--ink-2)}

/* --- documents ---------------------------------------------------- */
.doc{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:52px;padding-block:26px 70px;align-items:start}
.doc-narrow{max-width:74ch;padding-block:26px 70px}
.doc h1,.doc-narrow h1{font-size:clamp(30px,3.6vw,46px)}

.steps{display:flex;flex-direction:column;background:var(--surface);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-1)}
.step{display:grid;grid-template-columns:44px 1fr;gap:18px;padding:22px;border-bottom:1px solid var(--line)}
.step:last-child{border-bottom:0}
.step-n{
  font-family:var(--mono);font-size:11px;color:var(--accent);letter-spacing:.08em;
  height:30px;display:grid;place-items:center;background:var(--bg-2);border-radius:var(--pill);
}
.step h3{margin-bottom:7px;font-family:var(--display);font-size:19px;font-weight:400;letter-spacing:-.02em;color:var(--ink)}
.step p{font-size:14.5px;line-height:1.65;color:var(--ink-2)}

.kv{display:grid;grid-template-columns:210px 1fr;background:var(--surface);border-radius:var(--r-sm);overflow:hidden;box-shadow:var(--shadow-1)}
.kv > div{padding:14px 18px;border-bottom:1px solid var(--line);font-size:13.5px;line-height:1.55;color:var(--ink-2)}
.kv > div:nth-child(odd){
  font-family:var(--mono);font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);
}
.kv > div:nth-last-child(-n+2){border-bottom:0}

.stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.stat{background:var(--surface);border-radius:var(--r-sm);padding:18px 20px;display:flex;flex-direction:column;gap:6px;box-shadow:var(--shadow-1)}
.stat b{font-family:var(--display);font-size:30px;font-weight:400;letter-spacing:-.03em;line-height:1}
.stat span{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}

.empty{
  padding:60px 24px;text-align:center;border-radius:var(--r);
  color:var(--ink-2);display:flex;flex-direction:column;gap:11px;align-items:center;
  background:var(--surface);box-shadow:var(--shadow-1);
}
.empty strong{font-family:var(--display);font-size:22px;font-weight:400;color:var(--ink);letter-spacing:-.02em}
.empty p{font-size:14px;line-height:1.6;max-width:52ch}
.pager{display:flex;gap:6px;justify-content:center;padding-top:26px;font-family:var(--mono);font-size:12px}
.pager a,.pager span{padding:8px 14px;border-radius:var(--pill);color:var(--ink-2);background:var(--surface);box-shadow:var(--shadow-1)}
.pager .on{background:var(--dark);color:var(--bg)}

/* --- closing call to action --------------------------------------- */
.cta-band{text-align:center;display:flex;flex-direction:column;align-items:center;gap:22px}
.cta-band h2{font-size:clamp(30px,4.4vw,56px);line-height:1.06;max-width:16ch;color:inherit}
.cta-band p{font-size:16px;line-height:1.6;color:rgba(242,240,236,.66);max-width:52ch}
.cta-band .btn-primary{background:var(--bg);color:var(--dark)}
.cta-band .btn-primary:hover{background:var(--accent);color:#fff}
.cta-band .btn-ghost{background:transparent;border-color:rgba(255,255,255,.22);color:#F2F0EC;box-shadow:none}
.cta-band .btn-ghost:hover{border-color:rgba(255,255,255,.5)}

/* --- footer ------------------------------------------------------ */
.site-foot{background:var(--surface);margin-top:auto;border-top:1px solid var(--line)}
.foot-in{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:36px;padding-block:52px 34px}
.foot-col{display:flex;flex-direction:column;gap:10px}
.foot-col h4{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-3);font-weight:400;margin-bottom:4px;
}
.foot-col a{font-size:13.5px;color:var(--ink-2);transition:color .16s}
.foot-col a:hover{color:var(--ink)}
.foot-about{font-size:13px;line-height:1.65;color:var(--ink-3);max-width:44ch;margin-top:4px}
.foot-legal{
  display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;
  padding-block:20px;border-top:1px solid var(--line);
  font-family:var(--mono);font-size:10.5px;color:var(--ink-3);line-height:1.55;
}

/* --- toast --------------------------------------------------------- */
.toast{
  position:fixed;left:50%;bottom:26px;transform:translate(-50%,16px);
  background:var(--dark);color:var(--bg);padding:13px 24px;border-radius:var(--pill);
  font-size:13.5px;font-weight:450;box-shadow:var(--shadow-3);
  opacity:0;pointer-events:none;transition:opacity .22s,transform .22s;z-index:90;max-width:90vw;text-align:center;
}
.toast.on{opacity:1;transform:translate(-50%,0)}

.page-enter{animation:pe .34s cubic-bezier(.2,.7,.3,1) both}
@keyframes pe{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* scroll reveal — the reference's signature entrance */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s cubic-bezier(.2,.7,.3,1),transform .6s cubic-bezier(.2,.7,.3,1)}
.reveal.in{opacity:1;transform:none}

/* --- responsive ----------------------------------------------------- */
@media (max-width:1080px){
  .rev-grid,.doc{grid-template-columns:1fr;gap:34px}
  .rail{position:static}
  .kpi-row{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:900px){
  .g3,.g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .legend{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot-in{grid-template-columns:1fr 1fr;gap:28px}
  .head-search{min-width:0;width:34px;padding:0;justify-content:center}
  .head-search span,.head-search .kbd{display:none}
  .hero-corner{display:none}
}
@media (max-width:760px){
  .wrap{padding-inline:16px}
  .burger{display:grid}
  .site-head{padding-top:0}
  .head-in{padding-left:14px}
  .nav{
    display:none;position:absolute;top:calc(100% + 8px);left:16px;right:16px;
    background:var(--surface);border-radius:var(--r-sm);
    flex-direction:column;align-items:stretch;gap:0;padding:10px 16px 16px;box-shadow:var(--shadow-3);
  }
  .nav.open{display:flex}
  .nav a{padding:12px 6px;border-bottom:1px solid var(--line);border-radius:0;font-size:14.5px}
  .nav a.cta{margin-top:12px;border-radius:var(--pill);justify-content:center;display:flex;border-bottom:0}
  .site-head .wrap{position:relative}

  /* brief 6: every block becomes one column on mobile */
  .grid,.g2,.g3,.g4,.legend,.pc,.f2,.stat-row,.kpi-row{grid-template-columns:1fr}
  .kv{grid-template-columns:1fr}
  .kv > div:nth-child(odd){border-bottom:0;padding-bottom:2px}
  .kv > div:nth-last-child(2){border-bottom:0}
  .searchbox form{flex-direction:column;border-radius:var(--r-sm);padding:10px;gap:10px}
  .search-field{padding-left:8px;width:100%}
  .searchbox .btn{width:100%}
  .search-field .kbd{display:none}
  .mast-top{flex-direction:column;gap:14px}
  .mast-top .mast-actions{margin-left:0}
  .mast-meta{flex-direction:column;align-items:stretch;border-radius:var(--r-sm);width:100%}
  .mast-meta > * + *::before{display:none}
  .mast-meta > * + *{border-top:1px solid var(--line)}
  .numstep{grid-template-columns:1fr;gap:10px}
  .foot-in{grid-template-columns:1fr}
  .select{margin-left:0;width:100%}
  .step{grid-template-columns:1fr;gap:10px}
  .step-n{width:44px}
  .chipbar{flex-wrap:wrap;justify-content:center;border-radius:var(--r-sm)}
}
@media (max-width:420px){
  .ur-date{margin-left:0}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
  .reveal{opacity:1;transform:none}
  .marquee-in{animation:none}
}
@media print{
  .site-head,.site-foot,.rail,.toast,.marquee{display:none}
  body{background:#fff}
}

/* ============================================================
   Reference alignment pass — measured against the Orionix
   screenshots in versions/Ref and the Framer source.
   Loaded after the base sheets; every rule here wins.
   ============================================================ */

:root{
  --btn-shadow:0 1px 1px rgba(0,0,0,.12),0 1.5px 3px rgba(0,0,0,.2),0 4px 8px rgba(0,0,0,.2),0 12px 24px -6px rgba(0,0,0,.3);
  --btn-shadow-hover:0 1px 1px rgba(0,0,0,.14),0 2px 4px rgba(0,0,0,.22),0 6px 12px rgba(0,0,0,.22),0 18px 32px -8px rgba(0,0,0,.36);
  --card-r:24px;
  --media-r:16px;
  --ease:cubic-bezier(.2,.7,.2,1);
}
:root[data-theme="dark"]{
  --btn-shadow:0 1px 1px rgba(0,0,0,.5),0 4px 8px rgba(0,0,0,.5),0 12px 24px -6px rgba(0,0,0,.7);
  --btn-shadow-hover:var(--btn-shadow);
}

/* --- header: transparent bar, logo / centred nav / black CTA -------- */
.site-head{padding-top:0;background:color-mix(in srgb,var(--bg) 78%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.head-in{
  height:var(--head-h);padding:0;background:transparent;border-radius:0;box-shadow:none;
  backdrop-filter:none;-webkit-backdrop-filter:none;
}
.nav{gap:8px}
.nav a{font-size:15px;font-weight:400;color:var(--ink);padding:8px 14px;position:relative;background:transparent}
.nav a:hover,.nav a.on{background:transparent;color:var(--ink)}
.nav a:not(.cta)::after{
  content:"";position:absolute;left:50%;bottom:-2px;width:4px;height:4px;border-radius:50%;
  background:var(--ink);transform:translateX(-50%) scale(0);transition:transform .25s var(--ease);
}
.nav a.on:not(.cta)::after,.nav a:not(.cta):hover::after{transform:translateX(-50%) scale(1)}
.nav a.cta{
  overflow:hidden;
  background:var(--dark);color:var(--bg);font-weight:500;font-size:15px;padding:11px 20px;margin-left:6px;
  box-shadow:var(--btn-shadow);transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.nav a.cta:hover{background:var(--dark);color:var(--bg);transform:translateY(-1px) scale(1.03);box-shadow:var(--btn-shadow-hover)}
.nav a.cta::after{display:none}
.head-search{min-width:0;width:38px;height:38px;padding:0;justify-content:center;border-radius:50%;box-shadow:var(--shadow-1);border:0}
.head-search span,.head-search .kbd{display:none}
.icon-btn{width:38px;height:38px;border:0;box-shadow:var(--shadow-1)}

/* --- buttons: rolling label + blur, layered shadow, slight lift ------ */
.btn{
  position:relative;overflow:hidden;font-size:15px;font-weight:500;padding:12px 22px;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),background .2s,color .2s;
}
.btn:hover{transform:translateY(-1px) scale(1.025)}
.btn:active{transform:translateY(0) scale(.99)}
.btn-primary{background:var(--dark);color:var(--bg);box-shadow:var(--btn-shadow)}
.btn-primary:hover{background:var(--dark);color:var(--bg);box-shadow:var(--btn-shadow-hover)}
.btn-ghost{background:var(--surface);border:0;color:var(--ink);box-shadow:var(--shadow-1)}
.btn-ghost:hover{box-shadow:var(--shadow-2)}
.btn-sm{padding:9px 16px;font-size:14px}
.btn-lg{padding:16px 40px;font-size:16px}
.btn .bl,.nav a.cta .bl{display:block;height:1.25em;line-height:1.25em;overflow:hidden;position:relative}
.btn .bl > span,.nav a.cta .bl > span{
  display:block;white-space:nowrap;
  transition:transform .5s var(--ease),filter .5s var(--ease),opacity .5s var(--ease);
}
.btn .bl > span + span,.nav a.cta .bl > span + span{filter:blur(8px);opacity:0}
.btn:hover .bl > span,.nav a.cta:hover .bl > span{transform:translateY(-100%)}
.btn:hover .bl > span:first-child,.nav a.cta:hover .bl > span:first-child{filter:blur(8px);opacity:0}
.btn:hover .bl > span + span,.nav a.cta:hover .bl > span + span{filter:blur(0);opacity:1}
.btn svg{flex:none}

/* --- eyebrow: white pill, red dot, mono caps ------------------------- */
.eyebrow{
  background:var(--surface);padding:7px 14px 7px 12px;border-radius:var(--pill);
  box-shadow:var(--shadow-1);font-size:11px;letter-spacing:.1em;color:var(--ink);
}
.band-dark .eyebrow{background:transparent;box-shadow:none;padding:0;color:var(--accent)}
.band-dark .eyebrow::before{box-shadow:none}
.rule-label{background:none;padding:0;box-shadow:none}

/* --- section heads: big left-aligned Fraunces, action pill on the right */
.section-head{align-items:flex-end;margin-bottom:38px}
.section-head h2{font-size:clamp(32px,4vw,56px);line-height:1.05;letter-spacing:-.03em;max-width:16ch;font-weight:400}
.section-head .eyebrow + h2,.section-head .eyebrow ~ h2{margin-top:22px}
.section-head p{font-size:16px;margin-top:16px;max-width:50ch}
.head-center{flex-direction:row;align-items:flex-end;text-align:left}
.head-center .section-head-in{align-items:flex-start;gap:0}
.head-center .section-head-in h2{margin-top:22px;max-width:16ch}
.head-center .section-head-in p{margin-top:16px}

/* --- hero: highlighted second line, large quiet headline ------------- */
.hero h1{font-size:clamp(40px,5.6vw,72px);line-height:1.02;letter-spacing:-.03em;max-width:16ch}
.hero h1 em{
  font-style:normal;color:var(--ink);display:inline;
  background:var(--surface);box-shadow:var(--shadow-1);border-radius:var(--r-sm);padding:.04em .18em;margin:0 -.06em;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;line-height:1.18;
}
.hero::after{display:none}
.hero-sub{font-size:clamp(16px,1.5vw,18px);color:var(--ink-2);max-width:48ch}
.chipbar{box-shadow:var(--shadow-2);padding:5px}
.chipbar .cb{font-family:var(--sans);font-size:13px;letter-spacing:0;text-transform:none;color:var(--ink-2);padding:7px 13px}
.chipbar .cb b{font-weight:500;color:var(--ink);margin-left:2px}
.hero-tags a{box-shadow:var(--shadow-1)}

/* --- stat strip: big serif numbers with a red suffix ----------------- */
.kpi-row{display:flex;justify-content:center;gap:0;flex-wrap:wrap;margin-top:0}
.kpi{
  background:transparent;box-shadow:none;border-radius:0;padding:6px 44px;gap:8px;
  align-items:center;text-align:center;border-right:1px solid var(--line);
}
.kpi:last-child{border-right:0}
.kpi .k{order:2;font-family:var(--sans);font-size:15px;letter-spacing:0;text-transform:none;color:var(--ink-2);gap:8px}
.kpi .v{order:1;font-size:clamp(40px,4.6vw,58px);letter-spacing:-.04em;display:inline-flex;align-items:flex-start;gap:2px}
.kpi .v sup{font-size:.42em;color:var(--accent);line-height:1;margin-top:.22em;font-weight:500}
.kpi .s{display:none}

/* --- status + tag pills: Inter, sentence case, no border ------------- */
.stamp{
  font-family:var(--sans);font-size:13px;font-weight:500;letter-spacing:-.005em;text-transform:none;
  padding:6px 12px 6px 10px;border:0;box-shadow:0 0 0 1px rgba(0,0,0,.03);
}
.stamp-lg{font-size:14px;padding:8px 14px 8px 12px}
.tag{
  font-size:13px;font-weight:400;padding:6px 13px;background:var(--bg-2);color:var(--ink);
}
.tag-white{background:var(--surface);box-shadow:var(--shadow-1)}

/* --- record cards: the reference blog card ----------------------------- */
.card{border-radius:var(--card-r);box-shadow:var(--shadow-1);transition:box-shadow .35s var(--ease),transform .35s var(--ease)}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-3)}
.card-in{padding:24px 24px 10px;gap:12px}
.card-meta{
  font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);
  display:flex;gap:10px;align-items:center;
}
.card-title h3{font-size:clamp(22px,1.9vw,27px);line-height:1.18;letter-spacing:-.025em;margin-top:2px}
.card-sum{font-size:14.5px;line-height:1.6;-webkit-line-clamp:3}
.card-tags{display:flex;gap:7px;flex-wrap:wrap;margin-top:2px}
.card-foot{border-top:0;padding-top:0;margin-top:auto}
.card-media{
  margin:14px 10px 10px;border-radius:var(--media-r);aspect-ratio:16/9;
  display:grid;place-items:center;position:relative;overflow:hidden;
  background:
    radial-gradient(120% 90% at 20% 0%,color-mix(in srgb,var(--cm) 28%,transparent),transparent 60%),
    radial-gradient(90% 70% at 100% 100%,color-mix(in srgb,var(--cm) 18%,transparent),transparent 60%),
    var(--bg-2);
}
.card-media .logo-lg{
  width:64px;height:64px;border-radius:16px;font-size:22px;
  box-shadow:0 10px 24px -10px color-mix(in srgb,var(--cm) 60%,transparent),0 0 0 1px rgba(255,255,255,.35) inset;
  transition:transform .45s var(--ease);
}
.card:hover .card-media .logo-lg{transform:scale(1.06) rotate(-2deg)}
.card-media .stamp{position:absolute;left:12px;bottom:12px;background:var(--surface);box-shadow:var(--shadow-1)}
.card-media .rating{
  position:absolute;right:12px;bottom:12px;background:var(--surface);border-radius:var(--pill);
  padding:6px 11px;font-size:12.5px;font-weight:500;box-shadow:var(--shadow-1);display:flex;gap:6px;align-items:center;
}
.card-media .rating .stars{font-size:10px}

/* --- category + guide tiles ---------------------------------------------- */
.cat-card,.guide-card{border-radius:var(--card-r);padding:24px;transition:box-shadow .35s var(--ease),transform .35s var(--ease)}
.cat-card:hover,.guide-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-3)}
.cat-card strong{font-size:clamp(22px,1.9vw,27px)}
.guide-card h3{font-size:clamp(22px,1.9vw,27px)}
.guide-card .g-meta{order:-1}
.guide-card .g-meta span{background:transparent;padding:0;font-size:11px;letter-spacing:.08em;color:var(--ink-3)}
.guide-card .g-meta span:last-child::before{content:"·";margin-right:7px}
.guide-card .tag{align-self:flex-start;margin-top:4px}

/* --- filter bar: text chips, active one is a white pill ------------------ */
.filters{background:transparent;box-shadow:none;padding:0;gap:12px;margin-bottom:28px}
.chip{border:0;background:transparent;color:var(--ink);font-size:14px;padding:9px 16px;box-shadow:none}
.chip:hover{background:var(--bg-2)}
.chip.on{background:var(--surface);color:var(--ink);box-shadow:var(--shadow-1)}
.chip .dot{opacity:.9}
.chip-count{font-size:11px;opacity:.5}
.select{border:0;background:var(--surface);box-shadow:var(--shadow-1);font-size:13.5px;padding:9px 16px;color:var(--ink)}

/* --- numbered list: big serif numbers ------------------------------------ */
.numstep{grid-template-columns:90px 1fr;padding-block:34px}
.numstep .no{
  font-family:var(--display);font-size:28px;color:var(--ink-3);letter-spacing:-.02em;padding-top:0;
  display:flex;align-items:center;gap:10px;transition:color .25s;
}
.numstep .no::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);opacity:0;transition:opacity .25s}
.numstep:hover .no{color:var(--ink)}
.numstep:hover .no::before{opacity:1}
.numstep h3{font-size:clamp(26px,2.8vw,36px)}
.numstep .tags .tag{background:var(--surface);box-shadow:var(--shadow-1)}

/* --- verdict legend: the pricing-card pattern ---------------------------- */
.legend{gap:18px}
.legend > div{border-radius:var(--card-r);padding:28px 26px;gap:0;box-shadow:var(--shadow-1)}
.legend .lg-h{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.legend .lg-ico{width:38px;height:38px;display:grid;grid-template-columns:1fr 1fr;gap:3px;padding:5px;flex:none}
.legend .lg-ico i{border-radius:50%;background:currentColor;display:block}
.legend .lg-h h3{font-family:var(--display);font-size:24px;font-weight:400;letter-spacing:-.02em}
.legend p{font-size:14px;color:var(--ink-2);line-height:1.6}
.legend .lg-rule{height:0;border-top:1.5px dotted var(--line-2);margin:20px 0 18px}
.legend ul{list-style:none;padding:0;display:flex;flex-direction:column;gap:11px}
.legend li{display:flex;gap:11px;align-items:flex-start;font-size:14px;color:var(--ink);line-height:1.5}
.legend li::before{content:"";width:16px;height:16px;border-radius:50%;flex:none;margin-top:2px;border:1.5px solid currentColor;opacity:.35}
.legend .lg-cta{margin-top:auto;padding-top:22px}
.legend .lg-cta .btn{width:100%}
.legend > div.is-dark{background:var(--panel);color:var(--panel-ink);box-shadow:var(--btn-shadow)}
.legend > div.is-dark p{color:rgba(242,240,236,.66)}
.legend > div.is-dark .lg-rule{border-color:rgba(255,255,255,.18)}
.legend > div.is-dark li{color:#F2F0EC}
.legend > div.is-dark .btn-primary{background:#fff;color:#141414}
.band-dark .legend > div{background:var(--surface);color:var(--ink);box-shadow:var(--shadow-2)}
.band-dark .legend > div p{color:var(--ink-2)}

/* --- reader reports: dark tilted testimonial cards ----------------------- */
.quotes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;align-items:center;padding:18px 0 26px}
.ureview{
  background:#141414;color:#F2F0EC;border-radius:26px;padding:34px 28px 26px;gap:16px;min-height:430px;justify-content:center;
  box-shadow:0 0 0 4px #fff,var(--btn-shadow);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease);
}
.quotes .ureview:nth-child(1){transform:rotate(-4deg) translateY(18px)}
.quotes .ureview:nth-child(3){transform:rotate(4deg) translateY(18px)}
.quotes .ureview:nth-child(2){transform:translateY(-6px);z-index:1}
.quotes .ureview:hover{transform:rotate(0) translateY(-6px);z-index:2}
.ureview .ur-avatar{
  width:92px;height:92px;border-radius:50%;margin:0 auto 6px;display:grid;place-items:center;
  font-family:var(--display);font-size:32px;color:#fff;
  background:radial-gradient(circle at 30% 30%,color-mix(in srgb,var(--cm) 85%,#fff),color-mix(in srgb,var(--cm) 60%,#000));
  box-shadow:0 0 0 1px rgba(255,255,255,.12),0 16px 32px -12px rgba(0,0,0,.8);
}
.ureview .ur-body{
  font-family:var(--display);font-size:clamp(17px,1.5vw,20px);line-height:1.35;text-align:center;color:#fff;
  display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden;
}
.ureview .ur-body::before{content:"\201C"}
.ureview .ur-body::after{content:"\201D"}
.ureview .ur-head{
  flex-direction:column;align-items:center;gap:3px;border-top:1px solid rgba(255,255,255,.14);padding-top:16px;margin-top:2px;
}
.ureview .ur-name{font-size:15px;font-weight:600;color:#fff}
.ureview .ur-role{font-size:13px;color:rgba(242,240,236,.62)}
.ureview .ur-date,.ureview .badge,.ureview .stars{display:none}
.ureview .ur-tags{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap;justify-content:center}
.ureview .ur-tags span{
  font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  padding:4px 9px;border-radius:var(--pill);background:rgba(255,255,255,.08);color:rgba(242,240,236,.8);
}
.ureview .ur-tags span.ev{color:#9FE3BE}
.ureview .reply{background:rgba(255,255,255,.06);color:rgba(242,240,236,.8);font-size:12.5px;text-align:left}
.ureview .reply b{color:rgba(242,240,236,.5)}
/* single-record page keeps quote cards upright and light */
.stack .ureview{transform:none;min-height:0;justify-content:flex-start;background:var(--surface);color:var(--ink);box-shadow:var(--shadow-1);padding:24px;border-radius:var(--card-r)}
.stack .ureview .ur-body{color:var(--ink);text-align:left;-webkit-line-clamp:unset;display:block;font-size:17px}
.stack .ureview .ur-head{flex-direction:row;align-items:center;border-color:var(--line);gap:10px}
.stack .ureview .ur-name{color:var(--ink);font-weight:500}
.stack .ureview .ur-avatar{display:none}
.stack .ureview .ur-date{display:inline;margin-left:auto}
.stack .ureview .badge,.stack .ureview .stars{display:inline-flex}
.stack .ureview .ur-tags,.stack .ureview .ur-role{display:none}
.stack .ureview .reply{background:var(--bg-2);color:var(--ink-2)}
.stack .ureview .reply b{color:var(--ink-3)}

/* --- closing CTA: contained dark panel ------------------------------------ */
.cta-wrap{padding-block:clamp(40px,5vw,70px)}
.cta-band{
  background:var(--panel);color:var(--panel-ink);border-radius:32px;text-align:left;align-items:flex-start;
  padding:clamp(40px,5vw,64px) clamp(28px,4.4vw,64px) 0;gap:24px;position:relative;overflow:hidden;
  box-shadow:var(--btn-shadow);
}
.cta-band::before{
  content:"";position:absolute;right:-8%;top:-30%;width:52%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 40% 40%,rgba(255,255,255,.22),rgba(255,255,255,.04) 45%,transparent 70%);
  filter:blur(18px);pointer-events:none;
}
.cta-band > *{position:relative}
.cta-band .eyebrow{color:var(--accent);background:transparent;box-shadow:none;padding:0}
.cta-band h2{font-size:clamp(34px,4.6vw,64px);max-width:14ch;color:#fff}
.cta-band p{color:rgba(242,240,236,.66);max-width:46ch;font-size:16px}
.cta-band .actions{display:flex;gap:12px;flex-wrap:wrap}
.cta-band .btn-primary{background:#fff;color:#141414;box-shadow:0 0 0 6px rgba(255,255,255,.06),var(--btn-shadow)}
.cta-band .btn-ghost{background:transparent;color:#F2F0EC;box-shadow:0 0 0 1px rgba(255,255,255,.22)}
.cta-band .cta-foot{
  width:100%;margin-top:clamp(28px,4vw,56px);padding:22px 0 26px;border-top:1px solid rgba(255,255,255,.12);
  display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:rgba(242,240,236,.6);
}
.cta-band .cta-foot a{display:inline-flex;gap:8px;align-items:center;transition:color .2s}
.cta-band .cta-foot a:hover{color:#fff}

/* --- forms: serif labels, white fields on a ring --------------------------- */
.field label{font-family:var(--display);font-size:19px;font-weight:400;letter-spacing:-.015em;color:var(--ink)}
.field input[type=text],.field input[type=email],.field input[type=url],.field textarea,.field select{
  background:var(--surface);border:0;border-radius:12px;padding:14px 16px;box-shadow:var(--shadow-1);font-size:14.5px;
  transition:box-shadow .2s;
}
.field textarea{border-radius:12px;min-height:150px}
.field input:focus,.field textarea:focus,.field select:focus{box-shadow:0 0 0 1px var(--ink),var(--shadow-2);background:var(--surface)}
.field.err input,.field.err textarea,.field.err select{box-shadow:0 0 0 1px var(--risk)}
.err-msg{padding-left:2px}
.panel{border-radius:var(--card-r)}
.panel-h{padding:16px 22px}
.panel-b{padding:22px}
.starpick button{box-shadow:var(--shadow-1);border:0}
.filebox{border:0;box-shadow:var(--shadow-1);background:var(--surface);border-radius:12px}
.check{font-size:13.5px}
form .btn-primary[type=submit]{padding:15px 34px;font-size:15px}

/* --- record page --------------------------------------------------------- */
.mast-meta{box-shadow:var(--shadow-1)}
.rating-row{border-radius:var(--card-r)}
.toc a{font-size:13.5px}
.callout,.sources,.pc > div,.kv,.steps{border-radius:var(--card-r)}
.callout{padding:24px 26px}

/* --- footer --------------------------------------------------------------- */
.site-foot{border-top:0;background:transparent}
.foot-in{padding-top:30px}

/* --- responsive additions ------------------------------------------------- */
@media (max-width:1080px){
  .quotes{grid-template-columns:1fr;gap:14px;padding-top:0}
  .quotes .ureview:nth-child(n){transform:none}
}
@media (max-width:900px){
  .kpi{padding:6px 26px}
}
@media (max-width:760px){
  .kpi-row{flex-direction:column;align-items:stretch}
  .kpi{border-right:0;border-bottom:1px solid var(--line);padding:14px 0}
  .kpi:last-child{border-bottom:0}
  .section-head h2{max-width:none}
  .numstep{grid-template-columns:1fr;gap:8px}
  .cta-band{border-radius:24px}
  .nav a.cta{box-shadow:none}
}
@media (prefers-reduced-motion:reduce){
  .btn .bl > span,.btn{transition:none}
  .quotes .ureview:nth-child(n){transform:none}
}

/* ============================================================
   Readability pass — modelled on the mobile references in
   versions/Easy: one loud status per card, one obvious search
   field, one obvious button, short scannable blocks.
   Stays inside the studio design code; loaded last.
   ============================================================ */

:root{--ink-2:#5C5C5C;--ink-3:#8E8E8E}
:root[data-theme="dark"]{--ink-2:#B3AFA8;--ink-3:#857F77}
body{font-size:16px;line-height:1.55}

/* --- search: one field, magnifier left, round go-button right ------- */
.searchbox{max-width:640px;margin-top:26px}
.searchbox form{
  display:flex;align-items:center;gap:10px;height:64px;padding:8px 8px 8px 20px;
  background:var(--surface);border-radius:var(--pill);box-shadow:var(--shadow-2);
  transition:box-shadow .2s;
}
.searchbox form:focus-within{box-shadow:0 0 0 2px var(--ink),var(--shadow-2)}
.search-field{padding:0;gap:12px}
.search-field svg{width:20px;height:20px;color:var(--ink-2)}
.search-field input{font-size:17px;padding:0;color:var(--ink)}
.search-field input::placeholder{color:var(--ink-3)}
.search-field .kbd{display:none}
.search-go{
  flex:none;width:48px;height:48px;border-radius:50%;border:0;cursor:pointer;
  background:var(--dark);color:var(--bg);display:grid;place-items:center;
  box-shadow:var(--btn-shadow);transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.search-go:hover{transform:scale(1.06);box-shadow:var(--btn-shadow-hover)}
.search-go svg{width:20px;height:20px}
.ac{text-align:left}
.ac a{padding:13px 18px;font-size:15px}
.ac .stamp{margin-left:auto}

/* --- status: solid fill, glyph, words ---------------------------------- */
.stamp{
  font-family:var(--sans);font-size:13.5px;font-weight:600;letter-spacing:-.005em;text-transform:none;
  padding:7px 13px 7px 11px;border:0;box-shadow:none;color:#fff;gap:7px;
}
.stamp i{width:auto;height:auto;border-radius:0;background:none;font-style:normal;font-weight:700;font-size:12px;line-height:1}
.stamp i::before{content:"";}
.s-verified{background:var(--ok);color:#fff}
.s-caution{background:var(--warn);color:#fff}
.s-risk{background:var(--risk);color:#fff}
.s-review{background:var(--pend);color:#fff}
.s-verified i::before{content:"\2713"}
.s-caution i::before{content:"!"}
.s-risk i::before{content:"\2715"}
.s-review i::before{content:"?"}
.stamp-lg{font-size:15px;padding:10px 18px 10px 15px}
.stamp-lg i{font-size:13px}
.stamp b{font-weight:700;margin-left:4px}
.stamp.s-lite{background:var(--surface);color:var(--ink);box-shadow:var(--shadow-1)}
.stamp.s-lite i{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;color:#fff;font-size:10px}
.stamp.s-lite.s-verified i{background:var(--ok)}
.stamp.s-lite.s-caution i{background:var(--warn)}
.stamp.s-lite.s-risk i{background:var(--risk)}
.stamp.s-lite.s-review i{background:var(--pend)}
:root[data-theme="dark"] .stamp{color:#0F0F0F}
:root[data-theme="dark"] .stamp.s-lite{color:var(--ink)}

/* hero quick filter — four status counters */
.statusbar{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.statusbar .stamp{cursor:pointer;transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.statusbar .stamp:hover{transform:translateY(-2px);box-shadow:var(--btn-shadow)}

/* --- record cards: the reference's top-down mobile card ---------------- */
.card{text-align:left}
.card-media{
  order:-1;margin:10px 10px 0;aspect-ratio:16/8;border-radius:var(--media-r);
}
.card-media .logo-lg{width:68px;height:68px;font-size:24px}
.card-media .rank{
  position:absolute;left:12px;top:12px;width:30px;height:30px;border-radius:50%;
  background:var(--dark);color:var(--bg);display:grid;place-items:center;
  font-family:var(--display);font-size:15px;box-shadow:var(--shadow-2);
}
.card-media .rank.r1{background:var(--accent);color:#fff}
.card-media .rating{display:none}
.card-in{padding:18px 20px 20px;gap:10px}
.card-meta{font-size:12px;flex-wrap:wrap;row-gap:2px}
.card-title h3{font-size:clamp(21px,1.7vw,24px);margin:0}
.card-rate{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:600;color:var(--ink)}
.card-rate .stars{font-size:15px;letter-spacing:1px;color:#E7A93C}
.card-rate .n{font-weight:400;color:var(--ink-3);font-size:13px}
.card-tags{margin-top:2px}
.card-tags .tag{display:none}
.card-sum{font-size:14px;line-height:1.55;-webkit-line-clamp:3;color:var(--ink-2)}
.card-btn{order:9;margin-top:6px;width:100%;justify-content:center}
.card-btn svg{width:16px;height:16px;margin-left:2px}

/* top-rated strip */
.top3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}

/* --- found counter + full-width "see all" ------------------------------- */
.found{font-size:17px;color:var(--ink);margin-bottom:18px;display:flex;gap:8px;align-items:baseline}
.found b{font-family:var(--display);font-size:24px;letter-spacing:-.02em;font-weight:400}
.found .mono{font-size:11px;color:var(--ink-3);margin-left:auto}
.seeall{display:flex;justify-content:center;margin-top:26px}
.seeall .btn{min-width:260px}

/* --- category rows (reference: a clean list with counts) --------------- */
.cat-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.cat-row{min-width:0;max-width:100%}
.cat-row{
  display:flex;align-items:center;gap:14px;padding:18px 20px;
  background:var(--surface);border-radius:18px;box-shadow:var(--shadow-1);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease);
}
.cat-row:hover{transform:translateY(-2px);box-shadow:var(--shadow-2)}
.cat-row .ico{
  width:40px;height:40px;border-radius:12px;flex:none;display:grid;place-items:center;
  background:var(--bg-2);font-family:var(--display);font-size:18px;color:var(--ink);
}
.cat-row .t{flex:1;min-width:0}
.cat-row .t b{display:block;font-family:var(--display);font-weight:400;font-size:20px;letter-spacing:-.02em;line-height:1.15}
.cat-row .t span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:13px;line-height:1.4;color:var(--ink-2);margin-top:3px}
.cat-row .cnt{
  flex:none;font-family:var(--mono);font-size:12px;color:var(--ink);
  background:var(--bg-2);padding:6px 10px;border-radius:var(--pill);
}
.cat-row .chev{flex:none;color:var(--ink-3)}

/* --- section heads: simpler on every screen ---------------------------- */
.section{padding-block:clamp(36px,5vw,72px)}
.section-head{margin-bottom:26px}
.section-head h2{font-size:clamp(28px,3.4vw,46px)}
.section-head .btn{text-decoration:none}
.section-head p{font-size:15px;margin-top:12px}

/* --- reader quotes: lighter, upright, readable -------------------------- */
.quotes{align-items:stretch;padding:0}
.quotes .ureview:nth-child(n){transform:none;min-height:0;justify-content:flex-start}
.ureview{background:var(--surface);color:var(--ink);box-shadow:var(--shadow-1);padding:24px;border-radius:var(--card-r);gap:14px}
.ureview .ur-avatar{width:56px;height:56px;font-size:20px;margin:0}
.ureview .ur-body{color:var(--ink);text-align:left;font-size:17px;line-height:1.45;-webkit-line-clamp:6}
.ureview .ur-head{align-items:flex-start;border-color:var(--line)}
.ureview .ur-name{color:var(--ink)}
.ureview .ur-role{color:var(--ink-2)}
.ureview .ur-tags span{background:var(--bg-2);color:var(--ink-2)}
.ureview .ur-tags span.ev{color:var(--ok);background:var(--ok-bg)}
.ureview .reply{background:var(--bg-2);color:var(--ink-2)}
.ureview .reply b{color:var(--ink-3)}

/* --- mobile menu: full-screen overlay with a search field on top -------- */
.m-only{display:none}
.nav-close{display:none}
@media (max-width:760px){
  /* a backdrop-filter on the header would become the containing block for the fixed overlay */
  .site-head{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--bg)}
  /* anchored to the sticky header's wrap, so no fixed-position containing-block surprises */
  .nav{
    display:none;position:absolute;top:0;left:0;right:0;bottom:auto;z-index:80;
    height:100vh;height:100dvh;
    background:var(--bg);border-radius:0;box-shadow:none;padding:18px 20px 40px;
    overflow:auto;gap:0;
  }
  .nav.open{display:flex;flex-direction:column}
  .nav-close{
    display:inline-flex;align-items:center;justify-content:center;
    width:40px;min-width:40px;max-width:40px;height:40px;flex:0 0 40px;align-self:flex-start;
    padding:0;line-height:0;border-radius:50%;border:0;
    background:var(--surface);box-shadow:var(--shadow-1);color:var(--ink);margin-bottom:22px;cursor:pointer;
  }
  .nav-close span{display:flex}
  .m-only{display:block}
  .m-search{
    display:flex;align-items:center;gap:12px;padding:0 18px;height:60px;border-radius:18px;
    background:var(--dark);color:var(--bg);margin-bottom:22px;box-shadow:var(--btn-shadow);
  }
  .m-search svg{flex:none;width:22px;height:22px}
  .m-search input{flex:1;border:0;background:transparent;color:var(--bg);font-size:17px;outline:none;min-width:0}
  .m-search input::placeholder{color:rgba(249,248,246,.6)}
  .m-search:focus-within{background:#262626}
  .nav > a.d-only{display:none}
  .m-acc{border-bottom:1px solid var(--line)}
  .m-acc summary{
    list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;
    font-family:var(--display);font-size:26px;font-weight:400;letter-spacing:-.02em;padding:14px 0;
  }
  .m-acc summary::-webkit-details-marker{display:none}
  .m-acc summary i{
    width:28px;height:28px;border-radius:50%;border:1.5px solid var(--line-2);flex:none;
    background:no-repeat center/14px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23141414' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    transition:transform .25s var(--ease);
  }
  .m-acc[open] summary i{transform:rotate(180deg)}
  .m-acc[open] summary{text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1.5px}
  .m-sub{padding:0 0 10px 18px;display:flex;flex-direction:column}
  .m-sub a{font-family:var(--sans);font-size:17px;padding:11px 0;display:flex;align-items:flex-start;gap:10px;border-bottom:0;font-weight:400;white-space:normal;line-height:1.35;overflow-wrap:anywhere}
  .m-sub a .cnt{padding-top:3px}
  .m-sub a .dot{margin-top:7px}
  .m-acc summary{white-space:normal}
  .m-sub a .cnt{margin-left:auto;font-family:var(--mono);font-size:12px;color:var(--ink-3)}
  .m-sub a .dot{width:8px;height:8px}
  .nav a.cta{margin-top:22px;font-family:var(--sans);font-size:16px;border:0;justify-content:center;display:flex;padding:16px;border-radius:var(--pill)}
  html.nav-open{overflow:hidden}
}

/* --- sticky mobile action bar on a record page -------------------------- */
.mbar{display:none}
@media (max-width:760px){
  .mbar{
    display:flex;gap:10px;position:fixed;left:12px;right:12px;bottom:12px;z-index:50;
    padding:10px;background:color-mix(in srgb,var(--surface) 92%,transparent);
    backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
    border-radius:var(--pill);box-shadow:var(--shadow-3);
  }
  .mbar .btn{flex:1;justify-content:center;padding:13px 14px;font-size:15px}
  .has-mbar{padding-bottom:96px}
}

/* --- mobile layout ------------------------------------------------------- */
@media (max-width:760px){
  html,body{overflow-x:clip}
  .grid,.g2,.g3,.g4,.legend,.pc,.f2,.stat-row,.kpi-row,.quotes,.top3,.cat-list{grid-template-columns:minmax(0,1fr)}
  .wrap{padding-inline:16px}
  .hero{padding-block:26px 22px}
  .hero h1{font-size:clamp(34px,9.4vw,42px);max-width:none}
  .hero-sub{font-size:15.5px}
  .searchbox{margin-top:18px}
  .searchbox form{flex-direction:row;height:58px;padding:6px 6px 6px 16px;border-radius:var(--pill);gap:8px}
  .search-field{width:auto;flex:1}
  .search-go{width:46px;height:46px}
  .hero-tags{display:none}
  .statusbar{gap:6px}
  .statusbar .stamp{font-size:13px;padding:8px 12px 8px 10px}
  .marquee{display:none}
  .hero-corner{display:none}

  .card-media{aspect-ratio:16/7}
  .card-in{text-align:left;align-items:flex-start;padding:16px 18px 18px}
  .card-tags{justify-content:flex-start}
  .card-sum{display:-webkit-box;-webkit-line-clamp:2;font-size:14.5px;text-align:left;width:100%}
  .card-title h3{font-size:23px}

  .top3{grid-template-columns:minmax(0,1fr)}
  .cat-list{grid-template-columns:minmax(0,1fr)}
  .found{flex-wrap:wrap}
  .found .mono{margin-left:0;width:100%}
  .seeall .btn{width:100%}

  .section-head{flex-direction:column;align-items:stretch;gap:14px}
  .section-head .btn{width:100%;justify-content:center}
  .section-head h2{font-size:30px}

  .masthead{padding-block:18px 22px}
  .mast-top{gap:12px}
  .mast-top .mast-actions{display:none}
  .mast-id h1{font-size:30px}
  .mast-verdict{font-size:17px}
  .mast-meta{width:100%;border-radius:18px;padding:4px}
  .mast-meta > *{padding:10px 14px}
  .mast-meta .stamp-lg{width:100%;justify-content:center}

  .prose{font-size:16.5px}
  .prose h2{font-size:24px}
  .legend > div{padding:22px}
  .kpi .v{font-size:40px}
  .chip{font-size:14px;padding:10px 14px}
  .filters{gap:8px}
  .ureview .ur-body{font-size:16px}
  .cta-band{padding:32px 22px 0;border-radius:24px}
  .cta-band h2{font-size:32px}
  .cta-band .actions .btn{width:100%}
}

/* ============================================================
   Audit pass — measured on a 390px viewport.
   Goals: shorter pages, no text under 12px, AA contrast on
   secondary text, fewer controls in the way, facts before prose.
   ============================================================ */

/* --- contrast: secondary ink meets AA on the paper ground ---------- */
:root{--ink-3:#6E6E6E;--star:#D9962A}
:root[data-theme="dark"]{--ink-3:#8E887F;--star:#E0A94A}
.stars,.card-rate .stars{color:var(--star)}

/* --- type floor: nothing under 12px anywhere ------------------------ */
.eyebrow,.rule-label,.card-meta,.mast-updated,.src-m,.sources .idx,.prose h2 .num,
.ur-date,.badge,.t-meta,.t-go,.kbd,.feed-row .when,.g-meta span,.panel-h,.facts th,
.kv > div:nth-child(odd),.foot-col h4,.foot-legal,.found .mono,.chip-count,.cat-row .cnt,
.ureview .ur-tags span,.stat span,.kpi .k,.legend .lg-h,.hero-tags span,.mq-item,.chipbar .cb,
.mast-meta .mast-updated{font-size:12px}
.badge{padding:4px 9px}
.stars{font-size:13px}
.crumbs{font-size:12.5px;gap:10px}
.crumbs a,.crumbs span{padding:6px 0;display:inline-block}
.sources .src-m a{padding:4px 0;display:inline-block}
.prose{font-size:17px}
.field .hint,.err-msg{font-size:13px}
.filebox{font-size:13.5px}
.serp .u{font-size:12px}.serp .d{font-size:13px}

/* --- header on phones: logo, search, theme, menu — three 44px targets ---- */
@media (max-width:760px){
  .head-tools{gap:8px}
  .head-search,.icon-btn{width:44px;height:44px}
}
@media (max-width:340px){
  .head-tools{gap:5px}
  .head-search,.icon-btn{width:40px;height:40px}
  .brand-name{font-size:17px}
}

/* --- compact list cards: the same record as an ~90px row -------------- */
@media (max-width:760px){
  .list-m .card,.top3 .card:nth-child(n+2){flex-direction:row;align-items:center;gap:0;border-radius:18px;padding:10px 12px 10px 10px}
  .list-m .card-media,.top3 .card:nth-child(n+2) .card-media{
    order:0;margin:0 12px 0 0;aspect-ratio:1/1;width:64px;flex:none;border-radius:14px;
  }
  .list-m .card-media .logo-lg,.top3 .card:nth-child(n+2) .card-media .logo-lg{width:40px;height:40px;font-size:15px;border-radius:10px}
  .list-m .card-media .rank,.top3 .card:nth-child(n+2) .card-media .rank{width:22px;height:22px;font-size:12px;left:5px;top:5px}
  .list-m .card-in,.top3 .card:nth-child(n+2) .card-in{padding:0;gap:5px;text-align:left;align-items:flex-start;flex:1;min-width:0}
  .list-m .card-title h3,.top3 .card:nth-child(n+2) .card-title h3{font-size:18px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
  .list-m .card-rate,.top3 .card:nth-child(n+2) .card-rate{font-size:13.5px;gap:6px}
  .list-m .card-rate .stars,.top3 .card:nth-child(n+2) .card-rate .stars{font-size:12px;letter-spacing:.5px}
  .list-m .card-rate .n,.top3 .card:nth-child(n+2) .card-rate .n{font-size:12px}
  .list-m .card-tags,.top3 .card:nth-child(n+2) .card-tags{margin:0;justify-content:flex-start}
  .list-m .stamp,.top3 .card:nth-child(n+2) .stamp{font-size:12px;padding:5px 10px 5px 8px}
  .list-m .card-meta,.list-m .card-btn,
  .top3 .card:nth-child(n+2) .card-meta,.top3 .card:nth-child(n+2) .card-btn{display:none}
  .list-m .card-sum,.top3 .card:nth-child(n+2) .card-sum{-webkit-line-clamp:1;font-size:13px;color:var(--ink-2);margin:0}
  .list-m .card::after,.top3 .card:nth-child(n+2)::after{
    content:"";width:18px;height:18px;flex:none;margin-left:8px;
    background:no-repeat center/18px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23747474' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E");
  }
  .list-m .card:hover,.top3 .card:nth-child(n+2):hover{transform:none}
  .list-m,.top3{gap:10px}
}

/* --- catalogue filters: one scrolling row per group on a phone ------- */
@media (max-width:760px){
  .filters{gap:10px;margin-bottom:20px}
  .chips{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;
    margin-inline:-16px;padding-inline:16px;padding-bottom:2px}
  .chips::-webkit-scrollbar{display:none}
  .chip{flex:none;white-space:nowrap}
  .select{flex:none;width:auto;margin-left:0}
  .filters .chips:last-child{flex-wrap:wrap;overflow:visible;margin:0;padding:0}
}

/* --- record page on a phone: facts first, editor tools hidden -------- */
.m-facts{display:none}
@media (max-width:760px){
  .m-facts{
    display:block;margin-top:16px;background:var(--surface);border-radius:18px;box-shadow:var(--shadow-1);
  }
  .m-facts summary{
    list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;
    padding:15px 18px;font-weight:600;font-size:15px;
  }
  .m-facts summary::-webkit-details-marker{display:none}
  .m-facts summary::after{content:"+";font-family:var(--mono);font-size:18px;color:var(--ink-3)}
  .m-facts[open] summary::after{content:"−"}
  .m-facts .facts{padding:0 18px 14px}
  .m-facts .facts th{width:40%}
  .rail .panel-serp,.rail .panel-toc{display:none}
  .rail .panel-verdict{display:none}
  .rev-grid{padding-top:10px}
  .mast-meta .mast-updated{font-size:12.5px}
}

/* --- guides and quotes: compact on a phone ---------------------------- */
@media (max-width:760px){
  .guide-card{padding:16px 18px;gap:6px}
  .guide-card h3{font-size:19px}
  .guide-card p{display:none}
  .guide-card .tag{display:none}
  .ureview{padding:18px}
  .ureview .ur-body{font-size:15.5px;-webkit-line-clamp:4}
  .ureview .reply{display:none}
  .ureview .ur-avatar{width:44px;height:44px;font-size:16px}
  .cta-band h2{font-size:28px}
  .foot-in{padding-block:28px 18px;gap:18px}
}

/* --- audit follow-ups ------------------------------------------------- */
html{scroll-padding-top:calc(var(--head-h) + 20px)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--dark);color:var(--bg);padding:10px 16px;border-radius:var(--pill);font-weight:500}
.skip:focus{top:12px}
#app:focus{outline:none}
[tabindex="-1"]:focus{outline:none}

/* DS-04: the red spark stays rare — numerals and labels go quiet */
.prose h2 .num,.sources .idx,.step-n{color:var(--ink-3)}
.callout b{color:var(--ink-2)}
.card-title h3 a:hover,.t-name a:hover b{color:var(--ink);text-decoration:underline;text-underline-offset:3px}

/* DS-12: focus ring on the menu search */
.m-search:focus-within{background:#262626;box-shadow:var(--btn-shadow)}

/* filter tools row: view segment + sort, visually separate from the filters */
.filters .tools{justify-content:flex-end;gap:10px}
.filters .seg{display:inline-flex;background:var(--bg-2);border-radius:var(--pill);padding:3px;gap:2px}
.filters .seg .chip{padding:6px 12px;font-size:13px}
.filters .seg .chip.on{box-shadow:var(--shadow-1)}
.filters .select{margin-left:0}

/* file inputs inside the dashed box */
.filebox{display:block;cursor:pointer;position:relative}
.filebox input[type=file]{display:block;margin:10px auto 0;font-size:13px;color:var(--ink-2);max-width:100%}

/* M4: no iOS zoom on focus; M6: tablet rail */
@media (max-width:1080px){
  .rail .panel-serp,.rail .panel-toc,.rail .panel-verdict{display:none}
  .m-facts{display:block}
}
@media (max-width:760px){
  .field input[type=text],.field input[type=email],.field input[type=url],.field textarea,.field select,.select,.m-search input,.search-field input{font-size:16px}
  .filters .tools{justify-content:flex-start}
  .mast-updated{color:var(--ink-2);font-size:13px}
  .err-msg{color:var(--risk)}
}

/* --- list view on every width: the compact row --------------------------- */
.list-all .card{flex-direction:row;align-items:center;gap:0;border-radius:18px;padding:10px 14px 10px 10px}
.list-all .card-media{order:0;margin:0 14px 0 0;aspect-ratio:1/1;width:72px;flex:none;border-radius:14px}
.list-all .card-media .logo-lg{width:44px;height:44px;font-size:16px;border-radius:10px}
.list-all .card-in{padding:0;gap:5px;text-align:left;align-items:flex-start;flex:1;min-width:0}
.list-all .card-title h3{font-size:19px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.list-all .card-rate{font-size:13.5px;gap:6px}
.list-all .card-rate .stars{font-size:12px;letter-spacing:.5px}
.list-all .card-sum{-webkit-line-clamp:1;font-size:13.5px;color:var(--ink-2);margin:0}
.list-all .card-tags{margin:0;justify-content:flex-start}
.list-all .stamp{font-size:12px;padding:5px 10px 5px 8px}
.list-all .card-meta,.list-all .card-btn{display:none}
.list-all .card::after{
  content:"";width:18px;height:18px;flex:none;margin-left:8px;
  background:no-repeat center/18px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23747474' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E");
}
.list-all .card:hover{transform:none;box-shadow:var(--shadow-2)}
.grid.list-all{grid-template-columns:minmax(0,1fr);gap:10px}
@media (min-width:761px){
  .list-all .card-in{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,2fr) auto;grid-template-areas:"t s st" "r s st";align-items:center;column-gap:18px}
  .list-all .card-title{grid-area:t}
  .list-all .card-rate{grid-area:r}
  .list-all .card-sum{grid-area:s;-webkit-line-clamp:2}
  .list-all .card-tags{grid-area:st}
}
h2.found{margin:0 0 18px;font-family:var(--sans);font-weight:400;letter-spacing:0;line-height:1.3}

/* --- no red focus rings: the ink ring is the focus style --------------- */
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.btn:focus-visible,.chip:focus-visible,.stamp:focus-visible,.dd-btn:focus-visible,.icon-btn:focus-visible,.head-search:focus-visible,.search-go:focus-visible{outline:none;box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--ink)}
.btn-primary:focus-visible,.nav a.cta:focus-visible{box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--ink),var(--btn-shadow)}
.field input:focus-visible,.field textarea:focus-visible{outline:none}

/* --- custom dropdowns ---------------------------------------------------- */
.dd{position:relative;display:inline-block;max-width:100%}
.dd select{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px;margin:0;padding:0;border:0}
.dd-btn{
  display:inline-flex;align-items:center;justify-content:space-between;gap:10px;cursor:pointer;
  font-family:var(--sans);font-size:14px;color:var(--ink);text-align:left;
  background:var(--surface);border:0;box-shadow:var(--ring-2);border-radius:var(--pill);
  padding:9px 12px 9px 16px;min-height:38px;width:100%;transition:box-shadow .16s;
}
.dd-btn:hover{box-shadow:var(--shadow-2)}
.dd.open .dd-btn{box-shadow:0 0 0 1.5px var(--ink)}
.dd-val{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dd-ph{color:var(--ink-3)}
.dd-chev{flex:none;color:var(--ink-2);transition:transform .2s var(--ease)}
.dd.open .dd-chev{transform:rotate(180deg)}
.dd-panel{
  position:absolute;left:0;top:calc(100% + 6px);min-width:100%;z-index:60;
  background:var(--surface);border-radius:16px;box-shadow:var(--shadow-3);padding:6px;
  max-height:280px;overflow:auto;
}
.dd-opt{
  padding:10px 14px;border-radius:10px;font-size:14px;color:var(--ink);cursor:pointer;white-space:nowrap;
  display:flex;align-items:center;gap:10px;
}
.dd-opt:hover{background:var(--bg-2)}
.dd-opt.on{background:var(--bg-2);font-weight:600}
.dd-opt.on::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--ink);margin-left:auto}
.dd-field{display:block;width:100%}
.dd-field .dd-btn{border-radius:12px;padding:14px 14px 14px 16px;font-size:14.5px;min-height:50px;box-shadow:var(--shadow-1)}
.field.err .dd-btn{box-shadow:0 0 0 1px var(--risk)}
.dd-field .dd-panel{border-radius:14px}

/* --- pills and chips: a ring that is actually visible on the paper ground */
:root{--ring-2:0 0 0 1px rgba(0,0,0,.10),0 1px 2px rgba(0,0,0,.05)}
:root[data-theme="dark"]{--ring-2:0 0 0 1px rgba(255,255,255,.14),0 1px 2px rgba(0,0,0,.5)}
.chip.on,.btn-ghost,.eyebrow,.hero-tags a,.mast-meta,.head-search,.icon-btn,.nav-close{box-shadow:var(--ring-2)}
.search-field{box-shadow:none}
.chip.on:hover{box-shadow:var(--ring-2)}

/* --- filter rows: every row starts at the same left edge, same height --- */
.filters{gap:10px}
.filters .chips{min-height:38px;align-items:center}
.filters .tools{justify-content:flex-start;gap:10px}
.filters .tools .dd{flex:none}
.filters .seg{box-shadow:none}
.filters .seg .chip{min-height:32px}
.chip{min-height:38px}
@media (max-width:760px){
  .dd-field .dd-btn{font-size:16px}
  .filters .tools{flex-wrap:nowrap;overflow:visible;margin:0;padding:0}
  .filters .tools .seg{flex:none}
  .filters .tools .dd{flex:1;min-width:0}
  .filters .tools .dd-btn{width:100%}
}

/* --- filters as dropdowns ------------------------------------------------ */
.filters{flex-direction:row;flex-wrap:wrap;align-items:center;gap:10px}
.filters .sel-row,.filters .tools{display:flex;gap:10px;align-items:center;min-height:0}
.filters .sel-row .dd{flex:none;min-width:200px}
.filters .tools{margin-left:auto}
.dd-val .dot{width:8px;height:8px;margin-right:8px;flex:none}
.dd-opt .dot{width:8px;height:8px;flex:none}
.dd-cnt{margin-left:auto;padding-left:18px;font-family:var(--mono);font-size:12px;color:var(--ink-3)}
.dd-opt.on::after{display:none}
.dd-opt.on .dd-cnt{color:var(--ink)}
.dd-panel{min-width:240px}
@media (max-width:760px){
  .filters{flex-direction:column;align-items:stretch}
  .filters .sel-row{flex-wrap:nowrap;overflow:visible;margin:0;padding:0}
  .filters .sel-row .dd{flex:1;min-width:0}
  .filters .sel-row .dd-btn{width:100%}
  .filters .tools{margin-left:0}
  .dd-panel{min-width:100%}
}

/* --- forms, 2026: quiet labels, tall fields, one column of rhythm ------ */
.lede{font-size:16px;line-height:1.6;color:var(--ink-2);margin-top:14px;max-width:56ch}
.formwrap{margin-top:26px;background:var(--surface);border-radius:var(--card-r);padding:28px;box-shadow:var(--shadow-1)}
.form-title{font-family:var(--display);font-weight:400;font-size:26px;letter-spacing:-.02em;margin:0 0 6px}
.form-lede{font-size:14.5px;line-height:1.55;color:var(--ink-2);margin:0 0 22px;max-width:60ch}
.form{gap:20px}
.f2{gap:16px 18px}
.field{gap:7px}
.field label{font-family:var(--sans);font-size:14px;font-weight:600;letter-spacing:-.01em;color:var(--ink)}
.field .hint{font-size:13px;color:var(--ink-2);line-height:1.5}
.field input[type=text],.field input[type=email],.field input[type=url],.field textarea,.field select,.dd-field .dd-btn{
  min-height:52px;padding:14px 16px;border-radius:14px;background:var(--bg);box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);
  font-size:15px;color:var(--ink);transition:box-shadow .16s,background .16s;
}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-3)}
.field textarea{min-height:150px;line-height:1.55;resize:vertical}
.field input:focus,.field textarea:focus,.dd.open .dd-btn,.dd-field .dd-btn:focus-visible{background:var(--surface);box-shadow:inset 0 0 0 1.5px var(--ink)}
.field.err input,.field.err textarea,.field.err .dd-btn{box-shadow:inset 0 0 0 1.5px var(--risk);background:var(--surface)}
.dd-field .dd-btn{width:100%;border-radius:14px}
.dd-field .dd-panel{border-radius:14px}
.err-msg{font-size:13px;color:var(--risk);padding-left:2px}
.starpick{gap:8px}
.starpick button{width:44px;height:44px;border-radius:12px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);background:var(--bg);font-size:18px;color:var(--ink-3)}
.starpick button.on{background:var(--surface);box-shadow:inset 0 0 0 1.5px var(--star);color:var(--star)}
.filebox{
  border:0;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);border-radius:14px;background:var(--bg);
  padding:18px 16px;text-align:left;font-size:14px;color:var(--ink-2);display:flex;flex-direction:column;gap:10px;cursor:pointer;
}
.filebox:hover{background:var(--surface)}
.filebox input[type=file]{margin:0;font-size:13px;color:var(--ink);max-width:100%}
.check{font-size:14px;line-height:1.5;color:var(--ink-2);align-items:flex-start;gap:12px;padding:4px 0}
.check input{width:18px;height:18px;margin-top:2px;border-radius:6px;accent-color:var(--ink)}
.form-actions{display:flex;flex-direction:column;gap:12px;align-items:flex-start;padding-top:4px}
.form-actions .btn{padding:16px 32px}
.form-note{font-size:13px;color:var(--ink-2);line-height:1.5}
.notice{border-radius:14px}
@media (max-width:760px){
  .formwrap{padding:20px 16px;border-radius:20px;margin-top:20px}
  .form-title{font-size:24px}
  .form-actions .btn{width:100%}
  .field input[type=text],.field input[type=email],.field input[type=url],.field textarea,.dd-field .dd-btn{font-size:16px}
  .lede{font-size:15.5px}
}

/* --- rolling label, done the reference's way: the BUTTON is the clip.
   The second label sits a full travel below; on hover both move up by
   label height + gap, so the old word leaves through the top padding and
   the new one arrives from beneath the bottom padding. ---------------- */
.btn,.nav a.cta{overflow:hidden}
.btn .bl,.nav a.cta .bl{position:relative;display:block;height:1.25em;line-height:1.25em;overflow:visible}
.btn .bl > span,.nav a.cta .bl > span{
  display:block;white-space:nowrap;will-change:transform;
  transition:transform .55s var(--ease),filter .55s var(--ease),opacity .55s var(--ease);
}
.btn,.nav a.cta{--roll:calc(1.25em + 18px)}
.btn .bl > span + span,.nav a.cta .bl > span + span{
  position:absolute;left:0;top:var(--roll);filter:blur(6px);opacity:0;
}
.btn:hover .bl > span,.nav a.cta:hover .bl > span{transform:translateY(calc(-1 * var(--roll)))}
.btn:hover .bl > span:first-child,.nav a.cta:hover .bl > span:first-child{filter:blur(6px);opacity:0}
.btn:hover .bl > span + span,.nav a.cta:hover .bl > span + span{filter:blur(0);opacity:1}
@media (hover:none){
  .btn .bl > span,.nav a.cta .bl > span{transition:none}
  .btn:hover .bl > span,.nav a.cta:hover .bl > span{transform:none}
  .btn:hover .bl > span:first-child{filter:none;opacity:1}
  .btn:hover .bl > span + span{opacity:0}
}

/* --- mobile menu overlay: no classic scrollbar stealing width; CTA aligned */
@media (max-width:760px){
  .nav{scrollbar-width:none;-ms-overflow-style:none}
  .nav::-webkit-scrollbar{display:none}
  .nav a.cta{margin-left:0;margin-right:0;width:100%}
  .m-search{width:100%}
}

/* --- hero highlight: one box on one line, never stacked over the line above */
.hero h1{max-width:none}
.hero h1 em{
  display:inline-block;white-space:nowrap;line-height:1.08;padding:.02em .22em .06em;margin:.04em 0 0;
  border-radius:var(--r-sm);background:var(--surface);box-shadow:var(--shadow-1);
  -webkit-box-decoration-break:slice;box-decoration-break:slice;
}
@media (max-width:760px){
  /* on phones the phrase breaks in two, so each half gets its own plate: two tight
     stickers stacked under the first line, centred, nothing painted over the line above */
  .hero h1{line-height:1.06}
  .hero h1 em{display:block;white-space:normal;padding:0;margin:0;background:none;box-shadow:none;line-height:inherit;border-radius:0}
  .hero h1 em > span{
    display:inline-block;white-space:nowrap;line-height:1.08;padding:.02em .3em .07em;margin:6px 0 0;
    border-radius:14px;background:var(--surface);box-shadow:var(--shadow-1);
  }
}

/* --- one button scale: three heights, set explicitly, label centred by flex */
.btn{min-height:48px;padding:0 24px;font-size:15px;line-height:1.25;box-sizing:border-box}
.btn-sm{min-height:38px;padding:0 16px;font-size:14px}
.btn-lg{min-height:52px;padding:0 32px;font-size:16px}
.btn-ghost{box-shadow:var(--ring-2)}
.nav a.cta{min-height:40px;padding:0 20px;display:inline-flex;align-items:center}
.search-go,.searchbox .search-go{width:48px;height:48px}
.searchbox form{height:64px;padding:8px}
.mbar .btn{min-height:48px;padding:0 16px}
.form-actions .btn{min-height:52px;padding:0 32px;font-size:16px}
.card-btn{min-height:48px}
.filters .seg .chip{min-height:30px}
.chip{min-height:38px;padding:0 16px;display:inline-flex;align-items:center}
.dd-btn{min-height:38px;padding:0 12px 0 16px}
.filters .dd-btn{min-height:38px}
.dd-field .dd-btn{min-height:52px;padding:0 16px}
.field input[type=text],.field input[type=email],.field input[type=url],.field select{min-height:52px;padding:0 16px}
.field textarea{padding:14px 16px}
.stamp-lg{min-height:38px;display:inline-flex;align-items:center}
@media (max-width:760px){
  .search-go,.searchbox .search-go{width:46px;height:46px}
  .searchbox form{height:60px;padding:7px}
  .nav a.cta{min-height:52px}
  .section-head .btn{min-height:44px}
}

/* --- forms sit in the column, not in a box: one left edge with the heading */
.formwrap{background:transparent;box-shadow:none;border-radius:0;padding:28px 0 0;margin-top:28px;border-top:1px solid var(--line)}
.form-title{margin-bottom:6px}
.field .label{font-family:var(--sans);font-size:14px;font-weight:600;letter-spacing:-.01em;color:var(--ink)}
@media (max-width:760px){
  .formwrap{padding:22px 0 0;margin-top:22px;border-radius:0}
}

/* --- dropzone: the file control as a proper component ----------------- */
.dz{
  display:flex;align-items:center;gap:14px;padding:14px 16px;cursor:pointer;min-height:72px;
  border-radius:14px;background:var(--bg);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);
  background-image:repeating-linear-gradient(0deg,transparent,transparent 0);
  transition:background .16s,box-shadow .16s;position:relative;
}
.dz::before{content:"";position:absolute;inset:0;border-radius:14px;border:1.5px dashed rgba(0,0,0,.14);pointer-events:none}
.dz:hover{background:var(--surface)}
.dz:focus-within{background:var(--surface)}
.dz:focus-within::before{border-color:var(--ink);border-style:solid}
.dz input[type=file]{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.dz-ico{
  width:44px;height:44px;border-radius:12px;flex:none;display:grid;place-items:center;
  background:var(--surface);color:var(--ink-2);box-shadow:var(--ring-2);
}
.dz-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.dz-t b{font-size:14.5px;font-weight:600;color:var(--ink)}
.dz-t span{font-size:12.5px;line-height:1.45;color:var(--ink-2)}
.dz-btn{
  flex:none;font-size:13px;font-weight:600;padding:0 14px;min-height:36px;display:inline-flex;align-items:center;
  border-radius:var(--pill);background:var(--surface);color:var(--ink);box-shadow:var(--ring-2);
}
.dz.has-files::before{border-style:solid;border-color:rgba(0,0,0,.14)}
.dz-files{display:flex;flex-direction:column;gap:6px}
.dz-files:empty{display:none}
.dz-file{
  display:flex;align-items:center;gap:10px;padding:10px 10px 10px 14px;border-radius:12px;
  background:var(--surface);box-shadow:var(--ring-2);font-size:13.5px;
}
.dz-file i{width:8px;height:8px;border-radius:50%;background:var(--ok);flex:none}
.dz-name{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink)}
.dz-size{font-family:var(--mono);font-size:11.5px;color:var(--ink-3);flex:none}
.dz-x{
  flex:none;width:30px;height:30px;border-radius:50%;border:0;background:var(--bg-2);color:var(--ink-2);
  cursor:pointer;font-size:11px;display:grid;place-items:center;
}
.dz-x:hover{background:var(--ink);color:var(--bg)}
.filebox{display:none}
@media (max-width:760px){
  .dz{flex-wrap:wrap;padding:14px}
  .dz-btn{display:none}
}

.field label.check{font-weight:400;font-size:14px;color:var(--ink-2)}
.field label.check a{color:var(--ink)}

/* --- suggestions must float above everything below the hero ------------- */
.hero{overflow:visible;z-index:5}
.searchbox{z-index:6}
.ac{z-index:70}

/* --- header icons: one motion language -------------------------------- */
.head-search,.icon-btn{
  transition:background .22s var(--ease),color .22s var(--ease),transform .3s var(--ease),box-shadow .3s var(--ease);
}
.head-search svg,.icon-btn svg{display:block;overflow:visible}
.head-search:active,.icon-btn:active{transform:scale(.92);transition-duration:.08s}

/* search: the glass tilts to look, the handle extends, a glint crosses the lens */
.ico-search{transition:transform .35s var(--ease)}
.ico-search .is-handle,.ico-search .is-glint{transition:transform .35s var(--ease),opacity .25s var(--ease);transform-box:fill-box;transform-origin:center}
.ico-search .is-handle{transform-origin:0 0}
.ico-search .is-glint{opacity:0;stroke-width:1.6;transform:rotate(-40deg)}

/* theme: sun to moon — the disc grows, a cut-out slides in to carve the crescent, the rays fold away */
.ico-theme{transition:transform .5s var(--ease)}
.ico-theme .tt-core{transition:r .5s var(--ease)}
.ico-theme .tt-cut{transition:cx .5s var(--ease),cy .5s var(--ease)}
.ico-theme .tt-rays{transform-box:fill-box;transform-origin:center;transition:transform .5s var(--ease),opacity .3s var(--ease);opacity:1}
:root[data-theme="dark"] .ico-theme .tt-core{r:8}
:root[data-theme="dark"] .ico-theme .tt-cut{cx:17;cy:7}
:root[data-theme="dark"] .ico-theme .tt-rays{transform:rotate(90deg) scale(0);opacity:0}
:root[data-theme="dark"] .ico-theme{transform:rotate(-25deg)}

@media (hover:hover){
  .head-search:hover,.icon-btn:hover{background:var(--ink);color:var(--bg);transform:translateY(-1px);box-shadow:var(--btn-shadow)}
  .head-search:active,.icon-btn:active{transform:translateY(0) scale(.92)}
  .head-search:hover .ico-search{transform:rotate(-14deg) scale(1.08)}
  .head-search:hover .is-handle{transform:scale(1.3)}
  .head-search:hover .is-glint{opacity:1;transform:rotate(0deg);transition-delay:.08s}
  .icon-btn:hover .ico-theme{transform:rotate(25deg)}
  .icon-btn:hover .tt-rays{transform:rotate(30deg) scale(1.1)}
  :root[data-theme="dark"] .icon-btn:hover .ico-theme{transform:rotate(-45deg)}
  :root[data-theme="dark"] .icon-btn:hover .tt-rays{transform:rotate(120deg) scale(0)}
}

/* the theme switch sweeps out from the button; the page itself does not cross-fade */
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
html.theme-switching *:not(.ico-theme):not(.ico-theme *){transition:none!important}

@media (prefers-reduced-motion:reduce){
  .ico-search,.ico-search *,.ico-theme,.ico-theme *{transition:none!important}
  .head-search:hover .ico-search{transform:none}
}

/* --- mobile menu: widths tied to the viewport, not to the scroll box ---- */
@media (max-width:760px){
  .nav.open > .m-search,.nav.open > .m-acc,.nav.open > a.cta{width:calc(100vw - 40px);max-width:none;flex:none;box-sizing:border-box}
  .nav.open{overflow-x:hidden;overscroll-behavior:contain}
}

/* --- record card: one left edge, one weight ------------------------------ */
/* the rank sits 10px inside a media block that is itself inset 10px: its edge lands on the text edge (20px) */
.card-media .rank{left:10px;top:10px;width:28px;height:28px;font-size:14px}
/* rank is a position, not a verdict: ink for every place, the first included */
.card-media .rank.r1{background:var(--dark);color:var(--bg)}
/* rhythm: title and rating belong together; the link sits at the bottom edge of equal-height cards */
.card-in{padding:18px 20px 20px;gap:10px}
.card-rate{margin-top:-3px}
.card-sum{margin-top:2px;-webkit-line-clamp:3}
/* the black pill, left-aligned on the text edge and pinned to the bottom of equal-height cards;
   card size of the scale: 42px, between sm and default */
.card-btn{
  order:9;margin-top:auto;align-self:flex-start;width:auto;
  min-height:42px;padding:0 18px 0 20px;font-size:14.5px;gap:8px;justify-content:center;
}
.card-btn svg{width:16px;height:16px;margin:0;transition:transform .3s var(--ease)}
.card:hover .card-btn svg{transform:translateX(3px)}
.card-in > .card-btn{margin-top:auto}
.card-meta + .card-btn{margin-top:14px}
@media (max-width:760px){
  /* a whole sentence beats a clipped one: three lines hold every summary down to 320px */
  .card-sum{-webkit-line-clamp:3}
  .list-m .card-sum,.list-all .card-sum,.top3 .card:nth-child(n+2) .card-sum{-webkit-line-clamp:4}
  .card-btn{min-height:44px;font-size:15px}
}

/* --- hero foot: clock, pills and record count on one centred line -------- */
.hero-foot{display:flex;align-items:center;gap:18px;width:100%;margin-top:6px}
.hero-foot .hero-corner{position:static;flex:none}
.hero-foot .hero-corner.right{margin-left:auto}
.hero-foot .hero-tags{flex:1;justify-content:center;min-width:0}
@media (max-width:900px){
  .hero-foot .hero-corner{display:none}
  .hero-foot .hero-tags{flex:1 1 100%}
}
@media (max-width:760px){
  .hero-foot{display:none}
}

/* --- the reference pill: white, soft drop shadow, ink text, no drawn ring */
.hero-tags a,.mast-meta{
  box-shadow:0 1px 2px rgba(0,0,0,.05),0 4px 14px -4px rgba(0,0,0,.14);
}
.hero-tags a{
  font-size:13.5px;font-weight:500;color:var(--ink);padding:9px 16px;background:var(--surface);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),color .16s;
}
.hero-tags a:hover{transform:translateY(-1px);box-shadow:0 1px 2px rgba(0,0,0,.05),0 8px 20px -6px rgba(0,0,0,.18)}
.hero-tags span{color:var(--ink-3)}
:root[data-theme="dark"] .hero-tags a,:root[data-theme="dark"] .mast-meta{
  box-shadow:0 0 0 1px rgba(255,255,255,.12),0 6px 18px -6px rgba(0,0,0,.6);
}

/* --- card media: a printed poster, not a washed-out gradient ------------- */
.card-media{
  background:
    radial-gradient(130% 100% at 18% 0%,color-mix(in srgb,var(--cm) 52%,transparent),transparent 62%),
    radial-gradient(100% 85% at 100% 100%,color-mix(in srgb,var(--cm) 34%,transparent),transparent 64%),
    linear-gradient(160deg,color-mix(in srgb,var(--cm) 16%,var(--bg-2)),var(--bg-2) 70%);
}
.card-media::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  background-size:160px 160px;opacity:.4;mix-blend-mode:soft-light;
}
.card-media::after{
  content:attr(data-mark);position:absolute;right:-8px;bottom:-30px;pointer-events:none;
  font-family:var(--display);font-weight:500;font-size:120px;line-height:1;letter-spacing:-.04em;
  color:color-mix(in srgb,var(--cm) 26%,transparent);
}
.card-media .logo-lg{
  box-shadow:0 14px 30px -12px color-mix(in srgb,var(--cm) 75%,transparent),
    0 0 0 1px rgba(255,255,255,.4) inset,0 2px 6px rgba(0,0,0,.12);
}
.card-media .rank{z-index:1}
/* compact rows keep the quiet tile: no poster furniture at 64px */
.list-m .card-media::after,.list-all .card-media::after,.top3 .card:nth-child(n+2) .card-media::after{display:none}
.list-m .card-media::before,.list-all .card-media::before,.top3 .card:nth-child(n+2) .card-media::before{display:none}

/* --- v20: the media as a framed print ------------------------------------ */
/* the mat is one number and the print's corner is derived from it, so the
   inner and outer curves stay concentric at every card size: inner = outer - mat */
.card{
  --mat:10px;
  --media-r:calc(var(--card-r) - var(--mat));
  box-shadow:0 1px 2px rgba(0,0,0,.05),0 4px 14px -4px rgba(0,0,0,.14);
}
.card:hover{box-shadow:0 2px 4px rgba(0,0,0,.06),0 18px 38px -12px rgba(0,0,0,.20)}
/* a dark card on a dark ground still needs an edge, as the pills do */
:root[data-theme="dark"] .card{box-shadow:0 0 0 1px rgba(255,255,255,.08),0 4px 16px -6px rgba(0,0,0,.65)}
:root[data-theme="dark"] .card:hover{box-shadow:0 0 0 1px rgba(255,255,255,.12),0 20px 40px -14px rgba(0,0,0,.85)}

/* the print: an even mat on all four sides and a delimited edge.
   the hairline is a spread ring, not an inset one — the noise ::before covers
   inset:0 at soft-light and would mute an inset hairline */
.card-media{
  margin:var(--mat);
  border-radius:var(--media-r);
  box-shadow:
    0 0 0 1px color-mix(in srgb,var(--ink) 8%,transparent),
    0 1px 2px rgba(0,0,0,.05),
    inset 0 1px 3px color-mix(in srgb,var(--ink) 6%,transparent);
}
.card-media::before{border-radius:inherit}
/* the bottom mat replaces the text block's top padding, so card height is unchanged */
.card-media + .card-in{padding-top:calc(18px - var(--mat))}
@media (max-width:760px){.card-media + .card-in{padding-top:calc(16px - var(--mat))}}

/* the monogram sits inside the frame instead of being cut mid-letter by it */
.card-media::after{right:14px;bottom:-18px;font-size:104px}

/* compact rows: same concentric rule, still a quiet tile — hairline only */
.list-all .card{--card-r:18px}
.list-all .card-media{border-radius:var(--media-r);box-shadow:0 0 0 1px color-mix(in srgb,var(--ink) 8%,transparent)}
.list-all .card-media + .card-in{padding-top:0}
@media (max-width:760px){
  .list-m .card,.top3 .card:nth-child(n+2){--card-r:18px}
  .list-m .card-media,.top3 .card:nth-child(n+2) .card-media{
    border-radius:var(--media-r);box-shadow:0 0 0 1px color-mix(in srgb,var(--ink) 8%,transparent);
  }
  .list-m .card-media + .card-in,.top3 .card:nth-child(n+2) .card-media + .card-in{padding-top:0}
}

/* --- v21: the frame classifies the verdict, the ribbon says it ----------- */
/* one status colour per card, so the tile, the watermark and the ribbon agree */
.card.v-verified{--sc:var(--ok)}
.card.v-caution {--sc:var(--warn)}
.card.v-risk    {--sc:var(--risk)}
.card.v-review  {--sc:var(--pend)}

/* the printed poster is now washed in the verdict's colour, not the brand's;
   the monogram keeps --cm, so the brand stays the one thing that is not the status */
.card-media{
  background:
    radial-gradient(130% 100% at 18% 0%,color-mix(in srgb,var(--sc) 44%,transparent),transparent 62%),
    radial-gradient(100% 85% at 100% 100%,color-mix(in srgb,var(--sc) 28%,transparent),transparent 64%),
    linear-gradient(160deg,color-mix(in srgb,var(--sc) 14%,var(--bg-2)),var(--bg-2) 70%);
}
.card-media::after{color:color-mix(in srgb,var(--sc) 24%,transparent)}

.card-media .ribbon{
  position:absolute;top:15px;left:-40px;width:152px;transform:rotate(-38deg);z-index:2;pointer-events:none;
  background:var(--sc);color:#fff;text-align:center;
  font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  padding:6px 0;box-shadow:0 2px 8px -3px rgba(0,0,0,.5);
}
:root[data-theme="dark"] .card-media .ribbon{color:#0F0F0F}
/* the rank moves to the right: the ribbon now owns the top-left corner */
.card-media .rank{left:auto;right:10px}

/* the pill is no longer drawn — the tile carries the verdict — but it stays
   readable to screen readers, so the status is never colour-only */
.card-tags{position:absolute;width:1px;height:1px;padding:0;margin:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* compact rows: no room for a ribbon on a 64-72px tile, so the pill comes back */
.list-all .card-media .ribbon{display:none}
.list-all .card-tags{position:static;width:auto;height:auto;overflow:visible;clip-path:none;white-space:normal;margin:0}
@media (max-width:760px){
  .list-m .card-media .ribbon,.top3 .card:nth-child(n+2) .card-media .ribbon{display:none}
  .list-m .card-tags,.top3 .card:nth-child(n+2) .card-tags{
    position:static;width:auto;height:auto;overflow:visible;clip-path:none;white-space:normal;margin:0;
  }
}

/* --- v22: black eyebrow, an even hero line, the verdict as a ticket ------- */

/* the eyebrow is a statement, not a control: it takes the ink plate, so the
   white-with-a-shadow language stays reserved for things you can click.
   --dark inverts with the theme, so the plate keeps its contrast on both grounds. */
.eyebrow{
  background:var(--dark);color:var(--bg);
  box-shadow:0 1px 2px rgba(0,0,0,.10),0 6px 18px -8px rgba(0,0,0,.34);
}
:root[data-theme="dark"] .eyebrow{box-shadow:0 1px 2px rgba(0,0,0,.5),0 6px 18px -8px rgba(0,0,0,.8)}
.band-dark .eyebrow,.cta-band .eyebrow{background:transparent;box-shadow:none;color:var(--accent)}

/* the line was centring the label together with the pills, which pushed the pills
   72px right of centre while the two end labels differ in width. Nothing claims to
   be centred now: three groups, equal gaps. */
/* v19 pushed the right corner with margin-left:auto, which swallows the free space
   before any distribution can share it out — the gaps came out 24px and 177px */
.hero-foot .hero-corner.right{margin-left:0}
/* Three columns with equal cheeks, so the middle sits on the page's centre line no
   matter how the two end labels differ in width. The caption is lifted out of flow
   and hung to the left of the pills — inside the flow it displaced them by half its
   own width, which is what made the row read as crooked. */
@media (min-width:901px){
  .hero-foot{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;justify-content:initial}
  .hero-foot .hero-corner.left{justify-self:start}
  .hero-foot .hero-corner.right{justify-self:end}
  .hero-foot .hero-tags{position:relative;flex:none;justify-content:center;min-width:0}
  .hero-foot .hero-tags > span:first-child{position:absolute;right:100%;margin-right:16px;white-space:nowrap}
}

/* the ticket: colour bar, word, perforation, tear-off stub */
.stamp{
  --notch:var(--bg);
  position:relative;display:inline-flex;align-items:stretch;gap:0;
  padding:0;border:0;border-radius:2px;overflow:visible;
  background:var(--surface);color:var(--ink);box-shadow:0 0 0 1px var(--line);
  font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.12em;
  text-transform:uppercase;line-height:1.4;
}
:root[data-theme="dark"] .stamp{color:var(--ink)}
.s-verified{--sc-c:var(--ok)}
.s-caution {--sc-c:var(--warn)}
.s-risk    {--sc-c:var(--risk)}
.s-review  {--sc-c:var(--pend)}
.stamp i{width:6px;height:auto;flex:none;border-radius:0;background:var(--sc-c);font-size:0}
.stamp i::before{content:""}
.stamp .t{display:flex;align-items:center;padding:9px 11px}
.stamp b{
  display:flex;align-items:center;margin:0;padding:0 11px;font-weight:500;
  color:var(--ink-3);border-left:1px dashed var(--line);
}
.stamp::before,.stamp::after{
  content:"";position:absolute;left:50%;transform:translateX(-50%);
  width:9px;height:9px;border-radius:50%;background:var(--notch);box-shadow:0 0 0 1px var(--line);
}
.stamp::before{top:-5px}
.stamp::after{bottom:-5px}
/* the notch has to be punched in whatever sits behind the ticket */
.card .stamp,.mast-meta .stamp,.ac .stamp,.panel .stamp{--notch:var(--surface)}

/* hero filters: a lift, and a focus ring that hover can no longer erase */
.statusbar{gap:10px}
.statusbar .stamp:hover{transform:translateY(-2px);box-shadow:0 0 0 1px var(--line),0 8px 18px -8px rgba(0,0,0,.28)}
.stamp:focus-visible,.statusbar .stamp:focus-visible{
  outline:none;box-shadow:0 0 0 1px var(--line),0 0 0 2px var(--bg),0 0 0 4px var(--ink);
}
/* on phones the four filters were four different widths wrapping into a ragged
   block; a two-column grid sizes them all to the longest and lines the stubs up */
@media (max-width:760px){
  .statusbar{display:grid;grid-template-columns:1fr 1fr;gap:8px;justify-content:initial}
  .statusbar .stamp{width:100%;min-height:44px;font-size:10.5px;padding:0}
  .statusbar .stamp .t{flex:1;white-space:nowrap}
}
@media (max-width:390px){
  .statusbar .stamp{font-size:10px}
  .statusbar .stamp .t{padding:9px 8px;letter-spacing:.08em}
  .statusbar .stamp b{padding:0 9px}
}

/* A 64px tile cannot hold "Under Review" on a diagonal, so the ribbon keeps its
   geometry and drops its text: a folded corner in the verdict's colour, in the
   corner opposite the rank badge. Same device as the full card, read as shape. */
.list-all .card-media::after{
  display:block;content:"";left:auto;top:auto;right:0;bottom:0;
  width:20px;height:20px;font-size:0;line-height:0;
  background:linear-gradient(135deg,transparent 0 50%,var(--sc) 50% 100%);
}
@media (max-width:760px){
  .list-m .card-media::after,.top3 .card:nth-child(n+2) .card-media::after{
    display:block;content:"";left:auto;top:auto;right:0;bottom:0;
    width:20px;height:20px;font-size:0;line-height:0;
    background:linear-gradient(135deg,transparent 0 50%,var(--sc) 50% 100%);
  }
}

/* the record masthead gets the large ticket */
.stamp-lg{font-size:11.5px}
.stamp-lg i{width:7px}
.stamp-lg .t{padding:12px 14px}
.stamp-lg b{padding:0 14px}

/* the card shows the ticket again — the ribbon states the verdict on the poster,
   the ticket repeats it in the body where the eye lands after the title */
.card-tags{position:static;width:auto;height:auto;overflow:visible;clip-path:none;white-space:normal;margin-top:2px}

/* compact rows: a smaller ticket, and no perforation at 26px.
   .list-all is a row at every width, so it is scoped globally — but .list-m and
   .top3 n+2 are full cards until 760px and must keep the full ticket until then. */
.list-all .stamp{font-size:9.5px;padding:0}
.list-all .stamp .t{padding:6px 9px}
.list-all .stamp b{padding:0 9px}
.list-all .stamp::before,.list-all .stamp::after{display:none}
@media (max-width:760px){
  .list-m .stamp,.top3 .card:nth-child(n+2) .stamp{font-size:9.5px;padding:0}
  .list-m .stamp .t,.top3 .card:nth-child(n+2) .stamp .t{padding:6px 9px}
  .list-m .stamp b,.top3 .card:nth-child(n+2) .stamp b{padding:0 9px}
  .list-m .stamp::before,.list-m .stamp::after,
  .top3 .card:nth-child(n+2) .stamp::before,.top3 .card:nth-child(n+2) .stamp::after{display:none}
}