/* Mixed surfaces for every marketing page but the landing (S100c, S100d).
   Shares the landing's system (docs/127, D-0269/D-0270); loads after kelabu.css. */

@property --bloom{ syntax:'<color>'; inherits:true; initial-value:transparent; }

:root{
  --ground:#E4E5EA;
  --paper:#FBFBFC;
  --dawn:#F3EFF1;
  --graphite:#17161C;
  --graphite-2:#4A4A55;
  --graphite-link:#2A2930;
  --dusk-a:#4E2A7A;
  --dusk-b:#1E3FA8;
  --dusk-glow:rgba(224,69,58,.22);
  --mist:#F7F5FA;
  --mist-2:#CFC9E0;
  --coral:#E0453A;
  --plum:#8E52B8;
  --azure:#3B7BFF;
  --paper-lilac:#F6F2FA;
  --paper-azure:#F3F6FD;
  --paper-coral:#FDF3F0;
  --volt-deep:#4A4ADB;
  --volt-lift:#5E5EF1;
  --inset:10px;
  --radius:20px;
  --pad:clamp(24px,5vw,80px);
  --window-shadow:0 30px 80px -40px rgba(40,30,60,.35);
  color-scheme:light;
}
@media (min-width:480px){ :root{ --inset:16px; } }
@media (min-width:768px){ :root{ --radius:28px; } }
@media (min-width:1024px){ :root{ --inset:24px; } }

html{ background:var(--ground); transition:--bloom 1200ms var(--ease); }
html[data-phase="dawn"]{ --bloom:rgba(224,69,58,.16); }
html[data-phase="day"]{ --bloom:rgba(142,82,184,.14); }
html[data-phase="dusk"]{ --bloom:rgba(59,123,255,.16); }
html[data-phase="night"]{ --bloom:transparent; }

body.mixed{ background:transparent; color:var(--graphite); }
body.mixed::before{
  content:''; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(60vmax 45vmax at 50% 105%, var(--bloom), transparent 70%);
}

/* ---------- windows on the ground ---------- */

#main{ display:flex; flex-direction:column; gap:var(--inset); padding:var(--inset); }

.win{
  position:relative;
  width:100%; max-width:1440px; margin-inline:auto;
  border-radius:var(--radius);
  box-shadow:var(--window-shadow);
}
.win--paper{ background:var(--paper); }
.win--lilac{ background:var(--paper-lilac); }
.win--azure{ background:var(--paper-azure); }
.win--coral{ background:var(--paper-coral); }
.win--tint{ background:linear-gradient(135deg, var(--paper-azure), var(--paper-coral)); }
.win--dusk{
  color:var(--mist); color-scheme:dark; overflow:clip;
  background:
    radial-gradient(60% 50% at 12% 8%, var(--dusk-glow), transparent 70%),
    linear-gradient(160deg, var(--dusk-a), var(--dusk-b));
}
.win--dusk .clip__frame{ box-shadow:inset 0 0 0 1px rgba(247,245,250,.10); background:rgba(247,245,250,.08); }
.win--dusk .clip__cap,.mixed .win--dusk .lede{ color:var(--mist-2); }

/* ---------- type ---------- */

.mixed .d1{ font-size:clamp(40px,5.6vw,84px); letter-spacing:.025em; line-height:.94; }
.mixed .d2{ font-size:clamp(30px,3.4vw,50px); letter-spacing:.01em; line-height:1.1; }
.mixed .lede{ color:var(--graphite-2); max-width:44ch; }
.row__title{
  font-family:var(--font-display); font-weight:400;
  font-size:clamp(22px,2vw,28px); letter-spacing:0; line-height:1.2;
}
.row__line{ font-weight:300; font-size:17px; line-height:1.55; max-width:44ch; color:var(--graphite-2); }
.win--dusk .row__title{ color:var(--mist); }
.win--dusk .row__line{ color:var(--mist-2); }
@media (max-width:479px){ .mixed .lede,.row__line{ font-size:16px; } }

/* ---------- signature buttons ---------- */

.mixed .btn{
  position:relative; isolation:isolate; overflow:hidden;
  background:linear-gradient(155deg, var(--volt-lift), var(--volt) 45%, var(--volt-deep));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 0 0 1px rgba(74,74,219,.4), 0 10px 26px -12px rgba(91,91,240,.75);
  transition:box-shadow 220ms var(--ease), transform 160ms var(--ease), background 220ms var(--ease);
}
.mixed .btn::after{
  content:''; position:absolute; top:-40%; bottom:-40%; left:0; width:46%; z-index:-1;
  background:linear-gradient(100deg, transparent 0%, rgba(224,69,58,.16) 32%, rgba(142,82,184,.34) 50%, rgba(59,123,255,.16) 68%, transparent 100%);
  transform:translateX(-240%) skewX(-18deg);
}
.mixed .btn:hover{
  background:linear-gradient(155deg, var(--volt), var(--volt-deep) 55%, var(--volt-deep));
  transform:translateY(-1px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28), 0 0 0 1.5px rgba(255,255,255,.6), 0 0 0 5px rgba(91,91,240,.22), 0 14px 34px -12px rgba(91,91,240,.95);
}
.mixed .btn:active{ transform:translateY(0) scale(.97); box-shadow:inset 0 1px 0 rgba(255,255,255,.1), 0 0 0 1px rgba(74,74,219,.5), 0 4px 12px -6px rgba(91,91,240,.6); }
@keyframes cta-sheen{ 0%{ transform:translateX(-240%) skewX(-18deg); } 28%,100%{ transform:translateX(340%) skewX(-18deg); } }
@media (prefers-reduced-motion:no-preference){
  .mixed .btn::after{ animation:cta-sheen 5.2s var(--ease) 1.4s infinite; }
  .mixed .btn:hover::after,.mixed .btn:focus-visible::after{ animation-duration:1.5s; animation-delay:0s; }
  @media (hover:none){ .mixed .btn::after{ animation-duration:6.5s; } }
}

.mixed .btn--paper,.mixed .btn--ghost{
  border:1px solid transparent; padding:12px 15px;
  background:
    linear-gradient(rgba(251,251,252,.72), rgba(251,251,252,.72)) padding-box,
    linear-gradient(90deg, rgba(23,22,28,.28), rgba(23,22,28,.28)) border-box;
  color:var(--graphite); box-shadow:none;
  transition:background 220ms var(--ease), box-shadow 220ms var(--ease), transform 160ms var(--ease);
}
.mixed .btn--paper::after,.mixed .btn--ghost::after{ content:none; }
.mixed .btn--paper:hover{
  background:
    linear-gradient(var(--paper), var(--paper)) padding-box,
    linear-gradient(90deg, var(--coral), var(--plum), var(--azure)) border-box;
  transform:translateY(-1px);
  box-shadow:0 10px 26px -14px rgba(40,30,60,.5);
}
.mixed .btn--ghost{
  background:
    linear-gradient(rgba(12,10,10,.55), rgba(12,10,10,.55)) padding-box,
    linear-gradient(90deg, rgba(242,239,233,.28), rgba(242,239,233,.28)) border-box;
  color:var(--bone);
}
.mixed .btn--ghost:hover{
  background:
    linear-gradient(rgba(36,33,32,.9), rgba(36,33,32,.9)) padding-box,
    linear-gradient(90deg, var(--coral), var(--plum), var(--azure)) border-box;
  transform:translateY(-1px);
}
.mixed .btn--paper:active,.mixed .btn--ghost:active{ transform:translateY(0) scale(.97); box-shadow:none; }

.mixed .btn:focus-visible,.nav:not([data-tone="dark"]) .btn:focus-visible{ outline-color:var(--volt); }
.win--dusk :focus-visible,.band :focus-visible,.foot :focus-visible,.sheet :focus-visible,
.nav[data-tone="dark"] :focus-visible{ outline-color:var(--bone); }
.mixed .win--dusk .btn:focus-visible,.mixed .band .btn:focus-visible,.mixed .nav[data-tone="dark"] .btn:focus-visible{ outline-color:var(--bone); }

/* ---------- nav links: a neon line sweeps while hovered or focused ---------- */

.nav__links a{ position:relative; padding-block:3px; }
.nav__links a::after{
  content:''; position:absolute; left:0; right:0; bottom:-2px; height:2px; border-radius:1px;
  background:linear-gradient(90deg, transparent, var(--coral) 25%, var(--plum) 50%, var(--azure) 75%, transparent) 50% 0 / 70% 100% no-repeat;
  filter:drop-shadow(0 0 4px rgba(142,82,184,.7));
  opacity:0; transition:opacity 160ms var(--ease);
}
.nav__links a:hover::after,.nav__links a:focus-visible::after{ opacity:1; }
@keyframes nav-sweep{ from{ background-position:-250% 0; } to{ background-position:350% 0; } }
@media (prefers-reduced-motion:no-preference){
  .nav__links a:hover::after,.nav__links a:focus-visible::after{ animation:nav-sweep 1.3s linear infinite; }
}
@media (prefers-reduced-motion:reduce){
  .nav__links a::after{ background:linear-gradient(90deg, var(--coral), var(--plum), var(--azure)); filter:none; }
}

/* ---------- the field window (one per page at most) ---------- */

.field{
  overflow:hidden;
  background:
    radial-gradient(55% 65% at 10% 90%, rgba(224,69,58,.55), transparent 70%),
    radial-gradient(50% 55% at 50% 72%, rgba(142,82,184,.42), transparent 70%),
    radial-gradient(55% 65% at 90% 10%, rgba(59,123,255,.50), transparent 70%),
    radial-gradient(38% 30% at 50% 48%, rgba(243,239,241,.85), transparent 100%),
    var(--dawn);
}
#field{
  position:absolute; inset:0; width:100%; height:100%;
  opacity:0; transition:opacity 900ms var(--ease);
}
html[data-field-live] #field{ opacity:1; }

.hero{
  display:grid; gap:28px; align-items:center; align-content:center;
  min-height:clamp(520px, calc(100svh - var(--nav-h) - 2 * var(--inset)), 860px);
  padding:var(--pad);
}
.hero > *{ position:relative; z-index:1; }
.hero__copy{ display:flex; flex-direction:column; gap:22px; }
.hero__copy .lede{ text-wrap:balance; }
@media (min-width:1024px){
  .hero{ grid-template-columns:5fr 7fr; gap:clamp(32px,4vw,72px); }
}
@keyframes hero-in{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:no-preference){
  .hero .d1,.hero .lede,.hero .actions,.hero .clip{ animation:hero-in 900ms var(--ease) both; }
  .hero .d1{ animation-delay:200ms; }
  .hero .lede{ animation-delay:380ms; }
  .hero .actions{ animation-delay:540ms; }
  .hero .clip{ animation-delay:700ms; }
}

/* ---------- the ground title (no window) ---------- */

.title{
  width:100%; max-width:1440px; margin-inline:auto;
  padding:clamp(36px,7vw,96px) var(--pad) clamp(8px,2vw,24px);
  display:flex; flex-direction:column; gap:20px; align-items:center; text-align:center;
}
.title .d1{ max-width:16ch; }
.title .lede{ text-wrap:balance; }
.title .actions{ justify-content:center; }
.title__marks{ display:flex; gap:10px; }
.title__marks span{ width:34px; height:3px; border-radius:2px; }
.title__marks span:nth-child(1){ background:var(--coral); }
.title__marks span:nth-child(2){ background:var(--plum); }
.title__marks span:nth-child(3){ background:var(--azure); }
@media (prefers-reduced-motion:no-preference){
  .title > *{ animation:hero-in 900ms var(--ease) both; }
  .title > :nth-child(2){ animation-delay:160ms; }
  .title > :nth-child(3){ animation-delay:320ms; }
  .title > :nth-child(4){ animation-delay:480ms; }
}

/* ---------- panels: copy beside a clip ---------- */

.day{ display:grid; gap:28px; padding:var(--pad); }
.day__text{ display:flex; flex-direction:column; gap:16px; align-items:flex-start; }
.day__text .actions{ margin-top:6px; }
.tick{ display:block; width:28px; height:3px; border-radius:2px; background:var(--rim, var(--graphite-2)); }
.day[data-rim="coral"]{ --rim:var(--coral); }
.day[data-rim="plum"]{ --rim:var(--plum); }
.day[data-rim="azure"]{ --rim:var(--azure); }
@media (min-width:1024px){
  .day{ grid-template-columns:5fr 7fr; gap:clamp(32px,4vw,72px); align-items:center; }
  .day--flip{ grid-template-columns:7fr 5fr; }
  .day--flip > :not(.day__text){ order:-1; }
}

/* ---------- clips ---------- */

.clip{ --rim:var(--graphite-2); margin:0; min-width:0; }
.clip[data-rim="coral"]{ --rim:var(--coral); }
.clip[data-rim="plum"]{ --rim:var(--plum); }
.clip[data-rim="azure"]{ --rim:var(--azure); }
.clip__frame{
  position:relative; overflow:hidden;
  aspect-ratio:16/10; border-radius:12px;
  border-top:3px solid var(--rim);
  box-shadow:inset 0 0 0 1px rgba(23,22,28,.10);
  background:rgba(23,22,28,.06);
}
@media (min-width:768px){ .clip__frame{ border-radius:16px; } }
.hero .clip__frame{ box-shadow:inset 0 0 0 1px rgba(23,22,28,.10), 0 30px 70px -30px rgba(40,30,60,.55); }
.clip__poster,.clip__video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.clip__video{ opacity:0; transition:opacity 400ms var(--ease); }
.clip__video[data-playing]{ opacity:1; }
.clip__cap{
  margin-top:10px;
  font-family:var(--font-text); font-weight:400;
  font-size:13px; letter-spacing:.01em; line-height:1.4;
  color:var(--graphite-2);
}

/* ---------- a trio of clips ---------- */

.trio{ display:grid; gap:28px; padding:var(--pad); }
.trio__head{ display:flex; flex-direction:column; gap:14px; margin-bottom:8px; }
.trio__item{ display:flex; flex-direction:column; gap:12px; }
.trio__item .clip{ display:contents; }
.trio__item .clip__cap{ order:3; margin-top:0; }
.trio__item .row__title{ margin-top:6px; }
.trio__item .row__line{ font-size:15px; }
@media (min-width:1024px){
  .trio{ grid-template-columns:repeat(3,1fr); gap:clamp(24px,3vw,44px); }
  .trio__head{ grid-column:1 / -1; }
}

/* ---------- link tiles ---------- */

.tiles{ display:grid; gap:14px; padding:var(--pad); }
.tiles__head{ display:flex; flex-direction:column; gap:14px; margin-bottom:14px; }
.tile{
  display:flex; flex-direction:column; gap:12px; min-width:0;
  padding:24px; border-radius:16px;
  background:rgba(251,251,252,.72);
  box-shadow:inset 0 0 0 1px rgba(23,22,28,.08);
  transition:box-shadow 220ms var(--ease), transform 160ms var(--ease), background 220ms var(--ease);
}
.tile:hover{
  background:var(--paper); transform:translateY(-2px);
  box-shadow:inset 0 0 0 1px rgba(23,22,28,.12), 0 20px 40px -24px rgba(40,30,60,.5);
}
.tile .tick{ transition:width 240ms var(--ease); }
.tile:hover .tick{ width:48px; }
.tile .row__line{ flex:1 1 auto; font-size:15px; }
.tile__go{ font-size:14px; font-weight:400; color:var(--graphite); }
@media (min-width:768px){
  .tiles{ grid-template-columns:repeat(3,1fr); gap:clamp(14px,2vw,24px); }
  .tiles__head{ grid-column:1 / -1; }
}

/* ---------- the areas list (dusk) ---------- */

.areas{ display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
.areas li{
  padding:9px 14px; border-radius:999px;
  font-size:15px; font-weight:300; color:var(--mist);
  box-shadow:inset 0 0 0 1px rgba(247,245,250,.22);
  background:rgba(247,245,250,.06);
}

/* ---------- still tiles (facts, not links) ---------- */

.tile--still:hover{
  background:rgba(251,251,252,.72); transform:none;
  box-shadow:inset 0 0 0 1px rgba(23,22,28,.08);
}
.tile--still:hover .tick{ width:28px; }
.tiles__head .lede{ margin-top:2px; }

/* ---------- lists ---------- */

.list{ display:flex; flex-direction:column; gap:10px; margin-top:4px; }
.list li{
  position:relative; padding-left:24px;
  font-weight:300; font-size:17px; line-height:1.55; color:var(--graphite-2);
}
.list li::before{
  content:''; position:absolute; left:0; top:.78em;
  width:12px; height:2px; border-radius:1px; background:var(--rim, var(--plum));
}
.list--big li{
  padding-left:30px;
  font-family:var(--font-display); font-weight:400;
  font-size:clamp(22px,2.2vw,30px); line-height:1.25; color:inherit;
}
.list--big li::before{ top:.62em; width:16px; }
.win--dusk .list li{ color:var(--mist-2); }
.win--dusk .list--big li{ color:var(--mist); }
.win--dusk .list li::before{ background:linear-gradient(90deg, var(--coral), var(--azure)); }
@media (max-width:479px){ .list li{ font-size:16px; } }

.stamp{ font-size:14px; font-weight:400; letter-spacing:.01em; color:var(--graphite-2); }

/* ---------- prose windows (privacy, terms) ---------- */

.prose{ display:flex; flex-direction:column; padding:var(--pad); }
.prose__sec{ display:grid; gap:16px; padding-block:clamp(22px,3vw,36px); }
.prose__sec + .prose__sec{ border-top:1px solid rgba(23,22,28,.1); }
.prose__sec:first-child{ padding-top:0; }
.prose__sec:last-child{ padding-bottom:0; }
.prose__body{ display:flex; flex-direction:column; gap:16px; align-items:flex-start; }
.prose__note{ font-weight:300; font-size:15px; line-height:1.6; max-width:60ch; color:var(--graphite-2); }
.prose__note a,.close__note a{ color:var(--graphite); text-decoration:underline; text-underline-offset:3px; }
@media (min-width:1024px){
  .prose__sec{ grid-template-columns:5fr 7fr; gap:clamp(32px,4vw,72px); }
}

/* ---------- done and gone ---------- */

.done{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:22px; text-align:center;
  min-height:clamp(440px, calc(100svh - var(--nav-h) - 2 * var(--inset)), 760px);
  padding:var(--pad);
}
.done > *{ position:relative; z-index:1; }
.done .d1{ max-width:14ch; }
.done .lede{ text-wrap:balance; }
.done .actions{ justify-content:center; }
.done__mark{ color:var(--graphite); }
.done__rule{ display:flex; gap:10px; }
.done__rule span{ width:34px; height:3px; border-radius:2px; }
.done__rule span:nth-child(1){ background:var(--coral); }
.done__rule span:nth-child(2){ background:var(--plum); }
.done__rule span:nth-child(3){ background:var(--azure); }
@media (prefers-reduced-motion:no-preference){
  .done > *{ animation:hero-in 900ms var(--ease) both; }
  .done > :nth-child(2){ animation-delay:160ms; }
  .done > :nth-child(3){ animation-delay:300ms; }
  .done > :nth-child(4){ animation-delay:440ms; }
  .done > :nth-child(5){ animation-delay:580ms; }
}

/* ---------- volt band ---------- */

.band{
  position:relative; isolation:isolate; overflow:hidden;
  margin:0 calc(-1 * var(--inset));
  padding:clamp(44px,7vw,100px) var(--gutter);
  color:#fff; color-scheme:dark;
  background:linear-gradient(120deg, var(--volt-deep), var(--volt) 55%, var(--volt-lift));
}
.band::before,.band::after{
  content:''; position:absolute; z-index:-1; border-radius:50%; pointer-events:none;
  filter:blur(60px);
}
.band::before{ width:min(48vw,620px); height:min(48vw,620px); left:-8%; top:-50%; background:rgba(224,69,58,.42); }
.band::after{ width:min(40vw,520px); height:min(40vw,520px); right:-6%; bottom:-55%; background:rgba(142,82,184,.6); }
@keyframes band-a{ to{ transform:translate3d(18vw,10vh,0) scale(1.15); } }
@keyframes band-b{ to{ transform:translate3d(-16vw,-12vh,0) scale(1.2); } }
@media (prefers-reduced-motion:no-preference){
  .band::before{ animation:band-a 23s ease-in-out infinite alternate; }
  .band::after{ animation:band-b 29s ease-in-out infinite alternate; }
}
.band__in{
  display:grid; gap:32px; align-items:center; justify-items:center;
  width:100%; max-width:1440px; margin-inline:auto; text-align:center;
}
.band__h{ color:#fff; max-width:18ch; text-wrap:balance; }
.band .lede{ color:rgba(255,255,255,.86); text-wrap:balance; }
.band .actions{ justify-content:center; }
.band .btn--ghost{
  background:
    linear-gradient(rgba(12,10,10,.28), rgba(12,10,10,.28)) padding-box,
    linear-gradient(90deg, rgba(255,255,255,.5), rgba(255,255,255,.5)) border-box;
  color:#fff;
}
.band .btn--ghost:hover{
  background:
    linear-gradient(rgba(12,10,10,.5), rgba(12,10,10,.5)) padding-box,
    linear-gradient(90deg, #fff, #fff) border-box;
}
.band__film[hidden]{ display:none; }
.band__film{ width:100%; max-width:960px; }
.band__frame{
  position:relative; overflow:hidden; aspect-ratio:16/9; border-radius:16px;
  background:rgba(12,10,10,.3);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14), 0 30px 80px -30px rgba(12,10,10,.7);
}
.band__video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.band__cap{ color:#fff; text-align:left; }
@media (min-width:1024px){
  .band[data-film-ready] .band__in{ grid-template-columns:5fr 7fr; gap:clamp(32px,4vw,72px); text-align:left; justify-items:start; }
  .band[data-film-ready] .band__film{ max-width:none; }
}

/* ---------- the framed film (poster, then the film with its controls) ---------- */

.film{ margin:0; min-width:0; }
.film__frame{
  position:relative; overflow:hidden; aspect-ratio:16/9; border-radius:16px;
  background:var(--ink);
  box-shadow:inset 0 0 0 1px rgba(23,22,28,.12), 0 30px 70px -34px rgba(40,30,60,.6);
}
.film__video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; background:var(--ink); }
.film__play{
  position:absolute; inset:0; display:grid; place-items:center; cursor:pointer;
  background:linear-gradient(transparent 55%, rgba(12,10,10,.35));
  transition:background 220ms var(--ease);
}
.film__play:hover{ background:linear-gradient(transparent 55%, rgba(12,10,10,.5)); }
.film__play[hidden]{ display:none; }
.film__disc{
  display:inline-flex; align-items:center; gap:14px;
  padding:8px 22px 8px 8px; border-radius:999px;
  font-family:var(--font-text); font-weight:400; font-size:15px; line-height:1;
  color:var(--graphite); background:rgba(251,251,252,.9);
  box-shadow:0 14px 40px -16px rgba(12,10,10,.6);
  transition:transform 160ms var(--ease);
}
.film__play:hover .film__disc{ transform:scale(1.04); }
.film__disc span{
  position:relative; display:grid; place-items:center;
  width:44px; height:44px; border-radius:50%; background:var(--graphite); color:var(--paper);
}
.film__disc svg{ margin-left:2px; }
.film__disc span::before{ content:''; position:absolute; inset:-4px; border-radius:50%; border:1.5px solid rgba(23,22,28,.4); }
@keyframes play-breathe{ 0%,100%{ transform:scale(1); opacity:.8; } 50%{ transform:scale(1.22); opacity:0; } }
@media (prefers-reduced-motion:no-preference){ .film__disc span::before{ animation:play-breathe 2.6s ease-in-out infinite; } }
html:not(.js) .film__play{ display:none; }

/* ---------- the close ---------- */

.close{
  display:flex; flex-direction:column; align-items:center; gap:24px; text-align:center;
  padding:clamp(48px,8vw,120px) var(--pad);
  overflow:hidden;
  background:
    radial-gradient(50% 70% at 8% 100%, rgba(224,69,58,.22), transparent 70%),
    radial-gradient(50% 70% at 92% 0%, rgba(59,123,255,.22), transparent 70%),
    var(--paper);
}
.close .d2{ max-width:18ch; }
.close .actions{ justify-content:center; }
.win--dusk.close{
  background:
    radial-gradient(60% 50% at 12% 8%, var(--dusk-glow), transparent 70%),
    linear-gradient(160deg, var(--dusk-a), var(--dusk-b));
}
.close__note{ font-size:15px; color:var(--graphite-2); }
.win--dusk .close__note{ color:var(--mist-2); }
.close__note a{ color:inherit; text-decoration:underline; text-underline-offset:3px; }

/* ---------- book a demo: the floating card ---------- */

.demo{
  display:grid; gap:32px; align-items:center; align-content:center;
  min-height:clamp(560px, calc(100svh - var(--nav-h) - 2 * var(--inset)), 900px);
  padding:var(--pad);
}
.demo > *{ position:relative; z-index:1; }
.demo__copy{ display:flex; flex-direction:column; gap:22px; }
.demo__copy .clip{ margin-top:10px; }
.demo__card{
  padding:clamp(22px,3vw,36px); border-radius:20px;
  background:rgba(251,251,252,.8);
  -webkit-backdrop-filter:blur(18px) saturate(1.2);
  backdrop-filter:blur(18px) saturate(1.2);
  box-shadow:inset 0 0 0 1px rgba(251,251,252,.9), 0 40px 90px -40px rgba(40,30,60,.5);
}
@media (min-width:1024px){
  .demo{ grid-template-columns:6fr 5fr; gap:clamp(40px,5vw,96px); }
  .demo__copy .clip{ max-width:560px; }
}
@media (prefers-reduced-motion:no-preference){
  .demo__copy > *,.demo__card{ animation:hero-in 900ms var(--ease) both; }
  .demo__copy > :nth-child(1){ animation-delay:200ms; }
  .demo__copy > :nth-child(2){ animation-delay:360ms; }
  .demo__copy > :nth-child(3){ animation-delay:520ms; }
  .demo__card{ animation-delay:420ms; }
}

.form-panel{ position:relative; }
.form{ display:flex; flex-direction:column; gap:18px; }
.form__head{ display:flex; flex-direction:column; gap:6px; margin-bottom:6px; }
.form__head .row__title{ font-size:24px; }
.form-panel::after{
  content:''; position:absolute; left:0; top:24px; bottom:24px; width:3px; border-radius:2px;
  background:linear-gradient(180deg, var(--coral), var(--plum), var(--azure));
  transform:scaleY(var(--fill, 0)); transform-origin:top;
  transition:transform 320ms var(--ease);
}
.fld{ display:flex; flex-direction:column; gap:7px; }
.fld label{ font-size:14px; font-weight:400; color:var(--graphite-2); }
.fld input[type="text"],.fld input[type="email"]{
  width:100%; font:inherit; font-size:16px; color:var(--graphite);
  background:#fff; border:0; border-radius:10px;
  box-shadow:inset 0 0 0 1px rgba(23,22,28,.18);
  padding:13px 14px;
  transition:box-shadow 160ms var(--ease);
}
.fld input:hover{ box-shadow:inset 0 0 0 1px rgba(23,22,28,.32); }
.fld input:focus{ outline:none; box-shadow:inset 0 0 0 1.5px var(--volt), 0 0 0 4px rgba(91,91,240,.18); }
.fld input[aria-invalid="true"]{ box-shadow:inset 0 0 0 1.5px var(--volt-deep); }
.fld--check{ flex-direction:row; align-items:flex-start; gap:11px; display:flex; flex-wrap:wrap; }
.fld--check input{ flex:0 0 auto; width:18px; height:18px; margin-top:3px; accent-color:var(--volt); }
.fld--check label{ flex:1 1 200px; font-size:14px; font-weight:300; color:var(--graphite-2); line-height:1.5; }
.fld--check label a{ color:var(--graphite); text-decoration:underline; text-underline-offset:3px; }
.fld--check .fld__err{ flex:1 1 100%; }
.fld__err{ font-size:13px; line-height:1.45; color:var(--volt-deep); }
.fld__err[hidden]{ display:none; }
.form__msg{
  font-size:14px; line-height:1.5; color:var(--graphite);
  padding:11px 13px; border-radius:8px;
  box-shadow:inset 0 0 0 1px rgba(23,22,28,.14); background:#fff;
}
.form__msg[hidden]{ display:none; }
.form__submit{ width:100%; padding-block:15px; }
.form-busy{ opacity:.7; }
[aria-busy="true"]{ cursor:progress; }
.hp,.hp-wrap{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip-path:inset(50%); white-space:nowrap;
  left:-9999px; top:auto;
}
.turnstile-slot[hidden]{ display:none; }
.turnstile-slot{ min-height:65px; }
.form__done{ display:flex; flex-direction:column; gap:14px; }
.form__done .h2{
  font-family:var(--font-display); font-weight:300;
  font-size:clamp(28px,3vw,40px); letter-spacing:.01em; line-height:1.1;
}
.form__done:focus{ outline:none; }
.form__done:focus-visible{ outline:2px solid var(--volt); outline-offset:6px; }

/* ---------- nav on mixed surfaces ---------- */

.nav:not([data-tone="dark"]) .nav__brand{ color:var(--graphite); }
.nav:not([data-tone="dark"]) .nav__burger::before,
.nav:not([data-tone="dark"]) .nav__burger::after{ background:var(--graphite); }
.nav:not([data-tone="dark"]) .nav__links a{ color:var(--graphite-link); }
.nav:not([data-tone="dark"]) .nav__links a:hover,
.nav:not([data-tone="dark"]) .nav__links a[aria-current]{ color:var(--graphite); }
.nav:not([data-tone="dark"])::after{
  background:linear-gradient(180deg, rgba(228,229,234,.96) 22%, rgba(228,229,234,.78) 52%, rgba(228,229,234,0));
}
html:not(.js) .nav{ background:var(--paper); }

/* ---------- sheet and footer ---------- */

.sheet{ color:var(--bone); color-scheme:dark; }
.foot{ background:var(--ink); color:var(--bone); color-scheme:dark; }
.foot .eyebrow{ font-weight:400; font-size:14px; line-height:1.3; text-transform:none; letter-spacing:0; color:var(--bone); }
.wordmark{ --wm-size:clamp(96px,22vw,340px); }
.wordmark__lit{ display:none; }

/* ---------- scroll entry: the window unfolds, then its text rises ---------- */

@keyframes rv-unfold{
  from{ clip-path:inset(18% 12% round 56px); transform:scale(.94); }
  to{ clip-path:inset(-160px round 0px); transform:none; }
}
@media (prefers-reduced-motion:no-preference){
  html.js .rv:not(.is-in):not(.rv--copy){ clip-path:inset(18% 12% round 56px); transform:scale(.94); }
  html.js .rv:not(.is-in) .rv__t{ opacity:0; transform:translateY(26px); }
  html.js .rv.is-in:not(.is-now):not(.rv--copy){ animation:rv-unfold 1000ms var(--ease) both; }
  html.js .rv .rv__t{ transition:opacity 700ms var(--ease), transform 700ms var(--ease); transition-delay:calc(240ms + var(--i, 0) * 110ms); }
  html.js .rv.is-now .rv__t{ transition:none; }
}

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion:reduce){
  .hero .d1,.hero .lede,.hero .actions,.hero .clip,.title > *,.done > *,.demo__copy > *,.demo__card,
  .film__disc span::before,.mixed .btn::after,.nav__links a::after,.rv,.band::before,.band::after{ animation:none; }
  html,#field,.clip__video,.tick,.tile,.mixed .btn,.btn--paper,.rv__t,.form-panel::after,.film__play,.film__disc{ transition-duration:0s; }
  #field{ display:none; }
}