/*
 * Grovance marketing site.
 * Layout: mobile-first single column; on wide screens the hero splits copy | live demo,
 * and the five levels sit side by side as a rising "level meter" row.
 */
:root {
  /* colour: from the official Grovance logo (brand/grovance-logo-transparent.png) - glossy black, polished chrome, steel-silver accent ("sun") */
  --paper: #e7e9ec;   /* clear matte silver instead of white (Luis, 2026-10-26) */
  /* fine grain on the page background, so it reads as a matte finish (both themes) */
  --matte: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .42 0 0 0 0 .44 0 0 0 0 .48 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --surface: #ffffff;
  --bar: rgb(212 216 222 / 84%);   /* top and bottom bars: frosted matte silver, not white (Luis 2026-10-26) */
  --bar-solid: #d4d8de;   /* the same silver, solid: behind the iPhone status bar and home bar */
  --ink: #050506;     /* darker letters (Luis, 2026-10-26) */
  --muted: #33373e;
  --line: #d8dbe0;
  --brand: #1b1c1f;
  --brand-strong: #000000;
  --on-brand: #ffffff;
  --brand-soft: #e8eaed;
  --sun: #7c838d;
  --ok: #1d7a46;
  --bad: #b4321f;
  --shadow: 0 1px 2px rgb(18 19 22 / 6%), 0 0.625rem 1.875rem rgb(18 19 22 / 9%);
  /* chrome finishes, as in the logo: a glossy black panel, polished silver, chrome letters */
  --btn-face: linear-gradient(180deg, #4b4e54 0%, #222327 46%, #0b0b0d 54%, #2a2c30 100%);
  --btn-face-hover: linear-gradient(180deg, #5d6067 0%, #2d2f33 46%, #141417 54%, #383a3f 100%);
  --btn-edge: #000000;
  --btn-shine: inset 0 1px 0 rgb(255 255 255 / 28%), 0 1px 2px rgb(0 0 0 / 25%);
  --chrome: linear-gradient(180deg, #ffffff 0%, #e9ebee 48%, #d3d7dc 52%, #f1f2f4 100%);
  --chrome-text: linear-gradient(180deg, #3a3d42 0%, #8e949d 44%, #15161a 56%, #5a5e66 100%);
  --logo-plate: transparent;
  --logo-plate-pad: 0px;
  /* moving backgrounds (assets/js/motion.js), r, g, b: lines / glow / bright centre - golden light like the city lights */
  --motion-ink: 196, 118, 18;
  --motion-glow: 255, 166, 38;
  --motion-core: 255, 244, 214;

  /* type */
  --font-display: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --radius: 1rem;
  --gutter: 1rem;
  --header-h: 6rem;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0c0d0f;
    --surface: #16171a;
    --bar: rgb(20 21 24 / 84%);
    --bar-solid: #141518;
    --ink: #ecedef;
    --muted: #a2a7af;
    --line: #2b2d32;
    --brand: #dfe2e6;
    --brand-strong: #ffffff;
    --on-brand: #111214;
    --brand-soft: #26282c;
    --sun: #aab1ba;
    --ok: #5fcf8d;
    --bad: #f08a76;
    --shadow: 0 1px 2px rgb(0 0 0 / 35%), 0 0.625rem 1.875rem rgb(0 0 0 / 30%);
    --btn-face: linear-gradient(180deg, #ffffff 0%, #dcdfe3 46%, #b8bdc4 54%, #e8eaed 100%);
    --btn-face-hover: linear-gradient(180deg, #ffffff 0%, #e9ebee 46%, #c9cdd2 54%, #f3f4f6 100%);
    --btn-edge: #8d939b;
    --btn-shine: inset 0 1px 0 rgb(255 255 255 / 70%), 0 1px 2px rgb(0 0 0 / 40%);
    --chrome: linear-gradient(180deg, #34363b 0%, #23252a 48%, #18191c 52%, #2a2c31 100%);
    --chrome-text: linear-gradient(180deg, #ffffff 0%, #bfc4ca 44%, #7a8088 56%, #e3e6e9 100%);
    /* the logo is made for light backgrounds: in dark mode it sits on a small light plate */
    --logo-plate: linear-gradient(180deg, #ffffff 0%, #e4e7ea 100%);
    --logo-plate-pad: 0.25rem;
    --motion-ink: 232, 156, 52;
    --motion-glow: 255, 186, 80;
    --motion-core: 255, 248, 230;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #0c0d0f;
    --surface: #16171a;
    --bar: rgb(20 21 24 / 84%);
    --bar-solid: #141518;
    --ink: #ecedef;
    --muted: #a2a7af;
    --line: #2b2d32;
    --brand: #dfe2e6;
    --brand-strong: #ffffff;
    --on-brand: #111214;
    --brand-soft: #26282c;
    --sun: #aab1ba;
    --ok: #5fcf8d;
    --bad: #f08a76;
    --shadow: 0 1px 2px rgb(0 0 0 / 35%), 0 0.625rem 1.875rem rgb(0 0 0 / 30%);
    --btn-face: linear-gradient(180deg, #ffffff 0%, #dcdfe3 46%, #b8bdc4 54%, #e8eaed 100%);
    --btn-face-hover: linear-gradient(180deg, #ffffff 0%, #e9ebee 46%, #c9cdd2 54%, #f3f4f6 100%);
    --btn-edge: #8d939b;
    --btn-shine: inset 0 1px 0 rgb(255 255 255 / 70%), 0 1px 2px rgb(0 0 0 / 40%);
    --chrome: linear-gradient(180deg, #34363b 0%, #23252a 48%, #18191c 52%, #2a2c31 100%);
    --chrome-text: linear-gradient(180deg, #ffffff 0%, #bfc4ca 44%, #7a8088 56%, #e3e6e9 100%);
    /* the logo is made for light backgrounds: in dark mode it sits on a small light plate */
    --logo-plate: linear-gradient(180deg, #ffffff 0%, #e4e7ea 100%);
    --logo-plate-pad: 0.25rem;
    --motion-ink: 232, 156, 52;
    --motion-glow: 255, 186, 80;
    --motion-core: 255, 248, 230;
    color-scheme: dark;
}

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

html {
  /* iPhone: the strips behind the status bar and the home bar, and the bounce when you scroll past the
     top or bottom, show this colour - matte silver like the header and footer, never white (Luis 2026-10-26) */
  background-color: var(--bar-solid);
  background-image: var(--matte);
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 0.75rem);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background-color: var(--paper);
  background-image: var(--matte);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
}
/* paints the phone status-bar area above the sticky header */
body::before {
  content: "";
  position: fixed;
  inset: 0 0 auto;
  height: env(safe-area-inset-top, 0px);
  z-index: 60;
  background-color: var(--bar);
  background-image: var(--matte);
}

img { display: block; max-width: 100%; height: auto; }
a { color: var(--brand); }
[hidden] { display: none !important; }

h1, h2, h3 {
  font-family: var(--font-display);
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin: 0;
  text-wrap: balance;
}
p { margin: 0; }

:focus-visible { outline: 0.1875rem solid var(--sun); outline-offset: 0.1875rem; border-radius: 0.375rem; }

.wrap {
  width: 100%;
  max-width: 73.75rem;
  margin: 0 auto;
  padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
}

.skip-link {
  position: absolute;
  left: 0.75rem;
  top: -10rem;
  z-index: 100;
  padding: 0.625rem 0.875rem;
  border-radius: 0.5rem;
  background: var(--ink);
  color: var(--paper);
}
.skip-link:focus { top: calc(0.75rem + env(safe-area-inset-top, 0px)); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 3rem;
  text-align: center;
  padding: 0.75rem 1.375rem;
  border: 2px solid transparent;
  border-radius: 0.75rem;
  font: 700 1rem/1.2 var(--font-body);
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s ease, transform .15s ease, border-color .15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:disabled { opacity: .6; cursor: wait; transform: none; }
.btn-brand { border-color: var(--btn-edge); background: var(--btn-face); color: var(--on-brand); box-shadow: var(--btn-shine); }
.btn-brand:hover { background: var(--btn-face-hover); }
.btn-ghost { border-color: var(--line); background: var(--chrome); color: var(--ink); }
.btn-ghost:hover { border-color: var(--brand); }
.btn-small { min-height: 2.5rem; padding: 0.5rem 1rem; font-size: .95rem; }
.btn-block { width: 100%; }

/* ---------- header ---------- */
.site-header {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 50;
  background-color: var(--bar);
  background-image: var(--matte);
  -webkit-backdrop-filter: blur(0.875rem) saturate(1.15);
  backdrop-filter: blur(0.875rem) saturate(1.15);
  border-bottom: 1px solid var(--line);
}
.header-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: var(--header-h);
}
.logo {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  margin-right: auto;
  margin-left: 1rem;   /* the logo sits a little in from the left edge (Luis, 2026-10-26) */
  color: var(--ink);
  text-decoration: none;
}
/* the official logo, never redrawn or recoloured (STRUCTURE.md "Grovance brand") */
.logo-img { width: auto; height: 5rem; flex: none; padding: var(--logo-plate-pad); border-radius: 0.625rem; background: var(--logo-plate); box-sizing: content-box; }

.menu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--line);
  border-radius: 0.625rem;
  background: var(--surface);
  cursor: pointer;
}
.menu-bars, .menu-bars::before, .menu-bars::after {
  display: block;
  position: relative;
  width: 1.25rem;
  height: 2px;
  border-radius: 2px;
  background: var(--ink);
  transition: transform .2s ease, background-color .2s ease;
}
.menu-bars::before, .menu-bars::after { content: ""; position: absolute; left: 0; }
.menu-bars::before { top: -0.375rem; }
.menu-bars::after { top: 0.375rem; }
.menu-btn[aria-expanded="true"] .menu-bars { background: transparent; }
.menu-btn[aria-expanded="true"] .menu-bars::before { transform: translateY(0.375rem) rotate(45deg); }
.menu-btn[aria-expanded="true"] .menu-bars::after { transform: translateY(-0.375rem) rotate(-45deg); }

.main-nav {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  padding: 0.5rem max(var(--gutter), env(safe-area-inset-right, 0px)) 1.125rem max(var(--gutter), env(safe-area-inset-left, 0px));
  background-color: var(--bar);
  background-image: var(--matte);
  -webkit-backdrop-filter: blur(0.875rem) saturate(1.15);
  backdrop-filter: blur(0.875rem) saturate(1.15);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.main-nav.open { display: block; }
.nav-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
/* each menu item in its own chrome box; text 30% bigger than before (Luis, 2026-10-26) */
.nav-links a {
  display: block;
  padding: 0.75rem 1rem;
  border: 1px solid var(--line);
  border-radius: 0.625rem;
  background: var(--chrome);
  box-shadow: var(--btn-shine);
  color: var(--ink);
  font-weight: 700;
  font-size: 1.38rem;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
}
.nav-links a:hover { border-color: var(--brand); }
.nav-actions { display: flex; align-items: center; justify-content: center; gap: 0.75rem; margin-top: 1rem; }

.lang-switch {
  display: inline-flex;
  padding: 0.1875rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
}
.lang-switch button {
  min-width: 2.75rem;
  min-height: 2.125rem;
  padding: 0.25rem 0.625rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font: 700 .85rem/1 var(--font-body);
  letter-spacing: .05em;
  cursor: pointer;
}
.lang-switch button[aria-pressed="true"] { background: var(--btn-face); color: var(--on-brand); box-shadow: var(--btn-shine); }

/* ---------- hero ---------- */
.hero { padding-block: 2.5rem 3.5rem; }
/* the hero message sits in the centre, over the Earth picture (Luis, 2026-10-26) */
.hero-grid { display: grid; gap: 2.5rem; align-items: center; justify-items: center; text-align: center; }
.hero-copy { display: grid; gap: 1.25rem; min-width: 0; justify-items: center; max-width: 52rem; }
.eyebrow {
  color: var(--brand);
  font-weight: 700;
  font-size: .85rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.hero-title {
  font-size: clamp(2.4rem, 8.5vw, 4.3rem);
  font-weight: 700;   /* a bit slimmer than the other headings (Luis, 2026-10-26) */
  letter-spacing: -0.025em;
  max-width: 18ch;
}
.hero-lead { max-width: 36rem; color: var(--muted); font-size: 1.15rem; }
.hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; }
.hero .ticks { text-align: left; }

.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.ticks li, .features li {
  position: relative;
  padding-left: 1.75rem;
}
.ticks li::before, .features li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: .45em;
  width: 0.875rem;
  height: 0.5rem;
  border-left: 2.5px solid var(--brand);
  border-bottom: 2.5px solid var(--brand);
  transform: rotate(-45deg);
}


/* level meter: five bars, filled up to the level number */
.meter { display: inline-flex; align-items: flex-end; gap: 0.1875rem; height: 1.125rem; flex: none; }
.meter i { display: block; width: 0.3125rem; border-radius: 2px; background: var(--line); }
.meter i:nth-child(1) { height: 0.375rem; }
.meter i:nth-child(2) { height: 0.5625rem; }
.meter i:nth-child(3) { height: 0.75rem; }
.meter i:nth-child(4) { height: 0.9375rem; }
.meter i:nth-child(5) { height: 1.125rem; }
.meter i.on { background: var(--chrome-text); }
.meter i.on:last-child { background: var(--sun); }

/* ---------- sections ---------- */
.section { padding-block: 4rem; }
.section-alt { background: var(--surface); border-block: 1px solid var(--line); }
.site-header { box-shadow: inset 0 -1px 0 var(--line), 0 1px 0 rgb(255 255 255 / 4%); }
.section-head { display: grid; gap: 0.625rem; max-width: 42rem; margin-bottom: 2rem; }
.section-head h2, .section-head h1 { font-size: clamp(1.8rem, 5.5vw, 2.6rem); font-weight: 800; }
.section-head p { color: var(--muted); }

/* how it works */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.step { display: grid; gap: 0.5rem; padding-top: 1.125rem; border-top: 2px solid var(--ink); border-image: var(--chrome-text) 1; }
.step-num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 2.4rem;
  line-height: 1;
  color: var(--ink);
  background: var(--chrome-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-variant-numeric: tabular-nums;
}
.step h3 { font-size: 1.3rem; }
.step p { color: var(--muted); }

/* levels */
.levels { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.level {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-width: 0;
  padding: 1.375rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
}
.level-top { display: flex; align-items: center; justify-content: space-between; gap: 0.625rem; }
.level-no {
  color: var(--muted);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.level-name { font-size: 1.6rem; font-weight: 800; }
.level-sum { color: var(--muted); }
.plus { font-weight: 700; font-size: .95rem; }
.features { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; font-size: .98rem; }
.level-foot { display: grid; gap: 0.75rem; margin-top: auto; padding-top: 1rem; border-top: 1px dashed var(--line); }
.price { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; color: var(--muted); font-size: .9rem; }
.price strong { color: var(--ink); font-size: 1rem; }

/* add-ons */
.price { flex-wrap: wrap; }
.price .price-note { flex-basis: 100%; font-size: .82rem; }
.price-rent { color: var(--muted); font-size: .88rem; }

/* one metal colour per level (Luis, 2026-10-26): silver, light grey, grey, light yellow, gold.
   It colours the title (centred), the price and the Choose button. The cards sit on the dark blue picture. */
.level[data-level="1"] { --lv-face: linear-gradient(180deg, #ffffff 0%, #e4e7ea 46%, #c3c8ce 54%, #eef0f2 100%); --lv-edge: #959ba3; --lv-text: #eef0f2; }
.level[data-level="2"] { --lv-face: linear-gradient(180deg, #eceef0 0%, #c9cdd2 46%, #a9aeb5 54%, #d3d6da 100%); --lv-edge: #80868e; --lv-text: #cfd3d8; }
.level[data-level="3"] { --lv-face: linear-gradient(180deg, #d2d5d9 0%, #a8adb4 46%, #8a9098 54%, #b5b9bf 100%); --lv-edge: #6a7078; --lv-text: #aeb3ba; }
.level[data-level="4"] { --lv-face: linear-gradient(180deg, #fffbe8 0%, #f6eaae 46%, #e5d283 54%, #f8efc2 100%); --lv-edge: #b49e52; --lv-text: #f4e8a8; }
.level[data-level="5"] { --lv-face: linear-gradient(180deg, #fff0bf 0%, #f0c457 46%, #cf951c 54%, #eebf5a 100%); --lv-edge: #946812; --lv-text: #f2c457; }
.level .level-name { text-align: center; color: var(--lv-text); background: var(--lv-face); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.level .price strong { color: var(--lv-text); font-size: 1.05rem; }
.price-rent .nowrap { white-space: nowrap; }
.price strong { white-space: nowrap; }
.price-from { font-size: .75em; font-weight: 600; }
/* all text in the level cards is centred (Luis, 2026-10-26). "Buy" sits above the price in every card,
   so long prices like "desde 2999 US$" never push one card's lines out of step with the others */
.level { text-align: center; }
.level .level-top { justify-content: center; }
.level .features { justify-items: center; }
.level .features li { padding-left: 0; }
.level .features li::before { position: static; display: inline-block; margin: 0 0.625rem 0 2px; vertical-align: .2em; }   /* the tick sits just before the words */
.level .price { justify-content: center; }
.level .price > span:first-child { flex-basis: 100%; }
.level .price strong { font-size: 1.2rem; }
/* side by side, every card's price block is the same height, so the prices line up across the row */
@media (min-width: 640px) { .level .price-rent { min-height: 3.2em; } .level .price-rent[hidden] { display: block !important; visibility: hidden; } }
.level .btn-brand { border-color: var(--lv-edge); background: var(--lv-face); color: #111214; padding-inline: 0.625rem; white-space: nowrap; }
.level .btn-brand:hover { background: var(--lv-face); filter: brightness(1.07); }
.pay-ways { display: grid; gap: 1rem; margin-top: 2rem; }
.pay-way { display: grid; gap: 0.625rem; align-content: start; padding: 1.375rem 1.25rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.pay-way.pay-buy { border: 2px solid var(--brand); }
.pay-way h3 { font-size: 1.15rem; font-weight: 800; }
.pay-way ul { display: grid; gap: 0.5rem; margin: 0; padding-left: 1.15em; color: var(--muted); font-size: .95rem; }
.pay-tag { font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--brand); }
.addon-price { margin-top: 0.25rem; color: var(--ink) !important; font-weight: 700; font-size: .9rem !important; }
@media (min-width: 900px) { .pay-ways { grid-template-columns: 1.2fr 1fr 1fr; } }
/* add-ons: one dark "tech" card each (Luis, 2026-10-26): dot grid, chrome-to-gold edge, glowing icon.
   The cards are dark in light and dark mode, like the level cards on the wallpaper. */
.addons { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.875rem; }
.addons li {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;                                  /* everything centred (Luis, 2026-10-26) */
  gap: 0.5rem;
  min-width: 0;
  padding: 1.25rem;
  text-align: center;
  border: 1px solid transparent;
  border-radius: 0.875rem;
  background:
    radial-gradient(circle at 1px 1px, rgb(255 255 255 / 7%) 1px, transparent 1.5px) 0 0 / 0.875rem 0.875rem padding-box,
    linear-gradient(160deg, #1c1d21, #0c0d0f 70%) padding-box,
    linear-gradient(135deg, #dfe2e6, #5b6068 38%, #26282c 62%, #e8b84a) border-box;
  box-shadow: 0 0.625rem 1.5rem rgb(0 0 0 / 18%);
  transition: transform .2s ease, box-shadow .2s ease;
}
.addons li::before {                                    /* a line of light along the top edge */
  content: "";
  position: absolute;
  inset: -1px 1.375rem auto;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, #ffcf6a, transparent);
}
.addons li:hover { transform: translateY(-0.1875rem); box-shadow: 0 0.875rem 1.875rem rgb(0 0 0 / 26%), 0 0 1.625rem rgb(255 166 38 / 20%); }
.addon-ico {
  display: grid;
  place-items: center;
  width: 2.625rem;
  height: 2.625rem;
  flex: none;
  border: 1px solid rgb(255 255 255 / 14%);
  border-radius: 0.6875rem;
  background: linear-gradient(180deg, #2b2d32, #131417);
  color: #ffc65a;
}
.addon-ico svg { width: 1.375rem; height: 1.375rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 0.3125rem rgb(255 166 38 / 55%)); }
.addon-head { display: flex; align-items: center; justify-content: center; gap: 0.75rem; max-width: 100%; }   /* icon beside the title */
.addons h3 { min-width: 0; text-align: left; font-size: 1.05rem; font-weight: 700; color: #f4f5f7; }
.addons p { color: #b4b9c0; font-size: .95rem; }
.addons .addon-price { margin-top: auto; padding-top: 0.25rem; color: #f2c457 !important; }   /* prices line up at the bottom */
@media (prefers-reduced-motion: reduce) { .addons li, .addons li:hover { transition: none; transform: none; } }

/* examples page: the 5 template models, each with a Level 1 and a Level 2 demo */
.examples { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; }
.example {
  display: grid;
  grid-template-rows: auto 1fr;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
}
.example img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; }
.example-body { display: grid; align-content: start; gap: 0.375rem; padding: 1.125rem 1.25rem 1.25rem; }
.example-kind { color: var(--muted); font-size: .85rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.example-name { margin: 0; font-family: var(--font-display); font-size: 1.4rem; font-weight: 800; line-height: 1.2; }
.example-biz { color: var(--muted); font-family: var(--font-body); font-size: 1rem; font-weight: 600; }
.example-links { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.5rem; }
.example-links .btn { flex: 1 1 auto; padding-inline: 0.75rem; white-space: nowrap; }
/* Questions page: a still picture, no motion (Luis 2026-10-26, chose "Digital Earth") - a frame of the Pexels
   clip "Digital Earth in blue lights", with a dark shadow so the questions read in white */
.wp-faq {
  background-image:
    linear-gradient(180deg, rgb(3 3 4 / 62%), rgb(3 3 4 / 48%)),
    url("../../images/wallpaper/digital-earth.jpg");
  background-size: cover;
  background-position: center;
}
/* Examples, Questions and Contact each have their own page (Luis 2026-10-26): fill the screen */
.page-solo { min-height: calc(100vh - var(--header-h)); min-height: calc(100svh - var(--header-h)); }

/* faq */
.faq-grid, .contact-grid { display: grid; gap: 0.5rem; }
.faq { display: grid; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.125rem 0;
  font-weight: 700;
  font-size: 1.08rem;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--brand); font-size: 1.4rem; line-height: 1; transition: transform .2s ease; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { max-width: 62ch; padding-bottom: 1.125rem; color: var(--muted); }

/* contact */
.contact-form {
  display: grid;
  gap: 1rem;
  min-width: 0;
  padding: 1.5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
}
.field { display: grid; gap: 0.375rem; }
.field label { font-weight: 700; font-size: .95rem; }
.field input, .field textarea, .field select {
  width: 100%;
  min-height: 3rem;
  padding: 0.6875rem 0.875rem;
  border: 1px solid var(--line);
  border-radius: 0.625rem;
  background: var(--surface);
  color: var(--ink);
  font: 1rem/1.5 var(--font-body);
}
.field textarea { min-height: 8.75rem; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--brand); }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-status { min-height: 1.5em; font-weight: 700; }
.form-status.is-ok { color: var(--ok); }
.form-status.is-bad { color: var(--bad); }

/* footer */
.site-footer { padding-block: 2.5rem; background-color: var(--bar); background-image: var(--matte); border-top: 1px solid var(--line); }
.footer-grid { display: grid; gap: 1.25rem; }
.footer-logo { display: inline-flex; align-items: center; gap: 0.5rem; margin-bottom: 0.375rem; }
.footer-logo .logo-img { height: 6rem; }
.footer-line, .footer-copy { color: var(--muted); font-size: .95rem; }
.footer-links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; }
.footer-links a { color: var(--ink); text-decoration: none; font-weight: 700; }
.footer-links a:hover { color: var(--brand); }

/* builder placeholder page */
.soon { padding-block: 4rem 6rem; }
.soon-card {
  display: grid;
  gap: 1.125rem;
  max-width: 40rem;
  margin: 0 auto;
  padding: 2rem 1.5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}
.soon-card h1 { font-size: clamp(2rem, 7vw, 3rem); font-weight: 800; }
.soon-card p { color: var(--muted); }
.chosen { display: flex; align-items: center; gap: 0.625rem; padding: 0.75rem 0.875rem; border-radius: 0.75rem; background: var(--brand-soft); color: var(--ink); font-weight: 700; }

/* ---------- moving technology backgrounds in the light sections (assets/js/motion.js) ---------- */
.has-motion { position: relative; isolation: isolate; overflow: hidden; }
.has-motion > canvas.motion { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }

/* ---------- wallpaper bands (Luis's pictures, 2026-10-26: images/wallpaper/) ----------
   Always dark, in both themes: inside a band the colour tokens switch to the dark set, so every
   card, button and text in it follows. The pictures have black backgrounds, so they blend into
   the band colour. The header stays light (the logo is made for light backgrounds). */
.wallpaper {
  --paper: #0c0d0f;
  --surface: #16171a;
  --ink: #f1f2f4;
  --muted: #c2c7ce;
  --line: rgb(255 255 255 / 16%);
  --brand: #dfe2e6;
  --brand-strong: #ffffff;
  --on-brand: #111214;
  --brand-soft: #26282c;
  --sun: #aab1ba;
  --ok: #5fcf8d;
  --bad: #f08a76;
  --shadow: 0 1px 2px rgb(0 0 0 / 40%), 0 0.875rem 2.25rem rgb(0 0 0 / 45%);
  --btn-face: linear-gradient(180deg, #ffffff 0%, #dcdfe3 46%, #b8bdc4 54%, #e8eaed 100%);
  --btn-face-hover: linear-gradient(180deg, #ffffff 0%, #e9ebee 46%, #c9cdd2 54%, #f3f4f6 100%);
  --btn-edge: #8d939b;
  --btn-shine: inset 0 1px 0 rgb(255 255 255 / 70%), 0 1px 2px rgb(0 0 0 / 40%);
  --chrome: linear-gradient(180deg, #34363b 0%, #23252a 48%, #18191c 52%, #2a2c31 100%);
  --chrome-text: linear-gradient(180deg, #ffffff 0%, #bfc4ca 44%, #7a8088 56%, #e3e6e9 100%);
  color-scheme: dark;
  color: var(--ink);
  background-color: #000000;   /* the pictures' own black, so their edges never show */
  background-repeat: no-repeat;
}
.section.wallpaper { border-block: 0; }
.wallpaper .section-head, .wallpaper .hero-copy { text-shadow: 0 1px 0.875rem rgb(0 0 0 / 60%); }
/* phones first: the picture fills the band, with a darker veil so the text stays readable */
.wp-earth { background-image: linear-gradient(180deg, rgb(3 3 4 / 55%) 0%, rgb(3 3 4 / 80%) 100%), url("../../images/wallpaper/earth-night-phone.jpg"); background-size: cover; background-position: 60% 70%; }
.wp-blue { background-image: linear-gradient(180deg, rgb(3 3 4 / 72%), rgb(3 3 4 / 72%)), url("../../images/wallpaper/blue-dots-phone.jpg"); background-size: cover; background-position: center; }
.wp-cyan { background-image: linear-gradient(180deg, rgb(3 3 4 / 55%), rgb(3 3 4 / 55%)), url("../../images/wallpaper/cyan-lines.jpg"); background-size: cover; background-position: center; }
.wp-gold { background-image: linear-gradient(180deg, rgb(3 3 4 / 45%), rgb(3 3 4 / 45%)), url("../../images/wallpaper/gold-dots.jpg"); background-size: cover; background-position: center; }
/* the contact form is frosted glass, so the gold dots show through */
.wallpaper .contact-form { background: rgb(12 13 15 / 70%); -webkit-backdrop-filter: blur(0.375rem); backdrop-filter: blur(0.375rem); }
@media (min-width: 960px) {
  .wp-earth { background-image: radial-gradient(ellipse 60% 70% at 50% 45%, rgb(3 3 4 / 72%) 0%, rgb(3 3 4 / 30%) 100%), url("../../images/wallpaper/earth-night.jpg"); background-position: center 75%; }
  .wp-blue { background-image: linear-gradient(180deg, rgb(3 3 4 / 55%), rgb(3 3 4 / 35%)), url("../../images/wallpaper/blue-dots.jpg"); }
  .wp-cyan { background-image: linear-gradient(90deg, rgb(3 3 4 / 40%), rgb(3 3 4 / 10%)), url("../../images/wallpaper/cyan-lines.jpg"); background-size: cover; background-position: center 38%; }
  /* the dots sit behind the short text on the left; the form on the right stays clear */
  .wp-gold { background-image: url("../../images/wallpaper/gold-dots.jpg"); background-size: auto 135%; background-position: -2% 60%; }
}

/* ---------- How it works page (how-it-works.html, Luis 2026-10-26: the full description lives on its own page) ---------- */
.page-hero { padding-block: 2.5rem 3rem; }
.page-hero .hero-title { font-size: clamp(2rem, 6.5vw, 3.4rem); }
.jump { list-style: none; margin: 0.25rem 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; }
.jump a { display: inline-block; padding: 0.4375rem 0.875rem; border: 1px solid var(--line); border-radius: 999px; background: rgb(255 255 255 / 6%); color: var(--ink); font-weight: 700; font-size: .92rem; text-decoration: none; text-shadow: none; }
.jump a:hover { border-color: #ffc65a; color: #ffc65a; }
.how-more { display: flex; justify-content: center; margin-top: 2rem; }
.ready { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.ready li { display: grid; gap: 0.5rem; align-content: start; padding: 1.375rem 1.25rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.ready h3 { font-size: 1.12rem; }
.ready p { color: var(--muted); font-size: .97rem; }
.flow { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
.flow li { display: grid; grid-template-columns: 2.8rem 1fr; gap: 0.75rem; align-items: start; padding: 1.125rem 1.25rem; border: 1px solid var(--line); border-radius: 0.875rem; background: rgb(12 13 15 / 72%); -webkit-backdrop-filter: blur(0.25rem); backdrop-filter: blur(0.25rem); }
.flow li > div { display: grid; gap: 0.25rem; min-width: 0; }
.flow h3 { font-size: 1.12rem; }
.flow p { color: var(--muted); font-size: .97rem; }
.flow-num { font-family: var(--font-display); font-weight: 800; font-size: 1.9rem; line-height: 1.05; text-align: right; font-variant-numeric: tabular-nums; color: var(--ink); background: var(--chrome-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.auto { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.375rem; position: relative; max-width: 46rem; }
.auto::before { content: ""; position: absolute; left: 0.5625rem; top: 0.625rem; bottom: 0.625rem; width: 2px; border-radius: 2px; background: linear-gradient(180deg, #e8b84a, var(--line)); }
.auto li { position: relative; display: grid; gap: 0.25rem; padding-left: 2.625rem; }
.auto li::before { content: ""; position: absolute; left: 2px; top: .3em; width: 1rem; height: 1rem; border-radius: 50%; background: radial-gradient(circle, #fff4d6 0 30%, #ffa626 70%); box-shadow: 0 0 0.625rem rgb(255 166 38 / 65%); }
.auto h3 { font-size: 1.12rem; }
.auto p, .auto-note { color: var(--muted); }
.auto-note { max-width: 46rem; margin-top: 1.75rem; font-size: .95rem; }
.guide-cta .section-head { margin-inline: auto; text-align: center; justify-items: center; }
@media (min-width: 640px) {
  .ready { grid-template-columns: repeat(2, 1fr); }
  .flow { grid-template-columns: repeat(2, 1fr); gap: 0.875rem; }
}
@media (min-width: 1160px) {
  .ready { grid-template-columns: repeat(4, 1fr); }
}

/* ---------- wider screens ---------- */
@media (min-width: 640px) {
  :root { --gutter: 1.5rem; }
  .steps { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
  .levels { grid-template-columns: repeat(2, 1fr); }
  .levels .level:last-child { grid-column: 1 / -1; }
  .addons { grid-template-columns: repeat(2, 1fr); }
  /* 5 models: 2 per row, the last one centred */
  .examples { grid-template-columns: repeat(4, 1fr); }
  .examples .example { grid-column: span 2; }
  .examples .example:last-child { grid-column: 2 / span 2; }
  .footer-grid { grid-template-columns: 1fr auto; align-items: center; }
  .footer-copy { grid-column: 1 / -1; }
  .soon-card { padding: 2.75rem 2.5rem; }
}
@media (min-width: 960px) {   /* 3 + 2, the last row centred */
  .examples { grid-template-columns: repeat(6, 1fr); }
  .examples .example:nth-child(4) { grid-column: 2 / span 2; }
  .examples .example:last-child { grid-column: 4 / span 2; }
}
}

@media (min-width: 960px) {
  :root { --header-h: 6.75rem; }
  .logo-img { height: 5.75rem; }
  .hero { padding-block: 4.5rem 6rem; }
  .section { padding-block: 6rem; }
  .addons { grid-template-columns: repeat(3, 1fr); }
  .faq-grid, .contact-grid { grid-template-columns: .8fr 1.2fr; gap: 3.5rem; align-items: start; }
}

@media (min-width: 1180px) {
  /* the menu boxes need this much width side by side; narrower screens use the menu button */
  .menu-btn { display: none; }
  .main-nav {
    display: flex !important;
    align-items: center;
    gap: 1rem;
    position: static;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
  }
  .nav-links { display: flex; gap: 0.5rem; }
  .nav-links a { padding: 0.5rem 0.875rem; font-size: 1.235rem; }
  .nav-actions { justify-content: flex-start; margin-top: 0; }
}

@media (min-width: 1160px) {
  .levels { grid-template-columns: repeat(5, 1fr); gap: 0.875rem; }
  .levels .level:last-child { grid-column: auto; }
  .level { padding: 1.25rem 1.125rem; }
  .addons { grid-template-columns: repeat(4, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}

/* every button: text centred, also when it wraps onto two lines (Luis, 2026-10-26) */
button, .btn, input[type="submit"], input[type="button"], input[type="reset"], .jump a, .lang-switch button { text-align: center; justify-content: center; }

/* ---------- technology cards (Luis, 2026-10-26: "change all white plain cards to technology cards") ----------
   Dark in both themes, like the add-on cards: chrome-to-gold edge, fine dot grid, thin circuit lines and a
   line of light on top. All drawn in CSS / SVG (vector), so they stay sharp on every screen. Inside a card
   the colour tokens switch to the dark set, so text, fields and buttons in it follow. */
.ready li, .pay-way, .soon-card {
  --paper: #0c0d0f;
  --surface: #16171a;
  --ink: #f1f2f4;
  --muted: #c2c7ce;
  --line: rgb(255 255 255 / 16%);
  --brand: #dfe2e6;
  --brand-strong: #ffffff;
  --on-brand: #111214;
  --brand-soft: #26282c;
  --sun: #e8b84a;
  --ok: #5fcf8d;
  --bad: #f08a76;
  --shadow: 0 1px 2px rgb(0 0 0 / 40%), 0 0.875rem 2.25rem rgb(0 0 0 / 45%);
  --btn-face: linear-gradient(180deg, #ffffff 0%, #dcdfe3 46%, #b8bdc4 54%, #e8eaed 100%);
  --btn-face-hover: linear-gradient(180deg, #ffffff 0%, #e9ebee 46%, #c9cdd2 54%, #f3f4f6 100%);
  --btn-edge: #8d939b;
  --btn-shine: inset 0 1px 0 rgb(255 255 255 / 70%), 0 1px 2px rgb(0 0 0 / 40%);
  --chrome: linear-gradient(180deg, #34363b 0%, #23252a 48%, #18191c 52%, #2a2c31 100%);
  --chrome-text: linear-gradient(180deg, #ffffff 0%, #bfc4ca 44%, #7a8088 56%, #e3e6e9 100%);
  --tech-edge: linear-gradient(135deg, #dfe2e6, #5b6068 38%, #26282c 62%, #e8b84a);
  --tech-circuit: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' fill='none' stroke='%23ffffff' stroke-opacity='.07' stroke-width='1'%3E%3Cpath d='M0 40h46l14 14h40M100 54l14-14h46M30 160v-38l12-12v-30M120 0v28l-12 12M80 160v-30l16-16h64M0 100h22l10 10'/%3E%3Cg fill='%23e8b84a' fill-opacity='.22' stroke='none'%3E%3Ccircle cx='100' cy='54' r='2.2'/%3E%3Ccircle cx='42' cy='80' r='2.2'/%3E%3Ccircle cx='108' cy='40' r='2.2'/%3E%3Ccircle cx='96' cy='114' r='2.2'/%3E%3Ccircle cx='32' cy='110' r='2.2'/%3E%3C/g%3E%3C/svg%3E");
  position: relative;
  color-scheme: dark;
  color: var(--ink);
  border: 1px solid transparent;
  background:
    radial-gradient(circle at 1px 1px, rgb(255 255 255 / 7%) 1px, transparent 1.5px) 0 0 / 0.875rem 0.875rem padding-box,
    var(--tech-circuit) 0 0 / 10rem 10rem padding-box,
    linear-gradient(160deg, #1c1d21, #0c0d0f 70%) padding-box,
    var(--tech-edge) border-box;
  box-shadow: 0 0.625rem 1.5rem rgb(0 0 0 / 18%);
}
.ready li::before, .pay-way::before, .soon-card::before {
  content: "";
  position: absolute;
  inset: -1px 1.375rem auto;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, #ffcf6a, transparent);
  pointer-events: none;
}
.pay-way.pay-buy { border: 2px solid transparent; --tech-edge: linear-gradient(135deg, #ffe08a, #e8b84a 45%, #5b6068 70%, #dfe2e6); }

/* ---------- background videos (PROMPT-VIDEOS.md, Luis 2026-10-26; assets/js/videos.js) ----------
   Free Mixkit clips as small silent loops (videos/). The poster (still picture) shows while the video
   loads, and instead of it on small phones, slow connections and with "reduce motion". A veil over each
   video keeps the text readable: dark in the dark bands, the page colour in the light "How it works". */
.has-video { position: relative; isolation: isolate; overflow: hidden; background-color: #000000; }
.bg-video { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.bg-video video { display: block; width: 100%; height: 100%; object-fit: cover; }
.bg-video::after { content: ""; position: absolute; inset: 0; background: var(--vid-veil, rgb(3 3 4 / 65%)); }
.vid-hero { --vid-veil: radial-gradient(ellipse 75% 75% at 50% 45%, rgb(3 3 4 / 76%) 0%, rgb(3 3 4 / 48%) 100%); }
.vid-levels { --vid-veil: linear-gradient(180deg, rgb(3 3 4 / 84%), rgb(3 3 4 / 74%)); }
.vid-contact { --vid-veil: linear-gradient(180deg, rgb(3 3 4 / 70%), rgb(3 3 4 / 58%)); }
.vid-light { background-color: var(--paper); --vid-veil: linear-gradient(180deg, color-mix(in srgb, var(--paper) 90%, transparent), color-mix(in srgb, var(--paper) 86%, transparent)); }
.vid-hero .bg-video video { object-position: 60% 50%; }
/* phones and tablets: the sphere is in the middle of the clip, so crop around the middle (Luis 2026-10-26, iPhone) */
@media (max-width: 959px) { .vid-hero .bg-video video { object-position: 48.5% 50%; } }
@media (min-width: 960px) {
  .vid-contact { --vid-veil: linear-gradient(90deg, rgb(3 3 4 / 76%) 0%, rgb(3 3 4 / 45%) 100%); }
}

/* ---------- prices page (prices.html, PROMPT-NEXT.md task 3: Buying first, then Renting, every price) ---------- */
.price-table-wrap { overflow-x: auto; margin-top: 1.5rem; border-radius: 0.875rem; }
.price-table { width: 100%; border-collapse: separate; border-spacing: 0; font-variant-numeric: tabular-nums;
  border: 1px solid transparent; border-radius: 0.875rem; color: #f1f2f4;
  background: radial-gradient(circle at 1px 1px, rgb(255 255 255 / 7%) 1px, transparent 1.5px) 0 0 / 0.875rem 0.875rem padding-box,
    linear-gradient(160deg, #1c1d21, #0c0d0f 70%) padding-box,
    linear-gradient(135deg, #dfe2e6, #5b6068 38%, #26282c 62%, #e8b84a) border-box; }
.price-table th, .price-table td { padding: 0.875rem 1rem; text-align: left; border-bottom: 1px solid rgb(255 255 255 / 10%); }
.price-table thead th { font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; color: #c2c7ce; }
.price-table tbody th { font-weight: 700; }
.price-table tbody td:nth-child(2) { color: #f2c457; font-weight: 700; font-size: 1.08rem; }
.price-table tbody tr:last-child > * { border-bottom: 0; }
.price-rules { display: grid; gap: 0.5rem; margin: 1.375rem 0 0; padding-left: 1.15em; color: var(--muted); max-width: 70ch; }
.price-market { margin-top: 0.375rem; padding: 0.5rem 0.875rem; border-radius: 0.625rem; background: rgb(255 255 255 / 8%); }
.price-markets { margin-top: 2.25rem; }
@media (max-width: 520px) { .price-table th, .price-table td { padding: 0.75rem 0.625rem; font-size: .95rem; } }

/* ---------- more video spots (PROMPT-VIDEOS.md, Pexels clips) ---------- */
.vid-levels .bg-video video { object-position: 50% 40%; }
.addons-block { margin-top: 5rem; }   /* Add-ons: same section and clip as Levels */
.vid-examples { --vid-veil: linear-gradient(180deg, rgb(3 3 4 / 78%), rgb(3 3 4 / 66%)); }
.vid-contact { --vid-veil: linear-gradient(180deg, rgb(3 3 4 / 66%), rgb(3 3 4 / 56%)); }
/* the light sections keep dark text: the video shows through the page colour like a watermark */
.vid-light { --vid-veil: linear-gradient(180deg, color-mix(in srgb, var(--paper) 84%, transparent), color-mix(in srgb, var(--paper) 80%, transparent)); }
/* "How it works" step tiles: a small 16:9 video on top of each step */
.step-video { position: relative; overflow: hidden; aspect-ratio: 16 / 9; max-width: 100%; margin-bottom: 0.875rem; border-radius: 0.75rem;
  background: #0c0d0f; border: 1px solid transparent;
  background: linear-gradient(#0c0d0f, #0c0d0f) padding-box, linear-gradient(135deg, #dfe2e6, #5b6068 38%, #26282c 62%, #e8b84a) border-box; }
.step-video video { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 0.6875rem; }



/* ---------- background videos never stretch (Luis 2026-10-26: "fix the full screen desktop site") ----------
   A tall section (e.g. Levels, about 1900 px on a laptop) used to stretch its video to the whole section height:
   blown up about 1.8x, zoomed past the sides and blurry. Now each video is only as tall as the screen and stays in
   view (sticky) while you scroll through its section, so it is shown at about its real size. "clip" instead of
   "hidden" keeps the edges trimmed without breaking the sticky video. */
.has-video, .bg-video { overflow: clip; }
.bg-video video { position: sticky; top: 0; height: 100vh; height: 100lvh; max-height: 100%; }

/* ---------- big screens: the whole site grows in proportion (Luis 2026-10-26, iMac 27" 5K in Safari) ----------
   Every size in this file is in rem (1rem = the base text size), so changing the base size scales EVERYTHING
   together - text, menu, logo, cards, spacing - in every browser (no "zoom", which Safari draws differently).
   Up to 1440 px wide the base is 16 px; wider screens grow it with the width: 21.3 px at 1920, 28.4 px at 2560.
   Backgrounds (videos, pictures) are sized by the screen, so they always keep their true shape. */
@media (min-width: 1441px) { html { font-size: calc(100vw / 90); } }

/* ---------- How it works page: the Earth picture at the top keeps one shape (Luis 2026-10-26) ----------
   Before, the section kept the same height while the window got wider, so the picture zoomed in and showed a
   closer, different part of the Earth at every width. Now the section is always 1.9 x as wide as it is tall:
   the same view of the Earth at any window size, just bigger on a bigger screen (fills the width). On big
   screens a sharper 2880 px version of the photo is used. */
@media (min-width: 960px) {
  .page-hero.wp-earth { aspect-ratio: 1.9; display: grid; align-content: center; }
}
@media (min-width: 1600px) {
  .page-hero.wp-earth { background-image: radial-gradient(ellipse 60% 70% at 50% 45%, rgb(3 3 4 / 72%) 0%, rgb(3 3 4 / 30%) 100%), url("../../images/wallpaper/earth-night-xl.jpg"); }
}

/* ---------- Prices page: ONE moving background for the whole page (Luis 2026-10-26) ----------
   The data-dashboard video sits behind every section. The light sections show it through the page-colour veil;
   the "Ready to start?" band puts a dark tint over the same video, so its white text stays readable. The top keeps
   the Earth picture (Luis 2026-10-26), like the How it works page. */
.price-page .wallpaper.price-dark { background-color: rgb(3 3 4 / 80%); background-image: none; }
.price-page > .section, .price-page > section { position: relative; }
/* How it works: ONE after-you-pay clip from "Before you start" to the end, the same clear look everywhere
   (Luis 2026-10-26: no grey filter; the Earth intro at the top stays). The whole part uses the dark wallpaper
   colours (white text, dark glass cards) with only a light shadow over the clip so the text stays readable. */
.vid-clear { --vid-veil: linear-gradient(180deg, rgb(3 3 4 / 38%), rgb(3 3 4 / 22%)); }
.clip-page > .section { position: relative; }
.clip-page .section-head p { color: var(--ink); }

/* "Prices under review" note (prices.json underReview, Luis 2026-10-26) */
.price-review { display: inline-block; margin-top: 0.5rem; padding: 0.375rem 0.75rem; border: 1px solid currentColor; border-radius: 0.5rem; font-size: 0.9rem; font-weight: 700; opacity: 0.92; }

/* ---------- App format on smartphones (Luis 2026-10-26: "make it an app format for smartphones";
   computers and tablets do not change). A fixed tab bar at the bottom, like a phone app, in the same frosted
   matte silver as the header; a more compact header. Also used when Grovance is installed from the home screen
   (manifest.webmanifest + sw.js), and later for the App Store / Google Play versions. ---------- */
.app-tabs { display: none; }
@media (max-width: 767px) {
  :root { --header-h: 4.5rem; --tabs-h: 4rem; }
  .logo-img { height: 3.5rem; }
  .app-tabs {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 55;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.25rem;
    padding: 0.375rem max(0.5rem, env(safe-area-inset-right, 0px)) calc(0.375rem + env(safe-area-inset-bottom, 0px)) max(0.5rem, env(safe-area-inset-left, 0px));
    background-color: var(--bar);
    background-image: var(--matte);
    -webkit-backdrop-filter: blur(0.875rem) saturate(1.15);
    backdrop-filter: blur(0.875rem) saturate(1.15);
    border-top: 1px solid var(--line);
    box-shadow: 0 -0.25rem 1rem rgb(0 0 0 / 12%);
  }
  .app-tabs a {
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 0.1875rem;
    min-height: calc(var(--tabs-h) - 0.75rem);
    padding: 0.25rem 0.125rem;
    border-radius: 0.75rem;
    color: var(--muted);
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1.15;
    text-align: center;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
  }
  .app-tabs svg { width: 1.5rem; height: 1.5rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .app-tabs a[aria-current="page"] { color: var(--ink); background: var(--chrome); box-shadow: var(--btn-shine); }
  .app-tabs a:active { transform: scale(.96); }
  /* the page ends above the tab bar */
  .site-footer { padding-bottom: calc(2.5rem + var(--tabs-h) + env(safe-area-inset-bottom, 0px)); }
}