/* AgentPayment family design system — light, lifecycle-first.
   One source; copied per surface until repo formalization. */
:root{
  --bg:#fbfaf7; --bg-2:#f4f2ec; --surface:#ffffff; --line:#e6e2d8; --line-2:#d8d3c6;
  --ink:#1a2233; --ink-2:#4c5568; --ink-3:#8a8fa0;
  --green:#0d7a55; --green-ink:#0a5f43; --green-soft:#e4f2ec; --green-line:#bfe0d2;
  --amber:#9a6a08; --amber-soft:#faf3e0; --red:#b23a44; --red-soft:#fbe9eb;
  --mono:"JetBrains Mono",ui-monospace,monospace;
  --disp:"Space Grotesk",system-ui,sans-serif;
  --body:"Inter",system-ui,sans-serif;
  --shadow:0 1px 2px rgba(26,34,51,.05), 0 12px 40px -18px rgba(26,34,51,.18);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; background:var(--bg); color:var(--ink); font:400 16px/1.65 var(--body); -webkit-font-smoothing:antialiased;}
h1,h2,h3{font-family:var(--disp); margin:0; text-wrap:balance;}
a{color:var(--green-ink); text-decoration:none;}
a:hover{text-decoration:underline;}
code{font-family:var(--mono); font-size:.86em;}
.wrap{max-width:1040px; margin:0 auto; padding:0 24px;}

/* top bar */
.bar{display:flex; align-items:center; justify-content:space-between; padding:20px 0;}
.brand{display:flex; align-items:center; gap:10px; font:600 1.02rem var(--disp); color:var(--ink);}
.brand .by{font:500 .66rem/1 var(--mono); color:var(--ink-3); letter-spacing:.08em; text-transform:uppercase; margin-left:4px; padding-top:6px;}
.bar nav{display:flex; gap:22px; font-size:.9rem; align-items:center;}
.bar nav a{color:var(--ink-2);}
@media(max-width:640px){.bar nav{display:none}}

/* hero */
.hero{padding:64px 0 26px; display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center;}
@media(max-width:880px){.hero{grid-template-columns:1fr; padding-top:40px;}}
.kicker{font:500 .72rem/1 var(--mono); letter-spacing:.16em; text-transform:uppercase; color:var(--green); margin-bottom:18px;}
.hero h1{font-size:clamp(2rem,4.6vw,3.05rem); line-height:1.12; font-weight:700;}
.hero h1 em{font-style:normal; color:var(--green-ink);}
.hero .sub{color:var(--ink-2); font-size:1.07rem; margin:20px 0 0; max-width:52ch;}
.cta{display:flex; gap:14px; margin-top:30px; flex-wrap:wrap;}
.btn{display:inline-block; font:600 .92rem/1 var(--body); padding:.85em 1.5em; border-radius:8px; border:0; cursor:pointer; transition:transform .18s ease, background .18s ease, border-color .18s ease;}
.btn-p{background:var(--ink); color:#fff;}
.btn-p:hover{transform:translateY(-1px); background:#2a3450; text-decoration:none;}
.btn-s{background:transparent; border:1px solid var(--line-2); color:var(--ink);}
.btn-s:hover{border-color:var(--green); text-decoration:none;}

/* card / panel */
.panel{background:var(--surface); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow);}

/* terminal (light) */
.term{overflow:hidden;}
.term .th{display:flex; align-items:center; gap:8px; padding:11px 16px; border-bottom:1px solid var(--line); background:var(--bg-2); border-radius:14px 14px 0 0;}
.term .dot{width:10px; height:10px; border-radius:50%; background:var(--line-2);}
.term .tt{font:500 .72rem/1 var(--mono); color:var(--ink-3); margin-left:6px;}
.term pre{margin:0; padding:18px 18px 20px; font:400 .8rem/1.75 var(--mono); color:var(--ink-2); overflow-x:auto;}
.term .c{color:var(--ink-3);} .term .g{color:var(--green-ink); font-weight:500;} .term .a{color:var(--amber);} .term .r{color:var(--red);}
.tline{opacity:0; transform:translateY(4px); transition:opacity .5s ease, transform .5s ease;}
.seen .tline{opacity:1; transform:none;}
.seen .tline:nth-child(1){transition-delay:.15s}.seen .tline:nth-child(2){transition-delay:.55s}
.seen .tline:nth-child(3){transition-delay:1.05s}.seen .tline:nth-child(4){transition-delay:1.55s}
.seen .tline:nth-child(5){transition-delay:2.05s}.seen .tline:nth-child(6){transition-delay:2.45s}
.seen .tline:nth-child(7){transition-delay:2.85s}.seen .tline:nth-child(8){transition-delay:3.2s}

/* doctrine strip */
.doctrine{margin:60px 0 0; padding:26px 30px;}
.doctrine .ladder{display:flex; flex-wrap:wrap; gap:10px 14px; align-items:center; font:500 .84rem/1.5 var(--mono);}
.doctrine .no{color:var(--ink-3); text-decoration:line-through; text-decoration-color:var(--red); text-decoration-thickness:2px;}
.doctrine .yes{color:var(--green-ink); font-weight:600;}
.doctrine .sep{color:var(--ink-3);}
.doctrine p{color:var(--ink-2); margin:14px 0 0; max-width:70ch; font-size:.95rem;}

/* sections */
section{padding:72px 0 0;}
.sec-k{font:500 .7rem/1 var(--mono); letter-spacing:.15em; text-transform:uppercase; color:var(--ink-3); margin-bottom:12px;}
section h2{font-size:1.68rem; font-weight:700;}
.sec-l{color:var(--ink-2); margin:14px 0 0; max-width:64ch;}

/* lifecycle rail — animated */
.life{margin-top:34px; position:relative;}
.life .track{display:grid; grid-template-columns:repeat(5,1fr); gap:0; border:1px solid var(--line); border-radius:14px; overflow:hidden; background:var(--surface); box-shadow:var(--shadow);}
@media(max-width:820px){.life .track{grid-template-columns:1fr;}}
.stage{padding:20px 18px 22px; border-right:1px solid var(--line); position:relative; transition:background .4s ease;}
.stage:last-child{border-right:none;}
@media(max-width:820px){.stage{border-right:none; border-bottom:1px solid var(--line);} .stage:last-child{border-bottom:none;}}
.stage .n{display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; border-radius:50%; border:2px solid var(--line-2); font:600 .72rem/1 var(--mono); color:var(--ink-3); transition:all .35s ease;}
.stage .t{font:600 .92rem/1.35 var(--disp); margin-top:10px;}
.stage .d{color:var(--ink-2); font-size:.8rem; margin-top:6px; line-height:1.5;}
.stage.on{background:var(--green-soft);}
.stage.on .n{border-color:var(--green); background:var(--green); color:#fff;}
.stage.on .t{color:var(--green-ink);}
.life .puck{position:absolute; top:-7px; left:0; width:14px; height:14px; border-radius:50%; background:var(--green); box-shadow:0 0 0 5px var(--green-soft); transition:left 1s cubic-bezier(.5,0,.3,1); opacity:0;}
.life.run .puck{opacity:1;}
@media(max-width:820px){.life .puck{display:none}}

/* product grid */
.grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:16px; margin-top:30px;}
.p{background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:22px; display:flex; flex-direction:column; gap:10px; box-shadow:var(--shadow); opacity:0; transform:translateY(14px); transition:opacity .55s ease, transform .55s ease, border-color .2s ease;}
.p.seen{opacity:1; transform:none;}
.p:hover{border-color:var(--green-line);}
.p .pk{font:500 .68rem/1 var(--mono); color:var(--green); letter-spacing:.1em; text-transform:uppercase;}
.p h3{font-size:1.05rem; font-weight:600;}
.p p{margin:0; color:var(--ink-2); font-size:.9rem;}
.p .st{margin-top:auto; padding-top:10px; font:500 .7rem/1 var(--mono); color:var(--ink-3);}
.p .st.live{color:var(--green-ink);}

/* honesty strip */
.honest{margin-top:30px; border-left:3px solid var(--amber); background:var(--amber-soft); border-radius:0 10px 10px 0; padding:14px 18px; color:var(--ink-2); font-size:.92rem; max-width:74ch;}
.honest strong{color:var(--amber); font-weight:600;}

/* modal */
dialog.modal{border:0; border-radius:16px; padding:0; max-width:480px; width:calc(100% - 40px); background:var(--surface); color:var(--ink); box-shadow:0 30px 90px -20px rgba(26,34,51,.4);}
dialog.modal::backdrop{background:rgba(26,34,51,.42); backdrop-filter:blur(3px);}
.m-h{display:flex; align-items:center; justify-content:space-between; padding:20px 24px 0;}
.m-h h3{font-size:1.12rem;}
.m-x{background:none; border:0; font-size:1.3rem; line-height:1; color:var(--ink-3); cursor:pointer; padding:4px 8px;}
.m-b{padding:14px 24px 24px;}
.m-b .lede{color:var(--ink-2); font-size:.9rem; margin:0 0 16px;}
.f-row{margin-bottom:12px;}
.f-row label{display:block; font:600 .78rem/1.4 var(--body); color:var(--ink-2); margin-bottom:5px;}
.f-row input,.f-row select,.f-row textarea{width:100%; font:400 .92rem/1.45 var(--body); color:var(--ink); background:var(--bg); border:1px solid var(--line-2); border-radius:8px; padding:.6em .8em;}
.f-row input:focus,.f-row select:focus,.f-row textarea:focus{outline:2px solid var(--green); outline-offset:0; border-color:var(--green);}
.f-hp{position:absolute; left:-9999px; opacity:0; height:0; overflow:hidden;}
.m-actions{display:flex; gap:10px; align-items:center; margin-top:16px;}
.m-note{font-size:.76rem; color:var(--ink-3); margin-top:12px;}
.m-ok{display:none; text-align:center; padding:10px 0 6px;}
.m-ok .tick{width:52px; height:52px; margin:0 auto 12px; border-radius:50%; background:var(--green-soft); display:flex; align-items:center; justify-content:center;}
.m-ok .ref{font:400 .76rem/1.6 var(--mono); color:var(--ink-3); word-break:break-all; margin-top:10px;}
.m-err{display:none; color:var(--red); background:var(--red-soft); border-radius:8px; padding:10px 14px; font-size:.85rem; margin-top:12px;}
.modal.done .m-form{display:none;}
.modal.done .m-ok{display:block;}

/* footer */
footer{margin-top:96px; border-top:1px solid var(--line); padding:34px 0 56px; color:var(--ink-3); font-size:.85rem;}
footer .cols{display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap;}
footer a{color:var(--ink-2);}

@media (prefers-reduced-motion: reduce){
  .tline,.p{opacity:1 !important; transform:none !important; transition:none !important;}
  .life .puck{display:none;}
  .btn{transition:none;}
  html{scroll-behavior:auto;}
}

/* ── buyer sections ─────────────────────────────────────────── */
.aud{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:16px; margin-top:30px;}
.a-card{background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:22px; box-shadow:var(--shadow); border-top:3px solid var(--green);}
.a-card .who{font:500 .68rem/1 var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--green);}
.a-card h3{font:600 1.05rem/1.3 var(--disp); margin:8px 0 0;}
.a-card p{color:var(--ink-2); font-size:.9rem; margin:.5em 0 0;}
.a-card ul{margin:.6em 0 0; padding-left:1.1em; color:var(--ink-2); font-size:.86rem;}
.a-card li{margin:.3em 0;}
.bene{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px; margin-top:28px;}
.b-item{border-left:3px solid var(--green); padding:2px 0 2px 16px;}
.b-item .bh2{font:600 .95rem/1.3 var(--disp);}
.b-item p{color:var(--ink-2); font-size:.86rem; margin:.35em 0 0;}
.faq{margin-top:26px; border:1px solid var(--line); border-radius:14px; background:var(--surface); box-shadow:var(--shadow); overflow:hidden;}
.faq details{border-bottom:1px solid var(--line);}
.faq details:last-child{border-bottom:none;}
.faq summary{cursor:pointer; list-style:none; padding:16px 20px; font:600 .95rem/1.4 var(--body); display:flex; justify-content:space-between; gap:14px; align-items:baseline;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"+"; font:500 1.1rem/1 var(--mono); color:var(--green); transition:transform .2s ease;}
.faq details[open] summary::after{transform:rotate(45deg);}
.faq .fa{padding:0 20px 18px; color:var(--ink-2); font-size:.9rem; max-width:70ch;}
/* interactive flow stepper */
.stepper{display:flex; gap:8px; margin-top:18px; flex-wrap:wrap;}
.stepper button{font:500 .78rem/1 var(--mono); padding:.6em 1em; border-radius:99px; border:1px solid var(--line-2); background:var(--surface); color:var(--ink-2); cursor:pointer; transition:all .18s ease;}
.stepper button.on{background:var(--green); border-color:var(--green); color:#fff;}
.step-out{margin-top:14px; background:var(--bg-2); border:1px solid var(--line); border-radius:10px; padding:14px 18px; font:400 .8rem/1.7 var(--mono); color:var(--ink-2); min-height:5.5em;}
.step-out .g{color:var(--green-ink); font-weight:500;} .step-out .a{color:var(--amber);}
.step-out{white-space:pre-line;}

/* mockups */
.mockrow{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:20px; margin-top:30px; align-items:start;}
.mock{position:relative;}
.mock .tag{position:absolute; top:-10px; right:14px; z-index:2; background:var(--amber-soft); color:var(--amber); font:600 .62rem/1 var(--mono); letter-spacing:.12em; padding:.4em .7em; border-radius:99px; text-transform:uppercase;}
.receipt{background:var(--surface); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow); padding:20px 22px;}
.receipt .rh2{display:flex; justify-content:space-between; align-items:baseline; border-bottom:1px dashed var(--line-2); padding-bottom:10px;}
.receipt .rh2 b{font:600 .95rem/1.3 var(--disp);}
.receipt .ok-chip{font:600 .66rem/1 var(--mono); background:var(--green-soft); color:var(--green-ink); padding:.4em .7em; border-radius:99px; letter-spacing:.08em;}
.receipt dl{display:grid; grid-template-columns:auto 1fr; gap:7px 16px; margin:14px 0 0; font-size:.82rem;}
.receipt dt{color:var(--ink-3); font:500 .7rem/1.9 var(--mono); text-transform:uppercase; letter-spacing:.06em;}
.receipt dd{margin:0; color:var(--ink-2); font-family:var(--mono); font-size:.78rem; word-break:break-all;}
.receipt .verify{margin-top:14px; padding-top:12px; border-top:1px dashed var(--line-2); display:flex; align-items:center; gap:10px; font-size:.8rem; color:var(--ink-2);}
.receipt .qr{width:44px; height:44px; flex:none; background:
  conic-gradient(var(--ink) 25%, transparent 0 50%, var(--ink) 0 75%, transparent 0) 0 0/14px 14px,
  var(--bg-2); border:3px solid var(--ink); border-radius:4px;}
.approve{background:var(--surface); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow); padding:18px 20px;}
.approve .ah{font:600 .68rem/1 var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3);}
.approve .act{margin-top:12px; font:600 .95rem/1.4 var(--disp);}
.approve .meta{color:var(--ink-2); font-size:.8rem; margin-top:6px; font-family:var(--mono);}
.approve .bar2{height:6px; border-radius:99px; background:var(--bg-2); margin-top:14px; overflow:hidden;}
.approve .bar2 i{display:block; height:100%; width:62%; background:var(--amber); border-radius:99px; animation:lease 6s linear infinite;}
@keyframes lease{from{width:92%} to{width:8%}}
.approve .btns{display:flex; gap:10px; margin-top:14px;}
.approve .ap{flex:1; text-align:center; font:600 .8rem/1 var(--body); padding:.7em 0; border-radius:8px; background:var(--green); color:#fff;}
.approve .dn{flex:1; text-align:center; font:600 .8rem/1 var(--body); padding:.7em 0; border-radius:8px; background:var(--red-soft); color:var(--red);}
/* roi + moat */
.roi{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:14px; margin-top:28px;}
.r-item{background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:18px 20px; box-shadow:var(--shadow);}
.r-item .rk{font:600 1.35rem/1.1 var(--disp); color:var(--green-ink);}
.r-item p{color:var(--ink-2); font-size:.84rem; margin:.5em 0 0;}
.moatwrap{overflow-x:auto; margin-top:28px; border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow);}
table.moat{border-collapse:collapse; width:100%; min-width:640px; background:var(--surface); font-size:.88rem;}
.moat th{font:600 .68rem/1.4 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); text-align:left; padding:12px 16px; border-bottom:1px solid var(--line);}
.moat td{padding:12px 16px; border-bottom:1px solid var(--line); color:var(--ink-2); vertical-align:top;}
.moat tr:last-child td{border-bottom:none;}
.moat td:first-child{font-weight:600; color:var(--ink); white-space:nowrap;}
.moat .us{background:var(--green-soft);}
@media (prefers-reduced-motion: reduce){ .approve .bar2 i{animation:none;} }