/* SunSol Safety v2. Hand-written. Palette, type and motion per DIRECTION.md (Nov. 6, 2026). */
:root{
  --navy:#1B2A41; --navy-2:#24385A; --navy-3:#14203A;
  --paper:#FBF7F0; --sand:#EFE6D6; --sand-2:#E6DAC4;
  --sun:#F28C28; --sol:#D9731A; --sun-text:#B4560A;
  --amber:#A65F00; --red:#B3261E; --gulf:#0F6CBD; --sky:#5FA8D3; --palm:#1F6B4A; --slate:#4A5568;
  --caution:#F5C04A; --danger:#E4572E; --warm:#FFE7C2;
  --t-fast:160ms; --t-base:280ms; --t-slow:520ms; --t-scene:1200ms;
  --ease-out:cubic-bezier(.2,.7,.2,1); --ease-inout:cubic-bezier(.6,0,.2,1);
  --display:"Archivo",system-ui,sans-serif; --text:"Atkinson Hyperlegible Next","Atkinson Hyperlegible",system-ui,sans-serif;
  --wrap:1200px; --pad:clamp(20px,5vw,48px); --radius:18px;
  --shadow:0 10px 24px rgba(27,42,65,.12);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:88px}
body{margin:0;background:var(--paper);color:var(--navy);font:400 1.125rem/1.6 var(--text);font-variant-numeric:lining-nums}
img,svg{display:block;max-width:100%}
a{color:var(--sun-text);text-underline-offset:.18em;text-decoration-thickness:2px}
a:hover{color:var(--navy)}
:focus-visible{outline:3px solid var(--sun);outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--navy);color:#fff;padding:12px 18px;border-radius:10px;font-weight:700}
.skip:focus{top:12px}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)}
h1,h2,h3,.display{font-family:var(--display);font-stretch:120%;font-weight:800;letter-spacing:-.015em;margin:0;text-wrap:balance}
h1{font-size:clamp(2.6rem,1.4rem + 4.6vw,5.2rem);line-height:.98}
h2{font-size:clamp(1.9rem,1.3rem + 2.2vw,3rem);line-height:1.04;font-stretch:112%}
h3{font-size:1.3rem;line-height:1.2;font-stretch:108%}
p{margin:0 0 1em;max-width:62ch;text-wrap:pretty}
.caps{font-family:var(--display);font-stretch:75%;font-weight:900;text-transform:uppercase;letter-spacing:.02em;line-height:.95}
.num{font-family:var(--display);font-variant-numeric:tabular-nums;font-stretch:100%}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font:700 .9375rem/1.2 var(--display);font-stretch:110%;letter-spacing:.06em;text-transform:uppercase;color:var(--sun-text);margin-bottom:18px}
.eyebrow::before{content:"";width:22px;height:4px;border-radius:4px;background:var(--sun)}
.on-navy .eyebrow{color:var(--sun)}
.lede{font-size:clamp(1.15rem,1rem + .5vw,1.4rem);line-height:1.5;color:var(--navy);max-width:40ch}
.small{font-size:.9375rem;color:var(--slate)}
.on-navy{background:var(--navy);color:var(--paper)}
.on-navy p,.on-navy .small{color:#E7E1D6}
.on-navy a{color:var(--sun)}
.band{background:var(--sand)}
section{position:relative}
.sec{padding-block:clamp(72px,10vw,136px)}
.sec-head{margin-bottom:clamp(32px,5vw,56px);max-width:860px}
.sec-head p{margin-top:18px}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:14px 26px;border-radius:12px;border:3px solid var(--navy);background:var(--sun);color:var(--navy);font:800 1.05rem/1 var(--display);font-stretch:110%;text-decoration:none;cursor:pointer;transition:transform var(--t-fast) var(--ease-out),box-shadow var(--t-fast) var(--ease-out),background var(--t-fast)}
.btn:hover{color:var(--navy);transform:translateY(-2px);box-shadow:0 6px 0 var(--navy)}
.btn:active{transform:translateY(0);box-shadow:none}
.btn.ghost{background:transparent}
.btn.ghost:hover{background:var(--paper)}
.on-navy .btn.ghost{border-color:var(--paper);color:var(--paper)}
.on-navy .btn.ghost:hover{background:var(--navy-2);box-shadow:0 6px 0 var(--sun)}
.on-navy .btn{border-color:var(--sun)}
.on-navy .btn:hover{box-shadow:0 6px 0 var(--sun)}
.btn .arrow{transition:transform var(--t-fast) var(--ease-out)}
.btn:hover .arrow{transform:translateX(4px)}
.btns{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}
.textlink{font-weight:700;display:inline-flex;gap:8px;align-items:center;min-height:44px}

/* Header */
.site-header{position:sticky;top:0;z-index:50;background:rgba(251,247,240,.94);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid transparent;transition:border-color var(--t-fast)}
.site-header .wrap{display:flex;align-items:center;gap:24px;height:84px;transition:height var(--t-fast) var(--ease-out)}
.is-scrolled .site-header{border-bottom-color:rgba(27,42,65,.12)}
.is-scrolled .site-header .wrap{height:64px}
.logo{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--navy);flex:none}
.logo svg{height:44px;width:auto;transition:height var(--t-fast) var(--ease-out)}
.is-scrolled .site-header .logo svg{height:38px}
.wordmark{display:flex;flex-direction:column;line-height:1}
.wordmark b{font:800 1.55rem/0.9 var(--display);font-stretch:112%;letter-spacing:-.016em}
.wordmark b span{color:var(--sol)}
.wordmark i{font:700 .62rem/1 var(--display);font-style:normal;letter-spacing:.43em;margin-top:5px}
.on-navy .wordmark,.on-navy .logo{color:var(--paper)}
.nav{display:flex;align-items:center;gap:6px;margin-left:auto}
.nav>a{color:var(--navy);text-decoration:none;font:700 1rem/1 var(--display);font-stretch:104%;padding:12px 10px;border-radius:8px;position:relative}
.nav>a::after{content:"";position:absolute;left:10px;right:10px;bottom:4px;height:3px;border-radius:3px;background:var(--sun);transform:scaleX(0);transform-origin:left;transition:transform var(--t-base) var(--ease-out)}
.nav>a:hover::after,.nav>a[aria-current=page]::after{transform:scaleX(1)}
.head-cta{min-height:46px;padding:10px 18px;font-size:.98rem;margin-left:8px}
.lang{position:relative;display:flex;align-items:center;gap:2px;margin-left:6px;padding:4px;border:2px solid rgba(27,42,65,.18);border-radius:10px}
.lang a,.lang span{position:relative;z-index:1;font:800 .85rem/1 var(--display);letter-spacing:.06em;padding:10px 9px;min-width:40px;text-align:center;color:var(--navy);text-decoration:none;border-radius:7px}
.lang span{color:var(--slate);cursor:help}
.lang .ul{position:absolute;z-index:0;left:0;bottom:5px;height:3px;border-radius:3px;background:var(--sun);transition:transform var(--t-base) var(--ease-out),width var(--t-base) var(--ease-out);pointer-events:none}
.lang .tip{position:absolute;right:0;top:calc(100% + 10px);width:260px;padding:12px 14px;border-radius:10px;background:var(--navy);color:var(--paper);font:400 .9rem/1.4 var(--text);opacity:0;transform:translateY(-4px);pointer-events:none;transition:opacity var(--t-fast),transform var(--t-fast) var(--ease-out);z-index:3}
.lang:has(span:hover) .tip,.lang:has(span:focus-visible) .tip{opacity:1;transform:none}
.menu-btn{display:none;margin-left:auto;min-height:48px;min-width:48px;padding:0 14px;border-radius:10px;border:2px solid var(--navy);background:transparent;color:var(--navy);font:800 1rem/1 var(--display);gap:8px;align-items:center;cursor:pointer}
.menu-btn .bars{width:20px;height:14px;position:relative}
.menu-btn .bars::before,.menu-btn .bars::after{content:"";position:absolute;left:0;right:0;height:3px;border-radius:2px;background:currentColor;transition:transform var(--t-base) var(--ease-out)}
.menu-btn .bars::before{top:1px}.menu-btn .bars::after{bottom:1px}
.menu-open .menu-btn .bars::before{transform:translateY(5px) rotate(45deg)}
.menu-open .menu-btn .bars::after{transform:translateY(-5px) rotate(-45deg)}
@media (max-width:1180px){
  .menu-btn{display:inline-flex}
  .head-tools{display:none}
  .nav{position:fixed;inset:64px 0 auto 0;flex-direction:column;align-items:stretch;gap:0;padding:12px var(--pad) 28px;background:var(--paper);border-bottom:3px solid var(--navy);box-shadow:var(--shadow);transform:translateY(-8px);opacity:0;visibility:hidden;transition:opacity var(--t-base),transform var(--t-base) var(--ease-out),visibility 0s linear var(--t-base);max-height:calc(100svh - 64px);overflow:auto}
  .site-header .wrap{height:64px}
  .menu-open .nav{opacity:1;transform:none;visibility:visible;transition:opacity var(--t-base),transform var(--t-base) var(--ease-out)}
  .nav>a{font-size:1.3rem;padding:16px 4px;border-bottom:1px solid rgba(27,42,65,.12)}
  .nav>a::after{left:4px;right:auto;width:40px;bottom:10px}
  .nav .mob-tools{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:20px}
  .no-js .nav{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0}
  .logo svg{height:38px}
}
@media (min-width:1181px){.nav .mob-tools{display:none}.head-tools{display:flex;align-items:center}}

/* Hero: the logo's geometry at full width (5.1 A-B) */
.hero{position:relative;overflow:hidden;background:var(--paper);min-height:clamp(640px,calc(100svh - 84px),900px);display:flex;align-items:flex-start}
.hero .wrap{position:relative;z-index:2;width:100%;padding-top:clamp(40px,7vh,88px);padding-bottom:clamp(220px,30vh,300px)}
.hero h1{max-width:12ch}
.hero .lede{margin-top:26px;max-width:36ch}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px;padding:0;list-style:none}
.chips li{font:800 .95rem/1 var(--display);font-stretch:108%;padding:10px 14px;border-radius:999px;border:2px solid var(--navy);background:var(--paper)}
.chips li:nth-child(2){background:var(--sand)}
.chips li:nth-child(3){background:var(--warm)}
.hero .status{margin-top:22px;font-size:.9375rem;color:var(--slate);max-width:52ch}
.hero-art{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
.hero-art.mob{display:none}
.hero-art .horizon{stroke:var(--sun);stroke-width:12;stroke-linecap:round}
.hero-art .disc{fill:var(--sun)}
.hero-art .ray{stroke:var(--sun);stroke-width:46;stroke-linecap:round;fill:none}
.hero-art .shade{stroke:var(--sky);stroke-width:30;stroke-linecap:round}
.hero-art .shade2{stroke:var(--sky);stroke-width:12;stroke-linecap:round;opacity:.55}
.hero-art .glow{fill:url(#glow)}
.sun-rise{animation:sunrise var(--t-scene) var(--ease-out) both}
.hero-art .ray{stroke-dasharray:1;stroke-dashoffset:1;animation:draw 400ms var(--ease-out) forwards}
.hero-art .ray.r1{animation-delay:1000ms}.hero-art .ray.r2{animation-delay:1120ms}.hero-art .ray.r3{animation-delay:1240ms}
.hero-art .shade{stroke-dasharray:1;stroke-dashoffset:1;animation:draw 700ms var(--ease-out) 700ms forwards}
.hero-art .shade2{stroke-dasharray:1;stroke-dashoffset:1;animation:draw 700ms var(--ease-out) 900ms forwards}
@keyframes sunrise{from{transform:translateY(140px)}to{transform:none}}
@keyframes draw{to{stroke-dashoffset:0}}
@supports (animation-timeline: scroll()){
  .hero{animation:warm linear both;animation-timeline:scroll(root);animation-range:0 100vh}
  .sun-scroll{animation:lift linear both;animation-timeline:scroll(root);animation-range:0 100vh}
  @keyframes warm{from{background-color:var(--paper)}to{background-color:var(--warm)}}
  @keyframes lift{from{transform:none}to{transform:translateY(-8%)}}
}
@media (max-width:760px){
  .hero{min-height:0;display:block}
  .hero .wrap{padding-bottom:12px}
  .hero-art.desk{display:none}
  .hero-art.mob{display:block;position:relative;inset:auto;height:auto;margin-top:8px}
}

/* Sign cards (5.3) */
.signs{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;padding:0;margin:0;list-style:none}
.signs.six{grid-template-columns:repeat(3,1fr)}
@media (max-width:1000px){.signs,.signs.six{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.signs,.signs.six{grid-template-columns:1fr}}
.sign{position:relative;background:var(--paper);border:3px solid var(--navy);border-radius:var(--radius);padding:24px 24px 26px;transition:transform var(--t-fast) var(--ease-out),box-shadow var(--t-fast) var(--ease-out)}
.sign:hover,.sign:focus-within{transform:translateY(-2px);box-shadow:var(--shadow)}
.sign::before{content:"";position:absolute;left:50%;top:-9px;width:14px;height:14px;margin-left:-7px;border-radius:50%;background:var(--sand-2);border:3px solid var(--navy)}
.sign .ico{width:64px;height:64px;margin-bottom:18px}
.sign .caps{font-size:clamp(1.6rem,1.2rem + 1vw,2.2rem);margin:0 0 10px}
.sign .n{position:absolute;right:20px;top:18px;font:800 1rem/1 var(--display);color:var(--slate)}
.sign p{margin:0;font-size:1.0625rem}
.js .reveal .sign{opacity:0;transform:translateY(16px)}
.js .reveal.is-in .sign{opacity:1;transform:none;transition:opacity var(--t-base) var(--ease-out),transform var(--t-base) var(--ease-out),box-shadow var(--t-fast);transition-delay:calc(var(--i,0) * 70ms)}
.js .reveal.is-in .sign:hover{transform:translateY(-2px);transition-delay:0ms}
/* one-time icon moments */
.ico *{transform-box:fill-box;transform-origin:center}
.js .reveal .ico .drop{transform:translateY(-8px);opacity:0}
.js .reveal .ico .ripple{transform:scale(0);opacity:0}
.js .reveal.is-in .ico .drop{animation:drop 600ms var(--ease-out) calc(var(--i,0)*70ms + 200ms) forwards}
.js .reveal.is-in .ico .ripple{animation:ripple 600ms var(--ease-out) calc(var(--i,0)*70ms + 450ms) forwards}
@keyframes drop{to{transform:none;opacity:1}}
@keyframes ripple{0%{transform:scale(0);opacity:1}100%{transform:scale(1);opacity:.35}}
.ico .hand{transform-origin:50% 100%}
.js .reveal.is-in .ico .hand{animation:turn 600ms var(--ease-inout) calc(var(--i,0)*70ms + 200ms) both}
@keyframes turn{from{transform:rotate(-90deg)}to{transform:none}}
.js .reveal .ico .canopy{transform:translateX(-14px);opacity:0}
.js .reveal.is-in .ico .canopy{animation:drop 600ms var(--ease-out) calc(var(--i,0)*70ms + 200ms) forwards}
.ico .bar{transform-origin:50% 100%}
.js .reveal .ico .bar{transform:scaleY(0)}
.js .reveal.is-in .ico .bar{animation:grow 360ms var(--ease-out) forwards}
.js .reveal.is-in .ico .bar.b1{animation-delay:calc(var(--i,0)*70ms + 200ms)}
.js .reveal.is-in .ico .bar.b2{animation-delay:calc(var(--i,0)*70ms + 320ms)}
.js .reveal.is-in .ico .bar.b3{animation-delay:calc(var(--i,0)*70ms + 440ms)}
@keyframes grow{to{transform:none}}
.js .reveal .ico .bang{transform:translateY(-12px);opacity:0}
.js .reveal.is-in .ico .bang{animation:drop 600ms cubic-bezier(.3,1.5,.5,1) calc(var(--i,0)*70ms + 200ms) forwards}
.js .reveal .ico .d1{transform:translateX(-8px)}
.js .reveal .ico .d2{transform:translateX(8px)}
.js .reveal.is-in .ico .d1,.js .reveal.is-in .ico .d2{animation:drop 600ms var(--ease-out) calc(var(--i,0)*70ms + 200ms) forwards}

.callout{margin-top:28px;background:var(--navy);color:var(--paper);border-radius:var(--radius);padding:22px 26px;display:flex;gap:16px;align-items:center;font:800 clamp(1.15rem,1rem + .6vw,1.5rem)/1.25 var(--display);font-stretch:108%}
.callout svg{flex:none;width:40px;height:40px}

/* Unboxing sequence (5.2) */
.unbox{--p:1;position:relative}
.unbox .stage{position:relative;display:grid;grid-template-columns:minmax(260px,34%) 1fr;gap:clamp(24px,4vw,56px);align-items:center;padding-block:40px}
.unbox.is-live{height:320vh}
.unbox.is-live.short{height:220vh}
.unbox.is-live .stage{position:sticky;top:0;height:100svh;padding-top:84px;padding-bottom:24px}
.cap-col{position:relative;align-self:center}
.cap-count{font:800 1rem/1 var(--display);letter-spacing:.06em;color:var(--sun-text);display:flex;align-items:center;gap:12px}
.cap-bar{display:block;width:120px;height:4px;border-radius:4px;background:rgba(27,42,65,.15);overflow:hidden}
.cap-bar i{display:block;height:100%;background:var(--sun);transform-origin:left;transform:scaleX(var(--p))}
.caps-stack{display:grid;margin-top:22px;min-height:9.5em}
.caps-stack p{grid-area:1/1;margin:0;font:800 clamp(1.25rem,1rem + .9vw,1.85rem)/1.22 var(--display);font-stretch:106%;opacity:0;transform:translateY(10px);transition:opacity var(--t-base) var(--ease-out),transform var(--t-base) var(--ease-out)}
.caps-stack p.on{opacity:1;transform:none}
.unbox:not(.is-live) .cap-col{display:none}
.unbox:not(.is-live) .stage{grid-template-columns:1fr}
.unbox-cta{margin-top:26px;opacity:clamp(0,calc((var(--p) - .88) / .08),1);transform:translateY(calc((1 - clamp(0,calc((var(--p) - .88) / .08),1)) * 16px))}
.unbox-list{margin:28px 0 0;padding-left:1.2em}
.unbox-list li{margin-bottom:.5em}
.unbox.is-live .unbox-list{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.table{position:relative;width:min(100%,calc((100svh - 150px) * 4 / 3));aspect-ratio:4/3;margin-inline:auto;container-type:size;border-radius:22px;background:var(--sand-2);background-image:radial-gradient(rgba(27,42,65,.07) 1px,transparent 1.4px);background-size:18px 18px;box-shadow:inset 0 0 0 3px rgba(27,42,65,.08);perspective:1400px}
.unbox:not(.is-live) .table{width:min(100%,1000px)}
.pc{--k:clamp(0,calc((var(--p) - var(--a)) / (var(--b) - var(--a))),1);position:absolute;left:calc(var(--l) * 1cqw);top:calc(var(--t) * 1cqh);width:calc(var(--w) * 1cqw);container-type:inline-size;transform:translate(calc((1 - var(--k)) * var(--dx) * 1cqw),calc((1 - var(--k)) * var(--dy) * 1cqh)) rotate(calc(var(--r0,0) * 1deg * (1 - var(--k)) + var(--r,0) * 1deg * var(--k))) scale(calc(.55 + .45 * var(--k)));opacity:clamp(0,calc(var(--k) * 6),1);will-change:transform;z-index:3}
.pc.stk{transform:translateY(calc((1 - var(--k)) * -14cqw)) rotate(calc(10deg * (1 - var(--k)) + var(--r,0) * 1deg)) scale(calc(.86 + .14 * var(--k)));filter:drop-shadow(0 calc(1px + (1 - var(--k)) * 10px) calc(2px + (1 - var(--k)) * 14px) rgba(27,42,65,.28))}
.folder{position:absolute;left:34cqw;top:47cqh;width:32cqw;aspect-ratio:4/3;container-type:inline-size;z-index:2;transform:rotate(calc((1 - var(--lid)) * -4deg));--lid:clamp(0,calc((var(--p) - .02) / .10),1);transform-style:preserve-3d}
.folder .base{position:absolute;inset:0;border-radius:4cqw;background:var(--navy-3);box-shadow:0 2cqw 4cqw rgba(27,42,65,.25)}
.folder .base::after{content:"";position:absolute;inset:6cqw 6cqw auto;height:3cqw;border-radius:2cqw;background:rgba(255,255,255,.08)}
.folder .lid{position:absolute;inset:0;border-radius:4cqw;background:var(--navy);transform-origin:50% 0;transform:rotateX(calc(var(--lid) * -68deg));display:grid;place-items:center;align-content:center;gap:3cqw;color:var(--paper);text-align:center;box-shadow:inset 0 0 0 1cqw var(--navy-2);backface-visibility:hidden}
.folder .lid svg{width:16cqw;height:auto}
.folder .lid b{font:800 7cqw/1 var(--display);font-stretch:112%}
.folder .lid b span{color:var(--sun)}
.folder .lid i{font:700 3.2cqw/1 var(--display);font-style:normal;letter-spacing:.3em;color:#E7E1D6}
.paper{background:#FFFDF8;border-radius:1.2cqw;box-shadow:0 .6cqw 2cqw rgba(27,42,65,.18),0 0 0 1px rgba(27,42,65,.08)}

/* Kit pieces, drawn from the locked text. Sizes in cqw of each piece. */
.wcard{aspect-ratio:3.375/2.125;perspective:180cqw}
.wcard .flip{position:relative;width:100%;height:100%;transform-style:preserve-3d;transform:rotateY(calc(var(--f,0) * 180deg))}
.wcard .face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:5cqw;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 1.4cqw 4cqw rgba(27,42,65,.28)}
.wcard .front{background:#FFFDF8}
.wcard .back{transform:rotateY(180deg);background:var(--navy);color:var(--paper);justify-content:center;align-items:center;text-align:center;gap:3cqw;padding:6cqw}
.wcard .top{background:var(--navy);color:var(--paper);padding:4.2cqw 6cqw;display:flex;align-items:center;justify-content:space-between;gap:3cqw}
.wcard .top b{font:900 7.4cqw/1 var(--display);font-stretch:75%;letter-spacing:.03em}
.wcard .top svg{width:8.5cqw;height:auto;flex:none}
.wcard .body{padding:3.6cqw 6cqw;display:grid;gap:2.4cqw;font:400 4.1cqw/1.25 var(--text)}
.wcard .body strong{font-weight:700}
.wcard .row{display:flex;gap:2.4cqw;align-items:flex-start}
.wcard .tag{flex:none;font:900 3.3cqw/1 var(--display);font-stretch:80%;color:#fff;padding:1.2cqw 1.8cqw;border-radius:1.4cqw;text-transform:uppercase}
.wcard .tag.a{background:var(--amber)}.wcard .tag.r{background:var(--red)}
.wcard .back b{font:900 9cqw/1 var(--display);font-stretch:75%;letter-spacing:.04em}
.wcard .back span{font:400 4.6cqw/1.3 var(--text);color:#E7E1D6}
.wcard .back .sun3{width:14cqw}
.poster1{aspect-ratio:3/4;overflow:hidden;display:flex;flex-direction:column;clip-path:inset(0 calc((1 - var(--u,1)) * 44%) 0 calc((1 - var(--u,1)) * 44%) round 1.2cqw)}
.poster1 .hd{background:var(--navy);color:var(--paper);padding:7cqw 7cqw 6cqw}
.poster1 .hd b{display:block;font:900 19cqw/.86 var(--display);font-stretch:72%;color:var(--sun)}
.poster1 .hd i{display:block;font:700 4.4cqw/1.2 var(--display);font-style:normal;letter-spacing:.12em;margin-top:2.6cqw}
.poster1 .icons{display:grid;grid-template-columns:repeat(4,1fr);gap:2cqw;padding:5cqw 7cqw}
.poster1 .icons div{display:grid;justify-items:center;gap:1.4cqw;font:900 3.6cqw/1 var(--display);font-stretch:80%;text-transform:uppercase}
.poster1 .icons svg{width:11cqw;height:11cqw}
.poster1 .two{display:grid;grid-template-columns:1fr 1fr;gap:2.4cqw;padding:0 7cqw;flex:1}
.poster1 .two div{border-radius:2cqw;color:#fff;padding:3.6cqw;font:900 4.4cqw/1.05 var(--display);font-stretch:80%;text-transform:uppercase}
.poster1 .two div span{display:block;margin-top:2cqw;height:1.4cqw;border-radius:1cqw;background:rgba(255,255,255,.45)}
.poster1 .two div span+span{width:70%}
.poster1 .two .a{background:var(--amber)}.poster1 .two .r{background:var(--red)}
.poster1 .ft{margin:4cqw 7cqw 5cqw;font:700 3.6cqw/1.25 var(--text);border-top:.8cqw solid var(--sun);padding-top:2.6cqw}
.poster2{aspect-ratio:11/17;overflow:hidden;padding:0 0 6cqw}
.poster2 .hd{background:var(--red);color:#fff;padding:7cqw 7cqw 6cqw;font:900 12cqw/.9 var(--display);font-stretch:74%;text-transform:uppercase}
.poster2 dl{margin:6cqw 7cqw 0;display:grid;gap:4.6cqw}
.poster2 dt{font:800 4.4cqw/1.1 var(--display);font-stretch:96%;text-transform:uppercase;letter-spacing:.04em}
.poster2 dd{margin:1.6cqw 0 0;height:5.2cqw;border-bottom:.6cqw solid rgba(27,42,65,.45)}
.sheet{aspect-ratio:8.5/11;padding:8cqw 8cqw}
.sheet b{display:block;font:800 7.2cqw/1.05 var(--display);font-stretch:108%}
.sheet .mk{width:12cqw;margin-bottom:5cqw}
.sheet .ln{height:2.2cqw;border-radius:2cqw;background:rgba(27,42,65,.14);margin-top:4.4cqw}
.sheet .ln.s{width:62%}.sheet .ln.m{width:84%}
.sheet .bx{display:flex;gap:3cqw;align-items:center;margin-top:4cqw}
.sheet .bx i{width:5cqw;height:5cqw;border:.8cqw solid var(--navy);border-radius:1cqw;flex:none}
.sheet .bx span{flex:1;height:2.2cqw;border-radius:2cqw;background:rgba(27,42,65,.14)}
.logsheet{aspect-ratio:11/8.5;padding:5cqw 6cqw}
.logsheet b{font:800 5.2cqw/1 var(--display);font-stretch:108%}
.logsheet .grid{margin-top:3.4cqw;display:grid;grid-template-columns:1.2fr 1.6fr 1fr .8fr 1fr 1fr;border:.5cqw solid var(--navy);border-radius:1cqw;overflow:hidden}
.logsheet .grid span{height:5.6cqw;border-right:.3cqw solid rgba(27,42,65,.3);border-bottom:.3cqw solid rgba(27,42,65,.3)}
.logsheet .grid span.h{background:var(--navy);height:6.4cqw}
.logsheet .grid span.lv{background:var(--caution)}
.logsheet .grid span.lv2{background:var(--sun)}
.sticker{aspect-ratio:1;border-radius:50%;display:grid;place-items:center;align-content:center;text-align:center;padding:12cqw;gap:3cqw;container-type:inline-size;box-shadow:inset 0 0 0 3.5cqw rgba(255,255,255,.9),inset 0 0 0 5cqw rgba(0,0,0,.06);font:900 11cqw/.95 var(--display);font-stretch:76%;text-transform:uppercase;position:relative;overflow:hidden}
.sticker small{display:block;font:700 7.4cqw/1.1 var(--text);text-transform:none;letter-spacing:0}
.sticker svg{width:26cqw;height:auto}
.st1{background:var(--navy);color:var(--paper)}.st2{background:var(--gulf);color:#fff}.st3{background:var(--red);color:#fff}.st4{background:var(--palm);color:#fff}.st5{background:var(--sun);color:var(--navy)}
.st5 svg .s-shield{fill:var(--navy)}

/* Heat-index check (5.1 C) */
.heat{--hi:90;background:var(--navy-2);border-radius:24px;padding:clamp(22px,4vw,44px);color:var(--paper);box-shadow:inset 0 0 0 2px rgba(255,255,255,.06)}
.heat-top{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap}
.heat-top label{font:800 1.1rem/1 var(--display);font-stretch:110%;letter-spacing:.06em;text-transform:uppercase}
.heat-top output{font:800 clamp(3.4rem,2.4rem + 4vw,6rem)/.9 var(--display);font-stretch:100%;font-variant-numeric:tabular-nums;color:var(--paper)}
.heat-top output small{font-size:.45em;color:var(--sun);margin-left:2px}
.heat-bar{position:relative;margin-top:26px;height:64px}
.heat-track{position:absolute;left:0;right:0;top:20px;height:24px;border-radius:999px;background:rgba(255,255,255,.12);overflow:hidden}
.heat-fill{position:absolute;inset:0;background:linear-gradient(90deg,var(--sky) 0 25%,var(--caution) 25% 50%,var(--sun) 50%,var(--danger) 100%);clip-path:inset(0 calc(100% - (var(--hi) - 70) / 40 * 100%) 0 0 round 999px);transition:clip-path 90ms linear}
.heat-sun{position:absolute;top:2px;left:calc((var(--hi) - 70) / 40 * 100%);width:60px;height:60px;margin-left:-30px;pointer-events:none;transition:left 90ms linear}
.heat-sun svg{width:100%;height:100%;overflow:visible}
.heat-sun .rays{transform-origin:50% 50%;transform:rotate(calc((var(--hi) - 70) * 4.5deg));transition:transform 90ms linear}
.heat input[type=range]{position:absolute;inset:0;width:100%;height:64px;margin:0;opacity:0;cursor:grab}
.heat input[type=range]:active{cursor:grabbing}
.heat-bar:has(input:focus-visible) .heat-sun circle.core{stroke:#fff;stroke-width:6}
.heat-bar:has(input:focus-visible){outline:3px solid var(--sun);outline-offset:8px;border-radius:12px}
.ticks{position:relative;height:44px;margin-top:4px;font:700 .95rem/1.1 var(--display);font-variant-numeric:tabular-nums;color:#E7E1D6}
.ticks span{position:absolute;transform:translateX(-50%);text-align:center;white-space:nowrap}
.ticks span b{display:block;color:var(--sun);font-size:.85rem;letter-spacing:.04em}
.ticks span:first-child{transform:none}.ticks span:last-child{transform:translateX(-100%)}
.heat-states{display:grid;margin-top:24px}
.heat-state{grid-area:1/1;background:var(--paper);color:var(--navy);border-radius:16px;padding:24px 26px;border-left:12px solid var(--sky);opacity:0;visibility:hidden;transition:opacity var(--t-base) var(--ease-out),visibility 0s linear var(--t-base)}
.heat-state p{color:var(--navy);margin:0;max-width:70ch}
.heat-state h3{margin-bottom:10px;font-size:clamp(1.25rem,1.1rem + .6vw,1.6rem)}
.heat-state[data-s="1"]{border-left-color:var(--caution)}
.heat-state[data-s="2"]{border-left-color:var(--danger)}
.heat[data-level="0"] .heat-state[data-s="0"],.heat[data-level="1"] .heat-state[data-s="1"],.heat[data-level="2"] .heat-state[data-s="2"]{opacity:1;visibility:visible;transition:opacity var(--t-base) var(--ease-out)}
.no-js .heat-state{opacity:1;visibility:visible;grid-area:auto;margin-bottom:12px}
.heat-note{margin-top:20px;font-size:.98rem;color:#E7E1D6}
.heat-note a{color:var(--sun)}

/* Signs panels */
.panels{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media (max-width:800px){.panels{grid-template-columns:1fr}}
.panel{border-radius:var(--radius);padding:clamp(24px,3.4vw,40px);color:#fff}
.panel.a{background:var(--amber)}.panel.r{background:var(--red)}
.panel h3{font-size:clamp(1.4rem,1.1rem + 1vw,2rem);margin-bottom:14px;color:#fff}
.panel p{color:#fff;margin:0}
.panel .tagline{display:inline-block;font:900 .9rem/1 var(--display);font-stretch:80%;letter-spacing:.08em;text-transform:uppercase;background:rgba(0,0,0,.18);padding:8px 10px;border-radius:6px;margin-bottom:16px}
.panel ul{margin:0 0 18px;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.panel li{background:rgba(255,255,255,.14);border:1.5px solid rgba(255,255,255,.4);padding:7px 12px;border-radius:999px;font-weight:700;font-size:1rem}
.panel h4{font:800 1rem/1 var(--display);letter-spacing:.08em;text-transform:uppercase;margin:22px 0 10px;color:#fff}
.band911{margin-top:20px;background:var(--red);color:#fff;border-radius:var(--radius);padding:22px 28px;display:flex;align-items:center;gap:18px;font:800 clamp(1.25rem,1rem + 1vw,1.9rem)/1.15 var(--display);font-stretch:106%}
.band911 .n911{flex:none;font:900 clamp(2.4rem,2rem + 2vw,3.6rem)/1 var(--display);font-stretch:80%;background:#fff;color:var(--red);border-radius:12px;padding:6px 14px}
.js .band911.pulse.is-in{animation:pulse var(--t-slow) var(--ease-inout) 1}
@keyframes pulse{50%{transform:scale(1.02)}}
.alert{background:var(--red);color:#fff}
.alert .wrap{display:flex;gap:18px;align-items:center;justify-content:space-between;padding-block:18px;flex-wrap:wrap}
.alert p{margin:0;color:#fff;font-weight:700;font-size:1.1rem;max-width:80ch}
.alert .btn{background:#fff;border-color:#fff;color:var(--red)}
.alert .call{display:none}
@media (hover:none) and (pointer:coarse){.alert .call{display:inline-flex}}

/* Generic reveal */
.js .rv{opacity:0;transform:translateY(18px)}
.js .rv.is-in{opacity:1;transform:none;transition:opacity var(--t-slow) var(--ease-out),transform var(--t-slow) var(--ease-out);transition-delay:calc(var(--i,0) * 70ms)}

/* Inner page hero */
.phero{padding-block:clamp(48px,8vw,104px) clamp(40px,6vw,72px);position:relative;overflow:hidden}
.phero h1{max-width:16ch}
.phero .lede{margin-top:22px;max-width:44ch}
.phero .mark-bg{position:absolute;right:max(-60px,calc((100vw - var(--wrap)) / 2 - 80px));bottom:8px;width:clamp(220px,30vw,420px);opacity:1;pointer-events:none}
.phero .mark-bg .ray{stroke-dasharray:1;stroke-dashoffset:1;animation:draw 400ms var(--ease-out) forwards}
.phero .mark-bg .ray.r1{animation-delay:300ms}.phero .mark-bg .ray.r2{animation-delay:420ms}.phero .mark-bg .ray.r3{animation-delay:540ms}
.phero .mark-bg .disc{animation:sunrise 900ms var(--ease-out) both}
@media (max-width:760px){.phero .mark-bg{opacity:.22;right:-60px;bottom:-30px}}

/* Two columns, lists */
.two{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,32px)}
@media (max-width:800px){.two{grid-template-columns:1fr}}
.box{border-radius:var(--radius);padding:clamp(24px,3vw,36px);border:3px solid var(--navy);background:var(--paper)}
.box.dark{background:var(--navy);color:var(--paper);border-color:var(--navy)}
.box.dark p{color:#E7E1D6}
.box h3{margin-bottom:16px;display:flex;align-items:center;gap:12px}
.ticklist{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.ticklist li{position:relative;padding-left:40px;max-width:62ch}
.ticklist li svg{position:absolute;left:0;top:2px;width:28px;height:28px}
.ticklist .chk{fill:none;stroke:var(--palm);stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0}
.dark .ticklist .chk{stroke:var(--sun)}
.js .reveal .ticklist .chk{stroke-dashoffset:1}
.js .reveal.is-in .ticklist .chk{transition:stroke-dashoffset 420ms var(--ease-out);transition-delay:calc(var(--i,0) * 110ms + 150ms);stroke-dashoffset:0}
.ticklist .x{stroke:var(--sun);stroke-width:4;stroke-linecap:round}
.status{list-style:none;padding:0;margin:26px 0 0;display:grid;gap:12px}
.status li{display:flex;gap:14px;align-items:baseline;font-size:1.0625rem}
.dot{flex:none;display:inline-flex;align-items:center;gap:8px;font:800 .82rem/1 var(--display);letter-spacing:.06em;text-transform:uppercase;padding:7px 10px 7px 8px;border-radius:999px;background:rgba(255,255,255,.1);border:1.5px solid currentColor;min-width:140px}
.dot::before{content:"";width:10px;height:10px;border-radius:50%;background:currentColor}
.dot.final{color:#7FD3A6}.dot.prog{color:var(--caution)}
.band .dot.final,.paper-bg .dot.final{color:var(--palm)}.band .dot.prog,.paper-bg .dot.prog{color:var(--amber)}
.langcols{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media (max-width:900px){.langcols{grid-template-columns:1fr}}
.langcol{border:3px solid var(--navy);border-radius:var(--radius);padding:28px;background:var(--paper)}
.langcol .big{font:900 clamp(2.4rem,2rem + 2vw,3.6rem)/.9 var(--display);font-stretch:76%;text-transform:uppercase;margin:16px 0 14px}
.langcol p{margin:0}
.steps3{counter-reset:s;list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media (max-width:900px){.steps3{grid-template-columns:1fr}}
.steps3 li{counter-increment:s;padding:26px;border-radius:var(--radius);background:var(--sand)}
.steps3 li::before{content:counter(s,decimal-leading-zero);display:block;font:800 2.6rem/1 var(--display);color:var(--sun-text);margin-bottom:14px;font-variant-numeric:tabular-nums}
.rows{list-style:none;padding:0;margin:0;border-top:3px solid var(--navy)}
.rows li{display:grid;grid-template-columns:120px 1fr;gap:clamp(16px,3vw,40px);padding:clamp(24px,3vw,36px) 0;border-bottom:1.5px solid rgba(27,42,65,.2)}
.rows .n{font:800 clamp(2.8rem,2rem + 3vw,4.6rem)/.85 var(--display);color:var(--sun-text);font-variant-numeric:tabular-nums}
.rows h3{font-size:clamp(1.35rem,1.1rem + 1vw,1.9rem);margin-bottom:10px}
.rows p{margin:0}
@media (max-width:600px){.rows li{grid-template-columns:1fr;gap:8px}}

/* Kit page */
.pieces{display:grid;gap:clamp(20px,3vw,28px)}
.piece{display:grid;grid-template-columns:minmax(220px,38%) 1fr;gap:clamp(20px,4vw,56px);align-items:center;padding:clamp(22px,3vw,36px);border-radius:24px;background:var(--paper);border:3px solid var(--navy)}
.piece .art{display:grid;place-items:center;padding:clamp(12px,2vw,28px);border-radius:16px;background:var(--sand-2);background-image:radial-gradient(rgba(27,42,65,.07) 1px,transparent 1.4px);background-size:18px 18px;min-height:240px}
.piece .art>*{width:min(100%,var(--aw,320px))}
.piece h3{font-size:clamp(1.5rem,1.2rem + 1vw,2.1rem)}
.piece .where{display:block;margin:10px 0 16px;font-weight:700;color:var(--sun-text)}
.piece .size{display:inline-block;margin-top:6px;font:800 .95rem/1 var(--display);font-variant-numeric:tabular-nums;background:var(--sand);padding:9px 12px;border-radius:8px}
@media (max-width:760px){.piece{grid-template-columns:1fr}}
.stickers{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(12px,2vw,24px);list-style:none;padding:0;margin:0}
@media (max-width:900px){.stickers{grid-template-columns:repeat(2,minmax(0,1fr))}}
.stickers li{display:grid;gap:12px;justify-items:center;text-align:center}
.stickers .where{font-weight:700;color:var(--sun-text);font-size:.98rem}
.stickers p{margin:0;font-size:1rem}
.peel{width:min(100%,190px);transition:transform var(--t-fast) var(--ease-out)}
.peel .sticker{transition:clip-path var(--t-fast) var(--ease-out);clip-path:circle(50% at 50% 50%)}
.peel{position:relative}
.peel::after{content:"";position:absolute;right:13%;bottom:13%;width:0;height:0;border-radius:0 0 0 100%;background:linear-gradient(135deg,#fff 0 45%,#d8cfbf 55%);box-shadow:-2px -2px 6px rgba(0,0,0,.15);transition:width var(--t-fast) var(--ease-out),height var(--t-fast) var(--ease-out)}
.stickers li:hover .peel,.peel:focus-visible{transform:rotate(4deg)}
.stickers li:hover .peel::after{width:12px;height:12px}
.trail{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;list-style:none;padding:0;margin:0}
@media (max-width:760px){.trail{grid-template-columns:1fr}}
.trail li{display:grid;grid-template-columns:96px 1fr;gap:20px;align-items:start;padding:24px;border-radius:var(--radius);background:var(--paper);border:3px solid var(--navy)}
.trail li .mini{width:96px}
.trail h3{font-size:1.3rem;margin-bottom:8px}
.trail p{margin:0;font-size:1.0625rem}
.trades{background:var(--sun);color:var(--navy)}
.trades .wrap{padding-block:30px;display:flex;flex-wrap:wrap;gap:16px 28px;align-items:center;justify-content:space-between}
.trades p{margin:0;font-weight:700;max-width:80ch}
.trades a{color:var(--navy)}

/* Table (acclimatization) */
.acc{width:100%;border-collapse:separate;border-spacing:0;border:3px solid var(--navy);border-radius:var(--radius);overflow:hidden;background:var(--paper)}
.acc th,.acc td{text-align:left;padding:18px 22px;vertical-align:top;border-bottom:1.5px solid rgba(27,42,65,.18)}
.acc tr:last-child th,.acc tr:last-child td{border-bottom:0}
.acc th{width:32%;font:800 1.1rem/1.25 var(--display);font-stretch:104%;background:var(--sand)}
.ramp{display:flex;gap:6px;margin-top:12px;align-items:flex-end;height:46px}
.ramp i{flex:1;border-radius:4px 4px 0 0;background:var(--sun);display:block;min-width:20px;position:relative}
.ramp i span{position:absolute;left:0;right:0;top:-1.3em;text-align:center;font:800 .8rem/1 var(--display);font-style:normal;color:var(--navy)}
@media (max-width:640px){.acc th,.acc td{display:block;width:100%}.acc th{border-bottom:0}}

/* FAQ accordion */
.faq{border-top:3px solid var(--navy)}
.faq details{border-bottom:1.5px solid rgba(27,42,65,.2);interpolate-size:allow-keywords}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:20px;align-items:center;padding:22px 0;min-height:64px;font:800 clamp(1.1rem,1rem + .5vw,1.4rem)/1.25 var(--display);font-stretch:104%}
.faq summary::-webkit-details-marker{display:none}
.faq summary .pm{flex:none;width:36px;height:36px;border-radius:50%;border:2.5px solid var(--navy);position:relative;transition:background var(--t-fast),transform var(--t-base) var(--ease-out)}
.faq summary .pm::before,.faq summary .pm::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:2.5px;margin:-1.25px 0 0 -7px;background:var(--navy);border-radius:2px;transition:transform var(--t-base) var(--ease-out)}
.faq summary .pm::after{transform:rotate(90deg)}
.faq details[open] summary .pm{background:var(--sun)}
.faq details[open] summary .pm::after{transform:rotate(0)}
.faq details::details-content{height:0;overflow:clip;transition:height var(--t-base) var(--ease-out),content-visibility var(--t-base) allow-discrete}
.faq details[open]::details-content{height:auto}
.faq .ans{padding:0 0 24px;max-width:74ch}
.faq .ans p{margin:0 0 .7em}
.checked{display:inline-block;font:700 .85rem/1 var(--display);letter-spacing:.04em;background:var(--sand);padding:8px 10px;border-radius:6px;color:var(--navy)}

/* About beats */
.beats{display:grid;gap:0;border-top:3px solid var(--navy)}
.beat{display:grid;grid-template-columns:minmax(200px,32%) 1fr;gap:clamp(16px,4vw,56px);padding:clamp(28px,4vw,48px) 0;border-bottom:1.5px solid rgba(27,42,65,.2)}
.beat h2{font-size:clamp(1.5rem,1.2rem + 1.2vw,2.2rem)}
.beat p{font-size:1.1875rem}
.beat .name3{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.beat .name3 span{font:900 clamp(1.6rem,1.3rem + 1.4vw,2.6rem)/1 var(--display);font-stretch:78%;text-transform:uppercase;padding:10px 14px;border-radius:10px;background:var(--sand)}
.beat .name3 span:nth-child(2){background:var(--warm)}
.beat .name3 span:nth-child(3){background:var(--navy);color:var(--paper)}
@media (max-width:760px){.beat{grid-template-columns:1fr}}

/* Forms */
.formgrid{display:grid;grid-template-columns:1.4fr 1fr;gap:clamp(24px,4vw,56px);align-items:start}
@media (max-width:900px){.formgrid{grid-template-columns:1fr}}
form.f{display:grid;gap:18px}
.f .row2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media (max-width:600px){.f .row2{grid-template-columns:1fr}}
.f label{display:grid;gap:8px;font:800 1rem/1.2 var(--display);font-stretch:104%}
.f label .opt{font:400 .9rem/1 var(--text);color:var(--slate)}
.on-navy .f label .opt{color:#D9D2C4}
.f input,.f select,.f textarea{font:400 1.125rem/1.4 var(--text);color:var(--navy);background:#fff;border:2.5px solid var(--navy);border-radius:12px;padding:14px 16px;min-height:56px;width:100%;transition:box-shadow var(--t-fast),border-color var(--t-fast)}
.f textarea{min-height:160px;resize:vertical}
.f input:focus,.f select:focus,.f textarea:focus{outline:none;box-shadow:0 0 0 4px var(--sun);border-color:var(--navy)}
.f [data-status]{margin:0;font-weight:700;min-height:1.6em}
.f .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.f button{justify-self:start}
.f button .spin{display:none;width:22px;height:22px}
.f button[disabled] .spin{display:block;animation:spin 1800ms steps(3) infinite}
.f button[disabled]{opacity:.85;cursor:progress}
@keyframes spin{to{transform:rotate(360deg)}}
.f .crew[hidden]{display:none}
.side{border-radius:var(--radius);background:var(--sand);padding:28px}
.side h2{font-size:1.4rem;margin-bottom:10px}
.side p{margin:0 0 18px}
.notice{border:3px solid var(--red);border-radius:var(--radius);padding:22px 26px;margin-bottom:36px;background:#fff}
.notice p{margin:0;font-weight:700;color:var(--navy)}
.notice strong{color:var(--red)}
.signup{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(28px,5vw,72px);align-items:start}
@media (max-width:900px){.signup{grid-template-columns:1fr}}
.on-navy .f input,.on-navy .f select{border-color:var(--paper)}
.on-navy .f [data-status]{color:var(--sun)}

/* Footer */
.site-footer{background:var(--navy);color:var(--paper)}
.ft-911{background:var(--red);color:#fff}
.ft-911 .wrap{display:flex;align-items:center;gap:14px;padding-block:16px;font:800 1.25rem/1.2 var(--display);font-stretch:106%}
.ft-911 a{color:#fff}
.ft-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;padding-block:56px 36px}
@media (max-width:800px){.ft-grid{grid-template-columns:1fr}}
.ft-grid h2{font:800 .9rem/1 var(--display);letter-spacing:.1em;text-transform:uppercase;color:var(--sun);margin-bottom:16px}
.ft-grid ul{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.ft-grid a{color:var(--paper);text-decoration:none;display:inline-flex;min-height:40px;align-items:center}
.ft-grid a:hover{color:var(--sun);text-decoration:underline}
.ft-grid p{color:#E7E1D6;margin-top:16px;max-width:36ch}
.ft-fine{border-top:1px solid rgba(255,255,255,.14);padding-block:24px 36px;font-size:.92rem;color:#D9D2C4;display:flex;gap:20px;justify-content:space-between;align-items:flex-end;flex-wrap:wrap}
.ft-fine p{margin:0;max-width:90ch;color:#D9D2C4}
.motion-toggle{background:transparent;border:2px solid rgba(255,255,255,.4);color:var(--paper);border-radius:999px;padding:10px 16px;min-height:44px;font:700 .92rem/1 var(--display);cursor:pointer}
.motion-toggle:hover{border-color:var(--sun)}
.closing{text-align:left}
.closing .wrap{display:grid;grid-template-columns:1.3fr 1fr;gap:32px;align-items:end}
@media (max-width:800px){.closing .wrap{grid-template-columns:1fr}}
.center{text-align:center}
.mt{margin-top:28px}
.lost{min-height:60vh;display:grid;align-items:center}

/* Page transitions */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:200ms}

/* Reduced motion: OS setting or footer toggle (html.rm) */
html.rm *,html.rm *::before,html.rm *::after{animation:none!important;transition-duration:0ms!important;transition-delay:0ms!important;scroll-behavior:auto!important}
html.rm .rv,html.rm .reveal .sign,html.rm .reveal .ico *{opacity:1!important;transform:none!important}
html.rm .hero-art .ray,html.rm .hero-art .shade,html.rm .hero-art .shade2,html.rm .phero .mark-bg .ray,html.rm .ticklist .chk{stroke-dashoffset:0!important}
html.rm .hero,html.rm .sun-scroll{animation:none!important}
html.rm::view-transition-old(root),html.rm::view-transition-new(root){animation:none!important}
@media (prefers-reduced-motion:reduce){
  html:not(.motion-on) *,html:not(.motion-on) *::before,html:not(.motion-on) *::after{animation-duration:0ms!important;animation-delay:0ms!important;transition-duration:0ms!important;transition-delay:0ms!important}
  ::view-transition-old(root),::view-transition-new(root){animation:none!important}
}

/* Hero layout: text above the horizon, chips and status below it */
.hero{display:block}
.hero .wrap{padding-bottom:0}
.hero-top{padding-bottom:calc(min(200px,13.9vw) + 48px);max-width:min(780px,56vw)}
.hero h1{font-size:clamp(2.5rem,1.2rem + 4.4vw,4.6rem);max-width:none}
.hero-bottom{position:absolute;left:var(--pad);right:40%;bottom:0;height:min(200px,13.9vw);display:flex;flex-direction:column;justify-content:center;gap:4px}
@media (min-width:1300px){.hero-bottom{left:calc((100vw - var(--wrap)) / 2 + var(--pad))}}
.hero-bottom .chips{margin-top:0}
.hero-bottom .status{margin-top:10px;margin-bottom:0}
.hero-art.desk{inset:auto 0 0 auto;width:100%;height:min(560px,38.9vw)}
@media (max-width:760px){
  .hero-top{padding-bottom:0;max-width:none}
  .hero-bottom{position:static;height:auto;padding:20px 0 36px}
  .hero-art.mob{width:100%;height:auto;aspect-ratio:1;max-height:56vh;margin-inline:auto}
}
.unbox.is-live .unbox-alt{display:none}
@media (max-width:860px){
  .unbox .stage{grid-template-columns:1fr;gap:12px;align-content:center}
  .unbox.is-live .stage{padding-top:76px}
  .unbox.is-live{height:260vh}
  .unbox.is-live.short{height:200vh}
  .caps-stack{min-height:5.2em;margin-top:12px}
  .caps-stack p{font-size:1.15rem}
  .unbox-cta{margin-top:12px}
  .unbox-cta .btn{min-height:48px;padding:10px 18px}
  .table{width:min(100%,calc((100svh - 330px) * 4 / 3))}
}

/* fixes after first local review */
.wcard,.poster1,.poster2,.sheet,.logsheet{container-type:inline-size}
.nav>a,.head-cta,.lang a,.lang span{white-space:nowrap}
.site-header .wrap{max-width:1360px;gap:16px}
.nav>a{padding:12px 9px}
.unbox .stage.wrap{max-width:1440px}
.unbox .stage{grid-template-columns:minmax(260px,30%) 1fr}
.folder .lid{opacity:calc(1 - var(--lid))}
.folder .pocket{position:absolute;left:0;right:0;bottom:0;height:58%;border-radius:0 0 4cqw 4cqw;background:var(--navy);box-shadow:0 -1cqw 0 var(--navy-2) inset,0 -.8cqw 2cqw rgba(0,0,0,.25);display:flex;align-items:center;justify-content:center;gap:3cqw;color:var(--paper)}
.folder .pocket svg{width:9cqw;height:auto}
.folder .pocket b{font:800 6cqw/1 var(--display);font-stretch:112%}
.folder .pocket b span{color:var(--sun)}
.folder .pocket i{display:block;font:700 2.6cqw/1 var(--display);font-style:normal;letter-spacing:.28em;color:#E7E1D6;margin-top:1.4cqw}

@media (max-width:860px){
  .unbox .stage{grid-template-columns:1fr}
  .unbox .table{width:min(100%,calc((100svh - 330px) * 4 / 3))}
}
.menu-btn{white-space:nowrap}

/* standalone pieces get their own size container */
.cq,.mini,.peel{container-type:inline-size}
.piece .art>.cq{width:min(100%,var(--aw,320px))}
.on-navy .btn{color:var(--navy)}
.on-navy .btn.ghost{color:var(--paper)}
.alert .btn{color:var(--red)}

@media (max-width:560px){.ticks span:nth-child(4){display:none}.hero-art.mob{margin-top:-8px}}

/* Hero kit: the drawn kit standing on the horizon, the sun rising behind it */
.hero-kit{position:absolute;z-index:2;right:max(var(--pad),calc((100vw - var(--wrap)) / 2 + var(--pad) - 20px));bottom:calc(min(200px,13.9vw) - 4px);width:min(460px,31vw);aspect-ratio:1.45;container-type:inline-size;pointer-events:none}
.hk-p{position:absolute;bottom:0;animation:hkin 900ms var(--ease-out) both;animation-delay:var(--d,0ms)}
.hk-p>.cq{width:100%}
@keyframes hkin{from{opacity:0;transform:translateY(40px) rotate(var(--r0,0deg))}to{opacity:1;transform:rotate(var(--r,0deg))}}
.hk-p{transform:rotate(var(--r,0deg))}
.hk-poster{left:1cqw;width:33cqw;--r:-5deg;--r0:-12deg;--d:700ms}
.hk-folder{left:22cqw;width:44cqw;align-content:start;padding-top:7cqw;aspect-ratio:4/3;--r:1.5deg;--d:850ms;border-radius:3cqw;background:var(--navy);box-shadow:0 2cqw 4cqw rgba(27,42,65,.28),inset 0 0 0 1.2cqw var(--navy-2);display:grid;place-items:center;align-content:center;gap:2.4cqw;color:var(--paper);text-align:center}
.hk-folder svg{width:11cqw;height:auto}
.hk-folder b{font:800 5.4cqw/1 var(--display);font-stretch:112%}
.hk-folder b span{color:var(--sun)}
.hk-folder i{font:700 2.1cqw/1 var(--display);font-style:normal;letter-spacing:.3em;color:#E7E1D6}
.hk-card{left:60cqw;bottom:2cqw;width:39cqw;--r:7deg;--r0:16deg;--d:1000ms;z-index:2}
.hk-sticker{left:79cqw;bottom:36cqw;width:21cqw;--r:12deg;--r0:30deg;--d:1150ms;z-index:3}
@media (max-width:760px){
  .hero-kit{position:relative;right:auto;bottom:auto;width:min(100%,380px);margin:36px auto 0;overflow:visible}
  .hero-kit::before{content:"";position:absolute;left:22cqw;bottom:0;width:56cqw;height:28cqw;border-radius:28cqw 28cqw 0 0;background:var(--sun);opacity:.95}
  .hero-kit::after{content:"";position:absolute;left:-40px;right:-40px;bottom:-3px;height:6px;border-radius:6px;background:var(--sun)}
  .hero-art.mob{display:none!important}
  .hero-bottom{padding-top:28px}
}

.hero>.wrap{position:static}
.hero-top{position:relative;z-index:3}

@media (max-width:760px){.hero-kit{margin-top:72px}.hero-kit::before{left:8cqw;width:84cqw;height:42cqw;border-radius:42cqw 42cqw 0 0;bottom:0;box-shadow:0 0 0 14cqw rgba(242,140,40,.12)}}