/* Slate — website styles
   Palette and type come straight from the app (docs/WEBSITE-HANDOFF.md).
   Light only: the whole product is a light, papery design.
   No external requests. The one font file is bundled. */

/* ---- font (bundled, SIL Open Font License) ---- */
@font-face {
  font-family: "Newsreader";
  src: url("fonts/Newsreader-VF.ttf") format("truetype-variations");
  font-weight: 200 700;
  font-style: normal;
  font-display: swap;
}

/* ---- the color vocabulary ---- */
:root {
  --emerald:      #00BF63;   /* the brand green: accents, the island, selected states */
  --emerald-btn:  #00803A;   /* the same green, deep enough for near-white type on it */
  --emerald-text: #00803A;   /* the same green, dark enough to pass on paper, card and surface */
  --on-emerald:   #F4FFF8;   /* the near-white used on the green buttons */
  --lime:         #C1FF72;   /* highlight only, behind a word, like a marker */
  --ink:          #083620;   /* all text, instead of black */
  --ink-2:        #3A6250;   /* secondary text */
  --muted:        #5A7768;   /* fine print, dark enough to pass AA on every background here */
  --paper:        #FAFDF5;   /* the page */
  --surface:      #F4FDEC;   /* cards and the island */
  --card:         #FFFFFF;
  --line:         rgba(0, 191, 99, 0.20);
  --line-2:       rgba(0, 191, 99, 0.38);
  --hair:         rgba(8, 54, 32, 0.08);
  --shadow:       rgba(8, 54, 32, 0.06);
  --shadow-2:     rgba(8, 54, 32, 0.10);
  --glow:         rgba(0, 191, 99, 0.26);

  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --ui: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --wrap: 1060px;
  --radius: 18px;
  /* the gutter grows with the window, so nothing crowds the edge of the
     screen between the phone sizes and the point the page stops widening */
  --gutter: clamp(20px, 4vw, 40px);
}

/* ---- base ---- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 76px; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--ui);
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
::selection { background: var(--lime); color: var(--ink); }
img { max-width: 100%; display: block; }
a { color: var(--emerald-text); text-underline-offset: 3px; }
a:hover { color: var(--ink); }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.narrow { max-width: 780px; }

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -0.012em;
  margin: 0;
}
h1 { font-size: clamp(32px, min(5.4vw, 7.2vh), 54px); }
h2 { font-size: clamp(28px, 4vw, 40px); }
h3 { font-size: 20px; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

.lead { font-size: clamp(16px, min(1.9vw, 2.5vh), 19.5px); color: var(--ink-2); }
.small { font-size: 14.5px; }
.fine { font-size: 13.5px; color: var(--muted); }
.muted { color: var(--muted); }
.center { text-align: center; }

.eyebrow {
  font-size: 12.5px;
  font-weight: 620;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--emerald-text);
  margin: 0 0 10px;
}

/* a word marked the way the island marks a word */
.hl {
  background: var(--lime);
  border-radius: 4px;
  padding: 0 0.14em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

section { padding: 86px 0; }
.section-head { max-width: 660px; margin: 0 auto 46px; text-align: center; }
.section-head h2 { margin-bottom: 12px; }
.section-head p { color: var(--ink-2); margin: 0; }

/* ---- header ---- */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(1.5) blur(12px);
  -webkit-backdrop-filter: saturate(1.5) blur(12px);
  border-bottom: 1px solid var(--hair);
}
.site-header .bar {
  display: flex; align-items: center; justify-content: space-between;
  height: 62px; gap: 16px;
}
.wordmark {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--serif); font-size: 22px; font-weight: 620;
  color: var(--ink); text-decoration: none; letter-spacing: -0.02em;
}
.wordmark .mark { width: 24px; height: 21px; color: var(--emerald); flex: 0 0 auto; }
.nav { display: flex; align-items: center; gap: 24px; }
.nav a:not(.btn) { font-size: 15px; color: var(--ink-2); text-decoration: none; }
.nav a:not(.btn):hover { color: var(--emerald-text); }
.nav a.btn { text-decoration: none; }

/* ---- buttons ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--ui); font-weight: 650; font-size: 16px;
  padding: 15px 28px; border-radius: 999px;
  text-decoration: none; border: 1px solid transparent; cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
/* The brand green with white type, bold, on the owner's call. Hover deepens it
   a little, which is also where the type reads best. */
.btn-primary {
  background: var(--emerald); color: #FFFFFF; font-weight: 700;
  box-shadow: 0 8px 24px var(--glow);
}
.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 30px rgba(0, 191, 99, 0.38);
  background: #00803A; color: #FFFFFF;
}
.btn-primary:active { transform: translateY(0); }
.btn-ghost { background: var(--card); color: var(--ink); border-color: var(--line-2); }
.btn-ghost:hover { border-color: var(--emerald); color: var(--ink); }
.btn-sm { font-size: 14px; padding: 9px 18px; }
.btn-ink { background: var(--ink); color: var(--paper); }
.btn-ink:hover { background: #0b4a2c; color: var(--paper); }
.btn .mark { width: 19px; height: 17px; color: currentColor; }
.btn-big { font-size: 18px; padding: 18px 36px; }

/* Two easter eggs on the download buttons. Hover the hero one and the label
   arrives a word at a time, at the speed someone talks, while the waveform
   moves. Hover the one at the bottom and the label is typed in at a cursor,
   the way Slate puts text into an app. Every piece keeps its space from the
   start, so neither button ever changes size. */
.say { white-space: pre; }
.say .p {
  opacity: 0; transform: translateY(2px);
  transition: opacity 0.1s ease, transform 0.1s ease;
}
.say .p.on { opacity: 1; transform: none; }
.insert .say .p { transform: none; transition: opacity 0.06s linear; }
.tcaret {
  display: inline-block; width: 2px; height: 1.02em;
  vertical-align: -0.16em; margin: 0 -1px;
  background: currentColor; opacity: 0;
}
.tcaret.on { opacity: 0.9; animation: blink 0.9s step-end infinite; }
.dictate.talking .mark rect {
  transform-box: fill-box; transform-origin: center;
  animation: talkbar 0.58s ease-in-out infinite;
}
.dictate.talking .mark rect:nth-child(2) { animation-delay: 0.06s; }
.dictate.talking .mark rect:nth-child(3) { animation-delay: 0.12s; }
.dictate.talking .mark rect:nth-child(4) { animation-delay: 0.18s; }
.dictate.talking .mark rect:nth-child(5) { animation-delay: 0.24s; }
.dictate.talking .mark rect:nth-child(6) { animation-delay: 0.30s; }
.dictate.talking .mark rect:nth-child(7) { animation-delay: 0.36s; }
@keyframes talkbar {
  0%, 100% { transform: scaleY(0.5); }
  50%      { transform: scaleY(1.18); }
}

/* ================= HERO ================= */
.hero { padding: clamp(16px, 3.6vh, 48px) 0 clamp(6px, 1.4vh, 16px); text-align: center; }
/* both measures are in em, so they shrink with the clamped font size and the
   headline stays on two lines, and the line under it on two, right down the
   range rather than only at one width */
.hero h1 { max-width: 11.4em; margin: 0 auto; }
.hero .lead { max-width: 38em; margin: 14px auto 0; }
.hero .cta { margin-top: clamp(16px, 2.6vh, 28px); display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.hero .req { margin-top: 12px; }

/* ---- the Mac screen, the island, and the document ---- */
.stage { padding: clamp(14px, 2.6vh, 36px) 0 4px; }
.screen {
  position: relative;
  max-width: 820px; margin: 0 auto;
  background: linear-gradient(180deg, #ffffff 0%, var(--surface) 100%);
  border: 1px solid var(--line);
  border-radius: 20px 20px 10px 10px;
  box-shadow: 0 30px 70px var(--shadow-2), 0 2px 0 rgba(255, 255, 255, 0.9) inset;
  /* the top band is the strip of screen the island hangs into, so it has to
     clear the island at its tallest (two lines) with room to spare */
  /* the floor has to clear a three-line island, which is what 320px gives */
  padding: clamp(136px, 15vh, 140px) 26px clamp(16px, 2.4vh, 26px);
  overflow: hidden;
}
.notch {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 156px; height: 26px;
  background: #0A1F14; border-radius: 0 0 13px 13px; z-index: 4;
}
.notch::after {
  content: ""; position: absolute; right: 22px; top: 10px;
  width: 6px; height: 6px; border-radius: 50%;
  background: #24503A; box-shadow: 0 0 0 1.5px #14301F;
}

.island {
  position: absolute; top: 0; left: 50%;
  transform: translateX(-50%);
  width: min(420px, calc(100% - 48px));
  background: var(--surface);
  border: 1px solid var(--line-2); border-top: 0;
  border-radius: 0 0 20px 20px;
  box-shadow: 0 14px 30px rgba(8, 54, 32, 0.09);
  padding: clamp(32px, 4.4vh, 36px) 20px 14px;
  text-align: left;
  z-index: 3;
  transition: transform 0.42s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.28s ease;
}
.island[data-shown="no"] {
  transform: translateX(-50%) translateY(-101%);
  opacity: 0;
}
.island .wave { display: flex; align-items: center; gap: 5px; height: 8px; margin-bottom: 9px; }
.island .wave i {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--emerald); opacity: 0.55;
}
.island[data-live="yes"] .wave i { animation: bob 1s ease-in-out infinite; opacity: 1; }
.island .wave i:nth-child(2) { animation-delay: 0.12s; }
.island .wave i:nth-child(3) { animation-delay: 0.24s; }
.island .wave i:nth-child(4) { animation-delay: 0.36s; }
.island .wave i:nth-child(5) { animation-delay: 0.48s; }
@keyframes bob {
  0%, 100% { transform: scale(0.8); }
  50%      { transform: scale(1.35); }
}
.island .live {
  font-family: var(--serif); font-size: clamp(15px, 2.1vh, 17px); line-height: 1.38;
  color: var(--ink); margin: 0; min-height: 2.76em;
}
.island .live .ell { color: rgba(8, 54, 32, 0.32); }
.island .live.waiting { color: var(--emerald-text); font-weight: 550; }
.island .live .rev {
  background: var(--lime); border-radius: 3px; padding: 0 2px;
  animation: revflash 1.1s ease-out both;
}
@keyframes revflash {
  0%   { background: var(--lime); }
  72%  { background: var(--lime); }
  100% { background: transparent; }
}

.doc {
  background: var(--card); border: 1px solid var(--hair);
  border-radius: 12px; box-shadow: 0 6px 18px var(--shadow);
  overflow: hidden; text-align: left;
}
.doc-bar {
  display: flex; align-items: center; gap: 7px;
  padding: 10px 14px; border-bottom: 1px solid var(--hair);
  background: #FCFEFA;
}
.doc-bar i { width: 9px; height: 9px; border-radius: 50%; background: #DCE7E0; }
.doc-bar span { margin-left: 8px; font-size: 12.5px; color: var(--muted); }
.doc-body { padding: 20px 22px 24px; min-height: clamp(74px, 11vh, 118px); }
.doc-body p {
  font-family: var(--serif); font-size: clamp(16px, 2.3vh, 18px); line-height: 1.5;
  color: var(--ink); margin: 0 0 10px;
}
.doc-body p:last-child { margin-bottom: 0; }
/* both lines sit in the layout from the first frame and only fade in, so the
   document never changes height and the hero never jumps */
.doc-body .out { opacity: 0; transition: opacity 0.26s ease; }
.doc-body .out.in { opacity: 1; }
.caret {
  display: inline-block; width: 2px; height: 1.05em; vertical-align: -0.17em;
  background: var(--emerald); margin-left: 1px;
  animation: blink 1.1s step-end infinite;
}
@keyframes blink { 0%, 45% { opacity: 1; } 50%, 95% { opacity: 0; } }

/* the key you hold */
.holder { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: clamp(10px, 1.6vh, 18px); }
.keycap {
  font-family: var(--ui); font-size: 15px; font-weight: 600; color: var(--ink);
  background: var(--card); border: 1px solid var(--line-2);
  border-bottom-width: 3px; border-radius: 10px;
  padding: 9px 16px 8px; cursor: pointer;
  box-shadow: 0 2px 0 rgba(8, 54, 32, 0.05);
  transition: transform 0.08s ease, background 0.15s ease, border-color 0.15s ease;
  -webkit-user-select: none; user-select: none; touch-action: manipulation;
}
.keycap:hover { border-color: var(--emerald); }
.keycap[data-down="yes"] {
  transform: translateY(2px); border-bottom-width: 1px;
  background: var(--lime); border-color: var(--emerald);
}
.holder .hint { font-size: 14px; color: var(--muted); }

/* ================= STEPS ================= */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.step {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 26px 24px;
  box-shadow: 0 4px 16px var(--shadow);
}
.step .n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--lime); color: var(--ink);
  font-size: 14px; font-weight: 700; margin-bottom: 14px;
}
.step h3 { margin-bottom: 7px; }
.step p { color: var(--ink-2); font-size: 15.5px; margin: 0; }

/* ================= RECEIPTS (what you say vs what lands) ================= */
.receipts {
  background: var(--card); border: 1px solid var(--line);
  border-radius: 22px; overflow: hidden; box-shadow: 0 8px 28px var(--shadow);
}
.receipt {
  display: grid; grid-template-columns: 1fr 46px 1fr;
  align-items: center; gap: 0;
  border-bottom: 1px solid var(--hair);
}
.receipt:last-child { border-bottom: 0; }
.receipt > div { padding: 22px 24px; }
.receipt .lbl {
  display: block; font-size: 11.5px; font-weight: 640; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 7px;
}
.receipt .said p, .receipt .got p {
  font-family: var(--serif); font-size: 17.5px; line-height: 1.45; margin: 0;
}
.receipt .said p { color: var(--ink-2); }
.receipt .said s { color: var(--muted); text-decoration-color: var(--muted); }
.receipt .got { background: var(--surface); }
.receipt .got p { color: var(--ink); }
/* The same lime the island uses on a word it has just corrected, so the mark
   means one thing whether you are reading the page or using the app. Static
   here: four cards flashing at once would be noise. */
.fix {
  background: var(--lime); color: var(--ink);
  border-radius: 3px; padding: 0 3px; margin: 0 -1px;
}
.receipt .to {
  padding: 0; display: flex; align-items: center; justify-content: center;
  color: var(--emerald); font-size: 18px;
}
.receipt .to svg { width: 20px; height: 20px; }
.rules-note { text-align: center; margin-top: 20px; }

/* ================= FEATURES ================= */
.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.feature {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 26px 24px;
  box-shadow: 0 4px 16px var(--shadow);
}
.feature .ico {
  width: 38px; height: 38px; border-radius: 11px;
  background: var(--surface); border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  color: var(--emerald-text); margin-bottom: 15px;
}
.feature .ico svg { width: 20px; height: 20px; stroke-width: 1.8; }
.feature h3 { margin-bottom: 7px; }
.feature p { color: var(--ink-2); font-size: 15.5px; margin: 0; }

/* ================= PRIVACY (the ink panel) ================= */
.privacy-panel {
  background: var(--ink); color: #EAF6EE;
  border-radius: 26px; padding: 56px 48px;
}
.privacy-panel .eyebrow { color: var(--lime); }
.privacy-panel h2 { color: #FFFFFF; }
.privacy-panel .lead { color: rgba(234, 246, 238, 0.78); }
.privacy-panel .facts { list-style: none; padding: 0; margin: 34px 0 0; display: grid; gap: 4px; }
.privacy-panel .facts li {
  position: relative; padding: 11px 0 11px 34px;
  font-size: 16px; color: rgba(234, 246, 238, 0.9);
  border-bottom: 1px solid rgba(193, 255, 114, 0.13);
}
.privacy-panel .facts li:last-child { border-bottom: 0; }
.privacy-panel .facts li::before {
  content: ""; position: absolute; left: 2px; top: 18px;
  width: 15px; height: 9px;
  border-left: 2.2px solid var(--lime); border-bottom: 2.2px solid var(--lime);
  transform: rotate(-45deg);
}
.privacy-panel .facts b { color: #FFFFFF; font-weight: 620; }
.privacy-panel .facts .one::before {
  border: 0; content: "1"; left: 4px; top: 11px;
  width: auto; height: auto; transform: none;
  color: var(--lime); font-weight: 700; font-size: 15px;
}

.proof {
  margin-top: 34px; background: rgba(0, 0, 0, 0.26);
  border: 1px solid rgba(193, 255, 114, 0.18);
  border-radius: 14px; padding: 20px 22px;
  font-family: var(--mono); font-size: 13.5px; line-height: 1.85;
  overflow-x: auto;
}
.proof .p { color: var(--lime); }
.proof .c { color: #EAF6EE; }
.proof .o { color: rgba(234, 246, 238, 0.5); }
.proof-note { margin-top: 16px; font-size: 14px; color: rgba(234, 246, 238, 0.6); }
.proof-note a { color: var(--lime); }
.proof-note a:hover { color: #FFFFFF; }

/* ================= COMPARISON ================= */
.compare {
  width: 100%; border-collapse: collapse; background: var(--card);
  border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; font-size: 15.5px;
}
.compare th, .compare td { padding: 14px 18px; text-align: left; border-bottom: 1px solid var(--hair); }
.compare tbody tr:last-child th, .compare tbody tr:last-child td { border-bottom: 0; }
.compare thead th { background: var(--surface); font-size: 14px; font-weight: 640; }
.compare thead th:nth-child(2) { color: var(--emerald-text); }
.compare tbody th { font-weight: 500; color: var(--ink-2); }
.compare td.yes { color: var(--emerald-text); font-weight: 620; }
.compare td.no { color: var(--muted); }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ================= DOWNLOAD ================= */
.get {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 26px; padding: 52px 44px; text-align: center;
}
.get h2 { margin-bottom: 12px; }
.get .lead { max-width: 46ch; margin: 0 auto 28px; }
.get .price {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--card); border: 1px solid var(--line-2);
  border-radius: 999px; padding: 7px 18px; margin-bottom: 24px;
  font-size: 14.5px; color: var(--ink);
}
.get .price .pip { width: 8px; height: 8px; border-radius: 50%; background: var(--emerald); }
.get .meta { margin-top: 16px; }
/* the one line that frames the three cards below it, so it sits with them
   rather than with the version line above */
.get .firstrun-lead { margin-top: 30px; }
.firstrun {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
  margin-top: 14px; text-align: left;
}
.firstrun .item {
  background: var(--card); border: 1px solid var(--line);
  border-radius: 14px; padding: 20px;
}
.firstrun h3 { font-size: 16.5px; margin-bottom: 6px; }
.firstrun p { font-size: 14.5px; color: var(--ink-2); margin: 0; }

/* ================= FAQ ================= */
.faq { max-width: 780px; margin: 0 auto; }
.faq details {
  background: var(--card); border: 1px solid var(--line);
  border-radius: 14px; margin-bottom: 10px; overflow: hidden;
}
.faq summary {
  padding: 18px 22px; cursor: pointer; list-style: none;
  font-weight: 600; font-size: 16.5px; color: var(--ink);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: 0 0 auto; width: 9px; height: 9px;
  border-right: 2px solid var(--emerald); border-bottom: 2px solid var(--emerald);
  transform: rotate(45deg) translateY(-2px); transition: transform 0.2s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
/* the padding sits on the inner box, so the outer one can animate its height
   from nothing without the padding holding it open */
.faq .body { overflow: hidden; }
.faq .bodyin { padding: 0 22px 20px; color: var(--ink-2); font-size: 15.5px; }
.faq .bodyin p { margin-bottom: 0.7em; }
.faq .bodyin p:last-child { margin-bottom: 0; }
.faq summary { transition: color 0.15s ease; }
.faq summary:hover { color: var(--emerald-text); }

/* ================= FOOTER ================= */
.site-footer {
  border-top: 1px solid var(--hair); background: var(--surface);
  padding: 48px 0 44px;
}
/* Centred, like every other section on the page. As two 1fr columns this sat
   in the left 60% of a 1060px wrap, because neither column's content came
   close to filling its half. */
.foot-inner { display: flex; flex-direction: column; align-items: center; text-align: center; }
.foot-tag { margin: 11px 0 0; font-size: 14.5px; color: var(--ink-2); }
.foot-meta { margin: 18px 0 0; font-size: 13px; line-height: 1.75; color: var(--muted); max-width: 56ch; }
.foot-meta a { color: inherit; text-decoration-color: var(--line-2); }
.foot-meta a:hover { color: var(--emerald-text); }
.foot-credit { margin-top: 8px; }
.foot-links { display: flex; gap: 24px; flex-wrap: wrap; justify-content: center; margin-top: 26px; }
.foot-links a { font-size: 15px; color: var(--ink-2); text-decoration: none; }
.foot-links a:hover { color: var(--emerald-text); }

/* ================= LEGAL / SUPPORT PAGES ================= */
.doc-page { max-width: 760px; margin: 0 auto; padding: 56px var(--gutter) 90px; }
.doc-page h1 { font-size: clamp(32px, 5vw, 46px); margin-bottom: 8px; }
.doc-page .updated { font-size: 14px; color: var(--muted); margin-bottom: 38px; }
.doc-page h2 { font-size: 24px; margin: 40px 0 12px; }
.doc-page h3 { font-size: 18px; margin: 26px 0 8px; }
.doc-page p, .doc-page li { color: var(--ink-2); }
.doc-page strong { color: var(--ink); font-weight: 620; }
.doc-page ul { padding-left: 20px; }
.doc-page li { margin-bottom: 8px; }
.doc-page a { word-break: break-word; }
.back {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 15px; color: var(--ink-2); text-decoration: none; margin-bottom: 14px;
}
.back:hover { color: var(--emerald-text); }
.callout {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 16px; padding: 20px 24px; margin: 26px 0;
}
.callout p:last-child { margin-bottom: 0; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ---- focus, for keyboards ---- */
a:focus-visible, button:focus-visible, summary:focus-visible {
  /* the bright green is only 2.4:1 on paper, which is not a visible ring */
  outline: 2.5px solid var(--emerald-btn);
  outline-offset: 3px;
}
.privacy-panel a:focus-visible { outline-color: var(--lime); }
/* the answer box clips its own overflow while it animates, so the ring on a
   question has to be drawn inside it or it is invisible */
.faq summary:focus-visible { outline-offset: -4px; border-radius: 12px; }

/* ================= RESPONSIVE ================= */
@media (max-width: 900px) {
  .steps, .features, .firstrun { grid-template-columns: 1fr; }
  .features { gap: 16px; }
  section { padding: 64px 0; }
  .privacy-panel { padding: 40px 26px; }
  .get { padding: 40px 24px; }
  .nav .hide-sm { display: none; }
  .screen { padding: clamp(136px, 17vh, 142px) 16px 22px; }
  .receipt { grid-template-columns: 1fr; }
  .receipt .to { padding: 0 0 6px; }
  .receipt .to svg { transform: rotate(90deg); }
  .receipt > div { padding: 18px 20px; }
  .receipt .said { padding-bottom: 8px; }
}
@media (max-width: 560px) {
  body { font-size: 16px; }
  .island { width: calc(100% - 26px); padding: 34px 16px 13px; }
  .island .live { font-size: 16px; }
  .notch { width: 116px; height: 22px; }
  .doc-body { padding: 18px 16px 26px; min-height: 112px; }
  .doc-body p { font-size: 17px; }
  .btn-big { font-size: 16.5px; padding: 16px 26px; width: 100%; }
  .hero .cta .btn { width: 100%; }
  .proof { font-size: 12px; }
}

/* ---- reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .btn-primary:hover { transform: none; }
  .caret { opacity: 1; }
}

/* ---- print ---- */
@media print {
  .site-header, .stage, .holder { display: none; }
  body { background: #fff; }
}