/* ============================================================
   CoworkBridge V2
   Dark to light hybrid. Bento grids, glass panels, mesh gradients,
   kinetic type, scroll driven reveals.

   Brand
   Primary    Bridge Blue   #078EF0
   Secondary  Warm Peach    #DE7356
   Tertiary   Deep Teal     #167D7F

   Readability contract
   Body copy 18px. Nothing under 15px anywhere.
   On dark, body text is rgba(255,255,255,0.78) minimum and
   headings are pure white. Body text never sits on raw glass,
   only on tinted glass, per current glassmorphism guidance.
   ============================================================ */

:root {
  /* Dark canvas */
  --ink-0: #04070d;
  --ink-1: #070c16;
  --ink-2: #0b1220;
  --ink-3: #121b2c;
  --ink-4: #1b2740;

  /* Light canvas */
  --paper: #ffffff;
  --paper-warm: #fbf8f5;
  --paper-cool: #f2f8fe;

  /* Brand */
  --blue: #078ef0;
  --blue-bright: #4fb0f7;   /* blue for text on dark */
  --blue-600: #0a72c4;      /* blue for text on light */
  --blue-700: #075894;
  --blue-050: #eef7fe;
  --blue-100: #d4eafd;

  --peach: #de7356;
  --peach-bright: #f4a184;  /* peach for text on dark */
  --peach-600: #a8462c;     /* peach for text on light */
  --peach-700: #9c3f27;     /* peach for white text to sit on */
  --peach-050: #fdf2ee;

  --teal: #167d7f;
  --teal-bright: #4fc9cb;   /* teal for text on dark */
  --teal-700: #0f5f61;
  --teal-050: #e9f4f4;

  /* Ink on light */
  --ink: #0b1220;
  --ink-muted: #46525f;
  --ink-faint: #5f6b78;
  --rule: #e2e9f1;
  --rule-strong: #c6d3e0;

  /* Ink on dark */
  --on-dark: rgba(255, 255, 255, 0.78);
  --on-dark-soft: rgba(255, 255, 255, 0.62);
  --line-dark: rgba(255, 255, 255, 0.11);
  --line-dark-strong: rgba(255, 255, 255, 0.2);

  /* Type */
  --font-display: "Bricolage Grotesque", "Segoe UI", -apple-system, sans-serif;
  --font-ui: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Scale */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-xl: 30px;
  --maxw: 1240px;
  --maxw-narrow: 900px;

  --shadow-soft: 0 2px 6px rgba(11, 18, 32, 0.05);
  --shadow-mid: 0 16px 40px rgba(11, 18, 32, 0.1);
  --shadow-deep: 0 34px 80px rgba(11, 18, 32, 0.18);
  --glow-blue: 0 0 0 1px rgba(7, 142, 240, 0.35), 0 18px 60px rgba(7, 142, 240, 0.28);
}

/* ============================================================
   Base
   ============================================================ */
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; overflow-x: clip; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 18px;
  line-height: 1.62;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
ul, ol { margin: 0; padding: 0; }
button { font-family: inherit; cursor: pointer; }
p { margin: 0; text-wrap: pretty; }
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  font-variation-settings: "wdth" 100, "opsz" 32;
  letter-spacing: -0.035em;
  line-height: 1.03;
  margin: 0;
  color: var(--ink);
  text-wrap: balance;
}

:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 4px; }
.on-ink :focus-visible { outline-color: var(--blue-bright); }

section[id] { scroll-margin-top: 100px; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 300;
  background: var(--ink-0); color: #fff; padding: 14px 20px; border-radius: 0 0 var(--r-md) 0;
}
.skip-link:focus { left: 0; }

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

/* ============================================================
   Layout
   ============================================================ */
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 34px; }
.wrap.narrow { max-width: var(--maxw-narrow); }
.wrap > * { min-width: 0; }

.sec { padding: 108px 0; position: relative; }
.sec.tight { padding: 72px 0; }
.sec.warm { background: var(--paper-warm); }
.sec.cool { background: var(--paper-cool); }

/* Dark surface with mesh bloom and grain */
.on-ink {
  background: var(--ink-1);
  color: var(--on-dark);
  position: relative;
  isolation: isolate;
}
.on-ink h1, .on-ink h2, .on-ink h3, .on-ink h4 { color: #fff; }
.on-ink .mesh {
  position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(ellipse 46% 52% at 78% 6%, rgba(7, 142, 240, 0.42), transparent 62%),
    radial-gradient(ellipse 40% 46% at 12% 88%, rgba(222, 115, 86, 0.3), transparent 64%),
    radial-gradient(ellipse 52% 40% at 46% 46%, rgba(22, 125, 127, 0.22), transparent 66%),
    linear-gradient(175deg, var(--ink-0), var(--ink-2) 55%, var(--ink-1));
}
.on-ink .grain {
  position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0.5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.22'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

/* Curved flip between dark and light */
.flip-down {
  position: relative;
  height: 96px;
  margin-top: -1px;
  background: var(--ink-1);
}
.flip-down::after {
  content: "";
  position: absolute; inset: 0;
  background: var(--paper);
  border-radius: 60% 60% 0 0 / 100% 100% 0 0;
  transform: translateY(1px);
}
.flip-up { position: relative; height: 96px; background: var(--paper); }
.flip-up::after {
  content: "";
  position: absolute; inset: 0;
  background: var(--ink-1);
  border-radius: 60% 60% 0 0 / 100% 100% 0 0;
  transform: translateY(1px);
}

/* ============================================================
   Type helpers
   ============================================================ */
.label {
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 500;
  /* Tracking eased from 0.2em when the floor went to 16px, otherwise the
     longer eyebrows wrap onto a second line and orphan the leading rule. */
  letter-spacing: 0.1em;
  line-height: 1.35;
  text-transform: uppercase;
  color: var(--teal-700);
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.label::before { content: ""; width: 26px; height: 2px; border-radius: 2px; background: var(--peach); }
.on-ink .label { color: var(--peach-bright); }
.on-ink .label::before { background: var(--blue-bright); }

.h-xl { font-size: clamp(38px, 5vw, 68px); letter-spacing: -0.045em; line-height: 1.02; }
.h-lg { font-size: clamp(34px, 5vw, 60px); letter-spacing: -0.04em; }
.h-md { font-size: clamp(28px, 3.4vw, 42px); letter-spacing: -0.035em; }
.h-sm { font-size: clamp(22px, 2.4vw, 27px); letter-spacing: -0.03em; }

.lead { font-size: 20.5px; line-height: 1.58; color: var(--ink-muted); }
.on-ink .lead { color: var(--on-dark); }
.small { font-size: 16px; line-height: 1.6; color: var(--ink-faint); }
.on-ink .small { color: var(--on-dark-soft); }
.note { font-size: 16px; line-height: 1.6; color: var(--ink-faint); margin-top: 24px; }
.on-ink .note { color: var(--on-dark-soft); }

.grad-text {
  background: linear-gradient(96deg, var(--blue-bright) 4%, #86c9f9 46%, var(--peach-bright) 96%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
/* On light backgrounds the blue to teal sweep stays saturated the whole
   way across. Adding peach here pushes the middle through a muddy
   brown, so peach is kept for solid accents instead. */
.grad-text-light {
  background: linear-gradient(94deg, var(--blue-600) 6%, #0f7f9e 52%, var(--teal) 96%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

.sec-head { max-width: 780px; margin-bottom: 62px; }
.sec-head.mid { margin-left: auto; margin-right: auto; text-align: center; }
.sec-head.mid .label { justify-content: center; }
.sec-head h2 { margin: 22px 0 18px; }
.sec-head p { font-size: 19.5px; line-height: 1.6; color: var(--ink-muted); }
.on-ink .sec-head p { color: var(--on-dark); }

@media (max-width: 860px) {
  .sec { padding: 74px 0; }
  .sec-head { margin-bottom: 42px; }
  .flip-down, .flip-up { height: 56px; }
}
@media (max-width: 640px) {
  body { font-size: 17.5px; }
  .wrap { padding: 0 20px; }
  .sec { padding: 60px 0; }
  .lead { font-size: 18.5px; }
  .sec-head p { font-size: 17.5px; }
}

/* ============================================================
   Scroll progress
   ============================================================ */
.progress {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 200;
  background: transparent; pointer-events: none;
}
.progress i {
  display: block; height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--blue), var(--teal) 55%, var(--peach));
  box-shadow: 0 0 14px rgba(7, 142, 240, 0.6);
  transition: width 0.08s linear;
}

/* ============================================================
   Header
   ============================================================ */
/* The header sits in normal flow above the first section, so on a dark
   page it must supply its own dark ground rather than relying on what
   is behind it. Blur still matters once content scrolls underneath. */
.hdr {
  position: sticky; top: 0; z-index: 120;
  background: rgba(4, 7, 13, 0.93);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--line-dark);
  transition: background 0.3s ease, border-color 0.3s ease;
}
.hdr.light {
  background: rgba(255, 255, 255, 0.86);
  border-bottom-color: var(--rule);
}
.hdr .wrap { display: flex; align-items: center; justify-content: space-between; gap: 20px; height: 78px; }
.mark { display: inline-flex; align-items: center; flex-shrink: 0; }
.mark img { width: 224px; height: auto; }

.menu { display: flex; align-items: center; gap: 2px; }
.menu a {
  font-size: 16px; font-weight: 500; padding: 10px 14px; border-radius: var(--r-sm);
  color: rgba(255, 255, 255, 0.72);
  transition: color 0.15s ease, background 0.15s ease;
}
.menu a:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }
.menu a.here { color: #fff; font-weight: 700; }
.menu a.here::after {
  content: ""; display: block; height: 2px; margin-top: 4px; border-radius: 2px;
  background: linear-gradient(90deg, var(--blue), var(--peach));
}
.hdr.light .menu a { color: var(--ink-muted); }
.hdr.light .menu a:hover { color: var(--blue-700); background: var(--blue-050); }
.hdr.light .menu a.here { color: var(--blue-700); }

.burger {
  display: none; align-items: center; gap: 10px;
  background: rgba(255, 255, 255, 0.08); border: 1px solid var(--line-dark-strong);
  color: #fff; border-radius: var(--r-sm); padding: 11px 15px; font-size: 16px; font-weight: 600;
}
.hdr.light .burger { background: #fff; border-color: var(--rule-strong); color: var(--ink); }
.burger .bars { display: grid; gap: 3.5px; }
.burger .bars span { display: block; width: 18px; height: 2px; background: currentColor; border-radius: 2px; }

@media (max-width: 1080px) { .mark img { width: 194px; } .menu a { font-size: 16px; padding: 10px 10px; } }
@media (max-width: 960px) {
  .hdr .wrap { height: 70px; }
  .burger { display: inline-flex; }
  .menu {
    display: none; position: absolute; top: 70px; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 2px;
    background: var(--ink-1); border-bottom: 1px solid var(--line-dark);
    padding: 16px 20px 24px; box-shadow: var(--shadow-deep);
  }
  .hdr.light .menu { background: #fff; border-bottom-color: var(--rule); }
  .menu.open { display: flex; }
  .menu a { padding: 14px 12px; font-size: 17px; }
  .menu a.here::after { display: none; }
  .menu .btn { margin-top: 12px; width: 100%; }
}
@media (max-width: 420px) { .mark img { width: 170px; } }

/* ============================================================
   Buttons
   ============================================================ */
.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 11px;
  min-height: 54px; padding: 14px 28px;
  border-radius: 999px;
  font-family: var(--font-ui); font-size: 16.5px; font-weight: 600; letter-spacing: -0.01em;
  border: 1.5px solid transparent;
  transition: transform 0.18s cubic-bezier(.2,.8,.3,1), background 0.18s ease, box-shadow 0.18s ease, color 0.18s ease, border-color 0.18s ease;
  will-change: transform;
  text-align: center;
}
.btn .arw { transition: transform 0.22s cubic-bezier(.2,.8,.3,1); }
.btn:hover .arw { transform: translateX(4px); }
.btn-sm { min-height: 46px; padding: 10px 20px; font-size: 16px; }

.btn-glow {
  background: linear-gradient(96deg, #075e9e 0%, #0a72c4 52%, #0b6ab4 100%);
  color: #fff;
  box-shadow: 0 10px 30px rgba(7, 142, 240, 0.36);
}
.btn-glow:hover { box-shadow: 0 16px 44px rgba(7, 142, 240, 0.5); transform: translateY(-2px); }

.btn-solid { background: var(--blue-600); color: #fff; box-shadow: var(--shadow-soft); }
.btn-solid:hover { background: var(--blue-700); transform: translateY(-2px); box-shadow: var(--shadow-mid); }

.btn-peach { background: var(--peach-700); color: #fff; }
.btn-peach:hover { background: #a8462c; transform: translateY(-2px); }

.btn-ghost-d { background: rgba(255,255,255,0.06); color: #fff; border-color: var(--line-dark-strong); }
.btn-ghost-d:hover { background: rgba(255,255,255,0.13); border-color: rgba(255,255,255,0.4); transform: translateY(-2px); }

.btn-ghost-l { background: transparent; color: var(--blue-700); border-color: var(--rule-strong); }
.btn-ghost-l:hover { background: var(--blue-050); border-color: var(--blue); transform: translateY(-2px); }

.btn-white { background: #fff; color: var(--ink-0); }
.btn-white:hover { background: var(--blue-050); transform: translateY(-2px); }

.btns { display: flex; flex-wrap: wrap; gap: 14px; }
@media (max-width: 560px) { .btns .btn { width: 100%; } }

.tlink { color: var(--blue-600); font-weight: 600; border-bottom: 2px solid var(--blue-100); }
.tlink:hover { border-bottom-color: var(--blue); }
.on-ink .tlink { color: var(--blue-bright); border-bottom-color: rgba(79,176,247,0.35); }

/* ============================================================
   Hero
   ============================================================ */
.hero { padding: 96px 0 118px; overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: 1.08fr 0.92fr; gap: 58px; align-items: center; }
.hero-grid > * { min-width: 0; }
.hero h1 { margin: 26px 0 26px; }
.hero .lead { max-width: 50ch; margin-bottom: 34px; }

/* kinetic word reveal */
.kin { display: inline-block; overflow: hidden; vertical-align: bottom; }
.kin > span {
  display: inline-block;
  transform: translateY(105%);
  animation: kinUp 0.86s cubic-bezier(.16,1,.3,1) forwards;
}
@keyframes kinUp { to { transform: translateY(0); } }

.hero-marks { display: flex; flex-wrap: wrap; gap: 12px 28px; margin-top: 34px; }
.hero-marks span { display: inline-flex; align-items: center; gap: 10px; font-size: 16px; color: var(--on-dark); }
.hero-marks .dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--teal-bright);
  box-shadow: 0 0 0 4px rgba(79, 201, 203, 0.18);
}

@media (max-width: 1020px) { .hero-grid { grid-template-columns: 1fr; gap: 52px; } }
@media (max-width: 640px) { .hero { padding: 58px 0 72px; } }

/* ============================================================
   Glass panels
   Rule from current guidance: blur plus a real tint, and body
   text never sits on raw glass. Every glass card here carries a
   solid tinted layer behind its text.
   ============================================================ */
.glass {
  position: relative;
  background: rgba(18, 27, 44, 0.72);
  border: 1px solid var(--line-dark);
  border-radius: var(--r-lg);
  backdrop-filter: blur(22px) saturate(140%);
  box-shadow: 0 26px 70px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255,255,255,0.08);
}
@supports not (backdrop-filter: blur(2px)) {
  .glass { background: rgba(18, 27, 44, 0.96); }
}

/* ============================================================
   Live call demo
   ============================================================ */
.demo { border-radius: var(--r-xl); overflow: hidden; }
.demo-top {
  display: flex; align-items: center; gap: 13px;
  padding: 17px 20px;
  background: rgba(4, 7, 13, 0.72);
  border-bottom: 1px solid var(--line-dark);
}
.demo-top .ring {
  width: 40px; height: 40px; border-radius: 50%;
  background: linear-gradient(135deg, var(--blue), var(--peach));
  display: grid; place-items: center; flex-shrink: 0;
}
.demo-top .ring svg { width: 19px; height: 19px; color: #fff; }
.demo-top .who { font-weight: 700; color: #fff; font-size: 16.5px; font-family: var(--font-display); letter-spacing: -0.02em; }
.demo-top .sub { font-size: 16px; color: var(--on-dark-soft); font-family: var(--font-mono); letter-spacing: 0.05em; }
.demo-top .live {
  margin-left: auto; display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 16px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--teal-bright);
}
.demo-top .live i {
  width: 8px; height: 8px; border-radius: 50%; background: var(--teal-bright); display: block;
  animation: pulse 1.8s infinite ease-in-out;
}
@keyframes pulse { 0%,100% { opacity: 1; box-shadow: 0 0 0 0 rgba(79,201,203,0.5);} 50% { opacity: .6; box-shadow: 0 0 0 7px rgba(79,201,203,0);} }

.demo-body { padding: 22px 20px 20px; display: flex; flex-direction: column; gap: 14px; min-height: 316px; }
.turn { max-width: 90%; opacity: 0; transform: translateY(10px); }
.turn.in { opacity: 1; transform: none; transition: opacity 0.45s ease, transform 0.45s cubic-bezier(.16,1,.3,1); }
.turn .tag {
  font-family: var(--font-mono); font-size: 16px; letter-spacing: 0.16em; text-transform: uppercase;
  margin-bottom: 6px; display: block;
}
.turn.caller .tag { color: var(--peach-bright); }
.turn.ai .tag { color: var(--blue-bright); }
.turn .bubble {
  font-size: 16.5px; line-height: 1.5; padding: 13px 17px; border-radius: 16px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid var(--line-dark);
  color: rgba(255, 255, 255, 0.92);
}
.turn.ai { align-self: flex-end; }
.turn.ai .bubble {
  background: rgba(7, 142, 240, 0.2);
  border-color: rgba(79, 176, 247, 0.36);
  border-bottom-right-radius: 5px;
}
.turn.caller .bubble { border-bottom-left-radius: 5px; }
.turn .caret { display: inline-block; width: 2px; height: 1em; background: var(--blue-bright); vertical-align: -2px; animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }

.demo-foot {
  border-top: 1px solid var(--line-dark);
  padding: 16px 20px;
  display: flex; align-items: center; gap: 12px;
  background: rgba(4, 7, 13, 0.5);
}
.demo-foot .badge {
  display: inline-flex; align-items: center; gap: 9px;
  background: rgba(22, 125, 127, 0.2); border: 1px solid rgba(79, 201, 203, 0.36);
  color: var(--teal-bright); border-radius: 999px; padding: 8px 15px;
  font-size: 16px; font-weight: 600;
  opacity: 0; transform: scale(0.94); transition: all 0.4s cubic-bezier(.16,1,.3,1);
}
.demo-foot .badge.in { opacity: 1; transform: none; }
.demo-foot .fine { font-size: 16px; color: var(--on-dark-soft); }

.demo-replay {
  background: transparent; border: 1px solid var(--line-dark-strong); color: var(--on-dark);
  border-radius: 999px; padding: 7px 15px; font-size: 16px; margin-left: auto; flex-shrink: 0;
}
.demo-replay:hover { color: #fff; border-color: rgba(255,255,255,0.4); }

/* ============================================================
   Stat strip
   ============================================================ */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line-dark); border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line-dark); }
.stat { background: rgba(11, 18, 32, 0.62); padding: 32px 26px; }
.stat .n {
  font-family: var(--font-display); font-weight: 800; font-size: 46px; line-height: 1;
  letter-spacing: -0.05em; color: #fff;
}
.stat .n em { font-style: normal; color: var(--peach-bright); }
.stat .l { font-size: 16px; color: var(--on-dark); margin-top: 12px; line-height: 1.5; }
@media (max-width: 900px) { .stats { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .stats { grid-template-columns: 1fr; } }

/* ============================================================
   Bento grid
   ============================================================ */
.bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; }
.bento > * { min-width: 0; }
.b-3 { grid-column: span 3; }
.b-2 { grid-column: span 2; }
.b-4 { grid-column: span 4; }
.b-6 { grid-column: span 6; }
@media (max-width: 980px) {
  .bento { grid-template-columns: repeat(2, 1fr); }
  .b-3, .b-2, .b-4, .b-6 { grid-column: span 1; }
  .b-wide { grid-column: span 2 !important; }
}
@media (max-width: 620px) {
  .bento { grid-template-columns: 1fr; }
  .b-wide { grid-column: span 1 !important; }
}

.tile {
  position: relative;
  overflow: hidden;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  padding: 32px 30px;
  display: flex; flex-direction: column; gap: 14px;
  transition: transform 0.25s cubic-bezier(.2,.8,.3,1), box-shadow 0.25s ease, border-color 0.25s ease;
}
.tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-mid); border-color: var(--rule-strong); }
.tile h3 { font-size: 24px; }
.tile p { color: var(--ink-muted); font-size: 17px; }
.tile .foot { margin-top: auto; padding-top: 14px; }
.tile.accent-blue { background: linear-gradient(160deg, var(--blue-050), #fff 70%); border-color: var(--blue-100); }
.tile.accent-peach { background: linear-gradient(160deg, var(--peach-050), #fff 70%); border-color: #f6ddd3; }
.tile.accent-teal { background: linear-gradient(160deg, var(--teal-050), #fff 70%); border-color: #cfe6e6; }

/* Dark tiles with a mouse spotlight */
.tile-d {
  position: relative; overflow: hidden;
  background: rgba(18, 27, 44, 0.6);
  border: 1px solid var(--line-dark);
  border-radius: var(--r-lg);
  padding: 32px 30px;
  display: flex; flex-direction: column; gap: 14px;
  transition: transform 0.25s cubic-bezier(.2,.8,.3,1), border-color 0.25s ease;
}
.tile-d::before {
  content: ""; position: absolute; inset: -1px; pointer-events: none; opacity: 0;
  transition: opacity 0.3s ease;
  background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%), rgba(7,142,240,0.22), transparent 62%);
}
.tile-d:hover { transform: translateY(-4px); border-color: rgba(79,176,247,0.4); }
.tile-d:hover::before { opacity: 1; }
.tile-d h3 { font-size: 24px; }
.tile-d p { color: var(--on-dark); font-size: 17px; }
.tile-d .foot { margin-top: auto; padding-top: 14px; }

.ico {
  width: 52px; height: 52px; border-radius: 15px; display: grid; place-items: center; flex-shrink: 0;
  background: var(--blue-050); color: var(--blue-600); border: 1px solid var(--blue-100);
}
.ico.peach { background: var(--peach-050); color: var(--peach-600); border-color: #f6ddd3; }
.ico.teal { background: var(--teal-050); color: var(--teal); border-color: #cfe6e6; }
.ico svg { width: 25px; height: 25px; }
.tile-d .ico { background: rgba(7,142,240,0.16); color: var(--blue-bright); border-color: rgba(79,176,247,0.3); }
.tile-d .ico.peach { background: rgba(222,115,86,0.18); color: var(--peach-bright); border-color: rgba(244,161,132,0.3); }
.tile-d .ico.teal { background: rgba(22,125,127,0.2); color: var(--teal-bright); border-color: rgba(79,201,203,0.3); }

/* ============================================================
   Lists
   ============================================================ */
.ticks { display: grid; gap: 12px; }
.ticks li {
  list-style: none; display: grid; grid-template-columns: 22px 1fr; gap: 13px; align-items: start;
  font-size: 17px; line-height: 1.55; color: var(--ink-muted);
}
.ticks li::before {
  content: ""; width: 21px; height: 21px; margin-top: 2px; border-radius: 7px;
  background: var(--teal-050) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23167D7F' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 13px no-repeat;
}
.on-ink .ticks li, .tile-d .ticks li { color: var(--on-dark); }
.on-ink .ticks li::before, .tile-d .ticks li::before {
  background: rgba(79,201,203,0.16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234FC9CB' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 13px no-repeat;
}

.chip {
  display: inline-flex; align-items: center; gap: 9px;
  border-radius: 999px; padding: 8px 16px; font-size: 16px; font-weight: 600;
  background: var(--teal-050); color: var(--teal-700); border: 1px solid #cfe6e6;
  width: fit-content;
}
.chip.blue { background: var(--blue-050); color: var(--blue-700); border-color: var(--blue-100); }
.chip.peach { background: var(--peach-050); color: var(--peach-600); border-color: #f6ddd3; }
.on-ink .chip { background: rgba(79,201,203,0.14); color: var(--teal-bright); border-color: rgba(79,201,203,0.3); }
.on-ink .chip.blue { background: rgba(7,142,240,0.16); color: var(--blue-bright); border-color: rgba(79,176,247,0.32); }
.on-ink .chip.peach { background: rgba(222,115,86,0.18); color: var(--peach-bright); border-color: rgba(244,161,132,0.32); }

/* ============================================================
   Marquee
   ============================================================ */
.marq {
  overflow: hidden; border-top: 1px solid var(--line-dark); border-bottom: 1px solid var(--line-dark);
  padding: 22px 0; background: rgba(4,7,13,0.4);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marq-track { display: flex; gap: 54px; width: max-content; animation: slide 42s linear infinite; }
.marq:hover .marq-track { animation-play-state: paused; }
@keyframes slide { to { transform: translateX(-50%); } }
.marq-item {
  font-family: var(--font-display); font-size: 21px; font-weight: 600; letter-spacing: -0.025em;
  color: rgba(255,255,255,0.5); display: inline-flex; align-items: center; gap: 18px; white-space: nowrap;
}
.marq-item::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--peach); opacity: .8; }

/* ============================================================
   Steps rail
   ============================================================ */
.rail { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; position: relative; }
.rail::before {
  content: ""; position: absolute; top: 26px; left: 4%; right: 4%; height: 2px;
  background: linear-gradient(90deg, var(--blue-100), var(--blue), var(--peach), var(--teal));
  opacity: .55; border-radius: 2px;
}
.on-ink .rail::before { opacity: .8; }
.rail-step { position: relative; padding-top: 66px; }
.rail-step .bead {
  position: absolute; top: 12px; left: 0;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--paper); border: 2px solid var(--blue);
  display: grid; place-items: center;
  font-family: var(--font-mono); font-size: 16px; font-weight: 600; color: var(--blue-700);
}
.on-ink .rail-step .bead { background: var(--ink-1); color: var(--blue-bright); border-color: var(--blue-bright); }
.rail-step h3 { font-size: 21px; margin-bottom: 10px; }
.rail-step p { color: var(--ink-muted); font-size: 16.5px; }
.on-ink .rail-step p { color: var(--on-dark); }
@media (max-width: 900px) { .rail { grid-template-columns: 1fr 1fr; } .rail::before { display: none; } }
@media (max-width: 560px) { .rail { grid-template-columns: 1fr; } }

/* ============================================================
   Split
   ============================================================ */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 66px; align-items: center; }
.split > * { min-width: 0; }
.split.top { align-items: start; }
@media (max-width: 940px) { .split { grid-template-columns: 1fr; gap: 40px; } }

.panel {
  background: var(--paper-cool); border: 1px solid var(--rule); border-radius: var(--r-lg); padding: 32px 30px;
}
.panel.warm { background: var(--paper-warm); border-color: #ece3da; }
.panel.peach { background: var(--peach-050); border-color: #f6ddd3; }
.panel.teal { background: var(--teal-050); border-color: #cfe6e6; }
.panel h3 { font-size: 22px; margin-bottom: 14px; }
.panel p { color: var(--ink-muted); font-size: 17px; }
.on-ink .panel {
  background: rgba(18,27,44,0.62); border-color: var(--line-dark);
}
.on-ink .panel p { color: var(--on-dark); }

/* ============================================================
   Pricing
   ============================================================ */
.plans { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 20px; align-items: stretch; }
.plan {
  position: relative; display: flex; flex-direction: column; gap: 16px;
  background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r-xl);
  padding: 36px 30px 32px; box-shadow: var(--shadow-soft);
  transition: transform 0.25s cubic-bezier(.2,.8,.3,1), box-shadow 0.25s ease;
}
.plan:hover { transform: translateY(-5px); box-shadow: var(--shadow-mid); }
.plan.hot {
  border: 0;
  background:
    linear-gradient(var(--paper), var(--paper)) padding-box,
    linear-gradient(150deg, var(--blue), var(--teal) 48%, var(--peach)) border-box;
  border: 2px solid transparent;
  box-shadow: var(--shadow-mid);
}
.plan .tagflag {
  position: absolute; top: -15px; left: 30px;
  background: linear-gradient(96deg, var(--blue-600), var(--blue-700));
  color: #fff; font-size: 16px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 7px 15px; border-radius: 999px; box-shadow: 0 8px 22px rgba(7,142,240,0.35);
}
.plan .tagflag.peach { background: linear-gradient(96deg, #b84e31, var(--peach-700)); box-shadow: 0 8px 22px rgba(222,115,86,0.35); }
.plan .tagflag.teal { background: linear-gradient(96deg, var(--teal), var(--teal-700)); box-shadow: 0 8px 22px rgba(22,125,127,0.32); }
.plan h3 { font-size: 27px; }
.plan .psub { color: var(--ink-muted); font-size: 16.5px; }
.plan .amt {
  font-family: var(--font-display); font-weight: 800; font-size: 52px; line-height: 1;
  letter-spacing: -0.055em; color: var(--ink);
}
.plan .amt .per { font-size: 18px; font-weight: 600; color: var(--ink-faint); letter-spacing: -0.01em; }
.plan .pnote { font-size: 16px; color: var(--teal-700); font-weight: 600; }
.plan .alt { font-size: 16px; color: var(--ink-faint); border-top: 1px dashed var(--rule-strong); padding-top: 15px; }
.plan .ticks li { font-size: 16.5px; }
.plan .btn { width: 100%; margin-top: auto; }
@media (max-width: 1000px) { .plans { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; } }

/* Price table */
.tbl-wrap { overflow-x: auto; border: 1px solid var(--rule); border-radius: var(--r-lg); background: var(--paper); }
table.tbl { width: 100%; border-collapse: collapse; min-width: 660px; }
table.tbl th, table.tbl td { padding: 22px 24px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--rule); }
table.tbl thead th {
  font-family: var(--font-mono); font-size: 16px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-faint); font-weight: 500; background: var(--paper-cool); border-bottom: 1px solid var(--rule-strong);
}
table.tbl td.r, table.tbl th.r { text-align: right; white-space: nowrap; }
table.tbl tbody tr:last-child td { border-bottom: 0; }
table.tbl tbody tr:hover { background: var(--paper-cool); }
table.tbl .rowname { font-family: var(--font-display); font-weight: 700; font-size: 20px; letter-spacing: -0.03em; color: var(--ink); }
table.tbl .rowdesc { color: var(--ink-muted); font-size: 16px; margin-top: 7px; max-width: 48ch; }
table.tbl .amt2 { font-weight: 700; font-size: 21px; color: var(--blue-600); }
table.tbl .amt2.slate { color: var(--ink); }
table.tbl .sub2 { font-size: 16px; color: var(--ink-faint); margin-top: 5px; }

/* Toggle */
.tog-wrap { display: flex; justify-content: center; margin-bottom: 38px; }
.tog { display: inline-flex; background: var(--paper-cool); border: 1px solid var(--rule); border-radius: 999px; padding: 5px; gap: 4px; }
.tog button { border: 0; background: transparent; padding: 12px 24px; border-radius: 999px; font-size: 16px; font-weight: 600; color: var(--ink-muted); transition: all .2s ease; }
.tog button[aria-pressed="true"] { background: linear-gradient(96deg, var(--blue-600), var(--blue-700)); color: #fff; box-shadow: 0 8px 20px rgba(7,142,240,0.3); }

/* ============================================================
   Calculator style figure block
   ============================================================ */
.figure-card {
  border-radius: var(--r-xl); padding: 34px 32px;
  background: rgba(18,27,44,0.66); border: 1px solid var(--line-dark);
}
.figure-card .big {
  font-family: var(--font-display); font-weight: 800; font-size: clamp(46px, 6vw, 68px);
  line-height: 1; letter-spacing: -0.055em; color: #fff; margin: 10px 0 6px;
}
.figure-card .big em { font-style: normal; color: var(--peach-bright); }

/* ============================================================
   FAQ
   ============================================================ */
.faq { display: grid; gap: 14px; max-width: 940px; }
.faq details { border: 1px solid var(--rule); border-radius: var(--r-md); background: var(--paper); overflow: hidden; transition: border-color .2s ease, box-shadow .2s ease; }
.faq details[open] { border-color: var(--blue); box-shadow: var(--shadow-soft); }
.faq summary {
  list-style: none; cursor: pointer; padding: 24px 28px;
  font-family: var(--font-display); font-size: 20px; font-weight: 700; letter-spacing: -0.03em; color: var(--ink);
  display: flex; justify-content: space-between; align-items: flex-start; gap: 20px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex-shrink: 0; width: 22px; height: 22px; margin-top: 3px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A72C4' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / 20px no-repeat;
  transition: transform .25s ease;
}
.faq details[open] summary::after { transform: rotate(135deg); }
.faq .ans { padding: 0 28px 26px; color: var(--ink-muted); font-size: 17px; line-height: 1.68; }
.faq .ans p + p { margin-top: 13px; }

/* ============================================================
   Big CTA
   ============================================================ */
.cta { padding: 106px 0; }
.cta h2 { margin-bottom: 20px; }
.cta p { font-size: 20px; color: var(--on-dark); max-width: 60ch; margin-bottom: 34px; }
.cta .fine { font-size: 16px; color: var(--on-dark-soft); margin-top: 24px; }

/* ============================================================
   Forms
   ============================================================ */
.fgrid { display: grid; gap: 20px; grid-template-columns: 1fr 1fr; }
.f { display: grid; gap: 9px; }
.f.wide { grid-column: 1 / -1; }
.f label { font-size: 16px; font-weight: 600; color: var(--ink); }
.f .hint { font-size: 16px; color: var(--ink-faint); }
.f input, .f select, .f textarea {
  font-family: var(--font-ui); font-size: 17px; color: var(--ink); background: #fff;
  border: 1px solid var(--rule-strong); border-radius: var(--r-md); padding: 15px 17px; width: 100%; min-height: 54px;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.f textarea { min-height: 150px; resize: vertical; }
.f input:focus, .f select:focus, .f textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 4px rgba(7,142,240,0.16); }
@media (max-width: 700px) { .fgrid { grid-template-columns: 1fr; } }

/* ============================================================
   Footer
   ============================================================ */
.foot { background: var(--ink-0); color: var(--on-dark); padding: 78px 0 34px; position: relative; }
.foot::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--blue), var(--teal) 50%, var(--peach)); }
.foot h4 { font-family: var(--font-mono); font-size: 16px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--on-dark-soft); margin-bottom: 18px; font-weight: 500; }
.foot a { color: rgba(255,255,255,0.88); display: block; padding: 7px 0; font-size: 16px; transition: color .15s ease; }
.foot a:hover { color: var(--peach-bright); }
.foot-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 48px; margin-bottom: 52px; }
.foot-logo { width: 208px; height: auto; }
.foot-grid .about p { color: var(--on-dark); font-size: 16px; margin-top: 20px; max-width: 34ch; }
.foot-meta {
  border-top: 1px solid var(--line-dark); padding-top: 24px;
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-size: 16px; color: var(--on-dark-soft);
}
@media (max-width: 900px) { .foot-grid { grid-template-columns: 1fr 1fr; gap: 34px; } }
@media (max-width: 560px) { .foot-grid { grid-template-columns: 1fr; } }

/* ============================================================
   Reveal on scroll
   ============================================================ */
/* Content is visible by default. It only starts hidden once the
   script has confirmed it is running, so a JS failure can never
   leave a blank page. */
.js .reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); }
.js .reveal.seen { opacity: 1; transform: none; }

/* ============================================================
   Site Assistant chat widget
   ============================================================ */
.cbx-launch {
  position: fixed; right: 24px; bottom: 24px; z-index: 130;
  display: inline-flex; align-items: center; gap: 11px;
  padding: 15px 22px 15px 18px; border: 0; border-radius: 999px;
  background: linear-gradient(96deg, var(--blue-700), #0a72c4 60%, #b84e31 190%);
  color: #fff; font-size: 16px; font-weight: 600;
  box-shadow: 0 16px 40px rgba(7,142,240,0.42);
  transition: transform .2s cubic-bezier(.2,.8,.3,1), box-shadow .2s ease;
}
.cbx-launch:hover { transform: translateY(-3px); box-shadow: 0 22px 54px rgba(7,142,240,0.55); }
.cbx-launch svg { width: 22px; height: 22px; }
.cbx-launch .on { width: 9px; height: 9px; border-radius: 50%; background: #6fe0a8; box-shadow: 0 0 0 4px rgba(111,224,168,0.28); }

.cbx {
  position: fixed; right: 24px; bottom: 24px; z-index: 140;
  width: min(400px, calc(100vw - 32px)); height: min(640px, calc(100vh - 48px));
  background: var(--ink-1); border: 1px solid var(--line-dark); border-radius: var(--r-lg);
  box-shadow: 0 34px 90px rgba(0,0,0,0.6);
  display: none; flex-direction: column; overflow: hidden;
}
.cbx.open { display: flex; }
.cbx-head { padding: 18px 20px; display: flex; align-items: center; gap: 13px; background: linear-gradient(120deg, rgba(7,142,240,0.28), rgba(222,115,86,0.18)), var(--ink-0); border-bottom: 1px solid var(--line-dark); }
.cbx-head .av { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, var(--blue), var(--peach)); display: grid; place-items: center; font-family: var(--font-display); font-weight: 800; color: #fff; font-size: 16px; }
.cbx-head .nm { font-family: var(--font-display); font-weight: 700; font-size: 17px; color: #fff; letter-spacing: -0.02em; }
.cbx-head .st { font-size: 16px; color: var(--on-dark-soft); display: flex; align-items: center; gap: 8px; }
.cbx-head .st i { width: 8px; height: 8px; border-radius: 50%; background: #6fe0a8; display: block; }
.cbx-head .x { margin-left: auto; background: transparent; border: 0; color: rgba(255,255,255,0.75); font-size: 27px; line-height: 1; padding: 3px 7px; border-radius: 7px; }
.cbx-head .x:hover { background: rgba(255,255,255,0.14); color: #fff; }
.cbx-log { flex: 1; overflow-y: auto; padding: 22px 20px; display: flex; flex-direction: column; gap: 14px; background: var(--ink-2); }
.cbx-msg { max-width: 88%; font-size: 16px; line-height: 1.55; padding: 13px 17px; border-radius: 17px; }
.cbx-msg.bot { background: rgba(255,255,255,0.07); border: 1px solid var(--line-dark); color: rgba(255,255,255,0.93); border-bottom-left-radius: 5px; }
.cbx-msg.me { background: linear-gradient(96deg, var(--blue), var(--blue-700)); color: #fff; align-self: flex-end; border-bottom-right-radius: 5px; }
.cbx-msg a { color: var(--blue-bright); font-weight: 600; text-decoration: underline; }
.cbx-msg.me a { color: #fff; }
.cbx-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 20px 14px; background: var(--ink-2); }
.cbx-chip { border: 1px solid rgba(79,176,247,0.32); background: rgba(7,142,240,0.14); color: var(--blue-bright); border-radius: 999px; padding: 9px 15px; font-size: 16px; font-weight: 600; }
.cbx-chip:hover { background: rgba(7,142,240,0.26); border-color: var(--blue-bright); }
.cbx-form { display: flex; gap: 10px; padding: 15px; border-top: 1px solid var(--line-dark); background: var(--ink-1); }
.cbx-form input { flex: 1; font-family: var(--font-ui); font-size: 16px; background: rgba(255,255,255,0.07); border: 1px solid var(--line-dark-strong); color: #fff; border-radius: var(--r-md); padding: 13px 15px; min-height: 50px; }
.cbx-form input::placeholder { color: rgba(255,255,255,0.5); }
.cbx-form input:focus { outline: none; border-color: var(--blue-bright); box-shadow: 0 0 0 3px rgba(7,142,240,0.24); }
.cbx-form button { border: 0; background: linear-gradient(96deg, var(--blue), var(--blue-700)); color: #fff; border-radius: var(--r-md); padding: 0 20px; font-weight: 600; font-size: 16px; min-height: 50px; }
.cbx-type { display: inline-flex; gap: 4px; align-items: center; }
.cbx-type i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,0.4); display: block; animation: bl 1.2s infinite ease-in-out; }
.cbx-type i:nth-child(2) { animation-delay: .18s; }
.cbx-type i:nth-child(3) { animation-delay: .36s; }
@keyframes bl { 0%,60%,100% { opacity: .3; } 30% { opacity: 1; } }
.cbx-fine { font-size: 16px; color: var(--on-dark-soft); text-align: center; padding: 0 14px 14px; background: var(--ink-1); }
@media (max-width: 480px) {
  .cbx { right: 8px; bottom: 8px; width: calc(100vw - 16px); height: calc(100vh - 16px); }
  .cbx-launch { right: 14px; bottom: 14px; }
}

/* ============================================================
   Utilities
   ============================================================ */
.mid { text-align: center; }
.mt1 { margin-top: 14px; }
.mt2 { margin-top: 24px; }
.mt3 { margin-top: 36px; }
.mt4 { margin-top: 52px; }
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.prose h2 { font-size: 32px; margin: 46px 0 18px; }
.prose h3 { font-size: 23px; margin: 34px 0 13px; }
.prose p, .prose li { color: var(--ink-muted); font-size: 17.5px; line-height: 1.74; }
.prose p + p { margin-top: 17px; }
.prose ul { margin: 18px 0 18px 24px; }
.prose li { margin-bottom: 9px; }
.prose > *:first-child { margin-top: 0; }
.on-ink .prose p, .on-ink .prose li { color: var(--on-dark); }

/* ============================================================
   Shared layout utilities, added for the reworked pages
   ============================================================ */
.grid { display: grid; gap: 20px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
@media (max-width: 1000px) { .grid-4, .grid-3 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 700px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

.on-ink .tile { background: rgba(18,27,44,0.62); border-color: var(--line-dark); }
.on-ink .tile h3 { color: #fff; }
.on-ink .tile p { color: var(--on-dark); }
.on-ink .tile .ico { background: rgba(7,142,240,0.16); color: var(--blue-bright); border-color: rgba(79,176,247,0.3); }
.on-ink .tile .ico.peach { background: rgba(222,115,86,0.18); color: var(--peach-bright); border-color: rgba(244,161,132,0.3); }
.on-ink .tile .ico.teal { background: rgba(22,125,127,0.2); color: var(--teal-bright); border-color: rgba(79,201,203,0.3); }
.on-ink .panel.warm, .on-ink .panel.peach, .on-ink .panel.teal { background: rgba(18,27,44,0.62); border-color: var(--line-dark); }
.on-ink .panel h3 { color: #fff; }
.on-ink .amt2 { color: var(--blue-bright); }
.on-ink .amt2.slate { color: #fff; }

/* Transcript and report blocks */
.script { display: grid; gap: 13px; }
.script .line { display: grid; grid-template-columns: 136px 1fr; gap: 16px; align-items: start; }
.script .spk {
  font-family: var(--font-mono); font-size: 16px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-faint); padding-top: 3px;
}
.script .line.ai .spk { color: var(--blue-600); }
.script .txt { font-size: 16.5px; line-height: 1.55; color: var(--ink-muted); }
.on-ink .script .spk { color: var(--on-dark-soft); }
.on-ink .script .line.ai .spk { color: var(--blue-bright); }
.on-ink .script .txt { color: var(--on-dark); }
@media (max-width: 620px) { .script .line { grid-template-columns: 1fr; gap: 3px; } }

.report { display: grid; border: 1px solid var(--rule); border-radius: var(--r-md); overflow: hidden; background: #fff; }
.report .r { display: flex; justify-content: space-between; gap: 18px; padding: 15px 22px; border-bottom: 1px solid var(--rule); font-size: 16.5px; color: var(--ink-muted); }
.report .r:last-child { border-bottom: 0; }
.report .r:nth-child(odd) { background: var(--paper-cool); }
.report .r b { font-weight: 700; color: var(--ink); white-space: nowrap; }

.legal-note {
  background: #fff8e6; border: 1px solid #f0dca6; border-radius: var(--r-md);
  padding: 20px 24px; font-size: 16px; line-height: 1.6; color: #6b5514; margin-bottom: 36px;
}
.tag-row { display: flex; flex-wrap: wrap; gap: 10px; }

/* ============================================================
   Light cards sitting inside a dark section
   The .on-ink rules cascade by ancestry, so a white plan card
   dropped into a dark band inherits white headings and white
   list text and vanishes. Re ink anything inside a light card.
   ============================================================ */
.on-ink .plan h3,
.on-ink .plan h4 { color: var(--ink); }
.on-ink .plan p,
.on-ink .plan .psub { color: var(--ink-muted); }
.on-ink .plan .small { color: var(--ink-faint); }
.on-ink .plan .amt { color: var(--ink); }
.on-ink .plan .amt .per { color: var(--ink-faint); }
.on-ink .plan .pnote { color: var(--teal-700); }
.on-ink .plan .alt { color: var(--ink-faint); }
.on-ink .plan .ticks li { color: var(--ink-muted); }
.on-ink .plan .ticks li::before {
  background: var(--teal-050) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23167D7F' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 13px no-repeat;
}
.on-ink .plan .chip { background: var(--teal-050); color: var(--teal-700); border-color: #cfe6e6; }
.on-ink .plan .chip.blue { background: var(--blue-050); color: var(--blue-700); border-color: var(--blue-100); }
.on-ink .plan .chip.peach { background: var(--peach-050); color: var(--peach-600); border-color: #f6ddd3; }

/* ============================================================
   Readability hardening, August 2026
   Every rule below fixes a measured contrast failure. Ratios in
   the comments are white or the stated color against the pixel
   that is actually painted behind the glyph, sampled from a
   rendered screenshot rather than inferred from the cascade.
   ============================================================ */

/* 1. Footer is a dark surface but is not .on-ink, so the
   light theme text tokens leaked onto near black. */
.foot .small,
.foot .note,
.foot p.small,
.foot .hint,
.foot .lead,
.foot li,
.foot p { color: var(--on-dark); }
.foot .small,
.foot .note,
.foot .hint { color: var(--on-dark-soft); }   /* 7.8, was 3.71 */
.foot h1, .foot h2, .foot h3 { color: #fff; }
.foot .tlink { color: var(--blue-bright); }
.foot .chip { background: rgba(79,201,203,0.14); color: var(--teal-bright); border-color: rgba(79,201,203,0.3); }
.foot .chip.blue { background: rgba(7,142,240,0.16); color: var(--blue-bright); border-color: rgba(79,176,247,0.32); }
.foot .chip.peach { background: rgba(222,115,86,0.18); color: var(--peach-bright); border-color: rgba(244,161,132,0.32); }

/* Keep the chat launcher from parking on top of the footer meta
   line when the page is scrolled all the way down. */
.foot { padding-bottom: 104px; }
@media (max-width: 720px) { .foot { padding-bottom: 128px; } }

/* 2. Header nav sets a translucent link color that also hit
   the call to action button sitting on blue. */
.menu a.btn,
.menu a.btn:hover,
.hdr.light .menu a.btn,
.hdr.light .menu a.btn:hover { color: #fff; }   /* 5.0, was 2.46 */

/* 3. The step bead was a fixed 30px circle holding the words
   "Step 1", so the numeral spilled outside the ring and landed on
   the rail gradient. Let it size to its own text. */
.rail-step .bead {
  width: auto;
  height: auto;
  min-width: 30px;
  padding: 5px 13px;
  border-radius: 999px;
  white-space: nowrap;
  letter-spacing: 0.04em;
  background: var(--paper);
  color: var(--blue-700);          /* 7.41 on white */
  box-shadow: 0 1px 3px rgba(11,18,32,0.10);
}
.on-ink .rail-step .bead {
  background: var(--ink-1);
  color: var(--blue-bright);
  box-shadow: none;
}
@media (max-width: 900px) { .rail-step .bead { padding: 5px 11px; } }

/* 4. Small print that sat on the pale peach chip. */
.chip.peach { color: var(--peach-600); }        /* 5.34, was 4.17 */
.ico.peach { color: var(--peach-600); }

/* 5. Belt and braces: a light card dropped into a dark
   section must paint its own fill. If the gradient border trick
   ever fails to composite, the card must not become a hole that
   turns its dark text invisible. */
.plan,
.on-ink .plan,
.on-ink .tile.light,
.on-ink .panel.light { background-color: var(--paper); }
.on-ink .plan h3, .on-ink .plan h4 { color: var(--ink); }
.on-ink .plan p, .on-ink .plan li { color: var(--ink-muted); }

/* 6. Windows high contrast and forced colors: let the OS
   drive, rather than shipping our own low contrast pairs. */
@media (forced-colors: active) {
  .btn, .btn-glow, .tagflag, .bead, .chip, .cbx-launch {
    forced-color-adjust: none;
    background: ButtonFace;
    color: ButtonText;
    border: 1px solid ButtonText;
  }
  .plan, .tile, .panel { border: 1px solid CanvasText; background: Canvas; color: CanvasText; }
}

/* 7. The break even rows clipped their own copy.
   .report .r b carried white-space: nowrap so a numeric value like
   "84" would never wrap. Applied to a sentence value such as
   "Less than one recovered job covers the month" it overflowed the
   row at every width: the card's overflow: hidden clipped the tail
   on desktop, and on a phone it pushed the whole revenue band out
   to 562px inside a 390px viewport, where html { overflow-x: clip }
   cut the copy off at the right edge. Short values still never
   wrap, because they have nothing to wrap onto. */
.report .r b { white-space: normal; text-align: right; overflow-wrap: break-word; }
@media (max-width: 1200px) {
  .report .r { flex-direction: column; align-items: flex-start; gap: 5px; }
  .report .r b { text-align: left; }
}
/* Nothing should be able to force a card wider than its container.
   Deliberately not applied to .wrap or .prose, which carry their own
   max-width for the desktop measure. */
.panel, .tile, .report, .plan { max-width: 100%; }