/* Homepage additions (October 2026): agent cards with live demos, systems strip, control,
   how it works, intro booking and FAQ. Built on the k- homepage language in design.css. */

/* Agent cards */
.k-does { list-style:none; margin:28px 0 0; padding:0; display:grid; gap:12px }
.k-does li { display:flex; gap:12px; align-items:flex-start; font:500 16px/1.5 var(--sans); color:#fff }
.k-does li::before { content:'\2713'; flex:none; width:22px; height:22px; margin-top:1px; border-radius:50%; background:rgba(95,211,193,.15); color:var(--mint); display:grid; place-items:center; font:700 12px/1 var(--sans) }
.k-see { display:inline-flex; align-items:center; gap:10px; min-height:48px; padding:12px 22px; border:1px solid rgba(255,255,255,.4); border-radius:6px; background:transparent; color:#fff; font:500 16px/1.2 var(--sans); cursor:pointer }
.k-see:hover { border-color:var(--mint); color:var(--mint) }
.k-see::after { content:'\2193'; font-size:15px }
.k-side .k-out { gap:16px 24px }

/* Live demos */
.k-demos { display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); gap:24px; margin-top:24px; align-items:stretch }
.k-demo { margin:0; display:flex; flex-direction:column; gap:14px; min-width:0; scroll-margin-top:96px }
.k-demo:focus { outline:none } .k-demo:focus-visible { outline:2px solid var(--mint); outline-offset:6px }
.k-demo-head { display:flex; justify-content:space-between; align-items:center; gap:12px; min-height:44px }
.k-demo-head .k-kicker { color:var(--mint) }
.k-play { display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:10px 16px; border:1px solid rgba(255,255,255,.3); border-radius:6px; background:transparent; color:#fff; font:500 14px/1 var(--sans); cursor:pointer }
.k-play:hover { border-color:var(--mint); color:var(--mint) }
.k-play .i-play, .k-play[aria-pressed="false"] .i-pause { display:none } .k-play[aria-pressed="false"] .i-play { display:inline }
.k-demo .d-mock { flex:1; display:flex; flex-direction:column; border-radius:8px; box-shadow:none }
.k-demo .d-app { flex:1; min-height:500px }
.k-demo .d-thread { font-size:14px }
.k-demo .d-ask { margin-top:auto }
.k-demo .d-mini.md > div { grid-template-columns:minmax(0,1.9fr) minmax(0,.9fr) minmax(0,1fr) minmax(0,.9fr); align-items:center }
.k-demo .d-mini.md > div:not(:first-child) span:last-child { font-weight:700 }
.k-demo .d-mini b { color:var(--emerald); margin-right:6px }
.k-demo .d-a p { margin:0 }
.k-demo-note { margin:0 !important; font:400 14px/1.5 var(--sans); color:#a9a9a9 }
/* Steps reveal only once the script runs, so without it the whole exchange is visible.
   Each step keeps its space while hidden, so the page never shifts as the demo plays. */
html.js .k-demo [data-step] { position:relative; opacity:0; transform:translateY(8px); transition:opacity .35s ease, transform .35s ease }
html.js .k-demo [data-step].is-on { opacity:1; transform:none }
html.js .k-demo [data-step].is-thinking { opacity:1; transform:none; background:transparent; box-shadow:none; color:transparent }
html.js .k-demo .is-thinking > * { visibility:hidden }
html.js .k-demo .is-thinking::after { content:''; position:absolute; left:0; top:0; width:52px; height:30px; border-radius:12px; background:#f1f1ee radial-gradient(circle,#8f9996 3px,transparent 3.5px) 0 50% / 13px 30px repeat-x; background-origin:content-box; padding:0 13px; box-sizing:border-box; animation:k-think 1s infinite ease-in-out }
.k-phone .is-thinking::after { background-color:#fff }
@keyframes k-think { 50% { opacity:.45 } }
@media (prefers-reduced-motion: reduce) { html.js .k-demo [data-step] { transition:none; transform:none } html.js .k-demo .is-thinking::after { animation:none } }

/* WhatsApp-style phone */
.k-phone { flex:1; display:flex; flex-direction:column; width:100%; max-width:380px; min-height:500px; margin:0 auto; border-radius:28px; border:8px solid #2b2b2b; background:#ece8df; overflow:hidden; color:var(--ink); font-family:var(--sans) }
.k-wa-head { display:flex; align-items:center; gap:10px; padding:12px 14px; background:#1f4f45; color:#fff }
.k-wa-head i { flex:none; width:34px; height:34px; border-radius:50%; background:var(--mint); color:var(--ink); display:grid; place-items:center; font:700 14px/1 var(--sans); font-style:normal }
.k-wa-head b { display:block; font:600 15px/1.2 var(--sans) } .k-wa-head small { display:block; font:400 12px/1.3 var(--sans); color:#cfe3de }
.k-wa-body { flex:1; display:flex; flex-direction:column; gap:8px; padding:14px 12px }
.k-wa { max-width:86%; margin:0 !important; padding:8px 11px 6px; border-radius:10px; font:400 14px/1.45 var(--sans); box-shadow:0 1px 1px rgba(0,0,0,.08) }
.k-wa.me { align-self:flex-end; background:#d6f2dc; border-top-right-radius:3px }
.k-wa.them { align-self:flex-start; background:#fff; border-top-left-radius:3px }
.k-wa small { display:block; margin-top:3px; text-align:right; font:400 11px/1.2 var(--sans); color:var(--muted) }
.k-wa.them small b { color:var(--emerald-deep); font-weight:600 }
.k-hand { align-self:stretch; margin:4px 0 0 !important; padding:10px 12px; border-radius:10px; background:#fff; border-left:3px solid var(--amber); font:400 13px/1.45 var(--sans); color:var(--body) }
.k-hand b { display:block; font:700 11px/1.3 var(--sans); letter-spacing:.08em; text-transform:uppercase; color:var(--amber) }
.k-wa-input { margin:0 10px 10px; padding:10px 14px; border-radius:999px; background:#fff; font:400 14px/1.2 var(--sans); color:var(--muted) }

/* Need another agent */
.k-more { margin-top:64px; padding-top:40px; border-top:1px solid rgba(255,255,255,.16); display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:24px 40px }
.k-more p { margin:0 !important; font:600 clamp(22px,2.2vw,28px)/1.3 var(--serif); color:#fff } .k-more p span { color:#a9a9a9 }
.k-more .k-btn { margin-top:0 }

/* Repeated call to action after a section */
.k-cta-row { margin-top:56px; display:flex; flex-wrap:wrap; align-items:center; gap:16px 28px }
.k-cta-row.c { justify-content:center } .k-cta-row .k-btn { margin-top:0 }
.k-cta-row p { margin:0 !important; font:400 16px/1.5 var(--sans); color:var(--body) } .k-dark .k-cta-row p { color:#c6c6c6 }
.k-cta-row p a { color:var(--emerald); text-decoration:underline; text-underline-offset:3px } .k-dark .k-cta-row p a { color:#fff }

/* Works with your systems */
.k-sys { list-style:none; margin:56px 0 0; padding:0; display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); border-top:1px solid #e0e0dc; border-left:1px solid #e0e0dc }
.k-sys li { display:flex; flex-direction:column; justify-content:center; gap:6px; min-height:108px; padding:20px; background:#fff; border-right:1px solid #e0e0dc; border-bottom:1px solid #e0e0dc; min-width:0 }
.k-sys b { font:600 19px/1.2 var(--serif); color:var(--ink); overflow-wrap:anywhere }
.k-sys span { font:600 11px/1.3 var(--sans); letter-spacing:.08em; text-transform:uppercase; color:var(--muted) }

/* How it works */
/* Subgrid lines up the visual, heading and text of all four steps */
.k-steps { grid-auto-rows:auto }
@supports (grid-template-rows:subgrid) { .k-steps li { display:grid; grid-row:span 4; grid-template-rows:subgrid; row-gap:0 } }
.k-steps .k-top { margin-bottom:24px }
.k-vis { margin:0 0 28px; padding:14px; min-height:156px; border:1px solid #e0e0dc; background:#fff; display:grid; align-content:start; gap:8px; font:500 13px/1.35 var(--sans); color:var(--body) }
.k-vis .h { font:700 11px/1.3 var(--sans); letter-spacing:.08em; text-transform:uppercase; color:var(--muted) }
.k-vis .r { display:flex; justify-content:space-between; align-items:center; gap:8px; padding:7px 9px; border:1px solid #ecebe6; background:#fcfbf8 }
.k-vis .ok { color:var(--emerald-deep); font-weight:700 } .k-vis .on { flex:none; width:30px; height:17px; border-radius:999px; background:var(--emerald); position:relative } .k-vis .on::after { content:''; position:absolute; top:2px; right:2px; width:13px; height:13px; border-radius:50%; background:#fff }
.k-vis .add { border-style:dashed; background:transparent; color:var(--muted) }
.k-vis .days { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:4px; text-align:center } .k-vis .days span { padding:6px 0; border:1px solid #ecebe6; font-size:12px } .k-vis .days .sel { background:var(--ink); border-color:var(--ink); color:#fff }
.k-vis .times { display:flex; flex-wrap:wrap; gap:4px } .k-vis .times span { padding:5px 8px; border:1px solid #ecebe6; font-size:12px } .k-vis .times .sel { border-color:var(--emerald); color:var(--emerald-deep); background:var(--emerald-soft); font-weight:700 }
.k-vis .due { padding:8px 9px; background:var(--emerald-soft); color:var(--emerald-deep); font-weight:700 }
.k-edge { list-style:none; margin:40px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:12px 32px }
.k-edge li { display:flex; gap:12px; align-items:flex-start; font:600 16px/1.5 var(--sans); color:var(--ink) }
.k-edge li::before { content:'\2713'; flex:none; width:22px; height:22px; border-radius:50%; background:var(--emerald-soft); color:var(--emerald); display:grid; place-items:center; font:700 12px/1 var(--sans); margin-top:1px }

/* Intro booking */
.k-book { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); border:1px solid #e0e0dc; scroll-margin-top:96px }
.k-book-main { padding:clamp(28px,4vw,48px); background:#fff }
.k-book-main .k-sub { margin:20px 0 0 !important; max-width:560px }
.k-cal { margin-top:32px; display:grid; gap:28px }
.k-cal fieldset { margin:0; padding:0; border:0; min-width:0 }
.k-cal legend { padding:0; margin-bottom:12px; font:600 14px/1.3 var(--sans); color:var(--ink) }
.k-slots { display:flex; flex-wrap:wrap; gap:8px }
.k-slot { position:relative }
.k-slot input { position:absolute; inset:0; opacity:0; margin:0; cursor:pointer }
.k-slot span { display:grid; place-items:center; min-width:64px; min-height:44px; padding:8px 12px; border:1px solid #d6d6d1; border-radius:6px; background:#fff; font:500 14px/1.25 var(--sans); color:var(--ink); text-align:center }
.k-slot.day span { min-width:72px; padding:8px 10px } .k-slot.day span small { display:block; font:500 12px/1.2 var(--sans); color:var(--muted) }
.k-slot:hover span { border-color:var(--emerald) }
.k-slot input:checked + span { background:var(--ink); border-color:var(--ink); color:#fff } .k-slot input:checked + span small { color:#c6c6c6 }
.k-slot input:focus-visible + span { outline:2px solid var(--emerald); outline-offset:2px }
.k-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px }
.k-field { display:grid; gap:8px; min-width:0 } .k-field.wide { grid-column:1 / -1 }
.k-field label { font:600 14px/1.3 var(--sans); color:var(--ink) } .k-field label small { font-weight:400; color:var(--muted) }
.k-field input, .k-field textarea { width:100%; min-height:48px; padding:12px 14px; border:1px solid #cfcfca; border-radius:6px; background:#fff; font:400 16px/1.4 var(--sans); color:var(--ink) }
.k-field textarea { min-height:88px; resize:vertical }
.k-field input:focus-visible, .k-field textarea:focus-visible { outline:2px solid var(--emerald); outline-offset:1px; border-color:var(--emerald) }
.k-cal .k-btn { margin-top:0; justify-self:start; border:0; cursor:pointer }
.k-cal-error { margin:0 !important; font:500 15px/1.4 var(--sans); color:#a33a24 }
.k-cal-note { margin:-12px 0 0 !important; font:400 14px/1.5 var(--sans); color:var(--muted); max-width:520px }
.k-cal-fallback { margin-top:28px !important; font:400 16px/1.6 var(--sans); color:var(--body) } .k-cal-fallback a { color:var(--emerald); text-decoration:underline }
html.js .k-cal-fallback, html:not(.js) .k-cal { display:none }
.k-agenda { padding:clamp(28px,4vw,48px); background:#191919; color:#fff }
.k-agenda .k-kicker { color:var(--mint) } .k-agenda .k-h3 { margin-top:16px; color:#fff }
.k-agenda ol { list-style:none; margin:32px 0 0; padding:0; display:grid; gap:0 }
.k-agenda li { display:grid; grid-template-columns:44px minmax(0,1fr); gap:12px; padding:18px 0; border-top:1px solid rgba(255,255,255,.14) }
.k-agenda li b { font:600 18px/1.3 var(--serif); color:var(--mint) }
.k-agenda li span { font:600 17px/1.35 var(--sans); color:#fff } .k-agenda li small { display:block; margin-top:4px; font:400 14.5px/1.5 var(--sans); color:#b9b9b9 }
.k-agenda .k-agenda-note { margin:24px 0 0 !important; font:400 14.5px/1.55 var(--sans); color:#b9b9b9 } .k-agenda .k-agenda-note a { color:#fff; text-decoration:underline; text-underline-offset:3px }

/* Homepage FAQ */
.k-faq { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.7fr); gap:40px 88px; align-items:start }
.k-faq .k-sub { margin:20px 0 0 !important }
.k-faq .d-faq details { border-radius:6px; border-color:#e0e0dc } .k-faq .d-faq summary { font-size:17px }
.k-faq .d-faq p a { color:var(--emerald); text-decoration:underline }

@media (max-width:1100px) { .k-sys { grid-template-columns:repeat(4,minmax(0,1fr)) } }
@media (max-width:959px) {
  .k-demos, .k-book, .k-faq { grid-template-columns:minmax(0,1fr) }
  .k-demos { gap:48px }
  .k-demo .d-app { min-height:0 }
}
@media (max-width:760px) {
  .k-sys { grid-template-columns:repeat(2,minmax(0,1fr)) } .k-sys li { min-height:88px; padding:16px }
  .k-fields { grid-template-columns:minmax(0,1fr) }
  .k-more .k-btn, .k-cta-row .k-btn, .k-cal .k-btn { width:100%; min-width:0 }
  .k-demo .d-mini.md { font-size:11.5px } .k-demo .d-mini.md > div { gap:6px; padding:7px 8px }
  .k-phone { min-height:0; border-width:6px; border-radius:22px }
}
@media(hover:none) { .k-see:hover, .k-play:hover { border-color:rgba(255,255,255,.4); color:#fff } }