/* ==========================================================================
   Tank Monitoring | bespoke identity (tankmonitoring.com.au)
   "Know your water, from anywhere." Calm, trustworthy, rural-water register.
   Palette: deep water-blue + dry-paddock warm ochre + ink. OKLCH.
   Type on a contrast axis: Spectral (humanist serif display) + Hanken Grotesk.
   Centrepiece: a scroll-driven dry-season water story (a tank cross-section
   whose level drops month by month, ending on a refill alert).
   Distinct from the shared niche framework and from the fall-monitoring page.
   ========================================================================== */
:root{
  --bg:        oklch(0.984 0.008 230);
  --bg-2:      oklch(0.962 0.014 228);
  --paper:     oklch(1 0 0);
  --ink:       oklch(0.26 0.035 245);
  --ink-soft:  oklch(0.40 0.030 245);
  --muted:     oklch(0.52 0.026 245);
  --brand:     oklch(0.45 0.095 240);      /* deep water blue */
  --brand-ink: oklch(0.38 0.092 242);
  --brand-deep:oklch(0.28 0.066 244);
  --night:     oklch(0.255 0.052 246);     /* deep-water night */
  --accent:    oklch(0.66 0.115 72);       /* dry-paddock ochre */
  --accent-ink:oklch(0.52 0.115 66);
  --sky:       oklch(0.90 0.045 230);
  --paddock:   oklch(0.93 0.040 92);       /* warm dry-grass tint */
  --water:     oklch(0.62 0.105 232);      /* mid water */
  --water-lo:  oklch(0.70 0.118 236);
  --sand:      oklch(0.955 0.022 88);
  --line:      oklch(0.88 0.014 232);
  --on-dark:   oklch(0.97 0.012 230);
  --danger:    oklch(0.60 0.155 35);
  --danger-ink:oklch(0.50 0.150 33);

  --serif: "Onest", system-ui, sans-serif;
  --sans: "Epilogue", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --maxw: 1180px;
  --gutter: clamp(1.25rem, 5vw, 5rem);
  --radius: 16px; --radius-lg: 26px; --radius-sm: 11px;
  --shadow: 0 2px 6px oklch(0.28 0.05 245 / .06), 0 24px 60px -26px oklch(0.28 0.06 245 / .30);
  --shadow-sm: 0 1px 3px oklch(0.28 0.05 245 / .07), 0 10px 24px -16px oklch(0.28 0.06 245 / .24);

  --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.13rem); line-height:1.65;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg{ max-width:100%; display:block; }
a{ color:var(--brand-ink); }
::selection{ background:oklch(0.90 0.045 230 / .85); }

h1,h2,h3{ font-family:var(--serif); font-weight:520; line-height:1.06;
  letter-spacing:-0.012em; text-wrap:balance; margin:0; color:var(--ink);
  font-optical-sizing:auto; overflow-wrap:break-word; }
h1{ font-size:clamp(2.5rem,1.7rem + 3.8vw,4.6rem); }
h2{ font-size:clamp(1.95rem,1.4rem + 2.4vw,3.2rem); }
h3{ font-size:clamp(1.25rem,1.08rem + .8vw,1.6rem); }
p{ margin:0; text-wrap:pretty; }
.lead{ font-size:clamp(1.15rem,1.04rem + .55vw,1.45rem); 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):focus-visible{ outline:3px solid var(--accent); outline-offset:3px; border-radius:6px; }

/* ---------- 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:.92rem 1.5rem; border-radius:999px; border:1.5px 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(--brand); color:var(--on-dark); box-shadow:0 8px 24px -10px oklch(0.45 0.095 240 / .7); }
.btn--primary:hover{ background:var(--brand-ink); transform:translateY(-2px); box-shadow:0 14px 34px -10px oklch(0.45 0.095 240 / .8); }
.btn--ghost{ background:transparent; color:var(--brand-ink); border-color:var(--line); }
.btn--ghost:hover{ border-color:var(--brand); transform:translateY(-2px); }
.btn--lg{ padding:1.08rem 1.9rem; font-size:1.06rem; }
.btn--on-dark{ background:var(--on-dark); color:var(--brand-deep); }
.btn--on-dark:hover{ background:#fff; }
.textlink{ color:var(--brand-ink); font-weight:600; text-decoration:none; border-bottom:2px solid oklch(0.66 0.115 72 / .45); padding-bottom:1px; transition:border-color .25s; }
.textlink:hover{ border-color:var(--accent); }
@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.008 230 / .82); backdrop-filter:blur(12px) saturate(1.3);
  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:72px; gap:1rem; }
.brand{ display:inline-flex; align-items:center; gap:.6rem; text-decoration:none; color:var(--ink); font-family:var(--serif); font-weight:560; font-size:1.3rem; letter-spacing:-0.015em; }
.brand__mark{ width:30px; height:30px; flex:none; }
.nav{ display:flex; align-items:center; gap:1.4rem; }
.nav a:not(.btn){ color:var(--ink-soft); text-decoration:none; font-weight:500; font-size:.97rem; }
.nav a:not(.btn):hover,.nav a[aria-current="page"]{ color:var(--brand-ink); }
.nav__toggle{ display:none; }
@media (max-width:720px){
  .nav__toggle{ display:inline-flex; align-items:center; gap:.4rem; font-family:var(--sans); font-weight:600; font-size:.95rem;
    background:var(--paper); color:var(--brand-ink); border:1.5px solid var(--line); border-radius:999px; padding:.5rem 1rem; cursor:pointer; }
  .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;
    max-height:0; overflow:hidden; opacity:0; pointer-events:none; transition:max-height .3s var(--ease), opacity .25s; }
  .nav[data-open="true"]{ max-height:340px; opacity:1; pointer-events:auto; padding:.7rem; }
  .nav a:not(.btn){ padding:.6rem .7rem; border-radius:10px; }
  .nav a:not(.btn):hover{ background:var(--bg-2); }
  .nav .btn{ justify-content:center; }
}

/* ---------- hero ---------- */
.hero{ position:relative; padding:clamp(3rem,2.4rem + 5vw,7rem) 0 clamp(2.6rem,2rem + 4vw,5rem); overflow:hidden; }
.hero::before{ content:""; position:absolute; inset:-30% -10% auto -10%; height:95%; z-index:-1;
  background:radial-gradient(58% 70% at 76% 16%, oklch(0.90 0.045 230 / .85), transparent 70%),
             radial-gradient(50% 60% at 8% 4%, oklch(0.93 0.040 92 / .75), transparent 66%);
  filter:blur(6px); }
.hero__grid{ display:grid; grid-template-columns:1.08fr .92fr; gap:clamp(2rem,4vw,5rem); align-items:center; }
@media (max-width:920px){ .hero__grid{ grid-template-columns:1fr; } }
.kicker{ font-family:var(--sans); font-weight:700; letter-spacing:.04em; text-transform:uppercase; font-size:.82rem;
  color:var(--brand); margin-bottom:1rem; display:inline-flex; align-items:center; gap:.5rem; }
.kicker::before{ content:""; width:22px; height:2px; background:var(--accent); border-radius:2px; }
.hero h1{ margin-bottom:1.2rem; }
.hero h1 em{ font-style:italic; color:var(--brand-ink); font-weight:520; }
.hero .lead{ max-width:42ch; margin-bottom:1.9rem; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:1rem; align-items:center; }
.hero__note{ margin-top:1.8rem; color:var(--muted); font-size:.96rem; max-width:46ch; display:flex; gap:.55rem; align-items:flex-start; }
.hero__note::before{ content:""; flex:none; margin-top:.45rem; width:8px; height:8px; border-radius:50%; background:var(--accent); }

/* ---------- hero dashboard figure ---------- */
.hero__fig{ position:relative; justify-self:center; width:min(100%,460px); }
.dash{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--shadow); padding:clamp(1.1rem,2.5vw,1.5rem); }
.dash__bar{ display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; font-family:var(--sans); font-weight:600; font-size:.8rem; letter-spacing:.02em;
  color:var(--brand-ink); text-transform:uppercase; }
.dash__dot{ width:9px; height:9px; flex:none; border-radius:50%; background:oklch(0.62 0.13 150); box-shadow:0 0 0 0 oklch(0.62 0.13 150 / .5); animation:pulse 2.4s var(--ease) infinite; }
@keyframes pulse{ 0%{ box-shadow:0 0 0 0 oklch(0.62 0.13 150 / .5); } 70%{ box-shadow:0 0 0 8px oklch(0.62 0.13 150 / 0); } 100%{ box-shadow:0 0 0 0 oklch(0.62 0.13 150 / 0); } }
.dash__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:.7rem; margin:1.1rem 0; }
@media (max-width:420px){ .dash__grid{ grid-template-columns:1fr 1fr; } }
.tankcard{ background:var(--bg-2); border:1px solid var(--line); border-radius:var(--radius-sm); padding:.7rem .75rem; min-width:0; }
.tankcard .lvl{ font-family:var(--serif); font-weight:600; font-size:1.5rem; line-height:1; color:var(--brand); }
.tankcard .nm{ font-size:.74rem; color:var(--muted); margin:.3rem 0 .5rem; font-weight:500; overflow-wrap:break-word; }
.tankcard .meter{ height:7px; border-radius:99px; background:oklch(0.88 0.02 232); overflow:hidden; }
.tankcard .meter i{ display:block; height:100%; border-radius:99px; background:var(--water); }
.tankcard.low .lvl{ color:var(--accent-ink); }
.tankcard.low .meter i{ background:var(--accent); }
.dash__chart{ background:var(--bg-2); border:1px solid var(--line); border-radius:var(--radius-sm); padding:.7rem .8rem .5rem; }
.dash__chart .cap{ display:flex; justify-content:space-between; gap:.5rem; font-size:.76rem; font-weight:600; color:var(--muted); margin-bottom:.35rem; }
.dash__chart .cap span:last-child{ color:var(--accent-ink); }
.dash__alert{ margin-top:.9rem; display:flex; gap:.5rem; align-items:center; background:oklch(0.66 0.115 72 / .14); border:1px solid oklch(0.66 0.115 72 / .35);
  color:var(--accent-ink); border-radius:var(--radius-sm); padding:.65rem .8rem; font-size:.86rem; font-weight:600; overflow-wrap:break-word; }
.dash__alert svg{ flex:none; }

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

/* ---------- pains ---------- */
.pains{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(1.1rem,2.5vw,1.8rem); }
@media (max-width:680px){ .pains{ grid-template-columns:1fr; } }
.pain{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:1.5rem 1.6rem; box-shadow:var(--shadow-sm); }
.pain h3{ font-size:1.22rem; margin-bottom:.5rem; display:flex; align-items:flex-start; gap:.6rem; }
.pain p{ color:var(--ink-soft); }
.pain .x{ flex:none; width:26px; height:26px; border-radius:8px; background:oklch(0.66 0.115 72 / .18); color:var(--accent-ink);
  display:grid; place-items:center; font-family:var(--sans); font-weight:800; font-size:1rem; margin-top:.1rem; }

/* ---------- feats ---------- */
.feats{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.4rem,3vw,2.4rem); }
@media (max-width:860px){ .feats{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .feats{ grid-template-columns:1fr; } }
.feat{ display:flex; gap:1rem; align-items:flex-start; }
.feat > div{ min-width:0; }
.feat__ic{ flex:none; width:46px; height:46px; border-radius:13px; padding:11px; background:var(--sky); color:var(--brand);
  box-shadow:var(--shadow-sm); }
.feat h3{ font-size:1.2rem; margin-bottom:.4rem; }
.feat p{ color:var(--ink-soft); font-size:1rem; }

/* ---------- compare / year-on-year ---------- */
.compare{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4.5rem); align-items:center; }
@media (max-width:820px){ .compare{ grid-template-columns:1fr; } }
.compare h2{ margin-bottom:1rem; }
.compare > div:first-child p + p{ margin-top:1rem; }
.yoy{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--shadow); padding:clamp(1.4rem,3vw,2rem); }
.yoy__row{ display:flex; align-items:center; gap:1rem; margin-bottom:1rem; }
.yoy__yr{ font-family:var(--sans); font-weight:700; font-size:.9rem; color:var(--muted); flex:none; width:3ch; }
.yoy__track{ flex:1; min-width:0; height:18px; border-radius:99px; background:oklch(0.90 0.02 232); overflow:hidden; }
.yoy__track i{ display:block; height:100%; border-radius:99px; background:var(--water); }
.yoy__track.now i{ background:var(--accent); }

/* ---------- 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.6rem; border-top:2px solid var(--line); }
@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-weight:600; font-size:1.5rem; color:var(--accent-ink); position:absolute; top:1.3rem; right:0; }
.step h3{ font-size:1.25rem; margin:.2rem 0 .5rem; padding-right:1.5rem; }
.step p{ color:var(--ink-soft); }

/* ---------- proof ---------- */
.proof{ max-width:64ch; }
.proof h2{ margin-bottom:1rem; }
.proof p{ color:var(--ink-soft); font-size:1.12rem; }
.proof a{ color:var(--brand-ink); font-weight:600; }
.stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.2rem,3vw,2rem); margin-top:2.2rem; }
@media (max-width:680px){ .stats{ grid-template-columns:1fr; gap:1.2rem; } }
.stat{ border-left:3px solid var(--accent); padding-left:1rem; border-radius:0; }
.stat b{ font-family:var(--serif); font-weight:600; font-size:1.6rem; color:var(--brand); display:block; line-height:1.1; }
.stat span{ color:var(--muted); font-size:.95rem; }

/* ==========================================================================
   CENTREPIECE: scroll-driven dry-season water story
   Sticky tank cross-section, level drops as month beats scroll past.
   ========================================================================== */
.season{ background:var(--night); color:var(--on-dark); position:relative; overflow:hidden; }
.season::before{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(42% 32% at 84% 6%, oklch(0.66 0.115 72 / .26), transparent 70%),
             radial-gradient(46% 38% at 8% 96%, oklch(0.45 0.095 240 / .45), transparent 70%); }
.season .wrap{ position:relative; z-index:1; }
.season__intro{ max-width:44ch; padding-bottom:clamp(1rem,2vw,2.5rem); }
.season__intro h2{ color:var(--on-dark); margin-bottom:.9rem; }
.season__intro p{ color:oklch(0.86 0.02 230); font-size:1.16rem; }
.season__intro .tag{ font-family:var(--sans); font-weight:700; letter-spacing:.03em; color:var(--accent); font-size:.86rem; margin-bottom:1rem;
  display:inline-flex; gap:.5rem; align-items:center; text-transform:uppercase; }
.season__intro .tag svg{ width:16px; height:16px; }

.season__cols{ display:grid; grid-template-columns:0.92fr 1.08fr; gap:clamp(2rem,5vw,6rem); align-items:start; }
@media (max-width:880px){ .season__cols{ grid-template-columns:1fr; } }
.season__stage{ position:sticky; top:0; height:100vh; display:flex; align-items:center; justify-content:center; }
@media (max-width:880px){ .season__stage{ height:auto; position:sticky; top:60px; padding:1rem 0 1.4rem; } }

/* the tank cross-section */
.tankviz{ width:min(330px,80vw); }
.tankviz__panel{ background:oklch(1 0 0 / .06); border:1px solid oklch(1 0 0 / .14); border-radius:22px; padding:1.1rem 1.2rem 1.2rem; backdrop-filter:blur(4px); }
.tankviz__hd{ display:flex; justify-content:space-between; align-items:baseline; gap:.6rem; margin-bottom:.9rem; }
.tankviz__hd b{ font-family:var(--sans); font-weight:600; font-size:.92rem; color:var(--on-dark); }
.tankviz__hd small{ font-size:.78rem; color:oklch(0.78 0.02 230); }
.tankwrap{ position:relative; width:100%; }
.tankwrap svg{ width:100%; height:auto; display:block; }
.tank-fill{ transition:height .9s var(--ease), y .9s var(--ease), fill .9s var(--ease); }
@media (prefers-reduced-motion: reduce){ .tank-fill{ transition:none; } }
.tankviz__read{ display:flex; align-items:baseline; justify-content:space-between; gap:.6rem; margin-top:.9rem; }
.tankviz__read .pc{ font-family:var(--serif); font-weight:600; font-size:2.4rem; line-height:1; color:var(--on-dark); transition:color .6s; }
.tankviz__read .pc.is-low{ color:var(--accent); }
.tankviz__read .days{ text-align:right; font-size:.82rem; color:oklch(0.8 0.02 230); }
.tankviz__read .days b{ display:block; font-family:var(--sans); font-weight:700; font-size:1.05rem; color:var(--on-dark); }
.tankviz__alert{ margin-top:.9rem; display:flex; gap:.5rem; align-items:center; background:oklch(0.60 0.155 35 / .92);
  border-radius:12px; padding:.6rem .75rem; font-size:.84rem; font-weight:600; color:#fff; opacity:0; transform:translateY(6px);
  transition:opacity .5s var(--ease), transform .5s var(--ease); }
.tankviz__alert svg{ flex:none; }
.tankviz.is-alert .tankviz__alert{ opacity:1; transform:none; }

.beats{ padding:6vh 0 10vh; }
@media (max-width:880px){ .beats{ padding:2vh 0 0; } }
.beat{ min-height:62vh; display:flex; flex-direction:column; justify-content:center; max-width:32ch; }
@media (max-width:880px){ .beat{ min-height:54vh; } }
.beat__mon{ font-family:var(--sans); font-weight:700; font-size:.9rem; letter-spacing:.04em; color:var(--accent); margin-bottom:.7rem; text-transform:uppercase; }
.beat h3{ color:var(--on-dark); font-size:clamp(1.55rem,1.2rem + 1.7vw,2.4rem); margin-bottom:.8rem; }
.beat p{ color:oklch(0.85 0.02 230); font-size:1.08rem; }
.beat.is-alert .beat__mon{ color:oklch(0.74 0.15 38); }

/* ---------- faq ---------- */
.faq{ max-width:760px; }
.faq details{ border-bottom:1px solid var(--line); }
.faq summary{ list-style:none; cursor:pointer; padding:1.35rem 2.5rem 1.35rem 0; position:relative; font-family:var(--serif); font-weight:560; 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:12px; height:12px; margin-top:-7px;
  border-right:2px solid var(--accent); border-bottom:2px solid var(--accent); 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.35rem; max-width:64ch; }

/* ---------- cta band ---------- */
.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.90 0.045 230 / .7), transparent 72%); }
.cta h2{ max-width:20ch; margin:0 auto 1.1rem; }
.cta p{ max-width:48ch; margin:0 auto 1.9rem; color:var(--ink-soft); font-size:1.16rem; }

/* ---------- contact ---------- */
.contact-grid{ display:grid; grid-template-columns:1.2fr .8fr; gap:clamp(2rem,5vw,4rem); align-items:start; }
@media (max-width:820px){ .contact-grid{ grid-template-columns:1fr; } }
.form{ display:grid; gap:1.1rem; margin-top:1.2rem; }
.form__honey{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }
.field{ display:grid; gap:.4rem; }
.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:inherit; color:var(--ink); background:var(--paper); border:1.5px solid var(--line); border-radius:12px; padding:.8rem .9rem; width:100%; transition:border-color .2s, box-shadow .2s; }
.field input:focus,.field textarea:focus{ outline:none; border-color:var(--brand); box-shadow:0 0 0 3px oklch(0.45 0.095 240 / .14); }
.field textarea{ min-height:140px; resize:vertical; }
.field input[aria-invalid="true"],.field textarea[aria-invalid="true"]{ border-color:var(--danger); }
.field input[aria-invalid="true"]:focus,.field textarea[aria-invalid="true"]:focus{ box-shadow:0 0 0 3px oklch(0.60 0.155 35 / .16); }
.field__err{ color:var(--danger-ink); font-family:var(--sans); font-weight:600; font-size:.85rem; min-height:0; }
.field__err:empty{ display:none; }
.btn[aria-busy="true"]{ opacity:.8; cursor:progress; }
.form__note{ color:var(--muted); font-size:.88rem; }
.aside{ background:var(--bg-2); border:1px solid var(--line); border-radius:var(--radius-lg); padding:clamp(1.5rem,3vw,2rem); }
.aside h2{ font-size:1.4rem; margin-bottom:1rem; }
.aside dl{ margin:0; display:grid; gap:.2rem; }
.aside dt{ font-family:var(--sans); font-weight:700; color:var(--ink); margin-top:.9rem; }
.aside dt:first-child{ margin-top:0; }
.aside dd{ margin:0; color:var(--ink-soft); }

/* ---------- footer ---------- */
.foot{ background:var(--brand-deep); color:oklch(0.85 0.02 230); padding:clamp(3rem,2rem + 3vw,4.5rem) 0 2.4rem; }
.foot a{ color:oklch(0.9 0.02 230); }
.foot__top{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:2.2rem 2.6rem; }
.foot__promise{ font-family:var(--serif); font-weight:560; font-size:clamp(1.4rem,1.1rem + 1.2vw,2rem); color:var(--on-dark); max-width:14ch; line-height:1.15; }
.foot__cols{ display:flex; flex-wrap:wrap; gap:2rem 2.8rem; }
.foot__col h4{ font-family:var(--sans); font-size:.76rem; text-transform:uppercase; letter-spacing:.08em; color:var(--accent); margin:0 0 .85rem; }
.foot__col ul{ list-style:none; margin:0; padding:0; display:grid; gap:.5rem; }
.foot__col li{ font-size:.95rem; color:oklch(0.8 0.02 230); }
.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.6rem; padding-top:1.5rem; display:flex; flex-wrap:wrap; gap:.6rem 1.6rem; justify-content:space-between; color:oklch(0.72 0.02 230); font-size:.86rem; }
.foot__bottom a{ color:oklch(0.82 0.02 230); }

/* ---------- 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; } }

/* ==========================================================================
   PROSE — reusable long-form article layer
   Scoped to .prose so it never touches nav/hero/footer chrome or section
   components. Uses ONLY existing tokens/fonts — no new colours. Verified
   body contrast: --ink-soft on --bg = 8.8:1; --muted lead = 5.25:1;
   links --brand-ink = 9.5:1; markers --accent-ink = 5.4:1 (all >= 4.5:1).
   ========================================================================== */
.prose{
  --measure: 68ch;
  --flow: 1.1em;            /* paragraph rhythm */
  width:100%; max-width:var(--measure);
  margin-inline:auto; padding-inline:var(--gutter);
  padding-block:clamp(2.6rem,2rem + 4vw,5rem);
  color:var(--ink-soft);
  font-size:clamp(1.05rem,1.0rem + .22vw,1.2rem);
  line-height:1.72;
}
/* h1 keeps the global display treatment; give it breathing room + measure */
.prose > h1{ color:var(--ink); margin-bottom:.7em; max-width:20ch; }

/* vertical flow: space between consecutive blocks */
.prose > * + *{ margin-top:var(--flow); }

/* paragraphs */
.prose p{ color:var(--ink-soft); text-wrap:pretty; }
.prose p + p{ margin-top:var(--flow); }
.prose strong{ color:var(--ink); font-weight:650; }
.prose em{ font-style:italic; }

/* lead / first-paragraph treatment — slightly larger, muted, calm */
.prose > .lead,
.prose > h1 + p{
  color:var(--muted);
  font-size:clamp(1.18rem,1.06rem + .55vw,1.5rem);
  line-height:1.55; font-weight:420;
  max-width:62ch; margin-bottom:1.4em;
}

/* heading rhythm — generous top, tighter bottom; display font; balanced */
.prose h2,.prose h3{ font-family:var(--serif); color:var(--ink);
  text-wrap:balance; letter-spacing:-0.012em; }
.prose h2{ font-size:clamp(1.6rem,1.25rem + 1.3vw,2.25rem); line-height:1.12;
  margin-top:2.1em; margin-bottom:.55em; }
.prose h3{ font-size:clamp(1.22rem,1.08rem + .6vw,1.5rem); line-height:1.2;
  margin-top:1.7em; margin-bottom:.45em; }
.prose > h2:first-child,.prose > h3:first-child{ margin-top:0; }
/* a hairline lead-in under section headings for clear rhythm */
.prose h2::after{ content:""; display:block; width:46px; height:2px;
  margin-top:.55rem; background:var(--accent); border-radius:2px; }

/* links — visible, accessible, on-brand */
.prose a{ color:var(--brand-ink); font-weight:600;
  text-decoration:underline; text-decoration-thickness:1.5px;
  text-decoration-color:oklch(0.66 0.115 72 / .5); /* --accent @ 50% */
  text-underline-offset:3px; transition:text-decoration-color .25s var(--ease); }
.prose a:hover{ text-decoration-color:var(--accent-ink); }

/* lists — proper indent, accent markers, comfortable li spacing */
.prose ul,.prose ol{ margin-top:var(--flow); padding-left:1.5em; }
.prose li{ margin-top:.5em; padding-left:.25em; color:var(--ink-soft); }
.prose li::marker{ color:var(--accent-ink); font-weight:700; }
.prose ul{ list-style:disc; }
.prose ol{ list-style:decimal; }
.prose li > ul,.prose li > ol{ margin-top:.5em; }

/* blockquote */
.prose blockquote{ margin-top:var(--flow); margin-inline:0;
  padding:.2em 0 .2em 1.1rem; border-left:3px solid var(--accent);
  color:var(--ink-soft); font-style:italic; }
.prose blockquote p{ color:inherit; }
.prose blockquote cite{ display:block; margin-top:.6em; font-style:normal;
  font-weight:600; font-size:.9em; color:var(--muted); }

/* inline + block code */
.prose :not(pre) > code{ font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.9em; background:var(--bg-2); color:var(--ink);
  border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:.12em .4em; }
.prose pre{ margin-top:var(--flow); overflow:auto; background:var(--bg-2);
  border:1px solid var(--line); border-radius:var(--radius); padding:1rem 1.1rem;
  font-size:.92em; line-height:1.6; }
.prose pre code{ font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  background:none; border:0; padding:0; color:var(--ink); }

/* figures / images */
.prose figure{ margin-top:var(--flow); }
.prose img{ border-radius:var(--radius); border:1px solid var(--line); }
.prose figcaption{ margin-top:.6em; color:var(--muted); font-size:.9em;
  text-align:center; }

/* horizontal rule as a quiet section divider */
.prose hr{ border:0; height:1px; background:var(--line);
  margin-block:clamp(2rem,4vw,3rem); }

/* styled <details>/<summary> FAQ — rounded, hairline border, accessible */
.prose details{ border:1px solid var(--line); border-radius:var(--radius);
  background:var(--paper); box-shadow:var(--shadow-sm);
  padding:0 1.2rem; margin-top:.8rem;
  transition:border-color .25s var(--ease), box-shadow .25s var(--ease); }
.prose details[open]{ border-color:oklch(0.66 0.115 72 / .45); /* --accent @ 45% */ }
.prose details + details{ margin-top:.7rem; }
.prose summary{ list-style:none; cursor:pointer; position:relative;
  font-family:var(--serif); font-weight:560; font-size:clamp(1.1rem,1.02rem + .3vw,1.28rem);
  color:var(--ink); padding:1.1rem 2.4rem 1.1rem 0; }
.prose summary::-webkit-details-marker{ display:none; }
.prose summary::after{ content:""; position:absolute; right:.2rem; top:50%;
  width:11px; height:11px; margin-top:-7px;
  border-right:2px solid var(--accent-ink); border-bottom:2px solid var(--accent-ink);
  transform:rotate(45deg); transition:transform .3s var(--ease); }
.prose details[open] summary::after{ transform:rotate(225deg); }
.prose details > :not(summary){ margin-top:0; }
.prose details > *:not(summary):first-of-type{ padding-top:.2rem; }
.prose details > *:last-child{ padding-bottom:1.2rem; }
.prose details p{ color:var(--ink-soft); }

/* the closing CTA paragraph sits inside .prose flow but stays brand-consistent */
.prose > .cta{ text-align:left; margin-top:clamp(2.4rem,4vw,3.4rem);
  padding:clamp(1.4rem,3vw,2rem); background:var(--bg-2);
  border:1px solid var(--line); border-radius:var(--radius-lg);
  color:var(--ink-soft); font-size:1.05rem; }
.prose > .cta::before{ content:none; }

@media (prefers-reduced-motion: reduce){
  .prose a, .prose details, .prose summary::after{ transition:none; }
}

/* --- Emil press-feedback: pressable controls respond to press (2026-07-21) --- */
.btn,.nav__toggle{transition:transform .16s cubic-bezier(.16,1,.3,1),background-color .16s ease,border-color .16s ease,color .16s ease,box-shadow .16s ease}
.btn:active,.nav__toggle:active{transform:scale(.97)}
@media (prefers-reduced-motion:reduce){.btn,.nav__toggle{transition:background-color .16s ease,border-color .16s ease,color .16s ease}.btn:active,.nav__toggle:active{transform:none}}