/* Homepage-only styles (linked only from index.html). Uses the shared cream tokens in styles.css.
   No neon accents: on dark surfaces the highlight is a readable light teal (#9FD4D8). */
.home{--dark-accent:#9FD4D8}

/* hero + product stage */
.hero .wrap.h-hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:44px;align-items:start}
.h-hero{padding:64px 0 56px;background:radial-gradient(1200px 500px at 85% -10%, rgba(37,111,118,.10), transparent 60%),radial-gradient(800px 400px at -10% 110%, rgba(122,95,32,.08), transparent 60%),linear-gradient(180deg,var(--bg) 0%,var(--bg-2) 100%)}
.h-hero h1{font-size:clamp(2.2rem,4.6vw,3.7rem);line-height:1.04;letter-spacing:-.03em}
.h-hero-copy{display:flex;flex-direction:column;gap:6px;padding-top:6px;min-width:0}
.h-dept{margin:6px 0 4px;align-self:flex-start}
.h-lede-dept{color:var(--text)}
.h-hero .lede{min-height:5.2em}
@media (max-width:900px){.hero .wrap.h-hero-grid{grid-template-columns:1fr}.h-hero .lede{min-height:0}}

.h-stage{min-width:0;background:var(--surface);border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:0 2px 4px rgba(31,31,31,.04),0 24px 60px rgba(24,34,45,.14);--dc:var(--teal);--dsoft:var(--accent-soft);--dline:var(--accent-line);scroll-margin-top:84px}
.h-stage[data-dept=accounting]{--dc:var(--lime);--dsoft:var(--approval-soft);--dline:var(--approval-line)}
.h-stage[data-dept=operations]{--dc:var(--gold);--dsoft:var(--warning-soft);--dline:var(--warning-line)}
.h-stage-bar{background:var(--header);padding:10px 14px;display:flex;flex-wrap:wrap;gap:8px;justify-content:space-between;align-items:center}
.h-stage-label{font:600 .72rem/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--header-muted)}
.h-stage-ctl{display:flex;flex-wrap:wrap;gap:6px}
.h-stage-ctl button{font:600 .8rem var(--font);color:var(--header-text);background:transparent;border:1px solid var(--header-line);border-radius:8px;padding:5px 11px;cursor:pointer}
.h-stage-ctl button:hover{border-color:var(--dark-accent)}
.h-stage-ctl button[disabled]{opacity:.45;cursor:not-allowed}
.h-phases{display:flex;flex-wrap:wrap;gap:4px;padding:12px 14px 0}
.h-phases button{flex:1 1 64px;min-width:0;background:transparent;border:0;padding:0 0 6px;cursor:pointer;text-align:left;font:inherit}
.h-phases button i{display:block;height:4px;border-radius:4px;background:var(--line);transition:background .4s ease}
.h-phases button.done i{background:var(--dc)}
.h-phases button.gate.done i{background:var(--lime)}
.h-phases button span{display:block;font:500 .66rem/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;margin-top:5px;color:var(--muted)}
.h-phases button[aria-current=step] span{color:var(--text);font-weight:700}
.h-stage-body{padding:8px 14px 16px;display:flex;flex-direction:column;gap:14px}
.h-top{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-start}
.h-route{flex:1 1 190px;min-width:0;max-width:300px;margin:0 auto}
.h-route svg{width:100%;height:auto;max-height:210px}
.h-top-right{flex:1.4 1 240px;min-width:0;display:flex;flex-direction:column;gap:12px}
.h-req{background:var(--bg-2);border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.h-req p{margin:0;font-size:.92rem;line-height:1.55}
.h-req .h-fig{font:500 .72rem/1.5 var(--mono);color:var(--muted);margin-top:8px}
.h-block{border-left:2px solid var(--dc);padding-left:13px}
.h-block p{margin:0}
.h-block-t{font:700 .7rem/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--dc);margin-bottom:6px}
.h-req .h-block-t{color:var(--muted)}
.h-chips{display:flex;flex-wrap:wrap;gap:6px}
.h-chips span{font-size:.78rem;padding:3px 9px;border-radius:999px;background:var(--dsoft);border:1px solid var(--dline)}
.h-plan-list{margin:0;padding-left:1.4em;font-size:.9rem;line-height:1.55}
.h-find{border:1px solid var(--line);border-radius:10px;overflow:hidden;font-size:.84rem}
.h-find div{display:flex;flex-wrap:wrap;gap:4px 8px;padding:7px 11px;background:var(--surface-2)}
.h-find div:nth-child(even){background:var(--surface)}
.h-find div+div{border-top:1px solid var(--line)}
.h-find b{flex:1 1 110px;font-weight:600}
.h-find span{flex:2 1 150px}
.h-find em{flex:1 1 120px;font:normal 500 .72rem/1.5 var(--mono);color:var(--muted)}
.h-find .miss{color:var(--gold);font-weight:600}
.h-srcs{margin:8px 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:6px}
.h-srcs li{font-size:.74rem;border:1px solid var(--line-2);border-radius:999px;padding:2px 9px;color:var(--muted);background:var(--surface)}
.h-rec{font-weight:600;font-size:.94rem;line-height:1.5;margin:0 0 8px}
.h-draft{font-size:.88rem;line-height:1.6;background:var(--surface-2);border:1px dashed var(--line-2);border-radius:10px;padding:11px 13px}
.h-gate{border-radius:14px;padding:16px;border:2px solid var(--lime);background:var(--approval-soft)}
.h-gate.back{border-color:var(--bad);background:var(--danger-soft)}
.h-gate.wait{animation:hGlow 2.4s ease-in-out infinite}
.h-gate h4{font-size:1.15rem;margin:0 0 4px}
.h-gate .h-gate-sub{font-size:.84rem;color:var(--muted);margin:0 0 10px}
.h-gate .h-gate-rule{font-weight:600;font-size:.92rem;margin:0 0 12px}
.h-gate .h-stamp{font:500 .72rem/1.5 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.h-gate-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.h-gate-row>div{flex:1 1 200px;min-width:0}
.h-gate .done-t{color:var(--lime)}
.h-gate.back h4{color:var(--bad)}
.h-stage-own{border-top:1px solid var(--line);background:var(--bg-2);padding:12px 14px;margin:0}
.h-stage-own label{display:block;font:600 .7rem/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.h-own-row{display:flex;flex-wrap:wrap;gap:8px}
.h-own-row input{flex:1 1 200px;min-width:0;width:auto}
.h-stage-note{font-size:.8rem;color:var(--muted);margin:8px 0 0;line-height:1.45}

.h-trust4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1000px){.h-trust4{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.h-trust4{grid-template-columns:1fr}}

/* how it works stepper */
.h-step-progress{height:4px;background:var(--line);border-radius:4px;overflow:hidden;margin-bottom:16px}
.h-step-progress i{display:block;height:100%;width:14.3%;background:var(--teal);transition:width .5s cubic-bezier(.2,.7,.2,1)}
.h-step-progress i.gate{background:var(--lime)}
.h-step-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.h-step-tabs button{font:600 .88rem var(--font);color:var(--text);background:var(--surface);border:1px solid var(--line-2);border-radius:999px;padding:8px 14px;cursor:pointer;transition:background .2s,border-color .2s,color .2s}
.h-step-tabs button span{font:500 .74rem var(--mono);margin-right:6px;opacity:.8}
.h-step-tabs button:hover{border-color:var(--teal)}
.h-step-tabs button[aria-pressed=true]{background:var(--teal);border-color:var(--teal);color:var(--on-accent)}
.h-step-tabs button.gate[aria-pressed=true]{background:var(--lime);border-color:var(--lime)}
.h-step-panel{display:flex;flex-wrap:wrap;background:var(--surface);border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:0 1px 2px rgba(31,31,31,.04),0 10px 30px rgba(31,31,31,.05)}
.h-step-main{flex:1 1 320px;min-width:0;padding:26px 26px 22px}
.h-step-n{font:700 3.2rem/1 var(--mono);letter-spacing:-.04em;color:var(--teal)}
.h-step-panel.gate .h-step-n{color:var(--lime)}
.h-step-main h3{font-size:1.6rem;margin:12px 0 4px}
.h-step-sub{font:500 .74rem var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.h-step-note{margin-top:12px;padding:11px 14px;border-radius:10px;background:var(--approval-soft);border:1px solid var(--approval-line);font-size:.92rem;line-height:1.55}
.h-step-nav{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.h-step-art{flex:1 1 280px;min-width:0;background:var(--header);padding:26px 22px;display:flex;flex-direction:column;gap:10px;justify-content:center}
.h-art-k{font:500 .7rem var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--header-muted)}
.h-art-line{font:500 .84rem/1.5 var(--mono);color:var(--header-text);white-space:pre-wrap;overflow-wrap:anywhere;border-left:2px solid var(--dark-accent);padding-left:12px}
.h-hint{font-size:.84rem;color:var(--muted);margin:10px 0 0}

/* sample Sales Dashboard */
.h-dash{background:var(--surface);border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:0 1px 2px rgba(31,31,31,.04),0 10px 30px rgba(31,31,31,.05);margin-bottom:40px}
.h-dash-head{background:var(--header);padding:12px 16px;display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between}
.h-dash-brand{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;color:#FFFFFF}
.h-dash-brand span{font:500 .7rem var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--header-muted)}
.h-dash-tabs{display:flex;flex-wrap:wrap;gap:4px}
.h-dash-tabs button{font:500 .88rem var(--font);color:var(--header-muted);background:transparent;border:0;border-radius:8px;padding:7px 10px;cursor:pointer}
.h-dash-tabs button:hover{color:var(--header-text)}
.h-dash-tabs button[aria-pressed=true]{background:rgba(255,255,255,.12);color:#FFFFFF}
.h-dash-note{margin:0;padding:9px 16px;background:var(--warning-soft);border-bottom:1px solid var(--line);font-size:.84rem;line-height:1.5}
.h-dash-body{padding:16px;display:flex;flex-direction:column;gap:20px}
.h-k{font:600 .72rem/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--teal);margin:0 0 10px}
.h-tiles{display:flex;flex-wrap:wrap;gap:10px}
.h-tile{flex:1 1 150px;min-width:0;text-align:left;font:inherit;color:var(--text);background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:11px 13px;cursor:pointer;transition:border-color .2s,box-shadow .2s,transform .2s,background .2s}
.h-tile:hover{box-shadow:0 8px 22px rgba(31,31,31,.08);transform:translateY(-1px)}
.h-tile[aria-pressed=true]{background:var(--accent-soft);border-color:var(--teal)}
.h-tile b{display:block;font:700 1.55rem/1.1 var(--display)}
.h-tile b.bad{color:var(--bad)}
.h-tile span{display:block;font-size:.8rem;color:var(--muted);line-height:1.35;margin-top:3px}
.h-kpi{flex:1 1 200px;background:var(--surface-2)}
.h-kpi small{display:block;font-size:.8rem;color:var(--muted)}
.h-kpi b{font-size:1.65rem;margin-top:3px}
.h-split{display:flex;flex-wrap:wrap;gap:18px}
.h-split>div{flex:1 1 300px;min-width:0}
.h-stages{display:flex;flex-direction:column;gap:6px}
.h-stage-row{text-align:left;font:inherit;color:var(--text);background:transparent;border:1px solid transparent;border-radius:10px;padding:7px 10px;cursor:pointer}
.h-stage-row:hover{background:var(--accent-soft)}
.h-stage-row[aria-pressed=true]{background:var(--accent-soft);border-color:var(--teal)}
.h-stage-row .t{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 8px;font-size:.88rem}
.h-stage-row .t span:first-child{font-weight:600}
.h-stage-row .t small{color:var(--muted);font-weight:400;font-size:.88rem}
.h-stage-row .amt{font-variant-numeric:tabular-nums}
.h-stage-row .miss,.h-rec-item .miss{color:var(--gold)}
.h-bar{height:8px;background:var(--bg);border-radius:6px;margin-top:6px;overflow:hidden}
.h-bar i{display:block;height:100%;border-radius:6px;background:var(--teal);transform-origin:left center;animation:hBar .7s cubic-bezier(.2,.7,.2,1) both}
.h-bar i.won{background:var(--lime)} .h-bar i.lost{background:var(--line-2)}
.h-recs{background:var(--bg-2);border:1px solid var(--line);border-radius:12px;padding:14px}
.h-recs-h{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px;align-items:baseline;margin-bottom:10px}
.h-recs-h b{font-size:1rem}
.h-recs-h span{font:500 .68rem var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.h-rec-list{display:flex;flex-direction:column;gap:8px}
.h-rec-item{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:9px 11px;display:flex;flex-wrap:wrap;gap:6px 10px;justify-content:space-between}
.h-rec-item>div:first-child{flex:1 1 150px;min-width:0}
.h-rec-item b{display:block;font-size:.88rem}
.h-rec-item small{display:block;font-size:.78rem;color:var(--muted)}
.h-rec-item .r{text-align:right;font-size:.86rem;font-weight:600}
.h-flag{display:block;font-size:.74rem;color:var(--bad);font-weight:600;margin-top:2px}
.h-board{display:flex;flex-wrap:wrap;gap:10px}
.h-col{flex:1 1 170px;min-width:0;background:var(--bg-2);border:1px solid var(--line);border-radius:12px;padding:10px}
.h-col-h{border-top:3px solid var(--teal);padding-top:8px;margin-bottom:8px}
.h-col-h.won{border-top-color:var(--lime)} .h-col-h.lost{border-top-color:var(--line-2)}
.h-col-h b{display:block;font-size:.9rem}
.h-col-h small{font-size:.78rem;color:var(--muted)}
.h-card{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:8px 10px;margin-bottom:8px;font-size:.82rem}
.h-card b{display:block;font-size:.84rem;line-height:1.35}
.h-card small{display:block;color:var(--muted);font-size:.76rem;margin-top:2px}
.h-card .amt{font-weight:600;margin-top:5px}
.h-conn{display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;align-items:center;background:var(--surface-2);border:1px solid var(--line);border-radius:12px;padding:13px 15px}
.h-conn small{display:block;font-size:.82rem;color:var(--muted)}
.h-nc{font:600 .72rem var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);border:1px solid var(--line-2);border-radius:999px;padding:5px 12px}
.h-small{font-size:.84rem;color:var(--muted);margin:10px 0 0;line-height:1.55}

/* pricing calculator */
.h-calc,.h-tv{margin-bottom:16px}
.h-tv{margin-top:20px;background:var(--bg-2)}
.h-calc-top{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 12px;align-items:center;margin-bottom:16px}
.h-eyebrow-gold{color:var(--gold)}
.h-sliders{display:flex;flex-wrap:wrap;gap:16px 24px}
.h-slider{flex:1 1 220px;min-width:0;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:4px 8px}
.h-slider label{font-size:.9rem;color:var(--muted)}
.h-slider output{font-weight:700;font-variant-numeric:tabular-nums}
.h-slider input[type=range]{flex:1 1 100%;width:100%;accent-color:var(--teal);margin:6px 0 0}
#plans .card.plan.h-plan{transition:opacity .3s ease,border-color .3s ease,box-shadow .3s}
#plans .card.plan.is-out{opacity:.62}
#plans .card.plan.is-fit{border-color:var(--teal);box-shadow:0 0 0 1px var(--teal) inset,0 18px 50px -24px var(--shadow)}
.h-plan-top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:4px 8px}
.h-fit{font:600 .66rem var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--on-accent);background:var(--teal);border-radius:999px;padding:4px 9px}
.h-at{font-size:.8rem;background:var(--bg-2);border-radius:8px;padding:7px 9px;margin:0 0 10px;line-height:1.4}
.h-at.out{background:var(--danger-soft);color:var(--bad)}
.h-metrics{display:flex;flex-wrap:wrap;gap:12px;margin-top:16px}
.h-metric{flex:1 1 160px;min-width:0;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.h-metric small{display:block;font-size:.8rem;color:var(--muted)}
.h-metric b{display:block;font:700 1.45rem var(--display);margin-top:4px;font-variant-numeric:tabular-nums}

/* comparison */
.h-compare{display:flex;flex-wrap:wrap;gap:16px}
.h-cmp-math{flex:1.4 1 360px;min-width:0}
.h-lanes{flex:1 1 280px;min-width:0;display:flex;flex-direction:column;gap:14px}
.h-lanes .seg{align-self:flex-start}
.h-lane-text{font-size:1.02rem;line-height:1.65;margin:0}
.h-lane-foot{margin-top:auto;margin-bottom:0;font:500 .7rem var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.h-cmp-bars{display:flex;flex-direction:column;gap:14px}
.h-cmp-row .t{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 8px;font-size:.92rem}
.h-cmp-row .t b{font-variant-numeric:tabular-nums}
.h-cmp-row.us .t span,.h-cmp-row.us .t b{font-weight:700;color:var(--teal)}
.h-cmp-row .h-bar{height:10px}
.h-cmp-row .h-bar i{background:var(--line-2)}
.h-cmp-row.us .h-bar i{background:var(--teal)}
.h-cmp-row small{display:block;font-size:.8rem;color:var(--muted);margin-top:4px}
.h-cmp-table{margin-top:18px}
.h-cmp-table summary{cursor:pointer;font:600 1.02rem var(--display);margin-bottom:10px}

/* motion */
.h-in{animation:hIn .5s cubic-bezier(.2,.7,.2,1) both}
.h-ring{transform-box:fill-box;transform-origin:center;animation:hRing 1.6s ease-out infinite}
.h-check{stroke-dasharray:60;animation:hDraw .7s .1s ease-out both}
@keyframes hIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes hRing{0%{transform:scale(1);opacity:.7}100%{transform:scale(2.8);opacity:0}}
@keyframes hDraw{from{stroke-dashoffset:60}to{stroke-dashoffset:0}}
@keyframes hGlow{0%,100%{box-shadow:0 0 0 0 rgba(74,107,60,0)}50%{box-shadow:0 0 0 7px rgba(74,107,60,.14)}}
@keyframes hBar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.home button:focus-visible,.home a:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.h-stage-ctl button:focus-visible,.h-dash-tabs button:focus-visible{outline-color:var(--dark-accent)}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .h-in,.h-ring,.h-check,.h-gate.wait,.h-bar i{animation:none!important}
  .h-tile,.h-step-progress i,.h-phases button i,.h-step-tabs button,#plans .card.plan.h-plan{transition:none!important}
  .h-tile:hover{transform:none}
}
@media (max-width:420px){
  .wrap{padding:0 16px}
  .h-step-main,.h-step-art{padding:20px 16px}
  .h-dash-body{padding:12px}
  .h-stage-body{padding:8px 12px 14px}
}

/* live try-it preview: keep the packet inside narrow screens */
#try .try-board>*{min-width:0;max-width:100%}
@media (max-width:640px){#try .try-board>*{align-self:stretch;width:100%}}
#demoOut .kv{grid-template-columns:minmax(0,150px) minmax(0,1fr)}
#demoOut .kv dd{overflow-wrap:anywhere}
@media (max-width:480px){#demoOut .kv{grid-template-columns:minmax(0,1fr);gap:2px 0}#demoOut .kv dd{margin-bottom:8px}#try .card{padding:18px}}
@media (max-width:480px){
  .site-head .nav{gap:8px}
  .site-head .btn-sm{padding:6px 9px}
  .site-head .nav a{white-space:nowrap;font-size:.84rem}
  .site-head .brand{font-size:1.05rem;gap:8px}
  .h-tile{flex-basis:130px}
}

/* Sample "Recorded movement · last 12 months" (reuses the app's chart classes from styles.css) */
.h-charts{display:flex;flex-direction:column;gap:14px;border-top:1px solid var(--line);padding-top:18px}
.h-charts .chart-title{margin-top:0}
.h-dash .dash-grid.chart-sec{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:760px){.h-dash .dash-grid.chart-sec{grid-template-columns:minmax(0,1fr)}}
.h-charts .chev[aria-pressed=true]{background:var(--teal);color:var(--on-accent)}
.h-charts .chev.won[aria-pressed=true]{background:var(--lime);color:var(--on-accent)}
.h-charts .lg-row,.h-charts .hb-row{cursor:pointer}
.h-charts .lg-row:hover,.h-charts .hb-row:hover,.h-charts .lg-row[aria-pressed=true],.h-charts .hb-row[aria-pressed=true]{background:var(--accent-soft);border-color:var(--accent-line)}
.h-charts .chart-link[aria-pressed=true]{background:var(--accent-soft);border-radius:4px}
.h-charts .mbar-b[aria-pressed=true]{outline:2px solid var(--accent-line);outline-offset:2px;border-radius:5px}
.h-chart-out{scroll-margin-top:84px}