/* JS Solutions — the public pages (storefront, trade pages, blog, forms,
   sign-in). Rebuilt 2026-09-25 to the shape Jake picked:
   a light Apple-grey canvas broken by deep-navy "night" bands, one gradient
   on headline keywords, numbers and the buttons that matter, pill buttons,
   big soft shadows, slow ambient motion behind everything, and content that
   rises into place as you reach it.

   The colours are ours, on purpose (Jake, 2026-09-25: "a little bit
   different, so nobody thinks it's a copy"): cobalt blue for water and the
   plumbing side, amber for heat and the HVAC side, teal as the bridge, all
   on deep navy rather than black. No pink, purple or cyan anywhere.
   Class names like .cyan and .violet on tiles and tags are slots for the
   second and third accents, not literal colours.

   The signed-in app has its own stylesheet (style.css), on this palette
   under liquid glass since 2026-09-30; this file
   never loads there, and that one never loads here.

   Order: tokens, base, layout, header, type, buttons, sections, ambient
   backdrop, hero, status lights, cards, compare table, FAQ, timeline,
   workflows, orb, CTA band, footer, the older parts (forms, intake,
   calendar, call loop, marquee), blog, case cards, motion, reduced motion. */

/* ================================================================ tokens */
:root {
  --white: #ffffff;
  --light: #fbfbfd;
  --off: #f5f5f7;
  --paper: #f5f5f7;
  --ink: #1d1d1f;
  --soft: #6e6e73;
  --faint: #a1a1a6;
  --line: rgba(0, 0, 0, .08);
  --line-2: rgba(0, 0, 0, .05);
  --line-strong: rgba(0, 0, 0, .16);

  --cobalt: #2563eb;
  --cobalt-deep: #1d4ed8;
  --teal-deep: #0d9488;
  --teal-light: #2dd4bf;
  --teal-dark: #0f766e;
  --blue: #14b8a6;
  --cobalt-2: #2563eb;
  --amber: #f59e0b;
  --teal: #14b8a6;
  --green: #10b981;

  --night: #050a18;
  --night-2: #0a1226;
  --night-3: #0b1430;
  --on-night: #f1f5f9;
  --on-night-soft: rgba(255, 255, 255, .62);

  --grad: linear-gradient(135deg, #2563eb, #0d9488, #14b8a6, #f59e0b);
  --grad-btn: linear-gradient(135deg, #2563eb, #0d9488 50%, #f59e0b);
  --grad-text: linear-gradient(90deg, #2563eb, #0d9488 50%, #f59e0b);
  --grad-hero: linear-gradient(90deg, #2563eb, #2dd4bf 25%, #f59e0b 50%, #2dd4bf 75%, #2563eb);
  --grad-night: linear-gradient(135deg, #60a5fa, #5eead4, #fbbf24);
  --grad-tint: linear-gradient(135deg, rgba(37,99,235,.10), rgba(245,158,11,.10));

  --r: 20px;
  --r-lg: 24px;
  --r-sm: 12px;
  --pill: 980px;
  --sh: 0 10px 40px rgba(0, 0, 0, .06);
  --sh-lift: 0 24px 60px rgba(0, 0, 0, .10);
  --sh-deep: 0 30px 80px rgba(0, 0, 0, .12);
  --ease: cubic-bezier(.22, 1, .36, 1);
  --head-h: 76px;

  /* Names the older pages still use, pointed at the new palette. */
  --card: #ffffff;
  --navy: #1d1d1f;
  --navy-deep: #000000;
  --amber-deep: #1d4ed8;
  --green-soft: rgba(16, 185, 129, .10);
  --bd-strong: rgba(0, 0, 0, .16);
}

/* ================================================================== base */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
html { background: var(--white); scroll-behavior: smooth; scroll-padding-top: calc(var(--head-h) + 12px); }
body {
  /* SF Pro on the page (Jake, 2026-09-27). Apple's licence forbids serving
     SF fonts from a website, so an iPhone or Mac shows its own built-in SF
     Pro (-apple-system / BlinkMacSystemFont) and everything else gets Inter
     Tight, a free (SIL OFL) face drawn to sit close to it with the tighter,
     compact spacing he asked for. Outfit until then. */
  font-family: -apple-system, BlinkMacSystemFont, "Inter Tight", "Segoe UI", Roboto, sans-serif;
  font-size: 17px; line-height: 1.6; font-weight: 400; color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
::selection { background: rgba(37,99,235, .2); color: var(--ink); }
a { color: var(--cobalt); font-weight: 600; text-decoration: none; transition: color .2s ease; }
a:hover { color: var(--teal-deep); }
b, strong { font-weight: 700; }
.tnum { font-variant-numeric: tabular-nums; }
img, svg, video, iframe { max-width: 100%; }
code, kbd { overflow-wrap: anywhere; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid rgba(13,148,136, .55); outline-offset: 3px;
}
/* Sideways is not a direction on this site: nothing decorative may widen a
   phone's page. Both elements, because a phone honours it on only one. */
html, body { overflow-x: hidden; }
body { position: relative; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden;
           clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 2000; background: var(--ink);
        color: #fff; padding: 10px 16px; border-radius: 10px; }
.skip:focus { top: 12px; color: #fff; }

/* ================================================================ layout */
.container { max-width: 1180px; margin: 0 auto; padding: 0 24px; position: relative; z-index: 2; }
.container.narrow { max-width: 820px; }
.container.mid { max-width: 1040px; }
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 24px; }   /* the older pages' column */
.site-main { padding-top: var(--head-h); }
.center { text-align: center; }
@media (max-width: 600px) { .container, .wrap { padding: 0 16px; } }

/* ================================================================ header */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  background: rgba(255, 255, 255, .80);
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid transparent;
  transition: background .4s ease, border-color .4s ease, box-shadow .4s ease;
}
.site-header.scrolled { background: rgba(255, 255, 255, .95); border-bottom-color: var(--line);
                        box-shadow: 0 2px 20px rgba(0, 0, 0, .04); }
.header-inner { max-width: 1280px; margin: 0 auto; height: var(--head-h);
                padding: 0 28px; display: flex; align-items: center; gap: 18px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink);
         font-size: 20px; font-weight: 800; letter-spacing: -.02em; white-space: nowrap;
         flex-shrink: 0; }
.brand:hover { color: var(--ink); text-decoration: none; }
/* Logo 6e: a heavy italic "JS." beside the rest of the name in spaced capitals. */
.brand-js { font-family: 'Fraunces', Georgia, 'Times New Roman', serif; font-style: italic;
            font-weight: 900; font-size: 32px; line-height: 1; letter-spacing: -.03em;
            color: var(--cobalt); }
.brand-dot { color: var(--teal); }
.brand-word { font-size: 12px; font-weight: 700; letter-spacing: .42em; text-transform: uppercase;
              color: var(--ink); }
.main-nav { display: flex; align-items: center; gap: 2px; margin: 0 auto; }
.nav-link { font-size: 14px; font-weight: 500; color: var(--soft); padding: 10px 16px;
            border-radius: var(--pill); transition: background .2s ease, color .2s ease; white-space: nowrap; }
.nav-link:hover { background: rgba(0, 0, 0, .04); color: var(--ink); text-decoration: none; }
.nav-link.active { color: var(--ink); font-weight: 600; }
.nav-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.nav-login { font-size: 14px; font-weight: 600; color: var(--ink); padding: 10px 14px;
             border-radius: var(--pill); white-space: nowrap; }
.nav-login:hover { background: rgba(0, 0, 0, .04); color: var(--ink); }
.nav-cta { font-size: 14px; padding: 11px 22px; }
.nav-toggle { display: none; width: 46px; height: 46px; border-radius: 12px; border: 1px solid var(--line);
              background: rgba(255, 255, 255, .9); align-items: center; justify-content: center;
              cursor: pointer; color: var(--ink); flex-shrink: 0; transition: transform .15s ease; }
.nav-toggle:active { transform: scale(.95); }
.nav-toggle svg { width: 22px; height: 22px; }
.nav-toggle .x { display: none; }
.nav-open .nav-toggle .x { display: block; }
.nav-open .nav-toggle .bars { display: none; }
/* The phone sheet's own copy of the button and the sign-in line. Written
   with the parent so the later .btn-x rule cannot switch them back on at
   desktop width. */
.main-nav .nav-sheet-cta, .main-nav .nav-sheet-login { display: none; }

/* Drop-downs: each page's contents under its name, on hover or keyboard
   focus. The ::before is a bridge over the gap, so the pointer can travel
   from the name to the panel without it closing. */
.nav-item { position: relative; display: flex; align-items: center; }
.nav-link { display: inline-flex; align-items: center; }
.nav-link .chev { width: 13px; height: 13px; margin-left: 4px; opacity: .55; transition: transform .2s ease; }
.nav-drop { position: absolute; top: calc(100% + 10px); left: 50%; z-index: 1001; width: 320px;
            background: #fff; border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--sh-lift);
            padding: 8px; display: grid; gap: 2px;
            opacity: 0; visibility: hidden; transform: translate(-50%, 8px);
            transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s; }
.nav-drop::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.drop-right .nav-drop { left: auto; right: 0; transform: translate(0, 8px); }
.nav-drop a { display: grid; grid-template-columns: 36px 1fr; gap: 12px; align-items: center; padding: 9px 10px;
              border-radius: 12px; color: var(--ink); font-weight: 400; text-decoration: none;
              transition: background .15s ease; }
.nav-drop a:hover, .nav-drop a:focus-visible { background: var(--off); color: var(--ink); }
.nav-drop .ico-tile.sm { width: 36px; height: 36px; border-radius: 10px; }
.nav-drop .ico-tile.sm svg { width: 17px; height: 17px; }
.nav-drop b { display: block; font-size: 14px; font-weight: 600; line-height: 1.3; }
.nav-drop .d { display: block; font-size: 12.5px; color: var(--soft); line-height: 1.4; margin-top: 1px; }
.nav-drop a.all { display: block; font-size: 13px; font-weight: 600; color: var(--cobalt); padding: 10px 12px;
                  border-top: 1px solid var(--line-2); margin-top: 4px; border-radius: 0 0 12px 12px; }
@media (hover: hover) and (min-width: 800px) {
  .has-drop:hover .nav-drop, .has-drop:focus-within .nav-drop {
    opacity: 1; visibility: visible; transform: translate(-50%, 0);
    transition: opacity .18s ease, transform .18s ease, visibility 0s; }
  .drop-right.has-drop:hover .nav-drop, .drop-right.has-drop:focus-within .nav-drop { transform: none; }
  .has-drop:hover .chev { transform: rotate(180deg); opacity: .9; }
}
@media (hover: none) and (min-width: 800px) { .nav-drop { display: none; } }

@media (max-width: 1260px) {
  .nav-link { padding: 10px 11px; font-size: 13.5px; }
  .nav-cta { font-size: 13.5px; padding: 10px 18px; }
}
/* Narrow laptops: one row, a little tighter. */
@media (max-width: 1179px) and (min-width: 800px) {
  .nav-link { padding: 9px 10px; font-size: 13.5px; }
  .header-inner { gap: 12px; padding: 0 20px; }
}
@media (max-width: 799px) {
  .header-inner { padding: 0 16px; }
  .site-header { background: rgba(255, 255, 255, .96); }
  .nav-toggle { display: inline-flex; margin-left: auto; }
  .nav-right { display: none; }
  .main-nav {
    position: fixed; top: var(--head-h); left: 0; right: 0; bottom: 0; margin: 0;
    height: calc(100vh - var(--head-h)); height: calc(100dvh - var(--head-h));
    background: #fff; flex-direction: column; align-items: stretch; gap: 0;
    padding: 18px 16px 32px; overflow-y: auto;
    transform: translateX(100%); visibility: hidden;
    transition: transform .35s cubic-bezier(.4, 0, .2, 1), visibility 0s linear .35s;
    box-shadow: -10px 0 30px rgba(0, 0, 0, .08);
  }
  .nav-open .main-nav { transform: none; visibility: visible;
                        transition: transform .35s cubic-bezier(.4, 0, .2, 1), visibility 0s; }
  .nav-item { display: block; border-bottom: 1px solid var(--line-2); padding-bottom: 6px; }
  .nav-link { display: flex; font-size: 20px; font-weight: 600; color: var(--ink); padding: 15px 20px 8px;
              border-radius: 16px; }
  .nav-link .chev { display: none; }
  .nav-link.active, .nav-link:hover { background: linear-gradient(135deg, rgba(37,99,235,.08), rgba(245,158,11,.05));
                                      color: var(--cobalt); }
  /* On the sheet the drop-downs are simply listed under each page. */
  .nav-drop { position: static; width: auto; opacity: 1; visibility: visible; transform: none; transition: none;
              border: 0; box-shadow: none; padding: 0 0 4px 20px; background: transparent; gap: 0; }
  .nav-drop::before { display: none; }
  .nav-drop a { grid-template-columns: 1fr; padding: 7px 12px; }
  .nav-drop .ico-tile, .nav-drop .d { display: none; }
  .nav-drop b { font-size: 15px; font-weight: 500; color: var(--soft); }
  .nav-drop a.all { display: none; }
  .main-nav .nav-sheet-cta { display: flex; margin-top: 22px; font-size: 17px; padding: 16px 28px; }
  .main-nav .nav-sheet-login { display: block; text-align: center; margin-top: 14px; font-size: 16px;
                     color: var(--ink); padding: 12px; }
  html.nav-lock, html.nav-lock body { overflow: hidden; }
}

/* ================================================================== type */
/* Headings: tight spacing only once Inter Tight is on the page (html.ft,
   set in _site_head.html), looser on the fallback face; no synthesized bold
   where a face lacks the weight, so a phone shows the real 700 instead of a
   smeared one (2026-10-01). */
h1, h2, h3, h4 { color: var(--ink); font-weight: 800; letter-spacing: -.015em; line-height: 1.08;
                 font-synthesis: none; text-wrap: balance; }
.ft h1, .ft h2, .ft h3, .ft h4 { letter-spacing: -.03em; }
h1 { font-size: clamp(38px, 6vw, 64px); }
h1 em, h2 em { font-style: normal; background: var(--grad-text); -webkit-background-clip: text;
               background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
h2 { font-size: clamp(28px, 4.4vw, 44px); margin-bottom: 14px; }
h3 { font-size: 20px; letter-spacing: -.015em; line-height: 1.25; }
.eyebrow { display: block; color: var(--cobalt); font-size: 12px; font-weight: 700;
           letter-spacing: .14em; text-transform: uppercase; margin-bottom: 16px; }
.eyebrow.light { color: rgba(255, 255, 255, .55); }
.eyebrow.lilac { color: #5eead4; }
.ft .section-h { letter-spacing: -.035em; }
.section-h { font-size: clamp(34px, 5vw, 58px); font-weight: 800;
             line-height: 1.06; margin-bottom: 18px; }
.section-p { color: var(--soft); font-size: 18px; font-weight: 300; line-height: 1.7; max-width: 620px; }
.sec-head { margin-bottom: 56px; }
.sec-head.center .section-p { margin-left: auto; margin-right: auto; }
.grad-text, .gradient-text-inline {
  background: var(--grad-text); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.grad-night { background: var(--grad-night); -webkit-background-clip: text; background-clip: text;
              -webkit-text-fill-color: transparent; color: transparent; }
.lead { font-size: clamp(18px, 2.2vw, 21px); color: var(--soft); font-weight: 300; line-height: 1.6; }
.muted { color: var(--soft); }
.small { font-size: 14px; color: var(--soft); line-height: 1.55; }
.fine { font-size: 13px; color: var(--faint); line-height: 1.5; }
.prose { font-size: 18px; line-height: 1.75; color: #2b2b30; }
.prose p, .prose ul, .prose ol, .prose blockquote, .prose table { margin-bottom: 20px; }
.prose h2 { font-size: clamp(24px, 3vw, 32px); margin: 44px 0 14px; }
.prose h3 { font-size: 21px; margin: 32px 0 10px; }
.prose ul, .prose ol { padding-left: 24px; }
.prose li { margin-bottom: 8px; }
.prose a { text-decoration: underline; text-underline-offset: 3px; }
.prose blockquote { border-left: 3px solid var(--cobalt); padding: 6px 0 6px 20px; color: var(--soft); font-size: 19px; }
.prose table { width: 100%; border-collapse: collapse; font-size: 15px; }
.prose th, .prose td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.prose th { font-weight: 700; color: var(--ink); background: var(--light); }
.prose .callout { background: var(--off); border-radius: 16px; padding: 20px 24px; margin: 26px 0; font-size: 17px; }
.prose sup a { text-decoration: none; font-weight: 700; color: var(--cobalt); }

/* =============================================================== buttons */
.btn-x { display: inline-flex; align-items: center; justify-content: center; gap: 8px;
         font-family: inherit; font-size: 15px; font-weight: 600; line-height: 1.2;
         border-radius: var(--pill); padding: 15px 30px; border: 0; cursor: pointer;
         text-decoration: none; white-space: nowrap; position: relative;
         transition: transform .25s var(--ease), box-shadow .3s ease, background .3s ease, color .2s ease; }
.btn-x:hover { text-decoration: none; }
.btn-x .arr { transition: transform .25s var(--ease); display: inline-block; }
.btn-x:hover .arr { transform: translateX(4px); }
.btn-lg { font-size: 17px; padding: 18px 36px; }
.btn-block { width: 100%; }

/* The dark pill Jake likes: purple halo, a comet running round its edge,
   a sheen across it on hover. */
.trail-wrap { display: inline-flex; position: relative; border-radius: var(--pill); isolation: isolate; }
.trail-border { position: absolute; inset: -2px; border-radius: var(--pill); overflow: hidden; z-index: 0;
                pointer-events: none; }
.trail-spin { position: absolute; inset: -250% -20%; animation: trail-rotate 3s linear infinite;
              background: conic-gradient(from 0deg, transparent, transparent 35%, #2563eb 50%, #2dd4bf 58%, #f59e0b 66%, transparent 75%, transparent); }
.trail-wrap > .btn-x, .trail-wrap > .btn { z-index: 1; }
@keyframes trail-rotate { to { transform: rotate(1turn); } }
.btn-dark { background: var(--ink); color: #fff; overflow: hidden; }
.btn-dark::before { content: ""; position: absolute; inset: 0; border-radius: inherit;
                    background: linear-gradient(90deg, transparent, rgba(255,255,255,.16), transparent);
                    transform: translateX(-100%); transition: transform .6s ease; }
.btn-dark:hover::before { transform: translateX(100%); }
.btn-dark:hover { background: #2a2a2a; color: #fff; transform: scale(1.03); }
.btn-glow { box-shadow: 0 0 24px rgba(13,148,136, .40), 0 0 48px rgba(13,148,136, .18); }
.btn-glow:hover { box-shadow: 0 0 30px rgba(13,148,136, .50), 0 0 60px rgba(13,148,136, .25); }

.btn-grad { background: var(--grad-btn); color: #fff; box-shadow: 0 4px 20px rgba(37,99,235, .25); }
.btn-grad:hover { color: #fff; transform: scale(1.05); box-shadow: 0 8px 32px rgba(37,99,235, .35); }
.btn-outline { background: transparent; color: var(--cobalt); padding-left: 18px; padding-right: 18px; }
.btn-outline:hover { color: var(--teal-deep); }
.btn-outline .arr-down { display: inline-block; transition: transform .25s var(--ease); }
.btn-outline:hover .arr-down { transform: translateY(3px); }
.btn-outline-grad { background: transparent; color: var(--ink); border: 2px solid var(--line-strong); }
.btn-outline-grad:hover { color: var(--cobalt); border-color: var(--cobalt); box-shadow: 0 4px 20px rgba(37,99,235, .15); }
.btn-outline-light { background: transparent; color: var(--soft); border: 2px solid var(--line-strong); }
.btn-outline-light:hover { color: var(--ink); border-color: var(--ink); }
.btn-night-outline { background: rgba(255,255,255,.04); color: #fff; border: 1px solid rgba(255,255,255,.2); }
.btn-night-outline:hover { color: #fff; background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.4); }
.text-link { display: inline-flex; align-items: center; gap: 8px; color: var(--cobalt); font-size: 15px;
             font-weight: 600; transition: gap .25s var(--ease), color .2s ease; }
.text-link:hover { gap: 12px; color: var(--teal-deep); text-decoration: none; }
/* An icon dropped inline (a link, a chip, a badge) is text-sized. Without
   this an SVG with no width is 300px wide, which is a pink slash across a
   card. */
.text-link svg, .badge-glass svg, .live-chip svg, .tag svg, .btn-x svg, .btn svg,
.pill-s svg, .hero-note svg { width: 1em; height: 1em; flex-shrink: 0; }

/* The older button, for the forms and pages that still use it. Primary
   wears the dark glowing pill; ghost is an outline pill. */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px;
       font-family: inherit; font-weight: 600; font-size: 17px; cursor: pointer;
       border-radius: var(--pill); padding: 15px 28px; min-height: 54px; border: 2px solid transparent;
       text-decoration: none; position: relative; overflow: hidden;
       transition: transform .25s var(--ease), box-shadow .3s ease, background .3s ease, color .2s ease; }
.btn:hover { text-decoration: none; }
.btn.primary { background: var(--ink); color: #fff; width: 100%;
               box-shadow: 0 0 24px rgba(13,148,136, .35), 0 0 48px rgba(13,148,136, .14); }
.btn.primary:hover { background: #2a2a2a; color: #fff; transform: scale(1.02);
                     box-shadow: 0 0 30px rgba(13,148,136, .5), 0 0 60px rgba(13,148,136, .22); }
.btn.primary::after { content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%;
                      background: linear-gradient(120deg, transparent, rgba(255,255,255,.22), transparent);
                      transform: skewX(-20deg); animation: sheen 6s ease-in-out infinite; }
@keyframes sheen { 0%, 70% { left: -60%; } 90%, 100% { left: 130%; } }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn.ghost:hover { border-color: var(--ink); color: var(--ink); }
.btn.navy, .btn.grad { background: var(--grad-btn); color: #fff; border: 0; }
.btn.navy:hover, .btn.grad:hover { color: #fff; transform: scale(1.03); }

/* ============================================================== sections */
.section { padding: 112px 0; position: relative; }
.section.tight { padding: 72px 0; }
.section.off { background: var(--off); }
.section.light { background: linear-gradient(180deg, #fafbfc, #f0f4f8); }
.section.fade-down { background: linear-gradient(180deg, #fff, #fafbfc); }
.section.fade-up { background: linear-gradient(180deg, #fafbfc, #fff); }
@media (max-width: 768px) { .section { padding: 80px 0; } .section.tight { padding: 56px 0; } .sec-head { margin-bottom: 40px; } }

/* A night band: near-black with coloured light pooled in it. */
.night { background: linear-gradient(180deg, var(--night), var(--night-2)); color: var(--on-night);
         position: relative; overflow: hidden; }
.night h1, .night h2, .night h3, .night h4 { color: #fff; }
.night .section-p, .night .lead, .night .muted, .night .small { color: var(--on-night-soft); }
.night a:not(.btn-x):not(.btn) { color: #93c5fd; }
.night a:not(.btn-x):not(.btn):hover { color: #fff; }
.night-glow { position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(ellipse 60% 50% at 50% 38%, rgba(37,99,235, .20), transparent 70%),
              radial-gradient(ellipse 45% 40% at 10% 100%, rgba(37,99,235, .12), transparent 70%),
              radial-gradient(ellipse 45% 40% at 92% 100%, rgba(245,158,11, .10), transparent 70%); }
.night-glow.violet { animation: bgPulse 8s ease-in-out infinite;
  background: radial-gradient(ellipse 50% 45% at 50% 45%, rgba(15,118,110, .16), transparent 70%),
              radial-gradient(ellipse 40% 40% at 8% 90%, rgba(59,130,246, .12), transparent 70%),
              radial-gradient(ellipse 40% 40% at 92% 10%, rgba(13,148,136, .12), transparent 70%); }
@keyframes bgPulse { 0%, 100% { opacity: .8; } 50% { opacity: 1; } }
.night > .container { z-index: 2; }
/* Particles rising through a night band. */
.particle { position: absolute; bottom: -10px; width: 4px; height: 4px; border-radius: 50%; opacity: 0;
            background: linear-gradient(135deg, #60a5fa, #0f766e); animation: floatParticle 22s linear infinite; }
.particle:nth-child(1) { left: 12%; animation-delay: 0s; }
.particle:nth-child(2) { left: 28%; animation-delay: 5s; animation-duration: 26s; }
.particle:nth-child(3) { left: 47%; animation-delay: 9s; }
.particle:nth-child(4) { left: 63%; animation-delay: 2s; animation-duration: 28s; }
.particle:nth-child(5) { left: 78%; animation-delay: 12s; }
.particle:nth-child(6) { left: 91%; animation-delay: 7s; animation-duration: 24s; }
@keyframes floatParticle { 0% { opacity: 0; transform: translateY(0) scale(0); } 10% { opacity: 1; transform: translateY(-10vh) scale(1); }
                           90% { opacity: 1; } 100% { opacity: 0; transform: translateY(-100vh) scale(0); } }

/* ====================================================== live starfield */
/* A fixed canvas the script in _stars.html draws on: above the section
   backgrounds, under the header and every overlay, never in the way of a
   tap. It is removed under reduced motion, so nothing here needs a rule. */
.starfield { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 5;
             pointer-events: none; mix-blend-mode: normal; }
/* Content above the stars where a star over a word would look like dirt:
   inputs, buttons and the calendar card. */
.form-card, .intake-flow, .btn-x, .btn, .compare-wrap, .window, .wf-journey, .wf-info { position: relative; z-index: 6; }
.trail-wrap { z-index: 6; }

/* ======================================================= ambient backdrop */
/* Soft blobs of colour drifting behind a hero. They live inside a layer that
   clips them, so nothing hanging off an edge can widen the page. */
.mesh { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.mesh .blob { position: absolute; border-radius: 50%; }
.mesh .b1 { width: 460px; height: 460px; top: -110px; left: -130px;
            background: radial-gradient(circle, rgba(37,99,235,.18) 0, rgba(37,99,235,.06) 35%, transparent 65%);
            animation: meshDrift1 14s ease-in-out infinite; }
.mesh .b2 { width: 420px; height: 420px; top: 18%; right: -150px;
            background: radial-gradient(circle, rgba(245,158,11,.16) 0, rgba(245,158,11,.05) 35%, transparent 65%);
            animation: meshDrift2 18s ease-in-out infinite; }
.mesh .b3 { width: 400px; height: 400px; bottom: -130px; left: 6%;
            background: radial-gradient(circle, rgba(45,212,191,.17) 0, rgba(45,212,191,.05) 35%, transparent 65%);
            animation: meshDrift3 16s ease-in-out infinite; }
.mesh .b4 { width: 340px; height: 340px; top: 4%; right: 22%;
            background: radial-gradient(circle, rgba(37,99,235,.09) 0, rgba(245,158,11,.07) 40%, transparent 65%);
            animation: meshDrift4 20s ease-in-out infinite; }
.mesh .b5 { width: 300px; height: 300px; top: 44%; left: -60px;
            background: radial-gradient(circle, rgba(245,158,11,.10) 0, rgba(45,212,191,.07) 40%, transparent 65%);
            animation: meshDrift5 12s ease-in-out infinite; }
@keyframes meshDrift1 { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(30px, 24px) scale(1.08); } }
@keyframes meshDrift2 { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-28px, 18px) scale(.94); } }
@keyframes meshDrift3 { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(22px, -20px) scale(1.1); } }
@keyframes meshDrift4 { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-18px, 26px) scale(1.05); } }
@keyframes meshDrift5 { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(16px, -14px) scale(.92); } }

/* Constellations and shooting stars are drawn on the canvas in _stars.html. */

/* ================================================================== hero */
.hero-x { position: relative; overflow: hidden; text-align: center;
          padding: 96px 0 96px; background: linear-gradient(180deg, #fafbfc, #f0f4f8); }
.hero-x .container { z-index: 2; }
.hero-x .hero-eyebrow { color: var(--cobalt); font-size: 12px; font-weight: 600; letter-spacing: .14em;
                        text-transform: uppercase; margin-bottom: 22px; display: block; }
.hero-x h1 { font-size: clamp(44px, 7.4vw, 92px); font-weight: 800; letter-spacing: -.02em;
             line-height: 1.04; max-width: 1000px; margin: 0 auto; }
.ft .hero-x h1 { letter-spacing: -.045em; line-height: 1.02; }
/* "Turning": a touch of air after the r so "rn" never reads as "m". */
.hero-x h1 .rn { letter-spacing: .03em; }
.hero-x h1 .accent { background: var(--grad-hero); background-size: 200% 100%;
                     -webkit-background-clip: text; background-clip: text;
                     -webkit-text-fill-color: transparent; color: transparent;
                     padding-bottom: .06em; }
.typed { white-space: nowrap; }
/* The sliding trade word: a window one line tall that the words slide
   through. Each word carries its own gradient, because a word mid-slide is
   composited on its own and would not pick up the parent's clipped one. */
.slide-slot { display: inline-block; position: relative; overflow: hidden; vertical-align: bottom;
              padding-bottom: .1em; margin-bottom: -.1em; text-align: left; }
.slide-word { display: inline-block; white-space: nowrap; }
.slide-word .ch { display: inline-block; background-image: var(--grad-hero); background-repeat: no-repeat;
                  -webkit-background-clip: text; background-clip: text;
                  -webkit-text-fill-color: transparent; color: transparent; will-change: transform, opacity; }
@media (max-width: 600px) { .hero-x h1 .accent { font-size: .82em; } }
.caret { display: inline-block; width: .06em; margin-left: .03em; font-weight: 300;
         -webkit-text-fill-color: #2dd4bf; color: #2dd4bf; animation: blink .8s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.hero-x .hero-sub { font-size: clamp(17px, 2vw, 21px); font-weight: 300; color: var(--soft);
                    line-height: 1.6; max-width: 640px; margin: 22px auto 40px; }
.hero-ctas { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 18px; }
.hero-note { margin-top: 18px; font-size: 14px; color: var(--soft); }
.hero-note a { font-weight: 600; }
.hero-stats { display: flex; justify-content: center; flex-wrap: wrap; gap: 20px 56px; margin-top: 56px; }
.hstat { text-align: center; min-width: 120px; }
.hstat .v { display: block; font-size: 40px; font-weight: 800; letter-spacing: -.03em; line-height: 1.1;
            background: linear-gradient(90deg, #2563eb, #2dd4bf 30%, #f59e0b 50%, #2dd4bf 70%, #2563eb);
            background-size: 200% 100%; -webkit-background-clip: text; background-clip: text;
            -webkit-text-fill-color: transparent; color: transparent; font-variant-numeric: tabular-nums; }
.hstat .l { display: block; font-size: 13px; font-weight: 500; color: var(--soft); margin-top: 4px; }
@media (max-width: 600px) {
  .hero-x { padding: 60px 0 68px; }
  .hero-x h1 { font-size: clamp(36px, 11vw, 46px); }
  .hero-ctas { flex-direction: column; align-items: stretch; }
  .hero-ctas .trail-wrap, .hero-ctas .btn-x { width: 100%; }
  .hero-ctas .btn-x { font-size: 17px; white-space: normal; }
  .hero-stats { gap: 18px 22px; margin-top: 44px; }
  .hstat { min-width: 0; flex: 1 1 40%; }
  .hstat .v { font-size: 30px; }
}
/* A shorter hero for inner pages. */
.hero-x.page { padding: 88px 0 80px; }
.hero-x.page h1 { font-size: clamp(40px, 6.4vw, 76px); }
@media (max-width: 600px) { .hero-x.page { padding: 56px 0 56px; } }

/* =========================================================== status light */
.live-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--green);
            flex-shrink: 0; box-shadow: 0 0 0 0 rgba(16,185,129,.5);
            animation: livepulse 1.6s ease-out infinite, liveblink 1.6s ease-in-out infinite; }
@keyframes livepulse { 0% { box-shadow: 0 0 0 0 rgba(16,185,129,.5); } 70% { box-shadow: 0 0 0 10px rgba(16,185,129,0); } 100% { box-shadow: 0 0 0 0 rgba(16,185,129,0); } }
@keyframes liveblink { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .25; transform: scale(.75); } }
.live-chip { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px; border-radius: var(--pill);
             background: rgba(16,185,129,.08); border: 1px solid rgba(16,185,129,.25); color: #047857;
             font-size: 13px; font-weight: 600; }
.night .live-chip { background: rgba(16,185,129,.12); border-color: rgba(16,185,129,.35); color: #6ee7b7; }
.badge-glass { display: inline-flex; align-items: center; gap: 9px; padding: 10px 20px; border-radius: var(--pill);
               background: rgba(37,99,235,.20); border: 1px solid rgba(37,99,235,.40); color: #93c5fd;
               font-size: 13px; font-weight: 600; animation: badgePulse 2s ease-in-out infinite; }
@keyframes badgePulse { 0%, 100% { box-shadow: 0 0 20px rgba(37,99,235,.25); } 50% { box-shadow: 0 0 40px rgba(37,99,235,.45); } }
.tag { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; letter-spacing: .1em;
       text-transform: uppercase; padding: 5px 12px; border-radius: var(--pill);
       background: rgba(37,99,235,.08); color: var(--cobalt-deep); border: 1px solid rgba(37,99,235,.18); }
.tag.green { background: rgba(16,185,129,.08); color: #047857; border-color: rgba(16,185,129,.25); }
.tag.cyan { background: rgba(245,158,11,.08); color: #115e59; border-color: rgba(245,158,11,.3); }
.tag.violet { background: rgba(13,148,136,.08); color: #0f766e; border-color: rgba(13,148,136,.25); }
.tag.grey { background: var(--off); color: var(--soft); border-color: var(--line); }
.tag.night { background: rgba(255,255,255,.06); color: rgba(255,255,255,.7); border-color: rgba(255,255,255,.12); }

/* ================================================================= cards */
.card { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 28px;
        box-shadow: var(--sh); transition: transform .35s var(--ease), box-shadow .35s ease, border-color .35s ease; }
.fcard { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 34px 30px;
         position: relative; display: flex; flex-direction: column; gap: 12px; color: var(--ink);
         transition: transform .4s var(--ease), box-shadow .4s ease, border-color .4s ease; }
a.fcard { font-weight: 400; }
a.fcard:hover, .fcard.lift:hover { color: var(--ink); text-decoration: none; transform: translateY(-8px);
                                   box-shadow: var(--sh-lift); border-color: rgba(37,99,235,.2); }
.fcard p { color: var(--soft); font-size: 15px; line-height: 1.65; }
.fcard .text-link { margin-top: auto; padding-top: 6px; font-size: 14px; }
.fcard .tag { align-self: flex-start; }
.ico-tile { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; flex-shrink: 0;
            background: var(--grad-tint); color: var(--cobalt); transition: transform .4s var(--ease); }
.ico-tile svg { width: 26px; height: 26px; }
.fcard:hover .ico-tile { transform: scale(1.1); }
.ico-tile.sm { width: 44px; height: 44px; border-radius: 12px; }
.ico-tile.sm svg { width: 21px; height: 21px; }
.ico-tile.cyan { background: linear-gradient(135deg, rgba(245,158,11,.14), rgba(99,102,241,.10)); color: #0f766e; }
.ico-tile.violet { background: linear-gradient(135deg, rgba(13,148,136,.14), rgba(37,99,235,.08)); color: var(--teal-deep); }
.ico-tile.green { background: linear-gradient(135deg, rgba(16,185,129,.14), rgba(245,158,11,.08)); color: #059669; }
.ico-tile.amber { background: linear-gradient(135deg, rgba(245,158,11,.16), rgba(37,99,235,.07)); color: #d97706; }
.ico-tile.night { background: rgba(255,255,255,.08); color: #93c5fd; }
.grid-2, .grid-3, .grid-4 { display: grid; gap: 22px; }
@media (min-width: 720px) { .grid-2 { grid-template-columns: 1fr 1fr; } .grid-4 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 720px) { .grid-3 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1025px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-4 { grid-template-columns: repeat(4, 1fr); } }
.split { display: grid; gap: 56px; align-items: center; }
@media (min-width: 1025px) { .split { grid-template-columns: 1fr 1fr; gap: 80px; } .split.rev > :first-child { order: 2; } }

/* Stats strip: numbers between hairlines. */
.stats-strip { background: #fff; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 56px 0; }
.stats-row { display: flex; align-items: center; justify-content: space-around; gap: 24px; max-width: 1100px; margin: 0 auto; padding: 0 24px; }
.stat { text-align: center; flex: 1; }
.stat .v { display: block; font-size: 42px; font-weight: 800; letter-spacing: -.03em; line-height: 1.1;
           background: var(--grad-text); -webkit-background-clip: text; background-clip: text;
           -webkit-text-fill-color: transparent; color: transparent; font-variant-numeric: tabular-nums; }
.stat .l { display: block; font-size: 14px; font-weight: 500; color: var(--soft); margin-top: 6px; }
.stat-div { width: 1px; height: 60px; background: var(--line); flex-shrink: 0; }
@media (max-width: 768px) {
  .stats-row { flex-direction: column; gap: 22px; }
  .stat-div { width: 60px; height: 1px; }
  .stat .v { font-size: 34px; }
}

/* Industry numbers with their sources, for pages with none of their own. */
.industry-stats { padding: 44px 0 48px; }
.industry-title { text-align: center; font-size: 12px; font-weight: 700; letter-spacing: .14em;
                  text-transform: uppercase; color: var(--cobalt); margin-bottom: 26px; }
.industry-stats .stat .l { max-width: 230px; margin-left: auto; margin-right: auto; line-height: 1.45; }
.stat .src { display: inline-block; margin-top: 8px; font-size: 12px; font-weight: 600; color: var(--faint); }
.stat .src:hover { color: var(--cobalt); }

/* A browser window around a product picture. */
.window { background: #fff; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden;
          box-shadow: var(--sh-deep); transform: perspective(1000px) rotateY(-5deg) rotateX(2deg);
          transition: transform .6s var(--ease); }
.window:hover { transform: none; }
@media (max-width: 1024px) { .window { transform: none; } }
.window-bar { display: flex; align-items: center; gap: 8px; padding: 13px 18px; background: var(--off);
              border-bottom: 1px solid var(--line); font-size: 13px; font-weight: 600; color: var(--soft); }
.window-bar i { width: 12px; height: 12px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.window-bar i:nth-child(1) { background: #ff6b6b; } .window-bar i:nth-child(2) { background: #ffe66d; }
.window-bar i:nth-child(3) { background: #4ecb71; margin-right: 8px; }
.window-body { padding: 22px; }
.kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
.kpi { background: var(--off); border-radius: 12px; padding: 14px 16px; }
.kpi .k { font-size: 12px; color: var(--soft); font-weight: 500; }
.kpi .v { font-size: 26px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; margin-top: 2px; }
.kpi .d { font-size: 12px; font-weight: 700; color: var(--green); margin-top: 2px; }
.bars { display: flex; align-items: flex-end; gap: 8px; height: 90px; padding: 0 4px; }
.bars i { flex: 1; border-radius: 6px 6px 2px 2px; background: linear-gradient(180deg, rgba(37,99,235,.25), rgba(37,99,235,.06));
          transform-origin: bottom; animation: barUp 1.2s var(--ease) both; }
.bars i.on { background: linear-gradient(180deg, #2563eb, rgba(37,99,235,.5)); }
@keyframes barUp { from { transform: scaleY(0); } }
.pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.pill-s { font-size: 12px; font-weight: 600; padding: 6px 12px; border-radius: var(--pill); display: inline-flex; align-items: center; gap: 6px; }
.pill-s.green { background: rgba(16,185,129,.1); color: #047857; }
.pill-s.pink { background: rgba(37,99,235,.1); color: var(--cobalt-deep); }
.rowlist { display: grid; gap: 8px; }
.rowlist .r { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 10px 12px;
              border-radius: 12px; background: var(--off); font-size: 14px; }
.rowlist .r .who { font-weight: 700; }
.rowlist .r .what { color: var(--soft); }
.rowlist .r .when { font-size: 12px; color: var(--faint); font-variant-numeric: tabular-nums; }
.rowlist .r.hot { background: rgba(37,99,235,.07); }
/* "What lands on your phone" on the home page: the owner's two real texts as
   bubbles, then the rules for when the phone buzzes. */
.lands .lands-step + .lands-step { margin-top: 18px; }
.lands .lands-when { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-bottom: 8px;
  font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--soft); }
.lands .lands-when b { color: var(--ink); font-weight: 800; }
.lands .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--faint); flex-shrink: 0; }
.lands .dot.hot { background: var(--cobalt); }
.lands .bubble { background: var(--off); border-radius: 16px 16px 16px 4px; padding: 12px 14px;
  font-size: 14px; line-height: 1.45; }
.lands .bubble.hot { background: rgba(37,99,235,.07); box-shadow: inset 0 0 0 1px rgba(37,99,235,.18); }
.lands .bubble .head { font-weight: 800; }
.lands .bubble ul { list-style: none; margin: 4px 0 0; padding: 0; }
.lands .bubble li { padding-left: 14px; position: relative; }
.lands .bubble li::before { content: "\2022"; position: absolute; left: 2px; }
.lands .bubble .cb { margin-top: 8px; font-weight: 700; font-variant-numeric: tabular-nums; }
.lands .lands-note { margin: 8px 0 0; font-size: 13px; line-height: 1.5; color: var(--soft); }
.lands .lands-rules { list-style: none; margin: 18px 0 0; padding: 14px 0 0; border-top: 1px solid var(--line);
  display: grid; gap: 10px; font-size: 13px; line-height: 1.5; color: var(--soft); }
.lands .lands-rules li { display: grid; grid-template-columns: 88px 1fr; gap: 12px; }
.lands .lands-rules .t { font-weight: 700; color: var(--ink); }

/* Dark glass card, for night bands. */
.glass { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.09); border-radius: var(--r);
         padding: 26px; color: var(--on-night); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
         transition: transform .35s var(--ease), background .3s ease, border-color .3s ease; }
.glass p { color: var(--on-night-soft); }
.glass.lift:hover { transform: translateY(-4px); background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.16); }

/* Trade tiles on a night band. */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.tile { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: 14px; padding: 22px 14px;
        text-align: center; color: #fff; font-weight: 600; font-size: 15px; display: flex; flex-direction: column;
        align-items: center; gap: 10px; transition: transform .3s var(--ease), background .3s ease, border-color .3s ease; }
.tile svg { width: 24px; height: 24px; color: var(--tile, #93c5fd); }
.tile:hover { color: #fff; text-decoration: none; transform: translateY(-3px); background: rgba(255,255,255,.08); border-color: var(--tile, #93c5fd); }
.tile.dim { opacity: .45; cursor: default; }
.tile.dim:hover { transform: none; background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.08); }

/* ===================================================== compare table */
.compare-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--r-lg);
                border: 1px solid var(--line); background: #fff; box-shadow: var(--sh-lift); }
.compare { width: 100%; border-collapse: separate; border-spacing: 0; min-width: 640px; font-size: 15px; }
.compare th, .compare td { padding: 18px 20px; text-align: center; border-bottom: 1px solid var(--line-2); vertical-align: middle; }
.compare th:first-child, .compare td:first-child { text-align: left; font-weight: 600; color: var(--ink); }
.compare thead th { font-size: 14px; font-weight: 700; color: var(--soft); background: var(--light); padding-top: 22px; padding-bottom: 22px; }
.compare .us { background: linear-gradient(180deg, rgba(37,99,235,.05), rgba(13,148,136,.04)); }
.compare thead .us { color: var(--cobalt-deep); position: relative; }
.compare thead .us .tag { display: block; width: max-content; margin: 0 auto 6px; }
.compare tr:last-child td { border-bottom: 0; }
.yes, .no, .part { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; font-size: 15px; font-weight: 800; }
.yes { background: rgba(16,185,129,.12); color: #059669; }
.no { background: rgba(239,68,68,.10); color: #dc2626; }
.part { background: rgba(245,158,11,.12); color: #d97706; }
.compare td .note { display: block; font-size: 12px; color: var(--faint); margin-top: 4px; font-weight: 500; }

/* ========================================================= FAQ accordion */
.faq-list { display: grid; gap: 12px; max-width: 820px; margin: 0 auto; }
.faq-item { background: #fff; border: 1px solid var(--line); border-radius: 16px; overflow: hidden;
            transition: box-shadow .3s ease, border-color .3s ease; }
.faq-item[open] { box-shadow: var(--sh); border-color: rgba(37,99,235,.2); }
.faq-item summary { list-style: none; cursor: pointer; padding: 22px 60px 22px 24px; font-size: 17px; font-weight: 600;
                    position: relative; color: var(--ink); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; position: absolute; right: 22px; top: 50%; transform: translateY(-50%);
                           width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
                           background: var(--off); color: var(--cobalt); font-size: 20px; font-weight: 500;
                           transition: transform .3s var(--ease), background .3s ease; }
.faq-item[open] summary::after { transform: translateY(-50%) rotate(45deg); background: rgba(37,99,235,.1); }
.faq-item .faq-a { padding: 0 24px 22px; color: var(--soft); font-size: 16px; line-height: 1.7; }
.faq-item .faq-a p + p { margin-top: 10px; }

/* ==================================================== timeline (how it works) */
.timeline { position: relative; max-width: 960px; margin: 0 auto; padding: 10px 0; }
.timeline::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 3px; transform: translateX(-50%);
                    background: linear-gradient(180deg, #2563eb, #0d9488, #f59e0b); border-radius: 3px;
                    box-shadow: 0 0 18px rgba(13,148,136,.35); }
.tl-step { position: relative; display: grid; grid-template-columns: 1fr 64px 1fr; align-items: center; margin-bottom: 36px; }
.tl-step:last-child { margin-bottom: 0; }
.tl-node { grid-column: 2; width: 22px; height: 22px; border-radius: 50%; background: var(--grad-btn); margin: 0 auto;
           box-shadow: 0 0 0 6px #fff, 0 0 0 8px rgba(37,99,235,.25), 0 0 24px rgba(13,148,136,.5); position: relative; z-index: 1; }
.tl-card { grid-column: 1; background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 30px 30px 28px;
           box-shadow: var(--sh); position: relative; transition: transform .4s var(--ease), box-shadow .4s ease; }
.tl-step:nth-child(even) .tl-card { grid-column: 3; }
.tl-step:nth-child(even) .tl-node { grid-column: 2; grid-row: 1; }
.tl-card:hover { transform: translateY(-4px); box-shadow: var(--sh-lift); }
.tl-num { position: absolute; top: 14px; right: 22px; font-size: 64px; font-weight: 800; letter-spacing: -.04em; line-height: 1;
          color: rgba(37,99,235,.10); pointer-events: none; }
.tl-card .tag { margin-bottom: 14px; }
.tl-card h3 { font-size: 22px; margin: 12px 0 8px; }
.tl-card p { color: var(--soft); font-size: 15px; line-height: 1.65; }
@media (max-width: 800px) {
  .timeline::before { left: 18px; transform: none; }
  .tl-step, .tl-step:nth-child(even) { grid-template-columns: 40px 1fr; margin-bottom: 24px; }
  .tl-node, .tl-step:nth-child(even) .tl-node { grid-column: 1; grid-row: 1; margin: 0 auto 0 8px; width: 20px; height: 20px; }
  .tl-card, .tl-step:nth-child(even) .tl-card { grid-column: 2; grid-row: 1; padding: 24px 22px; }
  .tl-num { font-size: 48px; top: 10px; right: 16px; }
}
/* the results track */
.track { position: relative; margin-top: 18px; }
.track-bar { height: 6px; border-radius: 6px; background: linear-gradient(90deg, #2563eb, #0d9488, #f59e0b); box-shadow: 0 0 16px rgba(13,148,136,.4); }
.track-pts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 18px; }
.track-pt { position: relative; padding-top: 14px; }
.track-pt::before { content: ""; position: absolute; top: -30px; left: 0; width: 14px; height: 14px; border-radius: 50%;
                    background: #fff; border: 3px solid var(--teal-deep); box-shadow: 0 0 12px rgba(13,148,136,.5); }
.track-pt .d { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--cobalt); }
.track-pt b { display: block; font-size: 17px; margin: 4px 0 4px; }
.track-pt p { font-size: 14px; color: var(--soft); line-height: 1.55; }
@media (max-width: 700px) {
  .track-bar { display: none; }
  .track-pts { grid-template-columns: 1fr; gap: 12px; margin-top: 0; }
  .track-pt { padding: 16px 16px 16px 20px; border-left: 3px solid var(--teal-deep); background: var(--off); border-radius: 0 14px 14px 0; }
  .track-pt::before { display: none; }
}

/* ====================================================== workflow journey */
.wf-tabs { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 36px; }
.wf-tab { font: inherit; font-size: 14px; font-weight: 600; color: var(--soft); background: #fff; border: 1px solid var(--line);
          border-radius: var(--pill); padding: 10px 18px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
          transition: all .25s var(--ease); }
.wf-tab svg { width: 16px; height: 16px; }
.wf-tab:hover { border-color: var(--line-strong); color: var(--ink); }
.wf-tab[aria-selected="true"] { color: #fff; border-color: transparent; background: var(--wf, var(--grad-btn));
                                box-shadow: 0 6px 20px rgba(13,148,136,.25); }
.wf-panel { display: grid; gap: 24px; }
@media (min-width: 1025px) { .wf-panel { grid-template-columns: 1.4fr 1fr; align-items: start; } .wf-info { position: sticky; top: calc(var(--head-h) + 20px); } }
.wf-journey { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 30px; box-shadow: var(--sh-lift);
              position: relative; overflow: hidden; }
.wf-journey::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--wf, var(--grad-btn)); }
.wf-nodes { display: grid; gap: 0; }
.wf-node { display: grid; grid-template-columns: 52px 1fr; gap: 16px; align-items: start; padding: 16px 0; position: relative; opacity: .5;
           transition: opacity .4s ease, transform .4s var(--ease); }
.wf-node.on { opacity: 1; }
.wf-node .n { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: var(--off); color: var(--soft);
              position: relative; transition: all .4s var(--ease); }
.wf-node .n svg { width: 22px; height: 22px; }
.wf-node.on .n { background: var(--wf, var(--grad-btn)); color: #fff; box-shadow: 0 8px 24px rgba(13,148,136,.3); transform: scale(1.05); }
.wf-node.on .n::after { content: ""; position: absolute; inset: -4px; border-radius: 20px; border: 2px solid currentColor; opacity: .35;
                        animation: nodeRing 1.6s ease-out infinite; }
@keyframes nodeRing { from { transform: scale(1); opacity: .5; } to { transform: scale(1.35); opacity: 0; } }
.wf-node + .wf-node::before { content: ""; position: absolute; left: 25px; top: -12px; height: 24px; border-left: 2px dashed var(--line-strong); }
.wf-node.on + .wf-node.on::before, .wf-node.on::before { border-color: var(--teal-deep); animation: dashMove 1s linear infinite; }
@keyframes dashMove { to { transform: translateY(6px); } }
.wf-node b { display: block; font-size: 16px; }
.wf-node p { font-size: 14px; color: var(--soft); line-height: 1.55; }
.wf-node .who { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.wf-info { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 28px; box-shadow: var(--sh); }
.wf-info h3 { font-size: 22px; margin-bottom: 10px; }
.wf-info p { color: var(--soft); font-size: 15px; line-height: 1.65; }
.wf-info ul { list-style: none; margin-top: 18px; display: grid; gap: 10px; }
.wf-info li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; }
.wf-info li::before { content: "\2713"; flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
                      font-size: 12px; font-weight: 800; background: rgba(16,185,129,.12); color: #059669; }
.wf-info .status { margin-top: 18px; }
.wf-bar { height: 4px; border-radius: 4px; background: var(--off); overflow: hidden; margin-top: 16px; }
.wf-bar i { display: block; height: 100%; width: 0; background: var(--wf, var(--grad-btn)); transition: width .3s linear; }

/* ============================================================= the orb */
.orb-wrap { position: relative; width: 240px; height: 240px; margin: 36px auto 22px; display: grid; place-items: center; }
.orb-ambient { position: absolute; width: 300px; height: 300px; border-radius: 50%; filter: blur(40px);
               background: radial-gradient(circle, rgba(45,212,191,.55), rgba(245,158,11,.18) 50%, transparent 70%);
               animation: ambientPulse 4s ease-in-out infinite; }
@keyframes ambientPulse { 0%, 100% { transform: scale(1); opacity: .8; } 50% { transform: scale(1.3); opacity: 1; } }
.orb { position: relative; width: 132px; height: 132px; border-radius: 50%; display: grid; place-items: center; color: #fff;
       background: radial-gradient(circle at 35% 30%, #5eead4, #0f766e 55%, #042f2e);
       box-shadow: 0 0 0 2px rgba(255,255,255,.15), 0 0 40px rgba(20,184,166,.7), 0 0 90px rgba(20,184,166,.35), inset 0 0 30px rgba(255,255,255,.15);
       transition: transform .3s var(--ease), box-shadow .3s ease; z-index: 2; }
.orb svg { width: 44px; height: 44px; }
.orb:hover { color: #fff; transform: scale(1.06); box-shadow: 0 0 0 2px rgba(255,255,255,.25), 0 0 60px rgba(20,184,166,.9), 0 0 120px rgba(20,184,166,.45), inset 0 0 30px rgba(255,255,255,.2); }
.orb-ring { position: absolute; border-radius: 50%; border: 1px solid rgba(45,212,191,.45); animation: orbRing 3s ease-out infinite; z-index: 1; }
.orb-ring.r1 { width: 132px; height: 132px; }
.orb-ring.r2 { width: 132px; height: 132px; animation-delay: 1s; }
.orb-ring.r3 { width: 132px; height: 132px; animation-delay: 2s; }
@keyframes orbRing { from { transform: scale(1); opacity: .8; } to { transform: scale(1.9); opacity: 0; } }
.ai-particle { position: absolute; border-radius: 50%; width: 6px; height: 6px; background: linear-gradient(135deg, #60a5fa, #5eead4);
               box-shadow: 0 0 10px rgba(96,165,250,.7); animation: particleFloat 6s ease-in-out infinite; z-index: 1; }
.ai-particle.p1 { top: 20px; left: 30px; } .ai-particle.p2 { top: 60px; right: 20px; animation-delay: 1s; background: linear-gradient(135deg, #fbbf24, #5eead4); }
.ai-particle.p3 { bottom: 30px; left: 20px; animation-delay: 2s; width: 8px; height: 8px; } .ai-particle.p4 { bottom: 40px; right: 40px; animation-delay: 3s; }
.ai-particle.p5 { top: 110px; left: 0; animation-delay: 4s; width: 5px; height: 5px; background: linear-gradient(135deg, #fbbf24, #818cf8); }
.ai-particle.p6 { top: 0; right: 80px; animation-delay: 5s; }
@keyframes particleFloat { 0%, 100% { transform: translate(0, 0); opacity: .5; } 50% { transform: translate(8px, -14px); opacity: 1; } }
/* The orb is a button when she can talk in the browser. */
button.orb { border: 0; padding: 0; cursor: pointer; font: inherit; }
.orb .orb-ico { display: none; }
.orb .orb-ico svg { width: 44px; height: 44px; }
[data-state="idle"] .orb .start, [data-state="done"] .orb .start, [data-state="error"] .orb .start { display: block; }
[data-state="wait"] .orb .wait { display: block; animation: spinSlow 1.2s linear infinite; }
[data-state="live"] .orb .end { display: block; transform: rotate(135deg); }
@keyframes spinSlow { to { transform: rotate(1turn); } }
/* Live: the orb goes red and the rings pulse faster; the ambient glow
   follows whoever is talking (teal when she is, blue when you are). */
[data-state="live"] .orb { background: radial-gradient(circle at 35% 30%, #f87171, #dc2626 55%, #450a0a);
  box-shadow: 0 0 0 2px rgba(255,255,255,.2), 0 0 40px rgba(220,38,38,.75), 0 0 90px rgba(220,38,38,.35), inset 0 0 30px rgba(255,255,255,.15); }
[data-state="live"] .orb:hover { box-shadow: 0 0 0 2px rgba(255,255,255,.3), 0 0 60px rgba(220,38,38,.9), 0 0 120px rgba(220,38,38,.45), inset 0 0 30px rgba(255,255,255,.2); }
[data-state="live"] .orb-ring { border-color: rgba(248,113,113,.55); animation-duration: 1.6s; }
[data-state="live"][data-mode="speaking"] .orb-ambient { background: radial-gradient(circle, rgba(45,212,191,.7), rgba(245,158,11,.2) 50%, transparent 70%); animation-duration: 1.6s; }
[data-state="live"][data-mode="listening"] .orb-ambient { background: radial-gradient(circle, rgba(96,165,250,.6), rgba(45,212,191,.2) 50%, transparent 70%); }
[data-state="wait"] .orb { opacity: .85; }
.orb-status { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 14px; margin-top: 12px; }
.orb-mode { font-size: 13px; font-weight: 600; color: var(--on-night-soft); display: inline-flex; align-items: center; gap: 8px; }
.orb-mode::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #34d399; animation: liveblink 1.2s ease-in-out infinite; }
[data-mode="speaking"] .orb-mode::before { background: #2dd4bf; }
.orb-timer { font-size: 15px; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; }
.orb-end { font: inherit; font-size: 14px; font-weight: 700; color: #fff; background: #dc2626; border: 0; border-radius: var(--pill);
           padding: 10px 20px; cursor: pointer; box-shadow: 0 4px 18px rgba(220,38,38,.45); transition: transform .2s var(--ease), background .2s ease; }
.orb-end:hover { background: #b91c1c; transform: scale(1.04); }
.orb-err { color: #fecaca; margin-top: 10px; }
.night .fine { color: rgba(255,255,255,.4); margin-top: 10px; }
/* The trade beside the orb (2026-10-01): a column on a phone, a row from
   720px. The chevron is a pseudo-element, so no image and nothing for the
   CSP to allow. */
.orb-row { display: flex; flex-direction: column; align-items: center; }
@media (min-width: 720px) {
  .orb-row { flex-direction: row; justify-content: center; gap: 40px; }
  .orb-row .orb-trade-wrap { margin: 36px 0 22px; }
}
.orb-trade-wrap { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin: 0 0 22px; text-align: left; }
.orb-trade-wrap > span:first-child { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--teal-light); }
.orb-trade-wrap .sel { position: relative; display: block; }
.orb-trade-wrap .sel::after { content: "\25BE"; position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
                              color: #fff; pointer-events: none; font-size: 14px; }
.orb-trade { appearance: none; -webkit-appearance: none; font: inherit; font-weight: 700; font-size: 17px; color: #fff;
             background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .22); border-radius: var(--pill);
             padding: 12px 44px 12px 18px; min-width: 260px; cursor: pointer; }
.orb-trade:focus-visible { outline: 3px solid rgba(94, 234, 212, .5); outline-offset: 2px; }
.orb-trade:disabled { opacity: .55; cursor: default; }
.orb-trade option { color: #111; }
/* The live box under the orb (2026-10-01): a framed panel with a header
   whose dot pulses while the call runs (a status light, so it stays on
   under reduced motion as a steady green), the state in words, and the
   lines as they're said. */
.orb-live { max-width: 640px; margin: 28px auto 0; text-align: left; overflow: hidden;
            border: 1px solid rgba(255, 255, 255, .14); border-radius: 16px;
            background: rgba(255, 255, 255, .05); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.orb-live-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; color: #fff;
                 border-bottom: 1px solid rgba(255, 255, 255, .1); font-size: 12px; letter-spacing: .08em;
                 text-transform: uppercase; }
.orb-live-head b { font-weight: 800; }
.orb-live-state { margin-left: auto; text-transform: none; letter-spacing: 0; font-size: 13px; color: var(--on-night-soft); }
.orb-live-dot { width: 9px; height: 9px; border-radius: 50%; background: #64748b; flex-shrink: 0; }
.orb-live[data-state="wait"] .orb-live-dot { background: #fbbf24; }
.orb-live[data-state="live"] .orb-live-dot { background: #22c55e; box-shadow: 0 0 0 0 rgba(34, 197, 94, .6);
                                             animation: livePulse 1.4s ease-out infinite; }
@keyframes livePulse { to { box-shadow: 0 0 0 10px rgba(34, 197, 94, 0); } }
.orb-live .orb-script { margin: 0; max-width: none; padding: 14px 16px; min-height: 150px; max-height: 360px;
                        overflow-y: auto; align-content: start; }
.orb-script .line { animation: lineIn .3s ease both; }
@keyframes lineIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.orb-lines-hint { color: var(--on-night-soft); font-size: 15px; margin: 0; }

.orb-cta { text-align: center; }
.orb-cta .arrow { display: block; font-size: 22px; color: var(--teal-light); animation: arrowBounce 1s ease-in-out infinite; }
@keyframes arrowBounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.orb-cta .say { font-size: 17px; font-weight: 600; background: linear-gradient(90deg, #60a5fa, #5eead4, #fbbf24, #5eead4, #60a5fa);
                background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
                animation: gradientShift 3s linear infinite; }
@keyframes gradientShift { from { background-position: 0 0; } to { background-position: 300% 0; } }
.orb-num { display: inline-block; margin-top: 10px; font-size: clamp(26px, 5vw, 36px); font-weight: 800; color: #fff; letter-spacing: -.01em;
           font-variant-numeric: tabular-nums; }
.orb-num:hover { color: #fff; }
.orb-script { margin: 28px auto 0; max-width: 560px; display: grid; gap: 10px; }
.orb-script .line { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: baseline; text-align: left;
                    font-size: 15px; color: var(--on-night-soft); }
.orb-script .line b { color: #fff; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; padding-top: 2px; }
.orb-script .line.you b { color: #fbbf24; }
.orb-script .line.cora b { color: #93c5fd; }

/* ====================================================== closing CTA band */
.cta-band { position: relative; overflow: hidden; text-align: center; padding: 128px 0;
            background: linear-gradient(180deg, #fafbfc, #f0f4f8); }
.cta-band::before, .cta-band::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; }
.cta-band::before { width: 600px; height: 600px; top: -240px; left: -180px;
                    background: radial-gradient(circle, rgba(96,165,250,.14), transparent 65%); animation: ctaGlow 15s ease-in-out infinite; }
.cta-band::after { width: 520px; height: 520px; bottom: -220px; right: -160px;
                   background: radial-gradient(circle, rgba(13,148,136,.12), transparent 65%); animation: ctaGlow 15s ease-in-out infinite 5s; }
@keyframes ctaGlow { 0%, 100% { transform: scale(1); opacity: .6; } 50% { transform: scale(1.2); opacity: 1; } }
.cta-band .container { max-width: 760px; }
.cta-band .section-p { margin: 0 auto 36px; }
.cta-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.trust-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px; margin-top: 34px;
             font-size: 14px; color: var(--soft); }
.trust-row span { display: inline-flex; align-items: center; gap: 8px; }
.trust-row span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--grad-btn); }
.cta-band.night-cta { background: linear-gradient(180deg, var(--night), var(--night-2)); }
.cta-band.night-cta h2 { color: #fff; }
.cta-band.night-cta .section-p, .cta-band.night-cta .trust-row { color: var(--on-night-soft); }
@media (max-width: 768px) {
  .cta-band { padding: 88px 0; }
  .cta-btns { flex-direction: column; align-items: stretch; }
  .cta-btns .btn-x, .cta-btns .trail-wrap { width: 100%; }
  .cta-btns .btn-x { white-space: normal; }
}

/* ================================================================ footer */
.site-footer { background: #fff; border-top: 1px solid var(--line); padding: 60px 0 40px; position: relative; z-index: 2; }
.site-footer .container { max-width: 1100px; display: flex; flex-direction: column; gap: 30px; }
.foot-top { display: grid; gap: 36px; }
@media (min-width: 900px) { .foot-top { grid-template-columns: 1.3fr 1fr 1fr 1fr; } }
.foot-top p { color: var(--soft); font-size: 14px; line-height: 1.6; max-width: 320px; margin-top: 12px; }
.foot-col h4 { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink); margin-bottom: 14px; }
.foot-col a { display: block; color: var(--soft); font-weight: 500; font-size: 14px; padding: 5px 0; }
.foot-col a:hover { color: var(--ink); }
.mail-chip { display: inline-flex; align-items: center; gap: 8px; background: var(--off); border-radius: 10px;
             padding: 9px 14px; font-size: 14px; font-weight: 600; color: var(--ink); margin-top: 16px; }
.mail-chip:hover { background: rgba(37,99,235,.08); color: var(--cobalt); }
.mail-chip svg { width: 16px; height: 16px; }
.foot-legal { border-top: 1px solid var(--line); padding-top: 24px; display: flex; flex-wrap: wrap; justify-content: space-between;
              gap: 10px 24px; font-size: 13px; color: var(--faint); }
.foot-legal a { color: var(--faint); font-weight: 500; }
.foot-legal a:hover { color: var(--ink); }

/* The older one-line footer, for the pages that still carry it. */
.foot { margin-top: 64px; padding: 24px 0 40px; border-top: 1px solid var(--line);
        display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 14px; color: var(--soft); }
.foot a { color: var(--soft); font-weight: 600; }
.foot a:hover { color: var(--ink); }

/* ============================================================ older parts */
/* The top bar the thank-you and error pages still use. */
.bar { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 20px 0; }
.bar-links { display: flex; align-items: center; gap: 18px; font-size: 15px; }
.bar-links a { color: var(--soft); font-weight: 600; }
.bar-links a.pill { color: #fff; background: var(--ink); border-radius: var(--pill); padding: 9px 18px; }
.bar-links a.pill:hover { background: #2a2a2a; color: #fff; text-decoration: none; }
@media (max-width: 560px) { .bar-links .hide-sm { display: none; } }

.sec { padding: 56px 0 0; }
.hero { display: grid; gap: 34px; padding: 30px 0 20px; align-items: start; position: relative; }
@media (min-width: 880px) { .hero { grid-template-columns: 1.05fr .95fr; gap: 48px; padding: 56px 0 30px; } }
.hero-copy p.lead { margin: 18px 0 22px; }
.card.navy { background: var(--ink); color: #fff; border-color: var(--ink); }
.card.navy .muted, .card.navy .small { color: rgba(255,255,255,.7); }
.card.navy a { color: #93c5fd; }
.card.navy h2 { color: #fff; }

/* The live demo number. */
.live { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 22px; padding: 16px 20px;
        border-radius: 16px; background: rgba(16,185,129,.07); border: 1px solid rgba(16,185,129,.22); text-align: left; }
.live .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--green); flex-shrink: 0;
             animation: livepulse 1.6s ease-out infinite, liveblink 1.6s ease-in-out infinite; }
.live .t { font-size: 15px; color: var(--soft); flex: 1 1 200px; }
.live a.num { font-size: 22px; font-weight: 800; color: var(--ink); letter-spacing: -.01em; white-space: nowrap; }
.live a.num:hover { color: var(--cobalt); }

.proof { display: grid; gap: 12px; margin-top: 26px; }
@media (min-width: 720px) { .proof { grid-template-columns: 1fr 1fr; } }
.proof div { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 16px 18px;
             font-size: 15px; color: var(--soft); line-height: 1.45; }
.proof b { display: block; color: var(--ink); font-size: 17px; margin-bottom: 2px; }
.proof div.count { background: var(--ink); border-color: var(--ink); color: rgba(255,255,255,.72); }
.proof div.count b { color: #fff; font-size: 26px; letter-spacing: -.02em; line-height: 1.1; }
.proof div.count b .n { font-variant-numeric: tabular-nums; background: var(--grad-night);
                        -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

.steps { display: grid; gap: 0; }
.step { display: grid; grid-template-columns: 64px 1fr; gap: 14px; padding: 18px 0; border-top: 1px solid var(--line); }
.step:first-child { border-top: 0; padding-top: 4px; }
.step .t { font-weight: 800; color: var(--cobalt); font-size: 17px; font-variant-numeric: tabular-nums; padding-top: 2px; }
.step b { display: block; font-size: 18px; margin-bottom: 4px; }
.step p { color: var(--soft); font-size: 16px; line-height: 1.5; }

.nots { list-style: none; display: grid; gap: 10px; }
.nots li { display: flex; gap: 12px; align-items: flex-start; font-size: 17px; color: var(--soft); line-height: 1.5; }
.nots li::before { content: "\2713"; flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; margin-top: 1px;
                   display: grid; place-items: center; font-size: 13px; font-weight: 800;
                   background: rgba(16,185,129,.12); color: #059669; }
.nots b { color: var(--ink); }
.quotes { display: grid; gap: 14px; }
@media (min-width: 720px) { .quotes { grid-template-columns: 1fr 1fr; } }
.quote { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 24px; box-shadow: var(--sh); }
.quote p { font-size: 18px; line-height: 1.55; }
.quote .who { margin-top: 12px; font-size: 14px; color: var(--soft); font-weight: 600; }
.price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; margin: 8px 0 4px; }
.price .n { font-size: 50px; font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.price .per { font-size: 17px; color: rgba(255,255,255,.72); }
.price-notes { list-style: none; display: grid; gap: 8px; margin-top: 16px; font-size: 16px; }
.price-notes li::before { content: "\2713"; color: #93c5fd; font-weight: 800; margin-right: 10px; }

.thanks { max-width: 640px; padding: 48px 0; }
.thanks .num { display: inline-block; font-size: 30px; font-weight: 800; color: var(--ink); margin: 10px 0;
               font-variant-numeric: tabular-nums; }
.thanks .num:hover { color: var(--cobalt); }

/* ================================================================= forms */
.form-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 28px;
             box-shadow: var(--sh-lift); text-align: left; }
.form-card .title { font-size: 22px; font-weight: 800; line-height: 1.2; letter-spacing: -.02em; }
.form-card .under { font-size: 15px; color: var(--soft); margin-top: 8px; line-height: 1.55; }
.form-card .small a, .form-card .under a { font-weight: inherit; }
form.demo { display: grid; gap: 14px; margin-top: 20px; }
label { display: block; font-size: 14px; font-weight: 600; color: var(--soft); margin-bottom: 6px; }
label .opt { color: var(--faint); font-weight: 500; }
/* Text boxes carry a 1px line in the site's gradient (Jake, 2026-10-01:
   "an rgb line around the writing sections, very thin"): the gradient
   paints the border box and the field colour the padding box. Selects keep
   a plain border, since their chevron is a background image. */
input, select {
  width: 100%; font: inherit; font-size: 17px; color: var(--ink); background: var(--off);
  border: 1.5px solid transparent; border-radius: var(--r-sm); padding: 13px 16px; min-height: 52px;
  appearance: none; -webkit-appearance: none; transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
input:not([type="checkbox"]):not([type="radio"]), textarea {
  border: 1px solid transparent;
  background: linear-gradient(var(--off), var(--off)) padding-box, var(--grad) border-box;
}
input:not([type="checkbox"]):not([type="radio"]):focus, textarea:focus {
  background: linear-gradient(#fff, #fff) padding-box, var(--grad) border-box;
}
select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'%3E%3Cpath fill='%236e6e73' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
         background-repeat: no-repeat; background-position: right 14px center; padding-right: 40px; }
input:focus, select:focus { border-color: var(--teal-deep); background: #fff; outline: none; box-shadow: 0 0 0 4px rgba(13,148,136,.12); }
input::placeholder, textarea::placeholder { color: #a1a1a6; }
textarea { width: 100%; font: inherit; font-size: 16px; color: var(--ink); background: var(--off); border: 1.5px solid transparent;
           border-radius: var(--r-sm); padding: 12px 16px; resize: vertical; }
textarea:focus { border-color: var(--teal-deep); background: #fff; outline: none; box-shadow: 0 0 0 4px rgba(13,148,136,.12); }
.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.seg input { position: absolute; opacity: 0; width: 0; height: 0; }
.seg label { margin: 0; cursor: pointer; text-align: center; font-size: 16px; font-weight: 600; color: var(--ink);
             border: 1.5px solid var(--line); border-radius: var(--r-sm); padding: 12px 10px; background: #fff; }
.seg input:checked + label { border-color: var(--ink); background: var(--ink); color: #fff; }
.seg input:focus-visible + label { outline: 3px solid rgba(13,148,136,.5); outline-offset: 2px; }
.honey { position: absolute; left: -5000px; width: 1px; height: 1px; overflow: hidden; }
.flash { background: #fff7ed; border: 1px solid #fed7aa; color: var(--ink); font-weight: 600; padding: 12px 16px;
         border-radius: var(--r-sm); margin: 16px 0; font-size: 15px; }
.flash.err { background: #fef2f2; border-color: #fecaca; }
.check { display: flex; align-items: center; gap: 10px; font-size: 15px; color: var(--soft); font-weight: 500; margin-top: 4px; }
.check input { width: 20px; height: 20px; min-height: 0; padding: 0; border: 0; border-radius: 4px;
               appearance: auto; -webkit-appearance: auto; accent-color: var(--teal-deep); flex-shrink: 0; }
.pw-wrap { position: relative; }
.pw-wrap input { padding-right: 52px; }
.pw-eye { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); background: none; border: 0;
          color: var(--soft); cursor: pointer; padding: 8px; border-radius: 8px; display: flex; }
.pw-eye:hover { color: var(--ink); background: #fff; }

/* sign-in */
.login { display: grid; gap: 28px; padding: 36px 0 72px; align-items: start; }
@media (min-width: 880px) { .login { grid-template-columns: 1fr 440px; gap: 56px; padding-top: 64px; } }
.login-side h1 { font-size: clamp(34px, 5vw, 52px); }
.login-side .lead { margin: 14px 0 6px; }
.login .quotes { grid-template-columns: 1fr; margin-top: 22px; }

/* ============================================= the calendar, inside the site */
html.cal-open { overflow: hidden; }
.cal-overlay { position: fixed; inset: 0; z-index: 9999; background: rgba(0, 0, 0, .55);
               -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
               display: flex; align-items: center; justify-content: center; animation: fadeIn .25s ease; }
.cal-panel { background: #fff; width: 100%; height: 100%; display: flex; flex-direction: column; overflow: hidden;
             animation: slideUp .3s cubic-bezier(.16, 1, .3, 1); }
@media (min-width: 720px) {
  .cal-overlay { padding: 24px; }
  .cal-panel { width: min(1000px, 100%); height: min(860px, 100%); border-radius: 20px; box-shadow: 0 24px 80px rgba(0,0,0,.25); }
}
@keyframes fadeIn { from { opacity: 0; } }
@keyframes slideUp { from { opacity: 0; transform: translateY(24px) scale(.97); } }
.cal-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px;
           border-bottom: 1px solid var(--line); font-weight: 700; flex: none; }
.cal-bar .cal-t { display: flex; align-items: center; gap: 10px; }
.cal-close { font: inherit; font-weight: 600; font-size: 15px; color: var(--ink); background: var(--off); border: 0;
             border-radius: var(--pill); padding: 9px 18px; cursor: pointer; min-height: 42px; }
.cal-close:hover { background: var(--ink); color: #fff; }
.cal-body { flex: 1; overflow: auto; -webkit-overflow-scrolling: touch; }
.cal-body iframe { display: block; width: 100%; height: 100%; min-height: 720px; border: 0; }

/* ============================================== the stack beside a headline */
.hero-side { display: grid; gap: 18px; align-content: start; }
.hero-side .callflow { margin-top: 0; }

/* =================================================== "Describe my issue" */
.intake { text-align: left; }
.intake-bubble { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px; padding: 18px 20px;
                 border-radius: var(--r); text-decoration: none; color: var(--ink); background: #fff;
                 border: 1px solid var(--line); box-shadow: var(--sh-lift); font-weight: 400;
                 transition: transform .3s var(--ease), box-shadow .3s ease, border-color .3s ease; }
.intake-bubble:hover { text-decoration: none; color: var(--ink); transform: translateY(-3px);
                       border-color: rgba(37,99,235,.25); box-shadow: 0 24px 60px rgba(37,99,235,.12); }
.intake-bubble .ico { width: 50px; height: 50px; border-radius: 15px; background: var(--grad-btn); color: #fff;
                      display: grid; place-items: center; flex: none; box-shadow: 0 6px 18px rgba(37,99,235,.3); }
.intake-bubble .ico svg { width: 24px; height: 24px; }
.intake-bubble .t { font-size: 14px; line-height: 1.5; font-weight: 400; color: var(--soft); }
.intake-bubble .t b { display: block; color: var(--ink); font-size: 19px; line-height: 1.25; margin-bottom: 2px; font-weight: 700; }
.intake-bubble .go { color: var(--cobalt); display: grid; place-items: center; flex: none; transition: transform .25s var(--ease); }
.intake-bubble .go svg { width: 22px; height: 22px; }
.intake-bubble:hover .go { transform: translateX(4px); }
.intake-flow { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 26px; box-shadow: var(--sh-lift); }
.intake-head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.intake-back { font: inherit; font-size: 14px; font-weight: 600; color: var(--soft); background: none; border: 0; cursor: pointer; padding: 6px 2px; flex: none; }
.intake-back:hover { color: var(--cobalt); }
.intake-bar { flex: 1; height: 6px; border-radius: 999px; background: var(--off); overflow: hidden; }
.intake-bar i { display: block; height: 100%; width: 25%; border-radius: 999px; background: var(--grad-btn); transition: width .3s var(--ease); }
.intake-count { font-size: 13px; font-weight: 600; color: var(--faint); flex: none; font-variant-numeric: tabular-nums; }
.intake-page { display: grid; gap: 14px; }
.intake-page h3 { font-size: 21px; font-weight: 700; line-height: 1.25; }
.intake-page h3:focus, .intake-page h3:focus-visible { outline: none; }
.intake-page .intake-sub { font-size: 14px; color: var(--soft); line-height: 1.5; margin-top: -8px; }
.intake-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.intake-tel { position: relative; }
.intake-tel .cc { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); display: flex; align-items: center;
                  gap: 7px; pointer-events: none; font-size: 17px; font-weight: 600; color: var(--ink); }
.intake-tel .cc svg { width: 24px; height: 16px; border-radius: 3px; flex: none; box-shadow: 0 0 0 1px rgba(0,0,0,.12); }
.intake-tel .cc::after { content: ""; width: 1px; height: 24px; background: var(--line-strong); margin-left: 3px; }
.intake-tel input { padding-left: 86px; }
.intake-go { margin-top: 4px; }
.intake-err { background: #fef2f2; border: 1px solid #fecaca; color: var(--ink); font-weight: 600; font-size: 14px;
              padding: 10px 14px; border-radius: var(--r-sm); margin-bottom: 14px; }
.intake-fine { font-size: 13px; color: var(--faint); line-height: 1.5; }
/* After "Yes, call me now" (2026-10-07): a phone, what happens next, and
   the calendar one tap off for anyone who would rather pick a time. */
.intake-thanks { display: grid; justify-items: center; gap: 10px; text-align: center; padding: 10px 0 4px; }
.intake-thanks-ico { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center;
                     background: var(--grad-btn); color: #fff; box-shadow: var(--sh-lift); }
.intake-thanks-ico svg { width: 26px; height: 26px; }
.intake-thanks h3 { font-size: 22px; font-weight: 800; letter-spacing: -.01em; }
.intake-thanks h3:focus, .intake-thanks h3:focus-visible { outline: none; }
.intake-thanks p { font-size: 15.5px; color: var(--soft); line-height: 1.55; max-width: 36ch; }
.intake-thanks p b { color: var(--ink); white-space: nowrap; }
.intake-thanks .intake-fine { font-size: 14px; }
/* Page one, once a number or an email is in: Continue lit up. The pulse is
   a status ("ready"), so it survives reduced motion. */
.btn.primary.pulse { animation: readyPulse 1.6s ease-in-out infinite !important; }
@keyframes readyPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(16,185,129,.45), 0 0 24px rgba(153,69,255,.35); }
                        50% { box-shadow: 0 0 0 10px rgba(16,185,129,0), 0 0 30px rgba(20,184,166,.5); } }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips.stack { display: grid; gap: 8px; }
.chips input { position: absolute; opacity: 0; width: 0; height: 0; }
.chips label { margin: 0; cursor: pointer; font-size: 15px; font-weight: 600; color: var(--ink); border: 1.5px solid var(--line);
               border-radius: var(--pill); background: #fff; padding: 10px 16px; min-height: 46px; display: flex;
               align-items: center; gap: 8px; transition: border-color .15s ease, background .15s ease, color .15s ease; }
.chips.stack label { border-radius: var(--r-sm); justify-content: flex-start; }
.chips label span { font-size: 13px; font-weight: 500; color: var(--faint); }
.chips label:hover { border-color: var(--cobalt); }
.chips input:checked + label { border-color: var(--ink); background: var(--ink); color: #fff; }
.chips input:checked + label span { color: rgba(255,255,255,.7); }
.chips input:focus-visible + label { outline: 3px solid rgba(13,148,136,.5); outline-offset: 2px; }
@media (max-width: 420px) {
  .intake-row-2 { grid-template-columns: 1fr; }
  .intake-bubble { gap: 12px; padding: 16px; }
  .intake-bubble .ico { width: 44px; height: 44px; }
  .intake-bubble .t b { font-size: 17px; }
  .intake-flow { padding: 20px; }
}

/* ========================================== the booking dropdown */
/* The four intake pages drop down from under the header, over a dimmed
   page, wherever a "Book My AI Growth Plan" button is pressed. The header
   stays on top; the page behind stops scrolling while it is open. */
html.intake-open { overflow: hidden; }
.intake-drop { position: fixed; top: var(--head-h); left: 0; right: 0; bottom: 0; z-index: 990;
               display: flex; justify-content: center; align-items: flex-start; padding: 14px 16px 24px; }
.intake-scrim { position: absolute; inset: 0; background: rgba(5, 10, 24, .45);
                -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
                opacity: 0; transition: opacity .25s ease; }
.intake-panel { position: relative; width: min(560px, 100%); max-height: 100%; overflow-y: auto;
                -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
                background: #fff; border-radius: var(--r-lg); box-shadow: var(--sh-deep);
                transform: translateY(-28px); opacity: 0;
                transition: transform .38s var(--ease), opacity .25s ease; }
.intake-drop.in .intake-scrim { opacity: 1; }
.intake-drop.in .intake-panel { transform: none; opacity: 1; }
.intake-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
                     padding: 22px 24px 0; }
.intake-title { font-size: 20px; font-weight: 800; letter-spacing: -.02em; }
.intake-lede { font-size: 14px; color: var(--soft); margin-top: 4px; line-height: 1.5; }
.intake-close { flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%; border: 0; cursor: pointer;
                background: var(--off); color: var(--ink); display: grid; place-items: center;
                transition: background .2s ease; }
.intake-close svg { width: 18px; height: 18px; }
.intake-close:hover { background: var(--line-strong); }
.intake-panel .intake-flow { border: 0; box-shadow: none; border-radius: 0; padding: 18px 24px 24px; }
@media (max-width: 600px) {
  .intake-drop { padding: 0; }
  .intake-panel { width: 100%; border-radius: 0 0 var(--r-lg) var(--r-lg); }
  .intake-panel-head { padding: 18px 18px 0; }
  .intake-panel .intake-flow { padding: 16px 18px 22px; }
}

/* ====================================================== caught-call loop */
.callflow { margin-top: 18px; background: #fff; border: 1px solid var(--line); border-radius: var(--r);
            padding: 8px 6px; box-shadow: var(--sh); text-align: left; }
.callflow .cf { display: grid; grid-template-columns: 34px 48px 1fr; align-items: center; gap: 10px; padding: 11px 12px;
                border-radius: 12px; color: var(--soft); font-size: 15px; line-height: 1.4; opacity: .45; }
.callflow .cf b { color: var(--ink); }
.callflow .cf .t { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--faint); font-size: 13px; }
.callflow .cf .i { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center;
                   background: var(--grad-tint); color: var(--cobalt); }
.callflow .cf .i svg { width: 16px; height: 16px; }
.callflow .cf:nth-child(1) { animation: cfstep 7.5s infinite; }
.callflow .cf:nth-child(2) { animation: cfstep 7.5s infinite 2.5s; }
.callflow .cf:nth-child(3) { animation: cfstep 7.5s infinite 5s; }
@keyframes cfstep { 0%, 100% { opacity: .45; background: transparent; transform: translateX(0); }
                    6%, 30% { opacity: 1; background: rgba(37,99,235,.05); transform: translateX(4px); }
                    36% { opacity: .45; background: transparent; transform: translateX(0); } }
.callflow .cf:nth-child(1) .i { animation: ring 7.5s infinite; }
@keyframes ring { 0%, 2%, 30%, 100% { transform: rotate(0); } 4% { transform: rotate(-14deg); } 6% { transform: rotate(14deg); }
                  8% { transform: rotate(-12deg); } 10% { transform: rotate(12deg); } 12% { transform: rotate(-8deg); }
                  14% { transform: rotate(8deg); } 16% { transform: rotate(0); } }
.callflow .cf:nth-child(3) .i { background: rgba(16,185,129,.12); color: #059669; }
.night .callflow { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.09); box-shadow: none; }
.night .callflow .cf { color: var(--on-night-soft); animation-name: cfstepNight; }
.night .callflow .cf b { color: #fff; }
.night .callflow .cf .t { color: rgba(255,255,255,.45); }
.night .callflow .cf .i { background: rgba(255,255,255,.08); color: #93c5fd; }
.night .callflow .cf:nth-child(3) .i { background: rgba(16,185,129,.18); color: #34d399; }
@keyframes cfstepNight { 0%, 100% { opacity: .45; background: transparent; transform: translateX(0); }
                         6%, 30% { opacity: 1; background: rgba(255,255,255,.06); transform: translateX(4px); }
                         36% { opacity: .45; background: transparent; transform: translateX(0); } }

/* =================================================== testimonial strip */
.tstrip-wrap { margin-top: 10px; }
.tstrip-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 12px; margin-bottom: 18px; }
.tstrip { position: relative; overflow: hidden; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); padding: 10px 0 24px;
          -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
                  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.tstrip-track { display: flex; width: max-content; animation: tmarquee 70s linear infinite; }
.tstrip:hover .tstrip-track, .tstrip:focus-within .tstrip-track { animation-play-state: paused; }
.tstrip-run { display: flex; gap: 20px; padding-right: 20px; }
@keyframes tmarquee { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
.tcard { flex: 0 0 auto; width: min(380px, 80vw); margin: 0; background: #fff; border: 1px solid rgba(37,99,235,.16);
         border-radius: var(--r); padding: 24px; box-shadow: var(--sh); display: flex; flex-direction: column;
         justify-content: space-between; gap: 16px; position: relative;
         transition: transform .3s var(--ease), box-shadow .3s ease, border-color .3s ease; }
.tcard:hover, .tcard:focus { outline: none; transform: translateY(-4px); box-shadow: var(--sh-lift); border-color: rgba(37,99,235,.35); }
.tcard:focus-visible { outline: 3px solid rgba(13,148,136,.5); outline-offset: 2px; }
.tcard blockquote { margin: 0; font-size: 16px; line-height: 1.6; color: var(--ink); }
.tcard blockquote::before { content: "\201C"; background: var(--grad-text); -webkit-background-clip: text; background-clip: text;
                            -webkit-text-fill-color: transparent; font-weight: 800; }
.tcard blockquote::after { content: "\201D"; background: var(--grad-text); -webkit-background-clip: text; background-clip: text;
                           -webkit-text-fill-color: transparent; font-weight: 800; }
.tcard figcaption { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; font-size: 13px; line-height: 1.3; }
.tcard .tname { font-weight: 700; color: var(--ink); }
.tcard .tbiz { color: var(--soft); font-weight: 600; }
.tcard .ttrade { color: var(--cobalt-deep); font-weight: 600; text-transform: capitalize; background: rgba(37,99,235,.07);
                 padding: 3px 10px; border-radius: var(--pill); }
.tcard .tbiz::before { content: "\00b7\00a0"; color: var(--faint); }

/* ================================================================== blog */
.blog-grid { display: grid; gap: 24px; }
@media (min-width: 720px) { .blog-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1025px) { .blog-grid { grid-template-columns: repeat(3, 1fr); } }
.post-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; display: flex; flex-direction: column;
             color: var(--ink); font-weight: 400; transition: transform .4s var(--ease), box-shadow .4s ease, border-color .4s ease; }
.post-card:hover { color: var(--ink); text-decoration: none; transform: translateY(-6px); box-shadow: var(--sh-lift); border-color: rgba(37,99,235,.2); }
.post-hero { height: 150px; position: relative; display: flex; align-items: flex-end; padding: 16px; }
.post-hero.t0 { background: linear-gradient(135deg, #2563eb, #0d9488); }
.post-hero.t1 { background: linear-gradient(135deg, #0d9488, #f59e0b); }
.post-hero.t2 { background: linear-gradient(135deg, #f59e0b, #10b981); }
.post-hero.t3 { background: linear-gradient(135deg, #f59e0b, #2563eb); }
.post-hero .tag { background: rgba(255,255,255,.2); color: #fff; border-color: rgba(255,255,255,.3); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.post-body { padding: 22px 24px 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.post-body h3 { font-size: 20px; line-height: 1.3; }
.post-body p { color: var(--soft); font-size: 15px; line-height: 1.6; }
.post-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; color: var(--faint); margin-top: auto; padding-top: 8px; }
.cat-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 40px; }
.cat-btn { font: inherit; font-size: 14px; font-weight: 600; color: var(--soft); background: #fff; border: 1px solid var(--line);
           border-radius: var(--pill); padding: 9px 16px; cursor: pointer; transition: all .25s var(--ease); }
.cat-btn:hover { border-color: var(--line-strong); color: var(--ink); }
.cat-btn[aria-pressed="true"] { background: var(--grad-btn); color: #fff; border-color: transparent; box-shadow: 0 4px 16px rgba(37,99,235,.25); }
.sources { margin-top: 44px; padding-top: 24px; border-top: 1px solid var(--line); font-size: 14px; color: var(--soft); }
.sources h3 { font-size: 15px; margin-bottom: 10px; }
.sources ol { padding-left: 20px; display: grid; gap: 6px; }
.byline { display: flex; align-items: center; gap: 12px; margin-top: 40px; padding: 20px; background: var(--off); border-radius: 16px; font-size: 15px; }
.byline .av { width: 44px; height: 44px; border-radius: 50%; background: var(--grad-btn); color: #fff; display: grid; place-items: center; font-weight: 800; flex-shrink: 0; }
.in-post-cta { margin-top: 40px; padding: 34px; border-radius: var(--r-lg); background: linear-gradient(180deg, #fafbfc, #f0f4f8); border: 1px solid var(--line); text-align: center; }
.in-post-cta h3 { font-size: 24px; margin-bottom: 8px; }
.in-post-cta p { color: var(--soft); font-size: 15px; margin-bottom: 20px; }

/* --------------------------------------------------- blog: soft and glass
   Jake, 2026-09-28: "use neumorphism and glassmorphism and add designs where
   it would fit", for /blog and the posts and nowhere else. Every rule below
   sits under .blog-soft (the sections under the blog's heroes) or on a class
   only a post's head uses (.post-head and its parts), so no other page moves.

   Two materials:
   - Soft (neumorphic): a surface the colour of the canvas, raised by two
     soft shadows (light from the top left, shade to the bottom right) or
     pressed by the same pair inset. It only reads on a mid-light canvas, so
     .blog-soft sections are a cool #eef2f7. Post cards, the filter pills,
     .neu-card, .neu-steps, the blockquote, the sources and the byline.
   - Glass: frosted white over colour. Frost needs something behind it, so
     every glass piece brings its own faint cobalt / teal / amber glow in a
     pseudo-element under it. .stat-glass, figure.viz, aside.callout.glass,
     the booking card, and the headline pane on a post's gradient head.

   House rules: body text at 4.5:1 or better on the canvas and on the glass
   (--soft is darkened in here for that; the site's #6e6e73 only just makes
   it on the canvas); a state is never shown by a shadow alone (a pressed
   pill also turns cobalt and fills its dot); focus rings on anything you
   can tab to; hover lifts stop under reduced motion, but a card's hover
   also changes its shadow, rim and title colour, so it still shows;
   a browser without backdrop-filter gets solid near-white panels.

   What a post may use inside body_html (the contract with the post files;
   neither side renames these):
     .stat-glass > .sg (b + span)          frosted stat cards over a glow
     .neu-cards > .neu-card[.good|.bad]    raised tiles (h4 + p)
     ol.neu-steps > li (b + text)          numbered raised steps, connected
     figure.viz (svg + figcaption)         a glass panel for one chart; SVG
                                           colour classes c1 c2 c3 c4 ink
                                           soft ln ln-c1 glassrect
     aside.callout.glass (b + text)        a frosted takeaway
     blockquote                            pressed into the canvas        */

.blog-soft {
  --canvas: #eef2f7;
  --surface: #f2f5fa;
  --soft: #55555c;                                   /* 6.5:1 on the canvas */
  --neu-hi: rgba(255, 255, 255, .92);
  --neu-lo: rgba(148, 163, 184, .45);
  --neu-edge: rgba(255, 255, 255, .72);
  --raise: -7px -7px 18px var(--neu-hi), 8px 8px 20px var(--neu-lo);
  --raise-sm: -4px -4px 10px var(--neu-hi), 5px 5px 12px var(--neu-lo);
  --press: inset 3px 3px 7px var(--neu-lo), inset -3px -3px 7px var(--neu-hi);
  --glass: linear-gradient(145deg, rgba(255, 255, 255, .68), rgba(255, 255, 255, .54));
  --glass-edge: rgba(255, 255, 255, .8);
  --glass-blur: blur(18px) saturate(160%);
  --glass-sh: 0 12px 36px rgba(30, 41, 59, .09), inset 0 1px 0 rgba(255, 255, 255, .95);
  /* Three soft ellipses that stay inside their box, then blurred, so a
     glow never shows the box it was painted in. */
  --glow: radial-gradient(34% 58% at 22% 42%, rgba(37, 99, 235, .34), transparent),
          radial-gradient(34% 58% at 78% 38%, rgba(20, 184, 166, .34), transparent),
          radial-gradient(38% 52% at 52% 70%, rgba(245, 158, 11, .30), transparent);
  /* Numbers on glass: the three accents at their deepest, so every part
     of a figure clears 4.5:1 on white. */
  --grad-deep: linear-gradient(90deg, #1d4ed8, #0f766e 58%, #b45309);
  background: var(--canvas);
}
/* The last canvas before the closing band melts into its lighter top. */
.blog-soft-end { background: linear-gradient(180deg, var(--canvas) 0, var(--canvas) calc(100% - 180px), #fafbfc 100%); }
.blog-soft a:focus-visible, .blog-soft button:focus-visible { outline: 3px solid var(--cobalt); outline-offset: 4px; }

/* ---- the index: raised cards, pills that press in */
.blog-soft .cat-row { gap: 12px; margin-bottom: 44px; }
.blog-soft .cat-btn { display: inline-flex; align-items: center; gap: 9px; padding: 10px 18px; color: var(--soft);
                      background: var(--surface); border: 1px solid var(--neu-edge); box-shadow: var(--raise-sm);
                      transition: color .2s ease, box-shadow .25s ease, background-color .25s ease; }
/* A ring that fills when the pill is pressed: the state is in the colour
   and the dot, not only in the shadow. The ring is there on every pill so
   pressing one never shifts the row. */
.blog-soft .cat-btn::before { content: ""; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
                              box-shadow: inset 0 0 0 1.5px #8b8b93; }
.blog-soft .cat-btn:hover { color: var(--ink); border-color: var(--neu-edge); }
.blog-soft .cat-btn[aria-pressed="true"] { color: var(--cobalt-deep); background: var(--canvas); border-color: transparent;
                                           box-shadow: var(--press); }
.blog-soft .cat-btn[aria-pressed="true"]::before { background: var(--cobalt); box-shadow: 0 0 0 3px rgba(37, 99, 235, .18); }

.blog-soft .blog-grid { gap: 28px; }
.blog-soft .post-card { background: var(--surface); border: 1px solid var(--neu-edge); box-shadow: var(--raise);
                        transition: transform .4s var(--ease), box-shadow .3s ease, opacity .8s var(--ease); }
/* Hover lifts, and also deepens the shadow, tints the rim and turns the
   title cobalt, so with reduced motion (no lift) a hover still shows. */
.blog-soft .post-card:hover { transform: translateY(-5px); box-shadow: -9px -9px 22px var(--neu-hi), 12px 14px 30px rgba(148, 163, 184, .6);
                              border-color: rgba(37, 99, 235, .22); }
.blog-soft .post-card h3 { transition: color .3s ease; }
.blog-soft .post-card:hover h3 { color: var(--cobalt-deep); }
/* The picture is set into the card like a tile, with the rings of a phone
   ringing behind a small glass disc. */
.blog-soft .post-hero { height: 140px; margin: 10px 10px 0; padding: 14px; border-radius: 14px; overflow: hidden; isolation: isolate;
                        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22); }
.blog-soft .post-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: repeating-radial-gradient(circle at 82% 34%, rgba(255, 255, 255, .26) 0 1.2px, transparent 1.8px 19px);
  -webkit-mask-image: radial-gradient(circle at 82% 34%, #000 0, #000 18%, transparent 60%);
          mask-image: radial-gradient(circle at 82% 34%, #000 0, #000 18%, transparent 60%); }
.blog-soft .post-hero::after { content: ""; position: absolute; width: 58px; height: 58px; left: calc(82% - 29px); top: calc(34% - 29px);
  border-radius: 50%; pointer-events: none; border: 1px solid rgba(255, 255, 255, .5);
  background: radial-gradient(circle, rgba(255, 255, 255, .95) 0 5px, rgba(255, 255, 255, 0) 6px), rgba(255, 255, 255, .16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 10px 24px rgba(15, 23, 42, .18);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
/* The tag is a chip of light glass with dark type, legible on every tone. */
.blog-soft .post-hero .tag { position: relative; z-index: 1; color: var(--ink); background: rgba(255, 255, 255, .8);
                             border-color: rgba(255, 255, 255, .95); box-shadow: 0 4px 14px rgba(15, 23, 42, .12);
                             -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.blog-soft .post-body { padding: 20px 22px 22px; }
.blog-soft .post-meta { color: var(--soft); }

/* ---- a post's head: gradient, orbs, rings, and a pane of frosted glass.
   The pane is light frosted glass with dark type, the site's light
   surfaces: ink and #3a3a40 clear 4.5:1 over all four tones (a navy tint
   went muddy over the amber ones). Only the back pill stays smoked. */
.post-head { text-align: center; padding: 64px 0 76px; position: relative; overflow: hidden; color: #fff; isolation: isolate; }
.post-head.t0 { background: linear-gradient(135deg, #2563eb, #0d9488); }
.post-head.t1 { background: linear-gradient(135deg, #0d9488, #f59e0b); }
.post-head.t2 { background: linear-gradient(135deg, #f59e0b, #10b981); }
.post-head.t3 { background: linear-gradient(135deg, #f59e0b, #2563eb); }
.post-head::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
                    background: linear-gradient(180deg, transparent 55%, rgba(5, 10, 24, .16)); }
.ph-orb { position: absolute; border-radius: 50%; pointer-events: none; z-index: 0;
          --o1: 20, 184, 166; --o2: 245, 158, 11; }
.ph-orb.o1 { width: 380px; height: 380px; left: calc(50% - 560px); top: -30px;
             background: radial-gradient(circle, rgba(var(--o1), .85) 0, rgba(var(--o1), .55) 42%, rgba(var(--o1), 0) 70%); }
.ph-orb.o2 { width: 420px; height: 420px; right: calc(50% - 590px); bottom: -150px;
             background: radial-gradient(circle, rgba(var(--o2), .8) 0, rgba(var(--o2), .5) 42%, rgba(var(--o2), 0) 70%); }
.post-head.t1 .ph-orb { --o1: 245, 158, 11; --o2: 37, 99, 235; }
.post-head.t2 .ph-orb { --o1: 20, 184, 166; --o2: 37, 99, 235; }
.post-head.t3 .ph-orb { --o1: 20, 184, 166; --o2: 245, 158, 11; }
.ph-rings { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: repeating-radial-gradient(circle at 78% 30%, rgba(255, 255, 255, .2) 0 1.2px, transparent 1.8px 30px);
  -webkit-mask-image: radial-gradient(circle at 78% 30%, #000 0, #000 14%, transparent 46%);
          mask-image: radial-gradient(circle at 78% 30%, #000 0, #000 14%, transparent 46%); }
.post-back { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 20px; padding: 7px 16px; border-radius: var(--pill);
             font-size: 14px; font-weight: 600; color: #fff; background: rgba(8, 14, 34, .45); border: 1px solid rgba(255, 255, 255, .32);
             -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.post-back:hover { color: #fff; background: rgba(8, 14, 34, .6); }
.post-back:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.post-head-glass { max-width: 860px; margin: 0 auto; padding: 34px 40px 30px; border-radius: 26px; position: relative;
                   background: linear-gradient(150deg, rgba(255, 255, 255, .66), rgba(255, 255, 255, .5));
                   border: 1px solid rgba(255, 255, 255, .75);
                   box-shadow: 0 24px 60px rgba(5, 10, 24, .22), inset 0 1px 0 rgba(255, 255, 255, .9);
                   -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%); }
.post-head h1 { color: var(--ink); font-size: clamp(30px, 4.6vw, 52px); max-width: 780px; margin: 16px auto 18px; text-wrap: balance; }
.post-head .post-meta { justify-content: center; color: #3a3a40; font-size: 14px; font-weight: 500; padding-top: 0; }
.post-head .tag { color: var(--cobalt-deep); background: rgba(255, 255, 255, .88); border-color: rgba(255, 255, 255, .95); }
@media (max-width: 700px) {
  .post-head { padding: 40px 0 52px; }
  .post-head-glass { padding: 24px 18px 22px; border-radius: 20px; }
  .ph-orb.o1 { width: 280px; height: 280px; left: -140px; top: -60px; }
  .ph-orb.o2 { width: 300px; height: 300px; right: -160px; bottom: -150px; }
}

/* ---- the article on the canvas */
.blog-soft .prose { color: #2b2b30; }
.blog-soft .prose a, .blog-soft .prose sup a { color: var(--cobalt-deep); }
.blog-soft .prose a:hover { color: var(--teal-dark); }
.blog-soft .prose .callout { background: var(--surface); border: 1px solid var(--neu-edge); box-shadow: var(--raise-sm); }

/* A quote is pressed into the page. */
.blog-soft .prose blockquote { position: relative; margin: 30px 0; padding: 22px 26px 22px 62px; border: 0; border-radius: 18px;
                               background: var(--canvas); box-shadow: var(--press); color: #3a3a40; font-size: 19px; line-height: 1.65; }
.blog-soft .prose blockquote::before { content: "\201C"; content: "\201C" / ""; position: absolute; left: 20px; top: 12px;
  font-family: Georgia, "Times New Roman", serif; font-size: 60px; line-height: 1; font-weight: 700; background: var(--grad-deep); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent; }
.blog-soft .prose blockquote > :last-child { margin-bottom: 0; }

/* Raised tiles: two to four options, a list, a comparison. */
.blog-soft .neu-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 20px; margin: 32px 0; }
.blog-soft .neu-cards:has(> .neu-card:nth-child(4)) { grid-template-columns: repeat(2, 1fr); }
.blog-soft .neu-card { position: relative; padding: 20px 22px; border-radius: 18px; background: var(--surface);
                       border: 1px solid var(--neu-edge); box-shadow: var(--raise); }
.blog-soft .neu-card h4 { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; font-size: 17px;
                          letter-spacing: -.015em; line-height: 1.3; }
.blog-soft .prose .neu-card p { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--soft); }
.blog-soft .prose .neu-card p + p { margin-top: 10px; }
/* A good or a bad option wears a small marked dot, a tick or a cross, so
   the colour is never the only sign. */
.blog-soft .neu-card.good h4::before, .blog-soft .neu-card.bad h4::before {
  flex: 0 0 24px; height: 24px; border-radius: 50%; display: inline-grid; place-items: center;
  font-size: 12px; font-weight: 800; line-height: 1; box-shadow: var(--press); }
.blog-soft .neu-card.good h4::before { content: "\2713"; content: "\2713" / ""; color: var(--teal-dark); background: rgba(20, 184, 166, .14); }
.blog-soft .neu-card.bad h4::before { content: "\2715"; content: "\2715" / ""; color: #b45309; background: rgba(245, 158, 11, .16); }

/* Numbered raised steps, joined by a thin line from badge to badge. */
.blog-soft .prose .neu-steps { list-style: none; padding: 0; margin: 32px 0; display: grid; gap: 18px; counter-reset: neu-step; }
.blog-soft .prose .neu-steps li { counter-increment: neu-step; position: relative; margin: 0; min-height: 76px;
  padding: 18px 22px 18px 74px; border-radius: 18px; background: var(--surface); border: 1px solid var(--neu-edge);
  box-shadow: var(--raise-sm); font-size: 16.5px; line-height: 1.6; }
.blog-soft .prose .neu-steps li::before { content: counter(neu-step); position: absolute; left: 18px; top: 18px;
  width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--canvas);
  box-shadow: var(--press); color: var(--cobalt-deep); font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; }
.blog-soft .prose .neu-steps li:not(:last-child)::after { content: ""; position: absolute; z-index: 1; left: 36px; top: 60px;
  bottom: -32px; width: 2px; border-radius: 2px; background: linear-gradient(180deg, rgba(37, 99, 235, .55), rgba(13, 148, 136, .55)); }
.blog-soft .prose .neu-steps li b { color: var(--ink); }

/* Glass: frosted white panels, each over its own glow. The glow is a
   pseudo-element two layers down and the frost one layer down, inside an
   isolated box, so the frost has colour to blur and the words sit on top. */
.blog-soft .stat-glass { position: relative; isolation: isolate; display: grid;
                         grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin: 34px 0; }
.blog-soft .stat-glass::before { content: ""; position: absolute; inset: -18px -8px; z-index: -1; border-radius: 32px;
                                 background: var(--glow); filter: blur(18px); pointer-events: none; }
.blog-soft .stat-glass .sg { display: flex; flex-direction: column; gap: 6px; padding: 20px 18px 18px; border-radius: 18px;
                             background: var(--glass); border: 1px solid var(--glass-edge); box-shadow: var(--glass-sh);
                             -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); }
.blog-soft .stat-glass .sg b { width: fit-content; font-size: clamp(28px, 3.6vw, 36px); font-weight: 800; letter-spacing: -.03em; line-height: 1.05;
  font-variant-numeric: tabular-nums; background: var(--grad-deep); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent; }
.blog-soft .stat-glass .sg span { font-size: 14px; line-height: 1.45; color: var(--soft); }

.blog-soft .prose .callout.glass, .blog-soft figure.viz, .blog-soft .in-post-cta {
  position: relative; isolation: isolate; background: transparent; border: 0; box-shadow: none; }
.blog-soft .prose .callout.glass::before, .blog-soft figure.viz::before, .blog-soft .in-post-cta::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: var(--glass); border: 1px solid var(--glass-edge); box-shadow: var(--glass-sh);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); }
.blog-soft .prose .callout.glass::after, .blog-soft figure.viz::after, .blog-soft .in-post-cta::after {
  content: ""; position: absolute; inset: -22px -10px; z-index: -2; border-radius: 34px; pointer-events: none;
  background: var(--glow); filter: blur(18px); }

/* The takeaway. (It also carries the site's dark-glass class, .glass, which
   is for night bands; everything that one sets is set back here.) */
.blog-soft .prose .callout.glass { margin: 32px 0; padding: 22px 26px; border-radius: 18px; color: #2b2b30;
  font-size: 17px; line-height: 1.65; -webkit-backdrop-filter: none; backdrop-filter: none; transition: none; }
.blog-soft .prose .callout.glass p { color: inherit; margin: 0; }
.blog-soft .prose .callout.glass p + p { margin-top: 10px; }
.blog-soft .prose .callout.glass > b:first-child { color: var(--cobalt-deep); }

/* One chart per figure, drawn with the classes below and no colours of
   its own, so every chart on the blog speaks the same palette. */
.blog-soft figure.viz { margin: 36px 0; padding: 22px 22px 16px; border-radius: 22px; }
/* Capped at 440px so a chart drawn for a phone does not blow up on a
   desktop: its text stays near the body size at every width. */
.blog-soft figure.viz svg { display: block; width: 100%; height: auto; max-width: 440px; max-height: 440px; margin: 0 auto;
                            overflow: visible; font-family: inherit; }
.blog-soft figure.viz figcaption { margin-top: 12px; font-size: 13.5px; line-height: 1.5; color: var(--soft); }
.blog-soft .viz svg .c1 { fill: var(--cobalt); }
.blog-soft .viz svg .c2 { fill: var(--teal-deep); }
.blog-soft .viz svg .c3 { fill: var(--amber); }
.blog-soft .viz svg .c4 { fill: var(--faint); fill-opacity: .45; }
.blog-soft .viz svg .ink { fill: var(--ink); }
.blog-soft .viz svg .soft { fill: var(--soft); }
.blog-soft .viz svg .ln { fill: none; stroke: var(--line-strong); }
.blog-soft .viz svg .ln-c1 { fill: none; stroke: var(--cobalt); }
.blog-soft .viz svg .glassrect { fill: rgba(255, 255, 255, .62); stroke: rgba(255, 255, 255, .95); }

/* ---- after the article */
.blog-soft .byline { gap: 16px; margin-top: 48px; padding: 20px 22px; border-radius: 20px; background: var(--surface);
                     border: 1px solid var(--neu-edge); box-shadow: var(--raise); }
.blog-soft .byline .av { width: 54px; height: 54px; border-radius: 16px; background: var(--canvas); box-shadow: var(--press); }
.byline .av .brand-js { font-size: 22px; }
.blog-soft .byline b { display: block; font-size: 16px; margin-bottom: 2px; }
.blog-soft .byline .muted { display: block; font-size: 14.5px; line-height: 1.55; }

.blog-soft .sources { margin-top: 28px; padding: 24px 26px; border: 1px solid var(--neu-edge); border-radius: 20px;
                      background: var(--surface); box-shadow: var(--raise-sm); }
.blog-soft .sources h3 { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--soft); margin-bottom: 16px; }
.blog-soft .sources ol { list-style: none; padding: 0; counter-reset: src; gap: 12px; }
.blog-soft .sources li { counter-increment: src; position: relative; min-height: 26px; padding: 2px 6px 2px 40px; line-height: 1.5;
                         border-radius: 10px; scroll-margin-top: calc(var(--head-h) + 28px); }
.blog-soft .sources li::before { content: counter(src); position: absolute; left: 0; top: 0; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center; background: var(--canvas); box-shadow: var(--press); color: var(--cobalt-deep);
  font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; }
.blog-soft .sources li a { overflow-wrap: anywhere; }
/* The source a footnote just jumped to. */
.blog-soft .sources li:target { background: rgba(37, 99, 235, .08); box-shadow: 0 0 0 2px rgba(37, 99, 235, .35); }

.blog-soft .in-post-cta { margin-top: 48px; border-radius: var(--r-lg); }
.blog-soft .in-post-cta::after { inset: -28px -12px; }

/* ---- phones */
@media (max-width: 560px) {
  .blog-soft .stat-glass { grid-template-columns: 1fr 1fr; gap: 10px; }
  .blog-soft .stat-glass .sg { padding: 16px 14px 14px; }
  .blog-soft .stat-glass .sg:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .blog-soft .neu-cards { grid-template-columns: 1fr; gap: 16px; }
  .blog-soft .neu-cards:has(> .neu-card:nth-child(4)) { grid-template-columns: 1fr; }
  .blog-soft .prose .neu-steps li { padding: 16px 18px 16px 62px; }
  .blog-soft .prose .neu-steps li::before { left: 14px; top: 16px; width: 34px; height: 34px; font-size: 15px; }
  .blog-soft .prose .neu-steps li:not(:last-child)::after { left: 30px; top: 54px; bottom: -30px; }
  .blog-soft .prose blockquote { padding: 18px 18px 18px 50px; font-size: 18px; }
  .blog-soft .prose blockquote::before { left: 14px; font-size: 46px; }
  .blog-soft figure.viz { padding: 16px 12px 12px; }
  .blog-soft .in-post-cta { padding: 28px 20px; }
  .blog-soft .sources { padding: 20px 18px; }
  .blog-soft .byline { align-items: flex-start; }
}

/* ---- no frosting in this browser: solid, near-white panels instead */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .blog-soft .stat-glass .sg,
  .blog-soft .prose .callout.glass::before, .blog-soft figure.viz::before, .blog-soft .in-post-cta::before {
    background: rgba(255, 255, 255, .94); }
  .blog-soft .post-hero .tag { background: rgba(255, 255, 255, .95); }
  .post-head-glass { background: rgba(255, 255, 255, .9); }
  .post-back { background: rgba(8, 14, 34, .62); }
}

/* ---- less motion: nothing lifts */
@media (prefers-reduced-motion: reduce) {
  .blog-soft .post-card, .blog-soft .post-card:hover { transform: none; }
}

/* ---- Windows high contrast and other forced colours: shadows vanish there,
   so borders and system colours carry the shapes and the pressed state. */
@media (forced-colors: active) {
  .blog-soft .cat-btn[aria-pressed="true"] { border: 2px solid Highlight; }
  .blog-soft .cat-btn[aria-pressed="true"]::before { forced-color-adjust: none; background: Highlight; }
  .blog-soft .stat-glass .sg b, .blog-soft .prose blockquote::before {
    background: none; -webkit-text-fill-color: currentColor; color: CanvasText; }
  .blog-soft .neu-card, .blog-soft .prose .neu-steps li, .blog-soft .sources, .blog-soft .byline,
  .blog-soft .prose blockquote, .blog-soft .prose .callout.glass, .blog-soft figure.viz, .blog-soft .in-post-cta,
  .blog-soft .stat-glass .sg { border: 1px solid CanvasText; }
}

/* ================================================================ case cards */
.case-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh); }
.case-top { padding: 30px; display: grid; gap: 18px; }
@media (min-width: 900px) { .case-top { grid-template-columns: 1.2fr 1fr; gap: 30px; } }
.case-nums { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.case-num { background: var(--off); border-radius: 14px; padding: 16px; text-align: center; }
.case-num b { display: block; font-size: 30px; font-weight: 800; letter-spacing: -.03em; line-height: 1.1;
              background: var(--grad-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.case-num span { display: block; font-size: 12px; color: var(--soft); margin-top: 4px; line-height: 1.3; }
.case-foot { background: var(--light); border-top: 1px solid var(--line); padding: 16px 30px; font-size: 14px; color: var(--soft);
             display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center; }
.transcript { display: grid; gap: 10px; }
.transcript .line { display: grid; grid-template-columns: 58px 1fr; gap: 10px; align-items: baseline; font-size: 15px; line-height: 1.5; }
.transcript .line b { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); padding-top: 3px; }
.transcript .line.cora b { color: var(--cobalt-deep); }
.transcript .line.you b { color: #0f766e; }
.transcript .line span { background: var(--off); border-radius: 12px; padding: 10px 14px; }
.transcript .line.cora span { background: rgba(37,99,235,.06); }
.empty-slot { border: 2px dashed var(--line-strong); border-radius: var(--r-lg); padding: 40px 30px; text-align: center; color: var(--soft); }
.empty-slot h3 { margin-bottom: 8px; }

/* ========================================================== scroll reveal */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in, .reveal.visible { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .08s; } .reveal.d2 { transition-delay: .16s; } .reveal.d3 { transition-delay: .24s; }
.reveal.d4 { transition-delay: .32s; }

/* things you can press lift a little */
.card:hover { transform: translateY(-3px); box-shadow: var(--sh-lift); }
.card.still:hover { transform: none; box-shadow: var(--sh); }

/* ========================================================= reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important;
                           transition-duration: .001ms !important; transition-delay: 0s !important; }
  .reveal { opacity: 1; transform: none; }
  .shoot { display: none; }
  .callflow .cf { opacity: 1; }
  .wf-node { opacity: 1; }
  .tstrip { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .tstrip-track { animation: none !important; }
  .tstrip-run:nth-child(2) { display: none; }
  .window { transform: none; }
  .bars i { animation: none !important; transform: none; }
  /* Status lights keep blinking on purpose: a still green light reads as
     "off". They are the only thing that moves. */
  .live-dot, .live .dot {
    animation: livepulse 1.6s ease-out infinite, liveblink 1.6s ease-in-out infinite !important;
    animation-duration: 1.6s, 1.6s !important; animation-iteration-count: infinite, infinite !important;
  }
  .caret { animation: none !important; }
}

/* ---------------------------------------------------------------- invite
   The card that speaks first (_invite.html). Bottom-right on a desktop so it
   never covers the page being read; on a phone the same floating card,
   centred and a size smaller (the 560px block below). */
.invite {
  position: fixed; z-index: 70; width: 380px; max-width: calc(100vw - 32px);
  /* Clear of a notch or the home bar on a phone on its side, which is wider
     than 560px and so gets this rule (every public page sets
     viewport-fit=cover). */
  right: calc(22px + env(safe-area-inset-right));
  bottom: calc(22px + env(safe-area-inset-bottom));
  /* Pinned to the bottom, it grows upward: on a short screen (a small phone,
     any phone on its side) it would slide under the fixed header, close
     button and all, and a phone has no Escape key. It stops short of the
     header and scrolls inside itself instead. */
  max-height: calc(100vh - var(--head-h) - 44px);
  max-height: calc(100dvh - var(--head-h) - 44px - env(safe-area-inset-bottom));
  overflow-y: auto; overscroll-behavior: contain;
  background: var(--white); border: 1px solid var(--line);
  border-radius: 16px; padding: 20px 20px 16px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .18);
  opacity: 0; transform: translateY(14px);
  transition: opacity .28s ease, transform .28s ease;
}
.invite.in { opacity: 1; transform: none; }
/* The card scrolls inside itself on a short screen, so the X is sticky
   rather than absolute: it stays in the top corner however far down the
   visitor has scrolled (a phone has no Escape key). The negative margins
   put it where it always sat, 12px in on a desktop and 8px on a phone, and
   take up no room, so nothing below it moves. Sticky offsets are measured
   from inside the card's padding, hence the -8px. White, so the words
   scrolling under it don't show through. */
.invite-x {
  position: sticky; top: -8px; z-index: 2;
  width: 32px; height: 32px; margin: -8px -8px -24px auto;
  display: grid; place-items: center; padding: 0; cursor: pointer;
  border: 0; border-radius: 50%; background: var(--white); color: var(--faint);
}
.invite-x:hover { background: var(--off); color: var(--ink); }
.invite-x svg { width: 17px; height: 17px; }
.invite-who { display: flex; align-items: center; gap: 12px; }
.invite-avatar { position: relative; width: 44px; height: 44px; flex-shrink: 0; }
.invite-avatar img { width: 44px; height: 44px; border-radius: 50%; display: block; object-fit: cover; }
.invite-live {
  position: absolute; right: -1px; top: -1px; width: 11px; height: 11px; border-radius: 50%;
  background: var(--green); border: 2px solid #fff;
  animation: livepulse 1.6s ease-out infinite, liveblink 1.6s ease-in-out infinite;
}
.invite-name { font-size: 13px; color: var(--soft); line-height: 1.3; }
.invite-name b { display: block; font-size: 16px; color: var(--ink); }
.invite-h { margin: 16px 0 0; font-size: 17px; line-height: 1.35; letter-spacing: -.01em; }
.invite-p { margin: 8px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--soft); }
.invite-urge { position: relative; overflow: hidden; margin-top: 16px; border: 1px solid var(--line);
               border-radius: 12px; background: #f7f9ff; padding: 14px 14px 12px; }
.invite-urge-bar { position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--grad-btn); }
.invite-urge-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.invite-urge-text { font-size: 14px; color: var(--ink); line-height: 1.4; }
.invite-count { flex-shrink: 0; font-size: 15px; font-weight: 800; color: var(--ink); background: #fff;
                border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px;
                font-variant-numeric: tabular-nums; }
.invite-count[hidden], .invite-urge-note[hidden] { display: none; }
.invite-urge-note { font-size: 11.5px; color: var(--soft); margin-top: 6px; text-wrap: balance; }
.invite-day .left { font-size: 10.5px; color: var(--soft); white-space: nowrap; }
.invite-days { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-top: 14px; }
.invite-day { font: inherit; cursor: pointer; background: #fff; border: 1.5px solid var(--line); border-radius: 10px;
              padding: 9px 4px; display: grid; gap: 2px; justify-items: center; color: var(--ink);
              transition: border-color .15s ease, box-shadow .15s ease; }
.invite-day .dow { font-size: 13px; font-weight: 500; color: var(--soft); }
.invite-day .dom { font-size: 16px; font-weight: 700; }
.invite-day:hover { border-color: var(--line-strong); }
.invite-day.on { border-color: var(--cobalt); box-shadow: 0 0 0 3px rgba(37, 99, 235, .15); }
/* Today, once its last time has passed its cutoff and no other day is on the
   strip to take its place. */
.invite-day:disabled { opacity: .45; cursor: default; border-color: var(--line); }
.invite-cta { width: 100%; margin-top: 14px; justify-content: center; font-size: 15px; padding: 15px 20px; }
.invite-cta svg { width: 17px; height: 17px; }
.invite-fine { margin: 10px 0 0; font-size: 12.5px; color: var(--soft); text-align: center; text-wrap: balance; }

/* On a phone it is the same floating card as on a desktop (Jake,
   2026-09-27), not a sheet across the bottom half of the screen: everything
   in it a size smaller so it takes about the share of the screen the
   desktop card does. A phone on its side is wider than 560px but short, so
   it gets the smaller card too, lower down and allowed a little taller. */
@media (max-width: 560px), (max-height: 500px) {
  .invite {
    bottom: calc(12px + env(safe-area-inset-bottom));
    max-height: calc(100vh - var(--head-h) - 24px);
    max-height: calc(100dvh - var(--head-h) - 24px - env(safe-area-inset-bottom));
    padding: 16px 16px 12px;
  }
  .invite-avatar, .invite-avatar img { width: 38px; height: 38px; }
  .invite-name { font-size: 12px; }
  .invite-name b { font-size: 15px; }
  .invite-h { margin-top: 12px; font-size: 16px; }
  .invite-p { margin-top: 6px; font-size: 13.5px; line-height: 1.45; }
  .invite-urge { margin-top: 12px; padding: 11px 12px 9px; border-radius: 10px; }
  .invite-urge-text { font-size: 13px; }
  .invite-count { font-size: 14px; padding: 4px 8px; }
  .invite-urge-note { font-size: 11px; margin-top: 4px; }
  .invite-days { gap: 6px; margin-top: 10px; }
  .invite-day { padding: 7px 2px; border-radius: 9px; }
  .invite-day .dow { font-size: 12px; }
  .invite-day .dom { font-size: 15px; }
  .invite-day .left { font-size: 10px; }
  .invite-cta { margin-top: 12px; padding: 12px 16px; font-size: 14.5px; }
  .invite-fine { margin-top: 8px; font-size: 11.5px; }
}

/* Upright on a phone: inset from the edges and centred, rounded all round,
   with its shadow. */
@media (max-width: 560px) {
  .invite {
    left: 12px; right: 12px; width: auto; max-width: 400px; margin: 0 auto;
    border-radius: 16px; box-shadow: 0 18px 48px rgba(0, 0, 0, .22);
  }
}

/* Somebody who asked for less movement still gets the card — they just get
   it without the slide, which was decoration rather than meaning. */
@media (prefers-reduced-motion: reduce) {
  .invite { transition: opacity .01s linear; transform: none; }
  .invite.in { transform: none; }
}

/* ------------------------------------------------------------------ kits
   The four kits (kits.html, kit.html, kit_start.html, _kit_cards.html,
   _kits_band.html). A kit card is one link from edge to edge, so the whole
   card is the target on a phone. auto-fit rather than a fixed column count:
   the same grid holds the three-step ladder, or two of it under a kit. */
.kit-grid { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.kit-card { display: flex; flex-direction: column; gap: 10px; background: #fff; color: var(--ink);
            border: 1px solid var(--line); border-radius: var(--r); padding: 28px 26px;
            text-decoration: none; position: relative;
            transition: transform .35s var(--ease), box-shadow .35s ease, border-color .35s ease; }
.kit-card:hover { color: var(--ink); text-decoration: none; transform: translateY(-4px);
                  box-shadow: var(--sh-lift); border-color: var(--line-strong); }
.kit-card:hover .ico-tile { transform: scale(1.08); }
.kit-card.suggested { border: 2px solid transparent;
                      background: linear-gradient(#fff, #fff) padding-box, var(--grad) border-box; }
.kit-pick { align-self: flex-start; font-size: 12px; font-weight: 700; color: var(--cobalt-deep);
            background: rgba(37, 99, 235, .08); padding: 6px 11px; border-radius: var(--pill); line-height: 1.3; }
.kit-name { font-size: 20px; font-weight: 800; line-height: 1.2; letter-spacing: -.02em; }
.kit-price { color: var(--soft); font-size: 15px; }
.kit-price b { font-size: 34px; font-weight: 800; color: var(--ink); letter-spacing: -.03em; margin-right: 4px; }
.kit-blurb { color: var(--soft); font-size: 15px; line-height: 1.55; }
.kit-parts { list-style: none; display: grid; gap: 6px; margin: 4px 0 0; padding: 0; font-size: 14px; color: var(--ink); }
.kit-parts li::before { content: "\2713"; color: var(--teal-deep); font-weight: 800; margin-right: 8px; }
.kit-go { margin-top: auto; padding-top: 10px; font-weight: 700; font-size: 15px; color: var(--cobalt); }
.kit-setup { text-align: center; margin-top: 22px; }

.kit-switch { display: inline-flex; gap: 4px; padding: 5px; margin-top: 26px; border-radius: var(--pill);
              background: rgba(0, 0, 0, .05); }
.kit-switch a { padding: 10px 20px; border-radius: var(--pill); font-weight: 700; font-size: 15px;
                color: var(--soft); text-decoration: none; }
.kit-switch a:hover { color: var(--ink); text-decoration: none; }
.kit-switch a.on { background: #fff; color: var(--ink); box-shadow: var(--sh); }

.kit-back { display: inline-block; margin-bottom: 16px; font-weight: 600; font-size: 15px; color: var(--soft); }
.kit-hero-price { font-size: 18px; color: var(--soft); margin: 12px 0 0; }
.kit-hero-price b { font-size: clamp(40px, 6vw, 56px); font-weight: 800; color: var(--ink);
                    letter-spacing: -.03em; margin-right: 6px; }
.kit-hero-price span { color: var(--faint); }
.kit-h-sm { font-size: clamp(28px, 4vw, 42px); }
.kit-h-order { font-size: clamp(30px, 5vw, 46px); }
.kit-one { max-width: 560px; }

.kit-terms { list-style: none; display: grid; gap: 12px; padding: 0; margin: 0; font-size: 17px; color: var(--ink); }
.kit-terms li { position: relative; padding-left: 28px; line-height: 1.55; }
.kit-terms li::before { content: "\2713"; position: absolute; left: 0; color: var(--teal-deep); font-weight: 800; }
.kit-terms.small { font-size: 14px; gap: 8px; }
.kit-terms.small li { padding-left: 22px; }
.kit-terms-cta { margin-top: 28px; justify-content: flex-start; }
.kit-compare th a { color: inherit; text-decoration: none; }
.kit-compare th a:hover { text-decoration: underline; }
.kit-money-row td { font-size: 18px; }

/* The order page: the form, and a summary of what is being ordered beside it. */
.kit-order-hero .container { text-align: left; }
.kit-order { display: grid; gap: 22px; margin-top: 24px; align-items: start; }
@media (min-width: 900px) { .kit-order { grid-template-columns: 1.35fr 1fr; } }
.kit-order .form-card > label, .kit-order .form-card > .kit-row-2 { margin-top: 16px; }
.kit-order .form-card > label:first-of-type { margin-top: 0; }
.kit-order .form-card textarea { resize: vertical; }
.kit-row-2 { display: grid; gap: 14px; }
@media (min-width: 560px) { .kit-row-2 { grid-template-columns: 1fr 1fr; } }
.kit-row-2 label { margin-top: 0; }
.kit-order .kit-agree { margin-top: 20px; align-items: flex-start; font-weight: 500; }
.kit-order .kit-agree span { line-height: 1.45; }
.kit-order .btn-block { margin-top: 20px; }
.kit-fine { margin-top: 12px; text-align: center; }
.kit-errs { margin: 6px 0 0 18px; font-weight: 500; }
.kit-summary { display: flex; flex-direction: column; gap: 8px; }
.kit-terms-h { font-weight: 800; margin-top: 16px; font-size: 15px; }

/* What each step of the ladder adds, above the kit's name. */
.kit-step { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
            color: var(--teal-deep); }

/* The AI Receptionist under the ladder: one wide card, so it reads as "just
   the phone" and not as a fourth tier. A column on a phone, a row from 720px. */
.kit-solo { margin-top: 22px; }
.kit-solo-text { display: flex; flex-direction: column; gap: 6px; }
@media (min-width: 720px) {
  .kit-solo { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 24px; }
  .kit-solo .kit-go { margin-top: 0; padding-top: 0; white-space: nowrap; }
  .kit-solo .kit-price { white-space: nowrap; }
}

/* "Build your own package": the parts as cards with a tick, then the
   contact fields (2026-10-01). A picked part gets a cobalt ring. */
.kit-custom { margin-top: 26px; }
.kit-custom > label, .kit-custom > .kit-row-2 { margin-top: 16px; }
.kit-custom textarea { resize: vertical; }
.kit-custom .btn-block { margin-top: 20px; }
.part-pick { border: 0; padding: 0; margin: 0 0 6px; display: grid; gap: 10px; min-width: 0; }
@media (min-width: 720px) { .part-pick { grid-template-columns: 1fr 1fr; } }
.part-pick legend { font-weight: 800; font-size: 18px; color: var(--ink); padding: 0; margin-bottom: 12px; }
.part-opt { display: grid; grid-template-columns: auto auto 1fr; align-items: start; gap: 12px; margin: 0;
            padding: 14px; border: 1.5px solid var(--line); border-radius: 12px; background: #fff;
            cursor: pointer; font-weight: 500; color: var(--ink); }
.part-opt:has(input:checked) { border-color: var(--cobalt); box-shadow: 0 0 0 3px rgba(37, 99, 235, .12); }
.part-opt input { width: 20px; height: 20px; min-height: 0; margin: 12px 0 0; padding: 0; accent-color: var(--cobalt); }
.part-opt b { display: block; font-size: 15px; }
.part-opt .d { display: block; font-size: 13px; color: var(--soft); line-height: 1.45; margin-top: 3px; }

/* Who the packages are for, as chips (2026-10-01): it isn't only plumbing. */
.svc-chips { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
             padding: 0; margin: 24px auto 0; max-width: 820px; }
.svc-chips li { padding: 7px 14px; border-radius: var(--pill); font-size: 14px; font-weight: 600;
                color: var(--ink); background: #fff; border: 1px solid var(--line); }
.svc-chips li.more { background: transparent; border-style: dashed; color: var(--soft); }

/* The Packages drop-down in the top bar: each kit with its price on the
   right, then the setup fee in small type, so no monthly price is shown
   without it. On the phone sheet the name and price share one line. */
.nav-drop.kits { width: 384px; }
.nav-drop a.nav-kit { grid-template-columns: 36px 1fr auto; }
.nav-price { font-size: 12.5px; color: var(--soft); white-space: nowrap; text-align: right; }
.nav-drop .nav-price b { display: inline; font-size: 16px; font-weight: 700; color: var(--ink);
                         letter-spacing: -.01em; }
.nav-drop-note { margin: 4px 12px 0; font-size: 12px; color: var(--soft); line-height: 1.45; }
@media (max-width: 799px) {
  .nav-drop.kits { width: auto; }
  .nav-drop a.nav-kit { grid-template-columns: 1fr auto; gap: 10px; }
  .nav-drop .nav-price b { font-size: 15px; }
  .nav-drop-note { margin: 2px 12px 8px; }
}

/* The same kit for the other trade, one tap away: the top bar opens the
   plumbing kit unless the visitor was reading about HVAC. */
.kit-switch.sm { margin-top: 18px; padding: 4px; }
.kit-switch.sm a { padding: 7px 16px; font-size: 13.5px; }

/* Dial codes on the forwarding post's carrier cards: set apart so an owner
   scanning for "the code" finds it, and never broken across a line. */
.blog-soft .prose code.dial { font-family: ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace;
  font-size: .9em; font-weight: 700; color: var(--cobalt-deep); white-space: nowrap;
  background: #eef2f7; border-radius: 6px; padding: 1px 6px;
  box-shadow: inset 2px 2px 4px rgba(148, 163, 184, .45), inset -2px -2px 4px rgba(255, 255, 255, .9); }