/* tunnel.css: the owner onboarding page (/academy/start, "Every member, read."). The academy app's tokens (static/academy/academy.css, ACADEMY-APP §4)
 * so the page and the app read as one product: dark ground #101013 (never #000), surfaces #1C1C1E / #26262A, light #F5F5F7 / #FFFFFF; hierarchy by
 * text brightness; depth by 1px hairlines and surface steps. NO glow, NO glass, NO blur: no text-shadow, no blurred box-shadow, no backdrop-filter.
 * LIME only for the ONE main action of a screen and for data marks (progress, the ruler's mark, visited days, the Strongest numbers): never a lime
 * fill under black text (dark: lime 14% tint + 1px lime edge + lime label; light: #F4FFDA + 1.5px #5E8A00 edge + #3F5C00 label). Selected states are
 * a raised surface in dark and a light grey pill in light, never black. One font, Inter (weights 400, 600, 700), numbers in tabular figures. The
 * secondary text steps are set so every pair reaches AA (4.5:1) on the ground and on the surface in both themes. Motion only for state changes and
 * the few crafted moments (the orbit, the ruler, the counting numbers, the rhythm filling in), none under Reduce Motion. The page's CSP allows no
 * inline style in markup, so every colour and size lives here and charts are SVG attributes. */
:root, html[data-theme="dark"] {
  --tn-ground: #101013; --tn-surface: #1C1C1E; --tn-raised: #26262A; --tn-selected: #26262A; --tn-thumb: #3A3A3E;
  --tn-hair: rgba(255, 255, 255, .10); --tn-hair-2: rgba(255, 255, 255, .22); --tn-fill: rgba(118, 118, 128, .24); --tn-fill-hover: rgba(118, 118, 128, .36);
  --tn-text: #F5F5F7; --tn-text-2: rgba(235, 235, 245, .74); --tn-text-3: rgba(235, 235, 245, .58);
  --tn-rm-on: rgba(235, 235, 245, .62); --tn-data: #CEFF56; --tn-data-edge: transparent; --tn-data-edge-w: 0px; --tn-line: #CEFF56; --tn-data-text: #F5F5F7;
  --tn-main-fill:#2E2E35; --tn-main-fill-2:#36363E; --tn-main-edge:transparent; --tn-main-edge-w: 0px; --tn-main-label:#FFFFFF; --tn-gray-btn: #2C2C2E; --tn-off-fill: rgba(120, 120, 128, .24); --tn-off-label: rgba(235, 235, 245, .3);   /* graphite main action + a lime arrow (no blue, owner 26 Oct) */
  --tn-red: #FF453A; --tn-amber: #FF9F0A; --tn-err: #FF6961;
  --tn-top-h: 60px;
  --tn-sel-edge: rgba(255, 255, 255, .34); --tn-sel-dot: #F5F5F7;
  color-scheme: dark;
}
html[data-theme="light"] {
  --tn-ground: #F5F5F7; --tn-surface: #FFFFFF; --tn-raised: #FFFFFF; --tn-selected: #E5E5EA; --tn-thumb: #FFFFFF;
  --tn-hair: rgba(0, 0, 0, .10); --tn-hair-2: rgba(0, 0, 0, .26); --tn-fill: rgba(118, 118, 128, .14); --tn-fill-hover: rgba(118, 118, 128, .24);
  --tn-text: #1C1C1E; --tn-text-2: rgba(60, 60, 67, .88); --tn-text-3: rgba(60, 60, 67, .74);
  --tn-data: #CEFF56; --tn-rm-on: rgba(60, 60, 67, .58); --tn-data-edge: #5E8A00; --tn-data-edge-w: 1.5px; --tn-line: #5E8A00; --tn-data-text: #1C1C1E;
  --tn-main-fill:#1C1C1E; --tn-main-fill-2:#2C2C2E; --tn-main-edge:transparent; --tn-main-edge-w: 0px; --tn-main-label:#FFFFFF; --tn-gray-btn: rgba(120, 120, 128, .16); --tn-off-fill: rgba(120, 120, 128, .16); --tn-off-label: rgba(60, 60, 67, .3);
  --tn-red: #C4231A; --tn-amber: #9A5800; --tn-err: #C4231A;
  --tn-sel-edge: rgba(60, 60, 67, .30); --tn-sel-dot: #636366;
  color-scheme: light;
}
@media (prefers-color-scheme: light) {
  html:not([data-theme]) {
    --tn-ground: #F5F5F7; --tn-surface: #FFFFFF; --tn-raised: #FFFFFF; --tn-selected: #E5E5EA; --tn-thumb: #FFFFFF;
    --tn-hair: rgba(0, 0, 0, .10); --tn-hair-2: rgba(0, 0, 0, .26); --tn-fill: rgba(118, 118, 128, .14); --tn-fill-hover: rgba(118, 118, 128, .24);
    --tn-text: #1C1C1E; --tn-text-2: rgba(60, 60, 67, .88); --tn-text-3: rgba(60, 60, 67, .74);
    --tn-rm-on: rgba(60, 60, 67, .58); --tn-data-edge: #5E8A00; --tn-data-edge-w: 1.5px; --tn-line: #5E8A00; --tn-data-text: #1C1C1E;
    --tn-main-fill:#1C1C1E; --tn-main-fill-2:#2C2C2E; --tn-main-edge:transparent; --tn-main-edge-w: 0px; --tn-main-label:#FFFFFF; --tn-gray-btn: rgba(120, 120, 128, .16); --tn-off-fill: rgba(120, 120, 128, .16); --tn-off-label: rgba(60, 60, 67, .3);
    --tn-red: #C4231A; --tn-amber: #9A5800; --tn-err: #C4231A; --tn-sel-edge: rgba(60, 60, 67, .30); --tn-sel-dot: #636366; color-scheme: light;
  }
}

* { box-sizing: border-box; }
html { background: var(--tn-ground); -webkit-text-size-adjust: 100%; --tn-p: .1; }
body {
  margin: 0; min-height: 100vh; background: var(--tn-ground); color: var(--tn-text);
  font: 400 17px/26px Inter, system-ui, -apple-system, 'Segoe UI', sans-serif; -webkit-font-smoothing: antialiased; overflow-x: hidden;
  font-feature-settings: 'cv11', 'ss01';
}
a { color: inherit; text-underline-offset: 3px; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
:focus-visible { outline: 2px solid var(--tn-text-2); outline-offset: 2px; }
[hidden] { display: none !important; }
.tn-num { font-variant-numeric: tabular-nums; }
.tn-mute { color: var(--tn-text-3); }
.tn-center { text-align: center; }
.tn-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── the top bar: back, the thin progress bar, the mark ── */
.tn-top { position: sticky; top: 0; z-index: 5; height: calc(var(--tn-top-h) + env(safe-area-inset-top)); padding: env(safe-area-inset-top) max(8px, calc((100% - var(--tn-w, 1120px)) / 2 + 12px)) 0; display: flex; align-items: center; gap: 12px; background: var(--tn-ground); }
.tn-back { display: inline-grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%; color: var(--tn-text); text-decoration: none; transition: background .15s; }
.tn-back:hover { background: var(--tn-fill); }
.tn-bar { flex: 1; height: 4px; border-radius: 2px; background: var(--tn-fill); overflow: hidden; }
.tn-bar i { display: block; height: 100%; border-radius: 2px; background: var(--tn-data); box-shadow: inset 0 0 0 calc(var(--tn-data-edge-w) / 2) var(--tn-data-edge); transform-origin: left center; transform: scaleX(var(--tn-p)); }
.tn-brand { display: none; align-items: center; gap: 8px; flex: none; min-height: 44px; margin-left: 12px; padding-right: 8px; text-decoration: none; font-weight: 700; font-size: 16px; letter-spacing: -.01em; color: var(--tn-text); }
.tn-brand svg { height: 16px; width: auto; color: var(--tn-text); fill: currentColor; }
@media (min-width: 720px) { .tn-brand { display: inline-flex; } }
.tn-ic { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.tn-ic-lg { width: 36px; height: 36px; stroke-width: 1.4; color: var(--tn-text-2); }

/* ── the step: one calm column ── */
.tn-stage { display: flex; flex-direction: column; min-height: calc(100vh - var(--tn-top-h)); min-height: calc(100dvh - var(--tn-top-h)); }
.tn-step { flex: 1; display: flex; flex-direction: column; width: 100%; max-width: 680px; margin: 0 auto; padding: clamp(20px, 5vh, 56px) 20px 0; }
.tn-s-software, .tn-s-rhythm, .tn-s-reading, .tn-wide { max-width: 1120px; }
.tn-s-export { max-width: 940px; }
@media (min-width: 768px) { .tn-step { padding-left: 32px; padding-right: 32px; } }

.tn-k { margin: 0 0 12px; font-size: 15px; line-height: 20px; font-weight: 500; color: var(--tn-text-2); }
.tn-title { margin: 0; font-size: clamp(32px, 5.4vw, 56px); line-height: 1.05; letter-spacing: -.038em; font-weight: 700; text-wrap: balance; max-width: 15em; }
.tn-title:focus { outline: none; }
.tn-sub { margin: 16px 0 0; font-size: clamp(17px, 1.6vw, 20px); line-height: 1.5; color: var(--tn-text-2); max-width: 30em; text-wrap: pretty; }
.tn-head { margin-bottom: 8px; }
.tn-h3 { margin: 0; font-size: clamp(24px, 3.2vw, 34px); line-height: 1.12; letter-spacing: -.03em; font-weight: 700; text-wrap: balance; max-width: 26em; }
.tn-h4 { margin: 28px 0 10px; font-size: 15px; line-height: 20px; font-weight: 600; color: var(--tn-text-2); }
.tn-note { margin: 12px 0 0; font-size: 15px; line-height: 22px; color: var(--tn-text-2); max-width: 44em; text-wrap: pretty; }
.tn-fine { margin: 10px 0 0; font-size: 13px; line-height: 19px; color: var(--tn-text-3); max-width: 44em; }
.tn-fact { margin: 16px 0 0; font-size: 19px; line-height: 28px; font-weight: 600; max-width: 38em; text-wrap: pretty; }
.tn-big { margin: 14px 0 0; font-size: clamp(21px, 2.6vw, 28px); line-height: 1.3; letter-spacing: -.02em; font-weight: 600; max-width: 30em; text-wrap: pretty; }
.tn-label { margin: 26px 0 10px; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--tn-text-2); }
.tn-err { margin: 10px 0 0; color: var(--tn-err); font-size: 15px; line-height: 22px; }
.tn-err:empty { display: none; }

/* ── the sticky action ── */
.tn-foot { margin-top: clamp(32px, 6vh, 56px); padding-bottom: 28px; }
.tn-foot-in { display: grid; gap: 10px; }
.tn-foot .tn-fine { margin: 0; }
@media (max-width: 719px) {
  .tn-foot { position: sticky; bottom: 0; margin: auto -20px 0; padding: 14px 20px calc(14px + env(safe-area-inset-bottom)); background: var(--tn-ground); box-shadow: 0 -1px 0 var(--tn-hair); }
  .tn-step > .tn-head, .tn-step > .tn-opts { flex: none; }
}
.tn-main { display: inline-flex; align-items: center; justify-content: center; width: 100%; min-height: 56px; padding: 0 28px; border: 0; border-radius: 999px; background: var(--tn-main-fill); box-shadow: none; color: var(--tn-main-label); font-size: 17px; font-weight: 600; letter-spacing: -.01em; transition: background .15s; }
.tn-main:hover, .tn-main:active:not(:disabled) { background: var(--tn-main-fill-2); }
.tn-main:active:not(:disabled) { transform: scale(.98); }
.tn-main:disabled, .tn-main[aria-disabled="true"] { background: var(--tn-off-fill); box-shadow: none; color: var(--tn-off-label); cursor: not-allowed; }
@media (min-width: 720px) { .tn-main { width: auto; min-width: 260px; } .tn-foot-in { justify-items: start; } }
.tn-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; border: 0; border-radius: 999px; background: var(--tn-gray-btn); font-size: 15px; font-weight: 600; transition: background .15s; }
.tn-btn:hover { background: var(--tn-fill-hover); }
.tn-btn .tn-ic { width: 18px; height: 18px; }
.tn-sm { min-height: 44px; padding: 0 14px; font-size: 14px; }
.tn-link { border: 0; background: none; padding: 0; min-height: 44px; color: var(--tn-text-2); font-size: 15px; text-decoration: underline; text-underline-offset: 3px; }
.tn-link:hover { color: var(--tn-text); }
.tn-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }

/* ── split layouts: the words, and the picture beside them ── */
.tn-split { display: grid; gap: 28px; grid-template-columns: minmax(0, 1fr); flex: 1; align-content: start; }
@media (min-width: 1024px) { .tn-split { grid-template-columns: minmax(0, 1fr) minmax(0, .95fr); column-gap: 72px; align-items: center; align-content: center; } }

/* 1: the software, as a grid of names */
.tn-vgrid { grid-area: orbit; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-self: center; }
.tn-vgrid .tn-pill, .tn-vgrid .tn-pill:nth-child(n) { position: static; transform: none; min-height: 64px; justify-content: flex-start; padding: 0 20px; border-radius: 16px; font-size: 17px; will-change: auto; }
@media (min-width: 1024px) { .tn-vgrid .tn-pill, .tn-vgrid .tn-pill:nth-child(n) { min-height: 72px; } }
.tn-s-software .tn-split { grid-template-areas: "head" "orbit" "rows"; }
@media (min-width: 1024px) { .tn-s-software .tn-split { grid-template-columns: minmax(0, 1fr) 560px; grid-template-areas: "head orbit" "rows orbit"; row-gap: 36px; } }
.tn-s-software .tn-area-head { grid-area: head; align-self: end; }
.tn-s-software .tn-area-rows { grid-area: rows; align-self: start; }
.tn-s-software .tn-orbit { grid-area: orbit; }
.tn-orbit { --orbit: 440px; --hs: calc(var(--orbit) / 2); --ro: calc(var(--hs) * .76); --ri: calc(var(--hs) * .40); position: relative; width: var(--orbit); height: var(--orbit); margin: 0 auto; }
@media (min-width: 1024px) { .tn-orbit { --orbit: 540px; } }
@media (min-width: 1440px) { .tn-orbit { --orbit: 580px; } }
.tn-rings { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.tn-ring { fill: none; stroke: var(--tn-hair); stroke-width: 1; vector-effect: non-scaling-stroke; }
.tn-core { position: absolute; left: 50%; top: 50%; width: 108px; height: 108px; margin: -54px 0 0 -54px; border-radius: 50%; background: var(--tn-surface); box-shadow: inset 0 0 0 1px var(--tn-hair-2); display: grid; place-items: center; color: var(--tn-text); transition: opacity .3s; }
.tn-core svg { width: 62px; height: auto; fill: currentColor; }
.tn-pill { position: absolute; left: 50%; top: 50%; display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 20px; border: 0; border-radius: 999px; background: var(--tn-surface); box-shadow: inset 0 0 0 1px var(--tn-hair-2); font-size: 16px; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; will-change: transform; }
@media (max-width: 1023px) { .tn-pill { padding: 0 16px; font-size: 15px; } }
.tn-pill:hover, .tn-pill:focus-visible { background: var(--tn-raised); box-shadow: inset 0 0 0 1.5px var(--tn-text-2); }
/* where each name starts (the same ring maths as flow.js orbitSlot at t = 0), so the page is already a ring before any script moves it */
.tn-pill:nth-child(3) { transform: translate(0, calc(var(--ro) * -1)) translate(-50%, -50%); }
.tn-pill:nth-child(4) { transform: translate(calc(var(--ro) * .9511), calc(var(--ro) * -.309)) translate(-50%, -50%); }
.tn-pill:nth-child(5) { transform: translate(calc(var(--ro) * .5878), calc(var(--ro) * .809)) translate(-50%, -50%); }
.tn-pill:nth-child(6) { transform: translate(calc(var(--ro) * -.5878), calc(var(--ro) * .809)) translate(-50%, -50%); }
.tn-pill:nth-child(7) { transform: translate(calc(var(--ro) * -.9511), calc(var(--ro) * -.309)) translate(-50%, -50%); }
.tn-pill:nth-child(8) { transform: translate(calc(var(--ri) * .5878), calc(var(--ri) * -.809)) translate(-50%, -50%); }
.tn-pill:nth-child(9) { transform: translate(0, var(--ri)) translate(-50%, -50%); }
.tn-pill:nth-child(10) { transform: translate(calc(var(--ri) * -.5878), calc(var(--ri) * -.809)) translate(-50%, -50%); }
.tn-orbit.is-picking .tn-pill { transition: transform .4s cubic-bezier(.2, .8, .2, 1), opacity .25s; }
.tn-orbit.is-picking .tn-pill:not(.is-picked) { opacity: 0; pointer-events: none; }
.tn-orbit.is-picking .tn-core { opacity: .25; }
.tn-orbit.is-picking .tn-ring { opacity: 0; }
.tn-pill.is-picked { z-index: 2; background: var(--tn-raised); box-shadow: inset 0 0 0 1.5px var(--tn-text-2); }
/* a phone is a clean list */
@media (max-width: 699px) {
  .tn-orbit { width: auto; height: auto; margin: 4px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .tn-rings, .tn-core { display: none; }
  .tn-pill, .tn-pill:nth-child(n) { position: static; transform: none !important; min-height: 60px; justify-content: flex-start; padding: 0 18px; border-radius: 16px; font-size: 17px; will-change: auto; }
}
.tn-rows { border-top: 1px solid var(--tn-hair); }
.tn-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; min-height: 76px; padding: 14px 4px; border: 0; border-bottom: 1px solid var(--tn-hair); background: none; text-align: left; }
.tn-row-t { display: grid; gap: 2px; }
.tn-row-t b { font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.tn-row-t small { font-size: 15px; line-height: 22px; color: var(--tn-text-2); }
.tn-row .tn-ic { color: var(--tn-text-3); }
.tn-row:hover .tn-ic { color: var(--tn-text); }

/* what leaves this computer */
.tn-sends { margin-top: 28px; max-width: 44em; }
.tn-sends summary { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; font-size: 15px; font-weight: 600; color: var(--tn-text-2); list-style: none; }
.tn-sends summary::-webkit-details-marker { display: none; }
.tn-sends summary:hover, .tn-sends[open] summary { color: var(--tn-text); }
.tn-sends p { margin: 10px 0 0; font-size: 15px; line-height: 22px; color: var(--tn-text-2); }
.tn-sends .tn-sends-check { color: var(--tn-text); }

/* 2: the big number (kept for the typed price elsewhere on the page) */
.tn-size { margin-top: clamp(20px, 5vh, 56px); }
.tn-bignum { display: flex; align-items: baseline; justify-content: center; }
.tn-bignum-in { box-sizing: content-box; width: calc(var(--tn-digits, 3) * (1ch - .05em) + .12em); padding: 0; border: 0; background: none; text-align: center; font-size: clamp(76px, 15vw, 120px); line-height: 1; font-weight: 700; letter-spacing: -.05em; font-variant-numeric: tabular-nums; color: var(--tn-text); caret-color: var(--tn-text); border-radius: 14px; }
.tn-bignum-in:focus-visible { outline: 2px solid var(--tn-text-2); outline-offset: 6px; }
/* the unit takes no room of its own, so the number alone is centred over the ruler's mark; it sits on the number's baseline, to its right (under it on a phone) */
.tn-bignum-u { flex: none; width: 0; overflow: visible; white-space: nowrap; text-indent: 14px; font-size: clamp(18px, 2.4vw, 24px); font-weight: 600; letter-spacing: -.02em; color: var(--tn-text-2); }
@media (max-width: 479px) { .tn-bignum { flex-direction: column; align-items: center; } .tn-bignum-u { width: auto; text-indent: 0; margin-top: 14px; } }

/* 3, 4: one decision per screen */
.tn-opts { display: grid; gap: 12px; margin-top: 32px; }
.tn-opt { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 68px; padding: 10px 18px 10px 14px; border: 0; border-radius: 18px; background: var(--tn-surface); box-shadow: inset 0 0 0 1px var(--tn-hair); text-align: left; font-size: 18px; font-weight: 600; letter-spacing: -.015em; transition: background .15s, box-shadow .15s; }
.tn-opt:hover { box-shadow: inset 0 0 0 1px var(--tn-hair-2); }
.tn-opt[aria-checked="true"] { background: var(--tn-selected); box-shadow: inset 0 0 0 1.5px var(--tn-sel-edge); }
.tn-opt-ic { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 13px; background: var(--tn-fill); color: var(--tn-text-2); }
.tn-opt-t { flex: 1; min-width: 0; }
.tn-radio { flex: none; width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--tn-text-3); display: grid; place-items: center; }
.tn-opt[aria-checked="true"] .tn-radio { border-color: var(--tn-sel-dot); }
.tn-opt[aria-checked="true"] .tn-radio::after { content: ''; width: 12px; height: 12px; border-radius: 50%; background: var(--tn-sel-dot); }

/* 5: every member has their own rhythm */
.tn-s-rhythm .tn-split { align-items: center; }
.tn-mech { margin: 24px 0 0; padding-left: 16px; border-left: 3px solid var(--tn-hair-2); font-size: clamp(18px, 1.8vw, 21px); line-height: 1.45; font-weight: 600; letter-spacing: -.015em; max-width: 24em; text-wrap: pretty; }
.tn-cal-fig { margin: 0; padding: clamp(20px, 3vw, 32px); border-radius: 24px; background: var(--tn-surface); box-shadow: inset 0 0 0 1px var(--tn-hair); }
.tn-tagrow { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; font-size: 14px; }
.tn-tag { display: inline-flex; align-items: center; min-height: 28px; padding: 0 12px; border-radius: 999px; background: var(--tn-fill); font-size: 13px; line-height: 16px; font-weight: 600; color: var(--tn-text-2); }
.tn-cal { display: block; width: 100%; max-width: 480px; height: auto; margin: 0 auto; }
.tn-weeks { display: block; width: 100%; max-width: 480px; height: auto; margin: 4px auto 0; overflow: visible; }
/* the rhythm example is quiet grey, as the app's Radar marks (Uozot 14 Oct: no fields of green; the sentence carries the fact) */
.tn-wk.is-on { fill: var(--tn-rm-on); }
.tn-wk.is-none { fill: var(--tn-fill); }
.tn-wk.is-quiet { fill: none; stroke: var(--tn-text-3); stroke-width: 1; stroke-dasharray: 3 3; }
.tn-cell { fill: var(--tn-fill); }
.tn-cell.is-on { fill: var(--tn-rm-on); }
.tn-cell.is-quiet:not(.is-on) { fill: none; stroke: var(--tn-text-3); stroke-width: 1; stroke-dasharray: 2 3; }
.tn-cal-d { fill: var(--tn-text-3); font: 600 11px Inter, system-ui, sans-serif; }
.tn-cal-meta { display: grid; gap: 4px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--tn-hair); }
.tn-cal-u { font-size: 15px; font-weight: 600; color: var(--tn-text-2); }
.tn-cal-q { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; font-size: 15px; color: var(--tn-text-2); }
.tn-cal-q b { font-size: 22px; line-height: 1.2; font-weight: 700; letter-spacing: -.025em; color: var(--tn-text); }
.tn-seg { display: inline-flex; gap: 2px; margin-top: 18px; padding: 3px; border-radius: 14px; background: var(--tn-fill); }
.tn-seg button { min-height: 44px; padding: 0 16px; white-space: nowrap; border: 0; border-radius: 11px; background: none; font-size: 14px; font-weight: 600; color: var(--tn-text-2); transition: background .15s, color .15s; }
.tn-seg button[aria-checked="true"] { background: var(--tn-thumb); color: var(--tn-text); }
@media (max-width: 479px) { .tn-seg { display: grid; grid-template-columns: 1fr 1fr; width: 100%; } .tn-seg button { padding: 6px 8px; white-space: normal; line-height: 1.25; } }

/* 6: the export steps, then the drop */
.tn-tips { margin-top: 28px; }
.tn-tiplist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.tn-tip { display: grid; gap: 10px; align-content: start; min-height: 0; padding: 20px; border-radius: 22px; background: var(--tn-surface); box-shadow: inset 0 0 0 1px var(--tn-hair); }
.tn-tip-n { font-size: 34px; line-height: 1; font-weight: 700; letter-spacing: -.05em; color: var(--tn-text-3); }
.tn-tip-t { font-size: 19px; line-height: 1.25; font-weight: 600; letter-spacing: -.02em; }
.tn-tip-p { margin: 0; font-size: 15px; line-height: 22px; color: var(--tn-text-2); }
.tn-tip-f { align-self: end; font-size: 13px; color: var(--tn-text-3); }
.tn-path { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.tn-chip { display: inline-block; padding: 5px 10px; border-radius: 8px; background: var(--tn-fill); font-size: 14px; line-height: 20px; font-weight: 600; }
.tn-chip-sep { color: var(--tn-text-3); font-size: 16px; }
.tn-dots { display: none; justify-content: center; gap: 0; margin-top: 4px; }
.tn-dot { display: grid; place-items: center; width: 44px; height: 44px; border: 0; background: none; }
.tn-dot i { display: block; width: 8px; height: 8px; border-radius: 4px; background: var(--tn-hair-2); transition: width .2s, background .2s; }
.tn-dot[aria-current="true"] i { width: 22px; background: var(--tn-text); }
@media (max-width: 719px) {
  .tn-tiplist { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; gap: 12px; margin: 0 -20px; padding: 0 20px 2px; scroll-padding: 0 20px; }
  .tn-tiplist::-webkit-scrollbar { display: none; }
  .tn-tip { flex: 0 0 min(82%, 340px); scroll-snap-align: start; }
  .tn-dots { display: flex; }
}
.tn-drop { display: grid; justify-items: center; align-content: center; gap: 8px; min-height: 190px; margin-top: 24px; padding: 28px 20px; border-radius: 24px; background: var(--tn-surface); box-shadow: inset 0 0 0 1.5px var(--tn-hair-2); text-align: center; cursor: pointer; transition: background .15s, box-shadow .15s; }
.tn-drop b { font-size: 22px; line-height: 28px; font-weight: 700; letter-spacing: -.025em; }
.tn-drop span { font-size: 15px; color: var(--tn-text-2); }
.tn-drop:hover, .tn-drop.is-over { background: var(--tn-raised); box-shadow: inset 0 0 0 2px var(--tn-text-2); }
.tn-stays { display: flex; align-items: center; gap: 8px; margin: 16px 0 0; font-size: 15px; font-weight: 600; }
.tn-stays .tn-ic { width: 18px; height: 18px; color: var(--tn-text-2); }
.tn-found { margin-top: 8px; }
.tn-reading { margin-top: 20px; }
.tn-phone { display: none; margin-top: 28px; padding: 20px; border-radius: 20px; background: var(--tn-surface); box-shadow: inset 0 0 0 1px var(--tn-hair); }
.tn-phone-t { margin: 0; font-size: 17px; font-weight: 700; letter-spacing: -.02em; }
@media (max-width: 767px), (pointer: coarse) and (max-width: 1024px) { .tn-phone { display: block; } }
.tn-files { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 4px; }
.tn-files li { display: flex; flex-wrap: wrap; gap: 2px 14px; align-items: baseline; font-size: 15px; line-height: 22px; }
.tn-files li > b { font-weight: 600; overflow-wrap: anywhere; }
.tn-files li > span { color: var(--tn-text-2); }
.tn-fix { margin-top: 24px; padding: 20px; border-radius: 20px; background: var(--tn-surface); box-shadow: inset 0 0 0 1px var(--tn-hair); }
.tn-fix-h { margin: 0; font-size: 17px; font-weight: 700; }
.tn-fix + .tn-note, .tn-fix ~ .tn-main { margin-top: 20px; }
.tn-map { flex-basis: 100%; display: grid; gap: 10px; padding: 12px 0; }
.tn-map p { margin: 0; font-weight: 600; }
.tn-map label { display: grid; gap: 6px; font-size: 15px; color: var(--tn-text-2); }
.tn-map select, .tn-field input { width: 100%; min-height: 52px; padding: 0 14px; border: 0; border-radius: 14px; background: var(--tn-surface); box-shadow: inset 0 0 0 1px var(--tn-hair-2); font-size: 17px; }

/* 7: reading your academy */
.tn-s-reading .tn-split { align-items: center; }
.tn-pct { margin: 0 0 8px; display: flex; align-items: baseline; font-size: clamp(64px, 12vw, 120px); line-height: .9; font-weight: 700; letter-spacing: -.06em; }
.tn-pct i { font-style: normal; margin-left: .04em; font-size: .45em; letter-spacing: -.04em; color: var(--tn-text-3); }
.tn-readbar { height: 4px; margin-top: 22px; border-radius: 2px; background: var(--tn-fill); overflow: hidden; max-width: 520px; }
.tn-readbar i { display: block; height: 100%; border-radius: 2px; background: var(--tn-data); box-shadow: inset 0 0 0 calc(var(--tn-data-edge-w) / 2) var(--tn-data-edge); transform-origin: left center; transform: scaleX(0); transition: transform .25s linear; }
.tn-checks { list-style: none; margin: 28px 0 0; padding: 0; display: grid; max-width: 520px; }
.tn-chk { display: flex; align-items: center; gap: 14px; min-height: 52px; border-bottom: 1px solid var(--tn-hair); font-size: 19px; font-weight: 600; letter-spacing: -.015em; color: var(--tn-text-3); transition: color .25s; }
.tn-chk.is-done { color: var(--tn-text); }
.tn-chk.is-skip { color: var(--tn-text-2); }
.tn-tick { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid var(--tn-hair-2); color: transparent; transition: border-color .25s, color .25s; }
.tn-tick .tn-ic { width: 16px; height: 16px; stroke-width: 2.2; }
.tn-chk.is-done .tn-tick { border-color: var(--tn-text-2); color: var(--tn-text); }
.tn-chk.is-skip .tn-tick { border-style: dashed; }
.tn-chk-t { flex: 1; min-width: 0; }
.tn-chk-n { font-size: 16px; font-weight: 600; letter-spacing: 0; color: var(--tn-text-2); text-align: right; }
.tn-giant[data-g="members"], .tn-giant[data-g="visits"] { display: none !important; }
.tn-giants { display: grid; gap: clamp(8px, 2vw, 28px); align-content: center; }
.tn-giant { margin: 0; display: grid; gap: 4px; }
.tn-giant b { font-size: clamp(56px, 8.4vw, 124px); line-height: .95; font-weight: 700; letter-spacing: -.055em; }
.tn-giant span { font-size: clamp(16px, 1.7vw, 20px); font-weight: 600; letter-spacing: -.01em; color: var(--tn-text-2); }
.tn-giant .is-text { font-size: clamp(30px, 3.4vw, 52px); line-height: 1.05; letter-spacing: -.045em; }
/* a members-only file has no range of visits: the plain fact is said quietly, not in giant type */
.tn-giant.is-quiet .is-text { font-size: clamp(18px, 2vw, 22px); line-height: 1.3; font-weight: 600; letter-spacing: -.01em; color: var(--tn-text-2); max-width: 12em; }
.tn-giant .tn-nw { display: inline-block; white-space: nowrap; font-size: inherit; font-weight: inherit; color: inherit; }
.tn-giant .tn-giant-s { font-size: 16px; font-weight: 600; color: var(--tn-text-2); }
.tn-play-line { margin: 12px 0 0; padding-top: 18px; border-top: 1px solid var(--tn-hair); font-size: clamp(18px, 1.8vw, 22px); line-height: 1.4; font-weight: 600; letter-spacing: -.015em; max-width: 24em; text-wrap: pretty; }
@media (max-width: 1023px) { .tn-giants { margin-top: 28px; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .tn-giant b { font-size: clamp(34px, 8vw, 64px); } .tn-giant span { font-size: 14px; } .tn-play-line { grid-column: 1 / -1; } }
@media (max-width: 479px) { .tn-giants { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* 8: the email */
.tn-email { display: flex; flex-direction: column; flex: 1; }
.tn-field { display: block; margin-top: 32px; max-width: 520px; }
.tn-field .tn-label { display: block; margin: 0 0 10px; }
.tn-field input { min-height: 62px; font-size: 20px; border-radius: 16px; }
.tn-field input::placeholder { color: var(--tn-text-3); }
.tn-field input:focus { outline: 2px solid var(--tn-text-2); outline-offset: 1px; }
.tn-consent { margin: 18px 0 0; font-size: 13px; line-height: 19px; color: var(--tn-text-3); max-width: 520px; }
.tn-consent a { color: var(--tn-text-2); }
.tn-skip { display: block; margin-top: 8px; }

/* 9: your result */
.tn-res-head { padding: 0 0 8px; }
.tn-res-head .tn-sub { max-width: 34em; }
.tn-duo { display: grid; gap: 16px; margin-top: clamp(28px, 5vh, 48px); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 860px) { .tn-duo { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } }
.tn-card { padding: clamp(22px, 3vw, 36px); border-radius: 26px; background: var(--tn-surface); box-shadow: inset 0 0 0 1px var(--tn-hair); }
.tn-card-h { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 17px; line-height: 24px; font-weight: 700; letter-spacing: -.015em; }
.tn-dot-s { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.tn-dot-s.is-data { background: var(--tn-data); box-shadow: inset 0 0 0 calc(var(--tn-data-edge-w) / 2) var(--tn-data-edge); }
.tn-dot-s.is-red { background: var(--tn-red); }
.tn-facts { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 0; }
.tn-fact-i { display: grid; gap: 4px; padding: 16px 0; border-top: 1px solid var(--tn-hair); }
.tn-fact-i:first-child { border-top: 0; padding-top: 0; }
.tn-fact-i:last-child { padding-bottom: 0; }
/* the number leads the sentence at the sentence's own size: a fact, not a hero figure */
.tn-fh { margin: 0; font-size: 18px; line-height: 1.35; font-weight: 600; letter-spacing: -.015em; text-wrap: pretty; }
.tn-fv { font: inherit; font-weight: 700; color: var(--tn-text); font-variant-numeric: tabular-nums; }
.tn-fl { font: inherit; }
.tn-ff { font-size: 15px; line-height: 22px; color: var(--tn-text-2); max-width: 32em; }
.tn-fact-i.is-calm .tn-fh { color: var(--tn-text-2); }
.tn-typical { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--tn-hair); }
.tn-typical-h { margin: 0; font-size: 16px; font-weight: 700; letter-spacing: -.01em; }
.tn-dollar-lg { margin-top: 12px; width: 180px; }
.tn-play-card { margin-top: 16px; }
.tn-say { margin: 16px 0 0; font-size: 15px; color: var(--tn-text-2); }
.tn-play-card .tn-big { margin-top: 8px; }
.tn-snap { margin-top: clamp(36px, 6vh, 64px); }
.tn-snap-h { margin: 0; font-size: clamp(24px, 3.2vw, 34px); line-height: 1.12; font-weight: 700; letter-spacing: -.03em; text-wrap: balance; max-width: 22em; }
.tn-more { margin-top: 36px; border-top: 1px solid var(--tn-hair); }
.tn-more > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 64px; cursor: pointer; list-style: none; font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.tn-more > summary::-webkit-details-marker { display: none; }
.tn-more > summary .tn-ic { transition: transform .2s; color: var(--tn-text-3); }
.tn-more[open] > summary .tn-ic { transform: rotate(90deg); }
.tn-sample { margin-top: 20px; max-width: 520px; }
.tn-list { list-style: none; margin: 14px 0 0; padding: 0; border-top: 1px solid var(--tn-hair); }
.tn-list li { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--tn-hair); font-size: 16px; }
.tn-list .tn-num { font-size: 15px; font-weight: 600; letter-spacing: 0; line-height: 22px; }

/* sections (Part 1, Improve, Expand) */
.tn-sec { margin-top: clamp(48px, 7vw, 88px); }
.tn-panel .tn-sec:first-child { margin-top: 0; }
.tn-sec > .tn-k { margin-bottom: 12px; }
.tn-two { display: grid; gap: 0 48px; }
@media (min-width: 860px) { .tn-two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.tn-chart { display: block; width: 100%; height: auto; margin-top: 26px; overflow: visible; }
.tn-bar { fill: var(--tn-data); stroke: var(--tn-data-edge); stroke-width: var(--tn-data-edge-w); }
.tn-base { stroke: var(--tn-hair-2); stroke-width: 1; }
.tn-axis { fill: var(--tn-text-3); font: 600 11px Inter, system-ui, sans-serif; }
.tn-peak { fill: var(--tn-text-2); }
.tn-area { fill: var(--tn-data); opacity: .12; }
.tn-line { stroke: var(--tn-line); stroke-width: 2.25; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.tn-dot-d { fill: var(--tn-line); }
.tn-hb { display: block; width: 100%; height: 6px; }
.tn-hb-bg { fill: var(--tn-fill); }
.tn-hb-fg { fill: var(--tn-data); stroke: var(--tn-data-edge); stroke-width: calc(var(--tn-data-edge-w) / 2); }
.tn-bars { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 14px; }
.tn-bars li { display: grid; grid-template-columns: minmax(0, 9em) minmax(0, 1fr) 6.2em; gap: 6px 14px; align-items: center; font-size: 16px; }
.tn-bars li > span:first-child { overflow-wrap: anywhere; }
.tn-bars .tn-num { font-size: 15px; font-weight: 600; letter-spacing: 0; line-height: 22px; color: var(--tn-text-2); text-align: right; min-width: 3.5em; }
.tn-rows2 { list-style: none; margin: 18px 0 0; padding: 0; border-top: 1px solid var(--tn-hair); }
.tn-rows2 li { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 16px 0; border-bottom: 1px solid var(--tn-hair); }
.tn-who { display: grid; gap: 2px; min-width: 0; flex: 1 1 0; justify-items: start; }
.tn-who b { font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.tn-who small { font-size: 15px; line-height: 22px; color: var(--tn-text-2); }
.tn-away { display: grid; justify-items: end; gap: 0; flex: none; text-align: right; }
.tn-away b { font-size: 28px; line-height: 1.1; font-weight: 700; letter-spacing: -.03em; }
.tn-away small { font-size: 13px; line-height: 18px; color: var(--tn-text-3); }

/* prices */
.tn-prices { margin-top: 20px; }
.tn-prices .tn-h4 { margin-top: 0; font-size: 17px; color: var(--tn-text); }
.tn-price-grid { display: grid; gap: 10px 20px; margin-top: 18px; }
@media (min-width: 720px) { .tn-price-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tn-price { display: flex; align-items: center; justify-content: space-between; gap: 14px; font-size: 16px; }
.tn-price > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.tn-dollar { position: relative; display: inline-flex; align-items: center; flex: none; width: 120px; min-height: 48px; border-radius: 12px; background: var(--tn-surface); box-shadow: inset 0 0 0 1px var(--tn-hair-2); }
.tn-dollar i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); font-style: normal; color: var(--tn-text-3); pointer-events: none; }
.tn-dollar input { width: 100%; min-width: 0; min-height: 48px; border: 0; border-radius: 12px; background: none; font-size: 17px; font-variant-numeric: tabular-nums; padding: 0 12px 0 30px; outline: none; }
.tn-dollar:focus-within { box-shadow: inset 0 0 0 2px var(--tn-text-2); }
.tn-dollar-lg { min-height: 56px; }
.tn-dollar-lg input { min-height: 56px; font-size: 22px; font-weight: 600; padding-left: 34px; }
.tn-money { margin-top: 6px; }
.tn-money:empty { display: none; }
.tn-money-line { margin: 12px 0 0; font-size: 18px; line-height: 26px; font-weight: 600; letter-spacing: -.01em; max-width: 36em; }

/* health and first 90 days */
.tn-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 16px; margin: 6px 0 0; }
.tn-stats-2 { max-width: 640px; margin-top: 26px; }
.tn-stat { margin: 0; display: grid; gap: 2px; align-content: start; }
.tn-stat span { font-size: 14px; line-height: 20px; color: var(--tn-text-2); }
.tn-stat .tn-num { font-weight: 700; letter-spacing: -.035em; font-size: clamp(34px, 5.4vw, 56px); line-height: 1; }
.tn-stat small { font-size: 14px; line-height: 20px; color: var(--tn-text-3); max-width: 22em; }
.tn-num-t { font-variant-numeric: tabular-nums; }
.tn-tbl-wrap { margin-top: 14px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tn-tbl { width: 100%; border-collapse: collapse; font-size: 15px; }
@media (max-width: 559px) { .tn-tbl { font-size: 14px; } .tn-tbl th, .tn-tbl td { padding-right: 6px; } .tn-tbl .is-num { padding-right: 8px; } }
.tn-tbl th, .tn-tbl td { padding: 11px 10px 11px 0; border-bottom: 1px solid var(--tn-hair); text-align: left; font-weight: 600; white-space: nowrap; }
.tn-tbl thead th { color: var(--tn-text-3); font-size: 13px; }
.tn-tbl .is-num { text-align: right; padding-right: 14px; }
.tn-tbl .is-off { color: var(--tn-text-3); }
.tn-dl { margin: 12px 0 0; display: grid; gap: 12px; max-width: 46em; }
.tn-dl dt { font-size: 14px; font-weight: 600; color: var(--tn-text); }
.tn-dl dd { margin: 2px 0 0; font-size: 15px; line-height: 22px; color: var(--tn-text-2); }
.tn-progress { display: grid; gap: 10px; margin-top: 22px; max-width: 520px; }
.tn-progress svg { display: block; width: 100%; height: 4px; }
.tn-progress .tn-num { font-size: 15px; font-weight: 600; letter-spacing: 0; line-height: 22px; color: var(--tn-text-2); }

/* 10: Save · Improve · Expand, as one segmented control (the chapter's own heading leads its panel) */
.tn-s-verbs { padding-top: clamp(16px, 3vh, 40px); }
.tn-verbs { display: inline-grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 2px; margin-top: 8px; padding: 3px; border-radius: 14px; background: var(--tn-fill); width: 100%; max-width: 520px; }
.tn-verb { display: grid; place-items: center; min-height: 44px; padding: 0 12px; border: 0; border-radius: 11px; background: none; color: var(--tn-text-2); transition: background .15s, color .15s; }
.tn-verb:hover { color: var(--tn-text); }
.tn-verb[aria-selected="true"] { background: var(--tn-thumb); color: var(--tn-text); }
.tn-verb-w { font-size: 15px; line-height: 20px; font-weight: 600; letter-spacing: -.01em; }
.tn-verb-s { display: none; }
.tn-goal { margin: 22px 0 0; font-size: 17px; line-height: 26px; color: var(--tn-text-2); max-width: 40em; }
.tn-panel { margin-top: 36px; padding-top: 36px; border-top: 1px solid var(--tn-hair); }
.tn-panel:focus-visible { outline-offset: 8px; border-radius: 8px; }
.tn-plan { margin-top: clamp(56px, 8vw, 104px); padding-top: 8px; border-top: 1px solid var(--tn-hair); }
.tn-over { margin: 28px 0 0; }

.tn-asof { margin: 14px 0 0; font-size: 15px; line-height: 20px; font-weight: 500; color: var(--tn-text-2); }
.tn-pricebar { margin-top: 8px; }
.tn-pricebar > [data-price-box] { margin-top: 8px; padding: 22px; border-radius: 20px; background: var(--tn-surface); box-shadow: inset 0 0 0 1px var(--tn-hair); }
.tn-pricebar > [data-price-box] .tn-typical { margin-top: 0; padding-top: 0; border: 0; }
/* Save: the list and the member panel are the academy app's own views (static/academy/academy.css styles them, save.js draws them); these rules only
   place them on this page. A narrow screen shows the panel below the list once a person is chosen; from 1024 px it sits beside the list. */
.tn-radar-wrap { display: grid; gap: 24px; margin-top: 20px; }
.tn-radar-col { min-width: 0; }
.tn-radar-col .ak-rlist { margin: 0; }
.tn-insp { display: none; min-width: 0; padding: 24px; border-radius: 24px; background: var(--tn-surface); box-shadow: inset 0 0 0 1px var(--tn-hair); }
.tn-insp.is-open { display: block; }
@media (min-width: 1024px) {
  .tn-radar-wrap { grid-template-columns: minmax(0, 1fr) 420px; gap: 36px; align-items: start; }
  .tn-radar-wrap.is-empty { grid-template-columns: minmax(0, 1fr); }
  .tn-insp { display: block; }
}
/* the one lime action of a screen is not on a practice button: Contacted in the panel is neutral here (PREMIUM-PASS §6) */
.tn-insp .ak-main { background: var(--tn-fill); box-shadow: none; color: var(--tn-text); }
.tn-insp .ak-main:hover { background: var(--tn-fill-hover); }
.tn-insp .ak-group { background: var(--tn-ground); }
/* this page holds every pair of colours to AA (4.5:1) and every touch target to 44 px, which a few of the app's small marks do not (their own text-3 token is 3.9:1 in dark and 2.9:1 in light on a selected row) */
.tn-radar-col .ak-rrow-tag, .tn-radar-col .ak-rrow-per, .tn-insp .ak-rrow-per { color: var(--tn-text-2); }
.tn-insp .ak-insp-x { width: 44px; height: 44px; }
.tn-insp .ak-more { min-height: 44px; }
.tn-practice { margin-top: 14px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.tn-practice-t { margin: 0; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--tn-text-2); }
.tn-how-text { margin: 8px 0 0; font-size: 14px; line-height: 21px; color: var(--tn-text-2); }
.tn-how { margin-top: 12px; max-width: 44em; }
.tn-how summary { display: inline-flex; align-items: center; min-height: 44px; cursor: pointer; font-size: 15px; font-weight: 600; color: var(--tn-text-2); }
.tn-how summary:hover, .tn-how[open] summary { color: var(--tn-text); }
.tn-how p { margin: 4px 0 0; font-size: 15px; line-height: 22px; color: var(--tn-text-2); }
.tn-practice-count { display: inline-block; margin-left: 6px; font-weight: 600; color: var(--tn-text); }
.tn-kept { margin-top: 44px; padding-top: 28px; border-top: 1px solid var(--tn-hair); }
.tn-kept .tn-label { margin-top: 0; }
.tn-kept-n { margin: 0; font-size: clamp(34px, 4vw, 44px); line-height: 1; font-weight: 700; letter-spacing: -.045em; font-variant-numeric: tabular-nums; }
.tn-btn.tn-more { margin-top: 18px; }

.tn-scrub { margin-top: 28px; max-width: 760px; }
.tn-scrub-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.tn-scrub-date { font-size: clamp(26px, 4vw, 38px); font-weight: 700; letter-spacing: -.03em; line-height: 1.1; }
.tn-range { -webkit-appearance: none; appearance: none; width: 100%; height: 44px; margin: 14px 0 0; background: none; cursor: pointer; }
.tn-range::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: var(--tn-hair-2); }
.tn-range::-moz-range-track { height: 4px; border-radius: 2px; background: var(--tn-hair-2); }
/* the iOS slider knob: a white disc on a soft shadow, never a black dot */
.tn-range::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; margin-top: -12px; border-radius: 50%; border: 0; background: #FFFFFF; box-shadow: 0 0 0 .5px rgba(0,0,0,.04), 0 3px 8px rgba(0,0,0,.15), 0 3px 1px rgba(0,0,0,.06); }
.tn-range::-moz-range-thumb { width: 28px; height: 28px; border-radius: 50%; border: 0; background: #FFFFFF; box-shadow: 0 0 0 .5px rgba(0,0,0,.04), 0 3px 8px rgba(0,0,0,.15), 0 3px 1px rgba(0,0,0,.06); }
.tn-scrub-ends { display: flex; justify-content: space-between; font-size: 13px; color: var(--tn-text-3); margin-top: -4px; }
.tn-next { flex: none; max-width: 15em; text-align: right; font-size: 14px; line-height: 20px; color: var(--tn-text-2); }
.tn-next.is-back { color: var(--tn-text); }
@media (max-width: 559px) { .tn-rows2 li { flex-wrap: wrap; } .tn-next { max-width: none; text-align: left; flex-basis: 100%; } }

.tn-expand { list-style: none; margin: 22px 0 0; padding: 0; border-top: 1px solid var(--tn-hair); }
.tn-expand li { padding: 18px 0; border-bottom: 1px solid var(--tn-hair); display: grid; gap: 4px; }
.tn-expand li b { font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.tn-expand li p { margin: 0; font-size: 15px; line-height: 22px; color: var(--tn-text-2); max-width: 46em; }
.tn-expand li.is-later { grid-template-columns: 1fr auto; align-items: start; }
.tn-expand li.is-later p { grid-column: 1 / -1; }
.tn-expand li.is-later b { color: var(--tn-text-2); }

.tn-tiers { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 12px; }
@media (min-width: 760px) { .tn-tiers { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tn-tier { position: relative; padding: 24px 22px; border-radius: 22px; background: var(--tn-surface); box-shadow: inset 0 0 0 1px var(--tn-hair); }
.tn-tier ul { list-style: none; margin: 14px 0 0; padding: 14px 0 0; border-top: 1px solid var(--tn-hair); display: grid; gap: 8px; font-size: 14px; line-height: 20px; color: var(--tn-text-2); }
.tn-tier h4 { margin: 0; font-size: 19px; font-weight: 600; letter-spacing: -.02em; }
.tn-price-big { margin: 14px 0 0; display: flex; align-items: baseline; gap: 4px; }
.tn-price-big .tn-num { font-size: 44px; font-weight: 700; letter-spacing: -.04em; line-height: 1; }
.tn-price-big span { color: var(--tn-text-2); font-size: 16px; }
.tn-tier .tn-note { margin-top: 8px; }

/* 11. the plan: the checklist of their own findings, the size picker, a sticky total with the one main action */
.tn-plan-cta { margin-top: clamp(40px, 6vw, 72px); max-width: 420px; }
.tn-checks { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 12px; max-width: 40em; }
.tn-checks li { display: flex; gap: 12px; align-items: flex-start; font-size: 17px; line-height: 24px; color: var(--tn-text); }
.tn-tick { flex: none; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%; background: var(--tn-fill); position: relative; }
.tn-tick::after { content: ''; position: absolute; left: 8px; top: 4px; width: 5px; height: 10px; border: solid var(--tn-text); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.tn-tier-pick { display: block; width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer; border: 0; }
.tn-tier-pick:hover { box-shadow: inset 0 0 0 1px var(--tn-hair-2); }
.tn-tier-pick[aria-checked="true"] { background: var(--tn-selected); box-shadow: inset 0 0 0 1.5px var(--tn-sel-edge); }
.tn-tier-pick[aria-checked="true"] .tn-fine { color: var(--tn-text-2); }
.tn-tier-top { display: flex; align-items: center; gap: 10px; }
.tn-totalbar { position: sticky; bottom: 0; z-index: 5; display: flex; align-items: center; gap: 16px; margin: 32px 0 0; padding: 14px 0 calc(14px + env(safe-area-inset-bottom, 0px)); background: var(--tn-ground); border-top: 1px solid var(--tn-hair); }
.tn-totalbar .tn-main { width: auto; flex: none; margin-left: auto; min-width: 220px; }
.tn-total { margin: 0; display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; color: var(--tn-text-2); font-size: 15px; }
.tn-total b { font-size: 26px; font-weight: 700; letter-spacing: -.03em; color: var(--tn-text); }
@media (max-width: 640px) { .tn-totalbar { flex-direction: column; align-items: stretch; gap: 10px; } .tn-totalbar .tn-main { width: 100%; margin-left: 0; } }
.tn-save { max-width: 640px; padding-bottom: 8px; }
.tn-save .tn-main { margin-top: 22px; }
.tn-save-off { margin: 14px 0 0; font-size: 16px; line-height: 24px; color: var(--tn-text); max-width: 34em; }

.tn-noscript { max-width: 680px; margin: 0 auto; padding: 24px 20px; }
.app-footer { margin-top: clamp(48px, 8vw, 96px); padding: 24px 20px calc(24px + env(safe-area-inset-bottom)); border-top: 1px solid var(--tn-hair); text-align: center; font-size: 13px; line-height: 20px; color: var(--tn-text-3); }
.af-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 4px; }
.af-links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; color: var(--tn-text-2); text-decoration: none; }
.af-sep { display: none; }
.af-entity { margin: 4px auto 0; max-width: 60em; }
.af-entity a { display: inline-flex; align-items: center; min-height: 44px; }
.af-copy { display: block; margin-top: 8px; }

/* ── Improve and Expand as chapters: a numbered kicker, a large title, one sentence of fact, then the component. From 1024 px the words sit in a
   column of their own beside the component and stay in view while it scrolls (an Apple spec page's rhythm), and a hairline parts the chapters. ── */
.tn-chap { display: grid; gap: 24px; padding: clamp(36px, 6vw, 72px) 0; border-top: 1px solid var(--tn-hair); }
.tn-panel > .tn-chap:first-child { border-top: 0; padding-top: 0; }
@media (min-width: 1024px) {
  .tn-chap { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 56px; align-items: start; }
  .tn-chap-head { position: sticky; top: calc(var(--tn-top-h) + 24px); }
}
.tn-chap-k { display: flex; align-items: baseline; gap: 12px; margin: 0 0 14px; font-size: 15px; line-height: 20px; font-weight: 600; color: var(--tn-text-2); }
.tn-chap-n { font-size: 15px; font-weight: 700; letter-spacing: .02em; color: var(--tn-text-3); }
.tn-chap-h { margin: 0; font-size: clamp(26px, 3.4vw, 40px); line-height: 1.1; letter-spacing: -.035em; font-weight: 700; text-wrap: balance; max-width: 16em; }
.tn-chap-f { margin: 16px 0 0; font-size: clamp(17px, 1.5vw, 19px); line-height: 1.5; font-weight: 500; color: var(--tn-text-2); max-width: 30em; text-wrap: pretty; }
.tn-chap-body { min-width: 0; }
.tn-chap-body > .tn-how { margin-top: 16px; }
.tn-panelcard { padding: clamp(20px, 2.6vw, 28px); border-radius: 22px; background: var(--tn-surface); box-shadow: inset 0 0 0 1px var(--tn-hair); }
.tn-panelcard + .tn-panelcard, .tn-panelcard + .tn-sub-h, .tn-kgroup + .tn-fine, .tn-money + .tn-panelcard { margin-top: 16px; }
.tn-panel-h { margin: 0 0 12px; font-size: 15px; line-height: 20px; font-weight: 600; color: var(--tn-text-2); }
.tn-sub-h { margin-top: 28px; }
.tn-fact-sm { margin: 0 0 14px; font-size: 17px; line-height: 26px; }
.tn-kgroup, .tn-kstats { border-radius: 18px; }
/* AA on this page: the cohort table's empty cells ("–") and its column heads use the page's second text step, not the app's third */
.tn-kgroup .ak-cell b.is-off, .tn-kgroup .ak-tbl thead th { color: var(--tn-text-2); }
.tn-kstats { margin-bottom: 0; }
.tn-who-card .tn-list { margin-top: 0; border-top: 0; }
.tn-who-card .tn-list li:last-child { border-bottom: 0; }
/* the look-back: one bar of every leaver, its parts by when the Radar said so */
.tn-lbbar { display: flex; gap: 3px; height: 10px; }
.tn-lbbar i { flex: 0 0 0; min-width: 6px; border-radius: 5px; }
/* the look-back is quiet grey (pass 2): the sentence carries the result; no field of lime in Improve */
.tn-lbbar i.is-caught, .tn-lbkey.is-caught { background: var(--tn-text); }
/* Improve keeps no lime data marks: the retention table underlines and the First 90 bars are neutral too */
#tn-health .ak-cell i, .tn-kgroup .ak-cell i { background: var(--tn-text-3); border: 0; }
#tn-first90 .ak-bar-track i { background: var(--tn-text-3); border: 0; }
.tn-lbbar i.is-late, .tn-lbkey.is-late { background: var(--tn-text-3); }
.tn-lbbar i.is-never, .tn-lbkey.is-never { background: transparent; box-shadow: inset 0 0 0 1.5px var(--tn-text-3); }
.tn-lblegend { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 8px; }
.tn-lblegend li { display: flex; align-items: center; gap: 10px; font-size: 15px; line-height: 22px; color: var(--tn-text-2); }
.tn-lblegend li:first-child { color: var(--tn-text); font-weight: 600; }
.tn-lbkey { flex: none; width: 14px; height: 14px; border-radius: 4px; }
.tn-lblead { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--tn-hair); }
.tn-lblead b { font-size: clamp(40px, 5vw, 56px); line-height: 1; font-weight: 700; letter-spacing: -.045em; }
.tn-lblead span { font-size: 16px; line-height: 22px; font-weight: 600; color: var(--tn-text-2); max-width: 16em; }
/* going back in time: the giant date, the slider, three numbers for that day, then the app's own rows */
.tn-scrub { max-width: none; margin-top: 0; }
.tn-scrub-date { font-size: clamp(34px, 5vw, 56px); letter-spacing: -.04em; line-height: 1.05; }
.tn-scrub-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--tn-hair); }
.tn-sst { margin: 0; display: grid; gap: 4px; align-content: start; }
.tn-sst b { font-size: clamp(30px, 4vw, 44px); line-height: 1; font-weight: 700; letter-spacing: -.04em; }
.tn-sst span { font-size: 14px; line-height: 19px; font-weight: 500; color: var(--tn-text-2); }
.tn-scrub-list { margin-top: 16px; }
.tn-past { border-radius: 18px; }
.tn-past .ak-rrow-text::after { display: none; }
@media (hover: hover) { .tn-past .ak-rrow:hover { background: none; } }
.tn-past .ak-rrow { grid-template-columns: 20px minmax(0, 1fr) 48px; }
.tn-past .ak-rrow-end { display: none; }
.tn-out { margin-top: 4px; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--tn-text-2); }
.tn-out.is-back { color: var(--tn-text); }
.tn-out.is-back::before { content: ''; display: inline-block; width: 8px; height: 8px; margin: 0 8px 1px 0; border-radius: 50%; background: var(--tn-data); box-shadow: inset 0 0 0 var(--tn-data-edge-w) var(--tn-data-edge); }
@container (max-width: 519px) { .tn-past .ak-rrow { grid-template-columns: 8px minmax(0, 1fr) auto; } .tn-out { grid-column: 1 / -1; } }
.tn-panel .tn-money-line { font-size: 17px; }
/* Expand 1: keep it live. The three ways as a segmented control (the selected one is the light thumb, never black), then the real thing */
.tn-liveseg { margin-top: 0; }
@media (max-width: 479px) { .tn-seg.tn-liveseg { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tn-roll-more { margin: 0; padding: 14px 16px; border-top: 1px solid var(--tn-hair); font-size: 14px; line-height: 20px; font-weight: 500; color: var(--tn-text-2); }
.tn-liveseg button[aria-selected="true"] { background: var(--tn-thumb); color: var(--tn-text); }
.tn-livepanel { margin-top: 18px; }
.tn-livepanel:focus-visible { outline-offset: 6px; border-radius: 12px; }
.tn-live-lead { margin: 0 0 16px; font-size: 16px; line-height: 24px; color: var(--tn-text-2); max-width: 36em; }
.tn-bigfact { display: grid; gap: 6px; }
.tn-bigfact b { font-size: clamp(48px, 6vw, 72px); line-height: 1; font-weight: 700; letter-spacing: -.045em; }
.tn-bigfact span { font-size: 17px; font-weight: 600; color: var(--tn-text-2); }
.tn-roll .ak-next { border-bottom: 1px solid var(--tn-hair); }
.tn-roll .ak-rc { min-height: 60px; }
/* the roll call's "here" mark on this page: a data-mark ring with the check in text colour (no dark icon on a small lime fill) */
.tn-roll .ak-rc.is-here .ak-rc-mark { background: transparent; border: 2px solid var(--tn-line); color: var(--tn-text); }
.tn-roll .ak-rc .ak-rc-mark { width: 32px; height: 32px; }
.tn-roll .ak-rc-sub { color: var(--tn-text-2); }
/* Expand 2: the depth of the app. A plain list of its parts (a settings sidebar, never a drum list), the chosen one a grey pill; the panel beside it */
.tn-partswrap { display: grid; gap: 16px; }
@media (min-width: 720px) { .tn-partswrap { grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: 20px; align-items: start; } }
.tn-parts { display: flex; flex-direction: column; gap: 2px; }
@media (max-width: 719px) { .tn-parts { flex-direction: row; overflow-x: auto; scrollbar-width: none; margin: 0 -20px; padding: 0 20px 4px; gap: 6px; scroll-snap-type: x proximity; } .tn-parts::-webkit-scrollbar { display: none; } }
.tn-part { display: flex; align-items: center; min-height: 44px; padding: 0 14px; border: 0; border-radius: 12px; background: none; text-align: left; font-size: 17px; font-weight: 600; letter-spacing: -.015em; color: var(--tn-text-2); white-space: nowrap; scroll-snap-align: start; transition: color .15s, background .15s; }
.tn-part:hover { color: var(--tn-text); background: var(--tn-fill); }
.tn-part[aria-selected="true"] { color: var(--tn-text); background: var(--tn-fill); }

@media (max-width: 719px) { .tn-part { flex: none; } }

@media (min-width: 720px) { .tn-depthpanel { min-height: 340px; } }
.tn-depthpanel { padding: clamp(20px, 2.6vw, 28px); border-radius: 22px; background: var(--tn-surface); box-shadow: inset 0 0 0 1px var(--tn-hair); }
.tn-depthpanel:focus-visible { outline-offset: 4px; }
.tn-depth-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.tn-depth-t { margin: 0; font-size: 22px; line-height: 28px; font-weight: 700; letter-spacing: -.025em; }
.tn-depth-s { margin: 10px 0 0; font-size: 16px; line-height: 24px; color: var(--tn-text-2); max-width: 34em; }
.tn-depth-c { margin-top: 22px; }
.tn-depth-c .ak-cols-val, .tn-depth-c .ak-hb-v { color: var(--tn-text); }
.tn-depth-c .ak-cols-cap, .tn-depth-c .ak-hb-sub { color: var(--tn-text-2); }

/* ── the no-software path ── */
/* the intro: the five questions as a quiet numbered card, so the length is known before the first one (Cal AI 38) */
.tn-qs { list-style: none; margin: clamp(24px, 4vh, 40px) 0 0; padding: 4px 0; max-width: 520px; border-radius: 20px; background: var(--tn-surface); box-shadow: inset 0 0 0 1px var(--tn-hair); }
.tn-qs li { display: flex; align-items: center; gap: 14px; min-height: 52px; padding: 0 18px; font-size: 17px; font-weight: 600; letter-spacing: -.01em; position: relative; }
.tn-qs li + li::before { content: ''; position: absolute; left: 60px; right: 0; top: 0; border-top: 1px solid var(--tn-hair); }
.tn-qn { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--tn-fill); font-size: 14px; font-weight: 700; color: var(--tn-text-2); }
.tn-sheet { margin-top: 28px; max-width: 520px; }
.tn-sheet-h { margin: 0; font-size: 15px; line-height: 22px; font-weight: 600; }
.tn-sheet .tn-note { margin-top: 2px; }
.tn-sheet .tn-actions { margin-top: 12px; }
/* the price: a giant typed figure, the ruler number's type, with its currency before it and its unit after */
.tn-bigprice { cursor: text; }
.tn-bigprice-c { flex: none; align-self: flex-start; margin: .18em 2px 0 0; font-size: clamp(34px, 6vw, 52px); line-height: 1; font-weight: 700; letter-spacing: -.03em; color: var(--tn-text-2); }
.tn-bigprice .tn-bignum-in::placeholder { color: var(--tn-text-3); }
/* the field's mark is a rule under the figure (a hairline at rest, text-2 and thicker while typing): the focus is visible without a form box */
.tn-bigprice .tn-bignum-in { padding-bottom: 6px; border-bottom: 2px solid var(--tn-hair-2); border-radius: 0; }
.tn-bigprice .tn-bignum-in:focus, .tn-bigprice .tn-bignum-in:focus-visible { outline: none; border-bottom: 3px solid var(--tn-text-2); }
@media (max-width: 479px) { .tn-bigprice { flex-direction: row; flex-wrap: wrap; justify-content: center; } .tn-bigprice .tn-bignum-u { flex-basis: 100%; text-align: center; } }
.tn-s-price .tn-size { margin-top: clamp(28px, 7vh, 72px); }
.tn-center-l { justify-self: center; text-decoration: none; font-weight: 600; }
@media (min-width: 720px) { .tn-center-l { justify-self: start; } }
/* your academy from day one: your answers (editable) and the money beside the app's own checklist, then the three-week strip */
.tn-d1 { display: grid; gap: 20px; margin-top: clamp(28px, 5vh, 48px); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 900px) { .tn-d1 { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 28px; } }
.tn-d1-h { margin: 0 0 12px; font-size: 15px; line-height: 20px; font-weight: 600; color: var(--tn-text-2); }
.tn-d1-sp { margin: -6px 0 14px; }
.tn-answers { border-radius: 20px; background: var(--tn-surface); box-shadow: inset 0 0 0 1px var(--tn-hair); }
.tn-ans { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 0 8px 0 18px; position: relative; }
.tn-ans + .tn-ans::before { content: ''; position: absolute; left: 18px; right: 0; top: 0; border-top: 1px solid var(--tn-hair); }
.tn-ans-l { flex: 1; min-width: 0; font-size: 15px; color: var(--tn-text-2); }
.tn-ans-v { font-size: 16px; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.tn-ans-e { flex: none; min-width: 44px; padding: 0 10px; font-size: 14px; font-weight: 600; text-decoration: none; }
.tn-d1-money { margin-top: 20px; padding: 22px 20px; border-radius: 20px; background: var(--tn-surface); box-shadow: inset 0 0 0 1px var(--tn-hair); }
.tn-d1-fig { margin: 0; display: grid; gap: 6px; }
.tn-d1-fig b { font-size: clamp(44px, 6.4vw, 72px); line-height: 1; font-weight: 700; letter-spacing: -.045em; }
.tn-d1-fig span { font-size: 17px; font-weight: 600; letter-spacing: -.01em; color: var(--tn-text-2); }
.tn-d1-money .tn-fine { margin-top: 12px; }
.tn-d1-group { border-radius: 20px; }
.tn-d1-group .ak-row { min-height: 64px; padding-top: 12px; padding-bottom: 12px; }
.tn-d1-group .ak-row-title { font-size: 16px; font-weight: 600; }
.tn-d1-group .ak-row-sub { font-size: 14px; line-height: 20px; color: var(--tn-text-2); }
.tn-d1-group .ak-check { align-self: flex-start; margin-top: 1px; border-color: var(--tn-text-2); }
/* the strip: three points on one line, today filled (a data mark), the later two hollow; the Radar's point says "Not ready yet" (Cal AI's honest empty state) */
.tn-strip { margin-top: clamp(40px, 6vh, 64px); padding-top: clamp(28px, 4vh, 40px); border-top: 1px solid var(--tn-hair); }
.tn-strip-h { margin: 0; font-size: clamp(24px, 3.2vw, 34px); line-height: 1.12; font-weight: 700; letter-spacing: -.03em; text-wrap: balance; max-width: 22em; }
.tn-pts { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 0; position: relative; }
.tn-pt { display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 14px; row-gap: 2px; padding-bottom: 22px; position: relative; align-items: start; align-content: start; }
.tn-pt:not(:last-child)::before { content: ''; position: absolute; left: 13px; top: 18px; bottom: 0; border-left: 1.5px solid var(--tn-hair-2); }
.tn-pt-dot { grid-row: 1 / span 3; width: 14px; height: 14px; margin: 3px 0 0 7px; border-radius: 50%; border: 1.5px solid var(--tn-text-3); background: var(--tn-ground); position: relative; z-index: 1; }
.tn-pt.is-now .tn-pt-dot { border: var(--tn-data-edge-w) solid var(--tn-data-edge); background: var(--tn-data); }
.tn-pt-w { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--tn-text-2); font-variant-numeric: tabular-nums; }
.tn-pt-t { font-size: 17px; line-height: 24px; font-weight: 600; letter-spacing: -.01em; }
.tn-pt .tn-tag { justify-self: start; margin-top: 8px; }
@media (min-width: 900px) {
  .tn-pts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
  .tn-pt { grid-template-columns: minmax(0, 1fr); padding: 0; row-gap: 4px; }
  .tn-pt:not(:last-child)::before { left: 20px; right: -24px; top: 9px; bottom: auto; border-left: 0; border-top: 1.5px solid var(--tn-hair-2); }
  .tn-pt-dot { grid-row: auto; margin: 2px 0 14px; }
}

/* wide screens: a wider column and a bigger orbit */
@media (min-width: 1536px) { html { --tn-w: 1280px; } .tn-s-software, .tn-s-rhythm, .tn-s-reading, .tn-wide { max-width: 1280px; } .tn-orbit { --orbit: 640px; } .tn-s-software .tn-split { grid-template-columns: minmax(0, 1fr) 640px; } }

@media (prefers-reduced-motion: no-preference) {
  .tn-step { animation: tn-in .34s cubic-bezier(.2, .8, .2, 1) both; }
  @keyframes tn-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
  .tn-bar i { transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
  .tn-main:not(:disabled):not([aria-disabled="true"]):active, .tn-opt:active, .tn-btn:active, .tn-row:active { transform: scale(.985); }
  body { transition: background-color .5s ease; }
  .tn-cell.is-on { animation: tn-cell .4s cubic-bezier(.2, .8, .2, 1) both; transform-box: fill-box; transform-origin: center; }
  .tn-wk.is-on { animation: tn-cell .4s cubic-bezier(.2, .8, .2, 1) both; transform-box: fill-box; transform-origin: bottom center; }
  .tn-wk.c0 { animation-delay: .05s; } .tn-wk.c1 { animation-delay: .12s; } .tn-wk.c2 { animation-delay: .19s; } .tn-wk.c3 { animation-delay: .26s; } .tn-wk.c4 { animation-delay: .33s; } .tn-wk.c5 { animation-delay: .4s; }
  .tn-wk.c6 { animation-delay: .47s; } .tn-wk.c7 { animation-delay: .54s; } .tn-wk.c8 { animation-delay: .61s; } .tn-wk.c9 { animation-delay: .68s; } .tn-wk.c10 { animation-delay: .75s; } .tn-wk.c11 { animation-delay: .82s; }
  .tn-wk.is-quiet { animation: tn-fade .6s ease 1.1s both; }
  .tn-cell.c0 { animation-delay: .05s; } .tn-cell.c1 { animation-delay: .15s; } .tn-cell.c2 { animation-delay: .25s; } .tn-cell.c3 { animation-delay: .35s; }
  .tn-cell.c4 { animation-delay: .45s; } .tn-cell.c5 { animation-delay: .55s; } .tn-cell.c6 { animation-delay: .65s; } .tn-cell.c7 { animation-delay: .75s; }
  .tn-cell.c8 { animation-delay: .85s; } .tn-cell.c9 { animation-delay: .95s; } .tn-cell.c10 { animation-delay: 1.05s; } .tn-cell.c11 { animation-delay: 1.15s; }
  @keyframes tn-cell { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }
  .tn-cell.is-quiet:not(.is-on) { animation: tn-fade .6s ease 1.7s both; }
  .tn-cal-q { animation: tn-fade .6s ease 2s both; }
  @keyframes tn-fade { from { opacity: 0; } to { opacity: 1; } }
  .tn-chk.is-done .tn-tick .tn-ic { animation: tn-tick .35s cubic-bezier(.2, .8, .2, 1) both; }
  @keyframes tn-tick { from { opacity: 0; transform: scale(.5); } to { opacity: 1; transform: none; } }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }
.tn-d1-money.is-wait { padding: 18px 20px; }
.tn-d1-money.is-wait .tn-note { margin: 0 0 12px; }

/* ── Save, when it is on: the promises, the account, the academy, saved, setting up (TUNNEL-REFS §4 rows 12, 13) ── */
.tn-promise { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 10px; max-width: 40em; }
.tn-promise li { display: flex; gap: 12px; align-items: flex-start; font-size: 16px; line-height: 23px; color: var(--tn-text); }
.tn-promise-lg { margin-top: clamp(28px, 5vh, 48px); gap: 16px; }
.tn-promise-lg li { font-size: 18px; line-height: 26px; font-weight: 500; }
.tn-s-account, .tn-s-code, .tn-s-details, .tn-s-saved, .tn-s-blocked { max-width: 560px; }
.tn-oauth { display: grid; gap: 10px; margin-top: clamp(24px, 4vh, 36px); }
.tn-oauth-b { min-height: 52px; border-radius: 14px; font-size: 16px; text-decoration: none; color: var(--tn-text); background: var(--tn-surface); box-shadow: inset 0 0 0 1px var(--tn-hair-2); }
.tn-oauth-b:hover { background: var(--tn-raised); box-shadow: inset 0 0 0 1.5px var(--tn-text-2); }
.tn-oauth .tn-fine { margin: 2px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; }
.tn-oauth .tn-link { font-size: 13px; font-weight: 600; }
.tn-ic-fill { fill: currentColor; stroke: none; width: 20px; height: 20px; }
.tn-or { display: flex; align-items: center; gap: 14px; margin: 24px 0 0; font-size: 13px; font-weight: 600; color: var(--tn-text-2); }
.tn-or::before, .tn-or::after { content: ''; flex: 1; border-top: 1px solid var(--tn-hair); }
.tn-accform { display: flex; flex-direction: column; flex: 1; }
.tn-field-sm { margin-top: 18px; }
.tn-field-sm input { min-height: 54px; font-size: 18px; }
.tn-accform > .tn-fine { margin-top: 8px; }
.tn-accform a { color: var(--tn-text); }
/* the box: a 44 px target (the input itself), the 26 px square drawn inside it, never a dark mark on lime and never a black fill in light */
.tn-tickbox { display: flex; align-items: flex-start; gap: 4px; margin: 14px 0 0 -9px; cursor: pointer; font-size: 15px; line-height: 22px; color: var(--tn-text); }
.tn-tickbox-t { padding-top: 11px; }
.tn-tickbox input { -webkit-appearance: none; appearance: none; flex: none; display: grid; place-items: center; width: 44px; height: 44px; margin: 0; border: 0; border-radius: 12px; background: none; cursor: pointer; }
.tn-tickbox input::before, .tn-tickbox input::after { content: ''; grid-area: 1 / 1; }
.tn-tickbox input::before { width: 26px; height: 26px; box-sizing: border-box; border-radius: 8px; border: 1.5px solid var(--tn-text-2); background: var(--tn-surface); }
.tn-tickbox input::after { width: 6px; height: 12px; margin-top: -3px; border: solid transparent; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.tn-tickbox input:checked::before { background: var(--tn-selected); border-color: var(--tn-text); }
.tn-tickbox input:checked::after { border-color: var(--tn-text); }
.tn-tickbox input:focus-visible { outline: 2px solid var(--tn-text-2); outline-offset: -4px; }
.tn-code { letter-spacing: .35em; font-variant-numeric: tabular-nums; text-align: center; font-size: 28px !important; font-weight: 600; }
.tn-similar { margin-top: 22px; padding: 20px; border-radius: 18px; background: var(--tn-surface); box-shadow: inset 0 0 0 1px var(--tn-hair-2); }
.tn-similar-h { margin: 0; font-size: 17px; font-weight: 700; }
.tn-similar ul { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 4px; font-size: 16px; }
.tn-similar .tn-btn { margin-top: 14px; }
.tn-s-saved .tn-over { margin-top: 36px; }
.tn-setup-checks { margin-top: clamp(28px, 5vh, 44px); }
.tn-s-setup .tn-chk-n { max-width: 55%; overflow-wrap: anywhere; }
.tn-s-setup .tn-chk.is-wait .tn-tick::after { display: none; }
a.tn-btn { text-decoration: none; color: var(--tn-text); }

/* ── the commitment questions and their replies (16 Oct; Cal AI §1 and 47). The same calm column, the same ruler, the same option rows; the reply
   screens are a split (the answer in words, beside their sum or a labelled example of the app's own component), one continue. No lime here but the
   ONE main action and the app's own data marks inside the examples. ── */
.tn-s-reply { max-width: 1120px; }
.tn-s-reply .tn-split { align-items: center; }
.tn-reply-t { font-size: clamp(30px, 4.6vw, 52px); max-width: 14em; }
.tn-s-reply .tn-sub { max-width: 28em; }
.tn-reply-fig { display: grid; gap: 16px; justify-items: start; align-self: center; }
/* the money replies, a year first (owner, 16 Oct): one sentence with the year's figure in big type inside it, the answers it is built from as chips
   (each goes back to its question; "12 months" is fixed and drawn as an outline), the month as a small second fact. No card, no rows, no glow, no
   counting numerals; the ONE lime thing on the screen is Continue. */
.tn-s-yr { max-width: 1120px; }
.tn-yr { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; max-width: 860px; }
.tn-yr-h { margin: 0; font-weight: 700; color: var(--tn-text); }
.tn-yr-h:focus { outline: none; }
.tn-yr-pre, .tn-yr-post { display: block; font-size: clamp(24px, 3vw, 36px); line-height: 1.18; letter-spacing: -.028em; text-wrap: balance; max-width: 22em; }
.tn-yr-fig { display: block; margin: .08em 0 .1em -.04em; font-size: min(19vw, 152px); line-height: 1; letter-spacing: -.055em; white-space: nowrap; }
.tn-yr-fig.is-long { font-size: min(15vw, 132px); }
.tn-yr-in { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 0; margin: clamp(24px, 4vh, 36px) 0 0; padding: 0; list-style: none; }
.tn-yr-in li { display: inline-flex; align-items: center; }
.tn-yr-x { padding: 0 10px; font-size: 17px; color: var(--tn-text-3); }
.tn-yr-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px 0 16px; border: 0; border-radius: 999px; background: var(--tn-fill); color: var(--tn-text); font: inherit; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; transition: background .15s; }
button.tn-yr-chip { cursor: pointer; }
button.tn-yr-chip:hover { background: var(--tn-fill-hover); }
.tn-yr-chip .tn-ic { width: 16px; height: 16px; color: var(--tn-text-3); }
.tn-yr-chip.is-fixed { padding: 0 16px; background: none; box-shadow: inset 0 0 0 1px var(--tn-hair-2); color: var(--tn-text-2); }
.tn-yr-mo { margin: 20px 0 0; font-size: 17px; line-height: 1.4; font-weight: 600; color: var(--tn-text-2); }
.tn-s-yr .tn-sub { margin-top: 8px; font-size: 17px; max-width: 32em; }
.tn-s-yr .tn-fine { max-width: 40em; }
.tn-yr-set { margin-top: 20px; }
/* the look-back step: the facts under the sentence, then their memberships a year (only with a price) */
.tn-yr-fact { margin: 20px 0 0; font-size: 17px; line-height: 1.45; color: var(--tn-text-2); max-width: 34em; text-wrap: pretty; }
.tn-yr-fact b { font-weight: 700; color: var(--tn-text); }
.tn-yr-money { align-self: stretch; margin: clamp(24px, 4vh, 36px) 0 6px; padding-top: clamp(20px, 3vh, 28px); border-top: 1px solid var(--tn-hair); }
.tn-yr-mline { margin: 0; font-size: clamp(20px, 2.4vw, 28px); line-height: 1.2; font-weight: 600; letter-spacing: -.02em; }
.tn-yr-mline b { font-size: clamp(34px, 5vw, 56px); font-weight: 700; letter-spacing: -.045em; }
.tn-yr-money .tn-yr-in { margin-top: 18px; }
.tn-yr-mline .tn-nw { white-space: nowrap; }
/* the dollar ruler: the $ sits to the left of the number without moving it off the ruler's mark */
.tn-bigcur-c { flex: none; width: 0; display: flex; justify-content: flex-end; align-self: flex-start; white-space: nowrap; margin-top: .2em; padding-right: 6px; font-size: clamp(34px, 6vw, 52px); line-height: 1; font-weight: 700; letter-spacing: -.03em; color: var(--tn-text-2); }
@media (max-width: 479px) { .tn-bigcur { flex-direction: row; flex-wrap: wrap; justify-content: center; } .tn-bigcur .tn-bignum-u { flex-basis: 100%; text-align: center; } }
/* the examples: the app's components inside the labelled figure */
.tn-ex { width: 100%; }
.tn-ex-body { min-width: 0; }
.tn-ex-who { margin: 0 0 10px; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--tn-text-2); }
.tn-ex-cap { margin: 14px 0 0; font-size: 17px; line-height: 24px; font-weight: 600; letter-spacing: -.015em; }
.tn-ex-seg { margin: 0 0 16px; }
.tn-ex .ak-group { margin: 0; background: none; box-shadow: none; border: 0; border-radius: 0; }
.tn-ex .ak-sc-row, .tn-ex .ak-prow { padding-left: 0; padding-right: 0; }
.tn-sc [role="rowgroup"] > .ak-sc-row:first-child::before { display: none; }
.tn-ex .ak-sc-row + .ak-sc-row::before, .tn-ex .ak-inbox + .ak-inbox::before { left: 0; }
@media (max-width: 719px) { .tn-s-reply .tn-mech { font-size: 17px; line-height: 1.45; margin-top: 18px; } .tn-s-reply .tn-sub { font-size: 17px; } }
.tn-ex-seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; }
.tn-ex-seg button { white-space: nowrap; }
.tn-plain { width: 100%; margin: 0; padding: 4px clamp(20px, 3vw, 32px); border-radius: 24px; background: var(--tn-surface); box-shadow: inset 0 0 0 1px var(--tn-hair); }
.tn-ex .ak-cols { margin: 0; }
/* the Scorecard rows at the figure's width: the app's phone layout (name, then the figures under it), whatever the window */
.tn-sc .ak-sc-head { display: none; }
.tn-sc .ak-sc-row { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 10px; }
.tn-sc .ak-sc-name { grid-column: 1 / -1; }
.tn-sc .ak-sc-c { align-items: flex-start; text-align: left; }
.tn-sc .ak-sc-l { display: block; font: 500 12px/16px Inter, system-ui, sans-serif; color: var(--ak-text-2, var(--tn-text-2)); }
.tn-excel .ak-prow { cursor: default; }
/* how a logged try reaches the academy: three numbered lines */
.tn-flowsteps { list-style: none; margin: 0; padding: 0; }
.tn-flowsteps li { display: flex; align-items: flex-start; gap: 14px; padding: 16px 0; }
.tn-flowsteps li + li { border-top: 1px solid var(--tn-hair); }
.tn-flowsteps .tn-qn { margin-top: 1px; }
.tn-flowsteps-t { display: grid; gap: 4px; }
.tn-flowsteps-t b { font-size: 17px; line-height: 24px; font-weight: 600; letter-spacing: -.01em; }
.tn-flowsteps-t small { font-size: 15px; line-height: 22px; color: var(--tn-text-2); }
/* the result: what they told us, against their file */
.tn-told { list-style: none; margin: 20px 0 0; padding: 0; }
.tn-told li { padding: 16px 0; border-top: 1px solid var(--tn-hair); }
.tn-told .tn-say { margin: 0; }
.tn-told-f { margin: 4px 0 0; font-size: 19px; line-height: 27px; font-weight: 600; letter-spacing: -.015em; max-width: 36em; text-wrap: pretty; }

/* ── T7b (20 Oct): the number questions (a plain field + quick picks; no ruler), the sample academy replies, the reading from answers, the three ways
   on, the free-week application, contact us, the claim. The page's tokens only; dark first (owner, 20 Oct: dark is the main theme; light inherits the
   same tokens and is not tuned further for now). ── */
.tn-numq { margin-top: clamp(28px, 6vh, 56px); max-width: 520px; }
.tn-numf { display: block; }
.tn-numf-l { display: block; margin: 0 0 10px; font-size: 15px; line-height: 20px; font-weight: 600; color: var(--tn-text-2); }
.tn-numf-box { display: flex; align-items: center; gap: 10px; min-height: 76px; padding: 0 20px; border-radius: 18px; background: var(--tn-surface); box-shadow: inset 0 0 0 1px var(--tn-hair-2); }
.tn-numf-box:focus-within { box-shadow: inset 0 0 0 2px var(--tn-text-2); }
.tn-numf-pre { font-size: 34px; line-height: 1; font-weight: 600; color: var(--tn-text-2); }
.tn-numf-in { flex: 1; min-width: 0; padding: 0; border: 0; background: none; font-size: 40px; line-height: 1; font-weight: 700; letter-spacing: -.03em; color: var(--tn-text); caret-color: var(--tn-text); outline: none; }
.tn-numf-in::placeholder { color: var(--tn-text-3); }
.tn-numf-u { flex: none; font-size: 17px; font-weight: 600; color: var(--tn-text-2); }
.tn-presets { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.tn-preset { min-height: 44px; min-width: 64px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--tn-fill); color: var(--tn-text); font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; transition: background .15s; }
.tn-preset:hover { background: var(--tn-fill-hover); }
.tn-preset[aria-pressed="true"] { background: var(--tn-selected); box-shadow: inset 0 0 0 1.5px var(--tn-sel-edge); }
.tn-numq .tn-err { min-height: 22px; margin-top: 12px; }

/* the sample academy's money line under the tag, and the reply's figure */
.tn-ex-money { margin: 14px 0 4px; }
.tn-yr-mline { margin: 0; font-size: clamp(19px, 2.2vw, 22px); line-height: 1.35; font-weight: 600; letter-spacing: -.01em; color: var(--tn-text-2); text-wrap: balance; }
.tn-yr-mline b { color: var(--tn-text); font-size: 1.15em; font-weight: 700; }

/* no software */
.tn-ways { display: grid; gap: 16px; margin-top: 28px; }
@media (min-width: 900px) { .tn-ways { grid-template-columns: 1.3fr 1fr; align-items: start; } }
.tn-way { padding: 20px; border-radius: 18px; background: var(--tn-surface); box-shadow: inset 0 0 0 1px var(--tn-hair); }
.tn-way-h { margin: 0 0 6px; font-size: 18px; line-height: 24px; font-weight: 700; letter-spacing: -.01em; }
.tn-way .tn-fld { margin-top: 16px; }
.tn-nr { display: grid; gap: 22px; margin-top: 28px; max-width: 640px; }
.tn-nr-row .tn-fine { margin-top: 6px; }

/* the three ways on */
.tn-doors { display: grid; gap: 22px; margin-top: 26px; max-width: 640px; }
.tn-door.is-main { padding: 22px; border-radius: 20px; background: var(--tn-surface); box-shadow: inset 0 0 0 1px var(--tn-hair); }
.tn-door-t { margin: 0 0 6px; font-size: 22px; line-height: 28px; font-weight: 700; letter-spacing: -.02em; }
.tn-door .tn-main { margin-top: 18px; }
.tn-doors .tn-center-l { justify-self: start; }

/* forms (the application, contact us) */
.tn-form { display: grid; gap: 16px; margin-top: 26px; max-width: 640px; }
.tn-fld { display: grid; gap: 8px; min-width: 0; }
.tn-fld-l { font-size: 15px; line-height: 20px; font-weight: 600; color: var(--tn-text-2); }
.tn-fld-h { font-size: 13px; line-height: 18px; color: var(--tn-text-3); }
.tn-input { width: 100%; min-height: 52px; padding: 0 14px; border: 0; border-radius: 14px; background: var(--tn-surface); box-shadow: inset 0 0 0 1px var(--tn-hair-2); color: var(--tn-text); font: inherit; font-size: 17px; }
.tn-input::placeholder { color: var(--tn-text-3); }
.tn-input:focus { outline: 2px solid var(--tn-text-2); outline-offset: 1px; }
select.tn-input { appearance: none; -webkit-appearance: none; padding-right: 36px; background-image: linear-gradient(45deg, transparent 50%, var(--tn-text-2) 50%), linear-gradient(135deg, var(--tn-text-2) 50%, transparent 50%); background-position: calc(100% - 20px) 23px, calc(100% - 15px) 23px; background-size: 5px 5px; background-repeat: no-repeat; }
.tn-area { min-height: 132px; padding: 12px 14px; line-height: 1.45; resize: vertical; }
.tn-fld-2 { display: grid; gap: 16px; }
@media (min-width: 560px) { .tn-fld-2 { grid-template-columns: 1fr 1fr; } }
.tn-form .tn-foot { margin-top: 8px; }
.tn-form .tn-err:empty { display: none; }
.tn-fset { margin: 0; padding: 0; border: 0; display: grid; gap: 8px; }
.tn-radio-l { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 14px; border-radius: 14px; background: var(--tn-surface); box-shadow: inset 0 0 0 1px var(--tn-hair); font-size: 16px; font-weight: 600; cursor: pointer; }
.tn-radio-l:has(input:checked) { background: var(--tn-selected); box-shadow: inset 0 0 0 1.5px var(--tn-sel-edge); }
.tn-radio-l input { width: 20px; height: 20px; margin: 0; accent-color: var(--tn-sel-dot); }
.tn-map-state { margin-top: -6px; }

/* the codes */
.tn-codes { display: grid; gap: 18px; margin-top: 26px; max-width: 520px; }
.tn-codef .tn-input { font-size: 24px; letter-spacing: .2em; font-variant-numeric: tabular-nums; }
.tn-code-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.tn-dev { color: var(--tn-amber); }
.tn-okrow { display: flex; align-items: center; gap: 12px; margin: 0; min-height: 44px; font-size: 16px; font-weight: 600; }
.tn-tick.is-on { border-color: var(--tn-text-2); color: var(--tn-text); }
.tn-oklist { display: grid; gap: 6px; margin: 24px 0 18px; }
.tn-dm { margin-top: 22px; padding: 18px 20px; border-radius: 18px; background: var(--tn-surface); box-shadow: inset 0 0 0 1px var(--tn-hair); max-width: 520px; }
.tn-dm-code { margin: 12px 0 0; font-size: 28px; font-weight: 700; letter-spacing: .06em; user-select: all; }

/* ───────── A114 / OB-29 pass 1 (27 Oct; walk features-1020/b2b27/b1): one screen per step, OP BJJ's look ───────── */
/* the site footer only on the end screens (every step scrolled ~300 px into it); the forms keep their own Terms + Privacy links */
html[data-step]:not([data-step="doors"]):not([data-step="result"]):not([data-step="n-result"]):not([data-step="apply-done"]):not([data-step="contact-done"]):not([data-step="claimed"]) .app-footer { display: none; }
/* the main action: graphite + white label + a small lime arrow (DS-08b, as the B2C tunnel and the landings); static glyph file (CSP) */
.tn-main:not(:has(svg))::after { content: ""; flex: none; width: 18px; height: 18px; margin-left: 10px; background: #FFFFFF; /* DS-08c: no lime on a button (Codex B2B-F01, 27 Oct) */ -webkit-mask: url(/static/img/glyph/arrow.svg) center / contain no-repeat; mask: url(/static/img/glyph/arrow.svg) center / contain no-repeat; }
.tn-main:disabled::after, .tn-main[aria-disabled="true"]::after { background: currentColor; opacity: .55; }
/* questions: the answers in the middle of the free space (as the B2C questions) */
@media (max-width: 1023px) {
  .tn-step:is(.tn-s-num, .tn-s-choice) > :is(.tn-numq, .tn-opts) { margin-block: auto; }
}
/* the money line: the giant figure no longer touches the line under it */
.tn-yr-fig { line-height: 1.04; margin-bottom: .16em; }
/* "Sample academy" stays one chip */
.tn-tagrow .tn-tag { white-space: nowrap; flex: none; }
/* reply screens on a phone: the head, then the sample card in exactly the space left above Continue (the real app's rows fade
   out at the card's foot instead of running under the button); the mechanism line reads as a quiet sub-line, not a bold quote */
@media (max-width: 1023px) {
  .tn-s-ex { flex: 0 0 auto; height: calc(100svh - 60px); }   /* flex none: Chromium sized a 0%-basis step by its content and ignored the height */
  .tn-s-ex > .tn-split { flex: 1; min-height: 0; display: flex; flex-direction: column; }
  .tn-s-ex .tn-ex { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
  .tn-s-ex .tn-ex-body { flex: 1; min-height: 0; overflow: hidden; -webkit-mask-image: linear-gradient(#000 calc(100% - 64px), transparent); mask-image: linear-gradient(#000 calc(100% - 64px), transparent); }
  .tn-s-ex .tn-mech { margin-top: 10px; padding-left: 0; border-left: 0; font-size: 16px; line-height: 22px; font-weight: 500; color: var(--tn-text-2); }
}
.tn-tagrow .tn-mute { line-height: 19px; }   /* the sample note under/next to the chip: 14/19, not 14/26 */
@media (max-width: 1023px) { .tn-vgrid .tn-pill, .tn-vgrid .tn-pill:nth-child(n) { min-height: 52px; } .tn-vgrid { gap: 8px; } }   /* the software step fits one phone screen (it scrolled 48–76 px) */
@media (max-height: 960px) { .tn-opt { min-height: 60px; } }   /* a 900 px laptop: the five answers + Continue + its fine line in one screen (22 px over) */
@media (max-width: 1023px) { .tn-s-software .tn-row, .tn-step[data-step="software"] .tn-row { min-height: 64px; padding-block: 10px; } }   /* software on a phone: one screen in Chromium too */
/* the optional invite fold: a quiet text row with a plus, no browser triangle or underline; open, it stays above Continue */
.tn-inv { margin-top: 6px; }
.tn-inv > summary { list-style: none; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; text-decoration: none; color: var(--tn-text-2); font-size: 15px; font-weight: 600; }
.tn-inv > summary::-webkit-details-marker { display: none; }
.tn-inv > summary::before { content: "+"; width: 22px; height: 22px; border-radius: 11px; background: var(--tn-fill); color: var(--tn-text); display: inline-flex; align-items: center; justify-content: center; font-size: 16px; line-height: 1; }
.tn-inv[open] > summary::before { content: "−"; }
.tn-inv .tn-fld { margin-top: 4px; }

/* OB-06: the software step selects first (slate fill + white edge, DS-08c), Continue goes */
.tn-pill[aria-pressed="true"], .tn-row[aria-pressed="true"] { background: var(--tn-thumb); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .7); }
.tn-pill[aria-pressed="true"]::after, .tn-row[aria-pressed="true"]::after { content: ""; flex: none; width: 18px; height: 18px; margin-left: auto; padding-left: 10px; background: #FFFFFF;
  -webkit-mask: url(/static/img/glyph/check.svg) right center / 18px no-repeat; mask: url(/static/img/glyph/check.svg) right center / 18px no-repeat; }
.tn-row[aria-pressed="true"] > svg { display: none; }

/* Codex SE fit: keep complete sample proof above Continue on short, narrow phones. */
@media (max-width: 380px) and (max-height: 700px) {
  .tn-s-ex { padding: 12px 16px 0; }
  .tn-s-ex > .tn-split { gap: 8px; }
  .tn-s-ex .tn-head { margin-bottom: 0; }
  .tn-s-ex .tn-ex-who { margin-bottom: 4px; font-size: 12px; line-height: 16px; }
  .tn-s-ex .tn-title { font-size: 27px; line-height: 28px; }
  .tn-s-ex .tn-mech { margin-top: 6px; font-size: 14px; line-height: 18px; }
  .tn-s-ex .tn-cal-fig { padding: 8px 12px; border-radius: 20px; }
  .tn-s-ex .tn-tagrow { gap: 8px; margin-bottom: 6px; font-size: 12px; }
  .tn-s-ex .tn-tagrow .tn-mute { line-height: 15px; }
  .tn-s-ex .tn-tag { padding: 3px 8px; font-size: 12px; line-height: 16px; }
  .tn-s-ex .tn-ex-cap { margin: 4px 0 6px; font-size: 16px; line-height: 20px; }
  .tn-s-ex .tn-ex-body { overflow-y: auto; -webkit-mask-image: none; mask-image: none; }
  .tn-s-ex .tn-ex .tn-fine { margin-top: 4px; font-size: 12px; line-height: 15px; }
  .tn-s-ex .tn-foot { margin-inline: -16px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); }
  .tn-s-ex .ak-rrow, .tn-s-ex .ak-rrow.no-mark { min-height: 0; padding: 4px 0; row-gap: 0; }
  .tn-s-ex .ak-rrow-text { padding: 0; }
  .tn-s-ex .ak-rrow-name { font-size: 14px; line-height: 18px; }
  .tn-s-ex .ak-rrow-reason { font-size: 13px; line-height: 17px; }
  .tn-s-ex .ak-rrow + .ak-rrow::before { left: 0; }
  .tn-s-ex .tn-sc .ak-sc-row { padding-block: 6px; row-gap: 4px; }
  .tn-s-ex .tn-ex-seg { margin-bottom: 6px; }
  .tn-s-ex .ak-inbox.ak-prow { grid-template-columns: 20px minmax(0, 1fr) auto; grid-template-rows: auto; column-gap: 8px; row-gap: 0; padding-block: 6px; }
  .tn-s-ex .ak-inbox.ak-prow .ak-inbox-text { grid-column: 2; grid-row: 1; padding: 0; }
  .tn-s-ex .ak-prow .ak-inbox-mark { grid-column: 3; grid-row: 1; }
  .tn-s-ex .ak-prow .ak-verb-none { grid-column: 3; grid-row: 1; width: 0; }
}

/* The complete look-back keeps its flag record, warning and price inputs above Continue. */
@media (max-width: 699px) and (max-height: 900px) {
  .tn-s-look { padding-top: 20px; }
  .tn-s-look .tn-yr-pre, .tn-s-look .tn-yr-post { font-size: 22px; line-height: 25px; }
  .tn-s-look .tn-yr-fig { margin: 4px 0 6px -.04em; font-size: 64px; line-height: 1; }
  .tn-s-look .tn-yr-fig.is-long { font-size: clamp(32px, 9vw, 52px); }
  .tn-s-look .tn-yr-fact { margin-top: 12px; font-size: 16px; line-height: 21px; }
  .tn-s-look .tn-yr-money { margin: 14px 0 0; padding-top: 12px; }
  .tn-s-look .tn-yr-mline { font-size: 18px; line-height: 24px; }
  .tn-s-look .tn-yr-money .tn-yr-in { margin-top: 10px; gap: 6px 0; }
  .tn-s-look .tn-yr-chip { gap: 6px; padding-inline: 8px; font-size: 13px; }
  .tn-s-look .tn-yr-chip .tn-ic { width: 14px; height: 14px; }
  .tn-s-look .tn-yr-x { padding-inline: 4px; font-size: 14px; }
  .tn-s-look .tn-fine { margin-top: 10px; }
}
@media (max-width: 380px) and (max-height: 700px) {
  .tn-s-look { padding-top: 8px; }
  .tn-s-look .tn-yr-pre, .tn-s-look .tn-yr-post { font-size: 20px; line-height: 22px; }
  .tn-s-look .tn-yr-fig { font-size: 48px; }
  .tn-s-look .tn-yr-fig.is-long { font-size: 9vw; }
  .tn-s-look .tn-yr-fact { margin-top: 8px; font-size: 14.5px; line-height: 19px; }
  .tn-s-look .tn-yr-money { margin-top: 10px; padding-top: 10px; }
  .tn-s-look .tn-yr-mline { font-size: 16px; line-height: 21px; }
  .tn-s-look .tn-yr-money .tn-yr-in { margin-top: 6px; }
  .tn-s-look .tn-fine { margin-top: 8px; font-size: 12px; line-height: 16px; }
}

/* OB-28 the two reads (lensSec): one section, a switch, the same rows in place */
.tn-lens { margin-top: 28px; padding: clamp(22px, 3vw, 36px); border-radius: 26px; background: var(--tn-surface); box-shadow: inset 0 0 0 1px var(--tn-hair); }
.tn-lens-h { margin: 6px 0 0; font-size: 28px; line-height: 1.15; font-weight: 700; letter-spacing: -.02em; text-wrap: balance; }
.tn-lens-head .tn-note { margin-top: 8px; }
.tn-lens-seg { margin-top: 16px; }
.tn-lens[data-lens="soft"] .tn-lz-o, .tn-lens[data-lens="op"] .tn-lz-s { display: none; }
.tn-lz-list { margin-top: 16px; }
.tn-lz-list li:last-child { border-bottom: 0; }
.tn-lz-v { flex: none; display: grid; justify-items: end; }
.tn-lz-chip { display: inline-flex; align-items: center; min-height: 28px; padding: 0 12px; border-radius: 999px; background: var(--tn-fill); color: var(--tn-text-2); font-size: 14px; font-weight: 600; }
.tn-lz-d { color: var(--tn-data); }
.tn-lens.is-flip .tn-lz-row { animation: tn-lz-in .32s cubic-bezier(.2, .8, .2, 1) both; }
.tn-lens.is-flip .tn-lz-row:nth-child(2) { animation-delay: 45ms; }
.tn-lens.is-flip .tn-lz-row:nth-child(3) { animation-delay: 90ms; }
.tn-lens.is-flip .tn-lz-row:nth-child(4) { animation-delay: 135ms; }
.tn-lens.is-flip .tn-lz-row:nth-child(5) { animation-delay: 180ms; }
@keyframes tn-lz-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .tn-lens.is-flip .tn-lz-row { animation: none; } }
@media (max-width: 559px) { .tn-lens { padding: 20px 16px; border-radius: 20px; } .tn-lens-h { font-size: 24px; } .tn-lz-list li { flex-wrap: nowrap; } }

/* A114 / OB-08 short phones (iPhone SE class, ≤ 700 px tall): every question, the apps reply and the software step in one screen. Same parts,
   tighter rhythm; nothing hidden that a step needs (the software rows keep their names; their one-line explanations wait for a taller screen). */
@media (max-width: 430px) and (max-height: 700px) {
  .tn-step { padding-top: 8px; }
  .tn-title { font-size: 28px; line-height: 1.06; }
  .tn-sub { margin-top: 8px; font-size: 15px; line-height: 20px; }
  .tn-opts { margin-top: 14px; gap: 8px; }
  .tn-opt { min-height: 52px; padding: 6px 14px 6px 8px; font-size: 17px; }
  .tn-opt-ic { width: 36px; height: 36px; border-radius: 11px; }
  .tn-foot { margin-top: 14px; padding-bottom: 14px; }
  .tn-foot-in { gap: 6px; }
  .tn-s-software .tn-split { gap: 8px; }
  .tn-s-software .tn-head { margin-bottom: 0; }
  .tn-s-software .tn-vgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .tn-s-software .tn-vgrid .tn-pill, .tn-s-software .tn-vgrid .tn-pill:nth-child(n) { min-height: 46px; padding: 0 8px; justify-content: center; border-radius: 13px; font-size: 14.5px; }
  .tn-s-software .tn-row { min-height: 48px; padding: 8px 4px; }
  .tn-s-software .tn-row-t small { display: none; }
  .tn-s-software .tn-priv { margin: 0; }
  .tn-s-software .tn-sends { margin-top: 0; }
  .tn-s-ex .tn-flowsteps li { gap: 10px; padding: 8px 0; }
  .tn-s-ex .tn-flowsteps-t { gap: 1px; }
  .tn-s-ex .tn-flowsteps-t b { font-size: 15px; line-height: 20px; }
  .tn-s-ex .tn-flowsteps-t small { font-size: 13px; line-height: 17px; }
}

/* N22-71 / LG-04 sign-in-wrap: the agreement sits in the sticky foot right above the button it describes, so it is in view when tapped */
.tn-foot .tn-wrap { margin: 0; text-align: center; font-size: 13px; line-height: 18px; color: var(--tn-label-2, rgba(235,235,245,.66)); text-wrap: pretty; }
.tn-foot .tn-wrap a { color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }