/* ============================================================
   DOCSHOUND — marketing home (warm + friendly, hound-forward)
   Inter + Geist Mono. Brand blue #1A73E8. Light, soft, cute.
   ============================================================ */

@font-face{font-family:"Inter";src:url("./fonts-dh/inter-latin.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Inter";src:url("./fonts-dh/inter-latin-ext.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap;unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:"Geist Mono";src:url("./fonts-dh/geist-mono-latin.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap;}

:root{
  --canvas:#FFFFFF; --wash:#F5F8FE; --surface:#FFFFFF; --surface-2:#F7F8FA; --surface-hover:#EEF1F6;
  --fg:#15213B; --fg-2:#51607A; --fg-muted:#8a94a6;
  --edge:#E7EBF2; --edge-strong:#D6DCE8; --edge-hover:#B7C0D2;
  --accent:#1A73E8; --accent-2:#4B93F0; --accent-hover:#145BB7; --tint:#E8F0FD; --tint-2:#EFF5FE;
  --amber:#F79E1B; --amber-t:#FDF0DA; --green:#56Bb45; --green-t:#E7F6E3; --green-strong:#3B7612;
  --purple:#9333EA; --purple-t:#F1E4FD; --teal:#1FC3E8; --teal-t:#DEF6FB; --pink:#F7B9C4;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Arial,sans-serif;
  --mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:20px;--s6:24px;--s7:32px;--s8:44px;--s9:64px;--s10:88px;--s11:116px;
  --maxw:1140px; --r-sm:8px; --r-md:12px; --r-lg:18px; --r-xl:26px;
  --shadow-sm:0 1px 2px rgba(21,33,59,.05);
  --shadow-card:0 1px 3px rgba(21,33,59,.06), 0 12px 28px -18px rgba(21,33,59,.28);
  --shadow-float:0 2px 6px rgba(21,33,59,.06), 0 30px 60px -28px rgba(26,115,232,.32);
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth;}
body{margin:0; background:var(--canvas); color:var(--fg); font-family:var(--sans);
  font-size:17px; line-height:1.55; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility;}
button,input,textarea,select{font-family:inherit;}
a{color:inherit; text-decoration:none;}
::selection{background:var(--accent); color:#fff;}
img,svg,iframe{display:block; max-width:100%;}
h1,h2,h3,h4{margin:0; letter-spacing:-.022em; font-weight:700; line-height:1.1;}
p{margin:0;}

/* ---------- primitives ---------- */
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 var(--s7);}
.btn{border:1.5px solid var(--edge-strong); background:var(--surface); color:var(--fg);
  padding:12px 20px; border-radius:999px; font-size:15.5px; font-weight:600; letter-spacing:-.01em;
  display:inline-flex; align-items:center; gap:9px; white-space:nowrap; cursor:pointer;
  transition:background .18s,border-color .18s,color .18s,transform .08s,box-shadow .18s;}
.btn:hover{background:var(--surface-hover); border-color:var(--edge-hover);}
.btn:active{transform:translateY(1px);}
.btn svg{width:17px; height:17px;}
.btn-primary{background:var(--accent); border-color:var(--accent); color:#fff; box-shadow:0 1px 2px rgba(26,115,232,.3), 0 10px 22px -12px rgba(26,115,232,.75);}
.btn-primary:hover{background:var(--accent-hover); border-color:var(--accent-hover); color:#fff; transform:translateY(-1px);}
.btn-lg{padding:15px 28px; font-size:16.5px;}
.btn-white{background:#fff; border-color:#fff; color:var(--accent);}
.btn-white:hover{background:#eaf1ff; border-color:#eaf1ff; color:var(--accent);}
.btn-line-light{background:transparent; border-color:rgba(255,255,255,.55); color:#fff;}
.btn-line-light:hover{background:rgba(255,255,255,.14); border-color:#fff; color:#fff;}
.eyebrow{font-size:15px; font-weight:600; color:var(--accent); letter-spacing:-.01em;}

/* ---------- top bar ---------- */
.topbar{position:sticky; top:0; z-index:50; height:66px; background:rgba(255,255,255,.9);
  backdrop-filter:saturate(150%) blur(8px); -webkit-backdrop-filter:saturate(150%) blur(8px);
  border-bottom:1px solid var(--edge); display:flex; align-items:center; justify-content:space-between; padding:0 var(--s7);}
.brandline{display:inline-flex; align-items:center; gap:9px; color:var(--fg);}
.brandline .logo{height:22px; width:auto;}
.nav{display:flex; align-items:center; gap:var(--s7);}
.nav a{font-size:15px; color:var(--fg-2); font-weight:500; transition:color .15s;}
.nav a:hover{color:var(--fg);}
.nav .nav-cta{color:#fff;}
.nav-drop{position:relative;}
.nav-droptrig{display:inline-flex; align-items:center; gap:5px; background:none; border:none; font-size:15px; font-family:inherit; font-weight:500; color:var(--fg-2); cursor:pointer; padding:0;}
.nav-droptrig:hover{color:var(--fg);}
.nav-droptrig svg{width:14px; height:14px; transition:transform .18s;}
.nav-drop.open .nav-droptrig svg{transform:rotate(180deg);}
.nav-menu{position:absolute; top:calc(100% + 15px); left:50%; transform:translateX(-50%) translateY(6px); min-width:252px; background:var(--surface); border:1px solid var(--edge); border-radius:var(--r-md); box-shadow:var(--shadow-card); padding:7px; opacity:0; visibility:hidden; transition:opacity .16s, transform .16s; z-index:60;}
.nav-menu::before{content:""; position:absolute; top:-22px; left:0; right:0; height:22px;}
.nav-drop:hover .nav-menu, .nav-drop.open .nav-menu, .nav-drop:focus-within .nav-menu{opacity:1; visibility:visible; transform:translateX(-50%) translateY(0);}
.nav-menu a{display:block; padding:9px 12px; border-radius:var(--r-sm); font-size:14.5px; color:var(--fg-2); white-space:nowrap;}
.nav-menu a:hover{background:var(--wash); color:var(--fg);}
.nav-menu a.generic{border-top:1px solid var(--edge); margin-top:4px; padding-top:11px; color:var(--fg); font-weight:500;}

/* ============================================================
   HERO  (masthead)
   ============================================================ */
.hero{position:relative; overflow:hidden; padding:var(--s10) 0 var(--s9);
  background:linear-gradient(180deg,var(--wash),#fff 78%);}
.hero-grid{display:grid; grid-template-columns:1.02fr .98fr; gap:var(--s8); align-items:center;}
.hero-copy .eyebrow{display:block; margin-bottom:var(--s4);}
.hero-title{font-size:clamp(40px,5.2vw,62px); color:var(--fg); margin-bottom:var(--s5); max-width:16ch;}
.hero-sub{font-size:clamp(18px,1.6vw,21px); line-height:1.5; color:var(--fg-2); max-width:50ch; margin-bottom:var(--s6);}
.hero-actions{display:flex; gap:var(--s3); flex-wrap:wrap;}
.hero-trust{margin-top:var(--s5); font-size:14.5px; color:var(--fg-muted); display:inline-flex; align-items:center; gap:8px;}
.hero-trust svg{width:17px; height:17px; color:var(--green-strong);}
.hero-art{position:relative; display:flex; align-items:center; justify-content:center; min-height:340px;}
.hero-art .blob{position:absolute; inset:6% 2% 6% 8%; background:radial-gradient(circle at 50% 45%, var(--tint) 0%, var(--tint-2) 55%, transparent 72%); border-radius:50%; z-index:0;}
.hero-art .props{position:absolute; inset:0; z-index:1;}
.hero-art .mascot{position:relative; z-index:2; width:min(100%,380px);}
.hero-art .mascot img, .hero-art .props img{width:100%; height:auto; display:block;}

/* ============================================================
   ONBOARDING MODULE  (dedicated, under masthead)
   ============================================================ */
.onb{background:var(--wash); border-top:1px solid var(--edge); border-bottom:1px solid var(--edge); padding:var(--s9) 0;}
.onb-head{text-align:center; max-width:640px; margin:0 auto var(--s7);}
.onb-head .eyebrow{display:block; margin-bottom:var(--s3);}
.onb-head h2{font-size:clamp(26px,3.2vw,38px); color:var(--fg);}
.onb-head p{font-size:17px; color:var(--fg-2); margin-top:var(--s3);}
.onb-card{background:var(--surface); border:1px solid var(--edge); border-radius:var(--r-xl); box-shadow:var(--shadow-card); overflow:hidden;}
.onb-bar{display:flex; align-items:center; gap:var(--s4); padding:var(--s5) var(--s6); border-bottom:1px solid var(--edge); background:var(--surface);}
.onb-bar .stepdot{display:flex; align-items:center; gap:9px; font-size:14px; color:var(--fg-muted); font-weight:500;}
.onb-bar .stepdot b{width:22px; height:22px; border-radius:50%; background:var(--surface-2); color:var(--fg-muted); border:1.5px solid var(--edge-strong); display:grid; place-items:center; font-size:12px; font-weight:700;}
.onb-bar .stepdot.on b{background:var(--accent); color:#fff; border-color:var(--accent);}
.onb-bar .stepdot.on{color:var(--fg);}
.onb-bar .line{flex:1; height:2px; background:var(--edge); border-radius:2px; position:relative; overflow:hidden;}
.onb-bar .line i{position:absolute; inset:0 100% 0 0; background:var(--accent); transition:right .35s ease;}
.onb-body{padding:var(--s7) var(--s7) var(--s8);}

/* step 1: tell us about your company */
.onb-step{display:none;} .onb-step.active{display:block;}
.onb-lead{display:flex; align-items:center; gap:var(--s4); margin-bottom:var(--s6);}
.onb-lead .ic{width:44px; height:44px; border-radius:12px; background:var(--tint); color:var(--accent); display:grid; place-items:center; flex:none;}
.onb-lead .ic svg{width:24px; height:24px;}
.onb-lead h3{font-size:21px;}
.onb-fields{display:grid; grid-template-columns:1fr 1fr; gap:var(--s5); align-items:end;}
.fld label{display:block; font-size:13px; font-weight:600; color:var(--fg-2); margin-bottom:7px;}
.fld input, .fld select{width:100%; background:var(--surface); border:1.5px solid var(--edge-strong); border-radius:var(--r-sm);
  padding:12px 14px; font-size:16px; color:var(--fg); transition:border-color .15s, box-shadow .15s;}
.fld input::placeholder{color:var(--fg-muted);}
.fld input:focus, .fld select:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 4px var(--tint);}
/* (onboarding chip-row + detected banner removed — replaced by the single combobox) */

/* step 2: recommended knowledge instances */
.rec-grid{display:grid; grid-template-columns:1fr 316px; gap:var(--s6); align-items:start;}
.rec-head{margin-bottom:var(--s5);}
.rec-head h3{font-size:21px; display:flex; align-items:center; gap:10px;}
.rec-head p{font-size:15px; color:var(--fg-2); margin-top:4px;}
.ki-list{display:flex; flex-direction:column; gap:var(--s4);}
.ki{display:grid; grid-template-columns:52px 1fr; gap:var(--s4); padding:var(--s5); border:1px solid var(--edge); border-radius:var(--r-lg); background:var(--surface); transition:border-color .15s, box-shadow .15s;}
.ki:hover{border-color:var(--accent-2); box-shadow:var(--shadow-sm);}
.ki-ic{width:48px; height:48px;}
.ki-ic svg{width:48px; height:48px;}
.ki-name{font-size:16.5px; font-weight:700; margin-bottom:3px;}
.ki-blurb{font-size:14.5px; color:var(--fg-2); margin-bottom:10px; line-height:1.45;}
.ingredients{display:flex; flex-wrap:wrap; gap:7px;}
.ing{display:inline-flex; align-items:center; gap:6px; font-size:12.5px; color:var(--fg-2); background:var(--surface-2); border:1px solid var(--edge); border-radius:7px; padding:5px 9px;}
.ing svg{width:14px; height:14px; color:var(--fg-muted);}
.ki-use{font-size:12.5px; color:var(--fg-muted); margin-top:9px;}
.ki-action{font-size:13.5px; color:var(--fg-2); margin-top:11px; display:flex; align-items:center; gap:9px; flex-wrap:wrap; line-height:1.4;}
.ki-action .tag{font-size:10.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--accent); background:var(--tint); border-radius:6px; padding:3px 8px; flex:none;}
.ki-use b{color:var(--fg-2); font-weight:600;}
/* right rail */
.rail{background:var(--wash); border:1px solid var(--edge); border-radius:var(--r-lg); padding:var(--s6);}
.rail h4{font-size:16px; margin-bottom:var(--s5);}
.rail-item{display:flex; gap:12px; margin-bottom:var(--s5);}
.rail-item:last-child{margin-bottom:0;}
.rail-item .ic{width:34px; height:34px; border-radius:9px; display:grid; place-items:center; flex:none;}
.rail-item .ic svg{width:19px; height:19px;}
.rail-item .t{font-size:14.5px; font-weight:600;}
.rail-item .d{font-size:13px; color:var(--fg-2); margin-top:2px; line-height:1.4;}
.rail-note{margin-top:var(--s5); padding-top:var(--s5); border-top:1px solid var(--edge); display:flex; gap:10px; align-items:flex-start; font-size:12.5px; color:var(--fg-2);}
.rail-note svg{width:18px; height:18px; color:var(--accent); flex:none;}

.onb-foot{display:flex; align-items:center; justify-content:space-between; gap:var(--s4); margin-top:var(--s7); padding-top:var(--s6); border-top:1px solid var(--edge);}
.onb-back{background:none; border:none; color:var(--fg-muted); font-size:15px; font-weight:500; cursor:pointer;}
.onb-back:hover{color:var(--fg);} .onb-back[hidden]{visibility:hidden;}
.onb-email{display:none; gap:10px; flex:1; max-width:420px;}
.onb-email.show{display:flex;}
.onb-email input{flex:1; border:1.5px solid var(--edge-strong); border-radius:999px; padding:12px 18px; font-size:15.5px;}
.onb-email input:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 4px var(--tint);}
.onb-err{color:#B3300F; font-size:13.5px; margin-top:var(--s3); min-height:16px; text-align:center;}
.onb-done{display:none; text-align:center; padding:var(--s7) var(--s4);}
.onb-done.show{display:block;}
.onb-done .face{width:72px; margin:0 auto var(--s4);}
.onb-done h3{font-size:24px; margin-bottom:var(--s3);}
.onb-done p{font-size:16px; color:var(--fg-2); max-width:44ch; margin:0 auto var(--s6);}

/* ============================================================
   SECTIONS
   ============================================================ */
.band{padding:var(--s10) 0;}
.band-wash{background:var(--wash);}
.sec-head{text-align:center; max-width:680px; margin:0 auto var(--s8);}
.sec-head h2{font-size:clamp(27px,3.3vw,40px); color:var(--fg);}
.sec-head p{font-size:17.5px; color:var(--fg-2); margin-top:var(--s3);}

/* 3 steps */
.simple{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s5);}
.simple .card{background:var(--surface); border:1px solid var(--edge); border-radius:var(--r-lg); padding:var(--s6); box-shadow:var(--shadow-sm);}
.simple .ic{width:46px; height:46px; border-radius:13px; display:grid; place-items:center; margin-bottom:var(--s4);}
.simple .ic svg{width:24px; height:24px;}
.simple .n{font-family:var(--mono); font-size:13px; color:var(--accent); font-weight:600;}
.simple h3{font-size:19px; margin:6px 0 8px;}
.simple p{font-size:15.5px; color:var(--fg-2); line-height:1.5;}

/* knowledge instances explainer */
.ki-explain{display:grid; grid-template-columns:1.1fr 1fr; gap:var(--s8); align-items:center;}
.ki-explain .copy h2{font-size:clamp(26px,3.2vw,38px); margin-bottom:var(--s4);}
.ki-explain .copy p{font-size:17px; color:var(--fg-2); margin-bottom:var(--s4);}
.ki-explain .examples{display:flex; flex-direction:column; gap:12px;}
.ki-explain .ex{display:flex; align-items:center; gap:13px; background:var(--surface); border:1px solid var(--edge); border-radius:var(--r-md); padding:13px 16px; box-shadow:var(--shadow-sm);}
.ki-explain .ex .ic{width:40px; height:40px; flex:none;}
.ki-explain .ex .ic svg{width:40px; height:40px;}
.ki-explain .ex .t{font-size:15.5px; font-weight:600;}
.ki-explain .ex .d{font-size:13.5px; color:var(--fg-muted);}

/* interactive demo */
.demo{display:grid; grid-template-columns:300px 1fr; gap:0; border:1px solid var(--edge); border-radius:var(--r-xl); overflow:hidden; box-shadow:var(--shadow-card); background:var(--surface);}
.demo-know{background:var(--wash); border-right:1px solid var(--edge); padding:var(--s6);}
.demo-know .lbl{font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--fg-muted); font-weight:600; margin-bottom:var(--s4);}
.demo-biz{display:flex; align-items:center; gap:10px; margin-bottom:var(--s5); font-weight:700; font-size:16px;}
.demo-biz .dot{width:30px; height:30px; border-radius:8px; background:var(--amber-t); color:var(--amber); display:grid; place-items:center;}
.demo-biz .dot svg{width:17px;height:17px;}
.know-item{display:flex; align-items:center; gap:11px; padding:11px; border:1px solid var(--edge); border-radius:var(--r-sm); background:var(--surface); margin-bottom:9px;}
.know-item .fi{width:26px; height:26px; flex:none;}
.know-item .fi svg{width:26px;height:26px;}
.know-item .t{font-size:13.5px; font-weight:600; line-height:1.2;}
.know-item .d{font-size:12px; color:var(--fg-muted);}
.demo-chat{display:flex; flex-direction:column; min-height:440px;}
.demo-chat .lbl{font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--fg-muted); font-weight:600; padding:var(--s6) var(--s6) 0;}
.chat-log{flex:1; padding:var(--s5) var(--s6); display:flex; flex-direction:column; gap:14px; overflow:hidden;}
.msg{display:flex; gap:10px; max-width:88%; animation:pop .25s ease;}
@keyframes pop{from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:none;}}
.msg .av{width:30px; height:30px; border-radius:50%; flex:none; overflow:hidden; background:var(--tint);}
.msg .av svg{width:30px; height:30px;}
.msg.me{margin-left:auto; flex-direction:row-reverse;}
.msg.me .av{background:var(--fg); color:#fff; display:grid; place-items:center;}
.msg.me .av svg{width:17px; height:17px;}
.bubble{background:var(--surface-2); border:1px solid var(--edge); border-radius:14px; padding:11px 14px; font-size:14.5px; line-height:1.45; color:var(--fg);}
.msg.me .bubble{background:var(--tint); border-color:#CFE0FB; color:var(--fg);}
.bubble .src{display:inline-flex; align-items:center; gap:7px; margin-top:9px; font-size:12px; color:var(--fg-2); background:var(--surface); border:1px solid var(--edge); border-radius:7px; padding:5px 9px;}
.bubble .src svg{width:13px; height:13px; color:#E0493B;}
.suggest{display:flex; flex-wrap:wrap; gap:8px; padding:0 var(--s6) var(--s5);}
.sg{border:1.5px solid var(--edge-strong); background:var(--surface); border-radius:999px; padding:8px 13px; font-size:13px; color:var(--fg-2); cursor:pointer; transition:all .14s;}
.sg:hover{border-color:var(--accent); color:var(--accent); background:var(--tint);}
.demo-input{display:flex; gap:10px; padding:var(--s5) var(--s6); border-top:1px solid var(--edge);}
.demo-input input{flex:1; border:1.5px solid var(--edge-strong); border-radius:999px; padding:11px 16px; font-size:14.5px;}
.demo-input input:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 4px var(--tint);}

/* use it yourself — 4 cards */
.use-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s4);}
.use{background:var(--surface); border:1px solid var(--edge); border-radius:var(--r-lg); padding:var(--s6); box-shadow:var(--shadow-sm);}
.use .ic{width:42px; height:42px; border-radius:12px; display:grid; place-items:center; margin-bottom:var(--s4);}
.use .ic svg{width:22px; height:22px;}
.use h3{font-size:16px; margin-bottom:6px;}
.use p{font-size:14px; color:var(--fg-2); line-height:1.45;}

/* what would you put in yours — characters */
.chars{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s5);}
.char{background:var(--surface); border:1px solid var(--edge); border-radius:var(--r-xl); padding:var(--s6); text-align:center; box-shadow:var(--shadow-sm);}
.char .art{height:150px; display:grid; place-items:center; margin-bottom:var(--s4);}
.char .art svg{height:150px; width:auto;}
.char h3{font-size:18px; margin-bottom:8px;}
.char p{font-size:14.5px; color:var(--fg-2); line-height:1.5;}

/* CTA band */
.cta{position:relative; overflow:hidden; background:linear-gradient(135deg,#1A73E8,#155ec1); color:#fff; padding:var(--s10) 0;}
.cta .wrap{position:relative; z-index:1; display:grid; grid-template-columns:1fr 280px; gap:var(--s8); align-items:center;}
.cta-copy .eyebrow{color:#bcd6fb; display:block; margin-bottom:var(--s3);}
.cta h2{font-size:clamp(30px,4vw,48px); color:#fff; margin-bottom:var(--s4); max-width:16ch;}
.cta p{font-size:18px; color:rgba(255,255,255,.85); max-width:44ch; margin-bottom:var(--s7);}
.cta-actions{display:flex; gap:var(--s3); flex-wrap:wrap; align-items:center;}
.cta-actions .nocc{font-size:13.5px; color:rgba(255,255,255,.8); display:inline-flex; align-items:center; gap:7px;}
.cta-actions .nocc svg{width:15px; height:15px;}
.cta-mascot{display:grid; place-items:center;} .cta-mascot img{width:min(100%,150px); height:auto;}
.cta .dots{position:absolute; right:-40px; top:-40px; width:260px; height:260px; opacity:.5; z-index:0;
  background-image:radial-gradient(rgba(255,255,255,.4) 2px, transparent 2px); background-size:22px 22px;}

/* footer */
.foot{padding:var(--s8) 0; background:var(--canvas); border-top:1px solid var(--edge);}
.foot-wrap{display:flex; align-items:center; justify-content:space-between; gap:var(--s5); flex-wrap:wrap;}
.foot-brand .logo{height:19px;}
.foot-tag{font-size:14px; color:var(--fg-muted);}
.foot-nav{display:flex; flex-wrap:wrap; gap:var(--s3) var(--s6);}
.foot-nav a{font-size:14px; color:var(--fg-2);} .foot-nav a:hover{color:var(--fg);}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:960px){
  .wrap,.topbar{padding-left:var(--s6); padding-right:var(--s6);}
  .hero-grid{grid-template-columns:1fr; gap:var(--s7);} .hero-art{order:-1; min-height:260px;}
  .hero-art .mascot{width:min(74%,300px);}
  .onb-fields{grid-template-columns:1fr;}
  .rec-grid{grid-template-columns:1fr;} .rail{order:-1;}
  .simple,.use-grid,.chars{grid-template-columns:1fr 1fr;}
  .ki-explain{grid-template-columns:1fr; gap:var(--s6);}
  .demo{grid-template-columns:1fr;} .demo-know{border-right:none; border-bottom:1px solid var(--edge);}
  .cta .wrap{grid-template-columns:1fr;} .cta-mascot{display:none;}
  .hero,.band,.onb{padding-top:var(--s9); padding-bottom:var(--s9);}
}
@media (max-width:620px){
  .onb-foot{flex-wrap:wrap; gap:var(--s3);}
  .onb-back{order:1;}
  .onb-email{max-width:none; width:100%; order:2;}
  .onb-foot .btn-primary{width:100%; justify-content:center; order:3;}
  body{font-size:16px;}
  .topbar{height:58px; padding:0 var(--s5);}
  .nav{gap:var(--s4);} .nav a:not(.nav-cta){display:none;} .nav-drop{display:none;}
  .wrap{padding:0 var(--s5);}
  .simple,.use-grid,.chars{grid-template-columns:1fr;}
  .onb-body{padding:var(--s6) var(--s5) var(--s7);}
  .foot-wrap{flex-direction:column; align-items:flex-start; gap:var(--s4);}
}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} *{transition:none!important; animation:none!important;} }

/* ====== What your hounds can do (module) ====== */
.kick{display:inline-flex; align-items:center; gap:7px; font-family:var(--sans); font-size:13px; font-weight:600; letter-spacing:.01em; color:var(--accent); background:var(--tint); border-radius:999px; padding:6px 14px 6px 11px; margin-bottom:var(--s4);}
.kick-paw{width:16px; height:16px; color:var(--accent); flex:none;}
.agents .sec-head{margin-bottom:var(--s7);}
.agent-cards{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s5); align-items:stretch;}
.agent-card{display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--edge); border-radius:var(--r-lg); padding:var(--s6); box-shadow:var(--shadow-sm);}
.agent-art{background:var(--wash); border-radius:var(--r-md); margin-bottom:var(--s5); overflow:hidden;}
/* subtle per-card brand tints so the three cards don't read identical */
.agent-cards .agent-card:nth-child(1) .agent-art{background:#eef3fd;}
.agent-cards .agent-card:nth-child(2) .agent-art{background:#edf7ef;}
.agent-cards .agent-card:nth-child(3) .agent-art{background:#fdf4e9;}
.agent-art img{width:auto; max-width:100%; height:auto; max-height:230px; display:block; margin:0 auto;}
.agent-card h3{font-size:20px; font-weight:700; margin-bottom:var(--s2);}
.agent-for{font-size:15px; color:var(--fg-2); margin-bottom:var(--s5); line-height:1.5;}
.agent-list{list-style:none; margin:0 0 var(--s5); padding:0; display:flex; flex-direction:column; gap:var(--s4); flex:1;}
.agent-list li{position:relative; padding-left:24px; font-size:14.5px; color:var(--fg-2); line-height:1.5;}
.agent-list li::before{content:""; position:absolute; left:0; top:6px; width:12px; height:12px; border-radius:50%; background:var(--tint); box-shadow:inset 0 0 0 2px var(--accent);}
.agent-list b{color:var(--fg); font-weight:600;}
.agent-out{font-size:15px; font-weight:600; color:var(--fg); border-top:1px solid var(--edge); padding-top:var(--s4); line-height:1.5;}
.agents-catchall{text-align:center; margin-top:var(--s8); display:flex; flex-direction:column; align-items:center; gap:var(--s4);}
.agents-catchall p{font-size:17.5px; color:var(--fg-2); max-width:54ch; margin:0;}
.agents-foot{text-align:center; margin-top:var(--s5); font-size:13.5px; color:var(--fg-muted);}

/* ====== Onboarding combobox (single industry input) ====== */
.fld.combo{position:relative;}
.combo-list{position:absolute; left:0; right:0; top:calc(100% + 5px); z-index:30; background:var(--surface); border:1px solid var(--edge); border-radius:var(--r-sm); box-shadow:var(--shadow-card); max-height:244px; overflow:auto; padding:5px;}
.combo-opt{display:block; width:100%; text-align:left; background:none; border:none; border-radius:6px; padding:10px 12px; font-size:15px; color:var(--fg); cursor:pointer;}
.combo-opt:hover,.combo-opt.active{background:var(--wash); color:var(--accent);}
.onb-confirm{display:flex; align-items:center; gap:8px; margin-top:var(--s4); font-size:14px; color:var(--green-strong); font-weight:500;}
.onb-confirm[hidden]{display:none;}
.onb-confirm svg{width:17px; height:17px; flex:none;}

@media (max-width:960px){ .agent-cards{grid-template-columns:1fr;} }

/* ===== hero industry input + reactive tags (dynamic landing pages) ===== */
.hero-try{margin:18px 0 10px;max-width:460px}
.hero-try-label{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;color:var(--accent);margin-bottom:8px}
.hero-try-label .kick-paw{width:16px;height:16px}
.hero-try-row{display:flex;gap:8px;align-items:stretch;max-width:480px;margin:0 0 8px}
.hero-try-row .combo{flex:1;margin:0}
.hero-try-row .combo input{width:100%}
.hero-try-row .btn{white-space:nowrap}
.hero-try-hint{display:block;font-size:14px;color:var(--fg-muted);margin:0 0 var(--s6)}
@media(max-width:520px){.hero-try-row{flex-wrap:wrap}.hero-try-row .btn{width:100%}}
.hero-tags{display:flex;flex-wrap:wrap;gap:7px;margin:2px 0 18px}
.hero-tags:empty{display:none}
.hero-tag{font-size:12px;font-weight:600;color:var(--ink);background:var(--tint);border:1px solid var(--edge);border-radius:999px;padding:4px 11px;white-space:nowrap}
.hero-title,.hero-sub,.eyebrow,[data-demointro]{transition:opacity .18s ease,color .18s ease}
@media(max-width:560px){ .hero-try{max-width:none} .hero-try-row{flex-wrap:wrap} .hero-try-row .btn{width:100%} }

/* ===== into the AI era band ===== */
.aiera{padding:48px 0;border-top:1px solid var(--edge);border-bottom:1px solid var(--edge)}
.aiera-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:44px;align-items:center}
.aiera-copy h2{margin:12px 0 12px;font-size:clamp(22px,3vw,30px);line-height:1.15}
.aiera-copy p{color:var(--muted,#51607a);font-size:16px;line-height:1.6;max-width:58ch}
.aiera-points{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.aiera-points li{display:flex;gap:12px;align-items:flex-start;font-size:15px;line-height:1.45}
.aiera-ic{flex:none;width:26px;height:26px;border-radius:8px;background:var(--green-t);color:var(--green-strong);display:grid;place-items:center}
.aiera-ic svg{width:15px;height:15px}
@media(max-width:820px){ .aiera-grid{grid-template-columns:1fr;gap:22px} }

/* ===== verticals list ===== */
.verticals-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
.vert-group h4{margin:0 0 10px;font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--accent)}
.vert-group ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.vert-group a{color:var(--ink);text-decoration:none;font-size:15px;padding:2px 0;display:inline-block}
.vert-group a:hover{color:var(--accent);text-decoration:underline}
@media(max-width:820px){ .verticals-grid{grid-template-columns:repeat(2,1fr)} }
@media(max-width:480px){ .verticals-grid{grid-template-columns:1fr} }

/* ===== peek banner (delayed slide-up) ===== */
.peekbar{position:fixed;left:50%;bottom:18px;transform:translate(-50%,170%);z-index:60;width:min(560px,calc(100vw - 28px));background:#fff;border:1px solid var(--edge);border-radius:16px;box-shadow:0 18px 50px -16px rgba(21,33,59,.4);padding:16px 18px;transition:transform .35s cubic-bezier(.2,.8,.2,1),opacity .35s ease;opacity:0}
.peekbar.show{transform:translate(-50%,0);opacity:1}
.peekbar-x{position:absolute;top:7px;right:10px;border:0;background:none;font-size:22px;line-height:1;color:var(--muted,#8a97ab);cursor:pointer;padding:4px}
.peekbar-label{display:inline-flex;align-items:center;gap:7px;font-size:14px;font-weight:600;color:var(--ink);margin-bottom:10px}
.peekbar-label .kick-paw{width:16px;height:16px;color:var(--accent)}
.peekbar-row{display:flex;gap:8px;align-items:stretch}
.peekbar-row .combo{flex:1;margin:0;position:relative}
.peekbar-row .combo input{width:100%}
.peekbar .combo-list{bottom:calc(100% + 6px);top:auto}
@media(max-width:480px){ .peekbar-row{flex-wrap:wrap} .peekbar-row .btn{width:100%} }