/* ═══════════════════════════════════════════════════════════════
   EVERGREEN TOKENS — retone the whole page, not just the chrome.
   plero-min-landing.css ships cool-slate ink (#15171F) and olive gold
   (#9A7A2E); overriding the tokens here converts every element that
   derives from them — headings, body copy, keylines, SVG strokes.
   ═══════════════════════════════════════════════════════════════ */
:root{
  /* Nothing on the plate may sit near-white: the white window mat has to
     read as a clean border at every edge. Lightest ivory stays a clear
     step off #fff, and the three surfaces keep their own hierarchy. */
  --paper:#F6F1E2;      /* ivory ground */
  --paper-2:#F0EAD7;    /* recessed band */
  --panel:#F9F4E4;      /* raised card */
  --ink:#12211A;        /* evergreen ink */
  --ink-ch:18,33,26;
  --dim:rgba(18,33,26,.72);
  --faint:rgba(18,33,26,.54);
  --hush:rgba(18,33,26,.26);
  --gold:#8A6A22;       /* brass, on ivory */
  --gold-soft:#A6853A;
  --gold-deep:#6B4F12;
  --gold-tint:rgba(138,106,34,.10);
  --gold-line:rgba(138,106,34,.42);
  --line:rgba(18,33,26,.13);
  --line-2:rgba(18,33,26,.07);
}
/* brass reads brighter where it sits on an evergreen ground */
.hero-green .kick,.live .hero-green .aud-h1 em,.live .hero-green .t-hero em,.live .hero-green h1 em,.hero-green .aud-h1 em,.hero-green .t-hero em,.hero-green h1 em{color:#D7B069}

/* plero-evergreen-chrome.css — evergreen footer for the root pages that load
   plero-min-landing.css. Link AFTER it. Deep evergreen ground, ivory type,
   brass column heads, white logo container. */
.ft{background:radial-gradient(700px 380px at 8% -10%, rgba(215,176,105,.10), transparent 60%),linear-gradient(172deg,#143A26,#0F2A1D);border-top:0;color:rgba(237,231,214,.72)}
.ft .brand,.ft .brand-word{color:#EDE7D6}
.ft .brand:hover .brand-word{color:#D7B069}
.ft .brand-mark{background:#fff;border-color:#fff;border-radius:9px}
.ft .brand-mark svg path{fill:#0F2A1D}
.ft-tag{color:rgba(237,231,214,.72)}
.ft-col h4{color:#D7B069}
.ft-col a{color:rgba(237,231,214,.72)}
.ft-col a:hover{color:#D7B069}
.ft-disc{color:rgba(237,231,214,.72);border-top-color:rgba(237,231,214,.17)}
.ft-disc b{color:#EDE7D6;font-weight:400}
.ft-bottom{color:rgba(237,231,214,.62)}

/* ═══════════════════════════════════════════════════════════════
   HERO RHYTHM — evergreen is used deliberately, not everywhere.

   EVERGREEN HERO  → the pitch pages you land on to be persuaded:
                     Why Plero, For Churches, For Boards, For Nonprofits,
                     Security & Trust.
   IVORY HERO      → the pages you arrive at to read or to work:
                     How It Works, Model Your Numbers, Readiness,
                     About, Letter, Contact, legal.
   Add .hero-green to the hero section to opt a page in.
   ═══════════════════════════════════════════════════════════════ */
.live .sec.hero-green,.live .hero-green,.hero-green{background:
    radial-gradient(880px 480px at 82% -10%, rgba(215,176,105,.19), transparent 62%),
    radial-gradient(640px 480px at 2% 110%, rgba(23,61,43,.9), transparent 60%),
    linear-gradient(168deg,#143A26 0%,#0F2A1D 56%,#0C2318 100%);
  color:rgba(237,231,214,.72)}
/* centred audience hero: let the green bleed, keep the measure inside */
.live .aud-hero.hero-green,.aud-hero.hero-green{max-width:none;padding:clamp(88px,11vw,150px) 24px;background:
    radial-gradient(880px 480px at 82% -10%, rgba(215,176,105,.19), transparent 62%),
    radial-gradient(640px 480px at 2% 110%, rgba(23,61,43,.9), transparent 60%),
    linear-gradient(168deg,#143A26 0%,#0F2A1D 56%,#0C2318 100%)}
.aud-hero.hero-green>*{max-width:920px;margin-left:auto;margin-right:auto;width:100%}
.live .hero-green .kick,.hero-green .kick{color:#D7B069}
.hero-green .kick::before,.hero-green .kick::after{background:#D7B069}
.live .hero-green .aud-h1,.live .hero-green .t-hero,.live .hero-green h1,.hero-green .aud-h1,.hero-green .t-hero,.hero-green h1{color:#EDE7D6;max-width:20ch;margin-left:auto;margin-right:auto}
.live .hero-green .aud-h1 em,.live .hero-green .t-hero em,.live .hero-green h1 em,.hero-green .aud-h1 em,.hero-green .t-hero em,.hero-green h1 em{color:#D7B069}
.live .hero-green .aud-sub,.live .hero-green .lede,.hero-green .aud-sub,.hero-green .lede{color:rgba(237,231,214,.78)}
.hero-green .aud-sub b,.hero-green .lede b{color:#EDE7D6;font-weight:400}
.live .hero-green .btn-solid,.hero-green .btn-solid{background:#D7B069;border-color:#D7B069;color:#0F2A1D}
.hero-green .btn-solid:hover{background:#E3C489;border-color:#E3C489;color:#0F2A1D}
.live .hero-green .btn-line,.hero-green .btn-line{border-color:rgba(237,231,214,.24);color:#EDE7D6}
.hero-green .btn-line:hover{border-color:#D7B069;color:#D7B069}
.hero-green .fine,.hero-green .cta-note{color:rgba(237,231,214,.66)}
.hero-green .cta-note b{color:rgba(237,231,214,.82);font-weight:400}
/* the trust hero's shield illustration, inverted for the green ground */
.hero-green .st-hero-ill .halo{stroke:rgba(215,176,105,.5)}
.hero-green .st-hero-ill .dot{fill:#D7B069}
.hero-green .st-hero-ill .shield{stroke:#EDE7D6;fill:rgba(215,176,105,.14)}
.hero-green .st-hero-ill .chk{stroke:#D7B069}
/* the section-index chips under the trust hero */
.hero-green .st-toc a{border-color:rgba(237,231,214,.24);color:rgba(237,231,214,.78)}
.hero-green .st-toc a:hover{border-color:#D7B069;color:#D7B069}

/* primary buttons on ivory: evergreen, not near-black */
.btn-solid{background:#0F2A1D;border-color:#0F2A1D;color:#EDE7D6}
.btn-solid:hover{background:#173D2B;border-color:#173D2B;color:#EDE7D6}
/* the header CTA follows the same rule */
.hd-cta{background:#0F2A1D;border-color:#0F2A1D;color:#EDE7D6}
.hd-cta:hover{background:#173D2B;border-color:#173D2B;color:#EDE7D6}

/* ── the problem band: evergreen, smooth gradient, brass charting ── */
.live .thesis-dark,.thesis-dark{background:
    radial-gradient(900px 560px at 22% 28%, rgba(215,176,105,.15), transparent 60%),
    radial-gradient(700px 560px at 96% 106%, rgba(20,58,38,.85), transparent 62%),
    linear-gradient(163deg,#1A4530 0%,#143A26 34%,#0F2A1D 68%,#0B2016 100%);
  border-top-color:rgba(237,231,214,.14);border-bottom-color:rgba(237,231,214,.14);
  color:rgba(237,231,214,.72)}
.live .thesis-dark .kick,.thesis-dark .kick{color:#D7B069}
.live .thesis-dark .kick::before,.thesis-dark .kick::before{background:#D7B069}
.live .thesis-dark .t-sec,.thesis-dark .t-sec{color:#EDE7D6}
.live .thesis-dark .t-sec em,.thesis-dark .t-sec em{color:#D7B069}
.live .thesis-dark .t-sec .muted,.thesis-dark .t-sec .muted{color:rgba(237,231,214,.5)}
.live .thesis-dark .thesis-say,.thesis-dark .thesis-say{color:rgba(237,231,214,.76)}
.live .thesis-dark .thesis-say em,.thesis-dark .thesis-say em{color:#D7B069}
.live .thesis-dark .hairline,.thesis-dark .hairline{background:rgba(215,176,105,.5)}
.live .thesis-dark .btn-solid,.thesis-dark .btn-solid{background:#D7B069;border-color:#D7B069;color:#0F2A1D}
.live .thesis-dark .btn-solid:hover,.thesis-dark .btn-solid:hover{background:#E3C489;border-color:#E3C489;color:#0F2A1D}
.live .thesis-dark .btn-line,.thesis-dark .btn-line{border-color:rgba(237,231,214,.24);color:#EDE7D6}
.live .thesis-dark .btn-line:hover,.thesis-dark .btn-line:hover{border-color:#D7B069;color:#D7B069}
.live .thesis-dark .cta-note,.thesis-dark .cta-note{color:rgba(237,231,214,.66)}
.thz-base{stroke:rgba(237,231,214,.28)}
.thz-bar{fill:rgba(237,231,214,.16)}
.thz-grow{stroke:#E3C489}
.thz-area{fill:rgba(215,176,105,.13)}
.thz-cap{fill:#E3C489}
.thz-node{fill:#0F2A1D;stroke:#E3C489}
.thz-lbl{fill:rgba(237,231,214,.6)}
.thz-lbl-gold{fill:#D7B069}
.thz-drop{stroke:rgba(237,231,214,.3)}

/* ── the footer's closing line: the last words on every page ── */
.ft{position:relative;container-type:inline-size}
.ft>*{position:relative;z-index:1}
.ft::after{content:"Think Permanence.";display:flex;justify-content:space-between;
  max-width:1180px;margin:clamp(38px,4.6vw,68px) auto 0;padding-top:clamp(20px,2.6vw,30px);
  border-top:1px solid rgba(237,231,214,.17);
  font-family:var(--ser,var(--serif,'Instrument Serif',serif));
  /* justified edge to edge of the container: the words stretch the full measure */
  font-size:min(16.9cqw,200px);line-height:.84;letter-spacing:-.045em;
  white-space:nowrap;
  color:rgba(237,231,214,.14);pointer-events:none;user-select:none}

/* ═══════════════════════════════════════════════════════════════
   THE PLATE — the ivory page mounted on a white mat, from the
   printed trifold. Inset on the sides, weighted at the bottom
   (the framed-print proportion; even margins read as a default).
   Evergreen bands bleed to the PLATE's edges, never the window's.
   Selector is body>… so it beats each page's local .live rule.
   ═══════════════════════════════════════════════════════════════ */
:root{--mat-x:clamp(12px,2.4vw,40px);--mat-t:clamp(12px,1.6vw,26px);--mat-b:clamp(20px,2.6vw,44px)}
html:root,html:root>body{background:#fff}
body>.live,body>.plate{width:auto;margin:var(--mat-t) var(--mat-x) var(--mat-b);background:var(--paper);position:relative}
/* the sticky header rides the plate, not the window */
body>.live>.hd,body>.plate>.hd{border-radius:0}
@media print{body>.live,body>.plate{margin:0}}

/* the sticky bar rides the plate: ivory glass, not white */
body>.live>.hd,body>.plate>.hd,.hd.hd-glass{background:rgba(246,241,226,.92);-webkit-backdrop-filter:saturate(150%) blur(16px);backdrop-filter:saturate(150%) blur(16px)}
.hd.hd-glass{border-bottom:1px solid var(--line)}