/* Landing page only */
.hero{position:relative;background:var(--mist);overflow:hidden;padding:56px 0 72px}
.hero::after{content:"";position:absolute;right:-120px;top:-60px;width:520px;height:520px;background:radial-gradient(closest-side,rgba(107,79,187,.14),transparent);pointer-events:none}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:48px;align-items:center;position:relative;z-index:1}
@media (max-width:960px){.hero .wrap{grid-template-columns:1fr;gap:36px}}
.hero h1{font-size:clamp(3rem,8.5vw,6.2rem);font-weight:800;line-height:.9;letter-spacing:-.035em;margin:0 0 22px}
.hero h1 span{display:block}
.hero h1 span:last-child{color:var(--jac)}
.hero .lead{font-size:1.2rem;color:var(--ink-2);max-width:34ch;margin-bottom:26px}

.drop{background:#fff;border-radius:var(--r-lg);padding:18px;box-shadow:var(--shadow);max-width:520px}
.dz{display:grid;place-items:center;text-align:center;gap:6px;border:2px dashed #C8CFE0;border-radius:14px;padding:26px 16px;cursor:pointer;transition:border-color .15s,background .15s}
.dz:hover,.dz.over{border-color:var(--jac);background:var(--jac-soft)}
.dz strong{font:700 1.15rem var(--display)}
.dz .file-name{font-weight:600;color:var(--jac-deep)}
.drop .actions{display:grid;gap:10px;margin-top:14px}
.drop .alt{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:12px;font-size:.92rem}
.promise-line{display:flex;gap:18px;flex-wrap:wrap;margin-top:16px;font-size:.88rem;color:var(--ink-2)}
.promise-line span{display:inline-flex;gap:6px;align-items:center}
.promise-line svg{width:16px;height:16px;color:var(--green)}

/* Agent */
.agent{position:relative}
.agent .envelope-inner{padding:20px 20px 16px;min-height:430px;display:flex;flex-direction:column}
.agent-top{display:flex;align-items:center;gap:10px;padding-bottom:14px;border-bottom:1px solid var(--line-2);margin-bottom:14px}
.agent-top .who{font-weight:700;font-size:.95rem;line-height:1.2}
.agent-top .who small{display:block;font-weight:500;color:var(--muted)}
.live{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-size:.78rem;font-weight:700;color:var(--green)}
.live::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--green);animation:pulse 1.6s infinite}
@keyframes pulse{50%{opacity:.3}}
.agent .log{flex:1}
.favs{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0 0 30px}
.favs span{width:30px;height:30px;border-radius:8px;background:var(--mist);display:grid;place-items:center;opacity:0;transform:scale(.6);transition:all .3s cubic-bezier(.3,1.6,.5,1)}
.favs span.on{opacity:1;transform:none}
.favs img{width:18px;height:18px}
.agent-job{display:flex;gap:10px;align-items:center;margin:8px 0 0 30px;padding:10px 12px;border:1px solid var(--line-2);border-radius:12px;font-size:.9rem;opacity:0;transform:translateY(6px);transition:all .35s}
.agent-job.on{opacity:1;transform:none}
.agent-job img{width:20px;height:20px;border-radius:4px}
.agent-job b{display:block;line-height:1.25}
.agent-job .pct{margin-left:auto;font:800 1rem var(--display);color:var(--green)}
.agent-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:16px;padding-top:14px;border-top:1px solid var(--line-2)}
.stamp{position:relative;border:0;cursor:pointer;background:var(--red);color:#fff;font:800 1.05rem var(--display);padding:12px 20px;border-radius:6px;box-shadow:inset 0 0 0 3px #fff,0 0 0 2px var(--red);transform:rotate(-3deg);opacity:0;transition:opacity .3s, transform .3s}
.stamp.on{opacity:1;animation:stampIn .45s cubic-bezier(.2,1.8,.4,1)}
.stamp:hover{transform:rotate(0) scale(1.04)}
@keyframes stampIn{from{transform:rotate(-12deg) scale(1.6);opacity:0}}
.replay{font-size:.85rem}
.postmark{position:absolute;right:-18px;top:-26px;width:112px;height:112px;border:3px solid rgba(35,82,196,.55);border-radius:50%;display:grid;place-items:center;text-align:center;font:700 .72rem/1.25 var(--body);color:rgba(35,82,196,.75);transform:rotate(14deg);background:rgba(255,255,255,.6);pointer-events:none}
.postmark b{display:block;font:800 1rem var(--display)}
@media (max-width:600px){.postmark{right:-6px;top:-34px;width:92px;height:92px}}

/* Counters */
.proof{border-bottom:1px solid var(--line-2);padding:26px 0;background:#fff}
.proof .wrap{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.counters{display:flex;gap:40px;flex-wrap:wrap}
.counter b{display:block;font:800 2rem/1 var(--display)}
.counter span{color:var(--muted);font-size:.9rem}
.faces{display:flex;align-items:center;gap:12px;font-size:.92rem;color:var(--ink-2)}
.faces .stackf{display:flex}
.faces .stackf i{width:34px;height:34px;border-radius:50%;border:2px solid #fff;margin-left:-8px;display:grid;place-items:center;font:700 .78rem var(--body);font-style:normal;color:#fff}
.faces .stackf i:first-child{margin-left:0}

.sec{padding:84px 0}
.sec-mist{background:var(--mist)}
.sec-head{max-width:640px;margin-bottom:40px}
.sec-head p{font-size:1.1rem;color:var(--ink-2)}

/* How it works: a real sequence, so numbered */
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;counter-reset:s;border-top:2px solid var(--ink)}
.steps li{list-style:none;padding:22px 22px 0 0;counter-increment:s}
.steps li::before{content:counter(s);display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--ink);color:#fff;font:800 1.1rem var(--display);margin:-43px 0 18px}
.steps h3{margin-bottom:6px}
.steps p{color:var(--ink-2);font-size:.98rem}
@media (max-width:860px){.steps{grid-template-columns:1fr 1fr;row-gap:44px}}
@media (max-width:520px){.steps{grid-template-columns:1fr}}

/* Checks */
.checks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 48px}
.checks div{display:grid;grid-template-columns:28px 1fr;gap:12px;padding:16px 0;border-bottom:1px solid var(--line)}
.checks svg{width:24px;height:24px;color:var(--jac);margin-top:2px}
.checks b{display:block}
.checks span{color:var(--ink-2);font-size:.95rem}
@media (max-width:760px){.checks{grid-template-columns:1fr}}

/* Before / after */
.ba{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.ba .card{display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:center}
.ba ul{margin:0;padding-left:18px;font-size:.95rem}
@media (max-width:860px){.ba{grid-template-columns:1fr}.ba .card{grid-template-columns:1fr;justify-items:start}}

/* Stories */
.wins{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.win{background:#fff;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line-2)}
.win .sheet-mini{border-radius:0;box-shadow:none;height:230px;border-bottom:1px solid var(--line-2)}
.win .body{padding:18px}
.win .delta{font:800 1.15rem var(--display)}
.win .delta em{font-style:normal;color:var(--green)}
@media (max-width:900px){.wins{grid-template-columns:1fr}}

.quotes{columns:3 280px;column-gap:20px}
.quote{break-inside:avoid;background:#fff;border-radius:var(--r-lg);padding:22px;margin-bottom:20px;border:1px solid var(--line-2)}
.quote p{font-size:1.02rem;margin-bottom:16px}
.quote .who{display:flex;gap:12px;align-items:center;font-size:.9rem}
.quote .who i{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:#fff;font:700 .9rem var(--body);font-style:normal}
.quote .res{margin-top:12px}

.templates{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.templates a{text-decoration:none;color:var(--ink)}
.templates .sheet-mini{height:250px;transition:transform .2s}
.templates a:hover .sheet-mini{transform:translateY(-4px)}
.templates b{display:block;margin-top:10px}
@media (max-width:900px){.templates{grid-template-columns:repeat(2,minmax(0,1fr))}}

.ways{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.way{padding:24px;border-radius:var(--r-lg);border:1.5px solid var(--line)}
.way.feature{border-color:var(--jac);background:var(--jac-soft)}
@media (max-width:860px){.ways{grid-template-columns:1fr}}

.shield{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.flag{display:flex;gap:12px;align-items:flex-start;background:#fff;border-radius:var(--r);padding:14px 16px;margin-bottom:10px;border-left:4px solid var(--red)}
.flag.amber{border-left-color:var(--yellow)}
@media (max-width:860px){.shield{grid-template-columns:1fr}}

.nevers{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.nevers div{padding-top:16px;border-top:3px solid var(--green)}
@media (max-width:860px){.nevers{grid-template-columns:1fr 1fr}}

details.faq{border-bottom:1px solid var(--line);padding:18px 0}
details.faq summary{cursor:pointer;font:700 1.12rem var(--display);list-style:none;display:flex;justify-content:space-between;gap:16px}
details.faq summary::after{content:"+";font-size:1.5rem;line-height:1;color:var(--jac)}
details.faq[open] summary::after{content:"–"}
details.faq p{margin:12px 0 0;color:var(--ink-2)}

.final{background:var(--ink);color:#fff;padding:80px 0;text-align:center}
.final h2{font-size:clamp(2.2rem,5vw,3.6rem);margin-bottom:22px}
.placeholder-tag{display:inline-block;background:var(--yellow);color:var(--ink);font-size:.72rem;font-weight:700;padding:2px 8px;border-radius:4px;margin-left:8px;vertical-align:middle}