/* Typd site, v4: the calm version of v3.
 *
 * The same system: Geist and Geist Mono, black on white with a dark mode, and ONE red, --cut, that
 * only ever means "taken out". Fewer parts and more room: the hero, three plain points, download.
 * The wordmark in the header and footer, and the hero's last frame, is Typd's drawn logotype
 * (Typd/assets/brand/ligature/wordmark.svg): the p and d share one bowl. It is drawn in ink.
 */

/* ------------------------------------------------------------------ tokens */
:root {
  --paper: #ffffff;
  --ink: #0a0a0a;
  --ink-2: #333331;
  --mute: #6b6b6b;           /* 5.3:1 on paper */
  --faint: #cfcfcb;
  --rule: #e2e2de;
  --wash: #f6f6f4;
  --cut: #e62600;            /* the one accent: removed, or not sent. 4.6:1 on paper */

  --hh: 72px;
  --m: clamp(20px, 4vw, 64px);
  --g: clamp(16px, 2vw, 32px);
  --fs-giant: clamp(88px, min(30vw, 46svh), 600px);
  --fs-h1: clamp(40px, 4.4vw, 70px);
  --fs-h2: clamp(30px, 3.4vw, 52px);
  --fs-say: clamp(20px, 1.8vw, 27px);
  --fs-stmt: clamp(44px, 6vw, 96px);
  --sec: clamp(120px, 13.5vw, 208px);
  --mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --sans: "Geist", "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0a0a0a; --ink: #f2f2ef; --ink-2: #d2d2ce; --mute: #8f8f8c; --faint: #4a4a47;
    --rule: #2a2a28; --wash: #121211; --cut: #ff4d26;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #0a0a0a; --ink: #f2f2ef; --ink-2: #d2d2ce; --mute: #8f8f8c; --faint: #4a4a47;
  --rule: #2a2a28; --wash: #121211; --cut: #ff4d26;
  color-scheme: dark;
}

/* ------------------------------------------------------------------ base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 24px; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--sans); font-size: 17px; line-height: 1.5;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
@supports (overflow: clip) { body { overflow-x: clip; } }
a { color: inherit; text-underline-offset: 3px; }
p, h1, h2, h3, ol, ul, dl, dd, figure, pre { margin: 0; padding: 0; }
button { font: inherit; color: inherit; }
svg { display: block; }
::selection { background: var(--ink); color: var(--paper); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: var(--m); top: -60px; background: var(--ink); color: var(--paper); padding: 8px 12px; z-index: 10; font-size: 14px; text-decoration: none; }
.skip:focus { top: 8px; }
/* no one-word last lines: headings balance, running text wraps "pretty" (the hero's animated sentence keeps plain wrapping) */
h1, h2, h3 { text-wrap: balance; }
p:not(.s), li, dd { text-wrap: pretty; }
kbd { font: 500 .86em var(--mono); border: 1px solid var(--faint); border-bottom-width: 2px; padding: 0 .35em; white-space: nowrap; }

.wrap { padding-inline: var(--m); }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); }
.lab { font-family: var(--mono); font-size: 12px; line-height: 1.4; letter-spacing: .01em; text-transform: uppercase; color: var(--mute); }

/* ------------------------------------------------------------------ the wordmark (Typd's drawn logotype) */
/* Hinted cuts of the 28.3 x 16-unit logotype: 42 x 24 px in the header (3 px stems), 56 x 32 in the footer
   (4 px stems), every straight edge on a whole pixel. The side padding is rounded to whole pixels so the
   edges stay there. */
.brand { display: inline-flex; align-items: center; text-decoration: none; line-height: 1; color: var(--ink); }
.wm { display: block; flex: none; width: 42px; height: 24px; fill: currentColor; }
@supports (width: round(1.5px, 1px)) { .top, .foot { padding-inline: round(var(--m), 1px); } }

/* ------------------------------------------------------------------ header */
.top { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: var(--hh); font-size: 15px; }
.top-end { display: flex; align-items: center; gap: 26px; }
.top-end a, .theme { text-decoration: none; }
.top-end a:hover, .theme:hover, .top-end a[aria-current] { text-decoration: underline; }
.theme { background: none; border: 0; padding: 0; cursor: pointer; color: var(--mute); }
.theme:hover { color: var(--ink); }
.top-dl { font-weight: 600; }

/* ------------------------------------------------------------------ buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 24px;
  min-height: 58px; padding: 9px 18px 9px 20px; text-align: left;
  font-size: 15px; font-weight: 560; text-decoration: none; border: 1px solid var(--ink);
  background: var(--paper); color: var(--ink);
  transition: background-color .12s steps(1), color .12s steps(1);
}
.btn .bt { display: grid; line-height: 1.15; }
.btn .bt b { font-weight: 580; letter-spacing: -.01em; }
.btn .bt small { font: 400 11px/1.3 var(--mono); letter-spacing: .01em; opacity: .72; margin-top: 4px; }
.btn svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.4; }
.btn-ink { background: var(--ink); color: var(--paper); }
.btn:hover { background: var(--ink); color: var(--paper); }
.btn-ink:hover { background: var(--paper); color: var(--ink); }
.get-hint { margin-top: 16px; max-width: 34em; font-size: 14px; color: var(--mute); }
.get-hint a { color: var(--ink); }

/* ------------------------------------------------------------------ hero: typed, minus the e, then the logo */
.hero { min-height: calc(100svh - var(--hh)); display: flex; flex-direction: column; }
.stage { flex: 1; display: flex; align-items: flex-end; padding-top: clamp(40px, 8vh, 120px); }
/* "typed" is 48.9 units wide and 16 tall; 2.63 x --fs-giant keeps the old word's height (16 units = .86 em) */
.word {
  display: block; width: min(100%, calc(var(--fs-giant) * 2.63)); height: auto; overflow: visible;
  color: var(--ink); user-select: none; -webkit-user-select: none; cursor: default; -webkit-tap-highlight-color: transparent;
}
.word:not(.live) .w-js { display: none; }
.word .w-guide, .word .red { fill: var(--cut); }
/* the cut: everything Typd removes goes through this */
.cut { position: relative; display: inline-block; white-space: pre; --m: 0; --d: 0; --r: 0; --slot: -1em; }
.cut-c { display: inline-block; clip-path: inset(-1em -1em var(--slot) -1em); }
.cut-t { display: inline-block; position: relative; transform: translateY(calc(var(--d) * .82em)); }
.cut.red .cut-t { color: var(--cut); }
.cut .bl { display: inline-block; width: 0; height: 0; }
.cut .w { position: relative; }
.cut.strike .w::after {
  content: ""; position: absolute; left: -.06em; right: -.06em; top: calc(var(--sy, .62) * 1em);
  height: max(2px, .07em); background: var(--cut);
  transform: scaleX(var(--m)); transform-origin: 0 50%;
}

.hero-foot { border-top: 1px solid var(--ink); padding-block: clamp(24px, 3.4vh, 40px) clamp(36px, 7vh, 88px); row-gap: 48px; align-items: start; }
.hf-a { grid-column: 1 / span 6; }
.hf-b { grid-column: 8 / span 5; padding-top: 4px; }
h1 { font-size: var(--fs-h1); font-weight: 620; letter-spacing: -.045em; line-height: .98; }
.lede { margin-top: 20px; max-width: 30em; font-size: 18px; line-height: 1.45; color: var(--ink-2); }
.ctas { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 12px; }

.hf-b .lab { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.say { font-size: var(--fs-say); font-weight: 500; letter-spacing: -.02em; line-height: 1.25; display: grid; overflow: clip; overflow-clip-margin: .1em; }
.say .s { grid-area: 1 / 1; visibility: hidden; }
.say .s.on { visibility: visible; }
.say .add { display: none; }
.say .add.on { display: inline; }
.replay { font: inherit; text-transform: inherit; color: var(--mute); background: none; border: 0; padding: 0; cursor: pointer; }
.replay:hover { color: var(--ink); }

/* ------------------------------------------------------------------ sections */
.sec { padding-top: var(--sec); }
.sec-h { position: relative; border-top: 1px solid var(--ink); padding-top: 14px; font: 400 12px/1.4 var(--mono); letter-spacing: .01em; text-transform: uppercase; color: var(--mute); align-items: baseline; }
.sec-h .n { grid-column: 1 / span 1; }
.sec-h .t { grid-column: 2 / span 5; color: var(--ink); }
.sec-h .x { grid-column: 9 / span 4; justify-self: end; }

/* what it does: three points */
.points { list-style: none; margin-top: clamp(40px, 5vw, 80px); row-gap: 56px; }
.points li { grid-column: span 4; }
.points .k { display: block; margin-bottom: 20px; }
.points h3 { font-size: clamp(26px, 2.5vw, 38px); font-weight: 620; letter-spacing: -.04em; line-height: 1.02; max-width: 9em; }
.points p { margin-top: 16px; max-width: 23em; color: var(--ink-2); text-wrap: pretty; }
.points small { display: block; margin-top: 10px; font: 400 12px/1.5 var(--mono); color: var(--mute); }
.points s { color: var(--cut); text-decoration-thickness: 1.5px; white-space: nowrap; }

/* the blind test, in one line. The score sits over the first point's four columns and the sentence starts
   under the second point's. The score is about 5.5 em wide, so its size is also capped at a fifth of
   those four columns (100cqi is the row's width): it can never run into the sentence. Below 1100 px it
   stands on its own line above the sentence. */
.test { container-type: inline-size; margin-top: clamp(64px, 8vw, 120px); padding-top: 22px; border-top: 1px solid var(--rule); align-items: baseline; row-gap: 12px; }
.test .score { grid-column: 1 / span 4; font-size: clamp(48px, 5vw, 76px); font-size: min(clamp(48px, 5vw, 76px), calc((100cqi - 2 * var(--g)) / 3 / 5.9)); font-weight: 620; letter-spacing: -.055em; line-height: .9; font-variant-numeric: tabular-nums; white-space: nowrap; }
.test .score span { color: var(--mute); font-weight: 300; }
.test .score small { display: block; margin-top: 14px; font: 400 12px/1.4 var(--mono); letter-spacing: .01em; text-transform: uppercase; color: var(--mute); }
.test p { grid-column: 5 / span 8; max-width: 40em; font-size: 18px; line-height: 1.45; text-wrap: pretty; }
.test p .cav { color: var(--mute); }

/* privacy, in two lines */
.priv { margin-top: clamp(32px, 4vw, 56px); max-width: 25em; font-size: clamp(22px, 2.3vw, 34px); font-weight: 500; letter-spacing: -.025em; line-height: 1.25; text-wrap: pretty; }
.priv .mu { color: var(--mute); }
.priv-link { display: inline-block; margin-top: 24px; font-size: 15px; font-weight: 560; }

/* download */
.stmt { margin-top: clamp(32px, 4vw, 56px); font-size: var(--fs-stmt); font-weight: 620; letter-spacing: -.05em; line-height: .96; max-width: 15em; }
.dl-ctas { margin-top: clamp(36px, 4vw, 56px); display: flex; flex-wrap: wrap; gap: 12px; }
.dl-ctas .btn { min-width: min(100%, 340px); min-height: 68px; }
.dl-note { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 8px 28px; justify-content: space-between; color: var(--mute); }
.dl-note a { color: var(--ink); }
.get-meta { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.soon-note[hidden] { display: none; }

/* ------------------------------------------------------------------ footer */
.foot { margin-top: var(--sec); }
.foot-in { border-top: 1px solid var(--ink); padding-block: 22px clamp(40px, 6vw, 72px); display: flex; flex-wrap: wrap; align-items: center; gap: 18px 36px; font-size: 15px; }
.foot .wm { width: 56px; height: 32px; }
.fm-nav { display: flex; flex-wrap: wrap; gap: 6px 26px; }
.fm-nav a { text-decoration: none; }
.fm-nav a:hover, .fm-nav a[aria-current], .fm-made a:hover { text-decoration: underline; }
.fm-made { margin-left: auto; color: var(--mute); }
.fm-made a { color: var(--ink); text-decoration: none; }

/* ------------------------------------------------------------------ inner pages (download, privacy, licence) */
.page-head { padding-top: clamp(64px, 10vw, 160px); }
.page-head .lab { display: flex; flex-wrap: wrap; gap: 4px 22px; margin-bottom: 20px; }
.ph-t { font-size: var(--fs-stmt); font-weight: 620; letter-spacing: -.05em; line-height: .96; max-width: 14em; }
.ph-t .mu { color: var(--mute); display: block; text-wrap: balance; }
.page-head .sub { margin-top: clamp(24px, 2.6vw, 36px); }
.page-head .sub b { font-weight: 600; }
.page-head .get-hint { margin-top: 16px; }
.intro { margin-top: clamp(40px, 5vw, 80px); align-items: end; row-gap: 20px; }
.intro .h2 { grid-column: 1 / span 7; }
.intro .sub { grid-column: 9 / span 4; }
.intro .sub a { text-underline-offset: 3px; }
.h2 { font-size: var(--fs-h2); font-weight: 620; letter-spacing: -.045em; line-height: 1; max-width: 13em; text-wrap: balance; }
.sub { font-size: 17px; line-height: 1.5; max-width: 34em; text-wrap: pretty; }

/* the two cards share one border and are exactly the same width: the row has no column gap */
.plats { margin-top: clamp(48px, 6vw, 88px); row-gap: var(--g); column-gap: 0; }
.plat { grid-column: span 6; position: relative; border: 1px solid var(--ink); padding: 20px 22px 24px; display: flex; flex-direction: column; scroll-margin-top: 24px; }
.plat + .plat { margin-left: -1px; }
.plat > .lab { display: flex; justify-content: space-between; gap: 12px; }
.plat .this-tag { display: none; color: var(--ink); }
.plat.is-this .this-tag { display: inline; }
.plat h2 { margin-top: clamp(28px, 4vw, 56px); font-size: clamp(30px, 3.4vw, 50px); font-weight: 620; letter-spacing: -.045em; line-height: 1; }
.plat h2 span { color: var(--mute); display: block; }
.plat .btn { margin-top: 28px; align-self: stretch; }
.plat.is-this .btn { background: var(--ink); color: var(--paper); }
.plat.is-this .btn:hover { background: var(--paper); color: var(--ink); }
.plat .status { margin-top: 10px; }
.plat .status[hidden] { display: none; }
.kv { margin-top: 28px; border-top: 1px solid var(--rule); }
.kv > div { display: grid; grid-template-columns: 6.5em minmax(0, 1fr); gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--rule); font-size: 15px; }
.kv dt { font: 400 12px/1.9 var(--mono); text-transform: uppercase; color: var(--mute); }
.kv dd.mono { font: 400 12.5px/1.7 var(--mono); word-break: break-all; text-wrap: balance; }   /* a hash breaks into even lines, never one stray character */
.notyet { list-style: none; margin-top: clamp(32px, 3.4vw, 52px); row-gap: 24px; }
.notyet li { grid-column: span 4; border-top: 1px solid var(--rule); padding-top: 14px; }
.notyet li.is-this { border-top-color: var(--ink); }
.notyet h3 { font-size: 17px; font-weight: 600; letter-spacing: -.015em; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.notyet p { margin-top: 6px; font-size: 15px; color: var(--ink-2); }
.notyet a { color: var(--ink); }
.tag { font: 400 11px var(--mono); text-transform: uppercase; color: var(--mute); border: 1px solid var(--rule); padding: 1px 6px; white-space: nowrap; }

.rows { margin-top: clamp(40px, 5vw, 72px); }
.rows > div { border-top: 1px solid var(--rule); padding-block: 18px 20px; align-items: baseline; }
.rows > div:last-child { border-bottom: 1px solid var(--rule); }
.rows dt { grid-column: 1 / span 3; font: 400 12px/1.6 var(--mono); text-transform: uppercase; color: var(--mute); }
.rows dd { grid-column: 4 / span 7; font-size: 19px; line-height: 1.4; letter-spacing: -.012em; }
.rows dd span { display: block; margin-top: 6px; font-size: 15px; line-height: 1.55; color: var(--ink-2); letter-spacing: 0; }

.steps { margin-top: clamp(40px, 5vw, 72px); row-gap: 56px; }
.steps article { grid-column: span 6; }
.steps h3 { font-size: 24px; font-weight: 620; letter-spacing: -.035em; padding-bottom: 12px; border-bottom: 1px solid var(--ink); }
.steps ol { list-style: none; counter-reset: s; }
.steps li { counter-increment: s; display: grid; grid-template-columns: 2.6em minmax(0, 1fr); padding: 15px 0; border-bottom: 1px solid var(--rule); font-size: 16px; line-height: 1.55; }
.steps li::before { content: counter(s, decimal-leading-zero); font: 400 12px/2 var(--mono); color: var(--mute); }
.steps .q { font-weight: 560; }
.fix { margin-top: 16px; font-size: 15px; color: var(--ink-2); }
.fix code { display: block; margin-top: 10px; padding: 12px 14px; border: 1px solid var(--rule); font: 400 13px/1.5 var(--mono); color: var(--ink); overflow-wrap: anywhere; }   /* wraps at its space in a narrow column instead of hiding its end */
.note { font-size: 15px; color: var(--ink-2); max-width: 44em; }

.read { margin-top: clamp(48px, 6vw, 88px); row-gap: 40px; align-items: start; }
.prose { grid-column: 1 / span 7; }
.read-side { grid-column: 9 / span 4; position: sticky; top: 24px; display: grid; border-top: 1px solid var(--ink); }
.read-side p { padding: 13px 0 15px; border-bottom: 1px solid var(--rule); font-size: 15px; line-height: 1.5; }
.read-side b { display: block; margin-bottom: 4px; font: 400 12px var(--mono); text-transform: uppercase; color: var(--mute); }
.prose > * + * { margin-top: 16px; }
.prose .lead-in { font-size: clamp(20px, 1.9vw, 26px); line-height: 1.35; letter-spacing: -.02em; font-weight: 500; }
.prose h2 { margin-top: clamp(48px, 5vw, 72px); padding-top: 14px; border-top: 1px solid var(--ink); font-size: clamp(22px, 2vw, 28px); font-weight: 620; letter-spacing: -.035em; line-height: 1.1; }
.prose p, .prose li { font-size: 17px; line-height: 1.6; }
.prose ul { list-style: none; }
.prose ul li { position: relative; padding-left: 1.4em; }
.prose ul li + li { margin-top: 8px; }
.prose ul li::before { content: "\2013"; position: absolute; left: 0; color: var(--mute); }
.prose .note { font-size: 14px; color: var(--mute); }
.lic-text { max-height: 36rem; overflow: auto; border: 1px solid var(--rule); padding: 18px 20px; font: 400 12.5px/1.6 var(--mono); white-space: pre; tab-size: 4; }

/* ------------------------------------------------------------------ shared */
@keyframes blink { 50% { opacity: 0; } }
br.m { display: none; }

/* ------------------------------------------------------------------ responsive */
@media (max-width: 1099px) {
  .hf-a { grid-column: 1 / span 7; }
  .hf-b { grid-column: 8 / span 5; }
  .intro .h2 { grid-column: 1 / -1; }
  .intro .sub { grid-column: 1 / span 9; }
  .prose { grid-column: 1 / span 8; }
  .read-side { grid-column: 9 / span 4; }
  .test .score { grid-column: 1 / -1; font-size: clamp(48px, 5vw, 76px); }
  .test p { grid-column: 1 / span 10; }
}
@media (max-width: 899px) {
  :root { --fs-giant: clamp(88px, 34vw, 600px); }
  .hero { min-height: 0; }
  .stage { padding-top: clamp(56px, 9vw, 96px); }
  .hf-a, .hf-b { grid-column: 1 / -1; }
  .hf-b { border-top: 1px solid var(--rule); padding-top: 14px; }
  .points li { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); column-gap: var(--g); align-items: baseline; }
  .points .k { grid-column: 1 / -1; }
  .points h3 { grid-column: 1; }
  .points p, .points small { grid-column: 2; }
  .points p { margin-top: 0; }
  .prose, .read-side { grid-column: 1 / -1; }
  .read-side { position: static; }
  .notyet li { grid-column: 1 / -1; }
}
@media (max-width: 759px) {
  :root { --sec: 104px; }
  .btn { flex: 1 1 100%; }
  .points { row-gap: 44px; }
  .points li { display: block; }
  .points p { margin-top: 12px; }
  .test p { grid-column: 1 / -1; font-size: 17px; }
  .sec-h .x { display: none; }
  .sec-h .t { grid-column: 3 / span 10; }
  .intro .sub { grid-column: 1 / -1; }
  br.m { display: inline; }
  .plat { grid-column: 1 / -1; }
  .plat + .plat { margin-left: 0; margin-top: -1px; }
  .rows dt, .rows dd { grid-column: 1 / -1; }
  .rows dd { margin-top: 4px; font-size: 17px; }
  .steps article { grid-column: 1 / -1; }
  .foot-in { flex-direction: column; align-items: flex-start; gap: 18px; }
  .fm-made { margin-left: 0; }
}
@media (max-width: 480px) {
  body { font-size: 16px; }
  .btn { gap: 16px; }
  .top-end { gap: 20px; }
  .kv > div { grid-template-columns: 1fr; gap: 2px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0s !important; }
}
@media (forced-colors: active) {
  .brand { color: LinkText; }
  .word { color: CanvasText; }
}