/* The Second Brain page (/second-brain). Only that page links this file (see ApplicationHelper#site_stylesheet_paths).
   A port of docs/second-brain/scroll-v1/assets/scroll.css. Every rule is scoped to .sb, the page root.
   The font is the site's Archivo (toolkit.css).

   Classes on .sb:
   - no class        the stacked layout: no JavaScript, or the script did not start. Plates sit in their sections.
   - .js             set by the inline script before the body is parsed: the pinned layout (the hero only, until .ready)
   - .ready          set by second_brain/scroll.js when it runs
   - .stacked        set by the script when the screen is too short or wide to pin (for example a phone in landscape)

   Layouts by screen:
   - phone (below 768 px wide): one column, at most 460 px wide
   - tablet (768 px and wider): the same column, at most 600 px wide, on a white page
   - desktop (1024 px and wider, landscape; the media query below "Desktop"): a two-column stage, text left and art
     right. scroll.js uses the same media query (DESK_QUERY). */

body.bp-page { background: #eeedf4; }

.sb {
  --ink: #11111b;
  --muted: #5a5868;
  --ultra: #2519eb;
  --ultra-deep: #1a10c4;
  --coral: #ff6b57;
  --paper: #ffffff;
  --rule: #e4e2ec;
  color-scheme: light;
  max-width: 460px;
  margin: 0 auto;
  background: var(--paper);
  container-type: inline-size;
  color: var(--ink);
  font-family: Archivo, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.sb * { box-sizing: border-box; }
.sb ::selection { background: #ded8ff; color: #121024; }

/* ---- Scroll block: one tall container, one sticky stage ---- */
.sb .scrolly { position: relative; background: var(--paper); }
/* Before the script sets the scroll height (the stage height plus 2.35 stage heights of scroll, TIMELINE in scroll.js),
   give the block about that height. Sections 5-7 then start below the screen, so their lazy pictures do not load
   at page start. The script's inline height replaces this value; the stacked layout sets height: auto. */
.sb.js:not(.stacked) .scrolly { height: 335vh; height: 335svh; }
/* Scroll snap (scroll.js sets html.sb-snap while the stage pins, not on the reduced-motion or Save-Data path). One
   marker per rest state stops every gesture at the next state. The last marker covers sections 5-7, the FAQ and the
   footer; it is taller than the screen, so the browser scrolls freely inside it. */
html.sb-snap { scroll-snap-type: y mandatory; }
.sb .snap { position: absolute; left: 0; top: 0; width: 1px; height: 1px; pointer-events: none; scroll-snap-align: start; }
.sb .snap-rest { scroll-snap-stop: always; }
.sb .snap-after { top: 100%; height: 0; }
.sb .stage {
  /* W = art width (the column on a phone), H = art height (9:16), tu = text unit (1% of W, times the fit scale ts).
     Each text block has its own u = tu * g (scroll.js grows the text on tall screens) and uh = tu * gh (headline). */
  --W: 100cqw;
  --H: calc(var(--W) * 16 / 9);
  --ts: 1;
  --tu: calc(var(--W) / 100 * var(--ts));
  --u: var(--tu);
  --crop: 0px;
  --pad: calc(var(--W) * 0.06);
  --u1: calc(var(--W) / 100);         /* the hero's type unit: it does not shrink on short screens */
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background: var(--paper);
}
@media (max-aspect-ratio: 10/16) { .sb .stage { --ts: 1; } }
@media (min-aspect-ratio: 10/16) { .sb .stage { --ts: 0.9; --crop: calc(var(--H) * 0.06); } }

.sb .view { position: absolute; inset: 0; }
.sb .art {
  position: absolute;
  left: 0;
  width: 100%;
  height: var(--H);
  bottom: calc(-1 * var(--crop));
  /* camera push-in (scroll.js): scale about the bottom-center of the art */
  transform-origin: 50% 100%;
  will-change: transform;
}
.sb .art > .plate { transform-origin: 50% 100%; }   /* still path: each plate carries its own camera */
.sb .state .copy { will-change: transform; }
.sb .art > * {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.sb .plate { display: block; opacity: 0; }
.sb .plate img { display: block; width: 100%; height: 100%; }
.sb .plate.on { opacity: 1; }
.sb .frames { visibility: hidden; }

/* Before the script runs, the plates are still in their sections. The hero plate takes the place of the art;
   the other plates stay out of the layout, so their lazy images do not load until the script asks for them. */
.sb.js:not(.stacked) .state > .plate {
  position: absolute;
  left: 0;
  width: 100%;
  height: var(--H);
  bottom: calc(-1 * var(--crop));
}
.sb.js:not(.stacked) :is(.s2, .s3, .s4) > .plate { display: none; }

/* ---- Text states ---- */
.sb .state {
  position: absolute;
  inset: 0;
  opacity: 0;
  will-change: opacity, transform;
}
.sb .state.on { opacity: 1; }
/* Before the script runs only the hero (.on) is visible and clickable. With .ready, .live marks the visible state. */
.sb .state:not(.on) { pointer-events: none; }
.sb.ready .state { pointer-events: none; user-select: none; -webkit-user-select: none; }
.sb.ready .state.live { pointer-events: auto; user-select: text; -webkit-user-select: text; }
.sb .sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.sb .state .copy {
  --u: calc(var(--tu) * var(--g, 1));
  --uh: calc(var(--tu) * var(--gh, 1));
  position: absolute;
  z-index: 1;
  left: var(--pad);
  right: var(--pad);
  /* bottom edge of the copy sits on an anchor line measured from the art top */
  bottom: calc(var(--H) * (1 - var(--anchor)) - var(--crop));
}
.sb .state p, .sb .state h1, .sb .state h2 { margin: 0; }
.sb .body { text-wrap: pretty; }             /* no one-word last line where the browser supports it */
.sb .state em { font-style: normal; color: var(--ultra); }

.sb .hd {
  font-weight: 850;
  letter-spacing: -0.052em;
  line-height: 0.95;
  font-kerning: normal;
  text-wrap: balance;               /* no one-word last line; the <br> breaks of the design stay as they are */
}

/* Hero: the text starts at the top of the screen; scroll.js places the art in the space below the button. */
.sb .s1 { --anchor: 0.387; }                  /* stacked layout only: plate 01's art starts at 38.7% of its height */
.sb .s1 .copy { top: calc(16px + env(safe-area-inset-top, 0px)); bottom: auto; }
/* Before the script is ready (phone and tablet): place the hero art as scroll.js will (see the hero in frame()), so a
   tall screen does not first show a wide gap under the button. CSS cannot divide lengths, so the art scale is 1 or,
   on a tall screen, the largest scale that keeps the chips (1.0853, from KEEP[0]). The copy height is an estimate:
   77 type units plus the 56 px button. */
.sb.js:not(.ready):not(.stacked) .s1 {
  --t0: calc(16px + env(safe-area-inset-top, 0px));
  --hh: calc(var(--u1) * 77 + 56px);
  --hs: 1;
  --hx: 0px;
  --hc: calc(var(--H) * 0.61255 * var(--hs));      /* the art content (from 38.7% of plate 01 down), scaled */
  --hleft: calc(100svh - var(--t0) - var(--hh) - 6px - var(--hc));
  --hdown: clamp(0px, var(--hleft), max(0px, 8svh - var(--t0)));
}
@media (max-aspect-ratio: 100/214) { .sb.js:not(.ready):not(.stacked) .s1 { --hs: 1.0853; --hx: calc(var(--W) * -0.0287); } }
.sb.js:not(.ready):not(.stacked) .s1 .copy { translate: 0 var(--hdown); }
.sb.js:not(.ready):not(.stacked) .s1 > .plate {
  transform-origin: 50% 100%;
  scale: var(--hs);
  translate: var(--hx) calc(var(--t0) + var(--hdown) + var(--hh) + 6px - 100svh - var(--crop) + var(--hc));
}

.sb .s1 .logo {
  font-size: calc(var(--u1) * 5.4);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1;
  margin-bottom: calc(var(--u1) * 3.4);
}
.sb .s1 .hd {
  font-size: calc(var(--u1) * 9.8);
  font-weight: 900;
  letter-spacing: -0.05em;
  line-height: 1;
  margin-left: -0.03em;
}
.sb .s1 .sub {
  margin-top: calc(var(--u1) * 3.3);
  font-size: calc(var(--u1) * 4.05);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.2;
}
.sb .s1 .body {
  margin-top: calc(var(--u1) * 1.9);
  font-size: calc(var(--u1) * 3.92);
  line-height: 1.25;
  letter-spacing: -0.012em;
}
.sb .s1 .cta { margin-top: calc(var(--u1) * 4.2); height: 56px; border-radius: 6px; font-size: calc(var(--u1) * 5.1); }
.sb .cta {
  margin-top: calc(var(--u) * 4.2);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.7em;
  height: 56px;
  border-radius: 6px;
  background: var(--ultra);
  border: 2px solid var(--ultra);
  color: #fff;
  font-size: calc(var(--u) * 5.1);
  font-weight: 700;
  letter-spacing: -0.02em;
  text-decoration: none;
  box-shadow: 0 8px 20px rgba(17, 17, 27, 0.16);
  transition: background-color .15s, transform .15s, box-shadow .15s;
}
.sb .cta:hover { background: var(--ultra-deep); border-color: var(--ultra-deep); transform: translateY(-2px); box-shadow: 0 14px 28px rgba(17, 17, 27, 0.24); }
.sb .cta:focus-visible { outline: 4px solid var(--coral); outline-offset: 4px; }
/* The button and offer line of states 2-4: desktop only (see the desktop block). On a phone or tablet the art needs
   the room: a button would push it past its KEEP limits. */
.sb .act { display: none; }
.sb .act .offer { margin-top: 14px; font-size: 15px; line-height: 1.3; letter-spacing: -0.005em; color: var(--muted); }

.sb .s2 { --anchor: 0.398; }
.sb .s2 .hd { font-size: calc(var(--uh) * 8.95); margin-left: -0.04em; }
.sb .s2 .body {
  margin-top: calc(var(--u) * 3.4);
  font-size: calc(var(--u) * 3.7);
  line-height: 1.3;
  letter-spacing: -0.012em;
}

.sb .s3 { --anchor: 0.457; }
.sb .s3 .hd { font-size: calc(var(--uh) * 9.3); margin-left: -0.04em; }
.sb .s3 .body {
  margin-top: calc(var(--u) * 4.2);
  font-size: calc(var(--u) * 3.95);
  line-height: 1.28;
  letter-spacing: -0.012em;
  max-width: calc(var(--u) * 44);
}

.sb .s4 { --anchor: 0.368; }
.sb .s4 .hd { font-size: calc(var(--uh) * 7.7); margin-left: -0.04em; }
.sb .s4 .body {
  margin-top: calc(var(--u) * 3);
  font-size: calc(var(--u) * 3.7);
  line-height: 1.3;
  letter-spacing: -0.012em;
}
.sb .s4 .foot .caption { font-size: calc(var(--u) * 3.45); }

.sb .note {
  font-size: calc(var(--u) * 2.35);
  color: var(--muted);                /* 7:1 on white; the notes are small text (WCAG AA needs 4.5:1) */
  letter-spacing: 0;
  line-height: 1.2;
  text-shadow: 0 0 6px #fff, 0 0 2px #fff;
}
.sb .foot {
  position: absolute;
  left: 0;
  right: 0;
  bottom: max(8px, calc(var(--H) * 0.012 - var(--crop)));
  text-align: center;
  padding-top: calc(var(--u) * 3);
  will-change: transform;           /* scroll.js moves it to sit just below the art */
}
.sb .foot::before {
  /* keeps the caption readable if a short screen pushes the desk under it */
  content: "";
  position: absolute;
  inset: -8px 0 -12px;
  background: linear-gradient(to top, #fff 55%, rgba(255, 255, 255, 0));
  z-index: -1;
}
.sb .foot .caption {
  font-size: calc(var(--u) * 3.85);
  font-weight: 760;
  letter-spacing: -0.03em;
  line-height: 1.2;
  margin-bottom: calc(var(--u) * 1.4);
}

/* ---- Stacked layout: no pinning, no frames. The default markup, and the script's choice for short or wide
   screens. Each plate sits in its section, so the page reads like the static design: the text sits on the white
   top of its plate. ---- */
:is(.sb:not(.js), .sb.stacked) .scrolly { height: auto !important; }
:is(.sb:not(.js), .sb.stacked) .stage { position: static; height: auto; overflow: visible; --ts: 1 !important; --crop: 0px !important; }
:is(.sb:not(.js), .sb.stacked) .view { display: none; }
:is(.sb:not(.js), .sb.stacked) .state {
  position: relative;
  inset: auto;
  opacity: 1 !important;
  transform: none !important;
  pointer-events: auto;
  user-select: text;
  -webkit-user-select: text;
}
:is(.sb:not(.js), .sb.stacked) .state .copy {
  position: relative;
  z-index: 1;
  left: auto;
  right: auto;
  top: auto;
  bottom: auto;
  margin: 0 var(--pad);
  /* the copy bottom sits on the same anchor line as in the pinned layout; long copy pushes the plate down */
  min-height: calc(var(--H) * var(--anchor));
  padding-top: calc(var(--pad) * 1.5);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  transform: none !important;
}
:is(.sb:not(.js), .sb.stacked) .state > .plate {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  margin-top: calc(var(--H) * var(--anchor) * -1);
  opacity: 1 !important;
  transform: none !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}
:is(.sb:not(.js), .sb.stacked) .state > .plate img { height: auto; }
:is(.sb:not(.js), .sb.stacked) .s3 > .plate { margin-bottom: calc(var(--H) * -0.0725); }   /* plate 03: white rows below the desk */
:is(.sb:not(.js), .sb.stacked) .s4 > .plate { margin-bottom: calc(var(--H) * -0.0907); }   /* plate 04: white rows below the desk */
:is(.sb:not(.js), .sb.stacked) .foot {
  position: relative;
  z-index: 1;
  left: auto;
  right: auto;
  bottom: auto;
  padding: calc(var(--u) * 2) var(--pad) calc(var(--u) * 8);
  transform: none !important;
}
:is(.sb:not(.js), .sb.stacked) .foot::before { display: none; }


/* ---- Sections 5-7 and the FAQ: normal flow, same type system (1u = 1% of the column width) ----
   Each picture has white rows at its top where the approved design had text. The copy block is at least --a tall
   and sits at its bottom; the picture moves up by --a under it. So the text lands where the design put it, and
   text that is taller than planned pushes the picture down instead of covering the art. */
.sb .panel { --u: 1cqw; --pad: 6cqw; position: relative; background: var(--paper); padding-bottom: calc(var(--u) * 12); }
.sb .panel p, .sb .panel h2, .sb .panel h3, .sb .panel ul { margin: 0; }
.sb .panel em { font-style: normal; color: var(--ultra); }
.sb .panel .copy {
  position: relative;
  z-index: 1;
  margin: 0 var(--pad);
  min-height: var(--a);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.sb .panel-art { display: block; margin-top: calc(-1 * var(--a)); }
.sb .panel-art img { display: block; width: 100%; height: auto; }
.sb .panel .body { margin-top: calc(var(--u) * 3); font-size: calc(var(--u) * 3.7); line-height: 1.3; letter-spacing: -0.012em; }
.sb .panel .note { margin-top: calc(var(--u) * 2); text-align: center; text-shadow: none; }

.sb .p5 { --a: 35.4cqw; padding-top: calc(var(--u) * 6); }       /* design: headline bottom at y 359 of 1024 */
.sb .p5 .hd { font-size: calc(var(--u) * 9.2); margin-left: -0.04em; }
.sb .panel .jobs { list-style: none; padding: 0; margin: calc(var(--u) * 2) var(--pad) 0; border-bottom: 1px solid var(--rule); }
.sb .jobs li { padding: calc(var(--u) * 3.6) 0 calc(var(--u) * 3.8); border-top: 1px solid var(--rule); }
.sb .jobs h3 { font-size: calc(var(--u) * 4.7); font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; color: var(--ultra); }
.sb .jobs p { margin-top: calc(var(--u) * 1.2); font-size: calc(var(--u) * 3.8); line-height: 1.3; letter-spacing: -0.012em; }
.sb .panel .fine { margin: calc(var(--u) * 4) var(--pad) 0; font-size: calc(var(--u) * 3); line-height: 1.35; color: var(--muted); }

.sb .p6 { --a: 37.1cqw; padding-top: calc(var(--u) * 8); }       /* design: body bottom at y 380 of 1024 */
.sb .p6 .hd { font-size: calc(var(--u) * 6.8); margin-left: -0.03em; }

/* Section 7: headline, price, terms and the product line on the white top of the art, then the button. */
.sb .p7 { --a: 54.7cqw; padding-top: calc(var(--u) * 8); padding-bottom: calc(var(--u) * 10); }   /* design: text ends at y 560 */
.sb .p7 .hd { font-size: calc(var(--u) * 10.5); margin-left: -0.04em; }
.sb .p7 .price {
  margin-top: calc(var(--u) * 3);
  font-size: calc(var(--u) * 10.5);
  font-weight: 850;
  letter-spacing: -0.052em;
  line-height: 1;
  color: var(--ultra);
  margin-left: -0.03em;
}
.sb .p7 .sub { margin-top: calc(var(--u) * 3.2); font-size: calc(var(--u) * 3.95); font-weight: 700; letter-spacing: -0.03em; line-height: 1.2; }
.sb .p7 .terms { margin-top: calc(var(--u) * 1.2); font-size: calc(var(--u) * 3.7); line-height: 1.3; letter-spacing: -0.012em; text-wrap: pretty; }
.sb .p7 .body { margin-top: calc(var(--u) * 2.6); color: var(--muted); }
.sb .p7 .action { margin: calc(var(--u) * 2) var(--pad) 0; }
.sb .p7 .action .cta { margin-top: 0; }

/* FAQ: collapsed items with thin dividers, in the page's type. */
.sb .faq { padding: calc(var(--u) * 4) var(--pad) calc(var(--u) * 14); }
.sb .faq .hd { font-size: calc(var(--u) * 7.6); margin-left: -0.03em; }
.sb .faq-list { margin-top: calc(var(--u) * 6); border-bottom: 1px solid var(--rule); }
.sb .faq details { border-top: 1px solid var(--rule); }
.sb .faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--u) * 4);
  min-height: 48px;
  padding: calc(var(--u) * 4) 0;
  font-size: calc(var(--u) * 4.3);
  font-weight: 750;
  letter-spacing: -0.025em;
  line-height: 1.2;
  list-style: none;
  cursor: pointer;
  text-wrap: pretty;
}
.sb .faq summary::-webkit-details-marker { display: none; }
.sb .faq summary::after {
  content: "";
  flex-shrink: 0;
  width: calc(var(--u) * 3.6);
  height: calc(var(--u) * 3.6);
  background: var(--ultra);
  clip-path: polygon(45% 0, 55% 0, 55% 45%, 100% 45%, 100% 55%, 55% 55%, 55% 100%, 45% 100%, 45% 55%, 0 55%, 0 45%, 45% 45%);
  transition: transform .15s;
}
.sb .faq details[open] summary::after { transform: rotate(45deg); }
.sb .faq summary:hover { color: var(--ultra); }
.sb .faq summary:focus-visible { outline: 3px solid var(--coral); outline-offset: 2px; }
.sb .faq details p {
  padding-bottom: calc(var(--u) * 5);
  font-size: calc(var(--u) * 3.8);
  line-height: 1.4;
  letter-spacing: -0.012em;
  color: var(--muted);
  text-wrap: pretty;
}

/* The site footer continues the page column on this page. */
body.bp-page .tk-footer { max-width: 460px; margin: 0 auto; padding: 32px 0 24px; background: #fff; }
body.bp-page .tk-footer .tk-shell { width: auto; margin: 0 6%; }
body.bp-page .tk-footer__main, body.bp-page .tk-footer__bottom { flex-direction: column; gap: 20px; }
body.bp-page .tk-footer__bottom { gap: 6px; margin-top: 32px; }
body.bp-page .tk-footer .tk-wordmark { font-size: 26px; }
body.bp-page .tk-footer__main p { margin-top: 10px; }
body.bp-page .tk-footer nav { gap: 12px 24px; }
body.bp-page .tk-footer nav a { display: inline-block; padding: 6px 0; }


/* ---- Tablet (768 px and wider): the phone layout in a column of at most 600 px, on a white page. The art's
   side edges fade into the page, so the cut pages at the plate edges do not end in a hard line. ---- */
@media (min-width: 768px) {
  body.bp-page { background: var(--paper, #fff); }
  /* The column is also limited by the screen height, so that the hero art (under about 77 type units of text and the
     button) fits on the screen: at 768x1024 the column is about 540 px. */
  .sb {
    max-width: clamp(460px, (100vh - 78px) / 1.75, 600px);
    max-width: clamp(460px, (100svh - 78px) / 1.75, 600px);
    --edge: linear-gradient(to right, transparent, #000 16px, #000 calc(100% - 16px), transparent);
  }
  .sb .view, .sb.js:not(.stacked) .state > .plate, .sb .panel-art { -webkit-mask-image: var(--edge); mask-image: var(--edge); }
  body.bp-page .tk-footer { max-width: clamp(460px, (100svh - 78px) / 1.75, 600px); }
}


/* ---- Desktop (1024 px and wider, landscape): a two-column stage. The text of the current state sits in the left
   column, centred on the stage height. The art (the 9:16 plate and canvas) fills the stage height in the right
   column; its white background is the page white. The container (--cw) is at most 1280 px wide and centred; on
   screens 1680 px and wider it grows with the screen height, up to 1680 px, so the text column and the hero headline
   grow with the art column.
   The heights use svh, like the probe in scroll.js that measures the stage (V): on a landscape tablet with its
   browser bars shown, 100svh is less than 100vh, and the CSS and the script must agree on the stage height.
   Keep this media query the same as DESK_QUERY in scroll.js. ---- */
@media (min-width: 1024px) and (min-aspect-ratio: 5/4) {
  body.bp-page { --cw: 1280px; }
  @media (min-width: 1680px) { body.bp-page { --cw: clamp(1280px, 142svh, 1680px); } }
  .sb { max-width: none; --edge: linear-gradient(to right, transparent, #000 28px, #000 calc(100% - 20px), transparent); }
  .sb .stage {
    --side: clamp(32px, 4.5cqw, 72px);                      /* least space at the page sides */
    --cx: max(var(--side), (100cqw - var(--cw)) / 2);       /* the container's left (and right) edge */
    --aw: calc(100svh * 9 / 16);                            /* the art column: full stage height, 9:16 */
    --gap: clamp(40px, 4.5cqw, 88px);                       /* between the text and the art */
    --free: calc(100cqw - 2 * var(--cx) - var(--aw) - var(--gap));
    --tw: min(680px, var(--free));                          /* the text column of states 2-4 (600 px before 2026-09-29) */
    --hw: min(760px, var(--free));                          /* the hero text column */
    --W: var(--aw);
    --H: 100svh;
    --ts: 1;
    --crop: 0px;
    --du: min(var(--tw) / 88, 7.7px, 0.8svh);               /* the text unit of states 2-4 (a phone's 1% of W; 6.9 px at most before) */
    --tu: calc(var(--du) * var(--ts));
    --pad: 0px;
    height: 100vh;
    height: 100svh;
  }
  .sb .view { left: auto; right: var(--cx); width: var(--aw); overflow: hidden; }

  /* Before the script runs, the hero plate stands in the art column. */
  .sb.js:not(.stacked) .state > .plate { left: auto; right: var(--cx); width: var(--aw); height: var(--H); bottom: 0; }
  .sb.js:not(.ready):not(.stacked) .s1 .copy, .sb.js:not(.ready):not(.stacked) .s1 > .plate { translate: none; scale: none; }

  /* The text column: each state's text is centred on the stage height. */
  .sb .state .copy {
    left: var(--cx);
    right: auto;
    top: 0;
    bottom: 0;
    width: var(--tw);
    padding: 72px 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .sb .state .body { margin-top: calc(24px * var(--ts)); max-width: 30em; font-size: calc(20px * var(--ts)); line-height: 1.4; letter-spacing: -0.01em; }

  /* Hero: the wordmark at the container's top-left corner; the headline at display size; an auto-width button. */
  /* The hero text starts 82 px + 8svh from the top at most (the hero wordmark ends 58 px from the top). Two spacers
     share the free height; the top one stops at 8svh, and the rest goes below the text. On a low window the text is
     centred; on a tall window it does not drift down the screen (before: 15-27% of the window above the hero
     headline). States 2-4 change this below. */
  .sb.js:not(.stacked) .state .copy { justify-content: flex-start; padding-top: 82px; }
  .sb.js:not(.stacked) .state .copy::before, .sb.js:not(.stacked) .state .copy::after { content: ''; flex: 1 1 0; }
  .sb.js:not(.stacked) .state .copy::before { max-height: 8svh; }
  /* States 2-4 (text, button and offer line, 2026-09-29): the block sits on the stage's optical centre, a little above
     the middle (45% of the free height above it, 55% below), so the column has no large empty area under the button.
     Before, the text started on the hero's line and 43-57% of the window below it was empty. */
  .sb.js:not(.stacked) :is(.s2, .s3, .s4) .copy::before { max-height: none; flex-grow: 0.818; }
  .sb .s1 .copy { width: var(--hw); padding: 82px 0 48px; }
  .sb .s1 .logo { position: absolute; top: 30px; left: 0; margin: 0; font-size: 28px; }
  .sb .s1 .hd { font-size: calc(min(84px, var(--hw) / 9, 9.6svh) * var(--ts)); }
  .sb .s1 .sub { margin-top: calc(28px * var(--ts)); font-size: calc(24px * var(--ts)); }
  .sb .s1 .body { margin-top: calc(12px * var(--ts)); }
  /* One button on desktop: its own width, 60 px high. The hero, states 2-4 and section 7 use it. */
  .sb .cta, .sb .s1 .cta { display: inline-flex; height: 60px; padding: 0 30px; font-size: 19px; }
  .sb .s1 .cta { align-self: flex-start; margin-top: calc(36px * var(--ts)); }
  /* States 2-4: the button and a quiet offer line under the text. It fades with its state; scroll.js makes it inert
     while the state is hidden. Before the script runs, only the hero is on screen. */
  .sb .act { display: block; margin-top: calc(36px * var(--ts)); }
  .sb .act .cta { margin-top: 0; }
  .sb.js:not(.ready):not(.stacked) .state:not(.on) .act { visibility: hidden; }

  /* Captions: under the art, in the art column. scroll.js moves the art up so that it ends above the caption. */
  .sb .foot { left: auto; right: calc(var(--cx) - 32px); width: calc(var(--aw) + 64px); bottom: 22px; padding-top: 12px; }
  .sb .foot .caption, .sb .s4 .foot .caption { font-size: clamp(14px, var(--aw) / 28, 17px); margin-bottom: 6px; text-wrap: balance; }
  .sb .note { font-size: 13px; }

  /* Stacked (no JavaScript, or a window lower than 560 px): each state is a row, text left and plate right. The plate
     shows from where its art starts (its white top is cut off). */
  :is(.sb:not(.js), .sb.stacked) .state {
    display: grid;
    grid-template-columns: minmax(0, 1fr) min(400px, 38%);
    column-gap: clamp(40px, 4.5cqw, 88px);
    align-items: center;
    max-width: calc(var(--cw) + 2 * clamp(32px, 4.5cqw, 72px));
    margin: 0 auto;
    padding: 56px clamp(32px, 4.5cqw, 72px);
  }
  :is(.sb:not(.js), .sb.stacked) .state .copy {
    grid-column: 1;
    grid-row: 1 / span 2;
    width: auto;
    min-height: 0;
    margin: 0;
    padding: 0;
  }
  :is(.sb:not(.js), .sb.stacked) .s1 .logo { position: static; margin-bottom: 32px; }
  :is(.sb:not(.js), .sb.stacked) .state > .plate {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
    aspect-ratio: 9 / 10.3;
    overflow: hidden;
  }
  :is(.sb:not(.js), .sb.stacked) .s1 > .plate { aspect-ratio: 9 / 9.8; }
  :is(.sb:not(.js), .sb.stacked) .s2 > .plate { aspect-ratio: 9 / 10.5; }
  :is(.sb:not(.js), .sb.stacked) .s3 > .plate { aspect-ratio: 9 / 13.2; }
  :is(.sb:not(.js), .sb.stacked) .state > .plate img { height: 100%; object-fit: cover; object-position: 50% 100%; }
  :is(.sb:not(.js), .sb.stacked) .foot { grid-column: 2; grid-row: 2; padding: 12px 0 0; }

  /* Sections 5-7 and the FAQ: two columns, text left and art right, on the container's edges. The pictures no longer
     move up under the text.
     One vertical scale for the whole lower page (2026-09-29, founder feedback: too much white space between the
     sections): --sec above and below each section, so two sections are 2 x --sec apart (147 px at 1512x982; before,
     224 px plus the white top rows of the pictures: 213-371 px of white in all). Inside a section: 24 px from a headline to its
     text, 32 px from a headline to a list, 36 px to a button. */
  .sb .panel {
    --u: 6.4px;
    --pad: 0px;
    --side: clamp(32px, 4.5cqw, 72px);
    --sec: clamp(56px, 7.5svh, 88px);
    --h2: min(66px, 7.2svh);                               /* section headlines: the size of the headlines of states 2-4 */
    max-width: calc(var(--cw) + 2 * var(--side));          /* the content is --cw at most, like the stage */
    margin: 0 auto;
    padding: var(--sec) var(--side);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, var(--artw, 480px));
    column-gap: clamp(40px, 5cqw, 96px);
    align-items: center;
  }
  /* The text column is a size container: each headline shrinks (cqi) when its longest line would not fit. The
     divisors are the longest line in em (measured) plus a small margin. */
  .sb .panel .copy { grid-column: 1; margin: 0; min-height: 0; container-type: inline-size; }
  .sb .p5 .hd { font-size: min(var(--h2), 100cqi / 6.3); }
  .sb .p7 .hd, .sb .p7 .price { font-size: min(var(--h2), 100cqi / 7.6); }
  .sb .panel-art { grid-column: 2; margin-top: 0; }
  .sb .panel .body { margin-top: 24px; max-width: 30em; font-size: 20px; line-height: 1.4; letter-spacing: -0.01em; }
  .sb .panel .note { grid-column: 2; margin-top: 12px; font-size: 13px; }
  /* Pictures 06 and 07 have white rows at their top, where the phone layout puts the text. Beside the text they are
     only empty space, so the desktop cuts them off (06: 260 of 1380 rows, 07: 350 of 1042; the paper starts lower). */
  .sb .p6 .panel-art img { aspect-ratio: 920 / 1120; object-fit: cover; object-position: 50% 100%; }
  .sb .p7 .panel-art img { aspect-ratio: 920 / 692; object-fit: cover; object-position: 50% 100%; }

  .sb .p5 { --artw: 560px; grid-template-rows: auto auto auto; }
  .sb .p5 .panel-art { grid-row: 1 / span 3; }
  .sb .panel .jobs {
    grid-column: 1;
    margin: 32px 0 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(3, auto);
    grid-auto-flow: column;
    column-gap: 40px;
    border-bottom: 0;
  }
  .sb .jobs li { padding: 18px 0 20px; }
  .sb .jobs li:nth-child(3n) { border-bottom: 1px solid var(--rule); }
  .sb .jobs h3 { font-size: 22px; }
  .sb .jobs p { margin-top: 6px; font-size: 18px; line-height: 1.35; text-wrap: pretty; }
  .sb .panel .fine { grid-column: 1; margin: 24px 0 0; font-size: 15px; max-width: 40em; }
  /* A narrow desktop: the list and its note go under the headline and the art, across the full width. */
  @media (max-width: 1199px) {
    .sb .p5 .panel-art { grid-row: 1; }
    .sb .p5 .jobs, .sb .p5 .fine { grid-column: 1 / -1; }
  }

  .sb .p6 { --artw: 440px; grid-template-rows: auto auto; }
  .sb .p6 .copy { grid-row: 1 / span 2; }
  .sb .p6 .hd { font-size: min(var(--h2), 100cqi / 13.2); }

  .sb .p7 { --artw: 520px; grid-template-rows: auto auto; row-gap: 0; align-content: center; }
  .sb .p7 .copy { grid-row: 1; align-self: end; }
  .sb .p7 .panel-art { grid-row: 1 / span 2; }
  .sb .p7 .price { margin-top: 20px; }
  .sb .p7 .sub { margin-top: 24px; font-size: 22px; }
  .sb .p7 .terms { margin-top: 6px; font-size: 20px; }
  .sb .p7 .body { margin-top: 16px; font-size: 18px; }
  .sb .p7 .action { grid-column: 1; grid-row: 2; align-self: start; margin: 36px 0 0; }

  /* The FAQ: the headline in the text column and the questions beside it, on the same edges as the sections above
     (before: one centred 760 px column, the only block off the container's left edge). */
  .sb .faq { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); align-items: start; }
  .sb .faq .hd { font-size: calc(var(--h2) * 0.75); }
  .sb .faq-list { margin-top: 0; }
  .sb .faq summary { padding: 22px 0; font-size: 22px; gap: 24px; }
  .sb .faq summary::after { width: 18px; height: 18px; }
  .sb .faq details p { padding-bottom: 24px; font-size: 18px; max-width: 36em; }

  /* The footer: full width, the links in one row. */
  body.bp-page .tk-footer { max-width: none; padding: 56px 0 28px; }
  body.bp-page .tk-footer .tk-shell { width: min(var(--cw), calc(100% - 2 * clamp(32px, 4.5vw, 72px))); margin: 0 auto; }
  body.bp-page .tk-footer__main, body.bp-page .tk-footer__bottom { flex-direction: row; align-items: flex-start; }
  body.bp-page .tk-footer__bottom { margin-top: 40px; }
  body.bp-page .tk-footer nav { flex-wrap: nowrap; gap: 28px; }
}