/* ============================================================
   Hit The Pose — marketing + legal site
   Dark editorial. Matches the iOS app brand tokens exactly.
   One stylesheet for every page. No build step.
   ============================================================ */

:root {
  /* Brand tokens — mirror Core/Design/Tokens.swift */
  --ink:   #0B0B0C;
  --ink2:  #141416;
  --ink3:  #1F1F22;
  --paper:  #F5F1EB;
  --paper2: #EDE7DD;
  --terra:  #B5462C;
  --terra-soft: #C76A4F;

  --line:      rgba(245, 241, 235, 0.10);
  --line-soft: rgba(245, 241, 235, 0.06);
  --on-ink:        var(--paper);
  --on-ink-muted:  rgba(245, 241, 235, 0.62);
  --on-ink-faint:  rgba(245, 241, 235, 0.38);

  --display: "Fraunces", Georgia, "Times New Roman", serif;
  --body: "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Spacing scale (px) */
  --s1: 8px;  --s2: 16px; --s3: 24px; --s4: 32px;
  --s6: 48px; --s8: 64px; --s10: 80px; --s14: 112px; --s20: 160px;

  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 28px;

  --maxw: 1120px;
  --ease: cubic-bezier(0.32, 0.72, 0, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}
body {
  margin: 0;
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.65;
  color: var(--on-ink);
  background: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Atmospheric backdrop — terracotta aurora drifting behind everything,
   echoing OnboardingBackground in the app. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(60% 50% at 84% 6%,  rgba(181, 70, 44, 0.22), transparent 70%),
    radial-gradient(55% 45% at 10% 96%, rgba(199, 106, 79, 0.14), transparent 70%),
    linear-gradient(180deg, var(--ink2), var(--ink) 60%);
}
/* Subtle film grain so the dark never reads as flat black. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

/* ---------- Layout primitives ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding-left: var(--s3); padding-right: var(--s3); }
.section { padding: var(--s14) 0; }
.section--tight { padding: var(--s10) 0; }

.eyebrow {
  font-family: var(--body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--terra-soft);
  margin: 0 0 var(--s2);
  display: flex;
  align-items: center;
  gap: var(--s1);
}
.eyebrow::before {
  content: "";
  width: 24px;
  height: 1px;
  background: var(--terra-soft);
  display: inline-block;
}

/* ---------- Typography ---------- */
h1, h2, h3 { font-family: var(--display); font-weight: 600; letter-spacing: -0.02em; line-height: 1.02; margin: 0; }
h1 { font-size: clamp(2.7rem, 8vw, 5.4rem); }
h2 { font-size: clamp(2rem, 5vw, 3.4rem); line-height: 1.05; }
h3 { font-size: clamp(1.25rem, 2.4vw, 1.7rem); letter-spacing: -0.01em; }
em, .accent {
  font-style: italic;
  /* Fraunces optical-size italic variant for accent words */
  font-variation-settings: "opsz" 144, "SOFT" 60;
  color: var(--terra-soft);
}
p { margin: 0 0 var(--s2); color: var(--on-ink-muted); }
.lead { font-size: clamp(1.05rem, 1.6vw, 1.3rem); color: var(--on-ink-muted); max-width: 54ch; }
.fine { font-size: 13px; color: var(--on-ink-faint); line-height: 1.6; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--body);
  font-weight: 600;
  font-size: 16px;
  border-radius: var(--radius-lg);
  padding: 16px 26px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.25s var(--ease), background 0.25s var(--ease), border-color 0.25s var(--ease);
  text-align: center;
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--terra); color: var(--paper); box-shadow: 0 10px 34px rgba(181, 70, 44, 0.35); }
.btn--primary:hover { background: var(--terra-soft); transform: translateY(-2px); }
.btn--ghost { background: transparent; color: var(--on-ink); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--terra-soft); color: var(--paper); }
.btn .arrow { transition: transform 0.25s var(--ease); }
.btn:hover .arrow { transform: translateX(4px); }

/* "Coming soon to the App Store" — honest, non-interactive pill (no link yet) */
.pill-soon {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--body);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.01em;
  color: var(--on-ink-muted);
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 9px 16px;
  cursor: default;
}
.pill-soon svg { width: 18px; height: 18px; flex: none; color: var(--terra-soft); }
.pill-soon--lg { font-size: 15px; padding: 13px 22px; }
.pill-soon--lg svg { width: 22px; height: 22px; }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  background: rgba(11, 11, 12, 0.72);
  border-bottom: 1px solid var(--line-soft);
}
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; height: 70px; }
.brand { display: inline-flex; align-items: center; gap: 12px; }
.brand svg { width: 34px; height: 34px; }
.brand .name { font-family: var(--display); font-weight: 600; font-size: 19px; letter-spacing: -0.01em; }
.nav { display: flex; align-items: center; gap: var(--s3); }
.nav a { font-size: 15px; color: var(--on-ink-muted); transition: color 0.2s; }
.nav a:hover { color: var(--paper); }
.nav .btn { padding: 10px 18px; font-size: 14px; }
.nav-links { display: flex; gap: var(--s3); align-items: center; }
@media (max-width: 760px) { .nav-links { display: none; } }

/* ---------- Hero ---------- */
.hero { position: relative; padding: clamp(56px, 9vw, 120px) 0 var(--s10); }
.hero-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: var(--s8); align-items: center; }
@media (max-width: 920px) { .hero-grid { grid-template-columns: 1fr; gap: var(--s6); } }
.hero h1 { margin-bottom: var(--s3); }
.hero .lead { margin-bottom: var(--s4); }
.hero-cta { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; }
.hero-meta { margin-top: var(--s4); display: flex; gap: var(--s3); flex-wrap: wrap; }
.hero-meta span { font-size: 13.5px; color: var(--on-ink-faint); display: inline-flex; align-items: center; gap: 7px; }
.hero-meta .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--terra); }

/* Reveal-on-load stagger */
.reveal { opacity: 0; transform: translateY(18px); animation: rise 0.9s var(--ease) forwards; }
.reveal.d1 { animation-delay: 0.05s; }
.reveal.d2 { animation-delay: 0.14s; }
.reveal.d3 { animation-delay: 0.23s; }
.reveal.d4 { animation-delay: 0.32s; }
@keyframes rise { to { opacity: 1; transform: none; } }

/* In-view reveal for scrolled sections */
.io { opacity: 0; transform: translateY(26px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
.io.in { opacity: 1; transform: none; }

/* ---------- Phone mock (hero) ---------- */
.phone {
  position: relative;
  width: min(290px, 78vw);
  margin: 0 auto;
  aspect-ratio: 232 / 470;
  border-radius: 42px;
  background: linear-gradient(160deg, #18181b, #0d0d0f);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 40px 90px rgba(0,0,0,0.55), 0 0 0 1px rgba(0,0,0,0.4);
  padding: 12px;
  transform: rotate(2deg);
  transition: transform 0.6s var(--ease);
}
.phone:hover { transform: rotate(0deg) translateY(-6px); }
.phone .notch {
  position: absolute; top: 18px; left: 50%; transform: translateX(-50%);
  width: 86px; height: 22px; background: #000; border-radius: 12px; z-index: 3;
}
.phone-screen {
  position: relative;
  width: 100%; height: 100%;
  border-radius: 32px;
  overflow: hidden;
  background:
    radial-gradient(120% 80% at 50% 0%, #2a2622, #14110f 70%),
    var(--ink3);
  display: flex; flex-direction: column; justify-content: flex-end;
}
/* silhouette guide drawn over a faux scene */
.phone-scene {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(181,70,44,0.18), transparent 45%),
    repeating-linear-gradient(115deg, rgba(255,255,255,0.02) 0 14px, transparent 14px 28px),
    linear-gradient(180deg, #3a302a, #1c1815);
}
/* ----- Animated pose guide ----- */
/* Tall viewBox (100 × 232.7): size the figure by HEIGHT so the whole
   standing pose fits the screen, with the feet near the bottom. Both the
   outline and the fill are stacked over the same spot so the fill can
   slide in and "lock" onto the outline. */
.phone-pose { position: absolute; inset: 0; display: grid; place-items: center; z-index: 1; }
/* Both SVGs share grid cell 1/1 so they stack perfectly aligned. */
.phone-pose svg { grid-area: 1 / 1; height: 84%; width: auto; }
.pose-outline path { stroke: var(--terra); stroke-width: 2.2; fill: none; stroke-linejoin: round; }
.pose-fill path { fill: rgba(245, 241, 235, 0.82); stroke: none; }

/* The demo loop runs only on the hero variant. Defaults below are the
   final, "locked" resting state — that's what shows under
   prefers-reduced-motion (no motion, just the finished frame). */
.pose-outline { opacity: 1; }
.pose-fill { opacity: 0.82; transform: translate(0, 0) scale(1); transform-origin: 50% 60%; }
.phone-flash { position: absolute; inset: 0; z-index: 4; background: #fff; opacity: 0; pointer-events: none; }

.phone--demo .pose-outline { opacity: 0; animation: poseOutline 5.5s var(--ease) infinite; }
.phone--demo .pose-fill    { opacity: 0; animation: poseFill 5.5s var(--ease) infinite; }
.phone--demo .phone-flash  { animation: poseFlash 5.5s linear infinite; }
.phone--demo .pose-pill    { animation: posePill 5.5s var(--ease) infinite; }
.phone--demo .shutter-ring circle { animation: poseRing 5.5s linear infinite; }
.phone--demo .shutter::after      { animation: poseShutter 5.5s var(--ease) infinite; }

.phone-chrome {
  position: relative; z-index: 3;
  padding: 14px 12px 20px;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
/* Resting pill = dark glass (the app's idle state); it only flashes
   terracotta when the suggestion fires. */
.pose-pill {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(0,0,0,0.42); color: var(--paper);
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 6px 11px; border-radius: 999px;
  white-space: nowrap;
}
/* Shutter: white outer ring + paper inner disc, with a terracotta
   progress arc drawn by .shutter-ring on top. */
.shutter { position: relative; width: 52px; height: 52px; border-radius: 50%; border: 2px solid var(--paper); display: grid; place-items: center; }
.shutter::after { content: ""; width: 42px; height: 42px; background: var(--paper); border-radius: 50%; }
.shutter-ring {
  position: absolute; inset: -2px; width: 52px; height: 52px;
  transform: rotate(-90deg); /* start the arc at 12 o'clock */
}
.shutter-ring circle {
  fill: none; stroke: var(--terra); stroke-width: 3; stroke-linecap: round;
  /* circumference of r=24.5 ≈ 153.94 */
  stroke-dasharray: 153.94; stroke-dashoffset: 153.94;
}

/* ---------- Hero demo keyframes (mirror the app's onboarding beats) ----------
   One 5.5s loop. Percentages map to the same phase fractions the app uses:
   pill highlight 10–20%, outline in 20–40% (holds), fill slides+locks
   32–65%, shutter ring 55–82%, flash 82–88%, then everything fades & loops. */

/* 1) "Suggest a pose" pill briefly lights up terracotta. */
@keyframes posePill {
  0%, 9%   { background: rgba(0,0,0,0.42); transform: scale(1); }
  13%      { background: var(--terra); transform: scale(1.06); }
  18%      { background: var(--terra); transform: scale(1.06); }
  22%, 100%{ background: rgba(0,0,0,0.42); transform: scale(1); }
}

/* 2) Terracotta OUTLINE guide fades in and holds, then clears for the loop. */
@keyframes poseOutline {
  0%, 20%  { opacity: 0; }
  40%      { opacity: 0.95; }
  82%      { opacity: 0.95; }
  88%, 100%{ opacity: 0; }
}

/* 3) Paper FILL slides in from a small offset, eases into alignment and
      settles to scale 1 — the body "locks" onto the guide. */
@keyframes poseFill {
  0%, 32%  { opacity: 0; transform: translate(14px, -8px) scale(0.92); }
  50%      { opacity: 0.82; transform: translate(4px, -2px) scale(0.97); }
  65%      { opacity: 0.82; transform: translate(0, 0) scale(1); }
  82%      { opacity: 0.82; transform: translate(0, 0) scale(1); }
  88%, 100%{ opacity: 0; transform: translate(0, 0) scale(1); }
}

/* 4) Shutter progress arc fills 0 → 100%. */
@keyframes poseRing {
  0%, 55%  { stroke-dashoffset: 153.94; }
  82%      { stroke-dashoffset: 0; }
  88%      { stroke-dashoffset: 0; }
  92%, 100%{ stroke-dashoffset: 153.94; }
}

/* 5) Quick white capture flash. */
@keyframes poseFlash {
  0%, 82%  { opacity: 0; }
  84.5%    { opacity: 0.85; }
  88%, 100%{ opacity: 0; }
}

/* Shutter inner disc dips on capture, like a real shutter press. */
@keyframes poseShutter {
  0%, 82%  { transform: scale(1); }
  85%      { transform: scale(0.82); }
  88%, 100%{ transform: scale(1); }
}

/* Reduced motion: no loop — show the finished, "locked" frame only.
   Outline + fill aligned, pill calm, shutter ring full, no flash. */
@media (prefers-reduced-motion: reduce) {
  .phone--demo .pose-outline,
  .phone--demo .pose-fill,
  .phone--demo .phone-flash,
  .phone--demo .pose-pill,
  .phone--demo .shutter-ring circle,
  .phone--demo .shutter::after { animation: none !important; }
  .phone--demo .pose-outline { opacity: 0.95; }
  .phone--demo .pose-fill { opacity: 0.82; transform: translate(0, 0) scale(1); }
  .phone--demo .phone-flash { opacity: 0; }
  .phone--demo .pose-pill { background: rgba(0,0,0,0.42); transform: none; }
  .phone--demo .shutter-ring circle { stroke-dashoffset: 0; }
  .phone--demo .shutter::after { transform: scale(1); }
}

/* ---------- Cards / generic surface ---------- */
.card {
  background: linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.012));
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  padding: var(--s4);
}

/* ---------- Problem beat ---------- */
.problem { text-align: center; max-width: 820px; margin: 0 auto; }
.problem h2 { margin-bottom: var(--s3); }
.problem p { font-size: clamp(1.05rem, 1.7vw, 1.35rem); color: var(--on-ink-muted); }

/* ---------- How it works (3 steps) ---------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s3); margin-top: var(--s6); }
@media (max-width: 820px) { .steps { grid-template-columns: 1fr; } }
.step { position: relative; padding-top: var(--s4); }
.step .num {
  font-family: var(--display); font-style: italic; font-size: 3.4rem; line-height: 1;
  color: var(--terra-soft); opacity: 0.85; margin-bottom: var(--s2);
  font-variation-settings: "opsz" 144;
}
.step h3 { margin-bottom: 10px; }
.step p { margin: 0; }

/* ---------- FAQ accordion ---------- */
.faq { max-width: 780px; margin: var(--s6) auto 0; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-q {
  width: 100%; text-align: left; background: none; border: none; cursor: pointer;
  color: var(--on-ink); font-family: var(--body); font-size: 1.1rem; font-weight: 500;
  padding: 22px 44px 22px 0; position: relative;
}
.faq-q::after {
  content: "+"; position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  font-size: 1.6rem; color: var(--terra-soft); transition: transform 0.3s var(--ease);
  line-height: 1;
}
.faq-item[open] .faq-q::after, .faq-q[aria-expanded="true"]::after { transform: translateY(-50%) rotate(45deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height 0.35s var(--ease); }
.faq-a-inner { padding: 0 0 22px; color: var(--on-ink-muted); }
.faq-a p { margin: 0; }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--line); padding: var(--s8) 0 var(--s6); margin-top: var(--s10); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--s6); }
@media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr; gap: var(--s4); } }
.footer-grid h4 { font-family: var(--body); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--on-ink-faint); margin: 0 0 var(--s2); font-weight: 600; }
.footer-links { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.footer-links a { color: var(--on-ink-muted); font-size: 15px; transition: color 0.2s; }
.footer-links a:hover { color: var(--paper); }
.footer-brand .name { font-family: var(--display); font-size: 21px; }
.footer-brand p { font-size: 14px; max-width: 34ch; margin-top: 12px; }
.footer-bottom { margin-top: var(--s6); padding-top: var(--s4); border-top: 1px solid var(--line-soft); display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--s2); }
.footer-bottom, .footer-bottom a { font-size: 13px; color: var(--on-ink-faint); }
.footer-bottom a:hover { color: var(--on-ink-muted); }

/* ============================================================
   Legal / content pages (privacy, terms, support)
   ============================================================ */
.doc { max-width: 760px; margin: 0 auto; padding: var(--s10) 0 var(--s8); }
.doc-head { margin-bottom: var(--s6); }
.doc-head h1 { font-size: clamp(2.4rem, 6vw, 4rem); margin-bottom: var(--s2); }
.doc-updated { font-size: 13px; color: var(--on-ink-faint); letter-spacing: 0.02em; }
.doc h2 { font-size: clamp(1.4rem, 3vw, 2rem); margin: var(--s8) 0 var(--s2); }
.doc h3 { font-size: 1.2rem; margin: var(--s4) 0 var(--s1); color: var(--paper); }
.doc p, .doc li { color: var(--on-ink-muted); font-size: 16.5px; line-height: 1.75; }
.doc p { margin: 0 0 var(--s2); }
.doc ul { padding-left: 1.2em; margin: 0 0 var(--s2); }
.doc li { margin-bottom: 8px; }
.doc a { color: var(--terra-soft); text-decoration: underline; text-underline-offset: 3px; }
.doc a:hover { color: var(--paper); }
.doc strong { color: var(--paper); font-weight: 600; }
.callout {
  border: 1px solid var(--line); border-left: 3px solid var(--terra);
  border-radius: var(--radius-md); padding: var(--s3); margin: var(--s3) 0;
  background: rgba(255,255,255,0.02);
}
.callout p { margin: 0; }
.toc { list-style: none; padding: 0; margin: var(--s2) 0 0; display: flex; flex-wrap: wrap; gap: 10px; }
.toc a { font-size: 13.5px; color: var(--on-ink-muted); border: 1px solid var(--line); border-radius: 999px; padding: 5px 13px; text-decoration: none; }
.toc a:hover { border-color: var(--terra-soft); color: var(--paper); }

.backlink { display: inline-flex; align-items: center; gap: 8px; color: var(--on-ink-muted); font-size: 14px; margin-bottom: var(--s4); }
.backlink:hover { color: var(--paper); }

/* ---------- 404 ---------- */
.notfound { min-height: 70vh; display: grid; place-items: center; text-align: center; padding: var(--s10) var(--s3); }
.notfound .code { font-family: var(--display); font-style: italic; font-size: clamp(6rem, 22vw, 14rem); line-height: 0.9; color: var(--terra-soft); font-variation-settings: "opsz" 144; }
.notfound h1 { font-size: clamp(1.8rem, 5vw, 2.6rem); margin: var(--s3) 0 var(--s2); }
.notfound p { max-width: 44ch; margin: 0 auto var(--s4); }

/* ---------- Support specific ---------- */
.support-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); margin: var(--s6) 0; }
@media (max-width: 760px) { .support-grid { grid-template-columns: 1fr; } }
.support-card h3 { margin-bottom: 8px; }
.support-card p { margin: 0; font-size: 15px; }
.contact-block { text-align: center; margin-top: var(--s8); }
.contact-block .mail { font-family: var(--display); font-style: italic; font-size: clamp(1.4rem, 4vw, 2.2rem); color: var(--terra-soft); word-break: break-word; }

/* ============================================================
   Small-screen polish (phones, 360–560px)
   The base layout uses generous editorial spacing (112px sections);
   on a narrow phone that reads as broken empty gaps and lets long
   strings (emails) touch the edges. Tighten vertical rhythm, ease the
   side gutters, and stop any element from exceeding the viewport.
   ============================================================ */
@media (max-width: 560px) {
  /* Vertical rhythm: scale the big section/doc/footer gaps down so the
     page reads as intentional, not as missing content. */
  .section        { padding: var(--s10) 0; }   /* 112 → 80 */
  .section--tight { padding: var(--s8) 0; }     /* 80 → 64 */
  .hero           { padding: clamp(36px, 11vw, 56px) 0 var(--s8); }
  .doc            { padding: var(--s8) 0 var(--s6); }
  .doc h2         { margin-top: var(--s6); }
  .site-footer    { margin-top: var(--s8); padding: var(--s6) 0 var(--s4); }
  .steps          { margin-top: var(--s4); }
  .faq            { margin-top: var(--s4); }
  .support-grid   { margin: var(--s4) 0; }
  .contact-block  { margin-top: var(--s6); }

  /* Side gutters: a touch tighter so body copy isn't cramped, while
     still keeping clear of the screen edge. */
  .wrap { padding-left: 20px; padding-right: 20px; }

  /* Long links wrap instead of forcing horizontal scroll. */
  .footer-bottom { gap: 6px; }
  .footer-bottom span { overflow-wrap: anywhere; }
  .doc a, .doc p { overflow-wrap: anywhere; }
}

/* Tightest phones (≤400px): keep the sticky header on one row and make
   sure nothing overflows the viewport width. */
@media (max-width: 400px) {
  .site-header .wrap { height: 62px; }
  .brand .name { font-size: 17px; }
  .brand svg { width: 30px; height: 30px; }
  .pill-soon { font-size: 12.5px; padding: 8px 13px; }
  .hero-meta { gap: var(--s2); }
  .hero-meta span { font-size: 12.5px; }
  .toc { gap: 8px; }
  .toc a { font-size: 12.5px; padding: 5px 11px; }
}