:root{
  --ink:#000000;
  --paper:#FFFFFF;
  --muted:#3F3F46;
  --accent:#1F3BFF;
  --display:Anton,Impact,sans-serif;
  --body:'Inter Tight',system-ui,sans-serif;
  --hero:clamp(72px,10vw,150px);
  --word-h:150px;
  --drum-r:108px;
  --drum-h:170px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body)}
a{color:var(--ink)}
a:hover{color:var(--accent)}
a:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
img{display:block;max-width:100%;height:auto}

.page{width:100%;overflow-x:clip}
.wrap{max-width:1280px;margin:0 auto;padding:0 32px}
.display{font-family:var(--display);font-weight:400;line-height:1;text-transform:uppercase}

/* header */
.top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;padding:24px 0}
.logo{font-family:var(--display);font-size:26px;text-decoration:none;text-transform:uppercase}
.nav{display:flex;flex-wrap:wrap;gap:28px;font-size:16px;font-weight:500}
.nav a{text-decoration:none}
.nav a[aria-current="page"]{color:var(--accent)}
.pill{display:inline-flex;align-items:center;min-height:46px;padding:0 22px;background:var(--ink);color:var(--paper);border-radius:999px;font-weight:600;text-decoration:none;transition:background .2s}
.pill:hover{background:var(--accent);color:var(--paper)}
.pill--accent{background:var(--accent);min-height:58px;padding:0 32px;font-size:18px}
.pill--accent:hover{background:var(--ink)}

/* hero */
.hero{padding:64px 0 40px}
.hero .display{font-size:var(--hero)}
.hero p.display{margin:0 0 8px}
.hero h1{margin:8px 0 0}
.drum-box{position:relative;height:var(--drum-h);perspective:900px;perspective-origin:0 50%;overflow:hidden}
.drum{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateX(0deg)}
.word{position:absolute;left:0;right:0;top:50%;height:var(--word-h);margin-top:calc(var(--word-h) / -2);display:flex;align-items:center;font-family:var(--display);font-size:var(--hero);line-height:1;text-transform:uppercase;white-space:nowrap;color:var(--accent);backface-visibility:hidden;-webkit-backface-visibility:hidden}
.word:nth-child(1){transform:rotateX(0deg) translateZ(var(--drum-r))}
.word:nth-child(2){transform:rotateX(-72deg) translateZ(var(--drum-r))}
.word:nth-child(3){transform:rotateX(-144deg) translateZ(var(--drum-r))}
.word:nth-child(4){transform:rotateX(-216deg) translateZ(var(--drum-r))}
.word:nth-child(5){transform:rotateX(-288deg) translateZ(var(--drum-r))}
.hero-foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:32px;margin-top:48px}
.lede{margin:0;max-width:520px;font-size:19px;line-height:1.6;color:var(--muted)}

/* marquee lines */
.ticker{padding:80px 0;font-family:var(--display);font-size:clamp(64px,9vw,140px);line-height:1.02;text-transform:uppercase;white-space:nowrap;color:var(--accent)}
.ticker p{margin:0}

/* services */
.eyebrow{margin:0 0 32px;font-size:20px;font-weight:600}
.services{padding:48px 0 96px}
.rows{border-top:2px solid var(--ink)}
.row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:16px;padding:22px 0;border-bottom:2px solid var(--ink)}
.row h3{margin:0;font-size:clamp(48px,7vw,104px)}
.row p{margin:0;max-width:360px;font-size:17px;line-height:1.55;color:var(--muted)}

/* steps */
.steps{padding:48px 0 96px;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:32px}
.steps .num{margin:0 0 8px;font-family:var(--display);font-size:72px;line-height:1;color:var(--accent)}
.steps h3{margin:0 0 6px;font-size:20px}
.steps p:last-child{margin:0;line-height:1.55;color:var(--muted)}

/* templates teaser */
.templates{padding:48px 0 96px}
.templates-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:32px}
.templates-head h2{margin:0;font-size:clamp(48px,7vw,104px)}
.more{font-weight:600;font-size:18px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px}
.card{display:block;text-decoration:none;border:2px solid var(--ink);border-radius:28px;overflow:hidden;transition:border-color .2s}
.card:hover{border-color:var(--accent)}
.card img{aspect-ratio:16/10;object-fit:cover;width:100%;border-bottom:2px solid var(--ink)}
.card-body{padding:24px 28px 28px}
.card h3{margin:0 0 8px;font-size:40px}
.card p{margin:0;line-height:1.55;color:var(--muted)}
.card--wide{display:grid;grid-template-columns:1.6fr 1fr;align-items:stretch}
.card--wide img{height:100%;border-bottom:0;border-right:2px solid var(--ink)}
.card--wide .card-body{display:flex;flex-direction:column;justify-content:flex-end;gap:16px;padding:36px}
.card--wide h3{margin:0;font-size:clamp(48px,6vw,88px)}
.card--wide .pill{align-self:flex-start}
.card--wide:hover .pill{background:var(--ink);color:var(--paper)}
@media (max-width:820px){
  .card--wide{grid-template-columns:1fr}
  .card--wide img{height:auto;border-right:0;border-bottom:2px solid var(--ink)}
  .card--wide .card-body{padding:24px 24px 28px}
}

/* pricing */
.pricing{padding:48px 0 96px;display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px}
.plan{padding:36px;border:2px solid var(--ink);border-radius:28px}
.plan h3{margin:0 0 6px;font-size:20px}
.plan .price{margin:0 0 14px;font-family:var(--display);font-size:64px;line-height:1}
.plan p:last-child{margin:0;color:var(--muted)}
.plan--hot{background:var(--accent);border-color:var(--accent);color:var(--paper)}
.plan--hot p:last-child{color:var(--paper)}

/* contact */
.hello{padding:96px 0;border-top:2px solid var(--ink)}
.hello h2{margin:0 0 32px;font-size:clamp(80px,13vw,200px);line-height:.92}
.hello-links{display:flex;flex-wrap:wrap;align-items:center;gap:24px 40px}
.mail{font-size:clamp(22px,2.6vw,36px);font-weight:600;overflow-wrap:anywhere}

.foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;padding:24px 0 36px;font-size:15px;color:var(--muted)}
.foot span:last-child{display:flex;gap:20px}

/* phones: shrink the drum so long words fit */
@media (max-width:640px){
  .wrap{padding:0 16px}
  :root{--hero:clamp(40px,12.5vw,72px);--word-h:80px;--drum-r:56px;--drum-h:92px}
  .nav{gap:20px}
  .hero{padding:32px 0 24px}
  .ticker{padding:48px 0}
  .steps,.pricing,.services,.templates{padding-bottom:64px}
  .plan{padding:28px}
  .hello{padding:64px 0}
}

@media (prefers-reduced-motion:no-preference){
  .drum{animation:roll 10s cubic-bezier(.7,0,.3,1) infinite}
  @keyframes roll{0%,16%{transform:rotateX(0deg)}20%,36%{transform:rotateX(72deg)}40%,56%{transform:rotateX(144deg)}60%,76%{transform:rotateX(216deg)}80%,96%{transform:rotateX(288deg)}100%{transform:rotateX(360deg)}}
}

/* ---------- inner pages ---------- */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.page-head{padding:56px 0 48px}
.page-head h1{margin:0;font-size:clamp(80px,13vw,200px);line-height:.92}
.page-head .lede{margin-top:28px}
.tag-list{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.tag-list li{padding:8px 16px;border:2px solid var(--ink);border-radius:999px;font-size:15px;font-weight:500}
.actions{display:flex;flex-wrap:wrap;gap:12px}

/* templates */
.feature{padding:24px 0 96px}
.shot{display:block;border:2px solid var(--ink);border-radius:28px;overflow:hidden;transition:border-color .2s}
.shot:hover{border-color:var(--accent)}
.shot img{width:100%;aspect-ratio:16/10;object-fit:cover}
.feature-body{display:grid;grid-template-columns:1fr 1fr;gap:32px 48px;padding:40px 0 0;border-bottom:2px solid var(--ink);padding-bottom:48px}
.feature-name{display:flex;align-items:flex-start;gap:20px}
.feature-name .num{margin:6px 0 0;font-family:var(--display);font-size:40px;line-height:1;color:var(--accent)}
.feature-name h2{margin:0;font-size:clamp(72px,11vw,170px);line-height:.9}
.feature-info{display:flex;flex-direction:column;gap:24px}
.feature-info > p{margin:0;font-size:19px;line-height:1.6;color:var(--muted)}
.inside{margin:0;padding:0;list-style:none;border-top:2px solid var(--ink)}
.inside li{display:flex;justify-content:space-between;gap:16px;padding:14px 0;border-bottom:1px solid var(--ink);font-size:17px}
.inside li span:first-child{font-weight:600}
.inside li span:last-child{color:var(--muted);text-align:right}
.pill--line{background:transparent;color:var(--ink);border:2px solid var(--ink)}
.pill--line:hover{background:var(--ink);color:var(--paper)}
.next-up{padding:96px 0;border-top:2px solid var(--ink)}
.next-up h2{margin:0 0 32px;font-size:clamp(64px,10vw,150px);line-height:.92}

/* contact */
.contact-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:48px;padding:16px 0 96px;align-items:start}
.form{display:grid;gap:22px}
.field label,.field .label{display:block;margin-bottom:8px;font-size:16px;font-weight:600}
.field input,.field select,.field textarea{width:100%;min-height:56px;padding:14px 18px;border:2px solid var(--ink);border-radius:16px;background:var(--paper);color:var(--ink);font:inherit;font-size:17px}
.field textarea{min-height:150px;resize:vertical;line-height:1.5}
.field select{appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%);background-position:calc(100% - 24px) 50%,calc(100% - 18px) 50%;background-size:6px 6px;background-repeat:no-repeat;padding-right:48px}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-color:var(--accent)}
.field ::placeholder{color:#71717A}
.two{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.consent{margin:0;padding:24px 0 0;border:0;border-top:2px solid var(--ink);display:grid;gap:14px}
.consent legend{padding:0 0 12px;font-size:20px;font-weight:600}
.check{display:flex;gap:12px;font-size:15px;line-height:1.55;color:var(--muted)}
.check input{flex:none;width:22px;height:22px;margin:1px 0 0;accent-color:var(--accent)}
.fine{margin:0;font-size:14px;line-height:1.55;color:var(--muted)}
.submit-row{display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px}
.submit-row .pill{border:0;cursor:pointer;font-family:inherit}
.next{position:sticky;top:112px;padding:36px;background:var(--accent);color:var(--paper);border-radius:28px}
.next h2{margin:0 0 24px;font-size:20px}
.next ol{margin:0;padding:0;list-style:none;display:grid;gap:20px}
.next li{display:grid;grid-template-columns:48px 1fr;gap:12px;line-height:1.5}
.next li span{font-family:var(--display);font-size:40px;line-height:1}
.next a{color:var(--paper)}
.next .mail-small{display:inline-block;margin-top:28px;font-weight:600;overflow-wrap:anywhere}

@media (max-width:820px){
  .feature-body,.contact-grid{grid-template-columns:1fr}
  .next{position:static}
}
@media (max-width:640px){
  .page-head{padding:32px 0 32px}
  .two{grid-template-columns:1fr}
  .feature{padding-bottom:64px}
  .next-up{padding:64px 0}
  .next{padding:28px}
  .contact-grid{padding-bottom:64px}
}

/* =========================================================
   Liquid glass layer
   A drifting light field sits behind everything; surfaces are
   frosted, saturated glass with a specular rim and a highlight
   that follows the pointer (--mx/--my, set in glass.js).
   ========================================================= */
:root{
  --glass:rgba(255,255,255,.46);
  --glass-strong:rgba(255,255,255,.64);
  --glass-edge:rgba(255,255,255,.75);
  --glass-line:rgba(0,0,0,.14);
  --glass-blur:blur(22px) saturate(185%);
  --glass-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 -1px 0 rgba(255,255,255,.35) inset,0 0 0 1px rgba(255,255,255,.35) inset,0 18px 50px -18px rgba(20,30,120,.28),0 2px 6px rgba(20,30,120,.06);
  --tint:rgba(31,59,255,.78);
}
body{background:#F4F6FF;position:relative;isolation:isolate}
body::before,body::after{content:"";position:fixed;inset:-20vmax;z-index:-1;pointer-events:none}
body::before{
  background:
    radial-gradient(40vmax 40vmax at 10% 22%,rgba(31,59,255,.75),transparent 62%),
    radial-gradient(36vmax 36vmax at 90% 14%,rgba(0,194,255,.65),transparent 64%),
    radial-gradient(42vmax 42vmax at 78% 80%,rgba(124,92,255,.65),transparent 62%),
    radial-gradient(32vmax 32vmax at 22% 90%,rgba(255,122,217,.5),transparent 64%),
    radial-gradient(30vmax 24vmax at 58% 48%,rgba(80,120,255,.38),transparent 66%),
    radial-gradient(22vmax 22vmax at 38% 60%,rgba(0,194,255,.28),transparent 66%);
}
body::after{
  background:radial-gradient(40vmax 26vmax at 30% 30%,rgba(255,255,255,.35),transparent 70%);
}
@media (prefers-reduced-motion:no-preference){
  body::before{animation:drift 28s ease-in-out infinite alternate}
  @keyframes drift{
    0%{transform:translate3d(0,0,0) rotate(0deg) scale(1)}
    50%{transform:translate3d(4vmax,-3vmax,0) rotate(8deg) scale(1.06)}
    100%{transform:translate3d(-3vmax,4vmax,0) rotate(-6deg) scale(1)}
  }
}

/* the glass recipe */
.top,.foot,.rows,.steps>div,.card,.plan,.hello,.shot,.feature-body,.next-up,.form,.next,.tag-list li,.pill,.lede-glass{
  position:relative;
  background:var(--glass);
  -webkit-backdrop-filter:var(--glass-blur);
  backdrop-filter:var(--glass-blur);
  box-shadow:var(--glass-shadow);
  border:1px solid var(--glass-edge);
  isolation:isolate;
}
/* specular sheen + pointer highlight */
.top::before,.rows::before,.steps>div::before,.card::before,.plan::before,.hello::before,.feature-body::before,.next-up::before,.form::before,.next::before,.pill::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;
  background:
    radial-gradient(420px circle at var(--mx,30%) var(--my,0%),rgba(255,255,255,.55),transparent 45%),
    linear-gradient(135deg,rgba(255,255,255,.55) 0%,rgba(255,255,255,0) 38%,rgba(255,255,255,0) 70%,rgba(255,255,255,.25) 100%);
  mix-blend-mode:soft-light;
  opacity:.9;
}

/* header: floating glass bar */
.top{position:sticky;top:14px;z-index:20;margin-top:14px;padding:10px 10px 10px 26px;border-radius:999px}
.nav a{padding:8px 14px;border-radius:999px;transition:background .2s}
.nav a:hover{background:rgba(255,255,255,.6);color:var(--ink)}
.nav a[aria-current="page"]{background:rgba(255,255,255,.75);box-shadow:0 1px 0 #fff inset,0 4px 14px -6px rgba(31,59,255,.45);color:var(--accent)}
.nav{gap:4px}

/* pills become liquid drops */
.pill{background:rgba(0,0,0,.82);border-color:rgba(255,255,255,.28);box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 -2px 6px rgba(255,255,255,.08) inset,0 10px 24px -10px rgba(0,0,0,.5);overflow:hidden;transition:transform .25s cubic-bezier(.2,.9,.3,1.4),background .2s}
.pill:hover{transform:translateY(-2px) scale(1.03)}
.pill:active{transform:scale(.97)}
.pill--accent{background:var(--tint);border-color:rgba(255,255,255,.45);box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 -3px 8px rgba(0,0,40,.25) inset,0 14px 30px -12px rgba(31,59,255,.75)}
.pill--accent:hover{background:rgba(20,40,230,.9)}
.pill--line{background:var(--glass-strong);color:var(--ink);border:1px solid var(--glass-edge);box-shadow:var(--glass-shadow)}
.pill--line:hover{background:rgba(255,255,255,.85);color:var(--ink)}

/* homepage panels */
.lede{color:#2E2E36}
.rows{border-top:1px solid var(--glass-edge);border-radius:32px;padding:8px 32px}
.row{border-bottom:1px solid var(--glass-line)}
.row:last-child{border-bottom:0}
.steps>div{padding:28px;border-radius:28px}
.card{border-radius:32px}
.card:hover{border-color:#fff;box-shadow:var(--glass-shadow),0 24px 60px -20px rgba(31,59,255,.45)}
.card img,.card--wide img{border-color:var(--glass-edge)}
.plan{border-radius:32px}
.plan--hot{background:var(--tint);border-color:rgba(255,255,255,.45);color:#fff}
.hello{border-top:1px solid var(--glass-edge);border-radius:40px;padding:72px 56px;margin-bottom:24px}
.foot{border-radius:999px;padding:16px 28px;margin-bottom:24px;color:#2E2E36}
.foot a{text-decoration:none}

/* templates page */
.shot{border-radius:32px;padding:10px}
.shot img{border-radius:24px}
.shot:hover{border-color:#fff}
.feature-body{border-bottom:1px solid var(--glass-edge);border-radius:32px;margin-top:20px;padding:40px}
.tag-list li{background:var(--glass-strong);border:1px solid var(--glass-edge)}
.inside{border-top:1px solid var(--glass-line)}
.inside li{border-bottom:1px solid var(--glass-line)}
.next-up{border-top:1px solid var(--glass-edge);border-radius:40px;padding:72px 56px;margin-bottom:24px}

/* contact page: the full liquid treatment */
.form{padding:40px;border-radius:36px;background:rgba(255,255,255,.4)}
.field input,.field select,.field textarea{
  border:1px solid rgba(255,255,255,.85);
  background:rgba(255,255,255,.55);
  -webkit-backdrop-filter:blur(10px) saturate(160%);backdrop-filter:blur(10px) saturate(160%);
  box-shadow:0 2px 6px rgba(20,30,120,.10) inset,0 1px 0 rgba(255,255,255,.95);
  transition:background .2s,box-shadow .2s,border-color .2s;
}
.field input:hover,.field select:hover,.field textarea:hover{background:rgba(255,255,255,.7)}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{outline:0;border-color:#fff;background:rgba(255,255,255,.85);box-shadow:0 0 0 4px rgba(31,59,255,.28),0 2px 6px rgba(20,30,120,.08) inset}
.consent{border-top:1px solid var(--glass-line)}
.check{color:#2E2E36}
.fine{color:#3F3F46}
.next{background:linear-gradient(160deg,rgba(60,90,255,.82),rgba(31,59,255,.72) 55%,rgba(110,80,255,.78));border-color:rgba(255,255,255,.5);box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 -10px 30px rgba(0,0,60,.18) inset,0 30px 70px -24px rgba(31,59,255,.7);border-radius:36px}
.next li span{text-shadow:0 2px 12px rgba(255,255,255,.35)}
.page-head .lede-glass{display:inline-block;padding:18px 24px;border-radius:24px}

/* browsers without backdrop-filter: keep text readable */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .top,.foot,.rows,.steps>div,.card,.plan,.hello,.shot,.feature-body,.next-up,.form,.tag-list li,.pill--line{background:rgba(255,255,255,.9)}
}

@media (max-width:820px){
  .top{position:relative;top:0;border-radius:28px;padding:16px 18px}
}
@media (max-width:640px){
  .rows{padding:4px 20px;border-radius:24px}
  .hello,.next-up{padding:48px 24px;border-radius:28px}
  .form{padding:22px;border-radius:28px}
  .feature-body{padding:24px;border-radius:24px}
  .foot{border-radius:24px;padding:16px 20px}
  .steps>div{padding:22px}
}

/* privacy policy: one long glass sheet, set for reading */
.policy{
  position:relative;isolation:isolate;max-width:860px;margin:0 0 96px;padding:56px 64px;border-radius:40px;
  background:var(--glass-strong);border:1px solid var(--glass-edge);box-shadow:var(--glass-shadow);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  font-size:18px;line-height:1.7;color:#26262C;
}
.policy::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;
  background:radial-gradient(520px circle at var(--mx,20%) var(--my,0%),rgba(255,255,255,.55),transparent 45%),linear-gradient(135deg,rgba(255,255,255,.55),rgba(255,255,255,0) 40%);
  mix-blend-mode:soft-light}
.policy>p:first-child{margin-top:0;font-size:20px;color:var(--ink)}
.policy h2{margin:48px 0 12px;padding-top:28px;border-top:1px solid var(--glass-line);font-family:var(--display);font-weight:400;font-size:clamp(32px,4vw,48px);line-height:1;text-transform:uppercase;color:var(--ink)}
.policy h3{margin:28px 0 6px;font-size:19px;font-weight:600;color:var(--ink)}
.policy p{margin:0 0 14px}
.policy ul{margin:0 0 14px;padding-left:22px}
.policy li{margin:6px 0}
.policy li::marker{color:var(--accent)}
.policy a{color:var(--accent);text-underline-offset:3px}
.foot span:first-child a{text-decoration:underline;text-underline-offset:3px}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.policy{background:rgba(255,255,255,.92)}}
@media (max-width:640px){.policy{padding:28px 22px;border-radius:28px;font-size:17px;margin-bottom:64px}.policy h2{margin-top:36px}}

/* =========================================================
   Phone fixes
   ========================================================= */
/* iOS 15 and older ignore overflow:clip; hidden stops sideways scroll there */
.page{overflow-x:hidden;overflow-x:clip}

/* grids must be allowed to shrink below their content */
.two{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.feature-body{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}

/* page titles scale with the screen so long words fit */
.page-head h1{font-size:clamp(48px,17.5vw,200px)}
.feature-name h2{font-size:clamp(56px,11vw,170px)}

/* email links break only after the @ (a <wbr> in the markup) */
.mail{overflow-wrap:normal;word-break:normal;font-size:clamp(18px,2.6vw,36px)}

/* bigger tap targets */
.more{display:inline-flex;align-items:center;min-height:44px}
.foot span:last-child{flex-wrap:wrap;column-gap:20px}
.foot a{display:inline-flex;align-items:center;min-height:44px}
.check input{width:24px;height:24px}

/* touch screens: no sticky hover lift or hover tint after a tap */
@media (hover:none){
  .pill:hover{transform:none}
  .nav a:not([aria-current]):hover{background:transparent;color:var(--ink)}
  .card:hover{box-shadow:var(--glass-shadow)}
}

@media (max-width:820px){
  .feature-body{grid-template-columns:minmax(0,1fr)}
  .feature-name h2{font-size:clamp(56px,17vw,120px)}
}

@media (max-width:640px){
  /* header: logo + button on one row, the three links share the row below */
  .top{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px 10px;padding:10px 10px 10px 18px;border-radius:26px}
  .logo{font-size:22px;white-space:nowrap}
  .top>.pill{min-height:42px;padding:0 16px;font-size:14px}
  .nav{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}
  .nav a{display:flex;align-items:center;justify-content:center;min-height:44px;padding:0 4px;font-size:15px}

  /* calmer section rhythm */
  .hero{padding:28px 0 16px}
  .hero-foot{margin-top:28px;gap:24px}
  .ticker{padding:32px 0;font-size:clamp(40px,13vw,64px)}
  .services,.templates{padding:24px 0 48px}
  .steps{padding:0 0 48px;gap:14px}
  .eyebrow{margin-bottom:18px}
  .hello h2,.next-up h2{font-size:clamp(56px,17vw,96px)}
  .mail{font-size:clamp(18px,5.6vw,26px)}
  .hello,.next-up{padding:40px 22px}
  .feature{padding:8px 0 48px}
  .page-head{padding:28px 0 24px}
  .page-head .lede-glass{display:block}

  /* footer stacks cleanly */
  .foot{flex-direction:column;align-items:flex-start;gap:0;padding:10px 20px;border-radius:24px}
}

/* very small phones: drop the header button (every page has its own call to action) */
@media (max-width:379px){
  .top{grid-template-columns:minmax(0,1fr)}
  .top>.pill{display:none}
}

/* logo is a tap target too */
.logo{display:inline-flex;align-items:center;min-height:44px}

@media (max-width:640px){
  .foot span:last-child{display:grid;grid-template-columns:repeat(2,max-content);column-gap:32px}
}
@media (min-width:420px) and (max-width:640px){
  .foot span:last-child{grid-template-columns:repeat(4,max-content);column-gap:20px}
}

/* "What happens next" card: sticky beside the form on wide screens, in normal flow
   below it on narrow ones (the glass recipe's position:relative must not keep the offset) */
.next{position:sticky;top:112px}
@media (max-width:820px){.next{position:relative;top:auto}}
@media (max-width:640px){.foot span:last-child{row-gap:0}}

/* =========================================================
   3D scroll effects (driven by motion.js)
   Transforms and opacity only: nothing changes size, so text
   never jumps to another line while scrolling.
   ========================================================= */
.motion [data-3d]{will-change:transform,opacity;backface-visibility:hidden;-webkit-backface-visibility:hidden}

/* hero and page titles fall back into the screen as you scroll past */
.motion [data-3d="exit"]{
  transform:perspective(1000px) translate3d(0,calc(var(--x,0) * -40px),calc(var(--x,0) * -180px)) rotateX(calc(var(--x,0) * 24deg));
  transform-origin:50% 0;
  opacity:calc(1 - var(--x,0) * .85);
}

/* glass panels rise up and lean back into place */
.motion [data-3d="rise"]{
  transform:perspective(1200px) translate3d(0,calc((1 - var(--p,1)) * 70px),0) rotateX(calc((1 - var(--p,1)) * 16deg));
  transform-origin:50% 0;
  opacity:calc(.2 + var(--p,1) * .8);
}

/* cards swing in from depth, alternating sides */
.motion [data-3d="tilt"]{
  transform:perspective(1000px) translate3d(0,calc((1 - var(--p,1)) * 80px),calc((1 - var(--p,1)) * -140px)) rotateX(calc((1 - var(--p,1)) * 22deg)) rotateY(calc((1 - var(--p,1)) * var(--dir,0) * 16deg));
  transform-origin:50% 100%;
  opacity:calc(.15 + var(--p,1) * .85);
}
.motion .steps>div:nth-child(odd){--dir:-1}
.motion .steps>div:nth-child(even){--dir:1}
.motion .card,.motion .shot{--dir:-1}
.motion .next{--dir:1}

/* service rows flip up like a split-flap board */
.motion .rows{perspective:900px}
.motion [data-3d="flip"]{
  transform:rotateX(calc((1 - var(--p,1)) * -82deg)) translate3d(0,calc((1 - var(--p,1)) * 24px),0);
  transform-origin:50% 0;
  opacity:calc(var(--p,1));
}

/* the big type bands slide across and rock in 3D */
.motion .ticker{perspective:700px}
.motion .ticker p{will-change:transform}
.motion .ticker .left{transform:translate3d(calc(var(--t,.5) * -32%),0,0) rotateX(calc((var(--t,.5) - .5) * -50deg))}
.motion .ticker .right{transform:translate3d(calc(-32% + var(--t,.5) * 32%),0,0) rotateX(calc((var(--t,.5) - .5) * 50deg))}

/* phones: lighter glass and a still background keep scrolling smooth */
@media (max-width:820px),(hover:none){
  :root{--glass-blur:blur(14px) saturate(170%)}
  body::before{animation:none}
}