/* BaroqTech public site, redesign of 10 October 2026.
   One sans family (Geist) for everything; the serif only in the wordmark. Gold is kept for one meaning: passed.
   Near-white by default, deep graphite when the device asks for dark. No script, no inline style. */
@font-face { font-family: "Geist"; src: url("/static/site/sans.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Argus Serif"; src: url("/static/site/serif.woff2") format("woff2"); font-weight: 400 800; font-display: swap; }
:root {
  --paper: #fbfbfa; --card: #ffffff; --sunk: #f3f3f1; --ink: #16171a; --ink-2: #3d4046; --muted: #6a6e76;
  --rule: #e1e1de; --rule-2: #ebebe8; --gold: #b5862a; --gold-ink: #85600f; --gold-wash: #f6eedc;
  --night: #121315; --night-2: #1c1d20; --night-rule: #2b2c30; --on-night: #f3f3f0; --on-night-2: #b6b9bf;
  --no: #8f9399; --idle: #e4e4e1; --yes: var(--gold); --up: #2f6f47; --down: #9b3d34; --up-bg: #e5f0e8; --down-bg: #f3e9e7;
  --lift: 0 1px 2px rgba(22, 23, 26, 0.04), 0 30px 80px -40px rgba(22, 23, 26, 0.28);
  --ui: "Geist", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --display: "Geist", "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --mark: "Argus Serif", "Iowan Old Style", Palatino, Georgia, serif;
  --gutter: 28px; --section: 128px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 72px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 18px/1.6 var(--ui); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-feature-settings: "ss01" 0; }
::selection { background: var(--gold-wash); color: var(--ink); }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; padding: 0; }
h1, h2 { font-family: var(--display); font-weight: 640; text-wrap: balance; color: var(--ink); }
h1 { font-size: clamp(46px, 7.4vw, 104px); line-height: 0.98; letter-spacing: -0.045em; }
.h1s { font-size: clamp(40px, 5.4vw, 72px); line-height: 1.02; letter-spacing: -0.04em; }
h2 { font-size: clamp(32px, 4.2vw, 56px); line-height: 1.04; letter-spacing: -0.035em; }
h3 { font-size: 20px; line-height: 1.3; font-weight: 600; letter-spacing: -0.012em; }
p { text-wrap: pretty; }
a { color: var(--gold-ink); text-decoration-thickness: 1px; text-underline-offset: 4px; }
a:hover { color: var(--ink); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 6px; }
.skip { position: absolute; left: -9999px; top: 8px; background: var(--card); color: var(--ink); padding: 10px 14px; border-radius: 10px; z-index: 30; } .skip:focus { left: 8px; }
.wrap { max-width: 1160px; margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.narrow { max-width: 800px; }
.block { padding-top: var(--section); padding-bottom: var(--section); }
section.block + section.block, section.block + .about { padding-top: 0; }   /* two light sections in a row share one gap */
.lead { font-size: clamp(19px, 1.6vw, 23px); line-height: 1.5; color: var(--ink-2); max-width: 34em; letter-spacing: -0.01em; }
.fine { font-size: 14.5px; line-height: 1.55; color: var(--muted); }
.text-link { font-weight: 550; }

/* header: slim, translucent, one row on every width */
.top { position: sticky; top: 0; z-index: 20; background: rgba(251, 251, 250, 0.78); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid var(--rule); }
.topin { display: flex; align-items: center; justify-content: space-between; gap: 12px 32px; min-height: 60px; }
.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; color: var(--ink); font: 600 21px/1 var(--mark); letter-spacing: -0.01em; flex: none; }
.brand:hover { color: var(--ink); }
.brand.small { font-size: 19px; color: var(--ink); }
.eyes { display: grid; grid-template-columns: repeat(3, 5px); gap: 3px; }
.eyes i { width: 5px; height: 5px; border-radius: 50%; background: var(--ink); } .eyes i:nth-child(odd) { background: var(--gold); }
.top nav { display: flex; align-items: center; gap: 4px 26px; font-size: 14.5px; min-width: 0; }
.top nav a { color: var(--ink-2); text-decoration: none; padding: 8px 0; white-space: nowrap; } .top nav a:hover { color: var(--ink); }
.top nav a.lang { color: var(--muted); }
.top nav a.door { border: 1px solid var(--rule); border-radius: 999px; padding: 6px 14px; color: var(--ink); font-weight: 550; }
.top nav a.door:hover { border-color: var(--ink-2); }
.cta { display: inline-flex; align-items: center; justify-content: center; background: var(--ink); color: var(--paper); border: 0; border-radius: 999px; padding: 12px 24px; min-height: 48px; font: 550 16.5px/1.3 var(--ui); letter-spacing: -0.01em; cursor: pointer; text-decoration: none; white-space: nowrap; transition: background-color 0.2s ease; }
.cta:hover { background: #33353a; color: var(--paper); }
.cta.dark { background: var(--ink); color: var(--paper); }
.top nav a.cta { padding: 7px 16px; min-height: 34px; font-size: 14px; color: var(--paper); }

/* hero: centred statement, then the instrument */
.heroin { display: flex; flex-direction: column; align-items: center; gap: 72px; padding-top: 112px; padding-bottom: 96px; }
.pitch { min-width: 0; display: flex; flex-direction: column; gap: 22px; }
.hero .pitch { align-items: center; text-align: center; max-width: 980px; }
.hero .pitch h1 { max-width: 12.5ch; }
.hero .pitch .lead { max-width: 33em; }
.hero .pitch .join { justify-content: center; width: 100%; max-width: 560px; margin-top: 10px; }
.hero .pitch .fine { max-width: 36em; }
/* a centred one-line form: the label stays for screen readers, the placeholder shows what goes in */
.hero .join .field label, .joinin .join .field label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.join, .ask { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin-top: 4px; }
.ask { flex-direction: column; align-items: stretch; gap: 14px; }
.field { flex: 1 1 250px; min-width: 0; display: flex; flex-direction: column; gap: 6px; text-align: left; }
.ask .field { flex: none; }
.field label { font-size: 13.5px; color: var(--muted); }
.field input, .field textarea, .field select { font: inherit; font-size: 16.5px; padding: 12px 18px; min-height: 48px; width: 100%; border: 1px solid var(--rule); border-radius: 14px; background: var(--card); color: var(--ink); transition: border-color 0.15s ease; }
.join .field input { border-radius: 999px; }
.field input:hover, .field textarea:hover, .field select:hover { border-color: #c9c9c5; }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--ink-2); box-shadow: 0 0 0 4px rgba(181, 134, 42, 0.18); }
.field textarea { resize: vertical; line-height: 1.5; }
.join.dark label { color: var(--on-night-2); }
.join.dark input { background: var(--night-2); border-color: var(--night-rule); color: var(--on-night); }
.night .cta, .night .cta.dark { background: var(--on-night); color: var(--night); } .night .cta:hover { background: #ffffff; color: var(--night); }
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.note { border-radius: 14px; padding: 12px 16px; font-weight: 550; text-align: left; }
.note.ok { background: var(--up-bg); color: var(--up); }
.note.open { font-weight: 400; background: var(--card); border: 1px solid var(--rule); border-left: 3px solid var(--gold); color: var(--ink-2); max-width: 70em; }
.note.err { background: var(--down-bg); color: var(--down); }
.night .note.ok { background: #18301f; color: #c4ecd0; } .night .note.err { background: #3a1c19; color: #f6cdc7; }

/* the instrument: one mark per idea, gold only for a pass */
.watch-card { width: 100%; background: var(--card); color: var(--ink); border: 1px solid var(--rule); border-radius: 32px; padding: 48px 52px; box-shadow: var(--lift);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 64px; row-gap: 32px; align-items: start; text-align: left; }
.wc-head { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; padding-bottom: 4px; }
.wc-head h2 { font-size: clamp(24px, 2.4vw, 30px); letter-spacing: -0.025em; } .wc-head span { font-size: 14.5px; color: var(--muted); }
.wc-body { display: flex; flex-direction: column; gap: 28px; }
.marks { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: clamp(7px, 1.1vw, 13px); width: 100%; max-width: 420px; }
.marks i, .key i { aspect-ratio: 1; width: 100%; border-radius: 50%; background: var(--idle); display: block; }
.key i { width: 14px; height: 14px; flex: none; }
.marks i.no, .key i.no { background: none; border: 2px solid var(--no); } .key i.yes, .marks i.yes { background: var(--yes); border: 0; }
.key { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 26px; font-size: 15.5px; color: var(--ink-2); }
.key li { display: flex; align-items: center; gap: 9px; } .key strong { color: var(--ink); font-weight: 650; font-variant-numeric: tabular-nums; } .key .dim { color: var(--muted); }
.stopped { display: flex; flex-direction: column; }
.stopped > p { font-size: 14.5px; color: var(--muted); padding-bottom: 10px; }
.stopped .row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 18px; padding: 15px 0; border-top: 1px solid var(--rule-2); font-size: 16px; }
.stopped .row span:first-child { font-weight: 550; color: var(--ink); } .stopped .why { color: var(--muted); }
.stopped .more { color: var(--gold-ink); font-weight: 550; padding-top: 16px; border-top: 1px solid var(--rule-2); }
.stopped .more:hover { color: var(--ink); }
.watch-card > .facts { grid-column: 1 / -1; }
@media (prefers-reduced-motion: no-preference) {
  @keyframes mark-in { from { opacity: 0; transform: scale(0.4); } to { opacity: 1; transform: none; } }
  .marks i { animation: mark-in 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
  /* one mark after another, in the order the ideas were tested */
  .marks i:nth-child(1) { animation-delay: 134ms; }
  .marks i:nth-child(2) { animation-delay: 148ms; }
  .marks i:nth-child(3) { animation-delay: 162ms; }
  .marks i:nth-child(4) { animation-delay: 176ms; }
  .marks i:nth-child(5) { animation-delay: 190ms; }
  .marks i:nth-child(6) { animation-delay: 204ms; }
  .marks i:nth-child(7) { animation-delay: 218ms; }
  .marks i:nth-child(8) { animation-delay: 232ms; }
  .marks i:nth-child(9) { animation-delay: 246ms; }
  .marks i:nth-child(10) { animation-delay: 260ms; }
  .marks i:nth-child(11) { animation-delay: 274ms; }
  .marks i:nth-child(12) { animation-delay: 288ms; }
  .marks i:nth-child(13) { animation-delay: 302ms; }
  .marks i:nth-child(14) { animation-delay: 316ms; }
  .marks i:nth-child(15) { animation-delay: 330ms; }
  .marks i:nth-child(16) { animation-delay: 344ms; }
  .marks i:nth-child(17) { animation-delay: 358ms; }
  .marks i:nth-child(18) { animation-delay: 372ms; }
  .marks i:nth-child(19) { animation-delay: 386ms; }
  .marks i:nth-child(20) { animation-delay: 400ms; }
  .marks i:nth-child(21) { animation-delay: 414ms; }
  .marks i:nth-child(22) { animation-delay: 428ms; }
  .marks i:nth-child(23) { animation-delay: 442ms; }
  .marks i:nth-child(24) { animation-delay: 456ms; }
  .marks i:nth-child(25) { animation-delay: 470ms; }
  .marks i:nth-child(26) { animation-delay: 484ms; }
  .marks i:nth-child(27) { animation-delay: 498ms; }
  .marks i:nth-child(28) { animation-delay: 512ms; }
  .marks i:nth-child(29) { animation-delay: 526ms; }
  .marks i:nth-child(30) { animation-delay: 540ms; }
  .marks i:nth-child(31) { animation-delay: 554ms; }
  .marks i:nth-child(32) { animation-delay: 568ms; }
  .marks i:nth-child(33) { animation-delay: 582ms; }
  .marks i:nth-child(34) { animation-delay: 596ms; }
  .marks i:nth-child(35) { animation-delay: 610ms; }
  .marks i:nth-child(36) { animation-delay: 624ms; }
  .marks i:nth-child(37) { animation-delay: 638ms; }
  .marks i:nth-child(38) { animation-delay: 652ms; }
  .marks i:nth-child(39) { animation-delay: 666ms; }
  .marks i:nth-child(40) { animation-delay: 680ms; }
  .marks i:nth-child(41) { animation-delay: 694ms; }
  .marks i:nth-child(42) { animation-delay: 708ms; }
  .marks i:nth-child(43) { animation-delay: 722ms; }
  .marks i:nth-child(44) { animation-delay: 736ms; }
  .marks i:nth-child(45) { animation-delay: 750ms; }
  .marks i:nth-child(46) { animation-delay: 764ms; }
  .marks i:nth-child(47) { animation-delay: 778ms; }
  .marks i:nth-child(48) { animation-delay: 792ms; }
  .marks i:nth-child(49) { animation-delay: 806ms; }
  .marks i:nth-child(50) { animation-delay: 820ms; }
  .marks i:nth-child(51) { animation-delay: 834ms; }
  .marks i:nth-child(52) { animation-delay: 848ms; }
  .marks i:nth-child(53) { animation-delay: 862ms; }
  .marks i:nth-child(54) { animation-delay: 876ms; }
  .marks i:nth-child(55) { animation-delay: 890ms; }
  .marks i:nth-child(56) { animation-delay: 904ms; }
  .marks i:nth-child(57) { animation-delay: 918ms; }
  .marks i:nth-child(58) { animation-delay: 932ms; }
  .marks i:nth-child(59) { animation-delay: 946ms; }
  .marks i:nth-child(60) { animation-delay: 960ms; }
  .marks i:nth-child(61) { animation-delay: 974ms; }
  .marks i:nth-child(62) { animation-delay: 988ms; }
  .marks i:nth-child(63) { animation-delay: 1002ms; }
  .marks i:nth-child(64) { animation-delay: 1016ms; }
  .marks i:nth-child(65) { animation-delay: 1030ms; }
  .marks i:nth-child(66) { animation-delay: 1044ms; }
  .marks i:nth-child(67) { animation-delay: 1058ms; }
  .marks i:nth-child(68) { animation-delay: 1072ms; }
  .marks i:nth-child(69) { animation-delay: 1086ms; }
  .marks i:nth-child(70) { animation-delay: 1100ms; }
  .marks i:nth-child(71) { animation-delay: 1114ms; }
  .marks i:nth-child(72) { animation-delay: 1128ms; }
  .marks i:nth-child(73) { animation-delay: 1142ms; }
  .marks i:nth-child(74) { animation-delay: 1156ms; }
  .marks i:nth-child(75) { animation-delay: 1170ms; }
  .marks i:nth-child(76) { animation-delay: 1184ms; }
  .marks i:nth-child(77) { animation-delay: 1198ms; }
  .marks i:nth-child(78) { animation-delay: 1212ms; }
  .marks i:nth-child(79) { animation-delay: 1226ms; }
  .marks i:nth-child(80) { animation-delay: 1240ms; }
  .marks i:nth-child(81) { animation-delay: 1254ms; }
  .marks i:nth-child(82) { animation-delay: 1268ms; }
  .marks i:nth-child(83) { animation-delay: 1282ms; }
  .marks i:nth-child(84) { animation-delay: 1296ms; }
  .marks i:nth-child(85) { animation-delay: 1310ms; }
  .marks i:nth-child(86) { animation-delay: 1324ms; }
  .marks i:nth-child(87) { animation-delay: 1338ms; }
  .marks i:nth-child(88) { animation-delay: 1352ms; }
  .marks i:nth-child(89) { animation-delay: 1366ms; }
  .marks i:nth-child(90) { animation-delay: 1380ms; }
  .marks i:nth-child(91) { animation-delay: 1394ms; }
  .marks i:nth-child(92) { animation-delay: 1408ms; }
  .marks i:nth-child(93) { animation-delay: 1422ms; }
  .marks i:nth-child(94) { animation-delay: 1436ms; }
  .marks i:nth-child(95) { animation-delay: 1450ms; }
  .marks i:nth-child(96) { animation-delay: 1464ms; }
  .marks i:nth-child(97) { animation-delay: 1478ms; }
  .marks i:nth-child(98) { animation-delay: 1492ms; }
  .marks i:nth-child(99) { animation-delay: 1506ms; }
  .marks i:nth-child(100) { animation-delay: 1520ms; }
}

/* facts strip under the hero */
.strip { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); background: var(--paper); }
.stripin { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
.stripin div { padding: 30px 26px 30px 0; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.stripin div + div { padding-left: 26px; border-left: 1px solid var(--rule-2); }
.stripin strong { font-weight: 600; font-size: 16.5px; letter-spacing: -0.01em; } .stripin span { color: var(--muted); font-size: 15px; }

/* sections */
.story { display: flex; flex-direction: column; gap: 40px; }
.story h2 { max-width: 15em; }
.cols2 { display: flex; flex-wrap: wrap; gap: 24px 72px; }
.cols2 > * { flex: 1 1 380px; min-width: 0; } .cols2 div { display: flex; flex-direction: column; gap: 16px; color: var(--ink-2); }
.band { background: var(--sunk); }
.band > .wrap { padding-top: var(--section); padding-bottom: var(--section); display: flex; flex-direction: column; gap: 48px; }
.band > .wrap.two { flex-direction: row; }
.band + .band > .wrap { padding-top: 0; }   /* two grey sections in a row read as one */
.intro { display: flex; flex-direction: column; gap: 18px; max-width: 48em; }
.intro p { font-size: clamp(18px, 1.4vw, 21px); line-height: 1.55; color: var(--ink-2); max-width: 38em; }
.three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; }
.three > div { min-width: 0; display: flex; flex-direction: column; gap: 12px; border-top: 1px solid var(--ink); padding-top: 22px; }
.three.plain > div { border-top-color: var(--rule); }
.three p, .steps p, .qa p, .pitch > p:not(.lead):not(.fine), .askbox > p:not(.fine):not(.note) { color: var(--ink-2); }
.three p { font-size: 17px; }
.block > .intro { margin-bottom: 48px; }
.lessons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 64px; margin-bottom: 32px; }
.lessons > div { border-top: 1px solid var(--rule); padding: 28px 0 34px; display: flex; flex-direction: column; gap: 10px; }
.lessons p { color: var(--ink-2); font-size: 17px; }
.from { font-size: 14px; font-weight: 500; color: var(--gold-ink); }
table.book td { min-width: 190px; } table.book td.idea { min-width: 170px; }
.steps { list-style: none; counter-reset: step; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; position: relative; }
.steps li { counter-increment: step; min-width: 0; display: flex; flex-direction: column; gap: 10px; position: relative; padding-top: 64px; }
.steps li::before { content: counter(step); position: absolute; top: 0; left: 0; width: 40px; height: 40px; border-radius: 50%; background: var(--card); border: 1px solid var(--rule); display: flex; align-items: center; justify-content: center; font: 600 16px/1 var(--ui); color: var(--ink); z-index: 1; }
.steps li::after { content: ""; position: absolute; top: 20px; left: 40px; right: -32px; height: 1px; background: var(--rule); }
.steps li:last-child::after { display: none; }
.steps li:last-child::before { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* dark product bands */
.night { background: var(--night); color: var(--on-night); }
.night h2, .night h3 { color: var(--on-night); }
.night > .wrap { padding-top: var(--section); padding-bottom: var(--section); display: flex; flex-direction: column; gap: 48px; }
.night .intro p, .night .lead, .night .fine { color: var(--on-night-2); }
.night a, .night .fine a { color: #e2bb6a; } .night a:hover { color: #ffffff; }
.joinin { gap: 24px !important; align-items: center; text-align: center; }
.joinin .lead { margin: 0 auto; } .joinin .join { justify-content: center; width: 100%; max-width: 560px; }
.shot { background: var(--night-2); border: 1px solid var(--night-rule); border-radius: 24px; padding: 10px; }
.shot img { display: block; width: 100%; height: auto; border-radius: 16px; }
.shot figcaption { font-size: 14px; color: var(--on-night-2); padding: 10px 8px 4px; }
.shot-ph { display: flex; align-items: center; justify-content: center; min-height: 240px; border-radius: 16px; background: linear-gradient(180deg, #1f2023, #17181a); color: var(--on-night-2); font: 550 20px/1.3 var(--ui); letter-spacing: -0.01em; }
.points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 48px; }
.points div { border-top: 1px solid var(--night-rule); padding-top: 20px; }
.points dt { font-weight: 600; font-size: 17.5px; color: var(--on-night); margin-bottom: 6px; letter-spacing: -0.01em; } .points dd { color: var(--on-night-2); font-size: 16.5px; }
.two { display: flex; flex-wrap: wrap; gap: 64px; align-items: flex-start; }

.facts { flex: 1 1 380px; min-width: 0; background: var(--card); border: 1px solid var(--rule); border-radius: 24px; padding: 8px 28px; }
.facts div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--rule-2); }
.facts div:last-child { border-bottom: 0; }
.facts dt { color: var(--ink-2); } .facts dd { font: 600 34px/1.1 var(--display); letter-spacing: -0.03em; font-variant-numeric: tabular-nums lining-nums; text-align: right; } .facts dd.small { font-size: 20px; letter-spacing: -0.01em; }
.facts.dark { background: transparent; border: 0; padding: 0; } .facts.dark div { border-color: var(--rule-2); }
.facts.dark dt { color: var(--ink-2); } .facts.dark dd { color: var(--ink); }

/* price */
#price { display: flex; flex-direction: column; gap: 28px; } #price > .intro { margin-bottom: 12px; }
.prices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.price { min-width: 0; background: var(--card); border: 1px solid var(--rule); border-radius: 28px; padding: 40px; display: flex; flex-direction: column; gap: 10px; }
.price.main { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold), var(--lift); }
.price .amount { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-top: 10px; }
.price .amount b { font: 640 60px/1 var(--display); letter-spacing: -0.045em; font-variant-numeric: lining-nums; } .price .amount span { color: var(--ink-2); }
.price .later { color: var(--muted); font-size: 15.5px; }
.price ul { list-style: none; display: flex; flex-direction: column; gap: 10px; margin-top: 18px; padding-top: 22px; border-top: 1px solid var(--rule-2); color: var(--ink-2); font-size: 16.5px; }
.price li { padding-left: 24px; position: relative; }
.price li::before { content: ""; position: absolute; left: 2px; top: 0.5em; width: 10px; height: 6px; border-left: 1.5px solid var(--ink-2); border-bottom: 1.5px solid var(--ink-2); transform: rotate(-45deg); }

/* about, questions, contact */
.about { display: flex; flex-direction: column; gap: 26px; }
.who { display: flex; flex-direction: column; gap: 16px; border-left: 1px solid var(--ink); padding-left: 28px; max-width: 46em; }
.sig { display: flex; flex-direction: column; } .sig span { color: var(--muted); font-size: 15.5px; }
.qcol { flex: 1.3 1 460px; min-width: 0; display: flex; flex-direction: column; gap: 0; }
.qcol > h2 { margin-bottom: 28px; }
.qa { border-top: 1px solid var(--rule); padding-top: 20px; display: flex; flex-direction: column; gap: 8px; }
.askbox { flex: 1 1 340px; min-width: 0; background: var(--card); border: 1px solid var(--rule); border-radius: 28px; padding: 36px; display: flex; flex-direction: column; gap: 14px; position: sticky; top: 96px; }
.askbox h2 { font-size: 28px; letter-spacing: -0.025em; }

/* inner pages */
.pagehead { display: flex; flex-direction: column; gap: 20px; padding-bottom: 48px; }
.explain { display: flex; flex-wrap: wrap; gap: 16px 48px; color: var(--ink-2); max-width: 70em; } .explain p { flex: 1 1 380px; min-width: 0; }
.ledger { padding-bottom: var(--section); display: flex; flex-direction: column; gap: 16px; }
.tablebox { background: var(--card); border: 1px solid var(--rule); border-radius: 22px; overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 15.5px; font-variant-numeric: tabular-nums lining-nums; }
th { text-align: left; font-weight: 550; font-size: 13.5px; color: var(--muted); padding: 15px 18px; border-bottom: 1px solid var(--rule); white-space: nowrap; }
td { padding: 15px 18px; border-bottom: 1px solid var(--rule-2); vertical-align: top; }
tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: var(--paper); }
th.n, td.n { text-align: right; white-space: nowrap; } td.d { white-space: nowrap; color: var(--muted); } td.idea { font-weight: 550; min-width: 220px; } td.why { color: var(--ink-2); min-width: 230px; }
.more-n { color: var(--muted); white-space: nowrap; }
.verdict { display: inline-block; white-space: nowrap; border-radius: 999px; padding: 3px 12px; font-size: 13.5px; font-weight: 550; }
.verdict.no { background: var(--sunk); color: var(--ink-2); } .verdict.yes { background: var(--gold-wash); color: var(--gold-ink); }
.prose { display: flex; flex-direction: column; gap: 16px; padding-bottom: var(--section); }
.prose h2 { font-size: 28px; letter-spacing: -0.025em; margin-top: 28px; } .prose p { color: var(--ink-2); } .prose .lead { color: var(--ink-2); }
.prose.block { padding-top: 88px; }

/* footer: quiet, small, light */
.foot { background: var(--sunk); color: var(--muted); font-size: 14px; border-top: 1px solid var(--rule); }
.footin { display: flex; flex-wrap: wrap; gap: 36px 56px; padding-top: 64px; padding-bottom: 40px; }
.fcol { flex: 1 1 170px; min-width: 0; display: flex; flex-direction: column; gap: 10px; } .fcol.wide { flex: 2.4 1 380px; gap: 16px; }
.fcol.wide p { max-width: 38em; line-height: 1.6; }
.fcol h2 { font: 600 14px/1.3 var(--ui); letter-spacing: 0; color: var(--ink); }
.fcol a { color: var(--muted); text-decoration: none; } .fcol a:hover { color: var(--ink); text-decoration: underline; }
.fcol a.door { color: var(--gold-ink); font-weight: 550; }
.legal-line { border-top: 1px solid var(--rule); padding-top: 20px; padding-bottom: 32px; color: var(--muted); font-size: 13.5px; }

/* numbers, tally, compare, accordions, timeline, lists */
.numbers { display: flex; flex-direction: column; gap: 40px; }
.tally { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--rule); }
.tally div { padding: 28px 24px 30px 0; display: flex; flex-direction: column-reverse; gap: 6px; border-bottom: 1px solid var(--rule); }
.tally div:not(:nth-child(3n + 1)) { padding-left: 24px; border-left: 1px solid var(--rule-2); }
.tally dt { color: var(--muted); font-size: 15px; }
.tally dd { font: 620 clamp(40px, 4.4vw, 60px)/1 var(--display); letter-spacing: -0.045em; font-variant-numeric: tabular-nums lining-nums; color: var(--ink); }
.numbers > p { margin-top: -8px; }
.compare { margin-top: 8px; }
.compare caption { text-align: left; font-weight: 600; padding: 20px 18px 6px; color: var(--ink); }
.compare th[scope="row"] { font-weight: 450; font-size: 15.5px; color: var(--ink); white-space: normal; border-bottom: 1px solid var(--rule-2); min-width: 220px; }
.compare tr:last-child th { border-bottom: 0; }
.compare .c { text-align: center; white-space: nowrap; } .compare td.c { color: var(--ink-2); }
details.qa { gap: 0; padding-top: 0; }
details.qa summary { cursor: pointer; list-style: none; font-weight: 550; font-size: 19px; line-height: 1.4; letter-spacing: -0.012em; padding: 22px 40px 22px 0; position: relative; }
details.qa summary::-webkit-details-marker { display: none; }
details.qa summary::after { content: ""; position: absolute; right: 8px; top: 30px; width: 9px; height: 9px; border-right: 1.5px solid var(--ink-2); border-bottom: 1.5px solid var(--ink-2); transform: rotate(45deg); transition: transform 0.2s ease; }
details.qa[open] summary::after { transform: rotate(-135deg); top: 34px; }
details.qa summary:hover { color: var(--gold-ink); }
details.qa p { padding-bottom: 24px; max-width: 40em; }
.qcol details.qa:last-of-type { border-bottom: 1px solid var(--rule); }
.timeline { list-style: none; display: flex; flex-direction: column; gap: 0; border-left: 1px solid var(--rule); margin-left: 6px; }
.timeline li { position: relative; padding: 0 0 26px 26px; display: flex; flex-direction: column; gap: 4px; }
.timeline li::before { content: ""; position: absolute; left: -6px; top: 7px; width: 11px; height: 11px; border-radius: 50%; background: var(--ink); }
.timeline li:last-child::before { background: var(--paper); border: 1.5px solid var(--ink); }
.timeline span { font-weight: 600; color: var(--ink); } .timeline p { color: var(--ink-2); }
.ticks { list-style: none; display: flex; flex-direction: column; gap: 12px; color: var(--ink-2); }
.ticks li { padding-left: 28px; position: relative; }
.ticks li::before { content: ""; position: absolute; left: 3px; top: 0.45em; width: 10px; height: 6px; border-left: 1.5px solid var(--gold-ink); border-bottom: 1.5px solid var(--gold-ink); transform: rotate(-45deg); }
.ticks strong { color: var(--ink); }
.toc { display: flex; flex-wrap: wrap; gap: 6px 20px; padding: 18px 22px; background: var(--card); border: 1px solid var(--rule); border-radius: 18px; font-size: 15px; }
.legal h2 { scroll-margin-top: 90px; }
.contact { padding-bottom: var(--section); }
.askbox.wide { flex: 1.4 1 420px; position: static; }
.support { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.support h2 { font-size: 28px; letter-spacing: -0.025em; }
.support dl { display: flex; flex-direction: column; gap: 0; }
.support dl div { border-top: 1px solid var(--rule); padding: 16px 0; }
.support dt { font-weight: 600; } .support dd { color: var(--ink-2); }

/* charts */
.chart { background: var(--card); border: 1px solid var(--rule); border-radius: 24px; padding: 22px 24px 18px; }
.chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart .ax { stroke: var(--rule); stroke-width: 1.5; } .chart .tk { stroke: var(--muted); }
.chart .tl, .chart .pl, .chart .ll { font: 14px var(--ui); fill: var(--muted); }
.chart .pm { stroke: var(--ink); stroke-width: 1.5; } .chart .pl { fill: var(--ink); font-weight: 600; }
.chart .lb { stroke: var(--gold); stroke-width: 1.5; stroke-dasharray: 4 4; } .chart .ll { fill: var(--gold-ink); font-weight: 600; }
.chart .dot { stroke-width: 2; transition: stroke-width 0.15s ease; } .chart .dot:hover { stroke-width: 3.5; }
.chart .dot.fail { fill: var(--card); stroke: var(--no); } .chart .dot.off { fill: var(--idle); stroke: var(--muted); } .chart .dot.pass { fill: var(--gold); stroke: var(--gold); }
.chart figcaption { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 13.5px; color: var(--muted); padding-top: 10px; }
.chart .k { width: 12px; height: 12px; border-radius: 50%; display: inline-block; border: 2px solid; }
.chart .k.fail { border-color: var(--no); } .chart .k.off { background: var(--idle); border-color: var(--muted); } .chart .k.pass { background: var(--gold); border-color: var(--gold); }
.chart .sep { flex-basis: 100%; } .chart .it { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; margin-right: 10px; }
.chartscroll { overflow-x: auto; direction: rtl; }   /* on a phone it opens at the right end, where the pass mark is */
.chartscroll svg { direction: ltr; }
.chart.tests .tn { font: 600 22px var(--ui); fill: var(--ink); } .chart.tests .tm { font: 17px var(--ui); fill: var(--muted); }
.chart.tests .track { fill: var(--rule-2); } .chart.tests .bar { fill: var(--no); opacity: 0.75; } .chart.tests .tc { font: 600 19px var(--ui); fill: var(--ink-2); }
.chartscroll.ltr { direction: ltr; }
.log { display: flex; flex-direction: column; gap: 14px; padding-bottom: var(--section); }
.logday { font-size: 24px; letter-spacing: -0.02em; margin-top: 22px; padding-bottom: 6px; border-bottom: 1px solid var(--rule); }
.logentry { background: var(--card); border: 1px solid var(--rule); border-radius: 20px; padding: 22px 24px; display: flex; flex-direction: column; gap: 10px; }
.logentry header { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; }
.logentry h3 { font-size: 19px; } .logentry .meta { color: var(--muted); font-size: 14px; }
.logentry p { color: var(--ink-2); } .logentry .why { font-size: 15.5px; }
.kv2 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 16px; margin: 0; }
.kv2 div { display: flex; flex-direction: column; } .kv2 dt { color: var(--muted); font-size: 13px; } .kv2 dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }

/* widths */
@media (max-width: 1020px) {
  .watch-card { grid-template-columns: minmax(0, 1fr); padding: 40px; }
  .marks { max-width: 460px; }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 44px; } .steps li:nth-child(2)::after { display: none; }
}
@media (max-width: 900px) {
  :root { --section: 96px; }
  .points { grid-template-columns: repeat(2, minmax(0, 1fr)); } .askbox { position: static; } .band > .wrap.two { flex-direction: column; }
  .three { grid-template-columns: minmax(0, 1fr); gap: 36px; } .prices { grid-template-columns: minmax(0, 1fr); }
  .stripin { grid-template-columns: repeat(2, minmax(0, 1fr)); } .stripin div:nth-child(3) { padding-left: 0; border-left: 0; } .stripin div:nth-child(n + 3) { border-top: 1px solid var(--rule-2); }
  .tally { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tally div:not(:nth-child(3n + 1)) { padding-left: 0; border-left: 0; } .tally div:nth-child(even) { padding-left: 24px; border-left: 1px solid var(--rule-2); }
  .topin { flex-wrap: wrap; row-gap: 0; padding-top: 10px; }
  .top nav { order: 3; flex: 1 0 100%; overflow-x: auto; scrollbar-width: none; gap: 22px; padding-bottom: 4px; -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); }
  .top nav::-webkit-scrollbar { display: none; }
  .top nav a.cta { display: none; }
}
@media (max-width: 640px) {
  :root { --gutter: 20px; --section: 72px; }
  body { font-size: 17px; }
  .heroin { padding-top: 64px; padding-bottom: 64px; gap: 48px; }
  .hero .pitch .join .cta, .joinin .join .cta { width: 100%; }
  .watch-card { padding: 26px 22px; border-radius: 26px; row-gap: 24px; } .marks { gap: 7px; }
  .top nav a.door { display: none; }
  .points, .lessons, .steps { grid-template-columns: minmax(0, 1fr); } .steps li::after { display: none; }
  .stripin { grid-template-columns: minmax(0, 1fr); } .stripin div, .stripin div + div { padding: 18px 0; border-left: 0; } .stripin div + div { border-top: 1px solid var(--rule-2); }
  .tally dd { font-size: 40px; } .tally div { padding: 22px 16px 22px 0; } .tally div:nth-child(even) { padding-left: 16px; }
  .price { padding: 28px; border-radius: 24px; } .price .amount b { font-size: 50px; }
  .askbox { padding: 26px; border-radius: 24px; }
  .chart svg { min-width: 680px; } .chart { padding: 12px; border-radius: 18px; }
  .kv2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Dark mode follows the visitor's device setting. No switch: a switch would need a cookie, and visitors get none. */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --paper: #0c0d0f; --card: #151619; --sunk: #101113; --ink: #f2f2ef; --ink-2: #c9cbcf; --muted: #8f939a;
    --rule: #26272b; --rule-2: #1d1e21; --gold: #d2a449; --gold-ink: #e2bb6a; --gold-wash: #2c2414;
    --night: #050506; --night-2: #141517; --night-rule: #232427; --on-night: #f2f2ef; --on-night-2: #a9adb3;
    --no: #6f737a; --idle: #232428; --up: #8fd6a8; --down: #f0a69c; --up-bg: #15281c; --down-bg: #2e1816;
    --lift: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 40px 90px -40px rgba(0, 0, 0, 0.9);
  }
  .top { background: rgba(12, 13, 15, 0.72); }
  .cta:hover { background: #ffffff; color: #0c0d0f; }
  .field input:hover, .field textarea:hover, .field select:hover { border-color: #3a3b40; }
  .night { border-top: 1px solid var(--rule-2); border-bottom: 1px solid var(--rule-2); }
  .shot-ph { background: linear-gradient(180deg, #19191c, #111214); }
}
.join { flex-direction: column; align-items: stretch; }
.join .cta { align-self: flex-start; }
.join-line, .join-priv { margin: 0; }
.consent { display: flex; align-items: flex-start; gap: 10px; }
.consent input { width: 1.25rem; height: 1.25rem; margin: 0.2rem 0 0; flex: none; accent-color: var(--gold); }
.consent label { font-size: 15px; line-height: 1.45; color: var(--ink-2); }
.night .consent label, .join.dark .consent label { color: var(--on-night-2); }
/* the centred forms (hero, closing band): button and consent line sit on the centre axis */
.hero .join, .joinin .join { align-items: stretch; gap: 12px; }
.hero .join .cta, .joinin .join .cta { align-self: center; min-width: 240px; }
.hero .join .consent, .joinin .join .consent { justify-content: center; text-align: left; }
.recap { display: flex; flex-direction: column; gap: 10px; max-width: 70em; color: var(--ink-2); }
.prose ol, .prose ul { padding-left: 1.35em; }
.prose li { margin: 0.25em 0; }
.prose h3 { margin-top: 8px; }
.prose blockquote { border-left: 4px solid var(--gold); margin: 6px 0; padding: 2px 0 2px 16px; }
.prose strong { color: var(--ink); }
tr[id^="idea-"] { scroll-margin-top: 96px; }

.trendchart { width: 100%; height: 240px; display: block; background: var(--card); border: 1px solid var(--rule); border-radius: 14px; }
.trendchart polyline { fill: none; stroke-width: 2; vector-effect: non-scaling-stroke; }
.trendchart .th { stroke: var(--no); } .trendchart .tf { stroke: var(--gold); }
.planout { background: var(--card); border: 1px solid var(--rule); border-radius: 18px; padding: 22px; display: flex; flex-direction: column; gap: 10px; }
.planlist { padding-left: 1.3em; color: var(--ink-2); display: flex; flex-direction: column; gap: 4px; }
fieldset.field { border: 0; padding: 0; margin: 0; } fieldset.field legend { font-size: 13.5px; color: var(--muted); margin-bottom: 6px; }
@media print { header.top, footer.foot, .askbox, .skip, .pf-bar, .pf-sim { display: none; } .contact.two { display: block; } }
.toolout { display: flex; flex-direction: column; }
.toolout div { border-top: 1px solid var(--rule); padding: 14px 0; }
.toolout dt { font-weight: 600; } .toolout dd { color: var(--ink-2); }
.tooldisc { border-top: 1px solid var(--rule); padding-top: 14px; }
.oddsbar { width: 100%; height: 22px; border-radius: 8px; background: var(--rule-2); display: block; }
.oddsbar .pass, .oddskeys .k.pass { fill: var(--up); background: var(--up); }
.oddsbar .daily, .oddskeys .k.daily { fill: var(--down); background: var(--down); }
.oddsbar .max, .oddskeys .k.max { fill: var(--gold); background: var(--gold); }
.oddsbar .time, .oddskeys .k.time { fill: var(--no); background: var(--no); }
.oddskeys { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 14.5px; color: var(--ink-2); }
.oddskeys .k { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; }
tr.mine th, tr.mine td { background: var(--gold-wash); font-weight: 600; }

.coach-curve { width: 100%; height: 220px; display: block; margin: 18px 0; background: var(--card); border: 1px solid var(--rule); border-radius: 18px; }
.coach-curve .cl { fill: none; stroke: var(--gold); stroke-width: 2; vector-effect: non-scaling-stroke; }
.coach-curve .cf { stroke: var(--down); stroke-width: 1.5; stroke-dasharray: 6 5; vector-effect: non-scaling-stroke; }
.coach-notes { display: flex; flex-direction: column; gap: 10px; padding-left: 1.2em; color: var(--ink-2); }
.coach-groups { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); margin-bottom: 18px; }
.pf-table caption { text-align: left; font-weight: 600; padding: 12px 14px 4px; }

table.data { width: 100%; border-collapse: collapse; margin: 12px 0; font-size: 14.5px; display: block; overflow-x: auto; }
table.data th, table.data td { border-top: 1px solid var(--rule); padding: 9px 10px; text-align: left; vertical-align: top; }
table.data thead th { color: var(--muted); font-weight: 600; border-top: 0; }
table.data td.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }