:root{
  --bg:#0A0A0A; --surface:#141414; --surface-2:#1C1C1C; --border:#272727;
  --primary:#00D4AA; --primary-dim:#00A882;
  --text:#FFFFFF; --text-2:#A6A6A6; --text-3:#8C8C8C;
  --r-s:10px; --r-m:16px; --r-l:24px;
  --maxw:1140px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--bg);color:var(--text);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;
  font-feature-settings:"tnum" 0;
}
img{max-width:100%;display:block}
a{color:var(--primary);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.skip{position:absolute;left:-9999px;top:0;background:var(--primary);color:#000;padding:10px 16px;z-index:99}
.skip:focus{left:8px;top:8px}

/* header */
header{position:sticky;top:0;z-index:50;background:rgba(10,10,10,.86);backdrop-filter:blur(14px);border-bottom:1px solid var(--border)}
.nav{display:flex;align-items:center;gap:24px;height:68px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:18px;color:var(--text)}
.brand:hover{text-decoration:none}
.brand .dot{width:26px;height:26px;border-radius:8px;background:linear-gradient(140deg,var(--primary),var(--primary-dim));display:grid;place-items:center;color:#04140f;font-size:15px;font-weight:900}
.nav-links{display:flex;gap:22px;margin-left:auto;align-items:center}
.nav-links a{color:var(--text-2);font-size:14px;font-weight:500}
.nav-links a:hover,.nav-links a[aria-current=page]{color:var(--text);text-decoration:none}
.langs{display:flex;gap:6px;align-items:center;font-size:12px}
.langs a{color:var(--text-2);padding:4px 7px;border-radius:6px;text-transform:uppercase;letter-spacing:.04em;font-weight:600}
.langs a[aria-current=true]{color:var(--primary);background:rgba(0,212,170,.10)}
@media(max-width:840px){.nav-links a.hide-s{display:none}}

/* hero */
.hero{padding:96px 0 72px;position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;inset:-40% 40% 40% -20%;
  background:radial-gradient(ellipse at center,rgba(0,212,170,.14),transparent 62%);pointer-events:none}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;position:relative}
.eyebrow{color:var(--primary);font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;margin-bottom:18px}
h1{font-size:clamp(34px,5.1vw,58px);line-height:1.04;letter-spacing:-.03em;font-weight:800;text-wrap:balance}
.hero p.lead{color:var(--text-2);font-size:18px;margin-top:20px;max-width:52ch}
.cta-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:32px;align-items:center}
.btn{display:inline-flex;align-items:center;gap:10px;padding:14px 24px;border-radius:var(--r-m);
  font-weight:700;font-size:15px;transition:transform .15s ease,background .2s ease;white-space:nowrap}
.btn:hover{text-decoration:none}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--primary);color:#04140f}
.btn-primary:hover{background:#12E5BC}
.btn-ghost{border:1px solid var(--border);color:var(--text)}
.btn-ghost:hover{border-color:var(--primary);color:var(--primary)}
.note{color:var(--text-3);font-size:13px}
/* The one screenshot primitive, used by the hero and by every .split section.
   It is a grid item in both, and a grid item stretches to fill its column
   unless told otherwise — so the border, surface and glow were painted across
   the whole column while the 440px portrait sat at the left edge of it. That
   is the dark strip beside each phone, and once a section stacked to one
   column it became half an empty rectangle. Shrink-wrapping the frame to the
   screenshot's own width fixes every instance at once.
   height:auto matters too: the <img> carries width/height attributes, and
   without it a narrowed image keeps its 892px height and distorts. */
.shot{justify-self:center;width:100%;max-width:440px;
  border-radius:26px;border:1px solid var(--border);background:var(--surface);overflow:hidden;
  box-shadow:0 30px 80px -30px rgba(0,212,170,.28)}
.shot img{width:100%;height:auto}
@media(max-width:900px){.hero-grid{grid-template-columns:1fr;gap:40px}.hero{padding:64px 0 56px}}

/* sections */
section{padding:84px 0;border-top:1px solid var(--border)}
h2{font-size:clamp(26px,3.4vw,38px);line-height:1.14;letter-spacing:-.02em;font-weight:800;text-wrap:balance}
section > .wrap > p.sub{color:var(--text-2);margin-top:14px;max-width:62ch;font-size:17px}
h3{font-size:19px;font-weight:700;letter-spacing:-.01em}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:44px;counter-reset:step}
.step{position:relative;padding-top:26px;border-top:2px solid var(--border)}
.step::before{counter-increment:step;content:"0" counter(step);position:absolute;top:-13px;left:0;
  background:var(--bg);padding-right:10px;color:var(--primary);font-weight:800;font-size:13px;letter-spacing:.08em}
.step p{color:var(--text-2);margin-top:10px;font-size:15px}
@media(max-width:820px){.steps{grid-template-columns:1fr;gap:34px}}

.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;margin-top:40px}
.split.rev > .col-text{order:2}
@media(max-width:900px){.split{grid-template-columns:1fr;gap:32px}.split.rev > .col-text{order:0}}
.bullets{list-style:none;margin-top:22px;display:grid;gap:14px}
.bullets li{padding-left:26px;position:relative;color:var(--text-2);font-size:15px}
.bullets li::before{content:"";position:absolute;left:0;top:9px;width:8px;height:8px;border-radius:3px;background:var(--primary)}

.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;margin-top:40px}

/* A bullet list that stands on its own rather than beside a phone: two columns
   where there is room, one where there is not. */
.bullets-wide{margin-top:28px;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:14px 40px}
.sub-h{margin-top:52px;font-size:18px;font-weight:600;color:var(--text)}

/* FAQ. Answers are closed by default: the page should be skimmable, and a
   question nobody has is not worth the vertical space. */
.faqs{margin-top:32px;display:grid;gap:12px;max-width:82ch}
.faq{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-m);padding:18px 20px}
.faq summary{cursor:pointer;font-weight:600;font-size:16px;color:var(--text);list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";float:right;color:var(--primary);font-weight:700;font-size:20px;line-height:1}
.faq[open] summary::after{content:"‘2"}
.faq p{margin-top:12px;color:var(--text-2);font-size:15px;line-height:1.6}
.tile{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-l);padding:24px}
.tile h3{font-size:16px}
.tile p{color:var(--text-2);font-size:14px;margin-top:8px}

.plans{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:40px;align-items:start}
.plan{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-l);padding:28px;display:flex;flex-direction:column;height:100%}
.plan.pro{border-color:rgba(0,212,170,.5)}
.plan h3{font-size:15px;text-transform:uppercase;letter-spacing:.1em;color:var(--text-3)}
.plan.pro h3{color:var(--primary)}
.plan ul{list-style:none;margin-top:18px;display:grid;gap:11px}
.plan li{color:var(--text-2);font-size:14.5px;padding-left:22px;position:relative}
.plan li::before{content:"";position:absolute;left:0;top:8px;width:6px;height:6px;border-radius:50%;background:var(--text-3)}
.plan.pro li::before{background:var(--primary)}
@media(max-width:760px){.plans{grid-template-columns:1fr}}

/* legal / long-form */
.doc{padding:64px 0 96px}
.doc .wrap{max-width:760px}
.doc h1{font-size:clamp(30px,4vw,42px)}
.doc .updated{color:var(--text-3);font-size:14px;margin-top:12px}
.doc h2{font-size:22px;margin-top:44px}
.doc h3{font-size:17px;margin-top:28px}
.doc p,.doc li{color:var(--text-2);font-size:15.5px;margin-top:14px}
.doc p a,.doc li a{text-decoration:underline}
.doc ul,.doc ol{margin-top:8px;padding-left:22px}
.doc li{margin-top:8px}
.doc strong{color:var(--text)}
.callout{background:var(--surface);border:1px solid var(--border);border-left:3px solid var(--primary);
  border-radius:var(--r-s);padding:18px 20px;margin-top:24px}
.callout p{margin-top:0}
table.data{width:100%;border-collapse:collapse;margin-top:20px;font-size:14.5px;display:block;overflow-x:auto}
table.data th,table.data td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--border);vertical-align:top}
table.data th{color:var(--text);font-weight:600;white-space:nowrap}
table.data td{color:var(--text-2)}

/* faq */
.faq{display:grid;gap:2px;margin-top:36px;border-top:1px solid var(--border)}
.faq-item{border-bottom:1px solid var(--border);padding:22px 0}
.faq-item h3{font-size:16px}
.faq-item p{color:var(--text-2);font-size:15px;margin-top:8px}

footer{border-top:1px solid var(--border);padding:52px 0 64px;color:var(--text-3);font-size:14px}
.foot-grid{display:flex;gap:40px;flex-wrap:wrap;justify-content:space-between}
.foot-links{display:flex;gap:22px;flex-wrap:wrap}
.foot-links a{color:var(--text-2);font-size:14px}
footer .fine{margin-top:28px;font-size:13px;color:var(--text-3);max-width:62ch}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}}