/*
  The marketing site for Heiki.

  DESIGN PLAN

  Palette. Plum #7A2E5A and cream #F1F0EA are the identity; cream-soft
  #ECDBE5 is the third colour and the only one. The hero is a plum block in
  both themes, because the brand is not a surface and does not follow light
  or dark (same rule as the launch splash). Everything under it is cream in
  the light theme and a plum-black in the dark one; there is no accent
  colour besides the plum itself, and on dark grounds the plum lifts to a
  rose so links and bars still read. Nothing is ever red.

  Type. Fraunces, a soft serif with optical sizes and a "wonky" axis, for
  every headline and every big number: it is warm, slightly amused, and it
  looks like a friend talking rather than a dashboard. Instrument Sans for
  everything else: plain, even, easy to read in a paragraph on a phone.
  Scale on a 1.25 ratio from a 17 px body: 0.8, 0.9, 1, 1.15, 1.4, 1.75,
  2.2, 2.75, 3.5 rem; headlines use clamp() between the two ends.

  Layout. Mobile first, everything set left, one column that opens into an
  asymmetric two-column grid at 56 rem: text in the narrow column, the
  thing being talked about in the wide one. Sections are numbered in
  Fraunces italic rather than boxed in cards. No card grid; the one card on
  the page is the estimate itself, drawn as the app draws it.

  Hero storyboard (the launch splash, in SVG + CSS, 6 s loop). 0.0 s the
  guess drops in from the top left as a ball and bounces twice, losing
  height, rolling to the middle. 0.95 s the two caps stand up, springy.
  1.2 s the span draws between them; the H holds a beat. 1.85 s the caps
  shorten and lift into eyes, the span bends into a smile and the ball hops
  up and shrinks into the nose. 2.1 s the name settles under it. The face
  holds until 5.4 s, fades, and the loop starts again. With Reduce Motion
  on, the face is complete from the first frame and nothing moves.
*/

:root {
  --plum: #7a2e5a;
  --plum-deep: #5a1f42;
  --plum-lift: #9a4374;
  --cream: #f1f0ea;
  --cream-soft: #ecdbe5;

  --ground: var(--cream);
  --surface: #faf9f5;
  --ink: #241820;
  --ink-secondary: #5d5059;
  --ink-faint: #8f838a;
  --hairline: #d9d2cf;
  --accent: var(--plum);
  --accent-soft: var(--cream-soft);
  --accent-ink: var(--cream);
  --shadow: 0 1px 2px rgba(36, 24, 32, 0.06), 0 14px 40px rgba(36, 24, 32, 0.08);

  --display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --body: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;

  --measure: 34rem;
  --page: 68rem;
  --gutter: clamp(20px, 5vw, 48px);
  --radius: 18px;

  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ground: #171114;
    --surface: #211a1e;
    --ink: #f1f0ea;
    --ink-secondary: #bcafb6;
    --ink-faint: #7f727a;
    --hairline: #3a2e35;
    --accent: #e6a9cd;
    --accent-soft: #3d2634;
    --accent-ink: #2a1220;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 14px 40px rgba(0, 0, 0, 0.35);
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.55;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { max-width: 100%; }

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 0.15em; }
a:hover { color: var(--plum-lift); }

h1, h2, h3 {
  font-family: var(--display);
  font-optical-sizing: auto;
  font-variation-settings: "SOFT" 100, "WONK" 1;
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.015em;
  margin: 0 0 0.5em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.6rem, 9.5vw, 4.6rem); }
h2 { font-size: clamp(1.9rem, 5.6vw, 3rem); }
h3 { font-size: 1.4rem; line-height: 1.15; }
p { margin: 0 0 1em; }
p, li { max-width: var(--measure); }
em { font-family: var(--display); font-style: italic; font-weight: 500; font-size: 1.04em; }

.wrap {
  width: 100%;
  max-width: var(--page);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

/* Header ------------------------------------------------------------- */

.site-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: 18px;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--display);
  font-variation-settings: "SOFT" 100;
  font-weight: 600;
  font-size: 1.3rem;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-decoration: none;
}

.wordmark svg { display: block; border-radius: 22%; }

.site-head nav { display: flex; gap: 18px; font-size: 0.95rem; }
.site-head nav a { color: var(--ink-secondary); text-decoration: none; }
.site-head nav a:hover { color: var(--accent); }

/* Hero: plum, in both themes ----------------------------------------- */

.hero {
  background: var(--plum);
  color: var(--cream);
  padding-block: clamp(28px, 6vw, 72px) clamp(44px, 8vw, 96px);
  overflow: hidden;
}

.hero-grid {
  display: grid;
  gap: 24px;
  align-items: center;
}
.hero-grid > .mark-stage { order: -1; }

.hero .kicker {
  font-size: 0.92rem;
  color: var(--cream-soft);
  margin-bottom: 18px;
  letter-spacing: 0.01em;
}
.hero .kicker .kanji { font-family: var(--display); font-size: 1.05em; margin: 0 0.15em; }

.hero h1 { color: var(--cream); margin-bottom: 0.45em; }
.hero h1 em { color: var(--cream-soft); font-style: italic; }

.hero .lede {
  font-size: clamp(1.1rem, 2.6vw, 1.3rem);
  line-height: 1.45;
  color: var(--cream);
  opacity: 0.92;
  max-width: 30rem;
}

.hero .small { color: var(--cream-soft); }
.hero a { color: var(--cream); }
.hero .appstore-badge { color: var(--plum); }
.hero .appstore-badge:hover { color: var(--plum-deep); }

@media (min-width: 56rem) {
  .hero-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 56px; }
  .hero-grid > .mark-stage { order: 2; }
}

/* The mark, alive. Base styles are the finished face; the animation
   overrides them, and Reduce Motion turns the animation off. ---------- */

.mark-stage { display: flex; justify-content: flex-start; }
@media (min-width: 56rem) { .mark-stage { justify-content: center; } }

.mark {
  width: clamp(130px, 34vw, 300px);
  height: auto;
  overflow: visible;
  display: block;
}

.mark * { transform-box: fill-box; }

.mark .cap {
  fill: var(--cream);
  transform-origin: 50% 50%;
  transform: translateY(-68px) scaleY(0.41);
}
.mark .span {
  fill: var(--cream-soft);
  transform-origin: 50% 50%;
  transform: scaleX(1);
  opacity: 0;
}
.mark .smile {
  stroke: var(--cream-soft);
  transform-origin: 50% 0%;
  transform: scaleY(1);
  opacity: 1;
}
.mark .ball-move { transform: translate(0, -32px); }
.mark .ball {
  fill: var(--cream);
  transform-origin: 50% 100%;
  transform: scale(0.7);
}
.mark .name {
  fill: var(--cream);
  font-family: var(--display);
  font-variation-settings: "SOFT" 100;
  font-weight: 600;
  font-size: 34px;
  opacity: 1;
}

@media (prefers-reduced-motion: no-preference) {
  .mark .cap { animation: cap 6s cubic-bezier(0.3, 1.4, 0.5, 1) infinite; }
  .mark .span { animation: span 6s ease-out infinite; }
  .mark .smile { animation: smile 6s cubic-bezier(0.3, 1.5, 0.5, 1) infinite; }
  .mark .ball-move { animation: ball-move 6s linear infinite; }
  .mark .ball { animation: ball 6s linear infinite; }
  .mark .name { animation: name 6s ease-out infinite; }
  .mark .fade { animation: fade 6s linear infinite; }
}

/* 6 s = 100 %; the splash's 2.6 s piece is the first 43 %. */
@keyframes ball-move {
  0%    { transform: translate(-84px, -230px); animation-timing-function: cubic-bezier(0.4, 0, 1, 1); }
  7%    { transform: translate(-70px, 0); animation-timing-function: cubic-bezier(0, 0, 0.6, 1); }
  11%   { transform: translate(-56px, -110px); animation-timing-function: cubic-bezier(0.4, 0, 1, 1); }
  14.3% { transform: translate(-42px, 0); animation-timing-function: cubic-bezier(0, 0, 0.6, 1); }
  17%   { transform: translate(-30px, -44px); animation-timing-function: cubic-bezier(0.4, 0, 1, 1); }
  19.3% { transform: translate(-18px, 0); animation-timing-function: ease-out; }
  24%   { transform: translate(0, 0); }
  30%   { transform: translate(0, 0); animation-timing-function: cubic-bezier(0, 0, 0.5, 1); }
  33%   { transform: translate(0, -84px); animation-timing-function: cubic-bezier(0.3, 1.6, 0.6, 1); }
  38%   { transform: translate(0, -32px); }
  100%  { transform: translate(0, -32px); }
}
@keyframes ball {
  0%    { transform: scale(1, 1); }
  6%    { transform: scale(0.94, 1.1); }
  7%    { transform: scale(1.22, 0.72); }
  9%    { transform: scale(0.92, 1.1); }
  14.3% { transform: scale(1.14, 0.84); }
  16%   { transform: scale(0.96, 1.05); }
  19.3% { transform: scale(1.08, 0.92); }
  22%   { transform: scale(1, 1); }
  30%   { transform: scale(1, 1); }
  33%   { transform: scale(0.8, 0.8); }
  38%   { transform: scale(0.7, 0.7); }
  100%  { transform: scale(0.7, 0.7); }
}
@keyframes cap {
  0%    { transform: translateY(0) scaleY(0.12); }
  15.8% { transform: translateY(0) scaleY(0.12); }
  22.5% { transform: translateY(0) scaleY(1); }
  30%   { transform: translateY(0) scaleY(1); }
  37.5% { transform: translateY(-68px) scaleY(0.41); }
  100%  { transform: translateY(-68px) scaleY(0.41); }
}
@keyframes span {
  0%    { transform: scaleX(0); opacity: 1; }
  20%   { transform: scaleX(0); opacity: 1; }
  25.8% { transform: scaleX(1); opacity: 1; }
  30.8% { transform: scaleX(1); opacity: 1; }
  31.5% { transform: scaleX(1); opacity: 0; }
  100%  { transform: scaleX(1); opacity: 0; }
}
@keyframes smile {
  0%    { transform: scaleY(0.02); opacity: 0; }
  30.8% { transform: scaleY(0.02); opacity: 0; }
  31.5% { transform: scaleY(0.05); opacity: 1; }
  39%   { transform: scaleY(1); opacity: 1; }
  100%  { transform: scaleY(1); opacity: 1; }
}
@keyframes name {
  0%    { opacity: 0; transform: translateY(6px); }
  35%   { opacity: 0; transform: translateY(6px); }
  41.7% { opacity: 1; transform: translateY(0); }
  100%  { opacity: 1; transform: translateY(0); }
}
@keyframes fade {
  0%   { opacity: 1; }
  90%  { opacity: 1; }
  96%  { opacity: 0; }
  100% { opacity: 0; }
}

/* Sections ----------------------------------------------------------- */

section { padding-block: clamp(56px, 9vw, 112px); }
section + section { border-top: 1px solid var(--hairline); }

.num {
  display: block;
  font-family: var(--display);
  font-style: italic;
  font-variation-settings: "SOFT" 100, "WONK" 1;
  font-size: 1.1rem;
  color: var(--accent);
  margin-bottom: 14px;
}

.split {
  display: grid;
  gap: 36px;
  align-items: start;
}

@media (min-width: 56rem) {
  .split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; }
  .split.flip > :first-child { order: 2; }
  .split .sticky { position: sticky; top: 24px; }
}

.lede {
  font-size: clamp(1.1rem, 2.4vw, 1.25rem);
  line-height: 1.45;
  color: var(--ink-secondary);
}

.steps { list-style: none; margin: 24px 0 0; padding: 0; counter-reset: step; }
.steps li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 2.2rem 1fr;
  gap: 8px;
  padding: 14px 0;
  border-top: 1px solid var(--hairline);
  max-width: var(--measure);
}
.steps li::before {
  content: counter(step);
  font-family: var(--display);
  font-variation-settings: "SOFT" 100, "WONK" 1;
  font-style: italic;
  font-size: 1.3rem;
  line-height: 1;
  color: var(--accent);
  padding-top: 3px;
}
.steps p { margin: 0; }
.steps strong { font-weight: 600; }

/* The estimate, drawn the way the app draws it -------------------------- */

.estimate {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px;
  max-width: 26rem;
}

.estimate .photo {
  aspect-ratio: 5 / 3;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  background: linear-gradient(160deg, var(--plum), var(--plum-deep));
}
.estimate .photo svg { display: block; width: 100%; height: 100%; }
.estimate .photo .caption {
  position: absolute;
  left: 12px;
  bottom: 10px;
  font-size: 0.78rem;
  color: var(--cream-soft);
  margin: 0;
}

.estimate .readout { padding-top: 18px; }

.estimate .total {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.estimate .big {
  font-family: var(--display);
  font-variation-settings: "SOFT" 100;
  font-weight: 500;
  font-size: 3.2rem;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  transition: color 0.3s;
}
.estimate .unit { font-size: 1rem; color: var(--ink-secondary); }
.estimate .conf {
  margin-left: auto;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-secondary);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 3px 10px;
}
.estimate .conf.high { color: var(--accent); border-color: var(--accent); }

/* The range bar is the mark: two caps, a span, the guess. */
.rb {
  --lo: 40%;
  --hi: 77.5%;
  --best: 55%;
  position: relative;
  height: 32px;
  margin: 14px 0 6px;
}
.rb .axis {
  position: absolute;
  left: 0; right: 0;
  top: 15px;
  height: 2px;
  background: var(--hairline);
}
.rb .span {
  position: absolute;
  top: 12px;
  height: 8px;
  left: var(--lo);
  width: calc(var(--hi) - var(--lo));
  border-radius: 4px;
  background: var(--accent-soft);
  transition: left 0.6s cubic-bezier(0.3, 1.2, 0.4, 1), width 0.6s cubic-bezier(0.3, 1.2, 0.4, 1);
}
.rb .cap {
  position: absolute;
  top: 4px;
  width: 5px;
  height: 24px;
  border-radius: 3px;
  background: var(--accent);
  transition: left 0.6s cubic-bezier(0.3, 1.2, 0.4, 1);
}
.rb .cap.lo { left: calc(var(--lo) - 2.5px); }
.rb .cap.hi { left: calc(var(--hi) - 2.5px); }
.rb .dot {
  position: absolute;
  top: 7px;
  left: calc(var(--best) - 9px);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent);
  transition: left 0.6s cubic-bezier(0.3, 1.2, 0.4, 1);
}
.rb .tick {
  position: absolute;
  top: 22px;
  font-size: 0.7rem;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}
.rb .tick.l { left: 0; }
.rb .tick.r { right: 0; }

.range-label {
  font-size: 0.9rem;
  color: var(--ink-secondary);
  font-variant-numeric: tabular-nums;
  margin: 10px 0 0;
  min-height: 1.4em;
}

.ask {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--hairline);
}
.ask .q { margin: 0 0 10px; font-size: 1rem; }
.ask .q em { font-size: 1.08em; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.chip {
  font: inherit;
  font-size: 0.92rem;
  padding: 7px 13px;
  border-radius: 999px;
  border: 1px solid var(--hairline);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s, color 0.2s;
}
.chip:hover { border-color: var(--accent); }
.chip[aria-pressed="true"] {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--accent-ink);
}
.chip .d { color: inherit; opacity: 0.7; font-variant-numeric: tabular-nums; margin-left: 4px; }
.chip[aria-pressed="true"] .d { opacity: 0.85; }

.ask .done {
  margin: 12px 0 0;
  font-size: 0.9rem;
  color: var(--ink-secondary);
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: baseline;
}
.ask .done a { font-size: 0.85rem; white-space: nowrap; }
.ask .done[hidden] { display: none; }

/* The week ----------------------------------------------------------- */

.week {
  --target: 66.7%;
  max-width: 30rem;
}
.week .strip {
  position: relative;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
  height: 220px;
  align-items: end;
  padding-top: 10px;
}
.week .target {
  position: absolute;
  left: 0; right: 0;
  bottom: var(--target);
  border-top: 1.5px dashed var(--ink-faint);
  z-index: 1;
}
.week .target span {
  position: absolute;
  left: 0;
  top: -1.5em;
  background: var(--ground);
  padding-right: 6px;
  font-size: 0.72rem;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}
.week .day {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column-reverse;
}
.week .bar {
  height: var(--h);
  background: var(--accent);
  border-radius: 6px 6px 3px 3px;
}
.week .take {
  height: var(--t);
  background: var(--accent-soft);
  border-radius: 6px 6px 0 0;
  margin-bottom: -3px;
  transform-origin: bottom;
  transform: scaleY(0);
  opacity: 0;
  transition: transform 0.9s cubic-bezier(0.3, 1.1, 0.4, 1) 0.6s, opacity 0.5s 0.6s;
}
.week .over {
  height: var(--o);
  background: var(--accent-soft);
  border-radius: 6px 6px 0 0;
  margin-bottom: -3px;
  transform-origin: bottom;
  transition: transform 0.9s cubic-bezier(0.5, 0, 0.2, 1) 0.4s, opacity 0.6s 0.6s;
}
.week.in-view .over { transform: scaleY(0); opacity: 0.3; }
.week.in-view .take { transform: scaleY(1); opacity: 1; }

.week .labels {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
  margin-top: 8px;
  font-size: 0.78rem;
  color: var(--ink-secondary);
  text-align: center;
}
.week .labels .big { color: var(--ink); font-weight: 600; }

.week .verdict {
  margin-top: 18px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  border-top: 1px solid var(--hairline);
  padding-top: 12px;
  font-variant-numeric: tabular-nums;
}
.week .verdict .n {
  font-family: var(--display);
  font-variation-settings: "SOFT" 100;
  font-size: 1.75rem;
  font-weight: 500;
  line-height: 1;
}
.week .verdict .n small { font-family: var(--body); font-size: 0.85rem; color: var(--ink-secondary); margin-left: 4px; }
.week .verdict .word {
  font-family: var(--display);
  font-style: italic;
  font-variation-settings: "SOFT" 100, "WONK" 1;
  font-size: 1.3rem;
  color: var(--accent);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.5s 1.4s, transform 0.5s 1.4s;
}
.week.in-view .verdict .word { opacity: 1; transform: none; }

/* What it feels like ------------------------------------------------- */

.feels { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
@media (min-width: 56rem) { .feels { grid-template-columns: repeat(3, 1fr); gap: 40px; } }
.feels li { padding: 18px 0; border-top: 1px solid var(--hairline); max-width: none; }
.feels h3 { margin-bottom: 8px; }
.feels p { margin: 0; color: var(--ink-secondary); }

/* Pricing ------------------------------------------------------------ */

.tiers { display: grid; gap: 32px; margin-top: 8px; }
@media (min-width: 56rem) { .tiers { grid-template-columns: 1fr 1fr; gap: 64px; } }
.tier h3 { display: flex; align-items: baseline; gap: 12px; }
.tier h3 .tag {
  font-family: var(--body);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-secondary);
  font-weight: 500;
}
.tier ul { list-style: none; margin: 0; padding: 0; }
.tier li {
  padding: 9px 0;
  border-top: 1px solid var(--hairline);
  color: var(--ink);
  max-width: none;
}
.tier li span { color: var(--ink-secondary); }

.prices {
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--hairline);
}
.prices li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 20px;
  align-items: baseline;
  padding: 12px 0;
  border-bottom: 1px solid var(--hairline);
  max-width: none;
}
.prices .name { font-weight: 600; }
.prices .price {
  font-family: var(--display);
  font-variation-settings: "SOFT" 100;
  font-size: 1.6rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.prices .note { grid-column: 1 / -1; font-size: 0.9rem; color: var(--ink-secondary); margin: 0; }

.small { font-size: 0.88rem; color: var(--ink-secondary); }

/* Promises ----------------------------------------------------------- */

.promises { list-style: none; margin: 0; padding: 0; counter-reset: p; }
.promises li {
  counter-increment: p;
  display: grid;
  grid-template-columns: 3rem 1fr;
  gap: 12px;
  padding: 22px 0;
  border-top: 1px solid var(--hairline);
  max-width: none;
}
.promises li::before {
  content: "0" counter(p);
  font-family: var(--display);
  font-style: italic;
  font-variation-settings: "SOFT" 100, "WONK" 1;
  font-size: 1.75rem;
  line-height: 1;
  color: var(--accent);
  padding-top: 4px;
}
.promises h3 { margin-bottom: 6px; }
.promises p { margin: 0; color: var(--ink-secondary); }

/* Badge and footer --------------------------------------------------- */

.badge-row { display: flex; flex-wrap: wrap; gap: 14px 20px; align-items: center; margin-top: 28px; }
.badge-row .small { margin: 0; }

.appstore-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--cream);
  color: var(--plum);
  border-radius: 12px;
  padding: 10px 16px;
  text-decoration: none;
  line-height: 1.1;
}
.appstore-badge:hover { color: var(--plum-deep); }
.appstore-badge .k { display: block; font-size: 0.68rem; letter-spacing: 0.04em; }
.appstore-badge .v { display: block; font-size: 1.05rem; font-weight: 600; }
.badge-row.on-ground .appstore-badge { background: var(--ink); color: var(--ground); }
.badge-row.on-ground .appstore-badge:hover { opacity: 0.9; color: var(--ground); }

.site-foot {
  border-top: 1px solid var(--hairline);
  padding: 30px 0 48px;
  color: var(--ink-secondary);
  font-size: 0.92rem;
}
.site-foot nav { display: flex; flex-wrap: wrap; gap: 18px; margin-bottom: 10px; }
.site-foot p { margin: 0; max-width: none; }

/* Legal pages -------------------------------------------------------- */

.legal { padding-block: 8px 56px; }
.legal h2 { font-size: 1.5rem; margin-top: 2em; }
.legal h3 { font-size: 1.15rem; margin-top: 1.6em; }
.legal ul { padding-left: 1.2em; }
.legal li { margin-bottom: 0.4em; }
.legal .dateline { color: var(--ink-secondary); font-size: 0.95rem; }

.legal .toc {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 18px 22px;
}
.legal .toc ol { margin: 0; padding-left: 1.2em; }
.legal .toc li { max-width: none; }

.todo {
  border-left: 3px solid var(--accent);
  background: var(--surface);
  padding: 12px 16px;
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 0.92rem;
  color: var(--ink-secondary);
}

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.hero :focus-visible { outline-color: var(--cream); }