/* Tokens resolved from the running app, [data-theme=forest]. Light only. */
:root{
  --paper:#faf7f2; --paper-2:#f3ede2; --paper-3:#ece4d5; --card:#ffffff;
  --ink:#1c1c19; --ink-2:#474b43; --muted:#5c6459;
  --line:#e7dfd0; --line-soft:#f0e9dc;
  --forest:#164525; --forest-2:#233928; --forest-3:#38553f; --forest-4:#4d7357;
  --mint:#e6f0e8; --mint-2:#d5e6d9;
  --amber:#8d5600; --amber-bg:#f8efdc;
  --red:#a8322c; --red-bg:#f8e9e6;
  --on-accent:#f0f8f1;
  --cold:#eef0f2; --cold-card:#f9fafb; --cold-line:#dcdfe3;
  --cold-ink:#4c525a; --cold-mute:#969ca4; --cold-head:#e6e9ec;
  --r:12px; --r-sm:8px; --r-lg:20px;
  --f:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --m:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --shadow:0 18px 44px -26px rgb(22 69 37 / .30), 0 1px 2px rgb(28 28 25 / .05);
  --shadow-lg:0 34px 70px -34px rgb(22 69 37 / .38), 0 2px 4px rgb(28 28 25 / .06);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--f);
  font-size:16.5px;line-height:1.6;-webkit-font-smoothing:antialiased}
.wrap{max-width:1220px;margin:0 auto;padding:0 clamp(1.1rem,4vw,2.4rem)}
.narrow{max-width:780px}
h1,h2,h3{letter-spacing:-.03em;text-wrap:balance;margin:0}
h2{font-size:clamp(1.65rem,3.5vw,2.45rem);line-height:1.08;font-weight:700;max-width:21ch}
h3{font-size:1.1rem;font-weight:650;letter-spacing:-.014em}
p{margin:0 0 1rem;max-width:64ch}
a{color:var(--forest)}
strong{font-weight:650}
.lead{font-size:clamp(1.02rem,1.55vw,1.16rem);color:var(--ink-2);max-width:56ch}
.eyebrow{font-family:var(--m);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--forest);margin:0 0 .85rem}
.mono{font-family:var(--m)}
section{padding:clamp(3.2rem,7vw,6rem) 0}
.band{background:var(--paper-2)}
.band-3{background:var(--paper-3)}

.btn{display:inline-block;font-size:.95rem;font-weight:550;padding:.72rem 1.4rem;
  border-radius:99px;border:1px solid var(--forest);background:var(--forest);
  color:var(--on-accent);text-decoration:none;white-space:nowrap;cursor:pointer;font-family:inherit;
  transition:transform .15s cubic-bezier(.16,1,.3,1),filter .15s,box-shadow .2s}
.btn:hover{filter:brightness(1.1);box-shadow:0 8px 22px -12px rgb(22 69 37 / .6)}
.btn:active{transform:translateY(1px)}
.btn.ghost{background:transparent;color:var(--forest);border-color:var(--line)}
.btn.ghost:hover{border-color:var(--forest-4);box-shadow:none}
.ctas{display:flex;flex-wrap:wrap;gap:.7rem}

/* ---------------- animated header ---------------- */
.hero{position:relative;overflow:hidden;background:var(--forest-2);color:var(--on-accent);
  padding-bottom:clamp(3rem,7vw,5rem)}
#waves{position:absolute;inset:0;width:100%;height:100%;display:block}
.hero .wrap{position:relative;z-index:2}
.hero nav{height:74px;display:flex;align-items:center;gap:2rem}
.brand{display:flex;align-items:center;gap:.62rem;text-decoration:none;color:inherit}
.logo{height:21px;width:auto;display:block}
.icon-mark{width:1em;height:1em;display:block}
.brand:hover .logo{opacity:.88}
.navlinks{display:none;gap:1.7rem;font-size:.92rem}
@media(min-width:1020px){.navlinks{display:flex}}
.navlinks a{color:rgb(240 248 241 / .82);text-decoration:none;transition:color .2s}
.navlinks a:hover{color:#fff}
.hero nav .sp{margin-left:auto}
.navcta{font-size:.87rem;font-weight:550;padding:.5rem 1.05rem;border-radius:99px;
  background:var(--on-accent);color:var(--forest-2);text-decoration:none;white-space:nowrap;
  transition:transform .15s cubic-bezier(.16,1,.3,1)}
.navcta:hover{transform:translateY(-1px)}

.heroinner{padding:clamp(2.4rem,6vw,4.2rem) 0 0;max-width:34ch}
.hero h1{font-size:clamp(2.2rem,5vw,3.6rem);line-height:1.02;font-weight:700;
  margin:0 0 1rem;color:#fff}
.hero h1 .soft{color:rgb(240 248 241 / .62)}
.hero .lead{color:rgb(240 248 241 / .84);max-width:46ch;margin-bottom:1.7rem}
.hero .ctas .btn{background:var(--on-accent);color:var(--forest-2);border-color:var(--on-accent)}
.hero .ctas .btn.ghost{background:transparent;color:var(--on-accent);
  border-color:rgb(240 248 241 / .36)}
.trust{margin-top:2rem;display:flex;flex-wrap:wrap;gap:.6rem 1.6rem;align-items:center;
  font-size:.86rem;color:rgb(240 248 241 / .72)}
.trust b{color:#fff;font-weight:600}

/* the entry card floating in the hero */
.herostage{position:relative;z-index:2;margin-top:clamp(2rem,5vw,3rem)}
@media(min-width:1000px){
  .heroflex{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
    gap:clamp(2rem,4vw,3.4rem);align-items:center}
  .heroinner{padding-top:clamp(1.5rem,4vw,3rem)}
  .herostage{margin-top:0}
}

/* ---------------- app chrome for every render ---------------- */
.app{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--card);
  box-shadow:var(--shadow-lg);color:var(--ink)}
/* An app render carries its own ink, so dropping one onto the dark hero (or any
   tinted band) cannot leave its text inheriting that section's colour. */
.sheet,.alertlist,.vbox,.reccard{color:var(--ink)}
.appbar{display:flex;align-items:center;gap:.6rem;padding:.62rem .9rem;background:var(--mint);
  border-bottom:1px solid var(--line);font-size:.78rem;color:var(--muted)}
.appchip{width:22px;height:22px;border-radius:6px;flex:none;display:grid;place-items:center;
  background:var(--forest-2);color:#f0f8f1;font-size:11px}
.appbar .crumb{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pill{font-size:.66rem;letter-spacing:.05em;padding:.14rem .52rem;border-radius:99px;
  background:var(--forest);color:var(--on-accent);flex:none}
.pill.q{background:var(--mint-2);color:var(--forest)}
.pill.open{background:var(--mint-2);color:var(--forest)}

/* entry render */
.entry{padding:1.25rem 1.4rem}
.entry .etitle{font-size:1.2rem;font-weight:700;letter-spacing:-.022em;margin:0 0 .25rem}
.entry .emeta{font-size:.8rem;color:var(--muted);margin-bottom:.2rem}
.entry .eproj{font-size:.8rem;color:var(--forest);margin-bottom:.85rem}
.entry p{font-size:.9rem;margin:0 0 .7rem;max-width:none;color:var(--ink-2)}
.tok{display:inline-block;font-family:var(--m);font-size:.86em;background:var(--mint);
  color:var(--forest);border-radius:5px;padding:.03rem .34rem;font-weight:500;
  white-space:nowrap;transition:background .3s,box-shadow .3s}
.tok.hot{background:var(--mint-2);box-shadow:0 0 0 2px var(--forest-4)}

.reccard{border:1px solid var(--line);border-radius:var(--r-sm);background:var(--paper);
  padding:.75rem .9rem;margin:.6rem 0 .2rem;max-width:330px}
.reccard .rtop{font-size:.92rem;font-weight:650;letter-spacing:-.012em}
.reccard .rsub{font-family:var(--m);font-size:.68rem;color:var(--muted);margin-bottom:.5rem}
.rrow{display:flex;justify-content:space-between;gap:.8rem;padding:.24rem 0;
  border-bottom:1px solid var(--line-soft);font-size:.76rem}
.rrow:last-of-type{border-bottom:0}
.rrow .rk{color:var(--muted);font-family:var(--m);font-size:.68rem}
.rrow .rv{color:var(--ink-2);font-family:var(--m);text-align:right}
.rrow .rv.ok{color:var(--forest)}
.reclabel{font-family:var(--m);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);margin-top:.6rem}

/* protocol embed */
.embed{border:1px solid var(--line);border-left:3px solid var(--forest);border-radius:var(--r-sm);
  background:var(--paper-2);padding:.85rem 1rem;margin:.85rem 0}
.embed .eh{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin-bottom:.55rem}
.embed .en{font-weight:650;font-size:.92rem}
.vpill{font-family:var(--m);font-size:.64rem;letter-spacing:.06em;padding:.12rem .45rem;
  border-radius:99px;background:var(--forest);color:var(--on-accent);
  transition:background .4s,color .4s}
.stepblk{border-top:1px solid var(--line);padding-top:.5rem;margin-top:.5rem}
.stepblk:first-of-type{border-top:0;padding-top:0;margin-top:0}
.stepn{font-family:var(--m);font-size:.66rem;color:var(--forest);margin-bottom:.15rem}
.stept{font-size:.85rem;font-weight:600;margin-bottom:.35rem}
.iogrid{display:grid;gap:.5rem;grid-template-columns:repeat(3,1fr);font-size:.7rem}
.iogrid .iok{font-family:var(--m);font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);margin-bottom:.2rem}
.chipv{display:inline-block;background:var(--card);border:1px solid var(--line);
  border-radius:5px;padding:.1rem .38rem;margin:0 .15rem .15rem 0;font-size:.68rem;
  color:var(--ink-2)}

/* ---------------- USP demo frame (looping, legible) ---------------- */
.demo{display:grid;gap:clamp(1.6rem,4vw,3rem);grid-template-columns:1fr;align-items:center}
@media(min-width:960px){
  .demo{grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr)}
  .demo.flip .dtext{order:2}
  .demo.flip .dstage{order:1}
}
.dstage{position:relative}
.demo{align-items:start}
.dhead{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;margin-bottom:.7rem}
.dnav{display:flex;gap:.3rem;list-style:none;margin:0;padding:0;flex-wrap:wrap}
.dnav li{font-family:var(--m);font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);background:var(--card);border:1px solid var(--line);border-radius:99px;
  padding:.26rem .66rem;display:flex;align-items:center;gap:.36rem;
  transition:background .35s,color .35s,border-color .35s}
.dnav li::before{content:counter(dn);counter-increment:dn;font-size:.62rem;
  width:14px;height:14px;border-radius:50%;display:grid;place-items:center;
  background:var(--line-soft);color:var(--muted);transition:background .35s,color .35s}
.dnav{counter-reset:dn}
.dnav li.done{color:var(--ink-2);border-color:var(--line)}
.dnav li.done::before{background:var(--mint-2);color:var(--forest)}
.dnav li.on{background:var(--forest);border-color:var(--forest);color:var(--on-accent)}
.dnav li.on::before{background:var(--on-accent);color:var(--forest)}
.replay{margin-left:auto;flex:none;font-family:var(--m);font-size:.66rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--forest);background:var(--mint);border:1px solid var(--line);
  border-radius:99px;padding:.26rem .66rem;cursor:pointer}
.replay:hover{background:var(--mint-2)}
.dcap{font-size:.92rem;color:var(--ink-2);margin:0 0 .85rem;min-height:2.9em;max-width:52ch}
.dcap b{color:var(--forest);font-weight:600}
.dstage .app,.dstage .sheet,.dstage .vsplit{position:relative}

/* whatever just changed gets a brief ring, so the eye is told where to look */
@keyframes ring{0%{box-shadow:0 0 0 0 rgb(22 69 37 / .40)}100%{box-shadow:0 0 0 14px rgb(22 69 37 / 0)}}
.flash{animation:ring .9s cubic-bezier(.16,1,.3,1) 1}
@keyframes liftin{0%{opacity:0;transform:translateY(10px) scale(.97)}100%{opacity:1;transform:none}}

/* caret used by the typing demo */
.caret{display:inline-block;width:2px;height:1.05em;background:var(--forest);
  vertical-align:-.16em;margin-left:1px;animation:blink 1s steps(2) infinite}
@keyframes blink{0%,50%{opacity:1}51%,100%{opacity:0}}
.hidden-soft{opacity:0;transform:translateY(8px) scale(.98);
  transition:opacity .45s ease,transform .45s cubic-bezier(.16,1,.3,1)}
.shown{opacity:1;transform:none}

/* version-freeze demo */
.vsplit{display:grid;gap:.8rem;grid-template-columns:1fr}
@media(min-width:620px){.vsplit{grid-template-columns:1fr 1fr}}
.vbox{border:1px solid var(--line);border-radius:var(--r-sm);background:var(--card);
  padding:.85rem .95rem}
.vbox.live{background:var(--paper-2)}
.vlab{font-family:var(--m);font-size:.62rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--muted);margin-bottom:.5rem}
.vnum{font-family:var(--m);font-size:1.5rem;font-weight:500;color:var(--forest);
  letter-spacing:-.02em;display:inline-block;transition:transform .35s cubic-bezier(.16,1,.3,1)}
.vnum.bump{transform:translateY(-4px) scale(1.08)}
.vwhat{font-size:.78rem;color:var(--ink-2);margin-top:.35rem;min-height:2.6em}
.frozen{display:inline-flex;align-items:center;gap:.3rem;font-size:.66rem;
  background:var(--mint);color:var(--forest);border-radius:5px;padding:.1rem .42rem;
  margin-top:.4rem;opacity:0;transition:opacity .4s ease}
.frozen.on{opacity:1}

/* alerts demo */
.alertlist{border:1px solid var(--line);border-radius:var(--r-sm);background:var(--card);
  overflow:hidden}
.al{display:flex;gap:.6rem;align-items:baseline;padding:.52rem .8rem;font-size:.8rem;
  border-bottom:1px solid var(--line-soft);opacity:0;transform:translateX(-10px);
  transition:opacity .4s ease,transform .4s cubic-bezier(.16,1,.3,1)}
.al:last-child{border-bottom:0}
.al.on{opacity:1;transform:none}
.al .who{font-family:var(--m);font-size:.72rem;color:var(--forest);flex:none}
.al.miss .what{color:var(--red)}
.al.trig .what{color:var(--amber)}
.al .what{color:var(--ink-2)}

/* excel grid demo */
.sheet{border:1px solid var(--cold-line);border-radius:var(--r);overflow:hidden;
  background:var(--cold-card);transition:border-color .7s,background .7s,box-shadow .7s}
.sheet.done{border-color:var(--line);background:var(--card);box-shadow:var(--shadow)}
.sheet .appbar{background:var(--cold-head);border-color:var(--cold-line);color:var(--cold-mute);
  transition:background .7s,border-color .7s,color .7s}
.sheet.done .appbar{background:var(--mint);border-color:var(--line);color:var(--muted)}
.sheet .appchip{background:var(--cold-line);color:var(--cold-mute);transition:background .7s,color .7s}
.sheet.done .appchip{background:var(--forest-2);color:#f0f8f1}
.scrollx{overflow-x:auto}
table.grid{border-collapse:collapse;width:100%;min-width:660px;font-size:.78rem}
table.grid th{text-align:left;padding:.48rem .75rem;vertical-align:bottom;font-weight:500;
  white-space:nowrap;background:var(--cold-head);color:var(--cold-mute);font-family:var(--m);
  border-bottom:1px solid var(--cold-line);border-right:1px solid var(--cold-line);
  transition:background .7s,color .7s,border-color .7s,font-weight .3s}
.sheet.done table.grid th{background:var(--paper-2);color:var(--ink-2);border-color:var(--line);
  font-family:var(--f);font-weight:600}
table.grid th:last-child{border-right:0}
table.grid td{padding:.42rem .75rem;white-space:nowrap;font-family:var(--m);font-size:.76rem;
  color:var(--cold-ink);border-bottom:1px solid var(--cold-line);
  border-right:1px solid var(--cold-line);transition:color .7s,border-color .7s}
.sheet.done table.grid td{color:var(--ink-2);border-color:var(--line-soft)}
table.grid td:last-child{border-right:0}
table.grid tr:last-child td{border-bottom:0}
.htype{display:block;font-family:var(--m);font-size:.58rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--forest);margin-top:.2rem;font-weight:500;
  height:0;overflow:hidden;opacity:0;transition:opacity .4s,height .4s}
.sheet.done .htype{opacity:1;height:1.1em}
.cell{position:relative;display:block;min-height:1.5em}
.cv{display:block;transition:opacity .4s,transform .4s}
.cv.a{position:absolute;inset:0;opacity:0;transform:translateY(4px)}
.sheet.done .cv.b{opacity:0;transform:translateY(-4px)}
.sheet.done .cv.a{opacity:1;transform:none}
.req{display:inline-block;font-family:var(--f);font-size:.62rem;font-weight:550;color:var(--red);
  background:var(--red-bg);border:1px solid currentColor;border-radius:5px;padding:.04rem .36rem}
.warnp{display:inline-flex;align-items:center;gap:.3rem;font-family:var(--f);font-size:.7rem;
  color:var(--amber);background:var(--amber-bg);border-radius:5px;padding:.04rem .4rem}
.u{color:var(--muted)}
.messy{color:var(--cold-mute)}

/* search demo */
.srchbar{display:flex;align-items:center;gap:.6rem;padding:.72rem 1rem;
  border-bottom:1px solid var(--line);font-family:var(--m);font-size:.86rem;color:var(--ink)}
.res{display:flex;align-items:center;gap:.7rem;padding:.55rem 1rem;
  border-bottom:1px solid var(--line-soft);font-size:.86rem;opacity:0;transform:translateY(6px);
  transition:opacity .35s ease,transform .35s ease}
.res.on{opacity:1;transform:none}
.res:last-child{border-bottom:0}
.res .ic{width:22px;height:22px;border-radius:6px;flex:none;display:grid;place-items:center;
  background:var(--mint);color:var(--forest);font-size:11px}
.res .nm{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.res .lab{font-family:var(--m);font-size:.68rem;color:var(--muted);flex:none}
.res mark{background:var(--mint-2);color:inherit;border-radius:3px;padding:0 .1em}


/* ---------------- system diagram ---------------- */
.dgwrap{margin:1.6rem 0 0;padding-bottom:.4rem}
.dg{display:block;width:100%;min-width:700px;height:auto}
.dg-edge{fill:none;stroke:var(--line);stroke-width:2;
  stroke-dasharray:var(--len,600);stroke-dashoffset:var(--len,600)}
.dg.on .dg-edge{animation:dgdraw .85s cubic-bezier(.16,1,.3,1) forwards;animation-delay:var(--d,0ms)}
@keyframes dgdraw{to{stroke-dashoffset:0}}
/* a short dash running from each satellite into the centre: the direction of the claim */
.dg-pulse{fill:none;stroke:var(--forest);stroke-width:2.5;stroke-linecap:round;opacity:0;
  stroke-dasharray:9 var(--len,600);stroke-dashoffset:var(--len,600)}
.dg.on .dg-pulse{opacity:.85;animation:dgpulse 3.4s linear infinite;animation-delay:var(--pd,0ms)}
@keyframes dgpulse{from{stroke-dashoffset:var(--len,600)}to{stroke-dashoffset:-9}}
.dg-node{opacity:0;transform-box:fill-box;transform-origin:center}
.dg.on .dg-node{animation:dgin .6s cubic-bezier(.16,1,.3,1) forwards;animation-delay:var(--d,0ms)}
@keyframes dgin{from{opacity:0;transform:translateY(9px) scale(.96)}to{opacity:1;transform:none}}
.dg-node rect{fill:var(--card);stroke:var(--line);stroke-width:1.5}
.dg-core rect{fill:var(--forest);stroke:var(--forest)}
.dg-n{fill:var(--ink);font:600 16px/1 Inter,sans-serif;text-anchor:middle}
.dg-s{fill:var(--muted);font:400 12px/1 "JetBrains Mono",monospace;text-anchor:middle}
.dg-cn{fill:var(--on-accent);font:700 20px/1 Inter,sans-serif;text-anchor:middle;letter-spacing:-.4px}
.dg-cs{fill:rgb(240 248 241 / .78);font:400 12.5px/1 "JetBrains Mono",monospace;text-anchor:middle}
.dg-rel{fill:var(--forest);font:500 12.5px/1 Inter,sans-serif;text-anchor:middle;
  paint-order:stroke;stroke:var(--paper-2);stroke-width:6px;stroke-linejoin:round;
  opacity:0}
.dg.on .dg-rel{animation:dgfade .5s ease forwards;animation-delay:var(--d,0ms)}
@keyframes dgfade{to{opacity:1}}
@media (prefers-reduced-motion:reduce){
  .dg-edge{stroke-dashoffset:0}
  .dg-node,.dg-rel{opacity:1;animation:none}
  .dg-pulse{display:none}
}

/* excel comparison */
.cmp{border-top:1px solid var(--line);margin-top:1.7rem}
.cmprow{display:grid;gap:.3rem 1.6rem;padding:.95rem 0;border-bottom:1px solid var(--line-soft);
  grid-template-columns:1fr}
@media(min-width:820px){.cmprow{grid-template-columns:1fr 1fr}}
.cmprow .was{color:var(--muted);font-size:.94rem}
.cmprow .now{color:var(--ink);font-size:.94rem;font-weight:550}
.cmprow .now::before{content:"";display:inline-block;width:14px;height:1px;
  background:var(--forest);vertical-align:middle;margin-right:.55rem}

/* modules, pricing, faq, footer */
.bento{display:grid;gap:1rem;grid-template-columns:1fr;margin-top:1.9rem}
@media(min-width:760px){.bento{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1060px){.bento{grid-template-columns:repeat(3,1fr)} .b-wide{grid-column:span 2}}
.mcard{border:1px solid var(--line);border-radius:var(--r);background:var(--card);
  padding:1.25rem 1.3rem;display:flex;flex-direction:column;gap:.4rem}
.mcard.tinted{background:var(--mint)}
.mcard p{font-size:.9rem;color:var(--ink-2);margin:0;max-width:none}
.mcard .mfoot{margin-top:auto;padding-top:.9rem;font-family:var(--m);font-size:.7rem;
  letter-spacing:.06em;color:var(--forest);text-decoration:none;transition:gap .2s}
.mcard .mfoot:hover{text-decoration:underline;text-underline-offset:3px}
.mini{border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden;
  background:var(--paper);margin-top:.75rem}
.mini .mh{background:var(--paper-2);border-bottom:1px solid var(--line);padding:.3rem .55rem;
  font-family:var(--m);font-size:.6rem;letter-spacing:.08em;color:var(--muted)}
.eqrow{display:flex;gap:.5rem;align-items:center;padding:.38rem .55rem;
  border-bottom:1px solid var(--line-soft);font-size:.68rem;color:var(--ink-2)}
.eqrow:last-child{border-bottom:0}
.eqthumb{width:24px;height:24px;border-radius:5px;background:var(--mint);flex:none;
  display:grid;place-items:center;color:var(--forest);font-size:11px}
.eqrow .en2{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.eqrow .es{font-family:var(--m);font-size:.6rem;color:var(--muted)}
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;padding:.5rem}
.cal span{aspect-ratio:1;display:grid;place-items:center;font-family:var(--m);font-size:.55rem;
  color:var(--muted);border-radius:4px}
.cal span.bk{background:var(--mint);color:var(--forest);font-weight:600}
.board{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;padding:.5rem}
.bcol{background:var(--paper-2);border-radius:6px;padding:.3rem}
.bcol .bt{font-family:var(--m);font-size:.54rem;letter-spacing:.06em;color:var(--muted);
  margin-bottom:.25rem;text-transform:uppercase}
.bcard{background:var(--card);border:1px solid var(--line);border-radius:5px;
  padding:.26rem .34rem;margin-bottom:3px;font-size:.57rem;line-height:1.3;color:var(--ink-2)}
.bcard .bd{display:flex;gap:.25rem;margin-top:.18rem;align-items:center}
.dot{width:5px;height:5px;border-radius:50%;display:inline-block}
.dot.hi{background:var(--red)} .dot.md{background:var(--amber)} .dot.lo{background:var(--forest)}

.threeup{display:grid;gap:1.6rem;grid-template-columns:1fr}
@media(min-width:820px){.threeup{grid-template-columns:repeat(3,1fr)}}
.twocol{display:grid;gap:clamp(1.6rem,4vw,3rem);grid-template-columns:1fr;align-items:center}
@media(min-width:900px){.twocol{grid-template-columns:1fr 1fr}}

.setup{counter-reset:s;border-top:1px solid var(--line);margin-top:1.7rem;padding-left:0}
.setup li{list-style:none;counter-increment:s;padding:1.05rem 0;
  border-bottom:1px solid var(--line-soft);display:grid;gap:.2rem 1.3rem;
  grid-template-columns:auto 1fr;align-items:baseline}
.setup li::before{content:counter(s,decimal-leading-zero);font-family:var(--m);font-size:.74rem;
  color:var(--forest)}
.setup li b{font-size:1rem}
.setup li span{grid-column:2;color:var(--ink-2);font-size:.92rem}

.tiers{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;margin-top:1.9rem;grid-template-columns:1fr}
@media(min-width:700px){.tiers{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1040px){.tiers{grid-template-columns:repeat(4,1fr)}}
.tier{background:var(--card);padding:1.35rem 1.25rem;display:flex;flex-direction:column}
.tier.feat{background:var(--mint)}
.tier .tn{font-family:var(--m);font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--forest);margin-bottom:.6rem}
.tier .tp{font-size:1.72rem;font-weight:700;letter-spacing:-.03em;line-height:1.1}
.tier .tp small{font-size:.8rem;font-weight:500;color:var(--muted);letter-spacing:0}
.tier .tsub{font-size:.84rem;color:var(--ink-2);margin:.45rem 0 .9rem}
.tier ul{list-style:none;padding:0;margin:0 0 1rem;font-size:.85rem;color:var(--ink-2)}
.tier ul li{padding:.22rem 0 .22rem 1.1rem;position:relative}
.tier ul li::before{content:"";position:absolute;left:0;top:.72em;width:6px;height:6px;
  border-radius:50%;background:var(--forest)}
.tier .ta{margin-top:auto}

.faq{border-top:1px solid var(--line);margin-top:1.7rem}
.faq details{border-bottom:1px solid var(--line-soft)}
.faq summary{padding:1.02rem 0;cursor:pointer;font-weight:600;font-size:1rem;list-style:none;
  display:flex;align-items:center;gap:.8rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";margin-left:auto;color:var(--forest);font-weight:400;
  font-size:1.2rem;line-height:1}
.faq details[open] summary::after{content:"\2212"}
.faq p{padding:0 0 1.1rem;color:var(--ink-2);font-size:.94rem;max-width:66ch}

.quote blockquote{margin:0 0 1rem;font-size:clamp(1.15rem,2.2vw,1.5rem);line-height:1.34;
  letter-spacing:-.022em;font-weight:500;max-width:30ch}
.quote cite{font-style:normal;font-size:.88rem;color:var(--muted);display:block}
.quote cite b{display:block;color:var(--ink);font-weight:600;font-size:.95rem}
.reflogo{text-decoration:none;color:inherit;display:inline-flex;align-items:center;gap:.55rem;border:1px solid var(--line);
  border-radius:var(--r-sm);padding:.55rem .85rem;background:var(--card)}
.reflogo .rmark{width:28px;height:28px;border-radius:7px;background:var(--forest-2);color:#f0f8f1;
  display:grid;place-items:center;font-family:var(--m);font-size:11px;flex:none}
.reflogo .rn{display:block;font-size:.86rem;font-weight:600;line-height:1.25}
.reflogo .rs{display:block;font-family:var(--m);font-size:.64rem;color:var(--muted)}

.risk{display:flex;flex-wrap:wrap;gap:.5rem;margin:1.8rem 0 0;padding:0;list-style:none;
  justify-content:center}
.risk li{font-size:.84rem;color:var(--ink-2);background:var(--card);border:1px solid var(--line);
  border-radius:99px;padding:.4rem .9rem}
.close{text-align:center;padding:clamp(3.6rem,8vw,6.5rem) 0}
.close h2{margin:0 auto 1rem;max-width:17ch}
.close .lead{margin:0 auto 1.9rem}
.close .ctas{justify-content:center}

footer{border-top:1px solid var(--line);background:var(--paper-2);padding:2.8rem 0 3.4rem;
  font-size:.86rem;color:var(--muted)}
.fgrid{display:grid;gap:1.7rem;grid-template-columns:1fr}
@media(min-width:760px){.fgrid{grid-template-columns:1.4fr 1fr 1fr 1fr}}
footer h6{margin:0 0 .6rem;font-family:var(--m);font-size:.66rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--muted);font-weight:500}
footer a{color:var(--ink-2);text-decoration:none;display:block;padding:.18rem 0}
footer a:hover{color:var(--forest)}
.fbot{margin-top:2rem;padding-top:1.2rem;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:.6rem 1.4rem}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition-duration:.01ms !important;animation-duration:.01ms !important;
    animation-iteration-count:1 !important}
}
:focus-visible{outline:2px solid var(--forest);outline-offset:3px;border-radius:4px}
.hero :focus-visible{outline-color:var(--on-accent)}

/* ================= sub-page chrome ================= */
.topbar{background:var(--forest-2);color:var(--on-accent)}
.topbar nav{height:74px;display:flex;align-items:center;gap:2rem}
.phead{background:var(--forest-2);color:var(--on-accent);position:relative;overflow:hidden;
  padding:clamp(2.4rem,6vw,4rem) 0 clamp(2.6rem,6vw,4.2rem)}
.phead::after{content:"";position:absolute;left:-10%;right:-10%;bottom:-62%;height:120%;
  background:radial-gradient(60% 60% at 50% 50%, rgb(61 109 72 / .55), transparent 70%);
  pointer-events:none}
.phead .wrap{position:relative;z-index:2}
.pkicker{font-family:var(--m);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;
  color:rgb(240 248 241 / .66);margin:0 0 .9rem}
.phead h1{font-size:clamp(1.9rem,4.4vw,3.1rem);line-height:1.05;font-weight:700;margin:0 0 1rem;
  max-width:19ch;color:#fff}
.phead .lead{color:rgb(240 248 241 / .84);max-width:52ch;margin-bottom:1.5rem}
.phead .ctas .btn{background:var(--on-accent);color:var(--forest-2);border-color:var(--on-accent)}
.phead .ctas .btn.ghost{background:transparent;color:var(--on-accent);
  border-color:rgb(240 248 241 / .36)}
.crumbs{font-size:.8rem;color:rgb(240 248 241 / .6);margin-bottom:1.2rem}
.crumbs a{color:rgb(240 248 241 / .78);text-decoration:none}
.crumbs a:hover{color:#fff}

.frow{display:grid;gap:clamp(1.5rem,4vw,3rem);grid-template-columns:1fr;align-items:center;
  padding:clamp(2.2rem,5vw,3.6rem) 0;border-bottom:1px solid var(--line-soft)}
.frow:last-of-type{border-bottom:0}
@media(min-width:900px){
  .frow{grid-template-columns:1fr 1fr}
  .frow.flip .ftext{order:2}
}
.frow h3{font-size:clamp(1.15rem,2.2vw,1.5rem);letter-spacing:-.022em;margin:0 0 .6rem}
.frow p{font-size:.96rem;color:var(--ink-2)}
.speclist{list-style:none;padding:0;margin:1rem 0 0;font-size:.92rem;color:var(--ink-2)}
.speclist li{padding:.32rem 0 .32rem 1.15rem;position:relative}
.speclist li::before{content:"";position:absolute;left:0;top:.72em;width:6px;height:6px;
  border-radius:50%;background:var(--forest)}
.speclist li b{color:var(--ink)}

.kv{border-top:1px solid var(--line);margin:1.4rem 0 0}
.kvrow{display:grid;gap:.2rem 1.4rem;padding:.8rem 0;border-bottom:1px solid var(--line-soft);
  grid-template-columns:1fr}
@media(min-width:680px){.kvrow{grid-template-columns:13rem 1fr}}
.kvk{font-family:var(--m);font-size:.74rem;color:var(--forest);padding-top:.1rem}
.kvv{font-size:.92rem;color:var(--ink-2)}

.tabley{width:100%;border-collapse:collapse;font-size:.88rem;background:var(--card)}
.tabley th{text-align:left;font-family:var(--m);font-size:.66rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);padding:.7rem .85rem;background:var(--paper-2);
  border-bottom:1px solid var(--line);white-space:nowrap}
.tabley td{padding:.7rem .85rem;border-bottom:1px solid var(--line-soft);vertical-align:top;
  color:var(--ink-2)}
.tabley tr:last-child td{border-bottom:0}
.tabley td:first-child{color:var(--ink);font-weight:550}
.tabley tr.us{background:var(--mint)}
.tabley .hi{color:var(--forest);font-weight:600}
.tabley .lo{color:var(--red)}
.tblwrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);margin:1.5rem 0}
.tblwrap .tabley{min-width:620px}

.prose{max-width:68ch}
.prose h2{font-size:clamp(1.3rem,2.6vw,1.75rem);margin:2.2rem 0 .7rem}
.prose h3{margin:1.8rem 0 .5rem}
.prose p,.prose li{color:var(--ink-2)}
.prose ul{margin-bottom:1.1rem}
.prose .upd{font-family:var(--m);font-size:.74rem;color:var(--muted);margin-bottom:1.6rem}

.nextgrid{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;grid-template-columns:1fr;margin-top:1.8rem}
@media(min-width:700px){.nextgrid{grid-template-columns:repeat(3,1fr)}}
.nextgrid a{background:var(--card);padding:1.05rem 1.15rem;text-decoration:none;display:block}
.nextgrid a:hover{background:var(--mint)}
.nextgrid .nn{font-weight:650;font-size:.98rem;color:var(--ink);letter-spacing:-.012em}
.nextgrid .nd{font-size:.85rem;color:var(--muted);margin-top:.2rem}

.chglog{border-top:1px solid var(--line)}
.chgitem{padding:1.2rem 0;border-bottom:1px solid var(--line-soft);display:grid;gap:.3rem 1.5rem;
  grid-template-columns:1fr}
@media(min-width:720px){.chgitem{grid-template-columns:9rem 1fr}}
.chgdate{font-family:var(--m);font-size:.76rem;color:var(--forest)}
.chgitem h4{margin:0 0 .3rem;font-size:1rem;font-weight:650}
.chgitem p{margin:0;font-size:.92rem;color:var(--ink-2)}

/* ================= conversion additions (Sep 2026) ================= */
.heroeyebrow{font-family:var(--m);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;
  color:rgb(240 248 241 / .7);margin:0 0 1rem}
.ctanote{font-size:.86rem;color:rgb(240 248 241 / .72);margin:.9rem 0 0;max-width:44ch}
.ctanote.dark{color:var(--muted)}
.close .ctanote{margin:.9rem auto 0;text-align:center}

.pains{display:grid;gap:1rem;grid-template-columns:1fr;margin-top:2rem}
@media(min-width:820px){.pains{grid-template-columns:repeat(3,1fr)}}
.pain{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:1.3rem 1.35rem}
.pain h3{margin:0 0 .5rem}
.pain p{font-size:.93rem;color:var(--ink-2);margin:0}
.pain .fix{display:block;margin-top:.8rem;padding-top:.8rem;border-top:1px solid var(--line-soft);
  font-size:.88rem;color:var(--forest);font-weight:550}

.inlinecta{display:flex;flex-wrap:wrap;align-items:center;gap:.8rem 1.2rem;margin-top:1.6rem}
.inlinecta span{font-size:.88rem;color:var(--muted)}
.textlinks{margin-top:1.2rem;font-size:.88rem;color:var(--muted);text-align:center}
.textlinks a{color:var(--forest)}

/* demo form */
.dform{display:grid;gap:.9rem}
.dform label{display:block;font-size:.82rem;font-weight:600;color:var(--ink);margin-bottom:.3rem}
.dform label small{font-weight:400;color:var(--muted)}
.dform input,.dform select,.dform textarea{width:100%;font:inherit;font-size:.93rem;color:var(--ink);
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-sm);padding:.62rem .75rem}
.dform input:focus,.dform select:focus,.dform textarea:focus{outline:2px solid var(--forest);outline-offset:1px;border-color:var(--forest)}
.dform textarea{min-height:5.2rem;resize:vertical}
.dform .btn{width:100%;text-align:center;cursor:pointer;font-family:inherit}
.formnote{font-size:.8rem;color:var(--muted);margin:.2rem 0 0;text-align:center}
.steps3{list-style:none;counter-reset:s;padding:0;margin:1.2rem 0 0;display:grid;gap:.9rem}
.steps3 li{counter-increment:s;position:relative;padding-left:2.4rem;font-size:.94rem;color:var(--ink-2)}
.steps3 li::before{content:counter(s);position:absolute;left:0;top:.05rem;width:1.7rem;height:1.7rem;
  border-radius:50%;background:var(--mint);color:var(--forest);font-weight:650;font-size:.85rem;
  display:grid;place-items:center}
.steps3 li b{display:block;color:var(--ink)}
@media(min-width:700px){.tiers.two{grid-template-columns:1.15fr 1fr;max-width:860px}}
.tiers.two .tier{padding:1.7rem 1.6rem}
.tiers.two .tp{font-size:2.1rem}

/* billing toggle (annual default, -20%) */
.billtoggle{display:inline-flex;gap:2px;padding:3px;border:1px solid var(--line);border-radius:99px;
  background:var(--card);margin:1.5rem 0 1rem}
.billtoggle button{font:inherit;font-size:.86rem;font-weight:550;border:0;background:transparent;
  color:var(--ink-2);padding:.45rem 1.05rem;border-radius:99px;cursor:pointer;display:inline-flex;
  gap:.45rem;align-items:center;transition:background .2s,color .2s}
.billtoggle button[aria-pressed="true"]{background:var(--forest);color:var(--on-accent)}
.billtoggle .save{font-family:var(--m);font-size:.64rem;padding:.12rem .42rem;border-radius:99px;
  background:var(--mint);color:var(--forest)}
.billtoggle button[aria-pressed="true"] .save{background:rgb(240 248 241 / .2);color:var(--on-accent)}
.billing .pm{display:none}
.billing.is-monthly .pm{display:inline}
.billing.is-monthly .pa{display:none}
.tier .tp .was{font-size:1.05rem;color:var(--muted);font-weight:500;margin-right:.4rem}
.bnote{font-size:.8rem;color:var(--forest);font-weight:600;margin:.3rem 0 0}









/* ================= how it fits together: interactive hub ================= */
/* Light and airy: the section sits on the page's own background, soft colour fields drift
   behind the diagram, and everything eases in with the scroll position (--p) rather than
   crossing a hard edge. */
.hubsec{--p:1;--mx:62%;--my:48%;position:relative;isolation:isolate;overflow:hidden;
  padding:clamp(5rem,10vw,8rem) 0;background:transparent}
.hubsec > .wrap{position:relative}
.hub-aurora{position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:calc(.35 + .65 * var(--p));
  background:radial-gradient(55% 60% at 62% 55%, rgb(207 230 214 / .55), transparent 70%)}
.hubhead{max-width:640px}
.hubsec :focus-visible{outline-color:var(--forest)}
.hubsec .hubhead > *,.hubsec .hub-panel{opacity:0;transform:translateY(18px);
  transition:opacity .9s ease,transform 1.1s cubic-bezier(.16,1,.3,1)}
.hubsec.in .hubhead > *,.hubsec.in .hub-panel{opacity:1;transform:none}
.hubsec.in .hubhead > :nth-child(2){transition-delay:.08s}
.hubsec.in .hubhead > :nth-child(3){transition-delay:.16s}
.hubsec.in .hub-panel{transition-delay:.35s}

.hub{display:grid;gap:clamp(1.4rem,3vw,2.8rem);grid-template-columns:1fr;align-items:center;margin-top:2rem}
@media(min-width:980px){.hub{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}}
.hub-stage{position:relative;padding:0 0 2.8rem;
  opacity:calc(.1 + .9 * var(--p));transform:translateY(calc((1 - var(--p)) * 60px))}
.hubsec.settled .hub-stage{transform:none;opacity:1}
.hub-svg{display:block;width:100%;height:auto;overflow:visible;text-rendering:geometricPrecision}

.hub-line{fill:none;stroke:rgb(22 69 37 / .16);stroke-width:1.6;transition:stroke .35s,stroke-width .35s,opacity .35s}
.hub-edge:not(.sec) .hub-line{stroke-dasharray:1;stroke-dashoffset:1}
.hub-stage.in .hub-edge:not(.sec) .hub-line{animation:draw .9s cubic-bezier(.16,1,.3,1) forwards;animation-delay:var(--d,0ms)}
@keyframes draw{to{stroke-dashoffset:0}}
.hub-edge.sec .hub-line{stroke-dasharray:4 5;stroke:#4d7357;opacity:0;transition:opacity .35s}
.hub-edge.sec.is-hot .hub-line{opacity:1}
.hub-edge.is-hot .hub-line{stroke:#2c5438;stroke-width:2}
.hub-edge.sec.is-hot .hub-line{stroke:#4d7357;stroke-width:1.6}
.hub.has-active .hub-edge:not(.is-hot):not(.sec) .hub-line{opacity:.55}

.hub-dot{fill:#2c5438;opacity:0;transition:opacity .35s}
.hub-stage.in .hub-dot.is-hot{opacity:.85}

.hub-rel .hub-pill{opacity:0;transform:scale(.6) translateY(4px);transform-box:fill-box;transform-origin:center;
  transition:opacity .25s,transform .45s cubic-bezier(.34,1.56,.64,1)}
.hub-rel.is-hot .hub-pill{opacity:1;transform:none}
.hub-pill rect{fill:#1d3325}
.hub-pill text{font:600 11.5px/1 Inter,sans-serif;fill:#f0f8f1;text-anchor:middle;letter-spacing:-.1px}
.hub-rel.sec .hub-pill rect{fill:#fff;stroke:rgb(22 69 37 / .25);stroke-width:1}
.hub-rel.sec .hub-pill text{fill:#164525;font-weight:500}
.hub-rel{pointer-events:none}

.hn{cursor:pointer;outline:none}
.hn-in{opacity:0;transform:scale(.3);transform-box:fill-box;transform-origin:center}
.hub-stage.in .hn-in{animation:pop .8s cubic-bezier(.34,1.56,.64,1) forwards;animation-delay:var(--d,0ms)}
@keyframes pop{to{opacity:1;transform:none}}
.hn-disc,.hn-iconwrap,.hn-name,.hn-sub{transition:opacity .35s}
.hn .hn-disc{fill:#fff;stroke:rgb(22 69 37 / .10);stroke-width:1.2;transform-box:fill-box;transform-origin:center;
  transition:fill .3s,stroke .3s,transform .4s cubic-bezier(.16,1,.3,1),opacity .3s}
.hn .hn-icon{fill:none;stroke:#2c5438;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;transition:stroke .35s}
.hn-iconwrap{transform-box:fill-box;transform-origin:center}
.hn-name{font:600 13.5px/1 Inter,sans-serif;fill:#1c1c19;text-anchor:middle;letter-spacing:-.15px;transition:fill .35s,opacity .35s}
.hn-ring{fill:none;stroke:#4d7357;stroke-width:1.2;opacity:0;transition:opacity .3s}
.hn.core .hn-disc{fill:url(#hubcore);stroke:none}
.hn.core .hn-icon{stroke:#e6f0e8}
.hn-name.core{font-size:18px;font-weight:700;fill:#fff;letter-spacing:-.3px}
.hn-sub{font:500 10.5px/1 "JetBrains Mono",monospace;fill:#bfe6ca;text-anchor:middle}

.hn.is-active .hn-disc{fill:#164525;stroke:#164525;transform:scale(1.06)}
.hn.is-active .hn-icon{stroke:#e6f0e8}
.hn.is-active .hn-name{fill:#fff}
.hn.core.is-active .hn-disc{fill:url(#hubcore);transform:scale(1.06)}
.hn.is-active .hn-ring{opacity:.5}
.hn.is-linked .hn-disc{fill:#f3f8f4;stroke:#4d7357}
.hn.core.is-linked .hn-disc{fill:url(#hubcore);stroke:none}
.hub.has-active .hn:not(.is-active):not(.is-linked) :is(.hn-iconwrap,.hn-name){opacity:.5}
.hn:focus-visible .hn-ring{opacity:1;stroke:#164525;stroke-width:2}

.hub-steps{position:absolute;left:0;right:0;bottom:1rem;display:flex;justify-content:center;gap:.45rem}
.hub-step{width:8px;height:8px;border-radius:99px;border:0;padding:0;cursor:pointer;background:rgb(22 69 37 / .18);
  transition:width .35s cubic-bezier(.16,1,.3,1),background .3s}
.hub-step.on{width:26px;background:#164525}

.hub-panel{display:grid}
.hp{grid-area:1/1;visibility:hidden;pointer-events:none}
.hp.on{visibility:visible;pointer-events:auto}
.hp > *{opacity:0;transform:translateY(12px)}
.hp.on > *{animation:hpin .6s cubic-bezier(.16,1,.3,1) forwards}
.hp.on > :nth-child(2){animation-delay:.05s}
.hp.on > :nth-child(3){animation-delay:.1s}
.hp.on > :nth-child(4){animation-delay:.16s}
.hp.on > :nth-child(5){animation-delay:.22s}
.hp.on > :nth-child(6){animation-delay:.27s}
.hp.on > :nth-child(7){animation-delay:.32s}
@keyframes hpin{to{opacity:1;transform:none}}
.hp-kicker{font-family:var(--m);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--forest);margin:0 0 .5rem}
.hp h3{font-size:clamp(1.6rem,3vw,2.2rem);letter-spacing:-.03em;margin:0 0 .6rem}
.hp-desc{font-size:.97rem;color:var(--ink-2);margin:0 0 1.2rem}
.hp-prev .mini{margin-top:0;background:rgb(255 255 255 / .85);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-color:rgb(22 69 37 / .08);box-shadow:0 24px 50px -28px rgb(22 69 37 / .35);transform:rotate(-.6deg)}
.hpentry{font-size:.84rem;color:var(--ink-2);padding:.6rem .7rem;margin:0;line-height:1.9}
.hp-lab{font-family:var(--m);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:1.4rem 0 .5rem}
.hp-chips{display:flex;flex-wrap:wrap;gap:.4rem}
.hub-chip{font:inherit;font-size:.8rem;color:var(--ink-2);background:rgb(255 255 255 / .7);border:1px solid rgb(22 69 37 / .12);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  border-radius:99px;padding:.32rem .75rem;cursor:pointer;transition:border-color .2s,background .2s,transform .2s}
.hub-chip b{color:var(--forest);font-weight:600}
.hub-chip:hover{border-color:var(--forest-4);background:var(--mint);transform:translateY(-1px)}
.hp-open{margin-top:1.4rem}
.hub-hint-touch{display:none}
@media(hover:none){.hub-hint-touch{display:inline}.hub-hint-hover{display:none}}
@media(prefers-reduced-motion:reduce){
  .hub-edge:not(.sec) .hub-line{stroke-dasharray:none;stroke-dashoffset:0}
  .hn-in,.hp > *,.hubsec .hubhead > *,.hubsec .hub-panel,.hub-stage{opacity:1;transform:none;transition:none}
  .hub-dot{display:none}
}
/* ================= end interactive hub ================= */

.dnav li[role="button"]{cursor:pointer;transition:border-color .2s,background .2s,color .2s}
.dnav li[role="button"]:hover:not(.on){border-color:var(--forest-4);color:var(--forest)}
/* centred pricing */
.billing{text-align:center}
.billing .tiers{margin-left:auto;margin-right:auto;text-align:left}
#pricing .wrap > h2,#pricing .wrap > .lead{margin-left:auto;margin-right:auto;text-align:center}
#pricing .textlinks{text-align:center;max-width:62ch;margin-left:auto;margin-right:auto}
/* keep-reading links: name above description, roomier */
.nextgrid a{padding:1.35rem 1.5rem}
.nextgrid .nn,.nextgrid .nd{display:block}
.nextgrid .nd{margin-top:.3rem}
/* footer bottom row: one baseline */
.fbot{align-items:baseline;line-height:1.4}
.fbot > *{font-size:.84rem}
footer .fbot a{display:inline;padding:0}

/* ================= sticky header (built by slim.js) ================= */
html{scroll-padding-top:72px}
.stickybar{position:fixed;top:0;left:0;right:0;z-index:60;color:var(--on-accent);
  background:rgb(29 51 37 / .84);-webkit-backdrop-filter:saturate(1.5) blur(14px);backdrop-filter:saturate(1.5) blur(14px);
  border-bottom:1px solid rgb(240 248 241 / .08);box-shadow:0 12px 32px -22px rgb(0 0 0 / .55);
  transform:translateY(-105%);transition:transform .45s cubic-bezier(.16,1,.3,1),background .35s,border-color .35s}
.stickybar.show{transform:none}
.stickybar.over-dark{background:rgb(21 38 27 / .42);border-bottom-color:rgb(240 248 241 / .05);box-shadow:none}
.stickybar nav{height:56px;display:flex;align-items:center;gap:2rem}
.stickybar .logo{height:17px}
.stickybar .sp{margin-left:auto}
.stickybar .navlinks{font-size:.88rem}
.stickybar .navlinks a{position:relative}
.stickybar .navlinks a.is-active{color:#fff}
.stickybar .navlinks a.is-active::after{content:"";position:absolute;left:50%;bottom:-8px;width:4px;height:4px;
  margin-left:-2px;border-radius:50%;background:#9fd6ae}
.stickybar .navcta{padding:.42rem .95rem;font-size:.84rem}
.navlinks a[aria-current="page"]{color:#fff}
@media(prefers-reduced-motion:reduce){.stickybar{transition:none}}

/* Overscroll: no rubber-band gap above the dark header. Where the browser still bounces,
   the canvas behind the page is dark at the top of the viewport and light at the bottom,
   so it matches the header above and the footer below. */
html{overscroll-behavior-y:none;
  background:linear-gradient(180deg,var(--forest-2) 0 50%,var(--paper-2) 50% 100%) fixed}

/* ================= migration: "we move you in" ================= */
.mig{padding:clamp(4.5rem,9vw,7rem) 0}
.mig-top{display:grid;gap:clamp(2rem,4vw,3.5rem);grid-template-columns:1fr;align-items:center}
@media(min-width:960px){.mig-top{grid-template-columns:1.05fr 1fr}}
.mig h2{max-width:22ch}
.mig h2 .soft{color:var(--forest-4);display:block}
.mig .lead{margin-top:1rem}
.mig-lab{font-family:var(--m);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;margin:0 0 .8rem}

.mig-split{display:grid;grid-template-columns:1fr;gap:0;border-radius:20px;overflow:hidden;
  box-shadow:0 30px 60px -36px rgb(22 69 37 / .45),0 0 0 1px rgb(22 69 37 / .08)}
@media(min-width:560px){.mig-split{grid-template-columns:.8fr 1.2fr}}
.mig-you{background:var(--card);padding:1.5rem 1.4rem}
.mig-you .mig-lab{color:var(--muted)}
.mig-you ul{list-style:none;margin:0;padding:0;display:grid;gap:.7rem}
.mig-you li{font-size:.92rem;color:var(--ink-2);padding-left:1.1rem;position:relative;line-height:1.4}
.mig-you li::before{content:"";position:absolute;left:0;top:.5em;width:6px;height:6px;border-radius:50%;background:var(--line)}
.mig-us{background:linear-gradient(160deg,#2c5438 0%,#164525 100%);color:var(--on-accent);padding:1.5rem 1.5rem 1.6rem}
.mig-us .mig-lab{color:#9fd6ae}
.mig-big{font-size:clamp(1.5rem,2.6vw,1.9rem);font-weight:700;letter-spacing:-.03em;line-height:1.1;margin:0 0 1rem;color:#fff}
.mig-us ul{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.mig-us li{display:flex;gap:.55rem;align-items:flex-start;font-size:.9rem;line-height:1.4;color:rgb(240 248 241 / .9)}
.mig svg:not(.icon-mark){width:16px;height:16px;flex:none;margin-top:.12em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.mig-us svg{color:#9fd6ae}

.mig-steps-lab{color:var(--forest);margin-top:clamp(3rem,6vw,4.5rem)}
.mig-steps{list-style:none;margin:0;padding:0;display:grid;gap:1rem;grid-template-columns:1fr;position:relative}
@media(min-width:720px){.mig-steps{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1060px){.mig-steps{grid-template-columns:repeat(4,1fr)}
  .mig-steps::before{content:"";position:absolute;top:2.05rem;left:2.4rem;right:2.4rem;height:2px;
    background:linear-gradient(90deg,var(--forest-4),var(--mint-2));transform-origin:left;transform:scaleX(0);
    transition:transform 1.4s cubic-bezier(.16,1,.3,1) .2s;z-index:0}
  .mig.in .mig-steps::before{transform:scaleX(1)}}
.mig-step{position:relative;z-index:1;background:var(--card);border:1px solid var(--line);border-radius:16px;
  padding:1.3rem 1.25rem 1.35rem;display:flex;flex-direction:column}
.mig-num{width:2rem;height:2rem;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:.9rem;
  background:var(--forest);color:var(--on-accent);box-shadow:0 0 0 5px var(--card);margin-bottom:.9rem}
.mig-tag{position:absolute;top:1.55rem;right:1.2rem;font-family:var(--m);font-size:.62rem;letter-spacing:.12em;
  text-transform:uppercase;padding:.22rem .55rem;border-radius:99px}
.mig-tag.you{background:var(--card);color:var(--forest);border:1px solid var(--forest-4)}
.mig-tag.us{background:var(--forest);color:var(--on-accent)}
.mig-tag.both{background:var(--mint);color:var(--forest)}
.mig-step h3{font-size:1.05rem;margin:0 0 .45rem}
.mig-step p{font-size:.9rem;color:var(--ink-2);margin:0;line-height:1.5}
.mig-step .mig-sub{margin-top:auto;padding-top:.8rem;font-size:.84rem;color:var(--forest);font-weight:550}

.mig-strip{list-style:none;margin:2rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.6rem 1.6rem}
.mig-strip li{display:flex;gap:.45rem;align-items:center;font-size:.88rem;color:var(--ink-2)}
.mig-strip svg{color:var(--forest);margin-top:0}
.mig-cta{display:flex;flex-wrap:wrap;align-items:center;gap:.8rem 1.2rem;margin-top:2rem}
.mig-cta span{font-size:.88rem;color:var(--muted)}

.mig .mig-split,.mig .mig-step{opacity:0;transform:translateY(16px);
  transition:opacity .7s ease,transform .9s cubic-bezier(.16,1,.3,1)}
.mig.in .mig-split{opacity:1;transform:none}
.mig.in .mig-step{opacity:1;transform:none;transition-delay:calc(.25s + var(--i) * .12s)}
@media(prefers-reduced-motion:reduce){
  .mig .mig-split,.mig .mig-step{opacity:1;transform:none;transition:none}
  .mig-steps::before{transform:none !important;transition:none !important}
}
/* ================= end migration ================= */

/* ================= spreadsheet: the real cost ================= */
.xl h2{max-width:16ch}
.xl h2 .soft{color:var(--red);display:block}
.xl-eyebrow{display:flex;align-items:center;gap:.5rem;color:var(--red)}
.xl svg:not(.icon-mark){width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.xl-eyebrow svg{width:15px;height:15px}

.xl-table{margin-top:clamp(2.6rem,5vw,3.6rem);border-radius:18px;overflow:hidden;background:var(--card);
  box-shadow:0 26px 60px -40px rgb(22 69 37 / .45),0 0 0 1px var(--line)}
.xl-head,.xl-row{display:grid;grid-template-columns:1fr}
@media(min-width:760px){.xl-head,.xl-row{grid-template-columns:1fr 1fr}}
.xl-head > div{font-family:var(--m);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;padding:.95rem 1.4rem}
.xl-head .xl-bad{background:var(--red-bg);color:var(--red)}
.xl-head .xl-good{background:var(--forest);color:var(--on-accent)}
@media(max-width:759px){.xl-head{display:none}}
.xl-row{border-top:1px solid var(--line-soft)}
.xl-row > div{display:flex;gap:.7rem;align-items:flex-start;padding:1.05rem 1.4rem;font-size:.95rem;line-height:1.5}
.xl-row .xl-bad{color:var(--ink-2);background:linear-gradient(90deg,rgb(248 233 230 / .55),transparent 70%)}
.xl-row .xl-bad svg{color:var(--red);margin-top:.2em;padding:2px;box-sizing:content-box;border-radius:50%;background:var(--red-bg)}
.xl-row .xl-good{color:var(--ink);font-weight:550}
.xl-row .xl-good svg{color:var(--forest);margin-top:.2em;padding:2px;box-sizing:content-box;border-radius:50%;background:var(--mint)}
@media(min-width:760px){.xl-row .xl-good{border-left:1px solid var(--line-soft)}}
@media(max-width:759px){.xl-row .xl-good{padding-top:0}}
.xl-row{opacity:0;transform:translateY(10px);transition:opacity .6s ease,transform .7s cubic-bezier(.16,1,.3,1);
  transition-delay:calc(var(--i) * .08s)}
.xl-table.in .xl-row{opacity:1;transform:none}
.xl-foot{font-size:.86rem;color:var(--muted);margin:1rem 0 0}

.xl-wait{margin-top:clamp(2.2rem,4vw,3rem);display:grid;gap:1.4rem 2.5rem;align-items:center;grid-template-columns:1fr;
  padding:clamp(1.5rem,3vw,2.2rem) clamp(1.4rem,3vw,2.4rem);border-radius:18px;
  background:var(--amber-bg);border:1px solid rgb(141 86 0 / .18)}
@media(min-width:900px){.xl-wait{grid-template-columns:1.4fr 1fr}}
.xl-wait h3{font-size:clamp(1.25rem,2.2vw,1.6rem);letter-spacing:-.025em;margin:0 0 .5rem}
.xl-wait p{margin:0;color:var(--ink-2);font-size:.96rem}
.xl-wait-cta{display:flex;flex-direction:column;align-items:flex-start;gap:.6rem}
.xl-wait-cta span{font-size:.85rem;color:var(--muted)}
@media(prefers-reduced-motion:reduce){.xl-row{opacity:1;transform:none;transition:none}}
/* ================= end spreadsheet ================= */

/* ================= navigation: scroll links + dropdowns ================= */
.navlinks{align-items:center}
@media(min-width:1020px) and (max-width:1180px){.navlinks{gap:1.25rem}}
.navlinks a.is-active,.navdd.is-active > .navdd-btn{color:#fff}
.navdd{position:relative}
.navdd::after{content:"";position:absolute;left:-.5rem;right:-.5rem;top:100%;height:18px}
.navdd-btn{font:inherit;font-size:inherit;color:rgb(240 248 241 / .82);background:none;border:0;padding:0;cursor:pointer;
  display:inline-flex;align-items:center;gap:.32rem;transition:color .2s}
.navdd-btn svg{width:10px;height:10px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
  transition:transform .25s cubic-bezier(.16,1,.3,1)}
.navdd:hover > .navdd-btn,.navdd.open > .navdd-btn{color:#fff}
.navdd:hover > .navdd-btn svg,.navdd.open > .navdd-btn svg{transform:rotate(180deg)}
.navdd-menu{position:absolute;top:calc(100% + 16px);left:-1.1rem;z-index:80;min-width:290px;padding:.45rem;
  background:#fff;border-radius:14px;box-shadow:0 24px 60px -20px rgb(15 35 22 / .45),0 0 0 1px rgb(22 69 37 / .08);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .18s ease,transform .25s cubic-bezier(.16,1,.3,1),visibility 0s linear .25s}
.navdd-menu.two{display:grid;grid-template-columns:1fr 1fr;min-width:520px}
.navdd:hover > .navdd-menu,.navdd.open > .navdd-menu{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.navlinks .navdd-menu a{display:block;padding:.6rem .75rem;border-radius:9px;color:var(--ink);text-decoration:none;transition:background .15s}
.navlinks .navdd-menu a:hover,.navlinks .navdd-menu a:focus-visible,.navlinks .navdd-menu a.is-active{background:var(--mint);color:var(--ink)}
.navdd-menu b{display:block;font-size:.9rem;font-weight:600;letter-spacing:-.01em}
.navdd-menu span{display:block;font-size:.78rem;color:var(--muted);margin-top:.1rem;line-height:1.35}
.navlinks .navlang{font-family:var(--m);font-size:.72rem;letter-spacing:.08em;padding:.2rem .45rem;border:1px solid rgb(240 248 241 / .3);border-radius:6px}
.stickybar .navdd-menu{top:calc(100% + 12px)}
/* ================= end navigation ================= */

/* ================= module pages: problem -> solution ================= */
.modprob svg:not(.icon-mark),.modsol svg:not(.icon-mark){width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.modprob-eyebrow{display:flex;align-items:center;gap:.5rem;color:var(--red)}
.modprob h2{max-width:22ch}
.modprob .lead{margin-top:1rem}
.symptoms{display:grid;gap:1rem;grid-template-columns:1fr;margin-top:2rem}
@media(min-width:820px){.symptoms{grid-template-columns:repeat(3,1fr)}}
.symptom{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:1.3rem 1.3rem 1.35rem;
  background-image:linear-gradient(180deg,rgb(248 233 230 / .55),transparent 55%)}
.symptom .sx{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--red-bg);color:var(--red);margin-bottom:.8rem}
.symptom h3{margin:0 0 .4rem;font-size:1.02rem}
.symptom p{margin:0;font-size:.92rem;color:var(--ink-2)}
.modsol h2{max-width:22ch;margin-bottom:.6rem}
.solves{display:inline-flex;align-items:center;gap:.4rem;font-size:.78rem;font-weight:600;color:var(--forest);
  background:var(--mint);border-radius:99px;padding:.25rem .7rem .25rem .5rem;margin:0 0 .8rem}
.solves svg{width:14px;height:14px}
.formok,.formerr{margin:.8rem 0 0;font-size:.78rem;border-radius:6px;padding:.45rem .6rem}
.formok{color:var(--forest);background:var(--mint)}
.formerr{color:var(--red);background:var(--red-bg)}
.outcome{margin-top:clamp(2rem,4vw,3rem);display:grid;gap:1.4rem 2.5rem;align-items:center;grid-template-columns:1fr;
  padding:clamp(1.5rem,3vw,2.2rem) clamp(1.4rem,3vw,2.4rem);border-radius:18px;background:var(--card);
  box-shadow:0 26px 60px -40px rgb(22 69 37 / .45),0 0 0 1px var(--line)}
@media(min-width:900px){.outcome{grid-template-columns:1.5fr 1fr}}
.outcome-lab{font-family:var(--m);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--forest);margin:0 0 .8rem}
.outcome ul{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.outcome li{display:flex;gap:.6rem;align-items:flex-start;font-size:.98rem;font-weight:550;color:var(--ink)}
.outcome li svg{color:var(--forest);margin-top:.2em;padding:2px;box-sizing:content-box;border-radius:50%;background:var(--mint)}
.outcome-cta{display:flex;flex-direction:column;align-items:flex-start;gap:.55rem}
.outcome-cta span{font-size:.85rem;color:var(--muted)}
/* ================= end module pages ================= */
.topbar nav .sp{margin-left:auto}
.formok,.formerr{max-width:none}

/* ================= keep exploring (product pages) ================= */
.nx .lead{margin-top:.8rem}
.nx-grid{display:grid;gap:1rem;grid-template-columns:1fr;margin-top:2rem}
@media(min-width:760px){.nx-grid{grid-template-columns:1fr 1fr}}
@media(min-width:1060px){.nx-grid{grid-template-columns:1fr 1fr 1.1fr}}
.nx svg{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.nx-card{position:relative;display:flex;flex-direction:column;gap:.75rem;padding:1.5rem 1.5rem 1.4rem;border-radius:18px;
  background:var(--card);border:1px solid var(--line);text-decoration:none;color:var(--ink);overflow:hidden;
  transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s,border-color .35s}
.nx-card::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:linear-gradient(90deg,var(--forest-4),var(--mint-2));
  transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.16,1,.3,1)}
a.nx-card:hover{transform:translateY(-4px);border-color:var(--mint-2);box-shadow:0 26px 50px -30px rgb(22 69 37 / .45)}
a.nx-card:hover::before{transform:scaleX(1)}
.nx-top{display:flex;align-items:center;gap:.65rem}
.nx-icon{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;background:var(--mint);color:var(--forest)}
.nx-icon svg{width:20px;height:20px}
.nx-name{font-weight:650;font-size:1.02rem;letter-spacing:-.015em}
.nx-rel{display:inline-flex;align-items:center;gap:.4rem;align-self:flex-start;font-size:.76rem;font-weight:550;color:var(--forest);
  background:var(--mint);border-radius:99px;padding:.25rem .65rem .25rem .5rem}
.nx-rel svg{width:13px;height:13px}
.nx-hook{font-size:clamp(1.15rem,1.9vw,1.35rem);font-weight:650;line-height:1.25;letter-spacing:-.022em;text-wrap:balance}
.nx-go{margin-top:auto;padding-top:.4rem;display:inline-flex;align-items:center;gap:.4rem;font-size:.88rem;font-weight:600;color:var(--forest)}
.nx-arr{transition:transform .3s cubic-bezier(.16,1,.3,1)}
a.nx-card:hover .nx-arr,.nx-diagram:hover .nx-arr{transform:translateX(4px)}
.nx-demo{background:linear-gradient(160deg,#2c5438 0%,#164525 100%);border-color:transparent;color:var(--on-accent)}
.nx-demo .nx-icon{background:rgb(240 248 241 / .12);color:#bfe6ca}
.nx-demo .nx-hook{color:#fff}
.nx-sub{font-size:.88rem;color:rgb(240 248 241 / .75);line-height:1.5}
.nx-btn{align-self:flex-start;margin-top:auto;background:var(--on-accent);color:var(--forest-2);border-color:var(--on-accent)}
.nx-diagram{display:inline-flex;align-items:center;gap:.35rem;font-size:.84rem;color:#bfe6ca;text-decoration:none}
.nx-diagram:hover{color:#fff}
@media(prefers-reduced-motion:reduce){.nx-card,.nx-card::before,.nx-arr{transition:none}}
/* ================= end keep exploring ================= */

/* ================= live module demos (demos.js) ================= */
.trysec{padding:clamp(3.5rem,7vw,5.5rem) 0}
.trysec .lead{margin-top:.8rem}
.try-note{font-size:.84rem;color:var(--muted);margin:1rem 0 0;text-align:center;max-width:none}
.demo-app{margin-top:2rem}
.da{--da-bg:#f7f3ec;--da-line:#e6dfd2;position:relative;border-radius:18px;overflow:hidden;background:var(--forest-2);
  box-shadow:0 40px 80px -40px rgb(15 35 22 / .55),0 0 0 1px rgb(22 69 37 / .15);font-size:15px;color:var(--ink);text-align:left}
.da *{box-sizing:border-box}
.da svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.da-ic{display:inline-grid;place-items:center;width:16px;height:16px;flex:none;vertical-align:-3px}
.da-top{display:flex;align-items:center;gap:.6rem;padding:.7rem 1rem;color:var(--on-accent)}
.da-logo{width:20px;height:20px;display:inline-block}
.da-logo svg{fill:currentColor;stroke:none}
.da-name{font-family:var(--m);font-weight:600;letter-spacing:.08em;font-size:.82rem}
.da-crumbs{font-size:.8rem;color:rgb(240 248 241 / .6);margin-left:.6rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.da-live{margin-left:auto;display:inline-flex;align-items:center;gap:.4rem;font-size:.72rem;font-family:var(--m);letter-spacing:.04em;
  color:#bfe6ca;background:rgb(240 248 241 / .08);border:1px solid rgb(240 248 241 / .14);border-radius:99px;padding:.22rem .6rem;white-space:nowrap}
.da-live i{width:7px;height:7px;border-radius:50%;background:#7fd494;box-shadow:0 0 0 3px rgb(127 212 148 / .25);animation:daPulse 1.8s ease-in-out infinite}
@keyframes daPulse{50%{box-shadow:0 0 0 6px rgb(127 212 148 / 0)}}
.da-body{display:grid;grid-template-columns:1fr;min-height:540px}
@media(min-width:900px){.da-body{grid-template-columns:190px 1fr}}
.da-rail{display:none;padding:.4rem .6rem 1rem}
@media(min-width:900px){.da-rail{display:block}}
.da-rail-lab{font-family:var(--m);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:rgb(240 248 241 / .55);margin:.5rem .55rem .6rem}
.da-rail-it{display:flex;align-items:center;gap:.6rem;padding:.5rem .6rem;border-radius:10px;color:rgb(240 248 241 / .82);text-decoration:none;font-size:.88rem;margin-bottom:2px}
.da-rail-it .da-ic{width:17px;height:17px}
.da-rail-it:hover{background:rgb(240 248 241 / .08);color:#fff}
.da-rail-it.on{background:var(--da-bg);color:var(--ink);font-weight:600}
.da-main{background:var(--da-bg);border-radius:14px 14px 0 0;margin:0 .5rem;position:relative;min-width:0}
@media(min-width:900px){.da-main{border-radius:14px 0 0 0;margin:0}}
.da-page{padding:1.3rem clamp(1rem,2.5vw,1.8rem) 1.8rem;max-width:880px}
.da-backlink{display:inline-flex;align-items:center;gap:.3rem;font-size:.84rem;color:var(--muted);margin:0 0 .6rem}
.da-h{font-size:clamp(1.25rem,2.2vw,1.55rem);letter-spacing:-.025em;margin:0 0 .5rem;display:flex;align-items:center;gap:.4rem}
.da-headrow{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;justify-content:space-between;margin-bottom:.2rem}
.da-headrow .da-h{margin:0}
.da-muted{color:var(--muted);font-size:.86rem;max-width:none}
.da-sub-h{font-size:.8rem;font-weight:650;letter-spacing:.02em;margin:1.2rem 0 .6rem;display:flex;align-items:center;gap:.35rem}
.da-sub-h em{font-style:normal;font-weight:500;color:var(--muted);font-size:.76rem;margin-left:.3rem}
.da-meta{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;font-size:.86rem;color:var(--ink-2);margin:0 0 .8rem}
.da-field{display:block;margin:0 0 .85rem}
.da-lab{display:block;font-size:.82rem;font-weight:600;margin:0 0 .35rem;color:var(--ink)}
.da-lab b{color:var(--red)}
.da-in{width:100%;font:inherit;font-size:.9rem;color:var(--ink);background:#efeae0;border:1px solid transparent;border-radius:10px;padding:.55rem .7rem;transition:border-color .2s,background .2s}
.da-in:focus{outline:none;border-color:var(--forest-4);background:#fff}
.da-in.sm{padding:.38rem .55rem;font-size:.82rem}
.da-in.big{font-size:1.1rem;font-weight:600;padding:.7rem .8rem}
.da-in.bad{border-color:var(--red);background:var(--red-bg)}
textarea.da-in{resize:vertical;min-height:2.6rem}
.da-err{display:block;font-size:.76rem;color:var(--red);margin-top:.25rem}
.da-2col{display:grid;gap:.4rem 1.2rem;grid-template-columns:1fr}
@media(min-width:640px){.da-2col{grid-template-columns:1fr 1fr}}
.da-2col.top{align-items:start}
.da-date{display:inline-flex;align-items:center;gap:.45rem;border:1px solid var(--da-line);background:#fff;border-radius:10px;padding:.42rem .65rem;font-size:.86rem}
.da-chips{display:flex;flex-wrap:wrap;gap:.35rem}
.da-chip{display:inline-flex;align-items:center;gap:.3rem;font-size:.8rem;background:var(--mint);color:var(--forest);border-radius:99px;padding:.22rem .6rem;border:1px solid transparent}
.da-chip.linked{background:#fff;border-color:var(--mint-2)}
.da-chip-x{border:0;background:none;padding:0;width:14px;height:14px;display:inline-grid;place-items:center;color:inherit;cursor:pointer;opacity:.6}
.da-chip-x:hover{opacity:1}
.da-chip-x .da-ic{width:12px;height:12px}
.da-pill{display:inline-block;font-size:.72rem;font-weight:600;border-radius:99px;padding:.15rem .55rem}
.da-pill.green{background:var(--mint);color:var(--forest)}
.da-pill.grey{background:#ebe6dc;color:var(--ink-2)}
.da-v{display:inline-block;font-family:var(--m);font-size:.7rem;background:var(--mint);color:var(--forest);border-radius:99px;padding:.12rem .5rem}
.da-btn{display:inline-flex;align-items:center;gap:.4rem;font:inherit;font-size:.86rem;font-weight:600;border-radius:99px;padding:.52rem 1.05rem;
  border:1px solid var(--forest);background:var(--forest);color:var(--on-accent);cursor:pointer;transition:filter .2s,transform .15s;white-space:nowrap}
.da-btn:hover{filter:brightness(1.12)}
.da-btn:active{transform:translateY(1px)}
.da-btn.ghost{background:#fff;color:var(--ink);border-color:var(--da-line)}
.da-btn.soft{background:var(--mint);color:var(--forest);border-color:var(--mint)}
.da-btn.sm{font-size:.78rem;padding:.36rem .8rem}
.da-btn.full{width:100%;justify-content:center;margin-top:.8rem}
.da-actions{display:flex;justify-content:flex-end;gap:.5rem;margin-top:1.1rem;flex-wrap:wrap}
.da-actions.left{justify-content:flex-start;margin:0 0 1rem}
.da-linkish{border:0;background:none;padding:0;font:inherit;font-size:.8rem;color:var(--forest);cursor:pointer;display:inline-flex;align-items:center;gap:.25rem;text-decoration:underline;text-underline-offset:2px}
.da-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin:.8rem 0}
.da-toolbar .da-search{flex:1;min-width:180px;max-width:320px}
.da-inline{display:inline-flex;align-items:center;gap:.4rem;font-size:.82rem;color:var(--ink-2)}
.da-inline select{width:auto}
.da-seg{display:inline-flex;padding:3px;border-radius:99px;background:#ebe6dc}
.da-seg button{font:inherit;font-size:.8rem;font-weight:600;border:0;background:none;border-radius:99px;padding:.32rem .85rem;cursor:pointer;color:var(--ink-2)}
.da-seg button.on{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgb(0 0 0 / .1)}
.da-hint{font-size:.82rem;color:var(--muted);margin:.6rem 0 0;max-width:none}
.da-hint kbd{font-family:var(--m);font-size:.78rem;background:#fff;border:1px solid var(--da-line);border-bottom-width:2px;border-radius:5px;padding:0 .3rem}
.da-av{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--mint-2);color:var(--forest);font-size:.64rem;font-weight:700;flex:none;vertical-align:middle}
.da-avs{display:inline-flex}
.da-avs .da-av{border:2px solid var(--da-bg);margin-left:-6px}
.da-avs .da-av:first-child{margin-left:0}
.da-toast{position:absolute;left:50%;bottom:1rem;transform:translate(-50%,20px);opacity:0;z-index:30;display:flex;align-items:center;gap:.5rem;
  background:var(--forest-2);color:var(--on-accent);font-size:.84rem;border-radius:12px;padding:.6rem .9rem;box-shadow:0 14px 30px -12px rgb(0 0 0 / .5);
  transition:opacity .25s,transform .35s cubic-bezier(.16,1,.3,1);max-width:calc(100% - 2rem)}
.da-toast.on{opacity:1;transform:translate(-50%,0)}
.da-toast .da-ic{color:#9fd6ae}
.da-flash{animation:daFlash 1.4s ease}
@keyframes daFlash{0%{box-shadow:0 0 0 0 rgb(77 115 87 / .6)}40%{box-shadow:0 0 0 6px rgb(77 115 87 / .25)}100%{box-shadow:0 0 0 0 rgb(77 115 87 / 0)}}
.da-new{animation:daNew 2.2s ease}
@keyframes daNew{0%,30%{background:var(--mint)}}

/* overlays */
.da-ov{position:absolute;inset:0;z-index:20;background:rgb(20 30 24 / .45);display:flex;align-items:flex-start;justify-content:center;padding:3.2rem 1rem 1rem;opacity:0;transition:opacity .2s}
.da-ov.on{opacity:1}
.da-ov-sheet{justify-content:flex-end;padding:0}
.da-modal{background:#fff;border-radius:16px;width:min(680px,100%);max-height:calc(100% - 4rem);overflow:auto;padding:1.2rem 1.3rem 1.3rem;
  transform:translateY(10px) scale(.98);transition:transform .3s cubic-bezier(.16,1,.3,1);box-shadow:0 30px 60px -20px rgb(0 0 0 / .45)}
.da-modal.wide{width:min(780px,100%)}
.da-sheet{background:#fff;height:100%;width:min(430px,100%);overflow:auto;padding:1.2rem 1.3rem;transform:translateX(30px);transition:transform .35s cubic-bezier(.16,1,.3,1)}
.da-ov.on .da-modal,.da-ov.on .da-sheet{transform:none}
.da-ov-head{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;margin-bottom:.9rem}
.da-ov-head h4{margin:0;font-size:1.15rem;letter-spacing:-.02em}
.da-ov-head p{margin:.25rem 0 0;font-size:.84rem;color:var(--muted)}
.da-x{border:0;background:none;width:28px;height:28px;border-radius:8px;display:grid;place-items:center;cursor:pointer;color:var(--ink-2);flex:none}
.da-x:hover{background:#f1ede5}
.shake{animation:daShake .35s}
@keyframes daShake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.da-typegrid{display:grid;grid-template-columns:repeat(2,1fr);gap:.6rem}
@media(min-width:560px){.da-typegrid{grid-template-columns:repeat(3,1fr)}}
.da-type{display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:1.1rem .6rem;border:1px solid var(--da-line);border-radius:14px;background:#fff;
  font:inherit;font-size:.9rem;font-weight:600;cursor:pointer;transition:border-color .2s,background .2s,transform .2s}
.da-type .da-ic{width:24px;height:24px}
.da-type:hover{border-color:var(--forest-4);background:var(--mint);transform:translateY(-2px)}
.da-search{margin-bottom:.6rem}
.da-list{display:flex;flex-direction:column;border:1px solid var(--da-line);border-radius:12px;overflow:hidden}
.da-li{display:flex;align-items:center;gap:.6rem;padding:.6rem .8rem;border:0;border-bottom:1px solid var(--da-line);background:#fff;font:inherit;font-size:.88rem;text-align:left;cursor:pointer;color:var(--ink)}
.da-li:last-child{border-bottom:0}
.da-li:hover{background:#f6f3ed}
.da-li span:not(.da-ic){flex:1;min-width:0}
.da-li em{font-style:normal;font-size:.78rem;color:var(--muted)}
.da-li.static{cursor:default;justify-content:space-between}
.da-li.static:hover{background:#fff}
.da-crumbs2{display:flex;flex-wrap:wrap;align-items:center;gap:.3rem;font-size:.82rem;margin:0 0 .7rem}
.da-crumbs2 .da-ic{width:12px;height:12px;color:var(--muted)}
.da-tablewrap{overflow-x:auto;border:1px solid var(--da-line);border-radius:12px;background:#fff}
.da-table{width:100%;border-collapse:collapse;font-size:.84rem}
.da-table th{text-align:left;font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:600;padding:.6rem .7rem;border-bottom:1px solid var(--da-line);background:#fbf9f5;white-space:nowrap}
.da-table td{padding:.6rem .7rem;border-bottom:1px solid #f0ebe2;white-space:nowrap}
.da-table tr:last-child td{border-bottom:0}
.da-table.inv tbody tr,.da-table.tasks tbody tr:not(.grp){cursor:pointer}
.da-table.inv tbody tr:hover td{background:#f8f5ef}
.da-table td.mono{font-family:var(--m);font-size:.8rem}
.da-table td.alert{color:var(--red)}
.da-warn{display:inline-grid;width:15px;height:15px;margin-left:.35rem;vertical-align:-2px;color:var(--red)}
.da-table.small{max-width:420px;border:1px solid var(--da-line);border-radius:10px;background:#fff;overflow:hidden}
.da-table tr.tot td{font-weight:650;background:#fbf9f5}
.da-foot{margin:.7rem 0 0;font-size:.82rem}
.da-alertbtn{display:inline-flex;align-items:center;gap:.35rem;font:inherit;font-size:.78rem;font-weight:600;color:var(--red);background:var(--red-bg);border:1px solid transparent;border-radius:99px;padding:.32rem .75rem;cursor:pointer}
.da-alertbtn.on{border-color:var(--red)}
.da-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.6rem;margin-bottom:.8rem}
.da-tile{border:1px solid var(--da-line);border-radius:12px;padding:.7rem .8rem;display:flex;flex-direction:column;gap:.25rem}
.da-tile span{font-size:.76rem;color:var(--muted);display:flex;align-items:center;gap:.3rem}
.da-tile span .da-ic{color:var(--red);width:14px;height:14px}
.da-tile b{font-size:1rem}
.da-tile em{font-style:normal;font-size:.72rem;color:var(--muted)}
.da-tile.warn{border-color:#efc9c3;background:#fdf6f4}
.da-alertrow{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;border:1px dashed var(--da-line);border-radius:10px;padding:.5rem .6rem;margin:-.4rem 0 .9rem;font-size:.82rem}
.da-alertrow .da-in{width:90px}
.da-alertrow label,.da-check{display:inline-flex;align-items:center;gap:.4rem;font-size:.84rem;font-weight:550}
.da-check{margin-bottom:.4rem}

/* notebook */
.da-editor{border:1px solid var(--da-line);border-radius:12px;background:#fff;overflow:hidden;margin-top:.3rem}
.da-tb{display:flex;flex-wrap:wrap;align-items:center;gap:.15rem;padding:.4rem .5rem;border-bottom:1px solid var(--da-line);background:#fbf9f5}
.da-tbb{display:inline-flex;align-items:center;gap:.35rem;height:30px;min-width:30px;justify-content:center;border:0;background:none;border-radius:8px;font:inherit;font-size:.8rem;color:var(--ink-2);cursor:pointer;padding:0 .45rem}
.da-tbb:hover{background:#efeae0;color:var(--ink)}
.da-tbb.wide{font-weight:600}
.da-tbb.hot{color:var(--forest);background:var(--mint)}
.da-tbt{font-size:.95rem}
.da-sep{width:1px;height:18px;background:var(--da-line);margin:0 .25rem}
.da-ce,.da-read{min-height:200px;padding:1rem 1.1rem;font-size:.95rem;line-height:1.65;outline:none}
.da-read{padding:0;min-height:0}
.da-ce ul,.da-ce ol,.da-read ul,.da-read ol{padding-left:1.3rem}
.da-tok{display:inline-flex;align-items:center;gap:.25rem;background:var(--mint);color:var(--forest);border-radius:6px;padding:0 .4rem;font-size:.88rem;font-weight:600;white-space:nowrap}
.da-tok .da-ic{width:13px;height:13px}
.da-refblock{margin:.8rem 0;max-width:420px}
.da-ref-k{display:flex;align-items:center;gap:.35rem;font-size:.8rem;color:var(--ink-2);margin-bottom:.4rem}
.da-refcard{display:flex;flex-direction:column;border:1px solid var(--da-line);border-radius:14px;padding:.85rem 1rem;background:#fff;box-shadow:0 10px 24px -18px rgb(22 69 37 / .5)}
.da-rc-t{font-size:1rem}
.da-rc-s{font-size:.8rem;color:var(--muted);margin-bottom:.5rem}
.da-rc-row{display:flex;justify-content:space-between;gap:1rem;font-size:.84rem;padding:.35rem 0;border-bottom:1px solid #f0ebe2}
.da-rc-row span{color:var(--ink-2)}
.da-rc-open{margin-top:.7rem;text-align:center;font-size:.82rem;font-weight:600;border:1px solid var(--da-line);border-radius:10px;padding:.4rem}
.da-protoblock{margin:.9rem 0;border:1px solid var(--da-line);border-radius:14px;background:#fff;padding:.9rem 1rem}
.da-pb-head{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}
.da-pb-head b{text-decoration:underline;text-underline-offset:3px}
.da-frozen{display:inline-flex;align-items:center;gap:.25rem;font-size:.72rem;color:var(--forest)}
.da-frozen .da-ic{width:12px;height:12px}
.da-pb-sum{font-size:.84rem;color:var(--muted);margin:.3rem 0 .6rem}
.da-pb-more{font-size:.8rem;color:var(--muted);margin:.5rem 0 0}
.da-step{border:1px solid var(--da-line);border-radius:12px;padding:.8rem .9rem;margin-top:.6rem;background:#fff}
.da-step-h{display:flex;align-items:center;gap:.6rem}
.da-num{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--forest-2);color:#fff;font-size:.74rem;font-weight:700;flex:none}
.da-iogrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.5rem;margin-top:.6rem}
.da-io{background:#f8f5ef;border-radius:10px;padding:.55rem .65rem;position:relative}
.da-io p{font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--ink-2);margin:0 0 .35rem}
.da-io ul{margin:0;padding-left:1rem;font-size:.82rem}
.da-io li.lnk{color:var(--forest);text-decoration:underline;text-underline-offset:2px}
.da-note{font-size:.84rem;background:#f8f5ef;border-radius:10px;padding:.55rem .7rem;margin:.5rem 0 0}
.da-versions{margin-top:1.2rem}
.da-ver{display:flex;align-items:center;gap:.7rem;padding:.5rem .7rem;border:1px solid var(--da-line);border-radius:10px;background:#fff;font-size:.84rem;margin-bottom:.35rem}
.da-ver em{font-style:normal;color:var(--muted);flex:1}
.da-vn{font-weight:650}

/* protocols */
.da-status{font-size:.82rem;border-radius:10px;padding:.5rem .7rem;margin:.4rem 0 1rem}
.da-status.warn{background:var(--amber-bg);color:var(--amber)}
.da-status.ok{background:var(--mint);color:var(--forest)}
.da-stepcard{border:1px solid var(--da-line);border-radius:14px;background:#fff;padding:.8rem .9rem;margin-bottom:.7rem}
.da-stepcard .da-in.title{background:none;border:0;border-bottom:1px solid var(--da-line);border-radius:0;font-weight:650;padding:.3rem .1rem}
.da-stepcard .da-in.title:focus{border-bottom-color:var(--forest-4)}
.da-stepcard .da-in.note{margin-top:.6rem;background:#f8f5ef}
.da-stepctl{display:flex;gap:.15rem;margin-left:auto}
.da-stepctl button{width:28px;height:28px;border:0;background:none;border-radius:8px;display:grid;place-items:center;color:var(--ink-2);cursor:pointer}
.da-stepctl button:hover:not(:disabled){background:#efeae0}
.da-stepctl button:disabled{opacity:.3;cursor:default}
.da-stepctl .da-ic{width:15px;height:15px}
.da-chipset{display:flex;flex-wrap:wrap;gap:.3rem;margin-bottom:.4rem}
.da-adder{display:flex;flex-wrap:wrap;gap:.35rem;align-items:center;position:relative}
.da-adder .da-in.sm{flex:1;min-width:110px;background:#fff}
.da-pop{position:absolute;top:calc(100% + 4px);left:0;z-index:5;min-width:220px;background:#fff;border:1px solid var(--da-line);border-radius:12px;box-shadow:0 18px 40px -16px rgb(0 0 0 / .35);overflow:hidden}
.da-pop .da-li{font-size:.82rem;padding:.5rem .7rem}
.da-addstep{display:flex;align-items:center;justify-content:center;gap:.4rem;width:100%;border:1.5px dashed var(--da-line);border-radius:14px;background:none;padding:.75rem;font:inherit;font-size:.86rem;font-weight:600;color:var(--forest);cursor:pointer}
.da-addstep:hover{border-color:var(--forest-4);background:#fff}
.da-preview .da-v,.da-preview .da-pill{margin:.2rem 0 .3rem}

/* equipment */
.da-weeknav{display:inline-flex;align-items:center;gap:.4rem;font-size:.84rem;margin-left:auto;color:var(--ink-2)}
.da-calinfo{font-size:.82rem;color:var(--muted);margin:0 0 .6rem;max-width:none}
.da-calwrap{overflow-x:auto;border:1px solid var(--da-line);border-radius:12px;background:#fff;user-select:none;-webkit-user-select:none}
.da-cal{display:grid;grid-template-columns:52px repeat(5,minmax(88px,1fr));min-width:520px}
.da-cal-corner,.da-cal-day{background:#fbf9f5;border-bottom:1px solid var(--da-line);padding:.5rem .4rem;font-size:.74rem;font-weight:600;text-align:center}
.da-cal-hr{font-size:.68rem;color:var(--muted);text-align:right;padding:.15rem .4rem 0 0;border-bottom:1px solid #f3efe7}
.da-cal-cell{height:30px;border-left:1px solid #f3efe7;border-bottom:1px solid #f3efe7;cursor:pointer;position:relative;transition:background .12s}
.da-cal-cell:hover{background:#f1f6f2}
.da-cal-cell.sel{background:var(--mint-2)}
.da-cal-cell.you{background:#cfe6d6;border-left:3px solid var(--forest)}
.da-cal-cell.other{background:#e7e3f2;border-left:3px solid #6d5bb0}
.da-cal-cell.block{background:repeating-linear-gradient(135deg,#ece7de 0 6px,#e2dcd0 6px 12px);border-left:3px solid #8a8171}
.da-cal-cell.first{border-top-left-radius:6px}
.da-cal-lbl{position:absolute;inset:3px 5px auto;font-size:.66rem;line-height:1.25;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;z-index:1}
.da-legend{display:flex;gap:1rem;flex-wrap:wrap;font-size:.76rem;color:var(--ink-2);margin:.6rem 0 0}
.da-legend span::before{content:"";display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:.35rem;vertical-align:-1px}
.da-legend .you::before{background:#cfe6d6;border-left:3px solid var(--forest)}
.da-legend .other::before{background:#e7e3f2;border-left:3px solid #6d5bb0}
.da-legend .block::before{background:repeating-linear-gradient(135deg,#ece7de 0 3px,#e2dcd0 3px 6px)}

/* projects */
.da-vis{display:inline-flex;align-items:center;gap:.4rem;font:inherit;font-size:.78rem;font-weight:600;border:1px solid var(--da-line);background:#fff;border-radius:99px;padding:.32rem .75rem;cursor:pointer}
.da-vis.priv{background:var(--forest-2);color:var(--on-accent);border-color:var(--forest-2)}
.da-facts{display:flex;flex-wrap:wrap;gap:1rem 2rem;margin:.9rem 0 1rem;font-size:.86rem}
.da-facts > div{display:flex;flex-direction:column;gap:.3rem}
.da-facts > div > span:first-child{font-size:.74rem;color:var(--muted)}
.da-facts .grow{flex:1;min-width:220px}
.da-bar{height:8px;border-radius:99px;background:#e8e2d6;overflow:hidden}
.da-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--forest-4),var(--forest));border-radius:inherit;transition:width .6s cubic-bezier(.16,1,.3,1)}
.da-bar.thin{height:5px}
.da-pct{font-size:.8rem;color:var(--ink-2)}
.da-card{background:#fff;border:1px solid var(--da-line);border-radius:14px;padding:.3rem .9rem .9rem;margin-bottom:.9rem}
.da-card .da-sub-h{margin-top:.8rem}
.da-trow{display:flex;align-items:center;gap:.6rem;padding:.5rem 0;border-bottom:1px solid #f0ebe2;font-size:.86rem;cursor:pointer}
.da-trow:last-child{border-bottom:0}
.da-trow input{accent-color:var(--forest);width:16px;height:16px}
.da-tt{flex:1;min-width:0}
.da-trow.done .da-tt{text-decoration:line-through;color:var(--muted)}
.da-due{font-size:.76rem;color:var(--ink-2);white-space:nowrap}
.da-due.over{color:var(--red);font-weight:600}
.da-subp{padding:.55rem 0;border-bottom:1px solid #f0ebe2;display:flex;flex-direction:column;gap:.25rem}
.da-subp:last-child{border-bottom:0}
.da-subp b{font-size:.86rem}
.da-compose{display:flex;gap:.5rem;align-items:flex-end;margin-bottom:.6rem}
.da-post{border:1px solid var(--da-line);border-radius:12px;padding:.6rem .75rem;margin-top:.5rem}
.da-post.pinned{border-color:var(--mint-2);background:#f6faf6}
.da-post-h{display:flex;align-items:center;gap:.5rem;font-size:.82rem}
.da-post-h em{font-style:normal;color:var(--muted);flex:1}
.da-post p{font-size:.86rem;margin:.4rem 0 0;max-width:none}
.da-entry{display:flex;align-items:center;gap:.6rem;padding:.5rem 0;border-bottom:1px solid #f0ebe2;font-size:.86rem;flex-wrap:wrap}
.da-entry:last-child{border-bottom:0}
.da-entry em{font-style:normal;color:var(--muted);font-size:.8rem}

/* tasks */
.da-table.tasks td.tt{white-space:normal;min-width:220px}
.da-table.tasks td.tt b{font-weight:550;display:block}
.da-table.tasks tr.done td.tt b{text-decoration:line-through;color:var(--muted)}
.da-table.tasks input{accent-color:var(--forest);width:16px;height:16px}
.da-table tr.grp td{background:#fbf9f5;font-size:.74rem;font-weight:650;color:var(--ink-2);letter-spacing:.02em}
.da-steps-mini{display:inline-flex;align-items:center;gap:.35rem;font-size:.72rem;color:var(--ink-2);margin-top:.2rem}
.da-steps-mini .da-bar{width:44px}
.da-prio{display:inline-flex;align-items:center;gap:.35rem;font-size:.8rem}
.da-prio i{width:8px;height:8px;border-radius:50%;background:#8a8171}
.da-prio.urgent i{background:var(--red)}
.da-prio.important i{background:#c47f17}
.da-prio.low i{background:#b9b2a3}
@media(max-width:640px){.da-table .hide-sm{display:none}}
.da-substeps{display:flex;flex-direction:column;gap:.3rem;margin-bottom:.4rem}
.da-substep{display:flex;align-items:center;gap:.5rem;font-size:.86rem;background:#f8f5ef;border-radius:8px;padding:.35rem .5rem}
.da-substep .da-chip-x{margin-left:auto}

/* tags */
.da-tagscene{display:grid;gap:1.4rem;grid-template-columns:1fr;align-items:start;margin-top:1rem}
@media(min-width:760px){.da-tagscene{grid-template-columns:1fr 260px}}
.da-box{display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem;padding:1rem;border-radius:14px;background:linear-gradient(180deg,#dfe6ec,#cfd8e0);
  border:1px solid #bcc7d1;box-shadow:inset 0 2px 6px rgb(0 0 0 / .08)}
.da-vial{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:92px;border:1px solid #c5cdd4;border-radius:12px;
  background:linear-gradient(180deg,#f7fafc,#e9eef2);cursor:pointer;font:inherit;padding:.5rem .3rem;transition:transform .2s,box-shadow .2s}
.da-vial:hover{transform:translateY(-3px);box-shadow:0 10px 18px -10px rgb(0 0 0 / .35)}
.da-vial.on{box-shadow:0 0 0 3px var(--forest-4);transform:translateY(-3px)}
.da-cap{position:absolute;top:10px;left:50%;width:34px;height:34px;margin-left:-17px;border-radius:50%;box-shadow:inset 0 -3px 0 rgb(0 0 0 / .2)}
.da-label{font-family:"Bradley Hand","Segoe Print","Comic Sans MS",cursive;font-size:.8rem;color:#2d3a55;transform:rotate(-3deg);opacity:.85;text-align:center}
.da-mini-tag{position:absolute;top:50px;right:10px;width:14px;height:14px;border-radius:3px;background:var(--forest);box-shadow:inset 0 0 0 2px #fff}
.da-phone{position:relative;width:240px;height:440px;margin:0 auto;border-radius:34px;background:#15201a;padding:12px;box-shadow:0 30px 60px -28px rgb(0 0 0 / .6)}
.da-notch{position:absolute;top:12px;left:50%;width:80px;height:18px;margin-left:-40px;background:#15201a;border-radius:0 0 12px 12px;z-index:2}
.da-phone-screen{height:100%;border-radius:24px;background:#f7f3ec;overflow:hidden;padding:2.2rem .9rem .9rem;font-size:.84rem}
.da-idle,.da-scanning{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;text-align:center;color:var(--ink-2)}
.da-idle span:last-child{font-size:.76rem;color:var(--muted)}
.da-nfc{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:var(--mint);color:var(--forest)}
.da-nfc .da-ic{width:30px;height:30px}
.da-nfc.pulse{animation:daNfc .65s ease-out infinite}
@keyframes daNfc{0%{box-shadow:0 0 0 0 rgb(77 115 87 / .5)}100%{box-shadow:0 0 0 22px rgb(77 115 87 / 0)}}
.da-rec{animation:daRise .45s cubic-bezier(.16,1,.3,1)}
@keyframes daRise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.da-rec-k{display:flex;align-items:center;gap:.3rem;font-size:.7rem;color:var(--forest);font-weight:600;margin:0 0 .5rem}
.da-rec h4{margin:0;font-size:1.05rem}
.da-rec-id{font-size:.72rem;color:var(--forest);margin:.1rem 0 .6rem}
.da-rec .da-rc-row{font-size:.76rem}
.da-tagprev{margin-top:1rem;min-height:1px}
.da-tag{display:flex;align-items:center;gap:.8rem;background:#fff;border:1px solid var(--da-line);border-radius:10px;padding:.6rem .8rem;max-width:360px;animation:daRise .4s ease}
.da-tag b{display:block;font-size:.8rem}
.da-tag span{font-size:.74rem;color:var(--ink-2)}
.da-barcode{display:flex;align-items:stretch;gap:1px;height:34px;flex:none}
.da-barcode i{display:block;background:#111}
.da-tag-nfc{margin-left:auto;display:inline-flex;align-items:center;gap:.2rem;font-family:var(--m);font-size:.66rem;color:var(--forest)}
@media(prefers-reduced-motion:reduce){.da *,.da-toast{animation:none !important;transition:none !important}}
/* ================= end live module demos ================= */

/* ---------- demo form: spreadsheet drop zone ---------- */
.drop{
  position:relative;display:block;border:1.5px dashed var(--line);border-radius:var(--r-sm);
  background:var(--paper);padding:.9rem 1rem;text-align:center;cursor:pointer;
  transition:border-color .2s,background .2s}
.drop:hover,.drop:focus-within{border-color:var(--forest);background:var(--mint)}
.drop.over{border-color:var(--forest);background:var(--mint-2)}
.drop input[type=file]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.drop .dropmain{font-size:.86rem;color:var(--ink);font-weight:550}
.drop .dropsub{font-size:.76rem;color:var(--muted);margin-top:.15rem}
.filelist{list-style:none;padding:0;margin:.55rem 0 0;display:grid;gap:.35rem}
.filelist li{display:flex;align-items:center;gap:.5rem;background:var(--mint);
  border:1px solid var(--line);border-radius:6px;padding:.36rem .55rem;font-size:.8rem}
.filelist .fname{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  color:var(--ink)}
.filelist .fsize{font-family:var(--m);font-size:.68rem;color:var(--muted);flex:none}
.filelist .fdrop{flex:none;border:0;background:none;cursor:pointer;color:var(--muted);
  font-size:1rem;line-height:1;padding:0 .15rem}
.filelist .fdrop:hover{color:var(--red)}
.attachwarn{font-size:.76rem;color:var(--amber);background:var(--amber-bg);border-radius:6px;
  padding:.4rem .55rem;margin:.5rem 0 0;display:none}
.attachwarn.on{display:block}

/* ---- demo form: honeypot, error state, confirmation ---------------------- */

/* Off-screen rather than display:none — a bot reading the DOM fills it either way, but
   display:none is the version some of them have learnt to skip. aria-hidden and
   tabindex=-1 on the markup keep it away from screen readers and the tab order. */
.hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

.attachwarn.bad{color:var(--red);background:var(--red-bg)}

/* Replaces the form in place once the request is in. Same card padding as the form it
   takes over from, so the panel does not resize under the reader. */
.dthanks{padding:.4rem 0 .6rem}
.dthanks h3{font-size:1.05rem;color:var(--forest);margin:0 0 .6rem;line-height:1.3}
.dthanks p{font-size:.9rem;color:var(--ink-2);margin:0 0 .7rem;line-height:1.55}
.dthanks p:last-child{margin-bottom:0;color:var(--muted);font-size:.86rem}