/* ============================================================
   Patch Advisor — dark premium design system
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root{
  /* ---- light is the default. Dark lives under [data-theme="dark"] below. ---- */

  /* canvas — warm-neutral whites, not pure grey, so product shots sit nicely */
  --bg:#ffffff;
  --bg-1:#fafbfc;
  --bg-2:#f2f5f7;
  --panel:#ffffff;
  --panel-2:#f5f8f9;
  --line:#e4e9ed;
  --line-2:#cdd6dd;

  /* ink — near-black with a cool cast, never pure #000 */
  --ink:#0e1721;
  --ink-2:#4c5b6a;
  --ink-3:#7c8b9a;

  /* brand — deepened for contrast on white. The dark theme lightens these. */
  --a1:#0ea48f;
  --a2:#0b83c9;
  --a3:#6d4aec;
  --accent:#0ea48f;
  --on-accent:#ffffff;               /* text sitting on the gradient */
  --grad:linear-gradient(120deg,var(--a1) 0%,var(--a2) 55%,var(--a3) 100%);
  --grad-soft:linear-gradient(120deg,rgba(14,164,143,.07),rgba(11,131,201,.055) 55%,rgba(109,74,236,.06));

  /* semantic */
  --ok:#0f8f5f;
  --warn:#a06a06;
  --danger:#d2384f;

  --r-xs:8px; --r-sm:12px; --r:18px; --r-lg:26px; --r-xl:34px;

  /* shadows: soft and cool-tinted, the way real light behaves on white */
  --sh:0 1px 2px rgba(16,32,45,.05), 0 8px 22px rgba(16,32,45,.06);
  --sh-lg:0 2px 6px rgba(16,32,45,.06), 0 22px 50px rgba(16,32,45,.10);
  /* product shots sit flat on the canvas — no drop shadow. Restore with
     drop-shadow(0 10px 20px rgba(16,32,45,.13)) / (0 18px 38px …,.17) */
  --img-sh:none;
  --img-sh-lg:none;
  --glow:0 0 0 1px rgba(14,164,143,.28), 0 10px 34px rgba(14,164,143,.14);
  --halo:0 0 30px -8px rgba(14,164,143,.28), 0 0 56px -12px rgba(109,74,236,.16);
  --halo-on:0 0 40px -6px rgba(14,164,143,.4), 0 0 72px -10px rgba(109,74,236,.24);

  --ease:cubic-bezier(.22,.9,.28,1);
  --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --head-h:64px;
}

/* ---------------------------------------------------------- dark mode */
[data-theme="dark"]{
  --bg:#07090c;
  --bg-1:#0b0e13;
  --bg-2:#10141b;
  --panel:rgba(255,255,255,.032);
  --panel-2:rgba(255,255,255,.055);
  --line:rgba(255,255,255,.085);
  --line-2:rgba(255,255,255,.15);

  --ink:#f2f5f7;
  --ink-2:#a9b4c2;
  --ink-3:#6f7b8c;

  --a1:#2ee6c5;
  --a2:#38bdf8;
  --a3:#8b7cf6;
  --accent:#2ee6c5;
  /* Was --on-accent:var(--on-accent) — a custom property cannot refer to
     itself, so it resolved to nothing and everything using it silently fell
     back to inherited ink. This states the colour it was already landing on,
     so var(--on-accent) works for real. */
  --on-accent:#f2f5f7;
  --grad-soft:linear-gradient(120deg,rgba(46,230,197,.16),rgba(56,189,248,.13) 55%,rgba(139,124,246,.14));

  --ok:#34d399;
  --warn:#fbbf24;
  --danger:#fb7185;

  --sh:0 1px 2px rgba(0,0,0,.4), 0 12px 32px rgba(0,0,0,.34);
  --sh-lg:0 2px 6px rgba(0,0,0,.4), 0 30px 70px rgba(0,0,0,.5);
  --img-sh:none;
  --img-sh-lg:none;
  --glow:0 0 0 1px rgba(46,230,197,.24), 0 12px 44px rgba(46,230,197,.16);
  --halo:0 0 34px -6px rgba(46,230,197,.34), 0 0 64px -10px rgba(139,124,246,.26);
  --halo-on:0 0 44px -4px rgba(46,230,197,.5), 0 0 84px -8px rgba(139,124,246,.38);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;font-family:var(--font);background:var(--bg);color:var(--ink);
  font-size:16px;line-height:1.62;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(820px 460px at 12% -10%, rgba(14,164,143,.07), transparent 64%),
    radial-gradient(760px 480px at 88% 0%,   rgba(109,74,236,.055), transparent 64%),
    radial-gradient(960px 520px at 50% 108%, rgba(11,131,201,.04), transparent 64%);
}
[data-theme="dark"] body::before{
  background:
    radial-gradient(760px 420px at 12% -8%, rgba(46,230,197,.10), transparent 62%),
    radial-gradient(700px 460px at 88% 2%,  rgba(139,124,246,.09), transparent 62%),
    radial-gradient(900px 500px at 50% 110%, rgba(56,189,248,.06), transparent 62%);
}
main,header,footer{position:relative;z-index:1}

img{max-width:100%;display:block;height:auto}
a{color:var(--ink);text-decoration:none}
h1,h2,h3,h4{margin:0 0 .5em;line-height:1.14;font-weight:700;letter-spacing:-.03em}
h1{font-size:clamp(2.1rem,6vw,4.1rem);font-weight:800;letter-spacing:-.04em}
h2{font-size:clamp(1.6rem,3.6vw,2.5rem)}
h3{font-size:1.18rem;letter-spacing:-.02em}
h4{font-size:1rem;letter-spacing:-.01em}
p{margin:0 0 1em}
ul{margin:0;padding:0;list-style:none}
::selection{background:color-mix(in srgb, var(--a1) 22%, transparent)}

.wrap{max-width:1200px;margin:0 auto;padding:0 20px}
.narrow{max-width:820px;margin:0 auto;padding:0 20px}
.muted{color:var(--ink-2)}
.tiny{font-size:.8rem;color:var(--ink-3);line-height:1.55}
.center{text-align:center}
.skip{position:absolute;left:-9999px}
.skip:focus{left:14px;top:14px;background:var(--bg-2);padding:10px 16px;z-index:200;border-radius:10px}

.grad-text{
  background:var(--grad);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}

/* ---------------------------------------------------------- header */
.hdr{
  position:sticky;top:0;z-index:120;height:var(--head-h);
  display:flex;align-items:center;
  background:color-mix(in srgb, var(--bg) 72%, transparent);
  backdrop-filter:blur(20px) saturate(1.8);
  -webkit-backdrop-filter:blur(20px) saturate(1.8);
  border-bottom:1px solid var(--line);
}
.hdr-in{display:flex;align-items:center;gap:16px;width:100%}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:1.05rem;letter-spacing:-.02em;flex:none}
.logo-mark{
  width:30px;height:30px;border-radius:9px;background:var(--grad);flex:none;
  display:grid;place-items:center;color:var(--on-accent);font-weight:900;font-size:.95rem;
  box-shadow:0 4px 14px color-mix(in srgb, var(--a1) 34%, transparent);
}
.nav{display:flex;align-items:center;gap:2px;margin-left:14px}
.nav a{
  padding:9px 14px;border-radius:10px;color:var(--ink-2);font-weight:520;font-size:.925rem;
  transition:.18s var(--ease);
}
.nav a:hover,.nav a.on{color:var(--ink);background:var(--panel-2)}
.hdr-end{margin-left:auto;display:flex;align-items:center;gap:9px}

.ref-badge{
  display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border-radius:999px;
  background:var(--panel);border:1px solid var(--line);font-size:.8rem;color:var(--ink-2);
}
.ref-badge b{color:var(--ink);font-weight:600}
.ref-dot{width:6px;height:6px;border-radius:50%;background:var(--a1);box-shadow:0 0 7px color-mix(in srgb, var(--a1) 70%, transparent)}

.icon-btn{
  width:38px;height:38px;border-radius:11px;border:1px solid var(--line);background:var(--panel);
  color:var(--ink-2);display:grid;place-items:center;cursor:pointer;transition:.18s var(--ease);
  font-size:1rem;padding:0;
}
.icon-btn:hover{color:var(--ink);border-color:var(--line-2);background:var(--panel-2)}
.burger{display:none}
.burger span{display:block;width:17px;height:1.5px;background:currentColor;border-radius:2px;transition:.24s var(--ease)}
.burger span+span{margin-top:4px}
.burger.on span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.burger.on span:nth-child(2){opacity:0}
.burger.on span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}

/* mobile drawer */
.drawer{
  position:fixed;inset:var(--head-h) 0 0;z-index:110;background:var(--bg);
  transform:translateX(100%);transition:transform .3s var(--ease);
  padding:20px;overflow-y:auto;display:none;
}
.drawer.open{transform:none}
.drawer a{
  display:flex;align-items:center;justify-content:space-between;padding:15px 4px;
  border-bottom:1px solid var(--line);font-size:1.12rem;font-weight:560;color:var(--ink);
}
.drawer a span{color:var(--ink-3);font-size:.85rem;font-weight:400}
.drawer .btn{margin-top:22px;width:100%;justify-content:center}

/* ---------------------------------------------------------- buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:13px 24px;border-radius:13px;border:0;cursor:pointer;
  font:inherit;font-size:.94rem;font-weight:640;letter-spacing:-.01em;
  background:var(--grad);color:var(--on-accent);
  transition:transform .2s var(--ease), box-shadow .2s var(--ease), opacity .2s;
  box-shadow:0 5px 16px color-mix(in srgb, var(--a1) 26%, transparent);
  position:relative;overflow:hidden;white-space:nowrap;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 26px color-mix(in srgb, var(--a1) 34%, transparent)}
.btn:active{transform:translateY(0)}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
.btn-ghost{
  background:var(--panel);color:var(--ink);border:1px solid var(--line);box-shadow:none;
}
.btn-ghost:hover{background:var(--panel-2);border-color:var(--line-2);box-shadow:none}
.btn-sm{padding:9px 16px;font-size:.85rem;border-radius:10px}
.btn-lg{padding:16px 32px;font-size:1rem;border-radius:15px}
.btn-block{width:100%}

.spinner{
  width:15px;height:15px;border:2px solid rgba(255,255,255,.35);border-top-color:var(--on-accent);
  border-radius:50%;animation:spin .7s linear infinite;
}
[data-theme="dark"] .spinner{border-color:rgba(0,0,0,.22)}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------------------------------------------------------- hero */
.hero{padding:clamp(52px,9vw,104px) 0 44px;text-align:center;position:relative}
.hero h1{max-width:16ch;margin:0 auto .28em}
.hero .lede{max-width:52ch;margin:0 auto 34px;font-size:clamp(1rem,1.9vw,1.16rem);color:var(--ink-2)}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;padding:7px 15px;border-radius:999px;
  background:var(--panel);border:1px solid var(--line);
  font-size:.775rem;font-weight:600;letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink-2);margin-bottom:22px;
}
.eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--a1);
  box-shadow:0 0 9px color-mix(in srgb, var(--a1) 70%, transparent);animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}

/* ---------------------------------------------------------- advisor */
.advisor{max-width:760px;margin:0 auto}
/* The halo is a box-shadow rather than a blurred pseudo-element: a negative
   z-index child paints over its own parent's background inside a stacking
   context, which washed out the input. A shadow has no such problem, and it
   also stops the glow bleeding down over the example chips. */
.ask{
  position:relative;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:8px;
  box-shadow:var(--sh-lg), var(--halo);
  transition:box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.ask:focus-within{
  border-color:color-mix(in srgb, var(--a1) 45%, transparent);
  box-shadow:var(--sh-lg), var(--halo-on);
}
[data-theme="dark"] .ask{background:var(--bg-1)}
.ask textarea{
  width:100%;border:0;background:transparent;resize:none;outline:none;
  font:inherit;font-size:1.06rem;line-height:1.6;color:var(--ink);
  padding:18px 18px 6px;min-height:96px;
}
.ask textarea::placeholder{color:var(--ink-3)}
.ask-bar{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px 12px 10px 18px;border-top:1px solid var(--line);
}
.ask-hint{font-size:.8rem;color:var(--ink-3)}

.chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:22px}
.chip{
  padding:9px 16px;border-radius:999px;border:1px solid var(--line);background:var(--panel);
  color:var(--ink-2);font:inherit;font-size:.85rem;cursor:pointer;
  transition:.2s var(--ease);
}
.chip:hover{
  color:var(--ink);border-color:rgba(46,230,197,.5);background:var(--panel-2);
  transform:translateY(-2px);
}

/* ---------------------------------------------------------- sections */
.sec{padding:clamp(48px,7vw,88px) 0;position:relative}
.sec-alt{background:var(--bg-1);border-block:1px solid var(--line)}
.sec-head{max-width:58ch;margin-bottom:34px}
.sec-head.center{margin-inline:auto;text-align:center}
.sec-head p{color:var(--ink-2);margin-bottom:0;font-size:1.03rem}
.kicker{
  font-size:.76rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--a1);margin-bottom:12px;display:block;
}

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

/* ---------------------------------------------------------- cards */
.card{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;transition:.28s var(--ease);position:relative;
  display:flex;flex-direction:column;
}
.card::after{
  content:"";position:absolute;inset:0;border-radius:var(--r);pointer-events:none;
  background:var(--grad-soft);opacity:0;transition:opacity .28s;
}
.card:hover{transform:translateY(-4px);border-color:var(--line-2);box-shadow:var(--sh-lg)}
.card:hover::after{opacity:1}
.card>*{position:relative;z-index:1}
.card-img{
  background:linear-gradient(165deg,var(--bg-1),var(--bg-2));padding:22px;text-align:center;
  border-bottom:1px solid var(--line);
}
.card-img img{margin:0 auto;max-height:172px;width:auto;object-fit:contain;
  transition:transform .4s var(--ease);filter:var(--img-sh)}
.card:hover .card-img img{transform:scale(1.055)}
.card-body{padding:17px 19px 19px;flex:1;display:flex;flex-direction:column}
.card-body h3{margin-bottom:.22em;font-size:1.05rem}
.card-body p{font-size:.885rem;color:var(--ink-2);margin-bottom:.85em;line-height:1.55}
.card-foot{margin-top:auto;display:flex;justify-content:space-between;align-items:flex-end;gap:10px;padding-top:12px}

.badge{
  display:inline-block;padding:4px 10px;border-radius:6px;font-size:.66rem;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;
  background:color-mix(in srgb, var(--a1) 11%, transparent);
  color:color-mix(in srgb, var(--a1) 82%, var(--ink));
  border:1px solid color-mix(in srgb, var(--a1) 26%, transparent);
}
.pill{
  display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:999px;
  background:var(--bg-2);border:1px solid var(--line);font-size:.79rem;color:var(--ink-2);
}
a.pill:hover{color:var(--ink);border-color:var(--line-2)}

/* price */
.price{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.price .now{font-size:1.22rem;font-weight:750;color:var(--ink);letter-spacing:-.02em}
.price .was{font-size:.9rem;color:var(--ink-3);text-decoration:line-through}
.price .save{
  font-size:.7rem;font-weight:700;padding:3px 8px;border-radius:5px;
  background:color-mix(in srgb, var(--ok) 13%, transparent);color:var(--ok);letter-spacing:.03em;
}
.price-lg .now{font-size:2.15rem}
.price-lg .was{font-size:1.05rem}

/* ---------------------------------------------------------- need tiles */
.need{
  display:flex;flex-direction:column;gap:9px;padding:19px;border-radius:var(--r-sm);
  background:var(--panel);border:1px solid var(--line);transition:.24s var(--ease);
  position:relative;overflow:hidden;
}
.need::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--grad);
  opacity:0;transition:opacity .24s;
}
.need:hover{transform:translateY(-3px);border-color:var(--line-2);background:var(--panel-2)}
.need:hover::before{opacity:1}
.need .ico{font-size:1.5rem;line-height:1}
.need strong{font-size:.96rem;font-weight:620;letter-spacing:-.01em}
.need span{font-size:.81rem;color:var(--ink-3);line-height:1.45}

/* ---------------------------------------------------------- results */
#results{scroll-margin-top:84px}
/* ---------------------------------------------------------- thinking state */
/* Shown while the recommendation is being worked out. The steps are the real
   stages of the request, not decoration: read the text, match the catalogue,
   pull the studies, write it up. The last one stays running until the answer
   lands, so the panel never claims to have finished ahead of the server. */
.thinking{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:24px 26px;margin-bottom:20px;position:relative;overflow:hidden;
}
.thinking::before{                      /* the accent rail, travelling */
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--grad);background-size:100% 260%;
  animation:rail 2.6s var(--ease) infinite;
}
@keyframes rail{
  0%{background-position:0 0}
  50%{background-position:0 100%}
  100%{background-position:0 0}
}

.thinking-now{
  margin:0 0 18px;font-size:1.16rem;font-weight:600;letter-spacing:-.02em;
  min-height:1.5em;
}
.thinking-now .dots::after{
  content:"";animation:dots 1.4s steps(4,end) infinite;
}
@keyframes dots{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}}

.think-steps{display:flex;flex-direction:column;gap:11px;margin:0 0 4px;padding:0;list-style:none}
.think-step{
  /* flex-start, not center, so a label that wraps to two lines on a phone
     keeps its mark beside the first line rather than floating mid-block */
  display:flex;align-items:flex-start;gap:11px;font-size:.92rem;color:var(--ink-3);
  transition:color .3s var(--ease);
}
.think-step.on{color:var(--ink)}
.think-step.done{color:var(--ink-2)}

.think-mark{
  width:17px;height:17px;border-radius:50%;flex:none;position:relative;
  border:2px solid var(--line-2);transition:.3s var(--ease);
  margin-top:3px;                     /* sit on the first line's baseline */
}
.think-step.on .think-mark{
  border-color:color-mix(in srgb, var(--a1) 30%, transparent);
  border-top-color:var(--a1);
  animation:spin .75s linear infinite;
}
.think-step.done .think-mark{
  border-color:var(--a1);background:var(--a1);
  animation:pop .34s var(--ease);
}
.think-step.done .think-mark::after{
  content:"";position:absolute;left:4px;top:1px;width:4px;height:8px;
  /* the canvas colour, so the tick reads on the filled accent in either
     theme — deep teal in light, bright mint in dark */
  border:solid var(--bg);border-width:0 2px 2px 0;transform:rotate(43deg);
}
@keyframes pop{0%{transform:scale(.4)}60%{transform:scale(1.18)}100%{transform:scale(1)}}

/* the shape of the answer, arriving before the answer does */
.skeleton{margin-top:22px;padding-top:20px;border-top:1px solid var(--line)}
.sk-row{display:grid;grid-template-columns:74px 1fr;gap:18px;align-items:center}
.sk-row+.sk-row{margin-top:15px}
.sk-lines{display:flex;flex-direction:column;gap:9px}
.sk-img,.sk-line{
  border-radius:10px;
  background:linear-gradient(90deg,
    var(--bg-2) 8%, color-mix(in srgb, var(--bg-2) 45%, var(--panel-2)) 20%, var(--bg-2) 34%);
  background-size:900px 100%;
  animation:shimmer 1.5s linear infinite;
}
.sk-img{height:74px;border-radius:var(--r-sm)}
.sk-line{height:11px}
.sk-line.w70{width:70%}
.sk-line.w45{width:45%}
.sk-line.w88{width:88%}
@keyframes shimmer{0%{background-position:-380px 0}100%{background-position:520px 0}}

/* Motion off: no spin, no shimmer, no travelling rail — the steps still
   advance, so the state is still legible, just still. */
@media (prefers-reduced-motion:reduce){
  .thinking::before,.think-step.on .think-mark,.sk-img,.sk-line{animation:none}
  .think-step.on .think-mark{border-top-color:var(--a1);border-color:var(--a1)}
  .thinking-now .dots::after{content:"…";animation:none}
}

@media (max-width:560px){
  .thinking{padding:20px 18px}
  .thinking-now{font-size:1.04rem}
  .sk-row{grid-template-columns:56px 1fr;gap:14px}
  .sk-img{height:56px}
}

.think{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:24px 26px;margin-bottom:20px;position:relative;overflow:hidden;
}
.think::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--grad);
}
.think h2{font-size:1.32rem;margin-bottom:.42em;letter-spacing:-.025em}
.think .reason{
  color:var(--ink-2);font-size:.96rem;border-top:1px solid var(--line);
  margin-top:16px;padding-top:15px;
}
.think .reason b{
  color:var(--a1);font-size:.72rem;letter-spacing:.11em;text-transform:uppercase;
  display:block;margin-bottom:7px;font-weight:700;
}
.think p:last-child{margin-bottom:0}

.rec{
  display:grid;grid-template-columns:158px 1fr;gap:26px;align-items:start;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:24px;margin-bottom:16px;transition:.26s var(--ease);position:relative;
}
.rec:hover{border-color:var(--line-2);box-shadow:var(--sh)}
.rec-media{position:relative}
.rec-media img{
  border-radius:var(--r-sm);background:linear-gradient(165deg,var(--bg-1),var(--bg-2));
  padding:12px;filter:var(--img-sh);
}
.rank{
  position:absolute;top:-9px;left:-9px;width:29px;height:29px;border-radius:50%;
  background:var(--grad);color:var(--on-accent);display:grid;place-items:center;
  font-size:.82rem;font-weight:800;box-shadow:0 4px 12px color-mix(in srgb, var(--a1) 36%, transparent);z-index:2;
}
.rec h3{font-size:1.42rem;margin-bottom:.3em;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.rec-meta{display:flex;flex-wrap:wrap;gap:7px;align-items:center;margin-bottom:15px}
.conf{
  font-size:.69rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;
  padding:4px 10px;border-radius:999px;
}
.conf-high{background:color-mix(in srgb, var(--ok) 13%, transparent);color:var(--ok)}
.conf-medium{background:color-mix(in srgb, var(--warn) 14%, transparent);color:var(--warn)}
.conf-low{background:var(--panel-2);color:var(--ink-3)}
.rec .why{font-size:1.02rem;margin-bottom:.85em;color:var(--ink)}
.how{
  background:var(--bg-2);border-radius:var(--r-sm);padding:14px 17px;
  font-size:.9rem;color:var(--ink-2);margin-bottom:16px;border:1px solid var(--line);
}
.how b{color:var(--ink);font-weight:620}
.rec-cta{display:flex;gap:10px;flex-wrap:wrap;align-items:center}

.mini-quote{
  border-top:1px solid var(--line);margin-top:16px;padding-top:14px;
  font-size:.9rem;color:var(--ink-2);font-style:italic;
}
.mini-quote cite{display:block;font-style:normal;font-size:.78rem;color:var(--ink-3);margin-top:5px}

.note{
  border-radius:var(--r);padding:20px 22px;margin-bottom:18px;
  border:1px solid var(--line);background:var(--panel);
}
.note h3{font-size:1.05rem;margin-bottom:.4em}
.note p:last-child{margin-bottom:0}
.note-warn{background:rgba(7);border-color:rgba(251,191,36,.24)}
.note-danger{background:rgba(8);border-color:rgba(251,113,133,.28)}
.note-tip{background:color-mix(in srgb, var(--a2) 6%, var(--panel));border-color:color-mix(in srgb, var(--a2) 24%, transparent)}

/* ---------------------------------------------------------- stats */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:11px;margin:20px 0}
.stat{
  background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:16px 14px;text-align:center;
}
.stat b{
  display:block;font-size:1.75rem;font-weight:800;line-height:1.05;letter-spacing:-.03em;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}
.stat b.wordy{font-size:.92rem;letter-spacing:.02em;text-transform:uppercase;line-height:1.3;padding:6px 0}
.stat span{font-size:.755rem;color:var(--ink-3);display:block;margin-top:6px;line-height:1.4}

/* ---------------------------------------------------------- detail */
.crumbs{font-size:.84rem;color:var(--ink-3);padding:22px 0 0}
.crumbs a{color:var(--ink-3)}
.crumbs a:hover{color:var(--ink-2)}

.detail{display:grid;grid-template-columns:minmax(0,440px) minmax(0,1fr);gap:52px;
  padding:26px 0 52px;align-items:start}
.detail-media{position:sticky;top:calc(var(--head-h) + 22px)}
.shot{
  background:linear-gradient(165deg,var(--bg-1),var(--bg-2));border:1px solid var(--line);
  border-radius:var(--r-lg);padding:30px;position:relative;overflow:hidden;
}
.shot::before{
  content:"";position:absolute;inset:0;background:var(--grad-soft);opacity:.85;
}
.shot img{position:relative;z-index:1;filter:var(--img-sh-lg)}
/* align-items defaults to stretch on a flex row, which pulls every thumbnail to
   the height of the tallest one and squashes the rest out of shape. */
.thumbs{display:flex;gap:10px;margin-top:12px;align-items:flex-start}
.thumbs img{
  width:76px;height:auto;flex:none;object-fit:contain;
  background:var(--bg-2);border-radius:var(--r-sm);padding:8px;cursor:pointer;
  border:1px solid var(--line);transition:.2s var(--ease);
}
.thumbs img:hover{border-color:var(--line-2)}
.thumbs img.on{border-color:var(--a1);box-shadow:0 0 0 1px var(--a1)}

.detail .tagline{font-size:1.14rem;color:var(--ink-2);margin-bottom:1.2em}

.buybox{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:20px 22px;margin:22px 0;
}
.buybox .btn{margin-top:14px}
.member-line{font-size:.83rem;color:var(--ink-3);margin-top:10px}

/* steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:20px 0}
.step{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-sm);padding:20px}
.step .n{
  width:28px;height:28px;border-radius:9px;background:var(--grad);color:var(--on-accent);
  display:grid;place-items:center;font-size:.82rem;font-weight:800;margin-bottom:12px;
}
.step h4{font-size:.96rem;margin-bottom:.3em}
.step p{font-size:.86rem;color:var(--ink-2);margin:0}

.places{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:11px}
.place{border:1px solid var(--line);border-radius:var(--r-sm);padding:15px;background:var(--panel)}
.place strong{display:block;font-size:.92rem;margin-bottom:3px}
.place span{font-size:.82rem;color:var(--ink-3)}

/* studies */
.study{
  border:1px solid var(--line);border-radius:var(--r);padding:22px;background:var(--panel);
  margin-bottom:14px;transition:.24s var(--ease);
}
.study:hover{border-color:var(--line-2)}
.study h3{font-size:1.05rem;margin-bottom:.45em;line-height:1.35}
.study .journal{font-size:.87rem;color:var(--ink-2);margin-bottom:.45em}
.study .authors{font-size:.84rem;color:var(--ink-3);margin-bottom:.75em}
.tag{
  display:inline-block;font-size:.67rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  padding:4px 9px;border-radius:5px;margin:0 6px 10px 0;
}
.tag-peer{background:color-mix(in srgb, var(--ok) 12%, transparent);color:var(--ok)}
.tag-company{background:color-mix(in srgb, var(--warn) 14%, transparent);color:var(--warn)}
.tag-other{background:var(--panel-2);color:var(--ink-3)}
.cite{
  font-size:.79rem;color:var(--ink-3);background:var(--bg-2);padding:12px 14px;
  border-radius:var(--r-xs);border:1px solid var(--line);line-height:1.6;
}

/* quotes */
.quote{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:22px;
  display:flex;flex-direction:column;transition:.24s var(--ease);
}
.quote:hover{border-color:var(--line-2);transform:translateY(-2px)}
.quote p{font-size:.96rem;margin-bottom:1.1em;flex:1;color:var(--ink)}
.quote footer{display:flex;align-items:center;gap:12px}
.avatar{
  width:38px;height:38px;border-radius:50%;background:var(--grad);color:var(--on-accent);
  display:grid;place-items:center;font-weight:800;font-size:.8rem;flex:none;
}
.quote cite{font-style:normal;font-weight:620;font-size:.9rem;display:block}
.quote small{color:var(--ink-3);font-size:.78rem}
.stars{color:#e0a021;font-size:.85rem;letter-spacing:2px;margin-bottom:.7em}

/* stacks */
.strip{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0}
.spill{
  display:inline-flex;align-items:center;gap:9px;border:1px solid var(--line);
  border-radius:999px;padding:5px 14px 5px 5px;background:var(--panel);
  font-size:.86rem;font-weight:550;transition:.2s var(--ease);
}
.spill:hover{border-color:var(--line-2);background:var(--panel-2)}
.spill img{width:29px;height:29px;object-fit:contain;border-radius:50%;background:var(--bg-2);padding:3px}
.spill .when{font-size:.72rem;color:var(--ink-3);font-weight:400}

.timeline{border-left:1px solid var(--line);padding-left:24px;margin:24px 0}
.tl{position:relative;padding-bottom:26px}
.tl:last-child{padding-bottom:0}
.tl::before{
  content:"";position:absolute;left:-29px;top:7px;width:10px;height:10px;border-radius:50%;
  background:var(--grad);box-shadow:0 0 0 3px var(--bg), 0 0 10px color-mix(in srgb, var(--a1) 45%, transparent);
}
.tl .when{font-size:.71rem;text-transform:uppercase;letter-spacing:.11em;font-weight:700;color:var(--a1)}
.tl h4{margin:.25em 0 .28em;font-size:1.05rem}
.tl p{font-size:.9rem;color:var(--ink-2);margin:0}

.protocol{
  background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r);padding:22px;
  position:relative;overflow:hidden;
}
.protocol::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--grad)}
.protocol h4{
  font-size:.73rem;text-transform:uppercase;letter-spacing:.12em;color:var(--a1);
  margin-bottom:.7em;font-weight:700;
}

/* accordion */
.acc{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--panel)}
.acc details{border-bottom:1px solid var(--line)}
.acc details:last-child{border-bottom:0}
.acc summary{
  padding:17px 22px;cursor:pointer;font-weight:580;font-size:.98rem;list-style:none;
  display:flex;justify-content:space-between;gap:18px;align-items:center;transition:.18s;
}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:"+";color:var(--a1);font-size:1.3rem;font-weight:300;flex:none;transition:.24s var(--ease)}
.acc details[open] summary::after{transform:rotate(45deg)}
.acc summary:hover{background:var(--panel-2)}
.acc .body{padding:0 22px 19px;color:var(--ink-2);font-size:.94rem}
.acc .body p:last-child{margin-bottom:0}

/* ---------------------------------------------------------- gate */
.gate{min-height:100vh;display:grid;place-items:center;padding:30px 20px;position:relative}
.gate-box{
  width:min(460px,100%);background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r-xl);padding:clamp(28px,5vw,44px);box-shadow:var(--sh-lg);
  position:relative;z-index:1;text-align:center;
}
.gate-box::before{
  content:"";position:absolute;inset:-1px;border-radius:var(--r-xl);padding:1px;
  background:var(--grad);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;opacity:.5;pointer-events:none;
}
.gate .logo{justify-content:center;margin-bottom:24px;font-size:1.2rem}
.gate h1{font-size:clamp(1.7rem,4.5vw,2.3rem);margin-bottom:.4em}
.gate p{color:var(--ink-2);font-size:.97rem;margin-bottom:26px}
.gate input{
  width:100%;padding:16px 18px;border-radius:14px;border:1px solid var(--line-2);
  background:var(--bg-1);color:var(--ink);font:inherit;font-size:1.06rem;
  text-align:center;letter-spacing:.06em;font-weight:600;outline:none;transition:.2s;
}
.gate input:focus{border-color:var(--a1);box-shadow:var(--glow)}
.gate input::placeholder{letter-spacing:normal;font-weight:400;color:var(--ink-3)}
.gate .btn{margin-top:14px;width:100%}
.gate .err{
  background:color-mix(in srgb, var(--danger) 9%, transparent);
  border:1px solid color-mix(in srgb, var(--danger) 34%, transparent);
  color:var(--danger);
  padding:11px 15px;border-radius:11px;font-size:.88rem;margin-bottom:18px;
}
[data-theme="dark"] .gate .err{color:#ffb3bf}

/* ---------------------------------------------------------- footer */
.ftr{border-top:1px solid var(--line);background:var(--bg-1);margin-top:60px;padding:48px 0 28px}
.ftr-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:34px;margin-bottom:34px}
.ftr h4{font-size:.74rem;text-transform:uppercase;letter-spacing:.12em;color:var(--ink-3);margin-bottom:1.1em;font-weight:700}
.ftr li{margin-bottom:.55em}
.ftr a{color:var(--ink-2);font-size:.9rem;transition:.18s}
.ftr a:hover{color:var(--ink)}
.ftr-blurb{font-size:.89rem;color:var(--ink-3);max-width:34ch;margin-top:12px}
.legal{border-top:1px solid var(--line);padding-top:22px}
.legal p{font-size:.775rem;color:var(--ink-3);line-height:1.65;margin-bottom:.7em}

/* ---------------------------------------------------------- motion */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
  .reveal{opacity:1;transform:none}
  html{scroll-behavior:auto}
}

/* ---------------------------------------------------------- responsive */
@media (max-width:1080px){
  .g5{grid-template-columns:repeat(3,1fr)}
  .g4{grid-template-columns:repeat(3,1fr)}
  .detail{grid-template-columns:1fr;gap:30px}
  .detail-media{position:static;max-width:420px;margin:0 auto}
}
@media (max-width:860px){
  .nav{display:none}
  .burger{display:grid}
  .drawer{display:block}
  .g3,.g4,.g5{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:1fr}
  .rec{grid-template-columns:120px 1fr;gap:18px;padding:18px}
  .rec h3{font-size:1.24rem}
  .ftr-grid{grid-template-columns:1fr 1fr;gap:26px}
  .ref-badge{display:none}
}
@media (max-width:600px){
  body{font-size:15.5px}
  .wrap,.narrow{padding:0 16px}
  .hero{padding:36px 0 30px}
  .ask textarea{font-size:1rem;min-height:88px;padding:15px 14px 4px}
  .ask-bar{padding:9px}
  .ask-bar .btn{flex:1;padding:13px 18px}
  .g2,.g3,.g4,.g5{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr 1fr}
  .rec{grid-template-columns:1fr;gap:16px}
  .rec-media{max-width:158px}
  .rank{top:-7px;left:-7px}
  .think{padding:20px}
  .ftr-grid{grid-template-columns:1fr}
  .chips{gap:7px}
  .chip{font-size:.8rem;padding:8px 13px}
  .shot{padding:20px;border-radius:var(--r)}
  .detail{padding-top:16px}
}

/* Bigger touch targets on coarse pointers */
@media (pointer:coarse){
  .ask-hint{display:none}
  .btn{min-height:46px}
  .nav a,.drawer a{min-height:44px}
  .chip{min-height:38px}
}

/* ============================================================
   Video — per-patch clips and the featured podcast banner
   ============================================================ */

/* Click-to-play. Nothing downloads until the play button is pressed, so a page
   with a video on it weighs no more than the poster image. */
.player{
  position:relative;border-radius:var(--r);overflow:hidden;
  background:linear-gradient(150deg,var(--bg-2),var(--bg-1));
  border:1px solid var(--line);aspect-ratio:16/9;cursor:pointer;
  transition:.28s var(--ease);
}
.player:hover{border-color:var(--line-2);box-shadow:var(--sh-lg)}
.player img.poster,.player video,.player iframe{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border:0;
}
.player video{object-fit:contain;background:#000}
.player::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.02) 0%,rgba(0,0,0,.34) 100%);
  transition:opacity .28s;
}
.player.playing{cursor:default}
.player.playing::after,.player.playing .play,.player.playing .vlabel{opacity:0;pointer-events:none}

.play{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:66px;height:66px;border-radius:50%;border:0;cursor:pointer;
  background:var(--grad);color:var(--on-accent);display:grid;place-items:center;
  box-shadow:0 8px 26px rgba(16,32,45,.3), 0 0 0 6px rgba(255,255,255,.22);
  transition:.26s var(--ease);z-index:2;
}
.play::before{
  content:"";border-style:solid;border-width:11px 0 11px 18px;
  border-color:transparent transparent transparent currentColor;margin-left:5px;
}
.player:hover .play{transform:translate(-50%,-50%) scale(1.09);box-shadow:0 14px 34px rgba(16,32,45,.36), 0 0 0 8px rgba(255,255,255,.26)}
.play span{position:absolute;left:-9999px}

.vlabel{
  position:absolute;left:0;right:0;bottom:0;padding:16px 18px;z-index:2;
  display:flex;align-items:flex-end;justify-content:space-between;gap:12px;
  transition:opacity .28s;
}
.vlabel strong{font-size:.95rem;font-weight:620;color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.6)}
.vlabel .dur{
  font-size:.72rem;font-weight:600;padding:3px 8px;border-radius:5px;
  background:rgba(0,0,0,.6);color:#fff;backdrop-filter:blur(6px);flex:none;
}

/* small variant, used inside catalogue cards */
.player-sm{border-radius:var(--r-sm)}
.player-sm .play{width:46px;height:46px}
.player-sm .play::before{border-width:8px 0 8px 13px;margin-left:3px}
.player-sm .vlabel{padding:11px 13px}
.player-sm .vlabel strong{font-size:.82rem}

/* ---------------------------------------------------------- featured banner */
.featured{
  position:relative;border-radius:var(--r-lg);overflow:hidden;
  border:1px solid var(--line);background:var(--panel);box-shadow:var(--sh);
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:0;align-items:stretch;
}
.featured::before{
  content:"";position:absolute;inset:0;background:var(--grad-soft);pointer-events:none;
}
.featured-body{padding:clamp(26px,4vw,46px);position:relative;z-index:1;align-self:center}
.featured-body h2{font-size:clamp(1.5rem,3vw,2.15rem);margin-bottom:.4em}
.featured-body p{color:var(--ink-2);margin-bottom:1.4em;max-width:44ch}
.featured .player{border-radius:0;border:0;border-left:1px solid var(--line);height:100%}
.featured .player::after{background:linear-gradient(90deg,rgba(0,0,0,.28) 0%,transparent 42%)}

.pod-badge{
  display:inline-flex;align-items:center;gap:8px;padding:6px 13px;border-radius:999px;
  background:rgba(229,45,45,.08);border:1px solid rgba(229,45,45,.26);
  font-size:.74rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:#c62222;margin-bottom:16px;
}
[data-theme="dark"] .pod-badge{
  background:rgba(255,0,0,.11);border-color:rgba(255,60,60,.28);color:#ff8f8f;
}
.pod-badge svg{width:15px;height:11px;flex:none}

/* header/drawer link to the podcast */
.nav-watch{
  display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:10px;
  border:1px solid rgba(229,45,45,.28);background:rgba(229,45,45,.07);
  color:#b81f1f!important;font-size:.9rem;font-weight:600;transition:.18s var(--ease);
}
.nav-watch:hover{background:rgba(229,45,45,.13);border-color:rgba(229,45,45,.45)}
[data-theme="dark"] .nav-watch{
  border-color:rgba(255,60,60,.3);background:rgba(255,0,0,.09);color:var(--ink)!important;
}
[data-theme="dark"] .nav-watch:hover{background:rgba(255,0,0,.16);border-color:rgba(255,60,60,.5)}
.nav-watch svg{width:15px;height:11px;flex:none}

@media (max-width:960px){
  .featured{grid-template-columns:1fr}
  .featured .player{border-left:0;border-top:1px solid var(--line);aspect-ratio:16/9;order:-1}
  .featured-body{padding:24px}
}
@media (max-width:600px){
  .play{width:54px;height:54px}
  .play::before{border-width:9px 0 9px 15px}
  .vlabel{padding:12px 14px}
}