/* Tolk home page, style "丁": Fraunces headlines + Figtree text; cool white ground, near-black ink, Tolk blue
   (decoration #2E8CF0, buttons and links #1B63BF / #1A5FB4 — TolkMacCore/UI/Theme.swift). Since 2026-10-19 (the owner's
   pick 丙 after an editorial reference) the sections sit on thin rules instead of white panels, labels are small bordered
   pills, the main button is black, and the page closes on one dark band. The phone is in phone.css. */
:root{
  --bg:#F6F7F9; --surface:#FFFFFF; --ink:#0E1116; --ink-2:#3E4652; --ink-3:#5A6472;
  --line:#E3E7EC; --blue:#1B63BF; --blue-ink:#1A5FB4; --brand:#2E8CF0; --tint:#E3EDFB;
  --serif:"Fraunces","Noto Serif SC","Songti SC",Georgia,serif; --sans:"Figtree","PingFang SC","Noto Sans SC",system-ui,sans-serif;
  --ios:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Arial,sans-serif;
  --gutter:clamp(16px,5vw,64px); --rhythm:clamp(72px,10vw,128px);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion: no-preference){ html{scroll-behavior:smooth} }
body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.55 var(--sans);-webkit-font-smoothing:antialiased}
a{color:var(--blue-ink);text-decoration:none} a:hover{color:#124A8C}
button{font:inherit}
:focus-visible{outline:2.5px solid var(--brand);outline-offset:3px}
.wrap{max-width:1160px;margin:0 auto;padding-inline:var(--gutter)}
section{scroll-margin-top:24px}

/* Navigation */
.nav{display:flex;align-items:center;justify-content:space-between;height:76px}
.brand{display:flex;align-items:center;gap:10px;color:var(--ink);font:600 21px/1 var(--serif)}
.brand img{width:32px;height:32px;border-radius:8px}
.nav-links{display:flex;align-items:center;gap:28px;font-weight:500;font-size:15px}
.nav-links a{color:#2B323C}
.lang{display:flex;gap:2px;padding:3px;border-radius:999px;background:#E7EAEF}
.lang a{padding:6px 11px;border-radius:999px;font-size:13px;font-weight:500;color:#4A5361}
.lang a[aria-current="page"]{background:#fff;color:var(--ink);font-weight:600;box-shadow:0 1px 2px rgba(14,17,22,.12)}

/* Hero: the words on the left; on the right the short loop, what is being said beside it, and the three ways in */
.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,560px);gap:clamp(32px,4vw,56px);align-items:center;padding-top:clamp(16px,3vw,40px)}
.eyebrow,.kicker{display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 13px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--ink-2);font-weight:500;font-size:13.5px;letter-spacing:.01em}
h1{font:500 clamp(40px,4vw,54px)/1.05 var(--serif);letter-spacing:-.02em;margin:22px 0 0}
.lede,.section-lede,.fcard p,.pledges p{text-wrap:pretty}   /* no last line of one lonely character */
.lede{max-width:520px;margin:22px 0 0;font-size:clamp(17px,1.6vw,19px);color:var(--ink-2)}
.ctas{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-top:30px}
.btn{display:inline-flex;align-items:center;height:52px;padding:0 24px;border-radius:999px;font-weight:600;font-size:16px}
.btn-primary{background:var(--ink);color:#fff;gap:12px}
.btn-primary::after{content:"";width:7px;height:7px;border-right:1.5px solid currentColor;border-top:1.5px solid currentColor;transform:rotate(45deg);margin-right:2px}
.more-link{font-weight:600}
.req{margin:14px 0 0;font-size:14px;color:var(--ink-3)}
.hero-visual{display:flex;flex-direction:column;align-items:flex-end;gap:22px}
.stage{position:relative;margin-right:clamp(0px,3vw,40px)}
.hero .phone-slot{--s:.66}
.phone-link{display:block;border-radius:44px}
.say{position:absolute;right:calc(100% + 18px);top:44%;width:230px;display:flex;flex-direction:column;gap:10px}
.say p{margin:0;padding:12px 14px;border-radius:16px;background:var(--surface);box-shadow:0 18px 40px -18px rgba(20,40,80,.35),0 0 0 1px var(--line);font:500 15px/1.4 var(--serif);opacity:0;transform:translateY(6px);transition:opacity .4s,transform .4s}
.say p.on{opacity:1;transform:none}
.say small{display:flex;align-items:center;gap:6px;margin-bottom:4px;font:600 12px/1.3 var(--sans);color:var(--blue-ink)}
.say small.ok{margin:0;color:#1E8A4C}
.stage > .toggle{position:absolute;left:calc(100% + 12px);bottom:10px}
.jump{align-self:stretch;display:flex;justify-content:center;gap:8px;flex-wrap:wrap}
.jump a{position:relative;overflow:hidden;height:44px;padding:0 18px 0 12px;border:1px solid var(--line);background:var(--surface);border-radius:999px;display:inline-flex;align-items:center;gap:10px;font-size:15px;font-weight:600;color:var(--ink);transition:border-color .35s,box-shadow .35s}
.jump a:hover{border-color:#B9CCE8;color:var(--ink)}
.jump .n{width:22px;height:22px;border-radius:50%;background:var(--tint);color:var(--blue-ink);display:grid;place-items:center;font-size:12px;transition:background-color .35s,color .35s}
.jump a.on .n{background:var(--blue);color:#fff}

/* A feature section: title and steps on one side, its phone on the other; steps light up as the phone acts them */
.feature,.privacy{margin-top:var(--rhythm);padding-top:clamp(40px,6vw,72px);border-top:1px solid var(--line)}   /* flat, ruled sections (2026-10-19 preview: the reference's thin lines instead of white panels) */
.feature{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:1fr auto auto 1fr;
  grid-template-areas:". demo" "head demo" "steps demo" ". demo";column-gap:clamp(40px,6vw,96px)}
.feature.flip{grid-template-columns:auto minmax(0,1fr);grid-template-areas:"demo ." "demo head" "demo steps" "demo ."}   /* phone left, words right */
.feature-head{grid-area:head}
h2{font:500 clamp(34px,4.2vw,50px)/1.08 var(--serif);letter-spacing:-.015em;margin:18px 0 0}
.center{max-width:720px;margin-inline:auto;text-align:center}
.center .section-lede{margin-inline:auto}
.section-lede{margin:16px 0 0;max-width:520px;color:var(--ink-2);font-size:18px}
.steps{grid-area:steps;list-style:none;margin:28px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.steps{position:relative;isolation:isolate}
.steps::before{content:"";position:absolute;z-index:-1;inset:4% 2% 4% 8%;background:radial-gradient(closest-side at 30% 35%,rgba(46,140,240,.20),transparent),radial-gradient(closest-side at 72% 70%,rgba(89,199,255,.22),transparent);filter:blur(28px)}
.step{position:relative;overflow:hidden;padding:16px 20px 18px;border-radius:18px;border:1px solid transparent;color:#A9B1BC;transition:border-color .35s,box-shadow .35s,color .35s}
.step .num{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#EEF1F5;font-size:12px;font-weight:700;transition:background-color .35s,color .35s}
.step h3{margin:8px 0 2px;font:500 23px/1.2 var(--serif)}
.step p{margin:0;font-size:15px}
.step q{display:block;margin-top:8px;font:500 15px/1.45 var(--serif)}
.step.on{color:var(--ink-2)}
.step.on h3,.step.on q{color:var(--ink)}
.step.on .num{background:var(--blue);color:#fff}

/* What is playing now — a step beside a phone, or a tab under the hero phone — is light-blue frosted glass (owner,
   2026-09-27): a gradient from pale blue (not white: that blurred into the white card) to a deeper blue, a fine grain
   on ::before (so it can fade in), a bright top edge, a blur of what glows behind it, a soft blue shadow. A line
   along its foot fills for as long as it plays (--span, set by player.js). Steps not playing are pale grey. */
.step,.jump a{isolation:isolate}   /* the glass layer below sits under their text, over their own background */
.step::before,.jump a::before{content:"";position:absolute;z-index:-1;inset:0;border-radius:inherit;opacity:0;transition:opacity .35s;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 -.1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(90% 130% at 0% 0%,rgba(255,255,255,.6),rgba(255,255,255,0) 50%),
    radial-gradient(100% 140% at 100% 100%,rgba(64,170,255,.42),rgba(64,170,255,0) 65%),
    linear-gradient(135deg,rgba(214,230,252,.85),rgba(160,198,247,.82))}
.step.on,.jump a.on{border-color:rgba(255,255,255,.9);-webkit-backdrop-filter:blur(18px) saturate(1.5);backdrop-filter:blur(18px) saturate(1.5);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 0 0 1px rgba(46,140,240,.16),0 18px 40px -22px rgba(27,99,191,.55),0 2px 8px -3px rgba(27,99,191,.14)}
.step.on::before,.jump a.on::before{opacity:1}
.step::after,.jump a::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:3px;background:var(--brand);transform:scaleX(0);transform-origin:left}
.step.on::after,.jump a.on::after{animation:fill var(--span,3s) linear forwards}
@keyframes fill{to{transform:scaleX(1)}}
.feature-demo{grid-area:demo;display:flex;flex-direction:column;align-items:center;gap:14px}
.demo-controls{display:flex;align-items:center;gap:12px}
.caption{display:none;margin:0;font:500 18px/1.3 var(--serif)}
.caption span{color:var(--blue-ink);font:700 13px var(--sans);margin-right:8px}

/* Pause / play: two bars, or a triangle once paused. A paused section freezes every running animation in it. */
.paused *,.paused *::after{animation-play-state:paused!important}
.toggle{width:34px;height:34px;flex:none;border-radius:50%;border:1px solid #CCD4DF;background:var(--surface);color:var(--ink-2);display:grid;place-items:center;cursor:pointer;padding:0}
.toggle:hover{border-color:#AEB9C7;color:var(--ink)}
.toggle[hidden]{display:none}
.toggle::before{content:"";width:10px;height:12px;border-inline:3px solid currentColor}
.toggle[aria-pressed="true"]::before{width:0;height:0;border-right:0;border-left:10px solid currentColor;border-block:6px solid transparent;margin-left:3px}


/* About Tolk: everything it does, as cards, no animation; the three core ones carry a filled blue icon */
.about{margin-top:var(--rhythm)}
.about-head{max-width:680px}
.features{list-style:none;margin:48px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.fcard{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:26px 24px 28px;display:flex;flex-direction:column;gap:10px}
.fcard .ico,.pledges .ico{width:24px;height:24px;color:var(--ink);display:grid;place-items:center;margin-bottom:8px}
.fcard.core .ico{color:var(--blue)}
.fcard h3,.pledges h3{margin:6px 0 0;font:600 18px/1.3 var(--sans)}
.fcard p,.pledges p{margin:0;font-size:15px;color:var(--ink-2)}

/* Privacy: what can already be promised, three short points in one white panel, no animation. The last point is a
   placeholder (dashed, grey) until the full policy is written — together with the relay (HANDOFF 8 f). */
.privacy header{max-width:680px}
.privacy .more-link{display:inline-block;margin-top:18px}   /* to the full policy (/tolk/privacy/) */
.pledges{list-style:none;margin:44px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}   /* two pledges until the full policy exists (a third, "how long, how to delete", and the link to the policy come back with it) */
.pledges li{display:flex;flex-direction:column;gap:8px;padding-top:24px;border-top:1px solid var(--line)}

/* The Mac: one dark banner pointing to its own page (the home page is about the phone, owner 2026-09-26). The keys
   are the Mac's own default for dictation — tap control and shift — drawn as keycaps; no animation. */
.mac{margin-top:var(--rhythm);position:relative;overflow:hidden;isolation:isolate;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:16px;
  padding:clamp(28px,5vw,72px);display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:center}
.mac .more-link{display:inline-block;margin-top:18px}
.keys{margin:0;display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}
.keycaps{display:flex;align-items:center;gap:14px;margin-bottom:6px}
.keycaps b{font:500 24px var(--sans);color:#8B95A3}
.keycaps kbd{width:clamp(84px,9vw,104px);aspect-ratio:1;border-radius:16px;padding:12px 14px;display:flex;flex-direction:column;justify-content:space-between;
  background:linear-gradient(#FDFDFE,#E3E7ED);color:#3E4652;font:500 14px/1 var(--ios);text-align:left;
  box-shadow:inset 0 1px 0 #fff,0 3px 0 #B5BEC9,0 14px 26px -14px rgba(0,0,0,.45)}
.keycaps kbd span{font-size:24px;color:var(--ink)}
.keys figcaption{font:500 16px/1.4 var(--sans);color:var(--ink-2)}
.mac .req{margin:0;color:var(--ink-3)}
.keys figcaption,.mac .req{text-wrap:balance}

footer{margin-top:var(--rhythm);border-top:1px solid var(--line);padding-block:36px 48px}
.foot{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.foot b{font:600 19px var(--serif)}
.foot small{display:block;margin-top:6px;color:var(--ink-3);font-size:13px}
.foot nav{display:flex;gap:22px;font-size:14px}
.foot nav a{color:#2B323C}

/* Four facts in one ruled strip under the hero */
.facts{list-style:none;margin:clamp(48px,7vw,88px) 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.facts li{padding:28px 24px 30px;border-left:1px solid var(--line)}
.facts li:first-child{border-left:0;padding-left:4px}
.facts b{display:block;font:500 clamp(34px,3.6vw,46px)/1 var(--serif);letter-spacing:-.02em}
.facts span{display:block;margin-top:10px;font-size:14px;color:var(--ink-3)}

/* FAQ: numbered questions on thin rules; <details> opens them, a + turns into × */
.faq{margin-top:var(--rhythm);padding-top:clamp(40px,6vw,72px);border-top:1px solid var(--line)}
.faq-list{max-width:860px;margin:44px auto 0;border-top:1px solid var(--line);counter-reset:faq}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:20px 6px;font:600 17px/1.4 var(--sans)}
.faq summary::-webkit-details-marker{display:none}
.faq .q::before{counter-increment:faq;content:counter(faq,decimal-leading-zero) ".";margin-right:12px;color:var(--ink-3);font-weight:500}
.faq summary::after{content:"+";flex:none;width:28px;height:28px;display:grid;place-items:center;border-radius:50%;border:1px solid var(--line);font:300 20px/1 var(--sans);color:var(--ink-2);transition:transform .25s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .a{margin:0;padding:0 46px 24px 6px;max-width:760px;color:var(--ink-2);font-size:16px}

/* The close: one dark band, the two ways in again */
.cta{margin-top:var(--rhythm);position:relative;overflow:hidden;isolation:isolate;border-radius:16px;background:var(--ink);color:#fff;padding:clamp(48px,7vw,96px) clamp(24px,5vw,72px);text-align:center}
.cta::before{content:"";position:absolute;z-index:-1;inset:0;background:radial-gradient(60% 90% at 50% 115%,rgba(46,140,240,.38),transparent 70%)}
.cta .kicker{border-color:rgba(255,255,255,.22);background:transparent;color:#D5DAE2}
.cta h2{color:#fff}
.cta .section-lede{color:#C4CCD8;margin-inline:auto}
.cta .ctas{justify-content:center}
.cta .btn-primary{background:#fff;color:var(--ink)}
.cta .more-link{color:#8CC2FF}

/* Chinese: Noto Serif SC for the headings (Fraunces has no Chinese), a little more air between lines */
:lang(zh) h1{font-size:clamp(36px,4vw,58px);line-height:1.2;letter-spacing:0;word-break:keep-all}   /* a line breaks only at its <br> */
:lang(zh) h2{font-size:clamp(28px,3.3vw,42px);line-height:1.25;letter-spacing:0;word-break:keep-all}   /* breaks only at <br>, <wbr>, punctuation */
:lang(zh) .facts b{letter-spacing:0}
:lang(zh) .step h3,:lang(zh) .say p,:lang(zh) .step q{letter-spacing:0}
:lang(zh) .kicker,:lang(zh) .eyebrow{letter-spacing:.04em}

/* Phones fit the height of the window they are seen in */
@media (max-height: 820px){ .hero .phone-slot{--s:.6} .feature .phone-slot{--s:.7} }
@media (min-height: 1000px){ .hero .phone-slot{--s:.72} .feature .phone-slot{--s:.86} }

@media (max-width: 960px){
  .nav-links > a{display:none}   /* the language switcher stays */
  .hero{grid-template-columns:1fr}
  .hero-visual{align-items:center}
  .stage{margin-right:0;width:min-content}
  .stage > .toggle{left:calc(100% + 6px);top:8px;bottom:auto}
  .say{position:static;width:auto;margin-top:18px;display:grid;align-content:start;min-height:108px}   /* one card at a time, in one spot as tall as the tallest, so nothing below jumps */
  .say p{grid-area:1/1}
  .say p.on:has(~ p.on){opacity:0}
  .feature,.feature.flip{grid-template-columns:1fr;grid-template-rows:none;grid-template-areas:"head" "demo" "steps"}
  .feature-demo{margin-top:32px}
  .caption{display:block}
  .features{grid-template-columns:repeat(2,minmax(0,1fr))}
  .facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .facts li:nth-child(odd){border-left:0;padding-left:4px}
  .facts li:nth-child(n+3){border-top:1px solid var(--line)}
  .mac{grid-template-columns:1fr}
}
@media (max-width: 560px){ .features,.pledges{grid-template-columns:1fr} }
@media (max-width: 460px){
  .hero .phone-slot{--s:.62}
  .jump{gap:6px}
  .jump a{height:40px;padding:0 14px;font-size:14px}
  .jump .n{display:none}
  .feature .phone-slot{--s:.76}
  .mac,.cta{border-radius:12px}
  .facts{grid-template-columns:1fr} .facts li{border-left:0;padding-left:4px} .facts li:nth-child(n+2){border-top:1px solid var(--line)}
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .step::after,.jump a::after{display:none}
}