/*
Theme Name: U-Neac Farmers
Theme URI: https://u-neacfarmers.org/
Author: Gideon Lapp
Description: The farmer-first marketing site for U-Neac Farmers - the all-in-one online store built for direct-market farms. Built in the U-Neac design language (cream, forest, gold; Fraunces + Karla + DM Mono + Caveat).
Version: 1.3.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GPLv2 or later
Text Domain: uneac-farmers
*/

/* ============================================================
   U-Neac Farmers - design system
   Forest #2F5D3A - Gold #E4B04A - Cream #F5F0E1 - Ink #2B2B28
   Shares its token names with the Raw Milk Movement build on
   purpose, so the two sites read as one family.
   ============================================================ */

:root {
  --ground:      #F5F0E1;
  --ground-sink: #EDE6D2;
  --paper:       #FCFAF2;
  --forest:      #2F5D3A;
  --forest-deep: #1E4027;
  --forest-soft: #4A7C57;
  --gold:        #E4B04A;
  --gold-deep:   #8A6111;   /* darkened from #92660F so small mono text clears AA on cream */
  --gold-wash:   #F6E4BA;
  --ink:         #2B2B28;
  --ink-2:       #3F4036;   /* 10/10 Gideon: darker body text (was #56574A) */
  --ink-3:       #66654F;   /* was #83816D */
  --green-band:  #2F5D3A;
  --on-band:     #F5F0E1;
  --on-band-2:   #C7D8CB;
  --on-forest:   #F3EEDF;
  --rule:        rgba(47, 93, 58, 0.20);
  --rule-soft:   rgba(47, 93, 58, 0.11);
  --lift:   0 1px 2px rgba(43,43,40,.06), 0 10px 26px -14px rgba(30,64,39,.34);
  --lift-2: 0 2px 4px rgba(43,43,40,.07), 0 22px 48px -22px rgba(30,64,39,.44);
  --photo-filter: none;

  --f-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --f-body: "Karla", "Segoe UI", system-ui, sans-serif;
  --f-mono: "DM Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --f-script: "Caveat", "Segoe Script", cursive;

  --measure: 65ch;
  --shell: 1180px;
  --r-md: 12px;
  --r-lg: 20px;

  /* The hero sits on a photograph, so it carries its own scrim and its own
     text colours rather than borrowing the page ones. Both themes get a
     full set - a visitor who picks dark should not meet a cream slab. */
  --hero-bg:      #F5F0E1;
  --hero-h1:      #1E4027;
  --hero-em:      #8A6412;
  --hero-sub:     #33342B;
  --hero-eyebrow: #8A6111;
  --hero-entity:  #3F4036;
  --hero-script:  #2F5D3A;
  --hero-ghost:   #2F5D3A;
  --hero-ghost-on:#F5F0E1;
  --hero-veil: linear-gradient(96deg, rgba(245,240,225,.94) 0%, rgba(245,240,225,.88) 28%, rgba(245,240,225,.56) 44%, rgba(245,240,225,.14) 58%, rgba(245,240,225,0) 67%);
  --hero-fade: linear-gradient(to top, #F5F0E1 0%, rgba(245,240,225,0) 100%);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground:      #14180F;
    --ground-sink: #0E1109;
    --paper:       #1D2318;
    --forest:      #8DC79A;
    --forest-deep: #223021;
    --forest-soft: #6FA87C;
    --gold:        #E4B04A;
    --gold-deep:   #EDC470;
    --gold-wash:   #3A2F14;
    --ink:         #EFE9D6;
    --ink-2:       #CFCFB8;
    --ink-3:       #A9AC93;
    --green-band:  #1B3123;
    --on-band:     #EFE9D6;
    --on-band-2:   #A7BFAC;
    --on-forest:   #EFE9D6;
    --rule:        rgba(239, 233, 214, 0.20);
    --rule-soft:   rgba(239, 233, 214, 0.10);
    --lift:   0 1px 2px rgba(0,0,0,.4), 0 10px 26px -14px rgba(0,0,0,.7);
    --lift-2: 0 2px 4px rgba(0,0,0,.45), 0 22px 48px -22px rgba(0,0,0,.8);
    --photo-filter: brightness(.86) saturate(.94);
    --hero-bg:      #14180F;
    --hero-h1:      #EFE9D6;
    --hero-em:      #E4B04A;
    --hero-sub:     #CFCFB8;
    --hero-eyebrow: #EDC470;
    --hero-entity:  #B4B59E;
    --hero-script:  #8DC79A;
    --hero-ghost:   #8DC79A;
    --hero-ghost-on:#14180F;
    --hero-veil: linear-gradient(96deg, rgba(20,24,15,.95) 0%, rgba(20,24,15,.90) 28%, rgba(20,24,15,.62) 44%, rgba(20,24,15,.20) 58%, rgba(20,24,15,0) 67%);
    --hero-fade: linear-gradient(to top, #14180F 0%, rgba(20,24,15,0) 100%);
  }
}

:root[data-theme="dark"] {
  --ground:      #14180F;
  --ground-sink: #0E1109;
  --paper:       #1D2318;
  --forest:      #8DC79A;
  --forest-deep: #223021;
  --forest-soft: #6FA87C;
  --gold:        #E4B04A;
  --gold-deep:   #EDC470;
  --gold-wash:   #3A2F14;
  --ink:         #EFE9D6;
  --ink-2:       #CFCFB8;
  --ink-3:       #A9AC93;
  --green-band:  #1B3123;
  --on-band:     #EFE9D6;
  --on-band-2:   #A7BFAC;
  --on-forest:   #EFE9D6;
  --rule:        rgba(239, 233, 214, 0.20);
  --rule-soft:   rgba(239, 233, 214, 0.10);
  --lift:   0 1px 2px rgba(0,0,0,.4), 0 10px 26px -14px rgba(0,0,0,.7);
  --lift-2: 0 2px 4px rgba(0,0,0,.45), 0 22px 48px -22px rgba(0,0,0,.8);
  --photo-filter: brightness(.86) saturate(.94);
  --hero-bg:      #14180F;
  --hero-h1:      #EFE9D6;
  --hero-em:      #E4B04A;
  --hero-sub:     #CFCFB8;
  --hero-eyebrow: #EDC470;
  --hero-entity:  #B4B59E;
  --hero-script:  #8DC79A;
  --hero-ghost:   #8DC79A;
  --hero-ghost-on:#14180F;
  --hero-veil: linear-gradient(96deg, rgba(20,24,15,.95) 0%, rgba(20,24,15,.90) 28%, rgba(20,24,15,.62) 44%, rgba(20,24,15,.20) 58%, rgba(20,24,15,0) 67%);
  --hero-fade: linear-gradient(to top, #14180F 0%, rgba(20,24,15,0) 100%);
}

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

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 18px;
  line-height: 1.66;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--f-display);
  font-variation-settings: "SOFT" 34, "WONK" 1, "opsz" 90;
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.015em;
  text-wrap: balance;
  margin: 0;
  color: var(--ink);
}
p { margin: 0; }
img, svg { display: block; max-width: 100%; }

a { color: var(--forest); text-decoration-color: var(--rule); text-underline-offset: 3px; }
a:hover { color: var(--gold-deep); }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 3px; }

.skip {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--forest); color: var(--on-forest);
  padding: 10px 16px; border-radius: 6px; font-weight: 600; text-decoration: none; transition: top .16s;
}
.skip:focus { top: 12px; color: var(--on-forest); }

/* -- layout primitives ------------------------------------ */
.shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: 26px; }
.shell--narrow { max-width: 880px; }
.shell--gate { max-width: 1100px; }
/* 10/10 /apply: a smaller top, a wider form, a real form title */
.phero--compact { padding-block: clamp(26px, 3.4vw, 42px) clamp(30px, 4vw, 48px); }
.phero--compact h1 { font-size: clamp(2rem, 3.8vw, 2.8rem); }
.band--apply { padding-block-start: clamp(30px, 4vw, 52px); }
.form-card.form-card--wide { max-width: 940px; margin-inline: auto; }
.uf-sb-title { font-family: var(--f-display); font-size: clamp(1.6rem, 2.6vw, 2.1rem); line-height: 1.15; margin: 0 0 22px; color: var(--ink); font-variation-settings: "SOFT" 40, "WONK" 0, "opsz" 60; }
.band { padding-block: clamp(74px, 9.5vw, 132px); position: relative; }
.band--sink { background: var(--ground-sink); }
.band--paper { background: var(--paper); }
.band--tight { padding-block: clamp(52px, 6.5vw, 84px); }
.band--forest { background: var(--green-band); color: var(--on-band); }
.band--forest h2, .band--forest h3, .band--forest h4 { color: var(--on-band); }
.band--forest .eyebrow { color: var(--gold); }
.band--forest .lede, .band--forest .body-copy { color: var(--on-band-2); }
.band--forest a { color: var(--gold); }

.eyebrow {
  font-family: var(--f-mono); font-size: .78rem; letter-spacing: .17em; text-transform: uppercase;
  color: var(--gold-deep); margin: 0 0 16px; display: flex; align-items: center; gap: 11px;
}
.eyebrow::before { content: ""; width: 28px; height: 2px; background: currentColor; flex: none; border-radius: 2px; }
.eyebrow--center { justify-content: center; }

.h-sec { font-size: clamp(2.3rem, 4.6vw, 3.35rem); }
.h-sub { font-size: 1.45rem; font-variation-settings: "SOFT" 34, "WONK" 0, "opsz" 26; }
.lede { font-size: 1.24rem; color: var(--ink-2); max-width: var(--measure); }
.body-copy { font-size: 1.08rem; color: var(--ink-2); max-width: var(--measure); }
.body-copy p + p { margin-top: 15px; }
.sec-head { max-width: 56ch; }
.sec-head--center { margin-inline: auto; text-align: center; }
.sec-head--center .lede { margin-inline: auto; }

.script { font-family: var(--f-script); font-weight: 600; line-height: 1.18; color: var(--forest); }
.script--gold { color: var(--gold); }
.script--lg { font-size: clamp(1.3rem, 2.4vw, 1.9rem); }

/* -- pull-quote: Gideon's voice, used as a visual beat ----- */
.quote {
  margin: 30px 0 0; padding: 4px 0 4px 26px; max-width: 30ch;
  border-left: 4px solid var(--gold);
  font-family: var(--f-script); font-weight: 600; line-height: 1.16;
  font-size: clamp(1.5rem, 2.8vw, 2.2rem); color: var(--forest);
}
.quote cite {
  display: block; margin-top: 12px; font-family: var(--f-mono); font-style: normal;
  font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3);
}
.quote--center { margin-inline: auto; text-align: center; border-left: 0; padding-left: 0; max-width: 34ch; }
.quote--center cite { color: var(--ink-3); }
.band--forest .quote { color: var(--gold); border-left-color: var(--gold); }
.band--forest .quote cite { color: var(--on-band-2); }

/* a standalone quote band - a breath between two heavy sections */
.quote-band { padding-block: clamp(48px, 6vw, 78px); text-align: center; }
.quote-band .quote {
  border-left: 0; padding-left: 0; margin-inline: auto; max-width: 26ch;
  font-size: clamp(1.7rem, 3.6vw, 2.8rem);
}

/* the hand-drawn wave, reused as every section divider */
.wave { display: block; width: 100%; height: clamp(34px, 4.4vw, 62px); }
.wave path.fill { fill: var(--ground); }
.wave path.line { fill: none; stroke: var(--forest); stroke-width: 3; vector-effect: non-scaling-stroke; }
.wave--to-sink path.fill { fill: var(--ground-sink); }
.wave--to-band path.fill { fill: var(--green-band); }
.wave--to-band path.line { stroke: var(--gold); }

/* -- buttons ---------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--f-body); font-weight: 700; font-size: 1rem;
  padding: 15px 28px; border-radius: 999px; border: 2px solid transparent;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: transform .16s ease, background-color .16s ease, box-shadow .16s ease, border-color .16s ease, color .16s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn--gold { background: var(--gold); color: #2B2B28; box-shadow: var(--lift); }
.btn--gold:hover { background: #F0C161; color: #2B2B28; box-shadow: var(--lift-2); }
.btn--forest { background: var(--forest-deep); color: var(--on-forest); }
.btn--forest:hover { background: var(--forest); color: var(--on-forest); }
.btn--ghost { border-color: var(--forest); color: var(--forest); background: transparent; }
.btn--ghost:hover { background: var(--forest); color: var(--on-forest); }
.btn--cream { background: #F5F0E1; color: #1E4027; }
.btn--cream:hover { background: #FFFDF4; color: #1E4027; }
.btn--onband { border-color: rgba(245,240,225,.55); color: var(--on-band); background: transparent; }
.btn--onband:hover { background: rgba(245,240,225,.13); color: var(--on-band); }
.btn--sm { padding: 10px 19px; font-size: .9rem; }
.btn--lg { padding: 17px 34px; font-size: 1.08rem; }
.arrow { transition: transform .16s ease; }
.btn:hover .arrow { transform: translateX(3px); }
.actions { display: flex; flex-wrap: wrap; gap: 13px; margin-top: 28px; }
.actions--center { justify-content: center; }

/* -- nav --------------------------------------------------- */
.nav {
  position: sticky; top: 0; z-index: 40;
  transition: transform .28s ease;   /* 6/10: slides away on scroll down, back on scroll up (like the farm stores) */
  background: color-mix(in srgb, var(--ground) 88%, transparent);
  backdrop-filter: blur(10px) saturate(1.2);
  border-bottom: 1px solid var(--rule-soft);
}
.nav-in { display: flex; align-items: center; gap: 20px; min-height: 72px; padding-block: 10px; }
.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; margin-right: auto; }
.brand-mark { width: 34px; height: 38px; color: var(--forest); flex: none; }
.brand-name {
  font-family: var(--f-display); font-variation-settings: "SOFT" 40, "WONK" 1, "opsz" 20;
  font-weight: 700; font-size: 1.2rem; line-height: 1.05; color: var(--ink); letter-spacing: -.01em;
}
.brand-sub {
  display: block; font-family: var(--f-mono); font-size: .6rem; letter-spacing: .17em;
  text-transform: uppercase; color: var(--ink-3); margin-top: 3px;
}
.brand .custom-logo { max-height: 88px; width: auto; }   /* 10/10: the badge logo, a bit smaller (it showed at 185px - the rule never matched, see header.php) */
.brand .custom-logo-link { display: block; line-height: 0; }
@media (max-width: 760px) { .brand .custom-logo { max-height: 60px; } }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pd-video .vid, .pd-video .split-media { border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--lift-2); }
.pd-still { position: relative; }
.pd-still img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; filter: var(--photo-filter); }
.pd-still span { position: absolute; left: 16px; bottom: 14px; background: rgba(20,24,15,.72); color: #F5F0E1; font: 600 .85rem var(--f-body); padding: 6px 12px; border-radius: 999px; }
.nav-menu { display: flex; align-items: center; gap: 24px; }
.nav-links { display: flex; align-items: center; gap: 23px; list-style: none; margin: 0; padding: 0; }
.nav-links a {
  text-decoration: none; color: var(--ink-2); font-weight: 600; font-size: .97rem;
  padding-block: 4px; border-bottom: 2px solid transparent; white-space: nowrap;
}
.nav-links a:hover { color: var(--forest); border-bottom-color: var(--gold); }
.nav-links a[aria-current="page"] { color: var(--forest); border-bottom-color: var(--gold); }
.nav-toggle { display: none; }

/* -- light / dark switch ---------------------------------- */
.theme-toggle {
  display: inline-flex; align-items: center; gap: 12px; flex: none;
  padding: 0; border: 0; background: transparent; cursor: pointer;
  font-family: var(--f-body); font-weight: 700; font-size: 1rem; color: var(--ink-2);
}
.theme-switch {
  position: relative; flex: none; display: block;
  width: 62px; height: 32px; border-radius: 999px;
  background: var(--ground-sink); border: 2px solid var(--rule);
  transition: background-color .18s ease, border-color .18s ease;
}
.theme-toggle:hover .theme-switch { border-color: var(--gold); }
.theme-toggle:focus-visible { outline: none; }
.theme-toggle:focus-visible .theme-switch { outline: 3px solid var(--gold); outline-offset: 3px; }

/* the two ends of the track */
.theme-switch .ts-ico {
  position: absolute; top: 50%; translate: 0 -50%;
  width: 15px; height: 15px; color: var(--ink-3);
  transition: color .18s ease, opacity .18s ease;
}
.theme-switch .ts-sun { left: 6px; }
.theme-switch .ts-moon { right: 6px; }
.theme-switch .ts-ico svg { width: 100%; height: 100%; }

/* the knob - gold, because gold is the accent in this system */
.theme-switch .ts-knob {
  position: absolute; top: 50%; left: 2px; translate: 0 -50%;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--gold); box-shadow: 0 2px 5px rgba(0,0,0,.28);
  transition: transform .2s cubic-bezier(.4,.1,.2,1), background-color .18s ease;
}

/* Where the knob sits, and which end lights up, is decided in CSS using the
   same three-state pattern as the colour tokens: default follows the system,
   an explicit [data-theme] overrides it. No JavaScript runs to position it,
   so the switch is already in the right place on the very first paint. */
.theme-switch .ts-sun { color: var(--gold-deep); }           /* light: sun end lit  */
:root[data-theme="light"] .theme-switch .ts-knob { transform: translateX(0); }
:root[data-theme="light"] .theme-switch .ts-sun { color: var(--gold-deep); }
:root[data-theme="light"] .theme-switch .ts-moon { color: var(--ink-3); }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-switch { background: var(--forest-deep); }
  :root:not([data-theme="light"]) .theme-switch .ts-knob { transform: translateX(30px); }
  :root:not([data-theme="light"]) .theme-switch .ts-sun { color: var(--ink-3); }
  :root:not([data-theme="light"]) .theme-switch .ts-moon { color: var(--gold); }
}
:root[data-theme="dark"] .theme-switch { background: var(--forest-deep); }
:root[data-theme="dark"] .theme-switch .ts-knob { transform: translateX(30px); }
:root[data-theme="dark"] .theme-switch .ts-sun { color: var(--ink-3); }
:root[data-theme="dark"] .theme-switch .ts-moon { color: var(--gold); }
:root[data-theme="light"] .theme-switch { background: var(--ground-sink); }

.theme-toggle-label { display: none; }
.theme-toggle-label .on-light, .theme-toggle-label .on-dark { display: none; }

@media (prefers-reduced-motion: reduce) {
  .theme-switch .ts-knob { transition: none; }
}

@media (max-width: 1060px) {
  .nav-menu { display: none; }
  .nav-toggle {
    display: inline-flex; align-items: center; background: transparent;
    border: 2px solid var(--rule); color: var(--ink); font-family: var(--f-body);
    font-weight: 700; font-size: .9rem; padding: 9px 15px; border-radius: 999px; cursor: pointer;
  }
  /* the whole menu, button included, drops as one panel - nothing positioned by hand */
  .nav[data-open="true"] .nav-menu {
    display: flex; flex-direction: column; align-items: stretch; gap: 0;
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--ground); border-bottom: 1px solid var(--rule);
    padding: 10px 26px 22px; box-shadow: var(--lift);
  }
  .nav[data-open="true"] .nav-links { flex-direction: column; align-items: stretch; gap: 0; width: 100%; }
  .nav[data-open="true"] .nav-links a { display: block; width: 100%; padding: 13px 0; font-size: 1.06rem; }
  .nav[data-open="true"] .nav-cta { margin-top: 14px; justify-content: center; }
  /* in the panel it becomes a full-width labelled row - same switch, with
     the label on the left and the track on the right */
  .nav[data-open="true"] .theme-toggle {
    width: 100%; min-height: 50px; border-radius: var(--r-md); padding: 11px 18px;
    border: 2px solid var(--rule); justify-content: space-between; margin-top: 12px;
  }
  .nav[data-open="true"] .theme-toggle-label { display: inline; order: -1; }
  .nav[data-open="true"] .theme-toggle-label .on-light { display: inline; }
  .nav[data-open="true"] .theme-toggle-label .on-dark { display: none; }
}
@media (max-width: 1060px) and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .nav[data-open="true"] .theme-toggle-label .on-light { display: none; }
  :root:not([data-theme="light"]) .nav[data-open="true"] .theme-toggle-label .on-dark { display: inline; }
}
@media (max-width: 1060px) {
  :root[data-theme="dark"] .nav[data-open="true"] .theme-toggle-label .on-light { display: none; }
  :root[data-theme="dark"] .nav[data-open="true"] .theme-toggle-label .on-dark { display: inline; }
  :root[data-theme="light"] .nav[data-open="true"] .theme-toggle-label .on-light { display: inline; }
  :root[data-theme="light"] .nav[data-open="true"] .theme-toggle-label .on-dark { display: none; }
}

/* -- breadcrumbs ------------------------------------------ */
.crumbs {
  font-family: var(--f-mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-3); padding-top: 24px; display: flex; flex-wrap: wrap; gap: 9px; align-items: center;
}
.crumbs a { color: var(--ink-3); text-decoration: none; }
.crumbs a:hover { color: var(--gold-deep); }
.crumbs .sep { color: var(--rule); }

/* -- page hero (inner pages) ------------------------------ */
.phero { background: var(--ground-sink); padding-block: clamp(38px, 5vw, 64px) clamp(48px, 6vw, 78px); }
.phero h1 { font-size: clamp(2.4rem, 5vw, 3.6rem); font-variation-settings: "SOFT" 46, "WONK" 1, "opsz" 120; letter-spacing: -.026em; }
.phero .lede { margin-top: 20px; }
.phero .script { margin-top: 18px; font-size: clamp(1.2rem, 2.1vw, 1.6rem); }

/* Feature pages lead with the screenshot beside the answer, so the first
   thing on the page is the thing itself rather than a wall of words. */
.phero--split .phero-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(30px, 4.5vw, 60px); align-items: center; margin-top: 26px;
}
@media (max-width: 940px) {
  .phero--split .phero-grid { grid-template-columns: 1fr; gap: 32px; }
  .phero--split .phero-grid .shot { order: -1; }
}
.phero--split .answer { margin-top: 22px; }

/* the answer-first block that opens every page and H2 section */
.answer {
  margin-top: 26px; max-width: 66ch;
  background: var(--paper); border: 1px solid var(--rule-soft); border-left: 5px solid var(--gold);
  border-radius: var(--r-md); padding: 22px 26px; box-shadow: var(--lift);
  font-size: 1.1rem; line-height: 1.62; color: var(--ink-2);
}
.answer b, .answer strong { color: var(--ink); font-weight: 700; }
.answer-label {
  display: block; font-family: var(--f-mono); font-size: .68rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--gold-deep); margin-bottom: 9px;
}

/* -- homepage hero ---------------------------------------- */
.hero { background: var(--hero-bg); color: var(--hero-sub); position: relative; }

/* The copy is the only thing in normal flow, so the stage is always at least
   as tall as the words. The photo and veil fill whatever that turns out to
   be, which is why long headlines never spill over the wave. */
.hero-stage {
  position: relative; display: flex; align-items: center;
  min-height: clamp(460px, 53vw, 760px); overflow: hidden;
}
.hero-photo { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: var(--hero-bg); }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.hero-photo::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 120px;
  background: var(--hero-fade); pointer-events: none;
}
.hero-veil {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: var(--hero-veil);
}
.hero-copy { position: relative; z-index: 2; width: 100%; padding-block: 46px 6%; }
.hero-copy .shell { width: 100%; }
.hero-text { max-width: 45ch; }
.hero-eyebrow {
  font-family: var(--f-mono); font-size: .74rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--hero-eyebrow); margin: 0 0 18px; display: flex; align-items: center; gap: 10px;
}
.hero-eyebrow::before { content: ""; width: 30px; height: 2px; background: currentColor; border-radius: 2px; }
.hero h1 {
  font-size: clamp(2.15rem, 3.9vw, 3.35rem);
  font-variation-settings: "SOFT" 46, "WONK" 1, "opsz" 130;
  color: var(--hero-h1); letter-spacing: -.028em; line-height: 1.04;
}
.hero h1 em { font-style: normal; color: var(--hero-em); }
.hero-sub { margin-top: 17px; font-size: 1.06rem; line-height: 1.55; color: var(--hero-sub); max-width: 43ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.hero-actions .btn--ghost { border-color: var(--hero-ghost); color: var(--hero-ghost); }
.hero-actions .btn--ghost:hover { background: var(--hero-ghost); color: var(--hero-ghost-on); }
.hero-entity { margin-top: 18px; font-size: .92rem; line-height: 1.5; color: var(--hero-entity); max-width: 46ch; }
.hero-script {
  position: absolute; left: 36%; bottom: 12%; z-index: 3;
  font-family: var(--f-script); font-weight: 600; font-size: clamp(1.05rem, 1.9vw, 1.7rem);
  line-height: 1.14; color: var(--hero-script); margin: 0;
}
.hero .wave path.fill { fill: var(--ground); }
.hero-text-m { display: none; }
.hero-script-m {
  display: none; font-family: var(--f-script); font-weight: 600; font-size: 1.45rem;
  line-height: 1.15; color: var(--hero-script); margin: 4px 0 18px;
}
@media (max-width: 980px) {
  .hero-stage { display: block; min-height: 0; }
  .hero-photo { position: relative; inset: auto; aspect-ratio: 16 / 10; }
  .hero-veil, .hero-copy, .hero-script { display: none; }
  .hero-script-m { display: block; }
  .hero-text-m { display: block; padding-top: 20px; padding-bottom: 30px; }
  .hero-text-m .hero-text { max-width: none; }
  .hero-text-m h1 { font-size: clamp(2.05rem, 8vw, 2.8rem); }
}

/* -- trust strip ------------------------------------------ */
.trust { background: var(--ground); border-block: 1px solid var(--rule-soft); padding-block: 26px; }
.trust-in { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 34px; }
.trust-lead {
  font-family: var(--f-script); font-size: 1.6rem; color: var(--forest); flex: none; line-height: 1.1;
}
.trust-badges { display: flex; flex-wrap: wrap; gap: 12px 26px; margin: 0; padding: 0; list-style: none; }
.trust-badges li {
  display: flex; align-items: center; gap: 10px; font-size: .97rem; color: var(--ink-2);
}
.trust-badges svg { width: 19px; height: 19px; color: var(--forest-soft); flex: none; }
.trust-badges b { color: var(--ink); font-weight: 700; }

/* -- empathy / split rows --------------------------------- */
.split {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 4.5vw, 62px); align-items: center;
}
.split--media-first .split-media { order: -1; }
@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; }
  .split--media-first .split-media { order: 0; }
}
.split + .split { margin-top: clamp(50px, 7vw, 88px); }
.split--center { align-items: center; }
.split-media { position: relative; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--lift-2); }
/* when the media is already a framed .shot, don't frame it twice */
.split-media--plain { border-radius: 0; overflow: visible; box-shadow: none; }
.split-media img { width: 100%; height: 100%; aspect-ratio: 16 / 11; object-fit: cover; filter: var(--photo-filter); }
.split-script {
  position: absolute; right: 22px; bottom: 20px; text-align: right; margin: 0;
  font-family: var(--f-script); font-weight: 600; font-size: clamp(1.05rem, 1.7vw, 1.5rem); line-height: 1.15;
  color: #FBF7EA; text-shadow: 0 2px 14px rgba(20,26,15,.75);
}

/* photo / video placeholder slots */
.ph, .vid {
  border-radius: var(--r-lg); overflow: hidden; background: var(--ground-sink);
  border: 1px dashed var(--rule); min-height: 240px;
  display: grid; place-items: center; text-align: center; padding: 22px;
  font-family: var(--f-mono); font-size: .8rem; letter-spacing: .06em; color: var(--ink-3);
}
.ph:has(img), .vid:has(iframe), .vid:has(video) { border-style: solid; border-color: var(--rule-soft); min-height: 0; padding: 0; box-shadow: var(--lift-2); }
.ph img { width: 100%; height: auto; filter: var(--photo-filter); }
.vid { aspect-ratio: 16 / 9; }
.vid iframe, .vid video { width: 100%; height: 100%; border: 0; display: block; background: #000; }

/* -- homepage showcase: the product, high up --------------- */
.showcase-head { max-width: 56ch; margin-inline: auto; text-align: center; }
.showcase-head .lede { margin-inline: auto; }

/* the lead row: one wide screenshot, big, straight under the hero */
.showcase-lead { margin-top: clamp(34px, 4vw, 52px); }
.showcase-lead .shot--show, .showcase-lead .ph--shot { box-shadow: var(--lift-2); }
.showcase-facts {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 30px;
  margin: 26px 0 0; padding: 0; list-style: none;
}
.showcase-facts li {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: .99rem; color: var(--ink-2); text-align: left;
}
.showcase-facts svg { width: 18px; height: 18px; color: var(--forest-soft); flex: none; margin-top: 5px; }

/* The alternating rows. Equal columns on purpose: the media swaps sides
   row to row, so an uneven split would make the screenshots grow and
   shrink down the page. */
.showcase-row { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: clamp(30px, 4.6vw, 68px); align-items: center; }
.showcase-row + .showcase-row { margin-top: clamp(56px, 7.5vw, 104px); }
.showcase-row--flip .showcase-media { order: -1; }
@media (max-width: 920px) {
  .showcase-row { grid-template-columns: 1fr; gap: 28px; }
  .showcase-row--flip .showcase-media { order: -1; }
  .showcase-row .showcase-media { order: -1; }
}
.showcase-row h3 { font-size: clamp(1.7rem, 3vw, 2.25rem); font-variation-settings: "SOFT" 38, "WONK" 1, "opsz" 50; }
.showcase-row .showcase-cap { margin-top: 14px; font-size: 1.06rem; color: var(--ink-2); max-width: 46ch; }
.showcase-row .checklist { margin-top: 20px; gap: 10px; }
.showcase-row .checklist li { font-size: .99rem; }

.shot--show { border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--rule-soft); box-shadow: var(--lift-2); background: var(--paper); }
.shot--show img { width: 100%; height: auto; display: block; }

/* A tall screenshot (the pickup email is a long one) would otherwise
   tower over its two lines of copy. Cap it and show the top, with a soft
   fade so the crop reads as "there is more", not as a mistake. */
.showcase-row .showcase-media .shot--show { position: relative; max-height: 520px; }
.showcase-row .showcase-media .shot--show::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 88px;
  background: linear-gradient(to top, var(--paper), transparent); pointer-events: none;
}
.ph--shot {
  aspect-ratio: 16 / 10; border-radius: var(--r-lg); border: 1px dashed var(--rule);
  background: var(--ground-sink); display: grid; place-items: center; text-align: center; padding: 24px;
  font-family: var(--f-mono); font-size: .78rem; letter-spacing: .05em; color: var(--ink-3); line-height: 1.7;
}

/* three smaller screens under the showcase */
.showcase-more { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 44px; }
@media (max-width: 900px) { .showcase-more { grid-template-columns: 1fr; max-width: 480px; margin-inline: auto; } }
.showcase-more figure { margin: 0; }
.showcase-more .shot--show, .showcase-more .ph--shot { aspect-ratio: 16 / 10; }
.showcase-more .shot--show img { height: 100%; object-fit: cover; object-position: 50% 0; }
.showcase-more h4 { font-size: 1.12rem; margin-top: 16px; font-variation-settings: "SOFT" 34, "WONK" 0, "opsz" 24; }
.showcase-more p { margin-top: 7px; font-size: .96rem; color: var(--ink-2); }

/* -- the four pillars ------------------------------------- */
.pillars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin-top: 50px; }
.pillars--5 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1080px) { .pillars, .pillars--5 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .pillars, .pillars--5 { grid-template-columns: 1fr; } }
.pillar {
  background: var(--paper); border: 1px solid var(--rule-soft); border-radius: var(--r-lg);
  box-shadow: var(--lift); text-decoration: none; display: flex; flex-direction: column;
  overflow: hidden; transition: transform .2s ease, box-shadow .2s ease;
}
.pillar:hover { transform: translateY(-4px); box-shadow: var(--lift-2); color: inherit; }
.pillar-body { padding: 30px 26px 26px; display: flex; flex-direction: column; flex: 1; }

/* When a screenshot is set the card leads with it and the gold coin lifts
   over the edge; with no screenshot the coin sits on its own as before. */
.pillar-thumb { aspect-ratio: 16 / 9; overflow: hidden; background: var(--ground-sink); }
.pillar-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; filter: var(--photo-filter); }
.pillar-thumb + .pillar-body { padding-top: 0; }
.pillar-badge {
  width: 56px; height: 56px; border-radius: 50%; background: var(--gold); color: #1E4027;
  display: grid; place-items: center; margin-bottom: 18px; flex: none; box-shadow: 0 3px 10px rgba(0,0,0,.16);
}
.pillar-thumb + .pillar-body .pillar-badge { margin: -28px 0 16px; position: relative; z-index: 2; }
.pillar-badge svg { width: 28px; height: 28px; }
.pillar h3 { font-size: 1.4rem; font-variation-settings: "SOFT" 34, "WONK" 0, "opsz" 30; color: var(--forest); }
.pillar p { margin-top: 11px; font-size: 1.02rem; color: var(--ink-2); }
.pillar-more {
  margin-top: auto; padding-top: 18px; display: inline-flex; align-items: center; gap: 7px;
  font-weight: 700; font-size: .95rem; color: var(--gold-deep);
}

/* -- feature tiles ---------------------------------------- */
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 44px; }
@media (max-width: 980px) { .tiles { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .tiles { grid-template-columns: 1fr; } }
.tile-card {
  background: var(--paper); border: 1px solid var(--rule-soft); border-radius: var(--r-md);
  padding: 24px 24px 22px; text-decoration: none; display: block;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.tile-card:hover { transform: translateY(-3px); box-shadow: var(--lift); border-color: var(--gold); color: inherit; }
/* an icon chip rather than a bare glyph - gives the grid some weight */
.tile-chip {
  width: 46px; height: 46px; border-radius: 13px; margin-bottom: 16px;
  background: var(--gold-wash); color: var(--forest); display: grid; place-items: center;
  border: 1px solid var(--rule-soft);
}
.tile-chip svg { width: 24px; height: 24px; }
.tile-card:hover .tile-chip { background: var(--gold); color: #1E4027; }
.tile-ico { width: 26px; height: 26px; color: var(--forest-soft); margin-bottom: 14px; }
.tile-card h3 { font-size: 1.18rem; font-variation-settings: "SOFT" 34, "WONK" 0, "opsz" 24; }
.tile-card p { margin-top: 8px; font-size: .98rem; color: var(--ink-2); }
.tile-card[data-static="1"] { pointer-events: none; }

/* a wide photo sitting inside a band, between the heading and the cards */
.band-photo {
  margin-top: 34px; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--lift-2);
  aspect-ratio: 21 / 8;
}
.band-photo img { width: 100%; height: 100%; object-fit: cover; filter: var(--photo-filter); }
@media (max-width: 700px) { .band-photo { aspect-ratio: 16 / 10; } }

/* -- models (open / private / PMA) ------------------------ */
.models { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 44px; }
@media (max-width: 900px) { .models { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; } }
.model {
  background: rgba(245,240,225,.07); border: 1px solid rgba(245,240,225,.18);
  border-radius: var(--r-md); padding: 28px 26px 26px;
}
.model h3 { font-size: 1.32rem; color: var(--on-band); font-variation-settings: "SOFT" 34, "WONK" 0, "opsz" 28; }
.model p { margin-top: 11px; color: var(--on-band-2); font-size: 1.01rem; }

/* -- checklists / how-it-works ---------------------------- */
.checklist { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 15px; max-width: 60ch; }
.checklist li {
  display: grid; grid-template-columns: 24px 1fr; gap: 13px; align-items: start;
  font-size: 1.06rem; color: var(--ink-2);
}
.checklist svg { width: 24px; height: 24px; color: var(--forest-soft); margin-top: 3px; flex: none; }
.checklist b { color: var(--ink); font-weight: 700; }
/* one-line bullets: tighter, and they read as a list rather than prose */
.checklist--tight { gap: 11px; margin-top: 24px; }
.checklist--tight li { font-size: 1.02rem; }
.band--forest .checklist li { color: var(--on-band-2); }
.band--forest .checklist b { color: var(--on-band); }
.band--forest .checklist svg { color: var(--gold); }

.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 46px; }
@media (max-width: 860px) { .steps { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; } }
.step-num {
  width: 46px; height: 46px; border-radius: 50%; background: var(--gold); color: #1E4027;
  display: grid; place-items: center; font-family: var(--f-mono); font-weight: 500; font-size: 1.1rem; margin-bottom: 16px;
}
.steps h3 { font-size: 1.28rem; }
.steps p { margin-top: 10px; color: var(--ink-2); font-size: 1.02rem; }

/* -- pricing ---------------------------------------------- */
.plans { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; margin-top: 46px; align-items: stretch; }
@media (max-width: 1080px) { .plans { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px) { .plans { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .plans { grid-template-columns: 1fr; max-width: 380px; margin-inline: auto; } }
.plan {
  background: var(--paper); border: 1px solid var(--rule-soft); border-radius: var(--r-lg);
  padding: 28px 22px 26px; text-align: center; box-shadow: var(--lift);
  display: flex; flex-direction: column; position: relative;
}
.plan--featured { border-color: var(--gold); box-shadow: var(--lift-2); }
.plan-flag {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  background: var(--gold); color: #2B2B28; font-family: var(--f-mono); font-size: .64rem;
  letter-spacing: .14em; text-transform: uppercase; padding: 5px 13px; border-radius: 999px; white-space: nowrap;
}
.plan h3 { font-size: 1.25rem; font-variation-settings: "SOFT" 34, "WONK" 0, "opsz" 26; color: var(--forest); }
.plan-cap { font-size: .88rem; color: var(--ink-3); margin-top: 8px; min-height: 2.6em; }
.plan-amt {
  font-family: var(--f-mono); font-size: 2.35rem; color: var(--ink); font-variant-numeric: tabular-nums;
  line-height: 1; margin-top: 16px;
}
.plan-amt small { font-size: .42em; letter-spacing: .1em; color: var(--ink-3); margin-left: 3px; }
.plan-note { margin-top: 14px; font-size: .88rem; color: var(--ink-3); }
.plan-beyond {
  margin-top: 34px; text-align: center; background: var(--gold-wash); border: 1px solid var(--gold);
  border-radius: var(--r-md); padding: 24px 26px; max-width: 640px; margin-inline: auto;
}
.plan-beyond h3 { font-size: 1.3rem; }
.plan-beyond p { margin-top: 9px; color: var(--ink-2); font-size: 1.02rem; }

.includes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 34px; margin: 32px 0 0; padding: 0; list-style: none; }
@media (max-width: 780px) { .includes { grid-template-columns: 1fr; } }
.includes li {
  display: grid; grid-template-columns: 21px 1fr; gap: 12px; align-items: start;
  font-size: 1.01rem; color: var(--ink-2); padding-block: 3px;
}
.includes svg { width: 21px; height: 21px; color: var(--forest-soft); margin-top: 4px; }

.soon { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; padding: 0; list-style: none; }
.soon li {
  font-family: var(--f-mono); font-size: .8rem; letter-spacing: .04em;
  background: var(--ground-sink); color: var(--ink-2); padding: 7px 15px; border-radius: 999px;
  border: 1px solid var(--rule-soft);
}

/* -- FAQ --------------------------------------------------- */
.faq { max-width: 78ch; margin-top: 38px; }
.faq details {
  border-top: 1px solid var(--rule-soft); padding: 4px 0;
}
.faq details:last-of-type { border-bottom: 1px solid var(--rule-soft); }
.faq summary {
  cursor: pointer; list-style: none; padding: 20px 40px 20px 0; position: relative;
  font-family: var(--f-display); font-variation-settings: "SOFT" 34, "WONK" 0, "opsz" 26;
  font-weight: 600; font-size: 1.16rem; color: var(--ink); line-height: 1.35;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 6px; top: 50%; width: 11px; height: 11px;
  border-right: 2.5px solid var(--forest); border-bottom: 2.5px solid var(--forest);
  transform: translateY(-70%) rotate(45deg); transition: transform .18s ease;
}
.faq details[open] summary::after { transform: translateY(-30%) rotate(225deg); }
.faq summary:hover { color: var(--forest); }
.faq-a { padding: 0 44px 22px 0; color: var(--ink-2); font-size: 1.04rem; }
.faq-a p + p { margin-top: 12px; }

/* -- screenshots ------------------------------------------ */
.shots { display: grid; gap: 26px; margin-top: 40px; }
.shots--2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 860px) { .shots--2 { grid-template-columns: 1fr; } }
.shot { border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--lift-2); border: 1px solid var(--rule-soft); background: var(--paper); }
.shot img { width: 100%; height: auto; }
.shot figcaption {
  font-family: var(--f-mono); font-size: .78rem; letter-spacing: .05em; color: var(--ink-3);
  padding: 13px 18px; border-top: 1px solid var(--rule-soft);
}

/* -- chapters (demo page) --------------------------------- */
.chapters { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 44px; }
@media (max-width: 980px) { .chapters { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .chapters { grid-template-columns: 1fr; } }
.chapter {
  background: var(--paper); border: 1px solid var(--rule-soft); border-radius: var(--r-md); padding: 24px 22px;
}
.chapter-n {
  font-family: var(--f-mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold-deep); margin-bottom: 11px;
}
.chapter h3 { font-size: 1.14rem; font-variation-settings: "SOFT" 34, "WONK" 0, "opsz" 24; }
.chapter p { margin-top: 9px; font-size: .97rem; color: var(--ink-2); }

/* -- contact form ----------------------------------------- */
.form-card {
  background: var(--paper); border: 1px solid var(--rule-soft); border-radius: var(--r-lg);
  padding: clamp(26px, 4vw, 40px); box-shadow: var(--lift-2); max-width: 680px; margin-top: 36px;
}
.form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 620px) { .form-row { grid-template-columns: 1fr; } }
.form-card label {
  /* 10/10 Gideon: the small light capitals were hard to read - labels are the site's normal text now */
  display: block; font-family: var(--f-body); font-size: 1rem; font-weight: 600; letter-spacing: 0;
  text-transform: none; color: var(--ink); margin-bottom: 7px;
}
.bc-when { border: 0; padding: 0; margin: 20px 0 0; }
.bc-when legend { font-weight: 600; color: var(--ink); margin-bottom: 8px; }
.form-card label.bc-opt { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-weight: 400; margin: 10px 0; }
.form-card .field.field--time { width: auto; padding: 8px 10px; }
.form-card .field.field--inline { flex: 1; min-width: 180px; width: auto; padding: 8px 12px; }
.form-card p { margin-top: 18px; }
.form-card p:first-of-type { margin-top: 0; }
/* 10/10: inside a two-column row both boxes start level (the first-of-type rule only zeroed the left one, so the right sat lower) */
.form-card .form-row > p { margin-top: 0; }
.form-card .form-row { margin-top: 18px; }
.form-card > .form-row:first-of-type, .form-card h2 + .form-row { margin-top: 0; }
.form-card h2 + .form-row { margin-top: 14px; }
.field {
  width: 100%; font-family: var(--f-body); font-size: 1.02rem;
  padding: 14px 18px; border-radius: var(--r-md);
  border: 2px solid var(--rule); background: var(--ground); color: var(--ink);
}
textarea.field { border-radius: var(--r-md); resize: vertical; }
.field::placeholder { color: var(--ink-3); }
.field:focus { border-color: var(--forest); outline: none; box-shadow: 0 0 0 4px var(--gold-wash); }
.form-note { font-size: .88rem; color: var(--ink-3); margin-top: 14px; }
.notice {
  margin-bottom: 26px; padding: 16px 20px; border-radius: var(--r-md);
  background: var(--gold-wash); border: 1px solid var(--gold); color: var(--ink); font-size: 1rem; max-width: 680px;
}
.notice--bad { background: transparent; border-color: #B4453A; }

/* -- final CTA -------------------------------------------- */
.cta-final { text-align: center; }
.cta-final .h-sec { color: var(--on-band); }
.cta-final .lede { color: var(--on-band-2); margin-inline: auto; }
.cta-final .actions { justify-content: center; }
.contours { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .45; pointer-events: none; }
.contours path { fill: none; stroke: var(--gold); stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.band--forest > .shell { position: relative; z-index: 1; }

/* -- footer ------------------------------------------------ */
.foot { background: var(--forest-deep); color: var(--on-forest); padding-block: 66px 36px; }
.foot-grid { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: 38px 30px; }
@media (max-width: 880px) { .foot-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .foot-grid { grid-template-columns: 1fr; } }
.foot h4 {
  font-family: var(--f-mono); font-size: .72rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold); font-weight: 500; margin-bottom: 15px;
}
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.foot a { color: #C7D8CB; text-decoration: none; font-size: .97rem; }
.foot a:hover { color: var(--gold); }
.foot-brand .brand-name { color: var(--on-forest); }
.foot-brand .brand-sub { color: #A7BFAC; }
.foot-brand .brand-mark { color: var(--gold); }
.foot-blurb { color: #C7D8CB; font-size: .97rem; margin-top: 17px; max-width: 36ch; }
.foot-script { font-family: var(--f-script); font-size: 1.5rem; color: var(--gold); margin-top: 18px; }
.foot-legal {
  margin-top: 46px; padding-top: 24px; border-top: 1px solid rgba(245,240,225,.16);
  display: flex; flex-wrap: wrap; gap: 12px 30px; justify-content: space-between;
  color: #C7D8CB; font-size: .84rem;
}
.foot-legal a { font-size: .84rem; text-decoration: underline; }

/* -- generic WP page content ------------------------------ */
.wp-page { padding-block: clamp(42px, 6vw, 84px); }
.wp-page .shell { max-width: 900px; }
.wp-content { color: var(--ink-2); font-size: 1.06rem; line-height: 1.7; margin-top: 22px; }
.wp-content h2, .wp-content h3 { color: var(--ink); margin-top: 1.5em; margin-bottom: .4em; }
.wp-content p + p, .wp-content ul, .wp-content ol { margin-top: 1em; }
.wp-content a { color: var(--gold-deep); text-decoration: underline; }
.wp-content img { max-width: 100%; height: auto; border-radius: var(--r-md); }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* -- the header gets out of the way (6/10) ------------------------------------------------ */
.nav.nav--away { transform: translateY(-100%); }
@media (prefers-reduced-motion: reduce) { .nav { transition: none; } }

/* -- feature blocks (6/10) ---------------------------------------------------------------- */
.cats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-top: 38px; }
.cat { position: relative; }
.cat-card {
  position: relative; display: block; overflow: hidden; border-radius: var(--r-md);
  aspect-ratio: 4 / 3; min-height: 230px; background: var(--forest-deep); box-shadow: var(--lift);
  text-decoration: none; isolation: isolate;
}
.cat-card img, .cat-card .uf-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; filter: var(--photo-filter); }
.cat:hover .cat-card img, .cat-card:focus-visible img { transform: scale(1.04); }
.cat-ph {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: radial-gradient(120% 90% at 30% 20%, #4A7C57 0%, #2F5D3A 45%, #1E4027 100%);
}
.cat-ph svg { width: 34%; height: 34%; color: rgba(245,240,225,.22); stroke-width: 1.4; transform: translateY(-14%); }
.cat-shade {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, rgba(8,10,6,.92) 0%, rgba(8,10,6,.72) 30%, rgba(8,10,6,.28) 58%, rgba(8,10,6,0) 78%);
}
.cat-txt { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 0 22px 20px; }
.cat-tag {
  display: block; font-family: var(--f-mono); font-size: .68rem; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(245,240,225,.82); margin-bottom: 6px;
}
.cat-name {
  display: block; font-family: var(--f-display); font-weight: 700; font-size: clamp(1.3rem, 2vw, 1.62rem);
  line-height: 1.12; color: #fff; letter-spacing: -.01em; text-shadow: 0 1px 12px rgba(0,0,0,.35);
}
.cat-more { display: none; }
.cat-drop {
  position: absolute; left: 0; right: 0; top: calc(100% - 14px); z-index: 20;
  padding: 18px 20px 16px; background: var(--paper); color: var(--ink);
  border: 1px solid var(--rule); border-radius: 0 0 var(--r-md) var(--r-md);
  box-shadow: 0 22px 40px -18px rgba(20,30,15,.45);
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
}
.cat-drop p { margin: 0 0 10px; font-size: .95rem; line-height: 1.5; }
.cat-drop ul { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 7px; }
.cat-drop li { display: flex; gap: 8px; font-size: .9rem; line-height: 1.4; }
.cat-drop li svg { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--forest-soft); }
.cat-go { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--forest); text-decoration: none; font-size: .95rem; }
.cat-go svg { width: 16px; height: 16px; }
@media (hover: hover) {
  .cat:hover .cat-drop, .cat:focus-within .cat-drop { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  .cat:hover { z-index: 25; }
}
@media (hover: none) {
  .cat-more {
    display: block; width: 100%; margin-top: 8px; padding: 9px 12px; border: 1px solid var(--rule); border-radius: 10px;
    background: var(--paper); color: var(--forest); font: 700 .92rem/1.2 var(--f-body); text-align: left; cursor: pointer;
  }
  .cat-more::after { content: " \25BE"; }
  .cat.open .cat-more::after { content: " \25B4"; }
  .cat-drop { position: static; border-radius: 10px; margin-top: 8px; display: none; opacity: 1; visibility: visible; transform: none; box-shadow: none; }
  .cat.open .cat-drop { display: block; }
}
@media (max-width: 980px) { .cats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .cats { grid-template-columns: 1fr; gap: 16px; } .cat-card { aspect-ratio: 16 / 10; min-height: 0; } }

/* -- switching-over boxes (6/10): information, not links -------------------------------- */
.pillar--static:hover { transform: none; box-shadow: var(--lift); }
.pillar--static h3 { margin-top: 2px; }

/* -- 6/10 round 3 ------------------------------------------------------------------------ */
.quote-band--contain { display: flow-root; padding-top: 0; }           /* the quote's own margin stays inside the dark band */
.sec-head--wide { max-width: 1040px; }
.sec-head--wide .h-sec { max-width: none; }
.cats-cta { margin-top: 44px; }
/* the demo call over a still from the demo */
.demo-still { position: relative; color: #fff; overflow: hidden;
  background: linear-gradient(180deg, rgba(10,14,8,.72) 0%, rgba(10,14,8,.82) 100%), var(--demo-still) center / cover no-repeat, #10140c; }
.demo-still::before, .demo-still::after { content: none; }
/* the demo stills are 1200x630 with black bars baked into the sides - zoom past them on wide screens */
@media (min-width: 901px) { .demo-still { background-size: auto, 132% auto, auto; background-position: center, 50% 40%, center; } }
.demo-still .h-sec, .demo-still .lede { color: #fff; }
.demo-still .lede { color: rgba(255,255,255,.86); }
.demo-still .eyebrow { color: var(--gold); }
.demo-still-play {
  display: grid; place-items: center; width: 78px; height: 78px; margin: 0 auto 22px; border-radius: 50%;
  background: rgba(255,255,255,.14); border: 2px solid rgba(255,255,255,.75); color: #fff;
  backdrop-filter: blur(4px); transition: transform .2s ease, background .2s ease;
}
.demo-still-play svg { width: 40px; height: 40px; }
.demo-still-play:hover { transform: scale(1.06); background: rgba(228,176,74,.35); }
/* a gold button on the green band always has dark text */
.band--forest .btn--gold, .btn--gold-onband { color: #1E2A16 !important; }

/* -- plan prices on the homepage (6/10) ----------------------------------------------------- */
.plans-mini { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; margin: 34px 0 6px; }
.plan-mini { position: relative; padding: 20px 16px 18px; text-align: center; background: var(--paper); border: 1px solid var(--rule-soft); border-radius: var(--r-md); box-shadow: var(--lift); }
.plan-mini--featured { border: 2px solid var(--gold); }
.plan-mini-flag { position: absolute; top: -11px; left: 50%; transform: translateX(-50%); padding: 3px 10px; border-radius: 999px; background: var(--gold); color: #2B2B28; font: 700 .68rem/1.3 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.plan-mini h3 { margin: 0 0 6px; font-family: var(--f-display); font-size: 1.08rem; color: var(--forest); }
.plan-mini-price { margin: 0; }
.plan-mini-price b { font-family: var(--f-display); font-size: 2rem; color: var(--ink); }
.plan-mini-price span { font-size: .85rem; color: var(--ink-soft, #6b6b60); margin-left: 2px; }
.plan-mini-cap { margin: 6px 0 0; font-size: .84rem; line-height: 1.35; color: var(--ink-soft, #6b6b60); }
@media (max-width: 980px) { .plans-mini { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .plans-mini { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* -- homepage plans: four + "more above" (6/10) -------------------------------------------- */
.plans-mini--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 980px; margin-inline: auto; }
.plans-more { text-align: center; margin: 14px 0 0; color: var(--ink-soft, #6b6b60); font-size: .98rem; }
.plans-more a { color: var(--forest); font-weight: 700; }
@media (max-width: 760px) { .plans-mini--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* -- footer: four columns, the farm line under them, the ministry box (6/10) --------------- */
.foot-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
.foot-plain li { font-size: 15.5px; line-height: 1.66; color: rgb(199, 216, 203); }   /* same size and colour as the links beside them */
.foot-sub { margin: -6px 0 10px; font-size: .86rem; opacity: .8; }
.foot-all { font-weight: 700; }
.foot-brand--row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px 32px; margin-top: 40px; padding-top: 30px; border-top: 1px solid rgba(243,238,223,.14); }
.foot-brand--row .foot-blurb, .foot-brand--row .foot-script { margin: 0; }
.foot-ministry { margin-top: 28px; padding: 20px 24px; border: 1px solid rgba(243,238,223,.18); border-radius: var(--r-md); background: rgba(0,0,0,.18); font-size: .94rem; line-height: 1.55; }
.foot-ministry p { margin: 0 0 4px; }
.foot-ministry-h { font-weight: 700; font-size: 1rem; margin-bottom: 8px !important; }
.foot-ministry a { color: inherit; }
@media (max-width: 900px) { .foot-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } .foot-brand--row { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .foot-grid--4 { grid-template-columns: 1fr !important; } }

/* -- 6/10 round 6 ---------------------------------------------------------------------------- */
/* nav: the Who-we-serve dropdown */
.nav-has-drop { position: relative; }
.nav-drop-btn { background: none; border: 0; padding: 0; font: inherit; font-size: 15.52px; font-weight: 600; color: rgb(86, 87, 74); cursor: pointer; }   /* same as the other menu items */
.nav-drop-btn[aria-current], .nav-has-drop:hover .nav-drop-btn { color: var(--forest); }
.nav-drop-btn::after { content: " \25BE"; font-size: .8em; }
.nav-drop {
  position: absolute; top: calc(100% + 12px); left: -14px; z-index: 50; min-width: 220px; margin: 0; padding: 8px; list-style: none;
  background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r-md); box-shadow: 0 18px 36px -16px rgba(20,30,15,.4);
  opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .15s, transform .15s, visibility 0s linear .15s;
}
.nav-drop::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }   /* keeps hover alive across the gap */
.nav-drop li a { display: block; padding: 8px 12px; border-radius: 8px; white-space: nowrap; }
.nav-drop li a:hover { background: var(--ground-sink); }
.nav-has-drop:hover .nav-drop, .nav-has-drop:focus-within .nav-drop, .nav-has-drop.open .nav-drop { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
@media (max-width: 960px) {
  .nav-drop { position: static; opacity: 1; visibility: visible; transform: none; display: none; box-shadow: none; border: 0; background: transparent; padding: 4px 0 4px 12px; }
  .nav-has-drop.open .nav-drop { display: block; }
}

/* the email-first videos */
.gate { display: grid; grid-template-columns: 1.35fr 1fr; gap: 30px; align-items: center; }   /* 10/10: the video a bit bigger */
.gate-still { display: grid; place-items: center; aspect-ratio: 16 / 9; border-radius: var(--r-lg); color: #fff;
  background: linear-gradient(180deg, rgba(10,14,8,.45), rgba(10,14,8,.7)), var(--gate-still) center / 132% auto no-repeat, var(--forest-deep); }
.gate-still svg { width: 72px; height: 72px; opacity: .9; }
.gate-form .form-row { display: block; }
@media (max-width: 860px) { .gate { grid-template-columns: 1fr; } }
.call-check label { display: flex; gap: 8px; align-items: center; font-size: .95rem; text-transform: none; letter-spacing: 0; font-family: var(--f-body); color: var(--ink); }
.call-done .btn { margin-top: 4px; }

/* who-we-serve pages */
.serve-hero { position: relative; padding: 46px 0 70px; background: var(--ground-sink); }
.serve-hero h1 { font-family: var(--f-display); font-size: clamp(2.2rem, 4.6vw, 3.6rem); line-height: 1.05; margin: 10px 0 0; max-width: 18ch; }
.serve-hero .lede { margin-top: 16px; max-width: 46ch; }
.serve-hero--photo { color: #fff; background: linear-gradient(90deg, rgba(10,14,8,.82) 0%, rgba(10,14,8,.55) 55%, rgba(10,14,8,.25) 100%), var(--serve-img) center / cover no-repeat; min-height: 440px; display: flex; align-items: flex-end; }
.serve-hero--photo h1, .serve-hero--photo .lede, .serve-hero--photo .crumbs, .serve-hero--photo .crumbs a { color: #fff; }
.serve-hero--photo .eyebrow { color: var(--gold); }
.serve-hero--photo .serve-ghost { color: #fff; border-color: rgba(255,255,255,.8); }
.serve-points { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-top: 34px; }
.serve-point { display: flex; flex-direction: column; padding: 22px 20px; background: var(--paper); border: 1px solid var(--rule-soft); border-radius: var(--r-md); box-shadow: var(--lift); text-decoration: none; color: inherit; transition: transform .15s; }
.serve-point:hover { transform: translateY(-3px); color: inherit; }
.serve-point h3 { margin: 0 0 6px; font-family: var(--f-display); font-size: 1.15rem; color: var(--forest); }
.serve-point p { margin: 0 0 14px; font-size: .95rem; }
.serve-more { margin-top: auto; display: inline-flex; gap: 6px; align-items: center; font-weight: 700; color: var(--gold-deep); font-size: .9rem; }
.serve-more svg { width: 16px; height: 16px; }
@media (max-width: 980px) { .serve-points { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .serve-points { grid-template-columns: 1fr; } }
.serve-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.serve-card { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: var(--r-md); overflow: hidden; text-decoration: none; background: radial-gradient(120% 90% at 30% 20%, #4A7C57 0%, #2F5D3A 45%, #1E4027 100%); box-shadow: var(--lift); }
.serve-card-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.serve-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(8,10,6,.9), rgba(8,10,6,.2) 60%, rgba(8,10,6,0)); }
.serve-card-txt { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 16px 18px; color: #fff; }
.serve-card-txt b { display: block; font-family: var(--f-display); font-size: 1.3rem; }
.serve-card-txt small { display: block; font-size: .85rem; opacity: .85; line-height: 1.35; margin-top: 4px; }
@media (max-width: 980px) { .serve-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* footer: the farm line beside the ministry box */
.foot-bottom { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.9fr); gap: 32px; align-items: start; margin-top: 40px; padding-top: 30px; border-top: 1px solid rgba(243,238,223,.14); }
.foot-bottom .foot-ministry { margin-top: 0; }
.foot-bottom .foot-blurb { margin-top: 14px; }
.foot-ministry ul { margin: 4px 0 8px 22px !important; padding: 0 !important; list-style: disc !important; display: block !important; }
.foot-ministry li { margin: 1px 0 !important; padding: 0 !important; display: list-item !important; }
@media (max-width: 900px) { .foot-bottom { grid-template-columns: 1fr; } }

/* 6/10 round 2: Features dropdown (two columns on desktop) + the audience pages' reasons */
@media (min-width: 961px) {
  .nav-drop--2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 4px; min-width: 590px; }
  .nav-drop--2 .nav-drop-all { grid-column: 1 / -1; border-top: 1px solid var(--rule-soft); margin-top: 4px; padding-top: 4px; }
}
.nav-drop-all a { font-weight: 700; color: var(--gold-deep); }
.pillars--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .pillars--3 { grid-template-columns: 1fr; max-width: 620px; margin-left: auto; margin-right: auto; } }
.reason-num { font-family: var(--f-display); font-size: 1.5rem; font-weight: 700; }
.pillar p.reason-line { font-family: var(--f-display); font-style: italic; color: var(--gold-deep); font-size: 1.04rem; margin-top: 8px; }
.serve-legal { display: flex; gap: 10px; align-items: flex-start; max-width: 760px; margin: 30px auto 0; padding: 14px 18px; border: 1px solid var(--rule-soft); border-radius: var(--r-md); background: var(--ground-sink); font-size: .95rem; color: var(--ink-2); }
.serve-legal svg { width: 20px; height: 20px; flex: none; margin-top: 2px; color: var(--forest); }

/* 6/10: a page with its own hero photo (Florists) - the photo sits on the right and fades in, so the person in it is not behind the headline */
@media (min-width: 981px) {
  .hero--own .hero-photo { left: 40%; background: transparent; -webkit-mask-image: linear-gradient(to right, transparent 0, #000 22%); mask-image: linear-gradient(to right, transparent 0, #000 22%); }
  .hero--own .hero-photo img { object-position: 20% 40%; }
  .hero--own .hero-stage { background: var(--hero-bg); }
}

/* 6/10: an empty screenshot slot, as visitors see it - a green tile with the feature icon */
.shot-tile { aspect-ratio: 16 / 10; border-radius: var(--r-lg); display: grid; place-items: center; color: var(--gold); background: radial-gradient(120% 90% at 30% 20%, #4A7C57 0%, #2F5D3A 45%, #1E4027 100%); box-shadow: var(--lift); }
.shot-tile svg { width: 72px; height: 72px; opacity: .9; }

/* Help articles (single.php). The U-Neac Help plugin writes its buttons and
   boxes with WooCommerce-style classes and inline light colours; restyle them
   here so they match the site and stay readable in dark mode. */
.help-article .wp-content .button {
  display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
  font-family: var(--f-body); font-weight: 700; font-size: 1rem; line-height: 1.2;
  padding: 13px 26px !important; border-radius: 999px; border: 2px solid var(--forest); color: var(--forest);
}
.help-article .wp-content .button.alt { background: var(--gold); border-color: var(--gold); color: #2B2B28; box-shadow: var(--lift); }
.help-article .wp-content .button:hover { transform: translateY(-2px); }
.help-article .wp-content div[style*="#faf8f4"] {
  background: var(--paper) !important; border-color: var(--rule) !important; color: var(--ink-2);
}
.help-article .wp-content [style*="color:#555"],
.help-article .wp-content [style*="color:#666"] { color: var(--ink-2) !important; }
.help-article .wp-content [style*="color:#888"] { color: var(--ink-3) !important; }
.help-article .wp-content ul, .help-article .wp-content ol { padding-left: 1.3em; }
.help-article .wp-content li + li { margin-top: .35em; }

/* 10/10: the Farmer Community (U-Neac Community engine) needs room for its three columns - a page holding it widens */
.wp-page .shell:has(.uc-grid) { max-width: 1240px; }