/* milía · the legal pages (Privacy, Terms) and the small redirect pages.
   The same top bar, footer, type and colours as the rest of the site (tokens, top bar, sheet, footer and
   grain are taken from home.css), set for long reading: a 65ch measure, generous leading, cream on the warm dark ground. */

:root {
  --ground: oklch(0.16 0.008 60);
  --ground-deep: oklch(0.12 0.008 60);
  --ground-lift: oklch(0.19 0.009 60);
  --cream: oklch(0.94 0.018 80);
  --cream-dim: oklch(0.94 0.018 80 / 0.72);
  --cream-faint: oklch(0.94 0.018 80 / 0.46);
  --cream-hair: oklch(0.94 0.018 80 / 0.16);
  --cream-rule: oklch(0.94 0.018 80 / 0.12);
  --ink: oklch(0.19 0.01 60);
  --gutter: 16px;
  --edge: 20px;
  --head-h: 60px;           /* the top bar: 60px phone, 72px from 760px */
  --top-h: 60px;
  --t-label: 0.75rem;       /* 12px, caps only */
  --t-sub: 0.9375rem;       /* 15px */
  --font: "Host Grotesk", "Helvetica Neue", Arial, sans-serif;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}
@media (min-width: 760px) { :root { --head-h: 72px; --top-h: 72px; } }
@media (min-width: 900px) { :root { --gutter: 32px; --edge: 32px; } }


*, *::before, *::after { box-sizing: border-box; }
html { background: var(--ground); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--cream);
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: 0.01em;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
h1, h2, h3, p, figure, blockquote, ol, ul { margin: 0; padding: 0; }
ol, ul { list-style: none; }
img { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
a:focus-visible, button:focus-visible, summary:focus-visible, .skip:focus-visible {
  outline: 2px solid var(--cream);
  outline-offset: 4px;
  border-radius: 2px;
}
.sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.nowrap { white-space: nowrap; }

.skip {
  position: absolute; left: var(--gutter); top: -60px; z-index: 50;
  background: var(--cream); color: var(--ink); padding: 12px 16px; font-size: var(--t-sub);
  text-decoration: none;
}
.skip:focus { top: 12px; }


/* ---------- Type roles ---------- */
.label, .num {
  font-size: var(--t-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
}
.num { font-variant-numeric: tabular-nums; }
.eyebrow { color: var(--cream-faint); margin-bottom: 20px; }

/* ---------- Top bar (identical on every page) ----------
   Transparent over the hero; solid ground + one hairline once the page has moved ~40px.
   Desktop: Home · The details · Pricing · Sign in, then the pill. Phone (<760px): logo, pill, menu. */
.top {
  position: fixed; inset: 0 0 auto 0; z-index: 30;
  height: calc(var(--top-h) + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) var(--gutter) 0;
  display: flex; align-items: center; gap: 8px;
  background: oklch(0.16 0.008 60 / 0);
  box-shadow: inset 0 -1px 0 oklch(0.94 0.018 80 / 0);
  transition: background-color 420ms var(--ease), box-shadow 420ms var(--ease);
}
.top.solid { background: var(--ground); box-shadow: inset 0 -1px 0 var(--cream-rule); }
.logo { display: flex; align-items: center; min-height: 44px; margin-right: auto; }
.logo img { height: 15px; width: auto; }
@media (min-width: 760px) { .logo img { height: 18px; } }

.top-nav { display: none; align-items: center; margin-right: 10px; }
.top-nav a, .top-pill {
  font-size: 0.6875rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 500;
  text-decoration: none; white-space: nowrap;
}
.top-nav a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px;
  color: var(--cream-dim);
  transition: color 200ms var(--ease);
}
.top-nav a[aria-current="page"] { color: var(--cream); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
@media (hover: hover) { .top-nav a:hover { color: var(--cream); } }
.top-pill {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 40px; padding: 0 18px 0 calc(18px + 0.18em);
  border: 1px solid var(--cream); border-radius: 999px;
  color: var(--cream);
  transition: background-color 250ms var(--ease), color 250ms var(--ease);
}
.top-pill::before { content: ""; position: absolute; inset: -3px -2px; }
@media (hover: hover) { .top-pill:hover { background: var(--cream); color: var(--ink); } }
.top-pill:focus-visible { border-radius: 999px; }
.tp-short { display: none; }
@media (max-width: 359px) { .tp-long { display: none; } .tp-short { display: inline; } }

.menu-btn {
  display: grid; place-content: center; gap: 6px;
  width: 44px; height: 44px; margin-right: -10px; padding: 0;
  border: 0; background: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.menu-btn i { display: block; width: 22px; height: 1px; background: var(--cream); transition: translate 300ms var(--ease); }
.menu-btn i + i { width: 14px; justify-self: end; }
@media (hover: hover) { .menu-btn:hover i + i { width: 22px; } }
.menu-btn:focus-visible { outline-offset: -2px; border-radius: 50%; }

@media (min-width: 760px) {
  .top { gap: 4px; }
  .top-nav { display: flex; }
  .menu-btn { display: none; }
}

/* the phone menu: a quiet full-screen sheet */
.sheet {
  position: fixed; inset: 0; z-index: 45;
  display: flex; flex-direction: column;
  padding: env(safe-area-inset-top) var(--gutter) calc(24px + env(safe-area-inset-bottom));
  background: var(--ground);
  overflow-y: auto; overscroll-behavior: contain;
  opacity: 0; transition: opacity 320ms var(--ease);
}
.sheet[hidden] { display: none; }
.sheet.open { opacity: 1; }
.sheet-head { flex: none; height: var(--top-h); display: flex; align-items: center; justify-content: space-between; }
.sheet-close {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin-right: -10px; padding: 0 10px;
  border: 0; background: none; cursor: pointer; color: var(--cream);
  font-size: 0.6875rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 500;
}
.sheet-nav { flex: 1; display: flex; align-items: center; padding: 32px 0; }
.sheet-nav ol { width: 100%; }
.sheet-nav li { border-bottom: 1px solid var(--cream-rule); opacity: 0; translate: 0 14px; transition: opacity 500ms var(--ease), translate 700ms var(--ease); }
.sheet-nav li:first-child { border-top: 1px solid var(--cream-rule); }
.sheet.open .sheet-nav li { opacity: 1; translate: none; transition-delay: calc(80ms + var(--i, 0) * 55ms); }
.sheet-nav a {
  display: flex; align-items: baseline; gap: 18px;
  padding: 18px 0 20px;
  text-decoration: none; color: var(--cream-dim);
}
.sheet-nav .num { color: var(--cream-faint); min-width: 2ch; }
.sheet-nav .t { font-size: 2rem; font-weight: 300; line-height: 1.1; letter-spacing: -0.03em; }
.sheet-nav a[aria-current="page"] { color: var(--cream); }
.sheet-nav a[aria-current="page"] .t { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 7px; }
.sheet-foot { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.sheet-foot .label { color: var(--cream-faint); }
html.locked, html.locked body { overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
  .sheet-nav li { translate: none; transition: opacity 300ms ease-out; }
  .sheet.open .sheet-nav li { transition-delay: 0ms; }
}


.pill {
  display: inline-flex; align-items: center; min-height: 48px; padding: 0 24px;
  border-radius: 999px;
  background: var(--cream); color: var(--ink);
  font-size: var(--t-sub); font-weight: 500; letter-spacing: 0.005em;
  text-decoration: none;
  transition: background-color 200ms var(--ease), transform 200ms var(--ease);
}
.pill:focus-visible, .plan--rec .plan-cta:focus-visible { border-radius: 999px; }
@media (hover: hover) { .pill:hover { background: oklch(0.98 0.012 80); } }
.pill:active, .plan--rec .plan-cta:active { transform: scale(0.98); }

/* ---------- Footer ---------- */
.foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 24px;
  padding: 12px var(--edge) calc(16px + env(safe-area-inset-bottom));
  border-top: 1px solid oklch(0.94 0.018 80 / 0.1);
  font-size: var(--t-label); letter-spacing: 0.04em; color: var(--cream-faint);
}
.foot-nav { display: flex; flex-wrap: wrap; margin-left: -10px; }
.foot a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 10px; text-decoration: none; transition: color 200ms var(--ease); }
.foot-mail { color: var(--cream-dim); }
@media (hover: hover) { .foot a:hover, .foot a:hover .foot-mail { color: var(--cream); } }
.foot-c { padding: 12px 0; }

/* ---------- Film grain over everything, very light ---------- */
.grain {
  position: fixed; inset: -50%; z-index: 25; pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.5  0 0 0 0 0.45  0 0 0 0 0.4  0 0 0 0.9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity: 0.07;
  mix-blend-mode: overlay;
  animation: grain 900ms steps(6) infinite;
}
@keyframes grain {
  0% { transform: translate(0, 0); } 20% { transform: translate(-3%, 2%); } 40% { transform: translate(2%, -3%); }
  60% { transform: translate(-2%, -1%); } 80% { transform: translate(3%, 3%); } 100% { transform: translate(0, 0); }
}
@media (prefers-reduced-motion: reduce) { .grain { animation: none; } .pill:active { transform: none; } }

/* ---------- The document ---------- */
.doc {
  padding: calc(var(--top-h) + env(safe-area-inset-top) + 56px) var(--edge) 96px;
  font-size: 1.0625rem;          /* 17px: the measure below is 65 of these characters */
}
@media (min-width: 900px) { .doc { padding-top: calc(var(--top-h) + 104px); padding-bottom: 136px; } }
.doc-head, .legal { max-width: 65ch; margin-inline: auto; }
.doc-head { padding-bottom: 40px; margin-bottom: 40px; border-bottom: 1px solid var(--cream-rule); }
.doc-title {
  font-size: clamp(2.25rem, 1.5rem + 3vw, 4rem);
  font-weight: 300; line-height: 1.02; letter-spacing: -0.04em; margin-left: -0.04em;
  text-wrap: balance;
}

.legal {
  line-height: 1.75;
  color: oklch(0.94 0.018 80 / 0.82);
  font-weight: 400;
  letter-spacing: 0.005em;
  overflow-wrap: break-word;
}
.legal p { margin: 0 0 1.15em; }
.legal h2 {
  margin: 2.6em 0 0.7em;
  font-size: 1.375rem; font-weight: 400; line-height: 1.3; letter-spacing: -0.015em;
  color: var(--cream);
  text-wrap: balance;
}
.legal h3 {
  margin: 1.9em 0 0.5em;
  font-size: 1.0625rem; font-weight: 500; line-height: 1.4; letter-spacing: 0;
  color: var(--cream);
}
.legal h2 + p, .legal h3 + p { margin-top: 0; }
.legal ul, .legal ol { margin: 0 0 1.15em; padding-left: 1.3em; }
.legal ul { list-style: none; }
.legal ul > li { position: relative; }
.legal ul > li::before {
  content: ""; position: absolute; left: -1.05em; top: 0.85em;
  width: 0.4em; height: 1px; background: var(--cream-faint);
}
.legal ol { list-style: decimal; }
.legal li { margin-bottom: 0.45em; padding-left: 0.15em; }
.legal strong, .legal b { color: var(--cream); font-weight: 500; }
.legal em { font-style: italic; }
.legal a {
  color: var(--cream);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
  text-decoration-color: var(--cream-faint);
  transition: text-decoration-color 200ms var(--ease);
}
@media (hover: hover) { .legal a:hover { text-decoration-color: var(--cream); } }
.legal .legal-meta {
  margin-bottom: 2.4em;
  font-size: var(--t-label); font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--cream-faint);
}
.legal .legal-callout {
  margin: 1.2em 0 1.6em; padding: 20px 22px;
  background: var(--ground-lift);
  border-left: 1px solid var(--cream-hair);
  color: var(--cream-dim);
}
.legal .legal-callout p:last-child { margin-bottom: 0; }
.legal .table-wrap { overflow-x: auto; margin: 1em 0 1.6em; -webkit-overflow-scrolling: touch; }
.legal table { width: 100%; border-collapse: collapse; font-size: 0.875rem; line-height: 1.55; }
@media (min-width: 760px) { .legal table { font-size: 0.9375rem; } }
.legal th, .legal td { text-align: left; vertical-align: top; padding: 12px 12px 12px 0; border-bottom: 1px solid var(--cream-rule); }
.legal th {
  font-size: var(--t-label); font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--cream-faint);
}
.legal [id] { scroll-margin-top: calc(var(--top-h) + env(safe-area-inset-top) + 24px); }

/* ---------- The small pages that send visitors on (features, stories, refunds) ---------- */
.moved { min-height: 100svh; display: grid; place-content: center; gap: 20px; padding: 32px var(--edge); text-align: center; }
.moved img { height: 18px; width: auto; margin: 0 auto 12px; }
.moved a { color: var(--cream); text-underline-offset: 4px; }

/* ---------- The legal identity line under the footer (filled by /site.js from LEGAL) ---------- */
.ft-legal { flex-basis: 100%; padding: 0 0 12px; line-height: 1.5; color: var(--cream-faint); }
.ft-legal:empty { display: none; }