/* customtailoredagents.com v6: direction D structure, carbon-chapters skin (Sam picked it 2026-11-08
   from four rendered options; the warm-paper skin of the D mockups was rejected the same day).
   White chapters and carbon chapters in turn, a blue glowing hairline at every seam, the original
   site blue (#2E6BFF) behind every visual, ink and grey for text, body 18.5px, nothing under 15px.
   Brief: docs/site/site-revamp-strategy-2026-11-06.md; the pick: memory/site-palette-light-with-blue-glow.md.
   Fonts load from /fonts.css (local files): Barlow 400/500 and Barlow Condensed 400 to 700, so the
   mockup's 800 claims are 700 here and its 600 labels are 500. Step 1 carries the home page; the
   funnel chassis (step 2) adds its sections on the same tokens. */
:root {
  --paper: #F2F4F7;            /* the cool grey inside the drawn visuals; the page ground is white */
  --white: #FFFFFF;
  --ink: #14181D;
  --ink-2: #3A424D;
  --ink-3: #5B6470;
  --line: rgba(20, 24, 29, 0.10);
  --blue: #2E6BFF;
  --blue-deep: #1E4FD6;
  --blue-lt: #5E8BFF;
  --green: #1E7A46;            /* data status only, inside the visuals */
  --carbon: #0B0E12;
  --graphite: var(--carbon);
  --surf: linear-gradient(180deg, #171D25 0%, #12171E 100%);
  --lift: inset 0 1px 0 rgba(255, 255, 255, 0.09);
  --glow: rgba(46, 107, 255, 0.55);
  --shadow: 0 1px 2px rgba(11, 14, 18, 0.05), 0 14px 34px rgba(11, 14, 18, 0.08);
  --radius: 20px;
  --gutter: 16px;
  --max: 1120px;
  --sec-top: 48px;
  --sec-bot: 40px;
  --h1: 46px;
  --h2: clamp(36px, 10vw, 42px);
  --body: 18.5px;
  --cond: "Barlow Condensed", "Barlow", "Arial Narrow", sans-serif;
  /* the funnel pages (step 2, 2026-11-08): the extra colours and type sizes they use, all on the carbon skin */
  --on-dark: #F2F5F9;
  --on-dark-2: #C9CFD8;
  --on-dark-3: #AEB5BF;
  --on-dark-line: rgba(255, 255, 255, 0.10);
  --on-dark-field: rgba(255, 255, 255, 0.06);
  --on-dark-rule: rgba(94, 139, 255, 0.65);
  --on-dark-eyebrow: #7FA6FF;
  --on-blue-eyebrow: #E3EBFF;
  --notif-bg: rgba(255, 255, 255, 0.96);
  --alert-red: #D9432F;        /* a missed call: a status inside the drawn lock screen */
  --alert-grey: #5B6470;
  --alert-blue: var(--blue-deep);
  --relief: #B4C8FF;
  --poster-glow-a: rgba(46, 107, 255, 0.45);
  --poster-glow-b: rgba(94, 139, 255, 0.22);
  --video-ground: #000000;
  --fs-xs: 15px;               /* the floor: nothing on a funnel is under 15px */
  --fs-sm: 16.5px;
  --fs-md: 17px;
  --fs-lg: 18px;
  --fs-xl: 19.5px;
  --fs-sub: 21px;
  --fs-sub-d: 24px;
  --fs-card: 24px;
  --fs-card-d: 28px;
  --fs-num: 32px;
  --fs-h1-s: 44px;
  --fs-h1-f: 50px;
  --fs-h1-f-d: 80px;
  --fs-clock: 60px;
  --fs-big: 64px;
  --fs-big-d: 112px;
  --fs-amt: 72px;
}
@media (min-width: 900px) {
  :root { --gutter: 40px; --sec-top: 104px; --sec-bot: 96px; --h1: 84px; --h2: 62px; --body: 19.5px; }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: #FFFFFF;
  color: var(--ink);
  font-family: "Barlow", "Helvetica Neue", Arial, sans-serif;
  font-size: var(--body);
  line-height: 1.5;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
p { margin: 0 0 1em; }
h1, h2, h3 { margin: 0; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 60; background: var(--ink); color: #fff; padding: 10px 14px; border-radius: 10px; text-decoration: none; }
.skip:focus { top: 12px; }

.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }

/* line breaks that only exist on one breakpoint */
br.d { display: none; }
@media (min-width: 900px) { br.d { display: inline; } br.m { display: none; } }

/* type */
.h1, .h2 {
  font-family: var(--cond);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.005em;
}
.h1 { font-size: var(--h1); line-height: 0.92; letter-spacing: 0; }
.h2 { font-size: var(--h2); line-height: 0.94; }
.eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 16px;
}
/* the section numeral is a small chip in the eyebrow row */
.eyebrow .num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 24px;
  padding: 0 7px;
  border-radius: 7px;
  background: var(--mark, var(--blue));
  color: #fff;
  font-family: var(--cond);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.04em;
}
.lead { font-size: 19.5px; line-height: 1.42; color: var(--ink-2); }
@media (min-width: 900px) { .lead { font-size: 23px; } }
.quiet { color: var(--ink-2); }

/* the signature: a hand-drawn blue stroke under one word */
.u { position: relative; display: inline-block; white-space: nowrap; }
.u svg {
  position: absolute;
  left: -2%;
  bottom: -0.10em;
  width: 104%;
  height: 0.26em;
  overflow: visible;
  pointer-events: none;
}
.u svg path {
  fill: none;
  stroke: var(--blue);
  stroke-width: 7;
  stroke-linecap: round;
  stroke-dasharray: 420;
  stroke-dashoffset: 420;
  animation: draw 0.9s cubic-bezier(.2,.7,.2,1) 0.9s forwards;
}
@keyframes draw { to { stroke-dashoffset: 0; } }

/* the one button */
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 54px;
  padding: 14px 28px;
  border-radius: 999px;
  background: var(--blue);
  color: #fff;
  font-family: "Barlow", sans-serif;
  font-weight: 500;
  font-size: 18px;
  letter-spacing: 0.01em;
  text-align: center;
  text-decoration: none;
  box-shadow: 0 10px 24px rgba(51, 85, 224, 0.28);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn:hover { background: var(--blue-deep); transform: translateY(-1px); }
.btn.on-white { background: #fff; color: var(--blue); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18); }
.btn.on-white:hover { background: #F3F5FF; }
@media (min-width: 900px) { .btn { width: auto; display: inline-flex; min-height: 56px; padding: 14px 36px; font-size: 19px; } }
/* every "See it work" link is ink with a blue rule */
.textlink {
  display: inline-block;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 2px solid rgba(20, 24, 29, 0.3);
  padding: 12px 0 4px;
}
.textlink:hover { border-color: var(--ink); }

/* header: the logo and the one button, nothing else */
.hdr {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.hdr .wrap { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 64px; }
.hdr .logo { display: block; flex: none; }
.hdr .logo img { height: 30px; width: auto; }
.hdr .btn {
  width: auto;
  min-height: 44px;
  padding: 8px 10px;
  font-size: 15px;
  box-shadow: 0 6px 16px rgba(46, 107, 255, 0.25);
  white-space: nowrap;
}
/* the full button text must fit beside the logo on a 320px and a 360px phone without a sideways scroll */
@media (max-width: 419px) { .hdr .logo img { height: 26px; } }
/* under 360px the nav header (step 4) drops the button instead of shrinking it; see the nav block at the end */
@media (max-width: 359px) { .hdr .logo img { height: 24px; } }
@media (min-width: 420px) { .hdr .btn { padding: 8px 16px; font-size: 15.5px; } }
@media (min-width: 900px) {
  .hdr .wrap { height: 76px; }
  .hdr .logo img { height: 36px; }
  .hdr .btn { min-height: 46px; font-size: 16px; padding: 10px 22px; }
}

/* sections: even padding, the first element at the top of its screen */
.sec { padding: var(--sec-top) 0 var(--sec-bot); position: relative; }

/* hero */
.hero { padding-top: 36px; padding-bottom: 32px; }
.hero .h1 { margin-bottom: 18px; }
.hero .lead { margin-bottom: 22px; max-width: 34ch; }
.hero .btn { margin-bottom: 20px; }
.hero .proof {
  font-size: 17px;
  line-height: 1.45;
  color: var(--ink-2);
  padding-left: 14px;
  border-left: 3px solid var(--blue);
  margin-bottom: 26px;
}
.hero .proof a { color: var(--ink); font-weight: 500; }
.hero .proof .tel { display: inline-block; padding: 11px 0; margin: -11px 0; }
@media (min-width: 900px) {
  .hero { padding-top: 80px; padding-bottom: 96px; }
  .hero .wrap { display: grid; grid-template-columns: 1.1fr 0.9fr; grid-template-rows: auto auto auto auto auto; gap: 0 72px; align-items: start; }
  .hero .copy { display: contents; }
  .hero .copy > * { grid-column: 1; }
  .hero .copy .eyebrow { grid-column: 1 / -1; grid-row: 1; }
  .hero .copy .h1 { grid-column: 1 / -1; grid-row: 2; font-size: 76px; margin-bottom: 26px; }
  .hero .copy .lead { grid-row: 3; max-width: 30ch; margin-bottom: 26px; }
  .hero .copy .btn { grid-row: 4; justify-self: start; margin-bottom: 26px; }
  .hero .copy .proof { grid-row: 5; font-size: 17px; max-width: 42ch; margin: 0; }
  .hero .vis { grid-column: 2; grid-row: 3 / 6; align-self: start; }
}
/* the words arrive one after another, blur to sharp */
.w { display: inline-block; opacity: 0; filter: blur(8px); transform: translateY(14px); animation: arrive .7s cubic-bezier(.2,.7,.2,1) forwards; }
/* nth-of-type: the <br>s between the words must not count */
.w:nth-of-type(1) { animation-delay: .05s; }
.w:nth-of-type(2) { animation-delay: .17s; }
.w:nth-of-type(3) { animation-delay: .29s; }
.w:nth-of-type(4) { animation-delay: .41s; }
.w:nth-of-type(5) { animation-delay: .53s; }
@keyframes arrive { to { opacity: 1; filter: blur(0); transform: none; } }

/* pick your business: one full-width card per trade, the arrow in its own column */
.pick .h2 { margin-bottom: 14px; }
.pick .lead { margin-bottom: 22px; }
.cards { display: grid; grid-template-columns: 1fr; gap: 10px; }
.card {
  display: grid;
  grid-template-columns: 1fr 36px;
  gap: 0 12px;
  align-items: center;
  text-decoration: none;
  background: var(--white);
  border-radius: 18px;
  padding: 14px 14px 14px 16px;
  box-shadow: var(--shadow);
  transition: transform .15s ease;
}
.card:hover { transform: translateY(-2px); }
.card .in { min-width: 0; }
.card .t { display: block; font-family: var(--cond); font-weight: 700; text-transform: uppercase; font-size: 22px; line-height: 0.95; margin-bottom: 3px; }
.card .s { display: block; font-size: 15px; color: var(--ink-3); margin-bottom: 4px; }
.card .d { display: block; font-size: 17px; line-height: 1.38; color: var(--ink-2); }
.card .go { display: block; margin-top: 6px; font-size: 15px; font-weight: 500; color: var(--blue); }
.card .arrow {
  width: 36px; height: 36px; border-radius: 50%;
  background: #EAF0FF; color: var(--blue);
  display: flex; align-items: center; justify-content: center;
  font-weight: 500; font-size: 18px;
}
@media (min-width: 900px) {
  .cards { grid-template-columns: 1fr 1fr; gap: 16px; }
  .card { padding: 22px 20px 22px 24px; }
  .card .t { font-size: 28px; }
}

/* billboards: white chapters and carbon chapters in turn (the chapter rules sit in the skin block below) */
.bb { overflow: hidden; --sec-top: 44px; --sec-bot: 36px; --mark: var(--blue); }
.bb .eyebrow { color: var(--mark); }
.bb .h2 { font-size: clamp(32px, 8.8vw, 36px); margin-bottom: 12px; }
.bb .lead { margin-bottom: 18px; max-width: 34ch; font-size: 18.5px; }
.bb .vis { margin: 0 0 14px; }
@media (min-width: 900px) {
  .bb .wrap { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr auto auto auto auto 1fr; gap: 0 80px; }
  .bb .copy { display: contents; }
  .bb .copy > * { grid-column: 1; }
  .bb .copy .eyebrow { grid-row: 2; }
  .bb .copy .h2 { grid-row: 3; }
  .bb .copy .lead { grid-row: 4; }
  .bb .copy .textlink { grid-row: 5; justify-self: start; }
  .bb .copy .vis { grid-column: 2; grid-row: 1 / 7; align-self: center; }
  .bb.flip .copy > * { grid-column: 2; }
  .bb.flip .copy .vis { grid-column: 1; }
  .bb { --sec-top: 104px; --sec-bot: 96px; }
  .bb .h2 { font-size: 46px; max-width: 20ch; }
  .bb .lead { font-size: 22px; }
  .bb .vis { margin: 0; }
}

/* drawn product visuals, sample data labelled once */
.vis { position: relative; }
.vis .tag { display: block; font-size: 14px; color: var(--ink-3); margin-top: 8px; }
.pane {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px;
  font-size: 15.5px;
  line-height: 1.4;
}
.pane .row { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.pane .k { color: var(--ink-3); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; font-weight: 500; }
.chip {
  display: inline-block;
  font-size: 13px;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink-2);
}
.chip.ok { background: #DDF3E4; color: #1A6B3D; }
.chip.due { background: #E8EFFF; color: #1D4ED8; box-shadow: inset 0 0 0 1px rgba(46, 107, 255, 0.35); }
.chip.blue { background: #E8EDFF; color: #2A49C4; }

/* 01 a website card */
.site { padding: 0; overflow: hidden; }
.site .bar { display: flex; gap: 6px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.site .bar i { width: 10px; height: 10px; border-radius: 50%; background: #D5DAE1; display: block; }
.site .bar .url { flex: 1; margin-left: 8px; height: 10px; border-radius: 6px; background: #E9EDF2; }
.site .shot { padding: 22px 18px 20px; background: linear-gradient(180deg, #FFFFFF 0%, #EEF3FF 100%); }
.site .shot .brand { font-family: var(--cond); font-weight: 700; text-transform: uppercase; font-size: 26px; line-height: .95; margin-bottom: 6px; }
.site .shot .line { color: var(--ink-2); font-size: 15px; margin-bottom: 14px; }
.site .shot .cta { display: inline-block; background: var(--blue); color: #fff; border-radius: 999px; padding: 10px 16px; font-weight: 500; font-size: 15px; }
.site .foot { display: flex; justify-content: space-between; padding: 12px 18px; border-top: 1px solid var(--line); font-size: 14px; color: var(--ink-2); }
.site .foot b { color: var(--blue); font-weight: 500; }

/* 02 a phone call card (also the hero card) */
.call .row.top { margin-bottom: 12px; }
.ring { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: #1E7A46; margin-right: 8px; position: relative; vertical-align: middle; }
.ring::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid #1E7A46; opacity: 0; animation: pulse 1.8s ease-out infinite; }
@keyframes pulse { 0% { transform: scale(.6); opacity: .8; } 100% { transform: scale(1.6); opacity: 0; } }
.msgs { display: flex; flex-direction: column; gap: 8px; }
.msg { max-width: 88%; padding: 10px 13px; border-radius: 16px; line-height: 1.35; font-size: 15.5px; }
.msg.ai { background: #EAF0FF; border-bottom-left-radius: 4px; align-self: flex-start; }
.msg.them { background: var(--paper); border-bottom-right-radius: 4px; align-self: flex-end; }
.msg .who { display: block; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; font-weight: 500; color: var(--ink-3); margin-bottom: 2px; }
.call .foot { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); display: flex; gap: 8px; flex-wrap: wrap; }
.done { list-style: none; margin: 12px 0 0; padding: 12px 0 0; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 8px 16px; }
.done li { display: flex; align-items: center; gap: 7px; font-size: 14.5px; font-weight: 500; }
.ck {
  width: 18px; height: 18px; border-radius: 50%; background: var(--green); flex: none;
  display: inline-flex; align-items: center; justify-content: center;
}
.ck::before { content: ""; width: 8px; height: 4.5px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: translateY(-1px) rotate(-45deg); }

/* 03 a CRM row */
.crm .name { font-weight: 500; font-size: 18px; }
.crm .meta { color: var(--ink-3); font-size: 14px; }
.crm .cells { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.crm .cell .k { display: block; margin-bottom: 3px; }
.crm .cell .v { font-weight: 500; }
.crm .cell.full { grid-column: 1 / -1; }
.crm .cells .v .chip { margin-top: 2px; }
.crm .bar { display: flex; gap: 6px; margin-top: 14px; }
.crm .bar i { flex: 1; height: 6px; border-radius: 3px; background: #E6EAF0; display: block; }
.crm .bar i.on { background: var(--blue); }

/* 04 a post draft */
.post .head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 12px; }
.post .avatar { width: 34px; height: 34px; border-radius: 50%; background: #E6EEFF; display: inline-flex; align-items: center; justify-content: center; font-family: var(--cond); font-weight: 700; color: var(--blue-deep); margin-right: 10px; }
.post .body { font-size: 15.5px; }
.post .meta { color: var(--ink-3); font-size: 14px; margin-top: 6px; }
.post .actions { display: flex; gap: 8px; margin-top: 12px; }
.post .actions span { flex: 1; text-align: center; padding: 9px 10px; border-radius: 999px; font-weight: 500; font-size: 14px; }
.post .actions .ok { background: var(--blue-deep); color: #fff; }
.post .actions .edit { background: var(--paper); color: var(--ink-2); }

/* 05 the facts */
.facts .title { font-family: var(--cond); font-weight: 700; text-transform: uppercase; font-size: 22px; margin-bottom: 10px; }
.facts dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 8px 14px; }
.facts dt { color: var(--ink-3); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; font-weight: 500; padding-top: 3px; }
.facts dd { margin: 0; }
.facts .readers { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); display: flex; gap: 8px; flex-wrap: wrap; align-items: center; font-size: 14px; color: var(--ink-3); }

/* the money chapter, carbon */
.dark { background: var(--graphite); color: #F2F5F9; }
.dark .eyebrow { color: var(--blue); }
.dark .h2 { color: #fff; }
.loss { list-style: none; margin: 24px 0 0; padding: 0; }
.loss li { padding: 16px 0; border-top: 1px solid rgba(255,255,255,.12); }
.loss li:last-child { border-bottom: 1px solid rgba(255,255,255,.12); }
.loss .amt { display: block; font-family: var(--cond); font-weight: 700; font-size: 52px; line-height: 1; color: #fff; letter-spacing: -0.01em; }
.loss .amt small { font-size: 22px; font-weight: 500; color: #AEB5BF; margin-left: 6px; letter-spacing: 0; }
.loss .what { display: block; font-weight: 500; font-size: 18px; margin-top: 6px; color: #fff; }
.loss .how { display: block; font-size: 16px; color: #AEB5BF; margin-top: 3px; }
.dark .label { display: block; margin-top: 14px; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: #AEB5BF; font-weight: 500; }
.dark .after { margin: 22px 0 0; font-size: 20px; font-weight: 500; color: #fff; max-width: 34ch; }
@media (min-width: 900px) {
  .loss { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 40px; }
  .loss li, .loss li:last-child { border: 0; border-top: 1px solid rgba(255,255,255,.14); }
  .loss .amt { font-size: 64px; }
}

/* who you are talking to: Sam's photo (has-photo), the pills, the three steps */
.who .h2 { margin-bottom: 22px; }
.who .person { margin-bottom: 20px; }
.who .person.has-photo { display: grid; grid-template-columns: 128px 1fr; gap: 16px; align-items: center; }
.who .person img { width: 128px; height: 128px; border-radius: var(--radius); object-fit: cover; }
.who .name { font-family: var(--cond); font-weight: 700; text-transform: uppercase; font-size: 30px; line-height: .95; margin: 0 0 4px; }
.who .place { color: var(--ink-2); margin: 0; }
.pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 24px; padding: 0; list-style: none; }
/* the tap target is the link itself, 44px tall; the one pill without a link pads the li */
.pills li { display: inline-flex; align-items: center; gap: 8px; background: var(--white); box-shadow: var(--shadow); border-radius: 999px; padding: 0; font-size: 16px; font-weight: 500; }
.pills a, .pills li:not(:has(a)) { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 9px 13px 9px 9px; text-decoration: none; }
.pills a i { font-style: normal; color: var(--ink-3); }
.steps { list-style: none; margin: 0; padding: 0; counter-reset: s; }
.steps li { position: relative; padding: 12px 0 12px 54px; border-top: 1px solid var(--line); counter-increment: s; }
.steps li::before {
  content: counter(s, decimal-leading-zero);
  position: absolute; left: 0; top: 11px;
  font-family: var(--cond); font-weight: 700; font-size: 32px; line-height: 1;
  color: var(--blue);
}
.steps li:last-child { border-bottom: 1px solid var(--line); }
.steps .t { display: block; font-weight: 500; margin-bottom: 2px; }
@media (min-width: 900px) {
  .who .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 64px; align-items: start; }
  .who .h2 { max-width: 16ch; }
  .who .person.has-photo { grid-template-columns: 160px 1fr; }
  .who .person img { width: 160px; height: 160px; }
}

/* close on blue */
.blue { background: var(--blue); color: #fff; }
.blue .h1 { color: #fff; margin-bottom: 24px; }
.blue .btn { margin-bottom: 22px; }
.blue .re { font-size: 17px; color: #E3E8FF; font-weight: 500; margin: 0 0 10px; }
.next { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; max-width: 420px; }
.next li { display: flex; gap: 12px; align-items: baseline; font-size: 17px; color: #E3E8FF; }
.next li i { font-style: normal; font-family: var(--cond); font-weight: 700; font-size: 20px; color: #fff; flex: none; width: 18px; }
.blue .nocard { margin: 18px 0 0; font-size: 17px; color: #fff; font-weight: 500; }
@media (min-width: 900px) { .blue .h1 { font-size: 72px; } }

/* footer: the legal links fragment from the server ({{LEGAL_LINKS}}) */
.ftr { padding: 28px 0 40px; font-size: 14px; color: var(--ink-3); }
.ftr .wrap { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; }
.ftr a { color: var(--ink-3); }
.ftr a:hover { color: var(--ink); }
.ftr .sp { flex: 1; }
.ftr .legal { flex-basis: 100%; }
.ftr .legal * { font-size: 14px; color: var(--ink-3); }

/* The website chat (receptionist C01) on a phone: never over the first screen, and a bottom-centre
   launcher instead of a bubble over the right edge of the content. The widget draws itself in a
   shadow root that this sheet cannot reach; a transform on its host makes the host the containing
   block for the widget's fixed launcher, so the launcher sits centred 16px above the bottom. While
   the chat is open the transform comes off (.cta-chat-open) and the panel takes the full width as
   the widget designs it. v6.js sets the two classes. */
@media (max-width: 480px) {
  [data-receptionist-chat] {
    position: fixed; left: 50%; bottom: 0; width: 0; height: 0; z-index: 40;
    transform: translateX(44px);
    transition: opacity .2s ease, visibility .2s;
  }
  [data-receptionist-chat].cta-chat-hold { opacity: 0; visibility: hidden; }
  [data-receptionist-chat].cta-chat-open { position: static; transform: none; width: auto; height: auto; opacity: 1; visibility: visible; }
  body.v6 { padding-bottom: 72px; }
}

/* motion budget */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .w { opacity: 1; filter: none; transform: none; animation: none; }
  .u svg path { stroke-dashoffset: 0; animation: none; }
  .ring::after { animation: none; }
  .btn, .card { transition: none; }
}

/* the phone glyph beside the live number: inline, text-sized */
.tel svg { width: 1em; height: 1em; vertical-align: -0.12em; margin-right: .3em; fill: currentColor; }

/* ====== the funnel page (step 2, 2026-11-08): /receptionist /crm /websites /content /second-brain ======
   Rendered by auditor/module_funnel.py from data/product-pages/<id>.json. Source: the funnel half of
   studio/sites/cta-v6/d/style.css, light only (no body.night rules), weights 800 to 700 and 600 to 500.
   Order (strategy §5): hero, video (absent until it exists), cost, sound familiar, what you get, proof,
   price, questions, the close. The carbon look for them is the funnel block at the end. */
.small { font-size: var(--fs-sm); color: var(--ink-3); }
.fpage .blue .eyebrow { color: var(--on-blue-eyebrow); }

.fhero { padding-top: 32px; padding-bottom: 28px; }
.fhero .human { font-size: var(--fs-sm); color: var(--ink-2); margin: -6px 0 16px; }
.fhero .h1 { font-size: var(--fs-h1-f); margin-bottom: 18px; }
.fhero .sub { font-weight: 500; font-size: var(--fs-sub); line-height: 1.35; color: var(--ink); margin-bottom: 22px; max-width: 34ch; }
.fhero .btn { margin-bottom: 14px; }
.fhero .or { font-size: var(--fs-lg); margin-bottom: 22px; }
.fhero .or .tel { font-weight: 500; color: var(--ink); }
.fhero .qual { font-size: var(--fs-sm); color: var(--ink-2); margin-bottom: 8px; }
.fhero .derisk { font-size: var(--fs-sm); color: var(--ink-2); padding-left: 14px; border-left: 3px solid var(--blue); margin: 0; }
.fhero .derisk b { color: var(--ink); font-weight: 500; }
@media (max-width: 359px) { .fhero .h1 { font-size: var(--fs-h1-s); } }
@media (min-width: 900px) {
  .fhero { padding-top: 72px; padding-bottom: 88px; }
  .fhero .wrap { display: grid; grid-template-columns: 1.2fr .8fr; gap: 24px 64px; align-items: end; }
  .fhero .h1 { font-size: var(--fs-h1-f-d); }
  .fhero .sub { font-size: var(--fs-card); }
  .fhero .btn { margin-bottom: 0; }
  .fhero .or { margin: 14px 0 0; }
  .fhero .aside { max-width: 40ch; }
}

/* the video: a real video when one exists; on a --preview server only, a labelled empty poster */
.vsl { padding-top: 8px; }
.vsl .poster {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 20% 10%, var(--poster-glow-a), transparent 55%),
    radial-gradient(90% 80% at 90% 100%, var(--poster-glow-b), transparent 55%),
    var(--carbon);
  box-shadow: var(--shadow);
  color: var(--on-dark);
}
.vsl .poster video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: var(--video-ground); }
.vsl .poster .title { position: absolute; left: 18px; right: 18px; bottom: 16px; font-weight: 500; font-size: var(--fs-md); line-height: 1.35; }
.vsl .poster .title small { display: block; color: var(--on-dark-2); font-size: var(--fs-xs); margin-top: 2px; }
.vsl .poster .ph { position: absolute; top: 14px; left: 18px; font-size: var(--fs-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--on-dark-2); font-weight: 500; }
.vsl .cap { font-size: var(--fs-xs); color: var(--ink-3); margin: 8px 0 0; }
@media (min-width: 900px) { .vsl .wrap { max-width: 960px; } .vsl .poster .title { font-size: var(--fs-sub-d); left: 32px; bottom: 28px; } }

/* the cost chapter: the math as a receipt, each factor editable, the total recomputed by v6.js */
.cost .math { list-style: none; margin: 22px 0 0; padding: 0; max-width: 380px; }
.cost .grp { font-size: var(--fs-xs); letter-spacing: .1em; text-transform: uppercase; font-weight: 500; color: var(--on-dark-3); margin: 26px 0 -14px; }
.cost .math li { display: grid; grid-template-columns: 24px 104px 1fr; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--on-dark-line); }
.cost .math li:first-child { border-top: 0; }
.cost .math .op { font-family: var(--cond); font-weight: 700; font-size: var(--fs-card); color: var(--on-dark-3); }
.cost .math .n { display: flex; align-items: baseline; font-family: var(--cond); font-weight: 700; font-size: var(--fs-num); line-height: 1; color: var(--on-dark); }
.cost .math .n i { font-style: normal; }
.cost .math input {
  width: 100%; min-width: 0; margin: 0; padding: 2px 4px;
  font: inherit; color: var(--on-dark); text-align: left;
  background: var(--on-dark-field); border: 0; border-bottom: 2px solid var(--on-dark-rule); border-radius: 6px 6px 0 0;
  -moz-appearance: textfield; appearance: textfield;
}
.cost .math input::-webkit-outer-spin-button, .cost .math input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cost .math input:focus { outline: 2px solid var(--blue-lt); outline-offset: 2px; }
.cost .math .lbl { font-size: var(--fs-sm); line-height: 1.3; color: var(--on-dark-2); }
.cost .big { font-family: var(--cond); font-weight: 700; font-size: var(--fs-big); line-height: 1; color: var(--on-dark); margin: 28px 0 4px; letter-spacing: -0.01em; }
.cost .big small { font-size: var(--fs-card-d); font-weight: 500; color: var(--on-dark-2); margin-left: 8px; letter-spacing: 0; }
.cost .what { font-size: var(--fs-lg); color: var(--on-dark); font-weight: 500; margin-bottom: 10px; }
.cost .plus { font-size: var(--fs-md); color: var(--on-dark-2); padding: 10px 0; border-top: 1px solid var(--on-dark-line); margin: 0; }
.cost .plus b { color: var(--on-dark); font-weight: 500; }
.cost .vs { font-size: var(--fs-sub); font-weight: 500; color: var(--on-dark); margin: 14px 0 10px; }
.cost .vs b { color: var(--on-dark-eyebrow); font-weight: 500; }
.cost .small { color: var(--on-dark-3); margin: 0; }
@media (min-width: 900px) {
  .cost .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
  .cost .big { font-size: var(--fs-big-d); margin-top: 0; }
}

/* sound familiar: three pains as lock-screen notifications, each with its relief */
.pains .h2 { margin-bottom: 22px; }
.lock {
  background: var(--surf);
  border-radius: 28px;
  padding: 24px 14px 18px;
  color: var(--on-dark);
}
.lock .time { text-align: center; font-family: var(--cond); font-weight: 500; font-size: var(--fs-clock); line-height: 1; margin-bottom: 2px; }
.lock .date { text-align: center; color: var(--on-dark-3); font-size: var(--fs-xs); margin-bottom: 18px; }
.lock .list { display: grid; gap: 16px; }
.notif {
  background: var(--notif-bg);
  border-radius: 18px;
  padding: 12px 14px 12px 12px;
  display: grid; grid-template-columns: 36px 1fr; gap: 12px; align-items: start;
  color: var(--ink);
  font-size: var(--fs-sm);
  line-height: 1.35;
}
.notif .icon { width: 36px; height: 36px; border-radius: 10px; background: var(--alert-blue); display: flex; align-items: center; justify-content: center; }
.notif .icon::before { content: ""; width: 14px; height: 14px; border: 2.5px solid var(--on-dark); border-radius: 50%; border-right-color: transparent; transform: rotate(-45deg); }
.notif .icon.grey { background: var(--alert-grey); }
.notif .icon.red { background: var(--alert-red); }
.notif .top { display: flex; justify-content: space-between; gap: 8px; font-size: var(--fs-xs); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); font-weight: 500; margin-bottom: 2px; }
.notif .top b { color: var(--ink); font-weight: 500; }
.relief { display: flex; gap: 10px; align-items: flex-start; padding: 0 6px; margin: 10px 0 0; font-size: var(--fs-md); line-height: 1.4; color: var(--relief); font-weight: 500; }
.relief .ck { margin-top: 3px; }
@media (min-width: 900px) {
  .pains .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
  .pains .h2 { margin-bottom: 12px; }
  .lock { max-width: 420px; }
}

/* what you get: four cards, one drawn visual, the walkthrough as a text link */
.get .h2 { margin-bottom: 22px; }
.get .four { display: grid; grid-template-columns: 1fr; gap: 12px; margin-bottom: 24px; }
.get .g { background: var(--white); border-radius: 18px; padding: 16px; box-shadow: var(--shadow); }
.get .g .t { display: block; font-family: var(--cond); font-weight: 700; text-transform: uppercase; font-size: var(--fs-card); line-height: .98; margin-bottom: 4px; }
.get .g .so { color: var(--ink-2); font-size: var(--fs-sm); line-height: 1.35; }
.get .vis { margin-bottom: 18px; }
@media (min-width: 900px) {
  .get .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 0 64px; align-items: center; }
  .get .four { margin-bottom: 0; gap: 16px; grid-template-columns: 1fr 1fr; }
  .get .g { padding: 22px 20px; }
  .get .g .t { font-size: var(--fs-card-d); }
  .get .g .so { font-size: var(--fs-md); }
}

/* proof: only what is true today, then the reviews row in plain text, then how we set it up */
.proofs { list-style: none; margin: 0 0 40px; padding: 0; }
.proofs li { padding: 14px 0 14px 34px; border-top: 1px solid var(--line); position: relative; font-size: var(--fs-xl); font-weight: 500; }
.proofs li:last-child { border-bottom: 1px solid var(--line); }
.proofs li::before { content: ""; position: absolute; left: 4px; top: 22px; width: 14px; height: 8px; border-left: 3px solid var(--blue); border-bottom: 3px solid var(--blue); transform: rotate(-45deg); }
.proofs li small { display: block; font-size: var(--fs-sm); color: var(--ink-3); font-weight: 400; margin-top: 2px; }
.proofs li a { color: var(--ink); }
.proofs li.reviews, .proofs li.coming { padding-left: 0; font-weight: 400; color: var(--ink-2); font-size: var(--fs-md); }
.proofs li.reviews::before, .proofs li.coming::before { display: none; }
.proof .h2 { margin-bottom: 22px; }
@media (min-width: 900px) {
  .proof .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
  .proofs { margin-bottom: 0; }
}

/* price: one number, late, beside the loss */
.price .amt { font-family: var(--cond); font-weight: 700; font-size: var(--fs-amt); line-height: .9; margin: 20px 0 8px; }
.price .amt small { font-size: var(--fs-card-d); font-weight: 500; color: var(--ink-2); }
.price .terms { color: var(--ink-2); margin-bottom: 6px; }
.price .note { margin: 18px 0 0; padding-top: 16px; border-top: 1px solid var(--line); color: var(--ink-2); font-size: var(--fs-md); }
.price .note b { color: var(--ink); font-weight: 500; }
@media (min-width: 900px) {
  .price .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: end; }
  .price .amt { font-size: var(--fs-big-d); }
  .price .note { font-size: var(--fs-sub-d); line-height: 1.45; padding-top: 22px; margin: 0; }
}

/* questions: every answer open on the page, hairline rows */
.faq .h2 { margin-bottom: 20px; }
.q { border-top: 1px solid var(--line); padding: 14px 0 16px; }
.q:last-child { border-bottom: 1px solid var(--line); }
.q h3 { font-weight: 500; font-size: var(--fs-xl); line-height: 1.35; margin: 0 0 4px; }
.q p { margin: 0; color: var(--ink-2); }
@media (min-width: 900px) { .faq .wrap { max-width: 820px; } }

/* the close: the claim again on blue, the one button, three numbered lines */
.fclose .eyebrow { margin-bottom: 14px; }
.fclose .h1 { font-size: var(--fs-h1-f); }
@media (max-width: 359px) { .fclose .h1 { font-size: var(--fs-h1-s); } }
@media (min-width: 900px) { .fclose .h1 { font-size: var(--fs-h1-f-d); } }

/* =====================================================================================
   The skin. Everything above is the chassis; everything below is the carbon-chapters look.
   ===================================================================================== */
/* header: white glass, a blue glowing underline */
.hdr {
  background: rgba(255, 255, 255, 0.92);
  border-bottom: 1px solid rgba(46, 107, 255, 0.28);
  box-shadow: 0 1px 16px rgba(46, 107, 255, 0.14);
}

/* the button: original blue, with a glow */
.btn { background: var(--blue); box-shadow: 0 10px 26px rgba(46, 107, 255, 0.34), 0 0 0 1px rgba(46, 107, 255, 0.4); }
.btn:hover { background: var(--blue-deep); }
.btn.on-white { background: #fff; color: var(--blue-deep); box-shadow: 0 14px 30px rgba(6, 18, 60, 0.30); }

/* type scale up */
.eyebrow { font-size: 15px; font-weight: 500; letter-spacing: 0.13em; }
.eyebrow .num { font-size: 16px; height: 26px; min-width: 34px; box-shadow: 0 0 14px rgba(46, 107, 255, 0.45); }
.lead { font-size: 21px; line-height: 1.42; color: var(--ink-2); }
@media (min-width: 900px) { .lead { font-size: 24px; } }
.h1, .h2 { color: var(--ink); }

/* ---- the seam: every section opens on a blue glowing hairline ---- */
.sec, .bb { overflow-x: clip; overflow-y: visible; }
.sec > .wrap { position: relative; z-index: 1; }
.sec::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 1px;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(46,107,255,0) 0%, rgba(46,107,255,.85) 16%, #6E97FF 50%, rgba(46,107,255,.85) 84%, rgba(46,107,255,0) 100%);
  box-shadow: 0 0 10px 1px rgba(46, 107, 255, 0.55), 0 0 30px 5px rgba(46, 107, 255, 0.22);
}
.sec::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 90px;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(70% 100% at 50% 0%, rgba(46, 107, 255, 0.12), rgba(46, 107, 255, 0) 72%);
}
.hero::before { display: none; }
.hero::after { height: 140px; background: radial-gradient(80% 100% at 50% 0%, rgba(46, 107, 255, 0.08), rgba(46, 107, 255, 0) 72%); }

/* ---- white chapters ---- */
.hero, .pick, .sec.who, .bb.c1, .bb.c3, .bb.c5 { background: #FFFFFF; --mark: var(--blue); }

/* the visual on white: blue ring, soft glow behind (the original AI receptionist look) */
.vis::before {
  content: "";
  position: absolute;
  inset: -14% -6%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(closest-side, rgba(46, 107, 255, 0.14), rgba(46, 107, 255, 0) 100%);
}
.pane {
  font-size: 17px;
  line-height: 1.42;
  border: 1px solid rgba(46, 107, 255, 0.22);
  box-shadow: 0 0 0 4px rgba(46, 107, 255, 0.05), 0 0 34px rgba(46, 107, 255, 0.16), 0 22px 48px rgba(11, 14, 18, 0.10);
}

/* hero */
.u svg path { stroke: var(--blue); filter: drop-shadow(0 0 4px rgba(46, 107, 255, 0.55)); }
.hero .proof { border-left: 3px solid var(--blue); font-size: 18px; color: var(--ink-2); }
@media (min-width: 900px) { .hero .copy .h1 { font-size: 84px; } .hero .copy .proof { font-size: 19px; } }

/* pick your business */
.card {
  border: 1px solid rgba(20, 24, 29, 0.09);
  box-shadow: 0 1px 2px rgba(11, 14, 18, 0.05), 0 12px 28px rgba(11, 14, 18, 0.07);
  padding: 16px 14px 16px 18px;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.card:hover { border-color: rgba(46, 107, 255, 0.55); box-shadow: 0 0 0 1px rgba(46, 107, 255, 0.35), 0 0 28px rgba(46, 107, 255, 0.22), 0 14px 30px rgba(11, 14, 18, 0.08); }
.card .t { font-size: 25px; color: var(--ink); }
.card .s { font-size: 16px; color: var(--ink-3); }
.card .d { font-size: 18px; color: var(--ink-2); }
.card .go { font-size: 16px; }
.card .arrow { background: var(--blue); color: #fff; box-shadow: 0 0 14px rgba(46, 107, 255, 0.45); }
@media (min-width: 900px) { .card .t { font-size: 30px; } }

/* billboards: shared */
.bb .h2 { font-size: clamp(34px, 9.4vw, 40px); }
.bb .lead { font-size: 21px; }
.bb .eyebrow { color: var(--mark); }
.textlink { color: var(--ink); border-bottom: 2px solid var(--blue); font-size: 19px; }
.textlink:hover { color: var(--blue); border-color: var(--blue); }
@media (min-width: 900px) { .bb .h2 { font-size: 52px; } .bb .lead { font-size: 24px; } }

/* ---- carbon chapters: c2, c4 and the money chapter ---- */
.bb.c2, .bb.c4, .dark {
  background-color: var(--carbon);
  background-image: radial-gradient(60% 50% at 50% 0%, rgba(46, 107, 255, 0.16), rgba(46, 107, 255, 0) 70%),
                    radial-gradient(60% 40% at 50% 100%, rgba(46, 107, 255, 0.12), rgba(46, 107, 255, 0) 70%),
                    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: auto, auto, 44px 44px, 44px 44px;
  box-shadow: inset 0 22px 40px -24px rgba(46, 107, 255, 0.65), inset 0 -22px 40px -24px rgba(46, 107, 255, 0.65);
  --ink: #F2F5F9;
  --ink-2: #C9CFD8;
  --ink-3: #AEB5BF;
  --line: rgba(255, 255, 255, 0.10);
  --paper: #222A35;
  --mark: var(--blue-lt);
  color: var(--ink);
}
.bb.c2 .h2, .bb.c4 .h2, .dark .h2 { color: #FFFFFF; }
.bb.c2 .lead, .bb.c4 .lead { color: #C9CFD8; }
.bb.c2 .eyebrow .num, .bb.c4 .eyebrow .num { background: var(--blue); }
.bb.c2 .quiet, .bb.c4 .quiet { color: #AEB5BF; }
.bb.c2 .textlink, .bb.c4 .textlink { color: #F2F5F9; border-color: var(--blue-lt); }
.bb.c2 .textlink:hover, .bb.c4 .textlink:hover { color: #fff; }
.bb.c2 .vis::before, .bb.c4 .vis::before { background: radial-gradient(closest-side, rgba(46, 107, 255, 0.34), rgba(46, 107, 255, 0) 100%); inset: -20% -8%; }
.bb.c2 .pane, .bb.c4 .pane {
  background: var(--surf);
  color: #E6EAF0;
  border: 1px solid rgba(94, 139, 255, 0.45);
  box-shadow: var(--lift), 0 0 0 4px rgba(46, 107, 255, 0.08), 0 0 44px rgba(46, 107, 255, 0.30), 0 28px 60px rgba(0, 0, 0, 0.45);
}
.bb.c2 .msg.ai { background: rgba(46, 107, 255, 0.20); border: 1px solid rgba(94, 139, 255, 0.35); }
.bb.c2 .msg.them { background: #222A35; }
.bb.c2 .chip.ok, .bb.c4 .chip.ok { background: rgba(61, 219, 142, 0.14); color: #7BE6B0; }
.bb.c4 .chip.blue { background: rgba(46, 107, 255, 0.22); color: #B4C8FF; }
.bb.c4 .post .avatar { background: rgba(46, 107, 255, 0.22); color: #B4C8FF; }
.bb.c4 .post .actions .ok { background: var(--blue); box-shadow: 0 0 16px rgba(46, 107, 255, 0.45); }
.bb.c4 .post .actions .edit { background: #222A35; color: #C9CFD8; }
.bb.c2 .vis .tag, .bb.c4 .vis .tag { color: #AEB5BF; }

/* money chapter */
.dark .eyebrow { color: var(--blue-lt); }
.loss li { border-top-color: rgba(255, 255, 255, 0.12); }
.loss li:last-child { border-bottom-color: rgba(255, 255, 255, 0.12); }
.loss .amt { color: #FFFFFF; text-shadow: 0 0 26px rgba(46, 107, 255, 0.55); }
.loss .amt small { color: #AEB5BF; }
.loss .what { font-size: 20px; color: #FFFFFF; }
.loss .how { font-size: 17px; color: #AEB5BF; }
.dark .label { font-size: 15px; color: #AEB5BF; }
.dark .after { font-size: 22px; color: #FFFFFF; }
@media (min-width: 900px) {
  .loss li, .loss li:last-child { border-top: 1px solid rgba(94, 139, 255, 0.45); box-shadow: 0 -1px 14px -4px rgba(46, 107, 255, 0.5); }
  .loss .amt { font-size: 70px; }
}

/* the drawn visuals: cool greys, bigger labels */
.vis .tag { font-size: 15px; color: var(--ink-3); }
.pane .k { font-size: 15px; color: var(--ink-3); }
.chip { font-size: 15px; padding: 5px 12px; background: var(--paper); color: var(--ink-2); }
.chip.blue { background: #E6EEFF; color: #1E4FD6; }
.msg { font-size: 17px; }
.msg.ai { background: #EAF0FF; border: 1px solid rgba(46, 107, 255, 0.22); }
.msg.them { background: var(--paper); }
.msg .who { font-size: 15px; letter-spacing: .06em; color: var(--ink-3); }
.done li { font-size: 16px; }
.site .bar i { background: #D5DAE1; }
.site .bar .url { background: #E9EDF2; }
.site .shot { background: linear-gradient(180deg, #FFFFFF 0%, #EEF3FF 100%); }
.site .shot .brand { font-size: 28px; }
.site .shot .line { font-size: 16.5px; }
.site .shot .cta { font-size: 16px; background: var(--blue); box-shadow: 0 0 16px rgba(46, 107, 255, 0.4); }
.site .foot { font-size: 16px; }
.crm .name { font-size: 20px; }
.crm .meta { font-size: 16px; }
.crm .bar i { background: #E6EAF0; }
.crm .bar i.on { background: var(--blue); box-shadow: 0 0 8px rgba(46, 107, 255, 0.55); }
.post .body { font-size: 17px; }
.post .meta { font-size: 16px; }
.post .actions span { font-size: 16px; }
.facts .title { font-size: 24px; }
.facts dt { font-size: 15px; }
.facts .readers { font-size: 16px; }

/* who you are talking to */
.who .name { font-size: 34px; }
.who .place { font-size: 19px; }
.pills li { font-size: 17px; border: 1px solid rgba(46, 107, 255, 0.22); box-shadow: 0 0 18px rgba(46, 107, 255, 0.10), 0 6px 16px rgba(11, 14, 18, 0.06); }
.pills .ck { background: var(--blue); }
.steps li::before { color: var(--blue); text-shadow: 0 0 14px rgba(46, 107, 255, 0.4); }
.steps li { font-size: 19px; }

/* close on blue: a strong blue block, white stroke */
.blue {
  background-color: #1E4FD6;
  background-image: radial-gradient(70% 60% at 30% 0%, rgba(110, 151, 255, 0.55), rgba(46, 107, 255, 0) 70%),
                    linear-gradient(160deg, #2E6BFF 0%, #1E4FD6 100%);
}
.blue::before { background: linear-gradient(90deg, rgba(255,255,255,0), rgba(190,210,255,.95) 50%, rgba(255,255,255,0)); box-shadow: 0 0 14px 2px rgba(120, 160, 255, 0.7); }
.blue::after { display: none; }
.blue .h1 { color: #FFFFFF; }
.on-blue .u svg path, .blue .u svg path { stroke: #FFFFFF; filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.6)); }
.blue .re { font-size: 18px; color: #E3EBFF; }
.next li { font-size: 19px; color: #E3EBFF; }
.blue .nocard { font-size: 19px; }

/* footer */
.ftr { font-size: 15.5px; color: var(--ink-3); background: #FFFFFF; }
.ftr .legal * { font-size: 15px; }

/* desktop: the visuals carry more weight */
@media (min-width: 900px) {
  .pane { font-size: 18px; padding: 24px; }
  .msg { font-size: 18px; }
  .crm .name, .site .shot .brand { font-size: 30px; }
}

/* ---- the first screen: the blue pop (from the review panel, 2026-11-08) ---- */
/* the hero word fills blue with a soft glow; its stroke goes lighter so it reads as a second line, not a smear */
.hero .u { color: var(--blue); text-shadow: 0 0 26px rgba(46, 107, 255, 0.30); }
.hero .u svg path { stroke: #7FA2FF; }
/* the hero call card glows at the carbon chapters' strength */
.hero .pane { border-color: rgba(46, 107, 255, 0.60); box-shadow: 0 0 0 4px rgba(46, 107, 255, 0.10), 0 0 44px 6px rgba(46, 107, 255, 0.32), 0 18px 40px -18px rgba(11, 14, 18, 0.35); }
/* eyebrows on carbon lift to a lighter blue */
.bb.c2 .eyebrow, .bb.c4 .eyebrow, .dark .eyebrow { color: #7FA6FF; }

/* the photo: Sam on blue, a blue ring and glow like the visuals */
.who .person img { border: 2px solid rgba(46, 107, 255, 0.55); box-shadow: 0 0 0 4px rgba(46, 107, 255, 0.08), 0 0 34px rgba(46, 107, 255, 0.28), 0 18px 40px -16px rgba(11, 14, 18, 0.35); }

/* ---- the funnel pages on the carbon skin (step 2): white, carbon for the money and the proof, the close on blue ---- */
/* the first section opens without a seam, like the home hero */
.fhero::before { display: none; }
.fhero::after { height: 140px; background: radial-gradient(80% 100% at 50% 0%, rgba(46, 107, 255, 0.08), rgba(46, 107, 255, 0) 72%); }
.fhero .u { color: var(--blue); text-shadow: 0 0 26px rgba(46, 107, 255, 0.30); }
.fhero .u svg path { stroke: #7FA2FF; }
.fhero .human, .fhero .qual, .fhero .derisk { font-size: var(--fs-lg); }
/* the live number: a 44px tap target */
.fhero .or .tel, .proofs .tel { display: inline-flex; align-items: center; min-height: 44px; }

/* the video poster: carbon with a blue glow, like a visual on carbon */
.vsl .poster { border: 1px solid rgba(94, 139, 255, 0.45); box-shadow: var(--lift), 0 0 44px rgba(46, 107, 255, 0.30), 0 22px 48px rgba(11, 14, 18, 0.10); }

/* the money chapter: the receipt on carbon, the total glows like the home page's loss figures */
.cost .big { text-shadow: 0 0 26px rgba(46, 107, 255, 0.55); }
.cost .math input { min-height: 44px; }
.cost .grp, .cost .small { color: var(--on-dark-3); }

/* the lock screen is a drawn visual: carbon with a blue ring, the notifications white */
.lock { border: 1px solid rgba(94, 139, 255, 0.45); box-shadow: var(--lift), 0 0 0 4px rgba(46, 107, 255, 0.08), 0 0 44px rgba(46, 107, 255, 0.30), 0 22px 48px rgba(11, 14, 18, 0.10); }
.lock .notif { --ink: #14181D; --ink-3: #5B6470; }
.relief .ck { background: var(--blue); box-shadow: 0 0 10px rgba(46, 107, 255, 0.55); }

/* what you get: white cards with the blue ring of the visuals */
.get .g { border: 1px solid rgba(46, 107, 255, 0.18); box-shadow: 0 0 22px rgba(46, 107, 255, 0.08), 0 12px 28px rgba(11, 14, 18, 0.06); }
.get .walk { margin: 0; }

/* proof on carbon */
.dark .proofs li::before { border-color: var(--on-dark-eyebrow); }
.dark .proofs li a { color: #FFFFFF; text-decoration-color: var(--blue-lt); }
.dark .steps li::before { color: var(--on-dark-eyebrow); text-shadow: 0 0 14px rgba(46, 107, 255, 0.55); }
.proofs li a, .price .small a { display: inline-block; min-height: 44px; padding-top: 10px; }

/* footer links: 44px tap targets, the rows kept close */
.ftr a { display: inline-flex; align-items: center; min-height: 44px; }
.fpage .ftr .wrap { row-gap: 0; }
.fpage .ftr .legal * { line-height: 1.6; }
.price .terms.status b { color: var(--blue-deep); font-weight: 500; }
/* the logo link in the header: a 44px tap target (the image stays its size) */
.fpage .hdr .logo { display: flex; align-items: center; min-height: 44px; }

/* ====== /gym on the funnel chassis (step 3, 2026-11-08): site/www/gym.html ======
   The same sections as a module funnel, plus what the gym has that a module page does not: the evening at a
   glance (the drawn visual), the three kinds of gym as headings, and three plans with the partner rate. */
[data-founding="False"] .founding { display: none; }
.today .row.top { margin-bottom: 6px; }
.glance { list-style: none; margin: 0; padding: 0; }
.glance li { padding: 10px 0; border-top: 1px solid var(--line); }
.glance li:first-child { border-top: 0; }
.glance .l { display: block; font-size: var(--fs-xs); color: var(--ink-3); }
.glance b { display: block; font-family: var(--cond); font-weight: 700; text-transform: uppercase; font-size: var(--fs-card); line-height: 1; color: var(--ink); margin: 2px 0; }
.glance small { display: block; font-size: var(--fs-xs); color: var(--ink-2); }
.get .walk { margin-top: 4px; }
.get .walk .textlink { display: inline-block; padding: 10px 0 6px; }
.kinds .h2 { margin-bottom: 18px; }
.kind { border-top: 1px solid var(--line); padding: 14px 0 16px; }
.kind:last-child { border-bottom: 1px solid var(--line); }
.kind h3 { font-family: var(--cond); font-weight: 700; text-transform: uppercase; font-size: var(--fs-card); line-height: 1; margin: 0 0 6px; color: var(--ink); }
.kind p { margin: 0; color: var(--ink-2); }
.gymprice .wrap { display: block; }
.gymprice .note { border-top: 0; padding-top: 0; margin: 14px 0 22px; }
.tiers { display: grid; grid-template-columns: 1fr; gap: 14px; }
.tier { background: var(--white); border: 1px solid rgba(46, 107, 255, 0.18); border-radius: var(--radius); padding: 20px 18px; box-shadow: 0 0 22px rgba(46, 107, 255, 0.08), 0 12px 28px rgba(11, 14, 18, 0.06); }
.tier.main { border: 2px solid var(--blue); box-shadow: 0 0 0 4px rgba(46, 107, 255, 0.10), 0 0 40px rgba(46, 107, 255, 0.24), 0 16px 34px rgba(11, 14, 18, 0.08); }
.tier .name { display: block; font-family: var(--cond); font-weight: 700; text-transform: uppercase; font-size: var(--fs-card); line-height: 1; }
.tier .name em { display: inline-block; font-family: "Barlow", sans-serif; font-style: normal; text-transform: none; font-weight: 500; font-size: var(--fs-xs); color: #fff; background: var(--blue); border-radius: 999px; padding: 3px 10px; margin-left: 6px; vertical-align: 3px; }
.gymprice .tier .amt { font-size: 56px; margin: 12px 0 6px; }
.gymprice .tier .amt small { font-size: var(--fs-card); }
.tier .terms { font-size: var(--fs-md); }
.tier .terms b { color: var(--ink); font-weight: 500; }
.tier ul { list-style: none; margin: 12px 0 0; padding: 0; }
.tier li { position: relative; padding: 7px 0 7px 26px; border-top: 1px solid var(--line); font-size: var(--fs-md); line-height: 1.4; color: var(--ink-2); }
.tier li::before { content: ""; position: absolute; left: 3px; top: 14px; width: 11px; height: 6px; border-left: 2.5px solid var(--blue); border-bottom: 2.5px solid var(--blue); transform: rotate(-45deg); }
.tier .fnote { margin: 14px 0 0; padding: 12px 14px; border-radius: 14px; background: #EEF3FF; font-size: var(--fs-md); color: var(--ink-2); }
.tier .fnote b { color: var(--ink); font-weight: 500; }
.tier .buy { display: inline-block; margin-top: 14px; padding: 10px 0 6px; }
.rules { margin: 24px 0 8px; }
.rules p { border-top: 1px solid var(--line); padding: 12px 0; margin: 0; font-size: var(--fs-md); color: var(--ink-2); }
.rules p:last-child { border-bottom: 1px solid var(--line); }
.rules b { color: var(--ink); font-weight: 500; }
.gymprice .small a { display: inline-block; min-height: 44px; padding-top: 10px; color: var(--ink); }
@media (min-width: 900px) {
  .kinds .wrap { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 32px; }
  .kinds .eyebrow, .kinds .h2 { grid-column: 1 / -1; }
  .kind, .kind:last-child { border-bottom: 1px solid var(--line); }
  .tiers { grid-template-columns: repeat(3, 1fr); align-items: start; gap: 20px; }
  .gymprice .note { font-size: var(--fs-sub); max-width: 46ch; }
  .rules { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 32px; }
  .rules p, .rules p:last-child { border-bottom: 1px solid var(--line); }
}

/* ====== /book on the chassis (step 3, 2026-11-08): site/www/book.html + booking.js ======
   The carrot first (strategy §6), then the form, then the calendar behind a button: never a blank frame. */
.bpage .hdr .logo { display: flex; align-items: center; min-height: 44px; }
.bpage .hdr .call { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--fs-sm); font-weight: 500; color: var(--ink); text-decoration: none; white-space: nowrap; }
.bpage .hdr .call svg { width: 1em; height: 1em; margin-right: .35em; fill: currentColor; }
.bhero { padding-bottom: 8px; }
.bhero .h1 { font-size: var(--fs-h1-s); }
.bhero .sub { margin-bottom: 8px; }
.bsteps { list-style: none; display: flex; gap: 8px; flex-wrap: wrap; margin: 16px 0 0; padding: 0; }
.bsteps li { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-sm); font-weight: 500; color: var(--ink-3); background: var(--paper); border-radius: 999px; padding: 6px 14px 6px 6px; }
.bsteps li span { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: #fff; font-family: var(--cond); font-weight: 700; font-size: 16px; color: var(--ink-3); }
.bsteps li[aria-current="step"] { background: #E8EFFF; color: var(--ink); }
.bsteps li[aria-current="step"] span { background: var(--blue); color: #fff; box-shadow: 0 0 10px rgba(46, 107, 255, 0.5); }
.bbody { padding-top: 20px; }
.bbody::before, .bbody::after { display: none; }
.bpanel { background: var(--white); border: 1px solid rgba(46, 107, 255, 0.22); border-radius: var(--radius); padding: 20px 16px; box-shadow: 0 0 0 4px rgba(46, 107, 255, 0.05), 0 0 34px rgba(46, 107, 255, 0.12), 0 22px 48px rgba(11, 14, 18, 0.08); }
.bpanel h2 { font-family: var(--cond); font-weight: 700; text-transform: uppercase; font-size: var(--fs-card); line-height: 1; margin: 0 0 6px; }
.bhint, .bpage .booking-hint { font-size: var(--fs-sm); color: var(--ink-3); margin: 0 0 14px; }
.bhint a, .bnote a { color: var(--ink); display: inline-block; padding: 12px 0; margin: -12px 0; }
.bfield { margin: 0 0 14px; }
.bfield label { display: block; font-size: var(--fs-md); font-weight: 500; margin-bottom: 6px; }
.bfield label span { font-weight: 400; color: var(--ink-3); }
.bpage input[type="text"], .bpage input[type="email"], .bpage input[type="tel"], .bpage input:not([type]), .bpage textarea {
  display: block; width: 100%; min-height: 52px; padding: 12px 14px; font: inherit; font-size: 18px; color: var(--ink);
  background: #fff; border: 1px solid rgba(20, 24, 29, 0.22); border-radius: 12px;
}
.bpage textarea { min-height: 96px; resize: vertical; line-height: 1.4; }
.bpage input::placeholder, .bpage textarea::placeholder { color: #6B737E; }
.bpage input:focus, .bpage textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(46, 107, 255, 0.25); }
.bpage [aria-invalid="true"] { outline: 2px solid var(--alert-red); outline-offset: 2px; }
.binterests { border: 0; margin: 0 0 14px; padding: 0; min-width: 0; }
.binterests legend { font-size: var(--fs-md); font-weight: 500; margin-bottom: 4px; padding: 0; }
.binterests .grid { display: grid; grid-template-columns: 1fr; gap: 8px; }
.binterests label, .bbuild label { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 12px; font-size: var(--fs-md); cursor: pointer; }
.binterests input, .bbuild input { width: 22px; height: 22px; accent-color: var(--blue); flex: none; }
.bbuild ul { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 8px; }
.bbuild, .bchat { margin: 0 0 18px; padding: 0 0 16px; border-bottom: 1px solid var(--line); }
.bchat p, .bworkflow { font-size: var(--fs-md); color: var(--ink-2); }
.bchat a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); }
.bnotice { font-size: var(--fs-md); color: var(--ink-2); padding: 12px 0; }
.bnotice p { margin: 0 0 4px; }
.bnotice a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); font-weight: 500; }
.berror { color: #B42318; font-weight: 500; font-size: var(--fs-md); margin: 0 0 10px; }
.berror:empty { display: none; }
.bpage .btn { border: 0; cursor: pointer; font-family: inherit; }
.bpage .btn[disabled] { opacity: .7; cursor: progress; }
.bpage .more { display: inline-flex; align-items: center; min-height: 44px; margin-top: 10px; padding: 0; border: 0; background: none; font: inherit; font-size: var(--fs-md); font-weight: 500; color: var(--ink); text-decoration: underline; text-decoration-color: var(--blue); text-underline-offset: 4px; cursor: pointer; }
.bnote { font-size: var(--fs-sm); color: var(--ink-3); margin: 12px 0 0; }
#schedule .btn { margin: 6px 0 4px; }
#calendar-frame { display: block; width: 100%; height: 760px; border: 1px solid var(--line); border-radius: 14px; margin-top: 12px; background: #fff; }
#calendar-frame[hidden] { display: none; }
.booking-done h2 { font-family: var(--cond); font-weight: 700; text-transform: uppercase; font-size: var(--fs-card); }
.baside { margin-top: 28px; }
.baside .eyebrow { margin-bottom: 8px; }
.baside h2 { font-family: var(--cond); font-weight: 700; text-transform: uppercase; font-size: var(--fs-card); line-height: 1; margin: 0 0 10px; }
.baside p, .baside li { font-size: var(--fs-md); color: var(--ink-2); }
.baside ul { list-style: none; margin: 0 0 14px; padding: 0; }
.baside li { position: relative; padding: 8px 0 8px 26px; border-top: 1px solid var(--line); }
.baside li:last-child { border-bottom: 1px solid var(--line); }
.baside li::before { content: ""; position: absolute; left: 3px; top: 15px; width: 11px; height: 6px; border-left: 2.5px solid var(--blue); border-bottom: 2.5px solid var(--blue); transform: rotate(-45deg); }
.baside .help a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); font-weight: 500; }
@media (min-width: 900px) {
  .bhero { padding-top: 64px; }
  .bhero .wrap { display: block; }
  .bhero .h1 { font-size: 72px; max-width: 16ch; }
  .bbody .wrap { display: grid; grid-template-columns: 1.25fr .75fr; gap: 56px; align-items: start; }
  .bpanel { padding: 32px 30px; }
  .bfields { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
  .binterests .grid { grid-template-columns: 1fr 1fr; }
  .baside { margin-top: 0; }
}

/* ====== the nav (step 4, 2026-11-08): auditor/site_nav.py, one header for every v6 page ======
   Phone: the A-and-tie mark, the one button, a menu toggle; the toggle opens a full-screen drawer with
   "Systems by business" open first and the button and tap-to-call pinned at the bottom (v6.js section 4).
   The mark stands in for the wordmark under 420px: the wordmark (88px), the full button text at 15px (224px)
   and a 44px toggle cannot share a 360px phone. Under 360px the header button steps out instead of
   shrinking (the hero and the drawer carry it), so nothing in the header is ever under 15px.
   Desktop (1080px and up): the wordmark, Systems by business and Products as drop-downs, Pricing, Blog, the button. */
.hdr.has-nav .wrap { gap: 8px; justify-content: flex-start; }
.hdr.has-nav > .wrap > .logo { display: flex; align-items: center; min-height: 44px; flex: none; }
.hdr .logo .mark { display: none; width: 36px; height: 36px; border-radius: 9px; box-shadow: 0 0 14px rgba(46, 107, 255, 0.30); }
.hdr.has-nav > .wrap > .btn, .hdr.has-nav > .wrap > .call.top { margin-left: auto; }
.hdr.has-nav .btn { padding: 8px 8px; }
.hdr .call.top { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--fs-sm); font-weight: 500; color: var(--ink); text-decoration: none; white-space: nowrap; }
.hdr .call svg { width: 1em; height: 1em; margin-right: .35em; fill: currentColor; flex: none; }
.hdr .menu {
  flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-width: 44px; min-height: 44px; padding: 0 10px; margin-right: -10px;
  border: 0; border-radius: 12px; background: none; color: var(--ink); font: inherit; font-size: var(--fs-sm); font-weight: 500; cursor: pointer;
}
.hdr .menu .bars { display: inline-flex; flex-direction: column; gap: 4px; }
.hdr .menu .bars i { display: block; width: 20px; height: 2px; border-radius: 2px; background: currentColor; }
.hdr .menu .lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 419px) {
  .hdr.has-nav > .wrap > .logo .word { display: none; }
  .hdr.has-nav > .wrap > .logo .mark { display: block; }
}
@media (max-width: 359px) {
  .hdr.has-nav:not(.on-book) > .wrap > .btn { display: none; }
  .hdr.has-nav > .wrap > .menu { margin-left: auto; }
  /* with the button out there is room for the name again */
  .hdr.has-nav:not(.on-book) > .wrap > .logo .word { display: block; }
  .hdr.has-nav:not(.on-book) > .wrap > .logo .mark { display: none; }
}
@media (min-width: 600px) { .hdr .menu .lbl { position: static; width: auto; height: auto; overflow: visible; clip: auto; } .hdr.has-nav .btn { padding: 8px 16px; } }

/* the drawer: hidden until the toggle opens it. The header's glass (backdrop-filter) would trap a fixed child in
   the header's own box, so the open header drops it. */
.nav { position: fixed; inset: 0; z-index: 80; display: flex; flex-direction: column; background: #FFFFFF;
  overflow-y: auto; overscroll-behavior: contain; visibility: hidden; opacity: 0; transform: translateY(-8px);
  transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s; }
.hdr.open { backdrop-filter: none; -webkit-backdrop-filter: none; }
.hdr.open .nav { visibility: visible; opacity: 1; transform: none; transition: opacity .18s ease, transform .18s ease; }
html.nav-open { overflow: hidden; }
html.nav-open [data-receptionist-chat] { display: none !important; }
.nav .dtop { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 64px; padding: 0 var(--gutter);
  border-bottom: 1px solid rgba(46, 107, 255, 0.28); box-shadow: 0 1px 16px rgba(46, 107, 255, 0.14); flex: none; }
.nav .dtop .logo { display: flex; align-items: center; min-height: 44px; }
.nav .dtop .logo img { height: 26px; width: auto; }
.nav .x { position: relative; width: 44px; height: 44px; margin-right: -8px; border: 0; background: none; border-radius: 12px; cursor: pointer; color: var(--ink); }
.nav .x span::before, .nav .x span::after { content: ""; position: absolute; left: 11px; top: 21px; width: 22px; height: 2px; border-radius: 2px; background: currentColor; transform: rotate(45deg); }
.nav .x span::after { transform: rotate(-45deg); }
.nav .groups { padding: 4px var(--gutter) 16px; }
.nav .grp { border-bottom: 1px solid var(--line); }
.nav summary { display: flex; align-items: center; justify-content: space-between; min-height: 60px; list-style: none; cursor: pointer;
  font-family: var(--cond); font-weight: 700; text-transform: uppercase; font-size: 26px; line-height: 1; color: var(--ink); }
.nav summary::-webkit-details-marker { display: none; }
.nav .caret { width: 14px; height: 10px; fill: none; stroke: var(--blue); stroke-width: 2; flex: none; transition: transform .15s ease; }
.nav details[open] .caret { transform: rotate(180deg); }
.nav ul { list-style: none; margin: 0; padding: 0 0 12px; }
.nav li a { display: block; padding: 9px 0; min-height: 44px; text-decoration: none; color: var(--ink); }
.nav li .n { display: block; font-size: var(--fs-lg); font-weight: 500; line-height: 1.3; }
.nav li .s { display: block; font-size: var(--fs-xs); color: var(--ink-3); line-height: 1.35; }
.nav li a[aria-current="page"] .n { color: var(--blue-deep); }
.nav li a[aria-current="page"] .n::after { content: " (this page)"; font-weight: 400; color: var(--ink-3); font-size: var(--fs-xs); }
.nav .lnk { display: flex; align-items: center; min-height: 60px; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--ink);
  font-family: var(--cond); font-weight: 700; text-transform: uppercase; font-size: 26px; line-height: 1; }
.nav .pin { position: sticky; bottom: 0; margin-top: auto; padding: 14px var(--gutter) 18px; background: #FFFFFF;
  border-top: 1px solid rgba(46, 107, 255, 0.22); box-shadow: 0 -10px 24px rgba(11, 14, 18, 0.06); display: grid; gap: 4px; justify-items: center; }
.nav .pin .btn { width: 100%; }
.nav .pin .call { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; font-size: var(--fs-lg); font-weight: 500; color: var(--ink); text-decoration: none; }
.nav .pin-note { margin: 0; font-size: var(--fs-xs); color: var(--ink-3); }

/* desktop: the nav sits in the header, the two groups drop down */
@media (min-width: 1080px) {
  .hdr .menu, .nav .dtop, .nav .pin { display: none; }
  .nav { position: static; inset: auto; z-index: auto; flex-direction: row; align-items: center; margin-left: auto; overflow: visible;
    background: none; visibility: visible; opacity: 1; transform: none; transition: none; }
  .hdr.has-nav > .wrap > .btn { margin-left: 16px; }
  .nav .groups { display: flex; align-items: center; gap: 2px; padding: 0; }
  .nav .grp { position: relative; border: 0; }
  .nav summary, .nav .lnk { min-height: 44px; padding: 0 12px; border: 0; border-radius: 10px; gap: 8px;
    font-family: "Barlow", sans-serif; font-weight: 500; text-transform: none; font-size: var(--fs-sm); }
  .nav summary:hover, .nav .lnk:hover, .nav details[open] summary { background: #EEF3FF; }
  .nav ul { position: absolute; top: calc(100% + 8px); left: 0; z-index: 90; width: 340px; padding: 8px; background: #FFFFFF;
    border: 1px solid rgba(46, 107, 255, 0.22); border-radius: 16px; box-shadow: 0 0 0 4px rgba(46, 107, 255, 0.05), 0 0 34px rgba(46, 107, 255, 0.14), 0 22px 48px rgba(11, 14, 18, 0.12); }
  .nav li a { padding: 10px 12px; border-radius: 10px; }
  .nav li a:hover { background: #F2F5FA; }
}

/* the end of an industry page: every other trade (strategy §5) */
.trades .h2 { margin: 6px 0 18px; }

/* /system: the morning brief, and every part at its own price under the complete system's price */
.today .title { font-family: var(--cond); font-weight: 700; text-transform: uppercase; font-size: 24px; line-height: 1; }
.today .meta { font-size: var(--fs-xs); color: var(--ink-3); margin: 4px 0 12px; }
.today .counts { list-style: none; margin: 0 0 12px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.today .counts li { background: #FFFFFF; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; font-size: var(--fs-xs); line-height: 1.3; color: var(--ink-3); }
.today .counts b { display: block; font-family: var(--cond); font-weight: 700; font-size: var(--fs-num); line-height: 1; color: var(--blue-deep); }
.today .items { list-style: none; margin: 0; padding: 12px 0 0; border-top: 1px solid var(--line); display: grid; gap: 8px; }
.today .items li { display: flex; gap: 10px; align-items: flex-start; font-size: var(--fs-md); line-height: 1.35; }
.today .items .ck { margin-top: 2px; flex: none; background: var(--blue); }
.parts { margin-top: 18px; }
.parts .ph { font-family: var(--cond); font-weight: 700; text-transform: uppercase; font-size: var(--fs-card); line-height: 1; margin: 0 0 8px; }
.parts ul { list-style: none; margin: 0 0 10px; padding: 0; border-top: 1px solid var(--line); }
.parts li a { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; min-height: 52px; padding: 12px 0;
  border-bottom: 1px solid var(--line); text-decoration: none; color: var(--ink); }
.parts .pn { font-size: var(--fs-lg); font-weight: 500; }
.parts .pn .st { display: block; font-size: var(--fs-xs); font-weight: 400; color: var(--ink-3); }
.parts .pp { font-family: var(--cond); font-weight: 700; font-size: 26px; white-space: nowrap; color: var(--blue-deep); }
.parts .pp small { font-family: "Barlow", sans-serif; font-weight: 400; font-size: var(--fs-xs); color: var(--ink-3); }

/* review fixes (step 4): an anchor (Pricing, #price) lands below the sticky header; the phone logo is a 44px target;
   a trade with no page yet says it books a screen share; a part not open to buy says so in place of a price */
.sec { scroll-margin-top: 76px; }
@media (min-width: 900px) { .sec { scroll-margin-top: 88px; } }
.hdr.has-nav > .wrap > .logo { min-width: 44px; }
.nav li .go { display: block; font-size: var(--fs-xs); font-weight: 500; color: var(--blue-deep); line-height: 1.35; }
.parts .pp.soon { font-family: "Barlow", sans-serif; font-weight: 500; font-size: var(--fs-xs); color: var(--ink-3); white-space: normal; text-align: right; }

/* ====== the legal pages on v6 (step 5, 2026-11-08): site/legal/page.html + auditor/legal.py ======
   The text stays as written (site/legal/<slug>.html); this only gives it the v6 type, 44px links and tables that
   scroll inside their own box, so the page never scrolls sideways. Nothing under 15px. */
.legal-main { padding-top: var(--sec-top); padding-bottom: var(--sec-bot); }
.legal-page { max-width: 760px; }
.legal-page .h2 { margin: 8px 0 10px; }
.legal-page .meta { font-size: var(--fs-sm); color: var(--ink-3); margin: 0 0 28px; }
.legal-page .prose { font-size: var(--body); line-height: 1.55; color: var(--ink-2); }
.legal-page .prose h2 { font-family: var(--cond); font-weight: 700; font-size: 28px; line-height: 1.05; color: var(--ink); margin: 36px 0 10px; }
.legal-page .prose h3 { font-size: var(--fs-xl); font-weight: 600; color: var(--ink); margin: 24px 0 8px; }
.legal-page .prose p, .legal-page .prose ul { margin: 0 0 14px; }
.legal-page .prose ul { padding-left: 22px; }
.legal-page .prose li { margin-bottom: 6px; }
.legal-page .prose strong { color: var(--ink); }
.legal-page .prose a { color: var(--blue-deep); text-underline-offset: 3px; }
.legal-page .prose code { font-size: var(--fs-xs); background: var(--paper); border-radius: 6px; padding: 2px 6px; }
.legal-page .prose blockquote { margin: 0 0 14px; padding: 14px 18px; border-left: 3px solid var(--blue); background: var(--paper); border-radius: 0 12px 12px 0; }
.legal-page .prose blockquote p { margin: 0; }
.legal-page .prose .table { overflow-x: auto; margin: 0 0 18px; border: 1px solid var(--line); border-radius: 14px; }
.legal-page .prose table { border-collapse: collapse; min-width: 520px; width: 100%; font-size: var(--fs-md); }
.legal-page .prose th, .legal-page .prose td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.legal-page .prose th { font-weight: 600; color: var(--ink); background: var(--paper); }
.legal-page .prose tr:last-child td { border-bottom: 0; }
@media (min-width: 900px) { .legal-page .prose { font-size: var(--fs-xl); } .legal-page .prose h2 { font-size: 32px; } }
/* footer: a one-letter link (X) still gets a 24px-wide target (WCAG 2.5.8); the links stay 44px tall */
.ftr a { min-width: 24px; }
/* /system at 900px and up: the price column is short and the parts list long, so both columns start at the top;
   "That is $2,988 a year" then sits beside the price it explains (step 5 review). :has() falls back to the old end. */
@media (min-width: 900px) { .price .wrap:has(.parts) { align-items: start; } }
/* the legal tables on a phone: each row a stacked card, each cell led by its column's heading (data-label from
   auditor/legal.py), so no column hides behind a sideways scroll */
@media (max-width: 599px) {
  .legal-page .prose table { min-width: 0; }
  .legal-page .prose thead { display: none; }
  .legal-page .prose table, .legal-page .prose tbody, .legal-page .prose tr, .legal-page .prose td { display: block; width: auto; }
  .legal-page .prose tr { padding: 12px 14px; border-bottom: 1px solid var(--line); }
  .legal-page .prose tr:last-child { border-bottom: 0; }
  .legal-page .prose td { padding: 2px 0; border: 0; }
  .legal-page .prose td:first-child { font-weight: 600; color: var(--ink); padding-bottom: 6px; }
  .legal-page .prose td:not(:first-child)[data-label]::before { content: attr(data-label) ": "; font-weight: 600; color: var(--ink); }
}