:root{
--paper:#F5EFE3;--card:#FBF6EC;--ink:#1C1A15;--green:#2E5D44;--green-d:#245039;
--green-soft:#E4EAE2;--maroon:#7C3A31;--maroon-soft:#EFE0DC;--muted:#8C8474;
--line:rgba(28,26,21,.1);--r:16px;
--accent:#2E5D44;--accent-soft:#E4EAE2;--accent-ink:#FFFFFF;--pathway-bg:#FBF6EC;
--sh:0 1px 2px rgba(28,26,21,.05),0 10px 30px rgba(28,26,21,.08);
--sh-lg:0 2px 4px rgba(28,26,21,.06),0 18px 50px rgba(28,26,21,.12);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-font-smoothing:antialiased;scroll-behavior:smooth}
body{font-family:'Fraunces',Georgia,serif;background:var(--paper);color:var(--ink);line-height:1.55;overflow-x:hidden}
.ui{font-family:Ubuntu,system-ui,sans-serif}
.wrap{max-width:1140px;margin:0 auto;padding:0 28px}
.fi{fill:var(--ink)} .fg{fill:var(--green)} .fc{fill:var(--card)}
.dg{fill:none;stroke:var(--ink);stroke-width:2.4} .dgs{stroke:var(--muted);stroke-width:2}

/* entrance states */
[data-enter]{opacity:0;transform:translateY(22px)}
.entered [data-enter],.no-anim [data-enter]{opacity:1;transform:none}
.mask{overflow:hidden;display:block}
[data-line]{display:block;transform:translateY(120%)}
.no-anim [data-line]{transform:none}

/* top bar */
header{position:sticky;top:0;z-index:40;background:rgba(245,239,227,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
header .bar{display:flex;justify-content:space-between;align-items:center;padding-top:16px;padding-bottom:16px}
.logo{height:40px;width:auto;display:block}
.cta{display:inline-flex;align-items:center;gap:9px;background:var(--ink);color:var(--paper);border:none;
cursor:pointer;font-family:Ubuntu;font-weight:700;font-size:15px;border-radius:12px;padding:12px 20px;text-decoration:none;
box-shadow:var(--sh);transition:transform .18s cubic-bezier(.22,1,.36,1),box-shadow .18s,background .18s}
.cta:hover{background:var(--green-d);transform:translateY(-2px);box-shadow:var(--sh-lg)}
.cta.big{font-size:17px;padding:16px 26px;border-radius:14px}

/* hero */
.hero{padding:84px 0 40px}
.hero-grid{display:grid;grid-template-columns:1fr;gap:40px;align-items:center}
@media(min-width:960px){.hero-grid{grid-template-columns:1.02fr .98fr;gap:56px}}
.kickpill{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--card);
border-radius:999px;padding:7px 15px;font-size:14.5px;font-style:italic;color:#5a5546;box-shadow:0 1px 2px rgba(28,26,21,.04)}
h1{font-family:'Fraunces',serif;font-weight:600;font-size:clamp(2.3rem,4.6vw,3.9rem);line-height:1.08;letter-spacing:-.015em;margin-top:20px}
.lead{margin-top:22px;max-width:47ch;font-size:clamp(1.08rem,1.5vw,1.26rem);color:#4a463d}
.foldproof{margin-top:22px;max-width:47ch;font-size:15.5px;color:#3c3931;border-left:3px solid var(--green);padding-left:15px}
.hero .cta{margin-top:30px}
.subcta{margin-top:14px;font-size:14.5px;font-style:italic;color:var(--muted)}

/* hero animation panel */
.hero-panel{position:relative;background:var(--card);border:1px solid var(--line);border-radius:22px;box-shadow:var(--sh-lg);padding:22px 18px 14px;overflow:hidden}
.hx-svg{width:100%;height:auto;display:block}
.hxp{fill:none;stroke:rgba(28,26,21,.16);stroke-width:2}
.hx-node{fill:var(--card);stroke:var(--ink);stroke-width:2.4;transition:stroke .5s}
.hx-tick{fill:#C3BCAD;transition:fill .5s}
.hxn.live .hx-node{stroke:var(--green)}
.hxn.live .hx-tick{fill:var(--green)}
.hx-pulse{fill:var(--green);opacity:0}
.hx-halo{fill:none;stroke:var(--green);stroke-width:2;opacity:0}
.diffcard{position:relative;z-index:2;width:min(320px,86%);background:#fff;border:1px solid var(--line);border-radius:12px;
box-shadow:var(--sh);font-family:'Ubuntu Mono',monospace;font-size:13.5px;overflow:hidden;margin:0 auto 6px}
.difftab{display:flex;align-items:center;gap:8px;padding:7px 12px;border-bottom:1px solid var(--line);color:#5a5546;font-size:12px}
.dtv{margin-left:auto;color:var(--muted)}
.dline{padding:7px 12px;display:flex;gap:8px;align-items:baseline}
.dline .sg{font-weight:700;width:10px;flex:none}
.dline.minus{background:var(--maroon-soft);color:var(--maroon);text-decoration:line-through;text-decoration-color:rgba(124,58,49,.45)}
.dline.plus{background:var(--green-soft);color:var(--green-d)}
.hx-cap{text-align:center;font-style:italic;font-size:13.5px;color:var(--muted);padding:10px 8px 6px}

/* sections */
.sec{padding:88px 0}
.sec.band{background:var(--card);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.eyebrow{display:inline-block;font-style:italic;color:var(--green);font-size:16px;margin-bottom:12px}
h2{font-family:'Fraunces',serif;font-weight:600;font-size:clamp(1.7rem,3.4vw,2.5rem);letter-spacing:-.015em;line-height:1.12;max-width:24ch;margin-bottom:16px}
.sec p.body{font-size:1.12rem;color:#454136;max-width:62ch}
.sec p.body+p.body{margin-top:14px}

/* trio */
.trio{display:grid;grid-template-columns:1fr;gap:22px;margin-top:34px}
@media(min-width:860px){.trio{grid-template-columns:repeat(3,1fr)}}
.tcard{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:26px;box-shadow:var(--sh);
transition:transform .2s cubic-bezier(.22,1,.36,1),box-shadow .2s}
.tcard:hover{transform:translateY(-4px);box-shadow:var(--sh-lg)}
.sec.band .tcard{background:#fff}
.tart{height:150px;display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.art-svg{width:100%;height:100%;overflow:visible;max-width:230px}
.tcard h3{font-family:'Fraunces',serif;font-size:20px;font-weight:600;line-height:1.15;margin-bottom:7px}
.tcard p{font-size:15.5px;color:#54503f}

/* scenes / steps / lists */
.scenes{display:grid;grid-template-columns:1fr;gap:18px;margin-top:28px}
@media(min-width:800px){.scenes{grid-template-columns:repeat(3,1fr)}}
.scene{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:24px;font-size:1.02rem;color:#454136;box-shadow:var(--sh)}
.scene .sn{font-family:'Ubuntu Mono',monospace;font-size:12px;color:var(--maroon);display:block;margin-bottom:10px}
.steps{display:grid;grid-template-columns:1fr;gap:18px;margin-top:28px;counter-reset:s}
@media(min-width:800px){.steps{grid-template-columns:repeat(3,1fr)}}
.step{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:24px;box-shadow:var(--sh);font-size:1.02rem;color:#454136}
.step:before{counter-increment:s;content:counter(s);display:flex;align-items:center;justify-content:center;
width:30px;height:30px;border-radius:50%;background:var(--green);color:#fff;font-family:Ubuntu;font-weight:700;font-size:15px;margin-bottom:12px}
.sec.band .scene,.sec.band .step{background:var(--paper)}
ul.get{list-style:none;margin-top:22px;max-width:60ch}
ul.get li{padding:13px 0;border-bottom:1px solid var(--line);font-size:1.08rem;color:#454136;display:flex;gap:12px}
ul.get li:before{content:"";width:15px;height:15px;margin-top:7px;flex:none;background:url('data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%22155.3 -0.7 89.2 89.2%22><path fill=%22%231C1A15%22 d=%22M225.2,81l-2.1-10,4.5-1.1c2.8-.7,2.9-4.6,2.9-7.5V21.9c0-1.7-.6-3.4-1.9-4.4s-3.4-1.2-5.4-1.6l1.9-10.3,6.5.4c2.5.1,4.9,1,7.1,2.2s4.3,3.8,5,6.8.8,4.6.8,7.1l-.2,46.8c0,7.1-6,11.1-12.6,11.9l-6.5.2Z%22/><path fill=%22%231C1A15%22 d=%22M174.6,82l-7.1-.5c-2.3-.2-4.4-1-6.4-2-3.1-1.6-4.9-4.4-5.3-7.8s-.6-9.5-.5-14.4v-28.1s.2-9.6.2-9.6c0-2.1.5-4,1.4-5.9,3.5-6.3,11-6.8,17.7-7l2,10.2-4.3,1c-1.6.4-2.9,2-2.9,4v44.6c0,5.8,6.4,4.9,7,5.5s.1.5,0,.8l-1.8,9.4Z%22/><circle fill=%22%232E5D44%22 cx=%22199.8%22 cy=%2244.9%22 r=%2224.9%22/></svg>') no-repeat center/contain}
.split{display:grid;grid-template-columns:1fr;gap:30px;align-items:center}
@media(min-width:860px){.split{grid-template-columns:1.1fr .9fr}}

/* inline diff (variant B fold visual reuse) */
.diff{font-family:'Ubuntu Mono',monospace;font-size:15px;border:1px solid var(--line);border-radius:12px;overflow:hidden;max-width:430px;background:#fff;box-shadow:var(--sh)}
.diff div{padding:10px 16px;display:flex;gap:10px;align-items:baseline}
.diff .minus{background:var(--maroon-soft);color:var(--maroon);text-decoration:line-through;text-decoration-color:rgba(124,58,49,.5)}
.diff .plus{background:var(--green-soft);color:var(--green-d)}
.diff .sg{font-weight:700;width:12px;flex:none}

/* comparison table */
.cmpwrap{margin-top:30px;overflow-x:auto;border-radius:var(--r);box-shadow:var(--sh);border:1px solid var(--line)}
.cmp{width:100%;border-collapse:collapse;font-size:1.02rem;background:#fff;min-width:560px}
.cmp th,.cmp td{padding:15px 18px;text-align:left;border-bottom:1px solid var(--line)}
.cmp th{font-family:Ubuntu;font-weight:700;font-size:.95rem;background:var(--card)}
.cmp td:first-child{color:#454136}
.cmp .yes{color:var(--green-d);font-weight:600}
.cmp .no{color:var(--maroon)}
.cmp tr:last-child td{border-bottom:none}

/* honesty strip */
.honesty{padding:74px 0}
.honesty .hgrid{display:grid;grid-template-columns:1fr;gap:18px}
@media(min-width:800px){.honesty .hgrid{grid-template-columns:repeat(4,1fr)}}
.hcell{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:22px;box-shadow:var(--sh)}
.hcell h3{font-family:'Fraunces',serif;font-size:1.08rem;font-weight:600;margin-bottom:7px}
.hcell p{font-size:.95rem;color:#54503f}
.pl-wrap{display:flex;align-items:center;justify-content:center;gap:12px;padding:8px 0 74px}
.price-line{font-size:1.06rem;color:#54503f;text-align:center;font-style:italic;max-width:44ch}
.pbr{height:26px;width:auto;flex:none;opacity:.75}

/* diagram motion amplitudes */
.d-plate-a{--ay:8px} .d-plate-b{--ay:6px} .d-plate-c{--ay:4px} .d-plate-d{--ay:2.5px}
.d-src-t{--ax:1.5px;--ay:-7px} .d-src-l{--ax:-8px;--ay:1px} .d-src-r{--ax:8px;--ay:-3px}
.d-node-t{--ay:-5px} .d-node-b{--ay:5px} .d-node-l{--ax:-6px} .d-node-r{--ax:6px}
.amb{--t:3.4s}

/* close */
.close{text-align:center;padding:96px 0}
.close .line{font-family:'Fraunces',serif;font-weight:600;font-size:clamp(1.7rem,3.6vw,2.6rem);letter-spacing:-.015em;line-height:1.12;max-width:22ch;margin:0 auto 28px}
.close .exp{margin-top:18px;color:var(--muted);font-style:italic}

/* footer */
footer{background:var(--ink);color:var(--paper);padding:56px 0}
footer .logo{height:64px}
footer .logo .fi{fill:var(--paper)}
footer p{font-size:.98rem;color:rgba(245,239,227,.72);margin-top:16px;max-width:54ch}

/* form modal */
.modal{position:fixed;inset:0;z-index:60;display:none;align-items:center;justify-content:center;background:rgba(28,26,21,.55);padding:20px}
.modal.on{display:flex}
.sheet{background:var(--paper);border-radius:18px;max-width:440px;width:100%;padding:32px;position:relative;box-shadow:var(--sh-lg)}
.sheet h3{font-family:'Fraunces',serif;font-weight:600;font-size:1.45rem;margin-bottom:6px}
.sheet .note{font-size:.96rem;color:#454136;margin-bottom:18px}
.field{margin-bottom:12px}
.field label{display:block;font-family:Ubuntu;font-weight:700;font-size:.85rem;margin-bottom:6px}
.field input{width:100%;background:#fff;border:1.5px solid var(--line);border-radius:10px;padding:13px 14px;font-family:'Fraunces',serif;font-size:1rem;color:var(--ink)}
.field input:focus{outline:none;border-color:var(--green)}
.sheet .cta{width:100%;justify-content:center;margin-top:6px}
.x{position:absolute;top:14px;right:16px;background:none;border:none;font-size:22px;color:var(--muted);cursor:pointer;font-family:Ubuntu}
.q{display:none} .q.on{display:block}
.qgrid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:10px 0 4px}
.qopt{background:#fff;border:1.5px solid var(--line);border-radius:10px;padding:12px;font-family:Ubuntu;font-weight:600;font-size:.9rem;cursor:pointer;text-align:left;color:var(--ink)}
.qopt:hover{border-color:var(--green)} .qopt.sel{background:var(--green);color:#fff;border-color:var(--green)}
.qlabel{font-family:Ubuntu;font-weight:700;font-size:.9rem;margin:14px 0 2px}
.skip{background:none;border:none;color:var(--muted);font-family:'Fraunces',serif;font-style:italic;cursor:pointer;margin-top:14px;font-size:.95rem;text-decoration:underline}
.done{text-align:center}
.done .big{font-size:1.5rem;margin-bottom:8px;font-family:'Fraunces',serif;font-weight:600}


.mi{display:inline-block;vertical-align:-0.12em;flex:none}
.eyebrow .mi{margin-right:8px}
.difftab .mi{margin-right:2px}
.topnav{display:none;position:absolute;left:50%;transform:translateX(-50%);gap:26px}
@media(min-width:860px){.topnav{display:flex}}
.topnav a{font-family:Ubuntu;font-weight:500;font-size:14.5px;color:#4a463d;text-decoration:none;padding:6px 2px;border-bottom:2px solid transparent;transition:color .15s,border-color .15s}
.topnav a:hover{color:var(--ink);border-bottom-color:var(--green)}
header .bar{position:relative}
.hicon{margin-bottom:12px}
.qbig-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:14px 0 4px}
.qbig{background:#fff;border:1.5px solid var(--line);border-radius:14px;min-height:96px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
font-family:Ubuntu;font-weight:700;font-size:1rem;cursor:pointer;color:var(--ink);box-shadow:var(--sh);
transition:transform .16s cubic-bezier(.22,1,.36,1),box-shadow .16s,border-color .16s}
.qbig:hover{transform:translateY(-2px);box-shadow:var(--sh-lg);border-color:var(--green)}
.qbig.sel{background:var(--green);color:#fff;border-color:var(--green)}
.qbig .qn{font-size:1.6rem;line-height:1;color:var(--green)}
.qbig.sel .qn{color:#fff}


.hglyph{width:44px;height:44px;margin-bottom:14px;display:block}
.blwrap{height:420vh;position:relative}
.blstick{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;align-items:center}
.blgrid{display:grid;grid-template-columns:1fr;gap:10px;width:100%;max-width:1140px;margin:0 auto;padding:0 28px;align-items:center}
@media(min-width:960px){.blgrid{grid-template-columns:.85fr 1.15fr;gap:40px}}
.blcaps{position:relative;min-height:190px}
.blcap{position:absolute;inset:0;opacity:0;pointer-events:none}
.blcap h2{margin-bottom:12px}
.blscene svg{width:100%;height:auto;max-height:82vh;display:block}
.blc{fill:none;stroke:rgba(28,26,21,.18);stroke-width:2.4}
.blnode{fill:#fff;stroke:#1C1A15;stroke-width:2.6}
.blntick{fill:#2E5D44}
.blring{fill:none;stroke:#2E5D44;stroke-width:2.5;opacity:0}
.blpulse{fill:#2E5D44;opacity:0}
.bld{opacity:0}
.bldg{opacity:0}
.bl-static .blwrap{height:auto}
.bl-static .blstick{position:static;height:auto;padding:88px 0}
.bl-static .blcap{position:static;opacity:1;margin-bottom:26px;pointer-events:auto}
.bl-static .blcaps{min-height:0}

@media (prefers-reduced-motion: reduce){
  [data-line]{transform:none!important}
  [data-enter]{opacity:1!important;transform:none!important}
  .cta{transition:none}
}