/* ============================================================
   KNGS Landing — Cohere-style DESIGN.md implementation
   Tokens follow: VoltAgent/awesome-design-md/design-md/cohere
   ============================================================ */

:root{
  /* Colors */
  --primary:#17171c;
  --black:#000000;
  --ink:#212121;
  --deep-green:#003c33;
  --dark-navy:#071829;
  --canvas:#ffffff;
  --soft-stone:#eeece7;
  --pale-green:#edfce9;
  --pale-blue:#f1f5ff;
  --hairline:#d9d9dd;
  --border-light:#e5e7eb;
  --card-border:#f2f2f2;
  --muted:#93939f;
  --slate:#75758a;
  --body-muted:#616161;
  --action-blue:#1863dc;
  --focus-blue:#4c6ee6;
  --coral:#ff7759;
  --coral-soft:#ffad9b;
  --on-primary:#ffffff;
  --on-dark:#ffffff;

  /* Radius */
  --r-xs:4px; --r-sm:8px; --r-md:16px; --r-lg:22px; --r-xl:30px; --r-pill:32px; --r-full:9999px;

  /* Font stacks (Cohere fallbacks) */
  --ff-display:"Space Grotesk", Inter, "Pretendard", "Apple SD Gothic Neo", ui-sans-serif, system-ui, sans-serif;
  --ff-body:Inter, "Pretendard", "Apple SD Gothic Neo", Arial, ui-sans-serif, system-ui, sans-serif;
  --ff-mono:"JetBrains Mono", "SF Mono", ui-monospace, Menlo, Consolas, monospace;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--canvas); color:var(--ink);
  font-family:var(--ff-body); font-size:16px; line-height:1.5;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:none;background:none}
hr{border:none;border-top:1px solid var(--hairline);margin:20px 0}

.container{max-width:1240px;margin:0 auto;padding:0 28px}

/* ============ Typography utilities ============ */
.display{
  font-family:var(--ff-display);
  font-weight:400;
  font-size:clamp(48px, 8vw, 96px);
  line-height:1;
  letter-spacing:-0.02em;
  color:var(--primary);
  margin:0 0 28px;
}
.display-em{color:var(--ink); position:relative}
.display-em::after{
  content:"";display:inline-block;width:.32em;height:.32em;border-radius:50%;
  background:var(--coral);margin-left:.12em;vertical-align:.1em;
}
.section-display{
  font-family:var(--ff-display); font-weight:400;
  font-size:clamp(36px, 5.5vw, 60px); line-height:1;
  letter-spacing:-0.02em; margin:0 0 18px; color:var(--primary);
}
.section-heading{
  font-family:var(--ff-display); font-weight:400;
  font-size:clamp(32px, 4.2vw, 48px); line-height:1.2;
  letter-spacing:-0.01em; margin:0 0 18px; color:var(--primary);
}
.card-h{
  font-family:var(--ff-display); font-weight:400;
  font-size:clamp(22px, 2.2vw, 32px); line-height:1.2;
  letter-spacing:-0.01em; margin:0 0 8px; color:var(--ink);
}
.band-display{
  font-family:var(--ff-display); font-weight:400;
  font-size:clamp(34px, 5vw, 60px); line-height:1.05;
  letter-spacing:-0.02em; margin:0 0 18px;
}
.band-h{
  font-family:var(--ff-display); font-weight:400;
  font-size:24px; line-height:1.3; margin:0 0 6px; color:var(--on-dark);
}
.foot-h{
  font-family:var(--ff-display); font-weight:400;
  font-size:clamp(26px, 3vw, 36px); line-height:1.1; letter-spacing:-0.01em;
  margin:14px 0 8px; color:var(--on-dark);
}
.lede{
  font-size:18px; line-height:1.5; color:var(--body-muted);
  max-width:640px; margin:0 0 32px;
}
.body-large{font-size:18px; line-height:1.55; color:var(--ink); margin:0 0 18px}
.muted{color:var(--body-muted); margin:0}
.mono-label{
  font-family:var(--ff-mono); font-size:12.5px; font-weight:500;
  letter-spacing:0.18em; text-transform:uppercase;
  color:var(--slate); margin:0 0 14px;
}
.mono-label.light{color:var(--pale-green)}
.mono-label.coral{color:var(--coral)}
.mono-label.muted-light{color:#7e9b95}

/* ============ Announcement bar ============ */
.announcement{background:var(--black); color:var(--on-dark)}
.ann-inner{
  height:36px; display:flex; align-items:center; justify-content:center; gap:14px;
  font-family:var(--ff-body); font-size:12.5px; line-height:1.4;
}
.ann-text{color:#dcdce0}
.ann-link{color:#fff; text-decoration:underline; text-underline-offset:3px}
.ann-link:hover{color:var(--coral-soft)}

/* ============ Top nav ============ */
.topnav{
  position:sticky; top:0; z-index:50; background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(12px); -webkit-backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid transparent; transition:border-color .2s;
}
.topnav.scrolled{border-bottom-color:var(--hairline)}
.nav-inner{display:grid; grid-template-columns:1fr auto 1fr; align-items:center; height:64px; gap:20px}
.brand{display:flex; align-items:center; gap:10px; font-family:var(--ff-display); font-size:18px; letter-spacing:-0.01em}
.brand-mark{
  width:32px; height:32px; border-radius:8px; background:var(--primary);
  color:#fff; display:inline-flex; align-items:center; justify-content:center;
  font-size:13px; font-family:var(--ff-mono); font-weight:500; letter-spacing:0.04em;
}
.brand-word{color:var(--primary)}
.nav-center{display:flex; gap:28px; justify-self:center}
.nav-center a{font-size:14px; color:var(--ink); padding:8px 0}
.nav-center a:hover{color:var(--primary); text-decoration:underline; text-underline-offset:5px}
.nav-right{display:flex; align-items:center; gap:18px; justify-self:end}
.nav-link{font-size:14px; color:var(--ink)}
.nav-link:hover{text-decoration:underline; text-underline-offset:4px}

/* ============ Buttons ============ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  font-family:var(--ff-body); font-size:14px; font-weight:500; line-height:1.71;
  padding:12px 24px; border-radius:var(--r-pill); white-space:nowrap;
  transition:transform .12s ease, background .2s, color .2s, border-color .2s;
}
.btn-primary{background:var(--primary); color:var(--on-primary)}
.btn-primary:hover{background:#000; transform:translateY(-1px)}
.btn-on-dark{background:#fff; color:var(--primary)}
.btn-on-dark:hover{background:#f4f4f4}
.btn-link{
  font-size:14px; color:var(--ink); padding:8px 0;
  border-bottom:1px solid var(--ink); align-self:center;
}
.btn-link:hover{color:var(--primary); border-bottom-color:var(--primary)}
.pill-out{
  display:inline-block; font-family:var(--ff-body); font-size:13.5px; font-weight:500;
  color:var(--primary); border:1px solid var(--primary);
  border-radius:var(--r-xl); padding:6px 14px;
  transition:background .2s, color .2s;
}

/* ============ Hero ============ */
.hero{padding:88px 0 120px}
.hero .mono-label{margin-bottom:22px}
.hero-actions{display:flex; gap:22px; align-items:center; flex-wrap:wrap; margin-bottom:72px}

.hero-media{
  display:grid; grid-template-columns:1.4fr 1fr; gap:18px;
}
@media (max-width:880px){.hero-media{grid-template-columns:1fr}}

.photo-card{
  background:var(--canvas); border-radius:var(--r-lg); overflow:hidden;
  border:1px solid var(--card-border); display:grid; grid-template-rows:auto 1fr;
}
.photo-card-inner{padding:26px 28px}
.photo-card-frame{padding:0 18px 18px}
.photo-card-frame svg{width:100%; height:auto; border-radius:var(--r-md)}

/* Agent console */
.console-card{
  background:var(--primary); color:var(--on-dark); border-radius:var(--r-sm);
  padding:0; overflow:hidden; display:flex; flex-direction:column;
  font-family:var(--ff-mono); font-size:13px; line-height:1.6;
}
.console-head{
  display:flex; align-items:center; gap:8px; padding:14px 18px;
  border-bottom:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.02);
}
.console-head .dot{width:10px;height:10px;border-radius:50%;display:inline-block}
.dot-r{background:#ff5f57} .dot-y{background:#febc2e} .dot-g{background:#28c840}
.console-title{margin-left:8px; color:var(--muted); font-size:12.5px; letter-spacing:0.08em; text-transform:uppercase}
.console-body{padding:22px 22px 24px; display:flex; flex-direction:column; gap:14px}
.console-body .row{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:6px}
.chip{
  font-family:var(--ff-body); font-size:12px; font-weight:500;
  padding:5px 10px; border-radius:var(--r-sm); letter-spacing:.02em;
}
.chip-stone{background:var(--soft-stone); color:var(--ink)}
.chip-coral{background:var(--coral); color:#fff}
.chip-green{background:var(--pale-green); color:var(--deep-green)}
.chip-coral-out{
  display:inline-block; border:1px solid var(--coral); color:var(--coral);
  background:#fff5f2; padding:4px 10px; border-radius:var(--r-sm);
  font-family:var(--ff-body); font-size:12.5px; font-weight:500; margin-bottom:12px;
}
.console-body .line{
  display:flex; justify-content:space-between; gap:12px;
  border-bottom:1px dashed rgba(255,255,255,.08); padding:6px 0; color:#d5d5dd;
}
.console-body .line .t{color:#9b9ba6}
.console-body .line .v{color:#fff}
.cmd{margin-top:4px; color:#dfeaff}
.cmd .prompt{color:var(--coral); margin-right:8px}
.caret{display:inline-block; width:7px; height:14px; background:#fff; vertical-align:-2px; animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}

/* ============ Trust strip ============ */
.trust{padding:24px 0 64px; border-bottom:1px solid var(--hairline)}
.trust-copy{
  text-align:center; font-size:13px; color:var(--slate);
  letter-spacing:.06em; text-transform:uppercase; margin:0 0 28px;
  font-family:var(--ff-mono);
}
.trust-row{
  list-style:none; padding:0; margin:0;
  display:flex; gap:48px; justify-content:center; flex-wrap:wrap;
  font-family:var(--ff-display); font-size:22px; color:var(--ink); opacity:.7;
}
.trust-row li{letter-spacing:-0.01em}

/* ============ Sections ============ */
.section{padding:120px 0}
.section-pale-blue{background:var(--pale-blue)}
.section-stone{background:var(--soft-stone)}
.section-head{margin-bottom:56px; max-width:780px}
.section-lede{font-size:18px; color:var(--body-muted); margin:14px 0 0; max-width:680px}

/* ============ Products (warm stone cards) ============ */
.grid-products{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px;
}
@media (max-width:920px){.grid-products{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.grid-products{grid-template-columns:1fr}}
.product-card{
  background:var(--soft-stone); color:var(--ink);
  border-radius:var(--r-sm); padding:32px;
  display:flex; flex-direction:column; min-height:240px;
  transition:transform .15s ease, background .2s;
}
.product-card:hover{transform:translateY(-2px); background:#e5e2dc}
.product-card .mono-label{margin-bottom:18px; color:#6a6963}
.product-card hr{border-top:1px solid #d9d6cf; margin:18px 0 16px}
.product-card .pill-out{align-self:flex-start}
.product-card:hover .pill-out{background:var(--primary); color:#fff}

/* ============ Dark feature band ============ */
.dark-band{
  background:var(--deep-green); border-radius:var(--r-lg); overflow:hidden;
  position:relative;
}
.dark-band::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(700px 360px at 90% -10%, rgba(255,119,89,.15), transparent 60%),
    radial-gradient(800px 420px at 0% 110%, rgba(237,252,233,.07), transparent 60%);
}
.dark-band-inner{position:relative; padding:80px clamp(24px, 5vw, 80px); color:var(--on-dark)}
.band-lede{font-size:18px; color:#c6d6d2; max-width:680px; margin:0 0 56px}
.band-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:22px}
@media (max-width:980px){.band-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.band-grid{grid-template-columns:1fr}}
.band-card{
  border-top:1px solid rgba(237,252,233,.18); padding-top:18px;
}
.band-card .mono-label{margin-bottom:14px}
.band-body{font-size:15px; line-height:1.55; color:#c6d6d2; margin:0}
.light{color:#fff}

/* ============ Signature ============ */
.grid-signature{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px;
}
@media (max-width:980px){.grid-signature{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.grid-signature{grid-template-columns:1fr}}
.sig-card{
  background:var(--canvas); border:1px solid var(--card-border);
  border-radius:var(--r-md); padding:28px;
  display:flex; flex-direction:column; gap:6px;
  transition:transform .15s ease, border-color .2s;
}
.sig-card:hover{transform:translateY(-2px); border-color:var(--hairline)}
.sig-card .link-u{
  margin-top:auto; padding-top:18px; color:var(--action-blue);
  font-size:14px; font-weight:500; text-decoration:underline; text-underline-offset:4px;
}
.link-u{color:var(--action-blue); font-weight:500; text-decoration:underline; text-underline-offset:4px}

/* ============ About ============ */
.split{display:grid; grid-template-columns:.85fr 1.15fr; gap:80px; align-items:start}
@media (max-width:880px){.split{grid-template-columns:1fr; gap:36px}}
.about-body{max-width:640px}
.about-dl{margin:24px 0 18px; padding:0; display:grid; gap:0}
.about-dl div{display:grid; grid-template-columns:160px 1fr; gap:18px; padding:14px 0; border-top:1px solid var(--hairline)}
.about-dl div:last-child{border-bottom:1px solid var(--hairline)}
.about-dl dt{font-family:var(--ff-mono); font-size:12.5px; letter-spacing:0.1em; text-transform:uppercase; color:var(--slate)}
.about-dl dd{margin:0; color:var(--ink)}

/* ============ Contact ============ */
.split-2{display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:start}
@media (max-width:880px){.split-2{grid-template-columns:1fr; gap:36px}}
.contact-list{list-style:none; padding:0; margin:28px 0 0; display:grid; gap:0}
.contact-list li{
  display:grid; grid-template-columns:100px 1fr; align-items:center;
  gap:18px; padding:18px 0; border-top:1px solid #d9d6cf;
}
.contact-list li:last-child{border-bottom:1px solid #d9d6cf}
.contact-list .mono-label{margin:0; color:#6a6963}
.contact-list a{color:var(--ink); text-decoration:underline; text-underline-offset:4px}
.contact-list a:hover{color:var(--primary)}

.form-card{
  background:var(--canvas); border-radius:var(--r-lg); padding:32px;
  display:flex; flex-direction:column;
}
.form-head{margin-bottom:18px}
.form-head .mono-label{margin-bottom:8px}
.channel{
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  padding:18px 4px; border-top:1px solid var(--hairline);
  transition:padding-left .2s ease;
}
.channel:last-child.last{border-bottom:1px solid var(--hairline)}
.channel:hover{padding-left:8px}
.channel div{display:flex; flex-direction:column; gap:2px}
.channel strong{font-size:16px; color:var(--ink); font-weight:500}
.channel .muted{font-size:13.5px}
.channel .arr{color:var(--slate); font-size:18px; transition:transform .2s, color .2s}
.channel:hover .arr{transform:translate(2px,-2px); color:var(--primary)}

/* ============ Footer ============ */
.site-footer{background:var(--primary); color:#cfcfd6; padding:96px 0 40px; margin-top:0}
.foot-grid{
  display:grid; grid-template-columns:1.1fr .9fr; gap:64px; padding-bottom:64px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
@media (max-width:880px){.foot-grid{grid-template-columns:1fr; gap:36px}}
.foot-sub{font-size:14px; color:#8d8d97; margin:0 0 18px; max-width:380px}
.news{
  display:grid; grid-template-columns:1fr auto; gap:0;
  border-bottom:1px solid rgba(255,255,255,.18); padding-bottom:6px; max-width:420px;
  position:relative;
}
.news input{
  background:transparent; border:none; outline:none; color:#fff; padding:10px 0;
  font-family:var(--ff-body); font-size:15px;
}
.news input::placeholder{color:#7a7a86}
.news button{
  color:#fff; font-size:18px; padding:0 8px; transition:color .2s;
}
.news button:hover{color:var(--coral)}
.news-msg{
  grid-column:1/-1; font-family:var(--ff-mono); font-size:12px; color:var(--coral-soft);
  margin-top:6px; min-height:14px;
}
.foot-cols{display:grid; grid-template-columns:repeat(3,1fr); gap:24px}
@media (max-width:560px){.foot-cols{grid-template-columns:repeat(2,1fr)}}
.foot-col-label{
  font-family:var(--ff-mono); font-size:12px; letter-spacing:0.16em; text-transform:uppercase;
  color:#fff; margin:0 0 14px;
}
.foot-cols ul{list-style:none; padding:0; margin:0; display:grid; gap:10px}
.foot-cols a{color:#9c9ca5; font-size:14px}
.foot-cols a:hover{color:#fff}

.foot-legal{padding-top:36px}
.foot-legal p{margin:4px 0; font-size:12.5px; color:#8d8d97; line-height:1.6}
.copy{margin-top:14px !important; font-family:var(--ff-mono); letter-spacing:.06em}

/* ============ Chat panel ============ */
.chat-panel{
  background:var(--canvas);
  border:1px solid var(--card-border);
  border-radius:var(--r-lg);
  overflow:hidden;
  margin-top:24px;
  box-shadow:0 1px 0 rgba(23,23,28,.02);
}
.chat-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 22px; border-bottom:1px solid var(--hairline);
  background:var(--canvas);
}
.chat-head-left{display:flex; align-items:center; gap:10px}
.chat-head .dot-g{width:8px; height:8px; border-radius:50%; background:#28c840; box-shadow:0 0 0 3px rgba(40,200,64,.18)}
.chat-title{font-family:var(--ff-display); font-size:16px; color:var(--primary)}
.chat-head-right{display:flex; align-items:center; gap:14px}
.chat-head-right .mono-label{margin:0; color:var(--muted); letter-spacing:.14em; font-size:11.5px}
.chat-reset{
  font-family:var(--ff-body); font-size:13px; color:var(--ink);
  border:1px solid var(--hairline); border-radius:var(--r-xl); padding:6px 12px;
  background:#fff; transition:background .2s, border-color .2s;
}
.chat-reset:hover{background:var(--soft-stone); border-color:var(--ink)}

.chat-stream{
  display:flex; flex-direction:column; gap:18px;
  padding:28px clamp(18px, 3vw, 32px);
  max-height:540px; overflow-y:auto;
  background:var(--canvas);
  scroll-behavior:smooth;
}
.chat-stream::-webkit-scrollbar{width:6px}
.chat-stream::-webkit-scrollbar-thumb{background:var(--hairline); border-radius:3px}

.msg{display:flex; gap:14px; align-items:flex-start}
.msg-user{flex-direction:row-reverse}
.msg-avatar{
  flex-shrink:0;
  width:36px; height:36px; border-radius:var(--r-sm);
  background:var(--primary); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--ff-mono); font-size:11px; font-weight:500; letter-spacing:.04em;
}
.msg-avatar.user{background:var(--deep-green)}
.msg-body{
  max-width:760px;
  background:var(--soft-stone); color:var(--ink);
  border-radius:var(--r-md);
  padding:16px 20px;
  line-height:1.55;
}
.msg-body p{margin:0 0 10px}
.msg-body p:last-child{margin:0}
.msg-user .msg-body{
  background:var(--primary); color:#fff;
}
.msg-user .msg-body p{color:#fff}

.intro .msg-body{background:#f4f6fb}

.thinking{display:inline-flex; gap:6px; align-items:center; padding:6px 0}
.thinking span{
  width:8px; height:8px; border-radius:50%; background:var(--slate);
  animation:bounce 1s infinite ease-in-out;
}
.thinking span:nth-child(2){animation-delay:.15s}
.thinking span:nth-child(3){animation-delay:.3s}
@keyframes bounce{0%,80%,100%{transform:translateY(0); opacity:.4}40%{transform:translateY(-4px); opacity:1}}

.error .msg-body{background:#fff4f3; border:1px solid #f3d3cc; color:#8a3725}
.error .msg-body a{color:var(--action-blue); text-decoration:underline}

.quick-chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:12px}
.qchip{
  font-family:var(--ff-body); font-size:13px;
  background:#fff; color:var(--ink);
  border:1px solid var(--hairline);
  border-radius:var(--r-xl); padding:7px 14px;
  transition:background .2s, border-color .2s, color .2s;
}
.qchip:hover{background:var(--primary); color:#fff; border-color:var(--primary)}

/* Recommended product grid inside chat */
.rec-grid{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px;
  margin-top:14px;
}
@media (max-width:640px){.rec-grid{grid-template-columns:1fr}}
.rec-card{
  display:grid; grid-template-columns:96px 1fr; gap:12px;
  background:#fff; border:1px solid var(--hairline);
  border-radius:var(--r-sm); overflow:hidden;
  transition:transform .12s ease, border-color .2s;
}
.rec-card:hover{transform:translateY(-1px); border-color:var(--primary)}
.rec-thumb{background:var(--soft-stone); display:flex; align-items:center; justify-content:center; aspect-ratio:1/1}
.rec-thumb img{width:100%; height:100%; object-fit:contain; padding:6px}
.rec-info{padding:10px 12px 10px 0; display:flex; flex-direction:column; gap:4px}
.rec-cat{margin:0; font-size:10.5px; letter-spacing:.16em; color:var(--slate)}
.rec-name{
  font-family:var(--ff-display); font-weight:400; font-size:15px; line-height:1.25;
  color:var(--ink); margin:0;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.rec-foot{margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:8px; padding-top:6px}
.rec-price{font-family:var(--ff-display); font-size:14px; color:var(--primary)}
.rec-arr{font-size:11.5px; color:var(--action-blue); letter-spacing:.02em}

.msg-cta{
  display:inline-block; margin-top:14px; padding:8px 16px;
  background:#fff; color:var(--ink); border:1px solid var(--ink);
  border-radius:var(--r-xl); font-size:13px; font-weight:500;
}
.msg-cta:hover{background:var(--ink); color:#fff}

/* Chat input */
.chat-input{
  display:grid; grid-template-columns:1fr auto; gap:10px;
  padding:18px clamp(18px,3vw,32px); border-top:1px solid var(--hairline);
  background:var(--canvas);
}
.chat-input input{
  font:inherit; font-size:16px; color:var(--ink);
  background:#fff;
  border:1px solid var(--hairline); border-radius:var(--r-pill);
  padding:14px 22px; outline:none;
  transition:border-color .2s, box-shadow .2s;
}
.chat-input input:focus{
  border-color:var(--primary);
  box-shadow:0 0 0 4px rgba(76,110,230,.12);
}
.chat-input input:disabled{opacity:.6}
.chat-input .btn{padding:14px 22px; gap:8px}
.send-arrow{font-size:16px}

.chat-foot{
  display:flex; align-items:center; gap:12px;
  padding:0 clamp(18px,3vw,32px) 18px;
  font-size:12.5px; color:var(--body-muted); margin:0;
  background:var(--canvas);
}
.chat-foot .mono-label{margin:0; padding:3px 8px; background:var(--soft-stone); border-radius:var(--r-sm); color:var(--slate); font-size:10.5px}

/* ============ Reduced motion ============ */
@media (prefers-reduced-motion: reduce){
  *{transition:none !important; animation:none !important; scroll-behavior:auto !important}
}

/* ============ Hero background image (KNGS AI Concierge visual) ============
   Show the image as a full-width banner above the chat panel on every
   viewport, then drop into the dark section that holds the chat panel. */
.hero{
  position: relative;
  background-image: url('hero-bg.jpg');
  background-size: 100% auto;
  background-position: top center;
  background-repeat: no-repeat;
  background-color: #0a0e1a;
  padding-top: calc(53.4vw + 32px);             /* image aspect 1717:916 → 53.4% */
}
.hero > .container{ position: relative; z-index: 1; }
.hero .mono-label,
.hero .display,
.hero .lede{ display: none; }

/* Cap the banner height on very wide screens so it doesn't dominate. */
@media (min-width: 1600px){
  .hero{
    background-size: 1600px auto;
    padding-top: calc(854px + 32px);            /* 1600 * 916/1717 ≈ 854 */
  }
}