/* MyHeavyPlantMate website: one stylesheet, no external resources.
   Palette: docs/product-spec.md "Visual style (charcoal / yellow, approved 2026-10-08)", the same tokens as the app
   (app/src/theme/tokens.js). */

/* ---------- Tokens ---------- */
:root {
  color-scheme: light dark;

  /* Canvas, cards, text (cool-neutral greys) */
  --bg: #eef0f3;
  --bg-alt: #ffffff;
  --surface: #ffffff;
  --surface-muted: #f2f4f7;
  --text: #15181c;
  --muted: #596170;
  --border: #d3d7dd;

  /* Brand amber. --primary (a deep amber, 3:1) for icons, borders and markers; --primary-strong for amber text
     (links, labels, 5.9:1 on white). The mark's yellow #f5b400 itself is kept for the chrome edge and the hero. */
  --primary: #b07c00;
  --primary-strong: #8a5a00;
  --primary-soft: #fff4d6;
  --brand-yellow: #f5b400;
  --link: var(--primary-strong);
  --link-hover: #15181c;

  /* Main action (the bucket orange): label is near-black, because white on this orange is only 3:1. */
  --action: #f26b1d;
  --action-hover: #d95a10;
  --on-action: #15181c;

  --focus: #b07c00;
  --focus-on-hero: #ffd166;
  --shadow: 0 1px 2px rgb(21 24 28 / 6%), 0 8px 24px rgb(21 24 28 / 10%);

  /* Hero band (charcoal, the mark's tile family) */
  --hero: #1c1f24;
  --hero-bg: var(--hero);
  --hero-text: #ffffff;
  --hero-muted: #d6dae0;
  /* Rubble terrain under the digger (brand/README.md): a back ridge, a brown rubble band, lighter stones, spoil heaps */
  --terrain-back: #3a3f47;
  --terrain-mid: #4a4038;
  --terrain-stone: #6b5e4f;
  --terrain-heap: #5a4e42;

  /* Status chips (the due-soon amber: paler than the brand yellow, always in its chip) */
  --amber-soft: #fff1d6;
  --amber-ink: #8a5a00;

  /* Section colours (tinted square + strong icon), as in the app */
  --sec-maintenance-soft: #fff3d1;
  --sec-maintenance-icon: #946a00;
  --sec-shifts-soft: #dff5f7;
  --sec-shifts-icon: #0b7f8a;
  --sec-checklists-soft: #e0f6e8;
  --sec-checklists-icon: #0d8040;
  --sec-documents-soft: #f0e9fe;
  --sec-documents-icon: #7c3aed;
  --sec-engines-soft: #e4eaf3;
  --sec-engines-icon: #3b5b8a;
  --sec-service-soft: #f6ecdf;
  --sec-service-icon: #7a4a10;

  --icon-bg: var(--primary-soft);
  --icon-fg: var(--primary-strong);

  --radius: 14px;
  --radius-sm: 8px;
  --wrap: 72rem;
  --gutter: clamp(1rem, 4vw, 2rem);

  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Deep charcoal canvas, lighter cards */
    --bg: #15181c;
    --bg-alt: #1b1f24;
    --surface: #22262c;
    --surface-muted: #1b1f24;
    --text: #f4f5f7;
    --muted: #a3abb7;
    --border: #3a4048;

    --primary: #f5b400;
    --primary-strong: #ffcb45;
    --primary-soft: #3b2f0f;
    --link-hover: #f4f5f7;

    --action: #ff7a2e;
    --action-hover: #f26b1d;

    --focus: #ffcb45;
    --shadow: 0 1px 2px rgb(0 0 0 / 35%), 0 8px 24px rgb(0 0 0 / 28%);

    --hero: #262a31;
    --hero-muted: #d6dae0;
    --terrain-back: #3f454e;
    --terrain-mid: #4a4038;
    --terrain-stone: #6b5e4f;
    --terrain-heap: #5a4e42;

    --amber-soft: #4a3a12;
    --amber-ink: #ffd166;

    --sec-maintenance-soft: #46391a;
    --sec-maintenance-icon: #ffcb45;
    --sec-shifts-soft: #123f4b;
    --sec-shifts-icon: #4fd6e2;
    --sec-checklists-soft: #143f2e;
    --sec-checklists-icon: #5cd68e;
    --sec-documents-soft: #33275e;
    --sec-documents-icon: #c1a6ff;
    --sec-engines-soft: #253a57;
    --sec-engines-icon: #9db9e0;
    --sec-service-soft: #3f2e1c;
    --sec-service-icon: #e3ae6c;
  }
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 1rem;
}

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.65;
  overflow-wrap: break-word;
}

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

h1,
h2,
h3 {
  line-height: 1.2;
  letter-spacing: -0.015em;
  margin: 0 0 0.6em;
}

h1 {
  font-size: clamp(2rem, 5.5vw, 3.25rem);
}

h2 {
  font-size: clamp(1.5rem, 3.5vw, 2.1rem);
}

h3 {
  font-size: 1.15rem;
}

p,
ul,
ol {
  margin: 0 0 1em;
}

a {
  color: var(--link);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

a:hover {
  color: var(--link-hover);
  text-decoration-thickness: 2px;
}

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

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

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Skip link ---------- */
.skip-link {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 100;
  padding: 0.6rem 1rem;
  background: var(--action);
  color: var(--on-action);
  font-weight: 700;
  border-radius: var(--radius-sm);
  text-decoration: none;
}

.skip-link:focus {
  top: 1rem;
  color: var(--on-action);
}

/* ---------- Header ---------- */
.site-header {
  background: var(--surface);
  color: var(--text);
  border-bottom: 1px solid var(--border);
}

.site-header .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  padding-block: 0.9rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--text);
  font-weight: 750;
  font-size: 1.2rem;
  letter-spacing: -0.01em;
  text-decoration: none;
}

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

.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav a {
  color: var(--text);
  text-decoration: none;
  font-size: 0.975rem;
  font-weight: 550;
  padding: 0.25rem 0;
}

.site-nav a:hover,
.site-nav a[aria-current="page"] {
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: 0.3em;
}

.hero :focus-visible,
.page-head :focus-visible,
.get-app :focus-visible {
  outline-color: var(--focus-on-hero);
}

/* ---------- Hero ---------- */
.hero {
  background: var(--hero-bg);
  color: var(--hero-text);
  position: relative;
  overflow: hidden;
}

.hero-inner {
  display: grid;
  gap: 2.5rem;
  align-items: center;
  padding-block: clamp(2.5rem, 7vw, 5rem) clamp(7rem, 15vw, 11rem);
}

@media (min-width: 52rem) {
  .hero-inner {
    grid-template-columns: 1.15fr 0.85fr;
  }
}

.eyebrow {
  display: inline-block;
  margin-bottom: 1rem;
  padding: 0.25rem 0.75rem;
  border: 1px solid rgb(245 180 0 / 55%);
  border-radius: 999px;
  background: rgb(245 180 0 / 10%);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--hero-text);
  letter-spacing: 0.02em;
}

.hero h1 {
  color: var(--hero-text);
  max-width: 18ch;
}

.hero .lede {
  font-size: clamp(1.1rem, 2.3vw, 1.3rem);
  color: var(--hero-muted);
  max-width: 36rem;
}

.hero .lede strong {
  color: var(--hero-text);
  font-weight: 650;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.75rem;
}

.hero-note {
  margin-top: 1rem;
  font-size: 0.9rem;
  color: var(--hero-muted);
}

/* Machines on site along the bottom of the hero: distant machines, the back ridge of rubble, the logo's digger, the
   rubble band with its stones and spoil heaps over its tracks, then the front ground in the page colour. */
.hero-scene {
  --scene-h: clamp(84px, 12vw, 160px);
  --main-w: clamp(96px, 10vw, 128px);
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--scene-h);
  pointer-events: none;
  overflow-x: clip;
}

.hero-terrain {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.hero-terrain .terrain-back {
  fill: var(--terrain-back);
}

.hero-terrain .terrain-mid {
  fill: var(--terrain-mid);
}

.hero-terrain .terrain-heap {
  fill: var(--terrain-heap);
}

.hero-terrain .terrain-stone {
  fill: var(--terrain-stone);
}

/* A lane is a full-width strip at the machine's ground line (--waterline: fraction of the scene height). The main
   machine's tracks sit just below the rubble band's top (its line runs 40-48/120 of the scene up), so the rubble
   covers their bottom. Static (as with reduced motion) the main machine sits at the left of the content column. */
.machine-lane {
  position: absolute;
  left: 0;
  width: 100%;
  bottom: calc(var(--scene-h) * var(--waterline) - var(--machine-w) * 0.03);
}

.machine-main {
  --machine-w: var(--main-w);
  --waterline: 0.3;
}

.machine-bob {
  width: var(--machine-w);
}

.machine-main .machine-bob {
  margin-left: max(var(--gutter), calc((100% - var(--wrap)) / 2 + var(--gutter)));
}

/* The logo's digger (symbol #hero-excavator): every shape carries its own fill from brand/logo-mark.svg */
.hero-machine {
  display: block;
  width: 100%;
  height: auto;
}

/* Distant machines: the same drawing, smaller, paler and nearer the horizon, behind the back ridge.
   Only shown when animating. */
.machine-far {
  display: none;
}

.far-1 {
  --machine-w: calc(var(--main-w) * 0.5);
  --waterline: 0.52;
  opacity: 0.58;
}

.far-3 {
  --machine-w: calc(var(--main-w) * 0.43);
  --waterline: 0.545;
  opacity: 0.5;
}

.far-2 {
  --machine-w: calc(var(--main-w) * 0.36);
  --waterline: 0.565;
  opacity: 0.42;
}

.far-rtl .hero-machine {
  transform: scaleX(-1);
}

/* Passing machines. Each lane is the scene width plus one machine (and a little room), starting that far left of
   the scene: translateX(0) has the machine just off-screen left, translateX(100%) just off-screen right, so every
   loop restarts out of sight. The excavator tracks across slowly with a slight judder over the ground (no roll: it
   is on tracks, not afloat).
   The distant machines share a 60 s cycle (a 28-38 s pass, then off-screen), staggered so one or two are out at a time. */
@media (prefers-reduced-motion: no-preference) {
  .machine-lane {
    left: calc(-1 * var(--machine-w) - 8px);
    width: calc(100% + var(--machine-w) + 16px);
  }

  .machine-main {
    animation: hero-sail 26s linear -8s infinite;
  }

  .machine-main .machine-bob {
    margin-left: 0;
    animation: hero-bob 1.1s ease-in-out infinite alternate;
  }

  .machine-far {
    display: block;
  }

  .machine-far .machine-bob {
    animation: hero-bob 4.4s ease-in-out -2s infinite alternate;
  }

  .far-1 {
    animation: hero-far-1 60s linear -48s infinite;
  }

  .far-2 {
    animation: hero-far-2 60s linear -28s infinite;
  }

  .far-3 {
    animation: hero-far-3 60s linear -8s infinite;
  }
}

/* Phones: the main machine and one distant machine */
@media (max-width: 40rem) {
  .machine-far.far-1,
  .machine-far.far-2 {
    display: none;
  }
}

@keyframes hero-sail {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(100%);
  }
}

@keyframes hero-bob {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(calc(var(--machine-w) * -0.006));
  }
}

/* Left to right: a 28 s pass, then 32 s off-screen right */
@keyframes hero-far-1 {
  0% {
    transform: translateX(0);
  }
  46.667%,
  100% {
    transform: translateX(100%);
  }
}

/* Right to left: a 38 s pass, then off-screen left */
@keyframes hero-far-2 {
  0% {
    transform: translateX(100%);
  }
  63.333%,
  100% {
    transform: translateX(0);
  }
}

/* Right to left: a 32 s pass, then off-screen left */
@keyframes hero-far-3 {
  0% {
    transform: translateX(100%);
  }
  53.333%,
  100% {
    transform: translateX(0);
  }
}

/* The front ground, in the page colour: the uneven line where the hero meets the page */
.hero-ground {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  width: 100%;
  height: clamp(28px, 5vw, 60px);
  display: block;
  color: var(--bg);
}

/* Hero screenshot in a phone frame */
.device {
  justify-self: center;
  width: min(100%, 17rem);
  margin: 0;
  position: relative;
  z-index: 1;
}

.device .phone {
  box-shadow: 0 24px 48px rgb(5 38 84 / 38%);
}

.device figcaption {
  margin-top: 0.9rem;
  text-align: center;
  font-size: 0.85rem;
  color: var(--hero-muted);
}

/* Phone frame: dark bezel around a real app screenshot (the screenshots are the app's dark theme) */
.phone {
  padding: 0.5rem;
  border-radius: 2.25rem;
  background: #0f1114;
  border: 1px solid rgb(245 180 0 / 35%);
  box-shadow: 0 14px 32px rgb(0 0 0 / 28%);
}

.phone picture,
.phone img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 1.8rem;
}

.phone img {
  aspect-ratio: 540 / 1070;
  background: #15181c;
}

/* Placeholder screen until the plant screenshots are captured: the screenshot's shape and dark theme, a label in the
   middle. Decorative (aria-hidden); the figcaption carries the meaning. */
.screen-soon {
  display: grid;
  place-items: center;
  aspect-ratio: 540 / 1070;
  width: 100%;
  border-radius: 1.8rem;
  background: linear-gradient(180deg, #22262c, #15181c);
  color: #a3abb7;
  font-size: 0.9rem;
  font-weight: 600;
  text-align: center;
  padding: 1rem;
}

.screen-soon span {
  padding: 0.4rem 0.8rem;
  border: 1px dashed rgb(245 180 0 / 45%);
  border-radius: 999px;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 3rem;
  padding: 0.7rem 1.3rem;
  border-radius: 999px;
  border: 2px solid transparent;
  font-weight: 650;
  font-size: 1rem;
  line-height: 1.2;
  text-decoration: none;
  transition: transform 0.15s ease, background-color 0.15s ease;
}

.btn:hover {
  text-decoration: none;
  transform: translateY(-1px);
}

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

.btn-primary {
  background: var(--action);
  color: var(--on-action);
  box-shadow: 0 6px 16px rgb(242 107 29 / 28%);
}

.btn-primary:hover {
  background: var(--action-hover);
  color: var(--on-action);
}

/* On the hero: outlined in the brand yellow */
.btn-ghost {
  border-color: rgb(245 180 0 / 85%);
  color: #fff;
}

.btn-ghost:hover {
  background: rgb(245 180 0 / 14%);
  color: #fff;
}

/* ---------- Sections ---------- */
.section {
  padding-block: clamp(3rem, 8vw, 5.5rem);
}

.section-alt {
  background: var(--bg-alt);
  border-block: 1px solid var(--border);
}

.section-head {
  max-width: 44rem;
  margin-bottom: 2.5rem;
}

.section-head p {
  color: var(--muted);
  font-size: 1.1rem;
}

.kicker {
  display: block;
  margin-bottom: 0.4rem;
  color: var(--primary-strong);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ---------- Features ---------- */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem;
  box-shadow: var(--shadow);
}

.card p:last-child {
  margin-bottom: 0;
}

.card p {
  color: var(--muted);
}

.icon {
  display: inline-grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  margin-bottom: 1rem;
  border-radius: 12px;
  background: var(--icon-bg);
  color: var(--icon-fg);
}

.icon svg {
  width: 1.6rem;
  height: 1.6rem;
}

/* Section colours, as on the app's tiles */
.icon-maintenance {
  --icon-bg: var(--sec-maintenance-soft);
  --icon-fg: var(--sec-maintenance-icon);
}

.icon-shifts {
  --icon-bg: var(--sec-shifts-soft);
  --icon-fg: var(--sec-shifts-icon);
}

.icon-checklists {
  --icon-bg: var(--sec-checklists-soft);
  --icon-fg: var(--sec-checklists-icon);
}

.icon-documents {
  --icon-bg: var(--sec-documents-soft);
  --icon-fg: var(--sec-documents-icon);
}

.icon-engines {
  --icon-bg: var(--sec-engines-soft);
  --icon-fg: var(--sec-engines-icon);
}

.icon-service {
  --icon-bg: var(--sec-service-soft);
  --icon-fg: var(--sec-service-icon);
}

/* ---------- Screenshots ---------- */
/* Phones: a swipeable strip that snaps to each screen. Wide screens: a centred grid, four across. */
.screens-scroller {
  margin-inline: calc(-1 * var(--gutter));
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  scrollbar-width: thin;
  border-radius: 0;
}

.screens-scroller:focus-visible {
  outline-offset: -3px;
}

.screens {
  display: flex;
  gap: 1.25rem;
  width: max-content;
  margin: 0;
  padding: 0.5rem var(--gutter) 1.5rem;
  list-style: none;
}

.screens > li {
  flex: none;
  width: min(62vw, 15rem);
  scroll-snap-align: start;
}

.screen {
  margin: 0;
}

.screen figcaption {
  margin-top: 1rem;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.5;
}

.screen figcaption strong {
  display: block;
  margin-bottom: 0.15rem;
  color: var(--text);
  font-size: 1.05rem;
}

@media (prefers-color-scheme: dark) {
  .phone {
    border-color: rgb(125 187 255 / 30%);
    box-shadow: 0 14px 32px rgb(4 12 26 / 45%);
  }
}

@media (min-width: 60rem) {
  .screens-scroller {
    margin-inline: 0;
    overflow: visible;
  }

  .screens {
    width: auto;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2.5rem 2rem;
    padding: 0;
  }

  .screens > li {
    width: calc((100% - 3 * 2rem) / 4);
    max-width: 15rem;
  }
}

/* ---------- Core loop steps ---------- */
.steps {
  counter-reset: step;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.steps li {
  counter-increment: step;
  position: relative;
  padding: 1.25rem 1.25rem 1.25rem 4rem;
  border-left: 3px solid var(--primary);
  background: var(--surface);
  box-shadow: var(--shadow);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.steps li::before {
  content: counter(step);
  position: absolute;
  left: 1rem;
  top: 1.1rem;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--brand-yellow);
  color: #1c1f24;
  font-weight: 700;
  font-size: 0.95rem;
}

.steps strong {
  display: block;
}

.steps span {
  color: var(--muted);
}

/* ---------- Get the app ---------- */
.get-app {
  background: var(--hero-bg);
  color: var(--hero-text);
  border-radius: calc(var(--radius) * 1.5);
  padding: clamp(1.75rem, 5vw, 3rem);
  display: grid;
  gap: 1.5rem;
  box-shadow: var(--shadow);
}

.get-app h2 {
  color: var(--hero-text);
}

.get-app p {
  color: var(--hero-muted);
  max-width: 40rem;
}

.store-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.store-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 13.5rem;
  min-height: 3.5rem;
  padding: 0.6rem 1.1rem;
  border-radius: 12px;
  background: #0f1114;
  border: 1px solid rgb(245 180 0 / 55%);
  color: #fff;
  text-decoration: none;
  line-height: 1.2;
}

.store-btn:hover {
  color: #fff;
  background: #000000;
}

.store-btn svg {
  width: 1.7rem;
  height: 1.7rem;
  flex: none;
}

.store-btn .store-text {
  display: flex;
  flex-direction: column;
}

.store-btn small {
  font-size: 0.75rem;
  color: #d6dae0;
}

.store-btn b {
  font-size: 1.1rem;
  font-weight: 650;
}

.store-btn.web {
  background: var(--action);
  color: var(--on-action);
  border-color: transparent;
}

.store-btn.web small {
  color: var(--on-action);
}

.store-btn.web:hover {
  background: var(--action-hover);
  color: var(--on-action);
}

/* ---------- Coming soon ---------- */
/* Holding page (coming-soon.html), where /app-store and /google-play lead until the store listings are live.
   The hero band with its machines and rubble terrain, everything centred.
   The header and the hero together fill at least the screen, so the footer starts below it. The content sits in
   the middle of the charcoal above the terrain scene, with the same clear space above the pill as between the button and
   the top of the scene; on a short screen the page just flows. */
.coming-soon-screen {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
}

.coming-soon-screen main,
.coming-soon {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
}

.coming-soon {
  /* The terrain scene is the home page hero's, at the same size (--scene-h of .hero-scene) */
  --soon-scene-h: clamp(84px, 12vw, 160px);
  /* The least clear blue above the pill and between the button and the scene: 64px on phones, up to 96px on wide
     screens. The 8vh term keeps it at 64px on a wide but short screen (a laptop), so the whole scene still fits
     on the first screen there; on a taller screen the centring adds more than this anyway. */
  --soon-gap: clamp(4rem, min(7.5vw, 8vh), 6rem);
}

.coming-soon .hero-scene {
  --scene-h: var(--soon-scene-h);
}

.coming-soon-inner {
  position: relative;
  z-index: 1;
  margin-block: auto;
  text-align: center;
  padding-block: var(--soon-gap) calc(var(--soon-scene-h) + var(--soon-gap));
}

.coming-soon h1,
.coming-soon .lede {
  margin-inline: auto;
}

.coming-soon h1 {
  max-width: none;
  text-wrap: balance;
}

.coming-soon .store-buttons {
  justify-content: center;
  margin-top: 1.75rem;
}

/* Store markers: the look of the store buttons, but plain text, not links */
.store-soon {
  text-align: left;
  cursor: default;
}

.store-soon:hover {
  background: #0f1114;
}

.coming-soon .hero-note {
  margin: 1.25rem 0 0;
  font-size: 1rem;
}

/* "Email us" line: a link that reads on the blue (white, underlined), as the hero's other text does */
.coming-soon-notify {
  margin: 0.75rem 0 0;
  color: var(--hero-muted);
  text-wrap: balance;
}

.coming-soon-notify a,
.coming-soon-notify a:hover {
  color: var(--hero-text);
  font-weight: 650;
}

.coming-soon-back {
  margin: 1.5rem 0 0;
}

/* ---------- FAQ ---------- */
.faq {
  max-width: 48rem;
}

.faq details {
  border-bottom: 1px solid var(--border);
}

.faq details:first-of-type {
  border-top: 1px solid var(--border);
}

.faq summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 0.25rem;
  font-weight: 650;
  font-size: 1.075rem;
}

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

.faq summary::after {
  content: "+";
  flex: none;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--primary-strong);
}

.faq details[open] summary::after {
  content: "\2212";
}

.faq .answer {
  padding: 0 0.25rem 1.1rem;
  color: var(--muted);
}

.faq .answer p:last-child {
  margin-bottom: 0;
}

/* ---------- Contact ---------- */
.contact-card {
  display: grid;
  gap: 1.5rem;
  align-items: center;
}

@media (min-width: 48rem) {
  .contact-card {
    grid-template-columns: 1fr auto;
  }
}

.contact-card p {
  color: var(--muted);
}

.contact-email {
  font-size: clamp(1.1rem, 3vw, 1.35rem);
  font-weight: 650;
  word-break: break-word;
}

.btn-outline {
  border-color: var(--link);
  color: var(--link);
}

.btn-outline:hover {
  background: var(--primary-soft);
  color: var(--link-hover);
}

/* ---------- Legal / content pages ---------- */
.page-head {
  background: var(--hero-bg);
  color: var(--hero-text);
  padding-block: clamp(2.25rem, 6vw, 3.5rem);
}

.page-head h1 {
  color: var(--hero-text);
  margin-bottom: 0.3em;
  font-size: clamp(1.9rem, 5vw, 2.75rem);
}

.page-head p {
  color: var(--hero-muted);
  margin: 0;
}

.prose {
  max-width: 46rem;
  padding-block: clamp(2rem, 6vw, 3.5rem) clamp(3rem, 8vw, 5rem);
}

.prose h2 {
  font-size: clamp(1.3rem, 3vw, 1.6rem);
  margin-top: 2.5rem;
  padding-top: 0.5rem;
}

.prose h3 {
  margin-top: 1.75rem;
}

.prose ul,
.prose ol {
  padding-left: 1.3rem;
}

.prose li {
  margin-bottom: 0.4rem;
}

.prose li::marker {
  color: var(--primary);
}

.summary-box {
  margin: 0 0 2rem;
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--border);
  border-left: 4px solid var(--primary);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--surface);
}

.summary-box h2 {
  margin-top: 0;
  padding-top: 0;
  font-size: 1.15rem;
}

.summary-box ul {
  margin-bottom: 0;
}

.toc {
  margin: 0 0 2rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.toc h2 {
  margin: 0 0 0.5rem;
  padding: 0;
  font-size: 1rem;
}

.toc ol {
  margin: 0;
  columns: 2 16rem;
  column-gap: 2rem;
}

.toc li {
  break-inside: avoid;
}

.table-wrap {
  overflow-x: auto;
  margin: 0 0 1.25rem;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.975rem;
}

th,
td {
  text-align: left;
  vertical-align: top;
  padding: 0.65rem 0.75rem;
  border-bottom: 1px solid var(--border);
}

th {
  background: var(--surface-muted);
  font-weight: 650;
}

.callout {
  margin: 1.5rem 0;
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.callout h2,
.callout h3 {
  margin-top: 0;
  padding-top: 0;
}

.callout p:last-child {
  margin-bottom: 0;
}

.option-grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  margin: 1.5rem 0 2rem;
}

.option-grid .callout {
  margin: 0;
}

.path {
  display: inline-block;
  padding: 0.05rem 0.45rem;
  border-radius: 6px;
  background: var(--primary-soft);
  color: var(--text);
  font-weight: 600;
  white-space: nowrap;
}

/* ---------- 404 ---------- */
.not-found {
  text-align: center;
  padding-block: clamp(3rem, 10vw, 6rem);
}

.not-found svg {
  width: min(100%, 18rem);
  height: auto;
  margin-bottom: 1.5rem;
  color: var(--primary);
}

/* The rubble under the parked digger (the digger's own fills are in the markup, from brand/logo-mark.svg) */
.not-found .ground {
  fill: var(--terrain-mid);
}

.not-found .heap {
  fill: var(--terrain-heap);
}

.not-found .stone {
  fill: var(--terrain-stone);
}

.not-found p {
  color: var(--muted);
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--surface);
  border-top: 1px solid var(--border);
  color: var(--muted);
  padding-block: 2.5rem 2rem;
  font-size: 0.95rem;
}

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

.site-footer a:hover {
  color: var(--link);
}

.footer-top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 1rem 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--border);
}

.footer-top .brand {
  font-size: 1.05rem;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-legal {
  padding-top: 1.25rem;
  font-size: 0.85rem;
  color: var(--muted);
}

.footer-legal p {
  margin-bottom: 0.4rem;
}

/* The copyright line is two parts ("© 2026 Purple Loop Limited," and the rest): one line where it fits, and on a
   narrow screen it breaks between the parts instead of mid-phrase. */
.footer-legal span {
  display: inline-block;
}

/* Wordmark: "Mate" in the brand orange (see /brand) */
.brand .mate { color: #F26B1D; }