/* Consult a Buddy, rebuild mockup, third pass (30 Oct 2026).
   A marked-up printout. Navy ink for text and actions, highlighter yellow for what
   to look at, red pen only where something means "cut", white sheets on grey paper.
   One family (Libre Franklin). Evidence is laid out as numbered exhibits. */
:root {
  --desk: #E9ECF1;
  --sheet: #FFFFFF;
  --ink: #18223D;
  --ink-soft: #4A5368;
  --rule: #CBD1DC;
  --mark: #FFE14D;
  --mark-pale: #FFF4BF;
  --pen: #C4161C;
  --pen-pale: #FBE6E6;
  --go: #1E8E3E;
  --max: none; /* HARD RULE (Uthman, 31 Oct 2026): text runs the full width of the page, no narrow measure */
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--desk);
  color: var(--ink);
  font-family: 'Libre Franklin', 'Helvetica Neue', Arial, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-weight: 800; line-height: 1.1; letter-spacing: -0.015em; margin: 0 0 0.5em; }
h1 { font-size: clamp(2.1rem, 4.2vw + 1rem, 3.4rem); letter-spacing: -0.025em; }
h2 { font-size: clamp(1.5rem, 1.8vw + 1rem, 2.1rem); }
h3 { font-size: 1.12rem; font-weight: 700; letter-spacing: 0; }
p { margin: 0 0 1em; }
a { color: var(--ink); text-decoration-color: var(--ink-soft); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--ink); background: var(--mark-pale); }
.num { font-variant-numeric: tabular-nums lining-nums; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--ink); outline-offset: 2px;
}

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 40px; }
section { padding: 72px 0; }
.sheet { background: var(--sheet); }
.lede { font-size: 1.15rem; color: var(--ink-soft); }
.small { font-size: 0.9rem; color: var(--ink-soft); }

/* Mockup strip */
.mock-strip { background: var(--ink); color: #DDE2EC; font-size: 0.85rem; padding: 7px 0; }
.mock-strip p { margin: 0; max-width: none; }

/* Header */
.site-header { position: sticky; top: 0; z-index: 30; background: var(--sheet); border-bottom: 1px solid var(--rule); }
.nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; }
.brand { font-weight: 800; font-size: 1.15rem; color: var(--ink); text-decoration: none; white-space: nowrap; letter-spacing: -0.01em; }
.brand span { padding: 0 2px; }
.brand:hover { background: none; }
.nav-links { list-style: none; display: flex; align-items: center; gap: 24px; margin: 0; padding: 0; }
.nav-links a { color: var(--ink); text-decoration: none; font-size: 0.95rem; font-weight: 500; }
.nav-links a:hover, .nav-links a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; background: none; }
.nav-toggle { display: none; background: none; border: 1px solid var(--ink); border-radius: 2px; padding: 7px 12px; font: inherit; font-size: 0.9rem; color: var(--ink); cursor: pointer; }

/* Buttons */
.btn { display: inline-block; font: inherit; font-weight: 700; font-size: 0.98rem; padding: 12px 20px; border-radius: 2px; border: 2px solid var(--ink); text-decoration: none; cursor: pointer; }
.btn:active { transform: scale(0.98); }
.btn-solid { background: var(--ink); color: #fff; }
.btn-solid:hover { background: #0E1528; color: #fff; }
.btn-line { background: transparent; color: var(--ink); }
.btn-line:hover { background: var(--mark-pale); }
.nav-links .btn { color: #fff; padding: 8px 14px; font-size: 0.9rem; }
.nav-links .btn:hover { color: #fff; text-decoration: none; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 8px; }

/* Hero */
.hero { padding: 64px 0 72px; background: var(--sheet); }
.hero-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center; }
.inbox { border: 1px solid var(--ink); background: var(--sheet); overflow: hidden; }
.inbox-head { padding: 10px 16px; border-bottom: 1px solid var(--ink); font-size: 0.82rem; font-weight: 600; display: flex; justify-content: space-between; }
.inbox ul { list-style: none; margin: 0; padding: 0; }
.inbox li.mail { position: relative; border-bottom: 1px solid var(--rule); overflow: hidden; transition: height 260ms ease, border-color 260ms ease; }
.inbox li.mail:last-child { border-bottom: none; }
.inbox .under { position: absolute; inset: 0; opacity: 0; background: var(--pen); color: #fff; font-size: 0.85rem; font-weight: 700; display: flex; align-items: center; justify-content: flex-end; padding-right: 18px; }
.inbox .face {
  position: relative; display: grid; grid-template-columns: 1fr auto; gap: 2px 12px;
  padding: 12px 16px; background: var(--sheet);
  touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none;
  will-change: transform;
}
.inbox .face:active { cursor: grabbing; }
.inbox .from { font-weight: 700; font-size: 0.9rem; }
.inbox .date { font-size: 0.8rem; color: var(--ink-soft); }
.inbox .subj { grid-column: 1 / -1; font-size: 0.9rem; color: var(--ink-soft); }
.inbox li.keep .face { background: var(--mark-pale); cursor: default; }
.inbox li.keep .from::before { content: ""; }
.inbox-foot { padding: 10px 16px; border-top: 1px solid var(--rule); font-size: 0.85rem; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.inbox-foot[hidden] { display: none; }
.inbox-refill { background: none; border: none; font: inherit; font-size: 0.85rem; font-weight: 600; color: var(--ink); text-decoration: underline; cursor: pointer; padding: 0; }
.inbox-label { font-size: 0.82rem; font-weight: 700; margin: 0 0 6px; }
.swipe-hint { margin: 10px 0 0; font-size: 0.85rem; color: var(--ink-soft); }

/* Highlighter: yellow marks are drawn left to right when they come into view */
.hl, .hl-pale { background-repeat: no-repeat; background-position: 0 0; background-size: 0% 100%; transition: background-size 650ms cubic-bezier(.3,.7,.2,1); }
.hl { background-image: linear-gradient(var(--mark), var(--mark)); }
.hl-pale { background-image: linear-gradient(var(--mark-pale), var(--mark-pale)); }
.hl-low { background-position: 0 100%; background-size: 0% 45%; }
.hl.in, .hl-pale.in { background-size: 100% 100%; }
.hl-low.in { background-size: 100% 45%; }
@media (prefers-reduced-motion: reduce) { .hl, .hl-pale { transition: none; } }

/* Why this exists */
.why { display: grid; grid-template-columns: 1.2fr 1fr; gap: 56px; align-items: start; }
.why h3 { margin-top: 4px; }
.places { display: inline-block; background: var(--mark-pale); padding: 4px 10px; font-weight: 600; font-size: 0.92rem; }

/* Day cards */
.week-block { margin-top: 28px; }
.week-block h3 { margin-bottom: 4px; }
.week-block .wsub { margin: 0 0 12px; color: var(--ink-soft); font-size: 0.95rem; }
.days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; list-style: none; margin: 0; padding: 0; }
.day { border: 1px solid var(--ink); background: var(--sheet); padding: 10px 11px 12px; font-size: 0.86rem; line-height: 1.4; display: flex; flex-direction: column; gap: 6px; min-height: 150px; }
.day .dn { font-weight: 700; font-size: 0.78rem; }
.day .task { flex: 1; }
.day .res { font-size: 0.8rem; }
.day .res a { font-weight: 600; }
.day .tm { font-size: 0.78rem; color: var(--ink-soft); }
.day.catch { border-color: var(--rule); color: var(--ink-soft); background: repeating-linear-gradient(135deg, #fff 0 6px, #F1F3F6 6px 12px); }
.day.check { font-weight: 600; }
.days-hint { display: none; }

/* Booking and legal pages */
.book-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.book-form { border: 1px solid var(--ink); background: var(--sheet); padding: 24px; }
.book-form .form { margin-top: 0; max-width: none; }
.book-form label { color: var(--ink); }
.book-form .consent { color: var(--ink-soft); }
.book-form input[type="text"], .book-form input[type="email"], .book-form input[type="tel"], .book-form select, .book-form textarea { width: 100%; font: inherit; font-size: 0.98rem; padding: 11px 12px; border: 1px solid var(--rule); border-radius: 2px; background: #fff; color: var(--ink); }
.book-form input[type="file"] { width: 100%; font: inherit; padding: 9px 10px; border: 1px solid var(--rule); border-radius: 2px; background: #fff; }
.book-form textarea { min-height: 90px; resize: vertical; }
.book-form .form-done { border-color: var(--ink); }
.legal { max-width: none; }
.legal h2 { font-size: 1.25rem; margin-top: 32px; }
.legal p, .legal li { max-width: none; }

/* Exhibits */
.exhibit { border-top: 3px solid var(--ink); padding-top: 14px; }
.exhibit-label { font-size: 0.85rem; font-weight: 700; margin: 0 0 18px; }
.exhibit-label span { font-weight: 400; color: var(--ink-soft); }
.source { font-size: 0.8rem; color: var(--ink-soft); border-top: 1px solid var(--rule); padding-top: 10px; margin-top: 20px; }
.figure-row { display: grid; grid-template-columns: auto 1fr; gap: 40px; align-items: start; }
.big-figure { font-size: clamp(4.5rem, 10vw, 8rem); font-weight: 800; line-height: 0.85; letter-spacing: -0.04em; }

/* Pyramid, scrolled through beside its stage panels */
.pyr-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 56px; align-items: start; }
.pyr-stick { position: sticky; top: 84px; }
.funnel { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.funnel li { width: 100%; display: flex; justify-content: center; }
.layer {
  width: var(--w); min-width: 170px;
  font: inherit; font-weight: 600; font-size: 0.92rem; line-height: 1.25; text-align: center;
  padding: 9px 8px; border: 1px solid var(--ink); border-radius: 0;
  background: var(--sheet); color: var(--ink); cursor: pointer;
  transition: background 120ms;
}
.layer .cnt { display: block; font-weight: 400; font-size: 0.8rem; color: var(--ink-soft); }
.layer:hover { background: var(--mark-pale); }
.layer[aria-selected="true"] { background: var(--mark); }
.layer[aria-selected="true"] .cnt { color: var(--ink); }
.layer.tip { background: var(--ink); color: #fff; }
.layer.tip .cnt { color: #C3CADA; }
.layer.tip[aria-selected="true"] { box-shadow: inset 0 -5px 0 var(--mark); }
.funnel-note { margin: 12px auto 0; text-align: center; }
.stages { margin: 0; padding: 0; list-style: none; }
.stage { padding: 26px 0 26px 20px; border-top: 1px solid var(--rule); border-left: 4px solid transparent; transition: border-color 200ms; }
.stage.on { border-left-color: var(--mark); }
.stage h3 { margin-bottom: 8px; }
.stage .cnt { font-weight: 400; color: var(--ink-soft); font-size: 0.95rem; }
.stage dl { margin: 0; }
.stage dt { font-weight: 700; font-size: 0.88rem; margin-top: 12px; }
.stage dt.cut { color: var(--pen); }
.stage dd { margin: 2px 0 0; }

/* Ishaq's record */
.record { width: 100%; border-collapse: collapse; margin-top: 4px; }
.record td { padding: 10px 0; border-bottom: 1px solid var(--rule); vertical-align: baseline; }
.record td:first-child { font-size: 2rem; font-weight: 800; width: 110px; letter-spacing: -0.02em; }
.record-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 48px; align-items: start; }

/* Course */
.course-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.weeks { list-style: none; margin: 20px 0 0; padding: 0; border-top: 1px solid var(--ink); }
.weeks > li { display: grid; grid-template-columns: 96px 1fr; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.weeks .wk { font-weight: 700; }
.weeks p { margin: 0; }
.email { border: 1px solid var(--ink); background: var(--sheet); font-size: 0.95rem; }
.email-head { padding: 12px 18px; border-bottom: 1px solid var(--ink); font-size: 0.85rem; color: var(--ink-soft); }
.email-head b { color: var(--ink); }
.email-body { padding: 16px 18px 4px; }
.email-body h4 { font-size: 0.8rem; font-weight: 700; margin: 14px 0 2px; }
.email-body h4:first-child { margin-top: 0; }
.email-body p { margin: 0 0 6px; }
.email-done { display: inline-block; margin: 10px 0 14px; padding: 8px 14px; background: var(--ink); color: #fff; border-radius: 2px; font-weight: 700; font-size: 0.9rem; text-decoration: none; }
.email-done:hover { background: #0E1528; }

/* Options table */
.table-wrap { overflow-x: auto; margin-top: 24px; border-top: 2px solid var(--ink); background: var(--sheet); }
table.options { border-collapse: collapse; width: 100%; min-width: 720px; font-size: 0.95rem; }
.options th, .options td { text-align: left; vertical-align: top; padding: 14px 16px; border-bottom: 1px solid var(--rule); }
.options thead th { font-size: 1.05rem; font-weight: 800; }
.options tbody th { font-weight: 600; color: var(--ink-soft); width: 150px; font-size: 0.88rem; }
.options .free { }

/* Streams */
.streams { list-style: none; margin: 20px 0 0; padding: 0; border-top: 1px solid var(--ink); }
.streams li { display: grid; grid-template-columns: 1fr auto; gap: 8px 24px; padding: 18px 0; border-bottom: 1px solid var(--rule); align-items: center; }
.streams h3 { margin: 0; }
.streams p { margin: 4px 0 0; color: var(--ink-soft); font-size: 0.95rem; }
.status { font-size: 0.88rem; font-weight: 700; white-space: nowrap; }
.status.open { padding: 2px 8px; }
.status.quiet { color: var(--ink-soft); font-weight: 600; }

/* Person */
.person { display: grid; grid-template-columns: 150px 1fr; gap: 28px; align-items: start; }
.person img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; background: var(--rule); }
.person .role { font-weight: 600; font-size: 0.95rem; margin-bottom: 10px; }

/* Sign up */
.signup { background: var(--ink); color: #fff; }
.signup h2, .signup a { color: #fff; }
.signup p { color: #C3CADA; }
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; margin-top: 24px; }
.form label { display: block; font-size: 0.88rem; font-weight: 600; margin-bottom: 6px; color: #fff; }
.form input[type="text"], .form input[type="email"], .form select { width: 100%; font: inherit; font-size: 0.98rem; padding: 11px 12px; border: 1px solid #6E7890; border-radius: 2px; background: #fff; color: var(--ink); }
.form .full { grid-column: 1 / -1; }
.consent { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; font-size: 0.9rem; color: #C3CADA; }
.consent input { width: 18px; height: 18px; margin-top: 3px; accent-color: var(--mark); }
.consent label { font-weight: 400; margin: 0; color: inherit; }
.signup .btn-solid { background: var(--mark); border-color: var(--mark); color: var(--ink); }
.signup .btn-solid:hover { background: #fff; border-color: #fff; }
.form-done { margin-top: 20px; padding: 14px 18px; border: 1px solid #6E7890; }

/* Consulting page */
.crumb { font-size: 0.88rem; color: var(--ink-soft); margin-bottom: 14px; }
.brief { display: grid; grid-template-columns: 1.2fr 1fr; gap: 56px; align-items: start; }
.facts { width: 100%; border-collapse: collapse; border-top: 2px solid var(--ink); font-size: 0.95rem; }
.facts caption { text-align: left; }
.facts th, .facts td { text-align: left; padding: 11px 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
.facts th { font-weight: 600; color: var(--ink-soft); width: 42%; padding-right: 16px; }

.track { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); border-top: 2px solid var(--ink); }
.track li { padding: 14px 16px 0 0; }
.track .step { font-size: 0.8rem; font-weight: 800; }
.track h3 { margin: 4px 0 6px; }
.track .len { font-size: 0.85rem; font-weight: 600; margin: 0 0 6px; }
.track p { font-size: 0.93rem; margin: 0; color: var(--ink-soft); }

.cal { margin-top: 8px; border-top: 2px solid var(--ink); background: var(--sheet); }
.cal-row { display: grid; grid-template-columns: 150px repeat(7, 1fr); border-bottom: 1px solid var(--rule); }
.cal-head { font-size: 0.78rem; font-weight: 700; color: var(--ink-soft); }
.cal-head > div { padding: 8px 8px 8px 10px; }
.cal-week { padding: 12px 12px 12px 10px; }
.cal-week b { display: block; font-size: 0.95rem; }
.cal-week span { font-size: 0.85rem; color: var(--ink-soft); }
.cal-day { padding: 12px 10px; border-left: 1px solid var(--rule); font-size: 0.86rem; line-height: 1.4; }
.cal-day .d { display: none; font-weight: 700; font-size: 0.78rem; color: var(--ink-soft); }
.cal-day.catch { color: var(--ink-soft); background: repeating-linear-gradient(135deg, transparent 0 6px, #F1F3F6 6px 12px); }
.cal-day.check { font-weight: 600; }
.cal-hint { display: none; }

.scorecard { border-top: 2px solid var(--ink); }
.scorecard ol { list-style: none; margin: 0; padding: 0; }
.scorecard li { display: grid; grid-template-columns: 1fr 112px 22px; gap: 12px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--rule); font-size: 0.95rem; }
.dots { display: flex; gap: 3px; }
.dots i { width: 19px; height: 9px; background: var(--rule); }
.dots i.on { background: var(--ink); }
.scorecard li.weak { color: var(--pen); font-weight: 600; }
.scorecard li.weak .dots i.on { background: var(--pen); }
.scorecard .score { font-weight: 700; text-align: right; }
.resource-list { list-style: none; padding: 0; margin: 16px 0 0; border-top: 1px solid var(--ink); }
.resource-list li { padding: 12px 0; border-bottom: 1px solid var(--rule); }
.resource-list a { font-weight: 700; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }

/* Footer */
.site-footer { padding: 28px 0 44px; font-size: 0.9rem; color: var(--ink-soft); }
.site-footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; }
.site-footer nav { display: flex; gap: 18px; flex-wrap: wrap; }

/* Responsive */
@media (max-width: 960px) {
  .pyr-grid { grid-template-columns: 1fr; gap: 24px; }
  .pyr-stick { position: static; }
  .days { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
  .day { flex: 0 0 74%; scroll-snap-align: start; min-height: 0; }
  .days-hint { display: block; margin: 8px 0 0; }
  .book-grid, .why { grid-template-columns: 1fr; gap: 32px; }
  .track { grid-template-columns: 1fr; border-top: none; }
  .track li { border-top: 1px solid var(--rule); padding: 14px 0; display: grid; grid-template-columns: 34px 1fr; gap: 0 12px; }
  .track li:first-child { border-top: 2px solid var(--ink); }
  .track .step { grid-row: 1 / 4; font-size: 1.1rem; padding-top: 2px; }

  /* The weeks become cards you swipe sideways */
  .cal { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; border-top: none; background: none; padding-bottom: 6px; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
  .cal-head { display: none; }
  .cal-row { flex: 0 0 86%; scroll-snap-align: start; grid-template-columns: 1fr; border: 1px solid var(--ink); background: var(--sheet); }
  .cal-week { padding: 14px 14px 10px; border-bottom: 1px solid var(--ink); }
  .cal-day { border-left: none; border-top: 1px solid var(--rule); display: grid; grid-template-columns: 52px 1fr; gap: 10px; padding: 9px 14px; }
  .cal-week + .cal-day { border-top: none; }
  .cal-day .d { display: block; }
  .cal-hint { display: block; margin: 10px 0 0; }
}
@media (max-width: 900px) {
  .hero-grid, .funnel-grid, .course-grid, .two, .record-grid, .brief { grid-template-columns: 1fr; gap: 36px; }
  .figure-row { grid-template-columns: 1fr; gap: 10px; }
}
@media (max-width: 820px) {
  .nav-toggle { display: inline-block; }
  .nav-links { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--sheet); border-bottom: 1px solid var(--rule); flex-direction: column; align-items: flex-start; gap: 0; padding: 8px 24px 16px; }
  .nav-links.open { display: flex; }
  .nav-links li { width: 100%; padding: 10px 0; }
  .site-header .nav { position: relative; }
}
@media (max-width: 600px) {
  .wrap { padding: 0 16px; }
  .wrap { padding: 0 16px; }
  section { padding: 52px 0; }
  .form { grid-template-columns: 1fr; }
  .weeks > li { grid-template-columns: 1fr; gap: 2px; }
  .person { grid-template-columns: 1fr; }
  .person img { max-width: 140px; }
  .layer { min-width: 140px; font-size: 0.88rem; }
  .scorecard li { grid-template-columns: 1fr 96px 20px; }
  .record td:first-child { width: 84px; font-size: 1.7rem; }
}

/* ---- Fifth pass, 31 Oct evening. Less prose, more figures. ---- */
/* Stage track as tabs, each with a live example */
.track.tabs li { padding: 0; }
.tab { display: block; width: 100%; text-align: left; background: none; border: none; border-top: 4px solid transparent; margin-top: -2px; padding: 14px 16px 16px 0; font: inherit; color: var(--ink); cursor: pointer; }
.tab:hover { background: var(--mark-pale); }
.tab[aria-selected="true"] { border-top-color: var(--mark); background: var(--mark-pale); }
.tab .step { display: block; font-size: 0.8rem; font-weight: 800; }
.tab .tname { display: block; font-size: 1.12rem; font-weight: 700; margin: 4px 0 6px; }
.tab .len { display: block; font-size: 0.85rem; font-weight: 600; margin: 0 0 6px; }
.tab .tdesc { display: block; font-size: 0.93rem; color: var(--ink-soft); }
.demo { border: 1px solid var(--ink); background: var(--sheet); padding: 28px; margin-top: 16px; }
.demo[hidden] { display: none; }
.demo-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: start; }
.demo-kicker { font-size: 0.85rem; font-weight: 700; margin-bottom: 12px; }
.demo .q { font-size: 1.15rem; font-weight: 600; }
.ticks { list-style: none; margin: 0 0 12px; padding: 0; }
.ticks li { padding: 8px 0 8px 26px; border-bottom: 1px solid var(--rule); position: relative; }
.ticks li::before { content: ""; position: absolute; left: 2px; top: 14px; width: 12px; height: 6px; border-left: 3px solid var(--ink); border-bottom: 3px solid var(--ink); transform: rotate(-45deg); }
.cv-bullet { display: grid; grid-template-columns: 64px 1fr; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--rule); align-items: start; }
.cv-bullet .tag { font-size: 0.78rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; padding-top: 4px; }
.cv-bullet p { margin: 0; }
.cv-bullet.after .tag { color: var(--pen); }
.cv-bullet + .btn { margin-top: 14px; }
.willo { background: var(--ink); color: #fff; padding: 22px; min-height: 220px; display: flex; }
.willo-screen { align-self: flex-end; width: 100%; }
.willo .rec { display: inline-block; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #C3CADA; padding: 3px 8px; border: 1px solid #4A5368; margin-bottom: 14px; }
.willo .rec.live { color: #fff; border-color: var(--pen); background: var(--pen); }
.willo .q { color: #fff; margin-bottom: 6px; }
.willo .small { color: #C3CADA; margin: 0; }
.clock { font-size: 3rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1; margin-bottom: 10px; }
.clock.low { color: var(--pen); }
.test { border: 1px solid var(--rule); padding: 18px 20px; }
.test-head { display: flex; justify-content: space-between; font-size: 0.85rem; font-weight: 700; padding-bottom: 10px; border-bottom: 1px solid var(--ink); margin-bottom: 14px; }
.opts { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.opts button { width: 100%; text-align: left; font: inherit; padding: 10px 14px; border: 1px solid var(--rule); background: var(--sheet); color: var(--ink); cursor: pointer; border-radius: 2px; }
.opts button:hover { background: var(--mark-pale); }
.opts button.right { background: var(--mark); border-color: var(--ink); font-weight: 700; }
.opts button.wrong { background: var(--pen-pale); border-color: var(--pen); color: var(--pen); text-decoration: line-through; }
.opts button[disabled] { cursor: default; }
.working { margin-top: 14px; padding: 12px 14px; background: var(--mark-pale); border-left: 4px solid var(--mark); }
.working[hidden] { display: none; }
.working p { margin: 0; }
.chain { list-style: none; margin: 0 0 16px; padding: 0; border-top: 2px solid var(--ink); }
.chain li { display: grid; grid-template-columns: 1fr auto; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--rule); opacity: 0.22; transition: opacity 320ms ease; }
.chain li.on { opacity: 1; }
.chain .val { font-weight: 700; text-align: right; }
.chain li.check { grid-template-columns: 1fr; }
.chain li.check .val { font-weight: 400; text-align: left; color: var(--ink-soft); }
.chain li.check.on .lbl { color: var(--pen); }
.files { list-style: none; margin: 0 0 16px; padding: 0; border-top: 1px solid var(--ink); }
.files li { padding: 10px 0 10px 28px; border-bottom: 1px solid var(--rule); position: relative; }
.files li::before { content: ""; position: absolute; left: 2px; top: 13px; width: 13px; height: 16px; border: 2px solid var(--ink); border-radius: 1px; }
.files + .btn { margin-bottom: 10px; }
/* 140 to 1. At rest the bar is a preview, 140 applications on white. Hover (or focus, or a tap on touch) plays it,
   the red fills while the count climbs to 139 rejected, then the one acceptance lands in green. Leaving resets it. */
.ratio { position: relative; display: flex; align-items: stretch; height: 64px; margin: 36px 0 8px; border: 2px solid var(--ink); background: var(--sheet); overflow: hidden; cursor: pointer; }
.ratio .idle { position: absolute; inset: 0; display: flex; align-items: center; justify-content: space-between; padding: 0 18px; font-weight: 800; font-size: 1.05rem; transition: opacity 260ms ease; }
.ratio .idle .cue { font-weight: 500; font-size: 0.9rem; color: var(--ink-soft); }
.ratio.live .idle { opacity: 0; pointer-events: none; }
.ratio .rej, .ratio .acc { display: flex; align-items: center; font-weight: 800; font-size: 1.05rem; white-space: nowrap; overflow: hidden; }
.ratio .rej { width: 0; background: var(--pen); color: #fff; padding-left: 16px; }
.ratio .rej span { opacity: 0; transition: opacity 200ms ease; }
.ratio.live .rej span { opacity: 1; }
.ratio .acc { flex: 1; min-width: 0; background: var(--go); color: #fff; justify-content: center; opacity: 0; transform: translateX(24px); transition: opacity 400ms ease 100ms, transform 600ms cubic-bezier(.2,.9,.3,1.2) 100ms; }
.ratio.done .acc { opacity: 1; transform: none; }
.ratio .acc span { padding: 0 14px; }
.ratio:focus-visible { outline-offset: 4px; }
@media (hover: none) { .ratio .idle .cue::before { content: "Tap"; } .ratio .idle .cue { font-size: 0; } .ratio .idle .cue::before { font-size: 0.9rem; } }
@media (prefers-reduced-motion: reduce) { .ratio .acc, .ratio .idle, .ratio .rej span { transition: none; } }
/* free / paid ledger and who it is for */
.ledger { display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: start; }
.ledger h3 { margin-bottom: 10px; }
.ledger .paid { border-left: 4px solid var(--pen); padding-left: 20px; }
.who { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 32px; margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--ink); align-items: start; }
.who h3 { margin-bottom: 6px; }
.who p { margin: 0; }
.who-cta .btn { margin-top: 10px; }
/* record as bars */
.bars { list-style: none; margin: 8px 0 0; padding: 0; }
.bars li { display: grid; grid-template-columns: 170px 1fr; gap: 6px 16px; padding: 12px 0; border-bottom: 1px solid var(--rule); align-items: center; }
.bars .bl { font-weight: 600; font-size: 0.95rem; }
.bars .bar { display: block; height: 34px; width: 0; min-width: 44px; background: var(--ink); color: #fff; font-weight: 800; padding: 0 10px; line-height: 34px; transition: width 900ms cubic-bezier(.2,.8,.2,1); }
.bars.in .bar { width: var(--p); }
.bars .bar.hit { background: var(--mark); color: var(--ink); }
.bars .bn { grid-column: 2; font-size: 0.88rem; color: var(--ink-soft); }
@media (prefers-reduced-motion: reduce) {
  .bars .bar { transition: none; width: var(--p); }
  .chain li { transition: none; }
}
@media (max-width: 960px) {
  .demo-grid, .ledger { grid-template-columns: 1fr; gap: 28px; }
  .who { grid-template-columns: 1fr; gap: 20px; }
  .track.tabs { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .track.tabs { grid-template-columns: 1fr; }
  .tab { padding: 12px 12px 12px 0; }
  .demo { padding: 18px; }
  .bars li { grid-template-columns: 1fr; }
  .bars .bn { grid-column: 1; }
  .ratio { height: 52px; }
  .ratio .rej, .ratio .acc { font-size: 0.92rem; }
  .cv-bullet { grid-template-columns: 1fr; gap: 4px; }
}

/* ---- Sixth pass, 3 Nov. Streams menu, one exhibit first screen, flip card, quiz. ---- */
.nav-links .has-sub { position: relative; }
.sub-toggle { background: none; border: 0; font: inherit; font-size: 0.95rem; font-weight: 500; color: var(--ink); cursor: pointer; padding: 0; }
.sub-toggle::after { content: ""; display: inline-block; margin-left: 7px; width: 6px; height: 6px; border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: rotate(45deg) translateY(-2px); }
.sub-toggle:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.sub { display: none; position: absolute; top: calc(100% + 8px); left: -14px; min-width: 320px; background: var(--sheet); border: 1px solid var(--ink); padding: 6px 0; margin: 0; list-style: none; z-index: 40; }
.sub::before { content: ""; position: absolute; left: 0; right: 0; top: -9px; height: 9px; }
.has-sub.open .sub { display: block; }
.sub li { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 0; }
.sub a { display: block; flex: 1; padding: 9px 16px; font-size: 0.93rem; }
.sub a:hover { background: var(--mark-pale); text-decoration: none; }
.sub .st { font-size: 0.78rem; font-weight: 700; color: var(--ink-soft); padding-right: 16px; white-space: nowrap; }
.sub .st.live { color: var(--ink); background: var(--mark); padding: 1px 8px; margin-right: 16px; }
@media (min-width: 821px) and (hover: hover) { .has-sub:hover .sub { display: block; } }
@media (max-width: 820px) {
  .sub { position: static; border: 0; min-width: 0; padding: 4px 0 0 12px; }
  .sub::before { display: none; }
  .sub-toggle { font-size: 1rem; }
}

/* First screen, the bar and the funnel as one exhibit */
.first-screen { align-items: start; gap: 56px; }
.first-screen h1 { font-size: clamp(2.4rem, 4.4vw + 1rem, 4.2rem); }
.first-screen .ratio { margin-top: 6px; }
.ratio-note { min-height: 1.7em; margin: 0 0 14px; font-weight: 700; opacity: 0; transition: opacity 250ms ease; }
.ratio-note.show { opacity: 1; }
.funnel-title { font-size: 0.85rem; font-weight: 700; margin: 4px 0 10px; }
.layer.static { cursor: default; }
.layer.static:hover { background: var(--sheet); }
.layer.static.tip:hover { background: var(--ink); }
@media (prefers-reduced-motion: reduce) { .ratio-note { transition: none; } }

/* Flip card */
.flip { display: block; width: 100%; max-width: 560px; perspective: 1100px; background: none; border: 0; padding: 0; font: inherit; color: var(--ink); text-align: left; cursor: pointer; }
.flip-in { display: grid; transition: transform 600ms cubic-bezier(.3,.7,.2,1); transform-style: preserve-3d; }
.flip.on .flip-in { transform: rotateY(180deg); }
.flip .face { grid-area: 1 / 1; backface-visibility: hidden; -webkit-backface-visibility: hidden; border: 1px solid var(--ink); background: var(--sheet); padding: 20px 22px; display: block; }
.flip .back { transform: rotateY(180deg); background: var(--mark-pale); }
.flip .mail-from { display: flex; justify-content: space-between; gap: 12px; font-size: 0.9rem; margin-bottom: 8px; }
.flip .mail-subj { display: block; font-size: 1.2rem; font-weight: 800; line-height: 1.25; margin-bottom: 10px; }
.flip .mail-body { display: block; color: var(--ink-soft); }
.flip:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; }
.flip-hint { margin-top: 10px; }
@media (prefers-reduced-motion: reduce) { .flip-in { transition: none; } .flip.on .flip-in { transform: none; } .flip.on .front { display: none; } .flip:not(.on) .back { display: none; } .flip .back { transform: none; } }

/* Why, who, stream pick, quiz call to action */
.why-text { font-size: 1.1rem; margin: 0 0 28px; }
.who-box select { width: 100%; font: inherit; font-size: 0.98rem; padding: 11px 12px; border: 1px solid var(--ink); border-radius: 2px; background: #fff; color: var(--ink); margin-top: 6px; }
.iceberg { margin-top: 12px; padding: 12px 14px; background: var(--mark-pale); border-left: 4px solid var(--mark); }
.iceberg[hidden] { display: none; }
.quiz-cta { display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: center; border-top: 3px solid var(--ink); padding-top: 24px; }
.quiz-cta h2, .quiz-cta p { margin-bottom: 0.4em; }
@media (max-width: 760px) { .quiz-cta { grid-template-columns: 1fr; gap: 16px; } .first-screen { gap: 36px; } }

/* Quiz */
.quiz-wrap { max-width: 920px; }
.quiz-bar { height: 6px; background: var(--rule); margin: 0 0 24px; }
.quiz-bar i { display: block; height: 100%; width: 0; background: var(--ink); transition: width 300ms ease; }
.q-count { font-size: 0.85rem; font-weight: 700; color: var(--ink-soft); margin: 0 0 8px; }
.q-kind { display: inline-block; font-size: 0.75rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; padding: 2px 8px; background: var(--mark-pale); margin: 0 0 10px; }
.q-title { font-size: clamp(1.35rem, 1.5vw + 1rem, 1.9rem); font-weight: 800; line-height: 1.2; letter-spacing: -0.01em; margin: 0 0 14px; }
.q-sub { color: var(--ink-soft); margin: 0 0 16px; }
.q-opts { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.q-opts button { width: 100%; height: 100%; text-align: left; font: inherit; padding: 12px 14px; border: 1px solid var(--ink); background: var(--sheet); color: var(--ink); cursor: pointer; border-radius: 2px; }
.q-opts button:hover { background: var(--mark-pale); }
.q-opts button[aria-pressed="true"] { background: var(--mark); font-weight: 700; }
.q-actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.q-actions .btn[disabled] { opacity: 0.35; cursor: default; }
.q-actions .btn-back { border-color: var(--rule); color: var(--ink-soft); }
.prompt-box { width: 100%; min-height: 260px; font: inherit; font-size: 0.85rem; line-height: 1.5; padding: 12px; border: 1px solid var(--ink); background: #fff; color: var(--ink); resize: vertical; margin: 8px 0 12px; }
.score-in { display: inline-block; width: 110px; font: inherit; font-size: 1.1rem; padding: 10px 12px; border: 1px solid var(--ink); border-radius: 2px; }
.res h2 { margin-top: 0; }
.res-head { border-top: 3px solid var(--ink); padding-top: 16px; margin-bottom: 28px; }
.res-head .pct { font-size: clamp(3rem, 8vw, 5.5rem); font-weight: 800; line-height: 0.95; letter-spacing: -0.03em; }
.res-sec { margin: 0 0 44px; }
.res-sec > h2 { font-size: 1.5rem; }
.res-lines { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.res-lines li { padding: 12px 0; border-bottom: 1px solid var(--rule); }
.res-lines b { font-weight: 800; }
.res-meter { position: relative; height: 18px; border: 2px solid var(--ink); background: #fff; margin: 18px 0 6px; }
.res-meter i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--ink); }
.res-meter em { position: absolute; top: -8px; bottom: -8px; width: 3px; background: var(--pen); }
.res-key { display: flex; justify-content: space-between; font-size: 0.82rem; color: var(--ink-soft); }
.opt-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 16px 0; }
.opt-card { border: 1px solid var(--ink); background: var(--sheet); padding: 16px; }
.opt-card h3 { margin-bottom: 6px; }
.opt-card.hi { background: var(--mark-pale); border-width: 3px; padding: 14px; }
.opt-card .tagline { display: inline-block; font-size: 0.75rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; background: var(--mark); padding: 1px 8px; margin-bottom: 8px; }
.reco { border-left: 4px solid var(--mark); background: var(--mark-pale); padding: 12px 16px; margin: 16px 0; }
.request { border: 1px solid var(--ink); background: var(--sheet); padding: 24px; margin-top: 20px; }
.request .form { margin-top: 12px; }
.request .form label { color: var(--ink); }
.request input[type="text"], .request input[type="email"], .request input[type="tel"], .request input[type="file"], .request select { width: 100%; font: inherit; font-size: 0.98rem; padding: 11px 12px; border: 1px solid var(--rule); border-radius: 2px; background: #fff; color: var(--ink); }
.request .consent { color: var(--ink-soft); }
.email-preview { margin-top: 20px; border: 1px solid var(--ink); background: #fff; }
.email-preview .ep-head { padding: 12px 18px; border-bottom: 1px solid var(--ink); font-size: 0.85rem; color: var(--ink-soft); }
.email-preview .ep-body { padding: 16px 18px; font-size: 0.92rem; }
.email-preview table { width: 100%; border-collapse: collapse; margin: 6px 0 14px; }
.email-preview th, .email-preview td { text-align: left; vertical-align: top; padding: 6px 8px 6px 0; border-bottom: 1px solid var(--rule); }
.email-preview th { width: 38%; font-weight: 600; color: var(--ink-soft); }
.email-preview h4 { margin: 14px 0 4px; font-size: 0.85rem; }
@media (max-width: 860px) { .opt-cards { grid-template-columns: 1fr; } }
.wrap.nav { padding-left: 40px; padding-right: 40px; }
@media (max-width: 600px) { .wrap.nav { padding-left: 16px; padding-right: 16px; } }