/* ==========================================================================
   PACIFIC LEAF PRINTING — Global Publishing Technology
   Design system · black base + warm amber accent on a neutral ramp
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Brand ramp — near-black carries the structure */
  --brand:       #202124;
  --brand-600:   #17181A;
  --brand-700:   #0E0F11;
  --brand-400:   #5B5E63;
  --brand-300:   #A9A6A0;
  --brand-200:   #C4C2BD;
  --brand-100:   #E4E2DE;
  --brand-50:    #F7F7F5;

  /* Accent — the one warm note; used for interaction, never for structure */
  --accent:      #8CC542;
  --accent-600:  #78AC35;
  --accent-700:  #4F7320;
  --accent-300:  #B5DC85;
  --accent-100:  #E9F5D8;
  --accent-50:   #F5FAEE;

  /* Neutrals — warmed slightly so the greys don't read cold */
  --ink:         #202124;
  --ink-2:       #2A2C2F;
  --ink-3:       #34363A;
  --bg:          #FFFFFF;
  --bg-2:        #F7F6F2;
  --bg-3:        #EAE8E2;

  /* Text */
  --text:        #202124;
  --text-2:      #5B5A57;
  --text-3:      #A9A6A0;
  --on-dark:     #FFFFFF;
  --on-dark-2:   #C4C2BD;

  /* Support */
  --green:       #5B5E63;
  --green-50:    #E7E5E1;
  --amber:       #4F7320;
  --amber-50:    #E9F5D8;

  /* Lines */
  --line:        #E7E5E1;
  --line-2:      #D9D7D3;
  --line-dark:   #3A3D41;

  /* Gradients */
  --grad-hero:   linear-gradient(165deg, #34363A 0%, #202124 40%, #131416 100%);
  --grad-brand:  linear-gradient(135deg, #43464A 0%, #202124 100%);
  --grad-accent: linear-gradient(135deg, #A3D65C 0%, #7CB432 100%);
  --grad-dark:   linear-gradient(150deg, #333740 0%, #292C31 55%, #2E3238 100%);
  --grad-soft:   linear-gradient(150deg, #F7F6F2 0%, #E7E4DC 100%);
  --grad-text:   linear-gradient(100deg, #FFFFFF 0%, #D9D7D3 100%);

  /* Patterns */
  --dots-light:  radial-gradient(circle at center, rgba(32,33,36,.16) 1.1px, transparent 1.1px);
  --dots-dark:   radial-gradient(circle at center, rgba(255,255,255,.10) 1.1px, transparent 1.1px);

  /* Radii */
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 30px;
  --r-2xl: 40px;
  --r-pill: 999px;

  /* Shadows — violet-tinted so they read as light, not dirt */
  /* Layered rather than one blur — reads as depth instead of a drop shadow */
  --sh-xs:    0 1px 2px rgba(20,20,40,.04);
  --sh-sm:    0 1px 2px rgba(20,20,40,.04), 0 4px 14px -6px rgba(20,20,40,.07);
  --sh-md:    0 1px 2px rgba(20,20,40,.04), 0 10px 28px -10px rgba(20,20,40,.12), 0 22px 44px -20px rgba(20,20,40,.10);
  --sh-lg:    0 1px 3px rgba(20,20,40,.05), 0 22px 48px -14px rgba(20,20,40,.16), 0 48px 88px -30px rgba(20,20,40,.14);
  --sh-brand: 0 16px 34px -12px rgba(32,33,36,.48);
  --sh-accent: 0 14px 30px -10px rgba(140,197,66,.5);
  --sh-dark:  0 30px 60px -24px rgba(0,0,0,.6);

  /* Type — Outfit for display, DM Sans for running text */
  --head: "Outfit", "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --body: "DM Sans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Layout — wide container with gutters that scale to the viewport.
     Full-bleed on anything up to ~1520px; beyond that the content stops
     stretching so cards keep sane proportions. */
  --wrap: 1520px;
  --gutter: clamp(20px, 3.5vw, 68px);
  --nav-h: 74px;

  /* How far the cover strip is pulled up over the hero's bottom edge. The
     hero's bottom padding is derived from this, so the strip can never ride
     up over the hero's own content. */
  --strip-pull: clamp(74px, 9.5vw, 116px);

  --ease: cubic-bezier(.4,0,.2,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

/* --------------------------------------------------------------------------
   2. Reset
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 20px);
}

body {
  font-family: var(--body);
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1, "liga" 1;
  /* `clip` rather than `hidden`: hidden turns body into a scroll container,
     which breaks `position: sticky` further down the tree. */
  overflow-x: clip;
}

/* Fine film grain over the whole page — the single cheapest premium cue.
   Fixed + pointer-events:none so it never interferes with anything. */
body::after {
  content: "";
  position: fixed;
  inset: -50%;
  z-index: 9999;
  pointer-events: none;
  opacity: .028;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Reading position, top of the viewport */
.progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0;
  z-index: 100;
  background: var(--grad-accent);
  box-shadow: 0 0 14px rgba(140,197,66,.7);
  transition: width .1s linear;
  pointer-events: none;
}

img, svg, video, canvas { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--brand); color: #fff; }

/* --------------------------------------------------------------------------
   3. Typography
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5 {
  font-family: var(--head);
  font-weight: 700;
  letter-spacing: -.022em;
  line-height: 1.14;
  color: var(--text);
  text-wrap: balance;
}

h1 { font-size: clamp(2.6rem, 5.4vw, 4.75rem); font-weight: 700; line-height: 1.02; letter-spacing: -.042em; }
h2 { font-size: clamp(2.05rem, 3.9vw, 3.25rem); line-height: 1.06; letter-spacing: -.038em; }
h3 { font-size: clamp(1.25rem, 1.8vw, 1.5rem); line-height: 1.22; letter-spacing: -.025em; }
h4 { font-size: 1.0625rem; font-weight: 600; letter-spacing: -.015em; }

p { text-wrap: pretty; }

.lede { font-size: clamp(.9688rem, 1.15vw, 1.0938rem); line-height: 1.7; color: var(--text-2); }
.small   { font-size: .875rem; }
.xsmall  { font-size: .8125rem; }
.muted   { color: var(--text-2); }
.center  { text-align: center; }
.hl      { color: var(--brand); }

/* Gradient text for a single emphasised phrase */
.grad-text {
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Eyebrow reads as a small pill — more finished than bare caps */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--head);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent-700);
  background: var(--accent-100);
  padding: 6px 13px;
  border-radius: var(--r-pill);
  /* Never stretch when it sits inside a column flex container */
  align-self: flex-start;
}
.eyebrow::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: currentColor;
  opacity: .7;
}
.on-dark .eyebrow,
.phero .eyebrow,
.promo .eyebrow {
  color: var(--accent-300);
  background: rgba(140,197,66,.14);
}

/* --------------------------------------------------------------------------
   4. Layout
   -------------------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--narrow { max-width: 860px; }

.section { padding-block: clamp(60px, 7.5vw, 108px); position: relative; }
.section--tight { padding-block: clamp(40px, 4.5vw, 68px); }
.section--flush-top { padding-top: 0; }

.tint { background: var(--bg-2); }
.on-dark { background: var(--grad-dark); color: var(--on-dark); }
.on-dark h1, .on-dark h2, .on-dark h3, .on-dark h4 { color: var(--on-dark); }
.on-dark .lede, .on-dark .muted { color: var(--on-dark-2); }

/* Faint dot field, opt-in per section */
.dotted::before {
  content: "";
  position: absolute; inset: 0;
  background-image: var(--dots-light);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000, transparent 75%);
          mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000, transparent 75%);
  opacity: .55;
  pointer-events: none;
}
.dotted > * { position: relative; }

.grid { display: grid; gap: clamp(16px, 2vw, 24px); }
.g-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.g-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.g-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }

.rule { height: 1px; background: var(--line); border: 0; }
.stack-sm > * + * { margin-top: 10px; }
.stack > * + * { margin-top: 18px; }
.stack-lg > * + * { margin-top: 26px; }

.sec-head { max-width: 730px; margin: 0 auto clamp(38px, 4.5vw, 62px); text-align: center; }
.sec-head .eyebrow { margin-bottom: 18px; }
.sec-head h2 { margin-bottom: 16px; }
.sec-head .lede { max-width: 620px; margin-inline: auto; }
.sec-head--left { text-align: left; margin-inline: 0; }
.sec-head--left .lede { margin-inline: 0; }

/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */
.btn {
  --btn-bg: var(--accent);
  --btn-fg: #16240B;
  --btn-bd: transparent;
  --btn-sh: var(--sh-accent);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 13px 26px;
  font-family: var(--head);
  font-size: .9375rem;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--btn-fg);
  background: var(--btn-bg);
  border: 1.5px solid var(--btn-bd);
  border-radius: var(--r-pill);
  box-shadow: var(--btn-sh);
  /* Transform is composed from variables so the magnetic pull (--bx/--by) and
     the hover lift can coexist instead of overwriting each other. */
  transform: translate3d(var(--bx, 0px), calc(var(--by, 0px) + var(--lift, 0px)), 0);
  transition: transform .25s var(--ease-out), box-shadow .28s var(--ease),
              background .22s var(--ease), color .22s var(--ease), border-color .22s var(--ease);
  white-space: nowrap;
  cursor: pointer;
}
.btn:hover { --lift: -2px; }
.btn:active { --lift: 0px; }
/* Snap back quickly when the cursor leaves */
.btn:not(:hover) { transition-duration: .45s; }
.btn:hover { --btn-bg: var(--accent-600); --btn-sh: 0 20px 40px -12px rgba(140,197,66,.6); }

.btn--dark  { --btn-bg: var(--ink); --btn-sh: 0 16px 32px -12px rgba(32,33,36,.55); }
.btn--dark:hover { --btn-bg: #0E0F11; --btn-sh: 0 20px 40px -12px rgba(32,33,36,.65); }

.btn--white { --btn-bg: #fff; --btn-fg: var(--ink); --btn-sh: 0 14px 30px -12px rgba(20,21,23,.4); }
.btn--white:hover { --btn-bg: #fff; --btn-sh: 0 18px 38px -12px rgba(20,21,23,.5); }

/* Primary call to action on dark surfaces */
.btn--accent { --btn-bg: var(--accent); --btn-fg: #16240B; --btn-sh: var(--sh-accent); }
.btn--accent:hover { --btn-bg: var(--accent-600); --btn-sh: 0 18px 38px -10px rgba(140,197,66,.62); }

/* Black button — for lime-tinted panels where a lime button would blend in */
.btn--ink { --btn-bg: var(--ink); --btn-fg: #fff; --btn-sh: 0 16px 32px -12px rgba(32,33,36,.5); }
.btn--ink:hover { --btn-bg: #000; --btn-sh: 0 20px 40px -12px rgba(32,33,36,.6); }

.btn--ghost {
  --btn-bg: #fff; --btn-fg: var(--brand-700); --btn-bd: var(--line-2); --btn-sh: var(--sh-xs);
}
.btn--ghost:hover { --btn-bg: var(--brand-50); --btn-fg: var(--brand-700); --btn-bd: var(--brand-300); --btn-sh: var(--sh-md); }

.btn--outline-light {
  --btn-bg: rgba(255,255,255,.1); --btn-fg: #fff;
  --btn-bd: rgba(255,255,255,.3); --btn-sh: none;
  backdrop-filter: blur(6px);
}
.btn--outline-light:hover { --btn-bg: rgba(255,255,255,.2); --btn-bd: rgba(255,255,255,.55); }

.btn--sm { padding: 9px 18px; font-size: .875rem; }
.btn--lg { padding: 16px 32px; font-size: 1rem; }
.btn--block { width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.btn-row--center { justify-content: center; }

.tlink {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--head);
  font-size: .9375rem;
  font-weight: 700;
  color: var(--accent-700);
  transition: gap .22s var(--ease), color .22s var(--ease);
}
.tlink svg { transition: transform .25s var(--ease); }
.tlink:hover {
  gap: 12px;
  color: var(--accent-600);
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-thickness: 1.5px;
}

/* Inline contact links would otherwise be indistinguishable from body text */
a[href^="mailto:"], a[href^="tel:"] {
  color: var(--accent-700);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.on-dark .tlink, .aud__card--dark .tlink { color: var(--accent-300); }
.on-dark .tlink:hover, .aud__card--dark .tlink:hover { color: var(--accent); }

/* --------------------------------------------------------------------------
   6. Chips
   -------------------------------------------------------------------------- */
.tag {
  display: inline-block;
  font-family: var(--head);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  background: var(--brand-100);
  color: var(--brand-700);
}
.tag--green { background: var(--green-50); color: var(--green); }
.tag--amber { background: var(--amber-50); color: #43464A; }
.tag--gray  { background: var(--bg-3); color: var(--text-2); }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 18px;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,.13);
  border: 1px solid rgba(255,255,255,.24);
  font-size: .8125rem;
  font-weight: 600;
  color: #fff;
  backdrop-filter: blur(8px);
}
.pill .dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 0 3px rgba(140,197,66,.28);
}

/* --------------------------------------------------------------------------
   7. Header / navigation
   -------------------------------------------------------------------------- */
.announce {
  background: var(--ink);
  color: #fff;
  font-size: .8125rem;
  text-align: center;
  padding: 10px var(--gutter);
  position: relative;
  z-index: 60;
}
.announce b { color: var(--accent-300); font-weight: 700; }
.announce a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255,255,255,.4); }
.announce a:hover { color: var(--accent-300); }

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255,255,255,.82);
  backdrop-filter: saturate(1.7) blur(16px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease);
}
.site-header.is-stuck {
  background: rgba(255,255,255,.92);
  border-bottom-color: var(--line);
  box-shadow: 0 4px 24px -12px rgba(32,33,36,.2);
}

.nav { height: var(--nav-h); display: flex; align-items: center; gap: 20px; }

.logo { display: inline-flex; align-items: center; flex-shrink: 0; }
/* The lockup is one image; height drives it and the intrinsic ratio does the
   rest, so `width` stays auto and never squashes the artwork. */
.logo__img {
  display: block;
  height: 52px;
  width: auto;
  transition: transform .35s var(--ease-out);
}
.logo:hover .logo__img { transform: scale(1.04); }

.nav__list { display: flex; align-items: center; gap: 2px; }
.nav__item { position: relative; }
.nav__link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 9px 14px;
  font-family: var(--head);
  font-size: .9375rem;
  font-weight: 600;
  color: var(--text-2);
  border-radius: var(--r-pill);
  transition: color .18s var(--ease), background .18s var(--ease);
}
.nav__link:hover,
.nav__item.open .nav__link,
.nav__link[aria-current="page"] { color: var(--brand-700); background: var(--brand-50); }
.nav__link svg { opacity: .6; transition: transform .22s var(--ease); }
.nav__item.open .nav__link svg { transform: rotate(180deg); }

.nav__spacer { flex: 1; }
.nav__actions { display: flex; align-items: center; gap: 4px; }

.icon-btn {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: var(--r-pill);
  color: var(--text-2);
  position: relative;
  transition: background .18s var(--ease), color .18s var(--ease);
}
.icon-btn:hover { background: var(--brand-50); color: var(--brand); }

/* Mega menu */
/* Centred on its nav item, but --mega-shift (set in JS) nudges it back inside
   the viewport when a wide panel under an edge item would hang off-screen. */
.mega {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translate(calc(-50% + var(--mega-shift, 0px)), 10px);
  width: max-content;
  max-width: min(92vw, 720px);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-lg);
  padding: 12px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .2s var(--ease), transform .3s var(--ease-out), visibility .2s;
}
.nav__item.open .mega { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(calc(-50% + var(--mega-shift, 0px)), 0); }
.mega__grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 2px; }
.mega__link { display: flex; gap: 13px; padding: 12px 14px; border-radius: var(--r-md); transition: background .16s var(--ease); }
.mega__link:hover { background: var(--brand-50); }
.mega__link:hover .mega__ico { background: var(--grad-brand); color: #fff; box-shadow: var(--sh-brand); }
.mega__ico {
  flex-shrink: 0;
  width: 38px; height: 38px;
  border-radius: 12px;
  background: var(--brand-100);
  color: var(--brand);
  display: grid; place-items: center;
  transition: background .22s var(--ease), color .22s var(--ease), box-shadow .22s var(--ease);
}
.mega__t { font-family: var(--head); font-size: .9375rem; font-weight: 700; }
.mega__d { font-size: .8125rem; color: var(--text-3); line-height: 1.45; margin-top: 2px; }
.mega__foot {
  margin-top: 8px; padding: 15px 17px;
  border-radius: var(--r-lg);
  background: var(--grad-soft);
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}

/* Mobile nav */
.nav__burger { display: none; }
.mobile-nav {
  position: fixed; inset: 0; z-index: 70;
  background: #fff;
  padding: 0 var(--gutter) 40px;
  overflow-y: auto;
  transform: translateY(-100%);
  transition: transform .4s var(--ease-out);
}
.mobile-nav.open { transform: translateY(0); }
.mobile-nav__top { display: flex; align-items: center; justify-content: space-between; height: var(--nav-h); }
.m-group { border-bottom: 1px solid var(--line); }
.m-group__btn {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between;
  padding: 17px 2px;
  font-family: var(--head);
  font-size: 1.125rem;
  font-weight: 700;
  text-align: left;
}
.m-group__btn svg { color: var(--text-3); transition: transform .25s var(--ease); }
.m-group.open .m-group__btn { color: var(--brand); }
.m-group.open .m-group__btn svg { transform: rotate(45deg); color: var(--brand); }
.m-group__panel { display: none; padding-bottom: 12px; }
.m-group.open .m-group__panel { display: block; }
.m-group__panel a { display: block; padding: 9px 0 9px 16px; font-size: .9375rem; color: var(--text-2); border-left: 2px solid var(--line); }
.m-group__panel a:hover { color: var(--brand); border-color: var(--brand); }

/* --------------------------------------------------------------------------
   8. Hero
   -------------------------------------------------------------------------- */
.hero {
  background: var(--grad-hero);
  color: #fff;
  padding-top: clamp(54px, 6.5vw, 92px);
  /* Always clears the cover strip, plus breathing room. */
  padding-bottom: calc(var(--strip-pull) + clamp(30px, 4vw, 60px));
  text-align: center;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
/* Soft spotlights */
.hero::before {
  content: "";
  position: absolute; inset: 0; z-index: -2;
  background:
    radial-gradient(900px 460px at 14% -12%, rgba(255,255,255,.26), transparent 62%),
    radial-gradient(760px 480px at 88% 4%, rgba(169,166,160,.34), transparent 60%),
    radial-gradient(700px 420px at 60% 118%, rgba(20,21,23,.42), transparent 62%);
}
/* Aurora — slow-drifting colour fields behind the grid */
.hero::before {
  background:
    radial-gradient(760px 460px at 12% -12%, rgba(140,197,66,.20), transparent 62%),
    radial-gradient(700px 480px at 88% 8%, rgba(120,150,190,.16), transparent 60%),
    radial-gradient(680px 420px at 55% 118%, rgba(140,197,66,.12), transparent 62%);
  animation: aurora 22s var(--ease) infinite alternate;
}
@keyframes aurora {
  from { transform: translate3d(-1.5%, -1%, 0) scale(1.02); }
  to   { transform: translate3d(1.5%, 1.5%, 0) scale(1.06); }
}

/* Fine grid, faded toward the edges */
.hero::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background-image:
    linear-gradient(rgba(255,255,255,.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.09) 1px, transparent 1px);
  background-size: 62px 62px;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, #000 20%, transparent 78%);
          mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, #000 20%, transparent 78%);
}
/* 20ch lets `text-wrap: balance` settle on three even lines instead of four ragged ones */
.hero h1 {
  color: #fff;
  max-width: 20ch;
  margin: 26px auto 22px;
  text-wrap: balance;
}
.hero p {
  color: rgba(255,255,255,.85);
  max-width: 56ch; margin-inline: auto;
  font-size: clamp(.9688rem, 1.15vw, 1.0938rem);
  line-height: 1.7;
}
.hero .btn-row { justify-content: center; margin-top: 34px; }
.hero__meta {
  display: flex; flex-wrap: wrap;
  gap: 10px 12px; justify-content: center;
  margin-top: 32px;
  font-size: .8125rem;
  color: rgba(255,255,255,.82);
}
.hero__meta span {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 15px;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,.09);
  border: 1px solid rgba(255,255,255,.16);
}
.hero__meta svg { color: #D9D7D3; }

/* Inline order tracking. Sits on the dark hero, so the field is a translucent
   pane rather than white — a solid white input would out-shout the CTAs. */
.herotrack {
  max-width: 520px;
  margin: 40px auto 0;
  padding-top: 30px;
  border-top: 1px solid rgba(255,255,255,.16);
}
.herotrack__label {
  display: block;
  font-family: var(--head);
  font-size: .875rem;
  font-weight: 600;
  color: rgba(255,255,255,.82);
  margin-bottom: 12px;
}
.herotrack__row { display: flex; gap: 10px; }
.herotrack__row input {
  flex: 1; min-width: 0;
  padding: 13px 17px;
  border-radius: var(--r-sm);
  border: 1px solid rgba(255,255,255,.26);
  background: rgba(255,255,255,.1);
  color: #fff;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: .9375rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  backdrop-filter: blur(8px);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
}
.herotrack__row input::placeholder {
  color: rgba(255,255,255,.5);
  text-transform: none;
  letter-spacing: normal;
}
.herotrack__row input:focus {
  outline: none;
  border-color: var(--accent);
  background: rgba(255,255,255,.16);
  box-shadow: 0 0 0 4px rgba(140,197,66,.24);
}
.herotrack__row .btn { flex-shrink: 0; }
.herotrack__hint {
  margin-top: 11px;
  font-size: .75rem;
  color: rgba(255,255,255,.55);
  font-family: ui-monospace, Menlo, Consolas, monospace;
}

@media (max-width: 560px) {
  .herotrack__row { flex-direction: column; }
  .herotrack__row .btn { justify-content: center; }
}

/* Cover strip straddling the hero edge, on a slight 3D plane */
.coverstrip {
  margin-top: calc(-1 * var(--strip-pull));
  position: relative;
  z-index: 2;
  overflow: hidden;
  padding-block: 16px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.coverstrip__track {
  display: flex;
  width: max-content;
  animation: cover-slide 64s linear infinite;
}
/* Spacing on the item rather than flex `gap`, so the duplicated half is exactly
   50% of the track and the loop doesn't hitch. */
.coverstrip__track .cover-img { margin-right: 18px; }
.coverstrip:hover .coverstrip__track { animation-play-state: paused; }
@keyframes cover-slide { to { transform: translateX(-50%); } }

/* --------------------------------------------------------------------------
   9. Cover artwork
   -------------------------------------------------------------------------- */
.cover-img {
  width: 152px;
  aspect-ratio: 257 / 343;
  flex-shrink: 0;
  border-radius: 8px;
  object-fit: cover;
  background: var(--bg-3);
  box-shadow: 0 2px 4px rgba(20,21,23,.28), 0 18px 36px -12px rgba(20,21,23,.5);
  transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out);
}
.cover-img:hover {
  transform: translateY(-10px) scale(1.03);
  box-shadow: 0 4px 8px rgba(20,21,23,.3), 0 30px 52px -14px rgba(20,21,23,.55);
}

.coverfan { display: flex; align-items: flex-end; justify-content: center; padding-block: 8px; }
.coverfan img {
  width: 96px;
  aspect-ratio: 257 / 343;
  object-fit: cover;
  border-radius: 8px;
  background: var(--bg-3);
  box-shadow: 0 2px 5px rgba(20,21,23,.2), 0 16px 32px -12px rgba(20,21,23,.45);
  transition: transform .45s var(--ease-out), box-shadow .45s var(--ease-out);
}
.coverfan img:nth-child(1) { transform: rotate(-9deg) translateX(24px); z-index: 1; }
.coverfan img:nth-child(2) { transform: translateY(-14px); z-index: 3; }
.coverfan img:nth-child(3) { transform: rotate(9deg) translateX(-24px); z-index: 2; }
.coverfan:hover img:nth-child(1) { transform: rotate(-15deg) translateX(4px) translateY(-6px); }
.coverfan:hover img:nth-child(2) { transform: translateY(-24px); }
.coverfan:hover img:nth-child(3) { transform: rotate(15deg) translateX(-4px) translateY(-6px); }

.coverfan--lg img { width: 118px; }
.coverfan--sm img { width: 74px; }
.coverfan--dark img { box-shadow: 0 2px 6px rgba(0,0,0,.4), 0 22px 40px -14px rgba(0,0,0,.65); }

.press-scene { display: grid; gap: 6px; justify-items: center; width: 100%; }
.press-scene svg { width: 100%; max-width: 330px; height: auto; }

.filerow__thumb {
  width: 36px;
  aspect-ratio: 257 / 343;
  object-fit: cover;
  border-radius: 5px;
  flex-shrink: 0;
  box-shadow: var(--sh-sm);
}

.coverwall {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 16px;
}
.coverwall img {
  width: 100%;
  aspect-ratio: 257 / 343;
  object-fit: cover;
  border-radius: 10px;
  background: var(--bg-3);
  box-shadow: var(--sh-sm);
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out);
}
.coverwall img:hover { transform: translateY(-8px) scale(1.04); box-shadow: var(--sh-lg); }

/* --------------------------------------------------------------------------
   10. Audience cards
   -------------------------------------------------------------------------- */
/* --- Audience cards -------------------------------------------------------
   Full-bleed art panel on top, white content below, and an icon badge that
   straddles the seam between the two.
   -------------------------------------------------------------------------- */
.aud { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 24px; align-items: stretch; }

.aud__card {
  position: relative;
  border-radius: var(--r-2xl);
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: var(--sh-sm);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* Composed transform: scroll tilt (--rx/--ry) + hover lift (--ty) */
  transform: perspective(1100px)
             rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg))
             translate3d(0, var(--ty, 0px), 0);
  transform-style: preserve-3d;
  transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out), border-color .3s var(--ease);
}
.aud__card:hover { --ty: -9px; box-shadow: var(--sh-lg); border-color: transparent; }
.aud__card:not(:hover) { transition-duration: .7s; }

/* Art panel */
.aud__panel {
  position: relative;
  height: 216px;
  display: grid;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
}
.aud__panel::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background-image: var(--dots-light);
  background-size: 20px 20px;
  opacity: .55;
  -webkit-mask-image: radial-gradient(ellipse 75% 75% at 50% 45%, #000, transparent 74%);
          mask-image: radial-gradient(ellipse 75% 75% at 50% 45%, #000, transparent 74%);
}
.aud__panel--a { background: linear-gradient(160deg, #F7F7F5 0%, #E4E2DE 100%); }
.aud__panel--b { background: linear-gradient(160deg, #EDECEA 0%, #D9D7D3 100%); }
.aud__panel--c { background: linear-gradient(160deg, #E9F3FD 0%, #D3E6F8 100%); }
/* Glow behind the globe */
.aud__panel--c::after {
  content: "";
  position: absolute; z-index: -1;
  left: 50%; top: 52%;
  width: 74%; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(62,143,224,.24), transparent 66%);
  pointer-events: none;
}

.aud__num {
  position: absolute;
  top: 18px; left: 20px;
  z-index: 2;
  font-family: var(--head);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--brand-700);
  background: rgba(255,255,255,.7);
  border: 1px solid rgba(32,33,36,.14);
  padding: 5px 11px;
  border-radius: var(--r-pill);
  backdrop-filter: blur(6px);
}

.aud__art {
  display: grid;
  place-items: center;
  width: 100%;
  padding: 0 22px 12px;
  transition: transform .5s var(--ease-out);
}
.aud__card:hover .aud__art { transform: scale(1.06) translateY(-4px); }
.aud__art svg { width: 100%; height: auto; max-height: 158px; }
.aud__art .coverfan { padding-block: 0; }
.aud__art .coverfan img { width: 104px; }

/* Icon badge straddling the seam */
.aud__ico {
  position: relative;
  z-index: 3;
  width: 58px; height: 58px;
  margin: -29px 0 0 28px;
  border-radius: 18px;
  display: grid; place-items: center;
  background: var(--grad-brand);
  color: #fff;
  border: 4px solid #fff;
  box-shadow: var(--sh-brand);
  flex-shrink: 0;
  transition: transform .4s var(--ease-out);
}
.aud__card:hover .aud__ico { transform: rotate(-8deg) scale(1.07); }

.aud__body {
  padding: 18px 28px 28px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.aud__body h3 { margin-bottom: 11px; }
.aud__body p { font-size: .9375rem; color: var(--text-2); }
.aud__body .tlink { margin-top: auto; padding-top: 22px; align-self: flex-start; }

/* --------------------------------------------------------------------------
   11. Logo strips
   -------------------------------------------------------------------------- */
.logos {
  display: flex; flex-wrap: wrap;
  align-items: center; justify-content: center;
  gap: 20px clamp(26px, 5vw, 58px);
}
.logos__item {
  color: var(--text-2);
  opacity: .55;
  filter: grayscale(1);
  transition: opacity .28s var(--ease), filter .28s var(--ease), transform .28s var(--ease);
  font-family: var(--head);
  font-weight: 800;
  font-size: 1.0625rem;
  letter-spacing: -.035em;
  white-space: nowrap;
}
.logos__item:hover { opacity: 1; filter: none; transform: translateY(-2px); }
.logos__item.caps { font-size: .8125rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
.logos__item.serif { font-family: Georgia, "Times New Roman", serif; font-weight: 400; font-size: 1.25rem; letter-spacing: -.01em; }

/* Client logos as an endless marquee — greyscale until hover.
   The source SVGs sit on a 960×540 canvas but their artwork only fills ~28%
   of that height, so each slot is sized by width and the empty canvas is
   cropped away vertically. */
.logomarquee {
  position: relative;
  overflow: hidden;
  padding-block: 4px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.logomarquee__track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: logo-slide 40s linear infinite;
}
.logomarquee:hover .logomarquee__track { animation-play-state: paused; }
@keyframes logo-slide { to { transform: translateX(-50%); } }

.logomarquee__item {
  position: relative;
  flex-shrink: 0;
  width: 168px;
  height: 68px;
  /* Spacing lives on the item, not as flex `gap` — with `gap` the duplicated
     half is one gap short and the loop visibly hitches on every cycle. */
  margin-right: clamp(38px, 5vw, 72px);
  overflow: hidden;
}
/* Absolute centring — flex/grid "safe" alignment pins an oversized item to the
   start edge instead of centring it, which crops the logo in half. */
.logomarquee__item img {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: auto;
  max-width: none;
  filter: grayscale(1);
  opacity: .55;
  transition: opacity .28s var(--ease), filter .28s var(--ease), transform .28s var(--ease);
}
.logomarquee__item:hover img {
  filter: none;
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.06);
}

/* Affiliation logos. All six share one 854×612 canvas but fill it very
   differently (a tall badge vs a wide wordmark), so they're rendered at one
   common scale — the size differences are the artwork's own. */
.partnerwall {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  align-items: center;
  gap: 24px clamp(18px, 2.6vw, 40px);
}
.partnerwall__item { display: grid; place-items: center; }
.partnerwall__item img {
  width: 100%;
  max-width: 186px;
  height: auto;
  filter: grayscale(1);
  opacity: .6;
  transition: opacity .28s var(--ease), filter .28s var(--ease), transform .28s var(--ease);
}
.partnerwall__item:hover img { filter: none; opacity: 1; transform: translateY(-3px); }

.strip-label {
  text-align: center;
  font-family: var(--head);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 34px;
}

/* --------------------------------------------------------------------------
   12. Feature cards (4-up)
   -------------------------------------------------------------------------- */
/* Bento — mixed card sizes instead of a uniform grid */
.bento {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 1.8vw, 22px);
}
.bento > :nth-child(1) { grid-column: span 2; }
.bento > :nth-child(2) { grid-column: 3; grid-row: span 2; }

.feat {
  position: relative;
  text-align: left;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto 1fr auto;
  column-gap: 26px;
  padding: 34px 36px;
  border-radius: var(--r-2xl);
  border: 1px solid var(--line);
  background: #fff;
  overflow: hidden;
  isolation: isolate;
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out), border-color .3s var(--ease);
}
/* Accent bar that grows across the top on hover */
.feat::before {
  content: "";
  position: absolute; left: 0; top: 0; z-index: 1;
  height: 3px; width: 0;
  background: var(--grad-accent);
  transition: width .45s var(--ease-out);
}
.feat:hover { transform: translateY(-6px); box-shadow: var(--sh-lg); border-color: transparent; }
.feat:hover::before { width: 100%; }

/* The tall bento cell stacks instead of running horizontally */
.bento > .feat:nth-child(2) {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto 1fr auto;
  align-content: start;
}
.bento > .feat:nth-child(2) { grid-template-rows: auto auto auto 1fr auto; }
.bento > .feat:nth-child(2) .feat__art { grid-row: auto; margin-bottom: 22px; }
.bento > .feat:nth-child(2) h3,
.bento > .feat:nth-child(2) p,
.bento > .feat:nth-child(2) .feat__list,
.bento > .feat:nth-child(2) .btn { grid-column: 1; }

/* Only the tall bento cell has room for a list */
.feat__list { display: none; }
.bento > .feat:nth-child(2) .feat__list {
  display: grid;
  gap: 10px;
  margin: 0 0 24px;
}
.bento > .feat:nth-child(2) .feat__list li { font-size: .875rem; }
.feat__art {
  grid-row: 1 / -1;
  align-self: start;
  width: 78px; height: 78px;
  border-radius: var(--r-lg);
  background: var(--grad-soft);
  display: grid; place-items: center;
  transition: transform .35s var(--ease-out);
}
.feat:hover .feat__art { transform: scale(1.06) rotate(-3deg); }
.feat__art svg { width: 82%; height: 82%; }
.feat h3 { grid-column: 2; font-size: 1.125rem; margin-bottom: 10px; }
.feat p { grid-column: 2; font-size: .9062rem; color: var(--text-2); margin-bottom: 24px; }
.feat .btn { grid-column: 2; justify-self: start; align-self: end; }

/* --------------------------------------------------------------------------
   13. Steps
   -------------------------------------------------------------------------- */
/* --- Process flow --------------------------------------------------------
   Scroll-pinned stack: each step sticks under the header and the next card
   slides up over it, offset a little so the ones underneath still peek out.
   Pure CSS `position: sticky` — no scroll listeners.
   -------------------------------------------------------------------------- */
.flow {
  --st: calc(var(--nav-h) + 24px);   /* pin line, clear of the sticky header */
  --peek: 16px;                      /* how much of each buried card shows */
  display: grid;
  row-gap: clamp(22px, 3vw, 38px);
  /* Holds the last card pinned for a beat before the page moves on */
  padding-bottom: clamp(40px, 7vw, 110px);
}

.flow__step {
  position: sticky;
  top: var(--st);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .84fr);
  column-gap: clamp(24px, 3vw, 56px);
  align-items: center;
  /* Opaque, or the card underneath would show through the overlap */
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-2xl);
  box-shadow: var(--sh-lg);
  padding: clamp(26px, 3vw, 46px);
  min-height: clamp(300px, 30vw, 380px);
}
.flow__step:nth-child(1) { top: var(--st); }
.flow__step:nth-child(2) { top: calc(var(--st) + var(--peek)); }
.flow__step:nth-child(3) { top: calc(var(--st) + var(--peek) * 2); }
.flow__step:nth-child(4) { top: calc(var(--st) + var(--peek) * 3); }
.flow__step:nth-child(5) { top: calc(var(--st) + var(--peek) * 4); }

/* Head: number badge + label */
.flow__head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.flow__num {
  width: 54px; height: 54px;
  flex-shrink: 0;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--grad-brand);
  color: #fff;
  font-family: var(--head);
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: -.02em;
  box-shadow: var(--sh-brand);
}

.flow__copy h3 { font-size: clamp(1.5rem, 2.3vw, 2rem); margin-bottom: 13px; }
.flow__copy p { font-size: .9688rem; color: var(--text-2); max-width: 54ch; }
.flow__copy .tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }

/* Artwork */
.flow__art {
  position: relative;
  border-radius: var(--r-xl);
  background: var(--grad-soft);
  padding: 24px;
  display: grid;
  place-items: center;
  align-self: stretch;
  min-height: 200px;
  overflow: hidden;
}
.flow__art::before {
  content: "";
  position: absolute; inset: 0;
  background-image: var(--dots-light);
  background-size: 20px 20px;
  opacity: .5;
  -webkit-mask-image: radial-gradient(ellipse 72% 72% at 50% 50%, #000, transparent 72%);
          mask-image: radial-gradient(ellipse 72% 72% at 50% 50%, #000, transparent 72%);
}
/* Sized by width so the artwork fills the panel instead of floating in it */
.flow__art svg { position: relative; width: 100%; max-width: 380px; height: auto; }
.flow__art .press-scene { max-width: 380px; }

/* --------------------------------------------------------------------------
   14. Promo band
   -------------------------------------------------------------------------- */
.promo {
  position: relative;
  border-radius: var(--r-2xl);
  background: var(--grad-soft);
  color: var(--text);
  border: 1px solid var(--line);
  padding: clamp(34px, 4.4vw, 60px);
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  gap: clamp(24px, 4vw, 48px);
  align-items: center;
  overflow: hidden;
  box-shadow: var(--sh-md);
  isolation: isolate;
}
.promo::before {
  content: "";
  position: absolute; inset: 0; z-index: -2;
  background: radial-gradient(620px 340px at 86% 46%, rgba(140,197,66,.22), transparent 62%);
}
.promo::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background-image: var(--dots-light);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(ellipse 65% 80% at 20% 50%, #000, transparent 75%);
          mask-image: radial-gradient(ellipse 65% 80% at 20% 50%, #000, transparent 75%);
  opacity: .5;
}
.promo h2 { color: var(--text); margin-bottom: 14px; font-size: clamp(1.6rem, 2.6vw, 2.25rem); }
.promo .eyebrow { margin-bottom: 18px; }
.promo p { color: var(--text-2); font-size: .9375rem; max-width: 46ch; }
.promo .btn { margin-top: 28px; }
.promo__art svg { width: 100%; height: auto; }

/* --------------------------------------------------------------------------
   15. Testimonials
   -------------------------------------------------------------------------- */
/* --- Testimonials --------------------------------------------------------
   Equal-height quote cards, the first one carried in brand gradient.
   -------------------------------------------------------------------------- */
.quotes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  align-items: stretch;
}

.quote {
  position: relative;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: clamp(30px, 3vw, 44px);
  border-radius: var(--r-2xl);
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: var(--sh-sm);
  overflow: hidden;
  isolation: isolate;
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out);
}
.quote:hover { transform: translateY(-6px); box-shadow: var(--sh-lg); }

/* Quote glyph watermark. Georgia hangs the " at the top of its em box, so the
   block is given room below it rather than a negative offset — a negative top
   just gets clipped by the card's own overflow. */
.quote__mark {
  position: absolute;
  z-index: -1;
  top: 14px; right: 26px;
  width: 1em; height: .62em;
  overflow: hidden;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 7rem;
  line-height: .78;
  color: var(--brand);
  opacity: .1;
  pointer-events: none;
  user-select: none;
}

.quote__stars { display: flex; gap: 3px; margin-bottom: 18px; color: #6BA32E; }

.quote blockquote {
  margin: 0;
  font-size: clamp(1rem, 1.25vw, 1.1875rem);
  line-height: 1.62;
  color: var(--text);
  letter-spacing: -.005em;
}

/* Plain border rather than an absolutely-positioned rule — the latter resolved
   against the flex baseline and drifted onto the avatar. */
.quote__foot {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: auto;
  padding-top: 26px;
  border-top: 1px solid var(--line);
}
.avatar {
  width: 50px; height: 50px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--head); font-weight: 800; font-size: .9375rem;
  color: #fff; flex-shrink: 0;
  background: var(--grad-brand);
  box-shadow: var(--sh-brand);
}
.quote__name { font-family: var(--head); font-weight: 700; font-size: .9688rem; display: block; }
.quote__role { font-size: .8125rem; color: var(--text-3); }

/* Featured card */
.quote--feature {
  background: linear-gradient(150deg, #F3F9EC 0%, #E2EFCF 100%);
  border-color: transparent;
  box-shadow: var(--sh-md);
}
.quote--feature::before {
  content: "";
  position: absolute; inset: 0; z-index: -2;
  background: radial-gradient(520px 300px at 88% 4%, rgba(140,197,66,.2), transparent 62%);
}
.quote--feature .quote__mark { color: #4F7320; opacity: .2; }
.quote--feature .quote__foot { border-top-color: rgba(79,115,32,.28); }
.quote--feature .avatar { background: var(--grad-accent); color: #16240B; box-shadow: var(--sh-accent); }

/* Aggregate rating strip under the cards */
.quotes__rating {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: clamp(26px, 3vw, 40px);
  font-size: .9375rem;
  color: var(--text-2);
}
.quotes__rating .stars { display: flex; gap: 3px; color: #6BA32E; }
.quotes__rating b { font-family: var(--head); font-weight: 800; color: var(--text); }
.quotes__rating .sep { width: 1px; height: 18px; background: var(--line-2); }

/* --------------------------------------------------------------------------
   16. Trust cards
   -------------------------------------------------------------------------- */
/* --- Trust / certifications ---------------------------------------------- */
.trust { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
.trust__card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-2xl);
  padding: 32px 28px;
  box-shadow: var(--sh-sm);
  overflow: hidden;
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out);
}
/* Accent bar that grows across the top on hover */
.trust__card::before {
  content: "";
  position: absolute; left: 0; top: 0; z-index: 1;
  height: 3px; width: 0;
  background: var(--grad-accent);
  transition: width .45s var(--ease-out);
}
.trust__card:hover { transform: translateY(-6px); box-shadow: var(--sh-lg); }
.trust__card:hover::before { width: 100%; }

.trust__badge {
  width: 68px; height: 68px;
  border-radius: 20px;
  display: grid; place-items: center;
  background: var(--grad-soft);
  color: var(--brand);
  margin-bottom: 22px;
  flex-shrink: 0;
  transition: transform .35s var(--ease-out);
}
.trust__card:hover .trust__badge { transform: scale(1.07) rotate(-4deg); }
.trust__badge--green { background: var(--green-50); color: var(--green); }
.trust__badge--amber { background: var(--amber-50); color: #43464A; }
.trust__badge--ink   { background: var(--ink); color: var(--brand-300); }

.trust__card h3 { font-size: 1.0625rem; margin-bottom: 10px; }
.trust__card .trust__meta {
  font-family: var(--head);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--brand-700);
  margin-bottom: 12px;
}
/* Top-aligned so every card's title and first line sit on the same baseline */
.trust__card p { font-size: .875rem; color: var(--text-2); }

.trust__actions {
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: clamp(28px, 3.4vw, 44px);
}

/* --------------------------------------------------------------------------
   17. CTAs
   -------------------------------------------------------------------------- */
/* Solid, not a gradient: the wave SVG is a flat fill, so anything but a flat
   background leaves a visible seam where the two meet. --cta-surface keeps the
   two in lockstep. */
.cta-wave {
  --cta-surface: #313539;
  position: relative;
  background: var(--cta-surface);
  color: #fff;
  text-align: center;
  padding-bottom: clamp(64px, 8vw, 104px);
  overflow: hidden;
  isolation: isolate;
}
.cta-wave::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(760px 380px at 50% 118%, rgba(140,197,66,.18), transparent 64%);
}
.cta-wave__top { display: block; width: 100%; height: clamp(44px, 5.4vw, 84px); background: var(--bg-2); }
.cta-wave__top svg { width: 100%; height: 100%; display: block; }
/* Wave takes its colour from the section, so the two can never drift apart */
.cta-wave__top svg path { fill: var(--cta-surface); }
.cta-wave__in { position: relative; padding-top: clamp(10px, 1.8vw, 24px); }
.cta-wave h2 { color: #fff; margin-bottom: 16px; }
.cta-wave p { color: rgba(255,255,255,.86); max-width: 54ch; margin: 0 auto; font-size: .9375rem; }
.cta-wave .btn-row { justify-content: center; margin-top: 32px; }

.cta {
  position: relative;
  border-radius: var(--r-2xl);
  background: var(--grad-hero);
  color: #fff;
  padding: clamp(42px, 6vw, 78px) clamp(24px, 5vw, 64px);
  overflow: hidden;
  text-align: center;
  box-shadow: var(--sh-brand);
  isolation: isolate;
}
.cta::before {
  content: "";
  position: absolute; inset: 0; z-index: -2;
  background:
    radial-gradient(600px 320px at 14% 0%, rgba(255,255,255,.24), transparent 60%),
    radial-gradient(520px 340px at 88% 100%, rgba(20,21,23,.36), transparent 62%);
}
.cta::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background-image: var(--dots-dark);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000, transparent 76%);
          mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000, transparent 76%);
  opacity: .5;
}
.cta h2 { color: #fff; max-width: 20ch; margin-inline: auto; }
.cta .lede { color: rgba(255,255,255,.86); max-width: 56ch; margin: 18px auto 0; }
.cta .btn-row { justify-content: center; margin-top: 32px; }
.cta__fine { margin-top: 20px; font-size: .8125rem; color: rgba(255,255,255,.75); }

/* --------------------------------------------------------------------------
   18. Footer
   -------------------------------------------------------------------------- */
.site-footer { background: var(--grad-dark); color: var(--on-dark-2); position: relative; }
.site-footer::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(140,197,66,.55), transparent);
}
.site-footer a { color: var(--on-dark-2); transition: color .18s var(--ease); }
.site-footer a:hover { color: #fff; }

.foot__main {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(32px, 5vw, 72px);
  padding-block: clamp(48px, 6vw, 76px);
}
.foot__cols { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 28px; }
.foot__col h5 {
  font-family: var(--head);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 17px;
}
.foot__col li + li { margin-top: 10px; }
.foot__col a { font-size: .875rem; }

.foot__news h5 { font-family: var(--head); font-size: 1.0625rem; font-weight: 700; color: #fff; margin-bottom: 10px; letter-spacing: -.02em; }
.foot__news p { font-size: .875rem; line-height: 1.6; }
.news { display: flex; gap: 8px; margin-top: 20px; }
.news input {
  flex: 1; min-width: 0;
  padding: 13px 18px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-dark);
  background: rgba(255,255,255,.05);
  color: #fff;
  font-size: .875rem;
}
.news input::placeholder { color: #7A7D82; }
.news input:focus { outline: none; border-color: var(--brand-300); background: rgba(255,255,255,.09); }

.foot__bottom {
  border-top: 1px solid var(--line-dark);
  padding-block: 26px 34px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px; flex-wrap: wrap;
  font-size: .8125rem;
}
.foot__brandrow { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.foot__brandrow .logo__img { height: 44px; }
.foot__api { font-family: var(--head); font-weight: 800; font-size: 1.0625rem; letter-spacing: -.05em; color: var(--on-dark-2); }
.foot__api span { color: var(--brand-300); }
.foot__legal { display: flex; gap: 22px; flex-wrap: wrap; }

/* --------------------------------------------------------------------------
   18b. Order-tracking dialog
   -------------------------------------------------------------------------- */
.track { position: fixed; inset: 0; z-index: 90; display: grid; place-items: start center; }
.track[hidden] { display: none; }

.track__backdrop {
  position: absolute; inset: 0;
  background: rgba(20, 21, 23, .58);
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity .28s var(--ease);
}
.track.open .track__backdrop { opacity: 1; }

.track__panel {
  position: relative;
  width: min(660px, calc(100vw - 2 * var(--gutter)));
  /* Anchored below the header rather than centred — the result list grows
     downward and a centred panel would jump on every lookup. */
  margin: clamp(56px, 9vh, 104px) 0 40px;
  max-height: calc(100vh - clamp(96px, 13vh, 144px));
  overflow-y: auto;
  overscroll-behavior: contain;
  background: #fff;
  border-radius: var(--r-xl);
  box-shadow: var(--sh-lg);
  padding: clamp(26px, 3.4vw, 38px);
  opacity: 0;
  transform: translateY(-14px) scale(.985);
  transition: opacity .3s var(--ease-out), transform .3s var(--ease-out);
}
.track.open .track__panel { opacity: 1; transform: none; }

.track__x {
  position: absolute; top: 16px; right: 16px;
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border: 0; border-radius: var(--r-pill);
  background: transparent; color: var(--text-2);
  cursor: pointer;
  transition: background .18s var(--ease), color .18s var(--ease);
}
.track__x:hover { background: var(--brand-50); color: var(--brand); }

.track__panel h2 { font-size: clamp(1.4rem, 2.4vw, 1.75rem); margin: 16px 0 8px; }

.track__form { display: flex; gap: 10px; margin-top: 22px; }
.track__form input {
  flex: 1; min-width: 0;
  padding: 14px 17px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  background: #fff;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: .9375rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.track__form input::placeholder { text-transform: none; letter-spacing: normal; color: var(--text-3); }
.track__form input:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(140, 197, 66, .22);
}
.track__form .btn { flex-shrink: 0; }

.track__hint {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-top: 14px;
  font-size: .75rem; color: var(--text-3);
}
/* Reference only — these are printed for the reader to copy, not buttons. */
.track__demo {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: .6875rem;
  padding: 5px 10px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-pill);
  background: var(--bg-2);
  color: var(--text-2);
  user-select: all;
}

/* ---- result ---- */
.track__out:empty { display: none; }
.track__out { margin-top: 26px; padding-top: 26px; border-top: 1px solid var(--line); }

.track__head { display: flex; gap: 16px; align-items: flex-start; justify-content: space-between; }
.track__head h3 { font-size: 1.125rem; margin: 6px 0 4px; }
.track__code {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: .75rem; letter-spacing: .08em;
  color: var(--text-3);
}
.track__head .tag { flex-shrink: 0; }

.track__meta {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin-top: 22px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
}
.track__meta > div { background: #fff; padding: 13px 16px; }
.track__meta span {
  display: block;
  font-family: var(--head); font-size: .625rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--text-3);
}
.track__meta b { font-size: .9375rem; }

/* Vertical stepper — the connecting rail is drawn on the <li> so it stops
   cleanly at the last dot instead of running past it. */
.tsteps { list-style: none; padding: 0; margin: 26px 0 0; }
.tstep { position: relative; display: flex; gap: 16px; padding-bottom: 22px; }
.tstep:last-child { padding-bottom: 0; }
.tstep::before {
  content: "";
  position: absolute; left: 10px; top: 22px; bottom: 0;
  width: 2px; background: var(--line);
}
.tstep:last-child::before { display: none; }
.tstep.is-done::before { background: var(--accent-300); }

.tstep__dot {
  position: relative; z-index: 1; flex-shrink: 0;
  width: 22px; height: 22px; margin-top: 1px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--line-2);
  color: transparent;
}
.tstep.is-done .tstep__dot { background: var(--accent); border-color: var(--accent); color: #fff; }
.tstep.is-now .tstep__dot { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-100); }
.tstep.is-now .tstep__dot::after {
  content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent);
  animation: tpulse 1.8s var(--ease) infinite;
}
@keyframes tpulse { 50% { opacity: .35; transform: scale(.75); } }

.tstep__body b { display: block; font-family: var(--head); font-size: .9375rem; line-height: 1.5; }
.tstep__body span { font-size: .8125rem; color: var(--text-2); }
.tstep:not(.is-done):not(.is-now) .tstep__body b { color: var(--text-3); font-weight: 500; }

.track__full { margin-top: 24px; width: 100%; }

/* ---- not found ---- */
.track__miss { display: flex; gap: 15px; align-items: flex-start; }
.track__miss svg { flex-shrink: 0; margin-top: 2px; color: var(--text-3); }
.track__miss b { display: block; font-family: var(--head); font-size: .9375rem; margin-bottom: 4px; }
.track__miss code {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  background: var(--bg-2); padding: 1px 6px; border-radius: 6px;
}

@media (max-width: 560px) {
  .track__form { flex-direction: column; }
  .track__form .btn { justify-content: center; }
  .track__meta { grid-template-columns: 1fr; }
  .track__head { flex-direction: column; }
}

/* --------------------------------------------------------------------------
   19. Inner-page components
   -------------------------------------------------------------------------- */
.phero {
  background: var(--grad-hero);
  color: #fff;
  padding-block: clamp(48px, 6vw, 84px);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.phero::before {
  content: "";
  position: absolute; inset: 0; z-index: -2;
  background:
    radial-gradient(760px 420px at 84% -8%, rgba(140,197,66,.20), transparent 62%),
    radial-gradient(640px 380px at 8% 108%, rgba(120,150,190,.16), transparent 62%);
  animation: aurora 22s var(--ease) infinite alternate;
}
.phero::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background-image:
    linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px);
  background-size: 58px 58px;
  -webkit-mask-image: radial-gradient(ellipse 80% 90% at 40% 30%, #000, transparent 76%);
          mask-image: radial-gradient(ellipse 80% 90% at 40% 30%, #000, transparent 76%);
}
.phero__grid { position: relative; display: grid; grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr); gap: clamp(24px, 4vw, 52px); align-items: center; }
.phero h1 { color: #fff; margin: 18px 0 18px; }
.phero p { color: rgba(255,255,255,.86); }
.crumbs { display: flex; align-items: center; gap: 8px; font-size: .8125rem; color: rgba(255,255,255,.7); margin-bottom: 18px; }
.crumbs a:hover { color: #fff; text-decoration: underline; }

.fcard {
  position: relative;
  display: flex; flex-direction: column; gap: 12px;
  padding: 28px 26px;
  border-radius: var(--r-xl);
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: var(--sh-sm);
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out);
}
.fcard:hover { transform: translateY(-5px); box-shadow: var(--sh-lg); }
.fcard__ico {
  width: 50px; height: 50px;
  border-radius: 15px;
  display: grid; place-items: center;
  background: var(--grad-soft);
  color: var(--brand);
}
.fcard--green .fcard__ico { background: var(--green-50); color: var(--green); }
.fcard--amber .fcard__ico { background: var(--amber-50); color: #43464A; }
.fcard--dark  { background: linear-gradient(150deg, #F3F9EC 0%, #E2EFCF 100%); border-color: transparent; }
.fcard--dark h3, .fcard--dark h4 { color: var(--text); }
.fcard--dark p { color: var(--text-2); }
.fcard--dark .fcard__ico { background: rgba(255,255,255,.1); color: var(--brand-300); }
.fcard h3 { font-size: 1.0625rem; }
.fcard p { font-size: .875rem; color: var(--text-2); }
.fcard .tlink { margin-top: auto; padding-top: 6px; align-self: flex-start; font-size: .875rem; }

.checks { display: grid; gap: 12px; margin-top: 20px; }
.checks li { display: flex; gap: 11px; align-items: flex-start; font-size: .9375rem; color: var(--text-2); }
.checks svg { flex-shrink: 0; margin-top: 3px; color: var(--brand); }
.on-dark .checks li, .phero .checks li { color: rgba(255,255,255,.85); }
.on-dark .checks svg, .phero .checks svg { color: var(--brand-300); }

.split { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: clamp(28px, 4.5vw, 64px); align-items: center; }
.split--rev .split__media { order: 2; }
.split__media {
  position: relative;
  border-radius: var(--r-2xl);
  background: var(--grad-soft);
  padding: 30px;
  display: grid; place-items: center;
  min-height: 306px;
  overflow: hidden;
}
.split__media::before {
  content: "";
  position: absolute; inset: 0;
  background-image: var(--dots-light);
  background-size: 20px 20px;
  opacity: .45;
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000, transparent 72%);
          mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000, transparent 72%);
}
.split__media > * { position: relative; }
.on-dark .split__media { background: rgba(255,255,255,.05); }
.on-dark .split__media::before { background-image: var(--dots-dark); }

.band { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); border-radius: var(--r-2xl); overflow: hidden; border: 1px solid var(--line-dark); }
.band__cell { padding: 32px 28px; border-right: 1px solid var(--line-dark); }
.band__cell:last-child { border-right: 0; }
.band__n { font-family: var(--head); font-size: clamp(1.9rem, 3.1vw, 2.7rem); font-weight: 800; letter-spacing: -.045em; color: #fff; line-height: 1; }
.band__l { font-size: .8125rem; color: var(--on-dark-2); margin-top: 11px; }

.pcard {
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: #fff;
  overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: var(--sh-sm);
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out);
}
.pcard:hover { transform: translateY(-7px); box-shadow: var(--sh-lg); }
.pcard__media {
  aspect-ratio: 4/3.2;
  display: grid; place-items: center;
  background: var(--grad-soft);
  position: relative;
  overflow: hidden;
}
.pcard__media::before {
  content: "";
  position: absolute; inset: 0;
  background-image: var(--dots-light);
  background-size: 18px 18px;
  opacity: .5;
}
.pcard__media .cover-img { position: relative; width: 128px; transform: rotate(-3deg); }
.pcard:hover .pcard__media .cover-img { transform: rotate(0) translateY(-6px) scale(1.04); }
.pcard__badge { position: absolute; top: 14px; left: 14px; z-index: 2; }
.pcard__body { padding: 22px 24px 24px; display: flex; flex-direction: column; flex: 1; }
.pcard__body h3 { font-size: 1.0625rem; }
.pcard__body p { font-size: .875rem; color: var(--text-2); margin-top: 6px; }
.pcard__foot { margin-top: auto; padding-top: 20px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pcard__price { font-family: var(--head); font-weight: 800; font-size: .9375rem; }

.plans { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 22px; align-items: start; }
.plan {
  border: 1px solid var(--line);
  border-radius: var(--r-2xl);
  background: #fff;
  padding: 34px 30px;
  display: flex; flex-direction: column;
  box-shadow: var(--sh-sm);
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out);
}
.plan:hover { transform: translateY(-5px); box-shadow: var(--sh-lg); }
.plan--featured {
  background: linear-gradient(150deg, #F3F9EC 0%, #E2EFCF 100%);
  border-color: var(--accent);
  color: var(--text);
  box-shadow: var(--sh-md);
}
.plan--featured h3 { color: var(--text); }
.plan--featured .plan__desc, .plan--featured .plan__feat li { color: var(--text-2); }
.plan--featured .plan__feat { border-color: rgba(107,163,46,.3); }
.plan__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.plan__price { font-family: var(--head); font-size: 3rem; font-weight: 800; letter-spacing: -.05em; margin: 20px 0 6px; line-height: 1; }
.plan--featured .plan__price { color: var(--text); }
.plan__price small { font-family: var(--body); font-size: .875rem; font-weight: 500; letter-spacing: 0; color: var(--text-3); }
.plan--featured .plan__price small { color: var(--text-3); }
.plan__desc { font-size: .875rem; color: var(--text-2); }
.plan__feat { display: grid; gap: 12px; margin: 26px 0; padding-top: 24px; border-top: 1px solid var(--line); }
.plan__feat li { display: flex; gap: 10px; align-items: flex-start; font-size: .875rem; color: var(--text-2); }
.plan__feat svg { flex-shrink: 0; margin-top: 3px; color: var(--brand); }
.plan .btn { margin-top: auto; }

.field { display: grid; gap: 8px; }
.field label { font-family: var(--head); font-size: .8125rem; font-weight: 700; }
.field select, .field input[type="text"], .field input[type="email"], .field input[type="number"], .field textarea {
  width: 100%;
  padding: 13px 15px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  background: #fff;
  font-size: .9375rem;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.field select:focus, .field input:focus, .field textarea:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(140,197,66,.22);
}
.field__hint { font-size: .75rem; color: var(--text-3); }

/* Result line under the contact form */
.form-status {
  margin-top: 4px;
  padding: 12px 15px;
  border-radius: var(--r-sm);
  font-size: .875rem;
  border: 1px solid;
}
.form-status.is-ok  { background: var(--accent-50);  border-color: var(--accent-300); color: var(--accent-700); }
.form-status.is-err { background: var(--bg-2);       border-color: var(--line-2);     color: var(--ink); }
.field-row { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; }

input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 999px; background: var(--bg-3); }
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--accent); border: 3px solid #fff;
  box-shadow: var(--sh-accent); cursor: pointer;
}
input[type="range"]::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--accent); border: 3px solid #fff; cursor: pointer; }

.calc {
  border: 1px solid var(--line);
  border-radius: var(--r-2xl);
  background: #fff;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  box-shadow: var(--sh-lg);
}
.calc__form { padding: clamp(26px, 3.2vw, 42px); display: grid; gap: 22px; align-content: start; }
.calc__out {
  position: relative;
  padding: clamp(26px, 3.2vw, 42px);
  background: linear-gradient(160deg, #F3F9EC 0%, #E2EFCF 100%);
  color: var(--text);
  display: flex; flex-direction: column;
  isolation: isolate;
}
.calc__out::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(420px 260px at 80% 8%, rgba(140,197,66,.24), transparent 62%);
}
.calc__price { font-family: var(--head); font-size: clamp(2.4rem, 4.6vw, 3.1rem); font-weight: 800; letter-spacing: -.05em; color: var(--text); line-height: 1; }
.calc__rows { margin: 24px 0; display: grid; gap: 13px; }
.calc__row { display: flex; justify-content: space-between; font-size: .875rem; color: var(--text-2); }
.calc__row b { color: var(--text); font-weight: 700; }
.calc__total { border-top: 1px solid rgba(107,163,46,.3); padding-top: 16px; }

.presets { display: flex; flex-wrap: wrap; gap: 8px; }
.preset {
  font-family: var(--head);
  font-size: .8125rem; font-weight: 700;
  padding: 9px 16px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-pill);
  color: var(--text-2);
  background: #fff;
  transition: background .22s var(--ease), color .22s var(--ease), border-color .22s var(--ease), box-shadow .22s var(--ease);
}
.preset:hover { border-color: var(--brand-300); color: var(--brand); background: var(--brand-50); }
.preset.active { background: var(--accent); border-color: transparent; color: #16240B; box-shadow: var(--sh-accent); }

.acc { border-top: 1px solid var(--line); }
.acc__item { border-bottom: 1px solid var(--line); }
.acc__btn {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 24px 0;
  text-align: left;
  font-family: var(--head);
  font-size: clamp(1rem, 1.4vw, 1.125rem);
  font-weight: 700;
  letter-spacing: -.02em;
  transition: color .2s var(--ease);
}
.acc__btn:hover { color: var(--brand); }
.acc__sign {
  flex-shrink: 0; width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--brand-50);
  position: relative;
  transition: background .25s var(--ease);
}
.acc__sign::before, .acc__sign::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  background: var(--brand); border-radius: 2px;
  transition: transform .3s var(--ease);
}
.acc__sign::before { width: 13px; height: 2px; }
.acc__sign::after  { width: 2px; height: 13px; }
.acc__item.open .acc__sign { background: var(--accent); }
.acc__item.open .acc__sign::before, .acc__item.open .acc__sign::after { background: #16240B; }
.acc__item.open .acc__sign::after { transform: rotate(90deg); }
.acc__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s var(--ease-out); }
.acc__item.open .acc__panel { grid-template-rows: 1fr; }
.acc__panel > div { overflow: hidden; }
.acc__panel p { padding-bottom: 26px; max-width: 70ch; color: var(--text-2); font-size: .9375rem; }

.code { background: #17181A; border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--sh-dark); width: 100%; }
.code__bar { display: flex; align-items: center; gap: 8px; padding: 14px 18px; border-bottom: 1px solid #34363A; }
.code__bar i { width: 11px; height: 11px; border-radius: 50%; }
.code__tabs { display: flex; gap: 4px; margin-left: 12px; }
.code__tab {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .6875rem; padding: 5px 12px; border-radius: 999px;
  color: #A9A6A0; transition: background .22s var(--ease), color .22s var(--ease);
}
.code__tab.active { background: rgba(255,255,255,.1); color: #fff; }
.code pre {
  margin: 0; padding: 22px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .78125rem; line-height: 1.78;
  color: #D9D7D3; overflow-x: auto;
}
.code pre::-webkit-scrollbar { height: 8px; }
.code pre::-webkit-scrollbar-thumb { background: #43464A; border-radius: 99px; }
.c-key { color: #B5DC85; }
.c-str { color: #C9CFC4; }
.c-num { color: #C4C2BD; }
.c-com { color: #7A7D82; font-style: italic; }
.c-fn  { color: #A9A6A0; }

.endpoints { border: 1px solid var(--line); border-radius: var(--r-xl); overflow: hidden; background: #fff; box-shadow: var(--sh-sm); }
.endpoint { display: flex; align-items: center; gap: 16px; padding: 15px 22px; flex-wrap: wrap; transition: background .2s var(--ease); }
.endpoint:hover { background: var(--brand-50); }
.endpoint + .endpoint { border-top: 1px solid var(--line); }
.endpoint__m {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: .6875rem; font-weight: 700;
  padding: 5px 11px; border-radius: 999px;
  min-width: 56px; text-align: center;
}
.endpoint__m.get  { background: var(--green-50); color: var(--green); }
.endpoint__m.post { background: var(--accent-100); color: var(--accent-700); }
.endpoint__p { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .8125rem; }
.endpoint__d { margin-left: auto; font-size: .8125rem; color: var(--text-2); text-align: right; }

/* Resets colour: these are light panels that may sit inside a dark section,
   where they would otherwise inherit white text and render invisible. */
.mock, .ctable-wrap, .tile {
  color: var(--text);
}
.mock { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-md); overflow: hidden; width: 100%; }
.mock__bar { display: flex; align-items: center; gap: 6px; padding: 12px 15px; border-bottom: 1px solid var(--line); background: var(--bg-2); }
.mock__bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--line-2); }
.mock__bar span { margin-left: 8px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .6875rem; color: var(--text-3); }
.mock__body { padding: 20px; }
.bar { height: 7px; border-radius: 999px; background: var(--bg-3); overflow: hidden; margin-top: 8px; }
.bar i { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

.filerow {
  display: flex; align-items: center; gap: 13px;
  padding: 12px 13px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--bg-2);
  font-size: .8125rem;
}
.filerow + .filerow { margin-top: 9px; }
.filerow__ico {
  width: 32px; height: 32px; border-radius: 10px; flex-shrink: 0;
  display: grid; place-items: center;
  background: var(--brand-100); color: var(--brand);
}
.filerow__meta { margin-left: auto; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .6875rem; color: var(--text-3); }

.chanrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--line); font-size: .875rem; }
.chanrow:last-child { border-bottom: 0; }
.chanrow__l { display: flex; align-items: center; gap: 10px; color: var(--text-2); }
.chanrow__l svg { color: var(--brand); }
.switch { width: 38px; height: 22px; border-radius: 999px; background: var(--accent); position: relative; flex-shrink: 0; }
.switch::after { content: ""; position: absolute; top: 3px; right: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; }
.switch.off { background: var(--line-2); }
.switch.off::after { right: auto; left: 3px; }

.swatches { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.swatch { border-radius: var(--r-md); aspect-ratio: 3/4; position: relative; overflow: hidden; box-shadow: var(--sh-sm); }
.swatch span {
  position: absolute; left: 10px; bottom: 10px;
  font-family: var(--head); font-size: .5625rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: #fff;
}

/* --------------------------------------------------------------------------
   18b. Spotlight — a soft glow that tracks the cursor across a card.
   JS writes --mx/--my; without JS the card simply never lights up.
   -------------------------------------------------------------------------- */
.feat::after,
.trust__card::after,
.pcard::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity .35s var(--ease);
  background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 0%),
              rgba(140,197,66,.16), transparent 66%);
}
.feat:hover::after,
.trust__card:hover::after,
.pcard:hover::after { opacity: 1; }

/* --------------------------------------------------------------------------
   19a. Platform tiles + comparison table
   -------------------------------------------------------------------------- */
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.tiles--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tile {
  display: grid;
  place-items: center;
  gap: 4px;
  min-height: 98px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: #fff;
  text-align: center;
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out), border-color .3s var(--ease);
}
.tile:hover { transform: translateY(-4px); box-shadow: var(--sh-md); border-color: var(--accent); }
.tile__name {
  font-family: var(--head);
  font-weight: 800;
  font-size: 1.0625rem;
  letter-spacing: -.035em;
  color: var(--text);
}
.tile__sub { font-size: .75rem; color: var(--text-3); }

/* Comparison table — scrolls inside its own frame on narrow screens */
.ctable-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--r-2xl);
  background: #fff;
  box-shadow: var(--sh-sm);
}
.ctable { width: 100%; min-width: 820px; border-collapse: collapse; font-size: .875rem; }
.ctable th, .ctable td { padding: 15px 20px; text-align: left; }
.ctable thead th {
  background: var(--ink);
  color: #fff;
  font-family: var(--head);
  font-weight: 700;
  font-size: .8125rem;
  letter-spacing: -.01em;
  white-space: nowrap;
}
.ctable thead th:first-child { border-top-left-radius: var(--r-2xl); }
.ctable thead th:last-child  { border-top-right-radius: var(--r-2xl); }
.ctable tbody td { border-top: 1px solid var(--line); color: var(--text-2); }
.ctable tbody th {
  border-top: 1px solid var(--line);
  font-family: var(--head);
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
}
.ctable tbody tr:hover th, .ctable tbody tr:hover td { background: var(--accent-50); }

.mk { display: inline-flex; align-items: center; gap: 9px; }
.mk__dot {
  width: 20px; height: 20px;
  border-radius: 50%;
  display: grid; place-items: center;
  flex-shrink: 0;
}
.mk--yes  .mk__dot { background: var(--accent-100); color: var(--accent-700); }
.mk--part .mk__dot { background: #FDF0DC; color: #B87708; }
.mk--no   .mk__dot { background: var(--bg-3); color: var(--text-3); }

.legend {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 12px 26px;
  margin-top: 22px;
  font-size: .8125rem;
  color: var(--text-2);
}

/* --------------------------------------------------------------------------
   19b. Colourful icon tiles
   The chrome stays black + lime; icon plates carry the wider artwork palette.
   -------------------------------------------------------------------------- */
.fcard__ico               { background: #EEF6E3; color: #4F7320; }
.fcard--green .fcard__ico { background: #E0F5F1; color: #0F8F80; }
.fcard--amber .fcard__ico { background: #FDF0DC; color: #B87708; }
.fcard--dark .fcard__ico  { background: #fff; color: #4F7320; }

.trust__badge             { background: #EEF6E3; color: #4F7320; }
.trust__badge--green      { background: #E6F1FC; color: #2A6FB8; }
.trust__badge--amber      { background: #FDF0DC; color: #B87708; }
.trust__badge--ink        { background: #E6F1FC; color: #2A6FB8; }

.mega__ico                { background: #EEF6E3; color: #4F7320; }
.mega__link:hover .mega__ico { background: var(--accent); color: #16240B; box-shadow: var(--sh-accent); }

.filerow__ico             { background: #E6F1FC; color: #2A6FB8; }
.chanrow__l svg           { color: #2A6FB8; }

/* Audience badge sits on the seam — lime reads better than black there */
.aud__ico                 { background: var(--grad-accent); color: #16240B; box-shadow: var(--sh-accent); }

/* Each feature SVG draws its own tinted plate, so the wrapper must not add one */
.feat__art                { background: transparent; }
.feat__art svg            { width: 100%; height: 100%; }

/* --------------------------------------------------------------------------
   20. Motion — reveal, parallax, word-by-word headings
   -------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(28px) scale(.985);
  transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
}
.reveal.in { opacity: 1; transform: none; }
.reveal[data-d="1"] { transition-delay: .09s; }
.reveal[data-d="2"] { transition-delay: .18s; }
.reveal[data-d="3"] { transition-delay: .27s; }

/* Parallax — JS writes --px; the element owns no other transform */
[data-parallax] { transform: translate3d(0, var(--px, 0px), 0); will-change: transform; }
/* The hero's grid layer drifts against the content */
.hero::after { transform: translate3d(0, var(--gridY, 0px), 0); }

/* Hero content fades as the section scrolls away. It deliberately does NOT
   translate: drifting it downward slid the headline block into the tracking
   form below it, and the form into the cover strip below that. */
.hero__inner { opacity: var(--heroO, 1); }

/* Headline arrives a word at a time */
.word-reveal .word {
  display: inline-block;
  opacity: 0;
  transform: translateY(.55em) rotate(1.5deg);
  animation: wordIn .75s var(--ease-out) forwards;
  animation-delay: calc(var(--i) * 55ms + 150ms);
}
@keyframes wordIn { to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
  [data-parallax], .hero::after, .hero__inner { transform: none !important; }
  .hero__inner { opacity: 1 !important; }
  .word-reveal .word { opacity: 1; transform: none; animation: none; }
}

/* --------------------------------------------------------------------------
   21. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  .foot__cols { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .trust { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

/* --- Nav: compress before collapsing -------------------------------------
   Browser zoom shrinks the CSS viewport (a 1366px laptop is 1093px at 125%
   and 911px at 150%), so a zoomed-in desktop user would otherwise lose the
   whole navigation. Between 1040px and 1260px the row tightens instead:
   smaller wordmark, tighter link padding, and "Track Order" drops to
   "Track". Only below 1040px does it fall back to the burger. */
@media (max-width: 1260px) and (min-width: 1040px) {
  .nav { gap: 12px; }
  .logo__img { height: 42px; }
  .nav__link { padding: 8px 9px; font-size: .875rem; }
  .nav__link svg { width: 12px; height: 12px; }
  .nav__actions { gap: 6px; }
  .nav__actions .btn--sm { padding: 8px 13px; font-size: .8125rem; }
  .nav__word { display: none; }
}

@media (max-width: 1039px) {
  .nav__list { display: none; }
  .nav__burger { display: grid; }
  .nav__cta-desktop { display: none; }
  .nav__track { display: none; }
}

/* The wordmark is the widest thing in the row on a phone — ease it down. */
@media (max-width: 560px) {
  .logo__img { height: 42px; }

  /* The display clamps bottom out at 2.6rem/2.05rem, which is still huge on a
     360px screen — a six-line headline. Give the small end its own floor. */
  h1 { font-size: clamp(1.75rem, 8vw, 2.6rem); }
  h2 { font-size: clamp(1.45rem, 6.4vw, 2.05rem); }
}

/* --- Short viewports ------------------------------------------------------
   The other half of zooming in: at 150% a 768px-tall laptop has only ~512px
   of CSS height, and the desktop vertical rhythm eats most of it. Compress
   the chrome and the display type so a screenful still shows a screenful.
   Keyed on height so it never fires on a tall phone held portrait. */
@media (max-height: 720px) and (min-width: 700px) {
  :root { --nav-h: 60px; }
  .logo__img { height: 40px; }
  .announce { padding-block: 6px; font-size: .75rem; }

  h1 { font-size: clamp(2rem, 4.4vw, 3.1rem); }
  h2 { font-size: clamp(1.6rem, 3.1vw, 2.3rem); }

  /* Trim the breathing room, never the strip clearance itself. */
  .hero { padding-top: clamp(30px, 3.5vw, 52px); padding-bottom: calc(var(--strip-pull) + 34px); }
  .hero p { margin-top: 14px; }
  .hero__meta { margin-top: 20px; }
  .herotrack { margin-top: 26px; padding-top: 22px; }

  .phero { padding-block: clamp(30px, 4vw, 52px); }
  .section { padding-block: clamp(38px, 5vw, 68px); }
  .section--tight { padding-block: clamp(26px, 3.2vw, 44px); }
  .sec-head { margin-bottom: clamp(24px, 3vw, 40px); }
}

/* The dialog is the one thing that must stay usable however short the
   viewport gets — pull it up and let it own nearly the full height. */
@media (max-height: 640px) {
  .track__panel {
    margin-block: 20px;
    max-height: calc(100vh - 40px);
    padding: 22px 24px;
  }
  .track__panel h2 { font-size: 1.25rem; margin-top: 12px; }
  .track__out { margin-top: 20px; padding-top: 20px; }
}

@media (max-width: 980px) {
  .aud { grid-template-columns: 1fr; }
  .aud__card, .aud__card--mid, .aud__card--dark { margin-top: 0; min-height: 0; }
  /* Bento collapses to a plain stack — spans would leave holes */
  .bento { grid-template-columns: minmax(0, 1fr); }
  .bento > :nth-child(1), .bento > :nth-child(2) { grid-column: auto; grid-row: auto; }
  .bento > .feat:nth-child(2) {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto 1fr auto;
  }
  .bento > .feat:nth-child(2) .feat__art { grid-row: 1 / -1; margin-bottom: 0; }
  .bento > .feat:nth-child(2) h3,
  .bento > .feat:nth-child(2) p,
  .bento > .feat:nth-child(2) .feat__list,
  .bento > .feat:nth-child(2) .btn { grid-column: 2; }
  .bento > .feat:nth-child(2) .feat__list { display: none; }
  .g-4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .g-3 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  /* Cards get too tall to pin usefully on a phone — fall back to normal flow */
  .flow { padding-bottom: 0; }
  .flow__step {
    position: static;
    grid-template-columns: 1fr;
    row-gap: 26px;
    min-height: 0;
  }
  .promo, .split, .phero__grid, .quotes, .calc, .foot__main { grid-template-columns: 1fr; }
  .split--rev .split__media { order: 0; }
  .plans { grid-template-columns: 1fr; }
  .band { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .band__cell:nth-child(2) { border-right: 0; }
  .band__cell:nth-child(-n+2) { border-bottom: 1px solid var(--line-dark); }
  .step-copy__n { font-size: 5rem; right: 16px; }
  .logowall { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .partnerwall { grid-template-columns: repeat(3, minmax(0,1fr)); }
}

@media (max-width: 640px) {
  .g-2, .g-3, .g-4 { grid-template-columns: 1fr; }
  .band { grid-template-columns: 1fr; }
  .band__cell { border-right: 0; border-bottom: 1px solid var(--line-dark); }
  .band__cell:last-child { border-bottom: 0; }
  .foot__cols { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .field-row { grid-template-columns: 1fr; }
  .trust { grid-template-columns: 1fr; }
  .tiles, .tiles--3 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .btn-row .btn { flex: 1 1 auto; }
  .announce { font-size: .75rem; }
  .foot__bottom { flex-direction: column; align-items: flex-start; }
  .logowall { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 20px 28px; }
  .partnerwall { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 22px 26px; }
}