/* Zero Cut Disability Society — one stylesheet, no external requests. */

:root{
  color-scheme:light;
  --paper:#ECEEF1;
  --surface:#F6F7F9;
  --surface-2:#E2E5EA;
  --hero-tint:#F1E6E8;
  --ink:#1B2130;
  --ink-soft:#3F4756;
  --ink-faint:#59616F;
  --line:#D4D8DE;
  --line-strong:#B9BFC8;
  --brand:#C8102E;
  --on-brand:#FFFFFF;
  --brand-ink:#9B0A22;
  --brand-wash:#F4E3E5;
  --cut:#4B5563;
  --ok:#1E7B3C; --ok-wash:#E4F0E8;
  --warn:#9A4310;
  --warn-wash:#F6E9DD;
  --alert:#9B0A22;
  --focus:#1D4ED8;
  --radius:14px;
  --measure:66ch;
  --shadow-sm:0 1px 2px rgba(27,33,48,.06), 0 4px 10px -6px rgba(27,33,48,.12);
  --shadow:0 1px 2px rgba(27,33,48,.05), 0 8px 24px -12px rgba(27,33,48,.18);
  --shadow-lg:0 2px 4px rgba(27,33,48,.06), 0 24px 48px -20px rgba(27,33,48,.32);
  --hi:rgba(255,255,255,.7);
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --serif:Georgia,"Iowan Old Style","Palatino Linotype",Palatino,"Times New Roman",serif;
  --leaf:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='%23C8102E' d='M50.0%200.0%20L41.9%2015.1%20C41.0%2016.7%2039.4%2016.6%2037.7%2015.6%20L31.9%2012.6%20L36.2%2035.8%20C37.1%2040.0%2034.2%2040.0%2032.7%2038.2%20L22.5%2026.7%20L20.9%2032.5%20C20.7%2033.3%2019.8%2034.1%2018.6%2033.9%20L5.6%2031.2%20L9.0%2043.5%20C9.8%2046.3%2010.3%2047.4%208.3%2048.1%20L3.7%2050.3%20L25.9%2068.4%20C26.8%2069.1%2027.3%2070.3%2027.0%2071.4%20L25.0%2077.8%20C32.7%2076.9%2039.5%2075.6%2047.2%2074.8%20C47.9%2074.7%2049.0%2075.8%2049.0%2076.6%20L48.0%20100.0%20L51.7%20100.0%20L51.1%2076.6%20C51.1%2075.9%2052.1%2074.7%2052.8%2074.8%20C60.5%2075.6%2067.3%2076.9%2075.0%2077.8%20L73.0%2071.4%20C72.7%2070.3%2073.2%2069.1%2074.1%2068.4%20L96.3%2050.3%20L91.7%2048.2%20C89.7%2047.4%2090.2%2046.3%2091.0%2043.6%20L94.4%2031.2%20L81.4%2033.9%20C80.2%2034.1%2079.3%2033.3%2079.1%2032.6%20L77.5%2026.7%20L67.3%2038.2%20C65.8%2040.0%2062.9%2040.0%2063.8%2035.8%20L68.1%2012.6%20L62.3%2015.7%20C60.6%2016.6%2059.0%2016.7%2058.1%2015.1%20Z'/%3E%3Cpath d='M50.0%2074.0%20L50.0%2010.4%20M50.0%2040.7%20L53.4%2035.8%20M50.0%2022.2%20L47.4%2018.5%20M50.0%2074.0%20L26.4%2033.3%20M37.6%2052.7%20L38.1%2046.7%20M30.8%2040.9%20L26.7%2039.0%20M50.0%2074.0%20L73.7%2033.3%20M62.4%2052.7%20L67.8%2050.2%20M69.2%2040.9%20L68.9%2036.4%20M50.0%2074.0%20L10.2%2053.6%20M29.2%2063.3%20L26.4%2058.0%20M17.6%2057.4%20L13.1%2058.0%20M50.0%2074.0%20L89.8%2053.6%20M70.8%2063.3%20L76.8%2064.2%20M82.4%2057.4%20L84.5%2053.4%20M50.0%2074.0%20L28.5%2077.3%20M38.8%2075.7%20L33.4%2073.0%20M32.5%2076.7%20L29.2%2079.8%20M50.0%2074.0%20L71.5%2077.3%20M61.2%2075.7%20L65.6%2079.9%20M67.5%2076.7%20L71.5%2074.7%20M50.0%2074.0%20L50.0%2099.0' fill='none' stroke='%23fff' stroke-opacity='.4' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  --leaf3:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 260 110'%3E%3Cpath fill='%23C8102E' d='M50.0%200.0%20L41.9%2015.1%20C41.0%2016.7%2039.4%2016.6%2037.7%2015.6%20L31.9%2012.6%20L36.2%2035.8%20C37.1%2040.0%2034.2%2040.0%2032.7%2038.2%20L22.5%2026.7%20L20.9%2032.5%20C20.7%2033.3%2019.8%2034.1%2018.6%2033.9%20L5.6%2031.2%20L9.0%2043.5%20C9.8%2046.3%2010.3%2047.4%208.3%2048.1%20L3.7%2050.3%20L25.9%2068.4%20C26.8%2069.1%2027.3%2070.3%2027.0%2071.4%20L25.0%2077.8%20C32.7%2076.9%2039.5%2075.6%2047.2%2074.8%20C47.9%2074.7%2049.0%2075.8%2049.0%2076.6%20L48.0%20100.0%20L51.7%20100.0%20L51.1%2076.6%20C51.1%2075.9%2052.1%2074.7%2052.8%2074.8%20C60.5%2075.6%2067.3%2076.9%2075.0%2077.8%20L73.0%2071.4%20C72.7%2070.3%2073.2%2069.1%2074.1%2068.4%20L96.3%2050.3%20L91.7%2048.2%20C89.7%2047.4%2090.2%2046.3%2091.0%2043.6%20L94.4%2031.2%20L81.4%2033.9%20C80.2%2034.1%2079.3%2033.3%2079.1%2032.6%20L77.5%2026.7%20L67.3%2038.2%20C65.8%2040.0%2062.9%2040.0%2063.8%2035.8%20L68.1%2012.6%20L62.3%2015.7%20C60.6%2016.6%2059.0%2016.7%2058.1%2015.1%20Z' transform='translate(80 5)'/%3E%3Cpath fill='%23C8102E' d='M50.0%200.0%20L41.9%2015.1%20C41.0%2016.7%2039.4%2016.6%2037.7%2015.6%20L31.9%2012.6%20L36.2%2035.8%20C37.1%2040.0%2034.2%2040.0%2032.7%2038.2%20L22.5%2026.7%20L20.9%2032.5%20C20.7%2033.3%2019.8%2034.1%2018.6%2033.9%20L5.6%2031.2%20L9.0%2043.5%20C9.8%2046.3%2010.3%2047.4%208.3%2048.1%20L3.7%2050.3%20L25.9%2068.4%20C26.8%2069.1%2027.3%2070.3%2027.0%2071.4%20L25.0%2077.8%20C32.7%2076.9%2039.5%2075.6%2047.2%2074.8%20C47.9%2074.7%2049.0%2075.8%2049.0%2076.6%20L48.0%20100.0%20L51.7%20100.0%20L51.1%2076.6%20C51.1%2075.9%2052.1%2074.7%2052.8%2074.8%20C60.5%2075.6%2067.3%2076.9%2075.0%2077.8%20L73.0%2071.4%20C72.7%2070.3%2073.2%2069.1%2074.1%2068.4%20L96.3%2050.3%20L91.7%2048.2%20C89.7%2047.4%2090.2%2046.3%2091.0%2043.6%20L94.4%2031.2%20L81.4%2033.9%20C80.2%2034.1%2079.3%2033.3%2079.1%2032.6%20L77.5%2026.7%20L67.3%2038.2%20C65.8%2040.0%2062.9%2040.0%2063.8%2035.8%20L68.1%2012.6%20L62.3%2015.7%20C60.6%2016.6%2059.0%2016.7%2058.1%2015.1%20Z' transform='translate(4 34) rotate(-28 50 50) scale(.66)'/%3E%3Cpath fill='%23C8102E' d='M50.0%200.0%20L41.9%2015.1%20C41.0%2016.7%2039.4%2016.6%2037.7%2015.6%20L31.9%2012.6%20L36.2%2035.8%20C37.1%2040.0%2034.2%2040.0%2032.7%2038.2%20L22.5%2026.7%20L20.9%2032.5%20C20.7%2033.3%2019.8%2034.1%2018.6%2033.9%20L5.6%2031.2%20L9.0%2043.5%20C9.8%2046.3%2010.3%2047.4%208.3%2048.1%20L3.7%2050.3%20L25.9%2068.4%20C26.8%2069.1%2027.3%2070.3%2027.0%2071.4%20L25.0%2077.8%20C32.7%2076.9%2039.5%2075.6%2047.2%2074.8%20C47.9%2074.7%2049.0%2075.8%2049.0%2076.6%20L48.0%20100.0%20L51.7%20100.0%20L51.1%2076.6%20C51.1%2075.9%2052.1%2074.7%2052.8%2074.8%20C60.5%2075.6%2067.3%2076.9%2075.0%2077.8%20L73.0%2071.4%20C72.7%2070.3%2073.2%2069.1%2074.1%2068.4%20L96.3%2050.3%20L91.7%2048.2%20C89.7%2047.4%2090.2%2046.3%2091.0%2043.6%20L94.4%2031.2%20L81.4%2033.9%20C80.2%2034.1%2079.3%2033.3%2079.1%2032.6%20L77.5%2026.7%20L67.3%2038.2%20C65.8%2040.0%2062.9%2040.0%2063.8%2035.8%20L68.1%2012.6%20L62.3%2015.7%20C60.6%2016.6%2059.0%2016.7%2058.1%2015.1%20Z' transform='translate(190 34) rotate(28 50 50) scale(.66)'/%3E%3C/svg%3E");
}

/* Dark theme: opt-in via the header toggle (stored in localStorage, never a cookie).
   Charcoal greys, not black; red stays the brand, links lighten for contrast. */
:root[data-theme="dark"]{
  color-scheme:dark;
  --paper:#1E2126; --surface:#272B31; --surface-2:#30353D;
  --hero-tint:#2A2326;
  --ink:#ECEEF2; --ink-soft:#C3C9D2; --ink-faint:#9AA3AF;
  --line:#3A3F47; --line-strong:#4B515B;
  --brand:#C8102E; --on-brand:#FFFFFF; --brand-ink:#FF8B92; --brand-wash:#3B2226;
  --cut:#6B7280;
  --ok:#4CC26B; --ok-wash:#1C2A21;
  --warn:#F2B27E; --warn-wash:#2E241A;
  --alert:#FF8B92; --focus:#8AB4FF;
  --shadow-sm:0 1px 2px rgba(0,0,0,.35), 0 4px 10px -6px rgba(0,0,0,.5);
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 28px -14px rgba(0,0,0,.7);
  --shadow-lg:0 2px 4px rgba(0,0,0,.4), 0 28px 56px -22px rgba(0,0,0,.85);
  --hi:rgba(255,255,255,.06);
}

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

html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:1.0625rem;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{font-family:var(--serif); line-height:1.15; margin:0 0 .5em; letter-spacing:-.018em; font-weight:600; text-wrap:balance}
::selection{background:var(--brand); color:#fff}
h1{font-size:clamp(2.2rem,1.35rem + 3.6vw,3.9rem); letter-spacing:-.025em}
h2{font-size:clamp(1.55rem,1.15rem + 1.7vw,2.35rem)}
/* Headings carry no top margin by default, so one landing straight after a card
   or grid — which have no bottom margin either — sits flush against it. The
   sibling selector means only headings that FOLLOW something get the space, so
   section-head, hero and footer headings are untouched. Adjacent margins
   collapse, so this does not stack on top of a paragraph's bottom margin. */
* + h2{margin-top:2.75rem}
h3{font-size:clamp(1.18rem,1.05rem + .6vw,1.45rem)}
p,ul,ol,dl,table{margin:0 0 1.15em}
p,li{max-width:var(--measure)}
strong{font-weight:650}
small{font-size:.875rem}

a{color:var(--brand-ink); text-underline-offset:3px; text-decoration-thickness:.08em}
a:hover{text-decoration-thickness:.14em}
:focus-visible{outline:3px solid var(--focus); outline-offset:3px; border-radius:4px}

.wrap{width:min(1120px,calc(100% - 2.5rem)); margin-inline:auto}
.narrow{width:min(760px,calc(100% - 2.5rem)); margin-inline:auto}

/* ---------- skip link ---------- */
.skip{position:absolute; left:-9999px; top:0; z-index:100}
.skip:focus{left:1rem; top:1rem; padding:.75rem 1.1rem; background:var(--surface); color:var(--ink); border:2px solid var(--focus); border-radius:10px; box-shadow:var(--shadow)}

/* ---------- header ---------- */
.masthead{background:var(--surface); background:color-mix(in srgb, var(--surface) 86%, transparent); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); border-top:4px solid var(--brand); border-bottom:1px solid var(--line); box-shadow:0 8px 24px -18px rgba(27,33,48,.35); position:sticky; top:0; z-index:40}
.masthead .wrap{width:min(1200px,calc(100% - 2.5rem)); display:flex; align-items:center; gap:.75rem; min-height:74px; flex-wrap:wrap}
.brand{display:inline-flex; align-items:center; gap:.65rem; font-family:var(--serif); font-weight:600; font-size:1.16rem; color:var(--ink); text-decoration:none; padding:.35rem 0}
.brand:hover{color:var(--brand-ink)}
.brand .mark{flex:0 0 auto; width:34px; height:34px}
.brand span.sub{display:block; font-family:var(--sans); font-size:.7rem; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-faint); font-weight:600}
.nav-toggle{margin-left:auto; display:none; align-items:center; gap:.5rem; min-height:44px; padding:.5rem .9rem; font:inherit; font-size:.95rem; background:var(--surface-2); color:var(--ink); border:1px solid var(--line-strong); border-radius:10px; cursor:pointer}
.nav{margin-left:auto}
.nav ul{display:flex; flex-wrap:wrap; align-items:center; gap:.15rem; list-style:none; margin:0; padding:0}
.nav a{display:inline-block; padding:.6rem .42rem; min-height:44px; line-height:1.9; font-size:.93rem; color:var(--ink-soft); text-decoration:none; border-radius:9px}
.nav a:hover{background:var(--surface-2); color:var(--ink)}
.nav a[aria-current="page"]{color:var(--brand-ink); background:var(--brand-wash); font-weight:600}
.nav .cta{background:var(--brand); color:var(--on-brand); font-weight:600; padding-inline:.9rem; margin-left:.3rem}
.nav .cta:hover{background:var(--brand-ink); color:var(--on-brand)}
.nav .cta[aria-current="page"]{background:var(--brand-ink); color:var(--on-brand); box-shadow:inset 0 0 0 2px var(--on-brand), inset 0 0 0 4px var(--brand-ink)}

.theme-toggle{display:inline-flex; align-items:center; justify-content:center; gap:.45rem; height:44px; min-width:44px; padding:0 .5rem; margin-left:.1rem; font:inherit; font-size:.9rem; font-weight:600; background:transparent; color:var(--ink-faint); border:0; border-radius:10px; cursor:pointer; flex:0 0 auto; transition:background .15s ease, color .15s ease}
.theme-toggle:hover{background:var(--surface-2); color:var(--ink)}
.theme-toggle svg{width:1.05rem; height:1.05rem; flex:0 0 auto}
@media (min-width:1220px){ .theme-toggle .lbl-dark,.theme-toggle .lbl-light{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap} }
.theme-toggle .ico-moon, .theme-toggle .lbl-dark{display:inline}
.theme-toggle .ico-sun, .theme-toggle .lbl-light{display:none}
:root[data-theme="dark"] .theme-toggle .ico-moon, :root[data-theme="dark"] .theme-toggle .lbl-dark{display:none}
:root[data-theme="dark"] .theme-toggle .ico-sun, :root[data-theme="dark"] .theme-toggle .lbl-light{display:inline}

@media (max-width:1219px){
  .nav-toggle{display:inline-flex}
  .theme-toggle{margin-left:0}
  .nav{order:2}
  .nav{display:none; margin-left:0; width:100%; padding-bottom:.85rem}
  .nav.open{display:block}
  .nav ul{flex-direction:column; align-items:stretch; gap:.2rem}
  .nav a{padding:.8rem .85rem; line-height:1.4}
  .nav .cta{margin-left:0; text-align:center}
}

/* ---------- buttons ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.55rem; min-height:50px; padding:.8rem 1.4rem; border-radius:11px; font:inherit; font-weight:600; font-size:1rem; text-decoration:none; cursor:pointer; border:1.5px solid transparent; transition:background .15s ease, border-color .15s ease}
.btn{transition:background .15s ease, border-color .15s ease, transform .15s ease, box-shadow .15s ease}
.btn-primary{background:var(--brand); color:var(--on-brand); box-shadow:0 8px 18px -10px rgba(200,16,46,.7)}
.btn-primary::after{content:"\2192"; font-weight:400; transition:transform .15s ease}
.btn-primary:hover{background:var(--brand-ink); color:var(--on-brand); transform:translateY(-1px); box-shadow:0 12px 22px -10px rgba(200,16,46,.8)}
.btn-primary:hover::after{transform:translateX(3px)}
.btn:active{transform:translateY(0)}
.btn-ghost{background:var(--surface); color:var(--ink); border-color:var(--line-strong); box-shadow:var(--shadow-sm)}
.btn-ghost:hover{border-color:var(--ink-soft); background:var(--surface-2)}
.btn-row{display:flex; flex-wrap:wrap; gap:.85rem; margin:1.6rem 0 0}

/* ---------- hero ---------- */
.hero{position:relative; overflow:hidden; padding:clamp(3rem,2rem + 5vw,5.5rem) 0 clamp(2.5rem,2rem + 3vw,4rem); background:linear-gradient(180deg,var(--surface) 0%, var(--hero-tint) 100%); border-bottom:4px solid var(--brand)}
.hero .wrap{position:relative; z-index:1}
.leaves{position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0; perspective:520px; perspective-origin:50% 40%}
.leaves i{position:absolute; top:-14%; left:var(--x,50%); width:var(--s,34px); height:var(--s,34px); animation:leaf-fall var(--d,14s) linear var(--delay,0s) 1 forwards; will-change:top; transform-style:preserve-3d; translate:0 0; rotate:0deg; transition:translate var(--wt,2.4s) cubic-bezier(.25,.7,.3,1) var(--wd,0s), rotate var(--wt,2.4s) ease var(--wd,0s)}
.leaves i::before{content:""; position:absolute; inset:0; background:var(--leaf) center/contain no-repeat; opacity:var(--o,.5); backface-visibility:visible; animation:var(--kf,leaf-tumble) var(--t,3.4s) var(--ease,ease-in-out) var(--tp,0s) infinite var(--dir,normal); will-change:transform}
.leaves.windy i{translate:calc(var(--gust,0px) * var(--wk,1)) 0; rotate:calc(var(--gust-rot,0deg) * var(--wk,1))}
@keyframes leaf-fall{
  0%{top:-14%; opacity:0}
  7%{opacity:1}
  70%{opacity:1}
  88%{opacity:0}
  100%{top:106%; opacity:0}
}
/* four flutter styles: rocking seesaw, lazy spiral, quick flip-flop, gentle glide */
@keyframes leaf-tumble{
  0%{transform:translateX(0) rotateX(-58deg) rotateY(-10deg) rotateZ(-18deg); filter:brightness(1)}
  22%{transform:translateX(calc(var(--sway,1) * 44px)) rotateX(55deg) rotateY(16deg) rotateZ(10deg); filter:brightness(.82)}
  45%{transform:translateX(calc(var(--sway,1) * -12px)) rotateX(-48deg) rotateY(-22deg) rotateZ(-6deg); filter:brightness(1.04)}
  62%{transform:translateX(calc(var(--sway,1) * -52px)) rotateX(60deg) rotateY(165deg) rotateZ(14deg); filter:brightness(.72)}
  82%{transform:translateX(calc(var(--sway,1) * -10px)) rotateX(-50deg) rotateY(195deg) rotateZ(-12deg); filter:brightness(.86)}
  100%{transform:translateX(0) rotateX(-58deg) rotateY(350deg) rotateZ(-18deg); filter:brightness(1)}
}
@keyframes leaf-spiral{
  0%{transform:translateX(0) rotateX(20deg) rotateY(0deg) rotateZ(0deg); filter:brightness(1)}
  30%{transform:translateX(calc(var(--sway,1) * 60px)) rotateX(40deg) rotateY(110deg) rotateZ(40deg); filter:brightness(.8)}
  55%{transform:translateX(calc(var(--sway,1) * 20px)) rotateX(-25deg) rotateY(200deg) rotateZ(150deg); filter:brightness(.9)}
  80%{transform:translateX(calc(var(--sway,1) * -55px)) rotateX(35deg) rotateY(290deg) rotateZ(260deg); filter:brightness(.78)}
  100%{transform:translateX(0) rotateX(20deg) rotateY(360deg) rotateZ(360deg); filter:brightness(1)}
}
@keyframes leaf-flip{
  0%{transform:translateX(0) rotateX(-70deg) rotateZ(-30deg); filter:brightness(1)}
  15%{transform:translateX(calc(var(--sway,1) * 18px)) rotateX(-60deg) rotateZ(-22deg); filter:brightness(1)}
  35%{transform:translateX(calc(var(--sway,1) * 70px)) rotateX(75deg) rotateZ(25deg); filter:brightness(.75)}
  50%{transform:translateX(calc(var(--sway,1) * 62px)) rotateX(65deg) rotateZ(30deg); filter:brightness(.78)}
  70%{transform:translateX(calc(var(--sway,1) * -30px)) rotateX(-72deg) rotateY(180deg) rotateZ(-26deg); filter:brightness(.88)}
  100%{transform:translateX(0) rotateX(-70deg) rotateY(360deg) rotateZ(-30deg); filter:brightness(1)}
}
@keyframes leaf-glide{
  0%{transform:translateX(0) rotateX(35deg) rotateY(-8deg) rotateZ(-40deg); filter:brightness(1)}
  40%{transform:translateX(calc(var(--sway,1) * 90px)) rotateX(48deg) rotateY(10deg) rotateZ(-20deg); filter:brightness(.92)}
  60%{transform:translateX(calc(var(--sway,1) * 70px)) rotateX(-30deg) rotateY(-6deg) rotateZ(-55deg); filter:brightness(1.02)}
  100%{transform:translateX(0) rotateX(35deg) rotateY(-8deg) rotateZ(-40deg); filter:brightness(1)}
}
@media (max-width:899px){ .leaves{display:none} }
@media (prefers-reduced-motion:reduce){ .leaves{display:none} }
.hero .eyebrow{display:inline-block; font-size:.8rem; letter-spacing:.14em; text-transform:uppercase; font-weight:700; color:var(--brand-ink); background:var(--brand-wash); padding:.4rem .8rem; border-radius:999px; margin-bottom:1.25rem}
.hero h1{max-width:18ch}
.hero-grid .hero-copy h1{max-width:none}
.hero .lede{font-size:clamp(1.1rem,1.02rem + .45vw,1.32rem); color:var(--ink-soft); max-width:56ch; margin-bottom:0}
@keyframes rise{from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none}}
.hero .wrap > *{animation:rise .6s cubic-bezier(.2,.7,.2,1) both}
.hero .wrap > :nth-child(2){animation-delay:.08s} .hero .wrap > :nth-child(3){animation-delay:.16s} .hero .wrap > :nth-child(4){animation-delay:.24s} .hero .wrap > :nth-child(5){animation-delay:.32s}

.hero-grid{display:grid; gap:2rem; align-items:center}
.hero-art{display:none; width:100%; max-width:360px; height:auto; justify-self:end; filter:drop-shadow(0 18px 28px rgba(27,33,48,.28)) drop-shadow(0 2px 4px rgba(27,33,48,.12)); animation:rise .7s cubic-bezier(.2,.7,.2,1) .2s both}
@media (min-width:900px){ .hero-grid{grid-template-columns:minmax(0,1fr) minmax(260px,340px)} .hero-art{display:block} }
.card .num{margin-right:.5rem; vertical-align:middle}
.card .ico{width:2.3rem; height:2.3rem; vertical-align:middle; color:var(--brand-ink); margin-bottom:.9rem}

/* ---------- section art & small icons ---------- */
.section-head.with-art{display:grid; gap:1.5rem; align-items:center}
.sec-art{display:none; width:100%; max-width:300px; height:auto; justify-self:end; filter:drop-shadow(0 12px 20px rgba(27,33,48,.2))}
@media (min-width:900px){ .section-head.with-art{grid-template-columns:minmax(0,1fr) 300px} .sec-art{display:block} }
.strip-art{display:none; width:200px; height:auto; flex:0 0 auto; filter:drop-shadow(0 10px 16px rgba(27,33,48,.2))}
@media (min-width:900px){ .strip-art{display:block} }
.ico-sm{width:1.35em; height:1.35em; vertical-align:-.28em; margin-right:.45rem; color:var(--brand-ink); flex:0 0 auto}

/* ---------- sections ---------- */
section{padding:clamp(2.75rem,2rem + 3.5vw,4.75rem) 0}
section + section{border-top:1px solid var(--line)}
main > section:nth-of-type(even){background:var(--surface); box-shadow:inset 0 1px 0 var(--hi), inset 0 12px 24px -24px rgba(27,33,48,.25)}
.section-head{margin-bottom:2rem}
.section-head h2::after{content:""; display:block; width:3.5rem; height:3px; margin:.7rem 0 0; background:var(--brand); border-radius:2px}
.section-head p{color:var(--ink-soft); font-size:1.08rem}
.kicker{display:flex; align-items:center; gap:.6rem; font-size:.78rem; letter-spacing:.15em; text-transform:uppercase; font-weight:700; color:var(--brand-ink); margin:0 0 .8rem}
.kicker::before{content:""; width:1.6rem; height:3px; background:var(--brand); border-radius:2px}

/* ---------- the cut meter ---------- */
.meter{background:var(--surface); border:1px solid var(--line); border-top:4px solid var(--brand); border-radius:var(--radius); padding:1.6rem; box-shadow:var(--shadow-lg), inset 0 1px 0 var(--hi); margin:0 0 1.25rem}
.meter h3{margin-bottom:.15rem}
.meter .caption{color:var(--ink-faint); font-size:.92rem; margin-bottom:1.3rem}
.bar{display:flex; height:56px; border-radius:999px; overflow:hidden; border:1px solid var(--line-strong); box-shadow:inset 0 2px 6px rgba(0,0,0,.18)}
.bar .seg{display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.95rem; color:var(--on-brand); padding-inline:.4rem; text-align:center}
.bar .seg-keep{background:var(--brand); flex:1 1 auto}
.bar .seg-cut{background:var(--cut); flex:0 0 28%; background-image:repeating-linear-gradient(135deg, rgba(255,255,255,.08) 0 6px, transparent 6px 12px)}
.bar .seg-all{background:var(--brand); flex:1 1 auto}
.bar-legend{display:flex; flex-wrap:wrap; gap:.4rem 1.5rem; margin-top:.85rem; font-size:.94rem; color:var(--ink-soft)}
.bar-legend span{display:inline-flex; align-items:center; gap:.5rem}
.dot{width:.85rem; height:.85rem; border-radius:3px; flex:0 0 auto}
.dot-keep{background:var(--brand)} .dot-cut{background:var(--cut)}

/* ---------- cards ---------- */
.grid{display:grid; gap:1.15rem}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(265px,1fr))}
.grid-tight{grid-template-columns:repeat(auto-fit,minmax(212px,1fr))}
.grid-tight .card{padding:1.25rem}
.grid-tight .card h3{font-size:1.06rem; text-wrap:balance}
.card{background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:1.6rem; box-shadow:var(--shadow-sm), inset 0 1px 0 var(--hi); transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease}
.card{position:relative; overflow:hidden}
.card::after{content:""; position:absolute; right:-.5rem; bottom:-.4rem; width:7rem; height:3rem; background:var(--leaf3) center/contain no-repeat; opacity:.09; pointer-events:none}
.card:hover{transform:translateY(-3px); box-shadow:var(--shadow-lg), inset 0 1px 0 var(--hi); border-color:var(--line-strong)}
.card h3{margin-bottom:.4rem}
.card p:last-child, .card ul:last-child{margin-bottom:0}
.card .num{display:inline-flex; align-items:center; justify-content:center; width:2.3rem; height:2.3rem; border-radius:50%; background:var(--brand); color:var(--on-brand); font-weight:700; font-family:var(--serif); font-size:1.1rem; margin-bottom:.9rem}
.card-quiet{background:var(--surface-2); border-color:transparent}

.stat{background:var(--surface); border:1px solid var(--line); border-top:4px solid var(--brand); border-radius:16px; padding:1.35rem 1.5rem; position:relative; overflow:hidden; box-shadow:var(--shadow-sm), inset 0 1px 0 var(--hi)}
.stat::after{content:""; position:absolute; right:.4rem; top:.6rem; width:5.5rem; height:2.3rem; background:var(--leaf3) center/contain no-repeat; opacity:.1; pointer-events:none}
.stat .figure{font-family:var(--serif); font-size:clamp(2.1rem,1.6rem + 1.9vw,3rem); line-height:1.05; letter-spacing:-.02em; color:var(--brand-ink); margin-bottom:.4rem; font-variant-numeric:tabular-nums}
.stat .label{color:var(--ink-soft); font-size:.97rem; margin:0}

/* ---------- lifecycle: whose turn it is ---------- */
.who{display:inline-flex; align-items:center; gap:.4rem; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; font-weight:700; padding:.25rem .6rem; border-radius:999px; background:var(--surface-2); color:var(--ink-faint); border:1px solid var(--line); margin-bottom:.7rem}
.who::before{content:""; width:.45rem; height:.45rem; border-radius:50%; background:currentColor}
.who-you{background:var(--brand-wash); color:var(--brand-ink); border-color:transparent}
.who-us{background:var(--ok-wash); color:var(--ok); border-color:transparent}
.stage{position:relative}
.stage + .stage{margin-top:1.15rem}

/* ---------- the official form a step needs ---------- */
.doc{display:flex; flex-wrap:wrap; gap:.15rem .6rem; align-items:baseline;
  background:var(--surface-2); border:1px solid var(--line); border-left:3px solid var(--brand);
  border-radius:9px; padding:.65rem .85rem; margin:.9rem 0; max-width:var(--measure)}
.doc .code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-weight:700;
  font-size:.9rem; color:var(--brand-ink); flex:0 0 auto; letter-spacing:.02em}
.doc .who-fills{width:100%; font-size:.86rem; color:var(--ink-faint); margin-top:.15rem}

/* ---------- callouts ---------- */
.note{border:1px solid var(--line); border-left:4px solid var(--brand); background:var(--brand-wash); padding:1.2rem 1.4rem; border-radius:12px; margin:1.75rem 0; box-shadow:var(--shadow-sm)}
.note.warn{border-left-color:var(--warn); background:var(--warn-wash)}
.note :last-child{margin-bottom:0}
.note .note-title{font-weight:700; display:block; margin-bottom:.3rem}

/* ---------- lists ---------- */
.checks{list-style:none; padding:0; margin:0 0 1.15em}
.checks li{position:relative; padding-left:2rem; margin-bottom:.7rem; max-width:var(--measure)}
.checks li::before{content:""; position:absolute; left:0; top:.42em; width:1.1rem; height:.6rem; border-left:3px solid var(--ok); border-bottom:3px solid var(--ok); transform:rotate(-45deg)}
.crosses{list-style:none; padding:0; margin:0 0 1.15em}
.crosses li{position:relative; padding-left:2rem; margin-bottom:.7rem; max-width:var(--measure)}
.crosses li::before{content:"\00d7"; position:absolute; left:.15rem; top:-.05em; font-size:1.5rem; line-height:1.3; color:var(--cut); font-weight:700}

/* ---------- table ---------- */
.table-scroll{overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); box-shadow:var(--shadow-sm)}
table{border-collapse:collapse; width:100%; margin:0; font-variant-numeric:tabular-nums}
caption{text-align:left; padding:1rem 1.15rem .35rem; color:var(--ink-faint); font-size:.92rem}
th,td{padding:.72rem 1.15rem; text-align:left; border-bottom:1px solid var(--line)}
thead th{font-size:.82rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint); background:var(--surface-2)}
tbody tr:nth-child(even) td{background:var(--surface-2)}
tbody tr:last-child td{border-bottom:0}
td.num,th.num{text-align:right}

/* ---------- details / faq ---------- */
details{background:var(--surface); border:1px solid var(--line); border-radius:12px; margin-bottom:.75rem; box-shadow:var(--shadow-sm)}
details[open]{box-shadow:var(--shadow)}
summary{cursor:pointer; padding:1.05rem 1.3rem; font-weight:650; min-height:44px; list-style:none; display:flex; align-items:center; justify-content:space-between; gap:1rem; border-radius:12px}
summary::-webkit-details-marker{display:none}
summary::after{content:""; width:.6rem; height:.6rem; border-right:2.5px solid var(--brand); border-bottom:2.5px solid var(--brand); transform:rotate(45deg); margin-right:.3rem; flex:0 0 auto; transition:transform .2s ease}
details[open] summary::after{transform:rotate(-135deg)}
details[open]{border-color:var(--brand)}
summary:hover{background:var(--surface-2)}
.details-body{padding:0 1.3rem 1.2rem}
.details-body :last-child{margin-bottom:0}

/* ---------- support strip ---------- */
.strip{background:var(--surface-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line); position:relative; overflow:hidden}
.strip .wrap{position:relative}
.strip .inner{display:flex; flex-wrap:wrap; align-items:center; gap:1.5rem; justify-content:space-between; padding:clamp(2rem,1.5rem + 2vw,3rem) 0}
.strip h2{margin-bottom:.35rem}
.strip p{color:var(--ink-soft); margin-bottom:0}

/* ---------- footer ---------- */
.foot{background:linear-gradient(180deg,var(--surface-2),var(--paper)); border-top:4px solid var(--brand); box-shadow:inset 0 14px 28px -24px rgba(27,33,48,.35); padding:3.25rem 0 2.25rem; margin-top:0; position:relative; overflow:hidden}
.foot .wrap{position:relative}
.foot .cols{display:grid; gap:2rem; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); margin-bottom:2.25rem}
.foot h2{font-family:var(--sans); font-size:.8rem; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:.9rem; font-weight:700}
.foot ul{list-style:none; padding:0; margin:0}
.foot li{margin-bottom:.5rem}
.foot a{color:var(--ink-soft); text-decoration:none}
.foot a:hover{color:var(--brand-ink); text-decoration:underline}
.foot .fine{border-top:1px solid var(--line); padding-top:1.5rem; color:var(--ink-faint); font-size:.9rem}
.foot .fine p{max-width:78ch; margin-bottom:.6rem}
.foot .proud{display:flex; align-items:center; gap:.6rem; color:var(--ink); font-weight:600; margin-bottom:1rem}

.vh{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}

@media (forced-colors:active){
  .bar .seg{forced-color-adjust:none}
  .card,.meter,details,.table-scroll{border:1px solid CanvasText}
}

.mt-lg{margin-top:1.6rem}
.mb-0{margin-bottom:0}