/* VOLT Phase 1 — design system v2 (mobile visual refinement, 2026-11-01).
   Dark graphite + electric blue. Presentation only: same data, same pages.
   Changes vs v1: editorial hero with guaranteed-contrast text ground, flagship
   feature/rows/rail layouts, brighter secondary text + larger spec/footer type,
   tighter section rhythm, structured footer policy block, bigger tap targets. */
:root{
  --bg:#0a0c10; --bg2:#0e1118; --panel:#131722; --panel2:#171c2a;
  --line:#232839; --line2:#2e3550;
  --ink:#f2f5fa; --mut:#9aa4b5; --mut2:#aeb9cc; --dim:#6b7488;
  --blue:#2f7bff; --blue2:#5ea2ff; --glow:rgba(47,123,255,.35);
  --ok:#3ecf8e; --warn:#ffb84d; --out:#ff7070;
  --rad:18px; --maxw:1240px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:"Avenir Next","Segoe UI",system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;line-height:1.6;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px}

/* demo banner */
.demo-banner{background:linear-gradient(90deg,#12244d,#0d1b38);color:#cfe2ff;font-size:.9rem;letter-spacing:.02em;text-align:center;padding:10px 14px;border-bottom:1px solid var(--line2)}
.demo-banner strong{color:#fff}

/* header */
.site-head{position:sticky;top:0;z-index:50;background:rgba(10,12,16,.86);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.head-in{display:flex;align-items:center;gap:22px;height:64px}
.logo{font-size:1.55rem;font-weight:800;letter-spacing:.22em}
.logo em{font-style:normal;color:var(--blue2)}
.main-nav{display:flex;gap:4px;margin-left:auto;flex-wrap:wrap}
.main-nav a{display:inline-flex;align-items:center;min-height:44px;padding:10px 12px;border-radius:10px;font-size:.95rem;color:var(--mut);white-space:nowrap}
.main-nav a:hover,.main-nav a.on{color:var(--ink);background:var(--panel2)}
.nav-toggle{display:none;margin-left:auto;background:var(--panel2);border:1px solid var(--line2);color:var(--ink);border-radius:10px;padding:10px 16px;min-height:48px;font-size:.95rem;cursor:pointer}

/* hero — editorial: text on the solid page ground (contrast guaranteed),
   product visual in its own framed panel, product large in frame */
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line);
  background:radial-gradient(1100px 480px at 88% -10%,rgba(47,123,255,.17),transparent 60%),radial-gradient(720px 380px at -12% 112%,rgba(47,123,255,.09),transparent 60%),var(--bg)}
.hero-grid{display:grid;grid-template-columns:1fr;gap:30px;padding-top:50px;padding-bottom:52px;align-items:center}
.hero-tx{max-width:640px}
.kicker{color:var(--blue2);font-weight:700;letter-spacing:.28em;font-size:.8rem;text-transform:uppercase}
.hero h1{font-size:clamp(2.6rem,7vw,4.6rem);line-height:1.03;font-weight:800;letter-spacing:-.01em;margin:14px 0 16px}
.hero p.lede{font-size:clamp(1.05rem,2vw,1.25rem);color:#d3dcec;max-width:54ch}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px;align-items:center}
.hero-media{border-radius:24px;overflow:hidden;border:1px solid var(--line2);box-shadow:0 30px 80px rgba(0,0,0,.55),0 18px 60px var(--glow)}
.hero-media img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}
@media (min-width:1024px){
  .hero-grid{grid-template-columns:1.02fr 1fr;gap:48px;padding-top:70px;padding-bottom:70px}
  .hero-media{height:100%}
  .hero-media img{aspect-ratio:auto;min-height:430px}
}
.btn{display:inline-block;background:var(--blue);color:#fff;font-weight:700;padding:16px 30px;border-radius:999px;font-size:1.05rem;box-shadow:0 8px 30px var(--glow)}
.btn:hover{background:#1f6bf0}
.btn.ghost{background:transparent;border:1px solid var(--line2);color:var(--ink);box-shadow:none}
.soon{display:inline-flex;align-items:center;gap:9px;border:1px dashed var(--line2);color:var(--mut);padding:12px 18px;border-radius:999px;font-size:.94rem}
.soon b{color:var(--blue2);font-weight:700;font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;border:1px solid var(--line2);border-radius:999px;padding:3px 9px}

/* sections */
section.blk{padding:46px 0 6px}
.sec-head{display:flex;align-items:baseline;gap:16px;margin-bottom:22px;flex-wrap:wrap}
.sec-head h2{font-size:clamp(1.6rem,3.4vw,2.3rem);font-weight:800;letter-spacing:-.01em}
.sec-head p{color:var(--mut2);max-width:62ch}
.sec-head .more{margin-left:auto;color:var(--blue2);font-weight:600;font-size:.95rem}

/* flagship presentations — one feature, two split rows, one rail (no stack of 8) */
.brand{color:var(--blue2);font-weight:700;letter-spacing:.2em;font-size:.75rem;text-transform:uppercase}
ul.keys{list-style:none;display:grid;gap:6px;margin:6px 0 2px}
ul.keys li{color:var(--mut2);font-size:.95rem;padding-left:18px;position:relative}
ul.keys li::before{content:"";position:absolute;left:0;top:.55em;width:7px;height:7px;border-radius:50%;background:var(--blue)}
ul.keys li b{color:var(--ink);font-weight:600}
.price-row{display:flex;align-items:baseline;gap:12px;margin-top:6px;flex-wrap:wrap}
.price{font-size:1.5rem;font-weight:800}
.was{color:var(--dim);text-decoration:line-through;font-size:1.02rem}
.save{color:var(--ok);font-weight:700;font-size:.85rem}
.view-link{margin-top:10px;color:var(--blue2);font-weight:700}
.view-link:hover{text-decoration:underline}
.btn-lite{display:inline-flex;align-self:flex-start;align-items:center;border:1px solid rgba(94,162,255,.5);background:rgba(47,123,255,.12);padding:11px 18px;border-radius:999px;margin-top:12px;font-size:.98rem}
.btn-lite:hover{background:rgba(47,123,255,.22);text-decoration:none}

.flag-feature{display:grid;grid-template-columns:1.12fr 1fr;border:1px solid var(--line);border-radius:22px;overflow:hidden;background:var(--panel);margin-bottom:20px}
.flag-feature .ph{position:relative;min-height:300px}
.flag-feature .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.flag-feature .tx{padding:34px 36px;display:flex;flex-direction:column;gap:11px;justify-content:center}
.flag-feature h3{font-size:clamp(1.6rem,2.8vw,2.15rem);line-height:1.15;font-weight:800}
.flag-feature .tag{color:#c9d3e4;font-size:1.06rem}

.flag-row{display:grid;grid-template-columns:300px 1fr;border:1px solid var(--line);border-radius:var(--rad);overflow:hidden;background:var(--panel);margin-bottom:16px}
.flag-row .ph{display:block;position:relative;min-height:190px}
.flag-row .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.flag-row .tx{padding:22px 26px;display:flex;flex-direction:column;gap:8px;justify-content:center}
.flag-row h3{font-size:1.35rem;font-weight:800;line-height:1.2}
.flag-row h3 a:hover{color:var(--blue2)}
.flag-row .tag{color:#c9d3e4;font-size:1rem}
.flag-row ul.keys{display:flex;flex-wrap:wrap;gap:4px 22px;margin:2px 0}
.flag-row .row-foot{display:flex;align-items:center;gap:14px 18px;flex-wrap:wrap;margin-top:4px}
.flag-row .row-foot .price-row{margin-top:0}
.flag-row .row-foot .view-link{margin-top:0;margin-left:auto}
.flag-row.flip .ph{order:2}
@media (max-width:860px){
  .flag-feature{grid-template-columns:1fr}
  .flag-feature .ph{min-height:0;aspect-ratio:16/10}
  .flag-feature .tx{padding:24px 22px}
}
@media (max-width:700px){
  /* phone: rows stack — image band on top, full-width text below (no cramped column) */
  .flag-row{grid-template-columns:1fr}
  .flag-row .ph{min-height:0;aspect-ratio:16/10}
  .flag-row.flip .ph{order:0}
  .flag-row .tx{padding:18px}
  .flag-row h3{font-size:1.2rem}
  .flag-row .tag{font-size:.95rem}
  .flag-row .row-foot .view-link{margin-left:auto}
}

.rail-head{display:flex;align-items:baseline;gap:14px;margin:26px 0 14px}
.rail-head h3{font-size:1.3rem;font-weight:800}
.rail-hint{color:var(--dim);font-size:.85rem;letter-spacing:.08em;text-transform:uppercase}
.flag-rail{display:flex;gap:16px;overflow-x:auto;padding:4px 4px 14px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.flag-card{flex:0 0 min(74vw,272px);scroll-snap-align:start;background:var(--panel);border:1px solid var(--line);border-radius:var(--rad);overflow:hidden}
.flag-card a{display:flex;flex-direction:column;height:100%}
.flag-card .ph{aspect-ratio:4/3;overflow:hidden;background:var(--bg2)}
.flag-card .ph img{width:100%;height:100%;object-fit:cover}
.flag-card .bd{padding:15px 16px 17px;display:flex;flex-direction:column;gap:6px;flex:1}
.flag-card .brand{font-size:.7rem}
.flag-card h3{font-size:1.05rem;font-weight:700;line-height:1.25}
.flag-card .keyspec{color:var(--mut2);font-size:.92rem}
.flag-card .keyspec b{color:var(--ink);font-weight:600}
.flag-card .price{font-size:1.15rem}
.flag-card .view-link{margin-top:auto;padding-top:8px}
@media (min-width:1240px){
  .flag-rail{overflow:visible}
  .flag-card{flex:1 1 0}
}

/* product cards */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:20px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--rad);overflow:hidden;display:flex;flex-direction:column;transition:transform .25s ease,border-color .25s ease}
.card:hover{transform:translateY(-3px);border-color:var(--line2)}
.card .ph{aspect-ratio:4/3;overflow:hidden;background:var(--bg2)}
.card .ph img{width:100%;height:100%;object-fit:cover}
.card .bd{padding:16px 16px 18px;display:flex;flex-direction:column;gap:7px;flex:1}
.card .brand{color:var(--blue2);font-weight:700;letter-spacing:.16em;font-size:.7rem;text-transform:uppercase}
.card h3{font-size:1.13rem;font-weight:700;line-height:1.25}
.card .tag{color:var(--mut2);font-size:.92rem;flex:1}
.card .price{font-size:1.22rem}
.card-view{font-size:.95rem;margin-top:10px}
.flag-chip{align-self:flex-start;background:rgba(47,123,255,.14);color:var(--blue2);border:1px solid rgba(47,123,255,.4);font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:3px 9px;border-radius:999px}

/* stock chips */
.stock{display:inline-flex;align-items:center;gap:7px;font-size:.88rem;font-weight:600}
.stock i{width:8px;height:8px;border-radius:50%;display:inline-block}
.stock.in{color:var(--ok)} .stock.in i{background:var(--ok)}
.stock.low{color:var(--warn)} .stock.low i{background:var(--warn)}
.stock.out{color:var(--out)} .stock.out i{background:var(--out)}

/* category tiles */
.cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(262px,1fr));gap:20px}
.cat-tile{position:relative;border-radius:var(--rad);overflow:hidden;border:1px solid var(--line);min-height:210px;display:flex;align-items:flex-end}
.cat-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cat-tile .shade{position:absolute;inset:0;background:linear-gradient(0deg,rgba(8,10,14,.92) 8%,rgba(8,10,14,.25) 55%,transparent)}
.cat-tile .go{position:absolute;top:14px;right:14px;width:38px;height:38px;border-radius:50%;background:rgba(10,12,16,.55);border:1px solid var(--line2);color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.05rem}
.cat-tile .tx{position:relative;padding:20px}
.cat-tile h3{font-size:1.25rem;font-weight:800}
.cat-tile p{color:#d3dcec;font-size:.95rem;margin-top:4px}
.cat-tile .n{color:var(--blue2);font-size:.85rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase}

/* page heads */
.page-head{padding:40px 0 8px}
.page-head h1{font-size:clamp(2rem,4.6vw,3.2rem);font-weight:800;letter-spacing:-.01em;line-height:1.08}
.page-head p{color:var(--mut2);max-width:66ch;margin-top:12px;font-size:1.05rem}
.crumbs{color:var(--dim);font-size:.88rem;margin-bottom:14px}
.crumbs a{color:var(--mut)} .crumbs a:hover{color:var(--ink)}
.cat-hero{border-radius:var(--rad);overflow:hidden;border:1px solid var(--line);margin-top:22px}
.cat-hero img{width:100%;height:230px;object-fit:cover}
@media (max-width:700px){.cat-hero img{height:170px}}

/* PDP */
.pdp{display:grid;grid-template-columns:1.1fr 1fr;gap:30px;padding:26px 0 4px}
.pdp .ph{border-radius:var(--rad);overflow:hidden;border:1px solid var(--line);background:var(--bg2)}
.pdp .ph img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}
.pdp h1{font-size:clamp(1.9rem,3.6vw,2.7rem);font-weight:800;line-height:1.1}
.pdp .tag{color:#c9d3e4;font-size:1.12rem;margin-top:10px}
.pdp .desc{color:var(--mut2);margin-top:16px}
.buy-box{margin-top:22px;border:1px solid var(--line);background:var(--panel);border-radius:var(--rad);padding:20px 22px;display:grid;gap:10px}
.buy-box .price{font-size:2rem}
.no-buy{border:1px dashed var(--line2);border-radius:12px;padding:12px 14px;color:var(--mut2);font-size:.95rem}
.no-buy b{color:var(--ink)}
.spec-sec{padding:32px 0 4px}
.spec-sec h2,.rel-sec h2{font-size:1.5rem;font-weight:800;margin-bottom:18px}
.spec-group{margin-bottom:22px}
.spec-group h3{color:var(--blue2);font-size:.85rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;margin-bottom:8px}
table.specs{width:100%;border-collapse:collapse;background:var(--panel);border:1px solid var(--line);border-radius:12px;overflow:hidden}
table.specs td{padding:13px 16px;border-bottom:1px solid var(--line);font-size:1rem;line-height:1.5;vertical-align:top}
table.specs tr:last-child td{border-bottom:none}
table.specs td.k{color:#b8c4d8;width:32%;font-weight:600}
.policy-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px}
.policy{background:var(--panel);border:1px solid var(--line);border-radius:var(--rad);padding:20px 22px}
.policy h3{font-size:1.02rem;margin-bottom:8px}
.policy p{color:var(--mut2);font-size:.95rem;line-height:1.55}
.rel-sec{padding:32px 0 10px}
.rel-note{color:var(--dim);font-size:.9rem;margin-top:6px}

/* upcoming band */
.upcoming{margin:44px 0 8px;border:1px solid var(--line);border-radius:var(--rad);background:linear-gradient(120deg,#101827,#0c1220);padding:30px}
.upcoming h2{font-size:clamp(1.5rem,3vw,2.1rem);font-weight:800}
.upcoming p{color:var(--mut2);max-width:64ch;margin-top:10px}
.upcoming .row{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}

/* footer — policy trio as a structured block above links and fine print */
footer{margin-top:56px;border-top:1px solid var(--line);background:var(--bg2)}
.foot-in{padding-top:30px;padding-bottom:36px;display:grid;gap:18px}
.foot-top{display:flex;align-items:baseline;gap:10px 16px;flex-wrap:wrap}
.foot-logo{font-size:1.3rem}
.foot-tag{color:var(--mut2);font-size:.92rem}
.foot-policies{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.fpol{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px 16px}
footer h4{font-size:.85rem;letter-spacing:.16em;text-transform:uppercase;color:var(--blue2);margin-bottom:6px}
.fpol p{color:var(--mut2);font-size:.95rem;line-height:1.5}
.foot-shop ul{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:2px 18px}
.foot-shop a{display:flex;align-items:center;min-height:36px;padding:5px 2px;color:var(--mut2);font-size:.95rem}
.foot-shop a:hover{color:var(--ink)}
@media (max-width:719px){.foot-policies{grid-template-columns:1fr}}
@media (max-width:640px){.foot-shop a{font-size:.9rem}}
.disclosure{border:1px dashed var(--line2);border-radius:12px;padding:16px 18px;color:var(--mut2);font-size:.92rem}
.disclosure b{color:var(--ink)}
.build-tag{color:var(--mut);font-size:.85rem;letter-spacing:.06em}

/* reveal motion */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
  .card{transition:none}
  .flag-rail{scroll-snap-type:none}
}

/* responsive */
@media (max-width:960px){
  .pdp{grid-template-columns:1fr}
}
@media (max-width:820px){
  .main-nav{display:none;position:absolute;top:64px;left:0;right:0;background:var(--bg2);border-bottom:1px solid var(--line);flex-direction:column;padding:12px 16px 18px;gap:2px}
  .main-nav.open{display:flex}
  .main-nav a{padding:11px 10px;font-size:1rem;min-height:48px;width:100%}
  .nav-toggle{display:block}
  .hero-grid{padding-top:40px;padding-bottom:42px}
  section.blk{padding:36px 0 4px}
}

/* ===== Phase 2 — commerce (search, compare, cart, sandbox checkout) ===== */
.cart-link{font-weight:700;color:var(--ink)!important}
.flash-wrap{padding-top:16px}
.flash{border:1px solid var(--line2);background:var(--panel);border-radius:12px;padding:12px 16px;margin-bottom:10px;color:var(--mut2);font-size:.97rem}
.flash a{color:var(--blue2);font-weight:600}
.flash.ok{border-color:rgba(62,207,142,.45);color:#c9f2de}
.flash.err{border-color:rgba(255,112,112,.5);color:#ffd9d9}
.card-media{display:block}
.card-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:auto;padding-top:10px}
.card-actions .view-link{margin-top:0;margin-left:auto}
.mini-form{display:inline-flex}
.btn-mini{display:inline-flex;align-items:center;min-height:44px;padding:9px 15px;border-radius:999px;border:1px solid rgba(94,162,255,.5);background:rgba(47,123,255,.14);color:var(--ink);font-weight:600;font-size:.92rem;cursor:pointer;font-family:inherit}
.btn-mini:hover{background:rgba(47,123,255,.25)}
.btn-mini.ghost{background:transparent;border-color:var(--line2);color:var(--mut2)}
.btn-mini.ghost:hover{color:var(--ink);border-color:var(--mut)}
.in-tray{font-size:.88rem;color:var(--ok);font-weight:600}
.btn.wide{display:block;text-align:center;width:100%}
.btn.ghost{background:transparent;border:1px solid var(--line2);color:var(--ink);box-shadow:none}
button.btn{border:none;cursor:pointer;font-family:inherit}
.sandbox-note{color:var(--dim);font-size:.88rem;margin-top:10px}
.warn-note{color:var(--warn);font-size:.92rem;margin-top:6px}
.warn-note a{color:var(--blue2)}

/* shop & search */
.shop-bar{display:flex;gap:14px;flex-wrap:wrap;align-items:flex-end;background:var(--panel);border:1px solid var(--line);border-radius:var(--rad);padding:18px;margin-top:8px}
.f-field{display:flex;flex-direction:column;gap:6px}
.f-field.grow{flex:1 1 220px}
.f-field span{font-size:.8rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--blue2)}
.f-field input,.f-field select{background:var(--bg2);border:1px solid var(--line2);color:var(--ink);border-radius:10px;padding:11px 12px;font-size:1rem;min-height:48px;font-family:inherit;width:100%}
.f-field input:focus,.f-field select:focus{outline:2px solid var(--blue);outline-offset:1px}
.f-check{display:inline-flex;align-items:center;gap:9px;min-height:48px;color:var(--mut2);font-size:.97rem;cursor:pointer}
.f-check input{width:20px;height:20px;accent-color:var(--blue)}
.shop-go{min-height:48px;padding:12px 26px;font-size:1rem}
.clear-link{align-self:center;color:var(--mut);font-size:.93rem;text-decoration:underline}
.result-count{color:var(--mut2);margin:20px 0 14px;font-size:1rem}
.shop-grid{margin-bottom:10px}
.empty-state{border:1px dashed var(--line2);border-radius:var(--rad);padding:34px 28px;text-align:left;background:var(--panel)}
.empty-state h2{font-size:1.45rem;font-weight:800;margin-bottom:8px}
.empty-state p{color:var(--mut2);max-width:56ch;margin-bottom:8px}

/* PDP buy + compatibility */
.buy-form{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end;margin-top:6px}
.buy-form .f-field.qty select{min-width:84px}
.compat-form{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end}
.compat-verdict{margin-top:18px;border-radius:var(--rad);padding:18px 20px;border:1px solid var(--line)}
.compat-verdict p{color:var(--mut2);margin-top:6px}
.compat-verdict.ok{border-color:rgba(62,207,142,.5);background:rgba(62,207,142,.07)}
.compat-verdict.bad{border-color:rgba(255,112,112,.5);background:rgba(255,112,112,.06)}
.compat-verdict.unknown{border-color:var(--line2);background:var(--panel)}

/* compare */
.cmp-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:var(--rad);background:var(--panel)}
table.compare{border-collapse:collapse;width:100%;min-width:640px}
table.compare th,table.compare td{padding:13px 16px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top;font-size:.99rem;line-height:1.5}
table.compare td.k{color:#b8c4d8;font-weight:600;width:21%;min-width:150px}
table.compare thead th{width:26%}
table.compare thead th a{display:grid;gap:5px}
.cmp-img{width:100%;max-width:210px;aspect-ratio:4/3;object-fit:cover;border-radius:12px;border:1px solid var(--line)}
.cmp-name{font-size:1.08rem;font-weight:700;color:var(--ink);line-height:1.3}
.cmp-price{font-size:1.2rem;font-weight:800}
tr.cmp-group td{background:var(--panel2);color:var(--blue2);font-size:.82rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase}
.dim{color:var(--dim)}

/* cart + checkout */
.cart-grid{display:grid;grid-template-columns:1fr 340px;gap:26px;align-items:start;padding-bottom:10px}
@media (max-width:960px){.cart-grid{grid-template-columns:1fr}}
.cart-lines{display:grid;gap:14px}
.cart-line{display:flex;gap:16px;background:var(--panel);border:1px solid var(--line);border-radius:var(--rad);padding:16px}
.cl-media img{width:110px;height:88px;object-fit:cover;border-radius:12px;border:1px solid var(--line)}
.cl-main{flex:1;display:flex;flex-direction:column;gap:7px;align-items:flex-start}
.cl-main h3{font-size:1.1rem;font-weight:700;line-height:1.25}
.qty-form{display:inline-flex;gap:9px;align-items:center;margin-top:4px}
.qty-form label{display:inline-flex;gap:8px;align-items:center;color:var(--mut2);font-size:.95rem}
.qty-form input{width:70px;background:var(--bg2);border:1px solid var(--line2);color:var(--ink);border-radius:10px;padding:9px 10px;font-size:1rem;min-height:44px;font-family:inherit}
.cl-total{text-align:right;display:flex;flex-direction:column;gap:3px}
.cl-total .each{color:var(--dim);font-size:.88rem}
.cart-summary{background:var(--panel);border:1px solid var(--line);border-radius:var(--rad);padding:22px;position:sticky;top:84px}
.cart-summary h2{font-size:1.25rem;font-weight:800;margin-bottom:14px}
.sum-row{display:flex;justify-content:space-between;gap:14px;padding:7px 0;color:var(--mut2)}
.sum-row b{color:var(--ink)}
.sum-row.total{border-top:1px solid var(--line2);margin-top:10px;padding-top:13px;font-size:1.12rem}
.sum-row.total b{font-size:1.3rem}
.ship-to{margin-top:18px;font-size:.85rem;letter-spacing:.16em;text-transform:uppercase;color:var(--blue2)}
.co-h{font-size:1.3rem;font-weight:800;margin:26px 0 14px}
.co-h:first-child{margin-top:0}
.review-line{display:flex;gap:14px;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:12px 14px;margin-bottom:10px}
.review-line img{width:74px;height:58px;object-fit:cover;border-radius:9px;border:1px solid var(--line)}
.review-line div{flex:1;display:flex;flex-direction:column}
.review-line div span{color:var(--mut2);font-size:.92rem}
.ship-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:640px){.ship-grid{grid-template-columns:1fr}}
.ship-methods{border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin:18px 0;display:grid;gap:10px}
.ship-methods legend{color:var(--blue2);font-size:.8rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:0 6px}
.ship-methods label{display:flex;gap:10px;align-items:center;min-height:44px;color:var(--mut2);cursor:pointer}
.ship-methods input{width:20px;height:20px;accent-color:var(--blue)}
.co-form .btn{margin-top:4px}
.pay-panel{border:1px solid rgba(94,162,255,.45);background:linear-gradient(120deg,#101827,#0c1220);border-radius:var(--rad);padding:26px}
.pay-panel h2{font-size:1.35rem;font-weight:800;margin-bottom:10px}
.pay-panel p{color:var(--mut2)}
.pay-actions{display:grid;gap:12px;margin-top:20px}
.pay-actions form{display:grid}
.order-num{font-size:1.15rem;color:var(--mut2)}
.order-num b{color:var(--blue2)}
@media (max-width:640px){
  .cart-line{flex-wrap:wrap}
  .cl-total{text-align:left}
  .cart-summary{position:static}
}

/* Phase 3 — AI concierge (v4 additions) */
a.soon-link{border-style:solid;border-color:var(--line2);color:var(--ink);background:var(--panel)}
a.soon-link:hover{border-color:var(--blue);box-shadow:0 8px 24px var(--glow)}
.ai-budget{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0 6px}
.ai-budget .stat{flex:1 1 150px;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:12px 16px}
.ai-budget .stat span{display:block;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.ai-budget .stat b{font-size:1.12rem}
.ai-budget .stat.over b{color:var(--out)}
.ai-budget .stat small{display:block;color:var(--mut2);font-size:.82rem}
.ai-shell{background:var(--panel);border:1px solid var(--line);border-radius:var(--rad);overflow:hidden;margin-top:16px}
.ai-thread{max-height:62vh;overflow-y:auto;padding:20px;display:flex;flex-direction:column;gap:14px}
.ai-empty{color:var(--mut2);max-width:56ch}
.msg{max-width:88%;padding:12px 16px;border-radius:16px;line-height:1.55;white-space:pre-wrap;word-wrap:break-word}
.msg.user{align-self:flex-end;background:#1d3a75;color:#eaf2ff;border-bottom-right-radius:6px}
.msg.ai{align-self:flex-start;background:var(--panel2);border:1px solid var(--line);border-bottom-left-radius:6px}
.msg.sys{align-self:center;background:transparent;border:1px dashed var(--line2);color:var(--mut2);font-size:.92rem;text-align:center;max-width:92%}
.msg.sys.limit{border-color:var(--warn);color:#ffd9a0}
.block{margin-top:4px}
.block h4{font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);margin-bottom:10px}
.ai-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:12px}
.ai-card{background:var(--bg2);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.ai-card img{width:100%;aspect-ratio:4/3;object-fit:cover}
.ai-card .pad{padding:10px 12px 12px}
.ai-card .br{color:var(--dim);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase}
.ai-card h5{font-size:.92rem;line-height:1.3;margin:2px 0 4px}
.ai-card .pr{font-weight:800}
.ai-card .stk{font-size:.8rem;color:var(--mut2)}
.ai-card button{margin-top:8px;width:100%;background:var(--blue);color:#fff;border:0;border-radius:10px;padding:10px;font-weight:700;cursor:pointer;min-height:44px}
.ai-card button:disabled{background:var(--panel2);color:var(--mut);cursor:default}
.ai-card a.view{display:inline-block;margin-top:6px;color:var(--blue2);font-size:.85rem}
.ai-compare-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:14px}
table.ai-compare{border-collapse:collapse;min-width:520px;width:100%;background:var(--bg2)}
table.ai-compare th,table.ai-compare td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top;font-size:.92rem}
table.ai-compare th{color:var(--ink)}
table.ai-compare td.lbl{color:var(--dim);white-space:nowrap}
table.ai-compare td.grp{color:var(--ink);font-weight:700;background:var(--panel2);letter-spacing:.02em}
.msg.ai p{margin:0 0 8px}
.msg.ai p:last-child{margin-bottom:0}
.msg.ai .md-h{font-weight:800;color:var(--ink);margin:10px 0 4px}
.msg.ai .md-h:first-child{margin-top:0}
.msg.ai .md-li{margin:2px 0 2px 10px}
.msg.ai code{background:var(--panel2);padding:1px 5px;border-radius:6px;font-size:.86em}
.msg.ai table.ai-mdt{border-collapse:collapse;width:100%;margin:8px 0;font-size:.86rem}
.msg.ai table.ai-mdt th,.msg.ai table.ai-mdt td{border:1px solid var(--line);padding:6px 8px;text-align:left;vertical-align:top}
.msg.ai table.ai-mdt th{color:var(--ink);background:var(--panel2)}
.ai-verdict{display:inline-block;padding:4px 12px;border-radius:999px;font-weight:700;font-size:.85rem}
.ai-verdict.yes{background:rgba(62,207,142,.15);color:var(--ok)}
.ai-verdict.no{background:rgba(255,112,112,.14);color:var(--out)}
.ai-verdict.unknown{background:rgba(255,184,77,.14);color:var(--warn)}
.ai-cart{background:var(--bg2);border:1px solid var(--line);border-radius:14px;padding:14px 16px}
.ai-cart .row{display:flex;justify-content:space-between;gap:12px;padding:4px 0}
.ai-cart .tot{border-top:1px solid var(--line2);margin-top:8px;padding-top:10px;font-weight:800}
.ai-typing{display:none;align-items:center;gap:8px;color:var(--mut2);padding:0 20px 14px;font-size:.92rem}
.ai-typing.on{display:flex}
.ai-typing .dot{width:8px;height:8px;border-radius:50%;background:var(--blue2);animation:aipulse 1.1s infinite ease-in-out}
.ai-typing .dot:nth-child(3){animation-delay:.18s}.ai-typing .dot:nth-child(4){animation-delay:.36s}
@keyframes aipulse{0%,100%{opacity:.25;transform:scale(.8)}50%{opacity:1;transform:scale(1.15)}}
.ai-error{display:none;margin:0 20px 14px;background:rgba(255,112,112,.1);border:1px solid var(--out);color:#ffc9c9;border-radius:12px;padding:12px 16px}
.ai-error.on{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.ai-error button{background:transparent;border:1px solid var(--out);color:#ffc9c9;border-radius:999px;padding:8px 18px;cursor:pointer;min-height:40px;font-weight:700}
.ai-chips{display:flex;gap:8px;flex-wrap:wrap;padding:14px 20px 4px}
.ai-chips button{background:var(--panel2);border:1px solid var(--line2);color:var(--ink);border-radius:999px;padding:10px 16px;cursor:pointer;font-size:.9rem;min-height:44px}
.ai-chips button:hover{border-color:var(--blue)}
.ai-composer{display:flex;gap:10px;padding:16px 20px 20px;border-top:1px solid var(--line)}
.ai-composer textarea{flex:1;background:var(--bg2);border:1px solid var(--line2);border-radius:14px;color:var(--ink);padding:13px 14px;font:inherit;resize:vertical;min-height:52px;max-height:140px}
.ai-composer button{background:var(--blue);color:#fff;border:0;border-radius:14px;padding:0 26px;font-weight:800;cursor:pointer;min-height:52px}
.ai-composer button:disabled{background:var(--panel2);color:var(--mut)}
.ai-off{background:var(--panel);border:1px dashed var(--line2);border-radius:var(--rad);padding:30px 26px;margin-top:18px}
.ai-off h2{font-size:1.35rem;margin-bottom:8px}
.ai-off p{color:var(--mut2);max-width:62ch}
.ai-off .examples{margin-top:16px;display:flex;gap:8px;flex-wrap:wrap}
.ai-off .examples span{border:1px solid var(--line2);border-radius:999px;padding:9px 15px;font-size:.9rem;color:var(--mut)}
@media (prefers-reduced-motion: reduce){.ai-typing .dot{animation:none}}

/* ============ VISUAL RECOVERY (2026-11-02, build .14) ============
   Presentation-only corrections per the Visual Regression Audit,
   all within the baseline design system (same tokens, type tiers,
   card grammar). No new visual language. */

/* 12 — compact mobile demo banner (desktop presentation unchanged) */
.banner-compact{display:none}
@media (max-width:700px){
  .demo-banner{padding:8px 12px;font-size:.85rem}
  .banner-full{display:none}
  .banner-compact{display:inline}
}

/* 3+4 — budget strip + allowance disclosure (replaces .stat cards) */
.ai-budget{display:block;margin:14px 0 6px}
.ai-strip{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:9px 14px;min-height:48px;font-size:.95rem;color:var(--mut2)}
.ai-strip .seg b{color:var(--ink)}
.ai-strip .sep{color:var(--dim)}
.ai-strip.over{border-color:#5a3436}
.ai-disc-btn{margin-left:auto;background:none;border:1px solid var(--line2);color:var(--blue2);border-radius:999px;padding:6px 12px;font:inherit;font-size:.88rem;font-weight:700;cursor:pointer;min-height:36px}
.ai-disclosure{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px 16px;margin-top:8px;color:var(--mut2);font-size:.93rem;line-height:1.5}
.ai-disclosure p{margin:0 0 8px}
.ai-disclosure p:last-child{margin-bottom:0}
.ai-disclosure b{color:var(--ink)}

/* 2 — "Featured right now" empty-state rail (real flagship cards) */
.ai-featured{margin:2px 0 8px}
.ai-featured-head{display:flex;justify-content:space-between;align-items:baseline;margin:2px 0 10px}
.ai-featured-head h4{margin:0;font-size:1rem}
.ai-featured-head .rail-hint{color:var(--dim);font-size:.85rem;display:none}
.ai-featured-rail{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.ai-fcard{background:var(--panel2);border:1px solid var(--line);border-radius:14px;overflow:hidden;display:flex;flex-direction:column}
.ai-fcard-media{display:block;aspect-ratio:4/3;background:#0e1420}
.ai-fcard-media img{width:100%;height:100%;object-fit:cover;display:block}
.ai-fcard .pad{padding:12px 14px 14px;display:flex;flex-direction:column;gap:6px;flex:1}
.ai-fcard .brand{color:var(--blue2);font-weight:700;letter-spacing:.16em;font-size:.72rem;text-transform:uppercase}
.ai-fcard h5{margin:0;font-size:1rem;line-height:1.3}
.ai-fcard h5 a{color:var(--ink)}
.ai-fcard .tag{color:var(--mut);font-size:.88rem;line-height:1.35;margin:0}
.ai-fcard .price{font-size:1.12rem;font-weight:800}
.ai-fcard-actions{margin-top:auto;display:flex;justify-content:space-between;align-items:center;gap:10px;padding-top:6px}
.ai-fcard .view-link{color:var(--blue2);font-weight:700;font-size:.92rem;white-space:nowrap}
.ask-btn{background:var(--panel);border:1px solid var(--line2);color:var(--ink);border-radius:999px;padding:8px 12px;font:inherit;font-size:.88rem;font-weight:700;cursor:pointer;min-height:40px;white-space:nowrap}
@media (max-width:700px){
  .ai-featured-rail{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;padding-bottom:6px;-webkit-overflow-scrolling:touch}
  .ai-fcard{flex:0 0 76%;scroll-snap-align:start}
  .ai-featured-head .rail-hint{display:inline}
}

/* 5 — example prompts: one-row scroll-snap rail */
.ai-chips{flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x proximity;padding:10px 20px 4px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.ai-chips::-webkit-scrollbar{display:none}
.ai-chips button{flex:0 0 auto;white-space:nowrap;scroll-snap-align:start;min-height:38px;padding:8px 14px}

/* 7 — chat cards: shop grammar additions */
.ai-card .tag{color:var(--mut);font-size:.85rem;line-height:1.35}
.ai-card .price-row{margin-top:2px}
.ai-card .was{font-size:.92rem}
.ai-card .stk .stock{font-size:.85rem}

/* 8 — comparison table: stacked, nothing clipped, no inner scroll ≤700 */
@media (max-width:700px){
  .ai-compare-wrap{overflow-x:visible}
  table.ai-compare{min-width:0;width:100%;table-layout:fixed;font-size:.85rem}
  table.ai-compare th,table.ai-compare td{padding:8px;white-space:normal;overflow-wrap:break-word}
}

/* 6 — composer sticky once a conversation exists (mobile), sitting
   above the on-screen keyboard via the --ai-kb visualViewport offset */
@media (max-width:700px){
  .ai-shell{overflow:visible}
  .ai-shell.live .ai-composer{position:sticky;bottom:var(--ai-kb,0px);z-index:6;border-radius:0 0 var(--rad) var(--rad);box-shadow:0 -10px 28px rgba(0,0,0,.4);padding-bottom:calc(14px + env(safe-area-inset-bottom))}
}

/* 10 — compact footer (concierge page only) */
.foot-in-compact{padding-top:26px;padding-bottom:30px;display:grid;gap:14px}
.foot-policy-links{display:flex;gap:10px;align-items:center;font-weight:600;font-size:.95rem}
.foot-policy-links a{color:var(--blue2)}
.foot-policy-links span{color:var(--dim)}

/* 11 — shop filters behind a disclosure ≤700 (desktop untouched:
   the wrapper is display:contents and the toggle is hidden) */
.filters-toggle{display:none}
.shop-filters{display:contents}
@media (max-width:700px){
  .filters-toggle{display:inline-flex;align-items:center;gap:8px;background:var(--panel2);border:1px solid var(--line2);color:var(--ink);border-radius:999px;padding:10px 16px;font:inherit;font-size:.95rem;font-weight:700;cursor:pointer;min-height:48px}
  .filters-toggle .ft-caret{color:var(--blue2);transition:transform .15s ease}
  .shop-filters{display:none}
  .shop-bar.filters-open .shop-filters{display:flex;flex-wrap:wrap;gap:14px;flex-basis:100%}
  .shop-bar.filters-open .filters-toggle .ft-caret{transform:rotate(180deg)}
}

/* Visual recovery fix pass (.15): compare labels must wrap (the base
   td.lbl nowrap rule out-specified the recovery block and overlapped
   values); tighten the strip + compact footer at phone width. */
@media (max-width:700px){
  table.ai-compare td.lbl{white-space:normal}
  .ai-strip{line-height:1.25;padding:8px 12px;row-gap:2px;font-size:.92rem}
  .ai-disc-btn{min-height:32px;padding:4px 10px}
}
.foot-in-compact{padding-top:22px;padding-bottom:26px;gap:12px}
.foot-in-compact .disclosure{font-size:.9rem;line-height:1.5;padding:12px 14px}
.foot-in-compact .build-tag{margin-top:2px}

/* Visual recovery fix pass 2 (.16): last 6 px on the phone strip. */
@media (max-width:700px){
  .ai-strip{padding:7px 12px;font-size:.9rem}
  .ai-disc-btn{min-height:28px;padding:3px 10px}
}

/* ============ VISUAL RESTORATION (2026-11-02, builds .17+) ============
   R1–R5: the Phase 2/3 surfaces re-composed FROM the v2 design system —
   poster hero grammar, .flag-feature/.flag-row/.flag-rail components,
   .card dialect everywhere. Additions only: no v2–v7 rule is edited,
   no class renamed. Tokens, type tiers and motion are the original's. */

/* R1 — concierge poster opening: the store hero at concierge scale.
   Kicker -> display headline -> lede -> the one big action (composer)
   -> flagship photograph panel. The strip rides as the utility row. */
.ai-hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line);
  background:radial-gradient(1100px 480px at 88% -10%,rgba(47,123,255,.17),transparent 60%),radial-gradient(720px 380px at -12% 112%,rgba(47,123,255,.09),transparent 60%),var(--bg)}
.ai-hero-grid{display:grid;grid-template-columns:1fr;gap:22px;padding-top:30px;padding-bottom:30px;align-items:center}
.ai-hero h1{font-size:clamp(2.1rem,6vw,3.3rem);line-height:1.05;font-weight:800;letter-spacing:-.01em;margin:12px 0 12px}
.ai-hero p.lede{font-size:clamp(1rem,1.8vw,1.15rem);color:#d3dcec;max-width:54ch}
.ai-hero-media{border-radius:24px;overflow:hidden;border:1px solid var(--line2);box-shadow:0 30px 80px rgba(0,0,0,.55),0 18px 60px var(--glow)}
.ai-hero-media img{width:100%;height:100%;object-fit:cover;aspect-ratio:16/9}
@media (min-width:1024px){
  .ai-hero-grid{grid-template-columns:1.02fr 1fr;gap:44px;padding-top:48px;padding-bottom:48px}
  .ai-hero-media img{aspect-ratio:4/3}
}
/* composer as the hero action row: a store panel, not an app dock */
.ai-hero .ai-composer{border-top:0;background:var(--panel);border:1px solid var(--line);border-radius:var(--rad);padding:14px;margin-top:20px}
.ai-hero .ai-budget{margin:16px 0 0}
.ai-hero-live[hidden]{display:none}
/* conversation state (mobile): composer docks to the viewport bottom,
   above the on-screen keyboard via the --ai-kb visualViewport offset
   (set by the concierge client). Body padding is set from the measured
   composer height (--ai-composer-h) so nothing is obscured. */
@media (max-width:700px){
  body.ai-live .ai-composer{position:fixed;left:10px;right:10px;bottom:calc(var(--ai-kb,0px) + 8px);z-index:60;margin-top:0;
    box-shadow:0 14px 40px rgba(0,0,0,.55);padding-bottom:calc(14px + env(safe-area-inset-bottom))}
  body.ai-live{padding-bottom:var(--ai-composer-h,140px)}
}

/* R2 — featured rail in the thread IS the homepage .flag-rail.
   Spacing inside the chat panel only; component rules are v2's. */
.ai-shell .flag-rail{padding:2px 2px 10px}
.ai-shell .rail-head{margin:0 0 10px}
.ai-shell .rail-head h3{font-size:1.02rem}
.flag-card .flag-actions{display:flex;align-items:center;gap:10px;margin-top:auto;padding-top:8px}
.flag-card .flag-actions .view-link{margin-top:0;padding-top:0}
.flag-card .flag-actions .ask-btn{margin-left:auto}

/* R3 — thread blocks speak the store's .card dialect (one card
   language across shop, category and chat) */
.ai-block-grid{grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:14px}
.ai-block-grid .card .bd{gap:6px}
.ai-block-grid .card-actions{display:flex;align-items:center;gap:10px;margin-top:10px;flex-wrap:wrap}
.ai-block-grid .card-actions .btn-mini{background:var(--blue);color:#fff;border:0;border-radius:10px;padding:10px 14px;font-weight:700;cursor:pointer;min-height:44px;font-size:.92rem}
.ai-block-grid .card-actions .btn-mini:disabled{background:var(--panel2);color:var(--mut);cursor:default}
.ai-block-grid .card-actions .view-link{margin-top:0}
/* comparison block: store panel + product photo headers (.cmp-img
   grammar from the human compare page) */
.block .ai-compare-wrap{background:var(--bg2)}
table.ai-compare th .cmp-img{display:block;width:100%;max-width:150px;aspect-ratio:4/3;object-fit:cover;border-radius:10px;margin-bottom:8px}
.block .ai-cart{box-shadow:0 10px 30px rgba(0,0,0,.25)}

/* R4 — shop curated default: flagship presentations + category rails,
   composed in the homepage rhythm. The toolbar stays a subordinate
   utility row; results mode is untouched. */
.shop-curated .flag-feature{margin-top:26px}
.browse-all-cta{display:flex;align-items:center;gap:16px;flex-wrap:wrap;border:1px dashed var(--line2);border-radius:var(--rad);padding:20px 22px;margin:30px 0 6px}
.browse-all-cta p{color:var(--mut2);max-width:56ch}
.browse-all-cta .btn{margin-left:auto}
.curated-back{display:inline-block;margin-top:14px;color:var(--blue2);font-weight:600;font-size:.95rem}

/* R5 — homepage concierge band: image-led panel in the .2 .upcoming
   grammar (photo panel + headline + chips + one primary action) */
.upcoming{display:grid;grid-template-columns:1fr;gap:22px;align-items:center}
.upcoming .up-media{border-radius:14px;overflow:hidden;border:1px solid var(--line2)}
.upcoming .up-media img{width:100%;height:100%;object-fit:cover;aspect-ratio:16/10}
.upcoming .up-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px;align-items:center}
@media (min-width:900px){
  .upcoming{grid-template-columns:minmax(300px,420px) 1fr;gap:34px}
  .upcoming .up-media img{aspect-ratio:4/3}
}
/* R2 guard: in chat/category rails the flagship card's media is its own
   link (the card also carries buttons, so it cannot be one big anchor
   like the homepage rail). Neutralise the v2 whole-card anchor rule
   for that link only. */
.flag-card>a.ph-link{display:block;height:auto}

/* ============ PHASE 5 (2026-11-02, builds .30+) — AGENT THEATER ====
   Additions only: no v2–v8 rule is edited, no class renamed. The theater
   page composes the store's own components (.card, .flag grammar,
   .compare, .stock, .sum-row) plus the .th-* classes below. */
.th-hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line);
  background:radial-gradient(1100px 480px at 88% -10%,rgba(47,123,255,.17),transparent 60%),radial-gradient(720px 380px at -12% 112%,rgba(47,123,255,.09),transparent 60%),var(--bg)}
.th-hero-grid{display:grid;grid-template-columns:1fr;gap:22px;padding-top:30px;padding-bottom:30px;align-items:center}
.th-hero h1{font-size:clamp(2.1rem,6vw,3.3rem);line-height:1.05;font-weight:800;letter-spacing:-.01em;margin:12px 0 12px}
.th-hero p.lede{font-size:clamp(1rem,1.8vw,1.15rem);color:#d3dcec;max-width:54ch}
.th-hero-points{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:18px;color:var(--mut2);font-size:.95rem}
.th-hero-points b{color:var(--ink)}
.th-hero-media{border-radius:24px;overflow:hidden;border:1px solid var(--line2);box-shadow:0 30px 80px rgba(0,0,0,.55),0 18px 60px var(--glow)}
.th-hero-media img{width:100%;height:100%;object-fit:cover;aspect-ratio:16/9}
.th-hero-media figcaption{padding:10px 14px;background:var(--panel);color:var(--mut2);font-size:.88rem}
@media (min-width:1024px){
  .th-hero-grid{grid-template-columns:1.02fr 1fr;gap:44px;padding-top:48px;padding-bottom:48px}
  .th-hero-media img{aspect-ratio:4/3}
}
.th-notice{border:1px solid var(--line2);background:var(--panel);border-radius:var(--rad);padding:16px 18px;margin-bottom:18px;color:var(--mut2)}
.th-notice b{color:var(--ink)}
.th-composer{margin-bottom:8px}
.th-fieldset{border:0;padding:0;margin:0;min-width:0}
.th-fieldset:disabled{opacity:.55}
.th-presets{display:grid;grid-template-columns:1fr;gap:14px}
@media (min-width:768px){.th-presets{grid-template-columns:repeat(3,1fr)}}
.th-preset{display:block;background:var(--panel);border:1px solid var(--line);border-radius:var(--rad);padding:18px;cursor:pointer}
.th-preset input{position:absolute;opacity:0}
.th-preset:has(input:checked){border-color:var(--blue);box-shadow:0 0 0 1px var(--blue),0 12px 34px rgba(0,0,0,.35)}
.th-preset.is-disabled{cursor:not-allowed}
.th-preset-tag{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--blue2);font-weight:700}
.th-preset h3{margin:8px 0 6px;font-size:1.15rem}
.th-preset p{color:var(--mut2);font-size:.95rem}
.th-preset-budget{display:inline-block;margin-top:12px;background:var(--panel2);border:1px solid var(--line2);border-radius:999px;padding:4px 12px;font-weight:700;font-size:.9rem}
.th-custom{display:block;margin-top:16px}
.th-custom span{display:block;font-weight:700;margin-bottom:8px}
.th-custom textarea{width:100%;background:var(--panel);border:1px solid var(--line2);border-radius:12px;color:var(--ink);padding:12px 14px;font:inherit;resize:vertical}
.th-composer-foot{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:16px}
.th-composer-foot .sandbox-note{flex:1;min-width:220px}
.th-stage{margin-top:34px;border-top:1px solid var(--line);padding-top:26px}
.th-stage-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.th-state{background:var(--panel2);border:1px solid var(--line2);border-radius:999px;padding:4px 12px;font-size:.9rem;font-weight:700}
.th-budget{margin:18px 0;background:var(--panel);border:1px solid var(--line);border-radius:var(--rad);padding:14px 16px}
.th-budget-top{display:flex;justify-content:space-between;gap:12px;font-size:.95rem;color:var(--mut2)}
.th-budget-top b{color:var(--ink)}
.th-meter{height:12px;background:var(--bg2);border-radius:999px;overflow:hidden;margin-top:10px;border:1px solid var(--line)}
.th-meter-fill{height:100%;width:0;background:linear-gradient(90deg,var(--blue),var(--blue2));border-radius:999px;transition:width .8s ease}
.th-meter-fill.over{background:var(--out)}
.th-stage-grid{display:grid;grid-template-columns:1fr;gap:18px;align-items:start}
@media (min-width:1024px){.th-stage-grid{grid-template-columns:1.6fr 1fr}}
.th-timeline{display:grid;gap:12px}
.th-ev{background:var(--panel);border:1px solid var(--line);border-radius:var(--rad);padding:14px 16px}
.th-ev p{color:var(--mut2)}
.th-ev b{color:var(--ink)}
.th-ev-k{display:block;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--blue2);font-weight:700;margin-bottom:6px}
.th-ev-note{border-color:var(--line2);background:var(--panel2)}
.th-ev-note p{color:var(--ink)}
.th-ev-rej{opacity:.85}
.th-ev-wait{border-color:var(--blue)}
.th-stream{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;margin-top:8px}
.th-chip{display:inline-block;margin-top:8px;background:rgba(62,207,142,.14);color:var(--ok);border:1px solid rgba(62,207,142,.4);border-radius:999px;padding:2px 10px;font-size:.82rem;font-weight:700}
.th-cmp{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:8px 0}
.th-cmp-col{background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:10px;display:grid;gap:4px}
.th-cmp-col img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:8px}
.th-cmp-table{margin-top:6px}
.th-compat{background:var(--panel);border:1px solid var(--line2);border-radius:var(--rad);padding:14px 16px;margin-top:12px}
.th-compat p{color:var(--mut2)}
.th-verdict{font-weight:800;text-transform:capitalize}
.th-verdict-compatible{color:var(--ok)}
.th-verdict-incompatible{color:var(--out)}
.th-verdict-unknown{color:var(--warn)}
.th-side{display:grid;gap:14px}
.th-panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--rad);padding:16px}
.th-panel h3{margin-bottom:10px}
.th-cart-line{display:flex;gap:10px;align-items:center;padding:8px 0;border-bottom:1px solid var(--line)}
.th-cart-line img{width:52px;height:52px;object-fit:cover;border-radius:8px}
.th-cart-line div{flex:1;display:grid}
.th-cart-line span{color:var(--mut2);font-size:.88rem}
.th-ev-list{list-style:none;display:grid;gap:8px;margin-top:10px;font-size:.88rem;color:var(--mut2)}
.th-ev-list code{color:var(--ink);word-break:break-all}
.th-ev-status{font-weight:700;color:var(--blue2)}
.th-outcome{margin-top:20px;background:var(--panel2);border:1px solid var(--blue);border-radius:var(--rad);padding:18px}
.th-outcome p{color:var(--mut2);margin-top:6px}
.th-outcome-facts{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:12px;color:var(--mut2)}
.th-outcome-facts b{color:var(--ink)}
.th-rec-grid{display:grid;grid-template-columns:1fr;gap:14px}
@media (min-width:900px){.th-rec-grid{grid-template-columns:repeat(3,1fr)}}
.th-rec{background:var(--panel);border:1px solid var(--line);border-radius:var(--rad);padding:18px;display:grid;gap:8px;align-content:start}
.th-rec-featured{border-color:var(--blue)}
.th-rec-badge{font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--warn);font-weight:700}
.th-rec p{color:var(--mut2);font-size:.95rem}
.th-rec-facts{display:grid;gap:4px;font-size:.92rem;color:var(--mut2)}
.th-rec-facts b{color:var(--ink)}
.th-rec details summary{cursor:pointer;font-weight:700;color:var(--blue2)}
.th-rec details p{margin-top:8px}
.th-fine{margin-top:16px}
@media (prefers-reduced-motion: reduce){
  .th-meter-fill{transition:none}
  html{scroll-behavior:auto}
}

/* ============================================================
   PHASE 5 WOW PASS — Agent Theater playback (appended section;
   every rule above this line is byte-identical to v9-site.css).
   The recorded-mission player: cinematic, product-led playback
   of real recorded agent runs. All classes are wow- prefixed;
   no existing rule is modified.
   ============================================================ */
.wow-hero-cta{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:22px}
.wow-hero-note{font-size:.86rem;color:var(--dim);margin-top:14px;max-width:56ch}
.wow-player{border:1px solid var(--line2);border-radius:24px;background:linear-gradient(180deg,var(--panel2),var(--panel));box-shadow:0 30px 80px rgba(0,0,0,.45);overflow:hidden}
.wow-player-head{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--line)}
.wow-outcome h3{font-size:1.35rem;margin:6px 0 4px}
.wow-outcome p{color:var(--mut2)}
.wow-mission-text{color:var(--ink);font-style:italic;margin-top:8px}
.wow-controls{display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding:14px 20px;border-top:1px solid var(--line);background:rgba(0,0,0,.22)}
.wow-btn{background:var(--blue);color:#fff;border:0;border-radius:999px;padding:11px 22px;font-weight:700;font-size:.98rem;cursor:pointer;box-shadow:0 8px 26px var(--glow)}
.wow-btn:hover{background:#4a8dff}
.wow-btn-mini{background:transparent;color:var(--ink);border:1px solid var(--line2);border-radius:999px;padding:10px 16px;font-weight:600;cursor:pointer}
.wow-btn-mini:hover{border-color:var(--blue)}
.wow-scenelabel{color:var(--mut2);font-size:.9rem;margin-left:auto}
.wow-progress{display:flex;flex-wrap:wrap;gap:6px;padding:12px 20px 2px}
.wow-seg{display:inline-flex;align-items:center;gap:7px;font-size:.78rem;letter-spacing:.04em;color:var(--dim);text-transform:uppercase;font-weight:700}
.wow-seg i{display:block;width:26px;height:4px;border-radius:2px;background:var(--line2)}
.wow-seg.is-cur{color:var(--blue2)} .wow-seg.is-cur i{background:var(--blue)}
.wow-seg.is-done{color:var(--mut2)} .wow-seg.is-done i{background:var(--ok)}
.wow-grid{display:grid;grid-template-columns:1fr;gap:0}
@media (min-width:1024px){.wow-grid{grid-template-columns:1.9fr 1fr}}
.wow-stage{padding:22px 20px 26px;min-height:430px}
.wow-side{border-top:1px solid var(--line);padding:20px;background:rgba(0,0,0,.18)}
@media (min-width:1024px){.wow-side{border-top:0;border-left:1px solid var(--line)}}
.wow-side h3{font-size:1.05rem;margin-bottom:10px}
.wow-budget{margin-bottom:16px}
.wow-budget-top{display:flex;justify-content:space-between;font-size:.88rem;color:var(--mut2);margin-bottom:6px}
.wow-budget-top b{color:var(--ink)}
.wow-act-in{animation:wowIn .55s ease both}
@keyframes wowIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.wow-act-title{font-size:clamp(1.3rem,3vw,1.7rem);margin-bottom:12px;line-height:1.2}
.wow-agent{display:flex;gap:12px;background:rgba(47,123,255,.08);border:1px solid rgba(47,123,255,.25);border-radius:14px;padding:12px 14px;margin-bottom:16px}
.wow-agent-k{flex:none;font-size:.72rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--blue2);padding-top:3px}
.wow-agent p{color:#dbe6fa}
.wow-agent-tx{color:#dbe6fa;flex:1;min-width:0}
.wow-agent-tx p{margin:0 0 6px}
.wow-agent-tx p:last-child{margin-bottom:0}
.wow-note{color:var(--mut2);margin-top:14px;max-width:62ch}
.wow-found{margin-top:14px;color:var(--ink);font-weight:600}
.wow-poster{position:relative;border-radius:18px;overflow:hidden;border:1px solid var(--line2)}
.wow-poster img{width:100%;aspect-ratio:16/8;object-fit:cover}
.wow-poster-tx{position:absolute;left:0;right:0;bottom:0;padding:14px 16px;background:linear-gradient(0deg,rgba(5,8,14,.88),transparent);display:flex;flex-direction:column}
.wow-poster-tx b{font-size:1.05rem}
.wow-poster-tx span{color:var(--mut2);font-size:.9rem}
.wow-discover{display:flex;flex-direction:column;gap:10px}
.wow-endpoint{display:flex;justify-content:space-between;gap:12px;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px 14px;animation:wowIn .5s ease both}
.wow-endpoint code{color:var(--blue2);font-size:.92rem;word-break:break-all}
.wow-status{flex:none;background:rgba(62,207,142,.14);color:var(--ok);border:1px solid rgba(62,207,142,.4);border-radius:999px;padding:2px 10px;font-weight:700;font-size:.82rem}
.wow-results{display:grid;grid-template-columns:1fr;gap:14px}
@media (min-width:700px){.wow-results{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}}
.wow-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--rad);overflow:hidden;animation:wowIn .55s ease both}
.wow-card-media{background:#05070c}
.wow-card-media img{width:100%;aspect-ratio:4/3;object-fit:cover}
.wow-card-bd{padding:14px 16px 16px}
.wow-card .brand{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--blue2);font-weight:700}
.wow-card h4{font-size:1.06rem;line-height:1.3;margin:3px 0 4px}
.wow-tag{color:var(--mut2);font-size:.92rem}
.wow-price-row{display:flex;gap:10px;align-items:baseline;margin:8px 0}
.wow-price{font-size:1.25rem;font-weight:800}
.wow-was{color:var(--dim);text-decoration:line-through}
.wow-specs{display:flex;flex-direction:column;gap:3px;margin-top:9px}
.wow-spec{font-size:.86rem;color:var(--mut2)} .wow-spec b{color:var(--ink);font-weight:600}
.wow-cmp{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:14px}
.wow-cmp-col{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:12px;display:flex;flex-direction:column;gap:5px;animation:wowIn .55s ease both}
.wow-cmp-col img{border-radius:10px;aspect-ratio:4/3;object-fit:cover;width:100%}
.wow-cmp-col b{line-height:1.3}
.wow-cmp-col.is-over{opacity:.62}
.wow-over-tag{position:absolute;top:10px;right:10px;z-index:2;background:rgba(255,112,112,.16);color:var(--out);border:1px solid rgba(255,112,112,.55);border-radius:999px;padding:2px 10px;font-size:.76rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase}
.wow-cmp-table{width:100%}
.wow-compat{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:stretch}
@media (max-width:640px){.wow-compat{grid-template-columns:1fr;justify-items:center;text-align:center}}
.wow-compat-prod{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:12px;display:flex;flex-direction:column;gap:5px;width:100%}
.wow-compat-prod img{border-radius:10px;aspect-ratio:4/3;object-fit:cover;width:100%}
.wow-verdict{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:10px}
.wow-verdict-mark{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.5rem;font-weight:800;background:rgba(62,207,142,.14);color:var(--ok);border:2px solid rgba(62,207,142,.55);box-shadow:0 0 34px rgba(62,207,142,.25)}
.wow-verdict b{text-transform:capitalize;color:var(--ok)}
.wow-compat-reason{margin-top:14px;background:rgba(62,207,142,.07);border:1px solid rgba(62,207,142,.3);border-radius:12px;padding:12px 14px;color:#d8f5e6}
.wow-select{display:grid;grid-template-columns:1fr;gap:14px}
@media (min-width:700px){.wow-select{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}}
.wow-chosen-tag{display:inline-block;background:rgba(62,207,142,.14);color:var(--ok);border:1px solid rgba(62,207,142,.45);border-radius:999px;padding:2px 11px;font-size:.78rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;margin-bottom:8px}
.wow-card.is-chosen{border-color:var(--ok);box-shadow:0 0 0 1px var(--ok),0 18px 44px rgba(62,207,142,.16)}
.wow-passed{display:flex;gap:12px;align-items:center;margin-top:12px;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:10px 12px;opacity:.75}
.wow-passed img{width:56px;height:56px;object-fit:cover;border-radius:9px;flex:none}
.wow-passed span{display:block;color:var(--mut2);font-size:.9rem}
.wow-addwrap{display:grid;grid-template-columns:1fr;gap:14px;align-items:center}
@media (min-width:700px){.wow-addwrap{grid-template-columns:300px auto 1fr}}
.wow-add-arrow{font-size:2rem;color:var(--blue2);text-align:center;animation:wowNudge 1.2s ease infinite}
@keyframes wowNudge{0%,100%{transform:translateX(0)}50%{transform:translateX(8px)}}
.wow-add-note{color:var(--mut2)}
.wow-card.is-added{border-color:var(--blue);box-shadow:0 0 0 1px var(--blue),0 16px 40px var(--glow)}
.wow-ghost{position:fixed;z-index:60;border-radius:12px;pointer-events:none;transition:transform .7s cubic-bezier(.5,.1,.2,1),opacity .7s ease;object-fit:cover}
.wow-flash{animation:wowFlash .65s ease}
@keyframes wowFlash{0%{box-shadow:0 0 0 0 rgba(47,123,255,0)}30%{box-shadow:0 0 0 3px var(--blue)}100%{box-shadow:0 0 0 0 rgba(47,123,255,0)}}
.wow-totals{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:16px 18px;max-width:520px}
.wow-handoff,.wow-stop{display:flex;gap:14px;align-items:flex-start;background:rgba(255,184,77,.07);border:1px solid rgba(255,184,77,.35);border-radius:14px;padding:16px 18px}
.wow-handoff-mark{font-size:1.6rem}
.wow-stop{background:rgba(47,123,255,.06);border-color:rgba(47,123,255,.3)}
.wow-stop-mark{color:var(--blue2);font-size:1.3rem}
.wow-approved{display:flex;gap:14px;align-items:center;background:rgba(62,207,142,.08);border:1px solid rgba(62,207,142,.4);border-radius:14px;padding:16px 18px}
.wow-approved-mark{width:48px;height:48px;flex:none;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.4rem;font-weight:800;background:rgba(62,207,142,.16);color:var(--ok);border:2px solid rgba(62,207,142,.55)}
.wow-approved b{display:block;font-size:1.15rem}
.wow-approved span{color:var(--mut2)}
.wow-summary p{margin-bottom:10px;color:#d3dcec;max-width:66ch}
.wow-facts{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:14px;color:var(--mut2);font-size:.94rem}
.wow-facts b{color:var(--ink)}
.wow-proof{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:16px 18px;max-width:560px}
.wow-proof-line,.wow-proof-total{display:flex;justify-content:space-between;gap:14px;padding:7px 0;border-bottom:1px dashed var(--line)}
.wow-proof-total{border-bottom:0;font-size:1.08rem}
.wow-proof-bar{position:relative;height:12px;background:var(--line);border-radius:6px;margin:16px 0 26px}
.wow-proof-fill{height:100%;border-radius:6px;background:linear-gradient(90deg,var(--warn),var(--out))}
.wow-proof-budget{position:absolute;top:16px;transform:translateX(-50%);font-size:.8rem;color:var(--mut2);white-space:nowrap}
.wow-proof-budget::before{content:"";position:absolute;left:50%;top:-17px;width:2px;height:14px;background:var(--ink)}
.wow-proof-over{color:var(--out);font-weight:700}
.wow-ev{margin-top:16px}
.wow-ev summary{cursor:pointer;font-weight:700;color:var(--blue2)}
.wow-missions{display:grid;grid-template-columns:1fr;gap:16px}
@media (min-width:820px){.wow-missions{grid-template-columns:repeat(3,1fr)}}
.wow-mission{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:20px;overflow:hidden;text-align:left;padding:0;cursor:pointer;color:var(--ink);font:inherit;display:flex;flex-direction:column}
.wow-mission:hover{border-color:var(--blue)}
.wow-mission.is-active{border-color:var(--blue);box-shadow:0 0 0 1px var(--blue),0 18px 44px rgba(0,0,0,.4)}
.wow-mission-media{position:relative}
.wow-mission-media img{width:100%;aspect-ratio:16/9;object-fit:cover}
.wow-mission-bd{padding:16px 18px 18px;display:flex;flex-direction:column;gap:7px;flex:1}
.wow-mission-bd h3{font-size:1.22rem;line-height:1.25}
.wow-mission-bd p{color:var(--mut2);font-size:.95rem;flex:1}
.wow-mission-meta{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.wow-badge{position:absolute;top:12px;left:12px;z-index:2;background:rgba(5,8,14,.82);color:var(--warn);border:1px solid rgba(255,184,77,.5);border-radius:999px;padding:3px 11px;font-size:.74rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.wow-watch{align-self:flex-start;background:var(--blue);color:#fff;border-radius:999px;padding:9px 18px;font-weight:700}
.wow-budget-chip{background:var(--panel2);border:1px solid var(--line2);border-radius:999px;padding:3px 11px;font-size:.84rem;color:var(--mut2)}
.wow-live-note{font-size:.9rem;color:var(--mut2)}
.wow-rm .wow-act-in,.wow-rm .wow-card,.wow-rm .wow-cmp-col,.wow-rm .wow-endpoint{animation:none}
.wow-rm .wow-add-arrow{animation:none}
.wow-rm .wow-ghost{display:none}
@media (prefers-reduced-motion: reduce){
  .wow-act-in,.wow-card,.wow-cmp-col,.wow-endpoint{animation:none}
  .wow-add-arrow{animation:none}
  .wow-ghost{display:none}
}

/* ============================================================
   PHASE 5 NARRATION + SPOTLIGHT PASS — Agent Theater playback
   (appended section; every rule above this line is byte-identical
   to v10-site.css). Presenter narration captions, the sound toggle,
   and the spotlight treatment that shows the viewer where to watch.
   All classes are narr- prefixed; no existing rule is modified.
   ============================================================ */
.narr-caption{display:flex;gap:12px;align-items:flex-start;padding:13px 20px;border-top:1px solid var(--line);background:rgba(47,123,255,.07);color:#dbe6fa;font-size:1rem;line-height:1.45}
.narr-caption[hidden]{display:none}
.narr-caption-k{flex:none;font-size:.72rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--blue2);padding-top:3px}
.narr-sound[aria-pressed="true"]{border-color:var(--blue);color:var(--blue2)}
.narr-spot{position:relative;z-index:2;border-radius:14px;box-shadow:0 0 0 2px var(--blue),0 0 30px var(--glow),0 18px 44px rgba(0,0,0,.5);animation:narrPulse 1.7s ease-in-out infinite alternate}
@keyframes narrPulse{from{box-shadow:0 0 0 2px var(--blue),0 0 16px var(--glow),0 18px 44px rgba(0,0,0,.5)}to{box-shadow:0 0 0 3px var(--blue),0 0 38px var(--glow),0 18px 44px rgba(0,0,0,.5)}}
.wow-act-in.narr-spotting>*{transition:opacity .5s ease}
.wow-act-in.narr-spotting>*:not(.narr-focus){opacity:.42}
.narr-focus{opacity:1}
#wowCartPanel.narr-spot{border-radius:18px}
.wow-rm .narr-spot{animation:none}
.wow-rm .wow-act-in.narr-spotting>*{transition:none}
@media (prefers-reduced-motion:reduce){.narr-spot{animation:none}.wow-act-in.narr-spotting>*{transition:none}}

/* ============================================================
   PHASE 5 FINAL UX POLISH — Agent Theater playback (appended
   section; every rule above this line is byte-identical to
   v11-site.css). The friendly layer: compact agent lines, a
   clearer comparison, and a designed finale. All theater-only
   classes (pol- prefixed, plus additive overrides of wow-
   theater rules); no storefront rule is touched.
   ============================================================ */

/* --- friendly layer: header brief + compact agent lines --- */
.pol-brief{color:var(--ink);font-size:1.02rem;line-height:1.5;max-width:62ch}
.pol-agent{padding:10px 14px;margin-bottom:14px;align-items:flex-start}
.pol-agent .wow-agent-k{padding-top:2px}
.pol-agent-tx p{font-size:1rem;line-height:1.5;color:#e6eeFC}

/* --- comparison clarity --- */
.wow-cmp-col.is-rec{border-color:var(--ok);box-shadow:0 0 0 1px var(--ok),0 16px 38px rgba(62,207,142,.15)}
.pol-rec-tag{position:absolute;top:10px;left:10px;z-index:2;background:rgba(62,207,142,.18);color:var(--ok);border:1px solid rgba(62,207,142,.6);border-radius:999px;padding:2px 10px;font-size:.76rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase}
.wow-cmp-col.is-over .pol-rec-tag{left:auto}
.wow-cmp-table tr.pol-diff td{color:var(--ink);font-weight:600}
.wow-cmp-table tr.pol-diff td.k{color:var(--blue2)}
.wow-cmp-table tr.pol-same td{color:var(--dim);opacity:.72}
.wow-cmp-table td.pol-rec-cell{background:rgba(62,207,142,.06)}
.pol-diff-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--blue);margin-right:8px;vertical-align:2px;box-shadow:0 0 8px var(--glow)}
.pol-rec-chip{margin-top:12px;display:inline-block;background:rgba(62,207,142,.1);border:1px solid rgba(62,207,142,.45);color:#c9f2dc;border-radius:999px;padding:7px 14px;font-weight:700;font-size:.94rem}
@media (max-width:700px){
  .wow-cmp{grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px}
  .wow-cmp-col{padding:10px}
  .wow-cmp-col img{aspect-ratio:1/1}
}

/* --- finale: the payoff --- */
.pol-finale{padding:6px 0 2px}
.pol-finale-heroes{display:grid;grid-template-columns:1fr;gap:14px;margin-bottom:18px}
@media (min-width:700px){.pol-finale-heroes{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}}
.pol-hero-card .wow-card-media img{aspect-ratio:16/10}
.pol-why{margin-bottom:18px}
.pol-why h4{font-size:1.06rem;letter-spacing:.02em;margin-bottom:10px}
.pol-why-list{list-style:none;display:grid;gap:9px}
.pol-why-list li{display:flex;gap:11px;align-items:flex-start;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:11px 14px;line-height:1.45;color:#dbe6fa}
.pol-why-mark{flex:none;width:22px;height:22px;border-radius:50%;background:rgba(62,207,142,.16);color:var(--ok);border:1px solid rgba(62,207,142,.5);display:flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:800;margin-top:1px}
.pol-finale-figs{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:16px}
.pol-fig{flex:1;min-width:150px;background:linear-gradient(180deg,var(--panel2),var(--panel));border:1px solid var(--line2);border-radius:16px;padding:16px 18px}
.pol-fig span{display:block;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:var(--mut2);font-weight:700;margin-bottom:5px}
.pol-fig b{font-size:clamp(1.7rem,5vw,2.3rem);font-weight:800;line-height:1.05;letter-spacing:-.01em}
.pol-fig .pol-fig-sub{font-size:.95rem;color:var(--mut2);letter-spacing:0;text-transform:none;font-weight:600}
.pol-finale-handoff{font-size:1.05rem;color:var(--mut2);border-top:1px dashed var(--line2);padding-top:14px}
.pol-finale-handoff b{color:var(--ink)}
.pol-approved-sub{display:block;margin-top:3px;color:var(--mut2);font-size:.94rem}
.pol-verdict{display:block}
.pol-verdict-k{display:inline-block;font-size:.78rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--blue2);margin-bottom:12px}
.pol-verdict-figs{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:16px}
.pol-verdict-figs .pol-fig b{color:var(--out)}
.pol-verdict-figs .pol-fig.is-budget b{color:var(--ink)}
.pol-verdict-close{font-weight:700;color:var(--ink);margin-top:4px}

/* --- evidence expander: the verbatim record --- */
.pol-ev-h{font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;color:var(--blue2);margin:16px 0 8px}
.pol-ev-prompt{color:var(--ink);font-style:italic;line-height:1.55;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.pol-ev-agent{display:flex;gap:12px;padding:10px 0;border-bottom:1px dashed var(--line)}
.pol-ev-agent:last-of-type{border-bottom:0}
.pol-ev-stage{flex:none;font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);padding-top:3px;min-width:92px}
.pol-ev-tx{color:var(--mut2);font-size:.92rem;line-height:1.55;min-width:0}
.pol-ev-tx p{margin:0 0 6px}
.pol-ev-tx p:last-child{margin-bottom:0}

/* --- mobile type, spacing, transitions, touch --- */
.wow-act-in{animation-duration:.45s;animation-timing-function:cubic-bezier(.22,.8,.3,1)}
.narr-spot{animation-duration:2.6s}
.wow-act-in.narr-spotting>*{transition-duration:.45s}
.wow-btn,.wow-btn-mini{min-height:44px}
.wow-btn{display:inline-flex;align-items:center}
.wow-controls{padding-bottom:calc(14px + env(safe-area-inset-bottom))}
@media (max-width:700px){
  .wow-stage{padding:18px 16px 22px;min-height:380px}
  .wow-side{padding:16px}
  .wow-player-head{padding:14px 16px}
  .wow-progress{padding:10px 16px 0}
  .wow-controls{padding:12px 16px calc(12px + env(safe-area-inset-bottom))}
  .narr-caption{padding:12px 16px;font-size:.95rem;line-height:1.5}
  .wow-act-title{font-size:1.32rem;line-height:1.18;margin-bottom:10px}
  .wow-outcome h3{font-size:1.28rem;line-height:1.2}
  .pol-agent-tx p{font-size:.98rem}
  .wow-card h4{font-size:1.02rem}
  .wow-note,.wow-found{line-height:1.55}
  .wow-facts{font-size:.9rem;gap:7px 16px}
}
.wow-rm .pol-finale-heroes .wow-card{animation:none}
@media (prefers-reduced-motion: reduce){
  .pol-finale-heroes .wow-card{animation:none}
  .narr-spot{animation:none}
}

/* ============================================================
   Theater live-repair (.42)
   Presentation-only additions for the live-mission UX: the
   five-step journey indicator, the prominent finale panel,
   the cart state chip, the selected-card highlight, and
   composer-section prominence. Uses only existing design
   tokens (--bg/--panel/--line/--blue/--ok etc. from v12).
   ============================================================ */
.th-live-section{padding-top:54px}
.th-live-section .sec-head{margin-bottom:10px}
.th-live-section .sec-head h2{font-size:clamp(1.9rem,4vw,2.6rem)}
.th-live-section .sec-head p{font-size:1.05rem}
.th-live-section .wow-live-note{margin-bottom:20px;max-width:68ch}
.th-live-section .th-composer{background:var(--panel);border:1px solid var(--line);border-radius:var(--rad);padding:20px;margin-bottom:8px}
@media (max-width:700px){.th-live-section .th-composer{padding:16px}}

.th-journey{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:18px 0 6px;padding:0}
.th-journey li{flex:1 1 118px;display:flex;align-items:center;gap:8px;background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:8px 12px;font-size:.88rem;font-weight:600;color:var(--mut2);line-height:1.3}
.th-journey li::before{content:attr(data-stage);flex:none;width:22px;height:22px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:var(--panel2);border:1px solid var(--line2);color:var(--mut2);font-size:.78rem;font-weight:800}
.th-journey li.done{border-color:rgba(62,207,142,.45);color:var(--mut2)}
.th-journey li.done::before{background:rgba(62,207,142,.14);border-color:rgba(62,207,142,.45);color:var(--ok)}
.th-journey li.active{border-color:var(--blue);color:var(--ink);box-shadow:0 0 0 1px var(--blue)}
.th-journey li.active::before{background:var(--blue);border-color:var(--blue);color:#fff}
.th-journey li.upcoming{opacity:.72}
@media (max-width:480px){
  .th-journey{gap:6px}
  .th-journey li{flex:1 1 30%;font-size:.82rem;padding:7px 9px}
}

.th-state-chip{display:inline-block;vertical-align:middle;margin-left:8px;background:var(--panel2);border:1px solid var(--line2);border-radius:999px;padding:2px 10px;font-size:.8rem;font-weight:700;color:var(--blue2);letter-spacing:.02em}
.th-state-chip[hidden]{display:none}

.th-finale,#thFinale{margin:18px 0 6px;background:var(--panel2);border:1px solid var(--blue);border-radius:var(--rad);padding:20px;box-shadow:0 18px 44px rgba(0,0,0,.35)}
.th-finale[hidden],#thFinale[hidden]{display:none}
.th-finale h3,#thFinale h3{font-size:1.45rem;font-weight:800;line-height:1.2}
.th-finale-lines{display:grid;gap:12px;margin-top:16px}
.th-finale-line{display:flex;gap:14px;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:10px 12px}
.th-finale-line img{width:72px;height:72px;flex:none;object-fit:cover;border-radius:10px;border:1px solid var(--line)}
.th-finale-line-tx{flex:1;display:grid;gap:2px;min-width:0}
.th-finale-line-tx span{color:var(--mut2);font-size:.92rem}
.th-finale-line-total{font-size:1.12rem;white-space:nowrap}
.th-finale-total{display:flex;justify-content:space-between;gap:14px;align-items:baseline;border-top:1px solid var(--line2);margin-top:16px;padding-top:13px;font-size:1.12rem}
.th-finale-total b{font-size:1.45rem}
.th-finale-budget{display:flex;justify-content:space-between;gap:14px;color:var(--mut2);padding-top:6px}
.th-finale-budget b{color:var(--ok)}
.th-finale-summary{color:var(--mut2);margin-top:12px;max-width:66ch}
.th-finale-action{margin-top:16px}
.th-finale-status{color:var(--mut2);margin-top:14px;border:1px dashed var(--line2);border-radius:12px;padding:12px 14px}

.th-ev .card.th-selected{outline:2px solid var(--blue);outline-offset:2px;border-color:var(--blue);box-shadow:0 0 0 1px var(--blue),0 16px 40px var(--glow)}

@media (prefers-reduced-motion: reduce){
  .th-journey li,.th-finale,#thFinale,.th-ev .card.th-selected,.th-live-section .th-composer{transition:none;animation:none}
}

/* ============================================================
   Production-readiness fix (.55, 2026-11-03) — desktop header
   clipping. Diagnosis: .main-nav holds 14 links whose single-row
   intrinsic width is ~1518px, but .wrap caps the header content
   box at 1200px (1240px max-width − 2×20px padding) and the logo
   + 22px gap leave only ~1092px for the nav — so on every desktop
   width (>820px) the nav wraps to two rows (~93px). .head-in was
   height:64px with align-items:center, so the two-row nav was
   centered in a 64px box and overflowed ~14px above and below
   the sticky header, slicing the top row under the demo banner.
   Fix (smallest change): let .head-in grow with its content.
   min-height keeps the 64px header pixel-identical wherever the
   content fits one row — including the ≤820px Menu-button header,
   where the nav is display:none and this rule changes nothing.
   ============================================================ */
.head-in{height:auto;min-height:64px}

/* ============================================================
   Production-readiness fix (.56, 2026-11-03) — cart summary
   sticky offset vs the grown desktop header. Same knock-on as
   the theater bar: the .55 header fix made the stuck desktop
   header 93.625px tall (was 65px), but .cart-summary still
   pins at top:84px — the old 65px header plus its original
   19px breathing gap. Measure-then-fix: in its true stuck
   state on .55 @1440 (8-item cart, plateau confirmed at two
   scroll positions), the summary sat at top 84 vs header
   bottom 93.625 — its top 9.625px slid under the header.
   Fix, scoped to the site's own desktop breakpoint
   (min-width:1024px): pin at 93.625 + 19 = 112.625, rounded
   to 113px — the original 19px gap preserved. Below 1024px
   nothing changes: at 641-960px the cart grid is single-column
   so the summary has no stuck travel, and at <=640px it is
   position:static.
   ============================================================ */
@media (min-width:1024px){
  .cart-summary{top:113px}
}

/* ============================================================
   Production-readiness fix (.57, 2026-11-03) — cart summary
   sticky offset in the 821-1023px band (WS6 residual, widened).
   Same knock-on as the theater bar, same measurements on live
   .56 (fix57): the .56 override is scoped min-width:1024px, but
   the header is tall from 821px up — 141.9375px at 821-999px
   (three-row nav) and 93.625px at 1000-1023px (two-row nav).
   Where the summary actually sticks in this band (961-1023px,
   two-column .cart-grid; at 1023px measured stuck at top 84 vs
   header bottom 93.625, 9.625px obscured) the old top:84px
   tucks under the header; at 821-960px the grid is single-
   column so the summary has no sticky travel and the value is
   inert there. Fix, pure append, original 19px breathing gap
   preserved in both zones: 141.9375 + 19 = 160.9375 -> 161px
   from 821px, restated to the .56 value 93.625 + 19 = 112.625
   -> 113px from 1000px (later section wins where both apply;
   agrees with the .56 section above at >=1024px). At <=820px
   neither section applies and top:84px / position:static is
   unchanged.
   ============================================================ */
@media (min-width:821px){
  .cart-summary{top:161px}
}
@media (min-width:1000px){
  .cart-summary{top:113px}
}

/* --- Build .58: compare tray bar, differences, PDP compare placement --- */
.compare-bar-spacer{height:60px}
.compare-bar{position:fixed;left:0;right:0;bottom:0;z-index:60;display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:#0d1420;color:#eef3fa;
  border-top:2px solid var(--blue,#2f7bff);box-shadow:0 -6px 24px rgba(0,0,0,.35)}
.compare-bar .cb-count{font-weight:700;font-size:.95rem}
.compare-bar .cb-hint{opacity:.85;font-size:.9rem}
.compare-bar .cb-go{margin-left:auto}
.compare-bar .cb-view{margin-left:auto}
.buy-compare{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:10px}
.buy-compare .mini-form{display:inline-flex}
.in-tray{font-weight:700;color:#39d98a}
.cmp-diffs{border:1px solid rgba(120,150,200,.35);border-radius:12px;padding:16px 18px;margin:0 0 18px;background:rgba(47,123,255,.06)}
.cmp-diffs h2{margin:0 0 8px;font-size:1.15rem}
.cmp-diffs ul{margin:8px 0 0;padding-left:20px}
.cmp-diffs li{margin:5px 0}
table.compare tr.diff td{background:rgba(47,123,255,.10)}
table.compare tr.diff td.k{font-weight:800}

/* --- Correction W1 (.61): concierge working status, action steps, hero chips --- */
.ai-status{margin-top:10px;color:var(--blue2);font-size:.94rem;font-weight:600}
.ai-status::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--blue2);margin-right:8px;animation:aipulse 1.1s infinite ease-in-out}
.ai-can{margin-top:12px;color:var(--mut2);font-size:.92rem;max-width:56ch}
.ai-chips-hero{margin-top:14px}
.ai-steps{margin:2px 0;padding:9px 12px;border:1px solid var(--line);border-left:3px solid var(--blue);border-radius:10px;background:var(--panel2);color:var(--mut);font-size:.88rem;scroll-margin-top:90px}
.ai-steps .ai-steps-k{font-weight:800;color:var(--ink);text-transform:uppercase;letter-spacing:.06em;font-size:.72rem;margin-right:6px}
.ai-thread .msg,.ai-thread .block{scroll-margin-top:90px}