/* ==========================================================================
   OnRestro marketing site: home page styles
   Plain CSS, mobile-first. Sizes in rem; breakpoints in em (1px only for hairlines).
   Breakpoints: 30em (480) · 40em (640) · 48em (768) · 56em (896) · 64em (1024) · 80em (1280)

   1. Fonts and tokens
   2. Base and reset
   3. Shared pieces: layout, guides, slanted sections, type, buttons, hover
      arrow, links, lists
   4. Header, mega menu and mobile menu
   5. Sections
      5.1 Hero and gradient stripe   5.2 Capability index   5.3 Journey
      5.4 Product tour (POS, QR, Captain App, KDS)           5.8 Pricing (one plan)
      5.9 FAQ                        5.11 Footer
   6. Motion: keyframes, reveal, continuous animations, reduced motion
   ========================================================================== */

/* 1. Fonts and tokens
   ========================================================================== */
/* Plus Jakarta Sans: one variable WOFF2 per subset covers weights 400-800
   (latin + latin-ext, which includes the rupee sign). SIL OFL, see assets/fonts. */
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-display: swap;
  font-weight: 400 800;
  src: url("../fonts/plus-jakarta-sans-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-display: swap;
  font-weight: 400 800;
  src: url("../fonts/plus-jakarta-sans-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Handwritten labels in the hero (latin only; SIL OFL, see assets/fonts) */
@font-face {
  font-family: "Caveat Brush";
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url("../fonts/caveat-brush-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Animatable angle for rotating gradient borders */
@property --angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

:root {
  /* Palette (docs/onrestro-phase1-content-and-layout.md §9) */
  --green: #047857;
  --green-hover: #065F46;
  --ink: #17191B;
  --text: #53615D;
  --white: #FFFFFF;
  --soft: #F3F8F5;
  --line: #E2E9E5;
  --deep: #0B2821;
  /* Supporting tints, used for gradients, glows and accents only */
  --mint: #6EE7B7;              /* brand mint from the light logo */
  --emerald: #10B981;
  --green-600: #059669;
  --pale: #EAF5EF;
  --line-strong: #CFE0D6;
  --on-dark: rgba(255, 255, 255, 0.76);
  --on-dark-muted: rgba(255, 255, 255, 0.64);
  --line-dark: rgba(255, 255, 255, 0.1);
  --guide: rgba(4, 120, 87, 0.1);

  /* Type */
  /* One family for everything; two tokens kept so headings and body can diverge later */
  --font-display: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-body: var(--font-display);
  --fs-h1: clamp(2.625rem, 1.5rem + 4.4vw, 4.5rem);
  --fs-h2: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem);
  --fs-h3: clamp(1.125rem, 1.06rem + 0.25vw, 1.25rem);
  --fs-body: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  --fs-lead: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  --fs-small: 0.9375rem;
  --fs-xs: 0.8125rem;

  /* Layout */
  --container: 76rem;
  --gutter: clamp(1.25rem, 0.6rem + 3vw, 2.5rem);
  --section-y: clamp(4rem, 2.5rem + 5vw, 6rem);
  --header-h: 4.5rem;

  /* Shape and depth */
  --radius-sm: 0.75rem;
  --radius: 1rem;
  --radius-lg: 1.125rem;
  --radius-xl: 1.5rem;
  --radius-2xl: 2rem;
  --shadow-sm: 0 0.0625rem 0.125rem rgba(11, 40, 33, 0.06), 0 0.25rem 0.75rem rgba(11, 40, 33, 0.05);
  --shadow: 0 0.125rem 0.375rem rgba(11, 40, 33, 0.06), 0 1rem 2.5rem -0.75rem rgba(11, 40, 33, 0.16);
  --shadow-lg: 0 0.25rem 0.75rem rgba(11, 40, 33, 0.06), 0 2rem 4rem -1.25rem rgba(11, 40, 33, 0.28);
  /* Long, layered "floating card" shadow */
  --shadow-xl: 0 3.125rem 6.25rem -1.25rem rgba(11, 40, 33, 0.25), 0 1.875rem 3.75rem -1.875rem rgba(0, 0, 0, 0.3);

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --t-fast: 150ms;
  --t: 220ms;
}

/* 2. Base and reset
   ========================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}

body {
  margin: 0;
  background: var(--white);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.6;
  word-spacing: 0.04em; /* Plus Jakarta Sans has a narrow word space */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

/* Fine film grain over the whole page for a printed, less "flat" finish */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 200;
  pointer-events: none;
  opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 10rem 10rem;
}

html.menu-open { overflow: hidden; }

h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }

h1, h2, h3 {
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
/* Section headings */
h2 { letter-spacing: -0.035em; }

p { text-wrap: pretty; }

img, svg, picture { display: block; max-width: 100%; }
img { height: auto; }

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

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

:focus-visible {
  outline: 0.1875rem solid var(--green);
  outline-offset: 0.1875rem;
  border-radius: 0.375rem;
}
.site-footer :focus-visible { outline-color: var(--mint); }
main:focus { outline: none; }

::selection { background: rgba(16, 185, 129, 0.22); color: var(--ink); }

/* 3. Shared pieces
   ========================================================================== */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.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 {
  position: fixed;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 300;
  padding: 0.75rem 1.125rem;
  border-radius: var(--radius-sm);
  background: var(--ink);
  color: var(--white);
  font-weight: 600;
  transform: translateY(-200%);
  transition: transform var(--t) var(--ease-out);
}
.skip-link:focus { transform: none; }

.container {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.icon {
  width: 1.25rem;
  height: 1.25rem;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Hover arrow: a chevron whose stem draws in on hover. The paths live in the
   #i-hover-arrow symbol, so state is passed down with custom properties. */
.arrow {
  flex: none;
  width: 0.625rem;
  height: 0.625rem;
  margin-left: 0.4375rem;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.arrow__line {
  opacity: var(--arrow-line, 0);
  transition: opacity var(--t-fast) ease;
}
.arrow__tip {
  transform: translateX(var(--arrow-tip, 0));
  transition: transform var(--t-fast) ease;
}
a:hover > .arrow,
a:focus-visible > .arrow,
a:hover .index__name .arrow,
.mega__foot:hover .arrow {
  --arrow-line: 1;
  --arrow-tip: 0.1875rem;
}
.arrow--up { transform: rotate(-90deg); }

/* Sections */
.section {
  position: relative;
  padding-block: var(--section-y);
  isolation: isolate;
  overflow: hidden;
}
/* Column guides: faint dashed verticals at the container edges and quarters */
.guides {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.guides::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: min(var(--container), calc(100% - var(--gutter) * 2));
  transform: translateX(-50%);
  border-right: 1px solid var(--guide);
  background-image: linear-gradient(90deg, var(--guide) 1px, transparent 1px);
  background-size: 25% 100%;
  -webkit-mask-image: repeating-linear-gradient(180deg, #000 0 0.3125rem, transparent 0.3125rem 0.625rem);
  mask-image: repeating-linear-gradient(180deg, #000 0 0.3125rem, transparent 0.3125rem 0.625rem);
}

/* Type helpers */
.h2 { font-size: var(--fs-h2); font-weight: 700; letter-spacing: -0.035em; }
.body-lg { font-size: var(--fs-lead); line-height: 1.6; max-width: 60ch; }
.h2 + .body-lg { margin-top: 1.25rem; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  margin-bottom: 1rem;
  color: var(--green);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  line-height: 1.4;
  text-transform: uppercase;
}
.eyebrow__num {
  display: inline-grid;
  place-items: center;
  min-width: 1.75rem;
  height: 1.375rem;
  padding-inline: 0.375rem;
  border-radius: 62rem;
  background: rgba(4, 120, 87, 0.1);
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: 0.02em;
}

.eyebrow-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  overflow: hidden;
  padding: 0.4375rem 1rem 0.4375rem 0.75rem;
  border: 1px solid rgba(4, 120, 87, 0.2);
  border-radius: 62rem;
  background: rgba(255, 255, 255, 0.8);
  box-shadow: var(--shadow-sm);
  color: var(--green);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  line-height: 1.4;
  text-transform: uppercase;
}
.eyebrow-pill::after {
  /* light sweep across the pill */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.9) 50%, transparent 65%);
  transform: translateX(-110%);
}
.eyebrow-pill__dot,
.live-dot {
  position: relative;
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--emerald);
}
.eyebrow-pill__dot::after,
.live-dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: inherit;
}
.live-dot { background: var(--mint); }

/* Buttons: pills with the hover arrow */
.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.btn {
  --btn-h: 3rem;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--btn-h);
  padding: 0.625rem 1.25rem 0.625rem 1.375rem;
  border: 1px solid transparent;
  border-radius: 62rem;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.005em;
  white-space: nowrap;
  transition:
    background-color var(--t) var(--ease-out),
    border-color var(--t) var(--ease-out),
    color var(--t) var(--ease-out),
    box-shadow var(--t) var(--ease-out),
    transform var(--t) var(--ease-out);
}
.btn--sm { --btn-h: 2.5rem; padding: 0.5rem 0.875rem 0.5rem 1.0625rem; font-size: var(--fs-small); }
.btn--lg { --btn-h: 3.25rem; padding: 0.75rem 1.5rem 0.75rem 1.625rem; font-size: 1.0625rem; }
.btn--block { width: 100%; }
.btn:hover > .arrow,
.btn:focus-visible > .arrow { --arrow-line: 1; --arrow-tip: 0.1875rem; }

.btn--primary {
  background-color: var(--green);
  background-image: linear-gradient(180deg, #058a63 0%, var(--green) 100%);
  color: var(--white);
  box-shadow:
    0 0.0625rem 0.125rem rgba(6, 95, 70, 0.35),
    0 0.5rem 1.25rem -0.5rem rgba(4, 120, 87, 0.55),
    inset 0 0.0625rem 0 rgba(255, 255, 255, 0.18);
}
.btn--primary:hover {
  background-color: var(--green-hover);
  background-image: none;
  box-shadow: 0 0.875rem 1.75rem -0.625rem rgba(4, 120, 87, 0.7), inset 0 0.0625rem 0 rgba(255, 255, 255, 0.14);
}

.btn--secondary {
  background: rgba(255, 255, 255, 0.9);
  border-color: #CBDCD3;
  color: var(--ink);
}
.btn--secondary:hover {
  border-color: var(--green);
  color: var(--green-hover);
  box-shadow: 0 0.5rem 1.25rem -0.625rem rgba(11, 40, 33, 0.25);
}

/* Diagonal light sweep on hover */
.btn--shine::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.32) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform 700ms var(--ease-out);
}
.btn--shine:hover::after { transform: translateX(120%); }

/* Text link with hover arrow */
.link-arrow {
  display: inline-flex;
  align-items: center;
  margin-top: 1.75rem;
  color: var(--green);
  font-weight: 600;
  transition: color var(--t-fast);
}
.link-arrow:hover { color: var(--green-hover); }

/* Check lists */
.checklist {
  display: grid;
  gap: 0.75rem 1.5rem;
  margin-top: 1.75rem;
  color: var(--ink);
  font-weight: 500;
}
.checklist li { display: flex; align-items: flex-start; gap: 0.75rem; line-height: 1.45; }
.checklist .icon {
  width: 1.5rem;
  height: 1.5rem;
  padding: 0.25rem;
  border-radius: 50%;
  background: rgba(4, 120, 87, 0.1);
  color: var(--green);
  stroke-width: 2.4;
}
@media (min-width: 30em) {
  .checklist--2col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 4. Header, mega menu and mobile menu
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
}
/* The frosted bar is drawn on this layer, not on the header itself: a
   backdrop-filter on the header would pin the fixed mobile drawer inside it
   to the header's box instead of the screen. */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(255, 255, 255, 0.88);
  border-bottom: 1px solid rgba(226, 233, 229, 0.9);
  box-shadow: 0 0.5rem 1.5rem -1rem rgba(11, 40, 33, 0.18);
  -webkit-backdrop-filter: saturate(1.2) blur(1rem);
  backdrop-filter: saturate(1.2) blur(1rem);
  transition: opacity var(--t) var(--ease-out);
}
/* At the very top (set by JS) the header sits transparently on the hero */
.site-header.is-top::before { opacity: 0; }
/* WordPress: keep the sticky header below the admin bar of logged-in users
   (the bar is fixed 32px tall, 46px up to 782px wide, and scrolls away below 600px) */
.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .site-header { top: 46px; } }
@media (max-width: 600px) { .admin-bar .site-header { top: 0; } }

.scroll-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 0.125rem;
  background: linear-gradient(90deg, var(--green), var(--emerald), var(--mint));
  transform: scaleX(var(--p, 0));
  transform-origin: left;
  pointer-events: none;
}
.site-header.is-top .scroll-progress { opacity: 0; }

.header__inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  height: var(--header-h);
}
.header__brand { display: inline-flex; flex: none; border-radius: 0.375rem; }
.header__logo { width: auto; height: 1.75rem; }

.header__nav,
.header__actions { display: none; }

.header__nav { position: relative; }
.nav__list { display: flex; gap: 0.5rem; }
.nav__item { position: relative; }
.nav__link,
.header__login {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 0.875rem;
  border-radius: 62rem;
  color: var(--ink);
  font-size: var(--fs-small);
  font-weight: 600;
  transition: color var(--t-fast);
}
.nav__link:hover,
.header__login:hover { color: var(--green); }
.nav__icon {
  width: 1rem;
  height: 1rem;
  margin-right: 0.375rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform var(--t) var(--ease-out);
}
.nav__link:hover .nav__icon { transform: translateY(0.125rem); }
.chev {
  width: 0.625rem;
  height: 0.625rem;
  margin-left: 0.3125rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform var(--t) var(--ease-out);
}
.nav__indicator {
  /* hover pill that slides between nav links (positioned by JS) */
  position: absolute;
  top: 50%;
  left: 0;
  height: 2.25rem;
  margin-top: -1.125rem;
  width: var(--w, 0);
  border-radius: 62rem;
  background: rgba(4, 120, 87, 0.08);
  transform: translateX(var(--x, 0));
  opacity: 0;
  pointer-events: none;
  transition: transform 350ms var(--ease-out), width 350ms var(--ease-out), opacity 200ms ease;
}
.nav__indicator.is-visible { opacity: 1; }

/* Mega menu for Features: opens on hover and on keyboard focus inside it */
.mega {
  position: absolute;
  top: 100%;
  left: 50%;
  z-index: 10;
  width: 42rem;
  padding-top: 0.75rem;
  transform: translateX(-30%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 200ms ease, visibility 0s linear 220ms;
}
.mega__panel {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--white);
  box-shadow: var(--shadow-xl), 0 0 0 1px rgba(11, 40, 33, 0.02);
  transform: translateY(-0.5rem) scale(0.97);
  transform-origin: 30% 0;
  transition: transform 260ms var(--ease-out);
}
.nav__item--menu:hover .mega,
.nav__item--menu:focus-within .mega {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 200ms ease, visibility 0s;
}
.nav__item--menu:hover .mega__panel,
.nav__item--menu:focus-within .mega__panel { transform: none; }
.nav__item--menu:hover .chev,
.nav__item--menu:focus-within .chev { transform: rotate(180deg); }
.nav__item--menu.is-closed .mega { opacity: 0; visibility: hidden; pointer-events: none; }
.nav__item--menu.is-closed .chev { transform: none; }

.mega__cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem 1rem;
  padding: 1.25rem 1.25rem 1rem;
}
.mega__title {
  margin: 0.25rem 0.75rem 0.5rem;
  color: var(--text);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.mega__link {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
  padding: 0.75rem;
  border-radius: var(--radius-sm);
  transition: background-color var(--t-fast);
}
.mega__link:hover,
.mega__link:focus-visible { background: var(--soft); }
.mega__icon {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.625rem;
  background: var(--soft);
  color: var(--green);
  transition: background-color var(--t-fast), color var(--t-fast);
}
.mega__icon .icon { width: 1.125rem; height: 1.125rem; }
.mega__link:hover .mega__icon { background: var(--green); color: var(--white); }
.mega__name { display: block; color: var(--ink); font-size: var(--fs-small); font-weight: 600; line-height: 1.35; }
.mega__desc { display: block; margin-top: 0.125rem; color: var(--text); font-size: var(--fs-xs); line-height: 1.45; }
.mega__foot {
  display: flex;
  align-items: center;
  padding: 0.875rem 2rem;
  border-top: 1px solid var(--line);
  background: var(--soft);
  color: var(--green);
  font-size: var(--fs-small);
  font-weight: 600;
}
.mega__foot:hover { color: var(--green-hover); }

.menu-toggle {
  display: inline-grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-left: auto;
  margin-right: -0.5rem;
  border-radius: var(--radius-sm);
  transition: background-color var(--t-fast);
}
.menu-toggle:hover { background: var(--soft); }
.menu-toggle__bars { position: relative; display: block; width: 1.375rem; height: 1rem; }
.menu-toggle__bars span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 0.125rem;
  border-radius: 0.125rem;
  background: var(--ink);
  transition: transform 260ms var(--ease-out), opacity 160ms ease, top 260ms var(--ease-out), width 260ms var(--ease-out);
}
.menu-toggle__bars span:nth-child(1) { top: 0; }
.menu-toggle__bars span:nth-child(2) { top: calc(50% - 0.0625rem); width: 70%; }
.menu-toggle__bars span:nth-child(3) { top: calc(100% - 0.125rem); }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars span:nth-child(1) { top: calc(50% - 0.0625rem); transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars span:nth-child(2) { opacity: 0; transform: scaleX(0.2); }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars span:nth-child(3) { top: calc(50% - 0.0625rem); transform: rotate(-45deg); }

/* Mobile menu: a drawer sliding in from the right over a dimmed backdrop.
   js/main.js toggles .is-open, locks the page scroll (html.menu-open) and
   keeps keyboard focus inside while it is open. */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 100;
  visibility: hidden;
  pointer-events: none;
  transition: visibility 0s linear 380ms;
}
.mobile-menu.is-open { visibility: visible; pointer-events: auto; transition: visibility 0s; }
.mobile-menu__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(11, 40, 33, 0.45);
  -webkit-backdrop-filter: blur(0.125rem);
  backdrop-filter: blur(0.125rem);
  opacity: 0;
  transition: opacity 320ms var(--ease-out);
}
.mobile-menu.is-open .mobile-menu__backdrop { opacity: 1; }
.mobile-menu__panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  width: min(22.5rem, 88vw);
  overflow-y: auto;
  overscroll-behavior: contain;
  background:
    radial-gradient(ellipse 90% 30% at 100% 0%, rgba(110, 231, 183, 0.28), transparent 70%),
    var(--white);
  box-shadow: -1.5rem 0 3rem -1rem rgba(11, 40, 33, 0.35);
  transform: translateX(100%);
  transition: transform 380ms var(--ease-out);
}
.mobile-menu.is-open .mobile-menu__panel { transform: none; }
.mobile-menu__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--header-h);
  padding: 0 0.75rem 0 1.25rem;
  border-bottom: 1px solid var(--line);
}
.mobile-menu__brand img { width: auto; height: 1.625rem; }
.mobile-menu__close {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: var(--soft);
  color: var(--ink);
  transition: background-color var(--t-fast), transform var(--t) var(--ease-out);
}
.mobile-menu__close svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.mobile-menu__close:hover { background: var(--pale); transform: rotate(90deg); }

.mobile-menu__inner { flex: 1; padding: 1rem 1.25rem 1.5rem; }
.mobile-menu__list { display: grid; gap: 0.25rem; }
.mobile-menu__list a {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  min-height: 3.5rem;
  padding: 0.375rem 0.75rem 0.375rem 0.5rem;
  border-radius: var(--radius);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  transition: background-color var(--t-fast), color var(--t-fast);
}
.mobile-menu__list a:hover,
.mobile-menu__list a[aria-current="page"] { background: var(--soft); color: var(--green-hover); }
.mobile-menu__icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.75rem;
  background: linear-gradient(180deg, #E3F8EE, #D1F2E2);
  color: var(--green);
}
.mobile-menu__icon .icon { width: 1.25rem; height: 1.25rem; }
.mobile-menu__list .arrow { width: 0.75rem; height: 0.75rem; margin-left: auto; color: var(--green); }
.mobile-menu__label {
  margin: 1.5rem 0 0.75rem 0.5rem;
  color: var(--green);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.mobile-menu__chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.mobile-menu__chips a {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  min-height: 2.5rem;
  padding: 0.375rem 0.875rem 0.375rem 0.6875rem;
  border: 1px solid var(--line);
  border-radius: 62rem;
  background: var(--white);
  color: var(--ink);
  font-size: var(--fs-small);
  font-weight: 600;
  transition: border-color var(--t-fast), color var(--t-fast);
}
.mobile-menu__chips .icon { width: 1rem; height: 1rem; color: var(--green); }
.mobile-menu__chips a:hover { border-color: var(--green); color: var(--green-hover); }

.mobile-menu__foot {
  display: grid;
  gap: 0.625rem;
  padding: 1.25rem 1.25rem calc(1.25rem + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  background: var(--soft);
}
.mobile-menu__contact {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.25rem 1.25rem;
  margin-top: 0.25rem;
  font-size: var(--fs-small);
}
.mobile-menu__contact a { padding-block: 0.375rem; color: var(--text); font-weight: 600; }
.mobile-menu__contact a:hover { color: var(--green); }

/* Items slide in one after another as the drawer opens */
.mobile-menu.is-open .mobile-menu__list li,
.mobile-menu.is-open .mobile-menu__label,
.mobile-menu.is-open .mobile-menu__chips,
.mobile-menu.is-open .mobile-menu__foot > * { animation: drawer-in 420ms var(--ease-out) both; }
.mobile-menu.is-open .mobile-menu__list li:nth-child(1) { animation-delay: 80ms; }
.mobile-menu.is-open .mobile-menu__list li:nth-child(2) { animation-delay: 120ms; }
.mobile-menu.is-open .mobile-menu__list li:nth-child(3) { animation-delay: 160ms; }
.mobile-menu.is-open .mobile-menu__list li:nth-child(4) { animation-delay: 200ms; }
.mobile-menu.is-open .mobile-menu__label,
.mobile-menu.is-open .mobile-menu__chips { animation-delay: 240ms; }
.mobile-menu.is-open .mobile-menu__foot > * { animation-delay: 280ms; }
@keyframes drawer-in {
  from { opacity: 0; transform: translateX(1.5rem); }
  to { opacity: 1; transform: none; }
}

/* Without JS the toggle cannot work: show the menu as a plain list and let the
   header scroll away with the page */
@media (max-width: 55.99em) {
  .no-js .site-header { position: relative; }
  .no-js .hero { margin-top: 0; padding-top: clamp(3rem, 1.5rem + 5vw, 5.5rem); }
}
.no-js .menu-toggle,
.no-js .mobile-menu__backdrop,
.no-js .mobile-menu__head { display: none; }
.no-js .mobile-menu { position: static; visibility: visible; pointer-events: auto; }
.no-js .mobile-menu__panel { position: static; width: auto; transform: none; box-shadow: none; }

@media (min-width: 56em) {
  .header__inner { gap: 2rem; }
  .header__nav { display: block; margin-inline: auto; }
  .header__actions { display: flex; align-items: center; gap: 0.625rem; }
  /* Login as a quiet outlined pill, the same height as Request Demo */
  .header__login {
    min-height: 2.5rem;
    padding: 0.5rem 0.875rem 0.5rem 1.0625rem;
    border: 1px solid #DCE7E1;
    background: rgba(255, 255, 255, 0.7);
    font-weight: 600;
    transition: color var(--t-fast), border-color var(--t-fast);
  }
  .header__login:hover { border-color: rgba(4, 120, 87, 0.45); }
  .menu-toggle,
  .mobile-menu,
  .no-js .mobile-menu { display: none; }
}

/* 5. Sections
   ========================================================================== */

/* --- 5.1 Hero and gradient stripe ----------------------------------------- */
.hero {
  position: relative;
  isolation: isolate;
  margin-top: calc(var(--header-h) * -1);
  padding-top: calc(var(--header-h) + clamp(2.25rem, 1rem + 3.5vw, 4rem));
  padding-bottom: clamp(3.5rem, 2rem + 4vw, 6rem);
  overflow: hidden;
  background: var(--white);
}
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.hero__glow {
  position: absolute;
  top: -22rem;
  left: -14rem;
  width: 60rem;
  height: 44rem;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(110, 231, 183, 0.28), transparent);
}
/* A faint grid always visible on the left, fading out towards the devices
   and towards the bottom of the hero */
.hero__grid--base {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(4, 120, 87, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(4, 120, 87, 0.07) 1px, transparent 1px);
  background-size: 4rem 4rem;
  background-position: center top;
  -webkit-mask-image: linear-gradient(90deg, #000 0, rgba(0, 0, 0, 0.6) 25%, transparent 58%), linear-gradient(180deg, #000 60%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, #000 0, rgba(0, 0, 0, 0.6) 25%, transparent 58%), linear-gradient(180deg, #000 60%, transparent);
  mask-composite: intersect;
}
/* A grid revealed only around the pointer (JS sets --mx / --my) */
.hero__grid--lit {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(4, 120, 87, 0.28) 1px, transparent 1px),
    linear-gradient(90deg, rgba(4, 120, 87, 0.28) 1px, transparent 1px);
  background-size: 4rem 4rem;
  background-position: center top;
  -webkit-mask-image: radial-gradient(13rem circle at var(--mx, -50rem) var(--my, -50rem), #000, transparent 70%);
  mask-image: radial-gradient(13rem circle at var(--mx, -50rem) var(--my, -50rem), #000, transparent 70%);
}

.hero__inner {
  position: relative;
  display: grid;
  gap: 1.5rem;
}
.hero__head { max-width: 56rem; }
.hero__eyebrow { margin-bottom: 1.375rem; }
.hero__title {
  font-size: var(--fs-h1);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.045em;
}
.hero__title-accent {
  display: grid;
  justify-items: start;
  color: var(--green);
  white-space: nowrap;
}
/* Invisible copy of the longest word: the accent line always has its size */
.hero__title-accent::before {
  content: attr(data-reserve);
  grid-area: 1 / 1;
  visibility: hidden;
}
.hero__title-accent > .typer { grid-area: 1 / 1; }
.hero__sub {
  max-width: 30rem;
  margin-top: 1.25rem;
  color: var(--text);
  text-wrap: balance;
  font-size: clamp(1rem, 0.94rem + 0.25vw, 1.125rem);
  line-height: 1.6;
}
/* Typed venue word (js/main.js) with a blinking caret */
.typer {
  display: inline-block;
  /* Room for descenders (g, y): text clipped to its background would cut them */
  padding-block: 0.04em 0.2em;
  margin-block: -0.04em -0.2em;
  background: linear-gradient(100deg, var(--green) 0%, #0F766E 25%, var(--green-hover) 50%, #0F766E 75%, var(--green) 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.typer.is-typing::after {
  content: "";
  display: inline-block;
  width: 0.06em;
  height: 0.82em;
  margin-left: 0.06em;
  border-radius: 0.03em;
  background: var(--green);
  vertical-align: -0.04em;
  animation: caret 1.1s ease-in-out infinite;
}
.typer.is-busy::after { animation: none; }
/* The finished word fades and lifts away before the next one types in */
.typer {
  transition: opacity 360ms var(--ease-out), translate 360ms var(--ease-out);
}
.typer.is-leaving { opacity: 0; translate: 0 -0.12em; }
.hero__side { max-width: 44rem; }
.hero__actions { margin-top: 0.75rem; }

/* The live gradient stripe: a full-bleed band behind the devices that sweeps
   up to the right. Static CSS gradient underneath for no-JS / no-WebGL. */
.hero__visual-wrap {
  position: relative;
  margin-top: clamp(1.75rem, 1rem + 2vw, 2.5rem);
}
/* Below .hero__bg so the pointer grid and column guides draw over it. The
   edges fade out through a mask instead of a hard clip. */
.stripe {
  position: absolute;
  z-index: -2;
  left: 50%;
  width: 100vw;
  margin-left: -50vw;
  top: 14%;
  bottom: 4%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(172deg, transparent 0, #000 22%, #000 62%, transparent 96%);
  mask-image: linear-gradient(172deg, transparent 0, #000 22%, #000 62%, transparent 96%);
  background:
    radial-gradient(ellipse 40% 70% at 15% 60%, #A7F3D0, transparent 70%),
    radial-gradient(ellipse 35% 80% at 45% 40%, #ECFCCB, transparent 70%),
    radial-gradient(ellipse 40% 70% at 75% 50%, #86E8C2, transparent 70%),
    radial-gradient(ellipse 30% 60% at 95% 30%, #CCFBF1, transparent 70%),
    linear-gradient(100deg, #D1FAE5, #A7F3D0 50%, #CCFBF1);
}
.stripe__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1.2s ease;
}
.stripe__canvas.is-live { opacity: 1; }

@media (min-width: 64em) {
  /* Wide screens: copy on the left, devices on the right. The visual column
     is a little wider and reaches into the right margin where there is room. */
  .hero__inner {
    position: static;
    grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
    grid-template-rows: auto auto;
    column-gap: clamp(2rem, 4vw, 3.5rem);
    row-gap: 1.25rem;
    align-items: center;
  }
  .hero__head { grid-column: 1; grid-row: 1; align-self: end; }
  .hero__side { grid-column: 1; grid-row: 2; align-self: start; }
  .hero__title { font-size: clamp(2.75rem, 1rem + 3.4vw, 4rem); }
  .hero__visual-wrap {
    position: static;
    grid-column: 2;
    grid-row: 1 / span 2;
    margin-top: 0;
  }
  /* .hero prefix: the base .hero__visual rule comes later in the file */
  .hero .hero__visual {
    width: calc(100% + 1.5rem);
    max-width: 42rem;
    margin: -2.5rem -1.5rem 0 auto;
  }

  /* The gradient fills the hero behind the devices and ends in a diagonal
     edge. A white veil keeps the copy on a near-white ground for AA contrast,
     and a top fade keeps the header calm. */
  .stripe {
    top: 0;
    bottom: 0;
    left: 0;
    width: auto;
    right: 0;
    margin-left: 0;
    -webkit-mask-image: linear-gradient(174deg, #000 0, #000 52%, transparent 94%);
    mask-image: linear-gradient(174deg, #000 0, #000 52%, transparent 94%);
  }
  /* The veil is anchored to the copy column (--col = its left edge at any
     viewport width) and fades out below the copy, so the lower part of the
     ribbon stays vivid behind the devices. */
  .stripe::after {
    --col: max(var(--gutter), 50% - var(--container) / 2);
    content: "";
    position: absolute;
    z-index: 1;
    inset: 0;
    background:
      linear-gradient(180deg,
        rgba(255, 255, 255, 0.9) 0, rgba(255, 255, 255, 0.62) var(--header-h), rgba(255, 255, 255, 0) 11rem),
      radial-gradient(52rem 46rem at calc(var(--col) + 13rem) 30rem,
        rgba(255, 255, 255, 0.97) 0%, rgba(255, 255, 255, 0.9) 45%, rgba(255, 255, 255, 0) 78%),
      linear-gradient(90deg,
        rgba(255, 255, 255, 0.92) 0, rgba(255, 255, 255, 0.72) calc(var(--col) + 22rem),
        rgba(255, 255, 255, 0) calc(var(--col) + 44rem));
    -webkit-mask-image: linear-gradient(180deg, #000 0, #000 50rem, transparent 64rem);
    mask-image: linear-gradient(180deg, #000 0, #000 50rem, transparent 64rem);
  }
}

.hero__visual {
  position: relative;
  max-width: 38rem;
  margin-inline: auto;
}
/* Soft glow concentrated behind the mockups */
.hero__visual::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 4% 2% 10% 8%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(52, 211, 153, 0.26), rgba(167, 243, 208, 0.12) 60%, transparent);
  filter: blur(1.5rem);
  pointer-events: none;
}
/* No 3D, scale or rotation on the mockups or their parents, and no
   will-change: those make the browser rasterize the screenshots once and
   resample them, which blurs the small UI text. */
.hero__stage { position: relative; }
/* Three mockups on one stage, sized and placed in % of the stage so the
   composition scales as a unit: monitor at the back, tablet front left,
   phone front right. The bottom of the stage is left free for the notes.
   Nothing here moves after the entrance, so the screenshots stay sharp. */
.hero__stage {
  aspect-ratio: 100 / 84;
  container-type: inline-size;
}
.hero-device { position: absolute; }
.hero-device img { width: 100%; height: auto; }
/* The monitor image includes the mascot peeking over its top-left corner,
   so the canvas has extra room on the left and top; this places the bezel
   where the plain monitor sat (bezel from ~16% to ~93% of the stage). */
.hero-device--monitor { top: -1%; left: 5.5%; width: 94.5%; z-index: 1; }
.hero-device--tablet { bottom: 12%; left: 0; width: 50%; z-index: 2; }
.hero-device--phone { bottom: 11%; right: 1%; width: 21.5%; z-index: 3; }
.hero-device--monitor img { filter: drop-shadow(0 1.25rem 1.75rem rgba(11, 40, 33, 0.2)); }
.hero-device--tablet img,
.hero-device--phone img { filter: drop-shadow(0 1.5rem 1.75rem rgba(11, 40, 33, 0.3)); }

/* Notes: sizes follow the stage width (cqw) so they scale with the mockups */
.hero__notes { position: absolute; inset: 0; z-index: 4; pointer-events: none; }

.live-card {
  position: absolute;
  top: 2%;
  right: 5%;
  display: flex;
  align-items: center;
  gap: 0.9em;
  padding: 0.85em 1.5em 0.85em 0.85em;
  border: 1px solid rgba(4, 120, 87, 0.1);
  border-radius: 1.1em;
  background: var(--white);
  box-shadow: 0 1.25em 2.5em -1em rgba(11, 40, 33, 0.35), 0 0.15em 0.4em rgba(11, 40, 33, 0.06);
  font-size: clamp(0.625rem, 2.15cqw, 1rem);
  line-height: 1.25;
  white-space: nowrap;
  rotate: 2deg;
}
.live-card__icon {
  display: grid;
  place-items: center;
  width: 2.9em;
  height: 2.9em;
  border-radius: 0.8em;
  background: #DCFCE7;
}
.live-card__icon svg {
  width: 1.6em;
  height: 1.6em;
  fill: none;
  stroke: var(--green);
  stroke-width: 3;
  stroke-linecap: round;
}
.live-card__body { display: grid; gap: 0.2em; }
.live-card__title {
  display: flex;
  align-items: center;
  gap: 0.5em;
  color: var(--green-hover);
  font-family: var(--font-display);
  font-size: 1.3em;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.live-card__title .live-dot { width: 0.5em; height: 0.5em; background: var(--emerald); }
.live-card__sub { padding-left: 0.85em; color: var(--text); font-size: 1em; }
.live-card__spark {
  position: absolute;
  top: 18%;
  right: -1.6em;
  width: 1.5em;
  fill: none;
  stroke: var(--emerald);
  stroke-width: 3.5;
  stroke-linecap: round;
}

/* Handwritten labels with drawn arrows */
.scribble {
  position: absolute;
  margin: 0;
  color: var(--green);
  font-family: "Caveat Brush", "Segoe Print", "Bradley Hand", cursive;
  font-size: clamp(0.8125rem, 3.1cqw, 1.5rem);
  opacity: 0.92;
  line-height: 0.95;
  letter-spacing: 0.01em;
  /* a white outline so the label reads over the mockups and the gradient */
  text-shadow:
    0.05em 0 0 #fff, -0.05em 0 0 #fff, 0 0.05em 0 #fff, 0 -0.05em 0 #fff,
    0.035em 0.035em 0 #fff, -0.035em 0.035em 0 #fff, 0.035em -0.035em 0 #fff, -0.035em -0.035em 0 #fff,
    0 0.15em 0.4em rgba(11, 40, 33, 0.18);
  white-space: nowrap;
}
.scribble--pos { left: 4%; bottom: 2%; rotate: -5deg; }
.scribble--qr { right: 10%; bottom: 1%; rotate: -6deg; text-align: right; }
.scribble__arrow {
  position: absolute;
  bottom: 88%;
  width: 1.5em;
  height: 1.7em;
  overflow: visible;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.scribble--pos .scribble__arrow { left: 0.15em; }
.scribble--qr .scribble__arrow { left: 0.6em; }
.scribble__arrow g:first-child { stroke: #fff; stroke-width: 9; }
.scribble__arrow g:last-child { stroke: var(--green); stroke-width: 4; }
@container (max-width: 30rem) {
  .scribble { display: none; }
}

/* Phones: rows of buttons stack as equal, full-width buttons (easier to tap) */
@media (max-width: 29.99em) {
  .eyebrow-pill { font-size: 0.75rem; letter-spacing: 0.08em; }
  .btn-row,
  .footer-cta__actions { flex-direction: column; align-items: stretch; }
  .btn-row > .btn,
  .footer-cta__actions > .btn { width: 100%; }
}

/* --- 5.2 Capability index ------------------------------------------------- */
.index {
  position: relative;
  padding-block: clamp(3rem, 2rem + 3vw, 4.5rem) clamp(3.5rem, 2.5rem + 4vw, 5.5rem);
  overflow: hidden;
}
.index__title {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-bottom: 2rem;
  color: var(--ink);
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  font-weight: 700;
  letter-spacing: -0.035em;
}
.index__title::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--line-strong), transparent);
}
.index__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.index__list > li {
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.index__item {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  height: 100%;
  padding: 1.5rem 1.25rem 1.75rem;
  transition: background-color var(--t);
}
.index__item::before {
  /* green rule that grows along the top edge on hover */
  content: "";
  position: absolute;
  left: -1px;
  right: -1px;
  top: -1px;
  height: 0.125rem;
  background: linear-gradient(90deg, var(--green), var(--emerald));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 400ms var(--ease-out);
}
.index__item:hover { background: linear-gradient(180deg, var(--soft), rgba(243, 248, 245, 0)); }
.index__item:hover::before { transform: scaleX(1); }
/* Icon tile: pale mint with a green icon at rest, solid green with a white
   icon on hover (the two layers cross-fade, so the gradient never flashes) */
.index__icon {
  position: relative;
  isolation: isolate;
  display: inline-grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  margin-bottom: 0.5rem;
  border: 1px solid rgba(4, 120, 87, 0.1);
  border-radius: 0.875rem;
  background: linear-gradient(160deg, #EAFBF3, #D5F5E6);
  box-shadow: 0 0.5rem 1rem -0.5rem rgba(4, 120, 87, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  color: var(--green);
  transition: color var(--t) var(--ease-out), box-shadow var(--t) var(--ease-out), transform var(--t) var(--ease-out);
}
.index__icon::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(145deg, var(--emerald), var(--green));
  opacity: 0;
  transition: opacity var(--t) var(--ease-out);
}
.index__icon .icon { width: 1.375rem; height: 1.375rem; }
.index__item:hover .index__icon,
.index__item:focus-visible .index__icon {
  color: var(--white);
  box-shadow: 0 0.625rem 1.25rem -0.5rem rgba(4, 120, 87, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  transform: translateY(-0.125rem);
}
.index__item:hover .index__icon::before,
.index__item:focus-visible .index__icon::before { opacity: 1; }
/* Name and arrow always share one line */
.index__name {
  display: inline-flex;
  align-items: center;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.3;
}
.index__name .arrow { display: none; color: var(--green); }
@media (min-width: 64em) {
  .index__name { white-space: nowrap; }
  .index__name .arrow { display: inline-block; }
}
.index__desc { color: var(--text); font-size: 0.875rem; line-height: 1.5; }
@media (min-width: 40em) { .index__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 80em) {
  .index__list { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .index__item { padding-inline: 1rem; }
}

.marquee {
  position: relative;
  margin-top: 2rem;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.marquee__track { display: flex; width: max-content; }
.marquee__list {
  display: flex;
  flex: none;
  align-items: center;
  gap: 0.625rem;
  padding-right: 0.625rem;
}
.tag {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4375rem 1rem;
  border: 1px solid var(--line);
  border-radius: 62rem;
  background: var(--soft);
  color: var(--text);
  font-size: var(--fs-small);
  font-weight: 500;
  white-space: nowrap;
}
.tag::before {
  content: "";
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 50%;
  background: var(--emerald);
}

/* --- 5.3 Journey: five steps of one order, joined by a live line ---------- */
.journey {
  --visual-h: clamp(11rem, 7rem + 8vw, 15rem);
  background: linear-gradient(180deg, var(--white) 0%, #F5FBF8 55%, var(--white) 100%);
}
.journey__glow {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(40rem 22rem at 18% 62%, rgba(110, 231, 183, 0.18), transparent 70%),
    radial-gradient(36rem 20rem at 62% 58%, rgba(167, 243, 208, 0.22), transparent 70%),
    radial-gradient(30rem 18rem at 92% 70%, rgba(110, 231, 183, 0.14), transparent 70%);
}

.journey__head { display: grid; gap: 1.5rem; }
.eyebrow-pill--soft {
  margin-bottom: 1.25rem;
  padding: 0.5rem 1rem;
  border-color: transparent;
  background: #E3F7EE;
  box-shadow: none;
  color: var(--green);
  font-weight: 700;
}
.journey__title { font-size: clamp(1.875rem, 1.3rem + 2vw, 2.75rem); line-height: 1.08; }
.journey__accent {
  display: block;
  background: linear-gradient(100deg, var(--green) 0%, var(--emerald) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* room for descenders: the text is clipped to this box */
  padding-bottom: 0.08em;
}
.journey__intro { max-width: 33rem; font-size: clamp(1rem, 0.95rem + 0.2vw, 1.125rem); line-height: 1.7; }
@media (min-width: 64em) {
  .journey__head {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    column-gap: 4rem;
    align-items: end;
  }
  .journey__intro { padding-bottom: 0.375rem; }
  .journey__intro { justify-self: end; }
}

.journey__flow { position: relative; margin-top: clamp(3rem, 2rem + 3vw, 4.5rem); }
.journey__steps {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 3rem 2rem;
}
.journey__step {
  display: grid;
  align-content: start;
  gap: 1.75rem;
}
.journey__text { display: flex; align-items: flex-start; gap: 1rem; }
.journey__num {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--emerald), var(--green));
  box-shadow: 0 0 0 0.4375rem rgba(16, 185, 129, 0.12), 0 0 0 0.9375rem rgba(16, 185, 129, 0.06);
  color: var(--white);
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0;
}
.journey__step-title {
  margin-bottom: 0.4375rem;
  font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  letter-spacing: -0.02em;
  line-height: 1.25;
}
.journey__text p { color: var(--text); font-size: 0.9375rem; line-height: 1.55; }

/* Visuals share one height so the row lines up; sizes inside follow the
   visual's width (cqw) */
/* Narrow screens: each visual takes the height it needs; the five-across
   layout below gives them one shared height */
.journey__visual {
  position: relative;
  display: grid;
  place-items: center;
  min-height: var(--visual-h);
  container-type: inline-size;
}
.journey__visual img { filter: drop-shadow(0 1.25rem 1.5rem rgba(11, 40, 33, 0.22)); }
.journey__visual--phone img { width: auto; height: max(15rem, calc(var(--visual-h) * 1.1)); rotate: -8deg; }
.journey__visual--tablet img { width: min(100%, 26rem); rotate: -5deg; }

/* Kitchen display, drawn in HTML */
.jr-kds {
  width: 100%;
  padding: 0.6em;
  border: 0.35em solid #1F2A27;
  border-radius: 0.9em;
  background: #0E1714;
  box-shadow: 0 1.5rem 2.5rem -1rem rgba(11, 40, 33, 0.45);
  color: rgba(255, 255, 255, 0.92);
  font-size: clamp(0.5625rem, 4.3cqw, 0.8125rem);
  line-height: 1.25;
}
.jr-kds__bar { display: flex; justify-content: space-between; margin-bottom: 0.6em; font-weight: 600; }
.jr-kds__bar span + span { color: rgba(255, 255, 255, 0.5); font-weight: 500; }
.jr-kds__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.4em; }
.jr-kds__col { display: grid; align-content: start; gap: 0.35em; }
.jr-kds__head {
  display: flex;
  justify-content: space-between;
  gap: 0.4em;
  padding: 0.35em 0.5em;
  border-radius: 0.4em;
  font-weight: 700;
}
.jr-kds__col--new .jr-kds__head { background: #FBBF24; color: #1F1A07; }
.jr-kds__col--prep .jr-kds__head { background: #3B82F6; color: var(--white); }
.jr-kds__col--ready .jr-kds__head { background: var(--emerald); color: var(--white); }
.jr-kds__ticket {
  display: grid;
  padding: 0.35em 0.5em;
  border-radius: 0.4em;
  background: rgba(255, 255, 255, 0.07);
  font-weight: 600;
}
.jr-kds__ticket b { color: rgba(255, 255, 255, 0.55); font-weight: 600; }
.jr-kds__ticket small { color: rgba(255, 255, 255, 0.5); font-size: 0.9em; font-weight: 500; }

/* Bill, drawn in HTML */
.jr-bill {
  width: min(100%, 17rem);
  padding: 1.1em 1.2em;
  border: 1px solid var(--line);
  border-radius: 1.1em;
  background: var(--white);
  box-shadow: var(--shadow);
  color: var(--ink);
  font-size: clamp(0.625rem, 5.2cqw, 0.875rem);
  line-height: 1.3;
}
.jr-bill__top { display: flex; align-items: center; gap: 0.6em; margin-bottom: 0.9em; }
.jr-bill__top b { font-size: 1.15em; }
.jr-bill__top small { margin-left: auto; color: var(--green-600); font-size: 0.85em; font-weight: 600; }
.jr-bill__check {
  display: grid;
  place-items: center;
  width: 1.8em;
  height: 1.8em;
  border-radius: 50%;
  background: var(--emerald);
  color: var(--white);
}
.jr-bill__check .icon { width: 1.1em; height: 1.1em; stroke-width: 3; }
.jr-bill__rows { display: grid; gap: 0.45em; margin: 0; }
.jr-bill__rows div { display: flex; justify-content: space-between; gap: 1em; }
.jr-bill__rows dt { color: var(--text); }
.jr-bill__rows dd { margin: 0; font-weight: 600; }
.jr-bill__rows--tax { margin-top: 0.8em; padding-top: 0.8em; border-top: 1px dashed var(--line-strong); }
.jr-bill__total {
  display: flex;
  justify-content: space-between;
  margin-top: 0.8em;
  padding-top: 0.8em;
  border-top: 1px solid var(--line);
  font-size: 1.1em;
  font-weight: 800;
}

/* Sales trend card, drawn in HTML and SVG */
.jr-trend {
  position: relative;
  width: 100%;
  padding: 1em 1em 0.8em;
  border: 1px solid var(--line);
  border-radius: 1.1em;
  background: var(--white);
  box-shadow: var(--shadow);
  color: var(--ink);
  font-size: clamp(0.625rem, 5.2cqw, 0.875rem);
}
.jr-trend__title { display: grid; gap: 0.2em; font-weight: 700; }
.jr-trend__title small { color: var(--text); font-size: 0.85em; font-weight: 500; }
.jr-trend__total {
  position: absolute;
  top: -0.9em;
  right: -0.6em;
  display: grid;
  gap: 0.1em;
  padding: 0.7em 0.9em;
  border: 1px solid var(--line);
  border-radius: 0.8em;
  background: var(--white);
  box-shadow: var(--shadow);
}
.jr-trend__total small { color: var(--text); font-size: 0.85em; font-weight: 600; }
.jr-trend__total b { font-size: 1.45em; letter-spacing: -0.02em; }
.jr-trend__total span { color: var(--green-600); font-size: 0.8em; font-weight: 600; }
.jr-trend__chart { width: 100%; height: 7em; margin-top: 1.4em; overflow: visible; }
.jr-trend__area { fill: url(#trend-fill); }
.jr-trend__line { fill: none; stroke: var(--emerald); stroke-width: 2.5; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.jr-trend__days {
  display: flex;
  justify-content: space-between;
  margin-top: 0.4em;
  color: var(--text);
  font-size: 0.8em;
}

/* Bottom panel: the three advantages in one card */
.journey__panel {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 1.5rem;
  margin-top: clamp(2.5rem, 1.5rem + 2vw, 3.5rem);
  padding: clamp(1.25rem, 0.9rem + 1vw, 1.75rem) clamp(1.25rem, 0.75rem + 1.5vw, 2rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-2xl);
  background: var(--white);
  box-shadow: var(--shadow-lg);
}
.journey__adv { display: flex; align-items: flex-start; gap: 1.125rem; }
.journey__adv-icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 1rem;
  background: linear-gradient(160deg, #EAFBF3, #D5F5E6);
  box-shadow: 0 0.5rem 1rem -0.5rem rgba(4, 120, 87, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  color: var(--green);
}
.journey__adv-icon .icon { width: 1.625rem; height: 1.625rem; stroke-width: 1.9; }
.journey__adv-title { margin-bottom: 0.3125rem; font-size: 1.0625rem; letter-spacing: -0.02em; line-height: 1.3; }
.journey__adv p { color: var(--text); font-size: 0.9375rem; line-height: 1.5; }
.journey__tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.75rem; }
.journey__tags span {
  padding: 0.1875rem 0.6875rem;
  border-radius: 62rem;
  background: #E3F7EE;
  color: var(--green-hover);
  font-size: var(--fs-xs);
  font-weight: 600;
}

/* The joining line only exists when the five steps sit in one row */
.journey__line { display: none; }

/* Phones: one column with a vertical timeline through the numbered circles;
   the visuals line up with the text, right of the line */
@media (max-width: 39.99em) {
  .journey__steps { padding-bottom: 0.5rem; }
  .journey__steps::before,
  .journey__steps::after {
    content: "";
    position: absolute;
    top: 1.375rem;
    bottom: 0;
    left: calc(1.375rem - 1px);
    width: 2px;
    pointer-events: none;
  }
  .journey__steps::before {
    background: linear-gradient(180deg, rgba(16, 185, 129, 0.55), rgba(16, 185, 129, 0.55) 85%, transparent);
  }
  .journey__steps::after {
    background: linear-gradient(180deg, transparent, var(--emerald) 50%, transparent) no-repeat;
    background-size: 100% 7rem;
    background-position: 0 -7rem;
  }
  .journey__num { position: relative; z-index: 1; }
  .journey__visual { margin-left: 3.75rem; }
}

@media (min-width: 40em) {
  .journey__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 56em) and (max-width: 79.99em) {
  .journey__steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 79.99em) {
  .journey__adv + .journey__adv { padding-top: 1.75rem; border-top: 1px solid var(--line); }
}
/* Wide screens: the five steps in one row, joined by the line */
@media (min-width: 80em) {
  .journey { --visual-h: clamp(13rem, 4rem + 11vw, 15.5rem); }
  .journey__steps { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2rem; }
  .journey__step { grid-template-rows: auto var(--visual-h); gap: 2rem; }
  .journey__text { gap: 0.5rem; }
  .journey__num { width: 2.375rem; height: 2.375rem; font-size: 0.8125rem; }
  /* desktop shows the step titles only; phones and tablets keep the line below */
  .journey__text p { display: none; }
  .journey__text { align-items: center; }
  /* the titles are short enough for one line; they still wrap if space runs out */
  .journey__step-title { margin-bottom: 0; font-size: 0.9375rem; letter-spacing: -0.01em; line-height: 1.3; }
  .journey__num { box-shadow: 0 0 0 0.3125rem rgba(16, 185, 129, 0.12), 0 0 0 0.6875rem rgba(16, 185, 129, 0.05); }
  .journey__visual { height: var(--visual-h); min-height: 0; }
  /* the phone runs off the bottom and tucks under the panel */
  .journey__visual--phone img { height: calc(var(--visual-h) * 1.32); max-width: none; rotate: -9deg; translate: 0 16%; }
  .journey__visual--tablet img { width: 92%; rotate: -6deg; translate: 0 6%; }
  .jr-kds { width: 88%; font-size: clamp(0.5rem, 3.8cqw, 0.75rem); }
  .jr-kds__head { padding-inline: 0.4em; }
  .jr-bill { width: 100%; }

  /* no stacking context here, so the dots can sit above the visuals */
  .journey__line {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: block;
    height: var(--visual-h);
    pointer-events: none;
  }
  .journey__line svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
  .journey__path { fill: none; stroke: rgba(16, 185, 129, 0.6); stroke-width: 2; vector-effect: non-scaling-stroke; }
  /* a short bright segment that travels along the line */
  .journey__path--light { stroke: var(--emerald); stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: 6 94; stroke-dashoffset: 100; }
  .journey__dot {
    position: absolute;
    z-index: 2;
    left: var(--x);
    top: var(--y);
    width: 0.875rem;
    height: 0.875rem;
    border: 0.1875rem solid var(--emerald);
    border-radius: 50%;
    background: var(--white);
    box-shadow: 0 0 0 0.375rem rgba(16, 185, 129, 0.16);
    translate: -50% -50%;
  }
  .journey__panel { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-top: 1.25rem; }
  .journey__adv + .journey__adv { padding-left: 2rem; border-left: 1px solid var(--line); }
  .journey__adv:not(:last-child) { padding-right: 2rem; }
}

/* --- 5.4 Product tour: POS, QR, Captain App, KDS (sticky stage) ----------- */
.tour {
  position: relative;
  isolation: isolate;
  padding-block: var(--section-y);
  background:
    radial-gradient(ellipse 50% 40% at 85% 30%, rgba(110, 231, 183, 0.1), transparent 70%),
    radial-gradient(ellipse 40% 35% at 10% 85%, rgba(110, 231, 183, 0.07), transparent 70%),
    var(--white);
}
.chapter { scroll-margin-top: var(--header-h); }
.chapter + .chapter { margin-top: clamp(4.5rem, 3rem + 5vw, 6rem); }
.chapter__title { max-width: 15ch; }
.chapter__lead {
  max-width: 34rem;
  margin-top: 1.25rem;
  font-size: var(--fs-lead);
  line-height: 1.6;
}
.benefits {
  display: grid;
  gap: 0.75rem;
  margin-top: 1.75rem;
  color: var(--ink);
  font-weight: 600;
}
.benefits li { display: flex; align-items: center; gap: 0.75rem; line-height: 1.4; }
.benefits .icon {
  flex: none;
  width: 1.375rem;
  height: 1.375rem;
  padding: 0.25rem;
  border-radius: 50%;
  background: rgba(4, 120, 87, 0.1);
  color: var(--green);
  stroke-width: 2.6;
}
.chapter__media {
  display: flex;
  justify-content: center;
  margin-top: 2.5rem;
  padding: clamp(1rem, 0.5rem + 2vw, 2rem);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background:
    radial-gradient(ellipse 70% 60% at 50% 50%, rgba(110, 231, 183, 0.22), transparent 72%),
    linear-gradient(180deg, #FBFDFC, var(--soft));
}
.tour__rail,
.tour__stage { display: none; }

@media (min-width: 64em) {
  .tour__inner {
    display: grid;
    grid-template-columns: minmax(0, 44fr) minmax(0, 56fr);
    gap: clamp(3rem, 0.5rem + 4vw, 5rem);
    align-items: start;
  }
  .tour__chapters {
    display: grid;
    grid-template-columns: 2.25rem minmax(0, 1fr);
    column-gap: clamp(1.25rem, 0.5rem + 1.2vw, 2rem);
  }
  .chapter {
    grid-column: 2;
    display: flex;
    align-items: center;
    min-height: 88vh;
    padding-block: 3rem;
  }
  .chapter + .chapter { margin-top: 0; }
  /* The first copy starts level with the stage's tab bar and the last one
     ends level with the stage, so the tour has no empty band above or below */
  .chapter:first-of-type { align-items: flex-start; padding-top: 0; }
  .chapter:last-of-type { align-items: flex-end; padding-bottom: 0; }
  .chapter__media { display: none; }
  .chapter .eyebrow__num { display: none; }   /* the rail carries the numbers */
  .chapter__body { transition: opacity 300ms ease; }
  .tour.is-live .chapter:not(.is-active) .chapter__body { opacity: 0.4; }

  /* Vertical progress rail: 01 · 02 · 03 on a hairline that fills as you go */
  .tour__rail {
    --fill: 0;   /* 0 → 1, set by JS from the chapter in view */
    position: sticky;
    top: calc(50vh + var(--header-h) / 2 - 5.5rem);
    grid-column: 1;
    grid-row: 1 / span 3;
    align-self: start;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3rem;
  }
  .tour__rail::before,
  .tour__rail::after {
    content: "";
    position: absolute;
    top: 1rem;
    bottom: 1rem;
    left: 50%;
    z-index: -1;
    width: 1px;
    background: var(--line-strong);
  }
  .tour__rail::after {
    background: var(--green);
    transform: scaleY(var(--fill));
    transform-origin: top;
    transition: transform 400ms var(--ease-out);
  }
  .tour__rail li {
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2rem;
    border: 1px solid var(--line);
    border-radius: 62rem;
    background: var(--white);
    color: #8A9893;
    font-size: 0.75rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
    transition: color 300ms ease, border-color 300ms ease, background-color 300ms ease;
  }
  .tour__rail .is-done { color: var(--green); border-color: rgba(4, 120, 87, 0.3); }
  .tour__rail .is-active { background: var(--green); border-color: var(--green); color: var(--white); }

  .tour__stage {
    display: block;
    position: sticky;
    top: calc(var(--header-h) + 1.5rem);
  }
  .no-js .tour__inner,
  .no-js .tour__chapters { display: block; }
  .no-js .tour__rail,
  .no-js .tour__stage { display: none; }
  .no-js .chapter { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4rem; min-height: 0; }
  .no-js .chapter__media { display: flex; margin: 0; }
  .no-js .chapter .eyebrow__num { display: inline-grid; }
}

.stage-panel {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-2xl);
  background:
    radial-gradient(ellipse 65% 55% at 50% 58%, rgba(110, 231, 183, 0.26), transparent 72%),
    linear-gradient(180deg, #FBFDFC 0%, var(--soft) 100%);
  box-shadow: var(--shadow-sm);
}

/* Horizontal tab bar: a green indicator sits on the divider under the active tab */
.tour__tabs {
  display: grid;
  grid-template-columns: repeat(4, auto);
  justify-content: space-between;
  gap: 1rem;
  padding-inline: 1.5rem;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.7);
}
.tour__tabs a {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  padding-block: 1.125rem;
  color: var(--text);
  font-size: var(--fs-xs);
  font-weight: 600;
  white-space: nowrap;
  transition: color var(--t);
}
@media (min-width: 80em) { .tour__tabs a { font-size: var(--fs-small); } }
.tour__tabs a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  border-radius: 2px;
  background: var(--green);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 300ms var(--ease-out);
}
.tour__tabs a:hover { color: var(--ink); }
.tour__tab-num {
  color: #8A9893;
  font-size: var(--fs-xs);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  transition: color var(--t);
}
.tour__tabs a.is-active { color: var(--ink); font-weight: 700; }
.tour__tabs a.is-active::after { transform: scaleX(1); }
.tour__tabs a.is-active .tour__tab-num { color: var(--green); }

/* Screens stack in a fixed box and cross-fade, so nothing shifts */
/* A fixed 4:3 picture box (capped by the viewport height), so every tab has
   the same height and nothing below the stage shifts */
.stage-panel__screen {
  position: relative;
  aspect-ratio: 4 / 3;
  max-height: calc(100vh - var(--header-h) - 7.5rem);
}
/* Glowing green blob behind the scenes. The outline itself morphs
   (border-radius) while the shape stretches and turns, so the change of shape
   is easy to see. It is small and only lightly blurred, which keeps each
   repaint cheap; it pauses off screen and holds still under reduced motion. */
.blob {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 46%;
  aspect-ratio: 1;
  pointer-events: none;
  translate: -50% -50%;
  transition: translate 900ms var(--ease-out);
}
.blob__shape {
  position: absolute;
  inset: 0;
  border-radius: 62% 38% 54% 46% / 48% 60% 40% 52%;
  background: radial-gradient(circle at 35% 35%, #A7F3D0, #34D399 55%, #10B981);
  filter: blur(0.375rem);
  opacity: 0.5;
}
.blob__shape--b {
  inset: 30% -8% 0 40%;
  border-radius: 38% 62% 45% 55% / 55% 40% 60% 45%;
  background: radial-gradient(circle at 60% 60%, #6EE7B7, #10B981);
  opacity: 0.4;
}
/* The blob drifts a little with each tab */
.stage-panel:has([data-stage="1"].is-active) .blob { translate: -40% -54%; }
.stage-panel:has([data-stage="2"].is-active) .blob { translate: -58% -46%; }
.stage-panel:has([data-stage="3"].is-active) .blob { translate: -46% -56%; }

.stage-item {
  position: absolute;
  inset: clamp(1rem, 0.25rem + 1.2vw, 1.75rem);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 250ms ease, visibility 0s linear 250ms;
}
.stage-item.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity 250ms ease, visibility 0s;
}
/* Product scenes (transparent WebP): shown whole, never cropped, never upscaled
   past their native width, so the screens inside stay sharp */
.scene { width: 100%; height: auto; }
.stage-item .scene { width: 100%; height: 100%; max-width: 72rem; object-fit: contain; }

/* --- 5.8 Pricing: one plan, sticky price card + scrolling feature list ---- */
.plan {
  overflow: visible;   /* .section clips by default, which would stop the sticky card */
  background:
    radial-gradient(ellipse 50% 45% at 10% 20%, rgba(110, 231, 183, 0.18), transparent 70%),
    radial-gradient(ellipse 45% 40% at 95% 75%, rgba(110, 231, 183, 0.12), transparent 70%),
    linear-gradient(180deg, var(--white) 0%, #FAFDFB 50%, var(--white) 100%);
}
.plan__inner { display: grid; gap: 1.75rem clamp(2.5rem, 1rem + 4vw, 5rem); }
.plan__title { max-width: 22ch; }

/* Price card: content on the left, the pricing mascot on the right, inside the
   site's circling-light hairline border */
.price-card {
  position: relative;
  isolation: isolate;
  display: grid;
  padding: clamp(1.5rem, 1rem + 1.6vw, 2.5rem);
  overflow: hidden;
  border-radius: var(--radius-2xl);
  background:
    radial-gradient(ellipse 55% 70% at 85% 45%, rgba(110, 231, 183, 0.28), transparent 70%),
    radial-gradient(ellipse 60% 50% at 0% 0%, rgba(110, 231, 183, 0.14), transparent 70%),
    var(--white);
  box-shadow: 0 1.5rem 3rem -2rem rgba(11, 40, 33, 0.3);
}
.price-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  padding: 1px;
  border-radius: inherit;
  background: conic-gradient(from var(--angle), #CFE3D8 0deg, #CFE3D8 250deg, var(--emerald) 310deg, var(--mint) 330deg, #CFE3D8 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  pointer-events: none;
}
/* Offer/regular copy is swapped with the hidden attribute; keep it winning over display rules */
.price-card [hidden] { display: none; }
.price-card__body { position: relative; z-index: 1; min-width: 0; }
.price-card__art {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  max-width: 10rem;
  margin: 1.25rem auto -0.5rem;
}
.price-card__art { position: relative; z-index: 1; }
.price-card__art::before {
  /* soft mint halo behind the mascot */
  content: "";
  position: absolute;
  inset: 10% 0 4%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(110, 231, 183, 0.45), rgba(110, 231, 183, 0.12) 60%, transparent);
}
.price-card__mascot { width: 100%; height: auto; }
.price-card__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 1rem 0.5rem 0.75rem;
  border-radius: 62rem;
  background: rgba(4, 120, 87, 0.08);
  color: var(--green);
  font-size: var(--fs-small);
  font-weight: 700;
}
.price-card__badge .live-dot { width: 0.625rem; height: 0.625rem; background: var(--emerald); box-shadow: 0 0 0 0.25rem rgba(16, 185, 129, 0.18); }

/* Big price: struck-out old price above, the amount, then "/ year + GST"
   tucked under its right edge */
.price-card__price {
  position: relative;
  display: grid;
  grid-template-columns: auto auto;
  grid-template-areas: "was was" "amount per";
  justify-content: start;
  align-items: end;
  column-gap: 0.75rem;
  margin-top: 1.25rem;
  color: var(--deep);
}
.price-card__was {
  grid-area: was;
  justify-self: start;
  color: #8A9893;
  font-size: clamp(1.375rem, 1.1rem + 0.8vw, 1.75rem);
  font-weight: 700;
  line-height: 1.1;
  text-decoration-thickness: 0.125rem;
}
.price-card__amount {
  grid-area: amount;
  position: relative;
  font-size: clamp(3.5rem, 2.2rem + 4.2vw, 5.5rem);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.05em;
  line-height: 1;
}
.price-card__per {
  /* "/ year" over "+ GST", sitting beside the amount on its baseline */
  grid-area: per;
  padding-bottom: 0.5em;
  color: var(--ink);
  font-size: var(--fs-body);
  font-weight: 700;
  line-height: 1.25;
}
.price-card__per small { display: block; color: var(--text); font-size: var(--fs-xs); font-weight: 500; }
.price-card__note {
  max-width: 28rem;
  margin-top: 1.125rem;
  color: var(--text);
  font-size: var(--fs-small);
  line-height: 1.6;
}
.price-card__note strong { color: var(--ink); font-weight: 700; }
.price-card__countdown {
  margin-top: 0.5rem;
  color: var(--green);
  font-size: var(--fs-xs);
  font-weight: 700;
}
.price-card__countdown:empty { display: none; }
.price-card__list {
  display: grid;
  gap: 0.625rem;
  margin-top: 1.375rem;
  color: var(--ink);
  font-size: var(--fs-small);
  font-weight: 500;
}
.price-card__list li { display: flex; align-items: center; gap: 0.625rem; line-height: 1.4; }
.price-card__list .icon {
  width: 1.5rem;
  height: 1.5rem;
  padding: 0.3rem;
  border-radius: 50%;
  background: rgba(4, 120, 87, 0.1);
  color: var(--green);
  stroke-width: 2.6;
}
.price-card__cta { width: 100%; max-width: 26rem; margin-top: 1.75rem; }
.price-card__help {
  max-width: 26rem;
  margin-top: 0.875rem;
  color: var(--text);
  font-size: var(--fs-xs);
  text-align: center;
}
.price-card__help a { color: var(--green); font-weight: 600; text-decoration: underline; text-underline-offset: 0.2em; }
.price-card__help a:hover { color: var(--green-hover); }
/* Two columns only when the card itself is wide enough (container query), so
   the mascot never squeezes the price on mid-size screens */
.plan__aside { container-type: inline-size; }
@container (min-width: 28rem) {
  .price-card__badge { white-space: nowrap; }
}
/* Mid widths: a smaller mascot tucked into the top-right corner beside the price */
@container (min-width: 28rem) and (max-width: 39.99rem) {
  .price-card__art {
    position: absolute;
    top: 4.5rem;
    right: 1rem;
    width: 9.5rem;
    margin: 0;
  }
  .price-card__note { max-width: calc(100% - 10rem); }
}
@container (min-width: 40rem) {
  .price-card { grid-template-columns: minmax(0, 1fr) minmax(16rem, 1fr); align-items: center; gap: 0; }
  .price-card__art { width: 100%; max-width: 22rem; margin: -0.5rem -1rem 0 0; justify-self: end; }
}

/* Included features: compact icon + title tiles in small labelled groups */
.plan__features { display: grid; gap: 1.75rem; }
.plan__features-head {
  color: var(--green);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.fset__title {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-bottom: 0.75rem;
  color: var(--ink);
  font-size: var(--fs-small);
  font-weight: 700;
}
.fset__title::before {
  content: "";
  width: 0.4375rem;
  height: 0.4375rem;
  border-radius: 50%;
  background: var(--emerald);
  box-shadow: 0 0 0 0.25rem rgba(16, 185, 129, 0.15);
}
.fset__title::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--line-strong), transparent); }
.fset__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.625rem;
}
.ftile {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 3.75rem;
  padding: 0.75rem 0.875rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: linear-gradient(90deg, rgba(236, 253, 245, 0) 0%, rgba(255, 255, 255, 0.92) 40%);
  background-color: rgba(255, 255, 255, 0.92);
  color: var(--ink);
  font-size: var(--fs-small);
  font-weight: 600;
  line-height: 1.3;
  transition: border-color 300ms var(--ease-out), box-shadow 300ms var(--ease-out), transform 300ms var(--ease-out), background-color 300ms var(--ease-out);
}
.ftile:hover {
  border-color: rgba(4, 120, 87, 0.25);
  background-color: #F6FCF9;
  box-shadow: 0 0.75rem 1.5rem -1.125rem rgba(11, 40, 33, 0.35);
  transform: translateX(0.25rem);
}
.ftile__icon {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.75rem;
  background: linear-gradient(160deg, #ECFDF5, #D1FAE5);
  color: var(--green);
  transition: background 300ms var(--ease-out), color 300ms var(--ease-out), transform 300ms var(--ease-out);
}
.ftile__icon .icon { width: 1.125rem; height: 1.125rem; }
.ftile:hover .ftile__icon { background: var(--green); color: var(--white); transform: scale(1.06); }
/* Phones: icon above the name, so two tiles fit side by side (after the base rules above) */
@media (max-width: 39.99em) {
  /* icon above the name, so two tiles fit side by side */
  .ftile { flex-direction: column; align-items: flex-start; gap: 0.5rem; min-height: 0; padding: 0.75rem; }
  .ftile:hover { transform: translateY(-0.125rem); }
}
@media (min-width: 64em) { .fset__grid { grid-template-columns: minmax(0, 1fr); } }   /* desktop: one per row beside the price card */

@media (min-width: 64em) {
  .plan__inner {
    grid-template-columns: minmax(0, 2fr) minmax(17rem, 1fr);
    row-gap: 1.75rem;
    gap: clamp(3rem, 1rem + 4vw, 5.5rem);
    align-items: start;
  }
}
@media (min-width: 64em) {
  .plan__intro { grid-column: 1 / -1; }
  /* JS adds .is-stuck-ok only when the card fits below the navbar, so it never
     slides underneath the header on short screens */
  .plan__aside.is-stuck-ok {
    position: sticky;
    top: calc(var(--header-h) + 1.5rem);
  }
}
/* Laptop-height screens: tighten the card so it still fits (and sticks) below the navbar */
@media (min-width: 64em) and (max-height: 52em) {
  .price-card { padding-block: 1.5rem; }
  .price-card__price { margin-top: 1rem; }
  .price-card__amount { font-size: clamp(3.25rem, 2rem + 3.4vw, 4.5rem); }
  .price-card__note { margin-top: 0.75rem; }
  .price-card__list { margin-top: 1rem; gap: 0.5rem; }
  .price-card__cta { margin-top: 1.25rem; }
  .plan__aside.is-stuck-ok { top: calc(var(--header-h) + 1rem); }
}

/* --- 5.9 FAQ (white) ------------------------------------------------------ */
.section.faq { padding-top: clamp(2.5rem, 2rem + 2vw, 3.5rem); overflow: visible; }
.faq__inner { display: grid; gap: 2.5rem; }
.faq__intro .h2 { max-width: 15ch; }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item:first-child { border-top: 1px solid var(--line); }
.faq__q { font-size: inherit; letter-spacing: normal; }
.faq__btn {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  width: 100%;
  padding: 1.375rem 0;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.01em;
  text-align: left;
  transition: color var(--t-fast);
}
.faq__num {
  color: var(--text);
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: 0.04em;
  transition: color var(--t);
}
.faq__btn:hover,
.faq__item.is-open .faq__btn { color: var(--green-hover); }
.faq__btn:hover .faq__num,
.faq__item.is-open .faq__num { color: var(--green); }
.faq__icon {
  width: 2.25rem;
  height: 2.25rem;
  padding: 0.5rem;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--white);
  color: var(--green);
  stroke-width: 2;
  transition: transform 350ms var(--ease-out), background-color var(--t), border-color var(--t), color var(--t);
}
/* Plus to minus: the vertical stroke lives in the #i-plus symbol, which
   selectors outside the <use> cannot reach, so its scale is passed down with
   --plus-v. It shrinks to nothing while the icon turns half a circle. */
.plus-v {
  transform-box: fill-box;
  transform-origin: center;
  transform: scaleY(var(--plus-v, 1));
  transition: transform 350ms var(--ease-out);
}
.faq__btn:hover .faq__icon { border-color: var(--green); }
.faq__item.is-open .faq__icon { --plus-v: 0; background: var(--green); border-color: var(--green); color: var(--white); transform: rotate(180deg); }
.faq__panel-inner p { max-width: 60ch; padding: 0 0 1.5rem 3.25rem; }
.faq__panel-inner a { color: var(--green); font-weight: 600; text-decoration: underline; text-decoration-color: rgba(4, 120, 87, 0.35); text-underline-offset: 0.18em; }
.faq__panel-inner a:hover { color: var(--green-hover); text-decoration-color: currentColor; }

/* With JS: collapsible panels with a smooth height transition */
.js .faq__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 380ms var(--ease-out);
}
.js .faq__panel-inner {
  min-height: 0;
  overflow: hidden;
  visibility: hidden;
  transition: visibility 0s linear 380ms;
}
.js .faq__item.is-open .faq__panel { grid-template-rows: 1fr; }
.js .faq__item.is-open .faq__panel-inner { visibility: visible; transition-delay: 0s; }
.no-js .faq__icon { display: none; }

@media (min-width: 64em) {
  .faq__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.65fr); gap: 5rem; align-items: start; }
  .faq__intro { position: sticky; top: calc(var(--header-h) + 2rem); }
}

/* --- 5.11 Footer (deep green) ------------------------------------------------ */
/* Layers, back to front: mint glows and a faint grid (.footer__bg), the
   closing CTA card, brand + link columns, an oversized fading wordmark, and
   the bottom bar drawn over the wordmark's lower edge. */
.site-footer {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-top: clamp(3.5rem, 2rem + 5vw, 6rem);
  background: var(--deep);
  color: var(--on-dark);
  font-size: var(--fs-small);
}
.site-footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(110, 231, 183, 0.6), transparent);
}
.footer__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.footer__glow { position: absolute; border-radius: 50%; filter: blur(4rem); }
.footer__glow--a {
  top: -12rem;
  left: 50%;
  width: min(52rem, 120%);
  height: 28rem;
  background: radial-gradient(closest-side, rgba(16, 185, 129, 0.38), transparent);
  transform: translateX(-50%);
}
.footer__glow--b {
  right: -8rem;
  bottom: -6rem;
  width: 32rem;
  height: 24rem;
  background: radial-gradient(closest-side, rgba(110, 231, 183, 0.16), transparent);
}
.footer__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 3.5rem 3.5rem;
  background-position: 50% 0;
  -webkit-mask-image: radial-gradient(ellipse 70% 55% at 50% 0%, #000, transparent);
  mask-image: radial-gradient(ellipse 70% 55% at 50% 0%, #000, transparent);
}

/* Closing CTA card */
.footer-cta {
  position: relative;
  isolation: isolate;
  display: grid;
  gap: 2rem;
  padding: clamp(1.75rem, 1rem + 3vw, 3.5rem);
  border-radius: var(--radius-2xl);
  background:
    radial-gradient(ellipse 55% 90% at 100% 0%, rgba(110, 231, 183, 0.2), transparent 70%),
    radial-gradient(ellipse 45% 70% at 0% 100%, rgba(16, 185, 129, 0.14), transparent 70%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02));
  box-shadow: 0 2.5rem 5rem -2.5rem rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
/* Circling light border, the same technique as the price card */
.footer-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  padding: 1px;
  border-radius: inherit;
  background: conic-gradient(from var(--angle), rgba(255, 255, 255, 0.12) 0deg, rgba(255, 255, 255, 0.12) 250deg, var(--emerald) 310deg, var(--mint) 330deg, rgba(255, 255, 255, 0.12) 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  pointer-events: none;
}
.footer-cta__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  margin-bottom: 1rem;
  color: var(--mint);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.footer-cta__title {
  max-width: 20ch;
  color: var(--white);
  font-size: clamp(1.875rem, 1.2rem + 2.4vw, 3rem);
  font-weight: 800;
}
.footer-cta__title span {
  background: linear-gradient(90deg, var(--mint), #A7F3D0 60%, var(--emerald));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.footer-cta__text { max-width: 46ch; margin-top: 1rem; font-size: var(--fs-body); }
.footer-cta__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* Buttons for dark backgrounds */
.btn--mint {
  background-color: var(--mint);
  background-image: linear-gradient(180deg, #9AF3D0 0%, var(--mint) 100%);
  color: var(--deep);
  box-shadow: 0 0.75rem 1.75rem -0.75rem rgba(110, 231, 183, 0.6), inset 0 0.0625rem 0 rgba(255, 255, 255, 0.5);
}
.btn--mint:hover {
  background-color: #A7F3D0;
  background-image: none;
  box-shadow: 0 1rem 2.25rem -0.75rem rgba(110, 231, 183, 0.75), inset 0 0.0625rem 0 rgba(255, 255, 255, 0.5);
}
.btn--glass {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.2);
  color: var(--white);
  -webkit-backdrop-filter: blur(0.375rem);
  backdrop-filter: blur(0.375rem);
}
.btn--glass:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: var(--mint);
}
.btn__icon {
  flex: none;
  width: 1.125rem;
  height: 1.125rem;
  margin-right: 0.5rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform var(--t) var(--ease-out);
}
.btn:hover > .btn__icon { transform: translateY(0.125rem); }

/* Brand and link columns */
.footer__inner {
  display: grid;
  gap: 3rem;
  padding-top: clamp(3rem, 2rem + 3vw, 4.5rem);
}
.footer__logo-link { display: inline-block; padding-block: 0.5rem; border-radius: 0.375rem; }
.footer__logo { width: auto; height: 1.75rem; }
.footer__line { max-width: 32ch; margin-top: 1.25rem; color: var(--white); font-size: 1rem; }
.footer__platforms { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.5rem; }
.footer__platforms li {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  padding: 0.375rem 0.8125rem 0.375rem 0.625rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 62rem;
  background: rgba(255, 255, 255, 0.04);
  color: var(--white);
  font-size: var(--fs-xs);
  font-weight: 600;
}
.footer__platforms .icon { width: 1rem; height: 1rem; color: var(--mint); }
.footer__company { margin-top: 1.5rem; color: var(--on-dark-muted); }
.footer__nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2.5rem 1.5rem;
}
.footer__heading {
  margin-bottom: 0.5rem;
  color: var(--mint);
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.footer__col ul { display: grid; gap: 0; }
/* Links: a mint underline grows from the left on hover. The padding gives a
   comfortable tap height; the underline stays under the text (content box). */
.footer__col a {
  display: inline-block;
  padding-block: 0.5rem;
  background: linear-gradient(var(--mint), var(--mint)) 0 100% / 0 1px no-repeat;
  background-origin: content-box;
  background-clip: content-box;
  color: var(--on-dark);
  transition: color var(--t-fast), background-size var(--t) var(--ease-out);
}
.footer__col a:hover { color: var(--white); background-size: 100% 1px; }

/* Oversized wordmark: mint fading to nothing, with a slow light sweep */
.footer__wordmark {
  margin-top: clamp(1.5rem, 0.5rem + 3vw, 3rem);
  margin-bottom: -0.16em;
  font-family: var(--font-display);
  font-size: min(21vw, 16rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.055em;
  text-align: center;
  white-space: nowrap;
  background:
    linear-gradient(100deg, transparent 40%, rgba(167, 243, 208, 0.3) 50%, transparent 60%) 120% 0 / 250% 100% no-repeat,
    linear-gradient(180deg, rgba(110, 231, 183, 0.24) 10%, rgba(110, 231, 183, 0.02) 80%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  user-select: none;
  pointer-events: none;
}

.footer__bottom {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 2rem;
  color: var(--on-dark-muted);
  font-size: var(--fs-xs);
}
.footer__bottom::before {
  content: "";
  flex-basis: 100%;
  height: 1px;
  margin-bottom: 0.5rem;
  background: var(--line-dark);
}
.footer__top {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;   /* comfortable to tap */
  color: var(--on-dark);
  font-weight: 600;
  transition: color var(--t-fast);
}
.footer__top:hover { color: var(--white); }
@media (min-width: 48em) { .footer__nav { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 64em) {
  .footer-cta { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 3rem; }
  .footer__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); gap: 4rem; }
}

/* --- 5.12 Legal pages (privacy, terms, refunds) -------------------------------- */
/* A small mint band with the title, then one readable column. From 64em a
   sticky contents list sits on the left; below that it is a collapsible
   "On this page" box above the text (js/main.js opens/closes it). */
.legal-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin-top: calc(var(--header-h) * -1);
  padding-top: calc(var(--header-h) + clamp(2.25rem, 1.25rem + 3vw, 3.75rem));
  padding-bottom: clamp(2rem, 1.25rem + 2.5vw, 3.25rem);
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(ellipse 45% 90% at 85% 0%, rgba(110, 231, 183, 0.32), transparent 70%),
    radial-gradient(ellipse 40% 80% at 5% 100%, rgba(167, 243, 208, 0.3), transparent 70%),
    linear-gradient(180deg, #E6F7EE 0%, var(--pale) 100%);
}
/* Checked grid, the same 4rem squares as the home hero, fading out towards
   the bottom and the right so the title stays clean */
.legal-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(4, 120, 87, 0.15) 1px, transparent 1px),
    linear-gradient(90deg, rgba(4, 120, 87, 0.15) 1px, transparent 1px);
  background-size: 4rem 4rem;
  background-position: center top;
  -webkit-mask-image: linear-gradient(90deg, #000 0, rgba(0, 0, 0, 0.8) 50%, rgba(0, 0, 0, 0.35) 100%), linear-gradient(180deg, #000 45%, rgba(0, 0, 0, 0.15));
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, #000 0, rgba(0, 0, 0, 0.8) 50%, rgba(0, 0, 0, 0.35) 100%), linear-gradient(180deg, #000 45%, rgba(0, 0, 0, 0.15));
  mask-composite: intersect;
}
.legal-hero__title { font-size: clamp(2.125rem, 1.6rem + 2.2vw, 3.25rem); }
.legal-hero__updated {
  margin-top: 0.875rem;
  color: var(--green-hover);
  font-size: var(--fs-small);
  font-weight: 600;
}

.legal__layout { padding-block: clamp(2rem, 1.25rem + 2.5vw, 3.5rem) var(--section-y); }

/* Contents: a soft mint card. On small screens it is a collapsible box;
   from 64em it is the sticky sidebar. Every entry stays on one line and
   ends in an ellipsis when it is too long (the full name is in its title). */
.legal-toc { margin-bottom: 2rem; }
.legal-toc__box {
  border: 1px solid #D3ECDF;
  border-radius: var(--radius-lg);
  background:
    radial-gradient(ellipse 80% 40% at 100% 0%, rgba(110, 231, 183, 0.22), transparent 70%),
    linear-gradient(180deg, #EEF9F3 0%, #F7FCF9 100%);
  box-shadow: 0 1rem 2rem -1.75rem rgba(11, 40, 33, 0.35);
}
.legal-toc__box summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.875rem 1.125rem;
  color: var(--ink);
  font-size: var(--fs-small);
  font-weight: 700;
  list-style: none;
  cursor: pointer;
}
.legal-toc__box summary::-webkit-details-marker { display: none; }
.legal-toc__box summary .chev { width: 0.75rem; height: 0.75rem; margin: 0; color: var(--green); }
.legal-toc__box[open] summary .chev { transform: rotate(180deg); }
.legal-toc__list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);   /* lets long entries shrink to an ellipsis */
  gap: 0.125rem;
  padding: 0 0.5rem 0.625rem;
  font-size: var(--fs-small);
  line-height: 1.4;
}
.legal-toc__list a {
  position: relative;
  display: block;
  overflow: hidden;
  padding: 0.5rem 0.75rem 0.5rem 0.875rem;
  border-radius: 0.625rem;
  color: var(--text);
  white-space: nowrap;
  text-overflow: ellipsis;
  transition: color var(--t-fast), background-color var(--t-fast), box-shadow var(--t-fast);
}
.legal-toc__list a::before {
  /* green bar on the active entry */
  content: "";
  position: absolute;
  top: 0.5rem;
  bottom: 0.5rem;
  left: 0.3125rem;
  width: 3px;
  border-radius: 3px;
  background: var(--green);
  opacity: 0;
  transition: opacity var(--t-fast);
}
.legal-toc__list a:hover { color: var(--green); background: rgba(255, 255, 255, 0.6); }
.legal-toc__list a.is-active {
  background: var(--white);
  box-shadow: 0 0.125rem 0.5rem -0.125rem rgba(11, 40, 33, 0.14);
  color: var(--green-hover);
  font-weight: 600;
}
.legal-toc__list a.is-active::before { opacity: 1; }

/* Long-form text */
.legal__body { color: var(--text); font-size: var(--fs-body); line-height: 1.75; }
.legal__intro { color: var(--ink); font-size: var(--fs-lead); line-height: 1.65; }
.legal__body h2 {
  margin-top: 2.75rem;
  font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  letter-spacing: -0.02em;
}
.legal__body h3 {
  margin-top: 1.75rem;
  font-size: 1.0625rem;
  letter-spacing: -0.01em;
}
.legal__body p,
.legal__body ul,
.legal__body address { margin-top: 1rem; }
.legal__body h2 + p,
.legal__body h2 + ul,
.legal__body h2 + address,
.legal__body h3 + ul { margin-top: 0.75rem; }
.legal__body ul { padding-left: 1.25rem; list-style: disc; }
.legal__body li { padding-left: 0.25rem; }
.legal__body li + li { margin-top: 0.5rem; }
.legal__body li::marker { color: var(--emerald); }
.legal__body strong { color: var(--ink); font-weight: 650; }
.legal__body a {
  color: var(--green);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(4, 120, 87, 0.35);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  overflow-wrap: anywhere;
  transition: color var(--t-fast), text-decoration-color var(--t-fast);
}
.legal__body a:hover { color: var(--green-hover); text-decoration-color: currentColor; }
/* Contact details read like any other paragraph: no box, no bold, and the
   email link keeps the text colour with only a faint underline */
.legal__body address { font-style: normal; }
.legal__body a[href^="mailto:"] {
  color: inherit;
  font-weight: inherit;
  text-decoration-color: rgba(83, 97, 93, 0.35);
}
.legal__body a[href^="mailto:"]:hover { color: var(--green); }
.legal__related {
  margin-top: 3rem !important;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  font-size: var(--fs-small);
}

/* Desktop: the layout spans the same container as the header */
@media (min-width: 64em) {
  .legal__layout {
    display: grid;
    grid-template-columns: 16.5rem minmax(0, 1fr);
    gap: clamp(2.5rem, 0.5rem + 4vw, 4.5rem);
    align-items: start;
  }
  .legal-toc {
    position: sticky;
    top: calc(var(--header-h) + 1.5rem);
    margin: 0;
  }
  .legal-toc__box { padding-top: 1.125rem; }
  .legal-toc__box summary { display: none; }
  .legal-toc__box::before {
    content: "On this page";
    display: block;
    margin: 0 1.125rem 0.625rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #D3ECDF;
    color: var(--green);
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }
  /* The list scrolls inside the card when it is taller than the screen.
     The height is set on the list itself: a <details> cannot be a flex
     container for its content, so the card cannot constrain it.
     4.5rem = the card's "On this page" title, its divider and border. */
  .legal-toc__list {
    max-height: calc(100vh - var(--header-h) - 3rem - 4.5rem);
    overflow-y: auto;
    padding-bottom: 0.75rem;
    scrollbar-width: thin;
    scrollbar-color: #B7DCC9 transparent;
  }
}

/* --- 5.13 Download page ---------------------------------------------------------- */
/* A mint hero with the checked grid and the mascot, three option cards that
   overlap the bottom of the hero, and a comparison table. */
.dl-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin-top: calc(var(--header-h) * -1);
  padding-top: calc(var(--header-h) + clamp(1rem, 0.25rem + 2vw, 1.75rem));
  padding-bottom: clamp(4.25rem, 3rem + 3vw, 6rem);   /* room for the cards that overlap it */
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(ellipse 45% 75% at 78% 45%, rgba(110, 231, 183, 0.38), transparent 70%),
    radial-gradient(ellipse 40% 70% at 0% 100%, rgba(167, 243, 208, 0.3), transparent 70%),
    linear-gradient(180deg, #E6F7EE 0%, #F4FBF7 100%);
}
/* The same 4rem checked grid as the home and legal heroes */
.dl-hero__grid {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(4, 120, 87, 0.13) 1px, transparent 1px),
    linear-gradient(90deg, rgba(4, 120, 87, 0.13) 1px, transparent 1px);
  background-size: 4rem 4rem;
  background-position: center top;
  -webkit-mask-image: linear-gradient(180deg, #000 40%, transparent);
  mask-image: linear-gradient(180deg, #000 40%, transparent);
}
.dl-hero__inner {
  display: grid;
  justify-items: center;
  gap: 1rem;
  text-align: center;
}
.dl-hero__copy { display: flex; flex-direction: column; align-items: center; }
.dl-hero__eyebrow { margin-bottom: 1.25rem; }
.dl-hero__title {
  max-width: 14ch;
  font-size: clamp(2.625rem, 1.6rem + 4vw, 4.5rem);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 1.02;
}
.dl-hero__title span {
  display: block;
  /* The gradient is clipped to this box; extra room at the bottom keeps the
     tail of the "y" visible without changing the line spacing */
  padding-bottom: 0.14em;
  margin-bottom: -0.14em;
  background: linear-gradient(90deg, var(--green) 0%, var(--emerald) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.dl-hero__sub { max-width: 46ch; margin-top: 1.25rem; font-size: var(--fs-lead); line-height: 1.6; }
.dl-hero__mascot {
  width: clamp(13rem, 9.5rem + 14vw, 17.75rem);
  height: auto;
  filter: drop-shadow(0 1.5rem 1.5rem rgba(11, 40, 33, 0.18));
}
@media (min-width: 56em) {
  .dl-hero__inner {
    grid-template-columns: minmax(0, 1fr) auto;
    justify-items: start;
    align-items: center;
    gap: clamp(2rem, 1rem + 4vw, 5rem);
    text-align: left;
  }
  .dl-hero__copy { align-items: flex-start; }
  /* The hat rises into the top spacing (it stays below the header), so the
     bigger mascot does not make the hero taller */
  .dl-hero__mascot { width: clamp(17.75rem, 7rem + 16.5vw, 22.5rem); margin: -1.5rem clamp(0rem, -4rem + 6vw, 3rem) 0 0; }
}

/* Option cards, pulled up over the bottom of the hero */
.dl-options {
  position: relative;
  z-index: 1;
  margin-top: clamp(-5rem, -2.25rem - 3vw, -3rem);
}
.dl-cards { display: grid; gap: 1.5rem; }
.dl-card {
  display: flex;
  flex-direction: column;
  padding: clamp(1.75rem, 1.25rem + 1.2vw, 2.5rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-2xl);
  background: var(--white);
  box-shadow: 0 1.5rem 3rem -2rem rgba(11, 40, 33, 0.3), 0 0.125rem 0.375rem rgba(11, 40, 33, 0.04);
  transition: transform var(--t) var(--ease-out), box-shadow var(--t) var(--ease-out), border-color var(--t);
}
.dl-card:hover {
  border-color: rgba(4, 120, 87, 0.3);
  box-shadow: 0 2rem 3.5rem -2rem rgba(11, 40, 33, 0.38), 0 0.125rem 0.375rem rgba(11, 40, 33, 0.05);
  transform: translateY(-0.25rem);
}
.dl-card__icon {
  display: grid;
  place-items: center;
  width: 3.75rem;
  height: 3.75rem;
  margin-bottom: 1.75rem;
  border: 1px solid var(--line);
  border-radius: 1rem;
  background: linear-gradient(180deg, var(--white), var(--soft));
  box-shadow: 0 0.375rem 0.875rem -0.5rem rgba(11, 40, 33, 0.25);
  color: var(--green);
}
.dl-card__icon .icon { width: 1.75rem; height: 1.75rem; stroke-width: 1.6; }
.dl-card__label {
  color: var(--green);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.dl-card__name { margin-top: 0.375rem; font-size: clamp(1.5rem, 1.35rem + 0.5vw, 1.75rem); letter-spacing: -0.025em; }
.dl-card__desc { margin-top: 0.875rem; line-height: 1.65; }
.dl-card__btn { margin-top: auto; }
.dl-card__desc { margin-bottom: 2rem; }
@media (min-width: 64em) {
  .dl-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Comparison table: scrolls inside its own box on narrow screens */
.dl-head { max-width: 46rem; margin-bottom: clamp(2rem, 1.25rem + 2vw, 3rem); }
.dl-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background: var(--white);
  box-shadow: var(--shadow-sm);
}
.dl-table-wrap:focus-visible { outline-offset: 0.25rem; }
.dl-table {
  width: 100%;
  min-width: 46rem;
  border-collapse: collapse;
  font-size: var(--fs-small);
  line-height: 1.5;
}
.dl-table th,
.dl-table td { padding: 1rem 1.25rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.dl-table tbody tr:last-child > * { border-bottom: 0; }
.dl-table thead th { background: var(--soft); color: var(--ink); font-weight: 700; }
.dl-table tbody th { width: 8rem; color: var(--ink); font-weight: 600; }
/* The row labels stay pinned while the table scrolls sideways on phones */
.dl-table tr > :first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--white);
  box-shadow: inset -1px 0 0 var(--line);
}
.dl-table thead tr > :first-child { background: var(--soft); }
.dl-table td:nth-child(2) { background: rgba(110, 231, 183, 0.07); }
.dl-table__head { display: inline-flex; align-items: center; gap: 0.5rem; }
.dl-table__head .icon { color: var(--green); }
.dl-yes {
  display: inline-block;
  margin-right: 0.25rem;
  padding: 0.0625rem 0.5rem;
  border-radius: 62rem;
  background: #DCFCE7;
  color: var(--green-hover);
  font-size: 0.75rem;
  font-weight: 700;
}
@media (min-width: 48em) {
  .dl-table tbody th { width: 11rem; }
  .dl-table tr > :first-child { box-shadow: none; }
}

/* --- 5.14 Contact page -------------------------------------------------------- */
/* One section over the mint background and checked grid: the heading and
   mascot on the left, the form card and direct contact details on the right. */
.contact {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin-top: calc(var(--header-h) * -1);
  padding-top: calc(var(--header-h) + clamp(1.75rem, 0.75rem + 3vw, 3.5rem));
  padding-bottom: var(--section-y);
  background:
    radial-gradient(ellipse 50% 60% at 15% 70%, rgba(110, 231, 183, 0.3), transparent 70%),
    radial-gradient(ellipse 45% 55% at 90% 10%, rgba(167, 243, 208, 0.3), transparent 70%),
    linear-gradient(180deg, #E9F8F0 0%, #F6FCF9 55%, var(--white) 100%);
}
.contact__grid {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(4, 120, 87, 0.11) 1px, transparent 1px),
    linear-gradient(90deg, rgba(4, 120, 87, 0.11) 1px, transparent 1px);
  background-size: 4rem 4rem;
  background-position: center top;
  -webkit-mask-image: linear-gradient(180deg, #000 30%, transparent 85%);
  mask-image: linear-gradient(180deg, #000 30%, transparent 85%);
}
.contact__inner {
  display: grid;
  grid-template-areas: "intro" "mascot" "side";
  gap: 1.5rem;
}
.contact__intro { grid-area: intro; }
.contact__title {
  display: inline-flex;
  align-items: flex-start;
  gap: 0.2em;
  font-size: clamp(2.75rem, 1.75rem + 4vw, 4.75rem);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 1.05;
}
.contact__title span { color: var(--green); }
.contact__spark {
  width: 0.5em;
  height: 0.5em;
  margin-top: -0.15em;
  fill: none;
  stroke: var(--emerald);
  stroke-width: 4;
  stroke-linecap: round;
}
.contact__sub { margin-top: 0.75rem; color: var(--text); font-size: var(--fs-lead); line-height: 1.5; }
.contact__mascot {
  grid-area: mascot;
  justify-self: center;
  width: min(100%, 28rem);
  height: auto;
}
.contact__side { grid-area: side; display: grid; gap: 1.25rem; align-content: start; }

/* Form card */
.contact-card {
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-2xl);
  background: var(--white);
  box-shadow: 0 2rem 4rem -2.5rem rgba(11, 40, 33, 0.35), 0 0.125rem 0.375rem rgba(11, 40, 33, 0.04);
}
.contact-card__title { font-size: clamp(1.5rem, 1.3rem + 0.8vw, 1.875rem); letter-spacing: -0.025em; }
.contact-card__text { margin-top: 0.5rem; margin-bottom: 1.5rem; font-size: var(--fs-small); }

/* Direct contact details below the form */
.contact-direct { display: grid; gap: 1rem; }
.contact-direct__item {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 0.875rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background: rgba(255, 255, 255, 0.85);
  box-shadow: var(--shadow-sm);
  transition: border-color var(--t), box-shadow var(--t), transform var(--t) var(--ease-out);
}
.contact-direct__item:hover { border-color: rgba(4, 120, 87, 0.35); box-shadow: var(--shadow); transform: translateY(-0.125rem); }
.contact-direct__icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: var(--green);
  color: var(--white);
  box-shadow: 0 0.5rem 1rem -0.5rem rgba(4, 120, 87, 0.6);
}
.contact-direct__icon .icon { width: 1.25rem; height: 1.25rem; stroke-width: 1.9; }
.contact-direct__body { display: grid; min-width: 0; }
.contact-direct__label { color: var(--text); font-size: var(--fs-xs); font-weight: 600; }
.contact-direct__value {
  color: var(--ink);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}
.contact-direct__item:hover .contact-direct__value { color: var(--green); }

/* Side by side, the email card wider than the phone card so each stays on one line */
@media (min-width: 40em) {
  .contact-direct { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
}
/* Desktop: the section fills the first screen exactly (it starts under the
   header) with the content centred in it. It still fits from about 650px of
   visible height (a 1366x768 laptop): the form is compact and the mascot is
   sized from the screen height, so neither it nor the phone card is cut off. */
@media (min-width: 64em) {
  .contact {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100vh;
    min-height: 100svh;
    padding-top: calc(var(--header-h) + clamp(1rem, 0.25rem + 1.5vw, 2rem));
    padding-bottom: clamp(1.5rem, 0.75rem + 1.5vw, 2.5rem);
  }
  .contact__inner { width: 100%; }
  .contact__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 36rem);
    grid-template-areas: "intro side" "mascot side";
    grid-template-rows: auto 1fr;
    column-gap: clamp(2.5rem, 1rem + 4vw, 5rem);
    row-gap: 0;
  }
  .contact__intro { padding-top: 1.5rem; }
  .contact__title { font-size: clamp(3rem, 1.5rem + 3vw, 4.25rem); }
  .contact__mascot {
    align-self: end;
    justify-self: start;
    /* The image is 3:2 (height = width / 1.5): it takes the height left under
       the heading. Its right edge is empty, so it may run a little into the
       column gap, never further. */
    width: min(100% + 8rem, clamp(20rem, (100svh - var(--header-h) - 15.5rem) * 1.5, 42rem));
    max-width: none;   /* the base img rule would cap it at the column width */
    margin-left: -2rem;
  }
  /* Space between the header and the form card; less on short screens so the section still fits */
  .contact__side { gap: 1.25rem; padding-top: clamp(1rem, min(0.25rem + 1.75vw, 100svh - 39.25rem), 2.5rem); }
  .contact-card { padding: 2.25rem 2.25rem 2.5rem; }
  .contact-card__title { font-size: 1.625rem; }
  .contact-card__text { margin-bottom: 1.25rem; }
}

/* --- Contact Form 7 ------------------------------------------------------------
   Works with CF7's own markup and classes (wpcf7, wpcf7-form-control, -wrap,
   -not-valid-tip, -response-output and the form state classes), with or
   without CF7's stylesheet and its automatic <p>/<br>. Every rule starts with
   .contact-form .wpcf7 so it outranks theme rules like `.entry-content input`. */
.contact-form .wpcf7 { --cf-h: 3.375rem; --cf-icon: var(--text); }
.contact-form .wpcf7 form { margin: 0; }
.contact-form .wpcf7 .hidden-fields-container { display: none; }   /* CF7's hidden inputs, in a <fieldset> */
.contact-form .wpcf7 p { margin: 0; }
.contact-form .wpcf7 br { display: none; }
.contact-form .wpcf7 .screen-reader-response,
.contact-form .wpcf7 .cf-field > label,
.contact-form .wpcf7 .cf-field > p > label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.contact-form .wpcf7 .cf-grid { display: grid; gap: 1rem; }
@media (min-width: 30em) {
  .contact-form .wpcf7 .cf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact-form .wpcf7 .cf-field--full { grid-column: 1 / -1; }
}

/* Field with an icon drawn by CSS, so the CF7 template stays plain */
.contact-form .wpcf7 .cf-field { position: relative; min-width: 0; }
.contact-form .wpcf7 .cf-field::before {
  content: "";
  position: absolute;
  top: calc(var(--cf-h) / 2);
  left: 1rem;
  z-index: 1;
  width: 1.25rem;
  height: 1.25rem;
  background: var(--cf-icon);
  transform: translateY(-50%);
  pointer-events: none;
  -webkit-mask: var(--cf-svg) center / contain no-repeat;
  mask: var(--cf-svg) center / contain no-repeat;
  transition: background-color var(--t-fast);
}
.contact-form .wpcf7 .cf-field:focus-within { --cf-icon: var(--green); }
.contact-form .wpcf7 .cf-field--name { --cf-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 20.5a8 8 0 0 1 16 0'/%3E%3C/svg%3E"); }
.contact-form .wpcf7 .cf-field--phone { --cf-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M5 4h3.5l1.5 4.5-2 1.5a11 11 0 0 0 6 6l1.5-2 4.5 1.5V19a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2z'/%3E%3C/svg%3E"); }
.contact-form .wpcf7 .cf-field--restaurant { --cf-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M4 10v10h16V10M3 10l2-6h14l2 6zM3 10a3 3 0 0 0 6 0 3 3 0 0 0 6 0 3 3 0 0 0 6 0M10 20v-5h4v5'/%3E%3C/svg%3E"); }
.contact-form .wpcf7 .cf-field--type { --cf-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M6.5 13.6A3.6 3.6 0 1 1 8.4 6.8a4 4 0 0 1 7.2 0 3.6 3.6 0 1 1 1.9 6.8V19h-11zM6.5 16h11'/%3E%3C/svg%3E"); }

.contact-form .wpcf7 .wpcf7-form-control-wrap { position: relative; display: block; }
.contact-form .wpcf7 .wpcf7-form-control:not(.wpcf7-submit) {
  display: block;
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  height: var(--cf-h);
  margin: 0;
  padding: 0 1rem 0 2.875rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background-color: var(--white);
  box-shadow: none;
  color: var(--ink);
  font: inherit;
  font-size: var(--fs-body);
  line-height: 1.4;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.contact-form .wpcf7 .wpcf7-form-control:not(.wpcf7-submit)::placeholder { color: #7A8984; opacity: 1; }
.contact-form .wpcf7 .wpcf7-form-control:not(.wpcf7-submit):hover { border-color: #A9CDBB; }
.contact-form .wpcf7 .wpcf7-form-control:not(.wpcf7-submit):focus {
  border-color: var(--green);
  outline: none;
  box-shadow: 0 0 0 0.25rem rgba(16, 185, 129, 0.16);
}
/* Select: its own chevron; grey until a real option is chosen */
.contact-form .wpcf7 select.wpcf7-form-control {
  padding-right: 2.75rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' fill='none' stroke='%23047857' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 3.5l3 3 3-3'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1.125rem center;
  background-size: 0.75rem;
  cursor: pointer;
}
.contact-form .wpcf7 select.wpcf7-form-control:has(option[value=""]:checked) { color: #7A8984; }
.contact-form .wpcf7 select.wpcf7-form-control option { color: var(--ink); }

/* Errors */
/* :not(.wpcf7-submit) matches the base rule's weight, so this wins over hover and focus too */
.contact-form .wpcf7 .wpcf7-form-control.wpcf7-not-valid:not(.wpcf7-submit),
.contact-form .wpcf7 .wpcf7-form-control.wpcf7-not-valid:not(.wpcf7-submit):hover,
.contact-form .wpcf7 .wpcf7-form-control.wpcf7-not-valid:not(.wpcf7-submit):focus {
  border-color: #DC2626;
  box-shadow: 0 0 0 0.25rem rgba(220, 38, 38, 0.1);
}
.contact-form .wpcf7 .wpcf7-not-valid-tip {
  display: block;
  margin-top: 0.375rem;
  color: #B91C1C;
  font-size: var(--fs-xs);
  font-weight: 500;
  line-height: 1.4;
}

/* Submit: CF7 renders an <input>, so the paper plane is a background image */
/* A plain block (not flex), so CF7's automatic <p> around the button cannot shrink it */
.contact-form .wpcf7 .cf-submit { position: relative; margin-top: 1.25rem; }
.contact-form .wpcf7 .wpcf7-submit {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 3.5rem;
  margin: 0;
  padding: 0 1.5rem;
  border: 0;
  border-radius: var(--radius);
  background-color: var(--green);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.9' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M21 3L3 10.5l7 2.5 2.5 7z'/%3E%3Cpath d='M21 3l-11 10'/%3E%3C/svg%3E"),
    linear-gradient(180deg, #058a63 0%, var(--green) 100%);
  background-repeat: no-repeat;
  background-position: calc(50% - 5.25rem) center, 0 0;
  background-size: 1.25rem, 100% 100%;
  box-shadow: 0 0.75rem 1.5rem -0.75rem rgba(4, 120, 87, 0.7), inset 0 0.0625rem 0 rgba(255, 255, 255, 0.18);
  color: var(--white);
  font: inherit;
  font-size: 1.0625rem;
  font-weight: 700;
  text-indent: 1.5rem;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: background-color var(--t), box-shadow var(--t), transform var(--t) var(--ease-out);
}
.contact-form .wpcf7 .wpcf7-submit:hover {
  background-color: var(--green-hover);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.9' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M21 3L3 10.5l7 2.5 2.5 7z'/%3E%3Cpath d='M21 3l-11 10'/%3E%3C/svg%3E");
  box-shadow: 0 1rem 1.75rem -0.75rem rgba(4, 120, 87, 0.75);
  transform: translateY(-0.0625rem);
}
.contact-form .wpcf7 .wpcf7-submit:focus-visible { outline: 0.1875rem solid var(--green); outline-offset: 0.1875rem; }
.contact-form .wpcf7 .wpcf7-submit:disabled { cursor: wait; opacity: 0.7; }
/* CF7's spinner shows only while sending */
.contact-form .wpcf7 .wpcf7-spinner {
  position: absolute;
  top: 50%;
  right: 1.125rem;
  width: 1.25rem;
  height: 1.25rem;
  margin: -0.625rem 0 0;
  padding: 0;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: var(--white);
  border-radius: 50%;
  background: none;
  opacity: 1;
  visibility: hidden;
}
.contact-form .wpcf7 .wpcf7-spinner::before { display: none; }
.contact-form .wpcf7 form.submitting .wpcf7-spinner { visibility: visible; animation: cf-spin 800ms linear infinite; }
@keyframes cf-spin { to { transform: rotate(360deg); } }
@keyframes fz-target {
  0%, 40% { box-shadow: 0 0 0 0.375rem rgba(16, 185, 129, 0.3); }
  100% { box-shadow: 0 0 0 0.25rem rgba(16, 185, 129, 0); }
}

/* Response message under the button, coloured by CF7's form state */
.contact-form .wpcf7 form .wpcf7-response-output {
  margin: 1rem 0 0;
  padding: 0.75rem 1rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--soft);
  color: var(--ink);
  font-size: var(--fs-small);
  line-height: 1.5;
}
.contact-form .wpcf7 form.init .wpcf7-response-output,
.contact-form .wpcf7 form.resetting .wpcf7-response-output,
.contact-form .wpcf7 form.submitting .wpcf7-response-output,
.contact-form .wpcf7 form .wpcf7-response-output:empty { display: none; }
.contact-form .wpcf7 form.sent .wpcf7-response-output { border-color: #86EFAC; background: #F0FDF4; color: #166534; }
.contact-form .wpcf7 form.invalid .wpcf7-response-output,
.contact-form .wpcf7 form.unaccepted .wpcf7-response-output,
.contact-form .wpcf7 form.payment-required .wpcf7-response-output { border-color: #FCD34D; background: #FFFBEB; color: #92400E; }
.contact-form .wpcf7 form.failed .wpcf7-response-output,
.contact-form .wpcf7 form.aborted .wpcf7-response-output,
.contact-form .wpcf7 form.spam .wpcf7-response-output { border-color: #FCA5A5; background: #FEF2F2; color: #991B1B; }
/* Desktop: slightly shorter fields so the contact block fits in the first screen
   (after the rules above, which have the same weight) */
@media (min-width: 64em) {
  .contact-form .wpcf7 { --cf-h: 3.125rem; }
  .contact-form .wpcf7 .cf-grid { gap: 0.75rem; }
  .contact-form .wpcf7 .cf-submit { margin-top: 1rem; }
  .contact-form .wpcf7 .wpcf7-submit { height: 3.25rem; }
}

/* --- 5.15 Features page --------------------------------------------------------- */
/* A mint hero with jump links, then one Z-section per area: the visual and
   the copy swap sides on every other section. Sections and feature tiles all
   have ids; a tile opened by its #link is briefly highlighted. */
.fx-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin-top: calc(var(--header-h) * -1);
  padding-top: calc(var(--header-h) + clamp(2.5rem, 1.5rem + 3vw, 4.5rem));
  padding-bottom: clamp(2.75rem, 1.75rem + 3vw, 4.5rem);
  border-bottom: 1px solid var(--line);
  text-align: center;
  background:
    radial-gradient(ellipse 45% 70% at 15% 20%, rgba(110, 231, 183, 0.32), transparent 70%),
    radial-gradient(ellipse 45% 70% at 90% 80%, rgba(167, 243, 208, 0.32), transparent 70%),
    linear-gradient(180deg, #E6F7EE 0%, #F4FBF7 100%);
}
.fx-hero__grid {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(4, 120, 87, 0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(4, 120, 87, 0.12) 1px, transparent 1px);
  background-size: 4rem 4rem;
  background-position: center top;
  -webkit-mask-image: radial-gradient(ellipse 75% 85% at 50% 30%, #000 30%, transparent);
  mask-image: radial-gradient(ellipse 75% 85% at 50% 30%, #000 30%, transparent);
}
.fx-hero__inner { display: flex; flex-direction: column; align-items: center; }
.fx-hero__eyebrow { margin-bottom: 1.25rem; }
.fx-hero__title {
  max-width: 18ch;
  font-size: clamp(2.375rem, 1.5rem + 3.4vw, 4rem);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 1.05;
}
.fx-hero__title span {
  /* room at the bottom keeps descenders inside the clipped gradient */
  padding-bottom: 0.12em;
  background: linear-gradient(90deg, var(--green) 0%, var(--emerald) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.fx-hero__sub { max-width: 54ch; margin-top: 1.25rem; font-size: var(--fs-lead); line-height: 1.6; }
.fx-jump { margin-top: 2rem; }
.fx-jump ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.625rem; max-width: 52rem; }
.fx-jump__link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem 0.5rem 0.75rem;
  border: 1px solid rgba(4, 120, 87, 0.16);
  border-radius: 62rem;
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 0.25rem 0.75rem -0.5rem rgba(11, 40, 33, 0.25);
  color: var(--ink);
  font-size: var(--fs-small);
  font-weight: 600;
  transition: color var(--t-fast), border-color var(--t-fast), background-color var(--t-fast), transform var(--t) var(--ease-out);
}
.fx-jump__link .icon { width: 1.125rem; height: 1.125rem; color: var(--green); }
.fx-jump__link:hover { border-color: var(--green); background: var(--white); color: var(--green-hover); transform: translateY(-0.125rem); }

.fx-hero__actions { justify-content: center; margin-top: 1.75rem; }

/* Z-sections: white and light mint take turns, and the visual swaps sides */
.fz { position: relative; isolation: isolate; padding-block: clamp(3.5rem, 2rem + 4.5vw, 6rem); }   /* #links land below the header via html scroll-padding-top */
.fz:nth-child(even) {
  border-block: 1px solid #DCEFE4;
  background:
    radial-gradient(ellipse 45% 60% at 100% 0%, rgba(110, 231, 183, 0.18), transparent 70%),
    linear-gradient(180deg, #EEF9F3 0%, #F3FBF6 100%);
}
/* the checked grid, faint, across the mint sections */
.fz:nth-child(even)::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(4, 120, 87, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(4, 120, 87, 0.06) 1px, transparent 1px);
  background-size: 4rem 4rem;
  background-position: center top;
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 85%);
  mask-image: linear-gradient(180deg, #000, transparent 85%);
}
.fz__inner { display: grid; gap: clamp(2rem, 1rem + 3vw, 3rem); align-items: center; }

/* Visual: a mint panel on white sections, a white panel on mint ones */
.fz__visual {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  padding: clamp(1.25rem, 0.75rem + 2vw, 2.5rem);
  border-radius: var(--radius-2xl);
  background:
    radial-gradient(ellipse 60% 60% at 50% 55%, rgba(110, 231, 183, 0.4), transparent 75%),
    linear-gradient(180deg, #ECF9F2 0%, #F6FCF9 100%);
  overflow: hidden;
}
.fz:nth-child(even) .fz__visual {
  border: 1px solid #DCEFE4;
  background:
    radial-gradient(ellipse 60% 60% at 50% 55%, rgba(110, 231, 183, 0.24), transparent 75%),
    var(--white);
  box-shadow: 0 2rem 3.5rem -2.5rem rgba(11, 40, 33, 0.3);
}
.fz__visual::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(4, 120, 87, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(4, 120, 87, 0.08) 1px, transparent 1px);
  background-size: 2.5rem 2.5rem;
  background-position: center;
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 40%, transparent);
  mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 40%, transparent);
}
.fz__visual img {
  width: auto;
  max-width: min(100%, 34rem);
  max-height: 24rem;   /* keeps the portrait stock image in proportion with the landscape ones */
  height: auto;
  filter: drop-shadow(0 1.25rem 1.5rem rgba(11, 40, 33, 0.14));
}

.fz__title { max-width: 22ch; }
.fz__body { max-width: 52ch; margin-top: 0.875rem; color: var(--text); font-size: var(--fs-body); line-height: 1.65; }

/* Feature tiles: icon, name, one line */
.fz-list { display: grid; gap: 0.75rem; margin-top: 1.75rem; }
.fz-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 0.875rem;
  align-items: start;
  align-content: start;   /* keep name and description together when a neighbour makes the tile taller */
  padding: 0.875rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  scroll-margin-top: 3rem;   /* on top of html scroll-padding-top, so the section title stays in view */
  transition: border-color var(--t), box-shadow var(--t), transform var(--t) var(--ease-out);
}
.fz:nth-child(even) .fz-item { border-color: transparent; box-shadow: 0 0.5rem 1.25rem -1rem rgba(11, 40, 33, 0.35); }
.fz-item:hover { border-color: rgba(4, 120, 87, 0.3); box-shadow: var(--shadow-sm); transform: translateY(-0.125rem); }
.fz-item__icon {
  display: grid;
  grid-row: span 2;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.75rem;
  background: linear-gradient(180deg, #E3F8EE, #D1F2E2);
  color: var(--green);
  transition: background var(--t), color var(--t);
}
.fz-item:hover .fz-item__icon { background: var(--green); color: var(--white); }
.fz-item__icon .icon { width: 1.25rem; height: 1.25rem; }
.fz-item__name { font-size: 1rem; letter-spacing: -0.01em; line-height: 1.35; text-wrap: pretty; }
.fz-item__desc { margin-top: 0.125rem; font-size: var(--fs-small); line-height: 1.5; }
/* Opened by its #link */
.fz-item:target { border-color: var(--emerald); box-shadow: 0 0 0 0.25rem rgba(16, 185, 129, 0.2); }
.fz__more { margin-top: 1.5rem; }

@media (min-width: 40em) {
  .fz-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 64em) {
  .fz__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(3rem, 1rem + 4vw, 5.5rem); }
  /* Z pattern: every other section puts the copy first */
  .fz:nth-child(even) .fz__visual { order: 2; }
  .fz__visual { min-height: 26rem; }
}

/* --- 5.16 404 page ----------------------------------------------------------- */
/* One screen on the mint checked hero of the download page: the 404 mascot in
   the centre, then the message and the way back home. */
.nf {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-height: 100svh;   /* starts under the see-through header, so this fills the first screen */
  margin-top: calc(var(--header-h) * -1);
  padding-top: calc(var(--header-h) + clamp(1.5rem, 0.75rem + 2vw, 2.5rem));
  padding-bottom: clamp(2.5rem, 1.5rem + 3vw, 4rem);
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(ellipse 50% 60% at 50% 40%, rgba(110, 231, 183, 0.38), transparent 70%),
    radial-gradient(ellipse 40% 70% at 0% 100%, rgba(167, 243, 208, 0.3), transparent 70%),
    linear-gradient(180deg, #E6F7EE 0%, #F4FBF7 100%);
}
.nf__grid {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(4, 120, 87, 0.13) 1px, transparent 1px),
    linear-gradient(90deg, rgba(4, 120, 87, 0.13) 1px, transparent 1px);
  background-size: 4rem 4rem;
  background-position: center top;
  -webkit-mask-image: linear-gradient(180deg, #000 40%, transparent);
  mask-image: linear-gradient(180deg, #000 40%, transparent);
}
.nf__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  text-align: center;
}
/* The mascot is sized by the screen height too (the image is 3:2), so the
   button stays on the first screen of short laptops */
.nf__art {
  width: min(100%, 34rem, max(16rem, (100svh - 25rem) * 1.5));
  height: auto;
  margin-bottom: clamp(0.75rem, 0.25rem + 1.5vw, 1.5rem);
  filter: drop-shadow(0 1.25rem 1.5rem rgba(11, 40, 33, 0.14));
}
.nf__eyebrow { margin-bottom: 1rem; }
.nf__title {
  max-width: 16ch;
  font-size: clamp(2.125rem, 1.4rem + 3vw, 3.5rem);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 1.04;
}
.nf__title span {
  display: block;
  /* extra room keeps the descenders inside the clipped gradient */
  padding-bottom: 0.14em;
  margin-bottom: -0.14em;
  background: linear-gradient(90deg, var(--green) 0%, var(--emerald) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.nf__btn { margin-top: 1.75rem; }

/* 6. Motion
   Hidden start states only apply once JS has added .reveal-on (or split the
   headline) and the visitor allows motion. Continuous animations are slow,
   transform/opacity only, and paused while their section is off screen.
   ========================================================================== */
@keyframes rise {
  from { opacity: 0; transform: translate3d(0, 1.25rem, 0); }
  to { opacity: 1; transform: none; }
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes word-up {
  from { transform: translate3d(0, 108%, 0) rotate(4deg); }
  to { transform: none; }
}
@keyframes text-shine { to { background-position: -200% 0; } }
@keyframes sweep {
  0%, 70% { transform: translateX(-110%); }
  100% { transform: translateX(110%); }
}
@keyframes stripe-in {
  from { opacity: 0; transform: translate3d(0, 3rem, 0); }
  to { opacity: 1; transform: none; }
}
@keyframes device-in {
  from { opacity: 0; transform: translate(var(--from, 0, 2rem)); }
  to { opacity: 1; transform: none; }
}
@keyframes card-in {
  from { opacity: 0; transform: translate(0, 1rem) scale(0.9); }
  to { opacity: 1; transform: none; }
}
@keyframes draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes mascot-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-0.5rem) rotate(-1deg); }
}
@keyframes blob-a {
  0%, 100% { border-radius: 62% 38% 54% 46% / 48% 60% 40% 52%; transform: rotate(0deg) scale(1, 1); }
  25% { border-radius: 30% 70% 25% 75% / 70% 28% 72% 30%; transform: rotate(30deg) scale(1.3, 0.78); }
  50% { border-radius: 75% 25% 68% 32% / 30% 72% 28% 70%; transform: rotate(-20deg) scale(0.8, 1.28); }
  75% { border-radius: 40% 60% 78% 22% / 62% 38% 62% 38%; transform: rotate(22deg) scale(1.18, 0.9); }
}
@keyframes blob-b {
  0%, 100% { border-radius: 38% 62% 45% 55% / 55% 40% 60% 45%; transform: translate(0, 0) scale(1); }
  33% { border-radius: 70% 30% 25% 75% / 35% 70% 30% 65%; transform: translate(-40%, 15%) scale(1.25); }
  66% { border-radius: 25% 75% 68% 32% / 72% 28% 74% 26%; transform: translate(-10%, -35%) scale(0.8); }
}
@keyframes marquee { to { transform: translate3d(-50%, 0, 0); } }
@keyframes journey-light { to { stroke-dashoffset: 0; } }
@keyframes journey-rail { to { background-position: 0 calc(100% + 7rem); } }
@keyframes ping {
  from { transform: scale(1); opacity: 0.75; }
  to { transform: scale(3.2); opacity: 0; }
}
@keyframes spin-angle { to { --angle: 360deg; } }
@keyframes footer-glow {
  from { transform: translateX(-50%) scale(1); opacity: 0.85; }
  to { transform: translateX(-42%) translateY(2rem) scale(1.12); opacity: 1; }
}
/* Moves only the first (sweep) background layer of the wordmark */
@keyframes wordmark-shine {
  0%, 60% { background-position: 120% 0, 0 0; }
  100% { background-position: -20% 0, 0 0; }
}
@keyframes caret { 0%, 40% { opacity: 1; } 60%, 100% { opacity: 0.1; } }

/* Micro-interactions */
.btn:hover { transform: translateY(-0.125rem); }
.btn:active { transform: translateY(0); }



@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }

  /* Hero load sequence: eyebrow → headline words → lead → buttons → stripe → devices */
  .js .hero__eyebrow { animation: rise 700ms var(--ease-out) 80ms both; }
  .js .hero__title:not(.is-split) { animation: fade-in 600ms ease 1.2s both; } /* JS did not run: show anyway */
  .hero__title.is-split .word {
    display: inline-block;
    overflow: hidden;
    vertical-align: bottom;
    padding-block: 0.04em 0.22em;
    margin-block: -0.04em -0.22em;
  }
  .hero__title.is-split .word__in {
    display: inline-block;
    transform-origin: 0 100%;
    animation: word-up 1s var(--ease-out) both;
    animation-delay: calc(160ms + var(--w) * 60ms);
  }
  .hero__title.is-split .typer { animation: rise 800ms var(--ease-out) 420ms backwards, text-shine 6s linear 1.6s infinite; }
  .js .hero__sub { animation: rise 800ms var(--ease-out) 650ms both; }
  .js .hero__actions { animation: rise 800ms var(--ease-out) 780ms both; }
  .js .stripe { animation: stripe-in 1400ms var(--ease-out) 600ms both; }
  /* backwards, not both: once the entrance ends nothing holds the image on
     an animated layer, so the browser redraws it at full sharpness */
  .js .hero-device { animation: device-in 1200ms var(--ease-out) backwards; }
  .js .legal-hero__inner { animation: fade-in 700ms ease 100ms both; }
  /* Download page: copy rises line by line */
  .js .dl-hero__copy > * { animation: rise 700ms var(--ease-out) both; }
  .js .dl-hero__copy > :nth-child(2) { animation-delay: 80ms; }
  .js .dl-hero__copy > :nth-child(3) { animation-delay: 160ms; }
  /* The mascot rises in, then floats gently (paused off screen) */
  .js .dl-hero__mascot { animation: rise 900ms var(--ease-out) 200ms both, mascot-float 6s ease-in-out 1.2s infinite; }
  /* Contact page: heading and form card rise in, the mascot follows */
  .js .contact__intro { animation: rise 700ms var(--ease-out) both; }
  .js .contact__side { animation: rise 800ms var(--ease-out) 120ms both; }
  .js .contact__mascot { animation: rise 900ms var(--ease-out) 240ms both; }
  /* Features page: hero rises in; a tile opened by its #link pulses once */
  .js .fx-hero__inner > * { animation: rise 700ms var(--ease-out) both; }
  .js .fx-hero__inner > :nth-child(2) { animation-delay: 80ms; }
  .js .fx-hero__inner > :nth-child(3) { animation-delay: 160ms; }
  .js .fx-hero__inner > :nth-child(4) { animation-delay: 240ms; }
  /* 404 page: the mascot rises in and floats, then the text follows */
  .js .nf__art { animation: rise 900ms var(--ease-out) both, mascot-float 6s ease-in-out 1.2s infinite; }
  .js .nf__eyebrow { animation: rise 700ms var(--ease-out) 120ms both; }
  .js .nf__title { animation: rise 700ms var(--ease-out) 200ms both; }
  .js .nf__btn { animation: rise 700ms var(--ease-out) 280ms both; }
  .fz-item:target { animation: fz-target 2.4s ease-out both; }
  .js .hero-device--monitor { --from: 0, 2.5rem; animation-delay: 750ms; }
  .js .hero-device--tablet { --from: -2.5rem, 1.75rem; animation-delay: 1000ms; }
  .js .hero-device--phone { --from: 2.5rem, 2.25rem; animation-delay: 1200ms; }
  .js .live-card { animation: card-in 800ms var(--ease-spring) 1.7s backwards; }
  .live-card .live-dot::after { animation: ping 2s ease-out infinite; }
  .js .scribble { animation: rise 700ms var(--ease-out) backwards; }
  .js .scribble--pos { animation-delay: 1.9s; }
  .js .scribble--qr { animation-delay: 2.1s; }
  /* The arrows draw themselves in after their label appears */
  .js .scribble__arrow path { stroke-dasharray: 1; animation: draw 700ms var(--ease-out) backwards; }
  .js .scribble--pos .scribble__arrow path { animation-delay: 2.3s; }
  .js .scribble--qr .scribble__arrow path { animation-delay: 2.5s; }
  .eyebrow-pill::after { animation: sweep 5s ease-in-out 1.5s infinite; }
  .eyebrow-pill__dot::after,
  .live-dot::after { animation: ping 2s ease-out infinite; }
  .hero .btn--primary.btn--shine::after { animation: sweep 6s ease-in-out 3s infinite; }
  .hero .btn--primary.btn--shine:hover::after { animation: none; }

  .marquee__track { animation: marquee 56s linear infinite; }
  .marquee:hover .marquee__track { animation-play-state: paused; }

  .journey.is-inview .journey__path--light { animation: journey-light 5s linear infinite; }
  .journey.is-inview .journey__steps::after { animation: journey-rail 4.5s linear infinite; }

  .price-card::before { animation: spin-angle 9s linear infinite; }
  .footer-cta::before { animation: spin-angle 11s linear infinite; }
  .footer__glow--a { animation: footer-glow 14s ease-in-out infinite alternate; }
  .footer__wordmark { animation: wordmark-shine 9s ease-in-out 1s infinite; }
  .live-dot::after { animation-duration: 1.6s; }

  .blob__shape--a { animation: blob-a 11s ease-in-out infinite; }
  .price-card__mascot { animation: mascot-float 6s ease-in-out infinite; }
  .blob__shape--b { animation: blob-b 8s ease-in-out infinite; }

  /* Pause every continuous animation while its section is off screen (JS toggles .is-inview) */
  .js [data-inview]:not(.is-inview) *,
  .js [data-inview]:not(.is-inview) *::before,
  .js [data-inview]:not(.is-inview) *::after { animation-play-state: paused !important; }

  /* Scroll reveal */
  .reveal-on [data-reveal] {
    opacity: 0;
    transform: translate3d(0, 2rem, 0);
    transition: opacity 900ms var(--ease-out), transform 900ms var(--ease-out);
    transition-delay: calc(var(--i, 0) * 100ms);
  }
  .reveal-on [data-reveal].is-revealed { opacity: 1; transform: none; }

}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .btn:hover,
  .index__item:hover .index__icon,
  .ftile:hover,
  .dl-card:hover,
  .contact-direct__item:hover,
  .fx-jump__link:hover,
  .fz-item:hover,
  .contact-form .wpcf7 .wpcf7-submit:hover,
  .nav__link:hover .nav__icon,
  .btn:hover > .btn__icon { transform: none; }
  /* Marquees become a static, wrapped list */
  .marquee { -webkit-mask-image: none; mask-image: none; }
  .marquee__track { width: auto; }
  .marquee__list { flex: 1 1 100%; flex-wrap: wrap; justify-content: center; padding: 0 var(--gutter); }
  .marquee__list[aria-hidden="true"] { display: none; }
  .journey__path--light,
  .journey__steps::after { display: none; }
}

/* 7. Print
   ========================================================================== */
/* Plain black text on white: navigation, footer, contents list, grain and
   backgrounds are dropped, and headings stay with the text that follows. */
@media print {
  @page { margin: 18mm 16mm; }
  html { font-size: 11pt; }
  body { background: #fff; color: #000; }
  body::before,
  .skip-link,
  .site-header,
  .mobile-menu,
  .scroll-progress,
  .site-footer,
  .legal-toc { display: none !important; }
  *,
  *::before,
  *::after { animation: none !important; transition: none !important; box-shadow: none !important; }

  .legal-hero {
    margin: 0;
    padding: 0 0 10pt;
    border-bottom: 1px solid #999;
    background: none;
  }
  .legal__layout { display: block; padding: 12pt 0 0; }
  .container { max-width: none; padding-inline: 0; }
  .legal__body { max-width: none; margin: 0; }
  .legal-hero h1,
  .legal-hero p,
  .legal__body,
  .legal__body h2,
  .legal__body h3,
  .legal__body strong,
  .legal__body a { color: #000 !important; }
  .legal__body a { text-decoration: none; font-weight: inherit; }
  .legal__body h2,
  .legal__body h3 { break-after: avoid; page-break-after: avoid; }
  .legal__body li,
  .legal__body address { break-inside: avoid; page-break-inside: avoid; }
  .legal__body address { border: 1px solid #bbb; background: none; }
  .legal__body p { orphans: 3; widows: 3; }
}