/* KHAT homepage — focused product story.
   This layer is intentionally scoped so the shared product primitives remain
   reusable without turning the homepage into another one-off design system. */

.landing-v2{
  --home-shell:1160px;
  --home-section:clamp(72px,9vw,116px);
}

.landing-v2 .shell,
.landing-v2 .nav-in{max-width:var(--home-shell);}

.landing-v2 .sec{
  padding-block:var(--home-section);
  border-block-start:1px solid var(--rule);
}

.landing-v2 .sec:not(.hero):not(.close) .eyebrow::after{content:none;}
.landing-v2 .eyebrow{margin-block-end:var(--s4);}
.landing-v2 h2{max-width:20ch;}
.landing-v2 .lede{max-width:58ch;}

/* Header */
.landing-v2 .nav{
  background:color-mix(in srgb,var(--paper) 92%,transparent);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}

.landing-v2 .nav-in{min-height:68px;}
.landing-v2 .nav-links{gap:var(--s6);}
.landing-v2 .nav-links a{font-weight:500;}
.landing-v2 .nav-cta{gap:var(--s3);}

/* Hero */
.hv2-hero{
  padding-block:clamp(52px,7vw,88px) clamp(72px,9vw,112px);
  border-block-start:0!important;
}

.hv2-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:var(--s8);
  align-items:center;
}

@media(min-width:960px){
  .hv2-grid{grid-template-columns:minmax(0,.93fr) minmax(440px,1.07fr);gap:clamp(52px,6vw,88px);}
}

.hv2-copy h1{
  max-width:12ch;
  font-size:clamp(40px,5.6vw,68px);
  letter-spacing:-.025em;
}

.hv2-copy .sub{
  max-width:48ch;
  margin-block:var(--s5) 0;
  font-size:clamp(17px,1.5vw,20px);
  line-height:1.8;
  color:var(--ink-soft);
}

.hv2-actions{
  display:flex;
  flex-wrap:wrap;
  gap:var(--s3);
  align-items:center;
  margin-block-start:var(--s6);
}

.hv2-proof{
  display:flex;
  flex-wrap:wrap;
  gap:var(--s3) var(--s5);
  list-style:none;
  margin:var(--s5) 0 0;
  padding:0;
  color:var(--ink-soft);
  font-size:13.5px;
}

.hv2-proof li{display:flex;align-items:center;gap:8px;}
.hv2-proof li::before{
  content:"";
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--blue);
  flex:none;
}

/* A real product-shaped first-screen proof, not a decorative illustration. */
.product-board{
  overflow:hidden;
  background:var(--paper-pure);
  border:1px solid var(--rule);
  border-radius:calc(var(--r-lg) + 4px);
  box-shadow:0 24px 70px rgba(16,20,24,.08);
}

.pb-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--s4);
  padding:var(--s4) var(--s5);
  border-block-end:1px solid var(--rule);
}

.pb-title{font-size:14px;font-weight:600;}
.pb-date{font-family:var(--mo);font-size:11px;color:var(--grey);}
.pb-body{padding:var(--s5);}

.pb-metrics{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--s3);
}

.pb-metric{
  min-width:0;
  padding:var(--s4);
  background:var(--paper);
  border:1px solid var(--rule);
  border-radius:var(--r-md);
}

.pb-metric b{
  display:block;
  font-family:var(--mo);
  font-size:clamp(21px,2.8vw,30px);
  line-height:1.1;
  font-weight:500;
}

.pb-metric:first-child b{color:var(--blue);}
.pb-metric span{display:block;margin-block-start:7px;font-size:11.5px;line-height:1.45;color:var(--grey);}

.pb-focus{
  margin-block-start:var(--s4);
  border:1px solid var(--rule);
  border-radius:var(--r-md);
  overflow:hidden;
}

.pb-focus-head{
  display:flex;
  justify-content:space-between;
  gap:var(--s3);
  padding:var(--s3) var(--s4);
  border-block-end:1px solid var(--rule);
  font-size:12.5px;
  color:var(--ink-soft);
}

.pb-focus-head span:last-child{color:var(--blue);font-weight:600;}
.pb-row{
  display:grid;
  grid-template-columns:34px minmax(0,1fr) auto;
  gap:var(--s3);
  align-items:center;
  padding:var(--s3) var(--s4);
  border-block-end:1px solid var(--rule);
}
.pb-row:last-child{border-block-end:0;}
.pb-avatar{
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  border-radius:50%;
  background:var(--blue-tint);
  color:var(--blue-deep);
  font-size:11px;
  font-weight:600;
}
.pb-person b{display:block;font-size:13.5px;line-height:1.45;}
.pb-person span{display:block;font-size:11.5px;color:var(--grey);}
.pb-state{font-size:11.5px;color:var(--ink-soft);white-space:nowrap;}
.pb-state.hot{color:var(--error);font-weight:600;}
.pb-note{
  margin:var(--s4) 0 0;
  padding-inline-start:var(--s4);
  border-inline-start:2px solid var(--blue);
  font-size:12.5px;
  line-height:1.7;
  color:var(--ink-soft);
}

/* Quiet proof line */
.trust-line{
  display:grid;
  grid-template-columns:1fr;
  border-block:1px solid var(--rule);
}
@media(min-width:700px){.trust-line{grid-template-columns:repeat(3,1fr);}}
.trust-item{padding:var(--s5) 0;}
.trust-item + .trust-item{border-block-start:1px solid var(--rule);}
@media(min-width:700px){
  .trust-item{padding:var(--s5) var(--s6);}
  .trust-item:first-child{padding-inline-start:0;}
  .trust-item + .trust-item{border-block-start:0;border-inline-start:1px solid var(--rule);}
}
.trust-item b{display:block;font-size:15px;}
.trust-item span{display:block;margin-block-start:3px;color:var(--grey);font-size:13px;}

/* Product story */
.section-head{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--s4);
  align-items:end;
  margin-block-end:clamp(42px,6vw,72px);
}
@media(min-width:800px){
  .section-head{grid-template-columns:.9fr 1.1fr;gap:var(--s8);}
  .section-head .lede{margin:0;}
}

.story-list{border-block-start:1px solid var(--ink);}
.story{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--s6);
  padding-block:clamp(42px,6vw,72px);
  border-block-end:1px solid var(--rule);
  align-items:center;
}
@media(min-width:860px){
  .story{grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:clamp(52px,7vw,96px);}
  .story:nth-child(even) .story-copy{order:2;}
}
.story-index{
  display:block;
  margin-block-end:var(--s3);
  font-family:var(--mo);
  font-size:11px;
  color:var(--blue);
  letter-spacing:.1em;
}
.story h3{font-size:clamp(23px,3vw,32px);line-height:1.3;margin-block-end:var(--s4);}
.story-copy p{font-size:16px;line-height:1.8;color:var(--ink-soft);}
.story-result{
  display:flex;
  gap:var(--s3);
  align-items:flex-start;
  margin-block-start:var(--s5);
  padding-block-start:var(--s4);
  border-block-start:1px solid var(--rule);
  color:var(--ink);
  font-size:14px;
}
.story-result::before{
  content:"";
  width:8px;
  height:8px;
  margin-block-start:8px;
  border-radius:50%;
  background:var(--blue);
  flex:none;
}

.evidence-panel{
  background:var(--paper-pure);
  border:1px solid var(--rule);
  border-radius:var(--r-lg);
  padding:var(--s5);
}
.ep-head{
  display:flex;
  justify-content:space-between;
  gap:var(--s3);
  padding-block-end:var(--s4);
  margin-block-end:var(--s4);
  border-block-end:1px solid var(--rule);
  font-size:12.5px;
  color:var(--grey);
}
.ep-head b{color:var(--ink);font-size:13.5px;}
.watch-row{
  display:grid;
  grid-template-columns:minmax(84px,.7fr) minmax(110px,1fr) auto;
  gap:var(--s3);
  align-items:center;
  padding-block:10px;
  font-size:13px;
}
.watch-bar{height:6px;border-radius:var(--r-pill);background:var(--paper-deep);overflow:hidden;}
.watch-bar i{display:block;height:100%;border-radius:inherit;background:var(--ink);}
.watch-row.warn .watch-bar i{background:var(--blue);}
.watch-row span:last-child{font-family:var(--mo);font-size:11.5px;color:var(--grey);direction:ltr;}
.verdict-card{padding:var(--s4);border:1px solid var(--rule);border-radius:var(--r-md);}
.verdict-card + .verdict-card{margin-block-start:var(--s3);}
.verdict-card strong{display:block;font-size:14px;}
.verdict-card p{margin:5px 0 0;font-size:12.5px;color:var(--ink-soft);line-height:1.65;}
.verdict-card.primary{border-color:var(--blue);background:var(--blue-tint);}
.verdict-card.primary strong{color:var(--blue-deep);}
.action-flow{display:grid;gap:var(--s3);}
.action-step{display:grid;grid-template-columns:28px 1fr;gap:var(--s3);align-items:start;}
.action-step i{
  display:grid;
  place-items:center;
  width:28px;
  height:28px;
  border-radius:50%;
  background:var(--paper-deep);
  color:var(--ink-soft);
  font-family:var(--mo);
  font-size:10px;
  font-style:normal;
}
.action-step:first-child i{background:var(--blue);color:#fff;}
.action-step b{display:block;font-size:13.5px;}
.action-step span{display:block;font-size:12px;color:var(--grey);}

/* Progressive disclosure */
.capability-wrap{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--s7);
}
@media(min-width:900px){.capability-wrap{grid-template-columns:.72fr 1.28fr;gap:var(--s9);}}
.capability-copy{align-self:start;}
@media(min-width:900px){.capability-copy{position:sticky;top:calc(var(--navh) + var(--s6));}}
.capability-copy p{color:var(--ink-soft);}
.capability-list{border-block-start:1px solid var(--ink);}
.capability-list details{border-block-end:1px solid var(--rule);}
.capability-list summary{padding-block:var(--s5);font-size:18px;}
.capability-list .ans{padding-block-end:var(--s5);}
.capability-list ul{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--s3);
  margin:0;
  padding:0;
  list-style:none;
}
@media(min-width:620px){.capability-list ul{grid-template-columns:1fr 1fr;gap:var(--s3) var(--s6);}}
.capability-list li{
  position:relative;
  padding-inline-start:18px;
  color:var(--ink-soft);
  font-size:14.5px;
  line-height:1.65;
}
.capability-list li::before{
  content:"";
  position:absolute;
  inset-inline-start:0;
  top:11px;
  width:7px;
  height:2px;
  background:var(--blue);
}

/* Live demo */
.demo-band{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--s6);
  padding:clamp(30px,5vw,56px);
  border-radius:calc(var(--r-lg) + 4px);
  background:var(--ink);
  color:#fff;
}
@media(min-width:820px){.demo-band{grid-template-columns:1fr auto;align-items:center;gap:var(--s8);}}
.demo-band .eyebrow{color:#9EB2FF;}
.demo-band h2{color:#fff;margin-block-end:var(--s3);}
.demo-band p{margin:0;color:#C8CDD2;font-size:15.5px;}
.demo-band .btn{min-width:210px;background:#fff;color:var(--ink);}
.demo-band .btn:hover{background:var(--blue-tint);border-color:var(--blue-tint);}

/* Setup */
.setup-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--s5);
  margin-block-start:var(--s7);
  counter-reset:setup;
}
@media(min-width:760px){.setup-grid{grid-template-columns:repeat(3,1fr);gap:var(--s7);}}
.setup-step{
  counter-increment:setup;
  padding-block-start:var(--s5);
  border-block-start:2px solid var(--ink);
}
.setup-step::before{
  content:"0" counter(setup);
  display:block;
  margin-block-end:var(--s4);
  color:var(--blue);
  font-family:var(--mo);
  font-size:12px;
}
.setup-step h3{font-size:18px;}
.setup-step p{margin:0;font-size:14.5px;color:var(--ink-soft);}

/* Pricing refinements */
.landing-v2 .plans{margin-block-start:var(--s5);}
.landing-v2 .plan{padding:var(--s6);}
.landing-v2 .plan .promise{min-height:3.2em;}
.plan-note{
  margin-block-start:var(--s5);
  padding:var(--s4) var(--s5);
  border:1px solid var(--rule);
  border-radius:var(--r-md);
  background:var(--paper-pure);
  color:var(--ink-soft);
  font-size:13.5px;
}

/* FAQ and close */
.faq-layout{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--s7);
}
@media(min-width:850px){.faq-layout{grid-template-columns:.7fr 1.3fr;gap:var(--s9);}}
.faq-layout .faq{margin-block-start:0;}
.final-panel{
  padding:clamp(40px,7vw,84px) clamp(22px,5vw,64px);
  background:var(--paper-pure);
  border:1px solid var(--rule);
  border-radius:calc(var(--r-lg) + 4px);
  text-align:center;
}
.final-panel h2{max-width:18ch;margin-inline:auto;}
.final-panel p{max-width:52ch;margin-inline:auto;color:var(--ink-soft);}
.final-panel .cta-row{justify-content:center;margin-block-start:var(--s6);}
.final-note{margin-block-start:var(--s4)!important;font-size:13px;color:var(--grey)!important;}

/* Footer */
.landing-v2 footer{padding-block-end:calc(var(--s8) + env(safe-area-inset-bottom,0px));}

@media(max-width:640px){
  .landing-v2 .sec{padding-block:64px;}
  .hv2-hero{padding-block-start:32px!important;}
  .hv2-copy h1{font-size:36px;line-height:1.18;}
  .hv2-copy .sub{font-size:16px;line-height:1.72;margin-block-start:var(--s4);}
  .hv2-actions .btn{width:100%;}
  .hv2-proof{display:grid;gap:10px;}
  .pb-body{padding:var(--s4);}
  .pb-top{padding-inline:var(--s4);}
  .pb-metric{padding:var(--s3);}
  .pb-metric span{font-size:10.5px;}
  .pb-row{grid-template-columns:30px minmax(0,1fr);padding-inline:var(--s3);}
  .pb-avatar{width:30px;height:30px;}
  .pb-state{grid-column:2;}
  .watch-row{grid-template-columns:82px 1fr;}
  .watch-row span:last-child{grid-column:2;}
  .story{gap:var(--s5);}
  .demo-band .btn{width:100%;}
}

@media(prefers-reduced-motion:no-preference){
  .product-board{animation:board-in .55s cubic-bezier(.22,1,.36,1) both;}
  .hv2-copy{animation:copy-in .45s ease-out both;}
}

@keyframes board-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes copy-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}