/* ============================================================
   TWENTY — marketing site
   ============================================================ */

:root{
  color-scheme:dark;

  --black:      #0A0A0A;
  --text:       #F2F1ED;
  --muted:      #948D83;   /* warm grey */
  --muted-dim:  #6E6860;
  --accent:     #D0271D;   /* the logo, and the waitlist buttons */
  --accent-hi:  #E23A2E;   /* button hover */
  --rule:       rgba(242,241,237,.16);

  --wrap:       1100px;
  --nav-h:      64px;

  --step-hero:  clamp(2.25rem, 7.2vw, 4.25rem);
  --step-lg:    clamp(1.35rem, 3.1vw, 2.05rem);
  --step-md:    clamp(1.15rem, 2.2vw, 1.5rem);
  --step-base:  clamp(1rem, 1.35vw, 1.0625rem);
  --step-sm:    .8125rem;
  --step-xs:    .6875rem;

  --gap:        clamp(4.5rem, 11vw, 9rem);   /* vertical rhythm between sections */
}

*,*::before,*::after{ box-sizing:border-box; }

html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  background:var(--black);
  color:var(--text);
  font-family:"Nunito Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size:var(--step-base);
  font-weight:400;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

img{ max-width:100%; height:auto; display:block; }

a{ color:inherit; text-decoration:none; }

h1,h2,p,ul{ margin:0; }
ul{ list-style:none; padding:0; }

:focus-visible{
  outline:2px solid var(--text);
  outline-offset:3px;
  border-radius:2px;
}

.sr-only{
  position:absolute; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

.skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--text); color:var(--black);
  padding:.6rem 1rem; font-size:var(--step-sm);
}
.skip:focus{ left:.5rem; top:.5rem; }

/* ---------- layout ---------- */

.wrap{
  width:100%;
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:clamp(1.25rem, 5vw, 2rem);
}
.wrap--tight  { max-width:860px; }
.wrap--narrow { max-width:600px; }

/* small letterspaced uppercase, used by nav + footer heads */
.eyebrow,
.nav__links a,
.nav__links button,
.footer__head{
  font-size:var(--step-xs);
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  line-height:1.4;
}

/* ============================================================
   1. NAV
   ============================================================ */

.nav{
  position:fixed;
  inset:0 0 auto 0;
  z-index:50;
  padding-top:env(safe-area-inset-top);
  background:linear-gradient(180deg, rgba(10,10,10,.55), rgba(10,10,10,0));
}

.nav__inner{
  max-width:var(--wrap);
  margin-inline:auto;
  min-height:var(--nav-h);
  padding-inline:clamp(1.25rem, 5vw, 2rem);
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:1rem;
}

.nav__links{ display:flex; gap:clamp(1rem, 2.4vw, 1.75rem); }
.nav__links--left  { grid-column:1; justify-content:flex-start; }
.nav__links--right { grid-column:3; justify-content:flex-end; }

.nav__links a,
.nav__links button{
  color:var(--text);
  opacity:.82;
  transition:opacity .25s ease;
}
.nav__links a:hover,
.nav__links button:hover{ opacity:1; }

/* the nav CTA is a button for the dialog, but reads as a nav link */
.nav__cta{
  margin:0;
  padding:0;
  background:none;
  border:0;
  font-family:inherit;
  cursor:pointer;
  appearance:none;
  -webkit-appearance:none;
}

.nav__logo{ grid-column:2; display:block; justify-self:center; }
.nav__logo img{ width:clamp(88px, 11vw, 116px); height:auto; }

/* ============================================================
   HERO + STATEMENT share the photographic background
   ============================================================ */

.shell{
  position:relative;
  isolation:isolate;
  background-color:var(--black);
  background-image:url("Assets/bg-web.jpg?v=13");
  background-size:cover;
  background-position:50% 22%;
  background-repeat:no-repeat;
}

/* darkening overlay so type stays readable, fading to solid black at the seam */
.shell::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(
    180deg,
    rgba(10,10,10,.62)  0%,
    rgba(10,10,10,.34) 22%,
    rgba(10,10,10,.30) 46%,
    rgba(10,10,10,.72) 78%,
    rgba(10,10,10,.96) 92%,
    var(--black)      100%
  );
}

/* ---------- 2. HERO ---------- */

.hero{
  padding-top:calc(var(--nav-h) + clamp(3.5rem, 11vw, 7rem));
  padding-bottom:clamp(3rem, 8vw, 6rem);
}

.hero__title{
  font-size:var(--step-hero);
  font-weight:700;
  line-height:1.06;
  letter-spacing:-.02em;
  text-align:center;
  text-wrap:balance;
  max-width:16ch;
  margin-inline:auto;
  text-shadow:0 2px 28px rgba(0,0,0,.45);
}

.hero__stage{
  /* how far the subline and badge sit above the phone's centre line */
  --hero-lift:clamp(1.5rem, 3.4vw, 2.5rem);
  margin-top:clamp(2.5rem, 6vw, 4rem);
  display:grid;
  /* side columns stay equal so the phone keeps its place over the "20" */
  grid-template-columns:1fr clamp(210px, 21vw, 260px) 1fr;
  align-items:center;
  gap:clamp(1.5rem, 2.6vw, 2.5rem);
}

/* `position:relative` shifts it visually without disturbing the grid */
.hero__sub{
  position:relative;
  top:calc(-1 * var(--hero-lift));
}

.hero__sub{
  font-size:var(--step-sm);
  line-height:1.6;
  color:var(--text);
  max-width:26ch;
  text-shadow:0 1px 16px rgba(0,0,0,.5);
}

.hero__phone{ grid-column:2; }
.hero__phone img{
  width:100%;
  filter:drop-shadow(0 30px 60px rgba(0,0,0,.55));
}

.hero__cta{
  grid-column:3;
  justify-self:end;
  min-width:0;
  /* the same lift as the subline, so the two sit level */
  position:relative;
  top:calc(-1 * var(--hero-lift));
}


/* ============================================================
   WAITLIST CTA  +  DIALOG
   Every call to action is a single button; the capture itself
   lives in one shared modal.
   ============================================================ */

.cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:56px;
  margin:0;
  padding:0 32px;
  background:var(--accent);
  border:0;
  border-radius:999px;
  color:var(--text);
  font-family:inherit;
  font-size:14px;
  font-weight:600;
  letter-spacing:.1em;
  line-height:1;
  text-transform:uppercase;
  white-space:nowrap;
  cursor:pointer;
  appearance:none;
  -webkit-appearance:none;
  transition:background-color .2s ease, transform .2s ease;
}
.cta:hover{ background:var(--accent-hi); }
.cta:active{ transform:translateY(1px); }
.cta:focus-visible{ outline:2px solid var(--text); outline-offset:3px; }

.cta--lg{ height:64px; padding:0 40px; font-size:15px; }

/* --- the dialog --- */

.wl{
  width:100%;
  max-width:none;
  /* JS narrows this to the *visual* viewport while the keyboard is up;
     dvh is the fallback for browsers without visualViewport. */
  height:100dvh;
  max-height:none;
  margin:0;
  padding:1.25rem;
  inset:0;
  border:0;
  background:transparent;
  overflow:auto;
  overscroll-behavior:contain;
}
.wl[open]{ display:grid; place-items:center; }

/* while JS is driving the height, top is set explicitly too */
.wl.is-fitted{ inset:auto 0 auto 0; position:fixed; }
.wl::backdrop{
  background:rgba(5,5,5,.72);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}

.wl__panel{
  position:relative;
  width:100%;
  max-width:420px;
  padding:clamp(2rem, 5vw, 2.75rem);
  background:#111110;
  border:1px solid rgba(242,241,237,.14);
  box-shadow:0 40px 90px rgba(0,0,0,.6);
  /* <dialog> does not inherit body's colour — state it */
  color:var(--text);
  text-align:left;
}

.wl__close{
  position:absolute;
  top:14px;
  right:14px;
  display:grid;
  place-items:center;
  width:36px;
  height:36px;
  padding:0;
  background:transparent;
  border:0;
  border-radius:50%;
  color:var(--muted);
  cursor:pointer;
  appearance:none;
  -webkit-appearance:none;
  transition:color .2s ease, background-color .2s ease;
}
.wl__close svg{
  width:18px;
  height:18px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.5;
  stroke-linecap:round;
}
.wl__close:hover{ color:var(--text); background:rgba(242,241,237,.07); }
.wl__close:focus-visible{ outline:2px solid var(--text); outline-offset:2px; }

.wl__title{
  margin:0;
  color:var(--text);
  padding-right:2.5rem;
  font-size:clamp(1.4rem, 4vw, 1.65rem);
  font-weight:700;
  line-height:1.2;
  letter-spacing:-.02em;
}

.wl__note{
  margin-top:.7rem;
  font-size:14px;
  line-height:1.6;
  color:var(--muted);
  text-wrap:pretty;
}

.wl__form{
  margin-top:1.6rem;
  display:grid;
  gap:12px;
}

.wl__input{
  width:100%;
  height:56px;
  margin:0;
  padding:0 18px;
  background:transparent;
  border:1px solid var(--muted-dim);
  color:var(--text);
  font-family:inherit;
  font-size:16px;
  line-height:1;
  appearance:none;
  -webkit-appearance:none;
  box-shadow:none;
  transition:border-color .2s ease;
}
.wl__input::placeholder{ color:var(--muted); opacity:1; }
.wl__input:focus,
.wl__input:focus-visible{ outline:none; box-shadow:none; border-color:var(--text); }

/* keep Chrome's autofill yellow away without painting an opaque box */
.wl__input:-webkit-autofill,
.wl__input:-webkit-autofill:hover,
.wl__input:-webkit-autofill:focus,
.wl__input:-webkit-autofill:active{
  -webkit-text-fill-color:var(--text);
  caret-color:var(--text);
  transition:background-color 9999s ease-in-out 0s;
}

.wl__submit{
  width:100%;
  height:56px;
  margin:0;
  padding:0 24px;
  background:var(--accent);
  border:0;
  border-radius:999px;
  color:var(--text);
  font-family:inherit;
  font-size:14px;
  font-weight:600;
  letter-spacing:.1em;
  line-height:1;
  text-transform:uppercase;
  cursor:pointer;
  appearance:none;
  -webkit-appearance:none;
  transition:background-color .2s ease, opacity .2s ease;
}
.wl__submit:hover{ background:var(--accent-hi); }
.wl__submit:focus-visible{ outline:2px solid var(--text); outline-offset:2px; }

.wl__form.is-sending{ opacity:.55; }
.wl__form.is-sending .wl__submit{ cursor:default; }

.wl__msg{
  margin-top:1.1rem;
  font-size:14px;
  line-height:1.6;
  color:var(--text);
  text-wrap:pretty;
}
.wl__msg--error{ color:var(--muted); }
/* when the form is gone, the message is the whole body of the panel */
.wl__msg:not(:last-child),
.wl__form[hidden] + .wl__msg{ margin-top:1.6rem; }

/* --- entrance --- */

@keyframes wl-panel-in{
  from{ opacity:0; transform:translate3d(0, 10px, 0) scale(.985); }
  to  { opacity:1; transform:none; }
}
@keyframes wl-backdrop-in{ from{ opacity:0 } to{ opacity:1 } }

.wl[open] .wl__panel{ animation:wl-panel-in .28s cubic-bezier(.22,.61,.36,1) both; }
.wl[open]::backdrop{ animation:wl-backdrop-in .25s ease both; }

/* ---------- 3. STATEMENT ---------- */

.statement{
  padding-block:clamp(2rem, 5vw, 3.5rem) clamp(4rem, 11vw, 7rem);
}
.statement p{
  font-size:var(--step-lg);
  font-weight:600;
  line-height:1.42;
  letter-spacing:-.01em;
  text-align:center;
  text-wrap:pretty;
}

/* ============================================================
   4. THREE COLUMNS
   ============================================================ */

.pillars{ padding-block:var(--gap); }

.pillars__grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:clamp(2.5rem, 6vw, 4rem);
}

.pillar{ text-align:center; }

.pillar__icon{
  width:44px;
  height:auto;
  margin:0 auto clamp(1.75rem, 4vw, 2.5rem);
}

.pillar__title{
  font-size:var(--step-base);
  font-weight:700;
  letter-spacing:-.005em;
  margin-bottom:.9rem;
}

.pillar__body{
  font-size:var(--step-sm);
  line-height:1.7;
  color:var(--text);
  opacity:.86;
  max-width:30ch;
  margin-inline:auto;
  text-wrap:pretty;
}

/* ============================================================
   5. THE REFUSAL
   A struck-through ledger. Each row draws its own hairline rule
   and its circle-slash mark as it enters view.
   ============================================================ */

.section-title{
  font-size:clamp(1.35rem, 2.9vw, 1.95rem);
  font-weight:700;
  letter-spacing:-.01em;
  line-height:1.25;
  text-align:center;
}

.refusal{ padding-block:var(--gap); }

.strikes{
  max-width:34rem;
  margin:clamp(2.5rem, 5vw, 3.5rem) auto 0;
}

.strike{
  position:relative;
  display:grid;
  grid-template-columns:auto 1fr;
  align-items:center;
  gap:clamp(.9rem, 2.5vw, 1.35rem);
  padding-block:clamp(1rem, 2.4vw, 1.35rem);
}

/* the hairline rule above each row, drawn left to right */
.strike::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:1px;
  background:var(--rule);
  transform:scaleX(0);
  transform-origin:left center;
}
.strike:last-child::after{
  content:"";
  position:absolute;
  inset:auto 0 0 0;
  height:1px;
  background:var(--rule);
  transform:scaleX(0);
  transform-origin:left center;
}

.strike__mark{ display:block; line-height:0; }

@media (hover: hover){
  .strike{ transition:background-color .35s ease; }
  .strike:hover{ background:rgba(242,241,237,.022); }
  .strike:hover .mark{ opacity:.85; }
}

.mark{
  width:clamp(19px, 4.4vw, 22px);
  height:auto;
  overflow:visible;
  fill:none;
  stroke:var(--text);
  stroke-width:1.15;
  stroke-linecap:round;
  opacity:.62;
}

/* path lengths: ring circumference ~58.1, slash ~18.5 */
.mark__ring  { stroke-dasharray:58.2; stroke-dashoffset:58.2; }
.mark__slash { stroke-dasharray:18.6; stroke-dashoffset:18.6; }

.strike__text{
  font-size:clamp(1.02rem, 2.1vw, 1.28rem);
  font-weight:300;
  line-height:1.45;
  letter-spacing:-.005em;
}

/* --- refusal animation --- */

.js .strike::before,
.js .strike:last-child::after{
  transition:transform .9s cubic-bezier(.22,.61,.36,1) calc(var(--i, 0) * .085s);
}
.js .strike__text{
  opacity:0;
  transform:translate3d(-6px, 0, 0);
  transition:opacity .75s cubic-bezier(.22,.61,.36,1) calc(var(--i, 0) * .085s + .1s),
             transform .75s cubic-bezier(.22,.61,.36,1) calc(var(--i, 0) * .085s + .1s);
}
.js .mark__ring{
  transition:stroke-dashoffset .8s cubic-bezier(.22,.61,.36,1) calc(var(--i, 0) * .085s + .06s);
}
.js .mark__slash{
  transition:stroke-dashoffset .45s cubic-bezier(.22,.61,.36,1) calc(var(--i, 0) * .085s + .5s);
}

.js .strikes.is-in .strike::before,
.js .strikes.is-in .strike:last-child::after{ transform:scaleX(1); }
.js .strikes.is-in .strike__text{ opacity:1; transform:none; }
.js .strikes.is-in .mark__ring,
.js .strikes.is-in .mark__slash{ stroke-dashoffset:0; }

.refusal__note{
  max-width:30rem;
  margin:clamp(2.5rem, 5vw, 3.5rem) auto 0;
  text-align:center;
  font-size:clamp(.9rem, 1.7vw, 1rem);
  line-height:1.7;
  color:var(--muted);
  text-wrap:pretty;
}

/* ============================================================
   6. THE GATE
   A bordered block that literally gates the section off, with
   ten dots for the ten questions filling in sequence.
   ============================================================ */

.gate{ padding-block:var(--gap); }

.gate__card{
  border:1px solid rgba(242,241,237,.13);
  background:rgba(242,241,237,.018);
  padding:clamp(2.25rem, 6vw, 3.5rem) clamp(1.5rem, 5vw, 3.25rem);
  text-align:center;
}

.gate__icon{
  display:block;
  width:clamp(30px, 7vw, 36px);
  margin:0 auto clamp(1.5rem, 3.5vw, 2rem);
  line-height:0;
}
.gate__icon svg{
  width:100%;
  height:auto;
  overflow:visible;
  fill:none;
  stroke:var(--text);
  stroke-width:1.15;
  stroke-linecap:round;
  opacity:.7;
}
.gate__pip{ fill:var(--text); stroke:none; }

.gate__ring{ stroke-dasharray:58.2; stroke-dashoffset:58.2; }
.gate__stem{ stroke-dasharray:5.6;  stroke-dashoffset:5.6; }

.gate__warn{
  max-width:34ch;
  margin:clamp(1.25rem, 3vw, 1.75rem) auto 0;
  font-size:clamp(.94rem, 1.8vw, 1.05rem);
  line-height:1.75;
  color:var(--text);
  opacity:.88;
  text-wrap:pretty;
}

/* ten questions */
.gate__meter{
  margin-top:clamp(2rem, 5vw, 2.75rem);
  padding-top:clamp(1.75rem, 4vw, 2.25rem);
  border-top:1px solid rgba(242,241,237,.09);
}

.gate__dots{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:clamp(.55rem, 1.8vw, .8rem);
  margin-bottom:clamp(1.35rem, 3vw, 1.75rem);
}
.gate__dots li{
  width:9px;
  height:9px;
  border-radius:50%;
  border:1px solid rgba(242,241,237,.32);
  background:transparent;
}

.gate__body{
  max-width:38ch;
  margin-inline:auto;
  font-size:clamp(.94rem, 1.8vw, 1.05rem);
  line-height:1.75;
  color:var(--text);
  opacity:.88;
  text-wrap:pretty;
}

.gate__punch{
  margin-top:clamp(2rem, 5vw, 2.75rem);
  padding-top:clamp(1.75rem, 4vw, 2.25rem);
  border-top:1px solid rgba(242,241,237,.09);
  font-size:clamp(1.02rem, 2vw, 1.2rem);
  font-weight:600;
  line-height:1.6;
  letter-spacing:-.01em;
  text-wrap:balance;
}

.gate__note{
  margin-top:1.1rem;
  font-size:var(--step-sm);
  line-height:1.7;
  color:var(--muted);
  text-wrap:pretty;
}

/* --- gate animation --- */

.js .gate__card{
  opacity:0;
  transform:translate3d(0, 14px, 0);
  transition:opacity .8s cubic-bezier(.22,.61,.36,1),
             transform .8s cubic-bezier(.22,.61,.36,1);
}
.js .gate__ring{ transition:stroke-dashoffset .9s cubic-bezier(.22,.61,.36,1) .15s; }
.js .gate__stem{ transition:stroke-dashoffset .4s cubic-bezier(.22,.61,.36,1) .75s; }
.js .gate__pip{ opacity:0; transition:opacity .3s ease 1s; }

.js .gate__dots li{
  opacity:0;
  transform:scale(.5);
  transition:opacity .45s ease calc(.55s + var(--i, 0) * .07s),
             transform .45s cubic-bezier(.22,.61,.36,1) calc(.55s + var(--i, 0) * .07s),
             background-color .45s ease calc(.55s + var(--i, 0) * .07s),
             border-color .45s ease calc(.55s + var(--i, 0) * .07s);
}

.js .gate__card.is-in{ opacity:1; transform:none; }
.js .gate__card.is-in .gate__ring,
.js .gate__card.is-in .gate__stem{ stroke-dashoffset:0; }
.js .gate__card.is-in .gate__pip{ opacity:1; }
.js .gate__card.is-in .gate__dots li{
  opacity:1;
  transform:none;
  background:rgba(242,241,237,.9);
  border-color:rgba(242,241,237,.9);
}

/* ============================================================
   7. DOWNLOAD
   ============================================================ */

.download{
  padding-block:var(--gap);
  text-align:center;
}

/* ============================================================
   LEGAL / DOCUMENT PAGES  (privacy.html, terms.html)
   ============================================================ */

/* the nav sits on flat black here, not over a photograph */
.nav--solid{
  background:var(--black);
  border-bottom:1px solid rgba(242,241,237,.08);
}

.doc{
  padding-top:calc(var(--nav-h) + clamp(3rem, 8vw, 5.5rem));
  padding-bottom:clamp(4rem, 10vw, 7rem);
}

.doc__col{
  max-width:680px;
  margin-inline:auto;
  padding-inline:clamp(1.25rem, 5vw, 2rem);
  text-align:left;
}

.doc__head{ margin-bottom:clamp(2.5rem, 6vw, 3.5rem); }

.doc__title{
  font-size:clamp(2rem, 6vw, 2.9rem);
  font-weight:700;
  line-height:1.1;
  letter-spacing:-.025em;
}

.doc__meta{
  margin-top:1rem;
  font-size:var(--step-xs);
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
}
.doc__meta strong{ font-weight:600; color:var(--muted); }

/* --- reading column --- */

.doc__col h2{
  margin-top:clamp(2.75rem, 6vw, 3.75rem);
  margin-bottom:1.25rem;
  font-size:clamp(1.15rem, 2.6vw, 1.4rem);
  font-weight:700;
  line-height:1.3;
  letter-spacing:-.012em;
}

.doc__col p{
  margin-top:1.35rem;
  font-size:clamp(1rem, 1.9vw, 1.0625rem);
  line-height:1.85;
  color:var(--text);
  opacity:.9;
  text-wrap:pretty;
}

.doc__col strong{
  font-weight:700;
  opacity:1;
  color:var(--text);
}

.doc__col ul{
  margin-top:1.35rem;
  display:grid;
  gap:.85rem;
}

.doc__col li{
  position:relative;
  padding-left:1.6rem;
  font-size:clamp(1rem, 1.9vw, 1.0625rem);
  line-height:1.8;
  color:var(--text);
  opacity:.9;
  text-wrap:pretty;
}

/* a hairline dash instead of a bullet, matching the site's rules */
.doc__col li::before{
  content:"";
  position:absolute;
  left:0;
  top:.92em;
  width:.7rem;
  height:1px;
  background:var(--muted);
}

.doc__col hr{
  margin:clamp(2.75rem, 6vw, 3.75rem) 0 0;
  border:0;
  height:1px;
  background:var(--rule);
}
/* the rule already spaces the next heading */
.doc__col hr + h2{ margin-top:clamp(2.75rem, 6vw, 3.75rem); }

.doc__col a{
  color:var(--accent);
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-thickness:1px;
  transition:opacity .25s ease;
  overflow-wrap:anywhere;
}
.doc__col a:hover{ opacity:.75; }

/* long URLs may break anywhere; a phone number must not */
.doc__col a[href^="tel:"]{ white-space:nowrap; overflow-wrap:normal; }

/* --- the withdrawal warning: a lit panel on a dark page --- */

.callout{
  margin-top:clamp(2.75rem, 6vw, 3.75rem);
  border:1px solid rgba(242,241,237,.3);
  background:rgba(242,241,237,.07);
  padding:clamp(1.75rem, 5vw, 2.75rem) clamp(1.35rem, 4vw, 2.5rem);
}

.callout__icon{
  display:block;
  width:clamp(28px, 6vw, 34px);
  margin-bottom:1.25rem;
  line-height:0;
}
.callout__icon svg{
  width:100%;
  height:auto;
  fill:none;
  stroke:var(--text);
  stroke-width:1.15;
  stroke-linecap:round;
}
.callout__pip{ fill:var(--text); stroke:none; }

.doc__col .callout__title{
  margin:0 0 .35rem;
  font-size:clamp(1.25rem, 3vw, 1.6rem);
  font-weight:700;
  line-height:1.25;
  letter-spacing:-.018em;
}

/* body copy in here is brighter and a shade larger than the rest of the page */
.callout__body p,
.callout__body li{
  opacity:1;
  font-size:clamp(1.02rem, 2vw, 1.1rem);
  /* fill the measure — `pretty` leaves a ragged edge in a narrow panel */
  text-wrap:normal;
}
.callout__body p:first-child{ margin-top:1.1rem; }
.callout__body li::before{ background:var(--text); }

/* ============================================================
   8. FOOTER
   ============================================================ */

.footer{
  padding-top:clamp(3rem, 7vw, 5rem);
  border-top:1px solid rgba(242,241,237,.07);
}

.footer__grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr)) minmax(0, 1.5fr);
  gap:clamp(2rem, 5vw, 3rem);
  align-items:start;
}

.footer__head{
  color:var(--muted);
  margin-bottom:1.5rem;
}

.footer__col ul{ display:grid; gap:.65rem; }

.footer__col a{
  font-size:var(--step-sm);
  color:var(--text);
  opacity:.78;
  transition:opacity .25s ease;
}
.footer__col a:hover{ opacity:1; }

/* large outlined wordmark, full-bleed, cropped by its own bottom edge */
.wordmark{
  margin-top:clamp(2.5rem, 6vw, 4rem);
  overflow:hidden;
  /* shows roughly the top two thirds of the glyphs */
  height:clamp(78px, 14vw, 170px);
  display:flex;
  justify-content:center;
}
.wordmark img{
  width:100%;
  flex:none;
  opacity:.6;
}

.smallprint{
  text-align:center;
  max-width:62rem;
  margin-inline:auto;
  padding-block:clamp(1.5rem, 4vw, 2.25rem) calc(clamp(1.75rem, 4vw, 2.5rem) + env(safe-area-inset-bottom));
  font-size:var(--step-xs);
  line-height:1.85;
  letter-spacing:.01em;
  color:var(--muted-dim);
  text-wrap:pretty;
}
.smallprint a{ color:var(--muted); text-decoration:underline; text-underline-offset:2px; }

/* ============================================================
   SCROLL REVEAL
   ============================================================ */

.js [data-reveal]{
  opacity:0;
  transform:translate3d(0, 14px, 0);
  transition:opacity .8s cubic-bezier(.22,.61,.36,1),
             transform .8s cubic-bezier(.22,.61,.36,1);
  will-change:opacity, transform;
}
.js [data-reveal].is-in{
  opacity:1;
  transform:none;
}
/* stagger: set --i on the element, e.g. style="--i:3" */
.js [data-reveal]{ transition-delay:calc(var(--i, 0) * .085s); }

/* [data-seq] is a container that is never hidden itself — it only carries
   the .is-in flag that its children animate from. */

/* no JS: the .js hook above is never added, so nothing is ever hidden */

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 860px){
  .footer__grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .footer__col--signup{ grid-column:1 / -1; }
}

/* the hero's three columns need more room now the CTA is a form */
@media (max-width: 900px){
  /* stack: headline, subline, phone, capture */
  .hero__stage{
    grid-template-columns:1fr;
    justify-items:center;
    text-align:center;
    gap:2.25rem;
    --hero-lift:0px;
  }
  .hero__sub{ max-width:34ch; }
  .hero__phone{
    grid-column:auto;
    width:min(74vw, 300px);
  }
  .hero__cta{
    grid-column:auto;
    justify-self:center;
    width:100%;
    max-width:22rem;
    top:0;
  }
}

@media (max-width: 720px){
  :root{ --nav-h:56px; }

  /* nav: logo stays centred, links collapse to DOWNLOAD only */
  .nav__links--left{ display:none; }

  .shell{ background-position:50% 26%; }

  .hero{ padding-top:calc(var(--nav-h) + 3.25rem); }
  .hero__title{ max-width:14ch; }

  .hero__sub{ font-size:.9375rem; }

  /* the CTA stretches to the column and the dialog fills more of the screen */
  .cta, .cta--lg{ width:100%; height:56px; padding:0 24px; font-size:14px; }
  /* top-aligned, not centred: the keyboard eats the lower half */
  .wl[open]{ place-items:start center; }
  .wl{ padding-top:max(1.25rem, env(safe-area-inset-top)); }
  .wl__panel{ padding:1.75rem 1.5rem; }

  .pillars__grid{ grid-template-columns:1fr; gap:3.25rem; }
  .pillar__body{ max-width:34ch; }

  /* bleed the wordmark past both edges so its outline stays legible */
  .wordmark{ height:clamp(84px, 24vw, 120px); }
  .wordmark img{ width:175%; }
}

@media (max-width: 460px){
  .footer__grid{ grid-template-columns:1fr; }
}

/* ============================================================
   MOTION / PRINT
   ============================================================ */

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .wl[open] .wl__panel, .wl[open]::backdrop{ animation:none; }
  .js [data-reveal],
  .js .gate__card,
  .js .strike__text,
  .js .gate__dots li{ opacity:1; transform:none; }
  .js .mark__ring, .js .mark__slash,
  .js .gate__ring, .js .gate__stem{ stroke-dashoffset:0; }
  .js .gate__pip{ opacity:1; }
  .js .strike::before,
  .js .strike:last-child::after{ transform:scaleX(1); }
  .js .gate__dots li{
    background:rgba(242,241,237,.9);
    border-color:rgba(242,241,237,.9);
  }
}

/* anchored sections clear the fixed nav */
[id]{ scroll-margin-top:calc(var(--nav-h) + 1.5rem); }