/* ══════════════════════════════════════════════════════════════════
   RönYen — shared landing-page base (from the Claude Design reference)
   Tokens sourced verbatim from brand.css. No new tokens invented.
   Ported as-is from the CD build's landing-page.css, with ONE omission:
   the design's own site header/footer CSS (".hdr-*" / ".site-footer")
   is intentionally left out — the theme partials provide the chrome,
   exactly as landing-inflatable-ice.css documents for its own port.
   Page-specific rules live in landing-custom-ice-baths.css, which
   loads AFTER this file and overrides the band/wrap rhythm.
   ══════════════════════════════════════════════════════════════════ */
:root{
  --bg:#F8F7F4; --surface:#F0EEE9; --section-alt:#E8E5DF;
  --border:#D8D4CE; --hairline:#E8E5DF;
  --heading:#1A1F24; --body:#3D4550; --muted:#6B7480; --placeholder:#9AA0A8;
  --nav:#252D35; --util:#333B44; --nav-muted:#9AA0A8;
  --cta:#F06020; --cta-hover:#D04810; --cta-active:#B03808; --cta-tint:#FFF0E8;
  --peach:#FDBD92; --peach-text:#3A2A1D; --special:#3DA854;
  --sauna:#E88050; --sauna-light:#FDEEE6; --sauna-hover:#C85830; --sauna-text:#8A3820;
  --ice:#3D87C4;  --ice-light:#E8F3FB;  --ice-hover:#2A6EA8;  --ice-text:#1A4878;
  --wellness:#3A9478; --wellness-light:#E4F5EF; --wellness-text:#1A5040;
  --slate:#252D35; --slate-light:#ECEDEF; --budget:#EDECEA;
  --f:'Prompt',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --f-th:'Sarabun',var(--f);
  --r-sm:4px; --r-md:5px; --r-lg:6px; --r-xl:10px;
  --shadow-card:0 1px 4px rgba(0,0,0,.06);
  --shadow-drop:0 4px 12px rgba(0,0,0,.08);
  --shadow-product:0 10px 28px rgba(26,31,36,.08), 0 2px 6px rgba(26,31,36,.05);
  --maxw:1440px;
}

*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth}
body{
  font-family:var(--f); font-weight:300; color:var(--body);
  background:var(--bg); line-height:1.7;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  font-feature-settings:"ss01","kern";
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

.wrap{max-width:var(--maxw); margin:0 auto; padding:0 40px}
.wrap-tight{max-width:1100px; margin:0 auto; padding:0 40px}

/* ── Type ─────────────────────────────────────────────────────────── */
h1,h2,h3,h4{color:var(--heading); font-family:var(--f); letter-spacing:-.01em}
.t-h1{font-weight:600; font-size:clamp(2rem,3.4vw,3rem); line-height:1.08; letter-spacing:-.02em}
.t-h2{font-weight:400; font-size:clamp(1.9rem,2.8vw,2.6rem); line-height:1.12; letter-spacing:-.015em}
.t-h3{font-weight:600; font-size:1.375rem; line-height:1.3}
.t-h4{font-weight:600; font-size:1.0625rem; line-height:1.3}
.t-body{font-weight:300; font-size:1rem; line-height:1.7}
.t-eyebrow{font-weight:600; font-size:.74rem; letter-spacing:.18em; text-transform:uppercase; color:var(--muted)}
.mono{font-family:ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace}

/* Section openers shared across the page */
.kicker{
  font-weight:600; font-size:.72rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--muted); display:inline-flex; align-items:center; gap:14px; margin-bottom:24px;
}
.kicker .num{color:var(--ice); font-variant-numeric:tabular-nums}
.kicker .rule{display:inline-block; width:32px; height:1px; background:var(--border)}
.section--dark .kicker{color:var(--nav-muted)}
.section--dark .kicker .num{color:var(--ice)}

/* ── Bands ────────────────────────────────────────────────────────── */
.band{padding:120px 0; position:relative}
.band--surface{background:var(--surface)}
.band--alt{background:var(--section-alt)}
.section--dark{background:var(--nav); color:#cfd3d8}
.section--dark h1,.section--dark h2,.section--dark h3,.section--dark h4{color:#fff}
.lead{font-weight:300; font-size:clamp(1.05rem,1.3vw,1.2rem); line-height:1.55; color:var(--body); max-width:60ch}
.section--dark .lead{color:#cfd3d8}

/* ── Buttons (marketing convention: orange CTA = pre-order action) ──── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  font-family:var(--f); font-weight:600; font-size:.875rem; line-height:1; letter-spacing:.02em;
  padding:.875rem 1.5rem; border-radius:var(--r-lg); border:1px solid transparent;
  cursor:pointer; min-height:48px; transition:background .15s, transform .1s, border-color .15s, color .15s;
}
.btn:active{transform:scale(.98)}
.btn-sm{min-height:0; padding:.5rem .95rem; font-size:.78rem}
.btn-primary{background:var(--cta); color:#fff}
.btn-primary::after{
  content:""; width:13px; height:13px; flex:none;
  background:no-repeat center/contain url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M9 7h8v8'/%3E%3C/svg%3E");
  transition:transform .2s ease-out;
}
.btn-primary:hover{background:var(--cta-hover)}
.btn-primary:hover::after{transform:translate(2px,-2px)}
.btn-ice{background:var(--ice); color:#fff}
.btn-ice:hover{background:var(--ice-hover)}
.btn-ghost-light{background:transparent; color:#fff; border-color:rgba(255,255,255,.35)}
.btn-ghost-light:hover{background:rgba(255,255,255,.08); border-color:#fff}
.btn-ghost{background:transparent; color:var(--heading); border-color:var(--border)}
.btn-ghost:hover{background:var(--surface)}

/* ── Badges ───────────────────────────────────────────────────────── */
.badge{
  display:inline-flex; align-items:center; gap:6px; font-family:var(--f); font-weight:600;
  font-size:.625rem; line-height:1.4; letter-spacing:.06em; text-transform:uppercase;
  padding:.25rem .625rem; border-radius:var(--r-sm);
}
.b-ice{background:var(--ice-light); color:var(--ice-text)}
.b-budget{background:var(--budget); color:var(--muted)}
.b-special{background:var(--special); color:#fff}
.b-premium{background:var(--nav); color:#fff}
.b-preorder{background:var(--cta-tint); color:var(--cta-active)}
.dot-pulse{width:7px; height:7px; border-radius:50%; background:currentColor; position:relative}
.dot-pulse::after{content:""; position:absolute; inset:-4px; border-radius:50%; border:1px solid currentColor; opacity:.5; animation:ping 1.8s ease-out infinite}
@keyframes ping{0%{transform:scale(.6);opacity:.6}100%{transform:scale(1.8);opacity:0}}

/* ── Image / video placeholders (documentary direction) ───────────── */
.ph{
  position:relative; overflow:hidden; border-radius:var(--r-xl);
  background:var(--section-alt);
  background-image:repeating-linear-gradient(135deg,transparent 0 11px,rgba(26,31,36,.035) 11px 12px);
  display:flex; align-items:center; justify-content:center; isolation:isolate;
}
.ph--dark{background:#1d242b; background-image:repeating-linear-gradient(135deg,transparent 0 11px,rgba(255,255,255,.035) 11px 12px)}
.ph--ice{background:var(--ice-light); background-image:repeating-linear-gradient(135deg,transparent 0 11px,rgba(61,135,196,.06) 11px 12px)}
.ph .cap{
  text-align:center; padding:22px; max-width:30ch;
  display:flex; flex-direction:column; align-items:center; gap:8px;
}
.ph .cap .tag{
  font-family:ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;
  font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; font-weight:600;
  color:var(--muted); border:1px solid var(--border); border-radius:999px; padding:4px 11px;
}
.ph .cap .desc{
  font-family:ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;
  font-size:.72rem; line-height:1.55; color:var(--muted);
}
.ph--dark .cap .tag{color:var(--nav-muted); border-color:rgba(255,255,255,.22)}
.ph--dark .cap .desc{color:var(--nav-muted)}
.ph--ice .cap .tag{color:var(--ice-text); border-color:rgba(61,135,196,.35)}
.ph--ice .cap .desc{color:var(--ice-text)}
.ph .play{
  width:62px; height:62px; border-radius:50%; border:1.5px solid rgba(255,255,255,.7);
  display:inline-flex; align-items:center; justify-content:center; color:#fff; margin-bottom:6px;
  background:rgba(255,255,255,.06); backdrop-filter:blur(2px);
}
.ph .play svg{width:20px; height:20px; margin-left:3px}
.ph > img.fill{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1}
.ph.has-img{background-image:none}
.ph.has-img .cap{display:none}

/* ════════════════════════════════════════════════════════════════════
   1 · HERO — full-bleed dark, documentary video placeholder behind
   ════════════════════════════════════════════════════════════════════ */
.po-hero{
  position:relative; min-height:88vh; display:flex; align-items:flex-end;
  background:var(--nav); color:#fff; overflow:hidden; isolation:isolate;
}
.po-hero .po-hero-ph{position:absolute; inset:0; z-index:-2; border-radius:0}
.po-hero::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(95deg, rgba(20,26,32,.92) 0%, rgba(20,26,32,.74) 42%, rgba(20,26,32,.30) 78%, rgba(20,26,32,.18) 100%);
}
.po-hero .wrap{padding-top:96px; padding-bottom:72px; width:100%}
.po-hero-grid{display:grid; grid-template-columns:1.35fr .9fr; gap:56px; align-items:end}
.po-hero h1{
  color:#fff; font-weight:600; font-size:clamp(2.6rem,5.2vw,4.6rem);
  line-height:1.18; letter-spacing:-.03em; max-width:15ch;
}
.po-hero h1 .cold{color:var(--ice)}
.po-hero h1 .price{color:#fff; border-bottom:4px solid var(--cta); padding-bottom:2px}
.po-hero .subhook{
  font-weight:300; font-size:clamp(1.1rem,1.5vw,1.45rem); line-height:1.45;
  color:#e6e9ec; margin-top:26px; max-width:30ch;
}
.po-hero .subhook b{color:var(--ice); font-weight:500}
.po-hero .po-hero-cta{display:flex; gap:14px; flex-wrap:wrap; margin-top:38px; align-items:center}
.po-hero .ship-note{font-size:.82rem; color:var(--nav-muted); display:inline-flex; align-items:center; gap:8px}
.po-hero .ship-note svg{width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:1.6}

/* Stock / countdown badge inside po-hero */
.po-hero-badge{
  align-self:end; background:rgba(16,20,24,.8); border:1.5px solid rgba(240,96,32,.6);
  border-radius:var(--r-xl); padding:26px 28px; backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px); width:100%; max-width:360px;
  box-shadow:0 22px 55px rgba(0,0,0,.5), 0 0 38px rgba(240,96,32,.2);
}
.po-hero-badge .row1{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:18px}
.po-hero-badge .batch{font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--nav-muted); font-weight:600}
.po-hero-badge .resv{display:flex; align-items:baseline; gap:8px}
.po-hero-badge .resv .big{font-size:2.6rem; font-weight:600; color:#fff; line-height:1; font-variant-numeric:tabular-nums}
.po-hero-badge .resv .of{font-size:1rem; color:var(--nav-muted)}
.po-hero-badge .meter{height:7px; border-radius:4px; background:rgba(255,255,255,.14); overflow:hidden; margin:6px 0 16px}
.po-hero-badge .meter > i{display:block; height:100%; background:var(--cta); border-radius:4px}
.po-hero-badge .deliv{
  display:flex; align-items:center; gap:10px; padding-top:16px; border-top:1px solid rgba(255,255,255,.12);
  font-size:.92rem; color:#fff;
}
.po-hero-badge .deliv svg{width:17px; height:17px; stroke:var(--ice); fill:none; stroke-width:1.7; flex:none}
.po-hero-badge .deliv b{font-weight:600; font-variant-numeric:tabular-nums}
/* SOLD OUT status treatment */
.sold-big{font-size:2.45rem !important; font-weight:700; letter-spacing:.03em; color:var(--cta); line-height:1; text-transform:uppercase}
.po-hero-badge .meter > i.full,.cd-card .meter > i.full{background:rgba(255,255,255,.28)}

/* ════════════════════════════════════════════════════════════════════
   2 · STICKY PRICE BAR
   ════════════════════════════════════════════════════════════════════ */
.pricebar{
  position:fixed; top:0; left:0; right:0; z-index:90;
  background:rgba(26,31,36,.94); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(255,255,255,.08); color:#fff;
  transform:translateY(-100%); transition:transform .28s ease;
}
.pricebar.is-shown{transform:translateY(0)}
.pricebar .wrap{display:flex; align-items:center; gap:24px; padding-top:13px; padding-bottom:13px}
.pricebar .pb-items{display:flex; align-items:center; gap:22px; font-size:.9rem; flex-wrap:wrap}
.pricebar .pb-items .from{color:var(--nav-muted)}
.pricebar .pb-items .from b{color:#fff; font-weight:600}
.pricebar .pb-items .sep{width:4px; height:4px; border-radius:50%; background:rgba(255,255,255,.3)}
.pricebar .pb-items .it{display:inline-flex; align-items:center; gap:8px; color:#e6e9ec}
.pricebar .pb-items .it svg{width:15px; height:15px; stroke:var(--ice); fill:none; stroke-width:1.7}
.pricebar .pb-cta{margin-left:auto; display:flex; align-items:center; gap:16px}
.pricebar .pb-cta .left{font-size:.8rem; color:var(--nav-muted)}
.pricebar .pb-cta .left b{color:var(--cta); font-weight:600; font-variant-numeric:tabular-nums}

/* ════════════════════════════════════════════════════════════════════
   3 · PRODUCT CARDS ROW
   ════════════════════════════════════════════════════════════════════ */
.pick-row{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; align-items:stretch}
.pick-card{
  background:#fff; border:1px solid var(--hairline); border-radius:var(--r-xl); overflow:hidden;
  display:flex; flex-direction:column; box-shadow:var(--shadow-product);
  transition:transform .2s, box-shadow .2s, border-color .15s;
}
.pick-card:hover{transform:translateY(-3px); box-shadow:0 18px 40px rgba(26,31,36,.12)}
.pick-card.is-chiller{border-color:var(--ice)}
.pc-media{aspect-ratio:1/1; position:relative; background:#F4F3EF; overflow:hidden}
.pc-img{transition:opacity .25s ease}
.pc-chiller-tag{
  position:absolute; top:14px; left:14px; z-index:2; display:none;
  align-items:center; gap:6px; background:var(--ice); color:#fff;
  font-size:.66rem; font-weight:600; letter-spacing:.05em; padding:6px 12px; border-radius:999px;
}
.pick-card.is-chiller .pc-chiller-tag{display:inline-flex}
.pc-body{padding:22px 24px 24px; display:flex; flex-direction:column; flex:1}
.pc-body .eyebrow{font-size:.66rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:8px}
.pc-body h3{font-weight:600; font-size:1.2rem; letter-spacing:-.01em; color:var(--heading); margin-bottom:8px}
.pc-body .what{font-size:.9rem; line-height:1.55; color:var(--body); margin-bottom:20px}

/* config controls */
.pc-ctrl{display:flex; align-items:center; gap:12px; margin-bottom:12px}
.pc-lab{font-size:.66rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); width:54px; flex:none}
.pc-seg{display:flex; gap:4px; padding:4px; background:var(--surface); border-radius:11px; flex:1}
.pc-seg button{
  flex:1; display:inline-flex; align-items:center; justify-content:center; gap:7px;
  border:1px solid transparent; background:transparent; border-radius:8px; cursor:pointer;
  font-family:inherit; font-size:.8rem; font-weight:500; color:var(--muted);
  padding:7px 6px; white-space:nowrap; transition:background .15s, color .15s, border-color .15s, box-shadow .15s;
}
.pc-seg button:hover{color:var(--heading)}
.pc-seg button.is-active{background:#fff; color:var(--heading); border-color:var(--border); box-shadow:0 1px 3px rgba(26,31,36,.08)}
.pc-setup button.is-active[data-chiller="on"]{color:var(--ice-text); border-color:var(--ice)}
.pc-sw .sw{width:13px; height:13px; border-radius:50%; flex:none; box-shadow:inset 0 0 0 1px rgba(0,0,0,.15)}
.sw-black{background:#1d242b}
.sw-white{background:#F2F1ED}

.pick-card .price-row{display:flex; align-items:baseline; gap:8px; margin-top:auto; padding-top:6px}
.pick-card .price-row .from{font-size:.78rem; color:var(--muted)}
.pick-card .price-row .now{font-size:1.7rem; font-weight:600; color:var(--heading); letter-spacing:-.01em; font-variant-numeric:tabular-nums}
.pc-sub{font-size:.8rem; color:var(--muted); margin-top:6px; min-height:1.2em}
.pc-sub b{color:var(--ice-text); font-weight:600}
.pick-card.is-chiller .pc-sub b{color:var(--special)}
.pick-card .cta-row{margin-top:18px; display:flex}
.pick-card .cta-row .btn{width:100%; min-height:52px; padding-top:1rem; padding-bottom:1rem; font-size:.86rem}
.pick-foot{margin-top:34px; text-align:center; font-size:.86rem; color:var(--muted); max-width:64ch; margin-left:auto; margin-right:auto}

/* ════════════════════════════════════════════════════════════════════
   4 · POSITIONING HERO (split)
   ════════════════════════════════════════════════════════════════════ */
.position{display:grid; grid-template-columns:1fr 1fr; gap:0; align-items:stretch}
.position .copy{padding:120px 64px 120px 0; display:flex; flex-direction:column; justify-content:center}
.position .copy h2{max-width:16ch}
.position .copy .lead{margin-top:24px}
.contrast-list{list-style:none; margin-top:36px; display:flex; flex-direction:column; gap:2px}
.contrast-list li{
  display:grid; grid-template-columns:1fr 1fr; gap:18px; align-items:center;
  padding:16px 0; border-bottom:1px solid var(--hairline);
}
.contrast-list li:last-child{border-bottom:0}
.contrast-list .hard{color:var(--muted); font-size:.92rem; display:flex; align-items:center; gap:10px}
.contrast-list .hard svg{width:16px; height:16px; stroke:var(--placeholder); fill:none; stroke-width:1.8; flex:none}
.contrast-list .ours{color:var(--heading); font-weight:500; font-size:.95rem; display:flex; align-items:center; gap:10px}
.contrast-list .ours svg{width:16px; height:16px; stroke:var(--ice); fill:none; stroke-width:2; flex:none}
.position .visual{position:relative; min-height:520px}
.position .visual .ph{position:absolute; inset:0; border-radius:0}

/* ════════════════════════════════════════════════════════════════════
   5 · CHILLER ANIMATION BLOCK
   ════════════════════════════════════════════════════════════════════ */
.chiller{display:grid; grid-template-columns:1fr 1fr; gap:72px; align-items:center}
.dial-stage{display:flex; align-items:center; justify-content:center; padding:24px}
@property --p{syntax:'<number>'; inherits:false; initial-value:0}
.dial{
  position:relative; width:300px; height:300px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:
    radial-gradient(circle at 50% 50%, #20272f 0 60%, transparent 60%),
    conic-gradient(from -90deg, var(--ice) calc(var(--p,0)*1%), rgba(255,255,255,.12) 0);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
  transition:--p .12s linear;
}
.dial::before{
  content:""; position:absolute; inset:18px; border-radius:50%;
  border:1px dashed rgba(255,255,255,.14);
}
.dial .read{position:relative; text-align:center; z-index:2}
.dial .read .num{font-size:4.6rem; font-weight:600; color:#fff; line-height:1; letter-spacing:-.03em; font-variant-numeric:tabular-nums}
.dial .read .deg{font-size:1.6rem; color:var(--ice); font-weight:400; vertical-align:top}
.dial .read .lbl{font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--nav-muted); margin-top:8px; font-weight:600}
.chiller .copy h2{max-width:14ch}
.phase-flow{display:flex; flex-direction:column; gap:14px; margin-top:36px}
.phase{
  display:flex; align-items:center; gap:16px; padding:16px 20px; border-radius:var(--r-lg);
  border:1px solid rgba(255,255,255,.1); transition:background .3s, border-color .3s;
}
.phase.is-active{background:rgba(61,135,196,.14); border-color:var(--ice)}
.phase .ico{
  width:42px; height:42px; border-radius:50%; flex:none; display:inline-flex; align-items:center; justify-content:center;
  border:1px solid rgba(255,255,255,.18); color:var(--nav-muted); transition:color .3s, border-color .3s;
}
.phase.is-active .ico{color:var(--ice); border-color:var(--ice)}
.phase .ico svg{width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:1.7}
.phase .ptxt b{display:block; color:#fff; font-weight:500; font-size:1rem}
.phase .ptxt span{font-size:.82rem; color:var(--nav-muted)}

/* ════════════════════════════════════════════════════════════════════
   6 · SETUP ANIMATION BLOCK
   ════════════════════════════════════════════════════════════════════ */
.setup-head{text-align:center; max-width:62ch; margin:0 auto 56px}
.setup-stage{
  background:#fff; border:1px solid var(--hairline); border-radius:var(--r-xl);
  box-shadow:var(--shadow-card); padding:48px 40px 40px; max-width:1100px; margin:0 auto;
}
.setup-rail{height:3px; background:var(--hairline); border-radius:3px; position:relative; margin:0 6px 40px}
.setup-rail > i{position:absolute; left:0; top:0; height:100%; background:var(--ice); border-radius:3px; width:10%; transition:width .5s ease}
.setup-steps{display:grid; grid-template-columns:repeat(5,1fr); gap:18px}
.sstep{display:flex; flex-direction:column; align-items:center; text-align:center; gap:14px; opacity:.42; transition:opacity .4s}
.sstep.is-active{opacity:1}
.sstep .disc{
  width:84px; height:84px; border-radius:50%; flex:none; display:inline-flex; align-items:center; justify-content:center;
  background:var(--surface); border:1px solid var(--hairline); color:var(--muted); transition:background .4s, color .4s, border-color .4s, transform .4s;
}
.sstep.is-active .disc{background:var(--ice-light); border-color:var(--ice); color:var(--ice-text); transform:scale(1.06)}
.sstep .disc svg{width:34px; height:34px; stroke:currentColor; fill:none; stroke-width:1.5}
.sstep .n{font-size:.66rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}
.sstep.is-active .n{color:var(--ice)}
.sstep .nm{font-weight:600; font-size:1rem; color:var(--heading)}
.sstep .ds{font-size:.82rem; line-height:1.5; color:var(--body)}

/* ════════════════════════════════════════════════════════════════════
   7 · BENEFITS
   ════════════════════════════════════════════════════════════════════ */
.benefit-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:2px; background:var(--hairline); border:1px solid var(--hairline); border-radius:var(--r-xl); overflow:hidden}
.benefit{background:var(--bg); padding:34px 32px; display:flex; flex-direction:column; gap:14px}
.benefit .ico{width:40px; height:40px; display:inline-flex; align-items:center; justify-content:center; color:var(--ice)}
.benefit .ico svg{width:30px; height:30px; stroke:currentColor; fill:none; stroke-width:1.5}
.benefit h3{font-weight:600; font-size:1.0625rem; color:var(--heading)}
.benefit p{font-size:.9rem; line-height:1.55; color:var(--body)}

/* ════════════════════════════════════════════════════════════════════
   8 · WHERE TO USE IT
   ════════════════════════════════════════════════════════════════════ */
.use-grid{display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:200px; gap:16px}
.use-cell{position:relative; border-radius:var(--r-xl); overflow:hidden}
.use-cell .ph{position:absolute; inset:0; border-radius:0}
.use-cell.tall{grid-row:span 2}
.use-cell.wide{grid-column:span 2}
.use-cell .name{
  position:absolute; left:0; right:0; bottom:0; z-index:2; padding:16px 18px;
  color:#fff; font-weight:600; font-size:1rem; letter-spacing:-.01em;
  background:linear-gradient(180deg, transparent, rgba(20,26,32,.78));
}

/* ════════════════════════════════════════════════════════════════════
   9 · SPEC SNAPSHOT
   ════════════════════════════════════════════════════════════════════ */
.spec-wrap{display:grid; grid-template-columns:1fr 1fr; gap:0 64px}
table.spec{width:100%; border-collapse:collapse; font-size:.9rem; color:var(--body)}
table.spec th{
  text-align:left; font-weight:600; color:var(--heading); font-size:.7rem; letter-spacing:.1em;
  text-transform:uppercase; padding:16px 0; border-bottom:1px solid var(--border);
}
table.spec td{padding:16px 0; border-bottom:1px solid var(--hairline); vertical-align:top}
table.spec td:first-child{color:var(--muted); width:46%}
table.spec td:last-child{color:var(--heading); font-weight:400}
table.spec tr:last-child td{border-bottom:0}
.spec-box{
  background:var(--ice-light); border-radius:var(--r-xl); padding:32px 34px; align-self:start;
}
.spec-box h3{color:var(--ice-text); font-size:1.0625rem; margin-bottom:18px}
.spec-box ul{list-style:none; display:flex; flex-direction:column; gap:12px}
.spec-box li{display:flex; gap:12px; align-items:flex-start; font-size:.92rem; color:var(--ice-text)}
.spec-box li svg{width:18px; height:18px; stroke:var(--ice); fill:none; stroke-width:2; flex:none; margin-top:2px}
.spec-box .volt{margin-top:22px; padding-top:20px; border-top:1px solid rgba(61,135,196,.25); font-size:.86rem; color:var(--ice-text)}
.spec-box .volt b{font-weight:600}

/* ════════════════════════════════════════════════════════════════════
   10 · ICE-COST CALCULATOR
   ════════════════════════════════════════════════════════════════════ */
.calc{display:grid; grid-template-columns:1fr 1fr; gap:0; border-radius:var(--r-xl); overflow:hidden; border:1px solid var(--hairline)}
.calc .inputs{background:#fff; padding:48px 48px}
.calc .inputs h3{font-size:1.2rem; margin-bottom:6px}
.calc .inputs .hint{font-size:.88rem; color:var(--muted); margin-bottom:28px}
.calc-field{margin-bottom:24px}
.calc-field label{display:flex; justify-content:space-between; align-items:baseline; font-size:.82rem; color:var(--heading); font-weight:500; margin-bottom:10px}
.calc-field label .val{font-variant-numeric:tabular-nums; color:var(--ice-text); font-weight:600}
.calc-field input[type=range]{width:100%; accent-color:var(--ice); height:4px}
.calc-field .sub{font-size:.74rem; color:var(--muted); margin-top:6px}
.calc .result{background:var(--nav); color:#fff; padding:48px; display:flex; flex-direction:column; justify-content:center}
.calc .result .r-lbl{font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--nav-muted); font-weight:600}
.calc .result .r-big{font-size:3.4rem; font-weight:600; line-height:1.05; letter-spacing:-.02em; margin:10px 0 4px; color:#fff; font-variant-numeric:tabular-nums}
.calc .result .r-big .per{font-size:1.1rem; color:var(--nav-muted); font-weight:300}
.calc .result .payoff{
  margin-top:30px; padding-top:26px; border-top:1px solid rgba(255,255,255,.14); font-size:1.05rem; line-height:1.5; color:#e6e9ec;
}
.calc .result .payoff b{color:var(--ice); font-weight:600; font-variant-numeric:tabular-nums}
.calc .result .disclaim{font-size:.72rem; color:var(--nav-muted); margin-top:22px}

/* ════════════════════════════════════════════════════════════════════
   11 · COMPARISON
   ════════════════════════════════════════════════════════════════════ */
.compare{width:100%; border-collapse:collapse}
.compare th,.compare td{padding:20px 24px; text-align:left; border-bottom:1px solid var(--hairline)}
.compare thead th{font-size:.74rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); font-weight:600; border-bottom:1px solid var(--border)}
.compare thead th.col-ours{color:var(--ice-text)}
.compare td:first-child{color:var(--muted); font-size:.9rem; width:34%}
.compare .col-ours{background:var(--ice-light)}
.compare td.col-ours{color:var(--ice-text); font-weight:500}
.compare td.col-hard{color:var(--body)}
.compare thead th.col-ours{background:var(--ice-light); border-top-left-radius:var(--r-lg); border-top-right-radius:var(--r-lg)}
.compare .tick{display:inline-flex; align-items:center; gap:8px}
.compare .tick svg{width:16px; height:16px; stroke:var(--ice); fill:none; stroke-width:2; flex:none}
.compare .cross{display:inline-flex; align-items:center; gap:8px; color:var(--muted)}
.compare .cross svg{width:16px; height:16px; stroke:var(--placeholder); fill:none; stroke-width:1.8; flex:none}
.upgrade-note{
  margin-top:36px; text-align:center; font-size:1.15rem; color:var(--heading); font-weight:400;
}
.upgrade-note b{font-weight:600}

/* ════════════════════════════════════════════════════════════════════
   12 · SCARCITY / COUNTDOWN BLOCK
   ════════════════════════════════════════════════════════════════════ */
.scarcity{text-align:center}
.scarcity h2{max-width:18ch; margin:0 auto}
.scarcity .lead{margin:20px auto 0; text-align:center}
.cd-variants{display:grid; grid-template-columns:1fr 1fr; gap:24px; max-width:880px; margin:56px auto 0}
.cd-card{
  background:#1d242b; border:1px solid rgba(255,255,255,.1); border-radius:var(--r-xl);
  padding:34px 36px; text-align:left; position:relative;
}
.cd-card .state-tag{
  position:absolute; top:18px; right:18px; font-family:ui-monospace,Menlo,Consolas,monospace;
  font-size:.6rem; letter-spacing:.1em; text-transform:uppercase; color:var(--nav-muted);
  border:1px solid rgba(255,255,255,.18); border-radius:999px; padding:4px 10px;
}
.cd-card .resv{display:flex; align-items:baseline; gap:8px; margin-bottom:6px}
.cd-card .resv .big{font-size:2.4rem; font-weight:600; color:#fff; line-height:1; font-variant-numeric:tabular-nums}
.cd-card .resv .of{color:var(--nav-muted); font-size:.95rem}
.cd-card .meter{height:8px; border-radius:4px; background:rgba(255,255,255,.12); overflow:hidden; margin:12px 0 22px}
.cd-card .meter > i{display:block; height:100%; background:var(--cta); border-radius:4px}
.cd-card .deliv-line{display:flex; align-items:center; gap:12px; padding-top:20px; border-top:1px solid rgba(255,255,255,.12)}
.cd-card .deliv-line svg{width:20px; height:20px; stroke:var(--ice); fill:none; stroke-width:1.7; flex:none}
.cd-card .deliv-line .d-num{font-size:1.6rem; font-weight:600; color:#fff; font-variant-numeric:tabular-nums; line-height:1}
.cd-card .deliv-line .d-txt{font-size:.92rem; color:var(--nav-muted)}
.cd-card.is-urgent{border-color:var(--cta)}
.cd-card.is-urgent .deliv-line svg{stroke:var(--cta)}
.cd-note{margin-top:24px; font-family:ui-monospace,Menlo,Consolas,monospace; font-size:.72rem; color:var(--nav-muted); letter-spacing:.04em}

/* ════════════════════════════════════════════════════════════════════
   13 · FOUNDER STRIP
   ════════════════════════════════════════════════════════════════════ */
.founder{display:grid; grid-template-columns:.85fr 1.15fr; gap:64px; align-items:center}
.founder .portrait{aspect-ratio:4/5; border-radius:var(--r-xl); overflow:hidden}
.founder .portrait .ph{position:absolute; inset:0; border-radius:0}
.founder .portrait{position:relative}
.founder .copy .kicker{margin-bottom:20px}
.founder .copy h2{max-width:18ch}
.founder .copy p{margin-top:22px; font-size:1.05rem; line-height:1.6; color:var(--body); max-width:52ch}
.founder .sign{margin-top:28px; display:flex; align-items:center; gap:16px}
.founder .sign .nm{font-weight:600; color:var(--heading)}
.founder .sign .role{font-size:.86rem; color:var(--muted)}

/* ════════════════════════════════════════════════════════════════════
   14 · FINAL CTA
   ════════════════════════════════════════════════════════════════════ */
.final{text-align:center}
.final h2{color:#fff; font-size:clamp(2.2rem,4vw,3.4rem); font-weight:600; letter-spacing:-.025em; max-width:18ch; margin:0 auto; line-height:1.05}
.final .price-anchor{font-size:1.3rem; color:#e6e9ec; margin-top:24px; font-weight:300}
.final .price-anchor b{color:#fff; font-weight:600}
.final .final-cd{display:inline-flex; align-items:center; gap:10px; margin-top:18px; padding:10px 18px; border-radius:999px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14); font-size:.92rem; color:#fff}
.final .final-cd svg{width:16px; height:16px; stroke:var(--ice); fill:none; stroke-width:1.7}
.final .final-cd b{font-variant-numeric:tabular-nums}
.final .final-cta{margin-top:36px; display:flex; gap:14px; justify-content:center; flex-wrap:wrap}
.final .divider{display:flex; align-items:center; gap:18px; max-width:520px; margin:48px auto 0; color:var(--nav-muted); font-size:.78rem; letter-spacing:.1em; text-transform:uppercase}
.final .divider::before,.final .divider::after{content:""; flex:1; height:1px; background:rgba(255,255,255,.14)}
.notify{max-width:520px; margin:28px auto 0}
.notify .nlbl{font-size:.95rem; color:#e6e9ec; margin-bottom:14px}
.notify form{display:flex; gap:10px}
.notify input{
  flex:1; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.18); border-radius:var(--r-lg);
  padding:.875rem 1.1rem; color:#fff; font-family:var(--f); font-size:.95rem; font-weight:300;
}
.notify input::placeholder{color:var(--nav-muted)}
.notify input:focus{outline:none; border-color:var(--ice); box-shadow:0 0 0 3px rgba(61,135,196,.18)}

/* ════════════════════════════════════════════════════════════════════
   RESPONSIVE — mobile stacking
   ════════════════════════════════════════════════════════════════════ */
@media (max-width:1100px){
  .prod-row{grid-template-columns:1fr; gap:20px; max-width:520px; margin:0 auto}
  .pick-row{grid-template-columns:1fr; gap:20px; max-width:460px; margin:0 auto}
  .preorder-card--bundle{transform:none; order:-1}
  .preorder-card--bundle:hover{transform:translateY(-3px)}
  .preorder-card--bundle .media{aspect-ratio:4/3}
  .use-grid{grid-template-columns:repeat(2,1fr)}
  .use-cell.wide{grid-column:span 2}
  .use-cell.tall{grid-row:span 1}
}
@media (max-width:900px){
  .wrap,.wrap-tight{padding:0 22px}
  .band{padding:80px 0}
  .po-hero{min-height:auto; padding-top:24px}
  .po-hero .wrap{padding-top:64px; padding-bottom:56px}
  .po-hero-grid{grid-template-columns:1fr; gap:36px}
  .po-hero-badge{max-width:none}
  .pricebar .pb-items .it{display:none}
  .pricebar .pb-cta .left{display:none}
  .position{grid-template-columns:1fr}
  .position .copy{padding:72px 0}
  .position .visual{min-height:340px; order:-1}
  .contrast-list li{grid-template-columns:1fr; gap:6px; padding:12px 0}
  .chiller{grid-template-columns:1fr; gap:48px}
  .dial{width:240px; height:240px}
  .dial .read .num{font-size:3.6rem}
  .setup-steps{grid-template-columns:1fr 1fr; gap:28px 18px}
  .setup-stage{padding:32px 22px}
  .benefit-grid{grid-template-columns:1fr 1fr}
  .spec-wrap{grid-template-columns:1fr; gap:48px}
  .calc{grid-template-columns:1fr}
  .calc .inputs,.calc .result{padding:36px 28px}
  .cd-variants{grid-template-columns:1fr}
  .founder{grid-template-columns:1fr; gap:40px}
  .founder .portrait{max-width:420px}
  .compare th,.compare td{padding:14px 14px; font-size:.84rem}
}
@media (max-width:560px){
  .benefit-grid{grid-template-columns:1fr}
  .use-grid{grid-template-columns:1fr}
  .use-cell.wide{grid-column:span 1}
  .setup-steps{grid-template-columns:1fr}
  .notify form{flex-direction:column}
  .po-hero .po-hero-cta{flex-direction:column; align-items:stretch}
}