/* =========================================================================
   KPAppWorx — AI automation agency homepage
   Extends base.css / kp.css. Page-specific, namespaced .ag- / .ld- / .roi-
   Tokens come from base.css so light, dark and the theme toggle just work.
   ========================================================================= */

.ag-wrap{ max-width:1160px; margin:0 auto; padding-inline:var(--pad-x,24px); }
.ag-section{ padding-block:clamp(64px,9vw,112px); }
.ag-section + .ag-section:not(.ag-band){ border-top:1px solid var(--line); }
.ag-band{ background:var(--dk-bg); color:var(--dk-ink); border-top:0 !important; }
.ag-head{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,6fr); gap:clamp(24px,5vw,72px); align-items:end; margin-bottom:clamp(36px,5vw,56px); }
.ag-h2{ font-family:var(--font-display); font-weight:500; font-size:clamp(30px,4vw,46px); line-height:1.1; letter-spacing:-.018em; text-wrap:balance; }
.ag-lede{ font-size:17.5px; line-height:1.65; color:var(--ink-2); max-width:58ch; }
.ag-band .ag-lede{ color:var(--dk-mut); }
@media (max-width:860px){ .ag-head{ grid-template-columns:1fr; align-items:start; } }

/* ---------------- Hero ---------------- */
.ag-hero{ padding-block:clamp(48px,7vw,96px) clamp(56px,7vw,96px); }
.ag-hero-grid{ display:grid; grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr); gap:clamp(32px,5vw,72px); align-items:center; }
.ag-hero h1{ font-family:var(--font-display); font-weight:500; font-size:clamp(40px,5.6vw,72px); line-height:1.03; letter-spacing:-.025em; text-wrap:balance; }
.ag-hero-sub{ margin-top:24px; font-size:clamp(17px,1.6vw,19.5px); line-height:1.6; color:var(--ink-2); max-width:54ch; }
.ag-ctas{ margin-top:32px; display:flex; flex-wrap:wrap; gap:12px; }
.ag-facts{ margin-top:40px; padding-top:24px; border-top:1px solid var(--line); display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; font-size:14.5px; color:var(--ink-2); line-height:1.5; }
.ag-facts b{ display:block; color:var(--ink); font-weight:600; margin-bottom:2px; }
@media (max-width:960px){ .ag-hero-grid{ grid-template-columns:1fr; } }
@media (max-width:560px){ .ag-facts{ grid-template-columns:1fr; gap:14px; } }

/* ---------------- Lead demo (the memorable thing) ---------------- */
.ld{ background:var(--dk-bg); color:var(--dk-ink); border-radius:6px; box-shadow:var(--shadow-deep); border:1px solid var(--dk-line); overflow:hidden; font-size:14.5px; }
.ld-bar{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 18px; border-bottom:1px solid var(--dk-line); background:var(--dk-panel); }
.ld-title{ font-weight:600; font-size:13.5px; }
.ld-title span{ display:block; font-weight:400; color:var(--dk-mut); font-size:12.5px; margin-top:1px; }
.ld-clock{ font-family:var(--font-mono); font-size:22px; font-variant-numeric:tabular-nums; letter-spacing:.02em; color:var(--dk-good); min-width:4.2ch; text-align:right; }
.ld-feed{ padding:18px; display:flex; flex-direction:column; gap:12px; }
.ld-item{ animation:none; }
.ld[data-state="playing"] .ld-item:not(.is-on){ display:none; }
.ld[data-state="playing"] .ld-item.is-on{ animation:ld-in .35s var(--ease) both; }
@keyframes ld-in{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }
.ld-event{ font-family:var(--font-mono); font-size:12px; color:var(--dk-mut); display:flex; gap:10px; }
.ld-event time{ color:var(--dk-ink); font-variant-numeric:tabular-nums; min-width:3.4ch; }
.ld-sms{ align-self:flex-end; max-width:88%; background:#2a5d9f; color:#fff; padding:10px 13px; border-radius:14px 14px 3px 14px; line-height:1.45; }
.ld-sms small{ display:block; font-size:11.5px; opacity:.72; margin-top:4px; }
.ld-call{ border:1px solid var(--dk-line); border-radius:6px; background:var(--dk-panel); padding:12px 14px; display:grid; gap:10px; }
.ld-call-head{ display:flex; align-items:center; gap:10px; font-weight:600; font-size:13.5px; }
.ld-wave{ display:inline-flex; align-items:center; gap:2px; height:16px; }
.ld-wave i{ width:2px; height:5px; background:var(--dk-good); border-radius:1px; }
.ld[data-state="playing"] .ld-call.is-on .ld-wave i{ animation:ld-wave 1s ease-in-out infinite; }
.ld-wave i:nth-child(2){ animation-delay:.12s !important; } .ld-wave i:nth-child(3){ animation-delay:.24s !important; }
.ld-wave i:nth-child(4){ animation-delay:.36s !important; } .ld-wave i:nth-child(5){ animation-delay:.48s !important; }
@keyframes ld-wave{ 0%,100%{ height:4px; } 50%{ height:16px; } }
.ld-line{ line-height:1.45; color:var(--dk-ink); }
.ld-line b{ font-weight:600; color:var(--dk-mut); margin-right:6px; font-size:12.5px; }
.ld-line.is-ai b{ color:var(--dk-good); }
.ld-booked{ border:1px solid rgba(127,196,155,.4); background:rgba(127,196,155,.08); border-radius:6px; padding:13px 14px; display:grid; gap:4px; }
.ld-booked strong{ font-size:15px; color:var(--dk-good); }
.ld-booked span{ color:var(--dk-mut); font-size:13px; }
.ld-foot{ display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; padding:12px 18px; border-top:1px solid var(--dk-line); background:var(--dk-panel); }
.ld-note{ font-size:12.5px; color:var(--dk-mut); max-width:30ch; line-height:1.4; }
.ld-run{ background:var(--dk-ink); color:var(--dk-bg); font-weight:600; font-size:13.5px; padding:9px 16px; border-radius:4px; min-height:38px; }
.ld-run:hover{ opacity:.9; }
.ld-run:focus-visible{ outline:2px solid var(--dk-good); outline-offset:3px; }
@media (prefers-reduced-motion: reduce){ .ld-item, .ld[data-state="playing"] .ld-item.is-on, .ld-wave i{ animation:none !important; } }

/* ---------------- Cost of a slow reply (calculator) ---------------- */
.roi{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); border:1px solid var(--line-2); background:var(--surface); border-radius:6px; overflow:hidden; }
.roi-in{ padding:clamp(22px,3vw,36px); display:grid; gap:18px; align-content:start; }
.roi-in h3{ font-family:var(--font-display); font-weight:500; font-size:22px; }
.roi-field{ display:grid; gap:6px; }
.roi-field label{ font-weight:600; font-size:14.5px; }
.roi-field small{ color:var(--ink-3); font-size:13px; line-height:1.4; }
.roi-input{ display:flex; align-items:center; border:1px solid var(--line-2); border-radius:4px; background:var(--bg); padding-inline:12px; max-width:220px; }
.roi-input:focus-within{ outline:2px solid var(--accent); outline-offset:2px; }
.roi-input span{ color:var(--ink-3); }
.roi-input input{ border:0; background:transparent; padding:11px 8px; width:100%; font-variant-numeric:tabular-nums; font-size:16px; }
.roi-input input:focus{ outline:none; }
.roi-out{ padding:clamp(22px,3vw,36px); background:var(--dk-bg); color:var(--dk-ink); display:flex; flex-direction:column; justify-content:center; gap:14px; }
.roi-out p{ color:var(--dk-mut); font-size:14.5px; line-height:1.55; }
.roi-big{ font-family:var(--font-display); font-size:clamp(44px,6vw,68px); line-height:1; letter-spacing:-.02em; font-variant-numeric:tabular-nums; color:var(--dk-ink); }
.roi-rows{ display:grid; gap:0; margin-top:6px; border-top:1px solid var(--dk-line); }
.roi-rows div{ display:flex; justify-content:space-between; gap:16px; padding:10px 0; border-bottom:1px solid var(--dk-line); font-size:14.5px; color:var(--dk-mut); }
.roi-rows output{ color:var(--dk-ink); font-variant-numeric:tabular-nums; font-weight:600; text-align:right; }
.roi-fine{ font-size:12.5px !important; color:var(--dk-mut); }
@media (max-width:860px){ .roi{ grid-template-columns:1fr; } }

/* ---------------- Services: ruled rows, not cards ---------------- */
.ag-rows{ border-top:1px solid var(--line-2); }
.ag-row{ display:grid; grid-template-columns:minmax(0,4fr) minmax(0,5fr) minmax(0,5fr); gap:clamp(16px,4vw,48px); padding-block:32px; border-bottom:1px solid var(--line); }
.ag-row h3{ font-family:var(--font-display); font-weight:500; font-size:clamp(24px,2.6vw,30px); line-height:1.15; letter-spacing:-.01em; }
.ag-row p{ color:var(--ink-2); line-height:1.65; }
.ag-row ul{ list-style:none; display:grid; gap:8px; color:var(--ink-2); line-height:1.5; }
.ag-row li{ position:relative; padding-left:20px; }
.ag-row li::before{ content:""; position:absolute; left:0; top:.6em; width:10px; height:1px; background:var(--ink-3); }
@media (max-width:860px){ .ag-row{ grid-template-columns:1fr; gap:12px; } }

/* ---------------- Process (a true sequence) ---------------- */
.ag-steps{ list-style:none; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(20px,3vw,40px); counter-reset:step; }
.ag-steps li{ counter-increment:step; border-top:2px solid var(--ink); padding-top:18px; }
.ag-steps li::before{ content:counter(step); font-family:var(--font-display); font-size:34px; line-height:1; color:var(--ink-3); display:block; margin-bottom:14px; }
.ag-steps h3{ font-family:var(--font-display); font-weight:500; font-size:24px; margin-bottom:8px; }
.ag-steps p{ color:var(--ink-2); line-height:1.65; }
@media (max-width:860px){ .ag-steps{ grid-template-columns:1fr; } }

/* ---------------- Pricing ---------------- */
.ag-price{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); border:1px solid var(--line-2); border-radius:6px; background:var(--surface); }
.ag-price > div{ padding:clamp(24px,3.4vw,40px); }
.ag-price > div + div{ border-left:1px solid var(--line-2); }
.ag-price h3{ font-weight:600; font-size:15px; color:var(--ink-2); }
.ag-amt{ font-family:var(--font-display); font-size:clamp(42px,5vw,60px); line-height:1.05; letter-spacing:-.02em; margin:8px 0 4px; font-variant-numeric:tabular-nums; }
.ag-amt small{ font-family:var(--font); font-size:15px; color:var(--ink-3); letter-spacing:0; }
.ag-price ul{ list-style:none; margin-top:18px; display:grid; gap:9px; color:var(--ink-2); line-height:1.5; }
.ag-price li{ position:relative; padding-left:20px; }
.ag-price li::before{ content:""; position:absolute; left:0; top:.6em; width:10px; height:1px; background:var(--ink-3); }
.ag-fine{ margin-top:18px; font-size:14px; color:var(--ink-3); max-width:70ch; line-height:1.6; }
@media (max-width:760px){ .ag-price{ grid-template-columns:1fr; } .ag-price > div + div{ border-left:0; border-top:1px solid var(--line-2); } }

/* ---------------- Safeguards (definition list on dark band) ---------------- */
.ag-defs{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 clamp(28px,5vw,72px); }
.ag-defs div{ padding-block:24px; border-top:1px solid var(--dk-line); }
.ag-defs dt{ font-family:var(--font-display); font-weight:500; font-size:22px; margin-bottom:6px; color:var(--dk-ink); }
.ag-defs dd{ color:var(--dk-mut); line-height:1.65; }
@media (max-width:760px){ .ag-defs{ grid-template-columns:1fr; } }

/* ---------------- Who it's for ---------------- */
.ag-fit{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(20px,3vw,40px); }
.ag-fit h3{ font-family:var(--font-display); font-weight:500; font-size:23px; margin-bottom:8px; }
.ag-fit p{ color:var(--ink-2); line-height:1.65; }
@media (max-width:860px){ .ag-fit{ grid-template-columns:1fr; } }

/* ---------------- FAQ ---------------- */
.ag-faq{ border-top:1px solid var(--line-2); max-width:860px; }
.ag-faq details{ border-bottom:1px solid var(--line); }
.ag-faq summary{ list-style:none; cursor:pointer; display:flex; justify-content:space-between; gap:20px; align-items:flex-start; padding-block:22px; font-weight:600; font-size:17.5px; line-height:1.4; }
.ag-faq summary::-webkit-details-marker{ display:none; }
.ag-faq summary::after{ content:"+"; font-family:var(--font-mono); font-weight:400; font-size:22px; line-height:1; color:var(--ink-3); transition:transform .2s var(--ease); flex-shrink:0; }
.ag-faq details[open] summary::after{ transform:rotate(45deg); }
.ag-faq details p{ padding-bottom:24px; color:var(--ink-2); line-height:1.7; max-width:66ch; }
@media (prefers-reduced-motion: reduce){ .ag-faq summary::after{ transition:none; } }

/* ---------------- Closing CTA + sticky mobile bar ---------------- */
.ag-close{ background:var(--spot-bg); color:var(--spot-ink); padding-block:clamp(64px,9vw,112px); }
.ag-close h2{ font-family:var(--font-display); font-weight:500; font-size:clamp(32px,4.6vw,54px); line-height:1.08; letter-spacing:-.02em; max-width:18ch; text-wrap:balance; }
.ag-close p{ margin-top:18px; color:var(--spot-ink-2); font-size:18px; line-height:1.6; max-width:56ch; }
.ag-close .ag-ctas .btn-primary{ background:var(--spot-ink); color:var(--spot-bg); }
.ag-close .ag-ctas .btn-ghost{ color:var(--spot-ink); border-color:var(--spot-line); }
.ag-close .ag-ctas .btn-ghost:hover{ background:rgba(247,248,246,.08); }
.ag-sticky{ position:fixed; inset-inline:0; bottom:0; z-index:40; display:none; align-items:center; justify-content:space-between; gap:12px;
  padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px)); background:var(--header-bg); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-top:1px solid var(--line-2); transform:translateY(110%); transition:transform .25s var(--ease); }
.ag-sticky.show{ transform:none; }
.ag-sticky span{ font-weight:600; font-size:14.5px; line-height:1.3; }
@media (max-width:720px){ .ag-sticky{ display:flex; } body{ padding-bottom:0; } }
@media (prefers-reduced-motion: reduce){ .ag-sticky{ transition:none; } }

/* team */
.ag-team{ display:grid; grid-template-columns:1.2fr 1fr; gap:clamp(28px,5vw,72px); }
.ag-facts{ list-style:none; margin:0; padding:0; }
.ag-facts li{ padding-block:18px; border-top:1px solid var(--line); color:var(--ink-2); line-height:1.65; }
.ag-facts strong{ color:var(--ink); font-weight:600; }
.ag-tools{ border-top:1px solid var(--line); padding-top:18px; }
.ag-tools h3{ font-family:var(--font-display); font-weight:500; font-size:22px; margin-bottom:8px; }
.ag-tools p{ color:var(--ink-2); line-height:1.65; }
@media (max-width:860px){ .ag-team{ grid-template-columns:1fr; } }
.ag-team .ag-facts{ display:block; }
.ag-team .ag-facts li{ display:block; width:auto; }

/* control tower hero panel */
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.ct-status{ margin-top:28px; padding-top:20px; border-top:1px solid var(--line); color:var(--ink-2); line-height:1.6; max-width:52ch; }
.ct-status b{ color:var(--ink); font-weight:600; }
.ct{ margin:0; background:var(--dk-bg); color:var(--dk-ink); border:1px solid var(--dk-line); border-radius:10px; box-shadow:var(--shadow-deep); overflow:hidden; }
.ct-bar{ display:flex; justify-content:space-between; align-items:center; gap:12px; padding:16px 20px; border-bottom:1px solid var(--dk-line); font-size:14px; font-weight:600; }
.ct-flag{ font-family:var(--font-mono); font-size:12px; font-weight:500; color:#f2b8a2; border:1px solid #7a4a3a; border-radius:4px; padding:3px 8px; white-space:nowrap; }
.ct-table{ width:100%; border-collapse:collapse; font-size:13.5px; }
.ct-table th{ text-align:left; font-weight:500; color:var(--dk-mut); padding:10px 20px; border-bottom:1px solid var(--dk-line); }
.ct-table td{ padding:10px 20px; border-bottom:1px solid var(--dk-line); font-variant-numeric:tabular-nums; }
.ct-table td:nth-child(3){ font-family:var(--font-mono); }
.ct-table th:nth-child(n+4), .ct-table td:nth-child(n+4){ text-align:right; }
.ct-table tr.is-rep td{ background:rgba(242,184,162,.10); }
.ct-table tr.is-rep td:nth-child(3){ color:#f2b8a2; }
.ct-alert{ display:grid; gap:4px; margin:16px 20px; padding:14px 16px; border:1px solid #7a4a3a; border-radius:8px; background:rgba(242,184,162,.06); }
.ct-alert span{ color:var(--dk-mut); font-size:14px; line-height:1.55; }
.ct figcaption{ padding:12px 20px 16px; color:var(--dk-mut); font-size:12.5px; line-height:1.5; border-top:1px solid var(--dk-line); }
@media (max-width:520px){ .ct-table th,.ct-table td{ padding:9px 10px; } .ct-table th:first-child,.ct-table td:first-child{ padding-left:14px; } .ct-bar,.ct-alert{ margin-inline:0; } .ct-alert{ margin:14px; } .ct-table{ font-size:12.5px; } }