/* Overbar · "Zero to one". A street poster: flat Lime, Ink and chalk panels, the heaviest condensed capitals for
   headings only, Obie on a bar that runs off both edges. Square corners everywhere but the logo's bar; one chunky
   button. The only stylesheet: no inline styles anywhere (the CSP in _headers blocks them). */

@font-face { font-family: "Big Shoulders"; src: url("../fonts/big-shoulders-800.woff2") format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: "Public Sans"; src: url("../fonts/public-sans.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  color-scheme: dark;
  --lime: #b8f23d;
  --lime-hover: #c8ff52;
  --ink: #0a0a0f;
  --ink-hover: #24242e;
  --chalk: #f4f4f8;
  --night: #15151d;
  --night-2: #23232e;
  --night-3: #30303d;
  --chalk-2: #e4e4ec;     /* a step down from chalk: the moves' and plans' quiet fills on light panels */
  --bar: #e9e9f0;         /* the bar Obie hangs from; bar-body's band rows are painted this colour */
  --soft-on-dark: #b9b9c8;

  --display: "Big Shoulders", "Arial Narrow", "Helvetica Neue Condensed", sans-serif-condensed, Impact, sans-serif;
  --text: "Public Sans", "Helvetica Neue", Arial, sans-serif;
  --step-small: clamp(1rem, 0.96rem + 0.1vw, 1.0625rem);   /* 16–17px: the smallest words on the page */
  --step-body: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem); /* 17–19px: everything people read */
  --step-lead: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);
  --step-head: clamp(2.25rem, 1.2rem + 5vw, 5.5rem);
  --step-sub: clamp(2.25rem, 1.6rem + 1.9vw, 3.5rem);       /* the moves' names and goals */
  --step-display: clamp(3.5rem, 0.5rem + 16.5vw, 15.5rem);

  --margin: clamp(1rem, 1.8vw, 1.75rem);
  --gutter: clamp(0.75rem, 1.4vw, 1.5rem);
  --section: clamp(80px, 9vw, 168px);
  --head: 82px;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 12px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--ink); color: var(--chalk); font-family: var(--text); font-size: var(--step-body); line-height: 1.55; overflow-x: clip; overflow-wrap: break-word; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, ul, ol, dl, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-underline-offset: 0.18em; text-decoration-thickness: 0.08em; }
button, input { font: inherit; color: inherit; }
::selection { background: var(--lime); color: var(--ink); }
:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.nowrap { white-space: nowrap; }
.skip { position: absolute; left: var(--margin); top: 12px; z-index: 50; background: var(--ink); color: var(--chalk); padding: 12px 20px; font-weight: 700; clip-path: inset(50%); white-space: nowrap; }
.skip:focus { clip-path: none; outline-color: var(--ink); }
.shout { font-family: var(--display); font-weight: 800; text-transform: uppercase; letter-spacing: -0.005em; line-height: 0.88; text-wrap: balance; }
/* Capitals with accents (É, Ü, Ñ) need room above the cap height, so translated pages set the capitals a little
   looser. A word too long for a narrow screen may break rather than run off it. */
html:not(:lang(en)) .shout { line-height: 1.02; }
@media (max-width: 359px) { .nowrap { white-space: normal; } }
p { text-wrap: pretty; }
strong, b { font-weight: 700; }

/* panels: each section is one flat colour with one ink */
/* each panel also sets its button's colours, so a panel inside another (the Lime board on Ink) gets its own */
.on-lime { background: var(--lime); color: var(--ink); --button: var(--ink); --button-text: var(--chalk); --button-hover: var(--ink-hover); }
.on-ink { background: var(--ink); color: var(--chalk); --button: var(--lime); --button-text: var(--ink); --button-hover: var(--lime-hover); }
.on-chalk { background: var(--chalk); color: var(--ink); --button: var(--ink); --button-text: var(--chalk); --button-hover: var(--ink-hover); }
.on-night { background: var(--night); color: var(--chalk); --button: var(--lime); --button-text: var(--ink); --button-hover: var(--lime-hover); }

/* the button: square, chunky, in the panel's contrasting colour. It may wrap on a narrow screen rather than overflow. */
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 60px; padding: 10px 28px; border: 0; cursor: pointer; text-align: center;
  font-family: var(--text); font-weight: 700; font-size: var(--step-body); line-height: 1.2; text-decoration: none;
  transition: transform 140ms var(--ease-out), background-color 180ms ease, color 180ms ease; }
.button { background: var(--button, var(--lime)); color: var(--button-text, var(--ink)); }
.button:active { transform: scale(0.97); }
.button--small { min-height: 46px; padding: 6px 18px; font-size: var(--step-small); white-space: nowrap; }
@media (hover: hover) and (pointer: fine) { .button:hover { background: var(--button-hover, var(--lime-hover)); } }

/* the square +/− mark shared by every disclosure (the moves and the questions) */
.mark { position: relative; flex: none; width: 44px; height: 44px; transition: background-color 200ms ease, color 200ms ease; }
.mark::before, .mark::after { content: ""; position: absolute; left: 50%; top: 50%; width: 18px; height: 3px; margin: -1.5px 0 0 -9px; background: currentColor; transition: transform 260ms var(--ease-out); }
.mark::after { transform: rotate(90deg); }
details[open] > summary .mark::after { transform: rotate(0deg); }
details summary { list-style: none; cursor: pointer; }
details summary::-webkit-details-marker { display: none; }
details:not([open]) > :not(summary) { display: none; }   /* a closed answer takes no room in any engine */

/* ---------- the logo: OVERBAR hanging from its bar, like Obie on the cover (the owner's pick, Oct 27: under the word
   the bar read as a link's underline). Thick, round-ended and a little wider than the word; on hover the word pulls up
   toward it. The bar comes after the word in the markup and is drawn first with `order`. ---------- */
.logo { display: inline-grid; row-gap: 0.19em; padding: 8px 0.32em; margin-inline: -0.32em; font-family: var(--display); font-weight: 800; text-transform: uppercase;
  font-size: 1.875rem; line-height: 0.76; letter-spacing: 0.015em; text-decoration: none; color: inherit; }
.logo__word { display: block; padding-top: 0.08em; transition: transform 380ms var(--ease-out); }
.logo__bar { display: block; order: -1; height: 0.2em; margin-inline: -0.2em; border-radius: 999px; background: currentColor; }
.logo:focus-visible { outline-offset: 0; }
@media (hover: hover) and (pointer: fine) { .logo:hover .logo__word { transform: translateY(-0.09em); } }
@media (prefers-reduced-motion: reduce) { .logo__word { transition: none; } }

/* ---------- header: the logo, five links, one action ---------- */
.site-head { position: relative; z-index: 3; min-height: var(--head); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; padding: 10px var(--margin); }
.site-head .logo { justify-self: start; }
.site-nav ul { display: flex; gap: clamp(4px, 0.8vw, 14px); }
.site-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px; text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 3px; text-underline-offset: 8px; font-weight: 650; font-size: var(--step-body); transition: text-decoration-color 180ms ease; }
@media (hover: hover) and (pointer: fine) { .site-nav a:hover { text-decoration-color: currentColor; } }
.site-head .button { justify-self: end; }
@media (max-width: 1023px) { .site-head { grid-template-columns: 1fr auto; } .site-nav { display: none; } }

/* ---------- hero: the shouted headline, and Obie rising out of the bottom edge with its chin over a bar that runs
   off both sides of the screen. Obie is two pictures with the bar drawn between them (the body, the bar, the fists).
   The bar is sized in the stage's own units, never from the viewport, so its band always covers the band painted
   into the body picture and no Lime shows along it at any width or pixel ratio.
   Stage geometry (1238 x 1212): the bar's band is rows 626–730 (51.65%–60.31% of the height). The hero's bottom edge
   cuts the body at 82% of the height (0.80 of the width), above where the tee's slanted cut begins (86%). ---------- */
.hero { --W: clamp(280px, 38vw, 620px); position: relative; display: flex; flex-direction: column; overflow: clip; }
/* a full first screen only where the headline and Obie fill one; on a squarer screen the cover hugs them, so no empty
   band opens between the headline and the bar, and the next section shows below */
@media (min-width: 1280px) { .hero { min-height: calc(100svh - var(--head)); } }
.hero__body { position: relative; flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) var(--W) minmax(0, 1fr); grid-template-rows: auto 1fr auto; column-gap: clamp(20px, 2.4vw, 40px); padding: 0 var(--margin); }
.hero h1 { grid-column: 1 / -1; grid-row: 1; position: relative; z-index: 2; text-align: center; font-size: var(--step-display); }
.hero h1 .line { display: block; clip-path: inset(-0.5em -0.5em -0.04em -0.5em); padding-bottom: 0.04em; margin-bottom: -0.04em; }   /* a mask for the rise that leaves room for accents above */
.hero h1 .line > span { display: block; }
.stage-wrap { grid-column: 2; grid-row: 3; align-self: end; position: relative; z-index: 1; height: calc(var(--W) * 0.80); margin-top: calc(var(--W) * -0.12); }
.stage { position: absolute; left: 0; top: 0; width: 100%; aspect-ratio: 1238 / 1212; }
.stage img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
/* rows 626–730 of the body picture are painted the bar's colour; the drawn bar covers them with a source row and a
   half to spare on each side (51.45%–60.53%), so resampling never lets the painted band peek out */
.stage__bar { position: absolute; z-index: 1; left: -200vw; right: -200vw; top: 51.45%; height: 9.08%; background: var(--bar); }
.stage__fists { z-index: 2; }
/* the words stand on the bar, either side of Obie's head: their bottom is the bar's top plus a gap */
.hero__say, .hero__fact { grid-row: 3; align-self: end; position: relative; z-index: 2; margin-top: 28px; margin-bottom: calc(var(--W) * 0.296 + clamp(20px, 2vw, 32px)); }
.hero__say { grid-column: 1; justify-self: start; max-width: 30rem; }
.hero__say p { font-size: var(--step-body); font-weight: 550; max-width: 30ch; }
.hero__say .button { margin-top: 18px; }
@media (min-width: 1024px) and (max-width: 1279px) { .hero__say .button { padding-inline: 20px; white-space: nowrap; } }   /* one line in the narrow side column */
.hero__fact { grid-column: 3; justify-self: end; text-align: right; font-size: var(--step-body); font-weight: 650; max-width: 20ch; }
@media (max-width: 1023px) {
  /* stacked: the headline, the words and the button, then Obie on the bar at the bottom of the Lime */
  .hero { --W: min(100vw - 2 * var(--margin), 500px); min-height: 0; }
  .hero__body { display: flex; flex-direction: column; padding-bottom: 0; }
  .hero h1 { text-align: left; margin-top: 4px; }
  .hero__say, .hero__fact { margin: 0; text-align: left; align-self: flex-start; max-width: 34rem; }
  .hero__say { margin-top: 22px; }
  .hero__say p { max-width: 36ch; }
  .hero__fact { margin-top: 14px; max-width: 34ch; }
  .stage-wrap { align-self: center; width: var(--W); flex: none; margin-top: clamp(20px, 4vw, 40px); }
}
@media (min-width: 600px) and (max-width: 1023px) {
  /* a tablet: the sentence and the button on the left, the price on the right, both above Obie */
  .hero__body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto auto; column-gap: 24px; }
  .hero h1 { grid-column: 1 / -1; grid-row: 1; }
  .hero__say { grid-column: 1; grid-row: 2; }
  .hero__fact { grid-column: 2; grid-row: 2; align-self: end; justify-self: end; text-align: right; max-width: 22ch; }
  .stage-wrap { grid-column: 1 / -1; grid-row: 3; justify-self: center; }
}
@media (max-width: 599px) { .hero__say .button { width: 100%; } }

/* ---------- your date: the questions on Ink, the answer on a Lime board beside them. Lime is the app's reward
   colour; here it holds the visitor's own date. ---------- */
.date { padding: var(--section) var(--margin); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: start; }
.date h2 { grid-column: 1 / span 7; grid-row: 1; font-size: var(--step-head); }
.quiz { grid-column: 1 / span 7; grid-row: 2; margin-top: clamp(32px, 3.4vw, 52px); display: grid; gap: 30px; max-width: 720px; }
.quiz fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.quiz legend { padding: 0; margin-bottom: 12px; font-weight: 700; font-size: var(--step-body); }
.seg { display: flex; flex-wrap: wrap; gap: 6px; }
.seg label { position: relative; }
.seg input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.seg span { display: inline-flex; align-items: center; justify-content: center; min-width: 52px; min-height: 52px; padding: 6px 18px; background: var(--night-2); font-weight: 650; font-size: var(--step-body); line-height: 1.2; text-align: center; transition: background-color 150ms ease, color 150ms ease; }
.seg input:checked + span { background: var(--lime); color: var(--ink); }
.seg input:focus-visible + span { outline: 3px solid var(--chalk); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .seg input:not(:checked):hover + span { background: var(--night-3); } }
/* the hang clock: start it, hang, stop it when you let go, and it picks your answer */
.clock { margin-top: 14px; }
.clock[hidden] { display: none; }
.clock__button { display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 6px 18px 6px 14px; border: 0; cursor: pointer; background: var(--chalk); color: var(--ink); font-weight: 700; font-size: var(--step-body); line-height: 1.2; text-align: left; transition: background-color 150ms ease, transform 140ms var(--ease-out); }
.clock__button:active { transform: scale(0.97); }
.clock__icon { flex: none; width: 24px; height: 24px; }
.clock__time { font-family: var(--display); font-weight: 800; font-size: 1.75rem; line-height: 1; font-variant-numeric: tabular-nums; }
.clock__time:empty { display: none; }
.clock[data-running] .clock__button { background: var(--lime); }
.clock__button:focus-visible { outline: 3px solid var(--chalk); outline-offset: 2px; }
.clock__tip { margin-top: 10px; color: var(--soft-on-dark); max-width: 46ch; }
.clock:not([data-running]) .clock__tip { display: none; }
@media (hover: hover) and (pointer: fine) { .clock:not([data-running]) .clock__button:hover { background: #ffffff; } }
.quiz__note { color: var(--soft-on-dark); max-width: 56ch; }
/* the board: the date, then what it rests on, then the way to your own */
.board { grid-column: 8 / span 5; grid-row: 1 / span 2; align-self: start; position: sticky; top: 24px; padding: clamp(24px, 2.6vw, 40px); container-type: inline-size; }
.board__lead { font-weight: 700; font-size: var(--step-lead); line-height: 1.25; }
.board__when { margin-top: 10px; font-size: clamp(3.25rem, 17cqi, 7.5rem); line-height: 0.86; overflow-wrap: anywhere; }
.board__range { margin-top: 20px; font-weight: 650; }
.board__faster:empty { display: none; }
.board__faster, .board__start, .board__honest { margin-top: 10px; }
.board .button { margin-top: 26px; }
@media (prefers-reduced-motion: no-preference) {
  .board__when.is-new { animation: when-in 520ms var(--ease-out); }
}
@keyframes when-in { from { opacity: 0.25; transform: translateY(0.12em); } to { opacity: 1; transform: none; } }
@media (max-width: 959px) {
  .date { display: block; }
  .board { position: relative; top: 0; margin-top: 44px; }
  .board .button { width: 100%; }
}

/* ---------- how it works: four lines that step across ---------- */
.steps { padding: var(--section) 0; }
.steps ol { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 56px; padding-inline: var(--margin); }
.step { grid-column: var(--from) / -1; }
.step:nth-child(1) { --from: 1; }
.step:nth-child(2) { --from: 3; }
.step:nth-child(3) { --from: 5; }
.step:nth-child(4) { --from: 7; }
.step h3 { font-size: var(--step-head); }
.step p { margin-top: 14px; max-width: 40ch; }
@media (max-width: 859px) {
  .steps ol { display: block; }
  .step { margin-left: calc((var(--from) - 1) * 3vw); }
  .step + .step { margin-top: 44px; }
}

/* ---------- the plan: four moves, left to right, each a step up from the last. Each shows Obie doing it, says which
   of the app's six stages it covers and what you do, and ends on the goal that moves you on, as one big figure. The
   doses and studies wait behind a disclosure. ---------- */
.path { padding: var(--section) var(--margin); }
.path__head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 28px; }
.path__head h2 { grid-column: 1 / span 9; font-size: var(--step-head); }
.path__lead { grid-column: 1 / span 6; font-size: var(--step-lead); font-weight: 550; line-height: 1.35; max-width: 34ch; }
.path__how { grid-column: 8 / span 5; align-self: start; max-width: 44ch; padding-top: 0.3em; }
.moves { margin-top: clamp(48px, 6vw, 96px); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 56px; align-items: start; }
/* a staircase: each move starts a step higher than the one before, so the bars in the pictures climb */
.move { --rise: clamp(24px, 3vw, 48px); display: flex; flex-direction: column; }
.move:nth-child(1) { margin-top: calc(var(--rise) * 3); }
.move:nth-child(2) { margin-top: calc(var(--rise) * 2); }
.move:nth-child(3) { margin-top: var(--rise); }
.move__pic { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; background: var(--night-2); }
.move__name { margin-top: 22px; font-size: var(--step-sub); }
.move__stages { margin-top: 10px; font-weight: 700; }
.move__what { margin-top: 12px; max-width: 40ch; }
.move__goal { margin-top: 20px; display: flex; align-items: center; gap: 14px; padding: 12px 16px; background: var(--lime); color: var(--ink); }
.move__fig { flex: none; font-family: var(--display); font-weight: 800; font-size: var(--step-sub); line-height: 0.9; font-variant-numeric: tabular-nums; }
.move__to { font-weight: 650; line-height: 1.3; }
.move__more { margin-top: 6px; background: var(--night-2); }
.move__more summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 60px; padding: 8px 8px 8px 16px; font-weight: 700; }
.move__more summary .mark { background: var(--night-3); color: var(--chalk); }
.move__more[open] summary .mark { background: var(--lime); color: var(--ink); }
.move__more summary:focus-visible { outline: 3px solid var(--lime); outline-offset: -3px; }
.move__more ul { padding: 10px 16px 20px; }
.move__more li + li { margin-top: 18px; }
.move__more li > * { display: block; }
.move__more .dose { margin-top: 2px; font-weight: 650; font-variant-numeric: tabular-nums; color: var(--lime); }
.move__more .why { margin-top: 4px; line-height: 1.5; }
.move__more a { font-weight: 700; text-decoration: underline; }
@media (hover: hover) and (pointer: fine) { .move__more summary:hover .mark { background: #3c3c4a; } .move__more[open] summary:hover .mark { background: var(--lime-hover); } }
.path__note { margin-top: clamp(40px, 5vw, 72px); max-width: 60ch; font-weight: 550; }
@media (max-width: 1179px) {
  .moves { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 72px; }
  .move:nth-child(n) { margin-top: 0; }
  .move:nth-child(odd) { margin-top: var(--rise); }
}
@media (max-width: 859px) {
  .path__head h2, .path__lead, .path__how { grid-column: 1 / -1; }
  .path__head { row-gap: 18px; }
}
@media (max-width: 639px) {
  /* a phone: the picture beside the name, then the words full width */
  .moves { grid-template-columns: minmax(0, 1fr); row-gap: 56px; }
  .move:nth-child(n) { margin-top: 0; }
  .move { display: grid; grid-template-columns: 40% minmax(0, 1fr); column-gap: 18px; align-content: start; }
  .move__pic { grid-column: 1; grid-row: 1 / span 2; }
  .move__name { grid-column: 2; grid-row: 1; align-self: end; margin-top: 0; }
  .move__stages { grid-column: 2; grid-row: 2; align-self: start; }
  .move__what, .move__goal, .move__more { grid-column: 1 / -1; }
  .move__what { margin-top: 18px; }
}

/* ---------- Obie: the words, then the picker, beside the big figure; the caption on a Lime bar under both. The
   picker is radios: the CSS shows the figure of the checked one (one line per look below), so it works without
   JavaScript and reads as a radio group. Without :has(), the starter look shows. ---------- */
.obie { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto 1fr; column-gap: var(--gutter); padding: var(--section) var(--margin) 0; }
.obie__head { grid-column: 7 / span 6; grid-row: 1; }
.obie__head h2 { font-size: var(--step-head); }
.obie__head p { margin-top: 20px; max-width: 42ch; }
.obie__stage { grid-column: 1 / span 6; grid-row: 1 / span 2; align-self: end; display: grid; justify-items: center; padding-bottom: 36px; }
.obie__look { display: none; width: min(100%, 470px); }
.obie__look img { width: 100%; }
.obie__look figcaption { margin: 12px auto 0; max-width: 40ch; text-align: center; font-weight: 600; text-wrap: balance; }
.obie__look:first-child { display: block; }
@supports selector(:has(*)) {
  .obie__look:first-child { display: none; }
  .obie:has(#pick-starter:checked) #look-starter, .obie:has(#pick-hoodie:checked) #look-hoodie,
  .obie:has(#pick-varsity:checked) #look-varsity, .obie:has(#pick-tank:checked) #look-tank,
  .obie:has(#pick-beanie:checked) #look-beanie, .obie:has(#pick-sixpack:checked) #look-sixpack { display: block; }
}
.obie__picker { grid-column: 7 / span 6; grid-row: 2; align-self: start; margin: 36px 0 0; padding: 0 0 clamp(40px, 5vw, 72px); border: 0; min-width: 0; }
.obie__picker legend { padding: 0; margin-bottom: 12px; font-weight: 700; font-size: var(--step-body); }
.looks { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 6px; max-width: 720px; }
.looks label { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 6px 12px; background: var(--chalk-2); cursor: pointer; transition: background-color 150ms ease; }
.looks input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.looks img { width: auto; height: 112px; transition: transform 300ms var(--ease-out); }
.looks span { font-weight: 650; line-height: 1.2; text-align: center; }
.looks label:has(input:checked) { background: var(--lime); }
.looks label:has(input:focus-visible) { outline: 3px solid var(--ink); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
  .looks label:hover { background: #d9d9e3; }
  .looks label:has(input:checked):hover { background: var(--lime); }
  .looks label:hover img { transform: translateY(-4px); }
}
@media (prefers-reduced-motion: no-preference) {
  .obie__look img { animation: look-in 460ms var(--ease-out); }
}
@keyframes look-in { from { opacity: 0.4; transform: translateY(10px) scale(0.98); } to { opacity: 1; transform: none; } }
.obie__bar { grid-column: 1 / -1; grid-row: 3; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: baseline; margin-inline: calc(var(--margin) * -1); padding: 32px var(--margin); }
.obie__bar p { grid-column: 5 / span 8; font-size: var(--step-lead); font-weight: 600; line-height: 1.3; }
.obie__bar p.shout { grid-column: 1 / span 4; font-size: var(--step-head); font-weight: 800; line-height: 0.88; }
@media (max-width: 859px) {
  .obie__bar { display: block; } .obie__bar p + p { margin-top: 12px; } .obie__picker { margin-top: 28px; }
  .obie__head { grid-column: 1 / -1; }   /* on a tablet the heading runs across both columns, Obie and the picker share the row under it */
  .obie__stage { grid-row: 2; }
}
@media (max-width: 639px) {
  .obie { display: block; }
  .obie__stage { padding-bottom: 0; }
  .obie__look { width: min(62vw, 300px); margin-top: 28px; }   /* small enough that Obie and the picker share a phone screen */
  .obie__picker { margin-top: 28px; padding-bottom: 48px; }
  .looks { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .looks img { height: 72px; }
  .obie__bar { display: block; }
  .obie__bar p + p { margin-top: 12px; }
}

/* ---------- pricing: two plans, two fields ---------- */
.pricing__head { padding: var(--section) var(--margin) 32px; }
.pricing__head h2 { font-size: var(--step-head); }
.pricing__head p { margin-top: 16px; max-width: 64ch; }
.pricing__head a { font-weight: 700; text-decoration-color: rgba(244, 244, 248, 0.5); }
.plans { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); }
.plan { min-height: 70svh; padding: 40px var(--margin) 40px; display: flex; flex-direction: column; }
.plan--weekly { grid-column: 1 / span 5; }
.plan--yearly { grid-column: 6 / span 7; }
.plan h3 { font-size: var(--step-head); }
.plan__for { margin-top: 14px; font-size: var(--step-lead); line-height: 1.3; max-width: 26ch; font-weight: 550; }
.plan__inc { margin-top: 22px; max-width: 46ch; }
.plan__foot { margin-top: auto; padding-top: 40px; display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.plan__price { display: flex; align-items: baseline; flex-wrap: wrap; column-gap: 0.15em; }
.plan__price b { font-size: var(--step-display); line-height: 0.8; font-weight: 800; font-variant-numeric: tabular-nums; }
.plan__price span { font-family: var(--text); text-transform: none; font-size: var(--step-body); font-weight: 650; letter-spacing: 0; white-space: nowrap; }
.plan--weekly .plan__price b { font-size: var(--step-head); }
@media (max-width: 859px) {
  .plans { display: flex; flex-direction: column; }
  .plan { min-height: 0; padding: 32px var(--margin) 40px; }
  .plan--yearly { order: -1; }
  .plan__foot .button { width: 100%; }
}

/* ---------- questions: the heading beside the list, one dark row per question at a size you read, and the same
   square + as the moves, Lime when open ---------- */
.faq { padding: var(--section) var(--margin); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: start; }
.faq__head { grid-column: 1 / span 5; position: sticky; top: 32px; }
.faq__head h2 { font-size: var(--step-head); }
.faq__head p { margin-top: 20px; max-width: 30ch; }
.faq__head a { font-weight: 700; text-decoration-color: rgba(244, 244, 248, 0.5); }
.faq__obie { margin-top: 36px; width: min(220px, 70%); }
.faq__list { grid-column: 6 / span 7; display: grid; gap: 6px; }
.qa { background: var(--night); transition: background-color 180ms ease; }
.qa summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 76px; padding: 16px 16px 16px 24px; font-size: var(--step-lead); font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; }
.qa summary:focus-visible { outline: 3px solid var(--lime); outline-offset: -3px; }
.qa__q { flex: 1 1 auto; min-width: 0; text-wrap: pretty; }
.qa .mark { background: var(--night-2); color: var(--chalk); }
.qa[open] .mark { background: var(--lime); color: var(--ink); }
.qa__a { padding: 0 24px 28px; max-width: calc(64ch + 48px); }
.qa__a a { font-weight: 700; text-decoration-color: rgba(244, 244, 248, 0.5); }
@media (hover: hover) and (pointer: fine) {
  .qa:hover { background: #1b1b25; }
  .qa summary:hover .mark { background: var(--night-3); }
  .qa[open] summary:hover .mark { background: var(--lime-hover); }
}
@media (max-width: 959px) {
  .faq__head, .faq__list { grid-column: 1 / -1; }
  .faq__head { position: static; margin-bottom: 28px; }
  .faq__obie { display: none; }
  .qa summary { min-height: 68px; padding: 14px 12px 14px 18px; gap: 16px; }
  .qa__a { padding: 0 18px 24px; }
}

/* ---------- footer: the logo at full size and Obie on the bar under it, on Lime; the menu half on Ink ---------- */
.site-foot { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); min-height: 100svh; }
.foot__pic { grid-column: 1 / span 6; position: relative; overflow: clip; display: flex; flex-direction: column; align-items: center; padding: 40px var(--margin) 0; }
.logo--big { position: relative; z-index: 2; margin-block: auto; font-size: clamp(4.5rem, 9.9vw, 11rem); }   /* centred in the Lime above Obie, however tall the menu beside makes the panel */   /* the word and its bar fill about 82% of the panel */
.foot__stage { position: relative; z-index: 1; flex: none; width: 92%; margin-top: 4%; aspect-ratio: 1238 / 994; }   /* the stage cut at 82% of its height, like the hero */
.foot__menu { grid-column: 7 / span 6; padding: 40px var(--margin) 28px; display: flex; flex-direction: column; }
/* the footer menu: the text face, sentence case, one link a line, each a full thumb tall */
.menu ul { display: grid; justify-items: start; gap: 2px; }
.menu a { display: inline-flex; align-items: center; min-height: 52px; font-weight: 650; font-size: var(--step-lead); line-height: 1.2; letter-spacing: -0.015em; text-decoration: none; transition: transform 300ms var(--ease-out), color 180ms ease; }
.menu a:focus-visible { outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .menu a:hover { transform: translateX(8px); color: var(--lime); } }
.foot__blocks { margin-top: 56px; display: grid; grid-template-columns: 1fr 1fr; gap: 28px; font-size: var(--step-body); }
.foot__blocks h2 { font-size: var(--step-small); font-weight: 700; color: var(--soft-on-dark); margin-bottom: 10px; }
.foot__blocks li + li { margin-top: 2px; }
.foot__blocks a { display: inline-block; padding: 10px 0; text-underline-offset: 0.2em; text-decoration-color: rgba(244, 244, 248, 0.45); }
.foot__blocks li:not(:has(a)) { padding: 6px 0; }
/* the language list (website/tools/i18n.py writes it when the site has more than one language) */
.langs { margin-top: 40px; display: flex; align-items: flex-start; gap: 12px; }
.langs svg { flex: none; width: 24px; height: 24px; margin-top: 10px; color: var(--soft-on-dark); }
.langs ul { display: flex; flex-wrap: wrap; column-gap: 18px; }
.langs a { display: inline-block; padding: 10px 0; text-decoration: none; }
.langs a[aria-current] { font-weight: 700; text-decoration: underline; text-underline-offset: 0.2em; }
@media (hover: hover) and (pointer: fine) { .langs a:hover { text-decoration: underline; } }
.foot__legal { margin-top: auto; padding-top: 40px; font-size: var(--step-small); color: var(--soft-on-dark); }
.foot__legal p { max-width: 70ch; }
.foot__legal p + p { margin-top: 6px; }
@media (max-width: 859px) {
  .site-foot { display: block; min-height: 0; }
  .foot__pic { padding-top: 32px; }
  .logo--big { font-size: clamp(4rem, 20vw, 9rem); }
  .foot__stage { width: min(100%, 460px); margin-top: 6%; }
  .foot__menu { padding: 32px var(--margin); }
  .menu ul { gap: 10px; }
  .foot__blocks { grid-template-columns: 1fr; }
}

/* ---------- reading pages (privacy, terms, and later guides): a calm column. .doc-hero is the Lime title panel,
   .doc the Ink body with an "On this page" list on wide screens; headings in the text face. ---------- */
.doc-hero { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: end; padding: clamp(32px, 5vw, 80px) var(--margin) clamp(40px, 5vw, 72px); }
.doc-hero__text { grid-column: 1 / span 8; }
.doc-hero h1 { font-size: var(--step-display); }
.doc-hero p { margin-top: 18px; font-weight: 600; max-width: 60ch; }
.doc-hero a { font-weight: 700; }
.doc-hero__pic { grid-column: 10 / span 3; justify-self: end; width: min(100%, 260px); margin-bottom: calc(clamp(40px, 5vw, 72px) * -1); }   /* Obie stands on the panel's bottom edge */
@media (max-width: 639px) { .doc-hero { display: block; } .doc-hero__pic { display: none; } }
.doc { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); padding: clamp(48px, 6vw, 96px) var(--margin) clamp(64px, 8vw, 140px); }
.doc__toc { grid-column: 1 / span 3; position: sticky; top: 24px; align-self: start; }
.doc__toc h2 { font-size: var(--step-small); font-weight: 700; color: var(--soft-on-dark); margin-bottom: 8px; }
.doc__toc a { display: inline-block; padding: 5px 0; min-height: 44px; font-size: var(--step-body); font-weight: 500; text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .doc__toc a:hover { text-decoration: underline; } }
.doc__body { grid-column: 5 / span 8; max-width: 66ch; }
.doc__body section + section { margin-top: 48px; }
.doc__body h2 { font-family: var(--text); font-weight: 750; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); line-height: 1.2; letter-spacing: -0.015em; margin-bottom: 14px; text-wrap: balance; }
.doc__body h3 { font-weight: 700; font-size: var(--step-lead); line-height: 1.3; margin: 28px 0 10px; }
.doc__body p + p, .doc__body p + ul, .doc__body ul + p { margin-top: 14px; }
.doc__body ul li { position: relative; padding-left: 28px; }
.doc__body ul li + li { margin-top: 10px; }
.doc__body ul li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 12px; height: 12px; background: var(--lime); }
.doc__body a { font-weight: 700; }
@media (max-width: 859px) { .doc__toc { display: none; } .doc__body { grid-column: 1 / -1; } }

/* ---------- not found ---------- */
.lost { min-height: calc(80svh - var(--head)); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: end; padding: clamp(32px, 5vw, 80px) var(--margin) var(--section); }
.lost__text { grid-column: 1 / span 9; }
.lost h1 { font-size: var(--step-display); }
.lost p { margin-top: 20px; font-size: var(--step-lead); font-weight: 550; line-height: 1.35; max-width: 34ch; }
.lost__actions { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; }
.lost__actions a:not(.button) { font-weight: 700; padding: 10px 0; }
.lost img { grid-column: 10 / span 3; width: min(100%, 300px); justify-self: end; }
@media (max-width: 859px) { .lost { display: block; } .lost img { width: min(60%, 260px); margin-top: 40px; } }

/* ---------- motion: the masked headline, Obie rising onto the bar as it runs out to both edges, then entrances once.
   site.js hides only what starts below the first screen, so nothing stays hidden if the script never runs. ---------- */
@media (prefers-reduced-motion: no-preference) {
  .hero h1 .line > span { animation: line-up 900ms var(--ease-out) 140ms both; }
  .hero h1 .line + .line > span { animation-delay: 250ms; }
  .hero .stage { animation: obie-rise 1100ms var(--ease-expo) 240ms both; }
  .hero__say, .hero__fact { animation: fade-up 600ms var(--ease-out) 640ms both; }
  .hero__fact { animation-delay: 720ms; }
  .lost__text > *, .doc-hero__text > * { animation: fade-up 600ms var(--ease-out) both; }
  .lost__text > :nth-child(2), .doc-hero__text > :nth-child(2) { animation-delay: 90ms; }
  .lost__text > :nth-child(3) { animation-delay: 180ms; }
  .lost img, .doc-hero__pic { animation: obie-rise 1000ms var(--ease-expo) 200ms both; }
  [data-reveal] { transition: opacity 700ms var(--ease-out), transform 900ms var(--ease-expo); }
  [data-reveal].is-waiting { opacity: 0; transform: translateY(26px); }
}
@keyframes line-up { from { transform: translateY(104%); } to { transform: none; } }
@keyframes obie-rise { from { transform: translateY(16%); } to { transform: none; } }
@keyframes fade-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ==========================================================================================================
   Guides, tools and comparisons (docs/growth/seo.md §3.1, the wave-1 pages). Everything below is for those pages:
   the long-title hero, tables, notes, figures, the call to action, the full calculator's extra fields and the dead
   hang timer. They're built on .doc-hero and .doc above.
   ========================================================================================================== */
.doc-hero__eyebrow { margin-bottom: 18px; font-weight: 700; font-size: var(--step-body); }
.doc-hero__eyebrow a { text-decoration-thickness: 2px; }
.doc-hero--long h1 { font-size: clamp(2.75rem, 1.35rem + 5.2vw, 7rem); line-height: 0.9; }
.doc-hero p.doc-hero__answer { margin-top: 22px; font-size: var(--step-lead); font-weight: 550; line-height: 1.4; max-width: 44ch; }
.doc-hero p.doc-hero__by { margin-top: 18px; font-size: var(--step-small); font-weight: 600; }
.doc-hero--long .doc-hero__pic { width: min(100%, 320px); }
/* a page with tables: the prose keeps its 66-character column, tables and figures may use the whole width */
.doc--wide .doc__body { max-width: none; }
.doc--wide .doc__body :is(p, ul, ol, h2, h3, .note, .qa-list, .cta) { max-width: 66ch; }
.doc__body ol { counter-reset: step; }
.doc__body ol > li { position: relative; padding-left: 44px; counter-increment: step; }
.doc__body ol > li + li { margin-top: 12px; }
.doc__body ol > li::before { content: counter(step); position: absolute; left: 0; top: -0.05em; width: 30px; font-family: var(--display); font-weight: 800; font-size: 1.75rem; line-height: 1; color: var(--lime); }
.doc__body p + ol, .doc__body ol + p, .doc__body p + .table, .doc__body .table + p, .doc__body p + figure, .doc__body figure + p, .doc__body ul + figure, .doc__body .note + p, .doc__body ul + ul { margin-top: 18px; }
.doc__body h3 + ul, .doc__body h3 + ol { margin-top: 10px; }
/* what comes before the first heading: the disclosure on a comparison, "In short", a line about the method */
.doc__intro { margin-bottom: 48px; }
.doc__intro > .note:first-child { margin-top: 0; }
.doc__intro > * + p { margin-top: 18px; }
.doc__body :is(.fig, .figs, .moves4, .table) + :is(p, ul, ol, .note, h3) { margin-top: 24px; }
.doc__body em { font-style: italic; }
/* tables: a quiet grid on Ink; on a phone each row becomes a card (the roles in the HTML keep it a table) */
.table { margin-top: 18px; }
.table table { width: 100%; border-collapse: collapse; font-size: var(--step-body); line-height: 1.45; }
.table th, .table td { text-align: left; vertical-align: top; padding: 12px 14px; border-bottom: 1px solid var(--night-3); }
.table thead th { background: var(--night-2); font-weight: 700; border-bottom: 0; }
.table tbody th { font-weight: 700; }
@media (max-width: 639px) {
  /* tables of three or more columns; two columns fit a phone as they are */
  .table--cards table, .table--cards thead, .table--cards tbody, .table--cards tr, .table--cards th, .table--cards td { display: block; }
  .table--cards thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .table--cards tr { padding: 14px 0; border-bottom: 1px solid var(--night-3); }
  .table--cards th, .table--cards td { padding: 2px 0; border: 0; }
  .table--cards td[data-label]::before { content: attr(data-label); display: block; margin-top: 8px; font-weight: 700; color: var(--soft-on-dark); }
  .table:not(.table--cards) th, .table:not(.table--cards) td { padding: 10px 10px 10px 0; }
}
/* a note beside the text: the disclosure on comparisons, the safety line on pages that teach exercises */
.note { margin-top: 22px; padding: 16px 20px; border-left: 6px solid var(--lime); background: var(--night); }
.note p + p { margin-top: 10px; }
/* figures: Obie (the Mascot Lab's renders) and the app's screens */
.fig { margin-top: 22px; }
.fig img { width: min(100%, 360px); }
.fig figcaption { margin-top: 10px; max-width: 46ch; color: var(--soft-on-dark); font-size: var(--step-small); line-height: 1.45; }
.fig--screen img { width: min(100%, 300px); border: 6px solid var(--night-3); background: var(--night-3); }
.figs { margin-top: 22px; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 22px var(--gutter); max-width: 860px; }
.figs .fig { margin-top: 0; }
.figs .fig img { width: 100%; }
.figs .fig--screen img { width: min(100%, 260px); }
.moves4 { margin-top: 24px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gutter); max-width: 860px; }
.moves4 img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; background: var(--night-2); }
.moves4 figcaption { margin-top: 8px; font-weight: 700; }
@media (max-width: 639px) { .moves4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* questions in a reading page: the same rows as the home page's, at the text's size */
.doc__body .qa-list { display: grid; gap: 6px; margin-top: 8px; }
.doc__body .qa summary { min-height: 68px; padding: 14px 12px 14px 20px; font-size: var(--step-body); font-weight: 700; letter-spacing: 0; }
.doc__body .qa__a { padding: 0 20px 22px; }
/* the one call to action, on Lime at the end of the text */
.doc__body .cta { margin-top: 56px; padding: clamp(24px, 3vw, 40px); }
.doc__body .cta h2 { margin-bottom: 10px; }
.cta .button { margin-top: 22px; }
@media (max-width: 599px) { .cta .button { width: 100%; } }
.keep li a { display: inline-block; padding: 4px 0; min-height: 44px; }
.keep li + li { margin-top: 2px; }

/* the full calculator: more of the quiz's questions, and number fields for age, height and weight */
.calc-page .date { padding-top: clamp(56px, 6vw, 96px); }
.calc-page .date h2 { font-size: clamp(2.25rem, 1.4rem + 3.4vw, 4.5rem); }
/* the main questions, the answer beside them (after them on a phone), then the rest of the quiz */
.calc-page .board { grid-row: 1 / span 3; }
.quiz--more { grid-column: 1 / span 7; grid-row: 3; margin-top: 30px; padding-top: 30px; border-top: 1px solid var(--night-3); }
.quiz__more-title { font-weight: 750; font-size: var(--step-lead); line-height: 1.25; }
@media (max-width: 959px) { .quiz--more { margin-top: 44px; } }
.quiz .hint { margin: -4px 0 12px; color: var(--soft-on-dark); max-width: 52ch; }
.numbers { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: end; }
.numbers[hidden] { display: none; }
.numbers label { display: grid; gap: 6px; font-weight: 650; }
.numbers input { width: 7.5em; min-height: 52px; padding: 8px 12px; border: 2px solid #7a7a8c; background: var(--night-2); color: var(--chalk); font-size: var(--step-body); font-variant-numeric: tabular-nums; }
.numbers input:focus-visible { outline: 3px solid var(--chalk); outline-offset: 2px; border-color: var(--chalk); }
.units { margin-bottom: 14px; }
.quiz__note a { font-weight: 700; }
.board__note:empty { display: none; }
.board__note { margin-top: 10px; font-weight: 650; }

/* the dead hang timer: one big button, the seconds as large as the screen allows, the answer on a Lime board */
.hangtest { padding: clamp(56px, 6vw, 96px) var(--margin) var(--section); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: start; }
.hangtest__clock { grid-column: 1 / span 7; }
.hangtest h2 { font-size: clamp(2.25rem, 1.4rem + 3.4vw, 4.5rem); }
.hangtest__how { margin-top: 18px; max-width: 52ch; }
.hangtest__how li + li { margin-top: 6px; }
.hang__readout { margin-top: 28px; font-family: var(--display); font-weight: 800; font-size: clamp(6rem, 2rem + 18vw, 16rem); line-height: 0.85; font-variant-numeric: tabular-nums; letter-spacing: 0.01em; }
.hang__readout[data-state="counting"] { color: var(--lime); }
.hang__status { margin-top: 14px; min-height: 1.6em; font-weight: 650; font-size: var(--step-lead); }
.hang__button { margin-top: 22px; min-width: min(100%, 320px); min-height: 76px; font-size: var(--step-lead); }
.hang__button[hidden], .hang__readout[hidden], .hang__status[hidden] { display: none; }
.hang__nojs { margin-top: 22px; max-width: 52ch; color: var(--soft-on-dark); }
.hangtest .board { grid-column: 8 / span 5; grid-row: auto; position: sticky; top: 24px; }
.hang__result-title { font-size: clamp(2rem, 1.4rem + 2.4vw, 3.25rem); }
.hang__result-text { margin-top: 12px; }
.hang__first:empty { display: none; }
.hang__first { margin-top: 12px; font-weight: 650; }
.hangtest .board .button { margin-top: 22px; }
@media (max-width: 959px) {
  .hangtest { display: block; }
  .hangtest .board { position: relative; top: 0; margin-top: 40px; }
  .hang__button, .hangtest .board .button { width: 100%; }
}