/* Cardinal Owe landing: the live deal ledger, the close-it-out demo, and feature hover art.
   Purple (--c) is the product; amber and red only ever mean due soon or past due. */
.mark-logo{flex-shrink:0;filter:drop-shadow(0 0 10px rgba(158,143,214,.35))}

/* ---------- hero: copy beside the live ledger ---------- */
.hero-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(28px,5vw,64px);align-items:center}
.hero-split .hero-copy h1{margin-bottom:22px}
.ledger{margin:0;background:linear-gradient(180deg,var(--deck),#0d1017);border:1px solid var(--rule);border-radius:18px;padding:18px;box-shadow:0 30px 80px -40px rgba(158,143,214,.3)}
.ledger-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding-bottom:14px;border-bottom:1px solid var(--rule-soft);margin-bottom:12px}
.ledger-head b{display:block;font-size:17px;color:var(--ink);font-weight:600}
.ledger-head span{font-size:12.5px;color:var(--dim)}
.ledger-day{text-align:right}
.ledger-day b{font-family:var(--mono);font-size:20px;font-weight:500;color:var(--c)}
.ledger-cols{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.ledger-col h4{margin:0 0 8px;font-size:12.5px;font-weight:600;color:var(--ink-2)}
.ledger-col ul{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.pr{position:relative;background:var(--void);border:1px solid var(--rule);border-radius:10px;padding:8px 10px 10px;transition:border-color .4s,opacity .5s}
.pr-top{display:flex;justify-content:space-between;gap:8px;align-items:baseline}
.pr b{font-size:13px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.pr .who{font-family:var(--mono);font-size:10.5px;color:var(--dim);flex-shrink:0}
.pr .due{display:block;font-size:11.5px;color:var(--dim);margin-top:2px}
.pr .bar{height:4px;border-radius:2px;background:var(--rule);margin-top:7px;overflow:hidden}
.pr .bar i{display:block;height:100%;width:0;background:var(--c);border-radius:2px;transition:width .9s cubic-bezier(.22,1,.36,1),background-color .4s}
.pr.amber{border-color:rgba(233,185,73,.55)} .pr.amber .bar i{background:#E9B949} .pr.amber .due{color:#E9B949}
.pr.red{border-color:rgba(242,85,90,.65);background:rgba(242,85,90,.06)} .pr.red .bar i{background:#F2555A} .pr.red .due{color:#F2555A}
.pr.done{opacity:.62} .pr.done .bar i{background:#3FCF8E} .pr.done .due{color:#3FCF8E}
.pr.done b{color:var(--ink-2)}
.pr .tick{display:none;width:14px;height:14px;border-radius:50%;background:#3FCF8E;flex-shrink:0;position:relative}
.pr .tick::after{content:"";position:absolute;left:4.5px;top:2.5px;width:3px;height:6px;border:solid #0A0C10;border-width:0 1.8px 1.8px 0;transform:rotate(45deg)}
.pr.done .tick{display:inline-block} .pr.done .who{display:none}
.pr.pop{animation:prPop .5s cubic-bezier(.22,1,.36,1)}
@keyframes prPop{0%{transform:scale(.97)}60%{transform:scale(1.015)}100%{transform:none}}
.ledger-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-top:12px;padding-top:12px;border-top:1px solid var(--rule-soft);font-size:13px;color:var(--ink-2);min-height:34px}
.ledger-note{font-size:12.5px;color:var(--dim);transition:opacity .4s}
.ledger-note.red{color:#F2555A} .ledger-note.ok{color:#3FCF8E}

/* ---------- how: close one out yourself ---------- */
.closer{background:var(--deck);border:1px solid var(--rule);border-radius:16px;padding:clamp(16px,3vw,24px);margin-bottom:clamp(24px,4vh,36px)}
.closer-row{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap}
.closer-item b{display:block;font-size:17px;color:var(--ink)}
.closer-item span{font-size:13.5px;color:var(--dim)}
.closer-btn{font:inherit;font-size:14px;font-weight:600;color:var(--ink);background:transparent;border:1px solid var(--c);border-radius:999px;padding:9px 18px;cursor:pointer;transition:background-color .2s,color .2s,opacity .2s}
.closer-btn:hover{background:var(--c-glow)}
.closer-btn.primary{background:var(--c);color:#0A0C10}
.closer-btn:disabled{opacity:.4;cursor:not-allowed}
.closer-btn:focus-visible,#closerHow:focus-visible{outline:2px solid var(--c);outline-offset:2px}
.closer-ask{margin-top:16px;padding-top:16px;border-top:1px solid var(--rule-soft);animation:askIn .35s cubic-bezier(.22,1,.36,1)}
@keyframes askIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.closer-ask label{display:block;font-size:13.5px;color:var(--ink-2);margin-bottom:8px}
.closer-ask-row{display:flex;gap:10px;flex-wrap:wrap}
#closerHow{flex:1;min-width:200px;font:inherit;font-size:14.5px;color:var(--ink);background:var(--void);border:1px solid var(--rule);border-radius:10px;padding:9px 11px}
.closer-why{margin:12px 0 0;font-size:14px;color:var(--dim)}
.closer-why.warn{color:#E9B949}
.closer.closed .closer-item b{color:var(--ink-2)}
.closer.closed .closer-item span{color:#3FCF8E}

/* ---------- feature hover art: still until hovered ---------- */
.fx{display:block;width:120px;height:64px;margin-bottom:16px;overflow:visible}
.fx rect,.fx circle,.fx g,.fx path{transition:transform .7s cubic-bezier(.22,1,.36,1),fill .4s,opacity .4s}
.fx-slot{fill:var(--deck-2);stroke:var(--rule);stroke-width:1.5}
.fx-sheet{fill:#EDEFF3} .fx-ln{fill:#B9BFCB} .fx-sig{fill:var(--c)}
.fx-paper{transform:translateY(22px)}
.feat:hover .fx-paper{transform:translateY(-2px)}
.fx-bubble,.fx-tail{fill:none;stroke:var(--c);stroke-width:1.5}
.fx-dots circle{fill:var(--c)} .fx-text rect{fill:var(--ink-2);opacity:0}
.feat:hover .fx-dots{opacity:0} .feat:hover .fx-text rect{opacity:1}
.fx-track{fill:var(--rule)}
.fx-fill{fill:var(--c);transform-box:fill-box;transform-origin:left;transform:scaleX(.35)}
.fx-fill.f2{transform:scaleX(.55)}
.feat:hover .fx-fill{transform:scaleX(.8);fill:#E9B949} .feat:hover .fx-fill.f2{transform:scaleX(1);fill:#F2555A}
.fx-bars line{stroke:var(--rule);stroke-width:1.5}
.fx-bars rect{fill:var(--c);opacity:.8;transform-box:fill-box;transform-origin:bottom;transform:scaleY(.55)}
.feat:hover .fx-bars rect{transform:scaleY(1)} .feat:hover .fx-bars .b2{transition-delay:.06s} .feat:hover .fx-bars .b3{transition-delay:.12s} .feat:hover .fx-bars .b4{transition-delay:.18s}

@media(max-width:980px){.hero-split{grid-template-columns:1fr}}
@media(max-width:520px){.ledger-cols{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.pr,.pr .bar i,.fx rect,.fx g{transition:none}.pr.pop,.closer-ask{animation:none}}
.hero-split .hero-copy h1{font-size:clamp(46px,6vw,84px)}