/* Proteneo product page, Direction A (owner-approved 2026-10-06).
   One page that zooms out: one day in plain rows, five module chapters, the ProCal month beside one
   labelled day (Simple or Detailed), reports, privacy and sign-up. With script, a large phone sticks beside each chapter's steps
   on wide screens and outlines what each step describes; without script every step shows its own capture.
   Phones get swipe strips. Engineered 3 to 5px corners throughout.
   Dark or Light (WF-2026-10-13-15): the page arrives in the visitor's device look and follows it; the switch in the
   top bar overrides, and its choice is remembered on that device (the head script sets data-look before the first
   paint). Every phone picture is a whole iPhone screen, 1320 x 2868, with a Light twin that the light look shows;
   so do the drawn day, the wordmark and the footer's mark. */
@font-face { font-family: Inter; src: url("Inter-Variable-latin.woff2") format("woff2"); font-style: normal; font-weight: 100 900; font-display: swap; }
:root {
  color-scheme: dark;
  --bg: #08090b; --surface: #0f1114; --surface-2: #161920; --ink: #f3f4f5; --muted: #a3a8b2; --faint: #757f92; --line: #262a31;
  --brand: #2C68D9; --focus: #83aef2; --screen: #030405; --bezel: #33363e;
  /* Locked module identity colors (CLAUDE.md) for marks, bars and outlines. Module words are large text
     (at least 19px bold) so these meet WCAG AA at 3:1; the locked Wellness purple is 2.6:1 here, so
     Wellness words alone use a brighter violet of the same hue (owner ruling, Option A, 2026-10-06). */
  --weight: #2C68D9; --nutrition: #00A866; --treatment: #159FB2; --fitness: #C0383E; --wellness: #5E30CC; --procal: #b6c0cf;
  --wellness-text: #7148E8;
  /* The rest of the dark look, each named once so the light look can give its own: the Wellness tick in the day's
     key, the top bar, the chapter rail's track, rules, the Notify pill, the primary button's edge and hover, the
     shadows, the veil round a step's outline, the chapter glow, the reader card, the toggles' groove and bead, their
     unchosen words, and the wash under a held label. */
  --wellness-mark: #693DD1;
  --top-bg: rgba(8,9,11,.93); --track: #191c21; --rule: #3a3f48; --chip-off: #2c3038;
  --pill-line: #395e98; --pill-bg: #102038; --pill-ink: #d8e6fc; --primary-line: #5887df; --primary-hover: #245abe;
  --shadow: rgba(0,0,0,.55); --doc-shadow: rgba(0,0,0,.5); --veil: rgba(3,4,5,.4); --glow: 11%;
  --panel-rim: #1c1e24; --panel-top: #0d0e11; --panel-end: #0a0a0c; --panel-lip: rgba(255,255,255,.04); --panel-shadow: rgba(0,0,0,.5);
  --groove-rim: #1f2127; --groove: rgba(0,0,0,.5); --groove-in: rgba(0,0,0,.85); --groove-lip: rgba(255,255,255,.05);
  --bead-rim: #3b3f49; --bead: #181a1f; --bead-in: rgba(0,0,0,.55); --bead-lip: rgba(255,255,255,.06);
  --off: var(--faint); --off-hover: var(--muted); --wash: rgba(255,255,255,.045);
  --font: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --gutter: clamp(16px, 4vw, 40px);
  --max: 1200px;
  --r: 4px;
  /* The widest a phone can be and still stand whole in the window, under the top bar and over its caption
     (a picture is 1320 x 2868, so its width is .4603 of its height). --fit-card leaves room for a step's
     heading under its picture in the swipe strips. */
  --fit: calc((100svh - 162px) * .4603);
  --fit-card: calc((100svh - 300px) * .4603);
}
/* The light look (WF-2026-10-13-15): the app's own Light colours (src/theme/tokens.ts, the second value of each
   pair) for the page, its words and the five modules, each word at 4.5:1 or more on its ground; the rest is the
   website's own. One block, written twice: for a device in its light look (unless Dark was chosen here), and for
   Light chosen with the switch. web:check holds the two copies equal, and every ratio. The top bar is opaque, so
   its small words keep their ratio whatever passes under it, and the chapter glow is off: a tint under the
   app's own faint grey would take it below 4.5:1. */
@media (prefers-color-scheme: light) {
  :root:not([data-look="dark"]) {
    color-scheme: light;
    --bg: #F8F7F4; --surface: #FFFFFF; --surface-2: #EEECE7; --ink: #1A1A1A; --muted: #52525B; --faint: #71717A; --line: #DEDBD4;
    --brand: #1E4FB0; --focus: #1E4FB0; --screen: #FFFFFF; --bezel: #CDC9C0;
    --weight: #1E4FB0; --nutrition: #047857; --treatment: #0E6E7D; --fitness: #A8392E; --wellness: #5B21B6; --procal: #475569;
    --wellness-text: #5B21B6; --wellness-mark: #5B21B6;
    --top-bg: #F8F7F4; --track: #E4E1DA; --rule: #CFCBC3; --chip-off: #C9C6BF;
    --pill-line: #A9BDE6; --pill-bg: #E6EDFA; --pill-ink: #1E4FB0; --primary-line: #173F8F; --primary-hover: #173F8F;
    --shadow: rgba(28,30,38,.16); --doc-shadow: rgba(28,30,38,.18); --veil: rgba(248,247,244,.62); --glow: 0%;
    --panel-rim: #E2DFD8; --panel-top: #FFFFFF; --panel-end: #FCFBF9; --panel-lip: rgba(255,255,255,.7); --panel-shadow: rgba(28,30,38,.08);
    --groove-rim: #D9D6CE; --groove: #ECEAE5; --groove-in: rgba(0,0,0,.1); --groove-lip: rgba(255,255,255,.7);
    --bead-rim: #C6C2B9; --bead: #FFFFFF; --bead-in: rgba(0,0,0,.05); --bead-lip: rgba(255,255,255,.8);
    --off: var(--muted); --off-hover: var(--ink); --wash: rgba(0,0,0,.045);
  }
}
:root[data-look="light"] {
    color-scheme: light;
    --bg: #F8F7F4; --surface: #FFFFFF; --surface-2: #EEECE7; --ink: #1A1A1A; --muted: #52525B; --faint: #71717A; --line: #DEDBD4;
    --brand: #1E4FB0; --focus: #1E4FB0; --screen: #FFFFFF; --bezel: #CDC9C0;
    --weight: #1E4FB0; --nutrition: #047857; --treatment: #0E6E7D; --fitness: #A8392E; --wellness: #5B21B6; --procal: #475569;
    --wellness-text: #5B21B6; --wellness-mark: #5B21B6;
    --top-bg: #F8F7F4; --track: #E4E1DA; --rule: #CFCBC3; --chip-off: #C9C6BF;
    --pill-line: #A9BDE6; --pill-bg: #E6EDFA; --pill-ink: #1E4FB0; --primary-line: #173F8F; --primary-hover: #173F8F;
    --shadow: rgba(28,30,38,.16); --doc-shadow: rgba(28,30,38,.18); --veil: rgba(248,247,244,.62); --glow: 0%;
    --panel-rim: #E2DFD8; --panel-top: #FFFFFF; --panel-end: #FCFBF9; --panel-lip: rgba(255,255,255,.7); --panel-shadow: rgba(28,30,38,.08);
    --groove-rim: #D9D6CE; --groove: #ECEAE5; --groove-in: rgba(0,0,0,.1); --groove-lip: rgba(255,255,255,.7);
    --bead-rim: #C6C2B9; --bead: #FFFFFF; --bead-in: rgba(0,0,0,.05); --bead-lip: rgba(255,255,255,.8);
    --off: var(--muted); --off-hover: var(--ink); --wash: rgba(0,0,0,.045);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html:not(.js) [data-needs-js] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: 116px; }
body { margin: 0; padding-inline: var(--gutter); padding-block: 0; background: var(--bg); color: var(--ink); font: 400 1rem/1.6 var(--font); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
img { max-width: 100%; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 3px; }
h1, h2, h3, p, figure { margin: 0; }
h1, h2, h3 { text-wrap: balance; }
/* One column: a headline word too long for its line breaks rather than push the page sideways. (The
   chapter headlines also stop growing at 17vw, so with text enlarged on a phone their longest word,
   "Schedules,", still fits and this is the last resort.) */
@media (max-width: 899px) { h1, h2, h3 { overflow-wrap: break-word; } }
.skip-link { position: fixed; top: 12px; left: 12px; z-index: 50; transform: translateY(-160%); background: #fff; color: #000; padding: 12px; border-radius: var(--r); }
.skip-link:focus { transform: none; }
main:focus { outline: none; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Wordmark: the approved SVG, cropped to its artwork. */
.wordmark { position: relative; display: block; overflow: hidden; aspect-ratio: 4.1 / 1; }
.wordmark img { position: absolute; top: 50%; left: 50%; width: 178%; max-width: none; height: auto; transform: translate(-50%, -50%); }

/* Header and chapter rail. The bar's items keep to the right. The wordmark takes the room they leave, up to
   its own width, so it is the first to give way; when text is enlarged and the rest still cannot share a
   row, the last items go down to a second row. */
.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 30; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); background: var(--top-bg); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.top-in { max-width: var(--max); margin-inline: auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px 20px; min-height: 60px; padding-block: 4px; }
.top-wm { flex: 1 1 0; min-width: 0; max-width: 148px; margin-right: auto; container-type: inline-size; transition: opacity .25s, visibility .25s; }
@container (max-width: 39px) { .top-wm img { visibility: hidden; } }
.js .top-wm { opacity: 0; visibility: hidden; }
.js .top.show-mark .top-wm { opacity: 1; visibility: visible; }
.nav { display: flex; gap: 22px; font-size: .875rem; }
.nav a { color: var(--muted); text-decoration: none; }
.nav a:hover { color: var(--ink); }
.pill { border: 1px solid var(--pill-line); background: var(--pill-bg); color: var(--pill-ink); border-radius: var(--r); padding: 8px 16px; font-size: .875rem; font-weight: 600; text-decoration: none; white-space: nowrap; }
.pill:hover { border-color: var(--brand); }
.rail { max-width: var(--max); margin-inline: auto; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; padding-bottom: 8px; }
.seg { display: block; min-width: 0; text-decoration: none; color: var(--faint); font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase; }
.seg .bar { display: block; height: 3px; border-radius: 1px; overflow: hidden; background: color-mix(in srgb, var(--c) 22%, var(--track)); }
.seg .fill { display: block; height: 100%; background: var(--c); transform-origin: left center; transform: scaleX(var(--p, 0)); }
.seg .lbl { display: block; margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.seg.cur .lbl { color: var(--ink); }
@media (max-width: 640px) {
  .nav { display: none; }
  .top-wm { max-width: 116px; }
  .seg { padding-block: 6px; }
  .seg .lbl { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* Shared */
.mods { font-size: 1.1875rem; font-weight: 700; letter-spacing: .08em; word-spacing: 3px; text-transform: uppercase; text-wrap: balance; }
.mods .m { display: inline-block; color: var(--c); text-decoration: none; border-bottom: 1px solid transparent; }
.mods .sep { color: var(--line); }
/* The slashes show only at widths where the row fits on one line. Where it wraps, a slash would sit at a
   line's edge, so the words space out instead and the lines balance. */
@media (max-width: 719px) { .close .mods { word-spacing: 11px; } .close .mods .sep { display: none; } }
.btn { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 12px 20px; border-radius: var(--r); border: 1px solid var(--line); font-weight: 600; font-size: .9375rem; text-decoration: none; cursor: pointer; }
.btn.primary { background: var(--brand); border-color: var(--primary-line); color: #fff; }
.btn.primary:hover { background: var(--primary-hover); }
.btn.ghost { background: transparent; color: var(--ink); }
.btn.ghost:hover { border-color: var(--muted); }
.btn .arrow { color: var(--brand); }
.tag { color: var(--faint); white-space: nowrap; }
.screen { position: relative; border: 1px solid var(--bezel); border-radius: 5px; padding: 6px; background: var(--screen); box-shadow: 0 30px 80px var(--shadow); }
.shot { position: relative; aspect-ratio: 1320 / 2868; border-radius: 3px; overflow: hidden; background: var(--screen); }
.shot img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.cap { display: flex; justify-content: space-between; gap: 12px; margin-top: 12px; font-size: .8125rem; color: var(--muted); }
/* Outlines the part of a real capture that a step describes. The capture itself is never redrawn. */
.hl-box { position: absolute; left: calc(var(--x) / 1320 * 100%); top: calc(var(--y) / 2868 * 100%); width: calc(var(--w) / 1320 * 100%); height: calc(var(--h) / 2868 * 100%); border: 2px solid var(--c); border-radius: 3px; box-shadow: 0 0 0 9999px var(--veil); pointer-events: none; }
/* The iPhone picture (WF-2026-10-23-11): from the owner's iPhone, 1290 x 2796, its top rows (--cut, in the phone's
   pixels: the phone's own status bar) cropped off the published files, so it is 1290 x (2796 - cut). It keeps its own
   shape at the frame's width, from the frame's foot, so a thin blank strip stands where the status bar was, and its
   outline box is in its own pixels, measured from its foot. */
.beat-shot[style*="--cut:"] img, .st[style*="--cut:"] img { top: auto; height: auto; }
.beat-shot[style*="--cut:"] .hl-box, .st[style*="--cut:"] .hl-box { top: auto; left: calc(var(--x) / 1290 * 100%); width: calc(var(--w) / 1290 * 100%); bottom: calc((2796 - var(--cut) - var(--y) - var(--h)) * 1320 / 1290 / 2868 * 100%); height: calc(var(--h) * 1320 / 1290 / 2868 * 100%); }

/* The banner (WF-2026-10-29-29, -33, -38 to -40): Proteneo's rail and wordmark made physical, in place of the hero's
   big wordmark, with the hero's five module names as its own row under the word (WF-2026-10-29-39), the dark version
   in the dark look and the light version in the light look (WF-2026-10-29-42, -43). The wrapper holds
   the band and then the row, nothing between; it takes the page's full width (the gutters pulled back, as the top
   bar's are) and the band's ground, each look's own (the rules for the light look close this part), and keeps the
   margins the module gives the row inside it.
   hero-banner.js mounts the banner's module on the band (assets/proteneo-banner/) and hands it the row. Its first
   frame at rest, in the look in force, is the band's background, so it shows at once and stays without script; without WebGL2 the module's own posters stand in. The module fits its 3:1 frame to
   cover the band: 3:1 where the window is tall enough, at most a third of the window's height, and never wider than
   5:1, the widest band that still shows the whole wordmark. A browser without svh drops that height and keeps the
   plain 3:1 written first, so the band is never 0 px tall. */
.hero-top { display: flow-root; margin-inline: calc(var(--gutter) * -1); background: #000; }
.hero-band { height: 33.333vw; height: clamp(20vw, 33.333vw, 33.333svh); background: #000 url("proteneo-banner/1x/poster-rest.webp") 50% 50% / cover no-repeat; }
/* The names row. The module styles and places it as it mounts: under the word, centered on the whole mark (the rail's
   left edge to the O's right), 16 px or more inside the band's sides and in even lines where one line can't fit, inside
   the band where it is tall enough and on the wrapper's ground under it where it is not, in the look's own inks,
   its type grown with the reader's own text size. These rules give it the same look before the module
   runs and without script: small capitals in those inks, centered under the band on its ground, at the size the module
   gives it at the default text size. The module sets its own values inline, so they win. Its padding stays on until
   the module places the row, when the module sets all four sides itself, so the headline moves once, then. No rule
   here colors a name through --c, spaces the words or hides a slash, as the hero's old row's did. A name's focus ring
   takes the name's own ink, in both looks, as the banner's package measured it (4.97:1 or more in the dark version,
   5.2:1 or more in the light). Hovered, or lit with its row on the day screen (product.js), a name is underlined. */
.hero-names { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 0 .62em; font-size: clamp(.625rem, 1.78vw, 1.625rem); font-weight: 600; line-height: 1.3; letter-spacing: .11em; text-transform: uppercase; white-space: nowrap; }
.hero-band + .hero-names { padding: .4em var(--gutter) 1.1em; }
.hero-names a { text-decoration: none; border-bottom: 1px solid transparent; }
.hero-names a:hover, .hero-names a.lit { border-bottom-color: currentColor; }
.hero-names a:focus-visible { outline-color: currentColor; }
.hero-names [data-k="weight"] { color: #2f7bff; }
.hero-names [data-k="nutrition"] { color: #12c47e; }
.hero-names [data-k="treatment"] { color: #22b8d0; }
.hero-names [data-k="fitness"] { color: #dd5c68; }
.hero-names [data-k="wellness"] { color: #875dff; }
.hero-names i { color: #7a7e82; opacity: .6; font-style: normal; }
/* The banner in the light look (WF-2026-10-29-42, -43): the wrapper and the band take the module's light stage, the
   page's own light ground, so the banner blends into the page with no box, and the band's first frame is the light
   version's; the names take the module's light inks (LIGHT_INK, its Nutrition a shade darker than the app's) and its
   slashes' strength. Written twice, as the page's light look is: for a device in its light look (unless Dark was
   chosen here), and for Light chosen with the switch. web:check holds the two copies equal, and each value to the
   module's. Each version's first frame loads only in its own look. */
@media (prefers-color-scheme: light) {
  :root:not([data-look="dark"]) .hero-top { background: #F8F7F4; }
  :root:not([data-look="dark"]) .hero-band { background: #F8F7F4 url("proteneo-banner/light/1x/poster-rest.webp") 50% 50% / cover no-repeat; }
  :root:not([data-look="dark"]) .hero-names [data-k="weight"] { color: #1E4FB0; }
  :root:not([data-look="dark"]) .hero-names [data-k="nutrition"] { color: #047253; }
  :root:not([data-look="dark"]) .hero-names [data-k="treatment"] { color: #0E6E7D; }
  :root:not([data-look="dark"]) .hero-names [data-k="fitness"] { color: #A8392E; }
  :root:not([data-look="dark"]) .hero-names [data-k="wellness"] { color: #5B21B6; }
  :root:not([data-look="dark"]) .hero-names i { opacity: .8; }
}
:root[data-look="light"] .hero-top { background: #F8F7F4; }
:root[data-look="light"] .hero-band { background: #F8F7F4 url("proteneo-banner/light/1x/poster-rest.webp") 50% 50% / cover no-repeat; }
:root[data-look="light"] .hero-names [data-k="weight"] { color: #1E4FB0; }
:root[data-look="light"] .hero-names [data-k="nutrition"] { color: #047253; }
:root[data-look="light"] .hero-names [data-k="treatment"] { color: #0E6E7D; }
:root[data-look="light"] .hero-names [data-k="fitness"] { color: #A8392E; }
:root[data-look="light"] .hero-names [data-k="wellness"] { color: #5B21B6; }
:root[data-look="light"] .hero-names i { opacity: .8; }

/* Hero: one day in plain rows */
.hero { max-width: var(--max); margin-inline: auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); column-gap: clamp(32px, 6vw, 88px); align-items: start; padding-block: 26px 88px; }
.hero-copy, .hero-phone { min-width: 0; }
/* The phone sits above the banner's names row, whose own ground (z-index 1, from the module) would cut its soft shadow flat in the light look. */
.hero-phone { position: relative; z-index: 1; }
/* Beside a phone taller than the words, the words sit at its middle; when the words are the taller, the phone stays at the top. */
.hero-copy { align-self: center; }
/* The hero's own wordmark stays in its place for screen readers, out of sight: the band above draws it. */
.hero-wm { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.hero h1 { margin-top: 14px; font-size: clamp(2.6rem, 4.6vw, 4rem); line-height: 1.04; letter-spacing: -.05em; font-weight: 600; }
.hero h1 .hl { display: block; color: var(--brand); text-wrap: balance; }
.lede { max-width: 32em; margin-top: 16px; color: var(--muted); font-size: 1.125rem; line-height: 1.6; text-wrap: pretty; }
.cta { display: flex; flex-wrap: wrap; gap: 12px 16px; margin-top: 22px; }
.avail { margin-top: 14px; font-size: .8125rem; color: var(--faint); }
/* One column: the hero shows the five module rows of the same capture, between the line under the headline
   and the buttons; the whole phone is for the two-column layout. The cut is written in the picture's own
   pixels (--x --y --w --h), and the picture keeps its full size under it, so the row links stay on their rows. */
.hero-rows { display: none; width: min(100%, 520px); margin: 20px 0 0; }
.hero-rows .shot { border-radius: 5px; box-shadow: 0 0 0 1px var(--bezel); }
.shot.crop { aspect-ratio: var(--w) / var(--h); }
.crop .full { position: absolute; left: calc(var(--x) / var(--w) * -100%); top: calc(var(--y) / var(--h) * -100%); width: calc(1320 / var(--w) * 100%); height: calc(2868 / var(--h) * 100%); }
/* The hero's phone and ProCal's stand whole in the window, in the middle of their column. A caption wider
   than its phone stays on one line under it. */
.phone { --phone-w: min(100%, max(170px, var(--fit))); margin: 0; }
.phone .screen { width: var(--phone-w); margin-inline: auto; }
.phone .cap { width: fit-content; min-width: var(--phone-w); max-width: 100%; margin-inline: auto; }
.row-link { position: absolute; left: 6.1%; width: 87.8%; height: 5.23%; border: 2px solid transparent; border-radius: 3px; transition: border-color .15s, box-shadow .15s, background-color .15s; }
.row-link:hover, .row-link.lit { border-color: var(--c); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 26%, transparent); background: color-mix(in srgb, var(--c) 9%, transparent); }
.row-link:focus-visible { border-color: var(--c); background: color-mix(in srgb, var(--c) 9%, transparent); outline: 2px solid var(--focus); outline-offset: 2px; }
/* In the cut the rows reach its edge, so the focus ring is drawn on the row's own edge and none of it is cut off. */
.crop .row-link:focus-visible { outline-offset: -2px; }
@media (max-width: 899px) {
  .hero { grid-template-columns: minmax(0, 1fr); padding-block: 22px 64px; }
  .hero-phone { display: none; }
  .hero-rows { display: block; }
  .phone { --phone-w: min(100%, max(240px, var(--fit))); }
  .hero h1 { font-size: clamp(2.1rem, 9.4vw, 3.2rem); }
  .lede { font-size: 1rem; }
}

/* Chapters */
.chapter, .procal-sec { position: relative; isolation: isolate; max-width: var(--max); margin-inline: auto; border-top: 1px solid var(--line); }
.chapter { padding-block: clamp(64px, 9vw, 112px) 48px; }
.chapter::before, .procal-sec::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(55% 45% at 82% 28%, color-mix(in srgb, var(--c) var(--glow), transparent), transparent 72%); }
.ch-head { max-width: 760px; }
.eyebrow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-bottom: 18px; color: var(--ink); font-size: .8125rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.eyebrow .dot { width: 10px; height: 10px; border-radius: 2px; background: var(--c); }
.chapter h2, .procal-sec h2, .record h2, .privacy h2 { font-size: min(clamp(2.4rem, 5.2vw, 4.5rem), 17vw); line-height: 1.03; letter-spacing: -.055em; font-weight: 600; }
.chapter h2 em, .procal-sec h2 em, .record h2 em { font-style: normal; color: var(--ct, var(--brand)); }
/* A two-sentence headline breaks between its sentences before it breaks inside one. */
.chapter h2 .s { display: inline-block; max-width: 100%; }
.ch-lede { max-width: 36em; margin-top: 18px; color: var(--muted); font-size: 1.125rem; }
.ch-body { margin-top: 12px; }
.beats { display: grid; min-width: 0; }
/* Without script (or before it runs) each step shows its own capture beside its text. */
.beat { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) min(320px, 38%, max(220px, var(--fit))); column-gap: clamp(24px, 5vw, 64px); align-items: center; padding-block: 28px; transition: opacity .25s; }
.beat-shot { grid-column: 2; grid-row: 1; position: relative; aspect-ratio: 1320 / 2868; overflow: hidden; border: 1px solid color-mix(in srgb, var(--c) 40%, var(--bezel)); border-radius: 5px; background: var(--screen); }
.beat-shot img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.beat-tag { display: none; margin-top: 6px; color: var(--faint); font-size: .75rem; }
.beat-text { grid-column: 1; grid-row: 1; max-width: 560px; min-width: 0; padding-left: 18px; border-left: 2px solid transparent; transition: border-color .25s; }
.beat .beat-n { margin-bottom: 8px; color: var(--faint); font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; font-variant-numeric: tabular-nums; }
.beat h3 { margin-bottom: 10px; font-size: 1.625rem; line-height: 1.2; letter-spacing: -.03em; font-weight: 600; }
.beat p { max-width: 34em; color: var(--muted); font-size: 1.0625rem; }
.stage { display: none; }
.phone-sm { width: min(480px, 44vw, var(--fit)); }
.phone-sm .screen { border-color: color-mix(in srgb, var(--c) 45%, var(--bezel)); }
.swipe { display: none; margin-top: 6px; color: var(--faint); font-size: .8125rem; }
/* With script on wide screens: one large sticky phone per chapter shows the step being read. It is as tall
   as the window allows (--fit) and stands in the middle of its column, where the chapter's glow is. */
@media (min-width: 900px) {
  .js .ch-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(auto, 36%); column-gap: clamp(32px, 5vw, 80px); }
  .js .beats { padding-block: 10svh 26svh; }
  .js .beat { display: flex; min-height: 58svh; padding-block: 22px; opacity: .35; }
  .js .beat.on { opacity: 1; }
  .js .beat.on .beat-text { border-left-color: var(--c); }
  .js .beat-shot { position: absolute; width: 1px; height: 1px; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .js .stage { display: block; position: sticky; top: calc(env(safe-area-inset-top, 0px) + 100px); align-self: start; justify-self: center; padding-top: 10px; }
  .js .st { position: absolute; inset: 0; opacity: 0; transition: opacity .3s; }
  .js .st.on { opacity: 1; }
}
@media (max-width: 899px) {
  .beats { grid-auto-flow: column; grid-auto-columns: min(80%, 330px, max(200px, var(--fit-card))); gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; padding-bottom: 10px; }
  .beat { display: block; padding-block: 8px; scroll-snap-align: start; }
  .beat-tag { display: block; }
  .beat-text { margin-top: 12px; padding-left: 0; border-left: 0; }
  .beat h3 { font-size: 1.125rem; }
  .beat p { font-size: .9375rem; }
  .swipe { display: block; }
}

/* ProCal: the month, and one day read out in Simple or Detailed. The card takes the app's own look: its
   near-black panel with a hairline rim, and its toggle (a bead that glides in a recessed groove). */
.procal-sec { padding-block: clamp(64px, 9vw, 112px) 72px; }
/* The heading, then the labelled day; ProCal's three steps follow them in one row as a chapter's steps do, the month
   first (the owner's notes of 2026-10-25), with the sticky phone on wide screens and the swipe row on phones. */
.pc-top { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "copy" "reader"; row-gap: 28px; align-items: start; }
.pc-copy { grid-area: copy; min-width: 0; max-width: 760px; }
/* The same month in Simple lies over the month in Detailed and fades in when Simple is chosen. */
.view-img[data-view="simple"] { opacity: 0; transition: opacity .25s; }
.procal-sec[data-view="simple"] .view-img[data-view="simple"] { opacity: 1; }
.reader { grid-area: reader; min-width: 0; max-width: 680px; padding: 18px 20px 18px; border: 1px solid var(--panel-rim); border-radius: 6px; background: linear-gradient(180deg, var(--panel-top), var(--panel-end)); box-shadow: inset 0 1px 0 var(--panel-lip), 0 22px 60px var(--panel-shadow); container: reader / inline-size; }
.reader-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; }
.reader-title { color: var(--faint); font-size: .6875rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.reader-day { margin-top: 2px; color: var(--ink); font-size: 1.0625rem; font-weight: 700; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
/* The app's toggle (SegmentRail): a recessed groove, and a bead that glides to the chosen option. */
.views { position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; padding: 3px; border: 1px solid var(--groove-rim); border-radius: 6px; background: var(--groove); box-shadow: inset 0 2px 4px var(--groove-in), inset 0 -1px 0 var(--groove-lip); }
.views::before { content: ""; position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc((100% - 6px) / 2); border: 1px solid var(--bead-rim); border-radius: 4px; background: var(--bead); box-shadow: inset 0 1px 2px var(--bead-in), inset 0 -1px 0 var(--bead-lip); transition: transform .24s cubic-bezier(.2,.8,.2,1); }
.procal-sec[data-view="detailed"] .views::before { transform: translateX(100%); }
.views button { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 36px; padding: 6px 14px; border: 0; border-radius: 4px; background: none; color: var(--off); font: inherit; font-size: .875rem; font-weight: 700; cursor: pointer; transition: color .2s; }
.views button:hover { color: var(--off-hover); }
.views button[aria-pressed="true"] { color: var(--ink); }
.views svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* With text enlarged in a narrow card, Simple and Detailed no longer fit side by side (their two labels
   take 7.1rem; the icons and padding take 110px, and 12px are kept to spare): one goes under the other,
   and the bead moves down to the chosen one. */
@container reader (max-width: calc(7.1rem + 122px)) {
  .reader .views { grid-template-columns: 1fr; }
  .reader .views::before { right: 3px; bottom: auto; width: auto; height: calc((100% - 6px) / 2); }
  .procal-sec[data-view="detailed"] .reader .views::before { transform: translateY(100%); }
}
/* The Dark or Light switch in the top bar takes the same look. It sets the page's look; its bead sits on the look
   in force, the device's own until the switch is used. Narrow bars drop its two icons. The drawn day, the
   wordmark and the footer's mark each have a Light twin (.lt), shown only in the light look, as the browser shows
   each phone picture's Light twin through its <source>. */
.daytile svg.lt, .wordmark img.lt, .foot-brand img.lt { display: none; }
html[data-look="light"] .looks::before { transform: translateX(100%); }
html[data-look="light"] .daytile svg.lt, html[data-look="light"] .wordmark img.lt, html[data-look="light"] .foot-brand img.lt { display: block; }
html[data-look="light"] .daytile svg:not(.lt), html[data-look="light"] .wordmark img:not(.lt), html[data-look="light"] .foot-brand img:not(.lt) { display: none; }
@media (prefers-color-scheme: light) {
  html:not([data-look="dark"]) .looks::before { transform: translateX(100%); }
  html:not([data-look="dark"]) .daytile svg.lt, html:not([data-look="dark"]) .wordmark img.lt, html:not([data-look="dark"]) .foot-brand img.lt { display: block; }
  html:not([data-look="dark"]) .daytile svg:not(.lt), html:not([data-look="dark"]) .wordmark img:not(.lt), html:not([data-look="dark"]) .foot-brand img:not(.lt) { display: none; }
}
@media (max-width: 899px) {
  .looks button { padding: 6px 10px; }
  .looks svg { display: none; }
}
@media (max-width: 760px) { .js .top-in { column-gap: 10px; } }
@media (max-width: 380px) {
  .looks button { padding: 6px 7px; }
  .looks:not([hidden]) + .pill { padding-inline: 10px; }
}
/* With script the switch shows one view; without it both days show, one under the other. */
.js .procal-sec[data-view="detailed"] .dayfig[data-view="simple"], .js .procal-sec[data-view="simple"] .dayfig[data-view="detailed"], .js .procal-sec[data-view="simple"] .daynote { display: none; }
/* The labelled day. Narrow: the day, then its labels as a list. */
.dayfig { --tile: 176px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; margin-top: 18px; }
.daytile { order: -1; width: var(--tile); margin: 0 auto 8px; }
.daytile svg { display: block; width: 100%; height: auto; overflow: visible; }
.daytile .m, .daytile .num, .daytile .conn { transition: opacity .18s; }
.daytile .hl { opacity: 0; transition: opacity .18s; }
.daytile .hot { cursor: pointer; pointer-events: all; }
.dayfig.has-on .m:not(.is-on) { opacity: .26; }
.dayfig.has-on .num { opacity: .45; }
.dayfig.has-on .hl.is-on { opacity: 1; }
.lab { position: relative; display: block; width: 100%; padding: 6px 8px 6px 26px; border: 0; border-radius: 4px; background: none; color: var(--muted); font: inherit; font-size: .875rem; line-height: 1.45; text-align: left; cursor: pointer; transition: color .18s, background-color .18s, opacity .18s; }
.lab::before { content: ""; position: absolute; left: 8px; top: calc(6px + .42em); width: 9px; height: 9px; border-radius: 2px; background: var(--c); }
.lab b, .simple-text b { color: var(--ink); font-weight: 600; }
.dayfig.has-on .lab:not(.is-on) { opacity: .5; }
.lab.is-on { background: var(--wash); color: var(--ink); }
html:not(.js) .lab, html:not(.js) .ticks button { cursor: default; }
.daynote { margin-top: 12px; color: var(--faint); font-size: .8125rem; }
.dayfig.simple { align-items: center; }
.simple-text { color: var(--muted); font-size: .875rem; line-height: 1.45; }
.ticks { display: flex; flex-wrap: wrap; gap: 2px 6px; margin: 8px 0 0 -8px; padding: 0; list-style: none; }
.ticks button { display: inline-flex; align-items: center; gap: 7px; padding: 5px 8px; border: 0; border-radius: 4px; background: none; color: var(--ink); font: inherit; font-size: .875rem; font-weight: 600; cursor: pointer; transition: background-color .18s, opacity .18s; }
.ticks button::before { content: ""; width: 16px; height: 8px; border-radius: 3px; background: var(--c); }
.dayfig.has-on .ticks button:not(.is-on) { opacity: .5; }
.ticks button.is-on { background: var(--wash); }
/* Mid width: the day beside its labels. */
@container reader (min-width: 400px) {
  .dayfig.simple { grid-template-columns: var(--tile) minmax(0, 1fr); column-gap: 24px; }
  .dayfig.simple .daytile { order: 0; margin: 0; }
}
@container reader (min-width: 400px) and (max-width: 579.98px) {
  .dayfig:not(.simple) { grid-template-columns: var(--tile) minmax(0, 1fr); column-gap: 14px; align-items: start; }
  .dayfig:not(.simple) .daytile { order: 0; grid-column: 1; grid-row: 1 / span 5; margin: 6px 0 0; }
  .dayfig:not(.simple) .lab { grid-column: 2; }
}
/* Wide: each label sits beside the mark it names, with a short line to it. */
@container reader (min-width: 580px) {
  .dayfig { --tile: clamp(176px, 32cqw, 204px); }
  .dayfig.simple { column-gap: 28px; }
  .dayfig:not(.simple) { grid-template-columns: minmax(0, 1fr) var(--tile) minmax(0, 1fr); grid-template-rows: auto 1fr auto; column-gap: 22px; row-gap: 6px; }
  .dayfig:not(.simple) .daytile { order: 0; grid-column: 2; grid-row: 2 / 4; margin: 0; }
  .dayfig:not(.simple) .lab { padding: 6px 8px; }
  .dayfig:not(.simple) .lab::before { display: none; }
  .dayfig:not(.simple) .lab::after { content: ""; position: absolute; background: var(--c); border-radius: 1px; opacity: .85; }
  .dayfig:not(.simple) .lab-t { grid-column: 2 / 4; grid-row: 1; margin-bottom: 8px; padding-left: calc(var(--tile) * .299); }
  .dayfig:not(.simple) .lab-t::after { left: calc(var(--tile) * .299 + 14px); bottom: -8px; width: 2px; height: 8px; }
  .dayfig:not(.simple) .lab-l1 { grid-column: 1; grid-row: 2; align-self: center; text-align: right; }
  .dayfig:not(.simple) .lab-r1 { grid-column: 3; grid-row: 2; align-self: center; }
  .dayfig:not(.simple) .lab-l2 { grid-column: 1; grid-row: 3; align-self: end; text-align: right; }
  .dayfig:not(.simple) .lab-r2 { grid-column: 3; grid-row: 3; align-self: end; }
  .dayfig:not(.simple) .lab-l1::after, .dayfig:not(.simple) .lab-l2::after { right: -18px; width: 14px; height: 2px; }
  .dayfig:not(.simple) .lab-r1::after, .dayfig:not(.simple) .lab-r2::after { left: -18px; width: 14px; height: 2px; }
  .dayfig:not(.simple) .lab-l1::after, .dayfig:not(.simple) .lab-r1::after { top: calc(50% - 1px); }
  .dayfig:not(.simple) .lab-l2::after, .dayfig:not(.simple) .lab-r2::after { top: calc(6px + .68em); }
}
@media (max-width: 899px) {
  .reader { max-width: none; }
}

/* The founder's note, between ProCal and Reports */
.made { max-width: var(--max); margin-inline: auto; padding-block: clamp(56px, 8vw, 96px); border-top: 1px solid var(--line); }
.founder { max-width: 40em; padding-left: 20px; border-left: 2px solid var(--brand); }
.founder p { color: var(--muted); font-size: 1.0625rem; line-height: 1.6; }
.founder .founder-title { margin-bottom: 10px; color: var(--ink); font-size: clamp(1.375rem, 2.6vw, 1.75rem); line-height: 1.2; font-weight: 600; letter-spacing: -.03em; }

/* Reports */
.record { max-width: var(--max); margin-inline: auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 500px); column-gap: clamp(32px, 6vw, 80px); row-gap: 28px; align-items: start; padding-block: clamp(64px, 9vw, 112px) 72px; border-top: 1px solid var(--line); }
.rec-copy, .rec-side { min-width: 0; }
.record .body { max-width: 34em; margin-top: 18px; color: var(--muted); font-size: 1.0625rem; }
.presets { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.presets button { padding: 9px 14px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); color: var(--muted); font: inherit; font-size: .9375rem; cursor: pointer; }
.presets button:hover { color: var(--ink); }
.presets button[aria-pressed="true"] { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 14%, var(--surface)); color: var(--ink); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; }
.chips li { display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px; border: 1px solid var(--line); border-radius: var(--r); color: var(--faint); font-size: .875rem; transition: background .2s, color .2s, border-color .2s; }
.chips li::before { content: ""; width: 8px; height: 8px; border-radius: 1px; background: var(--chip-off); transition: background .2s; }
.chips li.on { border-color: color-mix(in srgb, var(--c) 60%, var(--line)); background: color-mix(in srgb, var(--c) 14%, transparent); color: var(--ink); }
.chips li.on::before { background: var(--c); }
.meta { margin-top: 12px; color: var(--muted); font-size: .9375rem; font-variant-numeric: tabular-nums; }
.formats { max-width: 34em; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); color: var(--muted); font-size: .9375rem; }
.text-link { color: var(--ink); text-underline-offset: 5px; text-decoration-color: var(--faint); }
.doc { display: block; overflow: hidden; border: 1px solid var(--rule); border-radius: var(--r); box-shadow: 0 30px 80px var(--doc-shadow); }
.doc img { display: block; width: 100%; height: auto; }
.rec-side .btn { margin-top: 16px; }
@media (max-width: 899px) { .record { grid-template-columns: minmax(0, 1fr); } }

/* Privacy */
.privacy { max-width: var(--max); margin-inline: auto; padding-block: clamp(64px, 9vw, 104px) 72px; border-top: 1px solid var(--line); }
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin-top: 36px; }
.facts article { min-width: 0; padding-top: 18px; border-top: 1px solid var(--rule); }
.facts h3 { margin-bottom: 10px; font-size: 1.25rem; letter-spacing: -.03em; font-weight: 600; }
.facts p { color: var(--muted); }
.text-link { display: inline-block; margin-top: 28px; font-size: .9375rem; }
@media (max-width: 760px) { .facts { grid-template-columns: minmax(0, 1fr); gap: 22px; } }

/* Close */
.close { max-width: 920px; margin-inline: auto; padding-block: clamp(72px, 10vw, 112px) 96px; border-top: 1px solid var(--line); text-align: center; }
.close-wm { width: min(100%, 520px); margin-inline: auto; }
.close .mods { margin-top: 18px; }
.close h2 { margin-top: 30px; font-size: clamp(1.75rem, 3.4vw, 2.6rem); line-height: 1.1; letter-spacing: -.04em; font-weight: 600; }
.close .cta { justify-content: center; }
/* Until the app is on the stores, the closing section says it is coming soon and shows no store badge
   (WF-2026-10-26-11); the badges and their rules come back from 57ac7e95 with the launch. */
.addr { max-width: 36em; margin: 18px auto 0; color: var(--muted); font-size: .9375rem; }
.addr code { padding: 2px 6px; border-radius: 3px; background: var(--surface-2); color: var(--ink); font-family: var(--mono); font-size: .875rem; user-select: all; overflow-wrap: anywhere; }
.copy { margin-left: 6px; padding: 4px 10px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); color: var(--ink); font: inherit; font-size: .8125rem; cursor: pointer; }
.copied { display: block; min-height: 1.4em; margin-top: 6px; color: var(--ink); font-size: .8125rem; }

/* Footer */
.foot { max-width: var(--max); margin-inline: auto; padding-block: 30px 40px; border-top: 1px solid var(--line); color: var(--faint); font-size: .8125rem; }
.foot-top, .foot-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; }
.foot-bottom { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); }
.foot-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); font-size: 1.125rem; font-weight: 600; letter-spacing: -.02em; text-decoration: none; }
.foot nav { display: flex; flex-wrap: wrap; gap: 18px; }
.marks { margin-top: 16px; font-size: .75rem; }
.foot a { text-underline-offset: 4px; }
.foot nav a { color: var(--muted); text-decoration: none; }
.foot nav a:hover { color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}
@media print {
  .top, .stage, .cta, .presets, .copy, .swipe, .views { display: none !important; }
  body { background: #fff; color: #000; }
  .beat, .js .beat { min-height: 0; opacity: 1; }
  .beat-shot, .js .beat-shot { position: relative; width: 200px; height: auto; clip-path: none; }
  .hl-box { display: none; }
  .chapter, .procal-sec, .record, .privacy { break-inside: avoid; padding-block: 24px; }
}