/* ==========================================================================
   clikin.css — the Clikin.ai design system (2026 rebuild)
   --------------------------------------------------------------------------
   One stylesheet for the whole marketing site. The visual language is the
   control-panel landing at mana.clikin.ai — light, product-shot driven, mono
   kickers, gradient italic emphasis — with clikin.ai's own hero typography
   (Schibsted Grotesk display + an Allura script line) kept intact.

   Load order on every page:
     fonts → clikin.css → (optional page stylesheet)
   ========================================================================== */

/* ---------------------------------------------------------------- 1. tokens */
:root {
  /* ink ramp */
  --ink:      #0A0F1C;
  --soft:     #59637A;
  --faint:    #8B93A6;
  --line:     #E4E8EF;
  --line-2:   #EEF1F6;
  --mist:     #F5F7FA;
  --paper:    #FFFFFF;

  /* brand */
  --blue:      #2563EB;
  --blue-deep: #1B47B8;
  --wash:      #EEF3FE;
  --violet:    #625BFF;
  --violet-wash:#F3F0FF;
  --purple:    #7C4DFF;

  /* status */
  --ok: #027A48;   --ok-soft: #ECFDF3;   --ok-mid: #12A66A;
  --warm: #B54708; --warm-soft: #FFFAEB;
  --hot: #B42318;  --hot-soft: #FEF3F2;
  --wa: #DCF8C6;

  /* type */
  --display: "Schibsted Grotesk", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --sans:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --script:  "Allura", "Brush Script MT", cursive;

  /* geometry */
  --wrap: 1180px;
  --gut: 28px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;

  /* elevation */
  --sh-card: 0 1px 2px rgba(16,24,40,.05), 0 8px 22px rgba(16,24,40,.035);
  --sh-float: 0 24px 60px -24px rgba(16,24,40,.35), 0 2px 6px rgba(16,24,40,.06);
  --sh-shot: 0 50px 140px -40px rgba(37,99,235,.34), 0 16px 40px -20px rgba(16,24,40,.18);

  /* the one gradient, used for every accent */
  --grad: linear-gradient(90deg, #2563EB 0%, #625BFF 55%, #7C4DFF 100%);
  --grad-135: linear-gradient(135deg, #2563EB 0%, #625BFF 55%, #7C4DFF 100%);
}

/* ----------------------------------------------------------------- 2. reset */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
img, svg, video { max-width: 100%; }
img { height: auto; border: 0; }
a { color: var(--blue); text-decoration: none; }
button { font: inherit; }
h1, h2, h3, h4 { font-family: var(--display); margin: 0; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 4px; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut); }
.wrap-wide { max-width: 1320px; margin: 0 auto; padding: 0 var(--gut); }
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink); color: #fff; padding: 12px 18px; border-radius: 0 0 10px 0; font-size: 14px;
}
.skip-link:focus { left: 0; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.nums { font-variant-numeric: tabular-nums; }
.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;
}

/* ------------------------------------------------------------ 3. typography */
.kicker {
  display: block;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--blue);
  margin: 0;
}
.grad {
  font-style: italic;
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  padding-right: .06em;
}
.grad-plain { /* gradient without the italic */
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  padding-right: .04em;
}

/* section head — the workhorse */
.sec { padding: clamp(72px, 11vw, 130px) 0 0; }
.sec-alt { background: var(--mist); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: clamp(72px, 10vw, 112px) 0; margin-top: clamp(72px, 11vw, 130px); }
.sec-alt + .sec { padding-top: clamp(72px, 11vw, 130px); }
.head { display: flex; flex-direction: column; gap: 16px; max-width: 780px; }
.head.center { align-items: center; text-align: center; margin-inline: auto; }
.head h2 {
  font-size: clamp(30px, 4.1vw, 46px);
  font-weight: 600;
  letter-spacing: -.035em;
  line-height: 1.06;
  color: var(--ink);
}
.head .lede {
  font-size: clamp(16.5px, 1.5vw, 19px);
  line-height: 1.55;
  color: var(--soft);
  max-width: 660px;
}
.head.center .lede { margin-inline: auto; }

h3.t3 { font-size: 19px; font-weight: 650; letter-spacing: -.02em; }

/* ------------------------------------------------------------ 4. primitives */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--sans); font-size: 15px; font-weight: 500; letter-spacing: -.01em;
  padding: 14px 26px; border-radius: 999px; border: 1px solid transparent;
  cursor: pointer; white-space: nowrap; line-height: 1;
  transition: background .16s ease, border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}
.btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.btn-primary { background: var(--blue); color: #fff; box-shadow: 0 1px 2px rgba(16,24,40,.06); }
.btn-primary:hover { background: var(--blue-deep); }
.btn-ghost { background: var(--paper); color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--faint); }
.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { background: #1b2233; }
.btn:active { transform: translateY(1px); }
.btn-sm { font-size: 14px; padding: 10px 18px; }
.btn-lg { font-size: 16px; padding: 16px 30px; }

.pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 700; padding: 4px 8px;
  border-radius: 999px; line-height: 1; white-space: nowrap;
}
.pill.hot { background: var(--hot-soft); color: var(--hot); }
.pill.warm { background: var(--warm-soft); color: var(--warm); }
.pill.cold { background: var(--mist); color: var(--soft); }
.pill.blue { background: var(--wash); color: var(--blue); }
.pill.violet { background: var(--violet-wash); color: var(--violet); }
.pill.ok { background: var(--ok-soft); color: var(--ok); }

.tag { /* "New" style label */
  display: inline-flex; align-items: center; height: 20px; padding: 0 8px;
  border-radius: 999px; background: var(--violet-wash); color: var(--violet);
  font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
.live {
  display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700;
  color: var(--ok); background: var(--ok-soft); border-radius: 999px; padding: 4px 9px;
}
.live i { width: 7px; height: 7px; border-radius: 50%; background: var(--ok-mid); animation: ckPulse 2s ease-in-out infinite; }
@keyframes ckPulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

.chip {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 13px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--paper);
  font-size: 13px; font-weight: 600; color: var(--ink);
}
.chip svg { width: 14px; height: 14px; color: var(--blue); }
svg.i { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ------------------------------------------------------------- 5. site nav */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255,255,255,.86);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.nav-wrap {
  max-width: 1320px; margin: 0 auto; padding: 0 var(--gut);
  height: 68px; display: flex; align-items: center; gap: 10px;
}
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); flex: 0 0 auto; }
.brand img { width: 30px; height: 30px; border-radius: 8px; }
.brand-text { font-family: var(--display); font-size: 17px; font-weight: 700; letter-spacing: -.02em; }
.brand-text span { background: var(--grad-135); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }

.nav-main { display: flex; align-items: center; gap: 2px; margin-left: 18px; }
.nav-main > a, .nav-trigger {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 14.5px; font-weight: 500; color: var(--soft);
  padding: 9px 12px; border-radius: 999px; background: none; border: 0; cursor: pointer;
  transition: background .14s ease, color .14s ease;
}
.nav-main > a:hover, .nav-trigger:hover, .nav-item[data-open] .nav-trigger { background: var(--wash); color: var(--blue); }
.nav-main > a[aria-current="page"] { color: var(--ink); font-weight: 600; }
.nav-trigger svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .18s ease; }
.nav-item[data-open] .nav-trigger svg { transform: rotate(180deg); }

.nav-item { position: relative; }
.nav-menu {
  position: absolute; top: calc(100% + 12px); left: 0;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: 0 30px 70px -24px rgba(16,24,40,.28), 0 2px 6px rgba(16,24,40,.05);
  padding: 10px; display: none; z-index: 5;
}
.nav-item[data-open] .nav-menu { display: block; animation: ckDrop .16s ease both; }
@keyframes ckDrop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.nav-menu.two { width: 620px; display: none; }
.nav-item[data-open] .nav-menu.two { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 2px; }
.nav-menu.one { width: 260px; }
.nav-link {
  display: grid; grid-template-columns: 34px minmax(0,1fr); gap: 12px;
  padding: 11px 12px; border-radius: var(--r-md); color: var(--ink);
  transition: background .14s ease;
}
.nav-link:hover { background: var(--mist); }
.nav-link i {
  width: 34px; height: 34px; border-radius: 10px; background: var(--wash); color: var(--blue);
  display: flex; align-items: center; justify-content: center;
}
.nav-link i svg { width: 17px; height: 17px; }
.nav-link b { display: block; font-size: 14px; font-weight: 600; letter-spacing: -.01em; }
.nav-link small { display: block; font-size: 12.5px; color: var(--soft); margin-top: 2px; line-height: 1.4; }
.nav-menu .foot {
  grid-column: 1 / -1; margin-top: 6px; padding: 12px;
  border-top: 1px solid var(--line-2); display: flex; align-items: center; gap: 10px;
  font-size: 13px; color: var(--soft);
}
.nav-menu .foot a { font-weight: 600; }

.nav-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.console-link {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 500; color: var(--soft);
  padding: 9px 14px; border-radius: 999px;
  transition: background .14s ease, color .14s ease;
}
.console-link:hover { background: var(--mist); color: var(--ink); }
.console-link svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.menu-toggle {
  display: none; width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--paper); cursor: pointer; padding: 0; align-items: center; justify-content: center; flex-direction: column; gap: 4px;
}
.menu-toggle span { display: block; width: 17px; height: 1.6px; background: var(--ink); border-radius: 2px; transition: transform .2s ease, opacity .2s ease; }
.menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.6px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.6px) rotate(-45deg); }

.mobile-nav { display: none; border-top: 1px solid var(--line); background: var(--paper); padding: 12px var(--gut) 24px; }
.mobile-nav[data-open] { display: block; }
.mobile-nav a { display: block; padding: 13px 4px; font-size: 16px; font-weight: 500; color: var(--ink); border-bottom: 1px solid var(--line-2); }
.mobile-nav .lab { display: block; padding: 16px 4px 6px; font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.mobile-nav .btn { width: 100%; margin-top: 16px; }

/* ------------------------------------------------------------------ 6. hero */
.hero {
  position: relative; text-align: center;
  padding: clamp(48px, 6.5vw, 84px) var(--gut) 0;
}
.hero::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 820px; pointer-events: none; z-index: 0;
  background:
    radial-gradient(44% 60% at 80% 12%, rgba(98,91,255,.15), rgba(98,91,255,0) 70%),
    radial-gradient(42% 56% at 16% 26%, rgba(37,99,235,.13), rgba(37,99,235,0) 70%),
    radial-gradient(36% 44% at 50% 0%, rgba(124,77,255,.08), rgba(124,77,255,0) 70%);
}
.hero-inner { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; }
.hero-eyebrow {
  font-family: var(--mono); font-size: 12px; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase;
}
.hero-eyebrow span { background: var(--grad-135); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.hero h1 {
  margin: 22px 0 0;
  font-size: clamp(40px, 5.1vw, 70px);
  font-weight: 550;
  letter-spacing: -.035em;
  line-height: 1.04;
  max-width: 1040px;
}
.hero h1 .line { display: block; }
.hero h1 .line-accent { font-weight: 500; background: var(--grad-135); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }

/* the Allura script line, written on with an SVG mask */
.hero-script { display: block; width: min(760px, 100%); height: 74px; margin: 10px auto 0; overflow: visible; }
.hero-script text { font-family: var(--script); font-size: 32px; font-weight: 400; letter-spacing: -.01em; }
.hero-script .base { fill: #3C4043; opacity: .15; }
.hero-script .write { fill: url(#ckScriptFill); stroke: rgba(79,102,216,.22); stroke-width: .28; paint-order: stroke fill; }
.hero-script .m { display: none; }

.hero-sub { margin: 24px auto 0; max-width: 620px; font-size: clamp(16.5px, 1.5vw, 20px); line-height: 1.5; color: var(--soft); }
.hero-ctas { margin-top: 32px; display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.hero-note { margin-top: 16px; font-size: 13px; color: var(--faint); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: center; }
.hero-note b { color: var(--soft); font-weight: 600; }

/* --------------------------------------------------------- 7. the logo wall */
.logos { padding: clamp(48px, 7vw, 76px) 0 0; }
.logos p {
  text-align: center; font-family: var(--mono); font-size: 11.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--faint);
}
.logo-row {
  margin-top: 26px; display: flex; flex-wrap: wrap; justify-content: center;
  gap: 12px 14px;
}
.logo-row .lg {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  height: 52px; padding: 0 20px; border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--paper); color: var(--soft); font-size: 14.5px; font-weight: 600; letter-spacing: -.01em;
}
.logo-row .lg img { max-height: 26px; width: auto; }
.logo-row .lg .mk {
  width: 26px; height: 26px; border-radius: 7px; display: flex; align-items: center; justify-content: center;
  background: var(--mist); color: var(--faint); font-size: 11px; font-weight: 800; font-family: var(--mono);
}

/* -------------------------------------------------- 8. the product-shot kit */
.shot {
  position: relative; border-radius: var(--r-lg); background: var(--paper);
  border: 1px solid var(--line); box-shadow: var(--sh-shot); overflow: hidden; text-align: left;
}
.stage { position: relative; max-width: var(--wrap); margin: clamp(44px, 6vw, 64px) auto 0; padding-bottom: 56px; }
.frame { position: relative; max-width: var(--wrap); margin: 44px auto 0; padding: 20px 0 44px; }

.chrome {
  height: 42px; display: flex; align-items: center; gap: 8px; padding: 0 16px;
  border-bottom: 1px solid var(--line); background: var(--mist);
}
.chrome span { width: 11px; height: 11px; border-radius: 50%; background: var(--line); }
.chrome i {
  margin: 0 auto; width: 360px; max-width: 50%; height: 26px; border-radius: 8px;
  background: var(--paper); border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-style: normal; color: var(--faint);
}
.chrome em { font-size: 11px; font-style: normal; font-weight: 600; color: var(--faint); white-space: nowrap; }

/* console: sidebar + page */
.console { display: grid; grid-template-columns: 216px minmax(0,1fr); min-height: 600px; }
.side { border-right: 1px solid var(--line); padding: 14px 10px; background: var(--paper); display: flex; flex-direction: column; gap: 3px; font-size: 12.5px; }
.side .bd { display: flex; align-items: center; gap: 8px; padding: 4px 8px 12px; font-family: var(--display); font-weight: 700; letter-spacing: -.01em; font-size: 13.5px; }
.side .bd img { width: 24px; height: 24px; border-radius: 7px; }
.side .lab { font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); padding: 10px 8px 4px; }
.side .it { display: flex; align-items: center; gap: 9px; padding: 6px 9px; border-radius: 9px; color: var(--ink); font-weight: 500; }
.side .it svg { width: 15px; height: 15px; fill: none; stroke: var(--soft); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
.side .it.on { background: var(--wash); color: var(--blue); font-weight: 600; }
.side .it.on svg { stroke: var(--blue); }
.side .it b { margin-left: auto; font-family: var(--mono); font-size: 10px; font-weight: 500; color: var(--faint); background: var(--mist); border-radius: 999px; padding: 2px 7px; }
.side .it .ai { margin-left: auto; font-size: 9px; font-weight: 800; color: var(--violet); background: var(--violet-wash); border-radius: 999px; padding: 2px 6px; letter-spacing: .06em; }

.app { padding: 22px 24px 24px; background: var(--mist); min-height: 420px; }
.app h3 { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -.02em; }
.app .sub { font-size: 12.5px; color: var(--soft); margin-top: 3px; }
.pageshot { background: var(--mist); display: grid; grid-template-columns: minmax(0,1fr) 316px; }
.list { padding: 18px 18px 0; min-width: 0; }
.ph { display: flex; align-items: center; gap: 10px; }
.ph h3 { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -.02em; }
.ph .srch {
  margin-left: auto; display: flex; align-items: center; gap: 8px; height: 32px; width: 220px;
  padding: 0 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--paper); color: var(--faint); font-size: 12px;
}
.ph .srch svg { width: 13px; height: 13px; }
.ph .nb { height: 32px; padding: 0 12px; border-radius: 9px; background: var(--blue); color: #fff; font-size: 12px; font-weight: 600; display: flex; align-items: center; }

.tiles { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 8px; margin-top: 14px; }
.tile { background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; border-left: 3px solid var(--line); }
.tile span { display: block; font-size: 11px; font-weight: 600; color: var(--soft); }
.tile b { display: block; font-family: var(--mono); font-size: 20px; font-weight: 500; margin-top: 4px; line-height: 1; }
.tile.sel { border-color: var(--blue); background: var(--wash); }
.tile.r { border-left-color: var(--hot); }
.tile.a { border-left-color: var(--warm); }
.tile.v { border-left-color: var(--violet); }

table.lt { width: 100%; border-collapse: collapse; font-size: 12px; margin-top: 12px; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
table.lt th { text-align: left; font-family: var(--mono); font-size: 10px; font-weight: 500; color: var(--faint); text-transform: uppercase; letter-spacing: .06em; padding: 9px 10px; border-bottom: 1px solid var(--line); background: var(--mist); }
table.lt td { padding: 9px 10px; border-bottom: 1px solid var(--line-2); vertical-align: middle; }
table.lt tr.sel td { background: var(--wash); }
table.lt td b { display: block; font-weight: 600; }
table.lt td small { display: block; color: var(--soft); font-size: 11px; margin-top: 1px; }
table.t { width: 100%; border-collapse: collapse; font-size: 12px; background: var(--paper); }
table.t th { text-align: left; font-family: var(--mono); font-size: 10px; font-weight: 500; color: var(--faint); text-transform: uppercase; letter-spacing: .06em; padding: 8px 10px; border-bottom: 1px solid var(--line); background: var(--mist); }
table.t td { padding: 9px 10px; border-bottom: 1px solid var(--line-2); vertical-align: middle; }
table.t td.n, table.t th.n { text-align: right; font-variant-numeric: tabular-nums; }

.dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; }
.av { display: inline-flex; width: 22px; height: 22px; border-radius: 50%; align-items: center; justify-content: center; font-size: 9.5px; font-weight: 700; background: var(--wash); color: var(--blue); }
.av.v { background: var(--violet-wash); color: var(--violet); }
.av.g { background: var(--ok-soft); color: var(--ok); }

.pane { border-left: 1px solid var(--line); background: var(--paper); padding: 16px; display: flex; flex-direction: column; gap: 12px; font-size: 12px; }
.pane .who { display: flex; align-items: center; gap: 10px; }
.pane .who .big { width: 38px; height: 38px; border-radius: 12px; background: var(--grad-135); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; }
.pane .who b { display: block; font-size: 14px; }
.pane .who small { display: block; color: var(--soft); font-size: 11.5px; margin-top: 1px; }
.score { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--mist); }
.score .ring { width: 40px; height: 40px; border-radius: 50%; background: conic-gradient(var(--hot) 0 82%, var(--line-2) 82% 100%); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.score .ring i { width: 30px; height: 30px; border-radius: 50%; background: var(--paper); display: flex; align-items: center; justify-content: center; font-style: normal; font-weight: 700; font-size: 11px; font-family: var(--mono); }
.score b { display: block; font-size: 12.5px; }
.score small { display: block; color: var(--soft); font-size: 11px; }
.acts { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 6px; }
.acts span { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 8px 4px; border: 1px solid var(--line); border-radius: 10px; font-size: 10.5px; font-weight: 600; text-align: center; }
.acts span svg { width: 15px; height: 15px; color: var(--blue); }
.tl-lab { font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); margin-top: 4px; }
.tl { display: flex; flex-direction: column; }
.tl > div { display: grid; grid-template-columns: 18px minmax(0,1fr); gap: 8px; align-items: start; padding: 0 0 12px; position: relative; }
.tl > div::before { content: ""; position: absolute; left: 8px; top: 16px; bottom: 0; width: 1px; background: var(--line); }
.tl > div:last-child::before { display: none; }
.tl i { width: 17px; height: 17px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--wash); color: var(--blue); }
.tl i svg { width: 10px; height: 10px; }
.tl i.v { background: var(--violet-wash); color: var(--violet); }
.tl i.g { background: var(--ok-soft); color: var(--ok); }
.tl b { display: block; font-weight: 600; font-size: 11.5px; }
.tl small { display: block; color: var(--faint); font-size: 10.5px; margin-top: 1px; }

/* cards inside a product shot */
.cardx { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md); padding: 14px 16px; }
.cardx h4 { margin: 0; font-family: var(--sans); font-size: 13.5px; font-weight: 700; }
.cardx .s { font-size: 12px; color: var(--soft); margin-top: 2px; }
.kpis4 { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; margin-top: 14px; }
.kpis5 { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 12px; margin-top: 14px; }
.kpi { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md); padding: 12px 14px; }
.kpi span { display: block; font-size: 11px; font-weight: 600; color: var(--soft); }
.kpi b { display: block; font-family: var(--mono); font-size: 22px; font-weight: 500; letter-spacing: -.02em; margin-top: 5px; line-height: 1; }
.kpi small { display: block; font-size: 11px; color: var(--faint); margin-top: 5px; }
.g2 { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; margin-top: 12px; }
.g3 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; margin-top: 12px; }
.g21 { display: grid; grid-template-columns: minmax(0,1.4fr) minmax(0,1fr); gap: 12px; margin-top: 12px; }
.segs { display: inline-flex; gap: 4px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 3px; font-size: 12px; font-weight: 600; color: var(--soft); }
.segs span { padding: 6px 11px; border-radius: 8px; }
.segs span.on { background: var(--wash); color: var(--blue); }
.chipf { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; color: var(--ink); padding: 6px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); }

/* charts */
.bars { display: grid; grid-template-columns: 78px minmax(0,1fr) 34px; gap: 8px 10px; align-items: center; font-size: 12px; color: var(--soft); }
.bars i { display: block; height: 10px; border-radius: 999px; background: var(--grad); }
.bars b { text-align: right; color: var(--ink); font-weight: 600; font-family: var(--mono); font-size: 11.5px; }
.funnel { display: grid; grid-template-columns: 96px minmax(0,1fr) 40px; gap: 8px 10px; align-items: center; font-size: 12px; color: var(--soft); }
.funnel i { display: block; height: 16px; border-radius: 6px; background: var(--grad); }
.funnel b { text-align: right; color: var(--ink); font-weight: 600; font-family: var(--mono); font-size: 11.5px; }
.cols { display: grid; gap: 6px; align-items: end; height: 120px; }
.cols i { display: block; border-radius: 6px 6px 3px 3px; background: linear-gradient(180deg, #625BFF, #2563EB); }
.cols i.g { background: var(--ok-mid); }
.cols i.f { background: var(--line); }
.lbls { display: grid; gap: 6px; font-size: 10.5px; color: var(--faint); text-align: center; margin-top: 6px; }
.ring { width: 44px; height: 44px; border-radius: 50%; background: conic-gradient(var(--blue) 0 34%, var(--line-2) 34% 100%); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.ring i { width: 32px; height: 32px; border-radius: 50%; background: var(--paper); display: flex; align-items: center; justify-content: center; font-style: normal; font-weight: 700; font-size: 11px; font-family: var(--mono); }

/* ---------------------------------------------------- 9. floating overlays */
.float {
  position: absolute; background: var(--paper); border: 1px solid var(--line); border-radius: 16px;
  box-shadow: var(--sh-float); padding: 12px 14px; font-size: 12px; z-index: 3;
}
.float .t { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 12px; }
.float .t img { width: 26px; height: 26px; }
.float .t i { width: 24px; height: 24px; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: #fff; font-style: normal; flex: 0 0 auto; }
.float .t i svg { width: 13px; height: 13px; }
.float .t .when { margin-left: auto; font-weight: 500; color: var(--faint); }
.float .wa { margin-top: 8px; padding: 8px 10px; border-radius: 10px; background: var(--wa); font-size: 12px; line-height: 1.4; }
.float .bd2 { margin-top: 8px; font-size: 12px; line-height: 1.45; }
.float .bd2 .q { color: var(--soft); }

/* -------------------------------------------------------- 10. bento grid */
.bento { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; margin-top: 40px; text-align: left; }
.b {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 22px;
  box-shadow: var(--sh-card); display: flex; flex-direction: column; gap: 14px; min-height: 300px;
}
.b.wide { grid-column: span 2; }
.b h3 { font-family: var(--sans); margin: 0; font-size: 17px; font-weight: 700; letter-spacing: -.015em; }
.b h3 small { display: block; font-size: 13px; font-weight: 500; color: var(--soft); margin-top: 3px; letter-spacing: 0; }
.b .vis { flex: 1; border-radius: var(--r-md); background: var(--mist); border: 1px solid var(--line-2); padding: 14px; display: flex; flex-direction: column; gap: 8px; font-size: 12px; }
.b .vis.center { justify-content: center; }
.bub { max-width: 88%; padding: 9px 12px; border-radius: 14px; font-size: 12px; line-height: 1.4; background: var(--paper); border: 1px solid var(--line); }
.bub.q { align-self: flex-end; background: var(--ink); color: #fff; border-color: var(--ink); }

/* ------------------------------------------------- 11. split copy + visual */
.split { display: grid; grid-template-columns: 420px minmax(0,1fr); gap: 72px; align-items: center; margin-top: 44px; }
.split.flip { grid-template-columns: minmax(0,1fr) 420px; }
.split.flip .split-copy { order: 2; }
.split.flip .split-vis { order: 1; }
.split.narrow { grid-template-columns: 380px minmax(0,1fr); gap: 64px; }
.split-copy .head { max-width: none; }
.mini {
  position: relative; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: 0 40px 100px -40px rgba(37,99,235,.3), 0 12px 30px -18px rgba(16,24,40,.18); overflow: hidden;
}
.mini .app { padding: 20px; min-height: 0; }

.facts { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; }
.fact { display: grid; grid-template-columns: 22px minmax(0,1fr); gap: 11px; align-items: start; font-size: 14.5px; color: var(--ink); line-height: 1.45; }
.fact > i { width: 22px; height: 22px; border-radius: 7px; background: var(--wash); color: var(--blue); display: flex; align-items: center; justify-content: center; font-style: normal; flex: 0 0 auto; margin-top: 1px; }
.fact > i svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.fact b { font-weight: 600; }
.fact small { display: block; color: var(--soft); font-size: 13px; margin-top: 2px; line-height: 1.45; }

/* ------------------------------------------------------- 12. loop & steps */
.loop { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 0; align-items: stretch; margin-top: 36px; position: relative; }
.loop .node { position: relative; background: var(--paper); border: 1px solid var(--line); border-radius: 18px; padding: 18px 18px 20px; margin: 0 14px; }
.loop .node .n { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--blue); }
.loop .node b { display: block; font-family: var(--display); font-size: 17px; font-weight: 650; letter-spacing: -.02em; margin-top: 8px; }
.loop .node small { display: block; font-size: 12.5px; color: var(--soft); margin-top: 5px; line-height: 1.45; }
.loop .node::after { content: ""; position: absolute; right: -22px; top: 50%; width: 16px; height: 2px; background: #C9D0DC; }
.loop .node:last-child::after { display: none; }
.loop .node.back { background: linear-gradient(135deg, var(--wash), var(--violet-wash)); border-color: #C7D2FE; }
.ret { margin: 18px 14px 0; height: 34px; border: 2px dashed #C7D2FE; border-top: 0; border-radius: 0 0 22px 22px; position: relative; }
.ret span { position: absolute; left: 50%; bottom: -12px; transform: translateX(-50%); background: var(--mist); padding: 2px 12px; font-size: 12px; color: var(--violet); font-weight: 600; white-space: nowrap; }
.sec .ret span { background: var(--paper); }

.steps { display: flex; flex-direction: column; gap: 16px; }
.step { display: grid; grid-template-columns: 34px minmax(0,1fr); gap: 12px; align-items: start; }
.step > i { width: 34px; height: 34px; border-radius: 10px; background: var(--wash); color: var(--blue); display: flex; align-items: center; justify-content: center; font-style: normal; font-weight: 700; font-size: 13px; font-family: var(--mono); flex: 0 0 auto; }
.step b { display: block; font-size: 14.5px; font-weight: 600; }
.step small { display: block; font-size: 13px; color: var(--soft); margin-top: 2px; line-height: 1.45; }

/* numbered timeline (weeks, phases) */
.rail { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px; margin-top: 36px; }
.rail .r { border: 1px solid var(--line); border-radius: 18px; padding: 22px 20px 24px; background: var(--paper); position: relative; }
.rail .r .n { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--blue); }
.rail .r b { display: block; font-family: var(--display); font-size: 19px; font-weight: 650; letter-spacing: -.02em; margin-top: 10px; }
.rail .r p { font-size: 13.5px; color: var(--soft); margin-top: 6px; line-height: 1.5; }

/* --------------------------------------------------------- 13. agent grid */
.agents { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; margin-top: 40px; text-align: left; }
.agent { background: var(--paper); padding: 30px 26px 32px; transition: background .18s ease; }
.agent:hover { background: var(--paper-2); }
.agent img { display: block; width: 60px; height: 60px; margin: -4px 0 14px -4px; }
.agent h3 { font-family: var(--display); margin: 0 0 4px; font-size: 19px; font-weight: 650; letter-spacing: -.02em; }
.agent .role { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--blue); }
.agent p { margin: 12px 0 0; font-size: 14px; line-height: 1.55; color: var(--soft); }
.agent .does { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 6px; }
.agent .does span { font-size: 11.5px; font-weight: 600; color: var(--soft); background: var(--mist); border-radius: 999px; padding: 4px 9px; }

.helix {
  margin-top: 20px; border: 1px solid #C7D2FE; border-radius: var(--r-lg); padding: 24px 30px;
  display: flex; align-items: center; gap: 20px; text-align: left; flex-wrap: wrap;
  background: linear-gradient(135deg, var(--wash), var(--violet-wash));
}
.helix img { width: 52px; height: 52px; flex: 0 0 auto; }
.helix .hx { flex: 1; min-width: 260px; }
.helix b { display: block; font-family: var(--display); font-size: 19px; font-weight: 650; letter-spacing: -.02em; }
.helix p { margin: 4px 0 0; font-size: 15px; color: var(--soft); line-height: 1.5; }

/* ------------------------------------------------------- 14. metrics band */
.metrics { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; margin-top: 40px; }
.metric { background: var(--paper); padding: 28px 24px 30px; }
.metric b { display: block; font-family: var(--mono); font-size: clamp(30px, 3.4vw, 42px); font-weight: 500; letter-spacing: -.03em; line-height: 1; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.metric span { display: block; font-size: 14px; font-weight: 600; color: var(--ink); margin-top: 12px; }
.metric small { display: block; font-size: 12.5px; color: var(--soft); margin-top: 4px; line-height: 1.45; }

/* --------------------------------------------------- 15. from → to table */
.shift { border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; margin-top: 36px; background: var(--paper); }
.shift .row { display: grid; grid-template-columns: minmax(0,1fr) 44px minmax(0,1fr); align-items: center; border-bottom: 1px solid var(--line-2); }
.shift .row:last-child { border-bottom: 0; }
.shift .row.hd { background: var(--mist); }
.shift .row.hd > div { font-family: var(--mono); font-size: 10.5px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); padding: 12px 22px; }
.shift .row > div { padding: 16px 22px; font-size: 14.5px; line-height: 1.45; }
.shift .row .from { color: var(--soft); }
.shift .row .to { color: var(--ink); font-weight: 500; background: linear-gradient(90deg, rgba(238,243,254,.7), rgba(243,240,255,.4)); }
.shift .row .ar { display: flex; align-items: center; justify-content: center; color: var(--faint); }
.shift .row .ar svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.shift .row.hd .ar { padding: 0; }

/* ------------------------------------------------------ 16. case + quotes */
.cases { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; margin-top: 40px; }
.case { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--paper); padding: 24px; display: flex; flex-direction: column; gap: 16px; box-shadow: var(--sh-card); }
.case .who { display: flex; align-items: center; gap: 11px; }
.case .who .mk { width: 40px; height: 40px; border-radius: 11px; background: var(--grad-135); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; letter-spacing: -.01em; flex: 0 0 auto; }
.case .who b { display: block; font-size: 15px; font-weight: 650; letter-spacing: -.01em; }
.case .who small { display: block; font-size: 12.5px; color: var(--soft); }
.case p { font-size: 14.5px; line-height: 1.55; color: var(--soft); flex: 1; }
.case .kv { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; padding-top: 16px; border-top: 1px solid var(--line-2); }
.case .kv div b { display: block; font-family: var(--mono); font-size: 18px; font-weight: 500; letter-spacing: -.02em; color: var(--ink); }
.case .kv div span { display: block; font-size: 11px; color: var(--faint); margin-top: 3px; line-height: 1.35; }
.case.placeholder { border-style: dashed; background: var(--mist); box-shadow: none; align-items: center; justify-content: center; text-align: center; color: var(--faint); font-size: 13.5px; }

.quote { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--paper); padding: 32px; }
.quote blockquote { margin: 0; font-family: var(--display); font-size: clamp(19px, 2.2vw, 25px); font-weight: 500; letter-spacing: -.02em; line-height: 1.35; color: var(--ink); }
.quote figcaption { margin-top: 20px; display: flex; align-items: center; gap: 11px; font-size: 13.5px; color: var(--soft); }

/* ------------------------------------------------------- 17. phone mockup */
.phone { width: 300px; border-radius: 30px; border: 1px solid var(--line); background: var(--paper); box-shadow: 0 30px 80px -30px rgba(37,99,235,.35); overflow: hidden; }
.phone .bar { height: 46px; display: flex; align-items: center; gap: 9px; padding: 0 14px; background: var(--mist); border-bottom: 1px solid var(--line); font-size: 12.5px; }
.phone .bar .av { width: 26px; height: 26px; }
.phone .bar b { font-size: 12.5px; font-weight: 650; }
.phone .bar small { display: block; font-size: 10.5px; color: var(--ok); }
.phone .thread { padding: 14px; display: flex; flex-direction: column; gap: 9px; background: #F3EFE8; }
.msg { max-width: 84%; padding: 8px 11px; border-radius: 12px; font-size: 12.5px; line-height: 1.42; background: var(--paper); box-shadow: 0 1px 1px rgba(16,24,40,.07); position: relative; }
.msg.me { align-self: flex-end; background: var(--wa); }
.msg time { display: block; font-size: 9.5px; color: var(--faint); text-align: right; margin-top: 3px; font-family: var(--mono); }

/* RAG bands */
.rag { border-radius: var(--r-md); padding: 12px 14px; color: var(--ink); }
.rag.red { border: 1px solid rgba(178,70,60,.34); background: linear-gradient(135deg, rgba(178,70,60,.14), rgba(222,122,98,.06)); }
.rag.amber { border: 1px solid rgba(185,116,28,.34); background: linear-gradient(135deg, rgba(185,116,28,.14), rgba(224,162,63,.06)); }
.rag.green { border: 1px solid rgba(30,127,92,.34); background: linear-gradient(135deg, rgba(30,127,92,.14), rgba(59,174,134,.06)); }

/* ---------------------------------------------------------- 18. price kit */
.plans { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 20px; margin-top: 40px; }
.plan { border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--paper); padding: 32px; display: flex; flex-direction: column; gap: 18px; box-shadow: var(--sh-card); position: relative; }
.plan.feature { border-color: #C7D2FE; box-shadow: 0 30px 80px -40px rgba(37,99,235,.4), var(--sh-card); }
.plan .badge { position: absolute; top: -11px; left: 32px; }
.plan .n { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--blue); }
.plan h3 { font-size: 24px; font-weight: 650; letter-spacing: -.03em; margin-top: 10px; }
.plan .desc { font-size: 14.5px; line-height: 1.55; color: var(--soft); }
.plan ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; flex: 1; }
.plan ul li { display: grid; grid-template-columns: 20px minmax(0,1fr); gap: 10px; font-size: 14px; line-height: 1.45; align-items: start; }
.plan ul li svg { width: 14px; height: 14px; margin-top: 4px; color: var(--blue); fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.plan .note { font-size: 12.5px; color: var(--faint); }

/* -------------------------------------------------------- 19. FAQ / detail */
.faq { margin-top: 36px; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer; padding: 22px 40px 22px 0; position: relative;
  font-family: var(--display); font-size: 17.5px; font-weight: 600; letter-spacing: -.02em; color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 6px; top: 50%; width: 11px; height: 11px;
  border-right: 2px solid var(--faint); border-bottom: 2px solid var(--faint);
  transform: translateY(-70%) rotate(45deg); transition: transform .2s ease;
}
.faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq .a { padding: 0 60px 24px 0; font-size: 15px; line-height: 1.6; color: var(--soft); }

/* ------------------------------------------------------- 20. trust strip */
.trust { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px; margin-top: 36px; }
.trust .t { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--paper); padding: 18px 20px 20px; }
.trust .t i { width: 32px; height: 32px; border-radius: 9px; background: var(--mist); color: var(--soft); display: flex; align-items: center; justify-content: center; }
.trust .t i svg { width: 16px; height: 16px; }
.trust .t b { display: block; font-size: 14.5px; font-weight: 650; margin-top: 12px; }
.trust .t small { display: block; font-size: 12.5px; color: var(--soft); margin-top: 4px; line-height: 1.45; }

/* ------------------------------------------------------------ 21. big CTA */
.cta { text-align: center; padding: clamp(90px, 13vw, 150px) var(--gut) clamp(70px, 9vw, 110px); position: relative; }
.cta::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(50% 60% at 50% 40%, rgba(98,91,255,.10), rgba(98,91,255,0) 70%);
}
.cta > * { position: relative; }
.cta h2 { font-size: clamp(32px, 4.6vw, 52px); font-weight: 600; letter-spacing: -.038em; line-height: 1.06; color: var(--faint); max-width: 18ch; margin-inline: auto; }
.cta p { margin: 22px auto 0; max-width: 560px; font-size: 17px; line-height: 1.55; color: var(--soft); }
.cta .ctas { display: flex; justify-content: center; gap: 14px; margin-top: 30px; flex-wrap: wrap; }
.cta .fine { margin-top: 18px; font-size: 13px; color: var(--faint); }

/* ------------------------------------------------------------- 22. footer */
.site-footer { border-top: 1px solid var(--line); background: var(--mist); margin-top: 0; }
.footer-grid {
  display: grid; grid-template-columns: minmax(0,1.5fr) repeat(3, minmax(0,1fr));
  gap: 40px; padding: 64px var(--gut) 48px; max-width: 1320px; margin: 0 auto;
}
.footer-brand { display: flex; align-items: center; gap: 10px; color: var(--ink); }
.footer-brand img { width: 30px; height: 30px; border-radius: 8px; }
.footer-brand span { font-family: var(--display); font-size: 17px; font-weight: 700; letter-spacing: -.02em; }
.footer-col > summary { font-family: var(--mono); font-size: 10.5px; font-weight: 500; letter-spacing: .12em;
  text-transform: uppercase; color: var(--faint); margin-bottom: 14px; list-style: none; cursor: default; }
.footer-col > summary::-webkit-details-marker { display: none; }
.footer-col > summary::marker { content: ""; }
.footer-col a { display: block; font-size: 14px; color: var(--soft); padding: 6px 0; }
.footer-col a:hover { color: var(--ink); }
.footer-about p { font-size: 14px; line-height: 1.6; color: var(--soft); margin-top: 16px; max-width: 34ch; }
.footer-live { margin-top: 18px; display: flex; flex-direction: column; gap: 8px; }
.footer-live a { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--soft); font-family: var(--mono); }
.footer-live a svg { width: 14px; height: 14px; color: var(--blue); }
.footer-bar {
  border-top: 1px solid var(--line); padding: 20px var(--gut);
  max-width: 1320px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  font-size: 13px; color: var(--faint);
}
.footer-bar .tagline { font-family: var(--mono); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; }

/* ------------------------------------------------------ 23. scroll reveal */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1); }
.reveal.in { opacity: 1; transform: none; }
.reveal[data-d="1"] { transition-delay: .07s; }
.reveal[data-d="2"] { transition-delay: .14s; }
.reveal[data-d="3"] { transition-delay: .21s; }

/* ------------------------------------------------------- 24. responsive */
@media (max-width: 1180px) {
  .split, .split.flip, .split.narrow { grid-template-columns: minmax(0,1fr); gap: 36px; }
  .split.flip .split-copy, .split.flip .split-vis { order: 0; }
  .float { position: static !important; width: auto !important; margin-top: 14px; box-shadow: var(--sh-card); }
  .pageshot { grid-template-columns: minmax(0,1fr); }
  .pane { display: none; }
  .bento { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .footer-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 32px; }
}
@media (max-width: 1080px) {
  .nav-main { display: none; }
  .console-link { display: none; }
  .menu-toggle { display: flex; }
  .nav-actions .btn { display: none; }
}
@media (max-width: 900px) {
  .console { grid-template-columns: minmax(0,1fr); min-height: 0; }
  .side { display: none; }
  table.lt th:nth-child(4), table.lt td:nth-child(4) { display: none; }
  .agents { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .metrics, .trust, .rail, .cases { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .loop { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
  .loop .node { margin: 0; }
  .loop .node::after { display: none; }
  .ret { display: none; }
  .plans { grid-template-columns: minmax(0,1fr); }
  .kpis5, .kpis4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .g21, .g3 { grid-template-columns: minmax(0,1fr); }
}
@media (max-width: 640px) {
  :root { --gut: 20px; }
  .nav-wrap { height: 62px; }
  .hero { padding-top: 36px; }
  .hero h1 { max-width: none; }
  .hero-script { height: 78px; }
  .hero-script .d { display: none; }
  .hero-script .m { display: block; }
  .hero-ctas { flex-direction: column; width: 100%; gap: 10px; }
  .hero-ctas .btn { width: 100%; min-height: 50px; }
  .stage, .frame { margin-top: 32px; padding-bottom: 40px; }
  .chrome { display: none; }
  .list { padding: 14px 12px 0; }
  .ph .srch, .ph .nb { display: none; }
  .tiles { gap: 6px; }
  .tile { padding: 8px; text-align: center; border-left-width: 1px; }
  .tile b { font-size: 17px; }
  table.lt { margin: 10px -12px 0; width: calc(100% + 24px); border-left: 0; border-right: 0; border-radius: 0; }
  table.lt th:nth-child(3), table.lt td:nth-child(3), table.lt th:nth-child(5), table.lt td:nth-child(5) { display: none; }
  .bento { grid-template-columns: minmax(0,1fr); gap: 12px; margin-top: 24px; }
  .b, .b.wide { grid-column: auto; min-height: 0; padding: 18px; }
  .agents, .metrics, .trust, .rail, .cases { grid-template-columns: minmax(0,1fr); }
  .agent { padding: 22px 20px 24px; }
  .shift .row { grid-template-columns: minmax(0,1fr); }
  .shift .row .ar { display: none; }
  .shift .row.hd { display: none; }
  .shift .row > div { padding: 14px 18px; }
  .shift .row .from { padding-bottom: 4px; font-size: 13.5px; }
  .plan { padding: 24px; }
  .quote { padding: 24px; }
  .phone { width: 100%; max-width: 320px; }
  .footer-grid { grid-template-columns: minmax(0,1fr); gap: 28px; padding-top: 44px; }
  .faq summary { font-size: 16px; padding-right: 32px; }
  .faq .a { padding-right: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero-script .base { opacity: 1; }
  .hero-script .write { display: none; }
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
}

/* ==========================================================================
   25. hero motion — the intent workspace
   --------------------------------------------------------------------------
   The animated hero visual carried over from the previous clikin.ai, recoloured
   onto this theme (Google blue/green/amber -> --blue / --violet / --purple, with
   green kept only for the booking resolve, where it means "done") and lifted out
   of the near-white wash it used to disappear into.
   ========================================================================== */
.hero-visual {
  position: relative;
  min-width: 0;
  width: 100%;
  max-width: 1280px;
  height: clamp(300px, 40vw, 470px);
  margin: clamp(4px, 2vw, 22px) auto 0;
  overflow: visible;
}
.hero-visual::before {
  content: "";
  position: absolute; inset: 2% 0 0; border-radius: 44px; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(200,208,220,.30) 1px, transparent 1px),
    linear-gradient(180deg, rgba(200,208,220,.26) 1px, transparent 1px);
  background-size: 58px 58px;
  mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent);
  opacity: .5;
}
.hero-visual::after {
  content: "";
  position: absolute; inset: 10% 4%; border-radius: 999px; pointer-events: none;
  background: linear-gradient(90deg, rgba(238,243,254,.5), rgba(243,240,255,.42), rgba(240,236,255,.4));
  filter: blur(34px); opacity: .85;
  animation: ckDrift 18s ease-in-out infinite;
}

.intent-canvas { position: absolute; inset: -2% -3%; z-index: 1; }
.intent-field { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.intent-stage { transform-box: view-box; transform-origin: 50% 52%; }

.intent-halo { fill: url("#ckHalo"); opacity: .85; transform-origin: center; animation: ckBreath 15s ease-in-out infinite; }
.halo-two { animation-delay: -5s; }

.blur-field { filter: url("#ckBlur"); opacity: .62; transform-origin: center; animation: ckDrift 18s ease-in-out infinite; }
.field-blue   { fill: rgba(37,99,235,.26); }
.field-mint   { fill: rgba(98,91,255,.22); animation-delay: -6s; }
.field-violet { fill: rgba(124,77,255,.22); animation-delay: -11s; }

.workspace-layer { animation: ckFloat 14s ease-in-out infinite; transform-origin: center; }
.layer-front { animation-delay: -4s; }
.workspace-layer rect { fill: url("#ckSurface"); stroke: rgba(98,91,255,.20); stroke-width: 1.2; }
.workspace-layer path { fill: none; stroke: rgba(89,99,122,.26); stroke-width: 9; stroke-linecap: round; }
.workspace-layer circle { fill: rgba(238,243,254,.8); stroke: rgba(255,255,255,.9); stroke-width: 12; }

.intent-current { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.current-broad { stroke: url("#ckCurrent"); stroke-width: 54; opacity: .62; }
.current-core  { stroke: url("#ckCurrent"); stroke-width: 4.5; stroke-dasharray: 120 520; opacity: .95; animation: ckSweep 12s linear infinite; }
.intent-particle { opacity: .9; filter: drop-shadow(0 10px 18px rgba(37,99,235,.26)); }

.signal-cluster, .voice-signal, .ciq-signal, .booking-pulse {
  opacity: .8; animation: ckSignal 12s ease-in-out infinite;
  transform-box: fill-box; transform-origin: center;
}
.scout-signal  { animation-delay: -1s; }
.aura-signal   { animation-delay: -2s; }
.portal-signal { animation-delay: -4s; }
.voice-signal  { animation-delay: -6s; }
.ciq-signal    { animation-delay: -7s; }
.visit-signal  { animation-delay: -8s; }
.booking-pulse { animation-delay: -10s; }

.signal-cluster circle, .ciq-signal circle, .booking-pulse circle:first-child {
  fill: rgba(255,255,255,.72); stroke: rgba(199,210,254,.85); stroke-width: 1.2;
  filter: drop-shadow(0 18px 26px rgba(16,24,40,.12));
}
.signal-cluster path, .ciq-signal path, .booking-pulse path {
  fill: none; stroke: rgba(27,71,184,.85); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round;
}
.aura-signal path   { stroke: rgba(98,91,255,.85); }
.portal-signal path { stroke: rgba(124,77,255,.8); }
.visit-signal path  { stroke: rgba(37,99,235,.82); }
.ciq-signal circle  { fill: rgba(243,240,255,.82); stroke: rgba(124,77,255,.4); }
.ciq-signal path    { stroke: rgba(124,77,255,.9); }
.voice-signal use    { fill: none; stroke: rgba(124,77,255,.85); stroke-width: 5; stroke-linecap: round; }
.voice-signal circle { fill: rgba(124,77,255,.9); stroke: rgba(255,255,255,.95); stroke-width: 8; }

.voice-signal text, .signal-cluster text, .ciq-signal text, .visit-signal text {
  fill: rgba(10,15,28,.62); font-family: var(--mono); font-size: 17px; font-weight: 500; letter-spacing: .04em;
}

.booking-pulse circle:first-child {
  fill: rgba(236,253,243,.85); stroke: rgba(18,166,106,.4);
  transform-box: fill-box; transform-origin: center; animation: ckResolve 4.8s ease-in-out infinite;
}
.booking-pulse circle:nth-child(2) { fill: rgba(18,166,106,.95); stroke: rgba(255,255,255,.92); stroke-width: 8; }
.booking-pulse path { stroke: #fff; stroke-width: 5; }

.workspace-core {
  position: absolute; left: 53%; top: 53%; z-index: 4;
  width: 82px; height: 82px; display: grid; place-items: center; transform: translate(-50%, -50%);
}
.workspace-core::before {
  content: ""; position: absolute; inset: -34px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.95), rgba(238,243,254,.55) 44%, transparent 72%);
  filter: blur(4px); animation: ckBreath 8s ease-in-out infinite;
}
.workspace-core img { position: relative; z-index: 1; width: 52px; height: 47px; object-fit: contain; filter: drop-shadow(0 10px 18px rgba(16,24,40,.2)); }
.workspace-core span { position: absolute; inset: 14px; border-radius: 50%; border: 1px solid rgba(37,99,235,.3); animation: ckResolve 5.2s ease-in-out infinite; }

@keyframes ckDrift  { 0%,100% { transform: translate3d(-1%,0,0) scale(1); } 50% { transform: translate3d(1%,-1%,0) scale(1.03); } }
@keyframes ckBreath { 0%,100% { opacity: .56; } 50% { opacity: .84; } }
@keyframes ckSweep  { to { stroke-dashoffset: -640; } }
@keyframes ckFloat  { 0%,100% { opacity: .82; transform: translate3d(0,0,0); } 50% { opacity: 1; transform: translate3d(0,-10px,0); } }
@keyframes ckSignal { 0%,100% { opacity: .6; } 45%,58% { opacity: 1; } }
@keyframes ckResolve{ 0%,100% { opacity: .5; transform: scale(.92); } 45%,62% { opacity: 1; transform: scale(1.08); } }

@media (max-width: 900px) {
  .hero-visual { height: clamp(240px, 46vw, 330px); margin-top: 8px; }
  .voice-signal text, .signal-cluster text, .ciq-signal text, .visit-signal text { font-size: 22px; }
}
@media (max-width: 640px) {
  .hero-visual::before { display: none; }
  .workspace-core { width: 60px; height: 60px; }
  .workspace-core img { width: 38px; height: 34px; }
}
@media (prefers-reduced-motion: reduce) {
  .intent-halo, .blur-field, .workspace-layer, .current-core, .signal-cluster,
  .voice-signal, .ciq-signal, .booking-pulse, .booking-pulse circle:first-child,
  .workspace-core::before, .workspace-core span, .hero-visual::after { animation: none; }
  .intent-particle { display: none; }
  .signal-cluster, .voice-signal, .ciq-signal, .booking-pulse { opacity: .9; }
  .workspace-layer { opacity: .95; }
}

/* ==========================================================================
   26. page hero — the compact version used on every page except home
   ========================================================================== */
.page-hero { position: relative; text-align: center; padding: clamp(56px, 8vw, 96px) var(--gut) 0; }
.page-hero::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 520px; pointer-events: none;
  background:
    radial-gradient(46% 62% at 78% 10%, rgba(98,91,255,.13), rgba(98,91,255,0) 70%),
    radial-gradient(42% 56% at 18% 24%, rgba(37,99,235,.11), rgba(37,99,235,0) 70%);
}
.page-hero > * { position: relative; z-index: 2; }
.page-hero h1 {
  margin: 20px auto 0; max-width: 18ch;
  font-size: clamp(34px, 4.8vw, 60px); font-weight: 580; letter-spacing: -.04em; line-height: 1.05;
}
.page-hero h1 .grad { font-weight: 500; }
.page-hero .lede { margin: 24px auto 0; max-width: 640px; font-size: clamp(16.5px, 1.5vw, 19.5px); line-height: 1.55; color: var(--soft); }
.page-hero .ctas { margin-top: 30px; display: flex; gap: 13px; justify-content: center; flex-wrap: wrap; }
.page-hero .note { margin-top: 16px; font-size: 13px; color: var(--faint); }

/* an in-page anchor rail, used on platform.html and real-estate.html */
.rail-nav {
  position: sticky; top: 68px; z-index: 40; background: rgba(255,255,255,.9);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line); margin-top: clamp(48px, 7vw, 80px);
}
.rail-nav .inner { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut); display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; }
.rail-nav .inner::-webkit-scrollbar { display: none; }
.rail-nav a {
  white-space: nowrap; font-size: 13.5px; font-weight: 500; color: var(--soft);
  padding: 15px 14px; border-bottom: 2px solid transparent;
}
.rail-nav a:hover { color: var(--blue); border-bottom-color: var(--blue); }
.sec[id], .sec-alt[id] { scroll-margin-top: 130px; }

/* two-column prose, used on about / privacy */
.prose { max-width: 720px; }
.prose p { font-size: 16.5px; line-height: 1.65; color: var(--soft); margin-top: 18px; }
.prose h3 { font-size: 21px; font-weight: 650; letter-spacing: -.025em; margin-top: 36px; }
.prose ul { margin: 16px 0 0; padding-left: 22px; color: var(--soft); font-size: 16px; line-height: 1.7; }
.prose li { margin-top: 8px; }

/* people cards */
.people { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 20px; margin-top: 40px; }
.person { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--paper); padding: 28px; box-shadow: var(--sh-card); }
.person .hd { display: flex; align-items: center; gap: 14px; }
.person .hd .mk { width: 52px; height: 52px; border-radius: 15px; background: var(--grad-135); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 16px; flex: 0 0 auto; }
.person .hd b { display: block; font-family: var(--display); font-size: 19px; font-weight: 650; letter-spacing: -.02em; }
.person .hd small { display: block; font-family: var(--mono); font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--blue); margin-top: 3px; }
.person p { margin-top: 16px; font-size: 14.5px; line-height: 1.6; color: var(--soft); }
.person .tags { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 6px; }
.person .tags span { font-size: 11.5px; font-weight: 600; color: var(--soft); background: var(--mist); border-radius: 999px; padding: 5px 10px; }

/* blog cards */
.posts { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px; margin-top: 40px; }
.post { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--paper); padding: 24px; display: flex; flex-direction: column; gap: 12px; box-shadow: var(--sh-card); transition: transform .18s ease, box-shadow .18s ease; }
.post:hover { transform: translateY(-2px); box-shadow: 0 20px 40px -24px rgba(16,24,40,.24), var(--sh-card); }
.post .meta { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--blue); }
.post h3 { font-size: 18px; font-weight: 650; letter-spacing: -.02em; line-height: 1.3; color: var(--ink); }
.post p { font-size: 14px; line-height: 1.55; color: var(--soft); flex: 1; }
.post .more { font-size: 13.5px; font-weight: 600; color: var(--blue); display: inline-flex; align-items: center; gap: 6px; }

@media (max-width: 900px) { .people, .posts { grid-template-columns: minmax(0,1fr); } }
@media (max-width: 640px) { .rail-nav { top: 62px; } .rail-nav a { padding: 13px 12px; font-size: 13px; } }

/* ==========================================================================
   27. the gap grid — a builder problem paired with what closes it
   ========================================================================== */
.gaps { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; margin-top: 40px; }
.gap {
  border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--paper); overflow: hidden;
  box-shadow: var(--sh-card); display: flex; flex-direction: column;
}
.gap .p { padding: 22px 24px 20px; }
.gap .n { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--hot); }
.gap h3 { font-size: 19px; font-weight: 650; letter-spacing: -.025em; margin-top: 10px; }
.gap .p > p { margin-top: 8px; font-size: 14.5px; line-height: 1.55; color: var(--soft); }
.gap .fix {
  margin-top: auto; padding: 18px 24px 20px; border-top: 1px solid var(--line-2);
  background: linear-gradient(135deg, rgba(238,243,254,.75), rgba(243,240,255,.5));
}
.gap .fix .n { color: var(--blue); }
.gap .fix p { margin-top: 8px; font-size: 14.5px; line-height: 1.55; color: var(--ink); }
.gap .fix .who { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 6px; }
.gap .fix .who span { font-family: var(--mono); font-size: 11px; font-weight: 500; color: var(--blue); background: var(--paper); border: 1px solid #C7D2FE; border-radius: 999px; padding: 4px 9px; }

/* --------------------------------------------- the stack / architecture -------- */
.stack { margin-top: 40px; border: 1px solid var(--line); border-radius: var(--r-xl); overflow: hidden; background: var(--paper); }
.stack .tier { border-bottom: 1px solid var(--line); padding: 22px 26px; display: grid; grid-template-columns: 172px minmax(0,1fr); gap: 24px; align-items: center; }
.stack .tier:last-child { border-bottom: 0; }
.stack .tier .lab { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.stack .tier .lab b { display: block; font-family: var(--display); font-size: 16px; font-weight: 650; letter-spacing: -.02em; text-transform: none; color: var(--ink); margin-top: 6px; }
.stack .units { display: flex; flex-wrap: wrap; gap: 8px; }
.stack .u {
  display: inline-flex; align-items: center; gap: 9px; padding: 10px 14px;
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--mist);
  font-size: 13.5px; font-weight: 600; color: var(--ink);
}
.stack .u img { width: 22px; height: 22px; }
.stack .u small { font-weight: 500; color: var(--soft); font-size: 12.5px; }
.stack .u.on { background: linear-gradient(135deg, var(--wash), var(--violet-wash)); border-color: #C7D2FE; }
.stack .tier.spine { background: linear-gradient(135deg, var(--wash), var(--violet-wash)); }
.stack .tier.spine .u { background: var(--paper); border-color: #C7D2FE; }

/* -------------------------------------------------- role / surface cards ------- */
.surfaces { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; margin-top: 40px; }
.surface { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--paper); padding: 26px; box-shadow: var(--sh-card); display: flex; flex-direction: column; gap: 14px; }
.surface .hd { display: flex; align-items: center; gap: 11px; }
.surface .hd i { width: 38px; height: 38px; border-radius: 11px; background: var(--grad-135); color: #fff; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.surface .hd i svg { width: 19px; height: 19px; }
.surface .hd b { display: block; font-family: var(--display); font-size: 18px; font-weight: 650; letter-spacing: -.02em; }
.surface .hd small { display: block; font-family: var(--mono); font-size: 11px; letter-spacing: .06em; color: var(--blue); margin-top: 2px; }
.surface p { font-size: 14px; line-height: 1.55; color: var(--soft); flex: 1; }
.surface ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.surface ul li { display: grid; grid-template-columns: 16px minmax(0,1fr); gap: 9px; font-size: 13px; line-height: 1.45; color: var(--ink); align-items: start; }
.surface ul li svg { width: 12px; height: 12px; margin-top: 4px; color: var(--blue); fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }

@media (max-width: 900px) {
  .gaps { grid-template-columns: minmax(0,1fr); }
  .surfaces { grid-template-columns: minmax(0,1fr); }
  .stack .tier { grid-template-columns: minmax(0,1fr); gap: 14px; }
}

/* ==========================================================================
   28. article pages
   ========================================================================== */
.article-hero { padding: clamp(48px, 7vw, 84px) var(--gut) 0; }
.article-hero .inner { max-width: 760px; margin: 0 auto; }
.article-hero h1 { font-size: clamp(30px, 4.2vw, 48px); font-weight: 600; letter-spacing: -.035em; line-height: 1.08; margin-top: 18px; }
.article-hero .meta { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 8px 20px; font-family: var(--mono); font-size: 12px; color: var(--faint); }
.article-hero .summary { margin-top: 26px; font-size: 18.5px; line-height: 1.55; color: var(--soft); }
.article-body { max-width: 760px; margin: 0 auto; padding: 0 var(--gut); }
.article-body hr { border: 0; border-top: 1px solid var(--line); margin: 44px 0; }
.article-body h2 {
  font-size: clamp(22px, 2.6vw, 28px); font-weight: 650; letter-spacing: -.03em;
  line-height: 1.2; margin-top: 44px;
}
.article-body p { margin-top: 18px; font-size: 17px; line-height: 1.7; color: #313A4D; }
.article-body p:first-child { margin-top: 32px; }
.article-back { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: var(--soft); }
.article-back svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.article-back:hover { color: var(--blue); }
.article-next { max-width: 760px; margin: 64px auto 0; padding: 0 var(--gut); }

/* blog index filters */
.blog-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 32px; justify-content: center; }
.blog-filters button {
  border: 1px solid var(--line); background: var(--paper); color: var(--soft);
  border-radius: 999px; padding: 9px 15px; font-size: 13.5px; font-weight: 600; cursor: pointer;
  transition: background .14s ease, border-color .14s ease, color .14s ease;
}
.blog-filters button:hover { border-color: var(--faint); color: var(--ink); }
.blog-filters button[aria-pressed="true"] { background: var(--wash); border-color: #C7D2FE; color: var(--blue); }
.post[hidden] { display: none; }

/* ==========================================================================
   29. THEME v2 — "Instrument"
   --------------------------------------------------------------------------
   The palette moves off generic SaaS blue onto a signal spectrum: electric
   blue -> violet -> teal, read left to right as current flowing through the
   system. Amber marks attention, emerald marks resolved. Dark sections are a
   first-class citizen: `.dark` re-points the same tokens every component
   already uses, so cards, tables, KPIs and charts work on both grounds with
   no duplicated rules.
   ========================================================================== */
:root {
  /* light ground */
  --paper:   #FFFFFF;
  --paper-2: #FBFCFE;
  --ink:     #070A12;
  --soft:    #55607A;
  --faint:   #8C95AC;
  --line:    #E5E9F2;
  --line-2:  #EFF2F8;
  --mist:    #F5F7FC;

  /* the signal spectrum */
  --blue:       #3B6CFF;
  --blue-deep:  #2450D8;
  --violet:     #7B5CFF;
  --purple:     #9B4DFF;
  --teal:       #00CBB4;
  --wash:       #EDF2FF;
  --violet-wash:#F2EFFF;
  --teal-wash:  #E6FBF7;

  --ok: #00996F;  --ok-soft: #E6F8F1;  --ok-mid: #00C48C;
  --warm: #B26A00; --warm-soft: #FFF6E6;
  --hot: #C1362B;  --hot-soft: #FEF1EF;
  --wa: #DCF8C6;

  --grad:     linear-gradient(90deg, #3B6CFF 0%, #7B5CFF 48%, #00CBB4 100%);
  --grad-135: linear-gradient(135deg, #3B6CFF 0%, #7B5CFF 48%, #9B4DFF 100%);
  --grad-soft: linear-gradient(135deg, rgba(59,108,255,.10), rgba(123,92,255,.08) 55%, rgba(0,203,180,.08));

  --sh-card:  0 1px 2px rgba(7,10,18,.05), 0 10px 26px -12px rgba(7,10,18,.10);
  --sh-lift:  0 1px 2px rgba(7,10,18,.05), 0 26px 50px -24px rgba(59,108,255,.32);
  --sh-float: 0 24px 60px -24px rgba(7,10,18,.32), 0 2px 6px rgba(7,10,18,.06);
  --sh-shot:  0 60px 150px -50px rgba(59,108,255,.42), 0 18px 44px -22px rgba(7,10,18,.20);

  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
}

body { background: var(--paper); color: var(--ink); }

/* ------------------------------------------------------- the dark ground */
.dark {
  --paper:   #0C1120;
  --paper-2: #121a2e;
  --ink:     #F3F6FC;
  --soft:    #96A2BE;
  --faint:   #6E7A96;
  --line:    #1E2942;
  --line-2:  #182238;
  --mist:    #101728;

  --wash:        #16204099;
  --violet-wash: #1B1B3E99;
  --teal-wash:   #0B2C2C99;
  --ok-soft:  rgba(0,196,140,.14);
  --warm-soft: rgba(255,176,32,.14);
  --hot-soft: rgba(255,120,105,.14);
  --ok:   #38DBA8;
  --warm: #FFB020;
  --hot:  #FF8A78;
  --blue: #6E93FF;
  --violet: #A490FF;

  --sh-card: 0 1px 0 rgba(255,255,255,.04) inset, 0 18px 40px -20px rgba(0,0,0,.7);
  --sh-lift: 0 1px 0 rgba(255,255,255,.06) inset, 0 30px 60px -24px rgba(59,108,255,.45);
  --sh-float: 0 30px 70px -26px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.05);
  --sh-shot: 0 70px 160px -50px rgba(59,108,255,.45), 0 20px 50px -24px rgba(0,0,0,.7);

  background: #070A12;
  color: var(--ink);
  position: relative;
  isolation: isolate;
}
/* the mesh + grain that make a dark band feel lit rather than flat */
.dark::before {
  content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(58% 46% at 12% 0%, rgba(59,108,255,.20), transparent 62%),
    radial-gradient(50% 42% at 88% 8%, rgba(155,77,255,.16), transparent 60%),
    radial-gradient(46% 40% at 62% 100%, rgba(0,203,180,.14), transparent 60%);
}
.dark::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: var(--grain); opacity: .16; mix-blend-mode: overlay;
}
.dark .head h2, .dark .cta h2 { color: var(--ink); }
.dark .btn-ghost { background: rgba(255,255,255,.04); color: var(--ink); border-color: rgba(255,255,255,.14); }
.dark .btn-ghost:hover { background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.26); }
.dark .kicker { color: #8FB0FF; }
.dark .pill.cold { background: rgba(255,255,255,.06); color: var(--soft); }
.dark .pill.blue { background: rgba(59,108,255,.16); color: #8FB0FF; }
.dark .pill.violet { background: rgba(155,77,255,.16); color: #C3A6FF; }
.dark .chipf, .dark .chip { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.12); }
.dark .segs { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.12); }
.dark .segs span.on { background: rgba(59,108,255,.2); color: #8FB0FF; }
.dark table.t th, .dark table.lt th { background: rgba(255,255,255,.03); }
.dark .cols i.f, .dark .bars i[style*="E4E8EF"] { background: rgba(255,255,255,.12) !important; }
.dark .msg { background: #1B2540; color: var(--ink); box-shadow: none; }
.dark .msg.me { background: #10502F; }
.dark .phone .thread { background: #0A0F1C; }
.dark .float { background: rgba(18,26,46,.92); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.dark .logo-row .lg { background: rgba(255,255,255,.03); border-color: rgba(255,255,255,.10); }
.dark .logo-row .lg .mk { background: rgba(255,255,255,.07); }
.dark .helix { background: linear-gradient(135deg, rgba(59,108,255,.16), rgba(155,77,255,.12)); border-color: rgba(123,92,255,.34); }
.dark .stack .tier.spine { background: linear-gradient(135deg, rgba(59,108,255,.16), rgba(155,77,255,.12)); }
.dark .stack .tier.spine .u { background: rgba(255,255,255,.05); border-color: rgba(123,92,255,.34); }
.dark .gap .fix { background: linear-gradient(135deg, rgba(59,108,255,.13), rgba(155,77,255,.09)); }
.dark .gap .fix .who span { background: rgba(255,255,255,.05); border-color: rgba(123,92,255,.34); color: #A9C0FF; }
.dark .shift .row .to { background: linear-gradient(90deg, rgba(59,108,255,.14), rgba(155,77,255,.07)); }
.dark .ret { border-color: rgba(123,92,255,.4); }
.dark .ret span { background: transparent; color: #A490FF; }
.dark .site-footer { background: #070A12; border-color: var(--line); }

/* ------------------------------------------------- announcement / topbar */
.topbar {
  position: relative; z-index: 70;
  background: #070A12; color: #DCE3F5;
  font-size: 13.5px; line-height: 1;
}
.topbar .inner {
  max-width: 1320px; margin: 0 auto; padding: 11px var(--gut);
  display: flex; align-items: center; justify-content: center; gap: 10px; text-align: center;
}
.topbar .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--teal); flex: 0 0 auto; box-shadow: 0 0 0 0 rgba(0,203,180,.6); animation: ckBeacon 2.6s ease-out infinite; }
@keyframes ckBeacon { 0% { box-shadow: 0 0 0 0 rgba(0,203,180,.55); } 70% { box-shadow: 0 0 0 8px rgba(0,203,180,0); } 100% { box-shadow: 0 0 0 0 rgba(0,203,180,0); } }
.topbar b { color: #fff; font-weight: 600; }
.topbar a { color: #9FB8FF; display: inline-flex; align-items: center; gap: 6px; }
.topbar a svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .18s ease; }
.topbar a:hover svg { transform: translateX(3px); }
@media (max-width: 720px) { .topbar .hide-sm { display: none; } .topbar .inner { padding: 10px 16px; font-size: 12.5px; } }

/* ------------------------------------------------------- floating pill nav */
.site-header { position: sticky; top: 0; z-index: 60; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; border: 0; padding: 12px 0; transition: padding .25s ease; }
.site-header[data-stuck] { padding: 8px 0; }
.nav-wrap {
  max-width: 1240px; margin: 0 auto; height: 62px; padding: 0 10px 0 18px;
  display: flex; align-items: center; gap: 10px;
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(18px) saturate(180%); -webkit-backdrop-filter: blur(18px) saturate(180%);
  border: 1px solid var(--line); border-radius: 999px;
  box-shadow: 0 1px 2px rgba(7,10,18,.04), 0 12px 30px -18px rgba(7,10,18,.28);
  transition: box-shadow .25s ease, background .25s ease, border-color .25s ease;
}
.site-header[data-stuck] .nav-wrap { box-shadow: 0 1px 2px rgba(7,10,18,.05), 0 20px 44px -22px rgba(7,10,18,.4); }
@media (max-width: 1320px) { .nav-wrap { margin: 0 var(--gut); } }
.brand img { width: 28px; height: 28px; }
.brand-text { font-size: 16.5px; }
.nav-actions { margin-left: auto; gap: 6px; }

/* ------------------------------------------------------------ card motion */
.b, .case, .surface, .person, .post, .gap, .rail .r, .trust .t, .plan {
  transition: transform .28s cubic-bezier(.2,.7,.3,1), box-shadow .28s ease, border-color .28s ease;
}
.b:hover, .case:hover, .surface:hover, .person:hover, .gap:hover, .rail a.r:hover, .trust .t:hover {
  transform: translateY(-3px); box-shadow: var(--sh-lift); border-color: rgba(123,92,255,.34);
}
.agent { position: relative; }
.agent::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(60% 60% at 50% 0%, rgba(59,108,255,.10), transparent 70%);
  transition: opacity .3s ease;
}
.agent:hover::after { opacity: 1; }

/* --------------------------------------------------------- logo marquee */
.marquee { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee .track { display: flex; gap: 14px; width: max-content; animation: ckMarquee 44s linear infinite; }
.marquee:hover .track { animation-play-state: paused; }
@keyframes ckMarquee { to { transform: translateX(-50%); } }

/* --------------------------------------------------------- glow surfaces */
.glow { position: relative; }
.glow::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none;
  background: var(--grad); opacity: .55;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.spot { position: relative; }
.spot::before {
  content: ""; position: absolute; left: 50%; top: -10%; width: 70%; aspect-ratio: 2/1; translate: -50% 0;
  background: radial-gradient(closest-side, rgba(59,108,255,.28), transparent 70%);
  filter: blur(30px); pointer-events: none; z-index: -1;
}

/* ------------------------------------------------------ animated numbers */
.metric b, .kpi b, .counter { font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------- SVG motion kit */
/* A drawn path is only held back inside a container that is waiting to be
   revealed; anywhere else -- the hero, for one -- it renders complete. */
.reveal .draw { stroke-dasharray: var(--len, 1000); stroke-dashoffset: var(--len, 1000); }
.reveal.in .draw { animation: ckDraw 1.9s cubic-bezier(.35,.1,.25,1) forwards; }
@keyframes ckDraw { to { stroke-dashoffset: 0; } }
.flow { stroke-dasharray: 8 14; animation: ckFlow 1.4s linear infinite; }
@keyframes ckFlow { to { stroke-dashoffset: -22; } }
.pulse-node { transform-box: fill-box; transform-origin: center; animation: ckNode 3.2s ease-in-out infinite; }
@keyframes ckNode { 0%,100% { opacity: .55; transform: scale(.94); } 50% { opacity: 1; transform: scale(1); } }
.orbit { transform-box: fill-box; transform-origin: center; animation: ckOrbit 22s linear infinite; }
@keyframes ckOrbit { to { transform: rotate(360deg); } }
.shimmer {
  background: linear-gradient(100deg, transparent 20%, rgba(255,255,255,.55) 50%, transparent 80%);
  background-size: 260% 100%; animation: ckShimmer 3.4s ease-in-out infinite;
}
@keyframes ckShimmer { to { background-position: -260% 0; } }

@media (prefers-reduced-motion: reduce) {
  .marquee .track, .topbar .dot, .flow, .pulse-node, .orbit, .shimmer { animation: none !important; }
  .draw { stroke-dashoffset: 0 !important; animation: none !important; }
  .b:hover, .case:hover, .surface:hover, .person:hover, .gap:hover, .rail a.r:hover, .trust .t:hover { transform: none; }
}

/* --------------------------------------------------------- agent marks */
.mark { display: block; width: 56px; height: 56px; overflow: visible; }
.agent .mark { margin: 0 0 18px; }
.stack .u .mark, .float .t .mark { width: 22px; height: 22px; margin: 0; flex: 0 0 auto; }
.helix .mark { width: 52px; height: 52px; flex: 0 0 auto; }

/* --------------------------------------------------- the operating loop svg */
.loop-svg { display: block; width: 100%; height: auto; margin: 40px auto 0; max-width: 1160px; overflow: visible; }
.loop-svg .box { fill: var(--paper); stroke: var(--line); stroke-width: 1.5; }
.loop-svg .box-on { fill: url(#loopBoxOn); stroke: rgba(123,92,255,.42); }
.loop-svg .n-lab { fill: var(--faint); font-family: var(--mono); font-size: 12px; letter-spacing: .12em; }
.loop-svg .n-name { fill: var(--ink); font-family: var(--display); font-size: 21px; font-weight: 650; letter-spacing: -.02em; }
.loop-svg .link { stroke: url(#loopCurrent); stroke-width: 2.5; fill: none; stroke-linecap: round; }
.loop-svg .ico { stroke: url(#loopCurrent); stroke-width: 2.2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.loop-svg .halo { fill: url(#loopCurrent); opacity: .12; }
.loop-svg .arc { stroke: rgba(123,92,255,.5); stroke-width: 2; fill: none; stroke-dasharray: 7 8; animation: ckFlow 2.2s linear infinite reverse; }
.loop-svg .arc-lab { fill: var(--violet); font-family: var(--sans); font-size: 14px; font-weight: 600; }
.loop-svg .arc-lab-bg { fill: var(--mist); }
.dark .loop-svg .arc-lab-bg { fill: #0C1120; }
.loop-legend { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 26px; max-width: 1160px; margin: 4px auto 0; }
.loop-legend p { font-size: 14px; line-height: 1.55; color: var(--soft); }
@media (max-width: 900px) {
  .loop-svg { display: none; }
  .loop-legend { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 20px; margin-top: 28px; }
  .loop-legend p b { display: block; font-family: var(--display); font-size: 16px; color: var(--ink); margin-bottom: 4px; }
}
@media (max-width: 560px) { .loop-legend { grid-template-columns: minmax(0,1fr); } }

/* ------------------------------------------- the signal rail under a hero */
.hero-rail { display: block; width: min(920px, 100%); height: 76px; margin: 34px auto 0; overflow: visible; }
.hero-rail .rail-line { stroke: url(#railGrad); stroke-width: 2; fill: none; }
.hero-rail .rail-dash { stroke: url(#railGrad); stroke-width: 2; fill: none; stroke-dasharray: 6 10; animation: ckFlow 1.6s linear infinite; }
.hero-rail .node { fill: var(--paper); stroke: url(#railGrad); stroke-width: 2; }
.hero-rail .node-lab { fill: var(--faint); font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.hero-rail .glowdot { fill: url(#railGrad); }

/* -------------------------------------------------------- typing bubble */
.typing { display: inline-flex; align-items: center; gap: 4px; padding: 10px 13px; border-radius: 12px; background: var(--paper); box-shadow: 0 1px 1px rgba(7,10,18,.07); align-self: flex-start; }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--faint); animation: ckType 1.3s ease-in-out infinite; }
.typing i:nth-child(2) { animation-delay: .18s; }
.typing i:nth-child(3) { animation-delay: .36s; }
@keyframes ckType { 0%,60%,100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }

/* --------------------------------------------------------- scroll cue */
.scroll-cue { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 34px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }
.scroll-cue i { width: 1px; height: 34px; background: linear-gradient(180deg, transparent, var(--blue)); animation: ckCue 2.2s ease-in-out infinite; }
@keyframes ckCue { 0%,100% { opacity: .3; transform: scaleY(.6); transform-origin: top; } 50% { opacity: 1; transform: scaleY(1); } }

/* ------------------------------------------------- ghost section numeral */
.gap { position: relative; overflow: hidden; }
.gap .ghost {
  position: absolute; right: 18px; top: -6px; font-family: var(--display);
  font-size: 96px; font-weight: 800; line-height: 1; letter-spacing: -.06em;
  color: var(--ink); opacity: .035; pointer-events: none; user-select: none;
}
.dark .gap .ghost { opacity: .07; }

@media (prefers-reduced-motion: reduce) {
  .hero-rail .rail-dash, .typing i, .scroll-cue i { animation: none; }
}

/* ==========================================================================
   30. TYPE v2 — a Claude-style pairing
   --------------------------------------------------------------------------
   Anthropic's own system pairs a warm high-contrast serif for display with a
   humanist grotesque for UI, and sets long-form reading in the serif. Styrene
   and Copernicus/Tiempos are licensed, so this uses the closest open faces:
   Newsreader for display and long-form, Hanken Grotesk for UI. Serifs need
   different metrics from a grotesque -- lighter weights, far less negative
   tracking -- so the scale is retuned here rather than inherited.
   ========================================================================== */
:root {
  --display: "Newsreader", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --sans:    "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --serif:   "Newsreader", "Iowan Old Style", Georgia, serif;
}

body { font-family: var(--sans); font-size: 16.5px; letter-spacing: -.003em; }
h1, h2, h3, h4 { font-family: var(--display); font-optical-sizing: auto; }

/* the hero: serif display, the accent line in true italic */
.hero h1 { font-size: clamp(44px, 5.4vw, 78px); font-weight: 400; letter-spacing: -.022em; line-height: 1.06; }
.hero h1 .line-accent { font-weight: 400; font-style: italic; letter-spacing: -.018em; }
.hero-eyebrow { font-size: 11.5px; letter-spacing: .2em; }
.hero-sub { font-family: var(--sans); font-weight: 400; }

.page-hero h1 { font-size: clamp(38px, 5.2vw, 64px); font-weight: 400; letter-spacing: -.022em; line-height: 1.08; max-width: 17ch; }
.page-hero h1 .grad { font-weight: 400; }

.head h2 { font-size: clamp(32px, 4.3vw, 50px); font-weight: 400; letter-spacing: -.02em; line-height: 1.1; }
.cta h2 { font-size: clamp(34px, 4.8vw, 56px); font-weight: 400; letter-spacing: -.022em; line-height: 1.08; }
.grad { font-style: italic; letter-spacing: -.016em; }

.b h3 { font-family: var(--display); font-size: 20px; font-weight: 500; letter-spacing: -.012em; }
.b h3 small { font-family: var(--sans); font-size: 13.5px; letter-spacing: 0; }
.gap h3 { font-size: 22px; font-weight: 500; letter-spacing: -.014em; line-height: 1.22; }
.agent h3, .surface .hd b, .person .hd b, .helix b, .rail .r b, .loop .node b,
.stack .tier .lab b, .case .who b, .post h3, .plan h3, .faq summary, h3.t3 {
  font-family: var(--display); font-weight: 500; letter-spacing: -.012em;
}
.agent h3 { font-size: 21px; }
.plan h3 { font-size: 27px; font-weight: 400; letter-spacing: -.018em; }
.post h3 { font-size: 20px; line-height: 1.28; }
.faq summary { font-size: 19px; letter-spacing: -.012em; }
.quote blockquote { font-family: var(--display); font-weight: 400; font-size: clamp(21px, 2.4vw, 28px); letter-spacing: -.014em; line-height: 1.38; }
.metric b { font-family: var(--mono); font-weight: 400; }
.app h3, .ph h3, .mini .app h3 { font-family: var(--display); font-weight: 500; letter-spacing: -.012em; }
.brand-text { font-family: var(--display); font-weight: 600; letter-spacing: -.015em; font-size: 18px; }
.footer-brand span { font-family: var(--display); font-weight: 600; letter-spacing: -.015em; }
.loop-svg .n-name { font-family: var(--display); font-weight: 500; letter-spacing: -.012em; font-size: 22px; }

/* long-form reading, set in the serif the way Claude sets an answer */
.article-hero h1 { font-size: clamp(34px, 4.4vw, 52px); font-weight: 400; letter-spacing: -.02em; line-height: 1.14; }
.article-hero .summary { font-family: var(--serif); font-size: 20px; line-height: 1.6; }
.article-body p { font-family: var(--serif); font-size: 19px; line-height: 1.72; letter-spacing: -.002em; color: #2A3247; }
.dark .article-body p { color: #C9D2E6; }
.article-body h2 { font-size: clamp(24px, 2.8vw, 31px); font-weight: 500; letter-spacing: -.014em; }
.prose p { font-family: var(--serif); font-size: 18.5px; line-height: 1.7; }

/* the grotesque keeps every dense UI surface legible */
.side, .list, .pane, .app .cardx, table.t, table.lt, .float, .phone, .kpi, .tile,
.chipf, .chip, .pill, .segs, .bars, .funnel, .lbls, .tl, .step, .acts, .msg { font-family: var(--sans); }
.cardx h4 { font-family: var(--sans); }
.b .vis, .b .vis * { font-family: var(--sans); }

/* Hanken sits slightly larger on the body than Inter did */
.head .lede { font-size: clamp(17px, 1.55vw, 20px); line-height: 1.58; }
.hero-sub { font-size: clamp(17px, 1.55vw, 20.5px); line-height: 1.52; }
.fact { font-size: 15px; }
.fact small { font-size: 13.5px; }

/* ==========================================================================
   31. PALETTE v3 — "Blueprint"
   --------------------------------------------------------------------------
   Three decisions make this ownable rather than another blue-violet SaaS site:

   1. The ground is warm. Bone paper (#FBFAF7) and sand neutrals instead of
      clinical white and cool grey. It pairs with the serif, it reads like
      paper and plaster rather than a dashboard, and no competitor in this
      category is warm.
   2. The brand colour is a true ultramarine (#2B4EFF) -- a pigment blue,
      more saturated and more confident than corporate proptech blue.
   3. Clay (#E8623C) is the signature accent and it never appears in a
      gradient. It carries heat: attention, urgency, the hot lead, the new
      badge. Discipline about where it can appear is what makes it read as a
      brand colour rather than decoration.

   Gradients stay inside the blue family and are reserved for data and for the
   one italic phrase per heading. Jade marks resolved, amber marks waiting.
   ========================================================================== */
:root {
  /* warm ground */
  --paper:   #FBFAF7;
  --paper-2: #FFFFFF;
  --ink:     #0B1220;
  --soft:    #55606F;
  --faint:   #8A8F9C;
  --line:    #E6E2D8;
  --line-2:  #EFEDE5;
  --mist:    #F4F2EC;

  /* brand */
  --brand:      #2B4EFF;
  --brand-deep: #1B36CC;
  --indigo:     #5B4BFF;
  --violet:     #8B5CF6;
  --clay:       #E8623C;
  --clay-deep:  #C64A26;
  --jade:       #0E9F76;
  --amber:      #C77F1A;

  --blue: var(--brand);
  --blue-deep: var(--brand-deep);
  --purple: var(--violet);
  --teal: var(--jade);

  --wash:        #EEF0FF;
  --violet-wash: #F3F0FF;
  --clay-wash:   #FDF0EA;
  --jade-wash:   #E7F6F0;
  --teal-wash:   var(--jade-wash);

  /* semantic states, used by every product shot */
  --hot: #C0431F;   --hot-soft: #FDEDE7;
  --warm: #9A6410;  --warm-soft: #FCF4E3;
  --ok: #0B7D5C;    --ok-soft: #E7F6F0;   --ok-mid: #0E9F76;
  --wa: #DCF8C6;

  --grad:     linear-gradient(90deg, #2B4EFF 0%, #5B4BFF 55%, #8B5CF6 100%);
  --grad-135: linear-gradient(135deg, #2B4EFF 0%, #5B4BFF 55%, #8B5CF6 100%);
  --grad-soft: linear-gradient(135deg, rgba(43,78,255,.10), rgba(91,75,255,.08) 55%, rgba(139,92,246,.08));

  --sh-card:  0 1px 2px rgba(11,18,32,.05), 0 10px 26px -12px rgba(11,18,32,.12);
  --sh-lift:  0 1px 2px rgba(11,18,32,.05), 0 26px 50px -24px rgba(43,78,255,.30);
  --sh-float: 0 24px 60px -24px rgba(11,18,32,.34), 0 2px 6px rgba(11,18,32,.06);
  --sh-shot:  0 60px 150px -50px rgba(43,78,255,.38), 0 18px 44px -22px rgba(11,18,32,.22);
}

body { background: var(--paper); }
.sec, .hero, .page-hero, .cta, .article-hero { background: var(--paper); }
/* cards and product surfaces sit a shade brighter than the paper ground */
.b, .case, .surface, .person, .post, .gap, .plan, .quote, .shot, .mini, .float,
.trust .t, .rail .r, .shift, .stack, .cardx, .kpi, .tile, .logo-row .lg, .chip, .chipf,
table.t, table.lt, .side, .pane, .phone, .agents, .metrics, .agent, .segs { background-color: var(--paper-2); }
.app, .pageshot { background: var(--mist); }

.hero::before {
  background:
    radial-gradient(46% 62% at 80% 10%, rgba(91,75,255,.13), transparent 68%),
    radial-gradient(44% 58% at 16% 26%, rgba(43,78,255,.12), transparent 68%),
    radial-gradient(40% 46% at 52% 0%, rgba(232,98,60,.07), transparent 70%);
}
.page-hero::before {
  background:
    radial-gradient(48% 64% at 78% 8%, rgba(91,75,255,.12), transparent 68%),
    radial-gradient(44% 58% at 18% 24%, rgba(43,78,255,.10), transparent 68%);
}

/* clay is the heat: it never joins a gradient, it only marks attention */
.tag, .gap .n { color: var(--clay); }
.tag { background: var(--clay-wash); }
.gap .fix .n { color: var(--brand); }
.pill.hot { background: var(--clay-wash); color: var(--clay-deep); }
.topbar .dot { background: var(--clay); animation-name: ckBeaconClay; }
@keyframes ckBeaconClay {
  0% { box-shadow: 0 0 0 0 rgba(232,98,60,.55); }
  70% { box-shadow: 0 0 0 8px rgba(232,98,60,0); }
  100% { box-shadow: 0 0 0 0 rgba(232,98,60,0); }
}
.rag.red { border-color: rgba(232,98,60,.36); background: linear-gradient(135deg, rgba(232,98,60,.13), rgba(232,98,60,.05)); }
.rag.amber { border-color: rgba(199,127,26,.36); background: linear-gradient(135deg, rgba(199,127,26,.13), rgba(199,127,26,.05)); }
.rag.green { border-color: rgba(14,159,118,.34); background: linear-gradient(135deg, rgba(14,159,118,.12), rgba(14,159,118,.05)); }
.tile.r { border-left-color: var(--clay); }
.tile.a { border-left-color: var(--amber); }
.tile.v { border-left-color: var(--indigo); }
.btn-primary { background: var(--brand); }
.btn-primary:hover { background: var(--brand-deep); }
.brand img { border-radius: 8px; }

/* the dark ground, warm-tinted so it belongs to the same brand */
.dark {
  --paper:   #101A2B;
  --paper-2: #141F33;
  --ink:     #F4F2EC;
  --soft:    #9AA5B8;
  --faint:   #71809A;
  --line:    #22314C;
  --line-2:  #1B2740;
  --mist:    #0D1626;

  --wash:        rgba(43,78,255,.16);
  --violet-wash: rgba(139,92,246,.16);
  --clay-wash:   rgba(232,98,60,.16);
  --jade-wash:   rgba(14,159,118,.16);

  --hot: #FF8C66;   --hot-soft: rgba(232,98,60,.16);
  --warm: #F0B35C;  --warm-soft: rgba(199,127,26,.16);
  --ok: #3FD3A3;    --ok-soft: rgba(14,159,118,.18);
  --blue: #8AA0FF;
  --violet: #B79BFF;

  background: #070C16;
}
.dark::before {
  background:
    radial-gradient(58% 46% at 12% 0%, rgba(43,78,255,.22), transparent 62%),
    radial-gradient(52% 44% at 88% 6%, rgba(139,92,246,.16), transparent 60%),
    radial-gradient(48% 42% at 64% 100%, rgba(232,98,60,.10), transparent 62%);
}
.dark .kicker { color: #9DB0FF; }
.dark .gap .n { color: #FF8C66; }
.dark .msg.me { background: #14532D; }
.dark .site-footer { background: #070C16; }
.dark .b, .dark .case, .dark .surface, .dark .person, .dark .post, .dark .gap,
.dark .plan, .dark .quote, .dark .trust .t, .dark .rail .r, .dark .shift,
.dark .stack, .dark .cardx, .dark .kpi, .dark .tile, .dark .agents, .dark .metrics,
.dark .agent, .dark .segs, .dark .logo-row .lg { background-color: var(--paper-2); }
.dark .app, .dark .pageshot { background: var(--mist); }

/* footer picks up the warm sand rather than cool grey */
.site-footer { background: var(--mist); }

/* --------------------------- hero motion, repainted onto Blueprint ------- */
.hero-visual::before {
  background:
    linear-gradient(90deg, rgba(198,192,178,.34) 1px, transparent 1px),
    linear-gradient(180deg, rgba(198,192,178,.30) 1px, transparent 1px);
  background-size: 58px 58px;
}
.hero-visual::after { background: linear-gradient(90deg, rgba(238,240,255,.55), rgba(243,240,255,.45), rgba(253,240,234,.35)); }
.field-blue   { fill: rgba(43,78,255,.24); }
.field-mint   { fill: rgba(91,75,255,.20); }
.field-violet { fill: rgba(139,92,246,.20); }
.workspace-layer rect { stroke: rgba(91,75,255,.20); }
.workspace-layer path { stroke: rgba(85,96,111,.24); }
.workspace-layer circle { fill: rgba(238,240,255,.82); }
.intent-particle { filter: drop-shadow(0 10px 18px rgba(43,78,255,.28)); }
.signal-cluster circle, .ciq-signal circle, .booking-pulse circle:first-child { stroke: rgba(196,203,255,.9); }
.signal-cluster path, .ciq-signal path, .booking-pulse path { stroke: rgba(27,54,204,.88); }
.aura-signal path   { stroke: rgba(91,75,255,.86); }
.portal-signal path { stroke: rgba(139,92,246,.82); }
.visit-signal path  { stroke: rgba(43,78,255,.84); }
.ciq-signal circle  { fill: rgba(243,240,255,.85); stroke: rgba(139,92,246,.42); }
.ciq-signal path    { stroke: rgba(139,92,246,.9); }
.voice-signal use    { stroke: rgba(232,98,60,.85); }
.voice-signal circle { fill: rgba(232,98,60,.92); }
.voice-signal text, .signal-cluster text, .ciq-signal text, .visit-signal text { fill: rgba(11,18,32,.6); }
.booking-pulse circle:first-child { fill: rgba(231,246,240,.9); stroke: rgba(14,159,118,.42); }
.booking-pulse circle:nth-child(2) { fill: rgba(14,159,118,.95); }
.workspace-core span { border-color: rgba(43,78,255,.32); }
.workspace-core::before { background: radial-gradient(circle, rgba(255,255,255,.96), rgba(238,240,255,.55) 44%, transparent 72%); }
.hero-script .base { fill: #2A3247; opacity: .13; }




/* ==========================================================================
   32. the hero artwork — a ribbon of light
   --------------------------------------------------------------------------
   One object and a great deal of space around it. The colour drifts along the
   ribbon's length, a specular highlight travels across it, and the whole form
   breathes. Everything else was removed on purpose: no nodes, no connectors,
   no labels. The headline says what the product is; this only has to make the
   page feel considered.
   ========================================================================== */
.hero-visual {
  height: auto;
  max-width: 1180px;
  margin: clamp(8px, 2.4vw, 44px) auto 0;
  filter: none;
  overflow: visible;
}
.hero-visual::before, .hero-visual::after { display: none; }
.art { display: block; width: 100%; height: auto; overflow: visible; }

.rb-bloom { animation: rbBreathe 16s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes rbBreathe { 0%, 100% { opacity: .75; transform: scale(.97); } 50% { opacity: 1; transform: scale(1.03); } }

.rb-stage { animation: rbDrift 22s ease-in-out infinite; transform-box: view-box; transform-origin: 50% 50%; }
@keyframes rbDrift {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-.35deg) scale(1); }
  50%      { transform: translate3d(0, -8px, 0) rotate(.35deg) scale(1.012); }
}

.rb-halo { fill: #5B4BFF; opacity: .28; }
.rb-back { fill: url(#rbGrad); opacity: .22; }
.rb-main { fill: url(#rbGrad); }
.rb-roll { fill: url(#rbRoll); }
.rb-spec { mix-blend-mode: screen; }
.rb-edge { fill: none; stroke: #FFFFFF; stroke-width: 2.2; stroke-opacity: .55; stroke-linecap: round; }

@media (max-width: 900px) { .hero-visual { margin-top: 18px; max-width: none; } }
@media (prefers-reduced-motion: reduce) {
  .rb-bloom, .rb-stage { animation: none; }
  .rb-spec { display: none; }
}

/* ==========================================================================
   33. the navigation, rebuilt
   --------------------------------------------------------------------------
   The floating pill went: every competitor has one, and it fought the warm
   ground. This is a full-width bar that starts invisible over the hero and
   earns a hairline and a translucent ground once you scroll. Links carry a
   sliding underline, and the Platform menu leads with a featured panel rather
   than opening as a flat list of six.
   ========================================================================== */
.topbar { font-size: 12.5px; background: #0B1220; }
.topbar .inner { padding: 9px var(--gut); gap: 9px; }
.topbar b { font-weight: 600; }
.topbar span { color: #A9B2C7; }
.topbar b, .topbar a { color: #fff; }
.topbar a { color: #9FB0FF; font-weight: 500; }

.site-header {
  position: sticky; top: 0; z-index: 60; padding: 0;
  background: transparent; border-bottom: 1px solid transparent;
  transition: background .3s ease, border-color .3s ease, backdrop-filter .3s ease;
}
.site-header[data-stuck] {
  background: rgba(251,250,247,.82);
  backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom-color: var(--line);
}
.nav-wrap {
  max-width: 1320px; margin: 0 auto; height: 74px; padding: 0 var(--gut);
  display: flex; align-items: center; gap: 8px;
  background: none; border: 0; border-radius: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
}
.site-header[data-stuck] .nav-wrap { box-shadow: none; }
.brand { gap: 11px; }
.brand img { width: 30px; height: 30px; border-radius: 9px; }
.brand-text { font-size: 19px; font-weight: 600; letter-spacing: -.018em; }

.nav-main { margin-left: 40px; gap: 4px; }
.nav-main > a, .nav-trigger {
  position: relative; font-size: 15px; font-weight: 450; color: var(--soft);
  padding: 8px 2px; margin: 0 12px; border-radius: 0; background: none;
  transition: color .18s ease;
}
.nav-main > a:hover, .nav-trigger:hover,
.nav-item[data-open] .nav-trigger { background: none; color: var(--ink); }
.nav-main > a::after, .nav-trigger::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  border-radius: 2px; background: var(--brand);
  transform: scaleX(0); transform-origin: center;
  transition: transform .24s cubic-bezier(.2,.7,.3,1);
}
.nav-main > a:hover::after, .nav-trigger:hover::after,
.nav-item[data-open] .nav-trigger::after { transform: scaleX(1); }
.nav-main > a[aria-current="page"] { color: var(--ink); font-weight: 500; }
.nav-main > a[aria-current="page"]::after { transform: scaleX(1); background: var(--ink); }
.nav-trigger svg { width: 11px; height: 11px; opacity: .6; }

.nav-actions { gap: 4px; }
.console-link { font-size: 14.5px; font-weight: 450; padding: 9px 14px; border-radius: 999px; }
.console-link:hover { background: rgba(11,18,32,.05); color: var(--ink); }
.nav-actions .btn-sm { font-size: 14.5px; padding: 11px 20px; margin-left: 8px; }

/* ---- the Platform mega-menu ---- */
.nav-menu {
  top: calc(100% + 6px); border-radius: 22px; padding: 12px;
  box-shadow: 0 40px 80px -30px rgba(11,18,32,.30), 0 2px 6px rgba(11,18,32,.05);
  background: var(--paper-2);
}
.nav-menu.mega { width: 700px; left: -40px; display: none; }
.nav-item[data-open] .nav-menu.mega { display: grid; grid-template-columns: 236px minmax(0,1fr); gap: 12px; }
.nav-list { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 2px; align-content: start; }
.nav-feature {
  position: relative; overflow: hidden; display: flex; flex-direction: column;
  padding: 20px; border-radius: 16px; color: var(--ink);
  background: linear-gradient(160deg, rgba(43,78,255,.12), rgba(139,92,246,.10) 60%, rgba(232,98,60,.08));
  border: 1px solid rgba(91,75,255,.18);
}
.nav-feature-art { display: block; height: 54px; position: relative; margin-bottom: 6px; }
.nav-feature-art i {
  position: absolute; left: 0; height: 5px; border-radius: 99px; background: var(--grad); display: block;
}
.nav-feature-art i:nth-child(1) { top: 10px; width: 100%; opacity: .95; }
.nav-feature-art i:nth-child(2) { top: 24px; width: 72%; opacity: .6; }
.nav-feature-art i:nth-child(3) { top: 38px; width: 44%; opacity: .35; }
.nav-feature b { font-family: var(--display); font-size: 19px; font-weight: 500; letter-spacing: -.014em; }
.nav-feature small { display: block; font-size: 13px; line-height: 1.5; color: var(--soft); margin-top: 6px; }
.nav-feature-go {
  margin-top: auto; padding-top: 14px; display: inline-flex; align-items: center; gap: 7px;
  font-size: 13.5px; font-weight: 600; color: var(--brand);
}
.nav-feature-go svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s ease; }
.nav-feature:hover .nav-feature-go svg { transform: translateX(4px); }
.nav-menu .foot { grid-column: 1 / -1; margin-top: 4px; padding: 12px 14px 6px; }
.nav-menu.one { width: 268px; left: -20px; }
.nav-link i { border-radius: 11px; background: var(--wash); }
.nav-link:hover i { background: rgba(43,78,255,.14); }

@media (max-width: 1140px) { .nav-main > a, .nav-trigger { margin: 0 8px; font-size: 14.5px; } .nav-main { margin-left: 20px; } }
@media (max-width: 1080px) { .nav-wrap { height: 66px; } }

/* the menu footer inherits svg.i, which carries no intrinsic size */
.nav-menu .foot { display: flex; align-items: center; gap: 9px; font-size: 13px; }
.nav-menu .foot svg { width: 16px; height: 16px; flex: 0 0 auto; color: var(--brand); }
.nav-menu .foot span { color: var(--soft); }
.nav-menu .foot a { margin-left: auto; white-space: nowrap; }

/* ==========================================================================
   34. the identity
   --------------------------------------------------------------------------
   The mark is a C drawn as one gradient stroke, with the dot of ".ai" sitting
   in its mouth in clay. The wordmark answers it: "Clikin" in the display
   serif, ".ai" in the same clay, so the two halves of the lockup rhyme.
   ========================================================================== */
.brand-mark { display: block; flex: 0 0 auto; }
.brand { gap: 10px; }
.brand-text {
  font-family: var(--display); font-size: 20px; font-weight: 500;
  letter-spacing: -.022em; line-height: 1; color: var(--ink);
}
.brand-text span {
  background: none; -webkit-background-clip: initial; background-clip: initial;
  color: var(--clay); -webkit-text-fill-color: var(--clay); font-weight: 500;
}
.dark .brand-text { color: var(--ink); }
.dark .brand-text span { color: #FF8C66; -webkit-text-fill-color: #FF8C66; }
.footer-brand { gap: 10px; }
.footer-brand span { font-family: var(--display); font-size: 20px; font-weight: 500; letter-spacing: -.022em; }
.side .bd .brand-mark { width: 22px; height: 22px; }
.side .bd { font-family: var(--display); font-weight: 500; letter-spacing: -.012em; font-size: 14px; }

/* ==========================================================================
   35. page architectures
   --------------------------------------------------------------------------
   Every inner page was opening the same way: centred kicker, centred headline,
   centred lede, two buttons. These give each page its own shape. Real Estate
   opens like a feature article, AI Agents like a catalogue, Pricing like a
   utility, About like a manifesto.
   ========================================================================== */

/* ---- editorial: left-aligned, with a rail of figures alongside ---------- */
.hero-ed { position: relative; padding: clamp(44px, 6vw, 84px) 0 0; }
.hero-ed::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 560px; pointer-events: none;
  background:
    radial-gradient(50% 60% at 84% 6%, rgba(91,75,255,.13), transparent 66%),
    radial-gradient(40% 52% at 8% 30%, rgba(43,78,255,.09), transparent 66%);
}
.hero-ed > .wrap { position: relative; z-index: 2; }
.hero-ed .ed-grid { display: grid; grid-template-columns: minmax(0,1.4fr) 300px; gap: 72px; align-items: end; }
.hero-ed h1 {
  margin: 18px 0 0; font-size: clamp(40px, 5.6vw, 72px); font-weight: 400;
  letter-spacing: -.024em; line-height: 1.04; max-width: 15ch;
}
.hero-ed .lede { margin-top: 24px; max-width: 54ch; font-size: clamp(17px, 1.6vw, 20px); line-height: 1.55; color: var(--soft); }
.hero-ed .ctas { margin-top: 30px; display: flex; gap: 12px; flex-wrap: wrap; }
.stat-rail { display: flex; flex-direction: column; gap: 26px; border-left: 1px solid var(--line); padding: 4px 0 4px 26px; }
.stat-rail b {
  display: block; font-family: var(--mono); font-size: clamp(30px, 3.2vw, 40px); font-weight: 400;
  letter-spacing: -.03em; line-height: 1;
  background: var(--grad); -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
.stat-rail span { display: block; font-size: 13.5px; line-height: 1.5; color: var(--soft); margin-top: 8px; }

/* ---- split: copy one side, an object the other ------------------------- */
.hero-sp { position: relative; padding: clamp(44px, 6vw, 80px) 0 clamp(20px, 3vw, 40px); }
.hero-sp::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(46% 60% at 78% 40%, rgba(91,75,255,.14), transparent 68%);
}
.hero-sp > .wrap { position: relative; z-index: 2; }
.hero-sp .sp-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,.9fr); gap: 64px; align-items: center; }
.hero-sp h1 { margin: 18px 0 0; font-size: clamp(38px, 4.9vw, 62px); font-weight: 400; letter-spacing: -.024em; line-height: 1.06; }
.hero-sp .lede { margin-top: 22px; font-size: clamp(16.5px, 1.5vw, 19px); line-height: 1.55; color: var(--soft); }
.hero-sp .ctas { margin-top: 28px; display: flex; gap: 12px; flex-wrap: wrap; }

/* the agent ring: six marks orbiting Helix, no labels */
.ring-art { position: relative; width: 100%; aspect-ratio: 1; max-width: 460px; margin-inline: auto; }
.ring-art .orbit-line { position: absolute; inset: 12%; border: 1px dashed rgba(91,75,255,.28); border-radius: 50%; }
.ring-art .orbit-line.two { inset: 26%; border-style: solid; border-color: rgba(43,78,255,.12); }
.ring-art .spin { position: absolute; inset: 0; animation: ckOrbit 46s linear infinite; }
.ring-art .c-node {
  position: absolute; width: 74px; height: 74px;
  border-radius: 50%; background: var(--paper-2); border: 1px solid var(--line);
  box-shadow: var(--sh-card); display: grid; place-items: center;
  transform: translate(-50%, -50%);
  animation: ckOrbitBack 46s linear infinite;
}
@keyframes ckOrbitBack { to { transform: translate(-50%, -50%) rotate(-360deg); } }
.ring-art .c-node .mark { width: 34px; height: 34px; }
.ring-art .c-core {
  position: absolute; left: 50%; top: 50%; width: 116px; height: 116px; transform: translate(-50%, -50%);
  border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(140deg, rgba(43,78,255,.14), rgba(139,92,246,.12));
  border: 1px solid rgba(91,75,255,.28);
}
.ring-art .c-core::before {
  content: ""; position: absolute; inset: -26px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(91,75,255,.22), transparent 70%);
  animation: ckBreath 7s ease-in-out infinite;
}
.ring-art .c-core .mark { width: 54px; height: 54px; position: relative; }

/* ---- compact: a utility page gets straight to the point ---------------- */
.hero-cp { position: relative; padding: clamp(40px, 5vw, 68px) 0 0; text-align: center; }
.hero-cp::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 380px; pointer-events: none;
  background: radial-gradient(46% 70% at 50% 0%, rgba(91,75,255,.12), transparent 70%);
}
.hero-cp > * { position: relative; z-index: 2; }
.hero-cp h1 { margin: 16px auto 0; max-width: 20ch; font-size: clamp(34px, 4.1vw, 52px); font-weight: 400; letter-spacing: -.024em; line-height: 1.08; }
.hero-cp .lede { margin: 18px auto 0; max-width: 620px; font-size: 17.5px; line-height: 1.55; color: var(--soft); }
.hero-cp .note { margin-top: 14px; font-size: 13px; color: var(--faint); }

/* ---- manifesto: one very large statement, nothing else ----------------- */
.hero-mf { position: relative; padding: clamp(56px, 9vw, 120px) 0 clamp(30px, 4vw, 56px); }
.hero-mf::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(44% 60% at 76% 16%, rgba(232,98,60,.09), transparent 66%),
              radial-gradient(46% 62% at 14% 40%, rgba(43,78,255,.10), transparent 68%);
}
.hero-mf > .wrap { position: relative; z-index: 2; }
.hero-mf h1 {
  margin: 22px 0 0; font-size: clamp(38px, 6.1vw, 84px); font-weight: 400;
  letter-spacing: -.03em; line-height: 1.02; max-width: 17ch;
}
.hero-mf .sig { margin-top: 40px; display: flex; align-items: center; gap: 16px; font-size: 14px; color: var(--soft); flex-wrap: wrap; }
.hero-mf .sig .line { flex: 1; min-width: 40px; height: 1px; background: var(--line); }

/* ---- an alternating roster instead of a grid of equal cards ------------ */
.agent-rows { margin-top: 30px; border-top: 1px solid var(--line); }
.agent-row {
  display: grid; grid-template-columns: 260px minmax(0,1fr); gap: 56px;
  padding: 40px 0; border-bottom: 1px solid var(--line); align-items: start;
}
.agent-row:nth-child(even) { grid-template-columns: minmax(0,1fr) 260px; }
.agent-row:nth-child(even) .ar-id { order: 2; }
.agent-row:nth-child(even) .ar-body { order: 1; }
.ar-id { display: flex; align-items: center; gap: 16px; }
.ar-id .mark { width: 46px; height: 46px; }
.ar-id b { display: block; font-family: var(--display); font-size: 24px; font-weight: 500; letter-spacing: -.018em; }
.ar-id small { display: block; font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--brand); margin-top: 4px; }
.ar-body p { font-size: 16.5px; line-height: 1.6; color: var(--soft); max-width: 60ch; }
.ar-body .does { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 6px; }
.ar-body .does span { font-size: 12px; font-weight: 600; color: var(--soft); background: var(--mist); border-radius: 999px; padding: 5px 11px; }

@media (max-width: 1000px) {
  .hero-ed .ed-grid, .hero-sp .sp-grid { grid-template-columns: minmax(0,1fr); gap: 40px; }
  .stat-rail { flex-direction: row; border-left: 0; border-top: 1px solid var(--line); padding: 24px 0 0; gap: 32px; }
  .agent-row, .agent-row:nth-child(even) { grid-template-columns: minmax(0,1fr); gap: 20px; }
  .agent-row:nth-child(even) .ar-id, .agent-row:nth-child(even) .ar-body { order: 0; }
}
@media (prefers-reduced-motion: reduce) { .ring-art .spin, .ring-art .c-node, .ring-art .c-core::before { animation: none; } }

/* ==========================================================================
   36. the accent becomes gold
   --------------------------------------------------------------------------
   Clay read as alarm, which is wrong for a brand mark. Gold carries warmth,
   optimism and growth, and it sits better against ultramarine on a bone
   ground. Red is now reserved for genuine heat -- a hot lead, an overdue
   task, a problem statement -- so the two never get confused.
   ========================================================================== */
:root {
  --gold:      #F5A300;
  --gold-deep: #B57708;
  --gold-soft: #FFC24D;
  --gold-wash: #FEF4E0;
  --clay:      var(--gold);
  --clay-deep: var(--gold-deep);
  --clay-wash: var(--gold-wash);
}
.dark {
  --gold:      #FFC24D;
  --gold-deep: #FFD489;
  --gold-wash: rgba(245,163,0,.16);
}

/* the mark, the wordmark and the announcement pulse all take the gold */
.brand-text span, .dark .brand-text span { color: var(--gold-deep); -webkit-text-fill-color: var(--gold-deep); }
.tag { color: var(--gold-deep); background: var(--gold-wash); }
.topbar .dot { background: var(--gold); }
@keyframes ckBeaconClay {
  0%   { box-shadow: 0 0 0 0 rgba(245,163,0,.6); }
  70%  { box-shadow: 0 0 0 8px rgba(245,163,0,0); }
  100% { box-shadow: 0 0 0 0 rgba(245,163,0,0); }
}

/* red stays semantic: heat, urgency, the problem half of a gap card */
.gap .n { color: #C0431F; }
.dark .gap .n { color: #FF8C66; }
.pill.hot { background: #FDEDE7; color: #C0431F; }
.dark .pill.hot { background: rgba(255,120,105,.16); color: #FF8C66; }
.tile.r { border-left-color: #C0431F; }
.rag.red { border-color: rgba(192,67,31,.34); background: linear-gradient(135deg, rgba(192,67,31,.12), rgba(192,67,31,.04)); }

/* the ribbon resolves into gold rather than rust */
.hero-ed::before {
  background:
    radial-gradient(50% 60% at 84% 6%, rgba(91,75,255,.13), transparent 66%),
    radial-gradient(40% 52% at 8% 30%, rgba(245,163,0,.09), transparent 66%);
}
.hero-mf::before {
  background: radial-gradient(44% 60% at 76% 16%, rgba(245,163,0,.12), transparent 66%),
              radial-gradient(46% 62% at 14% 40%, rgba(43,78,255,.10), transparent 68%);
}
.hero::before {
  background:
    radial-gradient(46% 62% at 80% 10%, rgba(91,75,255,.13), transparent 68%),
    radial-gradient(44% 58% at 16% 26%, rgba(43,78,255,.12), transparent 68%),
    radial-gradient(40% 46% at 52% 0%, rgba(245,163,0,.09), transparent 70%);
}
.dark::before {
  background:
    radial-gradient(58% 46% at 12% 0%, rgba(43,78,255,.22), transparent 62%),
    radial-gradient(52% 44% at 88% 6%, rgba(139,92,246,.16), transparent 60%),
    radial-gradient(48% 42% at 64% 100%, rgba(245,163,0,.12), transparent 62%);
}

/* ==========================================================================
   37. quieter headlines, more air
   --------------------------------------------------------------------------
   The display sizes were set for a grotesque and carried straight over to a
   serif, which reads considerably larger at the same measure. Everything comes
   down roughly a fifth, line-height opens, and the space around each headline
   grows so the page breathes instead of shouting.
   ========================================================================== */
.hero h1        { font-size: clamp(36px, 4.3vw, 60px); line-height: 1.1; margin-top: 26px; max-width: 17ch; }
.hero-eyebrow   { font-size: 11px; letter-spacing: .22em; }
.hero-sub       { font-size: clamp(16.5px, 1.35vw, 18.5px); line-height: 1.62; max-width: 560px; margin-top: 28px; }
.hero-ctas      { margin-top: 34px; }
.hero-note      { margin-top: 20px; font-size: 12.5px; }
.hero-script    { height: 66px; margin-top: 14px; }
.hero-script text { font-size: 28px; }

.page-hero h1   { font-size: clamp(30px, 3.7vw, 48px); line-height: 1.14; margin-top: 22px; max-width: 19ch; }
.page-hero .lede{ font-size: clamp(16.5px, 1.35vw, 18.5px); line-height: 1.62; margin-top: 22px; max-width: 580px; }

.hero-ed h1     { font-size: clamp(32px, 4.0vw, 54px); line-height: 1.1; max-width: 16ch; margin-top: 22px; }
.hero-ed .lede  { font-size: clamp(16.5px, 1.35vw, 18.5px); line-height: 1.62; max-width: 50ch; margin-top: 26px; }
.hero-ed .ed-grid { gap: 80px; }
.stat-rail b    { font-size: clamp(26px, 2.6vw, 34px); }
.stat-rail span { font-size: 13px; }

.hero-sp h1     { font-size: clamp(30px, 3.6vw, 48px); line-height: 1.12; margin-top: 22px; }
.hero-sp .lede  { font-size: clamp(16px, 1.3vw, 18px); line-height: 1.62; margin-top: 24px; max-width: 46ch; }

.hero-mf h1     { font-size: clamp(32px, 4.5vw, 62px); line-height: 1.1; max-width: 19ch; margin-top: 26px; }
.hero-mf .sig   { margin-top: 44px; }

.hero-cp h1     { font-size: clamp(28px, 3.3vw, 42px); line-height: 1.16; margin-top: 20px; max-width: 22ch; }
.hero-cp .lede  { font-size: 17px; line-height: 1.62; margin-top: 20px; max-width: 560px; }

.head h2        { font-size: clamp(26px, 3.2vw, 39px); line-height: 1.18; }
.head .lede     { font-size: clamp(16px, 1.3vw, 18px); line-height: 1.65; max-width: 620px; }
.head           { gap: 18px; }
.head.center    { max-width: 720px; }
.cta h2         { font-size: clamp(28px, 3.6vw, 44px); line-height: 1.14; max-width: 20ch; }
.cta p          { font-size: 16.5px; line-height: 1.62; max-width: 520px; margin-top: 24px; }
.cta            { padding-top: clamp(84px, 12vw, 140px); }

.gap h3         { font-size: 20px; line-height: 1.28; }
.gap .p > p     { font-size: 14.5px; line-height: 1.62; }
.gap .fix p     { font-size: 14.5px; line-height: 1.62; }
.b h3           { font-size: 18.5px; }
.agent h3       { font-size: 19px; }
.ar-id b        { font-size: 21px; }
.ar-body p      { font-size: 15.5px; line-height: 1.65; }
.plan h3        { font-size: 24px; }
.quote blockquote { font-size: clamp(19px, 2.0vw, 25px); line-height: 1.42; }
.rail .r b      { font-size: 17.5px; }
.rail .r p      { font-size: 13.5px; line-height: 1.6; }
.surface .hd b  { font-size: 17px; }
.surface p      { font-size: 14px; line-height: 1.62; }
.article-hero h1 { font-size: clamp(30px, 3.7vw, 46px); line-height: 1.2; }

@media (max-width: 640px) {
  .hero h1, .page-hero h1, .hero-ed h1, .hero-sp h1, .hero-mf h1 { max-width: none; }
}

/* ==========================================================================
   38. landing pass — carrying the hero's warmth through the page
   --------------------------------------------------------------------------
   Below the hero the page went cold: pure-white cards and lavender tints on a
   warm bone ground, which read as two different sites stacked. Every surface
   is warmed here, the tints pick up a little of the paper they sit on, and
   gold appears at the same points the ribbon resolves — so the page finishes
   the sentence the hero starts.
   ========================================================================== */
:root {
  --paper-2: #FFFDF9;          /* cards: warm white, never #FFF on bone */
  --paper-3: #FFFFFF;          /* reserved for product UI, which should stay crisp */
  --mist:    #F5F2EA;
  --line:    #E7E2D6;
  --line-2:  #F0ECE2;
  --tint:    linear-gradient(135deg, rgba(43,78,255,.07), rgba(139,92,246,.05) 55%, rgba(245,163,0,.05));
  --tint-2:  linear-gradient(135deg, rgba(43,78,255,.10), rgba(139,92,246,.07));
}

/* the product mockups keep a crisp white so they read as software */
.shot, .mini, table.t, table.lt, .side, .pane, .cardx, .kpi, .tile, .phone { background-color: var(--paper-3); }
.chrome { background: #F7F5F0; }

/* every tinted panel now sits in the same warm family */
.gap .fix { background: var(--tint); }
.helix { background: var(--tint-2); }
.stack .tier.spine { background: var(--tint-2); }
.nav-feature { background: linear-gradient(160deg, rgba(43,78,255,.10), rgba(139,92,246,.08) 58%, rgba(245,163,0,.08)); }
.shift .row .to { background: linear-gradient(90deg, rgba(43,78,255,.08), rgba(245,163,0,.05)); }
.plan.feature { background: linear-gradient(170deg, rgba(43,78,255,.05), transparent 46%); }

/* a hairline of gold under each section head ties the page to the ribbon */
.head .kicker { position: relative; display: inline-flex; align-items: center; gap: 10px; }
.head .kicker::before {
  content: ""; width: 18px; height: 2px; border-radius: 2px; background: var(--gold); flex: 0 0 auto;
}
.head.center .kicker { justify-content: center; }
.dark .head .kicker::before { background: var(--gold); }

/* product shots need air at the edges on a laptop-width screen */
.stage, .frame { padding-left: var(--gut); padding-right: var(--gut); }
.stage .float, .frame .float { z-index: 4; }

/* ------------------------------------------------- hero actions, unweighted */
.hero-acts { margin-top: 36px; display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; }
.hero-act {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 8px 20px 8px 8px; border-radius: 999px;
  color: var(--ink); border: 1px solid transparent;
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
.hero-act .ico {
  width: 44px; height: 44px; border-radius: 50%; flex: 0 0 auto;
  display: grid; place-items: center;
  background: var(--paper-2); border: 1px solid var(--line);
  box-shadow: 0 1px 2px rgba(11,18,32,.05), 0 8px 20px -12px rgba(11,18,32,.24);
  transition: box-shadow .2s ease, border-color .2s ease, transform .2s ease;
}
.hero-act .ico svg { width: 19px; height: 19px; fill: none; stroke: url(#actGrad); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.hero-act .lab { font-size: 16px; font-weight: 500; letter-spacing: -.01em; }
.hero-act .lab small { display: block; font-size: 12.5px; font-weight: 400; color: var(--faint); margin-top: 2px; }
.hero-act:hover { border-color: var(--line); background: var(--paper-2); }
.hero-act:hover .ico { transform: translateY(-1px); border-color: rgba(91,75,255,.4); box-shadow: 0 1px 2px rgba(11,18,32,.05), 0 12px 26px -12px rgba(43,78,255,.4); }
.hero-act.is-primary .ico { background: var(--grad-135); border-color: transparent; }
.hero-act.is-primary .ico svg { stroke: #fff; }
@media (max-width: 640px) {
  .hero-acts { flex-direction: column; align-items: stretch; gap: 8px; }
  .hero-act { justify-content: flex-start; border-color: var(--line); background: var(--paper-2); }
}

/* --------------------------------------------- the loop diagram, corrected */
/* the halo carried .pulse-node, whose keyframes overrode its .12 opacity and
   turned a soft glow into a solid blob behind each icon */
.loop-svg .halo { opacity: .14; animation: ckHaloBreath 3.2s ease-in-out infinite; }
@keyframes ckHaloBreath {
  0%, 100% { opacity: .10; transform: scale(.94); }
  50%      { opacity: .2;  transform: scale(1); }
}
.loop-svg .halo { transform-box: fill-box; transform-origin: center; }
.loop-svg .ico { stroke-width: 2.6; }
.loop-svg .box { fill: var(--paper-2); stroke: var(--line); }
.loop-svg .box-on { stroke: rgba(245,163,0,.42); }
.loop-svg .n-lab { fill: var(--faint); }
.loop-svg .arc { stroke: rgba(245,163,0,.55); }
.loop-svg .arc-lab { fill: var(--gold-deep); }
.loop-svg .arc-lab-bg { fill: var(--mist); }
#loopBoxOn stop:first-child { stop-color: #F5A300; }
#loopBoxOn stop:last-child { stop-color: #FFC24D; }

/* --------------------------------------------------------- bento at 2-col */
/* A `wide` card spanning two of two columns leaves a hole beside the single
   card above it. Below the three-column breakpoint every card is one column. */
@media (max-width: 1180px) {
  .bento { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .b.wide { grid-column: span 1; }
}

/* ------------------------------------------------- placeholder case cards */
.case.placeholder {
  border-style: dashed; border-color: var(--line);
  background: transparent; box-shadow: none;
  align-items: center; justify-content: center; text-align: center;
  color: var(--faint); font-size: 13.5px; gap: 8px; padding: 40px 28px;
}
.case.placeholder b { font-family: var(--display); font-size: 17px; font-weight: 500; color: var(--soft); }
.case.placeholder .slot {
  width: 40px; height: 40px; border-radius: 12px; border: 1px dashed var(--line);
  display: grid; place-items: center; margin-bottom: 4px;
}
.case.placeholder .slot svg { width: 17px; height: 17px; fill: none; stroke: var(--faint); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.case.placeholder:hover { transform: none; box-shadow: none; border-color: var(--faint); }

/* the outcome figures pick up the gold, matching where the ribbon lands */
.case .kv div b { color: var(--gold-deep); }

/* ==========================================================================
   39. one kicker treatment, and no repeated openings
   --------------------------------------------------------------------------
   The gold hairline was scoped to `.head .kicker`, so every page-hero kicker
   rendered without it and the same label looked like two different components
   on one screen. It is now a property of the kicker itself, suppressed only
   inside cards where a rule beside a small label reads as noise.

   The second half of this: a centred hero followed immediately by a centred
   section head is the same block twice, with a void between them. Pages that
   did that now drop into a compact lead-in instead.
   ========================================================================== */
.kicker { display: inline-flex; align-items: center; gap: 10px; }
.kicker::before {
  content: ""; width: 18px; height: 2px; border-radius: 2px;
  background: var(--gold); flex: 0 0 auto;
}
/* card-level labels stay bare */
.cardx .kicker::before,
.b .kicker::before,
.case .kicker::before,
.plan .n::before { display: none; }
.hero-eyebrow::before { display: none; }   /* the wordmark eyebrow is not a section label */

/* --------------------------------------------------------- the lead-in ---- */
.lead-in {
  max-width: 660px; margin: 0 auto; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.lead-in p {
  font-size: clamp(17px, 1.45vw, 19.5px); line-height: 1.6; color: var(--soft);
  font-family: var(--sans);
}
.lead-in p b { color: var(--ink); font-weight: 600; }

/* a compact hero should sit close to what follows it */
.hero-cp + .sec, .hero-cp + .sec-alt { padding-top: clamp(44px, 6vw, 72px); }
.hero-cp + .sec-alt { margin-top: clamp(48px, 7vw, 84px); }
.page-hero + .sec { padding-top: clamp(48px, 7vw, 84px); }

/* -------------------------------------- the agentic system strip ---------- */
.marquee + .marquee { margin-top: 12px; }
.marquee.reverse .track { animation-direction: reverse; }
.logo-row .lg .mark { width: 22px; height: 22px; margin: 0; flex: 0 0 auto; }
.logo-row .lg.cap {
  font-family: var(--sans); font-size: 13.5px; font-weight: 500; color: var(--soft);
  height: 44px; padding: 0 16px; background: transparent;
}
.logo-row .lg.cap i {
  width: 5px; height: 5px; border-radius: 50%; background: var(--gold); flex: 0 0 auto;
}
.logos p { display: flex; align-items: center; justify-content: center; gap: 10px; }
.logos p::before, .logos p::after {
  content: ""; width: 18px; height: 2px; border-radius: 2px; background: var(--gold);
}

/* -------------------------------- the system strip, tinted --------------- */
/* Neutral pills made the strip read as filler. The colour is kept quiet: a
   tinted well behind each agent mark, a whisper of brand in the border, and
   the capability dots stepping through the spectrum so the row reads as one
   run of current rather than fourteen identical chips. */
.logos .lg {
  background: linear-gradient(180deg, #FFFFFF, var(--paper-2));
  border-color: rgba(91,75,255,.16);
  box-shadow: 0 1px 2px rgba(11,18,32,.04);
  color: var(--ink); font-weight: 600;
}
.logos .lg .mark {
  width: 30px; height: 30px; padding: 5px; border-radius: 50%;
  background: var(--wash); box-sizing: border-box;
}
.logos .lg span { font-weight: 450; }

.logos .lg.cap {
  background: rgba(255,255,255,.55);
  border-color: rgba(11,18,32,.07);
  box-shadow: none; font-weight: 500; color: var(--soft);
}
.logos .lg.cap i { width: 6px; height: 6px; }
.logos .lg.cap:nth-child(4n+1) i { background: var(--brand); }
.logos .lg.cap:nth-child(4n+2) i { background: var(--indigo); }
.logos .lg.cap:nth-child(4n+3) i { background: var(--violet); }
.logos .lg.cap:nth-child(4n+4) i { background: var(--gold); }
.logos .lg.cap:hover { border-color: rgba(91,75,255,.24); background: #fff; }

/* the label picks up the brand, not plain grey */
.logos p { color: var(--brand); letter-spacing: .16em; }
.logos p::before, .logos p::after { background: var(--gold); opacity: .8; }

/* a soft wash behind the whole strip so it sits as a band, not floating chips */
.logos { position: relative; }
.logos::before {
  content: ""; position: absolute; inset: 18% -10% 6%; pointer-events: none; z-index: -1;
  background: radial-gradient(50% 60% at 50% 50%, rgba(91,75,255,.07), transparent 72%);
}

/* ==========================================================================
   40. touch targets
   --------------------------------------------------------------------------
   Audited at 320/360/375/393/412/430/768 across every page: no horizontal
   overflow anywhere, but a dozen links sat well under the 44px Apple asks for
   and the 48dp Android asks for. Where the layout must not move, the hit area
   is grown with padding and pulled back with a matching negative margin, so
   nothing shifts visually. Scoped to coarse pointers, so the desktop cursor
   experience is untouched.
   ========================================================================== */
@media (pointer: coarse), (max-width: 820px) {
  /* announcement bar link: 13px tall */
  .topbar a { padding: 13px 6px; margin: -13px -6px; }

  /* the lockups: 30px tall */
  .brand { padding: 8px 4px; margin: -8px -4px; }
  .footer-brand { padding: 9px 4px; margin: -9px -4px; }

  /* Android wants 48dp; the toggle was 42 */
  .menu-toggle { width: 46px; height: 46px; }

  /* small buttons anywhere on the page */
  .btn-sm { min-height: 44px; padding-top: 0; padding-bottom: 0; }
  .blog-filters button { min-height: 44px; }

  /* the live phone numbers are the most important taps on the site */
  .footer-live a { padding: 13px 0; margin: -6px 0; }
  .footer-col a { padding: 11px 0; }
  .footer-bar a { padding: 10px 0; display: inline-block; }

  /* prose and card links */
  .article-back, .post .more, .lead-in a, .head .lede a, .cta .fine a {
    display: inline-flex; align-items: center; padding: 12px 2px; margin: -12px -2px;
  }
  .nav-link { min-height: 48px; }
  .mobile-nav a { min-height: 50px; display: flex; align-items: center; }
  .faq summary { padding-top: 24px; padding-bottom: 24px; }
  .rail a.r, .logo-row a { min-height: 44px; }
}

/* the three figures alongside an editorial hero were cramped on a phone */
@media (max-width: 620px) {
  .stat-rail { flex-wrap: wrap; gap: 22px 28px; }
  .stat-rail > div { flex: 1 1 100%; }
}

/* iOS: stop Safari inflating type in landscape, and keep taps from lagging */
@media (pointer: coarse), (max-width: 820px) {
  html { -webkit-text-size-adjust: 100%; }
  a, button, summary { -webkit-tap-highlight-color: rgba(43,78,255,.12); touch-action: manipulation; }
}

/* The seventh gap runs full width on a two-column grid. As an inline style it
   also applied at one column, where `span 2` invents an implicit second column
   and leaves a tall empty gutter beside every card. */
.gap-wide { grid-column: span 2; }
@media (max-width: 900px) { .gap-wide { grid-column: auto; } }

/* every hero's action group behaves like the home page's on a phone */
@media (max-width: 640px) {
  .hero-ed .ctas, .hero-sp .ctas, .page-hero .ctas, .hero-cp .ctas, .cta .ctas {
    flex-direction: column; align-items: stretch; width: 100%;
  }
  .hero-ed .ctas .btn, .hero-sp .ctas .btn, .page-hero .ctas .btn,
  .hero-cp .ctas .btn, .cta .ctas .btn { width: 100%; min-height: 50px; }
  .hero-mf .sig { flex-direction: column; align-items: stretch; gap: 18px; }
  .hero-mf .sig .line { display: none; }
  .hero-mf .sig .btn { width: 100%; min-height: 50px; }
  .helix { flex-direction: column; align-items: flex-start; gap: 16px; }
  .helix .btn { width: 100%; min-height: 48px; }
}

/* the platform anchor rail scrolls sideways on a phone; show that it does */
@media (max-width: 820px) {
  .rail-nav { position: relative; }
  .rail-nav::after {
    content: ""; position: absolute; right: 0; top: 0; bottom: 1px; width: 44px;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(251,250,247,0), var(--paper) 78%);
  }
  .rail-nav .inner { scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
  .rail-nav a { scroll-snap-align: start; }
}

/* ==========================================================================
   41. MOBILE — a layout of its own, not a stacked desktop
   --------------------------------------------------------------------------
   Measured at 360px: the homepage ran 20,664px (27 screens), Real Estate
   18,486px. The cause is structural — every card group that sits three or four
   across on a desktop stacks on a phone and multiplies its height. Seven gap
   cards alone were 3,305px.

   So on a phone those groups stop stacking and become horizontal snap rails.
   Cards are 84% wide, so the next one peeks and the swipe is self-evident with
   no instruction label. The content is untouched; only the axis changes.
   ========================================================================== */
@media (max-width: 760px) {
  .gaps, .agents, .cases, .bento, .surfaces, .trust, .rail,
  .metrics, .people, .posts, .plans, .loop-legend {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 84%;
    grid-template-columns: none;
    grid-template-columns: none !important;   /* several rails carry an inline
       grid-template-columns for their desktop column count; without this the
       inline style wins and the cards squash instead of railing */
    gap: 14px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 4px var(--gut) 18px;
    margin-inline: calc(var(--gut) * -1);
    border: 0; background: none; border-radius: 0;
  }
  .gaps::-webkit-scrollbar, .agents::-webkit-scrollbar, .cases::-webkit-scrollbar,
  .bento::-webkit-scrollbar, .surfaces::-webkit-scrollbar, .trust::-webkit-scrollbar,
  .rail::-webkit-scrollbar, .metrics::-webkit-scrollbar, .people::-webkit-scrollbar,
  .posts::-webkit-scrollbar, .plans::-webkit-scrollbar, .loop-legend::-webkit-scrollbar { display: none; }

  .gaps > *, .agents > *, .cases > *, .bento > *, .surfaces > *, .trust > *,
  .rail > *, .metrics > *, .people > *, .posts > *, .plans > *, .loop-legend > * {
    scroll-snap-align: center;
    min-width: 0;
  }

  /* the hairline grids need real card edges once they are separated */
  .agents > .agent, .metrics > .metric {
    border: 1px solid var(--line); border-radius: var(--r-lg);
    background: var(--paper-2); box-shadow: var(--sh-card);
  }
  .gap, .b, .case, .surface, .trust .t, .rail .r, .plan, .person, .post {
    height: 100%;
  }
  .b, .b.wide { grid-column: auto; min-height: 0; }
  .loop-legend > p {
    background: var(--paper-2); border: 1px solid var(--line);
    border-radius: var(--r-md); padding: 16px 18px;
  }

  /* position indicator under each rail */
  .rail-dots { display: flex; justify-content: center; gap: 6px; margin-top: 2px; }
  .rail-dots i {
    width: 6px; height: 6px; border-radius: 99px; background: var(--line);
    transition: width .28s cubic-bezier(.2,.7,.3,1), background .28s ease;
  }
  .rail-dots i.on { width: 20px; background: var(--brand); }
  .dark .rail-dots i { background: rgba(255,255,255,.18); }
  .dark .rail-dots i.on { background: #8AA0FF; }

  /* tighter vertical rhythm; a phone does not need desktop air */
  .sec { padding-top: clamp(52px, 12vw, 68px); }
  .sec-alt { padding: clamp(52px, 12vw, 68px) 0; margin-top: clamp(52px, 12vw, 68px); }
  .head { gap: 14px; }
  .head .lede { font-size: 16px; }
  .cta { padding-top: clamp(64px, 14vw, 88px); }
}

/* ---- the architecture stack: one scrollable row per tier ---------------- */
/* Stacked, five tiers of wrapping chips ran 1,925px. As one swipeable row per
   tier it is a fifth of that and the tiers stay comparable side by side. */
@media (max-width: 760px) {
  .stack { border-radius: var(--r-lg); }
  .stack .tier { grid-template-columns: minmax(0,1fr); gap: 12px; padding: 18px 0 18px 18px; }
  .stack .units {
    flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity;
    padding-right: 18px; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .stack .units::-webkit-scrollbar { display: none; }
  .stack .u { flex: 0 0 auto; scroll-snap-align: start; }
  .stack .tier .lab { font-size: 10.5px; }
  .stack .tier .lab b { font-size: 15px; margin-top: 3px; }
}

/* ---- product shots: readable, not shrunk to mush ----------------------- */
/* 215 elements were rendering under 12px because a 1,180px console was being
   squeezed into 360. The shot now scrolls inside its own frame at natural
   size, so the UI stays legible and the reader explores it by swiping. */
@media (max-width: 760px) {
  .stage, .frame { padding-left: 0; padding-right: 0; }
  .shot {
    overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; border-radius: 0; border-left: 0; border-right: 0;
  }
  .shot::-webkit-scrollbar { display: none; }
  .shot > .console, .shot > .app { min-width: 660px; }
  .shot > .console > .pageshot { min-width: 660px; }
  .mini .app { min-width: 0; }
  /* the columns hidden at 640 can come back now there is room to scroll */
  table.lt th:nth-child(3), table.lt td:nth-child(3),
  table.lt th:nth-child(5), table.lt td:nth-child(5) { display: table-cell; }
  table.lt { margin: 12px 0 0; width: 100%; border-radius: 12px; border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
  .ph .srch, .ph .nb { display: flex; }
  .shot-hint {
    display: flex; align-items: center; justify-content: center; gap: 7px;
    margin-top: 12px; font-family: var(--mono); font-size: 10.5px;
    letter-spacing: .12em; text-transform: uppercase; color: var(--faint);
  }
  .shot-hint svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; animation: ckNudge 2.4s ease-in-out infinite; }
  @keyframes ckNudge { 0%,100% { transform: translateX(0); opacity: .55; } 50% { transform: translateX(4px); opacity: 1; } }
}
@media (min-width: 761px) { .shot-hint { display: none; } }

/* ---- sticky action bar ------------------------------------------------- */
.m-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  display: none; align-items: center; gap: 10px;
  padding: 10px var(--gut) calc(10px + env(safe-area-inset-bottom));
  background: rgba(251,250,247,.92);
  -webkit-backdrop-filter: blur(18px) saturate(180%); backdrop-filter: blur(18px) saturate(180%);
  border-top: 1px solid var(--line);
  transform: translateY(105%); transition: transform .32s cubic-bezier(.2,.7,.3,1);
}
.m-bar[data-show] { transform: none; }
.m-bar .btn { flex: 1; min-height: 48px; }
.m-bar-alt {
  width: 48px; height: 48px; border-radius: 999px; flex: 0 0 auto;
  display: grid; place-items: center;
  border: 1px solid var(--line); background: var(--paper-2); color: var(--ok);
}
.m-bar-alt svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 760px) {
  .m-bar { display: flex; }
  body { padding-bottom: 0; }
  .site-footer { padding-bottom: 72px; }
}

/* ---- side-by-side comparisons stay side by side ------------------------ */
/* "Traditional CRM vs Clikin", "Campaign A vs B", "You own vs We run" are
   comparisons. Stacked they both double in height and lose the point, so they
   become two-card rails the reader swipes between. Scoped to section-level
   grids; the ones inside product mockups are left alone. */
@media (max-width: 760px) {
  .wrap > .g2, .wrap > .g3 {
    display: grid; grid-auto-flow: column; grid-auto-columns: 86%;
    grid-template-columns: none !important; gap: 14px;
    overflow-x: auto; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
    padding: 4px var(--gut) 18px; margin-inline: calc(var(--gut) * -1);
  }
  .wrap > .g2::-webkit-scrollbar, .wrap > .g3::-webkit-scrollbar { display: none; }
  .wrap > .g2 > *, .wrap > .g3 > * { scroll-snap-align: center; height: 100%; min-width: 0; }

  .split, .split.flip, .split.narrow { gap: 26px; margin-top: 32px; }
  .quote { padding: 22px; }
  .shift .row > div { padding: 13px 16px; }
  .loop .node { padding: 16px 16px 18px; }

  /* the thread makes its point in five messages, not seven */
  .phone .thread .msg:nth-child(3),
  .phone .thread .msg:nth-child(4) { display: none; }
}

/* ---- reading progress -------------------------------------------------- */
/* These pages are a long argument. On a phone that argument is 18-20 screens,
   so the reader gets a hairline showing how much is left. Desktop has the
   scrollbar for this; a phone does not. */
.progress {
  position: fixed; left: 0; top: 0; height: 2px; z-index: 80;
  width: 0; background: var(--grad); pointer-events: none;
  transition: width .1s linear; display: none;
}
@media (max-width: 760px) { .progress { display: block; } }
@media (prefers-reduced-motion: reduce) { .progress { transition: none; } }

/* ---- the digital-share bar --------------------------------------------- */
.share-bar {
  display: flex; height: 46px; border-radius: 12px; overflow: hidden;
  font-family: var(--mono); font-size: 12px; font-weight: 500;
}
.share-bar .sb-fill {
  display: grid; place-items: center; color: #fff; letter-spacing: .02em;
  min-width: 0; padding: 0 6px;
}
.share-bar .sb-rest {
  flex: 1; display: grid; place-items: center; min-width: 0; padding: 0 10px;
  background: var(--mist); color: var(--soft);
  font-family: var(--sans); font-size: 12px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.share-bar + .share-bar { margin-top: 10px; }
@media (max-width: 760px) {
  /* the bar exists to show a proportion, so it stays horizontal; only the
     label gets smaller, and truncates rather than breaking the shape */
  .share-bar { height: 42px; }
  .share-bar .sb-fill { font-size: 11px; padding: 0 4px; }
  .share-bar .sb-rest { font-size: 11px; padding: 0 8px; }
}

/* ---- the people, with their faces -------------------------------------- */
/* Portraits rather than initials. Served as WebP with a JPEG fallback, both
   cropped square at 400px: 92KB for the pair, against 1.86MB for the two
   originals the old page shipped at full size. */
.person .hd .mug {
  position: relative; display: block; flex: 0 0 auto;
  width: 68px; height: 68px; border-radius: 50%;
  background: var(--grad-135); padding: 2px;
}
.person .hd .mug img {
  display: block; width: 100%; height: 100%;
  border-radius: 50%; object-fit: cover;
  background: var(--mist);
  border: 2px solid var(--paper-2);
}
.person .hd { gap: 16px; }
.dark .person .hd .mug img { border-color: var(--paper-2); }
@media (max-width: 760px) {
  .person .hd .mug { width: 60px; height: 60px; }
}

/* ==========================================================================
   42. mobile fixes from real-device testing
   ========================================================================== */
@media (max-width: 760px) {

  /* --- 1. rails were opening on card two -------------------------------- */
  /* `scroll-snap-align: center` cannot centre the first card without a
     negative scroll offset, so the browser silently snapped to the next valid
     point. Every rail opened mid-scroll with a sliced card on the left.
     Aligning to the start, with scroll padding matching the page gutter,
     puts card one flush at the margin and lets the next one peek. */
  .gaps, .agents, .cases, .bento, .surfaces, .trust, .rail,
  .metrics, .people, .posts, .plans, .loop-legend,
  .wrap > .g2, .wrap > .g3 {
    scroll-snap-type: x mandatory;
    scroll-padding-left: var(--gut);
    scroll-padding-right: var(--gut);
  }
  .gaps > *, .agents > *, .cases > *, .bento > *, .surfaces > *, .trust > *,
  .rail > *, .metrics > *, .people > *, .posts > *, .plans > *, .loop-legend > *,
  .wrap > .g2 > *, .wrap > .g3 > * { scroll-snap-align: start; }

  /* the trailing card needs room to sit flush at the gutter too */
  .gaps, .agents, .cases, .bento, .surfaces, .trust, .rail,
  .metrics, .people, .posts, .plans, .loop-legend { padding-right: var(--gut); }

  /* --- 2. the stack chips read as broken, not scrollable ----------------- */
  /* Scrolling each tier sideways saved height but every row ended in a chip
     sliced mid-word, which looks like a rendering fault rather than an
     invitation to swipe. The chips wrap instead. It costs some height; a
     tier that is obviously complete is worth more than a compact one that
     looks broken. */
  .stack { overflow: hidden; }
  .stack .tier { padding: 16px 18px; }
  .stack .units {
    flex-wrap: wrap; overflow-x: visible; padding-right: 0; gap: 7px;
  }
  .stack .u {
    flex: 0 1 auto; padding: 8px 12px; font-size: 12.5px; border-radius: 11px;
  }
  .stack .u small { font-size: 11.5px; }
  .stack .u img, .stack .u .mark { width: 18px; height: 18px; }

  /* --- 4. the footer ran to three full screens -------------------------- */
  .footer-grid {
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 26px 20px; padding: 40px var(--gut) 28px;
  }
  .footer-about { grid-column: 1 / -1; }
  .footer-about p { margin-top: 12px; font-size: 13.5px; max-width: none; }
  .footer-live { margin-top: 14px; gap: 4px; }
  .footer-bar { padding: 14px var(--gut) 18px; gap: 8px; font-size: 12px; }
  .site-footer { padding-bottom: 78px; }

  /* --- the velocity row in Lead Analytics was colliding ------------------ */
  .b .vis [style*="grid-template-columns:repeat(4"] {
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    gap: 6px 10px !important;
  }

  /* --- rails left a dead gap before the next section -------------------- */
  .rail-dots { margin-top: 0; }
  .sec > .wrap > .rail-dots:last-child,
  .sec-alt > .wrap > .rail-dots:last-child { margin-bottom: -14px; }
}


/* ============================================================================
   43. FOOTER — the mobile accordion
   Seventeen links stacked at 390px made the footer a thousand pixels of
   scrolling before the copyright line. On mobile the three columns collapse;
   every link is still there, one tap away. Desktop is untouched — JS opens
   them above 760px, and with JS off they stay open everywhere.
   ========================================================================= */
@media (max-width: 760px) {
  .footer-grid { padding-bottom: 6px; gap: 0 20px; }
  .footer-about { margin-bottom: 22px; }

  .footer-col { grid-column: 1 / -1; border-top: 1px solid var(--line); }
  .footer-col > summary {
    margin: 0; padding: 13px 2px; cursor: pointer;
    display: flex; align-items: center; justify-content: space-between;
    font-size: 11px; color: var(--soft);
    -webkit-tap-highlight-color: transparent;
  }
  .footer-col > summary::after {           /* the chevron */
    content: ""; width: 8px; height: 8px; margin-right: 4px;
    border-right: 1.5px solid var(--faint); border-bottom: 1.5px solid var(--faint);
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform .2s var(--ease);
  }
  .footer-col[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
  .footer-col[open] > summary { color: var(--ink); }
  .footer-col .fl { padding: 0 2px 14px; }
  .footer-col .fl a { padding: 9px 0; font-size: 14px; }

  .footer-about { grid-column: 1 / -1; }
  .footer-bar { flex-direction: row; flex-wrap: wrap; }
}