/* ============================================================
   Egglaxy — web styles

   The app's own palette, and the app's own rule with it:
   **cool is the interface, warm is the food.** Every link and
   control is `actionTint` #8FB5D2. Nothing tappable is terracotta.
   The warms appear only where the subject is the egg — which on a
   legal site means the food-safety warnings, and nothing else.

   Committed to dark rather than offering a light mode: the app is
   dark-only (`UIUserInterfaceStyle` = Dark), and a site that goes
   pale in daylight would stop looking like the product it documents.
   ============================================================ */

:root {
  color-scheme: dark;

  /* Surfaces — straight from Color+Egg.swift */
  --paper:          #0A1116;   /* eggInk — base of every screen */
  --surface:        #17262F;   /* eggSurface — panel fill */
  --surface-soft:   #0F1B22;   /* eggInkSoft */
  --border:         #21353F;   /* eggSurfaceRaised */
  --border-strong:  rgba(143, 181, 210, 0.34);  /* inkRim */

  /* Ink. Body copy is eggRaw rather than pure white: 5000 words of
     #FFFFFF on near-black is a glare, and the app already owns a
     softer shell-white. */
  --text:           #EDF1F4;   /* eggRaw */
  --text-soft:      rgba(255, 255, 255, 0.62);  /* eggSecondary */
  --text-mute:      rgba(255, 255, 255, 0.38);  /* eggTertiary */

  /* The one interactive hue. Same value as portalCore, not a
     near-match — two blues a shade apart read as a mistake. */
  --accent:         #8FB5D2;   /* actionTint */
  --accent-soft:    rgba(143, 181, 210, 0.12);
  --accent-line:    rgba(143, 181, 210, 0.34);
  --accent-deep:    #5F90A4;   /* portalDeep */

  /* Warm — food only */
  --warm:           #D9976C;   /* yolkCore / donenessJammy */
  --yolk:           #E4D987;   /* donenessRunny */
  --terracotta:     #CE7056;   /* methodFried */
  --warning:        #E0A45C;   /* eggWarning — a fact about the egg */
  --warm-soft:      rgba(217, 151, 108, 0.12);

  --quote-bg:       #17262F;

  /* Type */
  --font: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  --font-display: "Press Start 2P", "Joystix Monospace", ui-monospace, monospace;

  /* Radii match AppStyler.CornerRadius */
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 20px;
  --r-xl: 24px;
  --r-pill: 999px;
}

/* -----------  Base  ----------- */

*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

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

body {
  background: var(--paper);
  color: var(--text);
  font: 400 16px/1.6 var(--font);
  font-feature-settings: "cv11", "ss01", "ss03", "kern", "calt";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--accent-line); color: var(--text); }

a { color: inherit; text-decoration: none; }

/* -----------  Masthead  ----------- */

.masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 20px clamp(20px, 5vw, 40px);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 13px;
  letter-spacing: 0;
}

.brand-icon {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  display: block;
}

/* Language switcher (also used in doc pages) */

.lang {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
}

.lang button,
.lang a {
  appearance: none;
  background: transparent;
  border: 0;
  cursor: pointer;
  font: 600 12px/1 var(--font);
  letter-spacing: 0.02em;
  color: var(--text-soft);
  padding: 7px 13px;
  border-radius: var(--r-pill);
  transition: background 140ms ease, color 140ms ease;
}

.lang a { text-decoration: none; display: inline-block; }

.lang button:hover,
.lang a:hover { color: var(--text); }

.lang button[aria-current="true"],
.lang a[aria-current="true"] {
  background: var(--text);
  color: var(--paper);
}

/* ============================================================
   LANDING (index.html) — full-viewport hero, glass navbar,
   calm animated background, edge anchors.
   ============================================================ */

/* ----- Glass navbar (fixed) ----- */

.glass-nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 50;
  padding: 16px clamp(20px, 5vw, 40px);
  background: linear-gradient(to bottom, rgba(10, 17, 22, 0.98) 80%, rgba(10, 17, 22, 0));
  pointer-events: none;
}

.glass-nav-inner {
  display: flex;
  align-items: center;
  gap: 20px;
  max-width: 1280px;
  margin: 0 auto;
  pointer-events: auto;
}

.glass-nav .brand { font-weight: 700; }

.nav-links {
  display: flex;
  gap: clamp(18px, 3vw, 32px);
  margin: 0 auto;
}

.nav-links a {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-transform: lowercase;
  color: var(--text-soft);
  transition: color 140ms ease;
}

.nav-links a:hover { color: var(--text); }

.nav-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}

/* Hamburger — mobile only */

.nav-burger {
  display: none;
  appearance: none;
  background: transparent;
  border: 0;
  cursor: pointer;
  width: 36px;
  height: 36px;
  padding: 8px;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
}

.nav-burger span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--text);
  border-radius: 2px;
  transition: transform 220ms ease, opacity 220ms ease;
}

.nav-burger.open span:first-child { transform: translateY(3.5px) rotate(45deg); }
.nav-burger.open span:last-child { transform: translateY(-3.5px) rotate(-45deg); }

/* Mobile drawer */

.nav-drawer {
  /* Absolutely positioned so the hidden drawer never stretches the fixed
     header (its gradient would otherwise paint over page titles). */
  position: absolute;
  top: 100%;
  left: clamp(20px, 5vw, 40px);
  right: clamp(20px, 5vw, 40px);
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 1280px;
  margin: 0 auto;
  padding: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: 0 18px 40px -24px rgba(0, 0, 0, 0.25);
  visibility: hidden;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 220ms ease, transform 220ms ease, visibility 0s linear 220ms;
  pointer-events: auto;
}

.nav-drawer a {
  font-size: 15px;
  font-weight: 500;
  text-transform: lowercase;
  color: var(--text);
  padding: 12px 14px;
  border-radius: var(--r-sm);
}

.nav-drawer a:hover { background: var(--surface-soft); }

.nav-drawer.open {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
  transition: opacity 220ms ease, transform 220ms ease;
}

@media (max-width: 760px) {
  .nav-links { display: none; }
  .nav-burger { display: flex; }
}

/* ----- Page sections (huma-style: typographic, hairlines, mono eyebrows) ----- */

:root { --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace; }

.hero,
.section {
  max-width: 1280px;
  margin: 0 auto;
  padding-left: clamp(24px, 6vw, 64px);
  padding-right: clamp(24px, 6vw, 64px);
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 9px;
  font: 500 11px/1 var(--font-mono);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-soft);
  margin: 0 0 20px;
}

.eyebrow-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}

/* ----- Hero — pure typography ----- */

.hero {
  padding-top: clamp(150px, 24vh, 230px);
  padding-bottom: clamp(56px, 9vh, 96px);
}

.hero .eyebrow { animation: fadeUp 0.7s cubic-bezier(0.2, 0, 0, 1) both; }

.hero-title {
  /* Press Start 2P is a fixed-width arcade face: every glyph is a full em, so
     the same clamp that suits Inter would run three times the width. Sized
     against the app's own display type instead, with the line-height an
     arcade face needs to stay legible. */
  font-family: var(--font-display);
  font-size: clamp(19px, 3vw, 38px);
  line-height: 1.45;
  letter-spacing: 0;
  font-weight: 400;
  color: var(--text);
  margin: 0 0 28px;
  animation: fadeUp 0.7s cubic-bezier(0.2, 0, 0, 1) 0.08s both;
}

.hero-title .line { display: block; }
.hero-title .line--2 { color: var(--text-mute); }

.hero-sub {
  font-size: clamp(16px, 1.6vw, 19px);
  line-height: 1.65;
  color: var(--text-soft);
  max-width: 56ch;
  margin: 0 0 36px;
  animation: fadeUp 0.7s cubic-bezier(0.2, 0, 0, 1) 0.16s both;
}

.hero-cta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 22px;
  animation: fadeUp 0.7s cubic-bezier(0.2, 0, 0, 1) 0.24s both;
}

.btn-ghost {
  font-size: 15px;
  font-weight: 500;
  color: var(--text-soft);
  transition: color 140ms ease;
}

.btn-ghost:hover { color: var(--text); }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(15px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ----- Generic section ----- */

.section {
  padding-top: clamp(56px, 10vh, 110px);
  padding-bottom: clamp(56px, 10vh, 110px);
}

.section-title {
  font-size: clamp(28px, 3.6vw, 46px);
  line-height: 1.12;
  letter-spacing: -0.022em;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 48px;
  max-width: 24ch;
}

/* ----- About ----- */

.about-text {
  font-size: clamp(16px, 1.6vw, 19px);
  line-height: 1.7;
  color: var(--text-soft);
  max-width: 62ch;
  margin: 0 0 40px;
}

.about-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px 28px;
}

/* App Store badge — outlined pill, Apple mark + two-line label */
.store-badge {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  border: 1.5px solid var(--text);
  border-radius: var(--r-pill);
  padding: 12px 28px 12px 22px;
  color: var(--text);
  transition: background 140ms ease, color 140ms ease;
}

.store-badge:hover {
  background: var(--text);
  color: var(--paper);
}

.store-badge .apple { width: 22px; height: 27px; flex-shrink: 0; }

.store-badge-text { display: flex; flex-direction: column; }
.store-badge-text .small { font-size: 12px; line-height: 1.3; }
.store-badge-text .big { font-size: 19px; font-weight: 600; line-height: 1.15; letter-spacing: -0.01em; }

/* ----- Scroll reveal ----- */

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s cubic-bezier(0.2, 0, 0, 1), transform 0.7s cubic-bezier(0.2, 0, 0, 1);
}

.reveal.in {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .hero .eyebrow, .hero-title, .hero-sub, .hero-cta { animation: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
}


/* -----------  Footer (both landing & doc pages)  ----------- */

.colophon {
  margin-top: clamp(48px, 10vw, 80px);
  padding: 24px clamp(20px, 5vw, 40px) 40px;
  text-align: center;
  font-size: 13px;
  color: var(--text-soft);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.colophon a {
  color: var(--text-soft);
  border-bottom: 1px solid transparent;
  transition: color 140ms ease, border-color 140ms ease;
}

.colophon a:hover {
  color: var(--text);
  border-color: var(--text-mute);
}

.colophon .links {
  display: inline-flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

.colophon .sep {
  color: var(--text-mute);
}

/* ============================================================
   DOC PAGES (privacy.html, terms.html) — long-form editorial
   Single centered column, neutral palette (Stoic-style).
   Container: <main class="document"> directly under <header class="masthead">.
   Doc-only tokens override the landing ones via body.doc-body.
   ============================================================ */

body.doc-body {
  background: var(--paper);
  color: var(--text);
}

/* Document column — single, centered, scales linearly via clamp().
   Top padding is dropped because the hero supplies its own vertical space. */

.document {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 32px) 96px;
  min-width: 0;
}

/* ---------- HERO: title + dates form a centered magazine-style cover ---------- */

.document article > h1 {
  text-align: center;
  font-size: clamp(40px, 6.5vw, 60px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  font-weight: 700;
  color: var(--text);
  margin: 0 auto;
  padding: clamp(48px, 9vw, 96px) 0 18px;
  max-width: 16ch;
}

/* Subtitle = the first <p> after the H1 (Effective/Last-updated metadata) */
.document article > h1 + p {
  text-align: center;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-soft);
  margin: 0 auto;
  padding: 0 0 clamp(48px, 8vw, 80px);
  max-width: 52ch;
  font-weight: 400;
}
.document article > h1 + p strong {
  color: var(--text);
  font-weight: 500;
}

/* Lede = the second <p> after the H1 (the actual intro sentence). */
.document article > h1 + p + p {
  font-size: clamp(18px, 2vw, 21px);
  line-height: 1.5;
  color: var(--text);
  font-weight: 600;
  letter-spacing: -0.005em;
  margin: 0 0 32px;
}
.document article > h1 + p + p strong { font-weight: 700; }

/* ---------- Body hierarchy ---------- */

.document h2 {
  font-size: clamp(22px, 2.6vw, 28px);
  line-height: 1.3;
  letter-spacing: -0.012em;
  font-weight: 600;
  color: var(--text);
  margin: 72px 0 16px;
  scroll-margin-top: 24px;
}

.document h3 {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--text);
  margin: 36px 0 12px;
}

.document p {
  margin: 0 0 20px;
  color: var(--text);
  font-size: 17px;
  line-height: 1.75;
}

.document strong { font-weight: 600; color: var(--text); }

.document a {
  color: var(--accent);
  border-bottom: 1px solid var(--accent-line);
  transition: border-color 140ms ease;
}

.document a:hover { border-color: var(--accent); }

.document ul, .document ol {
  padding-left: 24px;
  margin: 0 0 20px;
}

.document ul { list-style: disc; }
.document ol { list-style: decimal; }

.document ul li, .document ol li {
  margin-bottom: 10px;
  line-height: 1.75;
  font-size: 17px;
  color: var(--text);
}

.document ul li::marker,
.document ol li::marker {
  color: var(--text-mute);
}

/* Section divider — short centered rule where the markdown has `---`. */
.document hr {
  border: 0;
  height: 1px;
  background: var(--border);
  width: 80px;
  margin: 56px auto;
}

.document blockquote {
  background: var(--quote-bg);
  border-left: 3px solid var(--warning);
  margin: 28px 0;
  padding: 20px 24px;
  border-radius: 4px;
  color: var(--text);
  font-size: 16px;
  line-height: 1.7;
}

.document blockquote p { font-size: 16px; line-height: 1.7; }
.document blockquote p:first-of-type {
  font-size: 16px;
  color: var(--text);
  margin-bottom: 12px;
  font-weight: 400;
}
.document blockquote p:last-child { margin-bottom: 0; }

/* The all-caps emphasis inside a warning, picked out without tinting whole
   paragraphs — several hundred words of amber would stop reading as a
   warning and start reading as decoration. */
.document blockquote strong { color: var(--warning); }

/* Tables — wrapped in <div class="table-wrap"> by the build step so wide
   tables can scroll horizontally on narrow viewports without breaking
   page layout. The visible chrome (border, radius) lives on the wrap,
   so the table itself can exceed the wrap width and trigger overflow. */

.document .table-wrap {
  margin: 24px 0 28px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
}

.document table {
  width: 100%;
  min-width: 480px;
  border-collapse: collapse;
  border-spacing: 0;
  margin: 0;
  background: var(--surface);
  font-size: 15px;
  font-feature-settings: "tnum";
}

.document table th,
.document table td {
  text-align: left;
  vertical-align: top;
  padding: 12px 14px;
  line-height: 1.55;
  border-bottom: 1px solid var(--border);
  word-break: keep-all;
  overflow-wrap: break-word;
}

.document table th {
  font-weight: 600;
  font-size: 12.5px;
  color: var(--text-soft);
  background: var(--surface-soft);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
}

.document table td:first-child,
.document table th:first-child {
  width: 28%;
  min-width: 130px;
}

.document table tr:last-child td { border-bottom: 0; }

.document table code {
  font-size: 13px;
  padding: 1px 4px;
  word-break: break-word;
  overflow-wrap: anywhere;
  white-space: normal;
}

@media (max-width: 520px) {
  .document table th,
  .document table td { padding: 10px 12px; font-size: 14.5px; }
}

.document code {
  font: 14px ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
  background: var(--surface-soft);
  border: 1px solid var(--border);
  padding: 1px 6px;
  border-radius: 4px;
}

/* Doc pages share the fixed glass-nav — clear space under it. */
body.doc-body { padding-top: 56px; }

/* Doc-page footer matches the column width. */
.doc-body .colophon {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

/* Back-to-top floating affordance */

.back-top {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 50%;
  box-shadow: 0 10px 24px -14px rgba(0, 0, 0, 0.18),
              0 2px 6px -2px rgba(0, 0, 0, 0.06);
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 220ms ease, transform 220ms ease,
              background 140ms ease, color 140ms ease, border-color 140ms ease;
  z-index: 40;
}

.back-top.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.back-top:hover {
  background: var(--text);
  color: var(--paper);
  border-color: var(--text);
}

/* Hide non-active language */
html[lang|="en"] .document article[data-lang="uk"],
html[lang|="uk"] .document article[data-lang="en"] {
  display: none;
}

/* Data-attribute language toggles: hide the inactive language. */
html[lang|="en"] [data-show-lang="uk"],
html[lang|="uk"] [data-show-lang="en"] { display: none !important; }


/* ============================================================
   SUPERSEDED EDITIONS
   The banner on an archived document, and the list of them under
   the title of the one in force.
   ============================================================ */

/* Warm, because the app's rule holds here too: this is a statement of fact
   the reader cannot change, not something to press. */
.document .superseded {
  margin: 0 0 32px;
  padding: 16px 20px;
  border-left: 3px solid var(--warning);
  background: var(--quote-bg);
  border-radius: 4px;
}

.document .superseded p {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-soft);
}

.document .superseded strong { color: var(--warning); }

.document .editions {
  margin: 0 0 40px;
  padding: 14px 18px;
  border: 1px solid var(--border);
  border-radius: 8px;
}

.document .editions p {
  margin: 0 0 8px;
  font: 500 11px/1 var(--font-mono);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-soft);
}

.document .editions ul {
  margin: 0;
  padding-left: 18px;
  list-style: disc;
}

.document .editions li {
  margin: 0 0 4px;
  font-size: 15px;
  line-height: 1.6;
}


/* ----- About ----- */

.about-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}

@media (min-width: 900px) {
  .about-grid { grid-template-columns: 1.1fr 0.9fr; }
}

.about-lede {
  margin-top: 20px;
  font-size: clamp(16px, 1.5vw, 18px);
  line-height: 1.65;
  color: var(--text-soft);
  max-width: 58ch;
}

.about-list {
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px;
}

.about-list li {
  position: relative;
  padding-left: 26px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-soft);
}

/* The portal's own blue, as a bullet that is a point of light. */
.about-list li::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 0.6em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent-line);
}

.about-shot {
  margin: 0;
  justify-self: center;
}

.about-shot img {
  display: block;
  width: 100%;
  max-width: 340px;
  height: auto;
  border-radius: var(--r-lg);
  /* The frame is already drawn into the image; this only lifts it off
     the page so it does not read as a flat paste-up. */
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
}


/* ----- FAQ ----- */

.faq {
  margin-top: 32px;
  display: grid;
  gap: 10px;
  max-width: 76ch;
}

.faq-item {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-soft);
  overflow: hidden;
}

.faq-item summary {
  cursor: pointer;
  list-style: none;
  padding: 18px 22px;
  font-size: 16px;
  font-weight: 500;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 12px;
}

.faq-item summary::-webkit-details-marker { display: none; }

/* A caret drawn rather than a glyph, so it turns with the panel. */
.faq-item summary::after {
  content: "";
  margin-left: auto;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(45deg);
  transition: transform 160ms ease;
}

.faq-item[open] summary::after { transform: rotate(-135deg); }
.faq-item[open] { border-color: var(--accent-line); }

.faq-body {
  padding: 0 22px 20px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--text-soft);
}

.faq-body p { margin: 0; }

@media (prefers-reduced-motion: reduce) {
  .faq-item summary::after { transition: none; }
}


/* Section headings take the pixel face, as the app's own headings do. Sized
   well below the body scale: Press Start 2P sets its capitals on the full em,
   so the same nominal size renders far larger than Inter. */
.section-title {
  font-family: var(--font-display);
  font-size: clamp(15px, 1.9vw, 24px);
  line-height: 1.5;
  letter-spacing: 0;
}

.section-title--small { font-size: clamp(12px, 1.4vw, 17px); }

/* ----- App hero ----- */

.hero--app { padding-bottom: clamp(40px, 6vh, 72px); }

.hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
}

@media (min-width: 940px) {
  .hero-grid { grid-template-columns: 1.05fr 0.95fr; }
}

.hero--app .hero-title { margin-top: 18px; }
.hero--app .hero-sub { max-width: 54ch; }

.hero-cta { margin-top: 28px; }

/* Not a link: the app is not on the store yet, and a dead button that looks
   live is worse than an honest label. */
.badge-soon {
  display: inline-block;
  padding: 11px 20px;
  border: 1px solid var(--accent-line);
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font: 500 14px/1 var(--font);
  letter-spacing: 0.01em;
}

.hero-shot { margin: 0; justify-self: center; }

.hero-shot {
  width: 100%;
  max-width: 460px;
}

.hero-shot img {
  display: block;
  width: 100%;
  height: auto;
}

/* ----- Methods ----- */

.method-row {
  margin: 32px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

@media (min-width: 720px) {
  .method-row { grid-template-columns: repeat(4, 1fr); }
}

.method {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 24px 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-soft);
  font-size: 15px;
  color: var(--text-soft);
  transition: border-color 180ms ease, transform 180ms ease;
}

.method:hover {
  border-color: var(--accent-line);
  transform: translateY(-2px);
}

/* Drawn glyphs from the app, not emoji: these four carry their own colour,
   and that is how the methods tell apart before the label is read. */
.method img {
  width: 56px;
  height: 56px;
  object-fit: contain;
}

/* ----- Legal strip ----- */

.section-title--small { font-size: clamp(20px, 2vw, 26px); }

.legal-sub {
  margin-top: 12px;
  max-width: 56ch;
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-soft);
}

.legal-strip .about-actions { margin-top: 22px; }

.about-grid--single { grid-template-columns: 1fr; }

@media (prefers-reduced-motion: reduce) {
  .method { transition: none; }
  .method:hover { transform: none; }
}


/* ----- App Store button ----- */

.btn-store {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 22px 12px 18px;
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
  transition: border-color 180ms ease, background 180ms ease, transform 180ms ease;
}

.btn-store:hover {
  border-color: var(--accent);
  background: var(--surface-raised, var(--surface));
  transform: translateY(-1px);
}

.btn-store:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.btn-store-glyph {
  width: 26px;
  height: 26px;
  flex: none;
}

.btn-store-text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  text-align: left;
}

.btn-store-kicker {
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--text-soft);
}

/* The store's name in the app's own display face, which is the one word on
   this button that belongs to the product rather than to the platform. */
.btn-store-name {
  font-family: var(--font-display);
  font-size: 15px;
  letter-spacing: 0;
}

@media (prefers-reduced-motion: reduce) {
  .btn-store { transition: none; }
  .btn-store:hover { transform: none; }
}