@font-face{font-family:"DM Sans";font-weight:400;font-display:swap;src:url(assets/DMSans-400.ttf)}
@font-face{font-family:"DM Sans";font-weight:500;font-display:swap;src:url(assets/DMSans-500.ttf)}
@font-face{font-family:"Space Grotesk";font-weight:500;font-display:swap;src:url(assets/SpaceGrotesk-500.ttf)}
@font-face{font-family:"Space Grotesk";font-weight:700;font-display:swap;src:url(assets/SpaceGrotesk-700.ttf)}

:root{
  color-scheme:dark;
  --bg:#0E1514;--bg2:#111A19;--card:#18211F;--text:#E3ECEA;--muted:#9AA9A6;
  --accent:#3FB39C;--strong:#8ED8C6;--tint:#1C3530;--border:#2A3735;--on:#00201A;
  --hh:72px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-snap-type:y mandatory}
body{margin:0;background:var(--bg);color:var(--text);font:400 18px/1.65 "DM Sans",system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden;overflow-x:clip}
h1,h2,h3{font-family:"Space Grotesk",system-ui,sans-serif;line-height:1.15;margin:0}
p{margin:0 0 16px}
.muted{color:var(--muted)}
.wrap{max-width:1120px;margin:0 auto;padding:0 40px}
svg{display:block}

/* ---------- Header ---------- */
header.top{position:sticky;top:0;z-index:20;background:rgba(14,21,20,.78);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 1px 0 transparent;transition:box-shadow .2s}
header.top.scrolled{box-shadow:0 1px 0 var(--border)}
.top-inner{display:flex;align-items:center;justify-content:space-between;max-width:1200px;margin:0 auto;padding:0 40px;height:var(--hh)}
.brand{display:flex;align-items:center;gap:10px;font:700 22px "Space Grotesk",sans-serif;color:var(--text);text-decoration:none}
.brand img{width:32px;height:32px}
nav a{color:var(--muted);text-decoration:none;margin-left:28px;font-size:16px;transition:color .15s}
nav a:hover{color:var(--strong)}
.menu-btn{display:none;background:none;border:0;padding:10px;margin:-10px;cursor:pointer}
.menu-btn span{display:block;width:24px;height:2px;background:var(--text);border-radius:2px;transition:transform .2s,opacity .2s}
.menu-btn span+span{margin-top:6px}

/* ---------- Shared ---------- */
.eyebrow{font:500 13px "DM Sans",sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:14px}
h2{font-size:clamp(30px,4vw,44px);font-weight:700;margin-bottom:20px;letter-spacing:-.015em}
.hero,section{min-height:calc(100vh - var(--hh));min-height:calc(100svh - var(--hh));min-height:calc(100dvh - var(--hh));display:flex;flex-direction:column;justify-content:center;border-bottom:1px solid var(--border);scroll-snap-align:start;scroll-snap-stop:always}
section{padding:48px 0;position:relative}
footer{scroll-snap-align:end}
.pill{display:inline-flex;align-items:center;height:56px;padding:0 28px;border-radius:999px;background:var(--accent);color:var(--on);text-decoration:none;font-weight:500;font-size:17px;transition:transform .15s,background .15s}
.pill.ghost{background:transparent;color:var(--text);box-shadow:inset 0 0 0 1.5px var(--border)}
.pill.ghost:hover{box-shadow:inset 0 0 0 1.5px var(--accent);color:var(--strong)}
/* Apple's official badge (assets/app-store-badge.svg), shown unmodified at 56px high. */
.appstore{display:inline-block;line-height:0;border-radius:11px;transition:transform .15s}
.appstore img{display:block;height:56px;width:auto}
.appstore:hover,.pill:hover{transform:translateY(-2px)}
.ico{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;background:var(--tint);color:var(--strong)}
.ico svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden;padding:24px 0}
.hero-glow{position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(600px 480px at 74% 46%,rgba(63,179,156,.20),transparent 70%),
    radial-gradient(900px 600px at 10% -10%,rgba(63,179,156,.07),transparent 60%)}
.hero-inner{position:relative;max-width:1200px;margin:0 auto;padding:0 40px;display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}
.hero h1{font-size:clamp(40px,5.4vw,66px);font-weight:700;letter-spacing:-.03em;line-height:1.04;margin:0 0 24px}
.hero h1 span{display:block}
.hero h1 .grad{background:linear-gradient(100deg,var(--strong) 10%,var(--accent) 70%);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-copy>p{font-size:21px;color:var(--muted);max-width:30em;margin:0}
.cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:40px}

/* phone */
.phone-wrap{position:relative;display:grid;place-items:center;padding:24px 0}
.phone-crop{display:contents}
.rings{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.rings i{position:absolute;width:340px;height:340px;border-radius:50%;border:1.5px solid rgba(63,179,156,.35);animation:ring 4.8s cubic-bezier(.2,.6,.3,1) infinite;opacity:0}
.rings i:nth-child(2){animation-delay:1.6s}.rings i:nth-child(3){animation-delay:3.2s}
@keyframes ring{0%{transform:scale(.7);opacity:0}15%{opacity:.9}100%{transform:scale(1.9);opacity:0}}
.phone{position:relative;width:300px;height:620px;border-radius:52px;padding:11px;background:linear-gradient(145deg,#2B3735,#0A0F0E 55%,#1D2725);box-shadow:0 0 0 1px #3A4846,0 40px 80px -20px rgba(0,0,0,.7),0 0 120px -30px rgba(63,179,156,.45);transform:rotate(-3deg)}
.screen{position:relative;height:100%;border-radius:42px;overflow:hidden;background:#F7F9F8;color:#13201F;font-family:"DM Sans",sans-serif;padding:52px 16px 22px;display:flex;flex-direction:column}
.screen svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.island{position:absolute;top:11px;left:50%;transform:translateX(-50%);width:92px;height:27px;border-radius:20px;background:#000}
.app-bar{display:flex;align-items:center;justify-content:space-between;font-size:14px}
.app-bar b{font-weight:500}
.seg{margin-top:12px;background:#E6EEEC;border-radius:11px;padding:3px;display:flex;font-size:12px;color:#4A5856}
.seg span{flex:1;text-align:center;padding:6px 0;border-radius:8px}
.seg .on{background:#fff;color:#0B5E52;font-weight:500;box-shadow:0 1px 3px rgba(19,32,31,.08)}
.scrub{margin-top:18px}
.scrub .bar{height:4px;border-radius:2px;background:#DDE5E3;position:relative}
.scrub .bar i{position:absolute;left:0;top:0;bottom:0;width:39.4%;border-radius:2px;background:#0E7C6B;transition:width 1s linear}
.scrub .bar i::after{content:"";position:absolute;right:-6px;top:-4px;width:12px;height:12px;border-radius:50%;background:#0E7C6B}
.times{display:flex;justify-content:space-between;font-size:10.5px;color:#5B6866;margin-top:6px;font-variant-numeric:tabular-nums}
.cue{margin-top:16px;background:#fff;border-radius:18px;padding:16px;box-shadow:0 1px 2px rgba(19,32,31,.05),0 6px 20px -8px rgba(19,32,31,.12)}
.cue-tag{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:500;color:#0B5E52;background:#DCEBE7;border-radius:999px;padding:3px 9px 3px 7px;margin-bottom:12px}
.cue-tag svg{width:12px;height:12px}
.cue-n{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:#5B6866}
.cue-title{font:700 22px/1.15 "Space Grotesk",sans-serif;margin-top:4px;letter-spacing:-.01em}
.cue.next{margin-top:10px;padding:12px 16px;opacity:.55;box-shadow:none;background:#EEF3F2}
.cue.next .cue-title{font-size:15px}
.controls{margin-top:auto;display:flex;align-items:center;justify-content:center;gap:22px}
.ctl{width:44px;height:44px;border-radius:50%;background:#E6EEEC;display:grid;place-items:center}
.play{width:72px;height:72px;border-radius:50%;background:#0E7C6B;display:grid;place-items:center;box-shadow:0 10px 24px rgba(14,124,107,.35)}
.play svg{width:28px;height:28px;fill:#fff;stroke:none}

/* ---------- What / demo ---------- */
.two{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.demo{background:linear-gradient(160deg,#1C3530,#142522);border:1px solid #24423C;border-radius:28px;padding:28px;display:grid;gap:4px;box-shadow:0 30px 60px -30px rgba(0,0,0,.6)}
.track{background:var(--card);border-radius:18px;padding:18px 20px 20px}
.track-head{display:flex;align-items:center;justify-content:space-between;height:22px;margin-bottom:10px}
.track small{font:500 12px "DM Sans",sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.words{margin:0;font:500 20px/1.5 "Space Grotesk",sans-serif;letter-spacing:-.005em}
.words span{color:#4C5B58;transition:color .25s,background-color .25s;border-radius:6px;padding:0 2px;margin:0 -2px}
.words span.done{color:var(--text)}
.words span.now{color:var(--on);background:var(--accent)}
.say .words span.now{background:var(--strong)}
.wave{display:flex;align-items:center;gap:3px;height:20px}
.wave i{width:3px;height:4px;border-radius:2px;background:var(--accent);transition:height .2s}
.demo.speaking .wave i{animation:wv .9s ease-in-out infinite}
.wave i:nth-child(2){animation-delay:-.7s!important}.wave i:nth-child(3){animation-delay:-.2s!important}.wave i:nth-child(4){animation-delay:-.5s!important}.wave i:nth-child(5){animation-delay:-.1s!important}.wave i:nth-child(6){animation-delay:-.6s!important}.wave i:nth-child(7){animation-delay:-.35s!important}
@keyframes wv{0%,100%{height:4px}50%{height:18px}}
.face{font-size:12px;color:var(--muted);font-style:italic}
.lag{display:flex;align-items:center;gap:10px;justify-content:center;font-size:12px;letter-spacing:.06em;color:var(--muted);padding:6px 0}
.lag span{flex:1;height:1px;background:linear-gradient(90deg,transparent,#2F4E48,transparent)}

/* ---------- How / timeline ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin:56px 0 0;padding:0;list-style:none;counter-reset:s;position:relative}
.steps::before{content:"";position:absolute;top:23px;left:24px;right:24px;height:2px;background:linear-gradient(90deg,var(--accent),var(--tint));border-radius:2px}
.steps li{position:relative;counter-increment:s}
.steps li::before{content:counter(s);position:relative;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--bg);box-shadow:inset 0 0 0 2px var(--accent);color:var(--strong);font:700 18px "Space Grotesk",sans-serif;margin-bottom:24px}
.steps li:last-child::before{background:var(--accent);color:var(--on)}
.steps h3{font-size:22px;margin-bottom:8px}
.steps p{margin:0;color:var(--muted);font-size:16px;max-width:15em}

/* ---------- Features carousel ---------- */
#features{overflow:hidden}
.carousel{margin-top:48px;position:relative}
.track-x{display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:28px calc(50% - 190px) 36px;scrollbar-width:none;outline:none;
  -webkit-mask:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);mask:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent)}
.track-x::-webkit-scrollbar{display:none}
.fcard{--d:1;flex:0 0 380px;scroll-snap-align:center;min-height:300px;background:var(--card);border:1px solid var(--border);border-radius:28px;padding:36px 34px;display:flex;flex-direction:column;cursor:pointer;
  transform:scale(calc(1 - .14 * min(var(--d),1)));opacity:calc(1 - .55 * min(var(--d),1));transition:border-color .3s,box-shadow .3s,background .3s;will-change:transform}
.fcard.on{cursor:default;border-color:#2F5A51;background:linear-gradient(170deg,#1C302C,var(--card) 70%);box-shadow:0 30px 70px -30px rgba(63,179,156,.45)}
.fcard .ico{width:60px;height:60px;border-radius:18px;margin-bottom:auto}
.fcard .ico svg{width:30px;height:30px}
.fcard h3{font-size:26px;margin:40px 0 10px;letter-spacing:-.01em}
.fcard p{margin:0;color:var(--muted);font-size:17px;line-height:1.55}
.car-nav{display:flex;align-items:center;justify-content:center;gap:20px}
.arrow{width:48px;height:48px;border-radius:50%;border:1.5px solid var(--border);background:transparent;color:var(--text);display:grid;place-items:center;cursor:pointer;transition:border-color .15s,color .15s}
.arrow:hover{border-color:var(--accent);color:var(--strong)}
.arrow svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.dots{display:flex;gap:8px}
.dots button{width:8px;height:8px;padding:0;border:0;border-radius:4px;background:#34433F;cursor:pointer;transition:width .25s,background .25s;position:relative}
.dots button::after{content:"";position:absolute;inset:-10px -4px}
.dots button[aria-selected=true]{width:26px;background:var(--accent)}

/* ---------- Who ---------- */
.uses{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:40px}
.uses>div{background:var(--card);border:1px solid var(--border);border-radius:22px;padding:26px 24px}
.uses .ico{margin-bottom:22px}
.uses h3{font-size:19px;margin-bottom:8px}
.uses p{margin:0;color:var(--muted);font-size:16px;line-height:1.55}
.closer{display:flex;flex-direction:column;align-items:center;text-align:center;gap:24px;padding:64px 24px;border-radius:32px;
  background:radial-gradient(500px 260px at 50% 0%,rgba(63,179,156,.22),transparent 70%),var(--bg2);border:1px solid var(--border)}
.closer>img{width:84px;height:84px;border-radius:20px;box-shadow:0 10px 30px rgba(63,179,156,.3)}
.closer h2{margin:0}

/* ---------- Footer ---------- */
footer{padding:36px 0 48px;color:var(--muted);font-size:15px}
.foot{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.brand.small{font-size:18px}.brand.small img{width:24px;height:24px}
footer nav a{margin:0 0 0 24px;font-size:15px}
footer nav a:first-child{margin-left:0}

/* ---------- Responsive ---------- */
@media(max-width:960px){
  .hero-inner{grid-template-columns:1fr;text-align:center;gap:24px}
  .hero-copy>p{margin:0 auto}
  .cta{justify-content:center}
  .two{grid-template-columns:1fr;gap:40px}
  .steps{grid-template-columns:1fr 1fr;row-gap:40px}
  .steps::before{display:none}
  .uses{grid-template-columns:1fr 1fr}
}
@media(max-width:700px){
  :root{--hh:64px}
  body{font-size:17px}
  .wrap,.top-inner,.hero-inner{padding-left:20px;padding-right:20px}
  .top-inner{flex-wrap:wrap;height:auto;min-height:var(--hh)}
  .menu-btn{display:block}
  header.top nav{display:none;flex-basis:100%;flex-direction:column;padding-bottom:8px}
  header.top.open nav{display:flex}
  header.top nav a{margin:0;padding:14px 0;border-top:1px solid var(--border);font-size:18px}
  header.top.open .menu-btn span:nth-child(1){transform:translateY(8px) rotate(45deg)}
  header.top.open .menu-btn span:nth-child(2){opacity:0}
  header.top.open .menu-btn span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
  .hero{padding:32px 0 40px}
  .hero-copy>p{font-size:18px}
  .cta{margin-top:32px}
  .phone{width:260px;height:540px;border-radius:46px;padding:10px}
  .screen{border-radius:37px;padding:46px 13px 18px}
  .cue-title{font-size:19px}
  .rings i{width:280px;height:280px}
  section{padding:32px 0}
  .demo{padding:16px;border-radius:22px}
  .track{padding:14px 16px 16px}
  .words{font-size:18px}
  /* steps become a vertical timeline */
  .steps{grid-template-columns:1fr;row-gap:28px;margin-top:40px}
  .steps::before{display:block;top:24px;bottom:24px;left:23px;right:auto;width:2px;height:auto;background:linear-gradient(180deg,var(--accent),var(--tint))}
  .steps li{display:grid;grid-template-columns:48px 1fr;column-gap:20px}
  .steps li::before{grid-row:span 2;margin:0}
  .steps h3{align-self:end;font-size:20px;margin:0 0 4px}
  .steps p{max-width:none}
  .track-x{padding:20px calc(50% - 140px) 28px;gap:14px;-webkit-mask:none;mask:none}
  .fcard{flex-basis:280px;min-height:260px;padding:28px 24px;border-radius:24px}
  .fcard h3{font-size:22px;margin-top:32px}
  .fcard p{font-size:16px}
  .uses{grid-template-columns:1fr;gap:14px;margin-top:36px}
  .uses>div{display:grid;grid-template-columns:48px 1fr;column-gap:16px;padding:20px}
  .uses .ico{grid-row:span 2;margin:0}
  .uses h3{margin:2px 0 4px}
  .closer{padding:48px 20px}
  .foot{flex-direction:column;text-align:center;gap:16px}
  footer nav{display:flex;gap:20px}footer nav a{margin:0}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rings{animation:none}
  .scrub .bar i{transition:none}
  .rings{display:none}
  .track-x{scroll-behavior:auto}
}

/* shrink the phone on short screens so the hero fits one screen */
@media(min-width:961px) and (max-height:760px){
  .phone{width:250px;height:520px;border-radius:44px;padding:9px;transform:rotate(-3deg)}
  .screen{border-radius:36px;padding:44px 13px 18px}
  .cue-title{font-size:19px}
  .rings i{width:280px;height:280px}
  .hero h1{font-size:clamp(40px,4.6vw,56px)}
}

.pro{display:inline-block;vertical-align:middle;margin-left:8px;padding:3px 10px;border-radius:999px;background:var(--tint);color:var(--strong);font:500 12px "DM Sans",sans-serif;letter-spacing:.1em;text-transform:uppercase;position:relative;top:-2px}

/* ---------- Phones: tighten spacing so each screen fits one viewport ---------- */
@media(max-width:700px){
  section{padding:20px 0}
  h2{font-size:28px;margin-bottom:12px}
  .eyebrow{margin-bottom:8px}

  /* hero: copy on top, the phone mockup fills what is left and is cropped at the bottom */
  .hero{padding:40px 0 0}
  .hero-inner{display:flex;flex-direction:column;gap:8px;width:100%;flex:1;min-height:calc(100svh - var(--hh) - 41px)}
  .hero h1{font-size:clamp(32px,9.4vw,40px);margin-bottom:14px}
  .hero-copy>p{font-size:16.5px;line-height:1.5}
  .cta{margin-top:20px;gap:10px;flex-wrap:nowrap}
  .cta .appstore,.cta .pill{flex:0 0 auto}
  .cta .pill{height:48px}
  .cta .appstore img{height:48px}
  .cta .pill{padding:0 20px;font-size:15.5px}
  /* Only the phone is cropped and faded; the rings are not, so they never show a rectangular edge. */
  .phone-wrap{flex:1 1 0;min-height:120px;place-items:start center;padding:0}
  .phone-crop{width:100%;height:100%;overflow:hidden;display:grid;place-items:start center;padding-top:12px;
    -webkit-mask:linear-gradient(#000 70%,transparent);mask:linear-gradient(#000 70%,transparent)}
  .rings{align-items:start;padding-top:72px}
  .hero-copy{position:relative;z-index:1}

  /* what */
  .two{gap:20px}
  .two p{font-size:16px;line-height:1.5;margin-bottom:10px}
  .demo{padding:12px;gap:2px}
  .track{padding:12px 14px 14px}
  .track-head{height:20px;margin-bottom:6px}
  .words{font-size:16px;line-height:1.45}
  .lag{padding:2px 0}

  /* how */
  .steps{row-gap:20px;margin-top:24px}
  .steps li::before{margin-bottom:0}
  .steps p{font-size:15px;line-height:1.45}

  /* features */
  .carousel{margin-top:20px}
  .fcard{min-height:230px;padding:24px 22px}
  .fcard h3{margin-top:24px}

  /* who */
  .uses{gap:10px;margin-top:20px}
  .uses>div{padding:14px 16px}
  .uses p{font-size:15px;line-height:1.45}

  /* closer */
  .closer{padding:36px 20px;gap:18px}
}

/* Short phones (e.g. iPhone SE): drop secondary copy so each screen still fits */
@media(max-width:700px) and (max-height:720px){
  .two p.muted{display:none}
  .uses p{display:none}
  .uses>div{padding:12px 16px}
  .uses h3{margin:0;align-self:center}
  .uses .ico{grid-row:auto}
  .steps{row-gap:14px}
  .hero-copy>p{font-size:15.5px}
  .fcard{min-height:200px}
}

@media(max-width:400px){
  .cta{gap:8px;justify-content:center}
  .cta .pill{padding:0 14px;font-size:15px}
}

/* Tablets (single-column hero): crop the phone mockup so the hero fits one screen */
@media(min-width:701px) and (max-width:960px){
  .hero{padding:24px 0 0}
  .hero-inner{display:flex;flex-direction:column;gap:16px;width:100%;flex:1;min-height:calc(100svh - var(--hh) - 25px)}
  /* Only the phone is cropped and faded; the rings are not, so they never show a rectangular edge. */
  .phone-wrap{flex:1 1 0;min-height:160px;place-items:start center;padding:0}
  .phone-crop{width:100%;height:100%;overflow:hidden;display:grid;place-items:start center;padding-top:12px;
    -webkit-mask:linear-gradient(#000 70%,transparent);mask:linear-gradient(#000 70%,transparent)}
  .rings{align-items:start;padding-top:72px}
  .hero-copy{position:relative;z-index:1}
  section{padding:32px 0}
}

/* iOS Safari: size every screen for the LARGEST viewport (toolbars collapsed) so the next section can never
   peek in below; pad the bottom by the toolbar height so content stays centred in the visible area. */
:root{--extra:calc(100lvh - 100svh)}
.hero,section{min-height:calc(100vh - var(--hh));min-height:calc(100lvh - var(--hh))}
.hero{padding-bottom:calc(24px + var(--extra))}
section{padding-bottom:calc(48px + var(--extra))}
@media(max-width:700px){
  .hero{padding-bottom:var(--extra)}
  section{padding-bottom:calc(20px + var(--extra))}
}
@media(min-width:701px) and (max-width:960px){
  .hero{padding-bottom:var(--extra)}
  section{padding-bottom:calc(32px + var(--extra))}
}

/* Offset snap points and anchor jumps by the sticky header. scroll-margin on the targets is honoured by iOS Safari,
   which was not applying scroll-padding on the root and landing each section ~one header-height too high. */
.hero,section{scroll-margin-top:var(--hh)}

/* ---------- Contact & Support pages (reached from the footer links only) ---------- */
html.plain{scroll-snap-type:none}
.back{color:var(--muted);text-decoration:none;font-size:16px;transition:color .15s}
.back:hover{color:var(--strong)}
main.page{padding:72px 0 96px}
.wrap.narrow{max-width:680px}
.page h1{font-size:clamp(34px,5vw,48px);font-weight:700;letter-spacing:-.02em;margin-bottom:14px}
.page .lead{color:var(--muted);font-size:19px;margin-bottom:40px}
.form{display:grid;gap:20px}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.form label{display:grid;gap:8px;font-size:15px;color:var(--muted)}
.form label span{color:var(--text);font-weight:500}
.form label em{font-style:normal;color:var(--muted);font-weight:400}
.form input,.form select,.form textarea{width:100%;font:400 17px/1.4 "DM Sans",system-ui,sans-serif;color:var(--text);background:var(--card);border:1px solid var(--border);border-radius:14px;padding:14px 16px;transition:border-color .15s,box-shadow .15s;-webkit-appearance:none;appearance:none}
.form select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%239AA9A6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;padding-right:40px}
.form textarea{resize:vertical;min-height:160px}
.form input::placeholder,.form textarea::placeholder{color:#7C8B88}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.form .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-actions{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.form-actions .pill{border:0;cursor:pointer;font-family:inherit}
.form-actions .pill:disabled{opacity:.6;cursor:default;transform:none}
.form-status{margin:0;font-size:16px;color:var(--muted)}
.form-status.ok{color:var(--strong)}
.form-status.err{color:#F2B8B5}
.page .fine{margin-top:32px;font-size:15px;color:var(--muted)}
.page .fine a{color:var(--strong)}
@media(max-width:700px){
  main.page{padding:40px 0 64px}
  .form .row{grid-template-columns:1fr}
  .page .lead{font-size:17px;margin-bottom:28px}
}

/* ---------- Privacy policy (long-form text) ---------- */
.legal .meta{color:var(--muted);font-size:15px;margin:-6px 0 28px}
.legal .lead{margin-bottom:36px}
.legal h2{font-size:24px;margin:40px 0 12px;letter-spacing:-.01em}
.legal p,.legal li{font-size:17px;line-height:1.65;color:var(--text)}
.legal ul{margin:0 0 16px;padding-left:22px}
.legal li{margin-bottom:8px}
.legal li::marker{color:var(--accent)}
.legal a{color:var(--strong)}
@media(max-width:700px){.legal h2{font-size:21px;margin-top:32px}.legal p,.legal li{font-size:16px}}

/* ---------- Contact & Support: roomy two-column layout on wide screens ---------- */
html.plain body{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
html.plain main.page{flex:1;display:flex;align-items:center;position:relative;overflow:hidden;padding:56px 0 72px}
html.plain main.page::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(700px 520px at 78% 40%,rgba(63,179,156,.14),transparent 70%),radial-gradient(800px 500px at 0% 0%,rgba(63,179,156,.06),transparent 60%)}
main.page>.wrap{position:relative;width:100%}
.wrap.split{max-width:1200px;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(48px,7vw,112px);align-items:center}
.split .intro h1{font-size:clamp(40px,4.6vw,64px);line-height:1.04;letter-spacing:-.03em;margin-bottom:20px}
.split .intro .lead{font-size:clamp(18px,1.5vw,21px);max-width:26em;margin-bottom:0}
.split .intro .fine{margin-top:32px;font-size:16px}
.form-card{background:var(--card);border:1px solid var(--border);border-radius:32px;padding:clamp(28px,3vw,48px);box-shadow:0 40px 80px -40px rgba(0,0,0,.6)}
.form-card .form{gap:22px}
.form-card .form input,.form-card .form select,.form-card .form textarea{background:var(--bg);font-size:18px;padding:16px 18px;border-radius:16px}
.form-card .form select{padding-right:44px}
.form-card .form textarea{min-height:180px}
@media(max-width:960px){
  .wrap.split{grid-template-columns:1fr;gap:32px;align-items:start}
  html.plain main.page{padding:40px 0 64px;align-items:flex-start}
  .split .intro h1{font-size:clamp(34px,8vw,48px)}
  .split .intro .fine{margin-top:20px}
}
@media(max-width:700px){
  .form-card{border-radius:24px;padding:22px 18px}
  .form-card .form{gap:18px}
  .form-card .form input,.form-card .form select,.form-card .form textarea{font-size:17px;padding:14px 16px}
}

/* ---------- Contact, Support and Privacy pages: browser surfaces and type ---------- */
html.plain ::selection{background:rgba(63,179,156,.32);color:#fff}
html.plain{scrollbar-color:#34433F var(--bg);scrollbar-width:thin}
html.plain input,html.plain textarea{caret-color:var(--accent)}
html.plain a:focus-visible,html.plain button:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:8px}
html.plain .pill:focus-visible{border-radius:999px}
html.plain h1,html.plain h2,html.plain h3{text-wrap:balance}
html.plain p,html.plain li{text-wrap:pretty}

/* Single-column hero (tablets and phones): the crop box spans the full width, so the tilted phone is
   never clipped at its sides, and the phone has no colored halo, which the crop box would cut into a rectangle. */
@media(max-width:960px){
  .phone-wrap{align-self:stretch;width:100%}
  .phone{box-shadow:0 0 0 1px #3A4846}
}
/* Phones: no pulsing rings, and a slightly larger phone. */
@media(max-width:700px){
  .rings{display:none}
  .phone{width:min(284px,82vw);height:auto;aspect-ratio:284/590}
}