/* ════════════════════════════════════════════════════════════════════════════
   MEDICALAI — Single-screen animated landing (no-scroll, motion-rich)
   ════════════════════════════════════════════════════════════════════════════ */
html, body { min-height: 100%; }
body { overflow-x: hidden; overflow-y: auto; background: var(--d-bg); color: var(--d-ink); }
.screen { position: relative; height: 100dvh; display: flex; flex-direction: column; overflow: hidden; }

/* ── animated background: aurora + grid + cells ── */
.bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.aurora { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .55; mix-blend-mode: screen; }
.a1 { width: 60vw; height: 60vw; background: radial-gradient(circle, var(--brand), transparent 65%); top: -22vw; inset-inline-end: -12vw; animation: drift1 18s ease-in-out infinite; }
.a2 { width: 52vw; height: 52vw; background: radial-gradient(circle, var(--brand-3), transparent 65%); bottom: -24vw; inset-inline-start: -10vw; animation: drift2 22s ease-in-out infinite; }
.a3 { width: 40vw; height: 40vw; background: radial-gradient(circle, var(--brand-2), transparent 60%); top: 30%; inset-inline-start: 38%; opacity: .35; animation: drift3 26s ease-in-out infinite; }
@keyframes drift1 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-5vw,6vh) scale(1.12); } }
@keyframes drift2 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(6vw,-5vh) scale(1.15); } }
@keyframes drift3 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-7vw,-4vh) scale(.9); } }
.grid-bg { position: absolute; inset: 0; opacity: .35;
  background-image: linear-gradient(var(--d-line) 1px, transparent 1px), linear-gradient(90deg, var(--d-line) 1px, transparent 1px);
  background-size: 54px 54px; mask-image: radial-gradient(80% 70% at 60% 40%, #000, transparent 85%); }
.cells { position: absolute; inset: 0; }
.cell { position: absolute; border-radius: 50%; border: 1px solid color-mix(in oklch, var(--brand) 40%, transparent); opacity: .25; animation: float-cell linear infinite; }
@keyframes float-cell { from { transform: translateY(20px) rotate(0); } to { transform: translateY(-110vh) rotate(220deg); } }
@media (prefers-reduced-motion: reduce) { .aurora, .cell { animation: none !important; } }

/* ── NAV ── */
.nav { position: relative; z-index: 10; display: flex; align-items: center; gap: 18px; padding: clamp(14px,2vh,22px) clamp(20px,4vw,46px); }
.brand { display: flex; align-items: center; gap: 11px; }
.brand-logo { width: 42px; height: 42px; flex-shrink: 0; }
.brand-name { font-weight: 800; font-size: 1.3rem; letter-spacing: -.02em; color: var(--ink-hi); }
.brand-name b { background: var(--brand-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.nav-mid { display: flex; align-items: center; gap: 4px; margin-inline: auto; }
.nav-link { padding: 9px 15px; border-radius: 9px; font-size: .92rem; font-weight: 600; color: var(--d-ink-2); transition: .15s; }
.nav-link:hover { background: rgba(255,255,255,.08); color: var(--ink-hi); }
.nav-right { display: flex; align-items: center; gap: 10px; }
.icon-btn2 { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; color: var(--ink-hi); border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.06); transition: .15s; backdrop-filter: blur(8px); }
.icon-btn2:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.3); }
.icon-btn2 svg { width: 18px; height: 18px; }
.lang-btn { width: auto; padding: 0 13px; font-family: var(--ff-mono); font-size: .78rem; font-weight: 700; }
.menu-btn { display: none; }

/* ── HERO (fills remaining height) ── */
.hero { position: relative; z-index: 5; flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 1.05fr);
  gap: clamp(24px,4vw,60px); align-items: center; padding: 0 clamp(20px,4vw,46px) clamp(10px,2vh,20px); }
.h-left { display: flex; flex-direction: column; gap: clamp(12px,1.8vh,20px); }
.eyebrow2 { align-self: flex-start; display: inline-flex; align-items: center; gap: 9px; font-size: .82rem; font-weight: 700;
  color: var(--ink-hi); background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16); padding: 7px 15px; border-radius: 999px; backdrop-filter: blur(8px); }
.eyebrow2 .dotlive { width: 7px; height: 7px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 0 var(--teal); animation: pulse-ring 2s infinite; }
@keyframes pulse-ring { 0% { box-shadow: 0 0 0 0 color-mix(in oklch, var(--teal) 60%, transparent); } 70% { box-shadow: 0 0 0 9px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
.h-left h1 { font-size: clamp(2rem, 4.4vw, 3.6rem); font-weight: 800; line-height: 1.08; letter-spacing: -.03em; color: var(--ink-hi); }
.h-left h1 .grad { background: var(--brand-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; position: relative; }
.h-left .lead { font-size: clamp(.98rem, 1.5vw, 1.18rem); color: var(--d-ink-2); max-width: 540px; line-height: 1.65; }
.h-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 4px; }
.btn-glow { background: var(--brand-grad); color: #04141a; font-weight: 800; box-shadow: 0 8px 30px color-mix(in oklch, var(--brand) 40%, transparent); position: relative; overflow: hidden; }
.btn-glow::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.5) 50%, transparent 70%); transform: translateX(-120%); animation: sheen 3.4s ease-in-out infinite; }
body.en .btn-glow::after { animation-direction: reverse; }
@keyframes sheen { 0%,60% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
.btn-glow:hover { transform: translateY(-2px); filter: brightness(1.06); }
.btn-outline { background: rgba(255,255,255,.06); color: var(--ink-hi); border: 1px solid rgba(255,255,255,.2); backdrop-filter: blur(8px); }
.btn-outline:hover { background: rgba(255,255,255,.13); transform: translateY(-2px); }

/* model chips row (names the AIs) */
.model-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.model-row .lbl { font-size: .74rem; color: var(--d-ink-3); }
.mchip { display: inline-flex; align-items: center; gap: 7px; font-size: .76rem; font-weight: 600; color: var(--d-ink); 
  background: var(--d-surface); border: 1px solid var(--d-line-2); padding: 6px 11px; border-radius: 999px; }
.mchip .md { width: 8px; height: 8px; border-radius: 50%; }
.h-trust { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 2px; }
.h-trust .ti { display: flex; align-items: center; gap: 7px; font-size: .8rem; color: var(--d-ink-2); }
.h-trust .ti svg { width: 16px; height: 16px; color: var(--teal); }

/* entrance: transform-only (content stays visible even if motion is frozen) */
.enter { animation: enter-up .7s cubic-bezier(.2,.75,.3,1) both; }
@keyframes enter-up { from { transform: translateY(24px); } to { transform: none; } }

/* ── SHOWCASE (right) ── */
.showcase { position: relative; height: 100%; max-height: 78vh; display: flex; flex-direction: column; justify-content: center; }
.sc-tabs { display: inline-flex; align-self: flex-start; gap: 4px; padding: 4px; border-radius: 999px; background: var(--d-surface); border: 1px solid var(--d-line-2); margin-bottom: 10px; }
.sc-tab { padding: 8px 16px; border-radius: 999px; font-size: .8rem; font-weight: 700; color: var(--d-ink-2); transition: .18s; display: flex; align-items: center; gap: 7px; }
.sc-tab svg { width: 15px; height: 15px; }
.sc-tab.on { background: var(--brand-grad); color: #04141a; }
.sc-panel { position: relative; }
.sc-view { display: none; } .sc-view.on { display: block; animation: enter-up .5s both; }
/* chat card */
.chat-card { background: color-mix(in srgb, var(--d-surface) 92%, transparent); border: 1px solid var(--d-line-2); border-radius: var(--r-lg);
  box-shadow: 0 30px 90px rgba(0,0,0,.55); overflow: hidden; backdrop-filter: blur(14px); }
.cc-top { display: flex; align-items: center; gap: 11px; padding: 14px 16px; border-bottom: 1px solid var(--d-line); }
.cc-av { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; color: var(--ink-hi); background: var(--brand-grad); }
.cc-av svg { width: 19px; height: 19px; }
.cc-top .t { font-weight: 700; font-size: .92rem; color: var(--ink-hi); }
.cc-top .s { font-size: .68rem; color: var(--teal); display: flex; align-items: center; gap: 5px; }
.cc-top .s::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--teal); animation: blink 1.6s infinite; }
@keyframes blink { 50% { opacity: .3; } }
.cc-model { margin-inline-start: auto; font-size: .64rem; font-family: var(--ff-mono); color: var(--d-ink-3); border: 1px solid var(--d-line); padding: 4px 9px; border-radius: 8px; }
.cc-body { padding: 16px; display: flex; flex-direction: column; gap: 11px; min-height: 268px; }
.cc-msg { max-width: 84%; padding: 11px 14px; border-radius: 15px; font-size: .85rem; line-height: 1.6; animation: pop-in .4s cubic-bezier(.2,.8,.3,1) both; }
@keyframes pop-in { from { transform: translateY(8px) scale(.97); opacity: 0; } to { transform: none; opacity: 1; } }
.cc-msg.u { align-self: flex-end; background: color-mix(in oklch, var(--brand-2) 24%, var(--d-surface)); border: 1px solid color-mix(in oklch, var(--brand-2) 36%, transparent); border-top-right-radius: 5px; color: var(--ink-hi); }
body.en .cc-msg.u { border-top-right-radius: 15px; border-top-left-radius: 5px; }
.cc-msg.a { align-self: flex-start; background: var(--d-surface-2); border: 1px solid var(--d-line); border-top-left-radius: 5px; color: var(--d-ink-2); }
body.en .cc-msg.a { border-top-left-radius: 15px; border-top-right-radius: 5px; }
.cc-msg.a b { color: var(--ink-hi); }
.cc-typing { align-self: flex-start; display: inline-flex; gap: 4px; padding: 13px 16px; background: var(--d-surface-2); border: 1px solid var(--d-line); border-radius: 15px; }
.cc-typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--d-ink-3); animation: td 1.2s infinite; }
.cc-typing i:nth-child(2) { animation-delay: .15s; } .cc-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes td { 0%,60%,100% { transform: translateY(0); opacity: .4; } 30% { transform: translateY(-5px); opacity: 1; } }
.cc-src { align-self: flex-start; display: flex; gap: 6px; flex-wrap: wrap; animation: pop-in .4s both; }
.cc-srcchip { font-size: .64rem; color: var(--d-ink-2); background: color-mix(in oklch, var(--teal) 12%, var(--d-surface)); border: 1px solid color-mix(in oklch, var(--teal) 26%, transparent); padding: 4px 9px; border-radius: 8px; display: flex; align-items: center; gap: 5px; }
.cc-srcchip svg { width: 11px; height: 11px; color: var(--teal); }
.cc-foot { padding: 12px 16px; border-top: 1px solid var(--d-line); display: flex; align-items: center; gap: 9px; }
.cc-input { flex: 1; min-width: 0; background: var(--d-bg-2); border: 1px solid var(--d-line); border-radius: 999px; padding: 10px 15px; font-size: .8rem; color: var(--d-ink); font-family: inherit; outline: none; transition: border-color .15s; }
.cc-input:focus { border-color: var(--brand); }
.cc-input::placeholder { color: var(--d-ink-3); }
.cc-send { cursor: pointer; }
.cc-send { width: 36px; height: 36px; border-radius: 50%; background: var(--brand-grad); color: #04141a; display: grid; place-items: center; flex-shrink: 0; }
.cc-send svg { width: 16px; height: 16px; transform: scaleX(-1); }
body.en .cc-send svg { transform: none; }

/* model comparison panel */
.cmp { background: color-mix(in srgb, var(--d-surface) 92%, transparent); border: 1px solid var(--d-line-2); border-radius: var(--r-lg); box-shadow: 0 30px 90px rgba(0,0,0,.55); overflow: hidden; backdrop-filter: blur(14px); }
.cmp-head { padding: 11px 16px; border-bottom: 1px solid var(--d-line); display: flex; align-items: center; gap: 10px; }
.cmp-head .q { font-size: .82rem; color: var(--d-ink-2); flex: 1; }
.cmp-head .q b { color: var(--ink-hi); }
.cmp-agree { display: flex; align-items: center; gap: 6px; font-size: .72rem; font-weight: 700; color: var(--teal); background: color-mix(in oklch, var(--teal) 12%, transparent); border: 1px solid color-mix(in oklch, var(--teal) 26%, transparent); padding: 5px 11px; border-radius: 999px; }
.cmp-grid { padding: 11px 14px 12px; display: grid; gap: 8px; }
.cmp-row { background: var(--d-surface-2); border: 1px solid var(--d-line); border-radius: var(--r); padding: 9px 13px; }
.cmp-row-top { display: flex; align-items: center; gap: 10px; margin-bottom: 7px; }
.cmp-pip { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; color: var(--ink-hi); font-weight: 800; font-family: var(--ff-mono); font-size: .68rem; flex-shrink: 0; }
.cmp-name { font-size: .82rem; font-weight: 700; color: var(--ink-hi); }
.cmp-role { font-size: .62rem; color: var(--d-ink-3); }
.cmp-verdict { margin-inline-start: auto; font-size: .68rem; color: var(--d-ink-2); text-align: end; max-width: 44%; }
.cmp-bar { height: 7px; border-radius: 4px; background: var(--d-bg-2); overflow: hidden; }
.cmp-bar i { display: block; height: 100%; border-radius: 4px; width: 0; transition: width 1.1s cubic-bezier(.3,.8,.3,1); }
.cmp-conf { display: flex; align-items: center; justify-content: space-between; margin-top: 5px; }
.cmp-conf .cl { font-size: .6rem; color: var(--d-ink-3); }
.cmp-conf .cv { font-family: var(--ff-mono); font-size: .78rem; font-weight: 700; }

/* floating badges */
.float-badge { position: absolute; z-index: 6; background: var(--d-surface); border: 1px solid var(--d-line-2); border-radius: 13px; padding: 10px 13px; box-shadow: 0 16px 40px rgba(0,0,0,.45); display: flex; align-items: center; gap: 10px; backdrop-filter: blur(10px); }
.float-badge svg { width: 18px; height: 18px; }
.float-badge .ft { font-size: .74rem; font-weight: 700; color: var(--ink-hi); } .float-badge .fs { font-size: .6rem; color: var(--d-ink-3); }
/* JS (the feature cycler) drives the exact spot — these are just the initial anchor. The badge
   hops between four text-free spots in both cards, so it never covers anything being read. */
.fb-1 { top: auto; bottom: 62px; inset-inline-start: -16px; animation: floaty 5s ease-in-out infinite; }
.fb-2 { top: auto; bottom: 62px; inset-inline-start: -16px; animation: floaty 6s ease-in-out infinite .8s; }
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }

/* ── bottom meta bar ── */
.metabar { position: relative; z-index: 5; display: flex; align-items: center; justify-content: center; gap: 22px; flex-wrap: wrap;
  padding: clamp(10px,1.6vh,16px) clamp(20px,4vw,46px); border-top: 1px solid var(--d-line); color: var(--d-ink-3); font-size: .78rem;
  background: color-mix(in srgb, var(--d-bg) 60%, transparent); }
.metabar b { color: var(--d-ink-2); }
.metabar .sep { width: 4px; height: 4px; border-radius: 50%; background: var(--d-line-2); }

/* logo animation */
.brand-logo .ring { transform-origin: center; animation: spin 14s linear infinite; }
.brand-logo .ecg { stroke-dasharray: 40; stroke-dashoffset: 40; animation: draw 2.6s ease-in-out infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes draw { 0% { stroke-dashoffset: 40; } 45%,55% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -40; } }

/* drawer */
.drawer { position: fixed; inset: 0; z-index: 200; background: var(--d-bg); transform: translateX(100%); transition: .3s; padding: 20px; display: flex; flex-direction: column; gap: 6px; }
body.en .drawer { transform: translateX(-100%); }
.drawer.open { transform: translateX(0); }
.drawer .nav-link { font-size: 1.05rem; padding: 14px; color: var(--ink-hi); }
.drawer-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }

/* ── responsive ── */
@media (max-width: 1000px) {
  .nav-mid { display: none; }
  /* nav-mid (with its auto margins) is hidden — push nav-right to the far
     edge ourselves so the bar spans full width with no leftover gap */
  .nav-right { margin-inline-start: auto; }
  /* minmax(0,1fr) lets the single column shrink below its children's min-content
     (a wide child — the demo card — was forcing the column to ~830px → horizontal
     scroll on phones). overflow-x:hidden kills any residual sideways scroll. */
  .hero { grid-template-columns: minmax(0, 1fr); align-content: center; gap: 22px; overflow-x: hidden; }
  .h-left, .showcase, .chat-card { min-width: 0; max-width: 100%; }
  /* the specialty chips wrap on phones instead of scrolling sideways (no h-scroll) */
  .demo-chips { flex-wrap: wrap; overflow-x: visible; justify-content: center; padding-bottom: 2px; }
  .menu-btn { display: grid; }
  .showcase { max-height: none; }
  .fb-1, .fb-2 { display: none; }
}
@media (max-width: 1000px) and (max-height: 920px) { .screen { height: auto; min-height: 100dvh; } body { overflow: auto; } }
@media (max-width: 560px) {
  .h-left { text-align: center; align-items: center; }
  .eyebrow2 { align-self: center; }
  .model-row, .h-trust, .h-cta { justify-content: center; }
  .metabar { gap: 12px; }
  /* Nav was overflowing: menu button clipped off-screen edge.
     Hide the text "ورود" link (it's in the drawer + شروع رایگان goes to
     login anyway) and tighten gaps so everything fits on ~360px. */
  .nav { gap: 8px; padding-inline: 14px; }
  .nav-right { gap: 6px; }
  .nav-right > a.nav-link { display: none; }
  .icon-btn2 { width: 36px; height: 36px; border-radius: 10px; }
  .btn.btn-glow { padding: 10px 14px; font-size: .85rem; white-space: nowrap; }
}
/* On laptop-height viewports the one-screen hero can't fit nav + showcase + meta bar, so the
   compare box collided with the bar. Below 900px tall, let the first screen flow & scroll
   naturally (meta bar drops below the fold) instead of cramming everything into 100vh. */
@media (max-height: 900px) and (min-width: 1001px) {
  body { overflow: auto; }
  /* Stop cramming nav+hero+meta into one fixed 100vh screen — on laptop heights the showcase
     can't fit and overlapped the chips above & the meta bar below. Let them stack & flow. */
  .screen { display: block; height: auto; min-height: 100dvh; overflow: visible; }
  .hero { min-height: auto; align-items: start; padding-top: clamp(16px,3vh,40px); padding-bottom: 34px; }
  /* The showcase was capped at 78vh and centered, so on laptop heights its content spilled out
     the top (into the chips) AND the bottom (into the meta bar). Let it grow to its content. */
  .showcase { height: auto; max-height: none; justify-content: flex-start; }
}

/* ══ DAY THEME polish — make light mode clearly distinct on the landing ══ */
html[data-theme="day"] .aurora { opacity: .22; mix-blend-mode: normal; filter: blur(90px); }
html[data-theme="day"] .grid-bg { opacity: .45; }
html[data-theme="day"] .chat-card,
html[data-theme="day"] .cmp,
html[data-theme="day"] .float-badge { box-shadow: 0 18px 50px rgba(19,23,34,.12); }

/* Demo chat: clickable preset question chips */
.cc-chips { display: flex; gap: 7px; flex-wrap: wrap; padding: 8px 12px 2px; }
.cc-chip { font-size: .72rem; font-weight: 600; color: var(--d-ink-2); background: color-mix(in oklch, var(--d-surface) 80%, transparent); border: 1px solid var(--d-line-2); border-radius: 999px; padding: 6px 12px; cursor: pointer; transition: .14s; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.cc-chip:hover { color: #fff; border-color: var(--brand); background: color-mix(in oklch, var(--brand) 14%, var(--d-surface)); transform: translateY(-1px); }
.cc-chip.on { color: var(--brand); border-color: color-mix(in oklch, var(--brand) 45%, transparent); background: color-mix(in oklch, var(--brand) 12%, var(--d-surface)); }

/* Demo limit upsell — steer the visitor to sign up / their panel */
.cc-upsell { display: flex; flex-direction: column; align-items: center; gap: 9px; margin: 10px 4px 4px; padding: 14px; border-radius: 13px; text-align: center; background: color-mix(in oklch, var(--brand) 9%, var(--d-surface)); border: 1px solid color-mix(in oklch, var(--brand) 26%, transparent); }
.cc-up-note { font-size: .78rem; color: var(--d-ink-2); line-height: 1.6; }
.cc-up-btn { display: inline-block; padding: 9px 18px; border-radius: 999px; font-size: .82rem; font-weight: 700; color: #051014; background: linear-gradient(120deg, var(--brand), var(--brand-2)); box-shadow: 0 6px 18px -6px var(--brand); }
.cc-up-btn:hover { filter: brightness(1.07); }

/* ════ BELOW-THE-FOLD SECTIONS ════ */
.lx { position: relative; z-index: 5; background: var(--d-bg); }
.lx-sec { max-width: 1080px; margin: 0 auto; padding: clamp(56px,9vh,110px) clamp(20px,5vw,46px); text-align: center; }
.lx-alt { background: color-mix(in oklch, var(--brand) 4%, var(--d-bg)); max-width: none; }
.lx-alt > * { max-width: 1080px; margin-left: auto; margin-right: auto; }
.lx-eyebrow { display: inline-block; font-size: .76rem; font-weight: 700; letter-spacing: .04em; color: var(--brand); text-transform: uppercase; margin-bottom: 14px; }
.lx-h2 { font-size: clamp(1.6rem,4vw,2.6rem); font-weight: 800; letter-spacing: -.025em; color: var(--ink-hi); line-height: 1.2; }
.lx-h2 .grad { background: var(--brand-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.lx-lead { font-size: clamp(.92rem,1.6vw,1.05rem); color: var(--d-ink-2); line-height: 1.8; max-width: 620px; margin: 14px auto 0; }
/* specialties grid */
.lx-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 36px; }
.lx-card { display: flex; flex-direction: column; align-items: center; gap: 9px; padding: 20px 12px; border-radius: 15px; background: var(--d-surface); border: 1px solid var(--d-line); transition: .16s; }
.lx-card:hover { transform: translateY(-3px); border-color: color-mix(in oklch, var(--brand) 45%, var(--d-line)); background: color-mix(in oklch, var(--brand) 6%, var(--d-surface)); }
.lx-card .lx-ic { font-size: 1.7rem; line-height: 1; }
.lx-card b { font-size: .82rem; font-weight: 700; color: var(--ink-hi); }
/* feature columns */
.lx-feats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 40px; text-align: start; }
.lx-feat { padding: 26px 22px; border-radius: 18px; background: var(--d-surface); border: 1px solid var(--d-line); }
.lx-fic { display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 13px; font-size: 1.4rem; background: color-mix(in oklch, var(--brand) 12%, transparent); margin-bottom: 14px; }
.lx-feat b { display: block; font-size: 1.05rem; font-weight: 800; color: var(--ink-hi); margin-bottom: 8px; }
.lx-feat span { font-size: .88rem; color: var(--d-ink-2); line-height: 1.75; }
/* trust badges */
.lx-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 26px; }
.lx-badge { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; font-size: .84rem; font-weight: 600; color: var(--d-ink-1); background: var(--d-surface); border: 1px solid var(--d-line); }
/* final CTA */
.lx-final { text-align: center; padding: clamp(60px,10vh,120px) clamp(20px,5vw,46px); }
.lx-final h2 { font-size: clamp(1.7rem,4.5vw,3rem); font-weight: 800; letter-spacing: -.03em; color: var(--ink-hi); margin-bottom: 26px; }
/* footer */
.lx-foot { border-top: 1px solid var(--d-line); padding: 36px clamp(20px,5vw,46px); max-width: 1080px; margin: 0 auto; }
.lx-foot-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; }
.lx-foot-links { display: flex; gap: 22px; }
.lx-foot-links a { font-size: .88rem; color: var(--d-ink-2); } .lx-foot-links a:hover { color: var(--ink-hi); }
.lx-disc { font-size: .76rem; color: var(--d-ink-3); line-height: 1.7; margin: 20px 0 8px; max-width: 680px; }
.lx-copy { font-size: .76rem; color: var(--d-ink-3); }
@media (max-width: 760px) {
  .lx-grid { grid-template-columns: repeat(2, 1fr); }
  .lx-feats { grid-template-columns: 1fr; }
}

/* Interactive compare tab: input + typing dots */
.cmp-foot { margin-top: 10px; padding: 0; border-top: none; }
.cmp-dots { display: inline-flex; gap: 4px; align-items: center; }
.cmp-dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--d-ink-3); animation: cmpDot 1s ease-in-out infinite; }
.cmp-dots i:nth-child(2) { animation-delay: .15s; } .cmp-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes cmpDot { 0%,100% { opacity: .25; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-2px); } }

/* Demo CTA bar (replaces free-text input): visitors use preset questions; their
   own questions require sign-up/login. */
.cc-cta { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 10px; padding: 11px 16px; border-radius: 12px; text-align: center; font-size: .82rem; font-weight: 700; color: #04141a; background: var(--brand-grad); box-shadow: 0 6px 18px -6px var(--brand); transition: .15s; }
.cc-cta:hover { filter: brightness(1.07); transform: translateY(-1px); }
/* The compare rows fill their grid exactly, so the CTA butted right under the last row (only
   ~22px) while the chat card's CTA floats well below its content. Give the compare CTA real
   breathing room so it reads as a separate action, not an attached footer bar. */
.cmp .cc-cta { margin-top: 22px; }
#cmpChips { margin-top: 10px; }

/* Shared assistant selector (drives both chat + compare) */
.demo-pick { font-size: .76rem; font-weight: 700; color: var(--d-ink-3); margin: 0 2px 6px; }
.demo-chips { display: flex; flex-wrap: wrap; gap: 6px; padding-bottom: 2px; margin-bottom: 14px; scrollbar-width: none; }
.demo-chips::-webkit-scrollbar { display: none; }
.dchip { flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; font-size: .78rem; font-weight: 700; white-space: nowrap; color: var(--d-ink-1); background: var(--d-surface); border: 1px solid var(--d-line-2); transition: .15s; }
.dchip:hover { transform: translateY(-1px); border-color: color-mix(in oklch, var(--mc) 50%, var(--d-line-2)); }
.dchip.on { color: var(--ink-hi); border-color: color-mix(in oklch, var(--mc) 60%, transparent); background: color-mix(in oklch, var(--mc) 14%, var(--d-surface)); box-shadow: 0 4px 14px -6px var(--mc); }
.dchip-ic { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; color: var(--mc); background: color-mix(in oklch, var(--mc) 18%, transparent); }
.dchip-ic svg { width: 13px; height: 13px; }