/* base reset (the page used to get this from its host) */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
:root{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
body{margin:0}
img{max-width:100%}
[hidden]{display:none!important}

/* Layout: one sticky full-viewport stage. An atmospheric landscape passes through one day behind a pinned 31.5" display;
   editorial text sits on a soft scrim at the left (desktop) or in a band along the bottom (phone). Single visual world: colours are explicit. */
:root{
  --teal:#234e56; --teal-deep:#173a41; --teal-ink:#0f2a30; --teal-mist:#dbe5e4;
  --sage:#858f6c; --sage-soft:#e5e7dc;
  --cream:#f3ede2; --stone:#e9e2d5; --paper:#fbf8f2;
  --ink:#1c2629; --ink-soft:#4b585b; --hair:rgba(35,78,86,.18);
  --wood:#7a5232; --wood-dark:#4a301c;
  --night:#0f1b27; --night-ink:#eef2f5; --night-soft:#a9b6c2; --night-hair:rgba(238,242,245,.16);
  --f-display:"DM Serif Display","Iowan Old Style","Palatino Linotype",Georgia,serif;
  --f-body:"Instrument Sans","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --nav-h:56px;
  --gl:max(16px, env(safe-area-inset-left, 0px));
  --gr:max(16px, env(safe-area-inset-right, 0px));
}
*{box-sizing:border-box}
body{background:var(--cream);color:var(--ink);font-family:var(--f-body);font-size:16px;line-height:1.5;overflow-x:clip;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:40;background:var(--cream)}
:root.is-night body::before{background:var(--night)}
a{color:inherit}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--sage);outline-offset:3px;border-radius:4px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- top bar ---------- */
.nav{position:fixed;top:env(safe-area-inset-top,0px);left:0;right:0;z-index:30;height:var(--nav-h);
  display:flex;align-items:center;justify-content:space-between;gap:12px;padding-left:var(--gl);padding-right:var(--gr);
  background:rgba(243,237,226,.86);border-bottom:1px solid var(--hair);transition:background-color .5s,color .5s,border-color .5s}
:root.is-night .nav{background:rgba(15,27,39,.82);color:var(--night-ink);border-bottom-color:var(--night-hair)}
.brand{display:flex;align-items:baseline;gap:10px;text-decoration:none;color:var(--teal)}
.brand b{font:400 23px/1 var(--f-display);letter-spacing:.005em}
.brand small{font-size:10.5px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--sage)}
:root.is-night .brand{color:var(--night-ink)} :root.is-night .brand small{color:var(--night-soft)}
.nav-cta{white-space:nowrap;display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 18px;border-radius:999px;background:var(--teal);color:#fff;text-decoration:none;font-weight:600;font-size:14px;letter-spacing:.01em}
.nav-cta:hover{background:var(--teal-deep)}
:root.is-night .nav-cta{background:var(--night-ink);color:var(--night)}
.bar{position:absolute;left:0;bottom:-1px;height:1.5px;width:100%;background:var(--teal);transform-origin:0 50%;transform:scaleX(0)}
:root.is-night .bar{background:var(--night-ink)}

/* ---------- section rail (desktop) ---------- */
.rail{position:fixed;z-index:25;right:calc(max(16px, env(safe-area-inset-right,0px)) + 6px);top:50%;transform:translateY(-50%);display:none;flex-direction:column;gap:2px;list-style:none;margin:0;padding:0}
.rail button{display:flex;align-items:center;justify-content:flex-end;gap:12px;min-height:30px;padding:2px 4px;background:none;border:0;color:var(--teal)}
:root.is-night .rail button,.rail.on-veil button{color:var(--night-ink)}
.rail span{font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;opacity:0;transform:translateX(6px);transition:opacity .25s,transform .25s;white-space:nowrap}
.rail i{width:18px;height:1.5px;background:currentColor;opacity:.4;transition:width .25s,opacity .25s}
.rail button:hover span,.rail button:focus-visible span{opacity:1;transform:none}
.rail button[aria-current="true"] i{width:34px;opacity:1}
.rail.on-veil button span,.rail.quiet button span{opacity:0}

/* ---------- the stage ---------- */
.story{position:relative;height:calc((var(--screens,7) + 1) * 100vh);height:calc((var(--screens,7) + 1) * 100lvh)}
.stage{position:sticky;top:0;height:100vh;height:100lvh;overflow:hidden;background:#d9e2e4}
.world{position:absolute;inset:0;width:100%;height:100%;display:block}
.film{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.09;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E")}
.scrim{position:absolute;top:0;bottom:0;left:0;width:min(66vw,980px);z-index:3;pointer-events:none;display:none}
.scrim.l{background:linear-gradient(90deg,rgba(243,237,226,.94) 0%,rgba(243,237,226,.86) 38%,rgba(243,237,226,.38) 68%,rgba(243,237,226,0) 100%)}
.scrim.d{opacity:0;background:linear-gradient(90deg,rgba(10,18,28,.9) 0%,rgba(10,18,28,.78) 38%,rgba(10,18,28,.3) 68%,rgba(10,18,28,0) 100%)}
.hero{position:absolute;left:0;right:0;top:0;height:68%;z-index:8;overflow:hidden;pointer-events:none;background:var(--cream);will-change:opacity}
.hero img{width:100%;height:100%;object-fit:cover;object-position:56% 46%;display:block;transform-origin:42% 52%;will-change:transform;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 64%,rgba(0,0,0,.55) 82%,transparent 100%);mask-image:linear-gradient(180deg,#000 0%,#000 64%,rgba(0,0,0,.55) 82%,transparent 100%)}
.pool{position:absolute;left:0;top:0;z-index:4;width:340px;height:90px;margin:-45px 0 0 -170px;border-radius:50%;opacity:0;pointer-events:none;
  background:radial-gradient(closest-side,rgba(255,214,150,.42),rgba(255,214,150,0))}

/* the 31.5" display */
.disp{position:absolute;left:50%;top:12%;height:44%;aspect-ratio:9/16;transform:translateX(-50%);transform-origin:0 0;z-index:6;--u:2px;cursor:pointer;-webkit-tap-highlight-color:transparent}
.disp.ready{left:0;top:0;aspect-ratio:auto}
.bezel{position:absolute;inset:0;border-radius:calc(var(--u)*.9);padding:calc(var(--u)*1.7);
  background:linear-gradient(160deg,#3a3b3d 0%,#18191b 22%,#111214 70%,#26272a 100%);
  box-shadow:0 calc(var(--u)*10) calc(var(--u)*22) rgba(18,26,28,.26),0 calc(var(--u)*2) calc(var(--u)*4) rgba(0,0,0,.22),inset 0 0 0 1px rgba(255,255,255,.06)}
.screen{position:relative;width:100%;height:100%;overflow:hidden;background:#f1eee6}
.scr{position:absolute;inset:0;visibility:hidden}
.scr[data-l="portrait"]{visibility:visible}
.scr img{width:100%;height:100%;object-fit:cover;display:block}
.paper{position:absolute;inset:0;pointer-events:none;opacity:.2;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5  0 0 0 0 .5  0 0 0 0 .5  0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E")}
.sheen{position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,rgba(255,255,255,0) 40%,rgba(255,255,255,.07) 50%,rgba(255,255,255,0) 60%)}
.shade{position:absolute;inset:0;pointer-events:none;opacity:0;background:radial-gradient(130% 90% at 50% 105%,rgba(255,214,150,.2),rgba(8,14,22,.36) 50%,rgba(5,9,16,.62))}
.edge{position:absolute;left:0;right:0;top:0;height:calc(var(--u)*4);pointer-events:none;opacity:0;
  background:linear-gradient(rgba(255,255,255,0),rgba(255,255,255,.9) 45%,rgba(30,30,30,.16) 56%,rgba(255,255,255,0))}
.card{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:var(--teal);background:#f4f0e7;padding:calc(var(--u)*8) calc(var(--u)*7)}
.card small{font:600 calc(var(--u)*3.2)/1.3 var(--f-body);letter-spacing:.24em;color:var(--sage)}
.card b{font:400 calc(var(--u)*8.4)/1.06 var(--f-display);margin:calc(var(--u)*3) 0 calc(var(--u)*1.4);color:var(--teal)}
.card .dates{font:500 calc(var(--u)*3.6)/1.3 var(--f-body);letter-spacing:.06em;color:var(--ink-soft)}
.card hr{width:16%;border:0;border-top:calc(var(--u)*.35) solid var(--sage);margin:calc(var(--u)*6) 0}
.card dl{display:grid;grid-template-columns:auto auto;gap:calc(var(--u)*2.6) calc(var(--u)*6);margin:0;font:500 calc(var(--u)*3.9)/1.25 var(--f-body);color:var(--ink);text-align:left}
.card dt{color:var(--ink-soft);letter-spacing:.04em}
.card dd{margin:0;font-weight:600}
.card dd.hot{color:#9a4a2e;box-shadow:inset 0 calc(var(--u)*-.6) 0 rgba(154,74,46,.35)}
.card em{margin-top:calc(var(--u)*7);font:italic 400 calc(var(--u)*4.6)/1.2 var(--f-display);color:var(--teal)}
.qrcard b{font-size:calc(var(--u)*9)}
.qrcard img{width:60%;height:auto;margin:calc(var(--u)*5) 0 calc(var(--u)*4);background:#fff;padding:calc(var(--u)*2.6)}
.qrcard span{font:600 calc(var(--u)*3.8)/1.3 var(--f-body);letter-spacing:.08em;color:var(--teal)}

.tripod{position:absolute;left:50%;top:100%;width:0;height:0;pointer-events:none}
.tripod i{position:absolute;display:block}
.tripod .hub{left:calc(var(--u)*-3.6);top:calc(var(--u)*-.6);width:calc(var(--u)*7.2);height:calc(var(--u)*4.2);border-radius:calc(var(--u)*1);background:linear-gradient(#2b2724,#141210)}
.tripod .leg{top:calc(var(--u)*2.2);left:calc(var(--u)*-1);width:calc(var(--u)*2);height:calc(var(--u)*110);border-radius:calc(var(--u)*1);
  background:linear-gradient(90deg,var(--wood-dark),var(--wood) 40%,#a2734a 58%,var(--wood-dark));transform-origin:50% 0}
.tripod .l{transform:rotate(17deg)} .tripod .r{transform:rotate(-17deg)}
.tripod .b{height:calc(var(--u)*96);filter:brightness(.72)}
.tripod .shadow{left:calc(var(--u)*-50);top:calc(var(--u)*100);width:calc(var(--u)*100);height:calc(var(--u)*10);border-radius:50%;background:radial-gradient(closest-side,rgba(30,42,26,.3),rgba(30,42,26,0))}

/* props */
.prop{position:absolute;left:0;top:0;opacity:0;pointer-events:none;will-change:transform,opacity;z-index:7}
.glass{background:rgba(251,248,242,.84);border:1px solid rgba(255,255,255,.75);border-radius:16px;box-shadow:0 14px 34px rgba(16,30,32,.14);
  -webkit-backdrop-filter:blur(14px) saturate(1.1);backdrop-filter:blur(14px) saturate(1.1)}
.note{width:var(--nw,248px);padding:12px 14px;font-size:14.5px;line-height:1.38;color:var(--ink);z-index:8}
.note small{display:flex;align-items:center;gap:8px;font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--sage);margin-bottom:5px}
.note small i{width:18px;height:18px;border-radius:50%;background:var(--sage-soft);display:grid;place-items:center;font-style:normal;font-size:10px;color:var(--teal);letter-spacing:0}
.note.ok{background:rgba(23,58,65,.9);border-color:rgba(255,255,255,.12);color:#f2f5f4}
.note.ok small{color:#b9cfcc}
.note.ok small i{background:#2f6a71;color:#fff}
.ledger{width:var(--lw,270px);padding:16px 16px 14px;z-index:8}
.lg-h{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.lg-h span{font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--sage)}
.lg-h b{font:400 30px/1 var(--f-display);color:var(--teal);font-variant-numeric:tabular-nums;position:relative}
.ledger.done .lg-h b{color:var(--ink-soft)}
.ledger.done .lg-h b::after{content:"";position:absolute;left:-2px;right:-2px;top:52%;height:1.5px;background:#9a4a2e}
.lg-g{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin:12px 0 10px}
.lg-g div{display:grid;gap:3px;justify-items:center}
.lg-g i{width:100%;aspect-ratio:3/4;border:1px solid var(--hair);border-radius:2px;background:transparent;transition:background-color .25s,border-color .25s}
.lg-g div.on i{background:var(--teal-mist);border-color:rgba(35,78,86,.4);box-shadow:inset 0 0 0 3px var(--paper)}
.lg-g em{font-style:normal;font-size:10px;font-weight:600;color:var(--ink-soft);letter-spacing:.04em}
.lg-f{margin:0;font-size:12.5px;color:var(--ink-soft);border-top:1px solid var(--hair);padding-top:9px}
.lg-f b{color:var(--teal)}
.battery{display:flex;align-items:center;gap:14px;padding:14px 16px;z-index:8;background:rgba(15,27,39,.78);border-color:rgba(255,255,255,.1);color:var(--night-ink)}
.battery b{display:block;font:400 26px/1 var(--f-display);font-variant-numeric:tabular-nums}
.battery span{display:block;font-size:12px;letter-spacing:.04em;color:var(--night-soft);margin-top:4px;white-space:nowrap}

.phone{z-index:9;width:var(--phw);height:calc(var(--phw)*2.06);border-radius:calc(var(--phw)*.15);background:#0d0e10;padding:calc(var(--phw)*.035);
  box-shadow:0 22px 48px rgba(16,26,28,.34),inset 0 0 0 1px #2c2d30}
.ph-s{position:relative;width:100%;height:100%;border-radius:calc(var(--phw)*.118);background:var(--paper);overflow:hidden;font-size:calc(var(--phw)*.05);color:var(--ink)}
.ph-top{display:flex;justify-content:space-between;align-items:center;padding:10% 8% 3%;font:400 1.25em/1 var(--f-display);color:var(--teal)}
.ph-top i{width:16%;height:.42em;border-radius:1em;background:var(--hair)}
.ph-steps{display:flex;gap:3%;padding:0 6% 5%}
.ph-steps span{flex:1;text-align:center;padding:3.4% 0;border-radius:2em;border:1px solid var(--hair);color:var(--ink-soft);font-weight:600;font-size:.82em;letter-spacing:.02em;transition:background-color .25s,color .25s,border-color .25s}
.ph-steps span.on{background:var(--teal);border-color:var(--teal);color:#fff}
.pv{position:absolute;left:6%;right:6%;top:23.5%;bottom:4%;opacity:0;transition:opacity .3s}
.pv.on{opacity:1}
.pv h5{margin:0 0 5%;font-size:.9em;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--sage)}
.thumbs{display:grid;grid-template-columns:1fr 1fr;gap:5%}
.thumbs div{aspect-ratio:9/16;border-radius:4%;overflow:hidden;background:#eee;outline:2px solid transparent;outline-offset:1px}
.thumbs div.sel{outline-color:var(--teal)}
.thumbs img{width:100%;height:100%;object-fit:cover;display:block}
.thumbs .mini{display:flex;flex-direction:column;justify-content:center;gap:9%;padding:12% 12%;background:#f4f0e7}
.thumbs .mini i{display:block;height:.38em;border-radius:1em;background:var(--hair)}
.thumbs .mini i:nth-child(1){width:70%;background:var(--teal);opacity:.55;height:.55em}
.edit{display:flex;flex-direction:column;gap:5%;height:100%}
.edit .pic{flex:1;min-height:0;border-radius:3%;overflow:hidden;background:#eee}
.edit .pic img,.send .pic img,.share .pic img{width:100%;height:100%;object-fit:cover;display:block}
.fld{display:flex;justify-content:space-between;gap:4%;border-bottom:1px solid var(--hair);padding-bottom:2.5%;font-size:.88em}
.fld span{color:var(--ink-soft)} .fld b{font-weight:600}
.tools{display:flex;justify-content:space-between}
.tools span{width:20%;aspect-ratio:1;border-radius:28%;border:1px solid var(--hair);position:relative}
.tools span::after{content:"";position:absolute;inset:34%;border:1.4px solid var(--teal);border-radius:20%}
.send{display:flex;flex-direction:column;gap:5%;height:100%}
.send .pic{flex:1;min-height:0;border-radius:2%;overflow:hidden;border:4px solid #141414}
.btn-send{border-radius:2em;background:var(--teal);color:#fff;text-align:center;font-weight:600;padding:6% 0;transition:background-color .2s,transform .2s}
.btn-send.press{background:#3d7f73;transform:scale(.96)}
.share{display:flex;flex-direction:column;gap:6%;height:100%;justify-content:flex-end}
.share .pic{width:46%;align-self:center;aspect-ratio:9/16;border-radius:4%;overflow:hidden;box-shadow:0 6px 14px rgba(0,0,0,.12)}
.sheet{background:#fff;border-radius:7%/11%;padding:7% 6%;box-shadow:0 -2px 12px rgba(0,0,0,.06)}
.sheet p{margin:0 0 6%;font-weight:600;text-align:center}
.apps{display:flex;justify-content:space-around}
.apps span{display:flex;flex-direction:column;align-items:center;gap:.4em;font-size:.78em;color:var(--ink-soft)}
.apps span::before{content:"";width:2.3em;height:2.3em;border-radius:50%;border:1px solid var(--hair);background:var(--sage-soft)}

.small{z-index:6;width:var(--sw);height:var(--sh)}
.small .bezel{padding:calc(var(--sw)*.03)}
.small .card{background:#1f3d47;color:#efe7d4;padding:12% 8%}
.small .card small{font-size:calc(var(--sw)*.045);color:#cdbf98;letter-spacing:.2em}
.small .card .face{width:44%;aspect-ratio:1;border-radius:50%;overflow:hidden;margin:9% 0 7%;box-shadow:0 0 0 1.5px #cdbf98}
.small .card .face img{width:100%;height:100%;object-fit:cover;display:block}
.small .card b{font-size:calc(var(--sw)*.1);color:#efe7d4;margin:0}
.small .card .dates{font-size:calc(var(--sw)*.055);color:#cfc9b9;margin-top:3%}
.small .stand{position:absolute;left:18%;right:18%;top:100%;height:calc(var(--sh)*.05);background:linear-gradient(#232426,#0f1012);border-radius:0 0 3px 3px}
.small.hi .bezel,.disp.hi .bezel{box-shadow:0 0 0 2px var(--paper),0 0 0 3.5px var(--teal),0 14px 30px rgba(18,26,28,.26)}
.slot{z-index:6;width:var(--sw);height:var(--sh);border:1.5px dashed rgba(35,78,86,.5);border-radius:3px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  color:var(--teal);font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;text-align:center;line-height:1.35;background:rgba(251,248,242,.4)}
.slot svg{width:18px;height:18px}
.spec{z-index:8;font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;color:var(--teal);text-align:center}
.spec span{display:block;margin-top:3px;font-size:12px;font-weight:500;letter-spacing:.04em;text-transform:none;color:var(--ink-soft);font-variant-numeric:tabular-nums}
.dims{position:absolute;inset:0;width:100%;height:100%;z-index:7;opacity:0;pointer-events:none;overflow:visible}

/* ---------- three savings (the big moment) ---------- */
.veil{position:absolute;inset:0;z-index:10;opacity:0;pointer-events:none;
  background:radial-gradient(120% 90% at 78% 18%,#336d76 0%,#1f4a52 42%,#14353c 78%,#0f2a30 100%)}
.veil::after{content:"";position:absolute;inset:0;opacity:.12;background-image:inherit}
.ch.tri{position:absolute;inset:0;width:auto;transform:none;z-index:11;opacity:0;pointer-events:none;display:flex;flex-direction:column;justify-content:center;
  padding:calc(var(--nav-h) + 20px) var(--gr) calc(28px + var(--barpad,0px)) var(--gl);color:#f1ede4;background:none}
.ch.tri.on{pointer-events:auto}
.tri-k{margin:0 0 18px;font-size:11px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:#a9c0bd}
.tri ul{list-style:none;margin:0;padding:0;display:grid;border-top:1px solid rgba(241,237,228,.18)}
.tri li{border-bottom:1px solid rgba(241,237,228,.18)}
.tri .row{width:100%;display:grid;grid-template-columns:1fr;gap:4px;align-items:baseline;text-align:left;background:none;border:0;padding:12px 0 14px;color:inherit}
.tri .ln{display:block;overflow:hidden;padding-bottom:.06em}
.tri .w{display:inline-block;font:400 clamp(40px,13.2vw,58px)/1 var(--f-display);letter-spacing:-.012em;will-change:transform}
.tri .w em{font-style:italic;color:#d8c9a3}
.tri .fig{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;font-size:14.5px;color:#c9d8d6;will-change:opacity,transform}
.tri .fig b{font:400 22px/1 var(--f-display);color:#fff;font-variant-numeric:tabular-nums}
.tri .go{display:none}

/* ---------- chapters ---------- */
.chs{position:absolute;inset:0;z-index:12;pointer-events:none}
.ch{position:absolute;left:0;right:0;bottom:0;opacity:0;pointer-events:none;
  padding:58px var(--gr) calc(22px + var(--barpad,0px)) var(--gl);
  background:linear-gradient(rgba(243,237,226,0),rgba(243,237,226,.94) 52px,rgba(243,237,226,.98));will-change:opacity,transform}
.ch.on{pointer-events:auto}
.ch[data-beat="top"]{opacity:1}
.ch.dark{background:linear-gradient(rgba(12,21,32,0),rgba(12,21,32,.92) 52px,rgba(12,21,32,.97));color:var(--night-ink)}
.ch-in{max-width:560px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.k{margin:0;display:flex;align-items:center;gap:12px;font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--sage)}
.k::before{content:"";width:26px;height:1.5px;background:currentColor}
.dark .k{color:#a9b78f}
h1,h2{margin:0;font-family:var(--f-display);font-weight:400;color:var(--teal);text-wrap:balance;letter-spacing:-.01em}
h1 em,h2 em{font-style:italic}
.dark h2{color:var(--night-ink)}
h1{font-size:34px;line-height:1.02}
h2{font-size:29px;line-height:1.06}
.lead{margin:0;font-size:16px;line-height:1.55;color:var(--ink-soft);max-width:60ch}
.dark .lead{color:var(--night-soft)}
.actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:48px;padding:0 22px;border-radius:999px;border:1px solid var(--teal);background:var(--teal);color:#fff;font-weight:600;font-size:15px;letter-spacing:.01em;text-decoration:none;transition:background-color .2s,color .2s,border-color .2s}
.btn:hover{background:var(--teal-deep);border-color:var(--teal-deep)}
.btn.ghost{background:transparent;color:var(--teal);border-color:rgba(35,78,86,.4)}
.btn.ghost:hover{background:rgba(35,78,86,.07);border-color:var(--teal)}
.btn svg{width:17px;height:17px;flex:none}
.next{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 2px;background:none;border:0;font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--teal)}
.dark .next{color:var(--night-ink)}
.next svg{width:16px;height:16px}
.next:hover span{text-decoration:underline;text-underline-offset:4px}
sup{font-size:.6em;line-height:0}
sup a{text-decoration:none;color:var(--sage);font-weight:700}

.stat{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;padding:12px 0;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.stat b{font:400 42px/1 var(--f-display);color:var(--teal);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.stat span{font-size:14.5px;color:var(--ink-soft);line-height:1.4;flex:1;min-width:170px}
.calc{display:grid;gap:8px}
.calc label{display:grid;grid-template-columns:1fr auto;gap:2px 10px;align-items:center;font-size:13.5px;color:var(--ink-soft)}
.calc label output{font-weight:700;color:var(--teal);font-variant-numeric:tabular-nums}
.calc input{grid-column:1/-1;width:100%;accent-color:var(--teal);height:24px;margin:0}
.calc .res{margin:0;font-size:15.5px;color:var(--ink);line-height:1.45}
.calc .res b{color:var(--teal);font-variant-numeric:tabular-nums}
.fine{margin:0;font-size:12.5px;color:var(--ink-soft);line-height:1.45}

.feats{list-style:none;margin:0;padding:0;display:grid;border-top:1px solid var(--hair)}
.feats li{display:grid;grid-template-columns:34px 1fr;gap:12px;align-items:baseline;padding:10px 0;border-bottom:1px solid var(--hair);opacity:.42;transition:opacity .35s}
.feats li.on{opacity:1}
.feats .n{font:400 20px/1 var(--f-display);color:var(--sage);font-variant-numeric:tabular-nums}
.feats li.on .n{color:var(--teal)}
.feats b{display:block;font-size:15.5px;font-weight:600;color:var(--teal)}
.feats span{display:block;font-size:14px;color:var(--ink-soft);line-height:1.4}
.avail{display:inline-flex;align-self:flex-start;gap:10px;align-items:center;font-size:12px;font-weight:600;letter-spacing:.06em;color:var(--teal)}
.avail i{width:6px;height:6px;border-radius:50%;background:var(--sage)}

.sizes{display:flex;flex-wrap:wrap;gap:8px}
.sizes button{min-height:46px;padding:7px 14px;border-radius:10px;border:1px solid var(--hair);background:rgba(251,248,242,.7);text-align:left;line-height:1.25}
.sizes button b{display:block;font-size:14.5px;font-weight:600;color:var(--teal)}
.sizes button span{font-size:12.5px;color:var(--ink-soft);font-variant-numeric:tabular-nums}
.sizes button[aria-pressed="true"]{border-color:var(--teal);box-shadow:inset 0 0 0 1px var(--teal);background:var(--paper)}
.sizes .soon{border-style:dashed;cursor:default;background:transparent}
.specs{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:12px 18px;border-top:1px solid var(--hair);padding-top:12px}
.specs li{display:grid;gap:2px}
.specs b{font-size:14.5px;font-weight:600;color:var(--teal)}
.specs span{font-size:13.5px;color:var(--ink-soft);line-height:1.38}

.mail{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px;padding:10px 0;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.mail .addr{font:400 21px/1.2 var(--f-display);color:var(--teal);user-select:all;-webkit-user-select:all;word-break:break-all}
.mail .copy{min-height:40px;padding:0 16px;border-radius:999px;border:1px solid rgba(35,78,86,.4);background:transparent;color:var(--teal);font-weight:600;font-size:13.5px}
.mail .copy:hover{border-color:var(--teal);background:rgba(35,78,86,.06)}

@media (max-height:760px) and (max-width:859px){
  h1{font-size:29px} h2{font-size:25px}
  .ch{padding-top:46px}
  .ch-in{gap:9px}
  .ch .hide-short{display:none}
  .ch .lead{font-size:15px}
  .feats li:not(.on){display:none}
  .stat{padding:8px 0} .stat b{font-size:32px} .stat span{font-size:13.5px}
  .calc{gap:3px} .calc input{height:20px}
  .specs{gap:6px 12px;padding-top:8px} .specs span{display:none}
  .sizes button{min-height:42px;padding:5px 10px} .sizes .soon{display:none}
  .lg-g{display:none} .ledger{padding:12px 14px}
}
@media (max-width:359px){ h1{font-size:27px} .lead{font-size:15px} }
@media (max-width:379px){ .brand small{display:none} .nav-cta{padding:0 14px} }

/* ---------- desktop composition ---------- */
@media (min-width:860px) and (min-aspect-ratio:21/20){
  :root{--nav-h:68px}
  .nav{background:rgba(243,237,226,.72)}
  .brand b{font-size:26px}
  .rail{display:flex}
  .scrim{display:block}
  .ch{left:max(48px, 5.5vw);right:auto;bottom:auto;top:50%;width:min(500px, 37vw);transform:translateY(-50%);padding:0;background:none}
  .ch.dark{background:none}
  .ch-in{max-width:none;gap:18px}
  h1{font-size:clamp(46px,4.6vw,74px);line-height:.98}
  h2{font-size:clamp(34px,3.1vw,50px);line-height:1.02}
  .lead{font-size:18px}
  .disp{left:67%;top:12%;height:52%}
  .hero{left:max(40vw, calc(max(48px, 5.5vw) + min(500px, 37vw) + 24px));top:0;bottom:0;height:auto}
  .hero img{object-position:52% 58%;-webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.6) 9%,#000 20%);mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.6) 9%,#000 20%)}
  .ch.tri{inset:0;top:0;left:0;width:auto;transform:none;padding:calc(var(--nav-h) + 24px) calc(max(48px,5.5vw) + 110px) 40px max(48px,5.5vw);background:none}
  .tri-k{margin-bottom:26px}
  .tri .row{grid-template-columns:minmax(0,1fr) minmax(200px,290px);gap:24px;padding:clamp(10px,1.6vh,20px) 0}
  .tri .w{font-size:clamp(56px,7.2vw,134px);line-height:.96;white-space:nowrap}
  .tri .fig{display:block;font-size:15px;line-height:1.45}
  .tri .fig b{display:block;font-size:clamp(26px,2.2vw,34px);margin-bottom:6px}
}
@media (min-width:860px) and (min-aspect-ratio:21/20) and (max-height:760px){
  .ch-in{gap:12px}
  .tri .w{font-size:clamp(52px,6.6vw,104px)}
}
@media (min-width:860px) and (max-width:1279px){ .rail button[aria-current="true"] span{opacity:0;transform:translateX(6px)} }

/* ---------- footer ---------- */
.foot{background:var(--teal-ink);color:#dbe5e3;padding-block:52px 60px;padding-left:var(--gl);padding-right:var(--gr)}
.foot-in{max-width:1080px;margin:0 auto;display:grid;gap:22px}
.foot .wm{display:flex;align-items:baseline;gap:12px}
.foot .wm b{font:400 30px/1 var(--f-display);color:#fff}
.foot .wm small{font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:#a9c0bd}
.foot ol{margin:0;padding-left:18px;display:grid;gap:6px;font-size:13.5px;color:#b9cbc8;max-width:75ch}
.foot .links{display:flex;flex-wrap:wrap;gap:8px 26px;font-size:15px;border-top:1px solid rgba(255,255,255,.12);padding-top:18px}
.foot .links a{color:#fff;text-underline-offset:4px}
.foot .revere{font:400 26px/1 var(--f-display);letter-spacing:.32em;color:#fff;opacity:.9}

@media (prefers-reduced-motion:reduce){
  .rail span,.rail i,.pv,.ph-steps span,.btn-send,.feats li,.lg-g i{transition:none}
}

/* ---------- language switcher ---------- */
.nav-r{display:flex;align-items:center;gap:8px}
.lang{position:relative}
.lang summary{list-style:none;display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 12px;border-radius:999px;border:1px solid var(--hair);
  background:rgba(251,248,242,.6);color:var(--teal);font-size:13px;font-weight:600;letter-spacing:.02em;cursor:pointer;-webkit-user-select:none;user-select:none}
.lang summary::-webkit-details-marker{display:none}
.lang summary::marker{content:""}
.lang summary svg{width:16px;height:16px;flex:none}
.lang summary:hover{border-color:rgba(35,78,86,.45)}
.lang[open] summary{border-color:var(--teal)}
.lang ul{position:absolute;right:0;top:calc(100% + 8px);z-index:50;min-width:172px;margin:0;padding:6px;list-style:none;background:var(--paper);
  border:1px solid var(--hair);border-radius:14px;box-shadow:0 16px 40px rgba(16,30,32,.18)}
.lang a{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:44px;padding:0 12px;border-radius:9px;text-decoration:none;color:var(--ink);font-size:15px}
.lang a:hover{background:var(--sage-soft)}
.lang a[aria-current="true"]{color:var(--teal);font-weight:600}
.lang a[aria-current="true"]::after{content:"";width:7px;height:7px;border-radius:50%;background:var(--teal)}
:root.is-night .lang summary{color:var(--night-ink);border-color:var(--night-hair);background:rgba(15,27,39,.4)}
@media (max-width:479px){ .brand small{display:none} .lang summary{padding:0 10px} }
@media (max-width:359px){ .lang summary svg{display:none} .nav-cta{padding:0 12px;font-size:13px} }

/* ---------- Chinese pages ---------- */
:root:lang(zh-Hant){--f-display:"DM Serif Display","Noto Serif TC","Songti TC","PMingLiU",serif;
  --f-body:"Instrument Sans","PingFang TC","Noto Sans TC","Microsoft JhengHei",system-ui,sans-serif}
:root:lang(zh-Hans){--f-display:"DM Serif Display","Noto Serif SC","Songti SC","SimSun",serif;
  --f-body:"Instrument Sans","PingFang SC","Noto Sans SC","Microsoft YaHei",system-ui,sans-serif}
:lang(zh) body{line-height:1.7}
:lang(zh) h1,:lang(zh) h2,:lang(zh) .tri .w{font-weight:600;font-synthesis:none;letter-spacing:.02em}
:lang(zh) h1{line-height:1.22}
:lang(zh) h2{line-height:1.28}
:lang(zh) .tri .w{line-height:1.14}
:lang(zh) h1 em,:lang(zh) h2 em,:lang(zh) .tri .w em{font-style:normal}
:lang(zh) h1 em,:lang(zh) h2 em{color:#5f6b47}
:lang(zh) .dark h2 em{color:#c9d3b0}
:lang(zh) .lead{line-height:1.75}
:lang(zh) .k,:lang(zh) .tri-k,:lang(zh) .note small,:lang(zh) .lg-h span,:lang(zh) .spec,:lang(zh) .slot,:lang(zh) .next,:lang(zh) .rail span{letter-spacing:.08em}
:lang(zh) h1{font-size:30px}
:lang(zh) h2{font-size:25px}
@media (min-width:860px) and (min-aspect-ratio:21/20){
  :lang(zh) h1{font-size:clamp(38px,3.7vw,58px)}
  :lang(zh) h2{font-size:clamp(28px,2.5vw,40px)}
}

/* ---------- scroll hint: shown at rest, hidden while scrolling ---------- */
.hint{position:absolute;left:50%;bottom:calc(12px + var(--barpad,0px));z-index:14;display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:9px 17px 6px;border-radius:999px;border:1px solid rgba(255,255,255,.65);background:rgba(251,248,242,.74);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 6px 18px rgba(16,30,32,.1);
  color:var(--teal);font:600 11.5px/1 var(--f-body);letter-spacing:.2em;text-transform:uppercase;cursor:pointer;
  opacity:0;transform:translate(-50%,10px);pointer-events:none;transition:opacity .5s ease,transform .5s ease}
.hint span{opacity:.72}
.hint svg{width:21px;height:21px}
.hint.show{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.hint.show svg{animation:hint-bob 1.5s ease-in-out 4}
.hint:hover span{opacity:1}
:root.is-night .hint,.hint.on-dark{color:var(--night-ink);background:rgba(15,27,39,.42);border-color:rgba(255,255,255,.16)}
@keyframes hint-bob{0%,100%{transform:translateY(-2px)}50%{transform:translateY(4px)}}
:lang(zh) .hint{letter-spacing:.14em;font-size:12.5px}
/* phones: keep room under the text band so the hint never covers the words */
@media not all and (min-width:860px) and (min-aspect-ratio:21/20){
  .ch{padding-bottom:calc(72px + var(--barpad,0px))}
  .ch.tri{padding-bottom:calc(76px + var(--barpad,0px))}
}
@media (min-width:860px) and (min-aspect-ratio:21/20){
  .hint{bottom:28px;padding:11px 22px 8px;font-size:12.5px;gap:4px}
  .hint svg{width:24px;height:24px}
}
@media (prefers-reduced-motion:reduce){
  .hint{transition:opacity .2s}
  .hint.show svg{animation:none}
}

/* ---------- one scroll step per section ---------- */
html.snapping{scroll-snap-type:y mandatory}   /* switched on by app.js once every section's snap point exists */
.snap{position:absolute;left:0;width:1px;height:100vh;height:100lvh;pointer-events:none;scroll-snap-align:start;scroll-snap-stop:always}
.snapping .foot{scroll-snap-align:end}
.tri .next{margin-top:20px;color:#f1ede4}
@media (prefers-reduced-motion:reduce){ html.snapping{scroll-snap-type:y proximity} }