/* V3XEL: what the protocol adds to the base. Same navy, same white button, same hairline. */

:root{
  --navy:#01061a;
  --dash:#58c4ff;
  --dash-near:#d6f4ff;
  --dash-far:#1a7ae0;
  --out:cubic-bezier(.16,1,.3,1);
}

/* The page scrolls now: the hero is its first screen. */
html,body{height:auto;overflow:visible}
html{scroll-behavior:smooth}
[hidden]{display:none !important}
a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid #7fd4ff;outline-offset:4px}

/* ---------- masthead: three pages and X under the hairline ---------- */
.hairline,.nav{width:max(calc(330 * var(--u)), 300px)}
.nav{align-items:center}
.nav a[aria-current]{color:#fff}
.nav-x svg{display:block;width:max(calc(13.5 * var(--u)), 12.5px);height:auto;fill:currentColor}

/* ---------- hero: the name, then the sentence, on one width ---------- */
.hero{--block:min(calc(500 * var(--u)), calc(100vw - 48px))}
.hero .copy h1{font-size:calc(var(--block) / 13.32);line-height:1;letter-spacing:-.0279em}
.hero .copy h1 .mark svg{display:block;width:var(--block);height:auto;margin:0 auto;fill:#fff}
.hero .copy h1 .l + .l{left:0;margin-top:calc(23 * var(--u));letter-spacing:-.0279em}
.hero .sub{max-width:min(calc(560 * var(--u)), calc(100vw - 48px));line-height:1.25;text-wrap:balance}
.intro .copy h1 .l.mark{-webkit-clip-path:inset(0);clip-path:inset(0)}
.hero .field::after{content:"";position:absolute;left:50%;width:100vw;transform:translateX(-50%);bottom:0;height:16%;background:linear-gradient(to bottom, rgba(1,6,26,0), var(--navy));pointer-events:none}

/* ---------- shared by the sections under the hero ---------- */
.below h2,.closing h2{margin:0;font-weight:400;font-size:clamp(34px,5.2vw,62px);line-height:1.02;letter-spacing:-.028em;text-wrap:balance}
[data-reveal]{opacity:0;transform:translateY(16px);transition:opacity .8s var(--out),transform .8s var(--out);transition-delay:var(--stagger,0ms)}
[data-reveal].is-in{opacity:1;transform:none}

/* ---------- below the price: the cut ---------- */
.below{position:relative;display:flex;flex-direction:column;align-items:center;padding:clamp(76px,11vw,150px) 24px clamp(56px,8vw,110px);text-align:center;background:var(--navy)}
.below-copy p{margin:22px auto 0;max-width:34em;font-size:clamp(17px,1.5vw,20px);line-height:1.5;color:var(--subhead)}
.cut{position:relative;width:min(1120px,100%);height:clamp(400px,50vw,560px);margin-top:clamp(36px,5vw,60px)}
.cut::before{content:"";position:absolute;left:-4%;right:-4%;bottom:-6%;height:74%;background:radial-gradient(58% 100% at 50% 100%, rgba(16,112,208,.34), rgba(16,112,208,0) 72%);pointer-events:none}
.cut canvas{position:absolute;inset:0;display:block;width:100%;height:100%}
.cut-glow{filter:blur(8px) brightness(1.9) saturate(1.5)}
.cut-notes{list-style:none;margin:clamp(28px,4vw,44px) auto 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,3vw,44px);width:min(1000px,100%);text-align:left}
.cut-notes li{padding-top:15px;border-top:1px solid var(--hairline);font-size:16px;line-height:1.45;color:var(--subhead)}

/* ---------- closing, over the dome again ---------- */
.closing{position:relative;isolation:isolate;display:flex;flex-direction:column;align-items:center;overflow:hidden;background:var(--navy)}
.closing-copy{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;padding:clamp(64px,9vw,130px) 24px 0;text-align:center}
.plain{list-style:none;margin:clamp(30px,4vw,52px) 0 0;padding:0;width:min(660px,100%);text-align:left;border-top:1px solid var(--hairline)}
.plain li{padding:15px 2px 14px;border-bottom:1px solid var(--hairline);font-size:clamp(17px,1.45vw,19px);line-height:1.4;color:rgba(238,242,255,.9)}
.closing .button{margin-top:clamp(30px,4vw,48px)}
.closing .discover svg{width:.85em;height:.68em}
.closing .discover:hover svg{transform:translateX(.12em)}
.field--end{flex:none;width:100%;height:clamp(240px,34vw,420px);margin-top:clamp(20px,3vw,40px);min-height:0}
.field--end video{top:0;transform:translate(-50%,-46%);height:max(62vw, 760px)}
.field--end::after{content:"";position:absolute;left:0;right:0;bottom:0;height:46%;background:linear-gradient(to bottom, rgba(1,6,26,0), var(--navy));pointer-events:none}

/* ---------- footer: the masthead again, at rest ---------- */
.foot{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;margin-top:-64px;padding:0 24px calc(env(safe-area-inset-bottom,0px) + 44px);background:linear-gradient(to bottom, rgba(1,6,26,0), var(--navy) 64px)}
.foot .wordmark svg{height:max(calc(20 * var(--u)), 16px)}
.foot .hairline{margin-top:20px}
.foot .nav{margin-top:15px}
.foot-note{margin:26px 0 0;max-width:34em;text-align:center;font-size:14px;line-height:1.5;color:rgba(226,233,255,.62)}

@media (max-width:759.98px){
  .cut-notes{grid-template-columns:minmax(0,1fr);gap:0}
  .cut-notes li{padding:14px 0}
  .cut-notes li:last-child{border-bottom:1px solid var(--hairline)}
  .cut{height:clamp(360px,96vw,460px)}
}
@media (max-width:599.98px) and (orientation:portrait){
  .hairline,.nav{width:min(max(calc(330 * var(--u)), 300px), calc(100vw - 40px))}
  .hero .sub{font-size:16px}
}
@media (orientation:landscape) and (max-height:539.98px){
  .hairline,.nav{width:max(calc(330 * var(--u)), 250px)}
  .hero{--block:min(calc(440 * var(--u)), calc(100vw - 48px))}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  [data-reveal]{opacity:1;transform:none;transition:none}
}