/*
 * Refismart interim site (pre-launch).
 *
 * A reduced version of the full marketing site's stylesheet: same tokens,
 * same design language, only the components this site actually uses. The
 * tokens mirror the app's binding design system (Penpot "Light (Weiss)" /
 * "Dark"): Oswald titles with the ink signature line, Source Sans 3 body,
 * olive as the only action color, gold/rust reserved for pantry status,
 * pill buttons, hairlines instead of cards, two-layer shadows.
 *
 * The light surfaces are a warm off-white rather than the app's pure
 * white: on a screen-sized page plain #fff glares. Hue and roles are
 * unchanged, only the paper is warmer.
 *
 * Theming: light tokens on :root. Dark tokens exist twice on purpose:
 * once for the system preference (when the visitor made no choice) and
 * once for the explicit [data-theme="dark"] the toggle sets.
 */

/* ---------- Fonts (self-hosted variable fonts, latin subset) ---------- */

@font-face {
  font-family: "Oswald";
  font-style: normal;
  font-weight: 200 700;
  font-display: swap;
  src: url("../fonts/oswald-latin.woff2") format("woff2");
}

@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url("../fonts/source-sans-3-latin.woff2") format("woff2");
}

/* ---------- Tokens ---------- */

:root {
  --canvas: #f7f4ec;
  --ink: #201e19;
  --sub: #4e4b42;
  --muted: #5d5849;
  --olive: #57712d;
  --olive-deep: #495f25;
  --gold: #b8912a;
  --rust: #8a3729;
  --chip: #e3ddcb;
  --card: #efe9db;
  --line: #ddd6c3;
  --line-strong: #bbb29b;
  --on-accent: #ffffff;
  --bezel: #1a1814;

  /* Inverted band: deep olive, never the bright accent. It is what keeps
     the light theme from being one flat sheet of paper. */
  --band: #3f5424;
  --on-band: #f4f1e4;
  --band-line: #57712d;

  /* Two-layer shadows from the app spec (contact + ambient), warm-tinted. */
  --shadow-1: 0 1px 2px rgba(62, 52, 34, 0.07), 0 4px 10px rgba(62, 52, 34, 0.07);
  --shadow-2: 0 1px 3px rgba(62, 52, 34, 0.06), 0 10px 24px rgba(62, 52, 34, 0.09);
  --shadow-cta: 0 2px 5px rgba(62, 52, 34, 0.14), 0 10px 26px rgba(95, 122, 50, 0.26);
  --shadow-panel: 0 2px 4px rgba(62, 52, 34, 0.06), 0 14px 32px rgba(62, 52, 34, 0.1);
  --shadow-lift: 0 4px 12px rgba(20, 28, 10, 0.18), 0 26px 60px rgba(20, 28, 10, 0.3);

  --font-display: "Oswald", "Arial Narrow", sans-serif;
  --font-body: "Source Sans 3", "Helvetica Neue", Arial, sans-serif;

  /* App icon colors (light icon variant from the icon spec). */
  --appicon-bg: #5f7a32;
  --appicon-b1: #f7f1e3;
  --appicon-b2: #e0b13d;
  --appicon-b3: #d4593a;

  --max: 1160px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --canvas: #191919;
    --ink: #dedede;
    --sub: #9a9a9a;
    --muted: #8b8b8b;
    --olive: #8fae55;
    --olive-deep: #7f9c4a;
    --gold: #d9b352;
    --rust: #c4634e;
    --chip: #2e2e2e;
    --card: #232323;
    --line: #2c2c2c;
    --line-strong: #3a3a3a;
    --on-accent: #191919;
    --bezel: #000000;

    --band: #212b18;
    --on-band: #dde5cf;
    --band-line: #4c6330;

    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.24), 0 4px 10px rgba(0, 0, 0, 0.28);
    --shadow-2: 0 1px 3px rgba(0, 0, 0, 0.2), 0 10px 24px rgba(0, 0, 0, 0.32);
    --shadow-cta: 0 2px 5px rgba(0, 0, 0, 0.48), 0 10px 26px rgba(143, 174, 85, 0.3);
    --shadow-panel: 0 2px 4px rgba(0, 0, 0, 0.2), 0 14px 32px rgba(0, 0, 0, 0.36);
    --shadow-lift: 0 4px 12px rgba(0, 0, 0, 0.4), 0 26px 60px rgba(0, 0, 0, 0.55);

    --appicon-bg: #212121;
    --appicon-b1: #7d9c45;
    --appicon-b2: #c29a2e;
    --appicon-b3: #a8452a;
  }
}

:root[data-theme="dark"] {
  --canvas: #191919;
  --ink: #dedede;
  --sub: #9a9a9a;
  --muted: #8b8b8b;
  --olive: #8fae55;
  --olive-deep: #7f9c4a;
  --gold: #d9b352;
  --rust: #c4634e;
  --chip: #2e2e2e;
  --card: #232323;
  --line: #2c2c2c;
  --line-strong: #3a3a3a;
  --on-accent: #191919;
  --bezel: #000000;

  --band: #212b18;
  --on-band: #dde5cf;
  --band-line: #4c6330;

  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.24), 0 4px 10px rgba(0, 0, 0, 0.28);
  --shadow-2: 0 1px 3px rgba(0, 0, 0, 0.2), 0 10px 24px rgba(0, 0, 0, 0.32);
  --shadow-cta: 0 2px 5px rgba(0, 0, 0, 0.48), 0 10px 26px rgba(143, 174, 85, 0.3);
  --shadow-panel: 0 2px 4px rgba(0, 0, 0, 0.2), 0 14px 32px rgba(0, 0, 0, 0.36);
  --shadow-lift: 0 4px 12px rgba(0, 0, 0, 0.4), 0 26px 60px rgba(0, 0, 0, 0.55);

  --appicon-bg: #212121;
  --appicon-b1: #7d9c45;
  --appicon-b2: #c29a2e;
  --appicon-b3: #a8452a;
}

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

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

html {
  scroll-behavior: smooth;
}

/* Deliberately NOT overflow-x: clip on the root. `clip` does not create a
   scrollport, so a scroll-driven `view()` timeline anywhere on the page
   finds no scroll container and silently never runs. The sections that
   actually overhang (the tilted hero icon) clip themselves instead. */
body {
  overflow-x: clip;
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: var(--olive);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

:focus-visible {
  outline: 2px solid var(--olive);
  outline-offset: 3px;
  border-radius: 4px;
}

a,
button,
summary {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* Anchored sections stop below the sticky nav. */
[id] {
  scroll-margin-top: 88px;
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.08;
  margin: 0;
  text-wrap: balance;
}

p {
  margin: 0;
}

.wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 24px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  z-index: 20;
  background: var(--olive);
  color: var(--on-accent);
  padding: 10px 20px;
  border-radius: 999px;
}

.skip-link:focus-visible {
  left: 16px;
  top: 16px;
}

/* ---------- Nav ---------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 10;
  background: color-mix(in srgb, var(--canvas) 88%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}

.nav-inner {
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--ink);
}

.brand:hover {
  text-decoration: none;
}

.brand-name {
  font-family: var(--font-display);
  font-size: 22px;
  letter-spacing: 0.01em;
}

/* The three brand pills nudge on hover, one after the other. */
.brand-mark rect {
  transition: transform 0.3s var(--ease-out);
}

.brand:hover .brand-mark rect:nth-child(1) {
  transform: translateX(3px);
}

.brand:hover .brand-mark rect:nth-child(2) {
  transform: translateX(6px);
  transition-delay: 0.04s;
}

.brand:hover .brand-mark rect:nth-child(3) {
  transform: translateX(9px);
  transition-delay: 0.08s;
}

.nav-side {
  display: flex;
  align-items: center;
  gap: 18px;
}

.lang-link {
  display: inline-grid;
  place-items: center;
  min-width: 44px;
  min-height: 44px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--sub);
}

.lang-link:hover {
  color: var(--ink);
  text-decoration: none;
}

/* ---------- Theme toggle ---------- */

.theme-toggle {
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 999px;
  background: var(--chip);
  color: var(--ink);
  box-shadow: var(--shadow-1);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: transform 0.15s ease, background-color 0.35s ease;
}

.theme-toggle:hover {
  transform: translateY(-1px);
}

.theme-toggle:active {
  transform: translateY(1px);
}

/* The icon shows the theme the button switches TO, not the current one,
   so that it agrees with the aria-label the script keeps in sync. In the
   light theme you see a moon ("go dark"), in the dark theme a sun. */
.theme-toggle .icon-sun {
  display: none;
}

.theme-toggle .icon-moon {
  display: block;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .icon-sun {
    display: block;
  }

  :root:not([data-theme="light"]) .theme-toggle .icon-moon {
    display: none;
  }
}

:root[data-theme="dark"] .theme-toggle .icon-sun {
  display: block;
}

:root[data-theme="dark"] .theme-toggle .icon-moon {
  display: none;
}

/* The explicit light choice has to beat the system-preference block. */
:root[data-theme="light"] .theme-toggle .icon-sun {
  display: none;
}

:root[data-theme="light"] .theme-toggle .icon-moon {
  display: block;
}

/* Surfaces cross-fade when the toggle is used instead of snapping. */
body,
.nav,
.notify-panel,
.phone,
.doc-note {
  transition: background-color 0.35s ease, color 0.35s ease;
}

.hero-icon svg rect,
.brand-mark rect {
  transition: fill 0.35s ease;
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 46px;
  padding: 0 24px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.35s ease;
}

.btn:hover {
  text-decoration: none;
}

.btn:active {
  transform: translateY(1px);
}

.btn-primary {
  background: var(--olive);
  color: var(--on-accent);
  box-shadow: var(--shadow-cta);
}

.btn-primary:hover {
  background: var(--olive-deep);
}

.btn-lg {
  height: 54px;
  padding: 0 32px;
  font-size: 17px;
}

/* ---------- Hero ---------- */

.hero {
  padding: 64px 0 88px;
  overflow: hidden;
  background: radial-gradient(
    1100px 640px at 86% -8%,
    color-mix(in srgb, var(--olive) 14%, var(--canvas)),
    var(--canvas) 64%
  );
}

.hero-grid {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: 48px;
  align-items: center;
}

.hero h1 {
  font-size: clamp(3rem, 7.5vw, 5.4rem);
  letter-spacing: 0.005em;
}

.hero h1 .hw {
  display: inline-block;
}

/* The ink rule under the title: the app design's signature. */
.title-line {
  width: 100%;
  height: 2px;
  background: var(--ink);
  border: 0;
  margin: 22px 0 0;
}

.hero-sub {
  margin-top: 22px;
  font-size: 20px;
  color: var(--sub);
  max-width: 34em;
}

.hero-actions {
  margin-top: 34px;
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

/* Store placeholder in badge proportions, site design language. Apple's
   badge may only be shown for an app that can actually be downloaded. */
.store-soon {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  height: 54px;
  padding: 0 20px;
  border: 1.5px solid var(--line-strong);
  border-radius: 10px;
  color: var(--muted);
  line-height: 1.25;
}

.store-soon-label {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.store-soon-name {
  font-size: 17px;
  font-weight: 600;
  color: var(--sub);
}

/* Hero load-in: word by word, then line, sub, actions, phone. */
@media (prefers-reduced-motion: no-preference) {
  .hero .hw,
  .hero .title-line,
  .hero .hero-sub,
  .hero .hero-actions,
  .hero .phone {
    opacity: 0;
    animation: rise 0.8s var(--ease-out) forwards;
  }

  .hero .hw:nth-child(1) { animation-delay: 0.05s; }
  .hero .hw:nth-child(2) { animation-delay: 0.16s; }
  .hero .hw:nth-child(3) { animation-delay: 0.27s; }
  .hero .title-line { animation-delay: 0.4s; }
  .hero .hero-sub { animation-delay: 0.5s; }
  .hero .hero-actions { animation-delay: 0.62s; }
  .hero .phone { animation-delay: 0.35s; }

  .hero .hero-icon-inner {
    opacity: 0;
    animation: rise 0.9s var(--ease-out) forwards;
    animation-delay: 0.55s;
  }
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/* ---------- Phone frame ---------- */

.phone {
  background: var(--bezel);
  border-radius: 54px;
  padding: 11px;
  box-shadow: var(--shadow-panel);
  width: min(340px, 100%);
  margin: 0 auto;
  transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out);
}

.phone img {
  border-radius: 44px;
  width: 100%;
  height: auto;
}

/* Hero composition: the app icon sits tilted next to the phone. The phone
   is kept narrow and pushed right so all three icon bars stay clear of it;
   the offsets are percentages of this box so the composition survives every
   width. */
.hero-visual {
  position: relative;
  width: min(370px, 100%);
  margin: 0 auto;
}

.hero-visual .phone {
  position: relative;
  z-index: 1;
  width: 76%;
  margin-left: auto;
  margin-right: 0;
}

.hero-icon {
  position: absolute;
  z-index: 0;
  top: -30px;
  left: -12%;
  width: 45%;
  aspect-ratio: 1;
  transform: rotate(-11deg);
  transition: transform 0.5s var(--ease-out);
}

.hero-icon-inner {
  width: 100%;
  height: 100%;
  border-radius: 23%;
  overflow: hidden;
  box-shadow: var(--shadow-panel);
}

.hero-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

.hero-phone {
  transform: rotate(2deg);
}

.hero-visual:hover .hero-phone {
  transform: rotate(0.5deg) translateY(-4px);
}

.hero-visual:hover .hero-icon {
  transform: rotate(-8deg) translate(-5px, -3px);
}

/* ---------- Notify section ----------
   The one place on the page that asks for something, so it gets to look
   like an object rather than a stretch of text: a raised panel on a band
   that separates it from the hero. Still hairlines and two-layer shadows,
   still olive as the only action color. */

/* The 404 page is a single notify panel with no hero above it, so it
   carries no top border. */
.notify-standalone {
  border-top: 0;
}

.notify {
  padding: 96px 0 104px;
  background:
    radial-gradient(820px 420px at 50% 0%, color-mix(in srgb, #ffffff 9%, transparent), transparent 72%),
    var(--band);
}

.notify-panel {
  position: relative;
  max-width: 660px;
  margin: 0 auto;
  padding: 56px 56px 52px;
  border-radius: 28px;
  border: 1px solid var(--line);
  background: var(--canvas);
  box-shadow: var(--shadow-lift);
  text-align: center;
  overflow: hidden;
}

/* A hairline of olive across the top edge: the app uses the same accent
   to mark the surface you are meant to act on. */
.notify-panel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--olive) 22%,
    var(--gold) 50%,
    var(--rust) 78%,
    transparent
  );
  opacity: 0.85;
  transform-origin: 50% 50%;
}

.notify-icon {
  width: 62px;
  height: 62px;
  margin: 0 auto 26px;
  border-radius: 23%;
  overflow: hidden;
  box-shadow: var(--shadow-2);
}

.notify-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

.notify h2 {
  font-size: clamp(2.1rem, 4.4vw, 3rem);
}

.notify .title-line {
  max-width: 96px;
  margin: 18px auto 0;
  height: 3px;
  background: var(--olive);
}

.notify p {
  margin-top: 22px;
  font-size: 19px;
  color: var(--sub);
  max-width: 44ch;
  margin-left: auto;
  margin-right: auto;
}

.notify .btn {
  margin-top: 32px;
}

/* The address stays readable next to the button: a mailto link only works
   when the visitor's browser has a mail handler, so the plain text has to
   be there to select and copy. */
.notify-address {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 22px;
  padding: 9px 18px;
  border-radius: 999px;
  background: var(--chip);
  font-size: 15px;
  color: var(--muted);
}

.notify-address a {
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
  user-select: all;
}

.notify-address a:hover {
  color: var(--olive);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.notify-note {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  font-size: 14.5px;
  color: var(--muted);
  max-width: 46ch;
}

/* ---------- Notify entrance ----------
   Scroll-driven, so it needs no script and no IntersectionObserver. The
   whole block is wrapped twice over: in @supports, so browsers without
   `animation-timeline` render the finished state and never see an
   animation they cannot advance, and in prefers-reduced-motion, so the
   panel simply appears for anyone who asked for less movement.

   The end state is identical to the static design. Nothing here changes
   how the section looks once it has settled. */

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .notify-panel {
      animation: notify-rise linear both;
      animation-timeline: view();
      /* Starts as the panel enters, finishes well before it is centered,
         so it is already settled by the time it is being read. */
      animation-range: entry 8% cover 34%;
    }

    /* The accent hairline draws itself outward from the middle. */
    .notify-panel::before {
      animation: notify-rule linear both;
      animation-timeline: view();
      animation-range: entry 14% cover 38%;
    }

    /* Contents follow the panel in reading order, each one a little
       later than the last. Six steps across a short range reads as one
       movement rather than six separate ones. */
    .notify-icon,
    .notify h2,
    .notify .title-line,
    .notify p:not(.notify-note),
    .notify .btn,
    .notify-address,
    .notify-note {
      animation: notify-item linear both;
      animation-timeline: view();
    }

    .notify-icon                  { animation-range: entry 12% cover 32%; }
    .notify h2                    { animation-range: entry 15% cover 35%; }
    .notify .title-line           { animation-range: entry 18% cover 37%; }
    .notify p:not(.notify-note)   { animation-range: entry 20% cover 39%; }
    .notify .btn                  { animation-range: entry 23% cover 42%; }
    .notify-address               { animation-range: entry 26% cover 44%; }
    .notify-note                  { animation-range: entry 28% cover 46%; }
  }
}

@keyframes notify-rise {
  from {
    opacity: 0;
    transform: translateY(34px) scale(0.985);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes notify-rule {
  from {
    transform: scaleX(0.15);
    opacity: 0;
  }

  to {
    transform: none;
    opacity: 0.85;
  }
}

@keyframes notify-item {
  from {
    opacity: 0;
    transform: translateY(14px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/* ---------- Footer ---------- */

.footer {
  border-top: 1px solid var(--line);
  background: var(--canvas);
  padding: 40px 0 56px;
  color: var(--muted);
  font-size: 15px;
}

.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.footer a {
  color: var(--sub);
}

/* The wordmark sits smaller in the footer than in the nav. This used to be
   an inline style attribute, which the Content-Security-Policy blocks. */
.footer .brand-name {
  font-size: 17px;
}

/* ---------- Document pages (imprint, privacy) ----------
   Same tokens, different rhythm: a sticky table of contents next to a
   single measured column, hairlines instead of cards. */

.doc-head {
  padding: 56px 0 0;
}

.doc-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.doc-kicker::before {
  content: "";
  width: 24px;
  height: 2px;
  background: var(--olive);
}

.doc-head h1 {
  margin-top: 18px;
  font-size: clamp(2.4rem, 5.4vw, 3.6rem);
}

.doc-meta {
  margin-top: 20px;
  font-size: 15px;
  color: var(--muted);
}

.doc-lead {
  margin-top: 20px;
  max-width: 46em;
  font-size: 19px;
  color: var(--sub);
}

.doc-layout {
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: 72px;
  align-items: start;
  /* keeps the horizontal padding .wrap sets, adds the vertical rhythm */
  padding: 56px 24px 104px;
}

/* Grid items default to min-width: auto, so the widest child sets the
   floor for the whole track. The recipients table has a 560px min-width,
   which pushed both columns past the viewport on phones and left the
   table of contents running off the right edge. Allowing the items to
   shrink is what lets .doc-table-wrap actually scroll instead. */
.doc-layout > * {
  min-width: 0;
}

.doc-toc {
  position: sticky;
  top: 96px;
}

.doc-toc strong {
  display: block;
  margin-bottom: 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.doc-toc ol {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: toc;
}

.doc-toc a {
  display: flex;
  gap: 12px;
  padding: 8px 0;
  border-top: 1px solid var(--line);
  color: var(--sub);
  font-size: 15px;
  line-height: 1.3;
}

.doc-toc li {
  counter-increment: toc;
}

.doc-toc a::before {
  content: counter(toc, decimal-leading-zero);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.doc-toc a:hover {
  color: var(--ink);
  text-decoration: none;
}

.doc-body h2 {
  margin-top: 56px;
  font-size: 28px;
}

.doc-body h3 {
  margin-top: 26px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.4;
}

.doc-body .title-line {
  margin-top: 14px;
  max-width: 120px;
  background: var(--olive);
  height: 3px;
}

.doc-body p {
  margin-top: 14px;
  max-width: 66ch;
  color: var(--sub);
  overflow-wrap: break-word;
}

.doc-body a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.doc-list {
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
  max-width: 66ch;
  color: var(--sub);
  overflow-wrap: break-word;
}

.doc-list li {
  position: relative;
  padding: 9px 0 9px 26px;
  border-top: 1px solid var(--line);
}

.doc-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 19px;
  width: 12px;
  height: 2px;
  border-radius: 2px;
  background: var(--olive);
}

.doc-note {
  margin-top: 22px;
  padding: 20px 24px;
  border-radius: 14px;
  background: var(--chip);
  color: var(--sub);
  max-width: 66ch;
  overflow-wrap: break-word;
}

.doc-note p {
  margin-top: 0;
}

.doc-note p + p {
  margin-top: 12px;
}

.doc-table-wrap {
  margin-top: 22px;
  overflow-x: auto;
  /* Hairline on the right while there is more table to scroll to. */
  background:
    linear-gradient(to right, var(--canvas) 30%, transparent) left / 24px 100% no-repeat,
    linear-gradient(to left, var(--canvas) 30%, transparent) right / 24px 100% no-repeat;
  background-attachment: local, local;
}

.doc-table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: 15px;
}

.doc-table th {
  padding: 0 16px 10px 0;
  border-bottom: 2px solid var(--line-strong);
  text-align: left;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.doc-table td {
  padding: 13px 16px 13px 0;
  border-top: 1px solid var(--line);
  color: var(--sub);
  vertical-align: top;
}

.doc-table td:first-child {
  color: var(--ink);
  font-weight: 600;
}

/* Everything still to be filled in before this page goes live. */
.doc-fill {
  border-bottom: 1px dashed var(--line-strong);
  color: var(--muted);
  font-style: italic;
}

.doc-updated {
  margin-top: 56px;
  padding-top: 20px;
  border-top: 2px solid var(--line-strong);
  font-size: 15px;
  color: var(--muted);
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .btn,
  .phone,
  .hero-icon,
  .brand-mark rect {
    transition: none;
  }

  .hero-visual:hover .hero-phone,
  .hero-visual:hover .hero-icon {
    transform: none;
  }

  .hero-visual:hover .hero-phone {
    transform: rotate(2deg);
  }

  .hero-visual:hover .hero-icon {
    transform: rotate(-11deg);
  }
}

/* ---------- Responsive ---------- */

@media (max-width: 960px) {
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .hero {
    padding: 40px 0 64px;
  }

  .hero-phone {
    transform: none;
  }

  .hero-visual .phone {
    width: 74%;
  }

  .hero-icon {
    width: 42%;
    top: -24px;
    left: -7%;
  }

  .doc-layout {
    grid-template-columns: 1fr;
    gap: 40px;
    padding-top: 40px;
  }

  .doc-toc {
    position: static;
  }
}

@media (max-width: 760px) {
  .nav-inner {
    gap: 12px;
  }

  /* Three short columns fit a phone once the desktop floor is lifted, so
     the table reads without sideways scrolling. */
  .doc-table {
    min-width: 0;
    font-size: 14px;
  }

  .doc-table th,
  .doc-table td {
    padding-right: 10px;
  }

  .doc-note {
    padding: 18px 18px;
  }

  .notify {
    padding: 64px 0 72px;
  }

  .notify-panel {
    padding: 40px 26px 36px;
    border-radius: 22px;
  }

  .notify-icon {
    width: 54px;
    height: 54px;
    margin-bottom: 22px;
  }

  .hero-actions {
    gap: 14px;
  }
}

/* The hero CTA is one scroll-line away, so on small phones the nav keeps
   only the brand and the language switch. */
@media (max-width: 560px) {
  .nav .btn {
    display: none;
  }

  /* At this width the icon's negative offset would push it past the
     section edge and clip its left corner. */
  .hero-icon {
    left: 0;
    width: 38%;
    top: -18px;
  }

  .hero-sub {
    font-size: 18px;
  }
}