:root{
  --white:#FFFFFF; --ink:#0E0E10; --teal:#2D7B6B; --dust:#E5E5E5; --slate:#4A4A4F; --fog:#8C8C93; --teal-l:#F3F8F6; --dust-l:#FFFFFF; --err:#C0392B;
  --bg:#FFFFFF; --surface:#FFFFFF; --text:var(--ink); --text-2:var(--slate); --text-3:var(--fog); --line:var(--dust); --tint:#FFFFFF; --elev:var(--teal-l); --accent:var(--teal); --on-accent:#FFFFFF;
  --serif:"Figtree","Helvetica Neue",Arial,sans-serif; --sans:"Figtree","Helvetica Neue",Arial,sans-serif; --ar:"IBM Plex Sans Arabic",Tahoma,sans-serif;
  --s1:8px;--s2:16px;--s3:24px;--s4:32px;--s6:48px;--s8:64px;--s12:96px;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--bg:#0E0E10;--surface:#161618;--text:#F2F1EE;--text-2:#C4C4C9;--text-3:#8C8C93;--line:#2A2A2E;--tint:#171719;--elev:#16302B;--accent:#5FB3A1;--on-accent:#0F1A18}}
:root[data-theme="dark"]{--bg:#0E0E10;--surface:#161618;--text:#F2F1EE;--text-2:#C4C4C9;--text-3:#8C8C93;--line:#2A2A2E;--tint:#171719;--elev:#16302B;--accent:#5FB3A1;--on-accent:#0F1A18}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased}
body[dir="rtl"]{font-family:var(--ar)}
h1,h2,h3,.serif{font-family:var(--serif);font-weight:600;margin:0;line-height:1.2;letter-spacing:-.01em;text-wrap:balance}
body[dir="rtl"] h1,body[dir="rtl"] h2,body[dir="rtl"] h3{font-family:var(--ar);letter-spacing:0}
h1{font-size:clamp(2.3rem,5vw,3.9rem);letter-spacing:-.035em;max-width:20ch;line-height:1.04}
h2{font-size:clamp(1.6rem,2.8vw,2.6rem);letter-spacing:-.03em;max-width:26ch;line-height:1.08}
h3{font-size:1.35rem;letter-spacing:-.02em}
p{margin:0}
a{color:inherit}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none;padding:0}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.wrap{max-width:1200px;margin:0 auto;padding-inline:24px}
.label{font-size:.75rem;text-transform:uppercase;letter-spacing:.1em;color:var(--text-3);font-weight:600}
.num{font-variant-numeric:tabular-nums}
.lede{font-size:1.25rem;color:var(--text-2);max-width:60ch;line-height:1.55}
.body-lg{font-size:1.06rem;color:var(--text-2);max-width:68ch}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:46px;padding:0 var(--s3);border-radius:999px;font-weight:600;font-size:.95rem;border:1.5px solid var(--text);color:var(--text);transition:background .2s ease-in-out,color .2s ease-in-out}
.btn.primary{background:var(--text);border-color:var(--text);color:var(--bg)}
.btn.primary:hover{filter:brightness(.95)}
.btn.quiet{border-color:transparent;text-decoration:underline;text-underline-offset:4px;padding-inline:var(--s1)}
.btn.sm{min-height:36px;font-size:.85rem;padding-inline:var(--s2)}
.chip{display:inline-flex;align-items:center;gap:.3rem;padding:4px 10px;border-radius:999px;font-size:.74rem;font-weight:600;letter-spacing:.01em;background:#FFFFFF;border:1px solid var(--line);color:var(--text-2);white-space:nowrap}
.chip.selected{background:var(--text);border-color:var(--text);color:var(--bg)}
.chip.halal,.chip.tested{background:#FFFFFF;border-color:var(--accent);color:var(--accent)}
.chip.off{background:transparent;border:1px solid var(--line);color:var(--text-3)}
.markers{display:flex;flex-wrap:wrap;gap:6px}

/* header */
header.top{position:sticky;top:0;z-index:30;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.topbar{display:flex;align-items:center;gap:var(--s4);height:72px}
.wordmark{display:flex;align-items:baseline;gap:12px;font-family:var(--serif);font-size:1.4rem;letter-spacing:-.04em;font-weight:700;text-decoration:none}
.wordmark .rule{width:1px;height:18px;background:var(--dust);align-self:center}
.wordmark .ar{font-family:var(--ar);font-size:1.25rem;font-weight:500}
nav.surfaces{display:flex;gap:var(--s1)}
nav.surfaces button{padding:8px 12px;border-radius:4px;font-weight:600;font-size:.95rem;color:var(--text-2)}
nav.surfaces button.on{color:var(--text);box-shadow:inset 0 -2px 0 var(--accent);border-radius:0}
.top-right{margin-inline-start:auto;display:flex;align-items:center;gap:var(--s1)}
.top-right button{padding:8px 12px;border-radius:4px;font-weight:600;font-size:.9rem;position:relative;min-height:44px}
.top-right button:hover{background:var(--tint)}
.count{display:inline-grid;place-items:center;min-width:20px;height:20px;border-radius:10px;background:var(--accent);color:var(--on-accent);font-size:.7rem;font-weight:700;padding-inline:5px;margin-inline-start:4px}
@media (max-width:820px){.topbar{gap:var(--s1);height:auto;min-height:60px;flex-wrap:wrap}.wordmark{font-size:1.15rem;gap:8px}.wordmark .ar{font-size:1rem}.wordmark .rule{height:15px}.top-right{margin-inline-start:auto}.mktBtn,#acctBtn{padding:6px 9px!important;font-size:.8rem!important}.topbar nav.surfaces{order:3;width:100%;margin-inline:-24px;padding-inline:24px}.top-right{gap:2px}.top-right button{padding:6px 8px;font-size:.82rem}#langBtn{display:none}nav.surfaces{display:flex;overflow-x:auto;gap:4px;padding:6px 16px 10px;border-top:1px solid var(--line);scrollbar-width:none;-webkit-overflow-scrolling:touch}nav.surfaces::-webkit-scrollbar{display:none}nav.surfaces button{white-space:nowrap;flex:none;font-size:.88rem}nav.surfaces .navsep{display:none}}
/* Phone header. At 390px the wordmark (119px) plus the three controls (233px)
   plus 48px of gutter came to 400px, so the controls wrapped onto a second row
   and the surface nav clipped "Advisor" mid-word. Tighten the gutter and the
   controls so row one fits, and fade the nav's right edge so what is off-screen
   reads as more to scroll rather than as broken type. */
@media (max-width:520px){
  .topbar{padding-inline:16px;gap:6px}
  .wordmark{font-size:1.05rem;gap:6px}
  .wordmark .ar{font-size:.95rem}
  .top-right{gap:0}
  .top-right button{padding:5px 7px!important;font-size:.78rem!important}
  .top-right .count{margin-inline-start:4px}
  .topbar nav.surfaces{margin-inline:-16px;padding-inline:16px;
    -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent);
    mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent)}
  nav.surfaces button{padding:7px 10px;font-size:.86rem}
}

/* views */
.view{display:none}.view.on{display:block}
section{padding-block:var(--s8)}
@media (max-width:700px){section{padding-block:var(--s6)}}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s3);margin-bottom:var(--s4);flex-wrap:wrap}
.sec-head p{color:var(--text-2);max-width:56ch}

/* opening */
.open{padding-block:var(--s12) var(--s8);display:grid;grid-template-columns:1.1fr .9fr;gap:var(--s8);align-items:start}
.ask{margin-top:var(--s4);display:flex;flex-direction:column;gap:var(--s2);max-width:640px}
.ask textarea{width:100%;font:inherit;font-size:1.05rem;line-height:1.5;padding:var(--s2) var(--s3);border-radius:4px;border:1px solid var(--line);background:var(--surface);color:var(--text);resize:vertical;min-height:88px}
.ask .row{display:flex;gap:var(--s2);align-items:center;flex-wrap:wrap}
.ask .hint{font-size:.85rem;color:var(--text-3)}
.entries{display:flex;flex-direction:column;gap:var(--s2);margin-top:var(--s2)}
.entry{display:grid;grid-template-columns:1fr auto;gap:var(--s2);align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:0;padding:var(--s3);text-align:start;transition:border-color .2s ease-in-out}
.entry:hover{border-color:var(--text)}
.entry b{font-family:var(--serif);font-size:1.12rem;font-weight:600;letter-spacing:-.02em;display:block}
.entry span{color:var(--text-2);font-size:.92rem}
.entry .arrow{font-size:1.4rem;color:var(--accent)}
@media (max-width:900px){.open{grid-template-columns:1fr;padding-block:var(--s6)}}

/* trust system */
.trust-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.trust-grid div{background:var(--surface);padding:var(--s3);display:flex;flex-direction:column;gap:var(--s1)}
.trust-grid p{font-size:.88rem;color:var(--text-2)}
@media (max-width:900px){.trust-grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.trust-grid{grid-template-columns:1fr}}

/* product cards */
.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s2)}
@media (max-width:1000px){.grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:700px){.grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s2)}}
@media (max-width:480px){.grid{grid-template-columns:minmax(0,1fr)}.card .foot{flex-wrap:wrap}.card .foot span{display:block}}
.card{background:var(--surface);border:1px solid var(--line);border-radius:0;display:flex;flex-direction:column;text-align:start;transition:border-color .2s ease-in-out}
.card:hover{border-color:var(--text)}
.card .art{aspect-ratio:1;background:#FFFFFF;display:grid;place-items:center;overflow:hidden;border-bottom:1px solid var(--line)}
.art svg.pack{width:72%;height:72%}
.card .body{padding:var(--s3);display:flex;flex-direction:column;gap:var(--s1);flex:1}
.card .brand{font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);font-weight:600}
.card .name{font-family:var(--serif);font-size:1.08rem;font-weight:600;letter-spacing:-.02em;line-height:1.25}
.card .why{font-size:.88rem;color:var(--text-2);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.card .foot{margin-top:auto;padding-top:var(--s2);display:flex;justify-content:space-between;align-items:center;gap:var(--s1);font-size:.9rem}
.card .foot b{font-weight:600}
.card .foot span{color:var(--text-3);font-size:.8rem}
.card .actions{display:flex;gap:var(--s1)}
.icon-btn{width:36px;height:36px;border-radius:4px;border:1px solid var(--line);display:grid;place-items:center;font-size:1rem}
.icon-btn.on{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.icon-btn:hover{border-color:var(--text)}

/* discover */
.discover{display:grid;grid-template-columns:240px minmax(0,1fr);gap:var(--s6);padding-block:var(--s6)}
.filters{position:sticky;top:96px;align-self:start;display:flex;flex-direction:column;gap:var(--s3)}
.filters .grp{display:flex;flex-direction:column;gap:var(--s1)}
.filtToggle{display:none}
.filters label{display:flex;gap:var(--s1);align-items:center;font-size:.92rem;cursor:pointer;min-height:28px}
.filters input[type=checkbox],.filters input[type=radio]{accent-color:var(--accent);width:16px;height:16px}
.filters select,.sort select{font:inherit;padding:8px 10px;border-radius:4px;border:1px solid var(--line);background:var(--surface);color:var(--text);width:100%}
.disc-head{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--s3);margin-bottom:var(--s3);flex-wrap:wrap}
.disc-head .cnt{color:var(--text-3);font-size:.9rem}
/* The heading is a heading. A full sentence set at h2 size ran to four lines
   and pushed the products off the screen, so the sentence moved to its own
   line underneath at body size, where it belongs. */
.disc-headl{max-width:56ch}
.disc-line{margin-top:10px;color:var(--text-2);font-size:.95rem;line-height:1.6;max-width:56ch}
.sec-line{margin-top:10px;color:var(--text-2);font-size:.95rem;line-height:1.6;max-width:62ch}
.protonote{margin-top:var(--s3);padding:12px 14px;border:1px solid var(--line);border-inline-start:3px solid var(--accent);border-radius:8px;background:var(--elev);color:var(--text-2);font-size:.9rem;line-height:1.6;max-width:70ch}
.compare-bar{position:sticky;bottom:var(--s2);z-index:10;margin-top:var(--s3);background:var(--ink);color:#F4F2EC;border-radius:4px;padding:var(--s2) var(--s3);display:flex;align-items:center;justify-content:space-between;gap:var(--s2);flex-wrap:wrap}
.compare-bar .btn{border-color:rgba(244,242,236,.5);color:#F4F2EC}
@media (max-width:820px){.discover{grid-template-columns:minmax(0,1fr);gap:var(--s3)}.filters{position:static;flex-direction:row;flex-wrap:wrap;align-items:flex-start;gap:var(--s2)}.filtToggle{display:inline-flex;flex:0 0 auto}.filters .grp{display:none;flex:1 1 150px}.filters.open2{width:100%}.filters.open2 .grp{display:flex}.filters .grp .label{font-size:.68rem}}

/* comparison */
.compare{display:grid;grid-template-columns:200px 1fr 1fr;border:1px solid var(--line);background:var(--surface);border-radius:4px;overflow:hidden;margin-top:var(--s3)}
.compare>div{padding:var(--s3);border-bottom:1px solid var(--line);border-inline-end:1px solid var(--line);font-size:.92rem}
.compare>div:nth-child(3n){border-inline-end:0}
.compare .rowh{color:var(--text-3);font-weight:600;font-size:.8rem;text-transform:uppercase;letter-spacing:.06em;background:#FFFFFF}
.compare .head .art{aspect-ratio:1;background:#FFFFFF;border:1px solid var(--line);border-radius:0;display:grid;place-items:center;margin-bottom:var(--s2)}
.compare .verdict{grid-column:1/-1;border:0;border-top:1px solid var(--text);background:#FFFFFF;font-family:var(--serif);font-size:1.2rem;font-weight:600;letter-spacing:-.02em;line-height:1.4}
@media (max-width:700px){.compare{grid-template-columns:1fr 1fr}.compare .rowh{grid-column:1/-1;border-inline-end:0}}

/* product */
.pdp{display:grid;grid-template-columns:1fr 1fr;gap:var(--s8);padding-block:var(--s6)}
.gallery{position:relative}
.fav{position:absolute;top:16px;inset-inline-end:16px;z-index:3;width:44px;height:44px;border-radius:50%;
  background:color-mix(in srgb,var(--surface) 92%,transparent);backdrop-filter:blur(6px);border:1px solid var(--line);
  display:grid;place-items:center;box-shadow:var(--shadow);transition:transform .15s ease-in-out,background .15s}
.fav svg{width:21px;height:21px;fill:none;stroke:var(--text-2);stroke-width:1.7;stroke-linejoin:round;transition:fill .15s,stroke .15s}
.fav:hover{transform:scale(1.07)}
.card{position:relative}
.card>.fav{top:10px;inset-inline-end:10px;width:36px;height:36px}
.card>.fav svg{width:18px;height:18px}
.fav:hover svg{stroke:var(--accent)}
.fav.on svg{fill:var(--accent);stroke:var(--accent)}
.gallery .slide{display:none}.gallery .slide.on{display:block}
.gallery .art{aspect-ratio:1;background:#FFFFFF;border:1px solid var(--line);display:grid;place-items:center;border-radius:0}
.gallery .art svg.pack{width:62%;height:62%}
.gallery .card-slide{aspect-ratio:1;border-radius:0;border:1px solid var(--line);padding:var(--s4);display:flex;flex-direction:column;justify-content:center;gap:var(--s2);background:#FFFFFF}
.gallery .card-slide ul{margin:0;padding-inline-start:1.1rem;font-family:var(--serif);font-size:1.25rem;font-weight:500;letter-spacing:-.02em;line-height:1.35;display:flex;flex-direction:column;gap:var(--s1)}
.dots{display:flex;gap:6px;margin-top:var(--s2)}
.dots button{width:32px;height:3px;background:var(--line)}
.dots button.on{background:var(--text)}
.pdp .brand{font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);font-weight:600}
.pdp h1{font-size:clamp(1.9rem,3.5vw,2.8rem);margin-top:var(--s1)}
.curation{margin-top:var(--s3);font-family:var(--serif);font-style:normal;font-size:1.25rem;font-weight:500;letter-spacing:-.015em;line-height:1.4;color:var(--text);border-inline-start:2px solid var(--accent);padding-inline-start:var(--s3)}
.curation small{display:block;font-family:var(--sans);font-style:normal;font-size:.8rem;color:var(--text-3);margin-top:var(--s1)}
.story{margin-top:var(--s3);color:var(--text-2);max-width:62ch;font-size:1.02rem}
.kv{margin-top:var(--s4);display:grid;grid-template-columns:1fr;gap:0;border-top:1px solid var(--line)}
.kv div{display:grid;grid-template-columns:140px 1fr;gap:var(--s2);padding:var(--s2) 0;border-bottom:1px solid var(--line);font-size:.92rem}
.kv span{color:var(--text-3)}
.offers{margin-top:var(--s4);border:1px solid var(--line);border-radius:4px;overflow:hidden;background:var(--surface)}
.offers .oh{padding:var(--s2) var(--s3);background:#FFFFFF;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;font-size:.85rem;color:var(--text-2)}
.offer{display:grid;grid-template-columns:1fr auto auto;gap:var(--s2);align-items:center;padding:var(--s2) var(--s3);border-top:1px solid var(--line)}
.offer b{font-weight:600}.offer small{display:block;color:var(--text-3);font-size:.8rem}
.offer .price{font-weight:600;font-size:1.05rem}
.offer .price.nop{font-weight:500;font-size:.82rem;color:var(--text-3)}
.offer.out{opacity:.5}
.escal{margin-top:var(--s3);background:#FFFFFF;border:1px solid var(--accent);border-radius:0;padding:var(--s3);font-size:.95rem}
.escal b{display:block;font-family:var(--serif);font-size:1.15rem;font-weight:500;margin-bottom:6px}
.pdp-actions{display:flex;gap:var(--s2);margin-top:var(--s3);flex-wrap:wrap}
.followup{margin-top:var(--s2);font-size:.85rem;color:var(--text-3)}
.back{color:var(--text-3);font-size:.9rem;padding:var(--s2) 0;display:inline-flex;gap:6px;min-height:44px;align-items:center}
@media (max-width:820px){.pdp{grid-template-columns:1fr;gap:var(--s4)}}

/* chat */
.chat{display:grid;grid-template-columns:minmax(0,680px) 1fr;gap:var(--s8);padding-block:var(--s6)}
.thread{display:flex;flex-direction:column;gap:var(--s3)}
.thread:not(:empty){min-height:140px;margin-top:var(--s2)}
.msg{max-width:60ch;font-size:1.02rem;line-height:1.6}
.msg.you{align-self:flex-end;background:#FFFFFF;border:1px solid var(--line);padding:var(--s2) var(--s3);border-radius:4px}
.msg.bayn{align-self:flex-start}
.msg.bayn .who{font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3);font-weight:600;margin-bottom:4px}
.msg.bayn .text{white-space:pre-wrap}
.msg .reason{font-size:.8rem;color:var(--text-3);margin-top:var(--s1)}
.msg .escalation{background:#FFFFFF;border:1px solid var(--accent);border-radius:4px;padding:var(--s2) var(--s3);margin-top:var(--s2);font-size:.92rem}
.msg .recs{display:flex;flex-direction:column;gap:var(--s1);margin-top:var(--s2)}
.rec{display:grid;grid-template-columns:56px 1fr auto;gap:var(--s2);align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:4px;padding:var(--s1) var(--s2)}
.rec .art{width:56px;height:56px;background:#FFFFFF;border:1px solid var(--line);border-radius:4px;display:grid;place-items:center}
.rec .art svg.pack{width:85%;height:85%}
.rec b{font-weight:600;display:block;font-size:.92rem}.rec small{color:var(--text-3)}
.composer{margin-top:var(--s4);display:flex;flex-direction:column;gap:var(--s1);position:sticky;bottom:0;background:var(--bg);padding-block:var(--s2)}
/* The box is the front door, so it is sized like one: not sticky, not tucked
   under a transcript, and big enough that nobody has to wonder where to type. */
.composer.lead{margin-top:0;position:static;gap:var(--s2)}
.composer.lead textarea{min-height:96px;font-size:1.05rem;padding:var(--s3);border-radius:14px;border-width:1.5px}
.composer.lead textarea:focus{outline:none;border-color:var(--accent)}
/* Starter prompts. A blank box on a niche product is a blank page — these are
   the four things people actually arrive wanting, and each routes into logic
   that already exists rather than into the model. */
.advstart{display:flex;flex-direction:column;gap:10px;padding-block:var(--s3) var(--s2)}
.advstartl{font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3)}
.advchips{display:flex;flex-wrap:wrap;gap:8px}
.advchip{border:1px solid var(--line);border-radius:999px;padding:9px 15px;background:var(--surface);font-size:.9rem;color:var(--text);text-align:start;transition:border-color .15s,background .15s;display:inline-flex;align-items:center;gap:8px;min-height:38px}
.advchip:hover{border-color:var(--accent);background:var(--elev)}
.advchip .ci{font-size:.95em;opacity:.65}
.composer textarea{width:100%;font:inherit;font-size:1rem;padding:var(--s2);border-radius:4px;border:1px solid var(--line);background:var(--surface);color:var(--text);resize:none;min-height:56px}
.composer .row{display:flex;gap:var(--s2);align-items:center;justify-content:space-between;flex-wrap:wrap}
.composer .status{font-size:.82rem;color:var(--text-3)}
/* A scripted answer has to look like one. If it is indistinguishable from the
   real Advisor, we have done the exact thing the rubric exists to stop. */
.msg.bayn.scripted{border-inline-start:3px solid var(--fog);padding-inline-start:12px}
.egchip{margin-inline-start:8px;font-size:.68rem;font-weight:600;letter-spacing:.04em;text-transform:none;color:var(--text-3);border:1px solid var(--line);border-radius:999px;padding:2px 8px;white-space:nowrap}
.chat-side{position:sticky;top:96px;align-self:start;display:flex;flex-direction:column;gap:var(--s3);font-size:.92rem;color:var(--text-2)}
.chat-side .box{background:var(--surface);border:1px solid var(--line);border-radius:4px;padding:var(--s3)}
.chat-side b{display:block;color:var(--text);margin-bottom:6px}
@media (max-width:900px){.chat{grid-template-columns:1fr}.chat-side{position:static}}

/* protocol */
.proto-types{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s2);margin-top:var(--s4);align-items:stretch}
.proto-types button{background:var(--surface);border:1px solid var(--line);border-radius:4px;padding:var(--s3);text-align:start;transition:border-color .2s ease-in-out;display:flex;flex-direction:column;gap:6px;justify-content:flex-start}
.proto-types button.on,.proto-types button:hover{border-color:var(--text)}
.proto-types b{font-family:var(--serif);font-size:1.25rem;font-weight:500;display:block}
.proto-types span{font-size:.85rem;color:var(--text-2)}
.protocol{margin-top:var(--s6);display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:var(--s6)}
/* Grid columns default to min-content, so a wide child (the week-by-week table)
   pushed the whole protocol past the viewport on a phone. minmax(0,…) lets the
   column shrink; the table gets its own scroller instead of dragging the page. */
.protocol>*{min-width:0}
.ptable{overflow-x:auto}
.ptable{border:1px solid var(--line);border-radius:4px;overflow-x:auto;background:var(--surface);margin-top:var(--s3)}
.prow{display:grid;grid-template-columns:110px 1fr 1fr;gap:var(--s2);padding:var(--s2) var(--s3);border-top:1px solid var(--line);font-size:.92rem}
.prow:first-child{border-top:0;background:#FFFFFF;color:var(--text-3);font-weight:600;font-size:.78rem;text-transform:uppercase;letter-spacing:.06em}
.prow b{font-weight:600}
.pside{display:flex;flex-direction:column;gap:var(--s3)}
.pside .box{background:var(--surface);border:1px solid var(--line);border-radius:4px;padding:var(--s3)}
.pside .box.elev{background:#FFFFFF;border-color:var(--text)}
.pside .box b.h{font-family:var(--serif);font-size:1.15rem;font-weight:500;display:block;margin-bottom:var(--s1)}
.pside ul{margin:0;padding-inline-start:1.1rem;color:var(--text-2);font-size:.92rem;display:flex;flex-direction:column;gap:6px}
.onb{display:flex;flex-direction:column;gap:var(--s2)}
.onb label{display:flex;flex-direction:column;gap:4px;font-size:.88rem;color:var(--text-2)}
.onb input,.onb select{font:inherit;padding:8px 10px;border-radius:4px;border:1px solid var(--line);background:var(--surface);color:var(--text)}
@media (max-width:900px){.proto-types{grid-template-columns:1fr 1fr}.protocol{grid-template-columns:1fr}.prow{grid-template-columns:1fr}}

/* letter */
.letters{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3)}
.letter{background:var(--surface);border:1px solid var(--line);border-radius:4px;padding:var(--s3);display:flex;flex-direction:column;gap:var(--s1);min-height:220px;text-align:start}
.letter h3{font-size:1.3rem;font-weight:500}
.letter p{color:var(--text-2);font-size:.92rem}
.letter .k{color:var(--accent)}
.letter .read{margin-top:auto;font-size:.85rem;font-weight:600}
@media (max-width:800px){.letters{grid-template-columns:1fr}}

/* founding + premium */
.founding{display:grid;grid-template-columns:1fr 1fr;gap:var(--s8);align-items:start}
.founding blockquote{margin:0;font-family:var(--serif);font-size:clamp(1.5rem,2.6vw,2.1rem);line-height:1.15;font-weight:600;letter-spacing:-.03em;color:var(--text)}
.founding .ar-text{font-family:var(--ar);direction:rtl;text-align:right;font-size:1.25rem;line-height:1.9;color:var(--text-2)}
.premium{background:var(--surface);border:1px solid var(--line);border-radius:4px;overflow:hidden}
.premium .row{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:var(--s2);padding:var(--s2) var(--s3);border-top:1px solid var(--line);font-size:.92rem;align-items:center}
.premium .row:first-child{border-top:0;background:#FFFFFF;font-weight:600;font-size:.8rem;text-transform:uppercase;letter-spacing:.06em;color:var(--text-3)}
.premium .row span:not(:first-child){color:var(--text-2)}
.premium .row .yes{color:var(--accent);font-weight:600}
@media (max-width:800px){.founding{grid-template-columns:1fr}.premium .row{grid-template-columns:1.4fr 1fr 1fr;font-size:.82rem}}

/* profile */
.profhead{display:flex;gap:var(--s3);align-items:center;flex-wrap:wrap}
.avatar{width:64px;height:64px;border-radius:50%;background:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent) 55%,#000));color:#fff;display:grid;place-items:center;font-weight:700;font-size:1.3rem;letter-spacing:-.02em;flex:none}
.checklist{display:flex;gap:10px;flex-wrap:wrap;margin-top:var(--s3)}
.checkitem{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:999px;padding:8px 14px 8px 10px;font-size:.85rem;font-weight:600;background:var(--surface)}
.checkitem .dot{width:18px;height:18px;border-radius:50%;border:2px solid var(--line);flex:none;display:grid;place-items:center;font-size:.7rem}
.checkitem.done .dot{background:var(--accent);border-color:var(--accent);color:#fff}
.checkitem.done{color:var(--text-3);text-decoration:line-through;text-decoration-color:var(--line)}
.profgrid{display:grid;grid-template-columns:1.1fr .9fr;gap:var(--s3);margin-top:var(--s4)}
.profgrid .band{padding:var(--s4)}
.prec{display:grid;grid-template-columns:56px 1fr auto;gap:12px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:10px 12px;margin-top:10px}
.prec .art{width:56px;height:56px;border-radius:10px;background:var(--mint);display:grid;place-items:center}
.prec .art svg.pack{width:80%;height:80%}
.prec b{display:block;font-size:.93rem}
.prec small{display:block;font-size:.8rem;color:var(--text-2);line-height:1.4}
.prec .sc{font-weight:700;color:var(--accent);font-variant-numeric:tabular-nums}
.pnum{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--line);font-size:.92rem}
.pnum span{color:var(--text-3)}
.profmeta{margin-top:var(--s4);display:flex;gap:var(--s3);flex-wrap:wrap;align-items:center;color:var(--text-3);font-size:.88rem}
@media (max-width:860px){.profgrid{grid-template-columns:1fr}}
/* six checks */
.checks{display:flex;flex-direction:column;gap:14px;margin-top:14px}
.chk .chq{display:flex;justify-content:space-between;align-items:baseline;font-weight:600;font-size:.95rem}
.chk .chq b{color:var(--accent);font-size:1.05rem}
/* Orange marks the bar that pulled the score down, and the score it pulled. */
.chk.lo .chq b{color:var(--gold)}
.chk.lo .fl{background:var(--gold)}
.chk.lo .tr{background:color-mix(in srgb,var(--gold) 18%,transparent)}
.scorebox .big.held b{color:var(--gold)}
.chk .tr{height:5px;border-radius:99px;background:color-mix(in srgb,var(--accent) 18%,transparent);overflow:hidden;margin-top:6px}
.chk .fl{height:100%;background:var(--accent);border-radius:99px}
.chk{border-bottom:1px solid var(--line);padding-bottom:12px}
.chk:last-of-type{border-bottom:0;padding-bottom:0}
.chk>summary{list-style:none;cursor:pointer;display:block}
.chk>summary::-webkit-details-marker{display:none}
.chk>summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
.chqr{display:inline-flex;align-items:center;gap:8px}
.chev{width:15px;height:15px;fill:none;stroke:var(--text-3);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .18s ease}
.chk[open] .chev{transform:rotate(180deg)}
.chk>summary:hover .chev{stroke:var(--accent)}
.chbody{padding-top:2px}
/* The size of the evidence base, where we have actually read it. This is the
   strongest thing on the card and it was buried in a paragraph. Absent where we
   do not hold the numbers \u2014 an empty space is honest, an invented one is not. */
.evcount.off{font-weight:500;color:var(--muted);border-style:dashed}
.evcount{font-weight:600;color:var(--text);border:1px solid var(--line);border-radius:999px;
  padding:2px 9px;white-space:nowrap;font-variant-numeric:tabular-nums}
.tiernote{font-size:.8rem;color:var(--text-3);margin-top:6px}
.tiernote b{color:var(--text-2);font-weight:600}
.tierlink{background:none;border:0;padding:0;font:inherit;font-size:.8rem;color:var(--accent);
  cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.chall{align-self:flex-start;border:1px solid var(--line);background:var(--bg);border-radius:999px;padding:6px 13px;font-size:.78rem;color:var(--text-2);min-height:32px}
.chall:hover{border-color:var(--accent);color:var(--text)}
.chk p{font-size:.86rem;color:var(--text-2);margin-top:6px;line-height:1.5}
.chk .chs{font-size:.74rem;margin-top:4px;color:var(--text-3)}
.chk .chs a{color:var(--accent);text-decoration:none}
.chk .chs a:hover{text-decoration:underline;text-underline-offset:3px}
.chk .chs .cap{color:var(--gold)}
/* ---------- rubric v2: gate line, weakness line, evidence tier ---------- */
.gateline{display:flex;align-items:center;gap:7px;font-size:.76rem;font-weight:600;letter-spacing:.01em;color:var(--text-2);margin-bottom:8px;line-height:1.35}
.gateline .gdot{width:7px;height:7px;border-radius:99px;flex:none;background:var(--accent)}
.gateline.pass.warn{color:var(--gold)}
.gateline.pass.warn .gdot{background:var(--gold)}
.gateline.caution{color:var(--gold)}
.gateline.caution .gdot{background:var(--gold)}
.gateline.fail{color:#A3302B}
.gateline.fail .gdot{background:#A3302B}
.weak{font-size:.82rem;font-weight:600;color:var(--gold);margin:2px 0 4px}
.weak.ok{color:var(--accent)}
.card.unscored{opacity:.92}
.card.unscored .why{-webkit-line-clamp:unset;display:block}
.card.unscored .art{filter:saturate(.35)}
.score-pill.none{color:var(--text-3);font-weight:600}
.notjudge{font-size:.78rem;color:var(--text-3);line-height:1.45;margin-top:6px;border-inline-start:2px solid var(--line);padding-inline-start:9px}
.btn.nobuy,.nobuy{display:block;text-align:center;background:transparent;border:1px dashed var(--line);color:var(--text-3);cursor:default;margin-top:var(--s2);padding:12px 14px;border-radius:999px;font-weight:600;font-size:.85rem}
.tierline{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:6px 0 2px;font-size:.78rem;color:var(--text-3)}
.tierchip{font-weight:700;font-size:.7rem;letter-spacing:.04em;padding:3px 9px;border-radius:999px;white-space:nowrap;border:1px solid}
.tierchip.t1{color:var(--accent);border-color:var(--accent);background:var(--mint)}
.tierchip.t2{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 45%,transparent)}
.tierchip.t3{color:var(--gold);border-color:color-mix(in srgb,var(--gold) 50%,transparent)}
.tierchip.t4{color:var(--text-3);border-color:var(--line)}
.indflag{font-size:.7rem;font-weight:700;letter-spacing:.03em;color:var(--gold);background:var(--gold-l);border-radius:999px;padding:3px 9px;white-space:nowrap}
.pricestated{display:flex;gap:var(--s4);flex-wrap:wrap;margin-top:14px;padding-top:14px;border-top:1px solid color-mix(in srgb,var(--accent) 22%,transparent)}
.pricestated>div{display:flex;flex-direction:column;gap:1px}
.pricestated span{font-size:.7rem;text-transform:uppercase;letter-spacing:.09em;color:var(--text-3);font-weight:700}
.pricestated b{font-size:1.15rem;letter-spacing:-.02em}
.pricestated .ps-note{flex:1 1 220px;font-size:.78rem;color:var(--text-3);line-height:1.45;font-weight:400;min-width:200px}
/* The right column of a product page runs to 3,000px and the gallery is 600px.
   Left to itself the grid stretches the gallery and you scroll past two thousand
   pixels of empty mint. Sticky is the fix: the pack follows you down the page. */
.pdp{align-items:start}
.pdp .gallery{position:sticky;top:calc(72px + var(--s3));align-self:start}
.gallery .art svg.pack{width:82%;height:82%}
.gallery .art{aspect-ratio:1;max-height:min(62vh,560px)}
/* the working: everything the four bars do not already say, folded away by default */
.working{margin-top:14px;border-top:1px solid color-mix(in srgb,var(--accent) 22%,transparent);padding-top:12px}
.working>summary{cursor:pointer;font-size:.85rem;font-weight:600;color:var(--accent);list-style:none;display:flex;align-items:center;gap:7px;min-height:32px}
.working>summary::-webkit-details-marker{display:none}
.working>summary::before{content:"+";font-size:1rem;font-weight:700;line-height:1}
.working[open]>summary::before{content:"\2212"}
.working>summary:hover{text-decoration:underline;text-underline-offset:3px}
.wbody{padding-top:10px;display:flex;flex-direction:column;gap:10px}
.wbasis{font-size:.88rem;color:var(--text-2);line-height:1.55;margin:0}
.wrow{display:flex;justify-content:space-between;gap:var(--s2);font-size:.85rem;color:var(--text-3);padding-bottom:8px;border-bottom:1px solid color-mix(in srgb,var(--accent) 18%,transparent);flex-wrap:wrap}
.wrow b{color:var(--text);text-align:end}
@media (max-width:820px){.pdp .gallery{position:static}.gallery .art{max-height:none}}
.scorebox.unscored .big b{color:var(--text-3)}
/* the published rubric */
.rub{max-width:760px}
.rubul{margin:10px 0 0;padding-inline-start:20px;display:flex;flex-direction:column;gap:8px;color:var(--text-2);line-height:1.6}
.rubul b{color:var(--text)}
.rub h2.rubh,.rub h3{margin-top:var(--s6);font-size:1.45rem;text-wrap:pretty}
.rub p{color:var(--text-2);margin-top:12px;font-size:1rem;line-height:1.65}
.rub .lede{margin-top:var(--s2)}
.rubcard{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:var(--s3);margin-top:var(--s3);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.82rem;line-height:1.75;color:var(--text-2);white-space:pre-wrap;overflow-x:auto}
.rubtable{width:100%;border-collapse:collapse;margin-top:var(--s3);font-size:.92rem}
.rubtable th{text-align:start;font-size:.7rem;text-transform:uppercase;letter-spacing:.09em;color:var(--text-3);padding:8px 12px 8px 0;border-bottom:1px solid var(--line)}
.rubtable td{padding:12px 12px 12px 0;border-bottom:1px solid var(--line);color:var(--text-2);vertical-align:top}
.rubtable td:first-child{color:var(--text);font-weight:600;white-space:nowrap}
.opend{background:var(--mint);border-radius:18px;padding:var(--s3);margin-top:var(--s3)}
.opend ol{margin:10px 0 0;padding-inline-start:1.2rem;color:var(--text-2);font-size:.94rem;display:flex;flex-direction:column;gap:7px}
@media (max-width:600px){.rubtable td:first-child{white-space:normal}}
/* advisor steps */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:var(--s4)}
.steps a{display:flex;flex-direction:column;gap:2px;text-decoration:none;border:1px solid var(--line);border-radius:14px;padding:12px 14px;font-weight:600;font-size:.95rem;transition:border-color .15s}
.steps a:hover{border-color:var(--accent)}
.steps a b{font-size:.7rem;letter-spacing:.1em;color:var(--accent)}
.steps a span{font-weight:400;font-size:.82rem;color:var(--text-3)}
@media (max-width:700px){.steps{grid-template-columns:1fr 1fr}}
/* concerns */
/* Tabs across the top, one panel beneath. The earlier two-column version gave a
   448px column to six short words and left a hundred pixels of dead space under
   it, while the shortlist was squeezed beside it. Stacking frees the full width
   for the products and removes the empty column entirely. */
.concerns{display:block}
.cwtabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:var(--s3)}
.cwitem{flex:none;border:1px solid var(--line);border-radius:999px;padding:10px 18px;
  font-weight:600;font-size:.95rem;color:var(--text-2);transition:background .15s,color .15s,border-color .15s}
.cwitem:hover{border-color:var(--text);color:var(--text)}
.cwitem.on{background:var(--text);border-color:var(--text);color:var(--bg)}
.cwpanel{background:var(--mint);border-radius:24px;padding:var(--s4);
  display:grid;grid-template-columns:minmax(230px,300px) 1fr;gap:var(--s4);align-items:start}
.cwintro{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.cwh{font-size:1.5rem;letter-spacing:-.03em}
.cwline{color:var(--text-2);font-size:.95rem;line-height:1.55}
.cwcta{margin-top:auto}
.cwpacks{display:flex;flex-wrap:wrap;gap:10px}
.cwp{width:150px;display:flex;flex-direction:column;gap:2px;text-align:start;background:var(--surface);
  border:1px solid transparent;border-radius:16px;padding:10px;transition:border-color .15s,transform .15s}
.cwp:hover{border-color:var(--accent);transform:translateY(-2px)}
.cwpimg{display:grid;place-items:center;aspect-ratio:1}
.cwpimg svg.pack{width:82%;height:82%}
.cwpn{font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);font-weight:700}
.cwpt{font-size:.82rem;line-height:1.3;font-weight:600}
.cwps{font-size:.9rem;font-weight:700;color:var(--accent);margin-top:2px}
.cnone{font-size:.88rem;color:var(--text-3);line-height:1.5}
@media (max-width:820px){
  .cwtabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;margin-inline:-24px;padding-inline:24px}
  .cwtabs::-webkit-scrollbar{display:none}
  .cwitem{padding:9px 15px;font-size:.9rem}
  .cwpanel{grid-template-columns:1fr;gap:var(--s3);padding:var(--s3)}
  .cwcta{margin-top:0}
  .cwp{width:calc(50% - 5px)}
}
}
.concern{border:1px solid var(--line);border-radius:20px;padding:var(--s3);text-align:start;background:var(--surface);display:flex;flex-direction:column;gap:10px;transition:border-color .15s,transform .15s}
.concern:hover{border-color:var(--accent);transform:translateY(-2px)}
.concern .ct{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.concern .ct b{font-size:1.15rem;letter-spacing:-.02em}
.concern .ct span{font-size:.75rem;color:var(--text-3)}
.concern p{font-size:.9rem;color:var(--text-2);line-height:1.5;flex:1}
.cpacks{display:flex;gap:8px}
.cp{position:relative;width:54px;height:54px;border-radius:12px;background:color-mix(in srgb,var(--surface) 78%,transparent);display:grid;place-items:center}
.cp svg.pack{width:72%;height:72%}
.cp i{position:absolute;bottom:-6px;right:-6px;font-style:normal;font-size:.66rem;font-weight:700;color:var(--accent);background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:1px 6px}
.cgo{font-size:.85rem;font-weight:600;color:var(--accent)}
.cnone{font-size:.82rem;color:var(--text-3);line-height:1.5;border-inline-start:2px solid var(--line);padding-inline-start:10px}
/* saved drawer */
.overlay{position:fixed;inset:0;background:rgba(24,24,27,.4);z-index:40;opacity:0;pointer-events:none;transition:opacity .2s ease-in-out}
.overlay.on{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;bottom:0;inset-inline-end:0;width:min(420px,100%);background:var(--bg);z-index:50;transform:translateX(100%);transition:transform .2s ease-in-out;display:flex;flex-direction:column;border-inline-start:1px solid var(--line)}
body[dir="rtl"] .drawer{transform:translateX(-100%)}
.drawer.on{transform:none!important}
.drawer .hd{display:flex;justify-content:space-between;align-items:center;padding:var(--s3);border-bottom:1px solid var(--line)}
.drawer .items{flex:1;overflow:auto;padding:var(--s3);display:flex;flex-direction:column;gap:var(--s2)}
.drawer .ft{padding:var(--s3);border-top:1px solid var(--line);display:flex;flex-direction:column;gap:var(--s2);font-size:.9rem;color:var(--text-2)}
.drawer .ft input{font:inherit;padding:10px 12px;border-radius:4px;border:1px solid var(--line);background:var(--surface);color:var(--text);width:100%}
.empty{color:var(--text-3);text-align:center;padding:var(--s6) var(--s2)}
.toast{position:fixed;bottom:var(--s3);left:50%;transform:translate(-50%,12px);background:var(--ink);color:#F4F2EC;max-width:min(92vw,420px);text-align:center;line-height:1.35;padding:10px 18px;border-radius:4px;font-weight:500;font-size:.9rem;opacity:0;transition:.2s ease-in-out;z-index:60;pointer-events:none}
.toast.on{opacity:1;transform:translate(-50%,0)}

footer{background:#0C0A09;color:#A9A196;font-size:.88rem;padding-block:var(--s6) var(--s8);margin-top:var(--s8)}
footer .wordmark{color:#FBF7EF}
footer .wordmark .rule{background:#3A342E}
footer p{color:#A9A196}
footer h4{color:#FBF7EF}
footer li{color:#A9A196}
footer li a{color:inherit}
.footnl{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--s4);flex-wrap:wrap;padding-bottom:var(--s6);margin-bottom:var(--s6);border-bottom:1px solid #2A2521}
.footnl h2{color:#FBF7EF;font-size:1.6rem}
.footnl p{margin-top:8px;max-width:44ch;color:#A9A196}
.footnl form{display:flex;gap:0;flex:0 0 auto;width:min(420px,100%);border-radius:999px;overflow:hidden;background:#F4F0E8}
.footnl form input{flex:1;min-width:0;font:inherit;padding:13px 18px;border:0;background:transparent;color:#0C0A09}
.footnl form input::placeholder{color:#726A5E}
.footnl form .btn{border-radius:0;border:0;background:#FBF7EF;color:#0C0A09;font-weight:700;padding-inline:22px}
.footnl form .btn:hover{filter:brightness(.95)}
footer .disclosure{background:#1B1712;border-color:#332C24}
footer .disclosure b{color:var(--gold)}
footer .disclosure span{color:#A9A196}
footer footer .cols ul a{text-decoration:none}
footer .cols ul a:hover{text-decoration:underline;text-underline-offset:3px}
.legal{border-top:1px solid #2A2521;padding-top:var(--s3);color:#726A5E}
@media (max-width:600px){.footnl{flex-direction:column;align-items:stretch}.footnl form{width:100%}}
footer .cols{display:grid;grid-template-columns:2fr 1fr 1fr;gap:var(--s4)}
footer h4{margin:0 0 var(--s1);font-size:.75rem;text-transform:uppercase;letter-spacing:.1em}
footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
footer .legal{margin-top:var(--s4);display:flex;justify-content:space-between;gap:var(--s2);flex-wrap:wrap;font-size:.8rem}
.proto-note{position:fixed;bottom:var(--s2);inset-inline-start:var(--s2);font-size:.7rem;color:var(--text-3);background:var(--surface);border:1px solid var(--line);padding:4px 10px;border-radius:3px;z-index:20}
@media (max-width:760px){footer .cols{grid-template-columns:1fr 1fr}.proto-note{display:none}}

.triggers{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.triggers div{background:var(--surface);padding:var(--s3);display:flex;flex-direction:column;gap:var(--s1)}
.triggers .sig{font-size:.88rem;color:var(--text)}
.triggers .act{font-size:.88rem;color:var(--text-2);padding-top:var(--s1);border-top:1px solid var(--line)}
@media (max-width:900px){.triggers{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.triggers{grid-template-columns:1fr}}
.tiers{border:1px solid var(--line);border-radius:4px;overflow:hidden;background:var(--surface)}
.tier{display:grid;grid-template-columns:180px 110px 1fr 1.4fr;gap:var(--s2);padding:var(--s2) var(--s3);border-top:1px solid var(--line);font-size:.92rem;align-items:baseline}
.tier:first-child{border-top:0}
.tier b{font-weight:600}
.tier .when{color:var(--text-3);font-size:.82rem}
.tier .out{font-family:var(--serif);font-size:1rem;font-weight:500;color:var(--text)}
@media (max-width:900px){.tier{grid-template-columns:1fr;gap:4px}}


/* merged home */
.open-side{display:flex;flex-direction:column;gap:var(--s2)}
.scene{display:none}
.scene svg{width:100%;height:100%;display:block}
.quick{display:flex;flex-wrap:wrap;gap:6px;margin-top:var(--s1)}
.quick button{border:1px solid var(--line);border-radius:999px;padding:6px 12px;font-size:.85rem;font-weight:500;color:var(--text-2);min-height:34px}
.quick button:hover{border-color:var(--text);color:var(--text)}
.pillar-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--line);border-inline-end:0}
.pillar{position:relative;background:#FFFFFF;border-inline-end:1px solid var(--line);padding:var(--s4) var(--s3);min-height:240px;display:flex;flex-direction:column;justify-content:space-between;text-align:start;transition:background .2s ease-in-out}
.pillar:hover{background:var(--elev)}
.pillar .bg{display:none}
.pillar .pc{padding:0}
.pillar h3{font-size:1.9rem;letter-spacing:-.035em}
.pillar h3 .ar{font-family:var(--ar);font-size:1rem;color:var(--text-3);margin-inline-start:8px;font-weight:500}
.pillar p{font-size:.92rem;margin-top:10px;color:var(--text-2);max-width:26ch}
.pillar .cnt{font-size:.8rem;font-weight:600;margin-top:var(--s3);display:block;color:var(--text)}
@media (max-width:820px){.pillar-grid{grid-template-columns:1fr 1fr;border-bottom:0}.pillar{border-bottom:1px solid var(--line)}}


/* A ticker rather than a wrapping row: every claim gets seen at any width,
   instead of three of them being hidden on a phone. The run is rendered twice so
   the loop has no visible seam. */
.announce{overflow:hidden;padding:9px 0;font-size:.78rem;font-weight:500;color:var(--text-2);border-bottom:1px solid var(--line)}
.ann-track{display:flex;width:max-content;animation:annscroll var(--ann-dur,34s) linear infinite}
.ann-run{display:flex;gap:var(--s6);padding-inline-end:var(--s6);flex:none}
.ann-run span{white-space:nowrap}
.announce:hover .ann-track{animation-play-state:paused}
/* Travel exactly one run's width, so copy 2 lands where copy 1 started. A -50%
   rule only works when the track is exactly two runs wide; with four short
   items the run is narrower than the screen, the strip empties out on the
   right, and the loop appears to stop halfway. */
@keyframes annscroll{from{transform:translateX(0)}to{transform:translateX(calc(-1 * var(--ann-w,50%)))}}
@media (prefers-reduced-motion:reduce){.ann-track{animation:none}.announce{overflow-x:auto}}
.collections{display:flex;gap:10px;flex-wrap:wrap}
.collections button{border:1px solid var(--line);border-radius:999px;padding:10px 18px;font-weight:500;font-size:.92rem;min-height:44px;transition:border-color .15s}
.collections button:hover{border-color:var(--text)}
.process{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--line)}
.process div{padding:var(--s4) var(--s3) var(--s4) 0;border-bottom:1px solid var(--line)}
.process .n{font-size:.75rem;font-weight:700;letter-spacing:.1em;color:var(--text-3)}
.process h3{margin-top:8px}
.process p{color:var(--text-2);margin-top:8px;font-size:.95rem;max-width:34ch}
.reviews{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--s2)}
.review{border:1px solid var(--line);padding:var(--s3);display:flex;flex-direction:column;gap:8px;font-size:.9rem}
.review .stars{color:var(--text);letter-spacing:2px;font-size:.8rem}
.review p{color:var(--text-2);flex:1}
.review b{font-weight:600}.review span{color:var(--text-3);font-size:.78rem}
.newsletter{border:1px solid var(--line);padding:var(--s4);display:grid;grid-template-columns:1.2fr 1fr;gap:var(--s4);align-items:center}
.newsletter form{display:flex;gap:8px}
.newsletter input{flex:1;font:inherit;padding:12px 16px;border-radius:999px;border:1px solid var(--line);background:#FFFFFF;color:var(--text);min-width:0}
.labs-band{border:1px solid var(--line);display:grid;grid-template-columns:1.2fr 1fr;gap:var(--s4);padding:var(--s4);align-items:center}
.labs-band .big{font-size:2.4rem;font-weight:700;letter-spacing:-.04em;line-height:1}
.labs-band ul{margin:12px 0 0;padding-inline-start:1.1rem;color:var(--text-2);font-size:.92rem;display:flex;flex-direction:column;gap:4px}
@media (max-width:900px){.process{grid-template-columns:1fr}.reviews{grid-template-columns:1fr 1fr}.newsletter,.labs-band{grid-template-columns:1fr}.newsletter form{flex-direction:column}.announce{gap:var(--s2)}}
@media (max-width:520px){.reviews{grid-template-columns:1fr}}

/* ---------- Healf-style pass: rounded, tinted, product-led ---------- */
:root{--mint:#EEF6F2;--mint-2:#DDEDE5;--tint-eat:#F0F4E6;--tint-move:#FBEDE0;--tint-mind:#E8EEF5;--tint-rest:#ECE8F3;--gold:#A9761F;--gold-l:#F6EEDC;--shadow:0 1px 2px rgba(14,14,16,.04),0 14px 36px -20px rgba(14,14,16,.28)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--mint:#15201C;--mint-2:#1B2B25;--tint-eat:#1C2118;--tint-move:#26201A;--tint-mind:#1A1F27;--tint-rest:#201D28;--gold:#E0B266;--gold-l:#2A2418;--shadow:0 1px 2px rgba(0,0,0,.4),0 14px 36px -20px rgba(0,0,0,.7)}}
:root[data-theme="dark"]{--mint:#15201C;--mint-2:#1B2B25;--tint-eat:#1C2118;--tint-move:#26201A;--tint-mind:#1A1F27;--tint-rest:#201D28;--gold:#E0B266;--gold-l:#2A2418;--shadow:0 1px 2px rgba(0,0,0,.4),0 14px 36px -20px rgba(0,0,0,.7)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.btn.primary:hover{filter:brightness(1.06)}
.announce{background:var(--mint);border-bottom:0;color:var(--text-2)}
nav.surfaces{gap:2px;align-items:center}
nav.surfaces button{border-radius:999px;padding:8px 14px;white-space:nowrap}
@media (max-width:1200px) and (min-width:821px){nav.surfaces button{padding:8px 9px;font-size:.88rem}.topbar{gap:var(--s2)}.top-right button{white-space:nowrap}}
nav.surfaces button.on{background:var(--mint);box-shadow:none;border-radius:999px;color:var(--text)}
nav.surfaces .navsep{width:1px;height:20px;background:var(--line);margin-inline:8px}
.open{padding-block:var(--s8) var(--s6);align-items:center}
.hero-visual{position:relative;border-radius:28px;overflow:hidden;aspect-ratio:1.05;background:#EFE1CA;box-shadow:var(--shadow)}
.hero-visual svg.blobs{position:absolute;inset:0;width:100%;height:100%}
.hero-visual .float{position:absolute;width:30%;aspect-ratio:1;display:grid;place-items:center;background:#fff;border-radius:22px;box-shadow:var(--shadow);border:1px solid var(--line)}
.hero-visual .float svg.pack{width:78%;height:78%}
.hero-visual .f1{left:14%;top:27%;width:22%;transform:rotate(-5deg)}
.hero-visual .f2{left:59%;top:20%;width:23%;transform:rotate(4deg)}
.hero-visual .f3{display:none}
.scorecard{position:absolute;inset-inline-end:16px;bottom:16px;width:min(236px,calc(100% - 32px));background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:13px 15px;box-shadow:var(--shadow)}
.scorecard .big{display:flex;align-items:baseline;gap:6px}
.scorecard .big b{font-size:1.8rem;letter-spacing:-.04em;color:var(--accent);line-height:1}
.scorecard .big span{color:var(--text-3);font-size:.78rem}
.scorecard .nm{font-weight:600;font-size:.86rem;margin-top:3px;line-height:1.3}
.scorecard .sub{color:var(--text-3);font-size:.72rem}
.sbars{display:flex;flex-direction:column;gap:6px;margin-top:10px}
.sbar{display:grid;grid-template-columns:88px 1fr 24px;gap:7px;align-items:center;font-size:.67rem;color:var(--text-2)}
.sbar .tr{height:5px;border-radius:99px;background:var(--mint-2);overflow:hidden}
.sbar .fl{height:100%;background:var(--accent);border-radius:99px}
.sbar .v{text-align:end;color:var(--text-3)}
.trust-strip{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--s3);border-block:1px solid var(--line);padding:var(--s3) 0}
.trust-strip div{display:flex;flex-direction:column;gap:2px}
.trust-strip b{font-size:1.35rem;letter-spacing:-.03em;font-weight:700}
.trust-strip span{font-size:.8rem;color:var(--text-3)}
.entries.three{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s2);margin-top:var(--s6)}
.entry{border-radius:18px;background:var(--mint);border-color:transparent}
.entry:hover{border-color:var(--accent)}
.card{border-radius:18px;overflow:hidden;transition:transform .2s ease-in-out,box-shadow .2s ease-in-out,border-color .2s}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--line)}
.card .art{position:relative;border-bottom:0;background:var(--mint)}
.card .art.tint-eat{background:var(--tint-eat)}.card .art.tint-move{background:var(--tint-move)}.card .art.tint-mind{background:var(--tint-mind)}
.card .artbtn{display:block;width:100%;text-align:start}
.score-pill{position:absolute;top:12px;inset-inline-start:12px;font-weight:700;font-size:.8rem;background:var(--surface);color:var(--accent);border:1px solid var(--line);padding:5px 9px;border-radius:999px;font-variant-numeric:tabular-nums;box-shadow:var(--shadow)}
.score-pill.mid{color:var(--gold)}
.score-pill small{font-weight:500;color:var(--text-3);margin-inline-start:2px}
.card .buy{margin-top:var(--s2);width:100%;display:block;text-align:center;padding:12px 14px;line-height:1.3;white-space:normal;text-wrap:balance}
.card .buy .bp{display:none}
.card .buy.btn.primary{text-decoration:none}
.grid{gap:var(--s3)}
/* A shelf you scroll along rather than three rows you scroll past. The cards
   keep their own width so the row reads as a shelf edge, and the last one is
   deliberately left part-visible so it is obvious there is more. */
.hscroll{display:flex;overflow-x:auto;gap:var(--s2);padding-bottom:6px;
  scroll-snap-type:x proximity;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.hscroll>.card{flex:none;width:252px;scroll-snap-align:start}
/* The <=430px rule turns a card on its side for a full-width single column.
   Inside a horizontal scroller that squashes it into a tall thin sliver, so
   cards in a scroller stay upright at every width. */
.hscroll>.card{flex-direction:column}
.hscroll>.card .artbtn{flex:auto;width:auto}
.hscroll>.card .art{aspect-ratio:1;height:auto;min-height:0;border-inline-end:0}
.hscroll::-webkit-scrollbar{height:6px}
.hscroll::-webkit-scrollbar-thumb{background:var(--line);border-radius:99px}
.hscroll::-webkit-scrollbar-track{background:transparent}
@media (max-width:700px){
  .hscroll{margin-inline:-24px;padding-inline:24px;scrollbar-width:none}
  .hscroll::-webkit-scrollbar{display:none}
  .hscroll>.card{width:70vw;max-width:260px}
}
.band{background:var(--mint);border-radius:28px;padding:var(--s6)}
.labs-band{border-radius:28px;background:var(--mint);border:0;padding:var(--s6)}
.chk-head{margin-bottom:var(--s4)}
.chk-steps{display:flex;gap:6px;margin-top:var(--s3)}
.chk-steps span{width:28px;height:4px;border-radius:99px;background:var(--mint-2)}
.chk-steps span.done{background:var(--accent)}
.chk-q{display:none}.chk-q.on{display:block}
.chk-title{font-size:1.35rem;font-weight:600;letter-spacing:-.02em;margin-bottom:var(--s3)}
.opt-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px}
.opt{border:1px solid var(--line);border-radius:16px;padding:16px;text-align:start;background:var(--surface);font-weight:600;font-size:.95rem;transition:border-color .15s,background .15s}
.opt small{display:block;font-weight:400;color:var(--text-3);font-size:.82rem;margin-top:4px}
.opt:hover{border-color:var(--accent)}
.opt[aria-pressed="true"]{border-color:var(--accent);background:var(--elev)}
.chk-nav{display:flex;justify-content:space-between;margin-top:var(--s3)}
.chk-res{display:grid;grid-template-columns:auto 72px 1fr auto;gap:var(--s3);align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:var(--s2) var(--s3);margin-bottom:12px}
.chk-res .rs{font-size:1.9rem;font-weight:700;letter-spacing:-.04em;color:var(--accent);line-height:1;min-width:64px}
.chk-res .rs.mid{color:var(--gold)}
.chk-res .rs small{font-size:.8rem;font-weight:500;color:var(--text-3);letter-spacing:0}
.chk-res .ra{width:72px;height:72px;border-radius:14px;background:var(--mint);display:grid;place-items:center}
.chk-res .ra svg.pack{width:80%;height:80%}
.chk-res b{display:block;font-weight:600}
.chk-res p{font-size:.88rem;color:var(--text-2);margin-top:2px}
.chk-res .rb{display:flex;flex-direction:column;gap:6px;align-items:stretch}
.chk-res .rb .btn{text-decoration:none;white-space:nowrap}
.chk-actions{display:flex;gap:var(--s2);margin-top:var(--s3);flex-wrap:wrap;align-items:center}
.pillar-grid{gap:var(--s2);border:0}
.pillar{border:0;border-radius:22px;overflow:hidden;min-height:346px;padding:var(--s3);justify-content:flex-end}
.pillar .bg{display:block;position:absolute;inset:0}
.pillar .bg svg,.pillar .bg img{width:100%;height:100%;display:block;object-fit:cover}
.pillar .bg .scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,7,6,.62) 0%,rgba(8,7,6,.12) 36%,rgba(8,7,6,.86) 100%)}
.pillar .pc{position:relative;z-index:1;background:color-mix(in srgb,var(--surface) 90%,transparent);border-radius:16px;padding:var(--s2) var(--s2) var(--s2)}
.pillar .cnt{position:relative;z-index:1;margin-top:var(--s2);color:var(--text);background:color-mix(in srgb,var(--surface) 90%,transparent);border-radius:999px;padding:6px 12px;display:inline-block;width:max-content}
.pillar:hover .pc{background:var(--surface)}
.pillar h3{font-size:1.6rem}
.pillar p{max-width:none;font-size:.88rem}
.collections button{background:var(--mint);border-color:transparent;padding:12px 20px}
.collections button:hover{border-color:var(--accent)}
.review{border-radius:18px}
.newsletter,.premium,.offers,.tiers,.ptable,.compare,.pside .box,.chat-side .box,.letter,.proto-types button,.escal,.msg.you{border-radius:18px}
.trust-grid,.triggers{border-radius:18px;overflow:hidden}
.scorebox{margin-top:var(--s3);background:var(--mint);border-radius:18px;padding:var(--s3)}
.pdpsec{margin-top:var(--s4);padding-bottom:6px;border-bottom:1px solid var(--line)}
.pdpsec+.story,.pdpsec+.kv,.pdpsec+.offers{margin-top:var(--s2)}
.pdpsec+.kv{border-top:0}
.scorebox .big{display:flex;align-items:baseline;gap:8px}
.scorebox .big b{font-size:2.6rem;letter-spacing:-.04em;color:var(--accent);line-height:1}
.scorebox .big span{color:var(--text-3);font-size:.9rem}
.scorebox .sbar .tr{background:color-mix(in srgb,var(--accent) 18%,transparent)}
.offer a.btn{text-decoration:none}
.gallery .art,.gallery .card-slide{border-radius:24px;border:0;background:var(--mint)}
.compare .head .art,.rec .art{border-radius:14px;background:var(--mint);border:0}
.disclosure{display:flex;gap:14px;align-items:flex-start;background:var(--gold-l);border-radius:18px;padding:var(--s3);font-size:.88rem;color:var(--text-2);line-height:1.55;margin-top:var(--s6)}
.disclosure b{color:var(--gold);font-size:.75rem;letter-spacing:.1em;white-space:nowrap;padding-top:2px}
@media (max-width:900px){.trust-strip{grid-template-columns:repeat(2,1fr)}.entries.three{grid-template-columns:1fr}.pillar-grid{grid-template-columns:1fr 1fr}.chk-res{grid-template-columns:auto 1fr;grid-template-areas:"s t" "a t" "b b"}.chk-res .rs{grid-area:s}.chk-res .ra{display:none}.chk-res .rb{grid-area:b;flex-direction:row}.band{padding:var(--s4)}}
.hero-visual .stage{position:absolute;inset:0}
.hero-ctas{display:flex;gap:var(--s2);margin-top:var(--s4);flex-wrap:wrap}
@media (max-width:600px){.hero-visual{aspect-ratio:auto}.hero-visual .stage{position:relative;aspect-ratio:1.15}.scorecard{position:static;width:100%;border-radius:0;border:0;border-top:1px solid var(--line)}.pillar-grid{grid-template-columns:1fr}}

/* ---------- MENA editorial: black ground, light raked through a mashrabiya ---------- */
.hero-dark{position:relative;background:#0C0A09;color:#F7F2E9;overflow:hidden;min-height:min(78vh,660px);display:flex;align-items:flex-end;isolation:isolate}
.hero-dark .art,.hero-dark .packs{position:absolute;inset:0}
.hero-dark .art svg,.hero-dark .art img{width:100%;height:100%;display:block;object-fit:cover;object-position:62% 45%}
.hero-dark .art .scrim{position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,7,6,.92) 0%,rgba(8,7,6,.78) 34%,rgba(8,7,6,.42) 62%,rgba(8,7,6,.2) 100%)}
.hero-dark .pk{position:absolute;filter:drop-shadow(0 26px 34px rgba(0,0,0,.75))}
.hero-dark .pk svg{width:100%;height:auto;display:block}
.hero-dark .pk1{inset-inline-end:13%;top:15%;width:20%}
.hero-dark .pk2{inset-inline-end:29%;top:36%;width:16%}
.hero-dark .pk3{inset-inline-end:5%;top:47%;width:14%}
.hero-copy{position:relative;z-index:2;max-width:1200px;margin:0 auto;width:100%;padding:var(--s12) 24px var(--s6)}
.hero-dark .label{color:#C8A46A}
.hero-dark h1{color:#FBF7EF;font-size:clamp(2.3rem,5.4vw,4.3rem);line-height:1.02;letter-spacing:-.04em;max-width:17ch;margin-top:var(--s2)}
.hero-dark .lede{color:#CBC1B1;max-width:48ch;margin-top:var(--s3)}
.hero-dark .hint{color:#8E8578}
.hero-dark .btn{border-color:rgba(251,247,239,.5);color:#FBF7EF}
.hero-dark .btn:hover{border-color:#FBF7EF}
.hero-dark .btn.primary{background:#FBF7EF;border-color:#FBF7EF;color:#0C0A09}
.hero-dark .scorecard{z-index:2;background:rgba(20,17,14,.72);backdrop-filter:blur(10px);border-color:rgba(251,247,239,.18)}
.hero-dark .scorecard .nm{color:#FBF7EF}
.hero-dark .scorecard .big b{color:#E8C07A}
.hero-dark .scorecard .big span,.hero-dark .scorecard .sub,.hero-dark .scorecard .sbar,.hero-dark .scorecard .sbar .v{color:#A69C8C}
.hero-dark .scorecard .sbar .tr{background:rgba(251,247,239,.14)}
.hero-dark .scorecard .sbar .fl{background:#E8C07A}
@media (max-width:820px){.hero-dark{min-height:auto}.hero-copy{padding-block:var(--s8) var(--s6)}.hero-dark .pk2,.hero-dark .pk3{display:none}.hero-dark .pk1{width:30%;top:auto;bottom:8%;inset-inline-end:6%;opacity:.9}.hero-dark .scorecard{display:none}}

/* pillars as dark editorial tiles */
.pillar{position:relative;border:0;border-radius:20px;overflow:hidden;min-height:430px;padding:0;display:block;background:#0C0A09;text-align:start}
.pillar .bg{display:block;position:absolute;inset:0}
.pillar .bg svg,.pillar .bg img{width:100%;height:100%;display:block;object-fit:cover}
.pillar .bg .scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,7,6,.62) 0%,rgba(8,7,6,.12) 36%,rgba(8,7,6,.86) 100%)}
.pillar .ppack{position:absolute;inset-inline:24%;top:30%;filter:drop-shadow(0 22px 26px rgba(0,0,0,.75))}
.pillar .ppack svg{width:100%;height:auto;display:block}
.pillar .plabel{position:absolute;top:20px;inset-inline-start:22px;z-index:2;color:#FBF7EF;font-size:1.85rem;font-weight:700;letter-spacing:-.03em;text-transform:uppercase;line-height:1;text-shadow:0 2px 18px rgba(0,0,0,.55)}
.pillar .plabel .ar{display:block;font-family:var(--ar);font-size:.92rem;font-weight:500;letter-spacing:0;opacity:.66;margin-top:6px;text-transform:none}
.pillar .pfoot{position:absolute;bottom:20px;inset-inline:22px;z-index:2;color:#D6CFC4;font-size:.84rem;line-height:1.45;text-shadow:0 1px 12px rgba(0,0,0,.6)}
.pillar .pfoot b{display:block;color:#FBF7EF;font-weight:500;font-size:.9rem;margin-bottom:5px}
.pillar .pfoot .go{display:inline-block;margin-top:10px;color:#E8C07A;font-weight:600;font-size:.82rem}
.pillar:hover .pfoot .go{text-decoration:underline;text-underline-offset:3px}

/* ---------- Mega menu: two ways in (concern / product) plus the Gulf lenses ---------- */
header.top{position:sticky}
.mega{position:absolute;top:100%;inset-inline:0;background:var(--bg);border-bottom:1px solid var(--line);box-shadow:0 24px 40px -28px rgba(14,14,16,.45);display:none;z-index:29}
.mega.on{display:block}
.mega-quick{border-bottom:1px solid var(--line)}
.mega-quick .wrap{display:flex;gap:var(--s4);padding-block:14px;flex-wrap:wrap}
.mega-quick button{font-weight:600;font-size:.92rem;color:var(--text-2)}
.mega-quick button:hover{color:var(--accent)}
.mega-quick button.lead{color:var(--text)}
.mega-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.3fr);gap:var(--s6);padding-block:var(--s4) var(--s6)}
.mega h5{font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;color:var(--text-3);font-weight:700;margin:0 0 14px}
.mega .col{display:flex;flex-direction:column;gap:9px;align-items:flex-start}
.mega .col button{font-size:.95rem;color:var(--text-2);text-align:start;line-height:1.35}
.mega .col button:hover{color:var(--accent)}
.mega .col .ar{font-family:var(--ar);font-size:.82rem;color:var(--text-3);margin-inline-start:6px}
.mega .stage{margin-top:var(--s4);padding-top:var(--s3);border-top:1px solid var(--line)}
.mega .stage .row{display:flex;gap:14px;flex-wrap:wrap}
.mega .stage button{font-size:.95rem;color:var(--text-2)}
.mega .stage button:hover{color:var(--accent)}
.mega-advisor{background:var(--mint);border-radius:18px;padding:var(--s3);display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.mega-advisor b{font-size:1.05rem;letter-spacing:-.02em}
.mega-advisor p{font-size:.88rem;color:var(--text-2);line-height:1.5}
.mega-advisor .chips{display:flex;flex-wrap:wrap;gap:6px}
.mega-advisor .chips button{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:6px 11px;font-size:.82rem;font-weight:500}
.mega-advisor .chips button:hover{border-color:var(--accent);color:var(--accent)}
.lenschip{display:inline-flex;align-items:center;gap:6px}
.lenschip .dot{width:7px;height:7px;border-radius:99px;background:var(--accent);flex:none}
@media (max-width:1100px){.mega-body{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s4)}}
@media (max-width:820px){.mega{display:none!important}}

.mktBtn{border:1px solid var(--line);border-radius:999px;padding:7px 13px!important;font-size:.85rem!important}
.mktBtn:hover{border-color:var(--accent)}
.mktsheet{position:fixed;z-index:50;inset-inline:0;bottom:0;margin:0 auto;max-width:520px;max-height:88vh;overflow-y:auto;background:var(--bg);border:1px solid var(--line);border-radius:24px 24px 0 0;padding:var(--s4);padding-bottom:calc(var(--s4) + env(safe-area-inset-bottom,0px));transform:translateY(102%);transition:transform .22s ease-in-out;display:flex;flex-direction:column;gap:var(--s2)}
.mktsheet.on{transform:none}
/* A bottom sheet is a phone pattern. On a laptop it slides up from the bottom
   edge and sits half off the screen, which is what was happening to sign-in.
   From 640px up it becomes a centred dialog. */
@media (min-width:640px){
  .mktsheet{inset:auto;top:50%;left:50%;right:auto;bottom:auto;width:min(480px,calc(100vw - 48px));max-width:none;
    border-radius:20px;max-height:min(86vh,720px);
    transform:translate(-50%,-46%) scale(.98);opacity:0;pointer-events:none;
    box-shadow:0 24px 60px rgba(0,0,0,.18);
    transition:transform .18s ease-out,opacity .18s ease-out;
    padding-bottom:var(--s4)}
  .mktsheet.on{transform:translate(-50%,-50%) scale(1);opacity:1;pointer-events:auto}
}
.mktsheet p{color:var(--text-2);font-size:.92rem;margin-bottom:var(--s1)}
.mktsheet .mkt{border:1px solid var(--line);border-radius:16px;padding:var(--s3);text-align:start;display:flex;flex-direction:column;gap:5px}
.mktsheet .mkt:hover{border-color:var(--accent)}
.mktsheet .mkt[aria-pressed="true"]{border-color:var(--accent);background:var(--elev)}
.mktsheet .mkt b{font-size:1.02rem}
.mktsheet .mkt span{color:var(--text-2);font-size:.87rem;line-height:1.45}
.chip.veg{border-color:#1F7A34;color:#1F7A34}
.chip.nonveg{border-color:#A3302B;color:#A3302B}
.chip.auth{border-color:var(--accent);color:var(--accent)}
.offer .srcnote{font-size:.72rem;color:var(--text-3)}
.offer .srcnote.warn{color:#A3302B}
.citypick{border:1px solid var(--line);border-radius:20px;background:var(--surface);padding:var(--s4);display:flex;flex-direction:column;gap:var(--s3)}
.cpq h2{font-size:1.45rem}
.cpq p{font-size:.92rem;color:var(--text-2);margin-top:6px}
.cpchips{display:flex;flex-wrap:wrap;gap:10px}
.cpchip{border:1px solid var(--line);border-radius:999px;padding:9px 16px;background:var(--bg);font-size:.9rem;color:var(--text);transition:border-color .15s,background .15s;text-align:start}
.cpchip:hover{border-color:var(--accent)}
.cpchip[aria-pressed="true"]{border-color:var(--accent);background:var(--elev);font-weight:600}
.cpout{font-size:.9rem;color:var(--text-2);line-height:1.6;border-top:1px solid var(--line);padding-top:var(--s3)}
.cpout b{color:var(--text);font-weight:600}
/* ===== editorial home =========================================================
   Scoped to #v-home so none of it can reach the old homepage, which still lives
   at /oldhomepage and has to keep behaving exactly as it did. */
#v-home{background:var(--ink-h);color:var(--bone-h)}
/* The homepage ground is white. Two token sets live here: --ink-h/--bone-h are
   the PAGE (light ground, dark ink), and --on-art/--on-art-2 are for the few
   places that sit on top of a photograph — the hero and the pillar tiles —
   where the type has to stay light whatever the page does. --hair-h is the
   hairline, so flipping the ground flips every rule that draws one. */
#v-home{--eh-gap:clamp(40px,5vw,68px);--ink-h:#FFFFFF;--ink-h2:#F5F6F3;--ink-h3:#ECEEE9;
  --bone-h:#14181A;--bone-h2:#4E5A56;--bone-h3:#8A948F;
  --hair-h:rgba(20,24,26,.14);--hair-h2:rgba(20,24,26,.05);
  --on-art:#F4F2EC;--on-art-2:rgba(244,242,236,.82);--on-art-3:rgba(244,242,236,.62);
  --gold-h:#8A6410;--teal-h:#2E6E5E}
#v-home .wrap{max-width:1360px;margin:0 auto;padding-inline:clamp(16px,3vw,34px)}
#v-home h1,#v-home h2{text-wrap:balance}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* The hero is the photograph and nothing else; the words sit under it on the
   page's own white, where they read at any brightness. */
.eh-hero{position:relative;height:min(82vh,860px);min-height:340px;overflow:hidden}
.eh-hero[hidden]{display:none}
.eh-art{position:absolute;inset:0}
.eh-art svg{display:block;width:100%;height:100%}
/* Sits the frame nearer the top of the photograph: heads and the skyline were
   being cropped off by a centre crop. */
.eh-art img{width:100%;height:100%;object-fit:cover;object-position:center 22%;
  filter:saturate(.86) contrast(1.05)}
.eh-veil{position:absolute;inset:0;pointer-events:none;background:
  linear-gradient(100deg,rgba(6,7,6,.92) 0%,rgba(6,7,6,.62) 46%,rgba(6,7,6,.15) 88%),
  linear-gradient(0deg,rgba(6,7,6,.75) 0%,rgba(6,7,6,0) 46%)}
/* No measure caps here: the container already sets the width, and capping the
   headline at 16ch wrapped it to a third of the page with the rest empty. */
/* The words sit between the photograph and the next section title, so the room
   above them is set to read level with the room below — 58px against 132px was
   visibly crowding the top. */
.eh-intro{padding-block:clamp(48px,7vw,96px) 0;display:grid;gap:20px;justify-items:start}
.eh-intro h1{font-size:clamp(2.3rem,6.6vw,5.2rem);line-height:.94;letter-spacing:-.04em;
  font-weight:700;margin:0;max-width:none;color:var(--bone-h)}
/* fitH1() sets --h1 once the font has loaded and it can measure the real line. */
.eh-intro h1[data-fit]{font-size:var(--h1);white-space:nowrap}
/* Runs the full measure, level with the headline above it. */
.eh-intro p{margin:0;max-width:none;color:var(--bone-h2);font-size:clamp(1rem,1.5vw,1.22rem);
  line-height:1.45}
.eh-btns{display:flex;gap:12px;flex-wrap:wrap;margin-top:4px}
.eh-btn{border-radius:999px;padding:13px 24px;font:inherit;font-weight:600;font-size:.92rem;
  border:1px solid transparent;cursor:pointer;transition:transform .15s ease}
.eh-btn:hover{transform:translateY(-1px)}
.eh-btn.solid{background:var(--bone-h);color:var(--ink-h)}
.eh-btn.solid.dark{background:#0A0B0A;color:#F4F2EC;margin-top:22px}
.eh-btn.ghost{border-color:var(--ink-h3);background:none;color:var(--bone-h)}

.eh-card{width:100%;background:#0C100E;border:1px solid rgba(244,242,236,.12);
  border-radius:16px;padding:clamp(18px,2vw,26px);text-align:start;color:var(--on-art)}
.eh-card .n{font-size:clamp(2.1rem,3.4vw,2.9rem);font-weight:700;color:#D8A84A;letter-spacing:-.03em}
.eh-card .of{font-size:.76rem;color:var(--on-art-3)}
.eh-card .nm{font-size:.86rem;font-weight:600;margin-top:4px;line-height:1.3;color:var(--on-art)}
.eh-card .wk{font-size:.74rem;color:#D8A84A;margin-top:2px}
.eh-card .rows{margin-top:12px;display:flex;flex-direction:column;gap:8px}
.eh-card .r{display:grid;grid-template-columns:1fr 54px 30px;gap:8px;align-items:center;
  font-size:.7rem;color:var(--on-art-3)}
.eh-card .t{height:4px;border-radius:2px;background:rgba(244,242,236,.16);overflow:hidden}
.eh-card .t i{display:block;height:100%;background:#D8A84A}
.eh-card .v{text-align:right;color:var(--on-art-2)}


.eh-sh{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;
  /* The title takes the room it needs; a 20ch cap was breaking short headings
     onto two lines on a desktop with half the row empty beside them. */

  padding-block:var(--eh-gap) 22px}
.eh-sh > div{flex:1 1 auto;min-width:0}
.eh-sh h2{font-size:clamp(1.6rem,3.4vw,2.6rem);line-height:1.02;letter-spacing:-.03em;font-weight:700;
  margin:0;max-width:none;text-wrap:pretty;color:var(--bone-h)}
.eh-lab{font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--bone-h3);
  display:block;margin-bottom:10px}
.eh-lab.dark{color:#4A6B5F}
.eh-more{background:none;border:0;border-bottom:1px solid var(--hair-h);padding:6px 0;
  min-height:34px;font:inherit;font-size:.86rem;color:var(--bone-h2);cursor:pointer}
.eh-more:hover{color:var(--bone-h)}

.eh-pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}

/* Category banner. The person clicked a photograph on the homepage and landed on
   a filter bar, which read as falling out of the site into a spreadsheet. This is
   the same photograph, carrying the pillar name and the hook line, so the click
   is continuous. Only on a pillar view — plain Discover has no single subject. */
#v-discover:has(.disc-banner:not([hidden]))>.wrap{padding-block-start:0}
/* The selection strip. The catalogue is small on purpose, and nothing on the
   page said so — a short shelf reads as a thin shelf unless you show the
   denominator. Every figure is computed from the catalogue, so it cannot
   overstate: reviewed counts are the same ones printed on each product page. */
/* The selection strip. Two columns on a wide screen: the claim on the left, the
   ratio drawn on the right — 434 marks with 26 lit, so six percent is something
   you see rather than something you work out. No background of its own; it sits
   inside #v-home and takes that section's dark ground. */
.selstrip{border-block:1px solid var(--hair-h);
  padding-block:var(--s6);margin-block:var(--s6);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:var(--s6) var(--s8);align-items:center}
.eh-band .selnums{margin-top:var(--s3)}
.eh-band .selnums b{color:#15181A}
.eh-band .selnums span{color:#4A514D}
.eh-band .selline{color:#4A514D;margin:14px 0 0}
.selnums{display:flex;flex-wrap:wrap;gap:var(--s3) var(--s6);align-items:baseline}
.selnums div{display:flex;align-items:baseline;gap:10px}
.selnums b{font-size:clamp(2.1rem,5.5vw,3.4rem);letter-spacing:-.04em;line-height:1;
  font-variant-numeric:tabular-nums}
.selnums span{font-size:.95rem;max-width:17ch;line-height:1.25}
/* No max-width: the measure is already set by the column, and capping it again
   left a ragged half-empty line on a wide screen. */
.selline{margin:var(--s3) 0 0;font-size:1.02rem;line-height:1.55}

/* The ratio field. One mark per product reviewed; the lit ones are the shelf. */
.selfield{display:grid;grid-template-columns:repeat(auto-fill,minmax(7px,1fr));
  gap:4px;align-content:center}
.selfield i{display:block;aspect-ratio:1;border-radius:2px;
  background:var(--hair-h2);transition:background .2s,transform .2s}
.selfield i.on{background:var(--teal-h);cursor:pointer}
.selfield i.on:hover,.selfield i.on:focus-visible{transform:scale(1.7);
  background:var(--bone-h);outline:none}
.selfieldcap{grid-column:1/-1;margin:12px 0 0;font-size:.82rem;
  color:var(--bone-h3);min-height:1.2em}
@media (max-width:860px){
  .selstrip{grid-template-columns:minmax(0,1fr);gap:var(--s4);margin-block:var(--s4)}
  .selnums{gap:var(--s3) var(--s4)}
  .selnums div{flex:1 1 100%;gap:12px}
  .selnums span{max-width:none}
  .selfield{grid-template-columns:repeat(auto-fill,minmax(6px,1fr));gap:3px}
}
@media (prefers-reduced-motion:reduce){.selfield i{transition:none}}

/* The same argument, one category deep. */
.curline{margin:10px 0 0;font-weight:600;color:var(--text)}

.disc-banner{position:relative;height:clamp(300px,46vw,520px);overflow:hidden;
  display:grid;align-content:end;margin-bottom:0;background:#0A0B0A}
/* The page lifts over the photograph on a curved edge rather than butting
   against it in a hard line. The container is measure-limited, so the white
   ground is painted full-bleed behind it instead of on the box itself. */
#v-discover:has(.disc-banner:not([hidden]))>.wrap.discover{position:relative;
  margin-top:-28px;padding-top:var(--s4);z-index:1}
#v-discover:has(.disc-banner:not([hidden]))>.wrap.discover::before{content:"";
  position:absolute;z-index:-1;inset:0 calc(50% - 50vw);background:var(--bg);
  border-start-start-radius:28px;border-start-end-radius:28px}
.disc-banner .bwrap{position:relative;width:100%;max-width:1200px;
  margin:0 auto;padding:0 24px var(--s4)}
.disc-banner img,.disc-banner video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.disc-banner .g{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(17,20,18,.10) 0%,rgba(17,20,18,.45) 52%,rgba(17,20,18,.88) 100%)}
.disc-banner h1{position:relative;color:#F4F2EC;margin:0;
  font-size:clamp(2rem,5.2vw,3.4rem);letter-spacing:-.03em;line-height:1}
.disc-banner h1 .ar{font-family:var(--ar);font-weight:500;font-size:.5em;
  color:rgba(244,242,236,.78);margin-inline-start:.45em;letter-spacing:0}
.disc-banner p{position:relative;color:rgba(244,242,236,.88);margin:10px 0 0;
  max-width:44ch;font-size:clamp(.95rem,1.5vw,1.15rem);line-height:1.45}

/* Shop by outcome. Someone on Mind wants "I can't sleep", not "adaptogens".
   Built from the catalogue's own goal tags, so it can never drift from stock,
   and each chip carries its real count. */
.goalchips{display:flex;gap:8px;overflow-x:auto;padding:0 0 14px;
  scrollbar-width:none;-webkit-overflow-scrolling:touch}
.goalchips::-webkit-scrollbar{display:none}
.goalchips button{flex:none;white-space:nowrap;border:1px solid var(--line);
  border-radius:999px;padding:8px 14px;font-weight:600;font-size:.88rem;
  color:var(--text-2);background:transparent}
.goalchips button:hover{border-color:var(--text-3);color:var(--text)}
.goalchips button.on{background:var(--mint);border-color:transparent;color:var(--text)}
/* An editorial break inside the grid. Healf puts testimonials here; ours states
   something only this catalogue can say, computed from the products actually on
   screen so it can never contradict the cards around it. Returns "" when the
   list does not support a claim — silence beats a filler sentence. */
.gridnote{grid-column:1/-1;background:var(--mint);border-radius:14px;
  padding:var(--s3) var(--s4);display:flex;flex-wrap:wrap;align-items:baseline;
  gap:6px 14px;margin:var(--s1) 0}
.gridnote b{font-size:clamp(1.05rem,1.8vw,1.35rem);letter-spacing:-.02em}
.gridnote span{color:var(--text-2);font-size:.95rem;flex:1 1 16ch}
.gridnote button{font-weight:600;color:var(--text);text-decoration:underline;
  text-underline-offset:3px;text-align:start}
@media (max-width:700px){.gridnote{flex-direction:column;align-items:flex-start;gap:8px}
  .gridnote span{flex:1 1 auto}}

/* FAQ. Mostly here so a page of product tiles has real indexable prose on it,
   and because the questions people actually ask are about the method. */
.disc-faq{margin-top:var(--s8);border-top:1px solid var(--line);padding-top:var(--s4)}
.disc-faq h2{font-size:clamp(1.3rem,2.4vw,1.8rem);letter-spacing:-.02em;margin:0 0 var(--s2)}
.disc-faq details{border-bottom:1px solid var(--line)}
.disc-faq summary{cursor:pointer;list-style:none;padding:16px 28px 16px 0;
  font-weight:600;position:relative}
.disc-faq summary::-webkit-details-marker{display:none}
.disc-faq summary::after{content:"";position:absolute;inset-inline-end:6px;top:23px;
  width:8px;height:8px;border-inline-end:2px solid var(--text-3);
  border-block-end:2px solid var(--text-3);transform:rotate(45deg);
  transition:transform .18s ease}
.disc-faq details[open] summary::after{transform:rotate(-135deg);top:26px}
.disc-faq .a{padding:0 0 18px;color:var(--text-2);max-width:68ch;line-height:1.6}
.disc-faq .a p{margin:0 0 10px}
.disc-faq .a p:last-child{margin:0}
.goalchips button .n{font-variant-numeric:tabular-nums;color:var(--text-3);
  margin-inline-start:6px;font-weight:500}
.goalchips button.on .n{color:var(--text-2)}
@media (max-width:820px){
  .disc-banner .bwrap{padding:0 16px var(--s3)}
  .disc-banner{margin-bottom:var(--s3)}
  .goalchips{margin-inline:-16px;padding-inline:16px;
    -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 24px),transparent);
    mask-image:linear-gradient(to right,#000 calc(100% - 24px),transparent)}
}
.eh-pill{position:relative;aspect-ratio:3/4;border-radius:14px;overflow:hidden;display:flex;
  flex-direction:column;justify-content:space-between;padding:20px;border:0;background:var(--ink-h2);
  text-align:start;cursor:pointer;color:var(--bone-h)}
.eh-pill img,.eh-pill video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .6s cubic-bezier(.2,.7,.3,1)}
.eh-pill:hover img,.eh-pill:hover video{transform:scale(1.04)}
.eh-pill .g{position:absolute;inset:0;background:
  linear-gradient(0deg,rgba(6,7,6,.42) 0%,rgba(6,7,6,0) 34%),
  linear-gradient(180deg,rgba(6,7,6,.58) 0%,rgba(6,7,6,0) 30%)}
.eh-pill b{position:relative;font-size:clamp(1.3rem,2.3vw,1.9rem);letter-spacing:-.03em;color:var(--on-art)}
.eh-pill b .ar{font-family:var(--ar);font-weight:500;font-size:.7em;color:var(--on-art-2);
  margin-inline-start:10px;letter-spacing:0}
/* No max-width: the card already sets the measure, and capping it at 26ch made
   the caption wrap at about 60%% of the card and leave the rest empty. */
.eh-pill span{position:relative;font-size:.86rem;color:var(--on-art-2);line-height:1.45}

.eh-cats,.eh-tiers{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(20px,4vw,60px);
  align-items:center;padding-block:clamp(40px,5vw,70px)}
.eh-tiers h2{font-size:clamp(1.6rem,3.4vw,2.6rem);line-height:1.02;letter-spacing:-.03em;font-weight:700;
  margin:0 0 12px;max-width:16ch;color:var(--bone-h)}
.eh-tiers p{color:var(--bone-h2);margin:0 0 18px;max-width:46ch;font-size:.95rem}
#v-home .cpchip{border-color:var(--ink-h3);background:var(--ink-h2);color:var(--bone-h2)}
#v-home .cpchip:hover{border-color:var(--teal-h);color:var(--bone-h)}
/* Selected reads as a solid pill, like the primary button. It used to take a
   near-black background and the page's near-black ink: invisible text. */
#v-home .cpchip[aria-pressed="true"]{border-color:var(--bone-h);background:var(--bone-h);
  color:var(--ink-h);font-weight:600}
#v-home .cpchip[aria-pressed="true"]:hover{color:var(--ink-h)}
#v-home .cpout{border-top-color:var(--ink-h3);color:var(--bone-h2);margin-top:var(--s3)}
#v-home .cpout b{color:var(--bone-h)}
.vegdot{color:#5FB49F;margin-inline-start:8px;letter-spacing:.06em}
.eh-catlist{display:flex;flex-direction:column;gap:2px;align-items:flex-start}
.eh-catlist button{background:none;border:0;padding:0;font:inherit;cursor:pointer;text-align:start;
  font-size:clamp(1.7rem,4.2vw,3.1rem);font-weight:600;letter-spacing:-.035em;line-height:1.16;
  color:var(--bone-h3);transition:color .2s ease}
.eh-catlist button:hover{color:var(--bone-h)}
.eh-catlist sup{font-size:.7rem;font-weight:500;letter-spacing:0;color:var(--teal-h);margin-inline-start:8px}
.eh-catshot{aspect-ratio:4/3;border-radius:14px;overflow:hidden;background:var(--ink-h2)}
.eh-catshot img,.eh-catshot video{display:block;width:100%;height:100%;object-fit:cover}

.eh-rail{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.eh-pr{background:var(--ink-h2);border:0;border-radius:12px;overflow:hidden;display:flex;
  flex-direction:column;text-align:start;cursor:pointer;color:var(--bone-h);padding:0}
.eh-pr .shot{aspect-ratio:1;position:relative;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(155deg,#2C302C,#191C19);overflow:hidden}
.eh-pr .shot .art{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.eh-pr .shot em{font-style:normal;font-size:.68rem;color:var(--bone-h3);position:absolute;left:12px;bottom:11px}
.eh-pr .shot .sc{position:absolute;right:11px;top:11px;background:var(--bone-h);color:#0A0B0A;
  border-radius:999px;font-size:.74rem;font-weight:700;padding:4px 9px}
.eh-pr .body{padding:14px;display:flex;flex-direction:column;gap:5px;flex:1}
.eh-pr .br{font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--bone-h3)}
.eh-pr .nm{font-size:.92rem;font-weight:600;line-height:1.25}
.eh-pr .pz{font-size:.86rem;font-weight:600}
.eh-pr .wk{font-size:.74rem;color:var(--bone-h3);margin-top:auto;padding-top:8px}
.eh-pr .wk.amber{color:var(--gold-h)}

/* Bottom margin is 0: the next section head already brings its own top padding,
   and stacking the two left a ~160px void between the band and The Letter. */
/* This band used to be a bone panel on a black page, so its background was
   var(--bone-h). Flipping the page to white turned --bone-h into the ink
   colour and the panel went dark-on-dark. It is now a soft mint panel in its
   own right, which also gives the white page one block of colour. */
.eh-band{background:#ECF3EF;color:#15181A;border-radius:18px;padding:clamp(26px,4vw,54px);
  margin-block:var(--eh-gap) 0;display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
  gap:clamp(22px,3vw,40px) clamp(22px,4vw,54px);align-items:start}
/* The headline runs the full width of the panel rather than being capped at
   16ch inside the left column, which wrapped it to three lines and left the
   right half of the row empty above the bars. */
.eh-band h2{grid-column:1/-1;font-size:clamp(1.7rem,3.6vw,2.9rem);line-height:1.02;
  letter-spacing:-.03em;margin:0;font-weight:700;max-width:none;text-wrap:pretty;color:#15181A}
.eh-band p{color:#4A514D;max-width:46ch;margin:16px 0 0;font-size:.95rem}
.eh-qs{display:flex;flex-direction:column;gap:12px}
.eh-q{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;
  border-bottom:1px solid rgba(21,24,26,.14);padding-bottom:11px;font-size:.98rem;font-weight:600}
.eh-q:last-child{border-bottom:0}
.eh-q i{font-style:normal;font-size:.76rem;font-weight:500;color:#6B726D;display:block;margin-top:3px}
.eh-q b{color:#1E6B5A}

.eh-arts{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;padding-bottom:clamp(44px,6vw,80px)}
.eh-art-c{border:1px solid var(--ink-h3);border-radius:12px;padding:20px;display:flex;
  flex-direction:column;gap:9px;background:none;text-align:start;cursor:pointer;color:var(--bone-h);
  transition:border-color .2s ease}
.eh-art-c:hover{border-color:rgba(244,242,236,.3)}
.eh-art-c .k{font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--teal-h)}
.eh-art-c h3{font-size:1.1rem;line-height:1.24;letter-spacing:-.02em;margin:0;font-weight:600}
.eh-art-c p{margin:0;font-size:.86rem;color:var(--bone-h3);line-height:1.5}
.eh-art-c .r{margin-top:auto;padding-top:10px;font-size:.82rem;color:var(--bone-h2)}

/* The selection ledger. The same argument as the homepage strip, at full length:
   one row per category, the filled part being what we list. Built from the
   catalogue, so it can never disagree with a product page. */
.ledger{margin:var(--s4) 0 var(--s5);display:grid;gap:var(--s3)}
.ledgernums{display:flex;flex-wrap:wrap;gap:12px var(--s6);align-items:baseline}
.ledgernums div{display:flex;gap:9px;align-items:baseline}
.ledgernums b{font-size:clamp(1.9rem,4.4vw,2.8rem);letter-spacing:-.04em;line-height:1;
  font-variant-numeric:tabular-nums}
.ledgernums span{color:var(--text-2);font-size:.92rem}
.ledgerrows{display:grid;gap:9px}
.ledgerrow{display:grid;grid-template-columns:minmax(90px,124px) minmax(0,1fr) auto;
  gap:14px;align-items:center;font-size:.9rem}
.ledgerrow .nm{color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ledgerrow .tr{height:10px;border-radius:5px;background:var(--line);overflow:hidden}
.ledgerrow .tr i{display:block;height:100%;background:var(--accent);border-radius:5px}
.ledgerrow .ct{font-variant-numeric:tabular-nums;color:var(--text-3);font-size:.84rem;
  white-space:nowrap}
@media (max-width:560px){
  .ledgerrow{grid-template-columns:minmax(76px,96px) minmax(0,1fr) auto;font-size:.84rem}
}

/* Ask Aafiiya. The Advisor had no entry point on the homepage at all; this sits
   straight after the category list, where someone has just failed to find the
   thing they came for. */
/* The Advisor is input-first, so the block looks like an input rather than a
   poster: a field, the prompts under it, and one worked example beside it so the
   shape of an answer is visible before anyone types. */
.eh-ask{background:var(--ink-h2);border:0;border-radius:18px;
  padding:clamp(24px,3.4vw,48px);margin-top:var(--eh-gap);display:grid;
  gap:clamp(24px,3vw,44px);align-items:center}
/* The heading runs the full width of the block; boxed into the left column it
   broke onto two lines with the worked example sitting empty beside it. */
.eh-ask h2{grid-column:1/-1}
.eh-ask > div{display:grid;gap:18px;justify-items:start;min-width:0}
.eh-ask h2{font-size:clamp(1.6rem,3.2vw,2.4rem);letter-spacing:-.03em;margin:0;
  font-weight:700;max-width:none;text-wrap:pretty;color:var(--bone-h)}
.eh-askbar{width:100%;display:flex;align-items:center;gap:14px;overflow:hidden;
  background:var(--ink-h);border:1px solid var(--hair-h);border-radius:999px;padding:7px 7px 7px 22px;
  background:none;font:inherit;text-align:start;cursor:pointer;
  transition:border-color .15s,box-shadow .15s}
.eh-askbar:hover{border-color:var(--bone-h2);box-shadow:0 1px 14px rgba(20,24,26,.06)}
.eh-askbar > span:first-child{color:var(--bone-h3);font-size:.98rem;flex:1;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.eh-askgo{flex:none;background:var(--bone-h);color:var(--ink-h);border-radius:999px;
  padding:11px 19px;font-weight:700;font-size:.88rem;line-height:1}
.eh-askchips{display:flex;flex-wrap:wrap;gap:8px}
.eh-askchips button{border:1px solid var(--hair-h);border-radius:999px;padding:9px 16px;
  font:inherit;font-weight:600;font-size:.88rem;color:var(--bone-h);background:none;
  cursor:pointer;transition:border-color .15s}
.eh-askchips button:hover{border-color:var(--bone-h2)}

.eh-askdemo{display:grid;gap:10px;justify-items:start;min-width:0}
.eh-askq{background:var(--ink-h);border-radius:16px 16px 16px 4px;padding:12px 18px;
  font-size:.94rem;color:var(--bone-h);max-width:100%}
.eh-aska{background:var(--ink-h);border:1px solid var(--hair-h);border-radius:4px 16px 16px 16px;padding:16px 18px;
  display:grid;gap:4px;width:100%}
.eh-aska .sc{font-size:1.5rem;font-weight:700;letter-spacing:-.03em;color:var(--teal-h);
  font-variant-numeric:tabular-nums}
.eh-aska .br{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--bone-h3)}
.eh-aska .nm{font-weight:600;font-size:.98rem;line-height:1.25}
.eh-aska .wh{font-size:.88rem;color:var(--bone-h2);margin-top:4px}
@media (min-width:900px){.eh-ask{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:start}}

/* The Gulf module. Four things a person who has moved here recognises, each one
   tied to something the catalogue actually checks. */
.eh-place{background:var(--ink-h2);border-radius:18px;padding:clamp(24px,4vw,56px);
  margin-top:var(--eh-gap);display:grid;gap:clamp(20px,2.6vw,30px)}
.eh-place h2{font-size:clamp(1.7rem,3.6vw,2.8rem);letter-spacing:-.03em;margin:0;
  font-weight:700;max-width:none;text-wrap:pretty;color:var(--bone-h)}
.eh-placerow{display:grid;gap:20px;
  grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr))}
.eh-placec{display:grid;gap:7px;border-top:2px solid var(--bone-h);padding-top:14px}
.eh-placec b{font-size:1.02rem;letter-spacing:-.02em;color:var(--bone-h)}
.eh-placec p{margin:0;font-size:.92rem;color:var(--bone-h2);line-height:1.5}

.eh-nl{border-top:1px solid var(--ink-h3);margin-top:clamp(44px,6vw,80px);
  padding-block:clamp(34px,5vw,60px) clamp(44px,6vw,80px);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,4vw,50px);align-items:center}
.eh-nl h2{font-size:clamp(1.4rem,2.6vw,2rem);letter-spacing:-.03em;margin:0;font-weight:700;color:var(--bone-h)}
.eh-nl p{color:var(--bone-h3);margin:10px 0 0;font-size:.92rem;max-width:44ch}
.eh-nlform{display:flex;gap:9px;flex-wrap:wrap}
.eh-nlform input{flex:1;min-width:190px;background:var(--ink-h2);border:1px solid var(--ink-h3);
  border-radius:999px;padding:13px 20px;color:var(--bone-h);font:inherit;font-size:.92rem}
.eh-nlform input:focus{outline:2px solid var(--teal-h);outline-offset:2px}

@media (max-width:980px){
  .eh-cats,.eh-band,.eh-nl{grid-template-columns:minmax(0,1fr)}
  .eh-rail{grid-template-columns:repeat(2,1fr)}
  .eh-arts{grid-template-columns:1fr}
}
@media (max-width:620px){
  .eh-pillars{grid-template-columns:1fr}
  .eh-pill{aspect-ratio:16/11}
}
.geonudge{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:60;display:flex;align-items:center;gap:12px;max-width:min(92vw,560px);background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:0 8px 30px rgba(0,0,0,.12);padding:12px 14px;font-size:.9rem;color:var(--text-2);line-height:1.45}
.geonudge .gnx{border:0;background:none;color:var(--text-3);font-size:1.1rem;line-height:1;padding:4px 6px;cursor:pointer}
@media (max-width:560px){.geonudge{flex-wrap:wrap}}
@media (max-width:620px){.cpchips{flex-direction:column;align-items:stretch}.cpchip{text-align:center}}
.tiers-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s2)}
.tiercard{border:1px solid var(--line);border-radius:20px;padding:var(--s4) var(--s3);text-align:start;display:flex;flex-direction:column;gap:10px;background:var(--surface);transition:border-color .15s,background .15s}
.tiercard:hover{border-color:var(--accent)}
.tiercard[aria-pressed="true"]{border-color:var(--accent);background:var(--elev)}
.tiercard .tno{font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.tiercard h3{font-size:1.3rem}
.tiercard .cities{font-size:.82rem;color:var(--text-3);line-height:1.5}
.tiercard .prob{font-size:.9rem;color:var(--text-2);line-height:1.5}
.tiercard .does{font-size:.88rem;color:var(--text);line-height:1.5;border-top:1px solid var(--line);padding-top:10px;margin-top:2px}
.tiercard .ship{font-size:.8rem;color:var(--text-3)}
@media (max-width:900px){.tiers-grid{grid-template-columns:1fr}}
.evalbar{display:flex;gap:8px;flex-wrap:wrap}
.evalstatus{font-size:.9rem;color:var(--text-2);font-variant-numeric:tabular-nums}
.evalrow{border:1px solid var(--line);border-radius:14px;padding:var(--s2) var(--s3);margin-bottom:10px;background:var(--surface)}
.evalrow.pass{border-inline-start:3px solid var(--accent)}
.evalrow.fail{border-inline-start:3px solid #A3302B;background:#FFF8F7}
.evalrow .eh{display:flex;gap:10px;align-items:center;font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--text-3)}
.evalrow .eh b{color:var(--accent)}
.evalrow.fail .eh b{color:#A3302B}
.evalrow .q{font-weight:600;margin-top:6px}
.evalrow .why{font-size:.86rem;color:var(--text-2);margin-top:4px}
.evalrow .fails{font-size:.84rem;color:#A3302B;margin-top:8px;font-family:ui-monospace,monospace}
.evalrow details{margin-top:8px}
.evalrow summary{font-size:.84rem;color:var(--text-3);cursor:pointer}
.evalrow .reply{white-space:pre-wrap;font-size:.9rem;color:var(--text-2);margin-top:6px;padding:var(--s2);background:var(--tint);border-radius:10px}
.evidence{margin-top:var(--s3);border:1px solid var(--line);border-radius:18px;padding:var(--s3);background:var(--surface)}
.ev-row{display:flex;justify-content:space-between;gap:var(--s2);padding:8px 0;border-bottom:1px solid var(--line-soft,var(--line));font-size:.93rem}
.ev-row span{color:var(--text-3)}
.ev-row b{font-weight:600;text-align:end}
.ev-basis{font-size:.86rem;color:var(--text-2);margin-top:10px;line-height:1.5}
.ev-src{display:block;font-size:.84rem;color:var(--accent);margin-top:8px;text-decoration:none;line-height:1.4}
.ev-src:hover{text-decoration:underline;text-underline-offset:3px}
.ev-src.unread{color:var(--text-3)}
.ev-gap{font-size:.84rem;color:var(--gold);background:var(--gold-l);border-radius:10px;padding:10px 12px;margin-top:10px;line-height:1.5}
.ev-prov{font-size:.8rem;margin-top:12px;padding-top:10px;border-top:1px solid var(--line);color:var(--text-3);line-height:1.5}
.ev-prov.verified{color:var(--accent)}
.ev-prov.corrected{color:var(--gold)}
.authsheet .ah{display:flex;justify-content:space-between;align-items:center}
.authsheet p{color:var(--text-2);font-size:.92rem;line-height:1.55}
.authform{display:flex;flex-direction:column;gap:var(--s2);margin-top:var(--s2)}
.authform label{display:flex;flex-direction:column;gap:5px;font-size:.85rem;color:var(--text-3)}
/* The consent row is a checkbox NEXT TO its label, not above it. It inherited
   the column layout from every other field in the form, which put a lone
   tickbox on one line and orphaned text underneath. */
.authform label.authconsent{flex-direction:row;align-items:flex-start;gap:10px}
.authform label.authconsent span{flex:1}
.authform input{font:inherit;padding:12px 14px;border-radius:12px;border:1px solid var(--line);background:var(--surface);color:var(--text)}
.authswap{font-size:.88rem;color:var(--text-2);margin-top:var(--s2)}
.authswap button{color:var(--accent);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.authnote{font-size:.85rem;color:var(--text-2);margin-top:var(--s2);padding-top:var(--s2);border-top:1px solid var(--line)}
.authproto{font-size:.76rem;color:var(--text-3);margin-top:var(--s1)}
.authconsent{display:flex;gap:9px;align-items:flex-start;font-size:.85rem;color:var(--text-2);line-height:1.45;cursor:pointer;margin-top:2px}
.authconsent input{accent-color:var(--accent);width:16px;height:16px;flex:none;margin-top:2px}
.autherr{background:color-mix(in srgb,var(--err) 10%,transparent);border:1px solid color-mix(in srgb,var(--err) 40%,transparent);color:var(--err);border-radius:10px;padding:9px 12px;font-size:.85rem;margin-top:var(--s2)}
.authsteps{display:flex;gap:6px;margin:var(--s2) 0}
.authsteps span{width:26px;height:4px;border-radius:99px;background:var(--line)}
.authsteps span.on{background:var(--accent)}
.authsteps span.done{background:color-mix(in srgb,var(--accent) 50%,var(--line))}
.acctrow{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid var(--line);font-size:.92rem}
.acctrow span{color:var(--text-3)}
#acctBtn{border:1px solid var(--line);border-radius:999px;padding:7px 13px!important;font-size:.85rem!important}
#acctBtn:hover{border-color:var(--accent)}
/* your numbers + your day */
.numgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:var(--s2);margin-top:var(--s3)}
.numfield label{display:block;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3);margin-bottom:6px}
.numfield input{width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:10px;background:var(--bg);color:var(--text-1);font:inherit;font-size:.95rem}
.numfield input:focus{outline:none;border-color:var(--accent)}
.numfield small{display:block;font-size:.74rem;color:var(--text-3);margin-top:5px}
.flagrow{display:flex;flex-wrap:wrap;gap:8px;margin-top:var(--s3)}
.flagrow button{border:1px solid var(--line);background:var(--bg);color:var(--text-2);border-radius:999px;padding:8px 14px;font:inherit;font-size:.86rem;cursor:pointer;transition:.15s}
.flagrow button:hover{border-color:var(--accent)}
.flagrow button.on{background:var(--text-1);color:var(--bg);border-color:var(--text-1)}
.band-out{margin-top:var(--s4);border-top:1px solid var(--line);padding-top:var(--s4)}
.uprow{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:var(--s3)}
.upnote{font-size:.84rem;color:var(--text-3);max-width:52ch;line-height:1.45}
.upread{margin-top:var(--s2);font-size:.86rem;color:var(--text-2);background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px 14px;line-height:1.55}
.upread b{color:var(--text)}
.upread .miss{color:var(--text-3)}
.formcard{border:1px solid var(--line);border-radius:14px;padding:var(--s3);margin-top:var(--s2);background:var(--bg)}
.formcard h3,.formcard h4{font-size:1.02rem;margin:0}
.formcard .pref{margin-top:6px;font-size:.95rem;color:var(--text-1)}
.formcard .pref b{border-bottom:2px solid var(--accent)}
.formcard .why{margin-top:8px;font-size:.9rem;color:var(--text-2);line-height:1.55}
.srcchip{display:inline-block;font-size:.72rem;letter-spacing:.05em;text-transform:uppercase;padding:3px 9px;border-radius:999px;margin-top:10px}
.srcchip.ok{background:rgba(24,120,80,.11);color:#186c50}
.srcchip.no{background:rgba(150,110,20,.13);color:#8a6a15}
.srcchip.stop{background:rgba(170,40,40,.11);color:#a33}
.matchrow{display:flex;flex-wrap:wrap;gap:8px;margin-top:11px}
.matchrow a,.matchrow button{border:1px solid var(--line);border-radius:999px;padding:6px 12px;font:inherit;font-size:.83rem;background:none;color:var(--text-1);cursor:pointer}
.matchrow button:hover{border-color:var(--accent)}
.slot{border-left:2px solid var(--line);padding:0 0 var(--s4) var(--s3);position:relative}
.slot:last-child{padding-bottom:0}
.slot:before{content:"";position:absolute;left:-5px;top:6px;width:8px;height:8px;border-radius:50%;background:var(--accent)}
.slot .st{font-size:.78rem;letter-spacing:.07em;text-transform:uppercase;color:var(--text-3)}
.slot h4{margin:4px 0 2px;font-size:1.15rem}
.slot .sw{font-size:.88rem;color:var(--text-2)}
.slotitem{display:flex;gap:12px;align-items:center;margin-top:var(--s2);border:1px solid var(--line);border-radius:12px;padding:10px 12px}
.slotitem .art{width:44px;height:52px;flex:none;border-radius:7px;overflow:hidden;background:var(--bg-2)}
.slotitem b{display:block;font-size:.93rem}
.slotitem small{display:block;font-size:.8rem;color:var(--text-3)}
.clash{border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:12px;padding:var(--s3);margin-top:var(--s2);background:var(--bg-2)}
.clash b{font-size:.95rem}
.clash p{margin:5px 0 0;font-size:.89rem;color:var(--text-2);line-height:1.55}
@media(max-width:860px){.routine-grid{grid-template-columns:1fr!important}}
/* --- mobile card hardening --- */
@media (max-width:760px){
  .grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,215px),1fr));gap:var(--s2)}
  .card .body{padding:var(--s2);gap:6px}
  .card .brand{font-size:.66rem;letter-spacing:.05em}
  .card .name{font-size:.97rem;line-height:1.22;overflow-wrap:anywhere;hyphens:auto}
  .card .why{font-size:.79rem;-webkit-line-clamp:2}
  .card .chip{font-size:.64rem;padding:2px 6px}
  .card .foot{flex-wrap:wrap;gap:6px;align-items:flex-end;padding-top:var(--s1)}
  .card .foot>div:first-child{flex:1 1 100%;min-width:0}
  .card .foot b{font-size:.94rem;white-space:nowrap}
  .card .foot span{font-size:.7rem;line-height:1.3;display:block;overflow-wrap:anywhere}
  .card .actions{flex:0 0 auto;margin-inline-start:auto}
  .icon-btn{width:32px;height:32px;font-size:.9rem}
  .card .buy{width:100%;justify-content:center;text-align:center;font-size:.78rem;padding-inline:6px;min-height:40px;line-height:1.2;overflow-wrap:anywhere}
  .card .buy .bp{display:none}
}
@media (max-width:430px){
  .grid{grid-template-columns:1fr;gap:12px}
  .card{flex-direction:row;border:1px solid var(--line);border-radius:16px;overflow:hidden;align-items:stretch}
  .card:hover{border-color:var(--line)}
  .card .artbtn{flex:0 0 116px;width:116px}
  .card .art{aspect-ratio:auto;height:100%;min-height:150px;border-bottom:0;border-inline-end:1px solid var(--line);border-radius:0;position:relative}
  .card .art svg.pack{width:82%;height:82%}
  .score-pill{top:8px;inset-inline-start:8px;font-size:.72rem;padding:3px 7px}
  .card .body{flex:1 1 auto;min-width:0;padding:var(--s2) var(--s3)}
  .card .why{-webkit-line-clamp:2;font-size:.78rem}
  .card .buy{margin-top:var(--s1);min-height:38px}
  .card .buy .bp{display:none}
  .card .foot>div:first-child{flex:1 1 0;min-width:0}
  .card .foot{align-items:center}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}