/* ============================================================
   BeamProfile — design system
   No framework, no web fonts, no build step.
   Progressive enhancement throughout: modern features are layered
   behind @supports so older browsers get a clean baseline.
   ============================================================ */

:root{
  color-scheme:dark;

  /* ---- surfaces: deep blue-graphite, lifted in even steps ---- */
  --bg:#080a0f;
  --s1:#0e1118;
  --s2:#141824;
  --s3:#1b2030;
  --s4:#232941;
  --inset:#0a0d13;

  /* ---- borders ---- */
  --line:rgba(255,255,255,.07);
  --line-2:rgba(255,255,255,.12);
  --line-3:rgba(255,255,255,.19);

  /* ---- ink (all ≥4.5:1 on --bg) ---- */
  --ink:#f2f5fa;
  --ink-2:#a8b2c6;
  --ink-3:#8f9ab0;
  --ink-4:#7e8aa1;

  /* ---- signal ---- */
  --amber:#ffb230;
  --amber-2:#ffcd6b;
  --amber-deep:#e08a00;
  --green:#42e39a;
  --red:#ff7b7b;
  --violet:#9d8cff;

  /* ---- radii: generous, consistent ---- */
  --r-sm:10px;
  --r:16px;
  --r-lg:22px;
  --r-full:999px;

  /* ---- elevation: multi-layer, soft ---- */
  --e1:0 1px 2px rgba(0,0,0,.32), 0 4px 12px rgba(0,0,0,.24);
  --e2:0 2px 4px rgba(0,0,0,.34), 0 12px 32px rgba(0,0,0,.34);
  --e3:0 4px 8px rgba(0,0,0,.36), 0 24px 64px rgba(0,0,0,.44);
  --glow:0 0 0 1px rgba(255,178,48,.22), 0 8px 34px rgba(255,178,48,.24);

  /* ---- fluid type ---- */
  --t-xs:clamp(.68rem,.64rem + .18vw,.76rem);
  --t-sm:clamp(.82rem,.79rem + .16vw,.9rem);
  --t-base:clamp(1.03rem,1rem + .2vw,1.12rem);
  --t-lg:clamp(1.14rem,1.08rem + .32vw,1.3rem);
  --t-h3:clamp(1.24rem,1.14rem + .5vw,1.5rem);
  --t-h2:clamp(1.62rem,1.36rem + 1.3vw,2.35rem);
  --t-h1:clamp(2.3rem,1.7rem + 3vw,4rem);
  --t-display:clamp(2.8rem,1.9rem + 4.4vw,5rem);

  /* ---- rhythm ---- */
  --gap:clamp(1rem,.7rem + 1.4vw,1.5rem);
  --pad:clamp(1.25rem,.9rem + 1.7vw,2rem);
  --sect:clamp(3.5rem,2.4rem + 5vw,6.5rem);
  --wrap:1180px;
  --measure:44rem;

  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;

  --ease:cubic-bezier(.22,.72,.24,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
@media(prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-size:var(--t-base);
  line-height:1.68;
  letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  /* NB: no overflow-x:hidden here — it silently breaks position:sticky on the
     header in several browsers. Overflowing decoration is clipped at the
     component level instead (see .hero{overflow:hidden}). */
}

/* Ambient gradient mesh — replaces the old hard grid with soft depth */
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(900px 600px at 12% -8%,rgba(255,178,48,.09),transparent 62%),
    radial-gradient(760px 520px at 92% 4%,rgba(157,140,255,.06),transparent 60%),
    radial-gradient(1000px 700px at 50% 108%,rgba(66,227,154,.035),transparent 62%);
}

img{max-width:100%;height:auto;display:block}
a{color:var(--amber-2);text-decoration:none;transition:color .18s var(--ease)}
a:hover{color:var(--amber);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1.5px}

h1,h2,h3,h4{margin:0 0 .5em;font-weight:760;line-height:1.08;letter-spacing:-.033em}
h1{font-size:var(--t-h1)}
h2{font-size:var(--t-h2);margin-top:1.9em;letter-spacing:-.028em}
h3{font-size:var(--t-h3);margin-top:1.7em;letter-spacing:-.022em}
@supports(text-wrap:balance){h1,h2,h3,h4,.lede{text-wrap:balance}}
@supports(text-wrap:pretty){p,li{text-wrap:pretty}}

p{margin:0 0 1.2em}
ul,ol{padding-left:1.3em}
li{margin:.45em 0}
hr{border:0;height:1px;background:linear-gradient(90deg,transparent,var(--line-2),transparent);margin:var(--sect) 0}

code{
  font-family:var(--mono);font-size:.86em;
  background:color-mix(in oklab,var(--amber) 10%,transparent);
  border:1px solid color-mix(in oklab,var(--amber) 22%,transparent);
  padding:.14em .45em;border-radius:6px;color:var(--amber-2);
}
@supports not (color:color-mix(in oklab,red,blue)){
  code{background:rgba(255,178,48,.1);border-color:rgba(255,178,48,.22)}
}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 clamp(18px,4vw,32px)}
.muted{color:var(--ink-2)}
.tiny{font-size:var(--t-xs);color:var(--ink-3);line-height:1.62}
.center{text-align:center}

/* mono label treatment */
.eyebrow,.tag,.award,thead th,.byline,.crumbs,.rank-specs,.site-nav a,
.toc h2,.tldr h2,.site-footer h3,.datastrip dt,.datastrip dd,.card .meta,.btn,
.score-num,.rank-num,.spec-table td:first-child,.obar,form.contact label{
  font-family:var(--mono);
  font-variant-numeric:tabular-nums;
}

.skip{position:absolute;left:-9999px}
.skip:focus{
  left:14px;top:14px;background:var(--amber);color:#151005;
  padding:.7em 1.2em;border-radius:var(--r-sm);z-index:200;font-weight:700;
}

/* ---------------------------------------------------------------- header */
.site-header{
  position:sticky;top:0;z-index:60;
  background:color-mix(in oklab,var(--bg) 78%,transparent);
  border-bottom:1px solid var(--line);
}
@supports(backdrop-filter:blur(1px)){
  .site-header{backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%)}
}
@supports not (color:color-mix(in oklab,red,blue)){
  .site-header{background:rgba(8,10,15,.82)}
}
.header-inner{display:flex;align-items:center;gap:clamp(14px,3vw,30px);height:72px}

.brand{
  display:flex;align-items:center;gap:11px;color:var(--ink);
  font-weight:800;font-size:1.12rem;letter-spacing:-.04em;
  transition:opacity .18s var(--ease);
}
.brand:hover{text-decoration:none;opacity:.86}
.brand-mark{
  width:30px;height:30px;flex:none;fill:var(--amber);color:var(--amber);
  filter:drop-shadow(0 0 10px rgba(255,178,48,.5));
  transition:filter .3s var(--ease),transform .5s var(--ease);
}
.brand:hover .brand-mark{filter:drop-shadow(0 0 18px rgba(255,178,48,.8));transform:rotate(90deg)}
.brand-accent{color:var(--amber)}

.site-nav{margin-left:auto;display:flex;gap:3px;flex-wrap:wrap}
.site-nav a{
  position:relative;color:var(--ink-3);
  font-size:var(--t-xs);font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  padding:.62em .9em;border-radius:var(--r-full);
  transition:color .18s var(--ease),background .18s var(--ease);
}
.site-nav a:hover{color:var(--ink);background:var(--s2);text-decoration:none}
.site-nav a.active{
  color:var(--amber);
  background:color-mix(in oklab,var(--amber) 13%,transparent);
  box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--amber) 26%,transparent);
}
@supports not (color:color-mix(in oklab,red,blue)){
  .site-nav a.active{background:rgba(255,178,48,.13);box-shadow:inset 0 0 0 1px rgba(255,178,48,.26)}
}

.nav-toggle{
  display:none;margin-left:auto;background:var(--s2);border:1px solid var(--line-2);
  border-radius:var(--r-sm);width:44px;height:40px;cursor:pointer;padding:11px;
  flex-direction:column;justify-content:space-between;
}
.nav-toggle span{display:block;height:2px;background:var(--ink);border-radius:2px;transition:transform .3s var(--ease),opacity .2s var(--ease)}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media(max-width:920px){
  .nav-toggle{display:flex}
  .site-nav{
    display:none;position:absolute;top:72px;left:12px;right:12px;
    background:var(--s1);border:1px solid var(--line-2);
    border-radius:var(--r);box-shadow:var(--e3);
    flex-direction:column;gap:2px;padding:12px;
  }
  .site-nav.open{display:flex}
  .site-nav a{padding:.8em 1em;border-radius:var(--r-sm)}
}

/* ---------------------------------------------------------------- crumbs */
.crumbs{
  font-size:var(--t-xs);letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-4);padding-top:26px;
}
.crumbs a{color:var(--ink-4)}
.crumbs a:hover{color:var(--amber)}
.crumbs .sep{margin:0 .65em;opacity:.4}

/* ---------------------------------------------------------------- hero */
.hero{
  position:relative;padding:clamp(64px,9vw,124px) 0 clamp(52px,7vw,88px);
  text-align:center;overflow:hidden;
}
.hero::before{
  content:"";position:absolute;left:50%;top:-42%;
  width:min(1100px,150vw);aspect-ratio:1;transform:translateX(-50%);
  background:radial-gradient(circle,rgba(255,178,48,.16),rgba(255,178,48,.05) 42%,transparent 66%);
  pointer-events:none;
}
.hero::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--line-2) 22%,var(--line-2) 78%,transparent);
}
.hero .wrap{position:relative}
.hero h1{font-size:var(--t-display);max-width:16ch;margin:0 auto .6rem;letter-spacing:-.045em}
.hero .lede{font-size:var(--t-lg);color:var(--ink-2);max-width:56ch;margin:0 auto 2.2rem;line-height:1.55}

.eyebrow{
  display:inline-flex;align-items:center;gap:.6em;
  font-size:var(--t-xs);font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--amber);
  background:color-mix(in oklab,var(--amber) 11%,transparent);
  border:1px solid color-mix(in oklab,var(--amber) 24%,transparent);
  padding:.5em 1.1em;border-radius:var(--r-full);margin-bottom:1.6rem;
}
@supports not (color:color-mix(in oklab,red,blue)){
  .eyebrow{background:rgba(255,178,48,.11);border-color:rgba(255,178,48,.24)}
}
.eyebrow::before{
  content:"";width:6px;height:6px;border-radius:50%;background:var(--amber);
  box-shadow:0 0 10px var(--amber);
}
@media(prefers-reduced-motion:no-preference){
  .eyebrow::before{animation:pulse 2.8s var(--ease) infinite}
  @keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.8)}}
}

.page-head{padding:clamp(28px,4vw,48px) 0 12px}
.page-head h1{margin-bottom:.45rem}
.page-head .lede{font-size:var(--t-lg);color:var(--ink-2);max-width:64ch;margin:0;line-height:1.55}

/* hero data strip */
.datastrip{
  display:grid;grid-template-columns:repeat(4,1fr);
  margin:clamp(2rem,4vw,3.2rem) auto 0;max-width:720px;
  border:1px solid var(--line);border-radius:var(--r);
  background:color-mix(in oklab,var(--s1) 70%,transparent);
  overflow:hidden;box-shadow:var(--e1);
}
@supports(backdrop-filter:blur(1px)){
  .datastrip{backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
}
@supports not (color:color-mix(in oklab,red,blue)){.datastrip{background:rgba(14,17,24,.7)}}
.datastrip > div{padding:16px 14px;border-right:1px solid var(--line)}
.datastrip > div:last-child{border-right:0}
.datastrip dt{
  font-size:var(--t-xs);letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-4);margin-bottom:.4em;
}
.datastrip dd{margin:0;font-size:clamp(1rem,.9rem + .4vw,1.2rem);font-weight:700;color:var(--amber);letter-spacing:-.02em}
@media(max-width:600px){
  .datastrip{grid-template-columns:1fr 1fr}
  .datastrip > div:nth-child(2n){border-right:0}
  .datastrip > div:nth-child(-n+2){border-bottom:1px solid var(--line)}
}

/* ---------------------------------------------------------------- buttons */
.btn{
  display:inline-flex;align-items:center;gap:.6em;
  padding:.85em 1.5em;border-radius:var(--r-full);
  font-weight:650;font-size:var(--t-sm);letter-spacing:.03em;
  border:1px solid var(--line-2);color:var(--ink);background:var(--s2);
  transition:transform .2s var(--ease),box-shadow .2s var(--ease),
             border-color .2s var(--ease),background .2s var(--ease);
  will-change:transform;
}
.btn:hover{text-decoration:none;transform:translateY(-2px);border-color:var(--line-3);box-shadow:var(--e2)}
.btn:active{transform:translateY(0)}
.btn-ico{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s var(--ease)}
.btn:hover .btn-ico{transform:translate(2px,-2px)}

.btn-buy{
  background:linear-gradient(135deg,var(--amber-2),var(--amber) 55%,var(--amber-deep));
  color:#1a1205;border-color:transparent;font-weight:750;
  box-shadow:var(--glow);
}
.btn-buy:hover{box-shadow:0 0 0 1px rgba(255,178,48,.3), 0 14px 44px rgba(255,178,48,.34)}
.btn-ghost{background:transparent}
.btn-ghost:hover{background:var(--s2)}
.btn-row{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}

/* ---------------------------------------------------------------- content */
.content{max-width:var(--measure);margin:0 auto;padding:14px clamp(18px,4vw,32px) var(--sect)}
.content h2{scroll-margin-top:96px}
.content h2::before{
  content:"";display:block;width:40px;height:3px;border-radius:3px;
  background:linear-gradient(90deg,var(--amber),transparent);
  margin-bottom:1rem;
}
.content > p:first-of-type{font-size:var(--t-lg);color:var(--ink-2);line-height:1.6}
.content ul li::marker{color:var(--amber)}
.content ol li::marker{color:var(--amber);font-weight:700}

blockquote{
  margin:2.2em 0;padding:1.4em 1.7em;
  border:1px solid var(--line-2);border-radius:var(--r);
  background:
    linear-gradient(135deg,color-mix(in oklab,var(--amber) 9%,transparent),transparent 55%),
    var(--s1);
  font-size:var(--t-lg);line-height:1.5;letter-spacing:-.015em;color:var(--ink);
  box-shadow:var(--e1);
}
@supports not (color:color-mix(in oklab,red,blue)){
  blockquote{background:linear-gradient(135deg,rgba(255,178,48,.09),transparent 55%),var(--s1)}
}
blockquote p:last-child{margin:0}

.byline{
  display:flex;gap:14px;flex-wrap:wrap;align-items:center;
  font-size:var(--t-xs);letter-spacing:.05em;text-transform:uppercase;color:var(--ink-4);
  padding:0 0 20px;border-bottom:1px solid var(--line);margin-bottom:34px;
}
.byline .dot{opacity:.3}

/* ---------------------------------------------------------------- cards */
.grid{display:grid;gap:var(--gap)}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))}

.card{
  position:relative;isolation:isolate;
  background:linear-gradient(168deg,var(--s2),var(--s1) 60%);
  border:1px solid var(--line);border-radius:var(--r-lg);
  padding:var(--pad);
  transition:transform .28s var(--ease),box-shadow .28s var(--ease),border-color .28s var(--ease);
}
/* animated gradient edge on hover */
.card::after{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:linear-gradient(140deg,var(--amber),transparent 42%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  opacity:0;transition:opacity .3s var(--ease);pointer-events:none;z-index:-1;
}
.card:hover{transform:translateY(-4px);box-shadow:var(--e3);border-color:transparent}
.card:hover::after{opacity:.55}
.card h3{margin-top:0;font-size:var(--t-h3)}
.card h3 a{color:var(--ink)}
.card h3 a:hover{color:var(--amber);text-decoration:none}
.card p{font-size:var(--t-sm);color:var(--ink-2);margin-bottom:.9em;line-height:1.6}

.tag{
  display:inline-block;font-size:var(--t-xs);font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--amber);margin-bottom:.95em;
}
.card .meta{font-size:var(--t-xs);letter-spacing:.05em;color:var(--ink-4);text-transform:uppercase}

.section{padding:var(--sect) 0}
.section-head{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  margin-bottom:calc(var(--gap) * 1.6);flex-wrap:wrap;
  padding-bottom:18px;border-bottom:1px solid var(--line);
}
.section-head h2{margin:0;font-size:var(--t-h2)}
.section-head a{font-size:var(--t-sm);font-weight:650;letter-spacing:.02em}

/* ---------------------------------------------------------------- verdict */
.verdict{
  position:relative;overflow:hidden;
  background:
    radial-gradient(560px 220px at 8% -10%,color-mix(in oklab,var(--amber) 14%,transparent),transparent 68%),
    linear-gradient(168deg,var(--s3),var(--s1) 62%);
  border:1px solid var(--line-2);border-radius:var(--r-lg);
  padding:clamp(1.4rem,3vw,2rem);margin:2rem 0;
  box-shadow:var(--e2);
}
@supports not (color:color-mix(in oklab,red,blue)){
  .verdict{background:radial-gradient(560px 220px at 8% -10%,rgba(255,178,48,.14),transparent 68%),linear-gradient(168deg,var(--s3),var(--s1) 62%)}
}
.verdict::before{
  content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--amber) 18%,var(--amber) 46%,transparent 78%);
}
.verdict h2,.verdict h3{margin-top:0}
.verdict h2::before{display:none}

.score{display:flex;align-items:center;gap:20px;margin-bottom:18px}
.score-num{
  font-size:clamp(2.6rem,2rem + 2.4vw,3.6rem);font-weight:700;
  color:var(--amber);line-height:.9;letter-spacing:-.055em;
  text-shadow:0 0 40px rgba(255,178,48,.4);
}
.score-num span{font-size:.9rem;color:var(--ink-4);font-weight:600;letter-spacing:0}
.stars{color:var(--amber);letter-spacing:3px;font-size:1.05rem}
.score .tiny{letter-spacing:.1em;text-transform:uppercase;font-family:var(--mono)}

/* ---------------------------------------------------------------- pros/cons */
.proscons{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);margin:2.2rem 0}
@media(max-width:640px){.proscons{grid-template-columns:1fr}}
.proscons > div{
  position:relative;overflow:hidden;
  background:var(--s1);border:1px solid var(--line);
  border-radius:var(--r);padding:var(--pad);
}
.proscons > div::before{content:"";position:absolute;top:0;left:0;right:0;height:2px}
.pros::before{background:linear-gradient(90deg,var(--green),transparent)}
.cons::before{background:linear-gradient(90deg,var(--red),transparent)}
.proscons h4{
  margin:0 0 .85em;font-family:var(--mono);font-size:var(--t-xs);
  letter-spacing:.16em;text-transform:uppercase;
}
.pros h4{color:var(--green)}
.cons h4{color:var(--red)}
.proscons ul{margin:0;padding-left:1.15em;font-size:var(--t-sm);line-height:1.6}
.pros li::marker{color:var(--green)}
.cons li::marker{color:var(--red)}

/* ---------------------------------------------------------------- tables */
.table-scroll{
  overflow-x:auto;margin:2rem 0;
  border:1px solid var(--line);border-radius:var(--r);
  background:var(--inset);box-shadow:var(--e1);
  -webkit-overflow-scrolling:touch;
}
table{width:100%;border-collapse:collapse;font-size:var(--t-sm);min-width:500px}
th,td{padding:15px 18px;text-align:left;border-bottom:1px solid var(--line)}
thead th{
  background:var(--s3);font-size:var(--t-xs);letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-3);white-space:nowrap;border-bottom:1px solid var(--line-2);
}
tbody tr{transition:background .18s var(--ease)}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--s1)}
td{font-variant-numeric:tabular-nums}
td strong{color:var(--ink)}

.spec-table td:first-child{
  color:var(--ink-4);width:38%;
  font-size:var(--t-xs);letter-spacing:.06em;text-transform:uppercase;
}
.spec-table td:last-child{font-family:var(--mono);font-size:var(--t-sm);color:var(--ink)}

/* ---------------------------------------------------------------- rank */
.rank{
  position:relative;isolation:isolate;
  display:grid;grid-template-columns:auto 1fr;gap:clamp(16px,3vw,28px);
  background:linear-gradient(168deg,var(--s2),var(--s1) 58%);
  border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(1.3rem,3vw,2rem);margin:var(--gap) 0;
  transition:transform .28s var(--ease),box-shadow .28s var(--ease),border-color .28s var(--ease);
}
.rank:hover{border-color:var(--line-2);box-shadow:var(--e2);transform:translateY(-2px)}
@media(max-width:580px){.rank{grid-template-columns:1fr;gap:16px}}

.rank-num{
  font-size:clamp(1.4rem,1.1rem + 1vw,1.9rem);font-weight:700;
  color:var(--amber);
  background:linear-gradient(160deg,color-mix(in oklab,var(--amber) 18%,transparent),transparent);
  border:1px solid color-mix(in oklab,var(--amber) 30%,transparent);
  border-radius:var(--r);
  width:clamp(56px,10vw,68px);aspect-ratio:1;display:grid;place-items:center;
  letter-spacing:-.05em;
}
@supports not (color:color-mix(in oklab,red,blue)){
  .rank-num{background:linear-gradient(160deg,rgba(255,178,48,.18),transparent);border-color:rgba(255,178,48,.3)}
}
.rank-num::before{content:"0"}
.rank h3{margin-top:0;font-size:var(--t-h3)}

.award{
  display:inline-block;font-size:var(--t-xs);font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;
  background:linear-gradient(135deg,var(--amber-2),var(--amber));
  color:#1a1205;padding:.4em .85em;border-radius:var(--r-full);margin-bottom:1em;
}

.rank-specs{
  display:flex;flex-wrap:wrap;gap:8px;
  font-size:var(--t-xs);letter-spacing:.05em;text-transform:uppercase;color:var(--ink-4);
  margin:16px 0;
}
.rank-specs span{
  padding:8px 14px;border:1px solid var(--line);border-radius:var(--r-full);
  background:var(--inset);white-space:nowrap;
}
.rank-specs b{color:var(--amber);font-weight:700}

/* ---------------------------------------------------------------- callouts */
.disclosure{
  background:var(--inset);border:1px solid var(--line);
  border-radius:var(--r);padding:16px 20px;
  font-size:var(--t-xs);color:var(--ink-3);line-height:1.62;margin:2rem 0;
}
.disclosure a{color:var(--ink-2);text-decoration:underline}

.note{
  position:relative;overflow:hidden;
  background:linear-gradient(135deg,color-mix(in oklab,var(--amber) 11%,transparent),transparent 60%),var(--s1);
  border:1px solid color-mix(in oklab,var(--amber) 26%,transparent);
  border-radius:var(--r);padding:var(--pad);margin:2rem 0;font-size:var(--t-sm);line-height:1.62;
}
@supports not (color:color-mix(in oklab,red,blue)){
  .note{background:linear-gradient(135deg,rgba(255,178,48,.11),transparent 60%),var(--s1);border-color:rgba(255,178,48,.26)}
}
.note strong{color:var(--amber-2)}

.tldr{
  position:relative;overflow:hidden;
  background:linear-gradient(168deg,var(--s2),var(--s1) 60%);
  border:1px solid var(--line);border-radius:var(--r-lg);
  padding:var(--pad) clamp(1.4rem,3vw,2rem);margin:2rem 0;box-shadow:var(--e1);
}
.tldr::before{
  content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--amber),transparent 55%);
}
.tldr h2{
  margin-top:0;font-size:var(--t-xs);letter-spacing:.17em;text-transform:uppercase;
  color:var(--ink-4);font-weight:700;
}
.tldr h2::before{display:none}
.tldr ul,.tldr ol{margin-bottom:0}

.toc{
  background:var(--inset);border:1px solid var(--line);
  border-radius:var(--r);padding:22px clamp(1.3rem,3vw,1.8rem);margin:2.2rem 0;
}
.toc h2{margin:0 0 .8em;font-size:var(--t-xs);letter-spacing:.17em;text-transform:uppercase;color:var(--ink-4);font-weight:700}
.toc h2::before{display:none}
.toc ol{margin:0;font-size:var(--t-sm);color:var(--ink-3)}
.toc ol li{margin:.35em 0}
.toc ol li a{color:var(--ink-2)}
.toc ol li a:hover{color:var(--amber)}

details{
  background:var(--s1);border:1px solid var(--line);
  border-radius:var(--r);padding:17px 21px;margin:11px 0;
  transition:border-color .2s var(--ease),background .2s var(--ease);
}
details:hover{border-color:var(--line-2);background:var(--s2)}
details summary{
  cursor:pointer;font-weight:640;color:var(--ink);list-style:none;
  position:relative;padding-left:1.6em;
}
details summary::-webkit-details-marker{display:none}
details summary::before{
  content:"";position:absolute;left:0;top:.42em;
  width:9px;height:9px;border-right:2px solid var(--amber);border-bottom:2px solid var(--amber);
  transform:rotate(-45deg);transition:transform .25s var(--ease);
}
details[open] summary::before{transform:rotate(45deg)}
details[open] summary{margin-bottom:.9em;color:var(--amber)}
details p:last-child{margin-bottom:0}

/* ---------------------------------------------------------------- output bars */
.obar{display:flex;align-items:center;gap:12px;font-size:var(--t-sm)}
.obar-track{
  flex:1;height:6px;min-width:64px;
  background:var(--s3);border-radius:var(--r-full);overflow:hidden;
}
.obar-fill{
  display:block;height:100%;border-radius:inherit;
  background:linear-gradient(90deg,var(--amber-deep),var(--amber));
  box-shadow:0 0 12px rgba(255,178,48,.5);
  transform-origin:left;
}
@media(prefers-reduced-motion:no-preference){
  .obar-fill{animation:grow .8s var(--ease) both}
  @keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
}
.obar-val{color:var(--amber);white-space:nowrap;font-weight:600}

/* ---------------------------------------------------------------- footer */
.site-footer{
  position:relative;background:var(--s1);
  border-top:1px solid var(--line);
  padding:var(--sect) 0 32px;margin-top:var(--sect);
}
.site-footer::before{
  content:"";position:absolute;top:-1px;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,color-mix(in oklab,var(--amber) 40%,transparent) 35%,color-mix(in oklab,var(--amber) 40%,transparent) 65%,transparent);
}
@supports not (color:color-mix(in oklab,red,blue)){
  .site-footer::before{background:linear-gradient(90deg,transparent,rgba(255,178,48,.4) 35%,rgba(255,178,48,.4) 65%,transparent)}
}
.footer-grid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:clamp(24px,4vw,44px)}
@media(max-width:860px){.footer-grid{grid-template-columns:1fr 1fr}}
@media(max-width:500px){.footer-grid{grid-template-columns:1fr}}
.footer-brand{margin-bottom:1em}
.site-footer h3{
  font-size:var(--t-xs);letter-spacing:.17em;text-transform:uppercase;
  color:var(--ink-4);margin-bottom:1.1em;font-weight:700;
  padding-bottom:.8em;border-bottom:1px solid var(--line);
}
.site-footer ul{list-style:none;padding:0;margin:0}
.site-footer li{margin:.55em 0}
.site-footer li a{color:var(--ink-2);font-size:var(--t-sm)}
.site-footer li a:hover{color:var(--amber)}
.footer-legal{border-top:1px solid var(--line);margin-top:44px;padding-top:26px;display:grid;gap:12px}

/* ---------------------------------------------------------------- search & forms */
.search-box{display:flex;gap:12px;margin:2rem 0}
.search-box input{
  flex:1;background:var(--inset);border:1px solid var(--line-2);
  border-radius:var(--r-full);padding:.95em 1.35em;color:var(--ink);
  font-size:var(--t-base);font-family:var(--mono);
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease);
}
.search-box input::placeholder{color:var(--ink-4)}
.search-box input:focus{outline:none;border-color:var(--amber);box-shadow:0 0 0 4px rgba(255,178,48,.14)}
#results .card{margin-bottom:14px}

form.contact{display:grid;gap:17px;max-width:540px}
form.contact label{
  font-size:var(--t-xs);letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-3);font-weight:600;
}
form.contact input,form.contact textarea{
  width:100%;background:var(--inset);border:1px solid var(--line-2);
  border-radius:var(--r-sm);padding:.85em 1em;color:var(--ink);
  font-family:var(--sans);font-size:var(--t-base);
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease);
}
form.contact input:focus,form.contact textarea:focus{
  outline:none;border-color:var(--amber);box-shadow:0 0 0 4px rgba(255,178,48,.14);
}
form.contact textarea{min-height:160px;resize:vertical}

/* ---------------------------------------------------------------- motion */
:focus-visible{outline:2px solid var(--amber);outline-offset:3px;border-radius:4px}

/* Scroll-driven reveal — native where supported, no JS, no layout shift */
@media(prefers-reduced-motion:no-preference){
  @supports(animation-timeline:view()){
    .card,.rank,.verdict,.tldr,.note,.table-scroll,.proscons{
      animation:reveal linear both;
      animation-timeline:view();
      animation-range:entry 0% entry 42%;
    }
    @keyframes reveal{
      from{opacity:0;transform:translateY(22px)}
      to{opacity:1;transform:none}
    }
  }
}

/* Cross-document view transitions where supported */
@view-transition{navigation:auto}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .card:hover,.rank:hover,.btn:hover{transform:none}
}

@media print{
  body{background:#fff;color:#000}
  body::before{display:none}
  .site-header,.site-footer,.btn-buy,.crumbs,.toc,.disclosure,.datastrip{display:none}
  .card,.rank,.verdict,.note,.tldr,.table-scroll{border:1px solid #ccc;background:none;box-shadow:none}
  .score-num,.rank-num,.award{color:#000;background:none;text-shadow:none;border-color:#ccc}
  a{color:#000;text-decoration:underline}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:.75em;color:#555}
}