/* ===========================================================================
   Hiulix — site chrome.

   The look: a pale sky that the page falls out of, then a long quiet column
   of off-white with one idea per screen. Almost everything is type, rule and
   whitespace; the only saturated colour on the page is the blue on a section
   label and a live status dot, which is what makes them read as signal.

   Section order and rhythm follow the reference design the founder supplied.
   ========================================================================= */

/* --- tokens --------------------------------------------------------------- */

:root {
  --ink:        #0A0F1A;
  --ink-soft:   #212B3A;
  /* --muted carries body copy, so it has to clear 6:1 on --paper. The old
     #737D8C was about 4.4:1 — legible in a screenshot, thin on a real screen,
     and it made every paragraph on the site read as a caption. */
  --muted:      #4E5866;
  --muted-2:    #6A7483;
  /* Genuinely secondary: timestamps, licence lines, disabled states. Never
     body copy. */
  --faint:      #8B94A2;

  --paper:      #FAFAF9;
  --card:       #FFFFFF;
  --soft:       #F1F2F1;
  --soft-2:     #E9EBEA;

  --line:       rgba(11, 18, 32, .09);
  --line-soft:  rgba(11, 18, 32, .055);

  --blue:       #2563EB;
  --blue-ink:   #1D4ED8;
  --blue-wash:  #EDF3FE;

  --sky-deep:   #9FD0EE;
  --sky-mid:    #C6E3F7;
  --sky-pale:   #E7F2FB;

  --shell:      1180px;
  --radius:     18px;
  --radius-lg:  26px;

  /* One shadow, three depths. Anything else and cards stop looking like they
     belong to the same page. */
  --lift-1: 0 1px 2px rgba(11, 18, 32, .04), 0 4px 14px rgba(11, 18, 32, .04);
  --lift-2: 0 2px 6px rgba(11, 18, 32, .05), 0 18px 44px rgba(11, 18, 32, .07);
  --lift-3: 0 6px 18px rgba(11, 18, 32, .07), 0 40px 90px rgba(11, 18, 32, .11);

  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* --- reset ---------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* The masthead floats over the top of the page, so an anchor jump has to
     stop short of it or the heading lands underneath. */
  scroll-padding-top: 108px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 16.5px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; display: block; }
img { height: auto; }

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
  font-family: "Instrument Sans", "Inter", sans-serif;
  font-weight: 500;
  letter-spacing: -.028em;
  line-height: 1.08;
  margin: 0;
  color: var(--ink);
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }

button { font: inherit; color: inherit; }

::selection { background: #CFE1FD; color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
  border-radius: 6px;
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; top: -60px; left: 16px; z-index: 200;
  background: var(--ink); color: #fff;
  padding: 10px 18px; border-radius: 10px; font-size: .9rem;
  transition: top .18s var(--ease);
}
.skip-link:focus { top: 16px; }

/* --- primitives ----------------------------------------------------------- */

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: 24px;
}

.mono {
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .715rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 500;
}

/* The small blue section label. In the reference it always sits above the
   heading it introduces, and the arrow means "there is a section of the
   product behind this word" — so it is only ever used on a link. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--blue);
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: -.005em;
  margin: 0 0 22px;
}
.eyebrow svg { width: 11px; height: 11px; }

a.eyebrow { transition: opacity .18s var(--ease); }
a.eyebrow:hover { opacity: .68; }
a.eyebrow:hover svg { transform: translate(1px, -1px); }
.eyebrow svg { transition: transform .18s var(--ease); }

.eyebrow--muted { color: var(--muted-2); }

.lede {
  color: var(--muted);
  font-size: 1.04rem;
  line-height: 1.65;
  max-width: 58ch;
}

.btn {
  --btn-bg: var(--ink);
  --btn-fg: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 13px 24px;
  font-size: .93rem;
  font-weight: 500;
  letter-spacing: -.01em;
  cursor: pointer;
  white-space: nowrap;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease),
              background .18s var(--ease), color .18s var(--ease);
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--lift-2); }
.btn:active { transform: translateY(0); }
.btn svg { width: 15px; height: 15px; }

.btn--sm { padding: 9px 18px; font-size: .875rem; }
.btn--lg { padding: 15px 30px; font-size: 1rem; }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  border-color: var(--line);
}
.btn--ghost:hover { background: rgba(11, 18, 32, .04); box-shadow: none; }

.btn--light {
  --btn-bg: #fff;
  --btn-fg: var(--ink);
  box-shadow: var(--lift-1);
}

/* --- masthead ------------------------------------------------------------- */

.masthead {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  padding-top: 18px;
  transition: padding-top .3s var(--ease);
}

.masthead__inner { display: block; }

.masthead__pill {
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 9px 9px 9px 18px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: transparent;
  transition: background .3s var(--ease), border-color .3s var(--ease),
              box-shadow .3s var(--ease), backdrop-filter .3s var(--ease);
}

.masthead.is-stuck { padding-top: 10px; }
.masthead.is-stuck .masthead__pill {
  background: rgba(255, 255, 255, .78);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  border-color: var(--line-soft);
  box-shadow: var(--lift-1);
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: "Instrument Sans", sans-serif;
  font-weight: 600;
  font-size: 1.04rem;
  letter-spacing: -.028em;
  flex: none;
}
.wordmark__mark { width: 25px; height: 25px; border-radius: 7px; }
.wordmark__secondary { color: var(--muted-2); font-weight: 500; }

.nav {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-inline: auto;
}
.nav a {
  padding: 8px 13px;
  border-radius: 999px;
  font-size: .9rem;
  color: var(--ink-soft);
  letter-spacing: -.01em;
  transition: background .16s var(--ease), color .16s var(--ease);
}
.nav a:hover { background: rgba(11, 18, 32, .05); color: var(--ink); }
.nav a[aria-current="page"] { color: var(--ink); font-weight: 500; }

.masthead__actions { display: flex; align-items: center; gap: 10px; flex: none; }

.navtoggle {
  display: none;
  width: 38px; height: 38px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .7);
  border-radius: 999px;
  cursor: pointer;
  padding: 0;
  position: relative;
}
.navtoggle span {
  position: absolute; left: 11px; width: 16px; height: 1.5px;
  background: var(--ink); border-radius: 2px;
  transition: transform .22s var(--ease), opacity .16s var(--ease);
}
.navtoggle span:nth-child(1) { top: 14px; }
.navtoggle span:nth-child(2) { top: 18.5px; }
.navtoggle span:nth-child(3) { top: 23px; }
.navtoggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(4.5px) rotate(45deg); }
.navtoggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.navtoggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-4.5px) rotate(-45deg); }

/* --- hero ----------------------------------------------------------------- */

.hero {
  position: relative;
  padding: 148px 0 0;
  text-align: center;
  isolation: isolate;
  overflow: hidden;
}

/* The sky. Four stacked gradients rather than an image: it scales to any
   viewport, costs nothing to load, and never bands on a wide monitor. */
.hero__sky {
  position: absolute;
  /* Starts at the top of the page, not 160px above it: with the old offset the
     darkest part of the gradient sat off-screen and the visible band opened
     about 18% down the ramp, which is why the hero read as washed out. */
  inset: 0 0 auto 0;
  height: 920px;
  z-index: -2;
  background:
    radial-gradient(122% 78% at 50% 2%, #3D93D0 0%, #59A6DB 12%, #82C2E9 26%,
                    #A9D5F0 42%, #CCE4F7 62%, rgba(250, 250, 249, 0) 86%),
    linear-gradient(180deg, #3B91CF 0%, #5CA8DC 11%, #86C4EA 25%, #AFD8F1 41%,
                    #D2E8F8 60%, #EDF5FC 80%, var(--paper) 100%);
}

/* Clouds: blurred white ellipses drifting a few pixels. Kept to three — more
   than that and the top of the page turns to soup. */
/* A cloud is four overlapping puffs on a flat base, not one ellipse — one
   ellipse reads as a smudge, and the reference clouds have a silhouette. */
.hero__cloud {
  position: absolute;
  z-index: -1;
  pointer-events: none;
  will-change: transform;
  filter: blur(16px);
  background:
    radial-gradient(closest-side, rgba(255,255,255,.92) 58%, rgba(255,255,255,0)) 12% 62% / 42% 58% no-repeat,
    radial-gradient(closest-side, rgba(255,255,255,.92) 56%, rgba(255,255,255,0)) 38% 22% / 46% 88% no-repeat,
    radial-gradient(closest-side, rgba(255,255,255,.88) 56%, rgba(255,255,255,0)) 66% 48% / 44% 68% no-repeat,
    radial-gradient(closest-side, rgba(255,255,255,.82) 54%, rgba(255,255,255,0)) 88% 70% / 34% 46% no-repeat,
    radial-gradient(ellipse at 50% 100%, rgba(255,255,255,.8) 38%, rgba(255,255,255,0) 72%) 50% 82% / 92% 44% no-repeat;
}
/* Kept clear of the top ~140px. Cloud that high sits exactly where the sky is
   deepest and bleaches the whole band — which is what the founder was seeing
   when the hero read as "too pale". */
.hero__cloud--1 { top: 172px; left: -14%; width: 40vw; height: 182px; opacity: .72; animation: drift 34s ease-in-out infinite; }
.hero__cloud--2 { top: 124px; right: -16%; width: 42vw; height: 196px; opacity: .55; animation: drift 46s ease-in-out infinite reverse; }
.hero__cloud--3 { top: 372px; left: 20%;  width: 54vw; height: 250px; opacity: .40; animation: drift 58s ease-in-out infinite; }

@keyframes drift {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(3.5%, 10px, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .hero__cloud { animation: none !important; }
}

.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 15px 6px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .72);
  border: 1px solid rgba(255, 255, 255, .9);
  box-shadow: var(--lift-1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-size: .82rem;
  color: var(--ink-soft);
  letter-spacing: -.008em;
  margin-bottom: 30px;
}
.hero__badge b {
  white-space: nowrap;
  background: var(--ink);
  color: #fff;
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
}

.hero h1 {
  font-size: clamp(2.05rem, 5.4vw, 4.05rem);
  line-height: 1.05;
  letter-spacing: -.038em;
  max-width: 24ch;
  margin-inline: auto;
}
/* The headline breaks where the sentence turns, not where the box runs out.
   Below the breakpoint the line is too long to hold, so the break goes away
   and the browser wraps it naturally. The markup keeps a space BEFORE the
   <br>: hide the element and the two text nodes would otherwise run together
   into "rep,but". */
.hero h1 br { display: none; }
@media (min-width: 760px) { .hero h1 br { display: block; } }
.hero h1 em { font-style: normal; color: var(--ink-soft); }

.hero__sub {
  margin: 24px auto 0;
  max-width: 50ch;
  color: var(--ink-soft);
  font-size: 1.04rem;
  line-height: 1.6;
}

.hero__cta {
  margin-top: 30px;
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

.hero__note {
  margin-top: 16px;
  color: var(--ink-soft);
  opacity: .72;
  font-size: .84rem;
}

/* The product shot sits half in the sky and half on the paper — the seam is
   what makes the page feel like it starts here rather than at the fold. */
.hero__shot {
  margin-top: 60px;
  padding-bottom: 8px;
}

/* --- the browser frame ---------------------------------------------------- */

.frame {
  border-radius: 14px;
  background: #fff;
  border: 1px solid rgba(11, 18, 32, .1);
  box-shadow: var(--lift-3);
  overflow: hidden;
  text-align: left;
}

.frame__bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 13px;
  background: #F6F7F8;
  border-bottom: 1px solid var(--line-soft);
}
.frame__dots { display: flex; gap: 6px; flex: none; }
.frame__dots i { width: 9px; height: 9px; border-radius: 50%; background: #D8DBDE; }
.frame__url {
  flex: 1;
  background: #fff;
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  padding: 4px 11px;
  font-family: "JetBrains Mono", monospace;
  font-size: .68rem;
  color: var(--muted-2);
  display: flex;
  align-items: center;
  gap: 7px;
  max-width: 420px;
  margin-inline: auto;
}
.frame__url svg { width: 10px; height: 10px; flex: none; }

.frame__body { display: grid; grid-template-columns: 196px 1fr 244px; min-height: 430px; }

/* left rail: the customer's other conversations */
.rail {
  border-right: 1px solid var(--line-soft);
  padding: 14px 12px;
  background: #FCFCFC;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.rail__head {
  display: flex; align-items: center; justify-content: space-between;
  color: var(--muted-2); margin-bottom: 8px; padding-inline: 6px;
}
.rail__item {
  padding: 8px 9px;
  border-radius: 8px;
  font-size: .78rem;
  color: var(--ink-soft);
  line-height: 1.35;
  transition: background .15s var(--ease);
}
.rail__item span { display: block; color: var(--muted-2); font-size: .7rem; margin-top: 2px; }
.rail__item.is-on { background: #EDF3FE; color: var(--blue-ink); }
.rail__item.is-on span { color: #7DA5EE; }

.rail__foot {
  margin-top: auto;
  padding: 9px;
  border-radius: 9px;
  background: #fff;
  border: 1px solid var(--line-soft);
  font-size: .72rem;
  color: var(--muted);
  line-height: 1.4;
}
.rail__foot b { display: block; color: var(--ink); font-size: .8rem; margin-bottom: 1px; }

/* centre: the live conversation */
.convo { padding: 18px 20px; display: flex; flex-direction: column; gap: 12px; }

.convo__who {
  display: flex; align-items: center; gap: 9px;
  padding-bottom: 12px; border-bottom: 1px solid var(--line-soft); margin-bottom: 2px;
}
.convo__who b { font-size: .86rem; font-weight: 500; }
.convo__who em {
  font-style: normal; font-size: .72rem; color: var(--muted-2);
  display: inline-flex; align-items: center; gap: 5px;
}
.convo__who em::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: #22C55E; box-shadow: 0 0 0 3px rgba(34, 197, 94, .15);
}
.convo__badge {
  margin-left: auto; font-size: .66rem; color: var(--muted);
  background: var(--soft); padding: 3px 9px; border-radius: 999px;
}

.bub {
  max-width: 82%;
  padding: 10px 13px;
  border-radius: 13px;
  font-size: .82rem;
  line-height: 1.5;
}
.bub--ai  { background: var(--soft); border-bottom-left-radius: 4px; color: var(--ink-soft); }
.bub--you { background: var(--ink); color: #fff; align-self: flex-end; border-bottom-right-radius: 4px; }
.bub b { font-weight: 600; color: inherit; }

.convo__type {
  display: inline-flex; gap: 4px; align-items: center;
  background: var(--soft); padding: 12px 14px; border-radius: 13px;
  border-bottom-left-radius: 4px; width: fit-content;
}
.convo__type i {
  width: 5px; height: 5px; border-radius: 50%; background: var(--muted-2);
  animation: bob 1.3s var(--ease) infinite;
}
.convo__type i:nth-child(2) { animation-delay: .16s; }
.convo__type i:nth-child(3) { animation-delay: .32s; }
@keyframes bob { 0%, 60%, 100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }

/* right rail: the lead record being written as they speak */
.lead {
  border-left: 1px solid var(--line-soft);
  padding: 14px 15px;
  background: #FCFCFC;
  display: flex; flex-direction: column; gap: 11px;
}
.lead__head { display: flex; align-items: center; justify-content: space-between; color: var(--muted-2); }
.lead__score {
  background: #ECFDF3; color: #067647; font-size: .66rem; font-weight: 600;
  padding: 3px 9px; border-radius: 999px; letter-spacing: .02em;
}
.lead__row { border-bottom: 1px solid var(--line-soft); padding-bottom: 9px; }
.lead__row:last-of-type { border-bottom: 0; }
.lead__row span { display: block; font-size: .66rem; color: var(--muted-2); letter-spacing: .04em; text-transform: uppercase; margin-bottom: 3px; }
.lead__row b { font-size: .8rem; font-weight: 500; color: var(--ink); }
.lead__row.is-writing b { color: var(--blue-ink); }
.lead__row.is-writing b::after {
  content: ""; display: inline-block; width: 1.5px; height: .82em; margin-left: 2px;
  background: var(--blue); vertical-align: -1px; animation: caret 1s steps(1) infinite;
}
@keyframes caret { 50% { opacity: 0; } }

.lead__act {
  margin-top: auto; display: flex; flex-direction: column; gap: 6px;
}
.lead__act div {
  display: flex; align-items: center; gap: 7px;
  font-size: .72rem; color: var(--ink-soft);
  background: #fff; border: 1px solid var(--line-soft);
  padding: 7px 10px; border-radius: 8px;
}
.lead__act svg { width: 12px; height: 12px; color: #22C55E; flex: none; }

/* --- section shell -------------------------------------------------------- */

.sec { padding: 112px 0; }
.sec--tight { padding: 76px 0; }
.sec--soft { background: var(--soft); }
/* The block is wide; the heading inside it is what gets the short measure.
   Constraining the whole block instead squeezes the lede into a column. */
.sec__head { max-width: 640px; }
.sec__head h2 { font-size: clamp(1.9rem, 3.8vw, 2.9rem); max-width: 19ch; }
.sec__head .lede { margin-top: 20px; }

.sec__head--mid { max-width: 800px; margin-inline: auto; text-align: center; }
.sec__head--mid h2 { max-width: 20ch; margin-inline: auto; }
.sec__head--mid .lede { max-width: 58ch; margin-inline: auto; }

/* --- the statement block -------------------------------------------------- */
/* Two paragraphs at reading-poster size. The grey carries the setup and the
   black carries the claim, so the eye gets the argument before it reads it. */

.statement {
  max-width: 60ch;
  margin-inline: auto;
  font-size: clamp(1.08rem, 1.9vw, 1.42rem);
  line-height: 1.54;
  letter-spacing: -.016em;
  color: var(--muted);
}
.statement p + p { margin-top: 1.3em; }
.statement b { font-weight: 500; color: var(--ink); }

/* --- three-up cards ------------------------------------------------------- */

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 56px;
  align-items: stretch;
}

/* A container, not a bare image with a caption under it: the founder wants a
   hover lift and a spotlight, and both need an edge to happen on. */
.card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--card);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  padding: 13px 13px 22px;
  box-shadow: var(--lift-1);
}

.card__art {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line-soft);
  background: var(--soft);
  position: relative;
}
.card__art img { width: 100%; height: 100%; object-fit: cover; }

.card__art--wash-1 { background: linear-gradient(145deg, #FBE3EC 0%, #E8E6FA 45%, #DCEBFB 100%); }
.card__art--wash-2 { background: linear-gradient(145deg, #DFF3E6 0%, #DDEFF6 55%, #E8E9F7 100%); }
.card__art--wash-3 { background: linear-gradient(145deg, #FDF0DC 0%, #F6E5EE 50%, #E3E9FA 100%); }

.card__art { border-radius: 15px; }
.card h3 { font-size: 1.03rem; font-weight: 600; margin: 19px 7px 0; letter-spacing: -.018em; }
.card p { margin: 8px 7px 0; color: var(--muted); font-size: .91rem; line-height: 1.6; }

/* A miniature UI, drawn in the card art the way the reference does it. */
.mini {
  position: absolute;
  inset: 26px 22px auto;
  background: #fff;
  border-radius: 11px;
  box-shadow: var(--lift-2);
  padding: 12px;
  font-size: .68rem;
  line-height: 1.45;
}
.mini__row { display: flex; align-items: center; gap: 8px; padding: 6px 0; }
.mini__row + .mini__row { border-top: 1px solid var(--line-soft); }
.mini__row i {
  width: 18px; height: 18px; border-radius: 5px; flex: none;
  background: var(--soft); display: grid; place-items: center;
}
.mini__row i svg { width: 10px; height: 10px; color: var(--muted); }
.mini__row span { color: var(--ink-soft); flex: 1; }
.mini__row b { color: var(--muted-2); font-weight: 500; font-size: .64rem; }
.mini__tag {
  font-family: "JetBrains Mono", monospace; font-size: .58rem;
  letter-spacing: .05em; text-transform: uppercase;
  background: var(--blue-wash); color: var(--blue-ink);
  padding: 2px 6px; border-radius: 4px;
}
.mini__tag--green { background: #ECFDF3; color: #067647; }
.mini__tag--amber { background: #FEF6E7; color: #B54708; }

/* --- wide image band ------------------------------------------------------ */
/* A photograph carrying a line of copy and the three numbers it belongs to —
   the page had long stretches of pure text and this breaks them. */

.band {
  position: relative;
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line-soft);
  box-shadow: var(--lift-2);
}
.band img {
  width: 100%;
  aspect-ratio: 21 / 9;
  object-fit: cover;
  object-position: 50% 58%;
}

.band__over {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
  padding: clamp(24px, 4vw, 46px);
  color: #fff;
  /* Dark at the left and bottom where the type sits, clear on the right so
     the photograph is still a photograph. */
  background:
    linear-gradient(100deg, rgba(8, 14, 26, .82) 0%, rgba(8, 14, 26, .58) 42%, rgba(8, 14, 26, .12) 78%),
    linear-gradient(0deg, rgba(8, 14, 26, .62) 0%, rgba(8, 14, 26, 0) 55%);
}

.band__quote {
  font-family: "Instrument Sans", sans-serif;
  font-size: clamp(1.05rem, 2vw, 1.55rem);
  line-height: 1.32;
  letter-spacing: -.024em;
  max-width: 26ch;
  color: #fff;
  text-wrap: balance;
}

.band--short img { aspect-ratio: 21 / 7; }

.band__stats { display: flex; flex-wrap: wrap; gap: clamp(22px, 4vw, 54px); }
.band__stats div { display: flex; flex-direction: column; gap: 2px; }
.band__stats b {
  font-family: "Instrument Sans", sans-serif;
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  font-weight: 500;
  letter-spacing: -.035em;
  line-height: 1;
}
.band__stats span {
  font-size: .8rem;
  color: rgba(255, 255, 255, .74);
  max-width: 18ch;
  line-height: 1.4;
}

/* --- benchmark / market chart --------------------------------------------- */

.bench { max-width: 860px; margin: 52px auto 0; }

.bench__rows { display: flex; flex-direction: column; }

.bench__row {
  display: grid;
  grid-template-columns: 220px 1fr 64px;
  align-items: center;
  gap: 18px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line-soft);
}
.bench__row:first-child { border-top: 1px solid var(--line-soft); }

.bench__name {
  display: flex; align-items: center; gap: 9px;
  font-size: .88rem; color: var(--ink-soft); letter-spacing: -.012em;
}
.bench__name i {
  width: 18px; height: 18px; border-radius: 5px; flex: none;
  background: var(--soft-2); display: grid; place-items: center;
  font-family: "JetBrains Mono", monospace; font-size: .56rem; color: var(--muted);
  font-style: normal; font-weight: 600;
}

.bench__track { height: 9px; border-radius: 999px; background: var(--soft-2); overflow: hidden; }
.bench__fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #93B9F7, #2563EB);
  width: 0;
  transition: width 1s var(--ease);
}
.bench__val {
  font-family: "JetBrains Mono", monospace;
  font-size: .78rem; font-weight: 600; color: var(--ink); text-align: right;
  font-variant-numeric: tabular-nums;
}

.bench__tabs {
  display: flex; justify-content: center; gap: 6px; margin-top: 30px;
}
.bench__tab {
  border: 1px solid var(--line);
  background: transparent;
  border-radius: 999px;
  padding: 7px 16px;
  font-size: .82rem;
  color: var(--muted);
  cursor: pointer;
  transition: background .16s var(--ease), color .16s var(--ease), border-color .16s var(--ease);
}
.bench__tab:hover { color: var(--ink); }
.bench__tab.is-on { background: var(--ink); border-color: var(--ink); color: #fff; }

.bench__note {
  margin-top: 26px; text-align: center;
  color: var(--muted-2); font-size: .82rem; line-height: 1.65;
  max-width: 68ch; margin-inline: auto;
}

/* --- split feature -------------------------------------------------------- */

.split {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: 68px;
  align-items: center;
}
.split--flip > :first-child { order: 2; }

.split h2 { font-size: clamp(1.75rem, 3.2vw, 2.45rem); }
/* The reference greys the opening word group of the heading and lets the
   sentence resolve into black. It reads as a caption growing into a claim. */
.split h2 .fade { color: var(--muted-2); }

.split__list { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 14px; }
.split__list li {
  display: flex; gap: 11px; align-items: flex-start;
  font-size: .92rem; color: var(--muted); line-height: 1.55;
}
.split__list svg { width: 15px; height: 15px; color: var(--blue); flex: none; margin-top: 3px; }
.split__list b { color: var(--ink); font-weight: 500; }

/* --- knowledge panel mock ------------------------------------------------- */

.panel {
  background: #fff;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--lift-2);
  padding: 20px;
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 18px;
}

.srcs { display: flex; flex-direction: column; gap: 6px; }
.srcs__head { color: var(--muted-2); margin-bottom: 4px; }
.src {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 10px; border-radius: 9px;
  background: var(--soft); font-size: .76rem; color: var(--ink-soft);
}
.src i {
  width: 6px; height: 6px; border-radius: 50%; background: #22C55E; flex: none;
}
.src i.is-off { background: var(--muted-2); }
.src span { margin-left: auto; color: var(--muted-2); font-size: .66rem; }

.answer {
  background: var(--soft);
  border-radius: 13px;
  padding: 16px;
  font-size: .85rem;
  line-height: 1.6;
  color: var(--ink-soft);
}
.answer p + p { margin-top: 11px; }
.answer b { color: var(--ink); font-weight: 600; }
.cite {
  display: inline-flex; align-items: center; gap: 5px;
  background: #fff; border: 1px solid var(--line-soft);
  border-radius: 6px; padding: 1px 7px;
  font-family: "JetBrains Mono", monospace; font-size: .62rem;
  color: var(--blue-ink); vertical-align: 1px;
}
.answer__foot {
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line);
  display: flex; align-items: center; gap: 8px;
  color: var(--muted-2); font-size: .72rem;
}
.answer__foot svg { width: 13px; height: 13px; color: var(--muted-2); }

/* --- intent strip --------------------------------------------------------- */

.intents { display: grid; gap: 8px; }
.intent {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 14px;
  background: #fff;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  padding: 12px 14px;
  font-size: .83rem;
  color: var(--ink-soft);
  box-shadow: var(--lift-1);
}
.intent em { font-style: normal; color: var(--muted-2); }

/* --- dark panel ----------------------------------------------------------- */

.dark {
  background: #0B1220;
  color: #fff;
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  align-items: center;
  gap: 20px;
  padding: 48px;
  position: relative;
  isolation: isolate;
}
.dark::after {
  content: "";
  position: absolute; inset: auto -10% -60% 40%;
  height: 460px; z-index: -1;
  background: radial-gradient(closest-side, rgba(37, 99, 235, .42), rgba(37, 99, 235, 0));
}
.dark h2 { color: #fff; font-size: clamp(1.6rem, 2.9vw, 2.2rem); }
.dark p { color: rgba(255, 255, 255, .62); margin-top: 16px; font-size: .95rem; line-height: 1.6; max-width: 42ch; }
.dark .eyebrow { color: #7BA6F5; }
.dark .btn { margin-top: 28px; }

.handoff {
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 16px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.handoff .bub--ai { background: rgba(255, 255, 255, .08); color: rgba(255, 255, 255, .82); }
.handoff .bub--you { background: #2563EB; }
.handoff__note {
  display: flex; align-items: center; gap: 9px;
  border-top: 1px solid rgba(255, 255, 255, .1);
  padding-top: 12px; margin-top: 3px;
  font-size: .76rem; color: rgba(255, 255, 255, .5);
}
.handoff__note svg { width: 14px; height: 14px; color: #4ADE80; flex: none; }

/* Three columns, no panel padding: the photograph runs to the panel edge and
   each child brings its own inset. A padded image inside a padded panel reads
   as a slide, not a spread. */
.dark--media {
  grid-template-columns: minmax(0, .74fr) minmax(0, 1fr) minmax(0, 1.04fr);
  padding: 0;
  gap: 0;
  align-items: stretch;
}
.dark__shot { position: relative; min-height: 392px; overflow: hidden; }
.dark__shot img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .8;
}
/* Fades the photograph into the panel so its right edge is not a hard seam. */
.dark__shot::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(11, 18, 32, .34) 0%, rgba(11, 18, 32, .1) 45%, #0B1220 100%);
}
.dark__copy { padding: 44px 34px; align-self: center; }
.dark--media .handoff { margin: 28px 28px 28px 4px; }

/* --- four pillars --------------------------------------------------------- */

.pillars {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 36px;
  margin-top: 60px;
}
.pillar { border-radius: var(--radius); padding: 10px 12px 16px; }
.pillar__art {
  height: 132px;
  display: grid;
  place-items: center;
  margin-bottom: 20px;
  color: var(--ink);
}
.pillar__art svg { width: 100%; height: 100%; }
.pillar h3 { font-size: .96rem; font-weight: 600; letter-spacing: -.016em; }
.pillar p { margin-top: 7px; color: var(--muted); font-size: .87rem; line-height: 1.55; }

/* --- closing CTA ---------------------------------------------------------- */

/* The content sits in the top half, over the shader's sky; the ridges fill
   the bottom. Padding, not flex centring, is what keeps type off the hills. */
.close {
  position: relative;
  text-align: center;
  padding: 96px 24px 230px;
  z-index: 1;
}
.close h2 { font-size: clamp(1.8rem, 3.6vw, 2.7rem); max-width: 20ch; margin-inline: auto; }
.close p { margin: 18px auto 0; max-width: 46ch; color: var(--ink-soft); font-size: .98rem; }
.close .btn { margin-top: 30px; }
.close__note { margin-top: 16px; font-size: .82rem; color: var(--muted-2); }

/* --- footer --------------------------------------------------------------- */

.footer { padding: 76px 0 34px; border-top: 1px solid var(--line-soft); margin-top: 40px; }

.footer__cols {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 32px;
}
.footer__col { display: flex; flex-direction: column; gap: 9px; align-items: flex-start; }
.footer__head { color: var(--muted-2); margin: 0 0 4px; font-weight: 500; }
.footer__col a {
  font-size: .88rem; color: var(--muted);
  transition: color .16s var(--ease);
}
.footer__col a:hover { color: var(--ink); }

.footer__disclaimer {
  margin-top: 52px;
  padding-top: 24px;
  border-top: 1px solid var(--line-soft);
  color: var(--muted-2);
  font-size: .8rem;
  line-height: 1.65;
  max-width: 88ch;
}

.footer__base {
  margin-top: 22px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  color: var(--muted-2);
  font-size: .78rem;
}
.footer__brand { display: flex; align-items: center; gap: 10px; }

/* --- scroll reveal -------------------------------------------------------- */

.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
}

/* --- pricing -------------------------------------------------------------- */

.plans {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 54px;
  /* Equal-height cards with the buttons on one line. Sized to content, three
     tiers with different feature counts end up with three different baselines,
     which reads as three unrelated cards. */
  align-items: stretch;
}

.plan {
  background: var(--card);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  padding: 28px;
  box-shadow: var(--lift-1);
  display: flex;
  flex-direction: column;
  height: 100%;
}
.plan--pick {
  border-color: rgba(37, 99, 235, .3);
  box-shadow: var(--lift-2);
  position: relative;
}
.plan__flag {
  position: absolute; top: -11px; left: 28px;
  background: var(--blue); color: #fff;
  font-size: .66rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  padding: 4px 11px; border-radius: 999px;
}
.plan h3 { font-size: 1.05rem; font-weight: 600; }
.plan__who { margin-top: 5px; color: var(--muted); font-size: .86rem; }
.plan__fig {
  margin: 22px 0 4px;
  font-family: "Instrument Sans", sans-serif;
  font-size: 2rem; font-weight: 500; letter-spacing: -.035em;
}
.plan__fig span { font-size: 1.15rem; color: var(--muted-2); font-weight: 400; letter-spacing: -.02em; }
.plan__per { color: var(--muted-2); font-size: .8rem; }
.plan ul { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 10px; }
.plan li {
  display: flex; gap: 9px; align-items: flex-start;
  font-size: .87rem; color: var(--muted); line-height: 1.5;
}
.plan li svg { width: 14px; height: 14px; color: var(--blue); flex: none; margin-top: 3px; }
/* auto, not a fixed margin: the buttons then sit on one line across three
   cards with different feature counts. */
.plan .btn { margin-top: auto; width: 100%; }
.plan ul { margin-bottom: 26px; }

.notice {
  margin-top: 40px;
  background: var(--blue-wash);
  border: 1px solid rgba(37, 99, 235, .14);
  border-radius: var(--radius);
  padding: 20px 22px;
  font-size: .88rem;
  line-height: 1.62;
  color: var(--ink-soft);
}
.notice b { display: block; margin-bottom: 5px; color: var(--ink); font-weight: 600; }

/* --- faq ------------------------------------------------------------------ */
/* Only the container lives here. Everything inside the accordion is styled in
   components.css (the ported faq1). The rules that used to sit here were more
   specific than that file's — `.faq details p` beats `.faq__a p` — so they won
   on cascade order and left the answer indented 20px further left than the
   question it belongs to. */

.faq { max-width: 820px; margin: 48px auto 0; }

/* --- company / prose ------------------------------------------------------ */

.prose { max-width: 70ch; }
.prose h2 { font-size: 1.5rem; margin-top: 46px; }
.prose h3 { font-size: 1.05rem; font-weight: 600; margin-top: 30px; }
.prose p  { margin-top: 14px; color: var(--muted); font-size: .95rem; line-height: 1.7; }
.prose ul { margin: 14px 0 0; padding-left: 20px; color: var(--muted); font-size: .95rem; line-height: 1.7; }
.prose li { margin-top: 7px; }
.prose a { color: var(--blue-ink); text-decoration: underline; text-underline-offset: 2px; }
.prose strong { color: var(--ink); font-weight: 600; }

/* Four columns, because there are eight facts — auto-fit gives five and leaves
   two dead cells in the second row. */
.facts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  overflow: hidden;
  margin-top: 40px;
}
.facts div { background: var(--card); padding: 18px 20px; }
.facts span { display: block; color: var(--muted-2); margin-bottom: 6px; }
.facts b { font-size: .95rem; font-weight: 500; letter-spacing: -.012em; }

.person {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 22px;
  align-items: start;
  margin-top: 36px;
}
.person__mark {
  width: 96px; height: 96px; border-radius: 22px;
  background: linear-gradient(150deg, #1E293B, #0B1220);
  color: #fff;
  display: grid; place-items: center;
  font-family: "Instrument Sans", sans-serif;
  font-size: 1.9rem; font-weight: 500; letter-spacing: -.04em;
}
.person h3 { margin-top: 0; }
.person__role { color: var(--muted); font-size: .9rem; margin-top: 3px; }

.strip { margin: 56px 0 0; }
.strip img {
  width: 100%;
  aspect-ratio: 21 / 7;
  object-fit: cover;
  object-position: 50% 62%;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line-soft);
}
.strip figcaption {
  margin-top: 12px;
  color: var(--muted);
  font-size: .82rem;
  line-height: 1.55;
  max-width: 70ch;
}
/* The licence credit is a requirement, not a design element — present, legible,
   and quieter than the caption it sits under. */
.strip figcaption span { display: block; color: var(--faint); font-size: .75rem; margin-top: 4px; }
.strip figcaption a { color: var(--muted); text-decoration: underline; text-underline-offset: 2px; }

/* --- page header for inner pages ------------------------------------------ */

.pagehead {
  position: relative;
  padding: 150px 0 60px;
  isolation: isolate;
  overflow: hidden;
}
.pagehead__sky {
  position: absolute; inset: 0 0 auto 0; height: 560px; z-index: -1;
  background:
    radial-gradient(116% 72% at 50% 2%, #4C9DD5 0%, #74B8E4 16%, #9ED0EE 34%,
                    #C6E3F7 58%, rgba(250, 250, 249, 0) 86%),
    linear-gradient(180deg, #4A9BD4 0%, #78BBE6 15%, #A5D3F0 33%, #CDE6F8 55%,
                    #EBF4FC 80%, var(--paper) 100%);
}
.pagehead h1 { font-size: clamp(2.1rem, 4.6vw, 3.2rem); max-width: 18ch; }
.pagehead .lede { margin-top: 20px; font-size: 1.04rem; }
.pagehead--mid { text-align: center; }
.pagehead--mid h1 { margin-inline: auto; }
.pagehead--mid .lede { margin-inline: auto; }

/* ===========================================================================
   responsive
   ========================================================================= */

@media (max-width: 1080px) {
  .split { grid-template-columns: 1fr; gap: 42px; }
  .split--flip > :first-child { order: 0; }
  .dark { grid-template-columns: 1fr; padding: 36px; }
  .dark--media { padding: 0; }
  .dark--media .dark__shot { min-height: 0; aspect-ratio: 21 / 8; }
  .dark--media .dark__shot::after {
    background: linear-gradient(180deg, rgba(11, 18, 32, .2) 0%, rgba(11, 18, 32, .75) 70%, #0B1220 100%);
  }
  .dark--media .dark__copy { padding: 8px 32px 0; }
  .dark--media .handoff { margin: 26px 32px 32px; }
  .pillars { grid-template-columns: repeat(2, 1fr); gap: 34px 28px; }
  .footer__cols { grid-template-columns: repeat(3, 1fr); gap: 28px; }
  .frame__body { grid-template-columns: 1fr 236px; }
  .rail { display: none; }
}

@media (max-width: 900px) {
  .nav {
    position: absolute;
    top: calc(100% + 10px);
    left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    background: rgba(255, 255, 255, .94);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid var(--line-soft);
    border-radius: 18px;
    box-shadow: var(--lift-2);
    padding: 10px;
    margin: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
  }
  .nav.is-open { opacity: 1; visibility: visible; transform: none; }
  .nav a { padding: 11px 14px; font-size: .95rem; }
  .navtoggle { display: block; }
  .masthead__pill {
    /* .nav is out of flow here, so without this the toggle sits glued to the
       wordmark with the rest of the pill empty beside it. */
    justify-content: space-between;
    background: rgba(255, 255, 255, .8);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-color: var(--line-soft);
    box-shadow: var(--lift-1);
    position: relative;
  }
  .masthead__actions .btn { display: none; }

  .cards { grid-template-columns: 1fr; gap: 30px; }
  .plans { grid-template-columns: 1fr; }
  .bench__row { grid-template-columns: 148px 1fr 54px; gap: 12px; }
  .bench__name { font-size: .8rem; }
  .sec { padding: 84px 0; }
  .hero { padding-top: 126px; }
}

@media (max-width: 720px) {
  .shell { padding-inline: 18px; }
  /* The shader band is decoration; on a phone it should not push the button
     most of a screen away from the heading that argues for it. */
  .close { padding: 62px 18px 168px; }
  .card { padding: 11px 11px 18px; }
  .card h3 { margin: 16px 5px 0; }
  .card p { margin: 7px 5px 0; }
  /* Portrait crop: a 21:9 band on a phone is a letterbox slit, and the
     overlay type has nowhere to sit. */
  .band img { aspect-ratio: 4 / 5; object-position: 50% 42%; }
  .band__over {
    background:
      linear-gradient(0deg, rgba(8, 14, 26, .88) 12%, rgba(8, 14, 26, .45) 52%, rgba(8, 14, 26, .18) 100%);
  }
  .band__quote { max-width: none; }
  .band__stats { gap: 18px 26px; }
  .dark--media .dark__shot { aspect-ratio: 16 / 9; }
  .frame__body { grid-template-columns: 1fr; min-height: 0; }
  .lead { border-left: 0; border-top: 1px solid var(--line-soft); }
  .frame__url { display: none; }
  .panel { grid-template-columns: 1fr; }
  .pillars { grid-template-columns: 1fr; gap: 34px; }
  .footer__cols { grid-template-columns: repeat(2, 1fr); }
  .person { grid-template-columns: 1fr; }
  .hero__shot { margin-top: 44px; }
  .close { padding: 72px 20px 76px; }
  .strip { aspect-ratio: 16 / 10; }
  .bench__row { grid-template-columns: 1fr; gap: 8px; padding: 14px 0; }
  .bench__val { text-align: left; }
}

@media (max-width: 900px) { .facts { grid-template-columns: repeat(2, 1fr); } }

@media (max-width: 480px) {
  .bench__tabs { flex-wrap: wrap; }
  .facts { grid-template-columns: 1fr; }
  .close { padding: 54px 16px 150px; }
  .band__stats { gap: 14px 22px; }
  .band__stats span { max-width: none; font-size: .74rem; }
  .hero__badge { font-size: .78rem; padding: 5px 13px 5px 6px; }
  /* Two lines inside a pill reads as a broken component. The tail is colour,
     not information — the badge still says what matters without it. */
  .hero__badge-tail { display: none; }
}