/* ═══════════════════════════════════════════════════════════
   ZOVANU - waitlist
   ═══════════════════════════════════════════════════════════ */

:root{
  --bg:#F2F1EF;
  --ink:#171717;
  --ink-70:rgba(23,23,23,.70);
  --ink-55:rgba(23,23,23,.55);
  --ink-38:rgba(23,23,23,.38);
  --line:rgba(23,23,23,.14);
  --line-soft:rgba(23,23,23,.08);
  --brand:#7665DD;
  --brand-deep:#4C33BC;
  --font:"Archivo","Helvetica Neue",Arial,sans-serif;

  --pad:clamp(18px,1.9vw,24px);
  --gutter:1.25rem;
  --cols:12;
  --ease:cubic-bezier(.24,.8,.28,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
*{-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font);
  font-size:16px;
  line-height:1.45;
  font-synthesis-weight:none;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img{display:block;max-width:100%}
[hidden]{display:none !important}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
a{color:inherit;text-decoration:none}
ul{list-style:none;margin:0;padding:0}
p{margin:0}
::selection{background:var(--brand);color:#fff}

.mono{
  font-family:var(--font);
  font-size:14px;
  font-weight:500;
  letter-spacing:1px;
  text-transform:uppercase;
  color:var(--ink-55);
  font-variant-numeric:tabular-nums;
}

/* ── intro gate: hide animated bits until JS arms them ────── */
.is-loading [data-anim],
.is-loading .hero__title,
.is-loading .line__i{opacity:0}
/* the gate is a JS contract; without scripting there is nothing to lift it */
@media (scripting: none){
  .is-loading [data-anim],
  .is-loading .hero__title,
  .is-loading .line__i{opacity:1}
}

/* ═══════════ CONTAINER (Odyn caps the layout at 1920) ═══════════ */
.u-container{
  width:100%;
  max-width:1920px;
  margin-inline:auto;
  padding-inline:var(--pad);
}

/* ═══════════ GRID (12 col, Odyn's proportions) ═══════════ */
.u-grid{
  display:grid;
  grid-template-rows:auto;
  grid-auto-columns:minmax(0,1fr);
  grid-template-columns:repeat(var(--cols),minmax(0,1fr));
  column-gap:var(--gutter);
  row-gap:var(--gutter);
}

/* ═══════════ BUTTONS (dual-label roll) ═══════════ */
.btn{
  --btn-fg:var(--ink);
  --btn-bg:transparent;
  --btn-bd:transparent;
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:48px;
  padding:0 20px;
  font-size:12px;
  font-weight:500;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--btn-fg);
  background:var(--btn-bg);
  border:1px solid var(--btn-bd);
  border-radius:12px;
  transition:background .5s var(--ease),border-color .5s var(--ease),color .5s var(--ease);
  -webkit-tap-highlight-color:transparent;
}
.btn__label{position:relative;display:block;overflow:hidden;height:1.05em}
.btn__roll{
  display:flex;
  flex-direction:column;
  transform:translateY(0);
  transition:transform .62s var(--ease);
}
.btn__roll>span{
  display:block;
  height:1.05em;
  line-height:1.05em;
  white-space:nowrap;
}
.btn:hover .btn__roll,
.btn:focus-visible .btn__roll{transform:translateY(-1.05em)}

.btn--outline{--btn-bd:var(--line)}
.btn--outline:hover{--btn-bd:var(--ink);--btn-bg:var(--ink);--btn-fg:var(--bg)}

.btn--solid{--btn-bg:var(--ink);--btn-fg:var(--bg);--btn-bd:var(--ink)}
.btn--solid:hover{--btn-bg:var(--brand-deep);--btn-bd:var(--brand-deep)}

.btn--ghost{--btn-fg:var(--ink-55);padding-left:0;padding-right:0}
.btn--ghost .btn__label::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:currentColor;transform:scaleX(1);transform-origin:right;
  transition:transform .5s var(--ease);
}
.btn--ghost:hover{--btn-fg:var(--ink)}
.btn--ghost:hover .btn__label::after{transform:scaleX(0)}

.btn--link{--btn-fg:var(--ink-55);height:auto;padding:4px 0;border-radius:0}
.btn--link:hover{--btn-fg:var(--ink)}
.btn--wide{width:100%;height:48px}

/* Loading. The label is hidden rather than removed so the button keeps its
   width and nothing around it shifts, and the ring rides currentColor so it
   reads on the solid and the outline variants alike. */
.btn[aria-busy="true"]{cursor:default}
.btn[aria-busy="true"] .btn__label{opacity:0}
.btn[aria-busy="true"]::after{
  content:"";
  position:absolute;inset:0;margin:auto;
  width:18px;height:18px;
  border:2px solid currentColor;
  border-top-color:transparent;
  border-radius:50%;
  animation:btnspin .68s linear infinite;
}
@keyframes btnspin{to{transform:rotate(360deg)}}

.btn:focus-visible{outline:2px solid var(--brand);outline-offset:3px}

/* a mouse click should never leave a ring behind; keyboard focus still does */
button:focus,
a:focus,
summary:focus,
.modal:focus,
.modal__sheet:focus,
.modal__inner:focus{outline:none}
button:focus-visible,
a:focus-visible{outline:2px solid var(--brand);outline-offset:3px}

/* ═══════════ NAV ═══════════ */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:40;
  /* desktop sits the brand 24px off the top edge; the mobile rule below
     overrides both sides with --pad, so it is unaffected */
  padding-block:24px 12px;
  /* bare the whole way down: no plate, no rule, at any width. The
     transition that used to fade the glass in is gone with it - there is
     nothing left for it to animate. */
  background:transparent;
  border-bottom:0;
}
/* Scrolled state carries no plate at all now - no tint, no blur. The class
   is still applied, so there is somewhere to hang a treatment if one is
   wanted later; it just paints nothing. */
.nav.is-stuck{}
.nav__inner{
  display:flex;align-items:center;justify-content:space-between;
}
.nav__actions{display:flex;align-items:center;gap:clamp(12px,1.6vw,22px)}

/* Playground entry: the same round control the playground uses for its own
   tabs. It lived in the header, where on a 320px screen it sat almost
   against the wordmark and wrapped. */
.playfab{
  position:fixed;right:clamp(14px,2vw,24px);bottom:clamp(14px,2vw,24px);z-index:35;
  width:74px;height:74px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  border:1px solid var(--ink);border-radius:50%;
  background:var(--ink);
  color:#fff;
  box-shadow:0 18px 38px -20px rgba(23,23,23,.55);
  transition:transform .32s var(--ease),background .32s var(--ease),
             border-color .32s var(--ease),color .32s var(--ease);
}
.playfab .mono{color:#fff;transition:color .32s var(--ease)}
.playfab__icon{display:block;width:22px;height:22px}
.playfab svg{width:100%;height:100%;stroke:currentColor;stroke-width:1.6;fill:none}
.playfab .mono{font-size:8.5px;letter-spacing:.1em}
.playfab:hover,.playfab:focus-visible{
  transform:translateY(-3px);
  background:var(--brand-deep);color:#fff;border-color:var(--brand-deep);
  box-shadow:0 20px 42px -18px rgba(76,51,188,.7);
}
.playfab:hover .mono,.playfab:focus-visible .mono{color:#fff}

/* Mid-transition the button is no longer a button: it is the wipe. Over
   everything on the page (the loader sits at 200), and with its own hover
   transition off so it cannot fight the tween driving it. */
.playfab.is-leaving{
  z-index:300;
  transform-origin:50% 50%;
  transition:none;
  box-shadow:none;
  pointer-events:none;
}
/* Each wave is a full-screen layer revealed through a circular clip, not a
   small circle scaled up - see the note in playfab.js. */
.playfab__wave{
  position:fixed;inset:0;z-index:301;
  pointer-events:none;
  will-change:clip-path;
}
.playfab__wave + .playfab__wave{z-index:302}
.nav__logo{
  width:clamp(140px,8vw,116px);height:auto;
  transition:opacity .4s var(--ease);
}
/* the hover lives on the <img>, not the <a> - GSAP animates the <a>'s
   opacity during the intro and a transition on the same property fights it */
.nav__brand:hover .nav__logo{opacity:.62}

/* ═══════════ HERO ═══════════ */
.page{position:relative;z-index:2}

.hero{
  position:relative;
  display:flex;
  min-height:100svh;
}
/* hands off to the white footer - also fades the WebGL field out
   before it reaches the fold, rather than cutting it */
.hero::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:0;
  height:58vh;
  z-index:1;
  pointer-events:none;
  background:linear-gradient(to bottom,rgba(255,255,255,0),#fff);
}
.hero__contain{position:relative;display:flex}

/* beta__hero_m - the whole block sits centred in the viewport */
.hero__m{
  position:relative;
  z-index:2;
  display:flex;
  flex-flow:column nowrap;
  justify-content:center;
  width:100%;
  min-height:100svh;
  /* tall type on a short viewport grows the section instead of
     clipping off the top of the headline */
  padding-block:clamp(88px,11vh,132px) clamp(72px,9vh,110px);
}

/* beta__hero_h_m */
.hero__h_m{margin-bottom:3rem}
.hero__h_col{grid-column:3 / span 6}
.hero__h_w{max-width:62ch}

.hero__title{
  margin:0;
  /* capped so the headline holds at three lines inside the 62ch
     wrapper - past this the type outgrows the column and spills to four */
  font-size:clamp(3rem,4vw,3.6rem);
  font-weight:500;
  line-height:1.02;
  letter-spacing:-.035em;
}
.hero__title .line{display:block;overflow:hidden;padding-bottom:.03em}
.hero__title .line__i{display:block;will-change:transform}
.split__w{display:inline-block}

/* key words picked out in the brand purple - colour only, so the
   depth field behind the headline is never boxed out */
.hl{
  background:none;
  color:var(--brand-deep);
}

/* beta__hero_ds_m - right below the headline, out on the right */
.hero__ds_c{grid-column:9 / span 4}
.hero__ds_w{max-width:34ch}
.hero__ds_w p{
  font-size:16px;
  line-height:1.45;
  color:#404040;
}
.hero__ds_w p + p{margin-top:1em}
.hero__btn_m{display:flex;align-items:center;flex-wrap:wrap;gap:20px;margin-top:2rem}

/* ═══════════ TOP GLOW ═══════════ */
.glow{
  position:absolute;
  inset:0 0 auto 0;
  height:clamp(300px,46vh,620px);
  z-index:1;
  pointer-events:none;
  background:linear-gradient(to bottom,#E8E6FA,transparent);
  transform-origin:50% 0;
  animation:glow-breathe 11s ease-in-out infinite;
}
@keyframes glow-breathe{
  0%,100%{opacity:.62;transform:scaleY(.94)}
  50%    {opacity:1;  transform:scaleY(1.1)}
}

/* ═══════════ MARK FIELD (WebGL) ═══════════ */
.markfield{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
}
.markfield canvas{display:block;width:100%;height:100%}

/* ═══════════ LOADER ═══════════ */
/* A returning visitor in the same session skips the sequence entirely.
   What they must NOT skip is the intro gate: unhiding the hero here meant
   it painted in place and was then yanked back to opacity 0 by the very
   first frame of heroIn(), which is the flash on reload. The gate stays
   on; only the loader itself goes. */
[data-skip-loader] .loader{display:none !important}

.loader{
  position:fixed;
  inset:0;
  z-index:200;
  background:var(--bg);
  display:grid;
  place-items:center;
  overflow:hidden;
}
.loader::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:clamp(300px,46vh,620px);
  background:linear-gradient(to bottom,#E8E6FA,transparent);
  transform-origin:50% 0;
  animation:glow-breathe 11s ease-in-out infinite;
  pointer-events:none;
}
.loader__stage{
  position:relative;
  /* The cards and the mark are all inset:0 on this box, so its width is the
     only size control for the whole stack.
     This was clamp(160px,10vw,148px) - a floor above its own ceiling, which
     CSS resolves to the floor, so it was a flat 160px at every width and the
     10vw never did anything. Restated as the flat value it actually was,
     divided by 1.5. */
  width:107px;
  aspect-ratio:1;
  z-index:1;
}
.loader__card{
  position:absolute;
  inset:0;
  margin:0;
  background:var(--bg);
  /* frame and corner scaled with the card, or a 4px border reads chunky
     against the smaller face */
  border:2.5px solid #fff;
  border-radius:8px;
  overflow:hidden;
  opacity:0;                 /* nothing shows until JS arms the sequence */
  will-change:transform,opacity;
}
.loader__card img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
/* the mark lands bare - no frame, no fill */
.loader__card--mark{background:none;border:0}
.loader__card--mark img{object-fit:contain}

.loader__pct{
  position:absolute;
  opacity:0;                 /* same - no flash of a stray 0% on reload */
  z-index:1;
  right:var(--pad);
  bottom:clamp(18px,3vh,32px);
  /* capped so the headline holds at three lines inside the 62ch
     wrapper - past this the type outgrows the column and spills to four */
  font-size:clamp(3rem,4vw,3.6rem);
  font-weight:500;
  line-height:1;
  letter-spacing:-.035em;
  color:var(--ink-70);
  font-variant-numeric:tabular-nums;
}

/* ═══════════ FOOTER ═══════════ */
.footer{
  position:relative;
  z-index:2;
  padding:0 0 clamp(30px,5vh,58px);
  background:#fff;
  overflow:hidden;
}
.footer__line span{display:block;white-space:nowrap}
.footer__line{
  font-size:clamp(1.5rem,3.4vw,2.9rem);
  font-weight:500;
  letter-spacing:-.03em;
  line-height:1.02;
  max-width:none;
}

.footer__body{
  display:flex;
  align-items:center;
  gap:clamp(28px,5vw,90px);
  margin-top:clamp(46px,8vh,90px);
}

/* the wordmark sits centred in the space the links leave it */
.footer__wordmark{
  flex:0 1 auto;
  width:auto;
  max-width:min(42%,440px);
  height:auto;
  opacity:.5;
  filter:brightness(0);      /* two brand purples -> one flat black */
  pointer-events:none;
}

/* label left, links right, one row per group, divider between */
.footer__grid{
  flex:1 1 auto;
  min-width:0;
  display:flex;
  flex-direction:column;
}
.footer__col{
  display:flex;
  flex-direction:row;
  align-items:flex-start;
  justify-content:space-between;
  gap:24px;
  padding-block:clamp(16px,2.4vh,24px);
}
.footer__col + .footer__col{border-top:1px solid var(--line)}
.footer__label{display:block;flex:0 0 auto}
.footer__links{
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-end;
  gap:12px;
  text-align:right;
}

/* ═══════════ MODALS (right-hand panel) ═══════════ */
.modal{
  position:fixed;inset:0;z-index:90;
  visibility:hidden;pointer-events:none;
}
.modal.is-open{visibility:visible;pointer-events:auto}

/* clicking anywhere off the panel closes it, and says so with the cursor */
.modal__scrim{
  position:absolute;inset:0;
  background:rgba(18,17,24,.42);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  opacity:0;
  cursor:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='64'%20height='64'%20viewBox='0%200%2064%2064'%3E%3Cpath%20d='M20%2020L44%2044M44%2020L20%2044'%20stroke='white'%20stroke-width='1'%20stroke-linecap='round'/%3E%3C/svg%3E") 32 32, pointer;
}

.modal__sheet{
  position:absolute;
  top:16px;
  right:16px;
  bottom:16px;
  width:min(560px,calc(100% - 32px));
  background:#fff;
  border-radius:24px;
  overflow:hidden;
  will-change:transform;
  box-shadow:0 40px 90px -40px rgba(18,17,24,.45);
}
.modal__close{
  position:absolute;top:26px;right:28px;z-index:3;
}
.modal__inner{
  position:absolute;inset:0;
  overflow-y:auto;
  overscroll-behavior:contain;
  padding:clamp(64px,9vh,86px) clamp(28px,4vw,44px) clamp(40px,7vh,64px);
  display:flex;flex-direction:column;
  gap:clamp(24px,3.6vh,40px);
}
.modal__inner--form{justify-content:flex-start}
.modal__inner--form .form__head,
.modal__inner--form .form__done{margin-top:auto}
.modal__inner--form .form,
.modal__inner--form .form__done{margin-bottom:auto}
.modal__title{
  margin:8px 0 0;
  font-size:clamp(1.8rem,2.6vw,2.5rem);
  font-weight:500;letter-spacing:-.035em;line-height:1.04;
}
.modal__sub{margin-top:14px;color:var(--ink-70);font-size:14.5px;line-height:1.5}

/* ── FAQ ── */
.faq{border-top:1px solid var(--line)}
.faq__row{
  border-bottom:1px solid var(--line);
  padding-inline:16px;
  border-radius:2px;
  transition:background .45s var(--ease);
}
.faq__row.is-open{background:#E8E6FA}
.faq__q{
  display:grid;
  grid-template-columns:44px 1fr 22px;
  align-items:center;gap:14px;
  width:100%;padding:22px 0;text-align:left;
}
.faq__n{color:var(--ink-38);transition:color .45s var(--ease)}
.faq__t{
  font-size:clamp(1rem,1.8vw,1.4rem);
  font-weight:500;letter-spacing:-.02em;
  transition:color .45s var(--ease),transform .55s var(--ease);
}
.faq__q:hover .faq__t{transform:translateX(6px)}
/* an open row holds its position - no slide on the title */
.faq__row.is-open .faq__t,
.faq__row.is-open .faq__q:hover .faq__t{transform:none}
.faq__q:hover .faq__n{color:var(--brand-deep)}
.faq__ic{position:relative;width:12px;height:12px;justify-self:end}
.faq__ic::before,.faq__ic::after{
  content:"";position:absolute;inset:50% 0 auto 0;height:1px;background:var(--ink);
  transition:transform .5s var(--ease),opacity .4s var(--ease);
}
.faq__ic::after{transform:rotate(90deg)}
.faq__row.is-open .faq__ic::after{transform:rotate(0);opacity:0}
.faq__row.is-open .faq__n{color:var(--brand-deep)}
.faq__a{height:0;overflow:hidden}
.faq__a_i{padding:0 10px 26px 58px}
.faq__a_i p{color:var(--ink-70);font-size:14.5px;line-height:1.6;max-width:62ch}
.faq__a_i p + p{margin-top:1em}
.faq__foot{display:flex}

/* ── FORM ── */
.form{display:flex;flex-direction:column;gap:20px}
.field{display:flex;flex-direction:column;gap:8px}
.field input[type=text],.field input[type=email]{
  width:100%;padding:12px 0;
  font:inherit;font-size:16px;letter-spacing:-.01em;
  color:var(--ink);background:transparent;
  border:0;border-bottom:1px solid var(--line);border-radius:0;
  transition:border-color .45s var(--ease);
}
.field input::placeholder{color:var(--ink-38)}
.field input:focus{outline:none;border-bottom-color:var(--ink)}
.field.has-err input{border-bottom-color:#C0392B}
.field__err{
  font-size:12px;
  color:#C0392B;
  min-height:14px;
}
.field__err--form{margin-top:-8px}

.seg{display:flex;gap:6px;margin-top:2px}
.seg__opt{position:relative;cursor:pointer}
.seg__opt input{position:absolute;opacity:0;inset:0;cursor:pointer}
.seg__opt span{
  display:block;padding:9px 16px;
  border:1px solid var(--line);border-radius:12px;
  font-size:10px;font-weight:500;letter-spacing:.16em;color:var(--ink-55);
  transition:all .4s var(--ease);
}
.seg__opt:hover span{border-color:var(--ink-38);color:var(--ink)}
.seg__opt input:checked + span{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.seg__opt input:focus-visible + span{outline:2px solid var(--brand);outline-offset:2px}

.check{display:flex;align-items:center;gap:12px;cursor:pointer;user-select:none}
.check input{position:absolute;opacity:0;width:0;height:0}
.check__box{
  flex:0 0 auto;position:relative;width:20px;height:20px;
  border:1px solid var(--line);border-radius:8px;
  transition:background .3s var(--ease),border-color .3s var(--ease);
}
.check__box::after{
  content:"";position:absolute;
  left:50%;top:47%;width:5px;height:9px;
  border:solid #fff;border-width:0 2px 2px 0;
  transform:translate(-50%,-50%) rotate(45deg) scale(0);
  transform-origin:center;
  transition:transform .3s var(--ease);
}
.check input:checked + .check__box{background:var(--brand-deep);border-color:var(--brand-deep)}
.check input:checked + .check__box::after{transform:translate(-50%,-55%) rotate(45deg) scale(1)}
.check input:focus-visible + .check__box{outline:2px solid var(--brand);outline-offset:2px}
.check__txt{font-size:14px;line-height:1.45;color:var(--ink-55)}
.check__txt a,
.check__txt button{
  color:var(--ink);text-decoration:underline;text-underline-offset:2px;
  font:inherit;background:none;border:0;padding:0;cursor:pointer;
}
.check__txt button:hover{color:var(--brand-deep)}
.check.has-err .check__box{border-color:#C0392B}

.form__done{display:flex;flex-direction:column;align-items:flex-start;gap:0}
.form__done .btn{margin-top:26px}
/* The rows grey out while the request is in flight, but the button keeps
   full contrast - it is the thing carrying the spinner. The dimming sits on
   the rows rather than the form because opacity makes a group, and a child
   cannot opt back out of a faded parent. */
.form.is-busy{pointer-events:none}
.form.is-busy .field,
.form.is-busy .check{opacity:.5;transition:opacity .3s var(--ease)}

/* ═══════════ LEGAL PANELS ═══════════ */
.legal{display:flex;flex-direction:column;gap:clamp(22px,3vh,32px)}
/* full width: the panel is already a narrow column, so a second 62ch cap
   only left a ragged edge inside it */
.legal__sec{max-width:none;width:100%}
.legal__sec p{width:100%;max-width:none}
.legal__h{
  margin:0 0 10px;
  font-size:16px;
  font-weight:500;
  letter-spacing:-.01em;
  color:var(--ink);
}
.legal p{
  font-size:14px;
  line-height:1.65;
  color:var(--ink-70);
}
.legal p + p{margin-top:.9em}
.legal__list{
  margin:.9em 0 0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:.7em;
}
.legal__list li{
  position:relative;
  padding-left:16px;
  font-size:14px;
  line-height:1.65;
  color:var(--ink-70);
}
.legal__list li::before{
  content:"";
  position:absolute;left:0;top:.62em;
  width:5px;height:5px;border-radius:50%;
  background:var(--brand);
}
.legal strong{color:var(--ink);font-weight:600}

/* bot bait - in the DOM, off the screen, out of the tab order */
.hp{
  position:absolute;
  left:-9999px;
  width:1px;height:1px;
  overflow:hidden;
  opacity:0;
  pointer-events:none;
}

/* ═══════════ COOKIE CONSENT ═══════════ */
.consent{
  position:fixed;
  left:0;right:0;bottom:0;
  z-index:70;                 /* under the modals, over the page */
  display:flex;
  justify-content:center;
  padding:16px;
  pointer-events:none;
  visibility:hidden;
}
.consent.is-open{visibility:visible}
.consent__panel{
  pointer-events:auto;
  width:min(560px,100%);
  background:#fff;
  border-radius:24px;
  padding:clamp(20px,2.6vw,28px);
  box-shadow:0 30px 70px -30px rgba(18,17,24,.35);
  will-change:transform,opacity;
}
.consent__txt{
  margin-top:10px;
  font-size:14px;
  line-height:1.55;
  color:var(--ink-70);
}
.consent__txt button{
  font:inherit;background:none;border:0;padding:0;cursor:pointer;
  color:var(--ink);text-decoration:underline;text-underline-offset:2px;
}
.consent__txt button:hover{color:var(--brand-deep)}
.consent__actions{
  display:flex;align-items:center;flex-wrap:wrap;gap:10px;
  margin-top:18px;
}

.consent__cats{display:flex;flex-direction:column;gap:2px;margin-top:14px}
.consent__cat{padding:14px 0;border-bottom:1px solid var(--line-soft)}
.consent__cat:last-child{border-bottom:0}
.consent__cat_h{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.consent__cat_n{font-size:16px;font-weight:500;color:var(--ink)}
label.consent__cat_n{cursor:pointer}
.consent__cat_d{
  margin-top:5px;max-width:46ch;
  font-size:14px;line-height:1.5;color:var(--ink-55);
}
.consent__locked{color:var(--ink-38)}

/* switch */
.switch{position:relative;display:inline-flex;cursor:pointer;flex:0 0 auto}
.switch input{position:absolute;opacity:0;width:0;height:0}
.switch__track{
  display:block;width:42px;height:24px;
  background:rgba(23,23,23,.16);
  border-radius:99px;
  transition:background .3s var(--ease);
}
.switch__dot{
  position:absolute;top:3px;left:3px;
  width:18px;height:18px;border-radius:50%;
  background:#fff;
  box-shadow:0 1px 3px rgba(23,23,23,.28);
  transition:transform .3s var(--ease);
}
.switch input:checked ~ .switch__track{background:var(--brand-deep)}
.switch input:checked ~ .switch__track .switch__dot{transform:translateX(18px)}
.switch input:focus-visible ~ .switch__track{outline:2px solid var(--brand);outline-offset:3px}

/* ═══════════ RESPONSIVE ═══════════ */
@media (max-width:900px){
  .nav{padding-block:var(--pad)}

  /* the panel becomes a bottom sheet: full bleed, no side gaps */
  /* The sheet takes only the height it needs and scrolls once it runs
     out, rather than always standing at 95svh with dead space under a
     short panel. */
  .modal__sheet{
    top:auto;right:0;bottom:0;left:0;
    width:100%;
    height:auto;
    max-height:92svh;
    border-radius:24px 24px 0 0;
  }
  .modal__inner{
    position:relative;inset:auto;
    max-height:92svh;
  }
  .modal__close{
    top:20px;
    right:20px;
    left:auto;
    padding:0;
  }
  .modal__inner{
    padding:clamp(64px,9vh,84px) 20px calc(clamp(36px,6vh,56px) + env(safe-area-inset-bottom));
  }

  .hero__h_col,
  .hero__ds_c{grid-column:1 / -1}
  .hero__h_m{margin-bottom:2rem}
  .hero__h_w{max-width:none}
  .hero__ds_w{max-width:42ch}
  .hero__btn_m{gap:12px;margin-top:1.75rem}
  .hero__title{line-height:1.04}
  .faq__q{grid-template-columns:34px 1fr 18px;gap:10px;padding:18px 0}
  .faq__a_i{padding:0 0 22px 44px}
  .footer__line{max-width:none}
  .footer__body{flex-direction:column-reverse;align-items:stretch;gap:40px}
  /* wordmark runs the full width of the window on a phone */
  .footer__wordmark{max-width:none;width:100%}
  .footer__grid{width:100%}
  /* links drop under their label instead of sitting opposite it */
  .footer__line{line-height:1.5}
  .footer__line span{white-space:normal}
  .footer__col{flex-direction:column;align-items:flex-start;gap:10px}
  .footer__links{justify-content:flex-start;text-align:left}
}
@media (max-width:520px){
  .nav__actions{gap:10px}
  .playfab{width:62px;height:62px;bottom:calc(clamp(14px,2vw,24px) + 4px)}
  .consent{padding:10px}
  .consent__actions .btn{flex:1 1 auto}
  .consent__actions .btn--ghost{flex-basis:100%}
  .btn:not(.btn--ghost):not(.btn--link){padding:0 14px}

  /* the two hero CTAs stay shoulder to shoulder at every width. The label
     tightens rather than the row wrapping, because a stacked primary and
     secondary reads as two unrelated buttons. */
  .hero__btn_m{gap:20px;flex-wrap:nowrap}
  .hero__btn_m .btn{flex:0 0 auto;font-size:11px;letter-spacing:.06em}
  /* the primary keeps its full 20px of side padding: it is the one CTA on
     the page, and a squeezed pill reads as an afterthought */
  .hero__btn_m .btn.btn--solid{padding:0 20px}

  .seg{flex-wrap:wrap}
  .modal__inner{padding-top:96px}
}

/* below ~360px even that is too wide, so tighten once more */
@media (max-width:380px){
  .btn:not(.btn--ghost):not(.btn--link){padding:0 12px}
  .hero__btn_m .btn{font-size:10px;letter-spacing:.04em}
  .hero__btn_m .btn.btn--solid{padding:0 20px}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
  .is-loading [data-anim],
  .is-loading .hero__title,
  .is-loading .line__i{opacity:1}
}