/* ═══════════════════════════════════════════════════════════
   RUHLY
   ═══════════════════════════════════════════════════════════ */
@property --ang { syntax:'<angle>'; initial-value:0deg; inherits:false; }

:root{
  --bg:#000; --bg-1:#0a0a0c; --bg-2:#131316;
  --card:rgba(255,255,255,.045); --card-2:rgba(255,255,255,.075);
  --line:rgba(255,255,255,.11); --line-2:rgba(255,255,255,.2);
  --fg:#f5f5f7; --fg-2:#a1a1a6; --fg-3:#6e6e73;
  --accent:#f5f5f7; --accent-ink:#0a0a0c;
  --tint:rgba(255,255,255,.09); --tint-line:rgba(255,255,255,.24);
  --glass:rgba(255,255,255,.08); --glass-hi:rgba(255,255,255,.28);
  --wm-dark:none; --wm-light:block;

  /* hero sky — dark mode, lifted off black */
  --n0:#0d1030; --n1:#232358; --n2:#453f81; --n3:#7d6d9e; --n4:#bda8c4;
  /* hero sky — day */
  --d0:#0f6ed4; --d1:#3f8fe0; --d2:#7fb3ea; --d3:#b9cdf0; --d4:#e9edf7;

  --ios-green:#30d158; --ios-blue:#0a84ff;

  --sans:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Inter",
         "Segoe UI Variable Display","Segoe UI",system-ui,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  --arabic:"SF Arabic","Geeza Pro","Noto Naskh Arabic","Amiri",serif;
  --pad:26px; --max:1180px;
  --ease:cubic-bezier(.16,1,.3,1);
  --spring:cubic-bezier(.32,1.4,.5,1);
}
html[data-theme="white"], html[data-theme="rose"], html[data-theme="azure"]{
  --bg:#fff; --bg-1:#f5f5f7; --bg-2:#ececee;
  --card:rgba(0,0,0,.026); --card-2:rgba(0,0,0,.05);
  --line:rgba(0,0,0,.11); --line-2:rgba(0,0,0,.2);
  --fg:#1d1d1f; --fg-2:#6e6e73; --fg-3:#86868b;
  --accent:#1d1d1f; --accent-ink:#fff;
  --tint:rgba(0,0,0,.05); --tint-line:rgba(0,0,0,.16);
  --glass:rgba(255,255,255,.55); --glass-hi:rgba(255,255,255,.9);
  --wm-dark:block; --wm-light:none;
  --n0:#1170d8; --n1:#3f8fe0; --n2:#7fb3ea; --n3:#b9cdf0; --n4:#e9edf7;
  --d0:#7fc0f5; --d1:#a8d4f8; --d2:#cbe4fb; --d3:#e6f1fd; --d4:#ffffff;
}
html[data-theme="rose"]{
  --accent:#c2436f; --accent-ink:#fff;
  --tint:rgba(194,67,111,.09); --tint-line:rgba(194,67,111,.28);
  --bg-1:#faf3f6; --bg-2:#f3e6ec;
  --n0:#b82f60; --n1:#d46b90; --n2:#e8a3bd; --n3:#f3cede; --n4:#fdf2f6;
  --d0:#eda9c2; --d1:#f4c8da; --d2:#f9dfea; --d3:#fdf0f5; --d4:#fff;
}
/* azure runs its own sky: deep ocean into ice, rather than white's plain
   blue-to-pale ramp, so the two light themes don't read as the same page */
html[data-theme="azure"]{
  --accent:#0a63cf; --accent-ink:#fff;
  --tint:rgba(10,99,207,.09); --tint-line:rgba(10,99,207,.28);
  --bg-1:#f1f7fb; --bg-2:#e2eef6;
  --n0:#021b33; --n1:#063a5e; --n2:#0d6b93; --n3:#3fa3bc; --n4:#a8dbe6;
  --d0:#1291c9; --d1:#4bb8dc; --d2:#8ad8ea; --d3:#c6edf6; --d4:#f4fcfe;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; overflow-x:clip}
body{margin:0; background:var(--bg); color:var(--fg); font-family:var(--sans);
  font-size:16px; line-height:1.5; -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale; overflow-x:clip; letter-spacing:-.014em;
  transition:background .6s var(--ease), color .6s var(--ease)}
img,svg{display:block; max-width:100%}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer}
input,textarea{font:inherit}
::selection{background:var(--accent); color:var(--accent-ink)}

.wrap{width:100%; max-width:var(--max); margin-inline:auto; padding-inline:var(--pad)}
.sec{position:relative; padding-block:clamp(54px,5.4vw,86px); scroll-margin-top:88px}

h1,h2,h3,h4{margin:0; font-weight:700; letter-spacing:-.038em; line-height:1.04}
.d1{font-size:clamp(2.1rem,4.6vw,3.7rem); line-height:1; letter-spacing:-.045em}
.d2{font-size:clamp(1.85rem,3.7vw,2.9rem); letter-spacing:-.042em; line-height:1.06}
.lede{font-size:clamp(.98rem,1.15vw,1.08rem); color:var(--fg-2); line-height:1.55; font-weight:400}
.lede b{color:var(--fg); font-weight:600}
.label{font-size:.85rem; font-weight:640; color:var(--fg-3); letter-spacing:0}
/* tracking is size-specific: display type is tightened above, and the
   smallest text gets a touch of positive tracking so it stays legible */
.fcard-txt p,.gcell p,.row p,.faq p,.pact,.chip,.tag-pill,.rail-hint,
.foot a.lnk,.foot-bot,.wiz-err,.step .hint{letter-spacing:.004em}

/* logos */
.wm{height:22px; width:auto}
.wm--l{display:var(--wm-light)} .wm--d{display:var(--wm-dark)}
.ico-mark{height:24px; width:auto}
.ico-mark--l{display:var(--wm-light)} .ico-mark--d{display:var(--wm-dark)}

/* iridescent edge */
.edge{position:relative; isolation:isolate}
.edge::before{content:''; position:absolute; inset:0; border-radius:inherit; padding:1px;
  background:conic-gradient(from var(--ang), transparent 0deg, rgba(190,214,245,.7) 60deg,
    rgba(240,215,250,.75) 130deg, rgba(205,245,232,.6) 200deg, rgba(255,232,208,.7) 270deg, transparent 340deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite:exclude; opacity:.5; transition:opacity .6s var(--ease);
  animation:sheen 7s linear infinite; pointer-events:none; z-index:1}
.edge:hover::before{opacity:1}
@keyframes sheen{to{--ang:360deg}}

/* buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:9px;
  height:50px; padding:0 24px; border-radius:14px; font-size:.97rem; font-weight:600;
  letter-spacing:-.016em; white-space:nowrap; position:relative;
  transition:transform .5s var(--ease), background .4s var(--ease), box-shadow .5s var(--ease)}
.btn:hover{transform:translateY(-2px)} .btn:active{transform:scale(.98)}
.btn--fill{background:var(--fg); color:var(--bg)}
.btn--glass{background:var(--glass); color:var(--fg);
  -webkit-backdrop-filter:blur(26px) saturate(200%); backdrop-filter:blur(26px) saturate(200%);
  box-shadow:inset 0 1px 0 var(--glass-hi), 0 8px 26px rgba(0,0,0,.16)}
.btn--glass:hover{background:var(--card-2)}
.on-sky{color:#fff}
.on-sky.btn--glass{background:rgba(255,255,255,.16);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.42), 0 8px 26px rgba(0,0,0,.18)}
.on-sky.btn--glass:hover{background:rgba(255,255,255,.26)}
.on-sky-fill{background:#fff; color:#0a0a0d}
.btn--sm{height:38px; padding:0 15px; font-size:.87rem; border-radius:999px}
.btn--pill{border-radius:999px}

.live{width:8px; height:8px; border-radius:50%; background:var(--ios-green); flex:none;
  animation:live 1.9s ease-out infinite}
@keyframes live{0%{box-shadow:0 0 0 0 rgba(48,209,88,.65)}
  70%{box-shadow:0 0 0 8px rgba(48,209,88,0)} 100%{box-shadow:0 0 0 0 rgba(48,209,88,0)}}

/* iOS toggle */
.sw{width:51px; height:31px; border-radius:999px; position:relative; flex:none;
  background:var(--line-2); transition:background .34s var(--ease)}
.sw[aria-checked="true"]{background:var(--ios-green)}
.sw i{position:absolute; top:2px; left:2px; width:27px; height:27px; border-radius:50%;
  background:#fff; box-shadow:0 3px 8px rgba(0,0,0,.18); transition:transform .38s var(--spring)}
.sw[aria-checked="true"] i{transform:translateX(20px)}
.sw--sm{width:40px; height:24px}
.sw--sm i{width:20px; height:20px}
.sw--sm[aria-checked="true"] i{transform:translateX(16px)}

/* dock / nav */
.dock{position:fixed; top:16px; right:18px; z-index:95; display:flex; gap:2px; padding:4px;
  border-radius:999px; background:var(--glass); border:1px solid var(--line);
  -webkit-backdrop-filter:blur(22px) saturate(180%); backdrop-filter:blur(22px) saturate(180%)}
.dock button{width:28px; height:28px; border-radius:999px; display:grid; place-items:center}
.dock button[aria-pressed="true"]{background:var(--card-2)}
.dock i{width:13px; height:13px; border-radius:50%; display:block;
  box-shadow:0 0 0 1px rgba(128,128,128,.45) inset}

.nav{position:fixed; top:14px; left:0; right:0; z-index:90; display:flex; justify-content:center;
  pointer-events:none; opacity:0; transform:translateY(-14px);
  transition:opacity .5s var(--ease), transform .5s var(--ease)}
.nav.in{opacity:1; transform:none; pointer-events:auto}
.nav-inner{display:flex; align-items:center; gap:3px; padding:6px 6px 6px 14px; border-radius:999px;
  background:var(--glass); border:1px solid var(--line);
  -webkit-backdrop-filter:blur(26px) saturate(200%); backdrop-filter:blur(26px) saturate(200%);
  box-shadow:0 10px 40px rgba(0,0,0,.28), inset 0 1px 0 var(--glass-hi)}
.nav-inner a:not(.btn){padding:9px 13px; border-radius:999px; font-size:.91rem; font-weight:520;
  color:var(--fg-2); transition:color .3s, background .3s}
.nav-inner a:not(.btn):hover{color:var(--fg); background:var(--card)}
.nav-wm{display:flex; align-items:center; padding-right:8px}
.nav-wm .wm{height:17px}
.burger{display:none; width:38px; height:38px; border-radius:999px;
  align-items:center; justify-content:center; border:1px solid var(--line)}
.sheet{position:fixed; inset:0; z-index:88; background:var(--bg); display:none;
  flex-direction:column; gap:2px; padding:92px 26px 32px}
.sheet.open{display:flex}
.sheet a{font-size:1.5rem; font-weight:660; letter-spacing:-.04em; padding:13px 0;
  border-bottom:1px solid var(--line); color:var(--fg-2)}

.grain{position:absolute; inset:0; pointer-events:none; opacity:.14; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='.5'/></svg>")}
.dotfield{position:absolute; pointer-events:none;
  background-image:radial-gradient(currentColor 1px, transparent 1px); background-size:14px 14px;
  color:var(--fg-3); opacity:.28;
  -webkit-mask-image:radial-gradient(ellipse 60% 60% at 30% 30%, #000, transparent 72%);
  mask-image:radial-gradient(ellipse 60% 60% at 30% 30%, #000, transparent 72%)}

/* ═══ HERO ═══ */
.hero-pin{position:relative; height:190vh}
.hero-stage{position:sticky; top:0; height:100svh; overflow:hidden;
  display:flex; flex-direction:column; align-items:center; justify-content:center}
.sky{position:absolute; inset:0; z-index:0}
.sky--night{background:linear-gradient(178deg,var(--n0) 0%,var(--n1) 30%,var(--n2) 58%,
  var(--n3) 82%,var(--n4) 100%)}
.sky--day{background:linear-gradient(178deg,var(--d0) 0%,var(--d1) 30%,var(--d2) 58%,
  var(--d3) 82%,var(--d4) 100%); opacity:0}
/* oversized wordmark bleeding off the left edge, blended into the sky */
.hero-mark{position:absolute; left:2.5%; top:50%; z-index:3; width:min(560px,45vw);
  pointer-events:none; mix-blend-mode:overlay; opacity:.5; will-change:transform;
  transform:translateY(-50%)}
.hero-mark img{width:100%; height:auto}
@supports not (mix-blend-mode:overlay){ .hero-mark{opacity:.14} }


.hero-phone{position:absolute; right:clamp(-56px,-2vw,-20px); bottom:-14vh;
  width:min(276px,26vw); z-index:2}
.hero-in{position:relative; z-index:5; text-align:center; max-width:820px; padding-inline:var(--pad)}
.hero-in h1{color:#fff; text-shadow:0 2px 46px rgba(0,0,0,.22)}
.hero-cta{display:flex; gap:11px; justify-content:center; flex-wrap:wrap; margin-top:28px}
/* both hero cues stay hidden until the visitor has sat still for 6s */
.hero-link{display:inline-flex; align-items:center; gap:4px; margin-top:14px;
  color:rgba(255,255,255,.5); font-size:.78rem; font-weight:500; opacity:0;
  transition:gap .4s var(--ease), color .3s var(--ease), opacity .7s var(--ease)}
.hero-link:hover{gap:9px; color:rgba(255,255,255,.78)}
.bars{display:flex; gap:3px; justify-content:center; margin-top:28px; height:14px; align-items:center}
.bars i{width:2.5px; border-radius:2px; background:rgba(255,255,255,.85); display:block;
  animation:eq 1.3s var(--ease) infinite}
.bars i:nth-child(1){height:8px} .bars i:nth-child(2){height:14px; animation-delay:.16s}
.bars i:nth-child(3){height:9px; animation-delay:.32s}
@keyframes eq{0%,100%{transform:scaleY(.55)} 50%{transform:scaleY(1)}}
.hero-sub{margin:24px auto 0; max-width:560px; color:#fff; font-weight:620;
  font-size:clamp(.98rem,1.2vw,1.08rem); letter-spacing:-.02em; opacity:0}
.hero-sub span{display:block; color:rgba(255,255,255,.7); font-weight:400; margin-top:5px;
  font-size:.96em; line-height:1.5}
.hero-scroll{position:absolute; left:50%; bottom:26px; transform:translateX(-50%); z-index:5;
  display:flex; flex-direction:column; align-items:center; gap:9px;
  color:rgba(255,255,255,.6); font-size:.76rem; font-weight:520; letter-spacing:-.005em;
  opacity:0; transition:color .3s var(--ease), opacity .7s var(--ease)}
.hero-scroll:hover{color:rgba(255,255,255,.9)}
.scroll-arrow{animation:bob 2.3s var(--ease) infinite}
@keyframes bob{0%,100%{transform:translateY(0)} 50%{transform:translateY(6px)}}

/* ═══ iPHONE 17 PRO MAX FRAME (CSS) ═══ */
.iphone{position:relative; border-radius:15.6%/7.6%; padding:.9%;
  background:linear-gradient(147deg,#e7e3dc 0%,#8e8a83 14%,#cfcabf 28%,#6f6b65 46%,
    #d8d3c9 62%,#7c7871 80%,#e4e0d8 100%);
  box-shadow:0 0 0 .8px rgba(0,0,0,.5), 0 40px 80px -26px rgba(0,0,0,.62)}
.iphone::after{content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  box-shadow:inset 0 1px 1px rgba(255,255,255,.55), inset 0 -1px 1px rgba(0,0,0,.3)}
.iphone-screen{position:relative; border-radius:14.4%/7%; overflow:hidden; background:#000;
  aspect-ratio:1290/2796; display:flex; flex-direction:column; color:#f5f5f7}
.di{position:absolute; top:2.6%; left:50%; transform:translateX(-50%);
  width:30%; height:3.6%; min-height:20px; border-radius:999px; background:#000; z-index:6;
  box-shadow:0 0 0 .5px rgba(255,255,255,.08)}
.btn-rail{position:absolute; width:2.4px; border-radius:2px; background:linear-gradient(#cfcabf,#6f6b65); z-index:1}
.btn-rail.l1{left:-1.4px; top:20%; height:5%}
.btn-rail.l2{left:-1.4px; top:29%; height:9%}
.btn-rail.l3{left:-1.4px; top:40%; height:9%}
.btn-rail.r1{right:-1.4px; top:32%; height:13%}
.ip-status{display:flex; justify-content:space-between; align-items:center;
  padding:5.5% 7% 0; font-size:.62rem; font-weight:660; letter-spacing:-.01em}
.ip-body{flex:1; display:flex; flex-direction:column; padding:0 7% 7%}

/* empty frosted screen — mirrors the hero sky, blurred */
.scr-sky{position:absolute; inset:-24%; z-index:0; filter:blur(30px)}
.scr-sky--n{background:linear-gradient(178deg,var(--n0),var(--n1) 30%,var(--n2) 58%,
  var(--n3) 82%,var(--n4))}
.scr-sky--d{background:linear-gradient(178deg,var(--d0),var(--d1) 30%,var(--d2) 58%,
  var(--d3) 82%,var(--d4)); opacity:0}
.scr-sheen{position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(152deg, rgba(255,255,255,.24), rgba(255,255,255,.04) 38%,
    transparent 62%, rgba(255,255,255,.12))}
/* real app screenshot inside a frame — the frame matches the shot's own ratio
   plus a little headroom so the Dynamic Island doesn't sit on the content */
.iphone-screen--shot{aspect-ratio:430/906; background:#0b0b0d}
/* contain, not cover — the shot is wider than the frame, so cover would clip
   the edges of the UI. The spare strip at the top matches the app's own bg. */
.app-shot{position:absolute; inset:0; width:100%; height:100%; object-fit:contain;
  object-position:center bottom; z-index:1}

/* app preview screen */
.ap-wall{position:absolute; inset:0; z-index:0;
  background:linear-gradient(168deg,#1b2456 0%,#3d3a72 34%,#6b5a86 62%,#a8809a 84%,#d8b49c 100%)}
.ap-wall::after{content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse 70% 40% at 50% 12%, rgba(255,255,255,.2), transparent 70%)}
.ap{position:relative; z-index:2; display:flex; flex-direction:column; height:100%;
  padding:16% 7% 34%}
.ap-kicker{font-size:.55rem; letter-spacing:.16em; text-transform:uppercase;
  color:rgba(255,255,255,.62); font-weight:640}
.ap-card{margin-top:auto; border-radius:18px; padding:13px 14px;
  background:rgba(255,255,255,.15);
  -webkit-backdrop-filter:blur(18px) saturate(180%); backdrop-filter:blur(18px) saturate(180%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 10px 26px -10px rgba(0,0,0,.5)}
.ap-card p{margin:0; font-size:.72rem; line-height:1.44; color:#fff; font-weight:520}
.ap-card small{display:block; margin-top:8px; font-size:.55rem; color:rgba(255,255,255,.62)}
.ap-tabs{margin-top:12px; display:flex; gap:4px; padding:4px; border-radius:999px;
  background:rgba(255,255,255,.14);
  -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px)}
.ap-tabs i{flex:1; height:22px; border-radius:999px; display:block}
.ap-tabs i.on{background:rgba(255,255,255,.85)}

/* soon screen */
.soon{position:relative; z-index:2; height:100%; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:14px; text-align:center; padding:12%}
.soon-emoji{font-size:2.6rem; line-height:1;
  font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif}
.soon b{font-size:.82rem; font-weight:620; color:#fff}
.soon small{font-size:.62rem; color:rgba(255,255,255,.6)}

/* ═══ BAND ═══ */
.band{position:relative; border-radius:30px; overflow:hidden;
  min-height:clamp(400px,44vw,540px); display:grid; place-items:center;
  background:linear-gradient(178deg,var(--n0),var(--n1) 34%,var(--n2) 62%,var(--n3) 84%,var(--n4))}
.band-in{position:relative; z-index:3; text-align:center; padding:38px 24px; width:100%}
.band h2{color:#fff}
.band-phone{margin:26px auto 0; width:min(200px,52vw)}

/* ═══ PILLARS ═══ */
.split{display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(30px,4.4vw,64px); align-items:center}
.card{position:relative; border-radius:26px; background:var(--card);
  box-shadow:inset 0 0 0 1px var(--line);
  -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px)}
.demo-card{padding:clamp(24px,3vw,34px); min-height:390px; display:flex; flex-direction:column}
/* dot field with a flashlight that follows the cursor */
.pil-copy{position:relative; --mx:70%; --my:80%}
.pil-copy .dotfield{inset:-46px -60px -60px -46px; z-index:0; opacity:.2;
  -webkit-mask-image:linear-gradient(105deg, transparent 12%, #000 62%);
  mask-image:linear-gradient(105deg, transparent 12%, #000 62%)}
.pil-copy .dotfield::after{content:''; position:absolute; inset:0;
  background-image:radial-gradient(currentColor 1.3px, transparent 1.3px);
  background-size:14px 14px; color:var(--fg);
  -webkit-mask-image:radial-gradient(circle 148px at var(--mx) var(--my), #000 0%, rgba(0,0,0,.35) 45%, transparent 72%);
  mask-image:radial-gradient(circle 148px at var(--mx) var(--my), #000 0%, rgba(0,0,0,.35) 45%, transparent 72%);
  opacity:0; transition:opacity .45s var(--ease)}
.pil-copy.lit .dotfield{opacity:.34}
.pil-copy.lit .dotfield::after{opacity:1}
.pil-copy > *:not(.dotfield){position:relative; z-index:1}
.bubbles{display:flex; flex-direction:column; gap:10px; align-items:flex-end; flex:1; justify-content:center}
.bub{max-width:88%; padding:13px 18px; border-radius:22px; font-size:.98rem; line-height:1.42;
  animation:pop .55s var(--ease) backwards}
.bub--them{align-self:flex-start; background:var(--card-2); color:var(--fg-2);
  border-bottom-left-radius:7px; font-family:var(--mono); font-size:.68rem;
  letter-spacing:.1em; text-transform:uppercase}
.bub--me{background:var(--bub,#0a84ff); color:#fff; border-bottom-right-radius:7px;
  font-weight:480; animation-delay:.1s; box-shadow:0 10px 30px -12px var(--bub,#0a84ff);
  transition:background .5s var(--ease), box-shadow .5s var(--ease)}
.bub--cite{align-self:flex-start; box-shadow:inset 0 0 0 1px var(--line);
  color:var(--fg-3); font-size:.74rem; padding:8px 14px; border-radius:999px; animation-delay:.2s}
@keyframes pop{from{opacity:0; transform:translateY(12px) scale(.96)} to{opacity:1; transform:none}}
.tabs{display:flex; gap:4px; flex-wrap:wrap; justify-content:center; margin-top:22px;
  padding-top:18px; border-top:1px solid var(--line)}
.tab{padding:9px 14px; border-radius:999px; font-size:.86rem; font-weight:520; color:var(--fg-3);
  transition:color .35s var(--ease), background .35s var(--ease)}
.tab[aria-selected="true"]{background:var(--bub,#0a84ff); color:#fff}
.tab-meta{display:flex; justify-content:center; gap:12px; margin-top:12px; font-size:.75rem; color:var(--fg-3)}

/* ═══ RAIL ═══ */
.rail{position:relative; margin-top:40px; overflow-x:auto; overflow-y:hidden;
  scrollbar-width:none; -ms-overflow-style:none; scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch; cursor:grab;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent)}
.rail::-webkit-scrollbar{display:none}
.rail.drag{cursor:grabbing; scroll-snap-type:none}
.rail-track{display:flex; gap:16px; padding:6px var(--pad); width:max-content}
.fcard{width:clamp(252px,24vw,300px); border-radius:24px; overflow:hidden; flex:none;
  background:var(--card); box-shadow:inset 0 0 0 1px var(--line);
  scroll-snap-align:center; display:flex; flex-direction:column;
  transition:transform .6s var(--ease)}
.fcard:hover{transform:translateY(-5px)}
.fcard-art{height:clamp(200px,18vw,236px); position:relative; overflow:hidden;
  display:grid; place-items:center; padding:18px}
.fcard-txt{padding:18px 20px 24px; border-top:1px solid var(--line)}
.fcard-txt h3{font-size:1rem; font-weight:660}
.fcard-txt p{margin:8px 0 0; font-size:.87rem; line-height:1.5; color:var(--fg-3)}
.rail-hint{display:flex; align-items:center; justify-content:center; gap:8px; margin-top:18px;
  font-size:.79rem; color:var(--fg-3)}

/* glass art surfaces inside cards */
.art-wall{position:absolute; inset:0; z-index:0}
.aw-1{background:linear-gradient(165deg,#2b3468,#4b4383 42%,#8b6f95 76%,#d3a68f)}
.aw-2{background:linear-gradient(165deg,#0f3b34,#1d6b53 45%,#4fae86 80%,#bfe6cf)}
.aw-3{background:linear-gradient(165deg,#4a1f3a,#8b2f52 44%,#d4636f 78%,#f4b39a)}
.aw-4{background:linear-gradient(165deg,#122a52,#22518f 44%,#4f92c9 78%,#bfe0f2)}
.aw-5{background:linear-gradient(165deg,#3a2d10,#7a5a1c 44%,#c9992f 78%,#f2dda0)}
.aw-6{background:linear-gradient(165deg,#241a3d,#3f2f6b 44%,#6f5aa8 78%,#c3b2e6)}
.aw-7{background:linear-gradient(165deg,#0f2f3d,#1b5a70 46%,#3f9fb5 80%,#bfe6ee)}
.art-wall::after{content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse 80% 50% at 30% 8%, rgba(255,255,255,.26), transparent 68%)}
.glass{position:relative; z-index:2; border-radius:18px; padding:14px;
  background:rgba(255,255,255,.16);
  -webkit-backdrop-filter:blur(20px) saturate(180%); backdrop-filter:blur(20px) saturate(180%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.42), 0 12px 30px -12px rgba(0,0,0,.5); color:#fff}
.glass-row{display:flex; align-items:center; justify-content:space-between; gap:10px}
.glass small{font-size:.6rem; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(255,255,255,.66); font-weight:640}
.glass p{margin:8px 0 0; font-size:.76rem; line-height:1.44; font-weight:500}
.seg-ios{display:flex; gap:2px; padding:2px; border-radius:999px; background:rgba(0,0,0,.22)}
.seg-ios button{flex:1; padding:6px 0; border-radius:999px; font-size:.62rem; font-weight:600;
  color:rgba(255,255,255,.72); transition:background .3s var(--ease), color .3s}
.seg-ios button[aria-pressed="true"]{background:rgba(255,255,255,.9); color:#1d1d1f}
/* passage-of-the-day actions */
.tag-pill{display:inline-block; padding:4px 12px; border-radius:999px; font-size:.62rem;
  font-weight:600; background:rgba(255,255,255,.22); color:#fff;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.3)}
.pacts{display:flex; gap:6px; margin-top:12px}
.pact{flex:1; display:flex; flex-direction:column; align-items:center; gap:4px;
  padding:9px 4px; border-radius:13px; font-size:.6rem; font-weight:600; color:#fff;
  background:rgba(255,255,255,.16);
  -webkit-backdrop-filter:blur(14px) saturate(180%); backdrop-filter:blur(14px) saturate(180%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.34);
  transition:background .35s var(--ease), transform .35s var(--spring)}
.pact:hover{background:rgba(255,255,255,.28); transform:translateY(-2px)}
.pact:active{transform:scale(.95)}
.pact--on{background:rgba(0,0,0,.34); box-shadow:inset 0 1px 0 rgba(255,255,255,.2)}
.pact--on:hover{background:rgba(0,0,0,.44)}

/* save — heart fills and pops, with a ring burst */
.heart-wrap{position:relative; display:grid; place-items:center; width:14px; height:14px}
.heart{transition:transform .42s var(--spring)}
.pact.saved .heart path{fill:#ff5a7a; stroke:#ff5a7a}
.pact.saved .heart{animation:heartPop .5s var(--spring)}
@keyframes heartPop{0%{transform:scale(1)} 40%{transform:scale(1.45)} 100%{transform:scale(1)}}
.heart-ring{position:absolute; inset:-3px; border-radius:50%; pointer-events:none;
  border:1.5px solid #ff5a7a; opacity:0}
.pact.saved .heart-ring{animation:ringOut .55s var(--ease)}
@keyframes ringOut{0%{opacity:.9; transform:scale(.5)} 100%{opacity:0; transform:scale(2.4)}}

/* reflect — slides over the art */
/* [hidden] must be restated: an author `display:flex` beats the UA rule, which
   left this pane invisible but still on top, eating every click on the card. */
.reflect[hidden]{display:none}
.reflect{position:absolute; inset:0; z-index:5; display:flex; align-items:flex-end;
  padding:14px; background:rgba(10,8,22,.42);
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  opacity:0; pointer-events:none; transition:opacity .4s var(--ease)}
.reflect.on{opacity:1; pointer-events:auto}
.reflect-in{width:100%; border-radius:16px; padding:13px 14px; color:#fff;
  background:rgba(255,255,255,.17);
  -webkit-backdrop-filter:blur(22px) saturate(180%); backdrop-filter:blur(22px) saturate(180%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4);
  /* materialise: the surface scales and rises as it arrives, rather than
     just fading, so it reads as glass showing up instead of a flat layer */
  /* anchored to the bottom edge it rises from, so it grows out of the card
     rather than expanding from its own centre */
  transform-origin:50% 100%;
  transform:translateY(14px) scale(.97); opacity:0;
  transition:transform .5s var(--ease), opacity .34s var(--ease)}
.reflect.on .reflect-in{transform:none; opacity:1}
.reflect-in p{margin:8px 0 0; font-size:.66rem; line-height:1.5; font-weight:450}
.reflect-x{width:20px; height:20px; border-radius:999px; display:grid; place-items:center;
  background:rgba(255,255,255,.2); color:#fff; flex:none}
.reflect-x:hover{background:rgba(255,255,255,.34)}

/* capture — shutter flash */
.shutter{position:absolute; inset:0; z-index:6; background:#fff; opacity:0; pointer-events:none}
.shutter.snap{animation:snap .45s var(--ease)}
@keyframes snap{0%{opacity:0} 12%{opacity:.92} 100%{opacity:0}}
.fcard-art.snapping{animation:snapScale .4s var(--ease)}
@keyframes snapScale{0%{transform:scale(1)} 30%{transform:scale(.965)} 100%{transform:scale(1)}}

.playbtn{width:34px; height:34px; border-radius:999px; display:grid; place-items:center; flex:none;
  background:rgba(255,255,255,.9); color:#1d1d1f; transition:transform .4s var(--spring)}
.playbtn:active{transform:scale(.9)}
.wave{display:flex; align-items:center; gap:3px; height:30px}
.wave i{width:3px; border-radius:2px; background:rgba(255,255,255,.5); display:block; height:28%}
.wave.on i{background:#fff; animation:wv 1.1s var(--ease) infinite}
.wave i:nth-child(2){animation-delay:.08s} .wave i:nth-child(3){animation-delay:.16s}
.wave i:nth-child(4){animation-delay:.24s} .wave i:nth-child(5){animation-delay:.32s}
.wave i:nth-child(6){animation-delay:.4s}  .wave i:nth-child(7){animation-delay:.48s}
.wave i:nth-child(8){animation-delay:.56s} .wave i:nth-child(9){animation-delay:.64s}
.wave i:nth-child(10){animation-delay:.72s} .wave i:nth-child(11){animation-delay:.8s}
@keyframes wv{0%,100%{height:20%} 50%{height:100%}}
.stepper{display:flex; align-items:center; gap:10px}
.stepper button{width:28px; height:28px; border-radius:999px; background:rgba(255,255,255,.24);
  color:#fff; display:grid; place-items:center; font-weight:700; line-height:1}
.stepper b{font-size:1.15rem; font-weight:700; min-width:34px; text-align:center}

/* ═══ KEYBOARD ═══ */
.kb-wrap{perspective:1200px; margin-top:clamp(26px,3vw,40px)}
.kb{max-width:760px; margin-inline:auto; border-radius:18px; padding:14px;
  background:linear-gradient(168deg,#c9c9cf,#8f8f97 40%,#6e6e77);
  box-shadow:0 34px 70px -26px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.5);
  transform-origin:50% 62%; will-change:transform}
html[data-theme="black"] .kb{background:linear-gradient(168deg,#4a4a52,#2c2c33 42%,#1b1b20)}
.kb-row{display:flex; gap:5px; margin-bottom:5px}
.kb-row:last-child{margin-bottom:0}
.kb-row--fn .key{height:calc(var(--kh) * .62)}
/* one keycap unit; width comes from flex, height is fixed so wide keys stay caps */
.kb{--kh:clamp(24px,3.5vw,45px)}
.key{flex:1 1 0; min-width:0; height:var(--kh); border-radius:6px; position:relative;
  background:linear-gradient(180deg,#33333b,#1a1a21);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.13), 0 1px 2px rgba(0,0,0,.55)}
/* padding must not be a % here — on a flex item it resolves against the row
   width, which blows the keycap up to many times its unit size */
.key--app{cursor:pointer; display:grid; place-items:center; padding:0;
  transition:transform .35s var(--spring)}
.key--app:hover{transform:translateY(-3px)}
.key--app:active{transform:translateY(0) scale(.94)}
.key--app.sel{outline:2px solid #fff; outline-offset:2px}
.kicon{width:calc(var(--kh) * .68); height:calc(var(--kh) * .68); border-radius:26%;
  display:grid; place-items:center; color:#fff;
  box-shadow:0 2px 6px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.3)}
.kb-detail{max-width:560px; margin:26px auto 0; border-radius:22px; padding:22px 24px;
  background:var(--card); box-shadow:inset 0 0 0 1px var(--line); text-align:left;
  display:flex; gap:16px; align-items:flex-start;
  opacity:0; transform:translateY(12px); transition:opacity .5s var(--ease), transform .5s var(--ease)}
.kb-detail.on{opacity:1; transform:none}
.kb-detail .kicon{width:42px; height:42px; flex:none}
.kb-detail h4{font-size:1.02rem; font-weight:680; margin:0 0 5px}
.kb-detail p{margin:0; font-size:.9rem; color:var(--fg-3); line-height:1.55}

/* ═══ MADE YOURS (iPhone) ═══ */
.my-phone{width:min(290px,72vw); margin-inline:auto}
.my-screen{position:relative; z-index:2; height:100%; display:flex; flex-direction:column;
  padding:15% 6% 7%; gap:9px}
.my-wall{position:absolute; inset:0; z-index:0;
  background:linear-gradient(168deg,#20264f,#3c3a70 36%,#6d5c88 66%,#b08d9e 88%,#e0bda2)}
.my-wall::after{content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse 80% 44% at 50% 10%, rgba(255,255,255,.22), transparent 70%)}
.my-title{font-size:.68rem; font-weight:700; color:#fff; letter-spacing:-.02em; margin-bottom:2px}
.gcard{border-radius:15px; padding:11px 12px; background:rgba(255,255,255,.15);
  -webkit-backdrop-filter:blur(18px) saturate(180%); backdrop-filter:blur(18px) saturate(180%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.38); color:#fff}
.gcard .gr{display:flex; align-items:center; justify-content:space-between; gap:8px;
  font-size:.63rem; font-weight:540; padding:5px 0}
.gcard .gr + .gr{border-top:1px solid rgba(255,255,255,.16)}
.meter{height:4px; border-radius:3px; background:rgba(255,255,255,.26); overflow:hidden; flex:1}
.meter i{display:block; height:100%; border-radius:3px; background:#fff}

/* ═══ ICON PARAGRAPH ROWS ═══ */
.rows{display:flex; flex-direction:column; gap:20px; margin-top:26px}
.row{display:flex; gap:14px; align-items:flex-start}
.row .ri{width:32px; height:32px; border-radius:10px; flex:none; display:grid; place-items:center;
  background:var(--tint); box-shadow:inset 0 0 0 1px var(--tint-line); color:var(--fg)}
.row h4{font-size:.98rem; font-weight:660; margin:0 0 4px; letter-spacing:-.028em}
.row p{margin:0; font-size:.9rem; color:var(--fg-3); line-height:1.55}

/* ═══ FLIP CARDS ═══ */
.flip-sec{position:relative; overflow:hidden;
  background:linear-gradient(178deg,var(--n0),var(--n1) 30%,var(--n2) 58%,var(--n3) 82%,var(--n4))}
.flip-grid{display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);
  gap:clamp(26px,3.6vw,52px); align-items:center; margin-top:clamp(30px,4vw,54px)}
.flip-wrap{position:relative; perspective:1600px; height:clamp(272px,27vw,330px)}
.ghost{position:absolute; inset:0; margin:auto; width:min(92%,520px);
  height:clamp(228px,23vw,278px); background:rgba(255,255,255,.5); border-radius:22px}
.ghost--1{transform:translate(15px,-12px) rotate(3deg); opacity:.3}
.ghost--2{transform:translate(29px,-23px) rotate(6deg); opacity:.16}
.flip{position:absolute; inset:0; margin:auto; width:min(94%,530px);
  height:clamp(238px,24vw,288px); transform-style:preserve-3d;
  transition:transform .95s var(--ease); will-change:transform}
.face{position:absolute; inset:0; -webkit-backface-visibility:hidden; backface-visibility:hidden;
  background:#fbfaf8; color:#1d1d1f; border-radius:22px; padding:clamp(22px,2.4vw,32px);
  box-shadow:0 30px 70px -22px rgba(0,0,0,.45); display:flex; flex-direction:column}
.face--b{transform:rotateY(180deg)}
.face .who{display:flex; align-items:center; gap:11px; padding-bottom:14px;
  border-bottom:1px solid rgba(0,0,0,.09)}
.face .av{width:34px; height:34px; border-radius:10px; display:grid; place-items:center;
  font-size:.72rem; font-weight:800; color:#fff; background:var(--bub,#0a84ff)}
.face .who b{font-size:.93rem; font-weight:700; display:block}
.face .who small{font-size:.75rem; color:#75757f}
.face blockquote{margin:16px 0 0; font-size:clamp(1rem,1.4vw,1.17rem); line-height:1.44;
  letter-spacing:-.026em; font-weight:480}
.face cite{margin-top:auto; font-style:normal; font-size:.73rem; color:#8b8b95}
.picker{display:flex; flex-direction:column; gap:3px}
.pick{display:flex; align-items:center; gap:11px; padding:11px 13px; border-radius:14px;
  text-align:left; color:rgba(255,255,255,.74);
  transition:background .4s var(--ease), color .4s var(--ease)}
.pick:hover{background:rgba(255,255,255,.1); color:#fff}
.pick[aria-pressed="true"]{background:rgba(255,255,255,.17); color:#fff}
.pick .av{width:29px; height:29px; border-radius:9px; display:grid; place-items:center;
  font-size:.66rem; font-weight:800; color:#fff; background:rgba(255,255,255,.22);
  transition:background .4s var(--ease)}
.pick b{font-size:.9rem; font-weight:620; display:block}

/* ═══ PRICING ═══ */
.plans{display:grid; grid-template-columns:repeat(auto-fit,minmax(286px,1fr)); gap:16px;
  margin-top:36px; max-width:820px; margin-inline:auto}
.plan{border-radius:26px; padding:clamp(24px,2.8vw,32px); background:var(--card);
  box-shadow:inset 0 0 0 1px var(--line); display:flex; flex-direction:column; overflow:hidden}
.plan--hero{background:linear-gradient(168deg,var(--tint),var(--card) 60%)}
.plan h3{font-size:1.36rem}
.plan .amt{display:flex; align-items:flex-start; gap:3px; margin:18px 0 4px}
.plan .amt sup{font-size:1.16rem; font-weight:700; margin-top:8px}
.plan .amt b{font-size:3.2rem; font-weight:720; letter-spacing:-.052em; line-height:.92}
.plan .amt em{font-style:normal; font-size:.84rem; color:var(--fg-3); align-self:flex-end; margin-bottom:7px}
/* NOT `.soon` — that class already belongs to the phone's "coming soon"
   screen, and its padding:12% / height:100% were leaking in here. */
.plan .amt{min-height:47px; align-items:center}
.plan .amt--tba b{font-size:1.58rem; letter-spacing:-.035em; line-height:1.2}
.plan ul{list-style:none; margin:20px 0 26px; padding:20px 0 0; border-top:1px solid var(--line);
  display:flex; flex-direction:column; gap:10px}
.plan li{font-size:.9rem; color:var(--fg-2); display:flex; gap:9px; align-items:flex-start}
.plan li svg{flex:none; margin-top:3px; color:var(--fg)}
.plan li.hd{color:var(--fg); font-weight:640; display:block}
.plan .btn{margin-top:auto; width:100%; justify-content:space-between}
/* keeps the live dot beside its label instead of space-between flinging
   them to opposite edges of the button */
.cta-l{display:inline-flex; align-items:center; gap:9px}
.plan .fine{margin-top:13px; text-align:center; font-size:.78rem; color:var(--fg-3)}
.seg{display:inline-flex; gap:3px; padding:4px; border-radius:999px; background:var(--card);
  box-shadow:inset 0 0 0 1px var(--line)}
.seg button{padding:10px 18px; border-radius:999px; font-size:.89rem; font-weight:540;
  color:var(--fg-3); transition:background .4s var(--ease), color .4s var(--ease)}
.seg button[aria-pressed="true"]{background:var(--card-2); color:var(--fg)}
.seg small{color:var(--fg-3); font-weight:400; margin-left:5px}

/* ═══ FAQ / FORMS ═══ */
.faq{max-width:740px; margin:36px auto 0; border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none; cursor:pointer; padding:21px 44px 21px 0; position:relative;
  font-size:1.01rem; font-weight:580}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:""; position:absolute; right:8px; top:50%; width:10px; height:10px;
  margin-top:-6px; border-right:1.7px solid var(--fg-3); border-bottom:1.7px solid var(--fg-3);
  transform:rotate(45deg); transition:transform .45s var(--ease)}
.faq details[open] summary::after{transform:rotate(-135deg); border-color:var(--accent)}
.faq p{margin:0 0 22px; color:var(--fg-2); font-size:.94rem; line-height:1.65; max-width:64ch}

.join{position:relative; border-radius:30px; overflow:hidden; padding:clamp(38px,5vw,72px) 26px;
  text-align:center; background:var(--card); box-shadow:inset 0 0 0 1px var(--line)}
.form{display:flex; gap:9px; max-width:440px; margin:26px auto 0; flex-wrap:wrap}
.inp{flex:1 1 205px; height:50px; padding:0 18px; border-radius:14px; color:var(--fg);
  background:var(--card); box-shadow:inset 0 0 0 1px var(--line); border:0}
.inp::placeholder{color:var(--fg-3)}
.inp:focus{outline:none; box-shadow:inset 0 0 0 1.5px var(--tint-line)}
/* honeypot — moved out of view rather than display:none, which naive bots
   check for. Also removed from the tab order and from assistive tech. */
.hp{position:absolute; left:-9999px; top:auto; width:1px; height:1px;
  overflow:hidden; opacity:0; pointer-events:none}
.ok{margin-top:16px; color:var(--fg); font-size:.91rem; display:none}
.ok.show{display:block; animation:pop .55s var(--ease)}

/* wizard */
.wiz{border-radius:26px; background:var(--card); box-shadow:inset 0 0 0 1px var(--line);
  padding:clamp(24px,3vw,36px); position:relative; overflow:hidden}
.wiz-top{display:flex; align-items:center; gap:14px; margin-bottom:24px; min-height:32px}
.wiz-back{width:32px; height:32px; border-radius:999px; border:1px solid var(--line);
  display:grid; place-items:center; color:var(--fg-2); opacity:0; pointer-events:none;
  transition:opacity .35s var(--ease)}
.wiz-back.on{opacity:1; pointer-events:auto}
.wiz-dots{display:flex; gap:6px; margin-left:auto}
.wiz-dots i{width:22px; height:4px; border-radius:3px; background:var(--line-2);
  transition:background .45s var(--ease), width .45s var(--ease)}
.wiz-dots i.on{background:var(--accent); width:30px}
.steps{position:relative}
.step{position:absolute; inset:0 0 auto 0; opacity:0; transform:translateX(24px);
  pointer-events:none; transition:opacity .45s var(--ease), transform .55s var(--ease)}
.step.on{position:relative; opacity:1; transform:none; pointer-events:auto}
.step.back{transform:translateX(-24px)}
.step h3{font-size:clamp(1.26rem,2.1vw,1.62rem); letter-spacing:-.036em; margin-bottom:7px}
.step .hint{color:var(--fg-3); font-size:.89rem; margin:0 0 22px}
.opts{display:flex; flex-direction:column; gap:8px}
.opt{display:flex; align-items:center; gap:13px; padding:15px 17px; border-radius:15px;
  background:var(--card); box-shadow:inset 0 0 0 1px var(--line); text-align:left;
  font-size:.96rem; font-weight:520; transition:background .35s var(--ease), transform .35s var(--ease)}
.opt:hover{background:var(--card-2); transform:translateX(3px)}
.opt .ob{width:20px; height:20px; border-radius:999px; box-shadow:inset 0 0 0 1.6px var(--line-2);
  flex:none; display:grid; place-items:center}
.opt.sel{background:var(--tint); box-shadow:inset 0 0 0 1.5px var(--tint-line)}
.opt.sel .ob{background:var(--accent); box-shadow:inset 0 0 0 1.6px var(--accent)}
.opt.sel .ob::after{content:""; width:7px; height:7px; border-radius:999px; background:var(--accent-ink)}
.opt--none{color:var(--fg-2); font-weight:440}
.wiz-area{width:100%; min-height:126px; padding:14px 16px; border-radius:14px; resize:vertical;
  line-height:1.55; color:var(--fg); background:var(--card); border:0;
  box-shadow:inset 0 0 0 1px var(--line)}
.wiz-area:focus{outline:none; box-shadow:inset 0 0 0 1.5px var(--tint-line)}
.wiz-foot{display:flex; gap:10px; align-items:center; margin-top:20px}
.wiz-err{font-size:.83rem; color:#ff6b5a; opacity:0; transition:opacity .3s}
.wiz-err.on{opacity:1}
.done{text-align:center; padding:12px 0 4px}
.check{width:64px; height:64px; margin:0 auto 20px; border-radius:999px; display:grid;
  place-items:center; background:var(--tint); box-shadow:inset 0 0 0 1px var(--tint-line)}
.check svg path{stroke-dasharray:28; stroke-dashoffset:28; animation:draw .7s var(--ease) .18s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.recap{margin-top:18px; display:inline-flex; flex-wrap:wrap; gap:7px; justify-content:center}
.recap span{font-size:.75rem; padding:6px 12px; border-radius:999px;
  box-shadow:inset 0 0 0 1px var(--line); color:var(--fg-3)}

/* ═══ FOOTER ═══ */
.foot{border-top:1px solid var(--line); background:var(--bg-1); padding-block:clamp(40px,4.5vw,60px) 26px}
.foot-top{display:flex; justify-content:space-between; gap:32px; flex-wrap:wrap; align-items:flex-start}
.foot-brand .wm{height:26px}
.foot-brand p{color:var(--fg-3); font-size:.88rem; max-width:30ch; margin:13px 0 0}
.foot-nav{display:flex; gap:clamp(26px,4vw,56px); flex-wrap:wrap}
.foot-nav a{font-size:.9rem; color:var(--fg-2); transition:color .3s}
.foot-nav a:hover{color:var(--fg)}
.socials{display:flex; gap:8px; margin-top:18px}
.socials a{width:38px; height:38px; border-radius:11px; box-shadow:inset 0 0 0 1px var(--line);
  display:grid; place-items:center; color:var(--fg-2);
  /* scoped, not `all` — `all` puts layout properties on the transition path */
  transition:color .4s var(--ease), transform .4s var(--ease), background .4s var(--ease)}
.socials a:hover{color:var(--fg); transform:translateY(-3px); background:var(--card)}
.foot-bot{margin-top:36px; padding-top:20px; border-top:1px solid var(--line);
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  font-size:.83rem; color:var(--fg-3)}

.rv{opacity:0; transform:translateY(24px); transition:opacity .85s var(--ease), transform .95s var(--ease)}
.rv.in{opacity:1; transform:none}

@media (max-width:1040px){
  .split{grid-template-columns:1fr}
  .pil-copy .dotfield{display:none}
}
@media (max-width:780px){
  :root{--pad:20px}
  .nav-inner a:not(.btn){display:none}
  .burger{display:flex}
  .hero-mark{width:78vw; left:4%; opacity:.4}
  .hero-phone{right:6vw; bottom:-12vh; width:46vw; opacity:.55}
  .hero-pin{height:170vh}
  .seg small{display:none}
  .seg button{padding:10px 14px; font-size:.85rem}
  .kb-row{gap:4px} .kb{padding:9px; border-radius:13px} .key{border-radius:5px}
  .foot-top{flex-direction:column}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important; transition-duration:.01ms !important}
  .rv{opacity:1; transform:none}
  .hero-sub,.hero-scroll,.hero-link{opacity:1 !important}
  .kb{transform:none !important}
}
/* Translucency is decorative here — when it's turned down, make the glass
   frosty-solid instead of blurred so text keeps its contrast. */
@media (prefers-reduced-transparency:reduce){
  .nav-inner,.dock,.btn--glass{-webkit-backdrop-filter:none; backdrop-filter:none;
    background:var(--bg-1)}
  .glass,.pact,.reflect-in,.ap-card,.gcard{-webkit-backdrop-filter:none;
    backdrop-filter:none; background:rgba(20,20,26,.9)}
  .reflect{-webkit-backdrop-filter:none; backdrop-filter:none; background:rgba(8,7,16,.86)}
  .card,.wiz,.plan,.fcard,.join{-webkit-backdrop-filter:none; backdrop-filter:none}
}
/* High contrast: near-solid surfaces with a defined edge, and drop the
   iridescent hairline, which is decoration rather than structure. */
@media (prefers-contrast:more){
  :root{--line:rgba(255,255,255,.34); --line-2:rgba(255,255,255,.5); --fg-3:#9a9aa4}
  html[data-theme="white"],html[data-theme="rose"],html[data-theme="azure"]{
    --line:rgba(0,0,0,.36); --line-2:rgba(0,0,0,.55); --fg-3:#4a4a52}
  .edge::before{display:none}
  .card,.fcard,.plan,.wiz,.gcell,.join{background:var(--bg-1)}
  .hero-link,.hero-scroll{color:#fff}
}