/* Tokens are the app's own (ai-transcriber Transcriber/Views/DesignSystem.swift `Theme`), so
   the site reads as the same product. The app is dark-only, and so is this. Type is the
   system stack — San Francisco on Apple devices — rather than a web font, which would be a
   third-party request on a page whose job is to say the product makes none. */
:root{
  --bg:#000000;--card:#1C1C1E;--elevated:#2C2C2E;--rule:#2C2C2E;--border:#38383A;
  --ink:#FFFFFF;--ink2:#C7C7CC;--ink3:#8E8E93;
  --accent:#0A84FF;--accent-light:#409CFF;--accent-tint:#0A1F33;--accent-line:#123A63;
  --speaker:#FF9F0A;--rec:#FF453A;
  --sans:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --display:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,monospace;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:17px/1.6 var(--sans)}
a{color:var(--accent-light)}
img{max-width:100%}
.wrap{max-width:880px;margin:0 auto;padding:0 16px}
header.top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:20px 0;border-bottom:1px solid var(--rule)}
.brand{display:flex;align-items:center;gap:10px;font:600 18px/1 var(--display);color:var(--ink);text-decoration:none}
.brand img{border-radius:7px}
nav{display:flex;gap:18px}
nav a{color:var(--ink3);text-decoration:none;font:500 15px/1 var(--sans)}
nav a:hover,nav a[aria-current]{color:var(--ink)}
.eyebrow{display:flex;align-items:center;gap:8px;font:600 13px/1.4 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--ink3);margin:0 0 14px}
.eyebrow::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--rec);box-shadow:0 0 10px var(--rec)}
.hero{padding:56px 0 36px;max-width:660px}
.hero h1{font:700 clamp(34px,7vw,54px)/1.06 var(--display);letter-spacing:-.025em;margin:0 0 18px}
.hero h1 em{font-style:normal;color:var(--accent-light)}
.hero p{font-size:19px;color:var(--ink2);margin:0}
.badge{display:inline-block;margin-top:26px;padding:10px 16px;border-radius:999px;background:var(--accent);color:#fff;font:600 14px/1 var(--sans)}
.shots{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;padding:12px 0 48px}
.shots figure{margin:0}
.shots img{display:block;width:100%;height:auto;border-radius:24px;border:1px solid var(--border)}
.shots figcaption{font:600 13px/1.4 var(--sans);color:var(--ink3);margin-top:10px;text-align:center}
.label{font:600 13px/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--ink3);margin:0 0 10px 4px}
.card{background:var(--card);border-radius:16px}
.rows{margin:0 0 40px}
.row{padding:16px 20px;border-top:1px solid var(--rule)}
.row:first-child{border-top:0}
.row h3{font:600 17px/1.3 var(--sans);margin:0 0 4px}
.row p{margin:0;color:var(--ink2);font-size:15.5px}
.speaker{color:var(--speaker);font-weight:600}
.providers{display:grid;grid-template-columns:repeat(5,1fr);margin:0 0 40px}
.provider{padding:16px 14px;border-left:1px solid var(--rule)}
.provider:first-child{border-left:0}
.provider h3{font:600 15px/1.2 var(--sans);margin:0 0 6px}
.provider p{margin:0;color:var(--ink3);font-size:13.5px;line-height:1.45}
.promise{background:var(--accent-tint);border:1px solid var(--accent-line);border-radius:16px;padding:20px 22px;margin:0 0 56px}
.promise h2{font:600 19px/1.3 var(--display);margin:0 0 6px}
.promise p{margin:0;color:var(--ink2)}
article{padding:40px 0 56px;max-width:680px}
article h1{font:700 clamp(30px,6vw,42px)/1.1 var(--display);letter-spacing:-.02em;margin:0 0 8px}
article .meta{font:500 14px/1.4 var(--sans);color:var(--ink3);margin:0 0 30px}
article h2{font:600 21px/1.3 var(--display);margin:38px 0 10px}
article h3{font:600 17px/1.3 var(--sans);margin:24px 0 6px}
article p,article li{color:var(--ink2)}
article strong{color:var(--ink);font-weight:600}
article code{font:500 14px var(--mono);background:var(--card);border:1px solid var(--border);border-radius:5px;padding:1px 5px}
article .lede{font-size:19px;color:var(--ink)}
footer{border-top:1px solid var(--rule);padding:24px 0 40px;color:var(--ink3);font-size:14px;display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:space-between}
footer a{color:var(--ink3)}
@media (max-width:640px){
  .shots{grid-template-columns:1fr 1fr}.shots figure:nth-child(3){display:none}
  .providers{grid-template-columns:1fr 1fr}.provider{border-left:0;border-top:1px solid var(--rule)}.provider:nth-child(-n+2){border-top:0}.provider:nth-child(even){border-left:1px solid var(--rule)}
  .hero{padding:36px 0 28px}
  header.top{flex-wrap:wrap;row-gap:14px}nav{gap:16px}
  .badge{border-radius:14px;line-height:1.35}
}