/*
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.1.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:       #56574A;
  --ink-3:       #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:     #46473C;
  --hero-eyebrow: #8A6111;
  --hero-entity:  #56574A;
  --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:       #B0B199;
    --ink-3:       #85886F;
    --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:     #B0B199;
    --hero-eyebrow: #EDC470;
    --hero-entity:  #9A9B85;
    --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:       #B0B199;
  --ink-3:       #85886F;
  --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:     #B0B199;
  --hero-eyebrow: #EDC470;
  --hero-entity:  #9A9B85;
  --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; }
.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;
  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: 46px; width: auto; }
.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 toggle ---------------------------------- */
.theme-toggle {
  display: inline-grid; place-items: center; flex: none;
  width: 40px; height: 40px; padding: 0; cursor: pointer;
  background: transparent; border: 2px solid var(--rule); border-radius: 999px;
  color: var(--ink-2);
  transition: color .16s ease, border-color .16s ease, background-color .16s ease, transform .16s ease;
}
.theme-toggle:hover { color: var(--forest); border-color: var(--gold); transform: translateY(-1px); }
.theme-toggle svg { width: 19px; height: 19px; }

/* What the button shows is pure CSS, using exactly the same three-state
   pattern as the token blocks above: .on-light is what you see while the
   page is light (a moon, "Dark mode"), .on-dark while it is dark. No JS
   is involved, so it is correct on the very first paint. */
.theme-toggle .on-dark { display: none; }
.theme-toggle .on-light { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .on-dark { display: block; }
  :root:not([data-theme="light"]) .theme-toggle .on-light { display: none; }
}
:root[data-theme="dark"] .theme-toggle .on-dark { display: block; }
:root[data-theme="dark"] .theme-toggle .on-light { display: none; }
:root[data-theme="light"] .theme-toggle .on-dark { display: none; }
:root[data-theme="light"] .theme-toggle .on-light { display: block; }

.theme-toggle-label { display: none; }
.theme-toggle-label .on-light, .theme-toggle-label .on-dark { display: 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 the toggle becomes a labelled row, not a bare icon */
  .nav[data-open="true"] .theme-toggle {
    width: 100%; height: auto; border-radius: var(--r-md); padding: 13px 18px;
    grid-auto-flow: column; justify-content: center; gap: 10px; margin-top: 12px;
    font-family: var(--f-body); font-weight: 700; font-size: 1rem;
  }
  .nav[data-open="true"] .theme-toggle-label { display: inline; }
  .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; }

/* -- 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 {
  display: block; font-family: var(--f-mono); font-size: .72rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: 7px;
}
.form-card p { margin-top: 18px; }
.form-card p:first-of-type { margin-top: 0; }
.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; }
}