/* ==========================================================================
   Paddock Networks | bespoke flagship redesign (paddocknetworks.com.au)
   Identity: "whole-property connectivity", grounded, expansive, premium agri-tech.
   Palette: deep paddock green + open-sky blue + warm horizon oat (OKLCH, earthy).
   Type on a contrast axis: Fraunces (expansive display serif) + Inter (clean sans).
   Centrepiece: a scroll-driven property link-map. Connection spreads from the
   homestead out to the shed, the back paddock and the bore as you scroll, the
   links lighting up one hop at a time.
   Self-contained. No build step. Distinct from the shared niche framework.
   ========================================================================== */
:root{
  --sky:        oklch(0.975 0.018 230);
  --bg:         oklch(0.984 0.012 95);
  --bg-2:       oklch(0.965 0.018 92);
  --paper:      oklch(1 0 0);
  --oat:        oklch(0.945 0.026 88);
  --oat-2:      oklch(0.915 0.034 84);

  --ink:        oklch(0.27 0.028 150);
  --ink-soft:   oklch(0.40 0.024 150);
  --muted:      oklch(0.52 0.020 150);

  --green:      oklch(0.46 0.082 152);
  --green-ink:  oklch(0.38 0.080 152);
  --green-deep: oklch(0.27 0.050 154);
  --green-night:oklch(0.225 0.045 156);

  --blue:       oklch(0.58 0.108 234);
  --blue-ink:   oklch(0.46 0.110 236);
  --blue-soft:  oklch(0.93 0.038 232);

  --clay:       oklch(0.66 0.118 58);
  --clay-ink:   oklch(0.52 0.118 52);
  --wheat:      oklch(0.86 0.072 82);

  --line:       oklch(0.88 0.018 96);
  --line-2:     oklch(0.82 0.022 94);
  --on-dark:    oklch(0.97 0.014 92);

  --serif: "Libre Baskerville", Georgia, "Times New Roman", serif;
  --sans:  "Source Sans 3", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --maxw: 1200px;
  --gutter: clamp(1.15rem, 5vw, 5rem);
  --radius: 18px; --radius-lg: 28px; --radius-sm: 12px;
  --shadow: 0 2px 6px oklch(0.27 0.05 154 / .06), 0 26px 60px -26px oklch(0.27 0.05 154 / .28);
  --shadow-sm: 0 1px 3px oklch(0.27 0.05 154 / .07), 0 12px 26px -18px oklch(0.27 0.05 154 / .22);

  --z-nav:200;
  --ease: cubic-bezier(.16,1,.3,1);
}
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
body{
  margin:0; background:var(--bg); color:var(--ink); font-family:var(--sans);
  font-size:clamp(1.02rem,.99rem + .18vw,1.14rem); line-height:1.65;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg{ max-width:100%; display:block; }
a{ color:var(--green-ink); }
::selection{ background:oklch(0.86 0.072 82 / .8); }

h1,h2,h3,h4{ font-family:var(--serif); font-weight:480; line-height:1.05;
  letter-spacing:-0.016em; text-wrap:balance; margin:0; color:var(--ink);
  font-optical-sizing:auto; }
h1{ font-size:clamp(2.5rem,1.7rem + 3.9vw,4.7rem); }
h2{ font-size:clamp(1.95rem,1.4rem + 2.5vw,3.25rem); }
h3{ font-size:clamp(1.26rem,1.08rem + .85vw,1.6rem); }
p{ margin:0; text-wrap:pretty; overflow-wrap:break-word; }
.lead{ font-size:clamp(1.16rem,1.04rem + .58vw,1.46rem); line-height:1.5; color:var(--ink-soft); }

.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.measure{ max-width:62ch; }
.skip{ position:absolute; left:-999px; }
.skip:focus{ left:1rem; top:1rem; z-index:999; background:var(--ink); color:#fff; padding:.7rem 1rem; border-radius:8px; }
:where(a,button,summary,input,textarea):focus-visible{ outline:3px solid var(--blue); outline-offset:3px; border-radius:6px; }

.kicker{ font-family:var(--sans); font-weight:600; font-size:.82rem; letter-spacing:.06em;
  text-transform:uppercase; color:var(--green-ink); margin:0 0 1rem;
  display:inline-flex; align-items:center; gap:.55rem; }
.kicker::before{ content:""; width:1.6rem; height:2px; border-radius:2px; background:var(--clay); flex:none; }

/* ---------- buttons ---------- */
.btn{ display:inline-flex; align-items:center; gap:.5rem; font-family:var(--sans); font-weight:600; white-space:nowrap;
  font-size:1rem; line-height:1; padding:.95rem 1.5rem; border-radius:999px; border:1.6px solid transparent;
  text-decoration:none; cursor:pointer; transition:transform .4s var(--ease), background-color .25s, box-shadow .4s, border-color .25s; }
.btn--primary{ background:var(--green); color:var(--on-dark); box-shadow:0 10px 26px -12px oklch(0.46 0.082 152 / .7); }
.btn--primary:hover{ background:var(--green-ink); transform:translateY(-2px); box-shadow:0 16px 36px -12px oklch(0.46 0.082 152 / .8); }
.btn--ghost{ background:transparent; color:var(--green-ink); border-color:var(--line-2); }
.btn--ghost:hover{ border-color:var(--green); transform:translateY(-2px); }
.btn--lg{ padding:1.1rem 1.9rem; font-size:1.07rem; }
.btn--on-dark{ background:var(--on-dark); color:var(--green-deep); }
.btn--on-dark:hover{ background:#fff; transform:translateY(-2px); }
.textlink{ color:var(--green-ink); font-weight:600; text-decoration:none; border-bottom:2px solid oklch(0.66 0.118 58 / .45); padding-bottom:1px; transition:border-color .25s; }
.textlink:hover{ border-color:var(--clay); }
a:not(.btn):not(.brand):not(.foot__col a):not(.textlink){ }
@media (prefers-reduced-motion: reduce){ .btn:hover{ transform:none; } }

/* ---------- header ---------- */
.site{ position:sticky; top:0; z-index:var(--z-nav); background:oklch(0.984 0.012 95 / .82);
  backdrop-filter:blur(12px) saturate(1.25); border-bottom:1px solid transparent;
  transition:border-color .3s, background-color .3s; }
.site.is-stuck{ border-color:var(--line); }
.site__in{ display:flex; align-items:center; justify-content:space-between; min-height:74px; gap:1rem; }
.brand{ display:inline-flex; align-items:center; gap:.6rem; text-decoration:none; color:var(--ink);
  font-family:var(--serif); font-weight:500; font-size:1.32rem; letter-spacing:-0.02em; }
.brand__mark{ width:34px; height:34px; flex:none; }
.nav{ display:flex; align-items:center; gap:1.5rem; }
.nav a:not(.btn){ color:var(--ink-soft); text-decoration:none; font-weight:500; font-size:.97rem; }
.nav a:not(.btn):hover{ color:var(--green-ink); }
.nav a[aria-current="page"]{ color:var(--green-ink); }
.nav__toggle{ display:none; font-family:var(--sans); font-weight:600; font-size:.95rem; color:var(--ink);
  background:var(--paper); border:1.5px solid var(--line-2); border-radius:999px; padding:.5rem 1.05rem; cursor:pointer; }
@media (max-width:760px){
  .nav__toggle{ display:inline-block; }
  .nav{ position:absolute; top:100%; right:var(--gutter); left:var(--gutter);
    flex-direction:column; align-items:stretch; gap:.4rem; background:var(--paper);
    border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow);
    padding:.7rem; margin-top:.4rem; display:none; }
  .nav[data-open="true"]{ display:flex; }
  .nav a:not(.btn){ padding:.6rem .8rem; border-radius:10px; }
  .nav a:not(.btn):hover{ background:var(--bg-2); }
  .nav .btn{ justify-content:center; margin-top:.2rem; }
}

/* ---------- hero ---------- */
.hero{ position:relative; padding:clamp(3rem,2.6rem + 5vw,7rem) 0 clamp(2.5rem,2rem + 4vw,5rem); overflow:hidden; }
.hero::before{ content:""; position:absolute; inset:-25% -12% auto -12%; height:88%; z-index:-1;
  background:radial-gradient(58% 70% at 76% 14%, oklch(0.93 0.038 232 / .8), transparent 68%),
             radial-gradient(52% 64% at 8% 4%, oklch(0.945 0.026 88 / .9), transparent 64%);
  filter:blur(6px); }
.hero__grid{ display:grid; grid-template-columns:1.06fr .94fr; gap:clamp(2rem,4vw,4.5rem); align-items:center; }
@media (max-width:920px){ .hero__grid{ grid-template-columns:1fr; } }
.hero h1{ margin-bottom:1.2rem; }
.hero h1 em{ font-style:italic; color:var(--green-ink); font-weight:480; }
.hero .lead{ max-width:46ch; margin-bottom:1.9rem; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:1rem; align-items:center; }
.hero__note{ margin-top:1.8rem; max-width:48ch; color:var(--muted); font-size:.97rem;
  padding-left:1rem; border-left:3px solid var(--oat-2); }

/* hero figure: the property link-map preview card */
.hero__fig{ position:relative; justify-self:center; width:min(100%,460px); }

/* ---------- section rhythm ---------- */
.section{ padding:clamp(3.5rem,2.6rem + 4.5vw,7rem) 0; }
.section.panel{ background:var(--oat); }
.section__head{ max-width:46ch; margin-bottom:clamp(2rem,3vw,3rem); }
.section__head h2{ margin-bottom:.9rem; }
.section__head p{ color:var(--ink-soft); font-size:1.16rem; }

/* ---------- reveal motion (visible by default; JS hides only below-fold) ---------- */
.reveal{ transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.is-pending{ opacity:0; transform:translateY(22px); }
@media (prefers-reduced-motion: reduce){ .reveal.is-pending{ opacity:1; transform:none; } }

/* ---------- pains ("cut off everywhere else") ---------- */
.pains{ display:grid; grid-template-columns:repeat(auto-fit,minmax(15rem,1fr)); gap:clamp(1rem,2vw,1.6rem); }
.pain{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:1.5rem 1.5rem 1.6rem;
  min-width:0; box-shadow:var(--shadow-sm); }
.section.panel .pain{ background:var(--paper); }
.pain h3{ font-size:1.18rem; display:flex; gap:.6rem; align-items:flex-start; margin-bottom:.5rem; min-width:0; }
.pain h3 .x{ flex:none; width:1.5rem; height:1.5rem; border-radius:50%; background:oklch(0.66 0.118 58 / .16);
  color:var(--clay-ink); font-family:var(--sans); font-weight:700; font-size:.9rem; display:grid; place-items:center; margin-top:.15rem; }
.pain p{ color:var(--ink-soft); font-size:.99rem; }

/* ---------- feats ---------- */
.feats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(16rem,1fr)); gap:clamp(1.2rem,2.4vw,2rem); }
.feat{ display:flex; gap:1rem; align-items:flex-start; min-width:0; }
.feat > div{ min-width:0; }
.feat__ic{ width:46px; height:46px; flex:none; border-radius:13px; padding:11px;
  background:var(--green); color:var(--on-dark); box-shadow:0 10px 22px -12px oklch(0.46 0.082 152 / .7); }
.feat h3{ font-size:1.22rem; margin-bottom:.4rem; }
.feat p{ color:var(--ink-soft); font-size:1rem; overflow-wrap:break-word; }
.feat a{ word-break:break-word; }
.section.panel .feat__ic{ background:var(--green); }

/* ---------- centrepiece: scroll-driven property link-map ---------- */
/* NB: no overflow:hidden here, it would disable position:sticky on .map__stage. */
.map{ background:var(--green-night); color:var(--on-dark); position:relative;
  padding:clamp(3.5rem,2.6rem + 4.5vw,7rem) 0; }
.map::before{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(44% 36% at 82% 6%, oklch(0.58 0.108 234 / .22), transparent 70%),
             radial-gradient(46% 38% at 8% 98%, oklch(0.46 0.082 152 / .42), transparent 70%); }
.map .wrap{ position:relative; z-index:1; }
.map__intro{ max-width:42ch; padding-bottom:clamp(1rem,2vw,2rem); }
.map__intro .tag{ font-family:var(--sans); font-weight:600; letter-spacing:.04em; color:var(--wheat);
  font-size:.86rem; text-transform:uppercase; margin-bottom:1rem; display:inline-flex; gap:.5rem; align-items:center; }
.map__intro h2{ color:var(--on-dark); margin-bottom:.85rem; }
.map__intro p{ color:oklch(0.86 0.02 92); font-size:1.16rem; }

.map__cols{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,5vw,5rem); align-items:start; }
@media (max-width:900px){ .map__cols{ grid-template-columns:1fr; } }

/* the sticky stage with the SVG property map */
.map__stage{ position:sticky; top:0; height:100vh; display:flex; align-items:center; justify-content:center; }
.scene{ width:100%; max-width:540px; }
.scene__frame{ position:relative; width:100%; aspect-ratio:5/4; border-radius:var(--radius-lg);
  background:linear-gradient(170deg, oklch(0.30 0.045 156), oklch(0.21 0.04 158));
  border:1px solid oklch(0.5 0.05 156 / .4); box-shadow:0 40px 80px -34px #000; overflow:hidden; }
.scene__frame svg{ width:100%; height:100%; }

/* the map svg: ground, link paths, site nodes */
.pm-ground{ fill:oklch(0.26 0.04 152 / .55); }
.pm-grid{ stroke:oklch(0.5 0.05 152 / .16); stroke-width:.6; }
.pm-link{ fill:none; stroke:oklch(0.62 0.06 150 / .3); stroke-width:2.2; stroke-linecap:round;
  stroke-dasharray:1 0; }
.pm-link.is-live{ stroke:var(--blue); stroke-width:2.6;
  filter:drop-shadow(0 0 6px oklch(0.58 0.108 234 / .7)); }
.pm-pulse{ fill:none; stroke:oklch(0.7 0.1 234 / .9); stroke-width:2.6; stroke-linecap:round;
  stroke-dasharray:7 240; stroke-dashoffset:0; opacity:0; }
.pm-link.is-live + .pm-pulse{ opacity:1; animation:flow 1.5s linear infinite; }
@keyframes flow{ to{ stroke-dashoffset:-247; } }
.pm-node circle{ fill:oklch(0.32 0.04 154); stroke:oklch(0.55 0.05 152 / .5); stroke-width:1.4;
  transition:fill .5s var(--ease), stroke .5s var(--ease); }
.pm-node.is-live circle{ fill:var(--green); stroke:var(--wheat); stroke-width:2; }
.pm-node.is-source circle{ fill:var(--blue); stroke:oklch(0.85 0.05 232); }
.pm-node text{ fill:oklch(0.8 0.02 92); font-family:var(--sans); font-size:8.6px; font-weight:600;
  transition:fill .5s; }
.pm-node.is-live text{ fill:var(--on-dark); }
.pm-ic{ fill:none; stroke:var(--on-dark); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.scene__badge{ position:absolute; left:5%; bottom:5%; background:oklch(1 0 0 / .1);
  backdrop-filter:blur(6px); border:1px solid oklch(1 0 0 / .18); border-radius:999px;
  padding:.45rem .95rem; font-family:var(--sans); font-weight:600; font-size:.82rem; color:var(--on-dark);
  display:inline-flex; gap:.5rem; align-items:center; }
.scene__badge .live{ width:.55rem; height:.55rem; border-radius:50%; background:var(--blue);
  box-shadow:0 0 0 0 oklch(0.58 0.108 234 / .6); animation:ping2 2s var(--ease) infinite; }
@keyframes ping2{ 0%{ box-shadow:0 0 0 0 oklch(0.58 0.108 234 / .55); } 70%,100%{ box-shadow:0 0 0 .55rem oklch(0.58 0.108 234 / 0); } }

/* scrolling beats beside the map */
.hops{ padding:4vh 0 8vh; }
.hop{ min-height:62vh; display:flex; flex-direction:column; justify-content:center; max-width:34ch; }
.hop__step{ font-family:var(--sans); font-weight:700; font-size:.8rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--wheat); margin-bottom:.7rem; display:flex; gap:.6rem; align-items:center; }
.hop__step span{ width:1.7rem; height:1.7rem; border-radius:50%; border:1.5px solid oklch(0.7 0.06 88 / .5);
  display:grid; place-items:center; font-size:.82rem; }
.hop h3{ color:var(--on-dark); font-size:clamp(1.5rem,1.2rem + 1.6vw,2.3rem); margin-bottom:.7rem; }
.hop p{ color:oklch(0.84 0.02 92); font-size:1.08rem; }

@media (max-width:900px){
  .map__stage{ height:auto; position:sticky; top:64px; padding:1rem 0 1.5rem; }
  .scene{ max-width:360px; }
  .hops{ padding:2vh 0 0; }
  .hop{ min-height:54vh; }
}
@media (prefers-reduced-motion: reduce){
  .pm-link.is-live + .pm-pulse{ animation:none; }
  .scene__badge .live{ animation:none; }
}

/* ---------- compare (uptime by summer) ---------- */
.compare{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,4vw,4rem); align-items:center; }
@media (max-width:860px){ .compare{ grid-template-columns:1fr; } }
.compare h2{ margin-bottom:1rem; }
.compare > div:first-child p{ color:var(--ink-soft); }
.compare > div:first-child p + p{ margin-top:1rem; }
.yoy{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:clamp(1.6rem,3vw,2.4rem); box-shadow:var(--shadow-sm); min-width:0; }
.yoy__cap{ font-family:var(--serif); font-weight:500; font-size:1.15rem; margin:0 0 1.2rem; }
.yoy__row{ display:flex; align-items:center; gap:1rem; margin-bottom:1rem; }
.yoy__yr{ font-family:var(--sans); font-weight:700; font-size:.92rem; color:var(--muted); width:3rem; flex:none; }
.yoy__track{ flex:1; height:.9rem; border-radius:999px; background:var(--oat-2); overflow:hidden; min-width:0; }
.yoy__track i{ display:block; height:100%; border-radius:999px; background:oklch(0.62 0.06 150); }
.yoy__track.now i{ background:linear-gradient(90deg, var(--green), var(--blue)); }
.yoy__foot{ color:var(--muted); font-size:.88rem; margin:.4rem 0 0; }

/* ---------- steps ---------- */
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.5rem,3vw,3rem); counter-reset:s; }
@media (max-width:820px){ .steps{ grid-template-columns:1fr; gap:0; } }
.step{ counter-increment:s; position:relative; padding-top:1.7rem; border-top:2px solid var(--line-2); min-width:0; }
@media (max-width:820px){ .step{ padding:1.6rem 0; } .step + .step{ border-top:1px solid var(--line); } }
.step::before{ content:none; font-family:var(--serif); font-size:1.5rem; color:var(--clay-ink);
  position:absolute; top:1.45rem; right:0; }
.step h3{ font-size:1.26rem; margin:.2rem 0 .5rem; padding-right:1.6rem; }
.step p{ color:var(--ink-soft); }

/* ---------- proof / stats ---------- */
.proof{ max-width:64ch; }
.proof h2{ margin-bottom:1rem; }
.proof p{ color:var(--ink-soft); }
.proof p + p{ margin-top:1rem; }
.stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(11rem,1fr)); gap:1.2rem; margin-top:2rem; max-width:none; }
.stat{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:1.3rem 1.4rem;
  min-width:0; box-shadow:var(--shadow-sm); }
.section.panel .stat{ background:var(--bg); }
.stat b{ display:block; font-family:var(--serif); font-weight:500; font-size:1.7rem; color:var(--green-ink);
  line-height:1.05; letter-spacing:-0.02em; }
.stat span{ display:block; color:var(--muted); font-size:.92rem; margin-top:.35rem; overflow-wrap:break-word; }

/* ---------- guide article ---------- */
.article{ max-width:62ch; }
.article h2{ margin:0 0 .9rem; }
.article p{ color:var(--ink-soft); }
.article p + p{ margin-top:1rem; }
.tbl-wrap{ overflow-x:auto; border-radius:var(--radius); border:1px solid var(--line); }
table.gtbl{ width:100%; border-collapse:collapse; font-size:.98rem; background:var(--paper); min-width:34rem; }
table.gtbl th,table.gtbl td{ padding:.85rem 1rem; text-align:left; border-bottom:1px solid var(--line); }
table.gtbl thead th{ font-family:var(--serif); font-weight:500; background:var(--oat); border-bottom:2px solid var(--line-2); }
table.gtbl tbody tr:last-child td{ border-bottom:0; }

/* ---------- faq ---------- */
.faq{ max-width:780px; }
.faq details{ border-bottom:1px solid var(--line-2); }
.faq summary{ list-style:none; cursor:pointer; padding:1.4rem 2.5rem 1.4rem 0; position:relative;
  font-family:var(--serif); font-weight:500; font-size:1.2rem; color:var(--ink); }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:""; position:absolute; right:.3rem; top:50%; width:13px; height:13px; margin-top:-7px;
  border-right:2px solid var(--clay); border-bottom:2px solid var(--clay); transform:rotate(45deg); transition:transform .3s var(--ease); }
.faq details[open] summary::after{ transform:rotate(225deg); }
.faq p{ color:var(--ink-soft); padding-bottom:1.4rem; max-width:66ch; }

/* ---------- closing CTA ---------- */
.cta{ text-align:center; position:relative; overflow:hidden; }
.cta::before{ content:""; position:absolute; inset:auto -10% -45% -10%; height:75%; z-index:-1;
  background:radial-gradient(50% 100% at 50% 100%, oklch(0.93 0.038 232 / .7), transparent 72%); }
.cta h2{ max-width:20ch; margin:0 auto 1.1rem; }
.cta p{ max-width:50ch; margin:0 auto 1.9rem; color:var(--ink-soft); font-size:1.16rem; }

/* ---------- contact ---------- */
.contact-grid{ display:grid; grid-template-columns:1.25fr .85fr; gap:clamp(2rem,4vw,4rem); align-items:start; }
@media (max-width:840px){ .contact-grid{ grid-template-columns:1fr; } }
.contact-grid h2{ font-size:1.5rem; margin-bottom:1.2rem; }
.form{ display:grid; gap:1.2rem; }
.form__honey{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }
.field{ display:grid; gap:.4rem; min-width:0; }
.field label{ font-family:var(--sans); font-weight:600; font-size:.95rem; color:var(--ink); }
.field .opt{ font-weight:400; color:var(--muted); font-size:.85rem; }
.field input,.field textarea{ font-family:var(--sans); font-size:1rem; color:var(--ink); background:var(--paper);
  border:1.5px solid var(--line-2); border-radius:12px; padding:.85rem 1rem; width:100%; transition:border-color .2s, box-shadow .2s; }
.field input:focus,.field textarea:focus{ outline:none; border-color:var(--green); box-shadow:0 0 0 4px oklch(0.46 0.082 152 / .12); }
.field textarea{ min-height:8.5rem; resize:vertical; }
.field input[aria-invalid="true"],.field textarea[aria-invalid="true"]{ border-color:var(--clay-ink); }
.field input[aria-invalid="true"]:focus,.field textarea[aria-invalid="true"]:focus{ box-shadow:0 0 0 4px oklch(0.52 0.118 52 / .14); }
.field__err{ color:var(--clay-ink); font-family:var(--sans); font-weight:600; font-size:.85rem; min-height:0; }
.field__err:empty{ display:none; }
.btn[aria-busy="true"]{ cursor:progress; opacity:.85; }
.form__note{ color:var(--muted); font-size:.88rem; margin:0; }
.aside{ background:var(--oat); border:1px solid var(--line); border-radius:var(--radius-lg); padding:clamp(1.6rem,3vw,2.2rem); min-width:0; }
.aside h2{ font-size:1.3rem; margin-bottom:1.1rem; }
.aside dl{ margin:0; display:grid; gap:.9rem; }
.aside dt{ font-family:var(--sans); font-weight:700; font-size:.96rem; color:var(--ink); }
.aside dd{ margin:.1rem 0 0; color:var(--ink-soft); font-size:.96rem; }

/* ---------- footer ---------- */
.foot{ background:var(--green-deep); color:oklch(0.85 0.02 92); padding:clamp(3rem,2rem + 3vw,4.5rem) 0 2.4rem; }
.foot a{ color:oklch(0.92 0.02 92); }
.foot__top{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:2.5rem 3rem; }
.foot__promise{ font-family:var(--serif); font-weight:480; font-size:clamp(1.5rem,1.2rem + 1.4vw,2.1rem);
  color:var(--on-dark); max-width:14ch; margin:0; }
.foot__cols{ display:flex; flex-wrap:wrap; gap:2.2rem 3.2rem; }
.foot__col h4{ font-family:var(--sans); font-size:.76rem; text-transform:uppercase; letter-spacing:.08em;
  color:var(--wheat); margin:0 0 .9rem; }
.foot__col ul{ list-style:none; margin:0; padding:0; display:grid; gap:.55rem; }
.foot__col li{ color:oklch(0.8 0.02 92); font-size:.95rem; }
.foot__col a{ text-decoration:none; font-size:.95rem; }
.foot__col a:hover{ color:#fff; }
.foot__bottom{ border-top:1px solid oklch(1 0 0 / .12); margin-top:2.8rem; padding-top:1.6rem;
  display:flex; flex-wrap:wrap; gap:.6rem 1.6rem; justify-content:space-between;
  color:oklch(0.72 0.02 92); font-size:.86rem; align-items:center; }
.foot__bottom a{ color:oklch(0.84 0.02 92); }
.foot--mini .foot__bottom{ border-top:none; margin-top:0; padding-top:0; }
.foot--mini .foot__links{ display:flex; flex-wrap:wrap; gap:.6rem 1.4rem; align-items:center; }
.foot--mini .foot__links span{ font-family:var(--serif); font-weight:500; color:var(--on-dark); }
.foot--mini .foot__links a{ color:oklch(0.84 0.02 92); text-decoration:none; font-size:.92rem; }
.foot--mini .foot__links a:hover{ color:#fff; }

/* ==========================================================================
   PROSE — reusable long-form layer for article bodies
   Self-contained, scoped to .prose. Uses only existing tokens + fonts; adds
   no new colours. Designed to enhance bare flow elements (p, h2/h3, ul/ol,
   a, details, blockquote, code) while yielding to the homepage component
   classes (.section, .feats, .steps, .faq, .cta, .section__head, .lead) so a
   page that already uses those is never double-styled.
   Body text uses --ink-soft (8.7:1 on --bg) — comfortably AAA, well past 4.5:1.
   ========================================================================== */
.prose{
  --prose-measure: 68ch;
  max-width:var(--prose-measure);
  margin-inline:auto;
  color:var(--ink-soft);
  font-size:clamp(1.04rem,1.0rem + .22vw,1.18rem);
  line-height:1.7;
  text-wrap:pretty;
}

/* PASS-THROUGH MODE: when a page already lays its long-form content out in the
   homepage section system (full-bleed .section bands with their own .wrap),
   .prose must not box it to a 68ch column. Detect that and become a neutral
   container; the section components keep their crafted layout untouched while
   still getting prose's accent links / marker colours on bare elements. */
.prose:has(> .section){
  max-width:none; margin-inline:0;
  font-size:inherit; line-height:inherit;
}

/* flow rhythm: only direct-child bare elements, so nested components are untouched */
.prose > * + *{ margin-top:1.1em; }
.prose:has(> .section) > * + *{ margin-top:0; }

/* paragraphs */
.prose p{ margin:0; color:var(--ink-soft); overflow-wrap:break-word; }

/* lead / first-paragraph treatment — applies to an explicit .lead OR the very
   first paragraph of the article when no .lead class is present */
.prose > .lead,
.prose > p:first-of-type:not(.lead){
  font-size:clamp(1.18rem,1.06rem + .6vw,1.5rem);
  line-height:1.5;
  color:var(--ink-soft);
  letter-spacing:-0.003em;
}
.prose > p:first-of-type:not(.lead){ margin-bottom:.2em; }

/* headings — display serif, generous top, tighter bottom, balanced wrap.
   :where() keeps specificity at 0 so component headings (.section__head h2,
   .faq summary, etc.) always win. */
.prose :where(h2,h3,h4){
  font-family:var(--serif); font-weight:480; color:var(--ink);
  letter-spacing:-0.014em; text-wrap:balance; font-optical-sizing:auto;
}
.prose :where(h2){
  font-size:clamp(1.7rem,1.3rem + 1.7vw,2.5rem);
  line-height:1.1; margin:2.2em 0 .55em;
}
.prose :where(h3){
  font-size:clamp(1.22rem,1.06rem + .7vw,1.5rem);
  line-height:1.18; margin:1.9em 0 .5em;
}
.prose :where(h4){
  font-size:clamp(1.08rem,1.0rem + .35vw,1.22rem);
  line-height:1.25; margin:1.6em 0 .45em;
}
/* let the first heading hug the lead instead of pushing a huge gap */
.prose > :where(h2,h3):first-child{ margin-top:0; }

/* lists — proper indent, accent markers, comfortable item spacing.
   Guarded so component lists (.feats, .steps, .foot, .nav, .aside dl) never inherit. */
.prose :where(ul,ol):not([class]){
  margin:1.1em 0; padding-left:1.5em;
}
.prose :where(ul,ol):not([class]) li{ margin:.5em 0; padding-left:.25em; }
.prose :where(ul,ol):not([class]) li::marker{ color:var(--clay); }
.prose :where(ul):not([class]){ list-style:disc; }
.prose :where(ol):not([class]){ list-style:decimal; }
.prose :where(ul,ol):not([class]) :where(ul,ol){ margin:.4em 0; }
.prose li > strong:first-child{ color:var(--ink); }

/* links — visible accent + underline with breathing offset; accessible (9.2:1).
   Skip anything that's a button/brand/component link. */
.prose a:not(.btn):not(.brand):not(.textlink){
  color:var(--green-ink);
  text-decoration:underline;
  text-decoration-color:oklch(0.66 0.118 58 / .5);
  text-decoration-thickness:1.5px;
  text-underline-offset:.18em;
  transition:text-decoration-color .25s var(--ease), color .25s var(--ease);
}
.prose a:not(.btn):not(.brand):not(.textlink):hover{
  text-decoration-color:var(--clay);
  color:var(--green-deep);
}

/* emphasis */
.prose strong{ color:var(--ink); font-weight:700; }
.prose em{ font-style:italic; }

/* FAQ <details>/<summary> — rounded, hairline token border, pointer, open state.
   Scoped to bare details so the existing .faq component keeps its own styling. */
.prose details:not([class]){
  border:1px solid var(--line-2);
  border-radius:var(--radius-sm);
  background:var(--paper);
  padding:0 clamp(1.1rem,2.5vw,1.5rem);
  margin-top:.75rem;
  box-shadow:var(--shadow-sm);
  transition:border-color .25s var(--ease);
}
.prose details:not([class]) + details:not([class]){ margin-top:.75rem; }
.prose details:not([class])[open]{ border-color:var(--green); }
.prose details:not([class]) summary{
  list-style:none; cursor:pointer; position:relative;
  font-family:var(--serif); font-weight:500;
  font-size:clamp(1.08rem,1.0rem + .35vw,1.22rem);
  color:var(--ink); line-height:1.3;
  padding:1.15rem 2.5rem 1.15rem 0;
}
.prose details:not([class]) summary::-webkit-details-marker{ display:none; }
.prose details:not([class]) summary::after{
  content:""; position:absolute; right:.35rem; top:50%;
  width:12px; height:12px; margin-top:-8px;
  border-right:2px solid var(--clay); border-bottom:2px solid var(--clay);
  transform:rotate(45deg); transition:transform .3s var(--ease);
}
.prose details:not([class])[open] summary::after{ transform:rotate(225deg); }
.prose details:not([class]) > :not(summary){ margin:0 0 1.15rem; color:var(--ink-soft); }
.prose details:not([class]) > summary + *{ margin-top:.2rem; }

/* blockquote */
.prose blockquote{
  margin:1.6em 0; padding:.4em 0 .4em 1.25rem;
  border-left:3px solid var(--clay);
  color:var(--ink-soft); font-style:italic;
}
.prose blockquote p{ color:var(--ink-soft); }
.prose blockquote :where(p) + :where(p){ margin-top:.7em; }

/* code */
.prose :where(code,kbd,samp){
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.9em; background:var(--oat); color:var(--ink);
  padding:.12em .4em; border-radius:6px; border:1px solid var(--line);
}
.prose pre{
  margin:1.4em 0; padding:1.1rem 1.25rem; overflow-x:auto;
  background:var(--oat); border:1px solid var(--line);
  border-radius:var(--radius-sm); line-height:1.5;
}
.prose pre code{ background:none; border:0; padding:0; font-size:.9em; }

/* hairlines & generous section spacing within a long article */
.prose hr{
  border:0; height:1px; background:var(--line-2);
  margin:2.6em auto; max-width:8rem;
}

/* a trailing call-to-action paragraph inside a bare prose article reads as a
   quiet closing note, not a homepage .cta band */
.prose > p.cta{
  text-align:left; max-width:none;
  margin-top:2.4em; padding:clamp(1.4rem,3vw,1.9rem);
  background:var(--oat); border:1px solid var(--line);
  border-radius:var(--radius); color:var(--ink-soft);
  font-size:clamp(1.02rem,.98rem + .18vw,1.12rem);
}
.prose > p.cta::before{ content:none; }

.prose img{ border-radius:var(--radius); margin:1.6em 0; }

@media (prefers-reduced-motion: reduce){
  .prose a:not(.btn):not(.brand):not(.textlink),
  .prose details:not([class]),
  .prose details:not([class]) summary::after{ transition:none; }
}