/* ============================================================
   Lancis AI — landing page
   Design system + layout
   ============================================================ */

:root {
  /* palette */
  --bg:        #08090d;
  --bg-2:      #0d0f16;
  --panel:     #12141d;
  --panel-2:   #161925;
  --line:      rgba(255, 255, 255, 0.08);
  --line-2:    rgba(255, 255, 255, 0.14);
  --text:      #eef0f6;
  --muted:     #a4a9bd;
  --faint:     #6c7288;

  /* accent */
  --a1:  #6d5efc;   /* indigo  */
  --a2:  #a06bff;   /* violet  */
  --a3:  #38d3ff;   /* cyan    */
  --accent-soft: rgba(109, 94, 252, 0.14);

  --grad: linear-gradient(105deg, var(--a3) 0%, var(--a1) 45%, var(--a2) 100%);
  /* calmer two-stop gradient for buttons (no cyan) */
  --grad-btn: linear-gradient(120deg, #6d5efc 0%, #8b6cf6 100%);

  --radius:    18px;
  --radius-sm: 12px;
  --maxw:      1140px;
  --font:      'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --display:   'Space Grotesk', var(--font);

  --shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.7);
}

/* ---------- reset ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { font-family: var(--display); line-height: 1.12; letter-spacing: -0.02em; font-weight: 700; }
img { max-width: 100%; }

.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 24px; }
.center { text-align: center; }
.grad {
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-weight: 600; font-size: 15px;
  padding: 11px 20px; border-radius: 999px;
  border: 1px solid transparent; cursor: pointer;
  transition: transform .18s ease, box-shadow .25s ease, background .25s ease, border-color .25s ease;
  white-space: nowrap;
}
.btn--lg { padding: 15px 28px; font-size: 16px; }
.btn--primary {
  background: var(--grad-btn); color: #fff; font-weight: 600;
  box-shadow: 0 8px 24px -10px rgba(109, 94, 252, 0.5);
}
.btn--primary:hover { transform: translateY(-2px); box-shadow: 0 14px 34px -12px rgba(109, 94, 252, 0.6); }
.btn--ghost { background: rgba(255,255,255,0.02); color: var(--text); border-color: var(--line-2); }
.btn--ghost:hover { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.28); transform: translateY(-2px); }

/* ---------- nav ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  transition: background .3s ease, border-color .3s ease, backdrop-filter .3s;
  border-bottom: 1px solid transparent;
}
.nav.is-stuck {
  background: rgba(8, 9, 13, 0.72);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-bottom-color: var(--line);
}
.nav__inner { display: flex; align-items: center; gap: 20px; height: 70px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-family: var(--display); font-weight: 700; font-size: 20px; }
.brand__mark {
  width: 44px; height: 44px; display: block; flex: none;
  filter: drop-shadow(0 0 11px rgba(109, 94, 252, 0.35));
}
.brand__ai { color: var(--a2); margin-left: 2px; }
/* menu wrapper is layout-transparent on desktop, becomes the dropdown on mobile */
.nav__menu { display: contents; }
.nav__links { display: flex; gap: 20px; margin-left: 8px; margin-right: auto; }
.nav__links a { color: var(--muted); font-size: 14.5px; font-weight: 500; transition: color .2s; white-space: nowrap; }
.nav__links a:hover { color: var(--text); }
.nav__links a[aria-current="page"] { color: var(--text); }
.nav__cta { display: flex; gap: 10px; }
.nav__toggle { display: none; flex-direction: column; gap: 5px; background: none; border: 0; cursor: pointer; padding: 8px; }
.nav__toggle span { width: 22px; height: 2px; background: var(--text); border-radius: 2px; transition: .25s; }

/* ---------- hero ---------- */
.hero { position: relative; padding: 168px 0 96px; overflow: hidden; }
.hero__glow {
  position: absolute; top: -220px; left: 50%; transform: translateX(-50%);
  width: 900px; height: 700px; pointer-events: none;
  background: radial-gradient(closest-side, rgba(109,94,252,0.35), rgba(56,211,255,0.10) 55%, transparent 72%);
  filter: blur(20px);
}
.hero__grid {
  position: absolute; inset: 0; pointer-events: none; opacity: .4;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 54px 54px;
  -webkit-mask-image: radial-gradient(ellipse 70% 55% at 50% 25%, #000 30%, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 55% at 50% 25%, #000 30%, transparent 75%);
}
.hero__inner { position: relative; text-align: center; max-width: 880px; }
.eyebrow {
  display: inline-block; font-family: var(--display); font-size: 13px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--a3);
  padding: 7px 14px; border: 1px solid var(--line-2); border-radius: 999px;
  background: var(--accent-soft);
}
.hero__title { font-size: clamp(1.8rem, 6vw, 4.4rem); margin: 0 auto; max-width: none; }
.hero__title .grad { display: inline; }
.grad--nowrap { white-space: nowrap; }
.hero__sub { font-size: clamp(1.05rem, 2.2vw, 1.3rem); color: var(--muted); margin: 24px auto 0; max-width: 42ch; }
.hero__sub strong { color: var(--text); font-weight: 600; }
.hero__actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 36px; }
.hero__pipeline { display: inline-flex; align-items: center; gap: 12px; margin-top: 52px; }
.chip {
  font-family: var(--display); font-weight: 600; font-size: 14px;
  padding: 9px 18px; border-radius: 10px;
  border: 1px solid var(--line-2); background: var(--panel);
}
.hero__pipeline .arrow { color: var(--a2); font-weight: 700; }

/* hero variant of the clickable shot — wider, more breathing room above */
.wrap--wide { max-width: 1280px; }
.hero__shot { max-width: 1240px; margin-inline: auto; margin-top: 56px; }
.hero__shot__cue {
  position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%);
  z-index: 1; font-family: var(--display); font-weight: 600; font-size: 14px;
  color: #fff; padding: 9px 18px; border-radius: 999px;
  background: var(--grad-btn); box-shadow: 0 10px 28px -8px rgba(109,94,252,0.7);
  white-space: nowrap;
  opacity: 0; transition: opacity .2s ease; pointer-events: none;
}
.shot--link:hover .hero__shot__cue { opacity: 1; }

/* ---------- section base ---------- */
.section { padding: 96px 0; position: relative; }
.section--tint { background: linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 40%, var(--bg) 100%); }
.section--dark { background: #05060a; }
.kicker {
  font-family: var(--display); font-size: 13px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--a2); margin-bottom: 14px;
}
.section h1,
.section h2 { font-size: clamp(1.8rem, 4vw, 2.9rem); }
/* first section on a page — clears the fixed nav, no hero above it */
.section--first { padding-top: 148px; }
/* The .testimonial component carries a 72px lead-in for sitting under other content
   inside a section. Alone in its own section that stacks on both 96px paddings — 264px
   of empty above the quote. Here the section is tighter and the lead-in is dropped. */
.section--quote { padding: 56px 0; }
.section--quote .testimonial { margin-top: 0; }
.muted-title { color: var(--muted); }
.lede { color: var(--muted); font-size: 1.12rem; margin-top: 18px; max-width: 62ch; }
.lede--center { margin-inline: auto; }

/* ---------- problem ---------- */
.split { display: grid; grid-template-columns: 1.15fr .85fr; gap: 48px; align-items: center; }
/* Lancis Go gives the phones the wider half and puts them on the left, with the copy
   to their right. Done by grid placement rather than by reordering the markup, so the
   heading still comes first in the source — which is the order it stacks in on mobile
   and the order a screen reader reads. A class, not an inline style: inline wins over
   every stylesheet rule, so the responsive stack below could never apply. */
.split--go { grid-template-columns: 1.1fr .9fr; }
.split--go > :first-child { grid-column: 2; grid-row: 1; }
.split--go > :last-child { grid-column: 1; grid-row: 1; }
.split__lead h2 { margin-top: 6px; }
.flow-card {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 32px 28px; text-align: center; box-shadow: var(--shadow);
}
.flow-node {
  font-family: var(--display); font-weight: 600; font-size: 16px;
  padding: 14px; border-radius: var(--radius-sm);
  background: var(--panel-2); border: 1px solid var(--line);
}
.flow-node--accent {
  background: var(--accent-soft); border-color: rgba(109,94,252,0.4); color: #d7d2ff;
}
.flow-line { width: 2px; height: 26px; margin: 6px auto; background: linear-gradient(var(--a1), transparent); }
.flow-card__note { color: var(--faint); font-size: 14px; margin-top: 18px; }
.miss-grid {
  list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 52px;
}
.miss-grid li {
  display: flex; align-items: center; gap: 10px; font-weight: 500;
  padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--panel); font-size: 15px;
}
.miss-x { color: #ff6b8a; font-weight: 700; }

/* ---------- feature cards ---------- */
.feature-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 52px; text-align: left; }
.fcard {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px 22px; transition: transform .25s ease, border-color .25s ease;
}
.fcard:hover { transform: translateY(-4px); border-color: var(--line-2); }
.fcard__icon {
  width: 44px; height: 44px; display: grid; place-items: center;
  border-radius: 12px; background: var(--accent-soft); color: var(--a3);
  font-size: 18px; margin-bottom: 16px; border: 1px solid rgba(56,211,255,0.25);
}
.fcard h3 { font-size: 1.05rem; }
.fcard p { color: var(--muted); font-size: .95rem; margin-top: 8px; }

/* ---------- steps ---------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 56px; align-items: stretch; }
.step {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 30px 26px; height: 100%;
}
.step__num {
  font-family: var(--display); font-size: 1.5rem; font-weight: 700;
  background: var(--grad); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; margin-bottom: 12px;
}
.step h3 { font-size: 1.35rem; }
.step > p { color: var(--muted); margin-top: 10px; font-size: .98rem; }
.pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.pills span {
  font-size: 13px; padding: 6px 12px; border-radius: 999px;
  background: var(--panel-2); border: 1px solid var(--line); color: var(--muted);
}
.pills--models span { color: #d7d2ff; border-color: rgba(109,94,252,0.3); background: var(--accent-soft); }
.step__label { font-size: 13px; color: var(--faint); margin-top: 20px; text-transform: uppercase; letter-spacing: .08em; }
.eval-list { list-style: none; margin-top: 18px; display: grid; gap: 12px; }
.eval-list li { display: flex; align-items: center; gap: 12px; color: var(--muted); }
.eval-list .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--grad); flex: none; }
.agent-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 18px; }
.agent { padding: 16px; border-radius: var(--radius-sm); background: var(--panel-2); border: 1px solid var(--line); }
.agent h4 { font-size: .95rem; color: var(--text); }
.agent p { font-size: .82rem; color: var(--faint); margin-top: 6px; line-height: 1.45; }

/* ---------- shift / compare ---------- */
.compare { display: grid; grid-template-columns: 1fr auto 1fr; gap: 24px; align-items: center; margin-top: 48px; }
.compare__col {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 30px 26px;
}
.compare__col--accent { border-color: rgba(109,94,252,0.35); background: linear-gradient(180deg, var(--accent-soft), var(--panel)); }
.compare__tag { font-family: var(--display); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.compare__col--accent .compare__tag { color: var(--a3); }
.compare__flow { margin-top: 20px; display: grid; gap: 4px; justify-items: center; }
.cnode {
  width: 100%; text-align: center; font-family: var(--display); font-weight: 500; font-size: 15px;
  padding: 13px; border-radius: var(--radius-sm); background: var(--panel-2); border: 1px solid var(--line);
}
.cnode--accent { background: var(--accent-soft); border-color: rgba(109,94,252,0.35); color: #e5e1ff; }
.cline { width: 2px; height: 20px; background: var(--line-2); }
.cline--accent { background: linear-gradient(var(--a1), var(--a3)); }
.compare__vs { font-family: var(--display); color: var(--faint); font-weight: 600; }
.shift__punch {
  font-family: var(--display); font-size: clamp(1.2rem, 3vw, 1.8rem); font-weight: 600;
  margin: 52px auto 0; max-width: 46ch; line-height: 1.35;
}

/* ---------- ecosystem ---------- */
.eco-row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 36px; }
.eco-tag--muted { color: var(--faint); border-style: dashed; }

/* tool logos row (Where it runs) */
.tool-row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 36px; }
.tool {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--display); font-weight: 600; font-size: 15px; color: var(--text);
  padding: 10px 18px 10px 12px; border-radius: 999px;
  border: 1px solid var(--line-2); background: var(--panel);
}
.tool img { width: 26px; height: 26px; border-radius: 6px; object-fit: contain; }
.tool--muted {
  color: var(--faint); border-style: dashed; padding: 10px 18px;
  font-weight: 500;
}
.eco-tag {
  font-family: var(--display); font-weight: 500;
  padding: 12px 22px; border-radius: 999px; border: 1px solid var(--line-2);
  background: var(--panel); color: var(--text);
}

/* ---------- audiences ---------- */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.audience {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 40px 34px; position: relative; overflow: hidden;
  display: flex; flex-direction: column; color: inherit; cursor: pointer;
  transition: transform .2s ease, border-color .2s ease;
}
.audience:hover { transform: translateY(-4px); border-color: var(--line-2); }
.audience__cta {
  margin-top: 28px; color: var(--a3); font-family: var(--display);
  font-weight: 600; font-size: 15px;
}
.audience:hover .audience__cta { text-decoration: underline; }
.audience::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--grad); opacity: .8;
}
.audience h3 { font-size: 1.5rem; margin-top: 8px; }
.audience > p { color: var(--muted); margin-top: 12px; }
.check-list { list-style: none; margin-top: 20px; display: grid; gap: 12px; }
.check-list li { position: relative; padding-left: 30px; color: var(--text); font-weight: 500; }
.check-list li::before {
  content: "✓"; position: absolute; left: 0; top: -1px;
  width: 20px; height: 20px; display: grid; place-items: center; font-size: 12px;
  border-radius: 6px; background: var(--accent-soft); color: var(--a3); border: 1px solid rgba(56,211,255,0.3);
}

/* ---------- CTA ---------- */
.cta { position: relative; padding: 110px 0 96px; background: var(--bg-2); }
.cta__inner { position: relative; max-width: 760px; }
.badge {
  display: inline-block; font-family: var(--display); font-size: 12px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--a3);
  padding: 6px 14px; border-radius: 999px; border: 1px solid rgba(56,211,255,0.3); background: var(--accent-soft);
}
.cta h2 { font-size: clamp(2rem, 5vw, 3.2rem); margin-top: 20px; }
.cta__body { color: var(--muted); font-size: 1.15rem; margin: 20px auto 0; max-width: 56ch; }

/* ---------- footer ---------- */
.footer {
  position: relative; overflow: hidden;
  padding: 104px 0 40px; background: var(--bg-2);
}
/* purple glow anchored to the very bottom of the page */
.footer::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 70% 150% at 50% 130%, rgba(109,94,252,0.34), transparent 68%);
}
.footer__tag { color: var(--muted); font-size: 14px; }
.footer__about .footer__copy { color: var(--faint); font-size: 13px; margin-top: 18px; }
.footer__contact {
  font-style: normal; margin-top: 16px;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 9px;
  color: var(--muted); font-size: 14px; line-height: 1.5;
}
/* separator lives in CSS so the markup stays semantic */
.footer__contact > * + *::before { content: "·"; color: var(--faint); margin-right: 9px; }
.footer__contact a { color: var(--muted); transition: color .2s; }
.footer__contact a:hover { color: var(--text); }

/* full sitemap footer */
.footer__top {
  position: relative; z-index: 1; display: grid;
  grid-template-columns: 1.4fr 3fr; gap: 48px; align-items: start;
}
.footer__about { max-width: 30ch; }
/* brand.svg insets its glyph by 51/256 of the viewBox (~8.8px at 44px);
   pull the lockup left so the mark aligns optically with the text below */
.footer__about .brand { margin-left: -9px; }
.footer__about .footer__tag { justify-self: start; text-align: left; margin-top: 16px; }
/* brand mark is 44px and the wordmark is centred in it, so its midline sits at 22px;
   drop the column headers by 22 - (12px x 1.12)/2 to share that midline */
.footer__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 15px; }
.footer__col h4 {
  font-size: 12px; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--faint);
}
.footer__col ul { list-style: none; margin-top: 16px; display: grid; gap: 11px; }
.footer__col a { color: var(--muted); font-size: 14.5px; transition: color .2s; }
.footer__col a:hover { color: var(--text); }

@media (max-width: 860px) {
  .footer__top { grid-template-columns: 1fr; gap: 40px; }
  .footer__cols { margin-top: 0; }
}
@media (max-width: 720px) {
  /* These targeted .footer__inner, a class the markup does not have — the
     container is .footer__about. Half the selector list used bare class names
     and did apply, so the contact line and the copyright centred while the
     brand and tagline stayed left. The block is left-aligned by design
     (.footer__tag sets justify-self:start), so the fix is to align the two
     strays back, not to centre the rest. */
  .footer__about { justify-items: start; }
  .footer__about .brand,
  .footer__tag,
  .footer__contact,
  .footer__copy { justify-self: start; text-align: left; }
  .footer__contact { justify-content: flex-start; }
  .footer__cols { grid-template-columns: 1fr 1fr; gap: 28px; }
  }
@media (max-width: 460px) {
  .footer__cols { grid-template-columns: 1fr; }
}

/* ---------- reveal animation ---------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ---------- responsive ---------- */
@media (max-width: 960px) {
  .split, .split--go { grid-template-columns: 1fr; gap: 32px; }
  /* stacked: back to source order, copy first */
  .split--go > :first-child, .split--go > :last-child { grid-column: auto; grid-row: auto; }
  .miss-grid { grid-template-columns: 1fr 1fr; }
  .feature-cards { grid-template-columns: 1fr 1fr; }
  .steps { grid-template-columns: 1fr; }
  .compare { grid-template-columns: 1fr; }
  .compare__vs { justify-self: center; }
  .duo { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .nav__menu { display: none; }
  .nav__toggle { display: flex; margin-left: auto; }
  /* single dropdown panel holds links + CTA, so it grows with the link count */
  .nav.is-open .nav__menu {
    display: block; position: absolute; top: 70px; left: 0; right: 0;
    max-height: calc(100vh - 70px); overflow-y: auto;
    background: rgba(8,9,13,0.96);
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    padding: 20px 24px 22px; border-bottom: 1px solid var(--line);
  }
  .nav.is-open .nav__links { flex-direction: column; gap: 18px; margin: 0; }
  .nav.is-open .nav__links a { font-size: 16px; }
  .nav.is-open .nav__cta { margin-top: 22px; }
  .nav.is-open .nav__cta .btn { flex: 1; }
  .hero { padding-top: 130px; }
}
@media (max-width: 460px) {
  .miss-grid, .feature-cards, .agent-grid { grid-template-columns: 1fr; }
  .hero__pipeline { flex-wrap: wrap; }
}

/* ===== Hilbert connect-the-dots background (curve.svg) ===== */
/* object-fit mirrors the SVG's own preserveAspectRatio="slice" when loaded via <img> */
.hero__curve, .cta__curve {
  position:absolute; inset:0; width:100%; height:100%;
  object-fit: cover; pointer-events:none;
  animation: curveFade 1.2s ease-out both;
}
.hero__curve {
  -webkit-mask-image: radial-gradient(ellipse 72% 68% at 50% 42%, transparent 14%, #000 46%);
          mask-image: radial-gradient(ellipse 72% 68% at 50% 42%, transparent 14%, #000 46%);
}
.cta__curve {
  -webkit-mask-image: radial-gradient(ellipse 80% 86% at 50% 62%, transparent 20%, #000 56%);
          mask-image: radial-gradient(ellipse 80% 86% at 50% 62%, transparent 20%, #000 56%);
}
.cta__inner { position: relative; z-index: 1; }

@keyframes curveFade { from { opacity:0; } to { opacity:1; } }
@media (prefers-reduced-motion: reduce) {
  .hero__curve, .cta__curve { animation: none; }
}

/* seamless join between demo content and footer */
.demo + .footer { padding-top: 48px; background: var(--bg); }
.demo:has(+ .footer) { padding-bottom: 0; }

/* ===== Request-demo page ===== */
.nav__back { color: var(--muted); font-size: 15px; font-weight: 500; margin-left: auto; transition: color .2s; }
.nav__back:hover { color: var(--text); }
.demo { position: relative; overflow: hidden; padding: 120px 0 96px; }
.demo__glow {
  position: absolute; top: -240px; left: 50%; transform: translateX(-50%);
  width: 900px; height: 640px; pointer-events: none;
  background: radial-gradient(closest-side, rgba(109,94,252,0.28), rgba(56,211,255,0.08) 55%, transparent 72%);
  filter: blur(24px);
}
.demo__grid { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.demo__intro { padding-top: 8px; }
.demo__intro h1 { font-size: clamp(2rem, 4.4vw, 3.1rem); margin-top: 10px; }
.demo__list { list-style: none; margin-top: 28px; display: grid; gap: 14px; }
.demo__list li { position: relative; padding-left: 32px; color: var(--text); }
.demo__list li::before {
  content: "✓"; position: absolute; left: 0; top: 1px;
  width: 22px; height: 22px; display: grid; place-items: center; font-size: 12px;
  border-radius: 6px; background: var(--accent-soft); color: var(--a3); border: 1px solid rgba(56,211,255,0.3);
}
.demo__tag {
  margin-top: 34px; font-family: var(--display); font-size: 13px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--faint);
}
.formcard {
  background: var(--panel); border: 1px solid var(--line-2); border-radius: var(--radius);
  padding: 34px 32px; box-shadow: var(--shadow);
}
.formcard h2 { font-size: 1.5rem; }
.form-sub { color: var(--muted); font-size: .98rem; margin-top: 8px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.formcard__success { text-align: center; padding: 18px 0 8px; }
.formcard__success .btn { margin-top: 22px; }

/* ===== shared form controls ===== */
.form { display: grid; gap: 16px; margin-top: 22px; }
.field { display: grid; gap: 7px; }
.field > span { font-size: 13px; font-weight: 600; color: var(--muted); }
.field em { color: var(--a2); font-style: normal; }
.field input, .field textarea, .field select {
  width: 100%; font: inherit; color: var(--text);
  background: var(--bg-2); border: 1px solid var(--line-2); border-radius: 10px;
  padding: 12px 14px; transition: border-color .2s, box-shadow .2s; resize: vertical;
}
.field select {
  appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 18px) 20px, calc(100% - 12px) 20px;
  background-size: 6px 6px, 6px 6px; background-repeat: no-repeat;
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--a1);
  box-shadow: 0 0 0 3px rgba(109,94,252,0.22);
}
.field input.invalid, .field textarea.invalid { border-color: #ff6b8a; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.form__submit { width: 100%; margin-top: 4px; }
.form__submit[disabled] { opacity: .6; cursor: default; transform: none; }
.form__status { min-height: 18px; font-size: 13px; margin: 0; text-align: center; }
.form__status.error { color: #ff8aa0; }
.success__mark {
  width: 60px; height: 60px; margin: 0 auto 18px; display: grid; place-items: center;
  font-size: 28px; color: #fff; font-weight: 700;
  background: var(--grad-btn); border-radius: 50%;
  box-shadow: 0 10px 30px -8px rgba(109,94,252,0.6);
}
@media (max-width: 860px) {
  .demo__grid { grid-template-columns: 1fr; gap: 36px; }
  .field-row { grid-template-columns: 1fr; }
}

.field .opt { color: var(--faint); font-weight: 400; }

/* ============================================================
   Interior pages
   ============================================================ */

/* ---------- page hero ---------- */
.page-hero { position: relative; overflow: hidden; padding: 150px 0 72px; }
.page-hero__glow {
  position: absolute; top: -260px; left: 50%; transform: translateX(-50%);
  width: 900px; height: 640px; pointer-events: none;
  background: radial-gradient(closest-side, rgba(109,94,252,0.30), rgba(56,211,255,0.08) 55%, transparent 72%);
  filter: blur(24px);
}
.page-hero__inner { position: relative; max-width: 760px; }
.page-hero h1 { font-size: clamp(2rem, 4.6vw, 3.2rem); margin-top: 12px; }
.page-hero .lede { font-size: 1.18rem; }
.page-hero .hero__actions { justify-content: flex-start; margin-top: 30px; }
.page-hero--center .page-hero__inner { margin-inline: auto; text-align: center; }
.page-hero--center .lede { margin-inline: auto; }
.page-hero--center .hero__actions { justify-content: center; }

/* ---------- about: one continuous piece ----------
   Not .page-hero and not a panel layout. The whole page is a single column of
   prose, so the type scale and rhythm are set here rather than borrowed. */
.essay { max-width: calc(62ch + 48px); margin-inline: auto; padding: 172px 0 24px; }
.essay__rule {
  width: 56px; height: 2px; border: 0; margin: 0 0 34px;
  background: linear-gradient(90deg, var(--a1), var(--a2));
}
.essay h1 { font-size: clamp(2rem, 4.4vw, 2.95rem); line-height: 1.1; }
.essay p { color: var(--muted); font-size: 1.05rem; line-height: 1.8; margin-top: 24px; }
.essay p:first-of-type { font-size: 1.18rem; color: var(--text); margin-top: 32px; }
.essay .essay__sign {
  margin-top: 44px; font-family: var(--display); font-weight: 600;
  font-size: 1.02rem; color: var(--text); line-height: 1.55;
}
.essay__sign span {
  display: block; font-family: var(--font); font-weight: 400;
  font-size: .92rem; color: var(--faint);
}
@media (max-width: 720px) { .essay { padding-top: 128px; } }

/* ---------- generic grids + panels ---------- */
.cols-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.cols-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.cols-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.mt-lg { margin-top: 52px; }
.panel {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 28px 26px; text-align: left;
  display: flex; flex-direction: column;
}
.panel__foot {
  margin-top: auto; padding-top: 16px;
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
}
.panel__foot .ui-k { align-self: center; }
.panel h3 { font-size: 1.15rem; }
.panel > p { color: var(--muted); font-size: .96rem; margin-top: 10px; }
.panel__label {
  font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--faint); margin-top: 22px;
}
.plain-list { list-style: none; margin-top: 12px; display: grid; gap: 9px; }
.plain-list li { color: var(--muted); font-size: .95rem; padding-left: 16px; position: relative; }
.plain-list li::before {
  content: ""; position: absolute; left: 0; top: 10px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--a2);
}

/* ---------- linked tiles ---------- */
.tile {
  display: block; background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 28px 26px;
  transition: transform .25s ease, border-color .25s ease, background .25s ease;
}
.tile:hover { transform: translateY(-4px); border-color: rgba(109,94,252,0.45); background: var(--panel-2); }
.tile h3 { font-size: 1.2rem; }
.tile p { color: var(--muted); font-size: .95rem; margin-top: 10px; }
.tile__go { display: inline-block; margin-top: 18px; color: var(--a3); font-size: 14px; font-weight: 600; }


/* ---------- AI Worker card ---------- */
.wcard {
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 1px solid var(--line-2); border-radius: var(--radius);
  padding: 24px; text-align: left; box-shadow: var(--shadow);
}
/* absorbs slack so the CTA sits flush at the bottom of every card in a row */
.wcard__sec:last-of-type { margin-bottom: auto; }
.hero__card { max-width: 440px; margin: 60px auto 0; }
.wcard__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.wcard__head h3 { font-size: 1.2rem; }
.wcard__cat {
  font-size: 10.5px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--a3); flex: none; padding-top: 4px;
}

.wcard__by { color: var(--faint); font-size: 13px; margin-top: 6px; }
.wcard__by strong { color: var(--muted); font-weight: 500; }
.wcard__stars { color: var(--a2); font-size: 13px; letter-spacing: 2px; flex: none; }
.wcard__sec { margin-top: 20px; }
.wcard__sec > h4 {
  font-size: 11px; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--faint); margin-bottom: 10px;
}
.wcard .check-list { margin-top: 0; gap: 9px; }
.wcard .check-list li { font-size: .92rem; font-weight: 400; color: var(--muted); }
.wcard .btn { width: 100%; margin-top: 22px; }

/* ---------- evaluation meters ---------- */
.metrics { display: grid; gap: 12px; }
.metric__row { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 6px; }
.metric__row span:first-child { color: var(--muted); }
.metric__row span:last-child { color: var(--text); font-weight: 600; font-family: var(--display); }
.metric__bar { height: 6px; border-radius: 999px; background: var(--panel-2); border: 1px solid var(--line); overflow: hidden; }
.metric__fill { height: 100%; border-radius: 999px; background: var(--grad); transition: width .9s cubic-bezier(.2,.7,.2,1); }

/* ---------- the gap: provides vs lacks ---------- */
.gap-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 48px; text-align: left; }
.gap-col { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 30px 28px; }
.gap-col--lack { border-color: rgba(255,107,138,0.22); }
.gap-col--win {
  border-color: rgba(109,94,252,0.4);
  background: linear-gradient(180deg, var(--accent-soft), var(--panel));
}
.gap-col__tag {
  font-family: var(--display); font-size: 13px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--faint); margin-bottom: 8px;
}
.gap-col--win .gap-col__tag { color: var(--a3); }
.gap-col h3 { font-size: 1.15rem; }
.gap-col ul { list-style: none; margin-top: 20px; display: grid; gap: 13px; }
.gap-col li { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: .98rem; }
.gap-col .ok { color: var(--a3); font-weight: 700; flex: none; }
.gap-col .no { color: #ff6b8a; font-weight: 700; flex: none; }

/* ---------- AI Worker stack ---------- */
.stack { max-width: 620px; margin: 48px auto 0; display: grid; gap: 6px; justify-items: center; }
.stack__layer {
  width: 100%; text-align: center; padding: 18px 22px;
  border-radius: var(--radius-sm); background: var(--panel); border: 1px solid var(--line);
  font-family: var(--display); font-weight: 600;
}
.stack__layer--core {
  background: linear-gradient(180deg, var(--accent-soft), var(--panel));
  border-color: rgba(109,94,252,0.4); padding: 24px 22px;
}
.stack__layer--core .stack__sub {
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 14px;
}
.stack__layer--core .stack__sub span {
  font-family: var(--font); font-weight: 500; font-size: 12.5px; color: #d7d2ff;
  padding: 5px 11px; border-radius: 999px;
  background: rgba(109,94,252,0.16); border: 1px solid rgba(109,94,252,0.3);
}
.stack__arrow { width: 2px; height: 22px; background: linear-gradient(var(--a1), var(--a3)); }

/* ---------- why lancis ---------- */
.why { display: grid; gap: 10px; max-width: 640px; margin: 0 auto; }
.why p {
  font-family: var(--display); font-size: clamp(1.3rem, 3.4vw, 2.1rem);
  font-weight: 600; line-height: 1.3;
}
.why p:last-child { color: var(--text); }
.why .muted-title { color: var(--faint); }

/* ---------- research + news ---------- */
.article {
  display: block; padding: 28px 0; border-top: 1px solid var(--line);
  transition: border-color .25s ease;
}
.article:hover { border-color: var(--line-2); }
.article:hover h3 { color: var(--a2); }
.article:last-child { border-bottom: 1px solid var(--line); }
.article__meta { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.article h3 { font-size: 1.35rem; margin-top: 10px; transition: color .25s ease; }
.article p { color: var(--muted); margin-top: 8px; max-width: 70ch; }
.news { list-style: none; display: grid; gap: 14px; margin-top: 32px; }
.news li {
  display: flex; align-items: baseline; gap: 16px;
  padding: 18px 22px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--panel); text-align: left;
}
.news .news__tag {
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--a3); flex: none; width: 130px;
}
.news p { color: var(--muted); font-size: .96rem; }

/* ============================================================
   Product shots
   ============================================================ */
.shot { position: relative; margin-top: 34px; }
.shot img {
  display: block; width: 100%; height: auto;
  border-radius: var(--radius); border: 1px solid var(--line-2);
  box-shadow: var(--shadow);
}
.shot__cap { margin-top: 14px; font-size: 13px; color: var(--faint); text-align: center; }
/* clickable shot: hover lift + a cue pinned to the bottom edge */
.shot--link { display: block; position: relative; transition: transform .3s ease, box-shadow .3s ease; }
.shot--link:hover { transform: translateY(-4px); }
.shot--link:hover img { border-color: rgba(109,94,252,0.5); }
.shot--link .hero__shot__cue { position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%); }
.shot__cap strong { color: var(--muted); font-weight: 600; }
/* pulled-out lines lifted from the product itself */
.quote {
  max-width: 46ch; margin: 0 auto;
  font-family: var(--display); font-weight: 600;
  font-size: clamp(1.15rem, 2.6vw, 1.6rem); line-height: 1.4;
}
.quote--left { margin-inline: 0; }

/* attributed pull-quote */
.testimonial { margin: 72px auto 0; max-width: 52ch; text-align: center; }
.testimonial .quote { margin: 0; }
.testimonial__by {
  margin-top: 20px; font-size: 14px; color: var(--faint);
  font-family: var(--display); font-weight: 500;
}

/* ---------- responsive ---------- */
@media (max-width: 960px) {
  .cols-4 { grid-template-columns: 1fr 1fr; }
  .cols-3 { grid-template-columns: 1fr; }
  .gap-duo { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .page-hero { padding-top: 118px; }
  .cols-2 { grid-template-columns: 1fr; }
  .news li { flex-direction: column; gap: 8px; }
  .news .news__tag { width: auto; }
}
@media (max-width: 460px) {
  .cols-4 { grid-template-columns: 1fr; }
}

/* ============================================================
   Demo-UI mockups — real product surfaces used to explain
   features in "How Lancis works" (mirrors the app's design).
   ============================================================ */
.ui-spec, .ui-eval, .ui-wcard {
  background: var(--panel-2); border: 1px solid var(--line);
  border-radius: var(--radius-sm); text-align: left;
}
.ui-spec { margin-top: 20px; padding: 16px; display: grid; gap: 14px; }
.ui-spec__head { display: flex; align-items: center; gap: 11px; }
.ui-spec__title { font-family: var(--display); font-weight: 700; font-size: 1rem; }
.ui-spec__sub { font-size: 12px; color: var(--faint); font-family: 'SF Mono', ui-monospace, monospace; }

.ui-tile {
  width: 38px; height: 38px; border-radius: 11px; flex: none;
  display: grid; place-items: center; color: #fff; background: #6d5efc;
}
.ui-tile--blue { background: #4f8bff; }
.ui-tile--violet { background: #7c5cff; }

.ui-field { display: grid; gap: 6px; }
.ui-k { font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.ui-v { font-size: 13.5px; color: var(--muted); line-height: 1.45; }

.ui-guards { display: flex; flex-wrap: wrap; gap: 7px; }
.ui-guard { font-size: 12px; color: var(--muted); display: inline-flex; align-items: center; gap: 7px; }
.ui-guard::before { content: ""; width: 7px; height: 7px; border-radius: 50%; flex: none; }
.ui-guard--ok::before { background: #6ee7a0; }
.ui-guard--no { color: #ffa7b8; }
.ui-guard--no::before { background: #ff6b8a; }

.ui-flow { display: grid; gap: 8px; }
.ui-fstep { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.ui-num { color: var(--faint); font-family: 'SF Mono', ui-monospace, monospace; font-size: 12px; }
.ui-fname { color: var(--text); flex: 1; }
.ui-model {
  font-size: 11px; font-family: 'SF Mono', ui-monospace, monospace; color: #d7d2ff;
  border: 1px solid rgba(109,94,252,0.3); background: var(--accent-soft);
  padding: 3px 9px; border-radius: 999px; white-space: nowrap;
}

/* evaluate */
.ui-eval { margin-top: 20px; padding: 16px; display: grid; gap: 16px; }
.ui-eval__nums { display: flex; gap: 22px; }
.ui-eval__nums > div { display: grid; gap: 2px; }
.ui-big { font-family: var(--display); font-weight: 700; font-size: 1.5rem; }
.ui-pos { color: #6ee7a0; }
.ui-fill--flat { background: var(--faint); }

.ui-chip {
  font-size: 12px; font-weight: 600; padding: 5px 11px; border-radius: 999px;
  border: 1px solid var(--line-2); color: var(--muted); justify-self: start;
}
.ui-chip--ok { color: #6ee7a0; border-color: rgba(110,231,160,0.35); background: rgba(110,231,160,0.08); }
.ui-chip--free { color: #6ee7a0; border-color: rgba(110,231,160,0.35); background: rgba(110,231,160,0.08); }

/* discover cards */
.ui-cards { margin-top: 20px; display: grid; gap: 12px; }
.ui-wcard { padding: 14px 16px; display: flex; gap: 12px; align-items: center; }
.ui-wcard__body { display: grid; gap: 4px; flex: 1; }
.ui-wcard__title { font-family: var(--display); font-weight: 700; font-size: 1.02rem; }
.ui-price { font-family: var(--display); font-weight: 700; font-size: 1rem; }
.ui-price__u { color: var(--faint); font-weight: 400; font-size: 12px; margin-left: 2px; }
.ui-wcard__desc { font-size: 12.5px; color: var(--muted); line-height: 1.45; }
.ui-wcard__foot { font-size: 12.5px; color: var(--faint); display: flex; align-items: center; gap: 6px; }
.ui-stars { color: #7c5cff; letter-spacing: 1px; }
.ui-rev { color: var(--faint); }

/* ---------- creator earnings mockup ---------- */
.ui-earn {
  margin-top: 22px; padding: 16px; display: grid; gap: 12px;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.ui-earn__lead { display: grid; gap: 2px; }
.ui-earn__big { font-family: var(--display); font-weight: 700; font-size: 1.8rem; }
.ui-earn__spark { width: 100%; height: 110px; display: block; }
.ui-earn__stats { display: flex; gap: 28px; }
.ui-earn__stats > div { display: grid; gap: 2px; }
.ui-earn__stat { font-family: var(--display); font-weight: 700; font-size: 1.05rem; }

/* ---------- teach / recorder section ---------- */
.teach { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.teach__copy h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); margin-top: 14px; }
.teach__copy .lede { margin-top: 18px; }
.teach__copy .check-list { margin-top: 22px; }
.teach__ui { display: grid; gap: 16px; }

.ui-rec {
  display: flex; align-items: center; gap: 14px;
  background: var(--panel-2); border: 1px solid var(--line-2); border-radius: 14px;
  padding: 14px 16px; box-shadow: var(--shadow);
}
.ui-rec__dot { width: 10px; height: 10px; border-radius: 50%; background: #6ee7a0; flex: none; }
.ui-rec__text { flex: 1; }
.ui-rec__title { font-weight: 600; font-size: 14px; }
.ui-rec__meta { font-size: 12.5px; color: var(--faint); font-family: 'SF Mono', ui-monospace, monospace; }
.ui-rec__review {
  font-size: 13px; font-weight: 700; color: #0b0c10; background: #fff;
  padding: 8px 16px; border-radius: 10px;
}

.ui-conv {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 18px; display: grid; gap: 12px;
}
.ui-conv__badge {
  justify-self: start; font-size: 11px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--a2);
  border: 1px solid rgba(160,107,255,0.35); background: rgba(160,107,255,0.10);
  padding: 4px 10px; border-radius: 999px;
}
.ui-conv__line { font-size: 16px; display: flex; align-items: center; gap: 10px; font-family: 'SF Mono', ui-monospace, monospace; }
.ui-conv__arrow { color: var(--faint); }
.ui-conv__old { color: var(--faint); text-decoration: line-through; }
.ui-conv__new { color: #6ee7a0; font-weight: 700; }
.ui-conv__rule { font-size: 13.5px; color: var(--text); line-height: 1.5; }
.ui-conv__foot { display: flex; align-items: center; gap: 12px; }
.ui-chip--tag { color: var(--muted); border-color: var(--line-2); font-family: 'SF Mono', ui-monospace, monospace; }
.ui-conv__src { font-size: 12px; color: var(--faint); }

@media (max-width: 820px) {
  .teach { grid-template-columns: 1fr; gap: 32px; }
}

/* ---------- conversational build mockup ---------- */
.ui-chat { margin-top: 18px; display: grid; gap: 8px; }
.ui-bub {
  font-size: 12.5px; line-height: 1.45; padding: 9px 12px; border-radius: 13px;
  max-width: 90%;
}
.ui-bub--bot {
  background: var(--panel-2); border: 1px solid var(--line); color: var(--muted);
  border-bottom-left-radius: 4px; justify-self: start;
}
.ui-bub--user {
  background: var(--grad-btn); color: #fff;
  border-bottom-right-radius: 4px; justify-self: end;
}

/* alternate the two-column band (mockup on the left) */
.teach--rev .teach__copy { order: 2; }
.teach--rev .teach__ui { order: 1; }
@media (max-width: 820px) {
  .teach--rev .teach__copy { order: 1; }
  .teach--rev .teach__ui { order: 2; }
}

/* ---------- ownership / privacy mockup ---------- */
.ui-own {
  background: var(--panel-2); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 18px; display: grid; gap: 16px;
}
.ui-own__head { display: flex; align-items: center; gap: 12px; }
.ui-own__lock {
  width: 38px; height: 38px; border-radius: 11px; flex: none;
  display: grid; place-items: center; color: #c9c2ff;
  background: var(--accent-soft); border: 1px solid rgba(109,94,252,0.3);
}
.ui-own__title { font-family: var(--display); font-weight: 700; font-size: 1rem; }
.ui-own__sub { font-size: 12px; color: var(--faint); font-family: 'SF Mono', ui-monospace, monospace; }
.ui-own__head .ui-chip { margin-left: auto; }
.ui-own__stats {
  display: flex; gap: 22px; padding: 14px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.ui-own__stats > div { display: grid; gap: 2px; }
.ui-own__num { font-family: var(--display); font-weight: 700; font-size: 1.5rem; }
.ui-own__list { list-style: none; display: grid; gap: 11px; }
.ui-own__list li { font-size: 13.5px; color: var(--muted); display: flex; align-items: center; gap: 10px; }
.ui-own__list li::before { content: "✓"; color: #6ee7a0; font-weight: 700; }

/* ---------- run-on-your-model + record mockups ---------- */
.ui-run {
  margin-top: 20px; padding: 16px; display: grid; gap: 11px;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.ui-run__foot {
  font-size: 12px; color: var(--faint); font-family: 'SF Mono', ui-monospace, monospace;
  padding-top: 6px; border-top: 1px solid var(--line);
}
.ui-trace {
  margin-top: 20px; padding: 4px 16px; display: grid;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.ui-trace__row {
  display: flex; align-items: center; gap: 11px; padding: 12px 0;
  border-bottom: 1px solid var(--line); font-size: 13px;
}
.ui-trace__row:last-child { border-bottom: none; }
.ui-trace__check {
  width: 18px; height: 18px; border-radius: 50%; flex: none;
  background: var(--grad-btn); color: #fff; display: grid; place-items: center; font-size: 11px;
}
.ui-trace__name { color: var(--text); flex: 1; }
.ui-trace__ms { color: var(--faint); font-family: 'SF Mono', ui-monospace, monospace; font-size: 12px; }

/* supervise: the "needs you" approval gate on the last trace row */
.ui-trace__wait {
  width: 18px; height: 18px; border-radius: 50%; flex: none;
  background: rgba(224, 178, 65, 0.15); border: 1px solid rgba(224, 178, 65, 0.5);
  color: #e0b241; display: grid; place-items: center; font-size: 12px; font-weight: 700;
}
.ui-chip--warn {
  color: #e0b241; border-color: rgba(224, 178, 65, 0.4); background: rgba(224, 178, 65, 0.10);
  margin-left: auto;
}

/* icon tile on "what you see before you deploy" panels — matches homepage fcard (blue) */
.panel__ic {
  width: 44px; height: 44px; border-radius: 12px; margin-bottom: 16px;
  display: grid; place-items: center; color: var(--a3);
  background: var(--accent-soft); border: 1px solid rgba(56, 211, 255, 0.25);
}
/* example workers listed under each category card */
.cat-egs {
  list-style: none; margin-top: 16px; padding-top: 14px;
  border-top: 1px solid var(--line); display: grid; gap: 9px;
}
.cat-egs li { font-size: 13.5px; color: var(--muted); display: flex; align-items: center; gap: 9px; }
.cat-egs li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--a2); flex: none; }

/* clickable category cards (buttons) that filter the example workers below */
.cat-card {
  cursor: pointer; text-align: left; width: 100%; font: inherit; color: inherit;
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
}
.cat-card:hover { transform: translateY(-3px); border-color: var(--line-2); }
.cat-card.is-active {
  border-color: rgba(109, 94, 252, 0.55);
  background: linear-gradient(180deg, var(--accent-soft), var(--panel));
}
.cat-card.is-active h3 { color: var(--text); }

/* logo row in the "Run on your model" card */
.ui-run__logos { display: flex; flex-wrap: wrap; gap: 10px; }
.ui-run__logo {
  display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--text);
  background: var(--panel); border: 1px solid var(--line-2); border-radius: 999px; padding: 8px 14px 8px 10px;
}
.ui-run__logo img { width: 20px; height: 20px; object-fit: contain; flex: none; }

/* bare variant of the run mockup — no surrounding box */
.ui-run--bare { background: none; border: none; padding: 0; gap: 16px; }
.ui-run--bare .ui-run__foot { border-top: none; padding-top: 0; }
.ui-run__logo--more { color: var(--muted); }

/* ---------- "what a worker is" — definition cards with examples ---------- */
.def-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 56px; text-align: left; }
.def-card {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 28px 26px; display: flex; flex-direction: column;
}
.def-card__head { display: flex; gap: 14px; align-items: flex-start; }
.def-card__ic {
  width: 44px; height: 44px; flex: none; border-radius: 12px; display: grid; place-items: center;
  background: var(--accent-soft); color: var(--a3); border: 1px solid rgba(56,211,255,0.25); font-size: 18px;
}
.def-card__head h3 { font-size: 1.15rem; }
.def-card__head p { color: var(--muted); margin-top: 6px; font-size: .95rem; }
.def-eg {
  margin-top: 20px; display: grid; gap: 9px;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 16px 18px;
}
.eg { font-size: 13.5px; display: flex; align-items: flex-start; gap: 9px; line-height: 1.4; }
.eg--good { color: var(--muted); }
.eg--good::before { content: "✓"; color: #6ee7a0; font-weight: 700; flex: none; }
.eg--bad { color: var(--faint); }
.eg--bad::before { content: "✕"; color: #ff6b8a; font-weight: 700; flex: none; }
.eg-step {
  font-size: 13px; color: var(--muted); font-family: 'SF Mono', ui-monospace, monospace;
  padding-left: 18px; position: relative;
}
.eg-step::before { content: "→"; position: absolute; left: 0; color: var(--a2); }
@media (max-width: 720px) { .def-grid { grid-template-columns: 1fr; } }

/* ============================================================
   See-it-work — tabbed flow sections (Use / Build)
   ============================================================ */
/* no rule, no colour step, no clipped spotlight — the two flows share one
   background and are separated only by space and a soft wash */
.flow { position: relative; }
.flow--build { padding-top: 64px; }
/* a wide, shallow wash that crosses the section edge rather than stopping at it */
.flow .page-hero__glow {
  top: -140px; left: 50%; width: min(1500px, 124%); height: 880px;
  background: radial-gradient(ellipse 50% 46% at 50% 50%,
              rgba(109, 94, 252, 0.15), rgba(56, 211, 255, 0.045) 50%, transparent 72%);
  filter: blur(70px);
}
.flowset { margin-top: 44px; }

/* segmented control — one rail, one active segment */
.flow__tabs {
  position: relative;
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px;
  max-width: 780px; margin-inline: auto; padding: 6px;
  background: rgba(255, 255, 255, 0.022);
  border: 1px solid var(--line); border-radius: 999px;
}
/* the highlight slides between segments instead of blinking on/off */
/* Size and position both come from the active tab, on both axes: under 620px the
   rail stacks into a column, and a pill that only knew its width sat at full rail
   height behind every item at once. */
.flow__tabs__pill {
  position: absolute; top: 0; left: 0;
  border-radius: 999px; pointer-events: none;
  background: linear-gradient(180deg, #1e2231 0%, #171a26 100%);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 8px 20px -12px rgba(0, 0, 0, 0.95);
  opacity: 0;
  transition: transform .42s cubic-bezier(.4, 0, .2, 1), width .42s cubic-bezier(.4, 0, .2, 1),
              height .42s cubic-bezier(.4, 0, .2, 1), opacity .2s ease;
}
.flow__tabs__pill.is-ready { opacity: 1; }
.flow__tab {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  min-width: 0; padding: 11px 14px; border-radius: 999px; cursor: pointer;
  font-family: var(--display); font-weight: 600; font-size: 15px; color: var(--muted);
  border: 1px solid transparent; background: transparent;
  transition: color .2s ease, background .25s ease;
}
.flow__tab:hover { color: var(--text); background: rgba(255, 255, 255, 0.04); }
/* static highlight is the no-JS fallback; the sliding pill replaces it once wired up */
.flow__tab.is-active {
  color: var(--text);
  background: linear-gradient(180deg, #1e2231 0%, #171a26 100%);
  border-color: rgba(255, 255, 255, 0.18);
}
.flow__tabs.has-pill .flow__tab.is-active { background: transparent; border-color: transparent; }
.flow__tab:focus-visible { outline: 2px solid var(--a2); outline-offset: 2px; }
.flow__tab__ico { flex: none; width: 18px; height: 18px; color: var(--faint); transition: color .25s ease; }
.flow__tab.is-active .flow__tab__ico { color: var(--a2); }
.flow__tab__txt { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.flow__tab__txt em {
  font-style: normal; font-weight: 600; font-size: 11.5px;
  letter-spacing: .1em; color: var(--faint); transition: color .25s ease;
}
.flow__tab.is-active .flow__tab__txt em { color: var(--a2); }

/* panels — a carousel: the track slides, the viewport grows to the active panel */
.flowpanels {
  margin-top: 40px;
  overflow: hidden;
  transition: height .45s cubic-bezier(.4, 0, .2, 1);
}
.flowtrack {
  display: flex; align-items: flex-start;
  transition: transform .5s cubic-bezier(.4, 0, .2, 1);
}
.flowpanel { flex: 0 0 100%; min-width: 0; padding-inline: 2px; }
.flowpanel:not(.is-active) { opacity: .35; transition: opacity .4s ease; }
.flowpanel.is-active { opacity: 1; transition: opacity .4s ease; }
.flowpanel .shot { margin-top: 0; }
.flowpanel__head { max-width: 68ch; margin: 34px auto 0; text-align: center; }
.flowpanel__title { font-size: clamp(1.3rem, 2.6vw, 1.75rem); }
.flowpanel__body { margin-top: 14px; color: var(--muted); font-size: 16px; line-height: 1.72; }
.flowpanel__body strong { color: var(--text); font-weight: 600; }
@media (prefers-reduced-motion: reduce) {
  .flowtrack, .flowpanels, .flow__tabs__pill { transition: none; }
}

@media (max-width: 860px) {
  .flow__tab { font-size: 14px; padding: 10px 10px; gap: 7px; }
  .flow__tab__ico { display: none; }
}
@media (max-width: 620px) {
  .flow__tabs { grid-auto-flow: row; grid-auto-columns: auto; max-width: 420px; border-radius: var(--radius); }
  .flow__tab { border-radius: var(--radius-sm); justify-content: flex-start; }
  /* match the stacked tabs, not the horizontal rail's fully round ends */
  .flow__tabs__pill { border-radius: var(--radius-sm); }
  .flow__tab__ico { display: block; }
}

/* ---------- sign-in: single centred card ---------- */
.demo--solo .formcard {
  max-width: 460px; margin-inline: auto; position: relative;
  padding: 38px 34px 32px;
}
.demo--solo .formcard h1 { font-size: clamp(1.7rem, 3.4vw, 2.2rem); margin-top: 4px; }
.demo--solo .formcard .kicker { margin-bottom: 10px; }
.formcard__alt {
  margin-top: 22px; text-align: center; font-size: 14px; color: var(--faint);
}
.formcard__alt a { color: var(--muted); border-bottom: 1px solid var(--line-2); }
.formcard__alt a:hover { color: var(--text); border-bottom-color: var(--a2); }
.formcard__success .btn + .btn { margin-top: 12px; }

/* ---------- sign-in modal ---------- */
.modal {
  width: min(440px, calc(100vw - 32px));
  margin: auto;                       /* centres in the top layer */
  padding: 38px 34px 30px;
  border: 1px solid var(--line-2); border-radius: var(--radius);
  background: var(--panel); color: var(--text);
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.85);
  overflow: visible;
}
.modal::backdrop {
  background: rgba(6, 7, 11, 0.55);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
}
.modal[open] { animation: modalIn .26s cubic-bezier(.4, 0, .2, 1) both; }
.modal[open]::backdrop { animation: backdropIn .26s ease both; }
@keyframes modalIn {
  from { opacity: 0; transform: translateY(12px) scale(.97); }
  to   { opacity: 1; transform: none; }
}
@keyframes backdropIn { from { opacity: 0; } to { opacity: 1; } }

.modal h2 { font-size: 1.7rem; }
.modal .kicker { margin-bottom: 8px; }
.modal__close {
  position: absolute; top: 14px; right: 14px;
  display: grid; place-items: center; width: 34px; height: 34px;
  border-radius: 50%; cursor: pointer; color: var(--faint);
  background: transparent; border: 1px solid transparent;
  transition: color .2s ease, background .2s ease, border-color .2s ease;
}
.modal__close svg { width: 16px; height: 16px; }
.modal__close:hover { color: var(--text); background: var(--panel-2); border-color: var(--line-2); }
.modal .formcard__alt { margin-top: 20px; }
.modal .formcard__success { padding-top: 6px; }

@media (prefers-reduced-motion: reduce) {
  .modal[open], .modal[open]::backdrop { animation: none; }
}

/* ---------- sign-in card (page + modal share this) ---------- */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.signin__title { font-size: 1.7rem; margin-top: 2px; }
.signin .kicker { margin-bottom: 8px; }
.linkbtn {
  font: inherit; color: var(--muted); background: none; border: 0; padding: 0;
  cursor: pointer; border-bottom: 1px solid var(--line-2);
}
.linkbtn:hover { color: var(--text); border-bottom-color: var(--a2); }

/* inline link inside a panel body */
.panel p > a {
  color: var(--a3); white-space: nowrap;
  border-bottom: 1px solid rgba(56, 211, 255, 0.3);
  transition: border-color .2s ease;
}
.panel p > a:hover { border-bottom-color: var(--a3); }

/* ============================================================
   /workers — the catalog, in the product's own visual language
   (monochrome surfaces, mono metadata, dense cards) rather than
   the marketing system's panels and gradients.
   ============================================================ */
.appview { padding: 116px 0 96px; }
/* same gutter as the nav — content must line up with the wordmark */
.appview__wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 24px; }
.appview__head h1 { font-size: 28px; font-weight: 700; letter-spacing: -.4px; }
.appview__head p { color: var(--muted); font-size: 15px; margin-top: 6px; max-width: 68ch; }

.appview__controls {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 26px;
}
.appfield, .appsel {
  height: 42px; background: #131319; border: 1px solid #232330; border-radius: 10px;
  color: var(--text); font: inherit; outline: none;
}
.appfield { flex: 1 1 240px; min-width: 220px; font-size: 15px; padding: 0 14px; }
.appfield::placeholder { color: var(--faint); }
.appsel { font-size: 13px; padding: 0 12px; cursor: pointer; }
.appfield:focus, .appsel:focus { border-color: #3a3a55; }
.appclear {
  height: 42px; padding: 0 14px; border-radius: 10px; cursor: pointer;
  background: none; border: 1px solid transparent; color: var(--muted); font: inherit; font-size: 14px;
}
.appclear:hover { color: var(--text); background: #16161f; }
.mono { font-family: 'SF Mono', Menlo, Consolas, monospace; }

.wkgrid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 12px; margin-top: 20px;
}
.wk {
  background: #131319; border: 1px solid #232330; border-radius: 18px;
  padding: 22px; display: flex; flex-direction: column; gap: 16px; text-align: left;
  transition: border-color .16s ease, transform .16s ease;
}
.wk:hover { border-color: #34344a; transform: translateY(-2px); }
.wk[hidden] { display: none; }
.wk__head { display: flex; align-items: center; gap: 12px; }
.wk__av {
  flex: none; width: 46px; height: 46px; border-radius: 14px;
  display: grid; place-items: center; color: #fff;
}
.wk__av svg { width: 23px; height: 23px; }
.wk__title { font-size: 19px; font-weight: 700; letter-spacing: -.3px; line-height: 1.2; }
.wk__id { display: grid; gap: 5px; min-width: 0; }
.wk__price { font-size: 17px; font-weight: 700; }
.wk__price span { font-weight: 400; font-size: 12.5px; color: var(--faint); margin-left: 2px; }
.wk__desc { font-size: 13.5px; color: var(--muted); line-height: 1.5; }
.wk__foot {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  flex-wrap: wrap; margin-top: auto;
}
.wk__by { font-size: 12.5px; color: var(--muted); }
.wk__by em { font-style: normal; color: var(--faint); }
.wk__rate { display: inline-flex; align-items: baseline; gap: 2px; font-size: 12.5px; color: var(--faint); }
.wk__rate .on { color: #a06bff; }
.wk__rate .off { color: #2a2a3a; }
.wk__rate b { margin-left: 5px; color: var(--text); font-size: 13px; }
.wk__meta { display: flex; gap: 6px; flex-wrap: wrap; }
.wk__chip {
  font-family: 'SF Mono', Menlo, Consolas, monospace; font-size: 11px; color: var(--muted);
  border: 1px solid #232330; border-radius: 999px; padding: 3px 9px; white-space: nowrap;
}
/* .wk__id is a grid, so a chip stretches the full column unless told otherwise.
   align-self handles the block axis only — justify-self is what makes it hug its text. */
.wk__chip--ok { color: #8fe0a0; border-color: rgba(143, 224, 160, .35); align-self: start; justify-self: start; }

.appempty { margin-top: 40px; text-align: center; color: var(--muted); }
.appnote { margin-top: 40px; font-size: 13.5px; color: var(--faint); }
.appnote a { color: var(--a3); border-bottom: 1px solid rgba(56, 211, 255, .3); }

@media (max-width: 620px) {
  .appview { padding-top: 100px; }
}

/* ---------- /worker-* detail ---------- */
.wk[href] { text-decoration: none; color: inherit; }
.appcrumb { font-size: 13px; color: var(--faint); margin-bottom: 22px; }
.appcrumb a { color: var(--muted); }
.appcrumb a:hover { color: var(--text); }
.appcrumb span { margin: 0 6px; }
/* A back link, not a trail: there is one way in and one way out of a worker page. */
.appcrumb__back { display: inline-flex; align-items: center; gap: 7px; }
.appcrumb__back span { margin: 0; transition: transform .18s ease; }
.appcrumb__back:hover span { transform: translateX(-3px); }
@media (prefers-reduced-motion: reduce) { .appcrumb__back span { transition: none; } }
.appcrumb__meta { font-size: 12.5px; color: var(--faint); margin-top: 4px; }

.wdet__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.wdet__id { display: flex; align-items: center; gap: 14px; }
.wdet__id h1 { font-size: 28px; font-weight: 700; letter-spacing: -.4px; }
.wdet__goal { color: var(--muted); font-size: 15px; margin-top: 14px; max-width: 66ch; line-height: 1.6; }

/* Detail: the run itself takes the wide left column, the agent/price/input rail sits
   right. Swapped by grid placement, not by moving the markup — the rail stays first in
   source, so it is still what you meet first when this stacks on a phone. */
.wdet { display: grid; grid-template-columns: 1fr 320px; gap: 14px; margin-top: 28px; align-items: start; }
.wdet__side { grid-column: 2; grid-row: 1; }
.wdet__main { grid-column: 1; grid-row: 1; }
.wdet__side { display: grid; gap: 12px; align-content: start; }
.wpanel {
  background: #131319; border: 1px solid #232330; border-radius: 16px;
  padding: 18px 20px; display: grid; gap: 10px;
}
.wpanel__k {
  font-size: 11px; font-weight: 600; color: var(--faint);
  text-transform: uppercase; letter-spacing: 1.1px;
}
.wpanel__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.wdet__expert { font-size: 15px; font-weight: 600; }
.wdet__expertsub { font-size: 12.5px; color: var(--faint); margin-top: -6px; }
.wio { display: grid; gap: 3px; }
.wio__k { font-size: 11px; text-transform: uppercase; letter-spacing: .9px; color: var(--faint); }
.wio__v { font-size: 13.5px; color: var(--muted); }
.wprice { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 13.5px; color: var(--muted); }
.wprice b { color: var(--text); font-size: 17px; }
.wprice em { font-style: normal; font-weight: 400; font-size: 12.5px; color: var(--faint); }
.wdet__note { font-size: 12.5px; color: var(--faint); line-height: 1.6; }
.wdet__note .pos { color: #8fe0a0; }
.wdet__note .neg { color: #e06c75; }
.wdet__rule { height: 1px; background: #232330; margin: 4px 0; }
.wcaps { list-style: none; display: grid; gap: 8px; }
.wcaps li { font-size: 13.5px; color: var(--muted); padding-left: 16px; position: relative; }
.wcaps li::before { content: "·"; position: absolute; left: 4px; color: var(--faint); }

/* The action sits on the card that names the price, not floating in the header. */
.wdet__cta { display: flex; width: 100%; margin-top: 16px; justify-content: center; }
.wdet__main { background: #131319; border: 1px solid #232330; border-radius: 16px; padding: 8px 20px 22px; }
.wtabs { display: flex; gap: 4px; border-bottom: 1px solid #232330; margin: 0 -20px 18px; padding: 0 20px; }
.wtab {
  background: none; border: 0; cursor: pointer; font: inherit; font-size: 14px; font-weight: 600;
  color: var(--faint); padding: 14px 4px; margin-right: 18px; border-bottom: 2px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}
.wtab:hover { color: var(--muted); }
.wtab.is-active { color: var(--text); border-bottom-color: var(--a2); }
.wpane { display: grid; gap: 14px; }
.wpane[hidden] { display: none; }

.wsteps { list-style: none; display: grid; gap: 10px; }
.wstep { background: #16161f; border: 1px solid #232330; border-radius: 12px; padding: 14px 16px; }
.wstep__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.wstep__n {
  flex: none; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center;
  font-size: 11px; font-weight: 700; background: rgba(160,107,255,.16); color: var(--a2);
}
.wstep__name { font-size: 14px; font-weight: 600; margin-right: auto; }
.wstep__ms { font-size: 12px; color: var(--faint); }
.wstep__why { font-size: 13px; color: var(--muted); line-height: 1.55; margin-top: 8px; }

.wgrs { list-style: none; display: grid; gap: 10px; }
.wgr { display: flex; gap: 10px; font-size: 13.5px; color: var(--muted); line-height: 1.55; }
.wgr b { color: var(--text); font-weight: 600; }
.wgr__dot { flex: none; width: 6px; height: 6px; border-radius: 50%; background: #8fe0a0; margin-top: 7px; }
.wgr--never .wgr__dot { background: #e06c75; }

.wscore { display: grid; grid-template-columns: auto 1fr; gap: 40px; align-items: start; }
.wscore__v { font-size: 34px; font-weight: 700; letter-spacing: -1px; margin: 4px 0 2px; }
.wconvs { display: grid; gap: 10px; }
.wconv { display: flex; gap: 12px; align-items: start; font-size: 13px; color: var(--muted); line-height: 1.55; }
.wconv .wk__chip { flex: none; width: 62px; text-align: center; }
.wk__chip--warn { color: #e06c75; border-color: rgba(224,108,117,.35); }

@media (max-width: 900px) {
  .wdet { grid-template-columns: 1fr; }
  .wdet__side, .wdet__main { grid-column: auto; grid-row: auto; }
  .wscore { grid-template-columns: 1fr; gap: 20px; }
}

/* ---------- "Tell us what you need" composer ---------- */
.ask { margin-top: 34px; }
.ask__title { font-size: 21px; font-weight: 700; letter-spacing: -.3px; }
.ask__sub { font-size: 14px; color: var(--muted); margin-top: 6px; }
.ask__box {
  margin-top: 16px; background: #131319; border: 1px solid #232330;
  border-radius: 16px; padding: 14px 16px 12px;
  transition: border-color .16s ease;
}
.ask__box:focus-within { border-color: #3a3a55; }
.ask__input {
  width: 100%; background: none; border: 0; outline: none; resize: none;
  color: var(--text); font: inherit; font-size: 15px; line-height: 1.55;
  max-height: 160px; overflow-y: auto;
}
.ask__input::placeholder { color: var(--faint); }
.ask__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; }
.ask__hint { font-size: 12px; color: var(--faint); }
.ask__send {
  flex: none; width: 34px; height: 34px; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center; border: 0;
  background: var(--grad-btn); color: #fff;
  transition: transform .15s ease, opacity .15s ease;
}
.ask__send svg { width: 17px; height: 17px; }
.ask__send:hover { transform: translateY(-1px); }
.ask__send:disabled { opacity: .35; cursor: default; transform: none; }

.ask__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.ask__chip {
  font: inherit; font-size: 13px; color: var(--muted); cursor: pointer;
  background: none; border: 1px solid #232330; border-radius: 999px; padding: 7px 13px;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.ask__chip:hover { color: var(--text); border-color: #3a3a55; background: #16161f; }
  font: inherit; background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--muted); border-bottom: 1px solid #232330;
}

/* hero variant of the composer — centred, wider, hands off to /workers */
.ask--hero { max-width: 640px; margin: 34px auto 0; text-align: left; }
.ask--hero .ask__chips { justify-content: center; }
.hero__alt { margin-top: 22px; font-size: 14px; color: var(--faint); }
.hero__alt a { color: var(--muted); border-bottom: 1px solid var(--line-2); }
.hero__alt a:hover { color: var(--text); border-bottom-color: var(--a2); }
@media (max-width: 620px) { .ask--hero .ask__chips { justify-content: flex-start; } }

/* home hero when it is only the composer — no title above it to space away from */
.hero--ask { padding: 150px 0 88px; }
.hero--ask .hero__inner { max-width: 720px; }

/* registry entries — browsable, but nobody has tuned them yet */
.wk--raw { background: #101017; }
.wk--raw:hover { transform: none; border-color: #232330; }
.wk__by--raw { color: var(--faint); font-size: 12px; }

/* A question handed over from the home page takes the page's heading: it is what
   the visitor asked, so it outranks the generic title. The lead line under it
   carries the answer, and dims while the server is still reading. */
.appview__head--asked h1 { max-width: 34ch; text-wrap: balance; }
.appview__head--asked p { max-width: 56ch; }
.appview__head--asked.is-busy p { color: var(--faint); }

/* Indeterminate on purpose: the call takes three to five seconds and nothing
   reports progress within it, so a filling bar would be inventing a number. */
.spin {
  /* after the text, never before it: leading the line would indent the lead and
     make it jump left the moment the answer replaces "Reading your question…" */
  display: inline-block; width: 13px; height: 13px; margin-left: 10px;
  vertical-align: -1px; border-radius: 50%;
  border: 2px solid #232330; border-top-color: var(--a2);
  animation: spin .7s linear infinite;
}
/* an author-set display beats the UA rule for [hidden], so say it here */
.spin[hidden] { display: none; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .spin { animation: spinpulse 1.2s ease-in-out infinite; }
  @keyframes spinpulse { 50% { opacity: .3; } }
}