/* ===== tokens.css ===== */
/* ==========================================================================
   AVELaunch Books — design tokens
   Source of truth: WEBSITE_DESIGN (Figma), page "Dekstop"
   Handoff document v1.0, 7 September 2026, sections 6 and 7
   No colour value may be written anywhere outside this file.
   ========================================================================== */

:root {
  /* --- 6.2 Primitive palette ------------------------------------------- */
  --rich-black-1:      #0B1424;  /* body text, inverse surfaces, 3px strokes */
  --rich-black-2:      #E8EDF5;
  --rich-black-3:      #C7D2E3;  /* 1px hairline, vertical grid lines       */
  --rich-black-4:      #93A3BD;
  --rich-black-5:      #5D6C86;  /* secondary text                          */
  --rich-black-6:      #08101D;
  --rich-black-7:      #050A14;

  --space-cadet-1:     #1B2A57;
  --space-cadet-2:     #EEF2FA;
  --space-cadet-3:     #CBD6EC;
  --space-cadet-4:     #9BAED3;
  --space-cadet-5:     #657BA8;
  --space-cadet-6:     #142042;
  --space-cadet-7:     #0D162D;

  --vista-blue-1:      #7C9EC7;  /* brand surface                           */
  --vista-blue-2:      #F3F7FC;  /* spelled "Vista Vlue 2" in the file      */
  --vista-blue-3:      #DCE8F5;
  --vista-blue-4:      #B7CBE3;
  --vista-blue-5:      #93B1D3;

  --columbia-blue-1:   #C2E6F9;
  --columbia-blue-2:   #FCFEFF;
  --columbia-blue-3:   #EEF8FD;
  --columbia-blue-4:   #D9EEF9;
  --columbia-blue-5:   #CBE8FA;

  --amber-1:           #F2BB16;
  --amber-2:           #F9E08A;
  --amber-3:           #F7CD52;
  --amber-4:           #E0A800;  /* accent: buttons, underlines, active     */

  --editorial-white-1: #F8F7F4;
  --editorial-white-2: #FFFFFF;
  --editorial-white-3: #FDFBF8;
  --editorial-white-4: #EEEAE3;  /* page background                         */

  /* --- 6.3 Semantic layer ----------------------------------------------
     Reference map from the file. The layout binds to primitives, exactly
     as the Figma layers do, so this layer stays a dictionary of roles.     */
  --surface-page:       var(--editorial-white-4);
  --surface-brand:      var(--vista-blue-1);
  --surface-accent:     var(--amber-4);
  --surface-inverse:    var(--rich-black-1);
  --content-primary:    var(--rich-black-1);
  --content-secondary:  var(--rich-black-5);
  --content-on-inverse: var(--editorial-white-4);
  --content-accent:     var(--amber-4);
  --content-on-accent:  var(--rich-black-1);
  --content-on-brand:   var(--rich-black-1);
  --border-strong:      var(--rich-black-1);   /* 3px */
  --border-hairline:    var(--rich-black-3);   /* 1px */
  --border-accent:      var(--amber-4);        /* 3px */
  --action-fill:        var(--amber-4);
  --action-fill-hover:  rgba(255, 255, 255, 0); /* no fill on hover        */
  --action-border-hover: var(--amber-4);

  /* --- 4.1 Grid ---------------------------------------------------------
     1440 reference · 12 columns · Stretch · margin 50 · gutter 25
     Working area 1340. Column width is derived, never written down.       */
  --layout-reference: 1440px;
  --layout-margin:    50px;
  --layout-gutter:    25px;
  --layout-content:   1340px;
  --layout-floor:     1200px;   /* lower bound of the desktop layout       */

  /* --- 4.1 Vertical lines ----------------------------------------------
     Seven lines, step 180 of 1440 = 12.5 % of the window.
     THIS IS THE ONLY PLACE THE POSITIONS EXIST. Both layers — the page
     layer under the content and the header layer over its blurred
     background — read them from here. Writing them twice is what makes
     the two layers drift apart at the header edge.                        */
  --line-step:  12.5%;
  --line-width: 1px;
  --line-color: var(--rich-black-3);

  /* --- 8 Effects --------------------------------------------------------
     One effect on the whole site: BACKGROUND_BLUR 50 on the header plate. */
  --header-blur: 25px;
  --header-plate: rgb(238 234 227 / 0.75);
  --header-height: 61px;

  /* --- Motion ----------------------------------------------------------- */
  --t-fast: 150ms;
  --t-base: 300ms;
}

/* ===== base.css ===== */
/* ==========================================================================
   AVELaunch Books — fonts, typography scale, grid, vertical lines, layout
   intent tags. Handoff sections 4, 5, 7, 15.
   ========================================================================== */

/* --- 15.1 Fonts. Served from our own domain, never a third party. -------- */
@font-face {
  font-family: "Mulish";
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
  src: url("../fonts/mulish-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Mulish";
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
  src: url("../fonts/mulish-latin-ext-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Mulish";
  font-style: italic;
  font-weight: 200 1000;
  font-display: swap;
  src: url("../fonts/mulish-latin-wght-italic.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Comforter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/comforter-latin-400-normal.woff2") format("woff2");
}

/* --- Reset -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-width: var(--layout-floor);
  background: var(--surface-page);
  color: var(--content-primary);
  font-family: "Mulish", "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: normal;
  -webkit-font-smoothing: antialiased;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }

a { color: inherit; text-decoration: none; }

button, input, textarea, select {
  font: inherit;
  color: inherit;
  margin: 0;
}

h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

/* 9. Keyboard focus is visible on every interactive element: white plate,
   3px accent stroke — the decision taken for the form fields, applied site
   wide because the component sets carry no separate focus variant.        */
:focus-visible {
  outline: 3px solid var(--border-accent);
  outline-offset: 2px;
  background-color: var(--editorial-white-2);
}

/* --- 7.3 Heading trim ---------------------------------------------------
   Headings in the file sit on the cap height, not on the line box. Without
   the trim every heading drops a few pixels and the spacing above it reads
   larger than the macket.                                                  */
.u-trim {
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

/* --- 7.2 Type styles ----------------------------------------------------
   Letter spacing comes from Figma as a percentage of the type size, so it
   is written in em and never converted to pixels. Line height is Auto in
   every style, which is line-height: normal, not 100 %.                    */
.t-heading-accent       { font-family: "Comforter", cursive; font-weight: 400; font-size: 100px; letter-spacing: 0; text-transform: uppercase; }
.t-heading-accent-small { font-family: "Comforter", cursive; font-weight: 400; font-size: 100px; letter-spacing: 0; }
.t-heading              { font-weight: 1000; font-size: 50px; letter-spacing: 0.1em;  text-transform: uppercase; }
.t-heading-wide         { font-weight: 1000; font-size: 50px; letter-spacing: 0.06em; text-transform: uppercase; }
.t-heading-wide-light   { font-weight: 200;  font-size: 50px; letter-spacing: 0.06em; text-transform: uppercase; }
.t-subheading           { font-weight: 400;  font-size: 25px; letter-spacing: 0;      text-transform: uppercase; }
.t-intro                { font-weight: 400;  font-size: 25px; letter-spacing: 0; }
.t-intro-black          { font-weight: 1000; font-size: 25px; letter-spacing: 0;      text-transform: uppercase; }
.t-intro-black-wide     { font-weight: 1000; font-size: 25px; letter-spacing: 0.1em;  text-transform: uppercase; }
.t-base                 { font-weight: 400;  font-size: 15px; letter-spacing: 0; }
.t-base-black           { font-weight: 1000; font-size: 15px; letter-spacing: 0; }
.t-base-italic          { font-weight: 400;  font-size: 15px; font-style: italic; }
.t-base-down-black      { font-weight: 1000; font-size: 15px; text-transform: lowercase; }
.t-base-up              { font-weight: 400;  font-size: 15px; text-transform: uppercase; }
.t-base-up-black        { font-weight: 1000; font-size: 15px; text-transform: uppercase; }
.t-base-up-black-wide   { font-weight: 1000; font-size: 15px; letter-spacing: 0.1em;  text-transform: uppercase; }
.t-label                { font-weight: 400;  font-size: 25px; letter-spacing: 0.1em;  text-transform: uppercase; }
.t-label-wide           { font-weight: 400;  font-size: 25px; letter-spacing: 0.6em;  text-transform: uppercase; }
.t-label-big            { font-weight: 200;  font-size: 100px; text-transform: uppercase; }
.t-label-big-black      { font-weight: 1000; font-size: 100px; text-transform: uppercase; }

.u-secondary { color: var(--content-secondary); }
.u-accent    { color: var(--content-accent); }

/* --- 4.1 / 4.2 Working area ---------------------------------------------
   Above 1440 the working area holds at 1340 and centres; the margins grow.
   Between 1200 and 1440 the margin stays 50, the gutter stays 25, the
   columns narrow. Type sizes do not change.                               */
.container {
  width: min(var(--layout-content), 100% - var(--layout-margin) * 2);
  margin-inline: auto;
}

/* 12-column helper. The column width is derived from the grid, never set. */
.grid12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--layout-gutter);
}

/* --- 5.1 Intent tags ----------------------------------------------------
   Five values cover all thirty-nine hand-composed blocks. Where Auto Layout
   in the file disagrees with the tag, the tag wins.                        */

/* fluid — lives inside the working area and narrows with it. Default. */
.is-fluid { width: 100%; }

/* flow — a row of equal elements that wraps when it stops fitting.
   The gap equals the gutter. The count per row is not fixed.              */
.is-flow {
  display: flex;
  flex-wrap: wrap;
  gap: var(--layout-gutter);
}
.is-flow > * { flex: 1 1 var(--flow-basis, 430px); min-width: 0; }

/* bleed:both — runs the full window width both sides. Text and cards
   inside stay in the working area.                                        */
.is-bleed-both {
  width: 100vw;
  margin-left: calc(50% - 50vw);
}

/* bleed:left / bleed:right — out past one margin only, never both.
   --bleed-stop is the macket coordinate of the edge that stays put,
   expressed as a share of the working area.

   The box stops growing at the reference frame. It used to run to the window
   edge (`margin-left: calc(50% - 50vw)`), which at 1440 made it exactly the
   macket's 1340 — every share inside is a share of 1340, so the composition
   was right there and only there. At 1920 the same box became 1580 and the
   photograph, the cards and the text stretched with it: the "block drifts
   left" the comments report, eighteen times over. Pinned to the frame, the
   proportions inside are the macket's at any width.

   What is supposed to keep running off the edge is the fill, not the
   composition — an amber slab, a coloured band. That is `.u-bleed-fill-left`
   below, on the fill itself. */
.is-bleed-left {
  width: calc(100% - var(--bleed-stop, 0%)
              + (var(--layout-reference) - var(--layout-content)) / 2);
  margin-left: calc((var(--layout-content) - var(--layout-reference)) / 2);
  margin-right: 0;
}
/* Mirror image: for bleed:right the stop is the LEFT inset, so it stays a
   margin and the width comes off the same side. */
.is-bleed-right {
  width: calc(100% - var(--bleed-stop, 0%)
              + (var(--layout-reference) - var(--layout-content)) / 2);
  margin-right: calc((var(--layout-content) - var(--layout-reference)) / 2);
  margin-left: var(--bleed-stop, 0%);
}

/* The fill carries on to the window edge from wherever it stops. It paints a
   viewport's worth sideways and the page clips it, so no width has to be
   worked out. `background: inherit` so the fill's own colour is the only
   place a colour is written. */
.u-bleed-fill-left::before,
.u-bleed-fill-right::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100vw;
  background: inherit;
}
.u-bleed-fill-left::before  { right: 100%; }
.u-bleed-fill-right::after  { left: 100%; }

/* --- 4.0 The frame ------------------------------------------------------
   Everything positioned from --line-step is positioned inside this box, and
   nothing else is: the macket's 1440 frame, centred, shrinking with the
   window below 1440 and holding still above it. Before this existed, the
   line layer was `inset: 0` on the page, so --line-step read as 12.5 % of
   the WINDOW: at 1440 the lines landed on 180 · 360 · … · 1260 exactly, and
   at 1920 they spread to a 240 step and left the working area behind. Same
   for the header's menu, which took its cells from the same percentage.
   One box, one source, so the page layer and the header layer cannot drift
   apart at any width.                                                      */
.u-frame {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: min(100%, var(--layout-reference));
  transform: translateX(-50%);
}

/* --- 4.1 Vertical lines -------------------------------------------------
   One component, two placements. Positions are read from --line-step in
   tokens.css and exist nowhere else, so the page layer and the header layer
   cannot drift apart.                                                      */
.gridlines {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: min(100%, var(--layout-reference));
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 0;
}
.gridlines i {
  position: absolute;
  top: 0;
  bottom: 0;
  width: var(--line-width);
  background: var(--line-color);
  left: calc(var(--n) * var(--line-step));
}

/* The page layer sits under every section, the full height of the document.
   The header is the one exception: it keeps its own sticky positioning and
   rides above, because it draws its own copy of the lines over its plate. */
/* Bleeding blocks are drawn past the window edge on purpose — an amber band
   that runs off the left, a roller whose next card is cut by the right. The
   page clips them at the window. `clip` and not `hidden`: hidden would make
   this a scroll container and the pinned header would stop pinning. */
.page {
  position: relative;
  overflow-x: clip;
}
.page > .gridlines { z-index: 0; }
.page > *:not(.gridlines):not(.site-header):not(.site-up) { position: relative; z-index: 1; }
.page > .site-header { z-index: 2; }

/* Skip link — visible only once it takes focus. */
.skip-link {
  position: absolute;
  left: var(--layout-margin);
  top: 0;
  z-index: 10;
  transform: translateY(-200%);
  padding: 12px 25px;
  background: var(--editorial-white-2);
  color: var(--content-primary);
  font-weight: 1000;
  font-size: 15px;
  text-transform: uppercase;
  transition: transform var(--t-fast);
}
.skip-link:focus-visible { transform: translateY(0); }

/* --- Vertical rhythm between the blocks ---------------------------------
   The file stacks the screen's blocks on a fixed rhythm, and it is defined
   here once rather than inside each section: a section owns its own height,
   never the air around it.

   Read off the Main screen (1:3): the header's box ends at 111 and the first
   block starts at 180; every neighbouring pair of blocks sits 150 apart; the
   footer sits 100 below the last one.

   150 is only the Main screen's number. Services runs 150 · 100 · 0, How It
   Works runs 100 below its halfway point, and the gap under the header is a
   different number on every screen. So the default lives here and a block
   that departs from it writes its own value once, in the markup, as
   `style="--gap: 100px"` on the <section> — the measured Figma number, next
   to the block it belongs to, still not a margin the section sets on itself.

   The FAQ on Main carries `--gap: 0`: its full-width blue fill is meant to
   start exactly where the founder block above it ends.                      */
:root {
  --block-gap: 150px;
  --block-gap-first: 69px;   /* header box 111 → first block 180 */
  --block-gap-footer: 100px;
}

main > section + section  { margin-top: var(--gap, var(--block-gap)); }
main > section:first-child { margin-top: var(--gap, var(--block-gap-first)); }
.page > .site-footer { margin-top: var(--gap-footer, var(--block-gap-footer)); }

/* --- 13.3 Anchors -------------------------------------------------------
   Smooth scroll that accounts for the pinned header, so the target block
   does not hide underneath it.                                            */
html { scroll-behavior: smooth; }
[id] { scroll-margin-top: calc(var(--header-height) + 50px); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* --- Below the 1200 floor ------------------------------------------------
   The design stops at 1200: below that there is no narrower composition to
   fall back to, and `min-width` on its own gave a horizontal scrollbar — the
   headline cut off the left edge, half the hero off the right. A window at
   900 is not a phone; it is a laptop or a half-screen window, and a page you
   have to scroll sideways to read is broken in the only sense that matters.

   So the page keeps its 1200 layout and is scaled down to fit the window.
   Everything stays in proportion and simply reads smaller. This is not a
   narrow layout and it is no substitute for one — it is what the site does
   until a narrow composition is drawn.

   The scale itself cannot be written here: `zoom` needs a plain ratio, and
   no CSS expression turns a viewport width into one — dividing 100vw by 1200
   yields a length, which `zoom` rejects. So it is set by the small inline
   script the build puts at the top of every <body>, and `zoom` rather than
   `transform: scale()` because a transform would make the pinned header and
   the scroll-to-top control position against the transformed box instead of
   the window, and both would come unstuck.                                 */

/* An inline link inside body copy. The site has no underlines anywhere, so
   a link in the middle of a sentence has to be told apart some other way:
   it carries the accent colour and a 1px rule that thickens on hover. */
.u-link-inline {
  color: var(--content-accent);
  border-bottom: 1px solid currentColor;
  transition: border-bottom-width var(--t-fast), color var(--t-fast);
}
.u-link-inline:hover,
.u-link-inline:focus-visible {
  border-bottom-width: 3px;
}

/* ===== header.css ===== */
/* ==========================================================================
   Site header — Figma component set 504:2789, instance 20:1973 on Main.
   Load AFTER css/base.css.

   Full window width, 61px tall, pinned to the top of the window. Three
   layers, bottom to top:

     1. the plate  — Editorial White 4 at 75 % over a background blur
                     (Figma "Rectangle 13", 1440 x 61)
     2. the lines  — the page's own .gridlines component, drawn a second
                     time so the seven lines sit OVER the plate
     3. the logo and the menu

   Geometry: the seven lines and the seven menu cells are the same seven
   positions. They are read from --line-step in tokens.css and appear
   nowhere else, so the page's line layer and the header's cannot drift.
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  height: var(--header-height);
  /* Starts one page margin down; the page's own lines show in that strip. */
  margin-top: var(--layout-margin);
}

/* base.css pins every child of .page with `position: relative` at a higher
   weight than a single class, so the sticky behaviour is restated here at
   matching specificity. Width stays `auto` — the header must measure the
   same box as .page, not 100vw, or the scrollbar would offset its lines by
   a few pixels against the page's. */
.page > .site-header {
  position: sticky;
  z-index: 10;
}

/* --- 1. The plate ------------------------------------------------------- */
.site-header__plate {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--header-plate);
  -webkit-backdrop-filter: blur(var(--header-blur));
  backdrop-filter: blur(var(--header-blur));
}

/* --- 2. The lines -------------------------------------------------------
   The only modifier the shared component needs: it is lifted above the
   plate. The page layer keeps z-index 0 and stays under the content, so
   what shows inside the header is this crisp set at full strength, never
   the page's set dimmed and blurred through the translucent plate.       */
.site-header__lines {
  z-index: 1;
}

/* --- 3. Logo ------------------------------------------------------------ */
/* The macket's margin measured from the frame, not from the window: above
   1440 the frame centres, and a logo pinned to the window edge would sit
   240 away from the menu that starts at the frame's first line. */
.site-header__logo {
  position: absolute;
  z-index: 2;
  left: calc(max(0px, (100% - var(--layout-reference)) / 2) + var(--layout-margin));
  top: 50%;
  transform: translateY(-50%);
}

/* 15px tall, the wordmark's own ratio gives the width (107.45 in the
   macket). Fixed to the window margin, not to a share of the width. */
.site-header__logo img {
  width: auto;
  height: 15px;
}

/* --- 3. Menu ------------------------------------------------------------
   Each cell's line is at --n * --line-step; the label sits one gutter to
   the right of it. The cell width (150 in the macket) is never needed —
   the next cell is placed from the next line, not from this one's edge.  */
/* The frame box, not the window: the cells are placed from --line-step and
   the lines they belong to are now anchored to the macket's 1440 frame
   (base.css §4.0). Window-wide, the menu spread with the window and left
   its own lines behind above 1440. */
.site-header__nav {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: min(100%, var(--layout-reference));
  transform: translateX(-50%);
  z-index: 2;
  /* The nav box covers the whole header, including the logo. It is
     transparent but would still take the clicks, so it is made inert and
     only the menu items themselves are given back to the pointer. */
  pointer-events: none;
}

.site-header__item {
  position: absolute;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  pointer-events: auto;
  left: calc(var(--n) * var(--line-step) + var(--layout-gutter));
}

.site-header__link {
  white-space: nowrap;
  transition: color var(--t-fast);
}

/* Active page. The five variants in the set carry no other difference at
   this height, so one rule covers Main, Services, Process, Results and
   About. Styled off the attribute so the markup cannot drift from it. */
.site-header__link[aria-current="page"],
.site-header__link:hover,
.site-header__link:focus-visible {
  color: var(--content-accent);
}

/* --- 4. The sub-navigation ----------------------------------------------
   Three of the five header variants in the set are 113 tall instead of 61:
   Services (966:7456), Results (521:2698) and About (521:3038). The extra
   52 is a second row of links that hangs under the item that owns it —
   All services / Discovery Sprint under Services, Author Stories / Free
   Resources under Results, Our Team & Story / FAQ / Contact under About.

   Each sub-item sits on the SAME seven positions as the bar above it, one
   gutter right of its line, and the group's plate covers only its own
   columns. The rest of the row is bare: the page shows through it, with
   the seven lines carried down across the full width (Figma "Group 75").

   The block is a child of the <li> that opens it, so :hover and
   :focus-within on that item are the entire interaction — no script, and
   the pointer can travel down into the row without losing the hover
   because it never leaves the <li>'s subtree.

   It is an OVERLAY, not flow: on Services the hero deliberately starts at
   110 and runs up behind the whole header. A page whose first block is
   meant to start below the open row writes that into its own --gap.     */
/* The row is a frame box, not a window-wide one: every piece inside it —
   plate, rule, line copy, labels — is placed from --line-step, and the line
   copy is now anchored to the macket's 1440 frame (base.css §4.0). If this
   row stayed window-wide the plate would sit at 12.5 % of the window while
   the lines sat on the frame, and above 1440 they would come apart. */
.site-header__sub {
  position: absolute;
  top: 100%;
  left: 50%;
  width: min(100%, var(--layout-reference));
  transform: translateX(-50%);
  height: 52px;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t-fast) ease, visibility var(--t-fast);
  /* The nav box above is inert so it cannot swallow clicks meant for the
     page; this row is its own box and takes its own. */
  pointer-events: auto;
}

/* The block is a sibling of the menu, not a child of the item that opens it:
   the item is itself absolutely positioned, so a descendant would be laid
   out against that one narrow cell instead of across the header. :has()
   carries the relationship instead.

   Three states, in this order, and the order is the whole logic:

     1. a page that belongs to a group holds that group's row open;
     2. the moment the pointer or the caret lands on ANY opening item, every
        row closes — otherwise the page's own row and the hovered one draw
        on top of each other in the same 52px strip, which is what the
        header did on all seven section pages;
     3. the row belonging to what is actually being pointed at opens.

   Step 3 also keeps the row open while the pointer is inside it, so
   travelling down from the label into the links does not close it. */

/* 1 — held open by the page */
.site-header[data-subnav="services"] .site-header__sub[data-group="services"],
.site-header[data-subnav="results"]  .site-header__sub[data-group="results"],
.site-header[data-subnav="about"]    .site-header__sub[data-group="about"] {
  opacity: 1;
  visibility: visible;
}

/* 2 — anything being pointed at or tabbed to closes all of them first */
.site-header:has(.site-header__link[data-opens]:hover) .site-header__sub,
.site-header:has(.site-header__link[data-opens]:focus-visible) .site-header__sub,
.site-header:has(.site-header__sub:hover) .site-header__sub,
.site-header:has(.site-header__sub:focus-within) .site-header__sub {
  opacity: 0;
  visibility: hidden;
}

/* 3 — and only the one being pointed at opens */
.site-header:has(.site-header__link[data-opens="services"]:hover) .site-header__sub[data-group="services"],
.site-header:has(.site-header__link[data-opens="services"]:focus-visible) .site-header__sub[data-group="services"],
.site-header:has(.site-header__sub[data-group="services"]:hover) .site-header__sub[data-group="services"],
.site-header:has(.site-header__sub[data-group="services"]:focus-within) .site-header__sub[data-group="services"],
.site-header:has(.site-header__link[data-opens="results"]:hover) .site-header__sub[data-group="results"],
.site-header:has(.site-header__link[data-opens="results"]:focus-visible) .site-header__sub[data-group="results"],
.site-header:has(.site-header__sub[data-group="results"]:hover) .site-header__sub[data-group="results"],
.site-header:has(.site-header__sub[data-group="results"]:focus-within) .site-header__sub[data-group="results"],
.site-header:has(.site-header__link[data-opens="about"]:hover) .site-header__sub[data-group="about"],
.site-header:has(.site-header__link[data-opens="about"]:focus-visible) .site-header__sub[data-group="about"],
.site-header:has(.site-header__sub[data-group="about"]:hover) .site-header__sub[data-group="about"],
.site-header:has(.site-header__sub[data-group="about"]:focus-within) .site-header__sub[data-group="about"] {
  opacity: 1;
  visibility: visible;
}

/* The group's own piece of the plate: from its first line to one past its
   last, so the blur ends on a line and not in the middle of a cell. */
.site-header__sub-plate {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--from) * var(--line-step));
  width: calc(var(--span) * var(--line-step) + var(--line-width));
  background: var(--header-plate);
  -webkit-backdrop-filter: blur(var(--header-blur));
  backdrop-filter: blur(var(--header-blur));
}

/* Figma "Line 39": 1px at y 62, i.e. the first pixel of this row, spanning
   exactly the group's columns. */
.site-header__sub-rule {
  position: absolute;
  top: 1px;
  height: var(--line-width);
  left: calc(var(--from) * var(--line-step));
  width: calc(var(--span) * var(--line-step) + var(--line-width));
  background: var(--line-color);
  z-index: 2;
}

/* The lines carry on down through the row — but only inside the group's own
   columns.

   They used to be drawn across all seven. On the page the line layer lies
   UNDER the sections, so a section's own fill hides it; this copy sits above
   the page instead, so every line outside the open panel was painted onto
   whatever content happened to be under the header — four loose verticals
   hanging off the bar to the left of the About panel, with no plate and no
   rule to belong to. Services never showed it because its panel starts at
   the first line and there is nothing to its left.

   The layer stays full width so the `--n` percentages still resolve against
   the same box as everywhere else; the clip is what limits what is painted,
   from the group's first line to the far edge of its last column. */
.site-header__sub-lines {
  z-index: 1;
  clip-path: inset(
    0
    max(0px, calc(100% - (var(--from) + var(--span)) * var(--line-step) - var(--line-width)))
    0
    calc(var(--from) * var(--line-step)));
}

.site-header__submenu {
  position: absolute;
  inset: 0;
  z-index: 3;
}

/* Macket: label baseline at y 76 within the 113 header, i.e. 15 into this
   row; same one-gutter offset from the line as the bar above. */
.site-header__subitem {
  position: absolute;
  top: 15px;
  left: calc(var(--n) * var(--line-step) + var(--layout-gutter));
  pointer-events: auto;
}

/* Sentence case, Base Regular — the one place on the site where a menu
   label is not set in capitals. */
.site-header__sublink {
  white-space: nowrap;
  transition: color var(--t-fast);
}

.site-header__sublink[aria-current="page"],
.site-header__sublink:hover,
.site-header__sublink:focus-visible {
  color: var(--content-accent);
}

/* ===== footer.css ===== */
/* ==========================================================================
   Site footer — Figma symbol 152:1464, instance 966:8527.
   Load AFTER css/base.css.

   Full window width, 415 tall in the macket, Vista Blue 1. The fill is
   opaque, so it covers the page's vertical line layer — the macket shows
   no lines inside the footer.

   Vertical rhythm, read off the macket (footer top = 0):

        50  logo, 15 tall
        83  hairline, full working area
        98  tagline          |  50   Company / Services / Contact headings
       134  social icons     |  98   first link of each column
       184  Barcelona office | 289   last link of the Services column
       339  hairline
       354  legal links and copyright
       415  foot

   The right-hand link block starts level with the logo, so the first
   hairline crosses it. That is why the two halves are one grid with fixed
   rows rather than two stacked blocks: the rules span both columns while
   the link block spans the rows above and below the first of them.
   ========================================================================== */

.site-footer {
  background: var(--vista-blue-1);
  padding-block: var(--layout-margin);
  min-height: 415px;
}

.site-footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  /* logo band · hairline · body · hairline · bottom bar */
  grid-template-rows: 33px var(--line-width) 255px var(--line-width) auto;
}

/* --- Logo --------------------------------------------------------------- */
.site-footer__logo {
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
}

.site-footer__logo img {
  width: auto;
  height: 15px;
}

/* --- Hairlines ---------------------------------------------------------- */
.site-footer__rule {
  grid-column: 1 / -1;
  margin: 0;
  border: 0;
  height: var(--line-width);
  background: var(--rich-black-1);
}
.site-footer__rule--top    { grid-row: 2; }
.site-footer__rule--bottom { grid-row: 4; }

/* --- Left half: tagline, socials, office -------------------------------- */
.site-footer__brand {
  grid-column: 1;
  grid-row: 3;
}

.site-footer__tagline { margin-top: 14px; }

.site-footer__social {
  display: flex;
  align-items: center;
  gap: var(--layout-gutter);
  margin-top: var(--layout-gutter);
}

.site-footer__office {
  display: block;
  font-style: normal;
  margin-top: var(--layout-gutter);
}
.site-footer__office span { display: block; }

/* --- Right half: three link columns -------------------------------------
   Spans from the logo band down past the first hairline, exactly as in the
   macket. 169 wide each, 50 apart — two gutters.                          */
.site-footer__nav {
  grid-column: 2;
  grid-row: 1 / 4;
  align-self: start;
  display: flex;
  gap: calc(var(--layout-gutter) * 2);
}

.site-footer__col {
  display: flex;
  flex-direction: column;
  gap: 30px;
  width: 169px;
}

.site-footer__list {
  display: flex;
  flex-direction: column;
  gap: var(--layout-gutter);
  align-items: start;
}

/* --- Bottom bar --------------------------------------------------------- */
.site-footer__bottom {
  grid-column: 1 / -1;
  grid-row: 5;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--layout-gutter);
  margin-top: 14px;
}

.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--layout-gutter);
}

.site-footer__copy {
  text-align: right;
  white-space: nowrap;
}

/* --- Links -------------------------------------------------------------- */
.site-footer a {
  transition: color var(--t-fast);
}
.site-footer a:hover,
.site-footer a:focus-visible {
  color: var(--content-accent);
}

/* --- The reduced footer — Figma `Footer_min` 917:7587, 1440 x 319 --------
   Used by the two paid-traffic landing pages. Same brand block, same legal
   row, same hairline; the three site-map columns are replaced by "Contact"
   and two ways to reach us, and the second hairline is gone.

   Measured from the symbol: logo 50,50 · rule y 83 · tagline y 98 · social
   y 134 · office y 184 · legal row and copyright y 258. With the 50 page
   padding those become a 33 logo band, the rule, a 160 body and the bottom
   bar — 319 in total.                                                     */
.site-footer--min {
  min-height: 319px;
}

.site-footer--min .site-footer__grid {
  /* logo band · hairline · body · bottom bar */
  grid-template-rows: 33px var(--line-width) 160px auto;
}

/* "Contact" sits on the logo's line, hard right. */
.site-footer--min .site-footer__contact {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  align-self: start;
}

/* WhatsApp and the address share the tagline's line, right aligned. */
.site-footer--min .site-footer__reach {
  grid-column: 2;
  grid-row: 3;
  justify-self: end;
  align-self: start;
  display: flex;
  gap: 50px;
  margin-top: 14px;
}

.site-footer--min .site-footer__reach a {
  transition: color var(--t-fast);
}
.site-footer--min .site-footer__reach a:hover,
.site-footer--min .site-footer__reach a:focus-visible {
  color: var(--content-accent);
}

/* The bottom bar moves up one row, since there is no second hairline. */
.site-footer--min .site-footer__bottom {
  grid-row: 4;
}

/* ===== up.css ===== */
/* ==========================================================================
   Scroll-to-top control — `Button_form` 657:4075, macket 50,235 · 61 × 72.
   Load AFTER css/base.css.

   Fixed to the window at the page margin, at the same y the file draws it,
   so it sits in the empty strip left of the first vertical line and clear of
   the header. The label is set on its side reading bottom to top, which is
   what makes the box taller than it is wide.
   ========================================================================== */

.site-up {
  position: fixed;
  left: var(--layout-margin);
  /* The file draws this at y 235 — a static position on a page that does not
     scroll. As a floating control at the same coordinate it sits on top of
     whatever band happens to be passing: the Services list on the homepage
     runs its blue fill from the page margin, and the button covered the first
     row's line. So it keeps the file's x and moves to the foot of the window,
     out of the reading column and where a back-to-top control is looked for. */
  bottom: var(--layout-margin);
  z-index: 11;                      /* over the header's 10 */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 25px;
  border: 0;
  background: var(--action-fill);
  color: var(--content-on-accent);
  box-shadow: inset 0 0 0 3px var(--action-fill);
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--t-base) ease,
              background-color var(--t-fast) ease,
              box-shadow var(--t-fast) ease;
}

/* `hidden` is removed by the script; `data-shown` is what fades it in, so
   the control is never a dead button and never a flash on load. */
.site-up[data-shown] { opacity: 1; }

.site-up__label {
  writing-mode: vertical-rl;
  transform: rotate(180deg);        /* reads bottom to top, as in the file */
  white-space: nowrap;
}

/* pas → hov on Button_form: the fill empties, the amber stroke stays, and
   the box does not change size because the stroke is drawn inside. */
.site-up:hover,
.site-up:focus-visible {
  background: var(--action-fill-hover);
  box-shadow: inset 0 0 0 3px var(--action-border-hover);
}

/* ===== business/b1.css ===== */
/* ==========================================================================
   For Business Experts — block 1, hero
   Figma: node 903:9466 "Section 1 [fluid]", 1137 x 763, macket x 164 - 1301.

   1137 is ten columns of the twelve plus one gutter (10 * 88.75 + 10 * 25 =
   1137.5 at the 1440 reference), so it is written as a share of the working
   area rather than as a grid item: 114 in, 1137 wide. Every horizontal
   measure inside is a share of that 1137 frame, so the composition holds
   while the working area narrows between 1200 and 1440.

   The photograph is the only child left in normal flow: it is the tallest
   thing in the block, so it — and not a padding — is what makes the section
   763 tall.

   This is the first screen an advertisement lands on, so nothing here is
   lazy-loaded and the call to action sits inside the first 763 + 261 of the
   page. See b1.assets.md.
   ========================================================================== */

.s-b1 .s-b1__stage {
  position: relative;
  margin-left: 8.50746%;       /* macket 164 - 50 = 114 of 1340 */
  width: 84.85075%;            /* 1137 / 1340 */
}

/* --- Photograph, macket 776,0 · 525 x 763 --------------------------------
   Exported from "Hero picture" (903:9398) as one RGBA file: the cut-out
   portrait, the grey studio plate behind her right half and the Vista Blue 1
   silhouette offset behind her are a single masked composition in the file,
   and the page's vertical lines have to read through the transparent ground
   to the left of the silhouette.                                           */
.s-b1 .s-b1__media {
  margin: 0 0 0 53.82586%;     /* 612 / 1137 */
  width: 46.17414%;            /* 525 / 1137 */
}

.s-b1 .s-b1__media img {
  width: 100%;
  aspect-ratio: 525 / 763;
}

/* --- Text column, macket 164,261 · 657 wide ------------------------------
   Lifted over the photograph: the two overlap by 45 at the reference width
   and by more as the frame narrows, and the copy has to stay on top.       */
.s-b1 .s-b1__lede {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  width: 57.78364%;            /* 657 / 1137 */
  display: flex;
  flex-direction: column;
  gap: var(--layout-gutter);
}

/* 25 under the eyebrow, then 50 between the heading block and the copy and
   another 50 before the button — three different gaps, so three boxes.    */
.s-b1 .s-b1__block,
.s-b1 .s-b1__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 50px;
  width: 100%;
}

/* The Comforter word lies over the Mulish heading in one grid cell. The
   heading sits 50 down inside the 274-tall group; the accent starts at 0 and
   is 614 of the 657 wide, left aligned, exactly as the file draws it.      */
.s-b1 .s-b1__title {
  display: grid;
  width: 100%;
  font: inherit;
}
.s-b1 .s-b1__title > * {
  grid-area: 1 / 1;
  justify-self: start;
}
.s-b1 .s-b1__title-accent {
  width: 93.48837%;            /* 614.219 / 657 */
  color: var(--amber-4);
}
.s-b1 .s-b1__title-main {
  margin-top: 50px;
  width: 100%;
}

.s-b1 .s-b1__eyebrow,
.s-b1 .s-b1__copy {
  width: 100%;
}

/* --- Button_form 903:9302 ------------------------------------------------
   25 + cap height 11 + 25 = 61. The hover state empties the fill and leaves
   a 3px stroke; it is drawn as an inset shadow so the box never changes
   size between the two states.                                             */
.s-b1 .s-b1__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 25px;
  white-space: nowrap;
  background: var(--action-fill);
  box-shadow: inset 0 0 0 3px var(--action-fill);
  color: var(--content-on-accent);
  cursor: pointer;
  transition: background-color var(--t-base), box-shadow var(--t-base);
}

.s-b1 .s-b1__cta:hover,
.s-b1 .s-b1__cta:focus-visible {
  background: var(--action-fill-hover);
  box-shadow: inset 0 0 0 3px var(--action-border-hover);
}

/* ===== business/b2.css ===== */
/* ==========================================================================
   For Business Experts — block 2, "Tell us about your book idea"
   Figma: node 903:9355 "Section 2", 1340 x 661 — the whole working area.
   Form component: FAQ_S7_Form, instance 903:9363, 657 x 661.

   The heading sits at macket x 164, i.e. column 2 of the twelve, and is five
   columns wide (544); the form is the last six (657 at macket 733). The
   heading's own text runs 569 — one gutter wider than its cell — which is
   what the file draws, and it lands exactly on the form's left edge.

   The block carries `--gap: 0`: the file butts it straight against the hero,
   so the form's Vista Blue plate starts where the hero photograph ends.

   FAQ_S7_Form here is the same component the FAQ screen uses, with its second
   (WhatsApp) button and its right-hand status slot switched off in this
   instance, and the message placeholder reading "Type your message".
   50 + 506 + 44 + 11 + 50 = 661.
   ========================================================================== */

.s-b2 .s-b2__title {
  grid-column: 2 / span 5;
  align-self: start;
  display: grid;
  font: inherit;
}
.s-b2 .s-b2__form {
  grid-column: 7 / span 6;
}

/* --- Heading ------------------------------------------------------------
   The Comforter word lies over the Mulish heading in one grid cell. The
   heading sits 50 down inside the 211-tall group; the accent starts at 0.
   Both runs are 569 of the 544 cell — 104.5956 % — and overflow into the
   gutter, exactly as the file draws them.                                  */
.s-b2 .s-b2__title > * {
  grid-area: 1 / 1;
  justify-self: start;
  width: 104.5956%;            /* 569 / 544 */
}
.s-b2 .s-b2__title-main {
  margin-top: 50px;
}
.s-b2 .s-b2__title-accent {
  color: var(--amber-4);
}

/* --- Form ---------------------------------------------------------------
   50 + 420 fields + 25 + 61 button + 44 + 11 status + 50 = 661.           */
.s-b2 .s-b2__form {
  display: flex;
  flex-direction: column;
  padding: 50px 25px;
  background: var(--vista-blue-1);
}
.s-b2 .s-b2__body {
  display: flex;
  flex-direction: column;
  gap: var(--layout-gutter);
}
.s-b2 .s-b2__fields {
  display: flex;
  flex-direction: column;
  gap: var(--layout-gutter);
}
.s-b2 .s-b2__field {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.s-b2 .s-b2__label {
  color: var(--content-on-brand);
}

/* --- Plates -------------------------------------------------------------
   Main_S14_Form_text_card: Editorial White 4 plate, no border at rest,
   15 of padding all round — 15 + cap height 11 + 15 = 41 for a one-liner. */
.s-b2 .s-b2__plate {
  width: 100%;
  border: 0;
  background: var(--editorial-white-4);
  color: var(--content-primary);
}
.s-b2 .s-b2__input {
  height: 41px;
  padding: 0 15px;
}
.s-b2 .s-b2__textarea {
  height: 225px;
  padding: 15px;
  resize: vertical;
}
.s-b2 .s-b2__plate::placeholder {
  color: var(--vista-blue-1);
  opacity: 1;
}
/* The Act variants draw the focus stroke on the plate edge rather than 2
   outside it, so the offset base.css sets site wide is dropped here.      */
.s-b2 .s-b2__plate:focus-visible {
  outline-offset: 0;
  background-color: var(--editorial-white-2);
}

/* --- Send it ------------------------------------------------------------ */
.s-b2 .s-b2__actions {
  display: flex;
  align-items: center;
  gap: var(--layout-gutter);
}
.s-b2 .s-b2__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 25px;
  border: 0;
  background: var(--action-fill);
  color: var(--content-on-accent);
  cursor: pointer;
  transition: background-color var(--t-fast) ease, box-shadow var(--t-fast) ease;
}
/* The label is trimmed to its cap height, so 25 + 11 + 25 gives the 61 of
   the macket. It carries the trim rather than the button, because only a
   flex item is a block container of its own text.                        */
.s-b2 .s-b2__submit-label {
  white-space: nowrap;
}
.s-b2 .s-b2__submit:hover:not([disabled]),
.s-b2 .s-b2__submit:focus-visible:not([disabled]) {
  background: var(--action-fill-hover);
  box-shadow: inset 0 0 0 3px var(--action-border-hover);
}
/* The Loading variant leaves the button looking exactly as it does at rest,
   so nothing is restyled here — it is only made unusable.                 */
.s-b2 .s-b2__submit[disabled] {
  cursor: progress;
}

/* --- Status line --------------------------------------------------------
   25 of the 44 between the button row and the status line comes from the
   form's own gap, the remaining 19 from here.                             */
.s-b2 .s-b2__status {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--layout-gutter);
  margin-top: 44px;
  color: var(--content-on-brand);
}
.s-b2 .s-b2__message {
  text-align: right;
}
.s-b2 .s-b2__hint[hidden],
.s-b2 .s-b2__state[hidden],
.s-b2 .s-b2__message[hidden] {
  display: none;
}

/* ===== business/b3.css ===== */
/* ==========================================================================
   For Business Experts — block 3, the proof band
   Figma: node 903:9461 "Section 3", 1440 x 293.
     Frame 13   (903:9416) five Main_S3_Card at macket 50, 1340 x 164
     TrustLine  (903:9399) full window width, y 189, 1440 x 104
   164 + 25 + 104 = 293.

   Both halves are the same components Main uses in its section 2+3, so the
   five press logos are the files already in assets/ under their Main names,
   not re-exported copies.
   ========================================================================== */

/* --- Main_S3_Card -------------------------------------------------------
   Five tiles across the working area: 248 wide with the gutter between them
   adds up to 1340 exactly, so equal columns reproduce the macket and narrow
   with the working area rather than wrapping.                              */
.s-b3 .s-b3__stats {
  display: flex;
  gap: var(--layout-gutter);
}

.s-b3 .s-b3__stat {
  flex: 1 1 0;
  min-width: 0;
  padding: 46px var(--layout-gutter) 47px;
  background: var(--vista-blue-1);
  color: var(--content-on-brand);
  text-align: center;
}

.s-b3 .s-b3__stat-num {
  margin-bottom: var(--layout-gutter);
}

/* --- TrustLine ----------------------------------------------------------
   Amber band, 104 tall, full window width: 25 of padding, a 54 tall row, 25.
   The five logos keep their macket sizes and sit on their own baselines
   inside that row, exactly as the component places them. 25 above the band
   is the file's own gap between the two halves of this block, so it lives
   here rather than in base.css.                                            */
.s-b3 .s-b3__trust {
  margin-top: var(--layout-gutter);
  height: 104px;
  display: flex;
  align-items: center;
  background: var(--amber-4);
  overflow: hidden;
}

.s-b3 .s-b3__trust-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  height: 54px;
}

.s-b3 .s-b3__logo {
  flex: 0 0 auto;
  transition: opacity var(--t-fast) ease;
}

.s-b3 .s-b3__logo:hover,
.s-b3 .s-b3__logo:focus-visible {
  opacity: 0.7;
}

/* Macket: each logo's top offset inside the 54 tall row. */
.s-b3 .s-b3__logo--forbes      { margin-top: 3px; }
.s-b3 .s-b3__logo--ingramspark { margin-top: 14px; }
.s-b3 .s-b3__logo--nyt         { margin-top: 16px; }
.s-b3 .s-b3__logo--barnes      { margin-top: 11px; }
.s-b3 .s-b3__logo--bbc         { margin-top: 2px; }

/* ===== business/b4.css ===== */
/* ==========================================================================
   For Business Experts — block 4, "Consultants who all look the same…"
   Figma: node 903:9493 "Section 4", 1340 x 431 — the whole working area.
     Frame 397 (903:9476)  1112 wide, centred, 184 tall   heading block
     Frame 398 (903:9490)  1340 wide, y 234, 161 tall     three Main_S5_Card
     Text      (903:9491)  1340 wide, y 420, 11 tall      closing line
   184 + 50 + 161 + 25 + 11 = 431.
   ========================================================================== */

/* --- Heading block, macket 114 in, 1112 wide, centred -------------------- */
.s-b4 .s-b4__head {
  margin-inline: auto;
  width: 82.98507%;            /* 1112 / 1340 */
  display: flex;
  flex-direction: column;
  gap: var(--layout-gutter);
  text-align: center;
}

/* The Comforter word lies over the Mulish heading in one grid cell. The
   heading sits 50 down inside the 148-tall group; the accent starts at 0 and
   is 1039.6 of the 1112 wide, so its centred glyphs land 36 left of the
   heading's centre — which is what the file draws.                         */
.s-b4 .s-b4__title {
  display: grid;
  width: 100%;
  font: inherit;
}
.s-b4 .s-b4__title > * {
  grid-area: 1 / 1;
  justify-self: start;
}
.s-b4 .s-b4__title-main {
  margin-top: 50px;
  width: 100%;
}
.s-b4 .s-b4__title-accent {
  width: 93.48841%;            /* 1039.591 / 1112 */
  color: var(--amber-4);
}

/* --- Main_S5_Card -------------------------------------------------------
   Three 430 cards on the 25 gutter: the full 1340. The Hov variant swaps the
   brand surface for the accent and nothing else moves.                     */
.s-b4 .s-b4__cards {
  --flow-basis: 430px;
  margin-top: 50px;
}

.s-b4 .s-b4__card {
  padding: 25px;
  background: var(--vista-blue-1);
  color: var(--content-on-brand);
  transition: background-color var(--t-base) linear;
}

.s-b4 .s-b4__card:hover,
.s-b4 .s-b4__card:focus-within {
  background: var(--amber-4);
}

/* Macket: the body sits 43 below the title's cap top, which is the gutter
   once the cap trim is applied, and is indented 50 inside the card.       */
.s-b4 .s-b4__card-body {
  margin-top: var(--layout-gutter);
  padding-left: 50px;
}

/* --- Closing line ------------------------------------------------------- */
.s-b4 .s-b4__close {
  margin-top: var(--layout-gutter);
  text-align: center;
}

/* ===== business/b5.css ===== */
/* ==========================================================================
   For Business Experts — block 5, How it works
   Figma: instance 909:9936 of the component set How_it_works_for_business
   (909:9722), 1440 x 1100, full window width, Vista Blue 1.

   Seven stacked variants — prop=How_it_works_main/00 … /06, nodes 909:9723,
   9737, 9754, 9773, 9792, 9811, 9828. Here they are one arc with the seven
   steps as data: the arc never moves, the stops ride it, and the open step
   always sits at the arc's rightmost point. All seven titles and bodies are
   in the markup; building only /00 would have dropped six steps of copy.

   Macket coordinates are 1440-wide frame coordinates. The stage below is the
   1340 working area, so every macket x is written here as x − 50.
   Arc: "Ellipse 7", a 1150 box at (−442, −25) with a 1px stroke, i.e.
   centre (83, 550) and radius 574.5 in stage coordinates.

   The dial's own geometry — radius 574.5 for the bullets, 631.5 for the
   numerals, 30 degrees a step — is Main's section 6, and the two screens
   share the arc, the radius and the numeral radius exactly (the open
   numeral's centre is 631.5 from the arc centre in both files). The file
   hand-places the off-centre stops a few pixels off that ideal; the ideal is
   kept so the two screens cannot drift apart. See b5.assets.md.
   ========================================================================== */

.s-b5 {
  position: relative;
  height: 1100px;
  overflow: hidden;
  background: var(--surface-brand);
}

.s-b5 .s-b5__stage {
  position: relative;
  height: 100%;
}

/* --- Heading ------------------------------------------------------------
   "HOW" (Comforter) is laid over "IT WORKS" and paints above it, so it comes
   first in the DOM and is lifted with z-index rather than reordered.       */
.s-b5 .s-b5__accent {
  position: absolute;
  z-index: 1;
  top: 50px;
  left: 0;
  white-space: nowrap;
  color: var(--editorial-white-4);
}

.s-b5 .s-b5__title {
  position: absolute;
  top: 100px;
  left: 0;
  width: 100%;
  color: var(--content-on-brand);
}

/* --- The arc ------------------------------------------------------------
   Static. Clipped by the section on the left, top and bottom.             */
.s-b5 .s-b5__arc {
  position: absolute;
  top: -25px;
  left: -492px;
  pointer-events: none;
}

/* Stroke colours live here, not on the SVG: var() is a CSS value and does
   not resolve inside an XML presentation attribute.                        */
.s-b5 .s-b5__arc circle {
  stroke: var(--editorial-white-4);
}

/* --- The dial -----------------------------------------------------------
   Each stop is a zero-size origin at the circle centre, rotated by its
   offset from the open step. Its children then sit on the local x axis,
   which is the radius, so a child at x = 574.5 lands on the arc and one at
   x = 631.5 lands the 57px further out that the macket puts the numerals.
   The open step is offset 0, so it is not rotated at all.                 */
.s-b5 .s-b5__dial {
  position: absolute;
  inset: 0;
}

.s-b5 .s-b5__stop {
  position: absolute;
  top: 550px;
  left: 83px;
  width: 0;
  height: 0;
  display: none;
  transform: rotate(var(--b5-angle, 0deg));
}

.s-b5 .s-b5__stop[data-offset="-2"] { display: block; --b5-angle: -60deg; }
.s-b5 .s-b5__stop[data-offset="-1"] { display: block; --b5-angle: -30deg; }
.s-b5 .s-b5__stop[data-offset="0"]  { display: block; --b5-angle:   0deg; }
.s-b5 .s-b5__stop[data-offset="1"]  { display: block; --b5-angle:  30deg; }
.s-b5 .s-b5__stop[data-offset="2"]  { display: block; --b5-angle:  60deg; }

.s-b5 .s-b5__bullet {
  position: absolute;
  top: 0;
  left: 574.5px;
  margin: -7.5px 0 0 -7.5px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--editorial-white-4);
}

.s-b5 .s-b5__stop[data-offset="0"] .s-b5__bullet {
  background: var(--rich-black-1);
}

.s-b5 .s-b5__num {
  position: absolute;
  top: 0;
  left: 631.5px;
  margin: -17.5px 0 0 -31.5px;
  width: 63px;
  height: 35px;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
  color: var(--editorial-white-4);
  cursor: pointer;
}

.s-b5 .s-b5__stop[data-offset="0"] .s-b5__num {
  color: var(--content-on-brand);
  cursor: default;
}

/* --- The open step ------------------------------------------------------
   Macket: the title column starts at x 821 — stage 771 — and runs to the
   working area's right edge; the body is 366 wide under it. The title's cap
   box is centred on the arc point and the body sits 25 below it, whether the
   title runs to one line or three.                                         */
.s-b5 .s-b5__steps {
  position: absolute;
  top: 550px;
  right: 0;
  left: 771px;
}

.s-b5 .s-b5__step {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  transform: translateY(-50%);
}

.s-b5 .s-b5__step[hidden] { display: none; }

.s-b5 .s-b5__steptitle {
  color: var(--content-on-brand);
}

.s-b5 .s-b5__stepbody {
  position: absolute;
  top: calc(100% + 25px);
  left: 0;
  width: 100%;
  max-width: 366px;
  color: var(--content-on-brand);
}

/* --- Arrow_graphic_button -----------------------------------------------
   Two 50px discs, NOT side by side on this screen: the file puts "next"
   (chevron down) at macket 625,525 and "prev" (chevron up) at 600,575,
   stepping down along the arc. On the last step, where "next" is gone, the
   file moves the lone "prev" right to macket 675,575 — which is the sibling
   rule below, so no script has to know about it.                          */
.s-b5 .s-b5__chev {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--action-fill);
  box-shadow: inset 0 0 0 3px var(--action-fill);
  cursor: pointer;
  transition: background-color var(--t-base), box-shadow var(--t-base), left var(--t-base);
}

.s-b5 .s-b5__chev[hidden] { display: none; }

.s-b5 .s-b5__chev--next { top: 525px; left: 575px; }
.s-b5 .s-b5__chev--prev { top: 575px; left: 550px; }
.s-b5 .s-b5__chev--next[hidden] ~ .s-b5__chev--prev { left: 625px; }

.s-b5 .s-b5__chev:hover,
.s-b5 .s-b5__chev:focus-visible {
  background: var(--action-fill-hover);
  box-shadow: inset 0 0 0 3px var(--action-border-hover);
}

.s-b5 .s-b5__chev path {
  stroke: var(--content-on-accent);
}

.s-b5 .s-b5__chev--prev svg { transform: rotate(180deg); }

/* --- Call to action ------------------------------------------------------
   Macket 1156,989 · 234 x 61 — flush with the working area's right edge.   */
.s-b5 .s-b5__cta {
  position: absolute;
  top: 989px;
  right: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 25px;
  white-space: nowrap;
  color: var(--content-on-accent);
  background: var(--action-fill);
  box-shadow: inset 0 0 0 3px var(--action-fill);
  transition: background-color var(--t-base), box-shadow var(--t-base);
}

.s-b5 .s-b5__cta:hover,
.s-b5 .s-b5__cta:focus-visible {
  background: var(--action-fill-hover);
  box-shadow: inset 0 0 0 3px var(--action-border-hover);
}

/* ===== business/b6.css ===== */
/* ==========================================================================
   For Business Experts — block 6, Client voices
   Figma: node 909:10127 "Section 6", 885 x 744 at macket x 278, i.e. the
   middle eight columns of the twelve, centred.
     Frame 405 (909:10125)  650 wide, centred, 128 tall   heading
     Frame 402 (909:10122)  885, two Main_S7_Card of 430, 394 tall
     Frame 403 (909:10123)  885, two "Result" rows, 61 tall
     Button    (909:10118)  339 x 61, centred
   128 + 50 + 394 + 25 + 61 + 25 + 61 = 744.

   Main_S7_Card is Main's section 7 card, and the two portraits are the same
   people, so the two cut-outs already in assets/ are reused rather than
   re-exported. See b6.assets.md.
   ========================================================================== */

.s-b6 .s-b6__inner {
  grid-column: 3 / span 8;
}

/* --- Heading block, 650 wide, centred ------------------------------------
   85 heading group + 25 + 18 subheading = 128. "CLIENT" is laid over
   "VOICES" and paints above it, so it comes first in the DOM and is lifted
   with z-index rather than reordered.                                      */
.s-b6 .s-b6__head {
  margin-inline: auto;
  width: 73.44633%;            /* 650 / 885 */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--layout-gutter);
  text-align: center;
}

.s-b6 .s-b6__heading {
  position: relative;
  display: grid;
  width: 83.69231%;            /* 544 / 650 — the Mulish line's own box */
  font: inherit;
}
.s-b6 .s-b6__heading > * {
  grid-area: 1 / 1;
  width: 100%;
}
.s-b6 .s-b6__accent {
  z-index: 1;
  white-space: nowrap;
}
.s-b6 .s-b6__title {
  margin-top: 50px;
  color: var(--content-primary);
}
/* The file draws this line 650 wide and 18 tall — one line. Our Mulish is
   half a percent wider than Figma's and wants 653, so left to wrap it would
   break in two and add 31 to the block. It is held on one line; 653 still
   fits the 885 block with room to spare at 1200, where the block is 725. */
.s-b6 .s-b6__sub {
  width: 100%;
  white-space: nowrap;
  color: var(--content-primary);
}

/* --- Cards --------------------------------------------------------------- */
.s-b6 .s-b6__cards {
  --flow-basis: 430px;
  margin-top: 50px;
}

.s-b6 .s-b6__card {
  position: relative;
  height: 394px;
  background: var(--surface-brand);
  transition: background-color var(--t-base);
}

/* Main_S7_Card / Hov — the plate turns amber, nothing else moves. */
.s-b6 .s-b6__card:hover,
.s-b6 .s-b6__card:focus-within {
  background: var(--surface-accent);
}

/* --- Portrait -----------------------------------------------------------
   A 125 x 226 window at (25, 25) cut to the irregular outline of the file's
   vector mask; the export already carries the cut with real alpha, so the
   card's colour is not baked in around it and the amber hover shows through
   correctly.                                                               */
.s-b6 .s-b6__portrait {
  position: absolute;
  top: 25px;
  left: 25px;
  width: 125px;
  height: 226px;
  overflow: hidden;
}

.s-b6 .s-b6__portrait img {
  display: block;
  width: 125px;
  height: 226px;
}

/* --- Card text ----------------------------------------------------------
   Content box 380 wide from the top edge at 126. The name and role sit in a
   230 column pushed to the right edge of that box; the quote runs its full
   width, 84 below.                                                          */
.s-b6 .s-b6__body {
  position: absolute;
  top: 126px;
  right: 25px;
  left: 25px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 84px;
  color: var(--content-on-brand);
}

.s-b6 .s-b6__who {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--layout-gutter);
  width: 230px;
  max-width: 100%;
}

.s-b6 .s-b6__name,
.s-b6 .s-b6__role,
.s-b6 .s-b6__quote {
  width: 100%;
}

/* --- "Result" rows ------------------------------------------------------
   Each row is 430 — the card above it — made of the outlined Button_form
   (108 wide) and a 297 column, 25 apart.                                   */
.s-b6 .s-b6__results {
  --flow-basis: 430px;
  margin-top: var(--layout-gutter);
}

.s-b6 .s-b6__result {
  display: flex;
  align-items: flex-start;
  gap: var(--layout-gutter);
}

.s-b6 .s-b6__resulttext {
  flex: 1 1 0;
  min-width: 0;
  color: var(--content-primary);
}

/* Button_form, outlined variant: no fill, 3px Rich Black 1 stroke drawn
   inset so the resting and hovered boxes are the same size.                */
.s-b6 .s-b6__resultlink {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 25px;
  white-space: nowrap;
  background: none;
  box-shadow: inset 0 0 0 3px var(--border-strong);
  color: var(--content-primary);
  transition: box-shadow var(--t-base), color var(--t-base);
}

.s-b6 .s-b6__resultlink:hover,
.s-b6 .s-b6__resultlink:focus-visible {
  box-shadow: inset 0 0 0 3px var(--action-border-hover);
  color: var(--content-accent);
}

/* --- Call to action ----------------------------------------------------- */
.s-b6 .s-b6__actions {
  margin-top: var(--layout-gutter);
  text-align: center;
}

.s-b6 .s-b6__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 25px;
  white-space: nowrap;
  background: var(--action-fill);
  box-shadow: inset 0 0 0 3px var(--action-fill);
  color: var(--content-on-accent);
  transition: background-color var(--t-base), box-shadow var(--t-base);
}

.s-b6 .s-b6__cta:hover,
.s-b6 .s-b6__cta:focus-visible {
  background: var(--action-fill-hover);
  box-shadow: inset 0 0 0 3px var(--action-border-hover);
}

/* ===== business/b7.css ===== */
/* ==========================================================================
   For Business Experts — block 7, "Services for you"
   Figma: node 909:10336 "Section 7", 1340 x 856 — the whole working area.
     Frame 407 (909:10272)  790 wide, centred, 183 tall   heading
     Frame 31  (909:10304)  1340, three Main_S9_Card of 154, y 233, 512 tall
     Button    (909:10244)  279 x 61 at y 795, centred
   183 + 50 + 512 + 50 + 61 = 856.
   ========================================================================== */

/* --- Heading block, 790 wide, centred -----------------------------------
   85 group + 25 + 18 subheading + 25 + 30 intro = 183. "SERVICES" is laid
   over "FOR YOU" and paints above it, so it comes first in the DOM and is
   lifted with z-index rather than reordered.                               */
.s-b7 .s-b7__head {
  margin-inline: auto;
  width: 58.95522%;            /* 790 / 1340 */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--layout-gutter);
  text-align: center;
}

.s-b7 .s-b7__heading {
  position: relative;
  display: grid;
  width: 68.86076%;            /* 544 / 790 — the Mulish line's own box */
  font: inherit;
}
.s-b7 .s-b7__heading > * {
  grid-area: 1 / 1;
  width: 100%;
}
.s-b7 .s-b7__accent {
  z-index: 1;
  white-space: nowrap;
}
.s-b7 .s-b7__title {
  margin-top: 50px;
  color: var(--content-primary);
}
.s-b7 .s-b7__sub {
  width: 100%;
}
.s-b7 .s-b7__intro {
  width: 83.29114%;            /* 658 / 790 */
}

/* --- Main_S9_Card -------------------------------------------------------
   Three full-width rows, 154 tall: 50 of padding, a 54 tall stack inside.  */
.s-b7 .s-b7__list {
  display: flex;
  flex-direction: column;
  gap: var(--layout-gutter);
  margin-top: 50px;
}

.s-b7 .s-b7__row {
  display: block;
  padding: 50px;
  background: var(--vista-blue-1);
  color: var(--rich-black-1);
  transition: background-color var(--t-base), color var(--t-base);
}

/* Variant S9_Card/Hov: the surface turns accent and every line, the price
   included, drops to the primary text colour.                             */
.s-b7 .s-b7__row:hover,
.s-b7 .s-b7__row:focus-visible {
  background: var(--amber-4);
  color: var(--rich-black-1);
}

.s-b7 .s-b7__row-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--layout-gutter);
}
.s-b7 .s-b7__name,
.s-b7 .s-b7__price {
  white-space: nowrap;
}
.s-b7 .s-b7__price {
  color: var(--editorial-white-4);
  text-align: right;
}
.s-b7 .s-b7__row:hover .s-b7__price,
.s-b7 .s-b7__row:focus-visible .s-b7__price {
  color: inherit;
}

.s-b7 .s-b7__desc {
  display: block;
  margin-top: var(--layout-gutter);
}

/* --- Call to action ----------------------------------------------------- */
.s-b7 .s-b7__actions {
  margin-top: 50px;
  text-align: center;
}
.s-b7 .s-b7__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 25px;
  white-space: nowrap;
  background: var(--action-fill);
  box-shadow: inset 0 0 0 3px var(--action-fill);
  color: var(--content-on-accent);
  transition: background-color var(--t-base), box-shadow var(--t-base);
}
.s-b7 .s-b7__cta:hover,
.s-b7 .s-b7__cta:focus-visible {
  background: var(--action-fill-hover);
  box-shadow: inset 0 0 0 3px var(--action-border-hover);
}

/* ===== business/b8.css ===== */
/* ==========================================================================
   For Business Experts — block 8, the Discovery Sprint offer
   Figma: node 909:10373 "Section 8 [bleed:both]", 1440 x 931.

   The layer name says bleed:both, but nothing in the block reaches the right
   window edge: the photograph's frame is 1187 wide (253 → 1440) while its
   image content is only 935 and the remaining 252 are transparent — checked
   on the export, which is 935 of picture and then empty. The composition's
   real right edge is macket 1188, exactly where Main's section 10 — the same
   composition, the same photograph — pins its own. So this is built as
   bleed:left with `--bleed-stop: 15.075 %` (1 − 1138 / 1340), and every
   horizontal measure inside is a share of the 1188 macket frame.

   Vertical: 485 to the panel column, then 360 panel + 25 + 61 button = 931.
   ========================================================================== */

.s-b8 .s-b8__bleed {
  --bleed-stop: 15.075%;
  position: relative;
  padding-top: 485px;          /* macket y of the panel column */
}

/* --- Amber band, macket 0 - 935 x 0 - 225 -------------------------------- */
.s-b8 .s-b8__band {
  position: absolute;
  left: 0;
  top: 0;
  width: 78.7037%;             /* 935 / 1188 */
  height: 225px;
  background: var(--amber-4);
  z-index: 0;
}

/* --- Photo, macket 253,50 · 935 x 526 ------------------------------------ */
.s-b8 .s-b8__media {
  position: absolute;
  left: 21.2963%;              /* 253 / 1188 */
  top: 50px;
  width: 78.7037%;             /* 935 / 1188 */
  margin: 0;
  z-index: 1;
}

.s-b8 .s-b8__media img {
  width: 100%;
  aspect-ratio: 935 / 526;
  object-fit: cover;
}

/* The band, at half opacity, carried across the top of the photo. In the
   file this is the same rectangle masked by the photo (909:10359 at 50 %
   inside mask group 909:10357); the intersection is 935 - 253 wide and
   225 - 50 tall, measured from the photo's own corner. It is drawn here and
   NOT baked into the exported photograph.                                  */
.s-b8 .s-b8__tint {
  position: absolute;
  left: 0;
  top: 0;
  width: 72.9412%;             /* 682 / 935 */
  height: 175px;
  background: var(--amber-4);
  opacity: 0.5;
}

/* --- "DISCOVERY" over "SPRINT", centred on the photo --------------------- */
.s-b8 .s-b8__lockup {
  position: absolute;
  left: 60.6061%;              /* 720 / 1188 — the photo's centre line */
  top: 300px;
  width: 55.3872%;             /* 658 / 1188 */
  transform: translateX(-50%);
  display: grid;
  text-align: center;
  z-index: 2;
}

.s-b8 .s-b8__lockup > * {
  grid-area: 1 / 1;
}

.s-b8 .s-b8__script {
  color: var(--editorial-white-4);
  z-index: 1;                  /* the handwriting sits over the Mulish word */
}

.s-b8 .s-b8__word {
  margin-top: 50px;
  color: var(--amber-4);
}

/* --- Panel + button column, macket 505,485 · 430 wide -------------------- */
.s-b8 .s-b8__col {
  position: relative;
  z-index: 3;
  margin-left: 42.5084%;       /* 505 / 1188 */
  width: 36.1953%;             /* 430 / 1188 */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--layout-gutter);
}

.s-b8 .s-b8__panel {
  width: 100%;
  background: var(--vista-blue-1);
  padding: var(--layout-gutter) var(--layout-gutter) 50px;
}

.s-b8 .s-b8__panel-in {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--layout-gutter);
  text-align: center;
  color: var(--rich-black-1);
}

.s-b8 .s-b8__lead,
.s-b8 .s-b8__copy,
.s-b8 .s-b8__price {
  width: 100%;
}

.s-b8 .s-b8__price {
  color: var(--editorial-white-4);
}

/* --- Button_form 909:10369 ----------------------------------------------
   The stroke is the same colour as the fill at rest, so the box does not
   change size when the hover state empties the fill.                       */
.s-b8 .s-b8__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 25px;
  white-space: nowrap;
  background: var(--action-fill);
  box-shadow: inset 0 0 0 3px var(--action-fill);
  color: var(--rich-black-1);
  cursor: pointer;
  transition: background-color var(--t-fast) ease, box-shadow var(--t-fast) ease;
}

.s-b8 .s-b8__cta:hover,
.s-b8 .s-b8__cta:focus-visible {
  background: var(--action-fill-hover);
  box-shadow: inset 0 0 0 3px var(--action-border-hover);
}

/* ===== business/b9.css ===== */
/* ==========================================================================
   For Business Experts — block 9, the founder
   Figma: node 998:11940 "Section 12", tagged frame 998:11941
   ("Section 12 [bleed:left]", 1339.97 x 682).
   Intent tag: bleed:left. The amber slab runs off the LEFT window edge; the
   right edge is pinned to macket x = 1340, i.e. 1290 from the working area's
   left edge, so --bleed-stop is 1 - 1290 / 1340 = 3.7313 %.
   Horizontal measures are shares of the macket frame width (1340).

   This is the same composition Main draws in its own section 12, down to the
   copy, so it reuses the portrait and the three social glyphs already in
   assets/.
   ========================================================================== */

.s-b9 .s-b9__bleed {
  --bleed-stop: 3.7313%;
  display: flex;
  align-items: flex-start;
}

/* --- Portrait: amber slab, photo, amber tint over the slab's half -------- */
.s-b9 .s-b9__media {
  position: relative;
  flex: 0 0 44.3284%;          /* 594 / 1340 — slab 278 + photo out to 594 */
}

.s-b9 .s-b9__media img {
  position: relative;
  z-index: 1;
  width: 91.5825%;             /* 544 / 594 */
  margin-left: 8.4175%;        /* 50  / 594 */
  margin-top: var(--layout-gutter);
  aspect-ratio: 544 / 657;
  object-fit: cover;
}

.s-b9 .s-b9__slab,
.s-b9 .s-b9__tint {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 46.8013%;             /* 278 / 594 */
  background: var(--amber-4);
}

/* The second slab lies over the photograph and tints its left half. */
.s-b9 .s-b9__tint {
  z-index: 2;
  opacity: 0.5;
}

/* --- Text column, macket 568.97 wide 771 --------------------------------
   It overlaps the photo column by one gutter, which is how the heading in
   the file reaches back past the photo's right edge.                       */
.s-b9 .s-b9__body {
  position: relative;
  z-index: 3;
  flex: 0 0 57.5373%;          /* 771 / 1340 */
  margin-left: -1.8657%;       /* -25 / 1340 */
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--layout-gutter);
}

.s-b9 .s-b9__intro {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 50px;
}

/* --- "FOUNDER" written over "ALEX TKACHENKO" ---------------------------- */
.s-b9 .s-b9__lockup {
  width: 100%;
  display: grid;
}

.s-b9 .s-b9__lockup > * {
  grid-area: 1 / 1;
}

.s-b9 .s-b9__script {
  width: 83.28%;
  color: var(--amber-4);
  z-index: 1;                  /* the handwriting sits over the Mulish name */
}

.s-b9 .s-b9__name {
  margin-top: 50px;
  color: var(--rich-black-1);
}

/* --- Six-column text blocks, right aligned in the column ---------------- */
.s-b9 .s-b9__sub,
.s-b9 .s-b9__bio,
.s-b9 .s-b9__quote {
  width: 85.214%;              /* 657 / 771 */
  color: var(--rich-black-1);
}

/* --- Social links ------------------------------------------------------- */
.s-b9 .s-b9__social {
  display: flex;
  align-items: center;
  gap: var(--layout-gutter);
}

.s-b9 .s-b9__social a {
  display: block;
  transition: opacity var(--t-fast) ease;
}

.s-b9 .s-b9__social a:hover,
.s-b9 .s-b9__social a:focus-visible {
  opacity: 0.6;
}

/* ===== business/b10.css ===== */
/* ==========================================================================
   For Business Experts — block 10, the FAQ accordion
   Figma: node 909:10536 "Section 10", 1440 x 654 — a full-window Vista Blue 1
   band with 100 top and bottom: 100 + 454 + 100 = 654.
   Card component: FAQ_for_business, set 909:10409, four rows, each with a
   Pas and an Act variant.

   The block carries `--gap: 0`: the file butts the blue band straight against
   the founder block above it, exactly as Main's FAQ does.
   ========================================================================== */

.s-b10 {
  background: var(--vista-blue-1);
  padding-block: 100px;
}

/* The block is 885 = eight columns with their gutters, centred in the working
   area: two columns and a gutter on each side (2 + 8 + 2 = 12).            */
.s-b10 .s-b10__grid {
  row-gap: 50px;
}
.s-b10 .s-b10__title,
.s-b10 .s-b10__list {
  grid-column: 3 / span 8;
}

/* --- Heading ------------------------------------------------------------
   The Comforter word lies over the Mulish heading in one grid cell. The
   heading sits 50 down inside the 85-tall group; the accent starts at 0.
   85 + 50 + 319 = 454.                                                     */
.s-b10 .s-b10__title {
  display: grid;
  text-align: center;
  font: inherit;
}
.s-b10 .s-b10__title > * {
  grid-area: 1 / 1;
  width: 100%;
}
.s-b10 .s-b10__title-main {
  margin-top: 50px;
}
.s-b10 .s-b10__title-accent {
  color: var(--editorial-white-4);
}

/* --- Rows ---------------------------------------------------------------
   Collapsed row is 61: 25 + cap height 11 + 25. Gap between rows 25, so the
   four of them are 4 * 61 + 3 * 25 = 319.                                  */
.s-b10 .s-b10__list {
  display: flex;
  flex-direction: column;
  gap: var(--layout-gutter);
}
.s-b10 .s-b10__item {
  background: var(--editorial-white-4);
}
.s-b10 .s-b10__question {
  font: inherit;
}
.s-b10 .s-b10__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--layout-gutter);
  width: 100%;
  padding: 25px 25px 25px 50px;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
}
.s-b10 .s-b10__label {
  color: var(--content-primary);
}

/* The chevron is Main_S11_Arrows: a 45-degree rule, 21.213 x 10.607. The Act
   variant turns it over; there is no separate "up" file and none is needed. */
.s-b10 .s-b10__chevron {
  flex: 0 0 auto;
  width: 21.213px;
  height: 10.607px;
  transition: transform var(--t-base) ease;
}
.s-b10 .s-b10__item.is-open .s-b10__chevron {
  transform: rotate(180deg);
}

/* --- Panel --------------------------------------------------------------
   Animated on grid-template-rows so the real content height is measured
   instead of guessed with a max-height. visibility keeps the collapsed
   answer out of the accessibility tree once the transition has finished. */
.s-b10 .s-b10__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--t-base) ease;
}
.s-b10 .s-b10__panel-inner {
  overflow: hidden;
  visibility: hidden;
  transition: visibility 0s linear var(--t-base);
}
.s-b10 .s-b10__item.is-open .s-b10__panel {
  grid-template-rows: 1fr;
}
.s-b10 .s-b10__item.is-open .s-b10__panel-inner {
  visibility: visible;
  transition-delay: 0s;
}

/* Open row: 25 + question + 50 + answer + 50. 25 of the 50 between question
   and answer is the trigger's own bottom padding, which is what keeps the
   collapsed row at 61; the other 25 is here. The answer column is 607 wide —
   228 of the 885 stays empty on the right, as the Act variants draw it.   */
.s-b10 .s-b10__answer {
  padding: 25px 228px 50px 50px;
  color: var(--content-primary);
}

/* ===== business/b11.css ===== */
/* ==========================================================================
   For Business Experts — block 11, three ways to start
   Figma: node 1003:12310 "Section 13", 1340 x 759 — the whole working area.
   Card component: Service_S6_Card, instances 1003:12317 / 12318 / 12319.
   159 heading + 50 + 550 cards = 759. No fill: the page background shows.

   This is the same block Main draws as its section 14, down to the three
   photographs and the three button labels, so the photographs already in
   assets/ are reused.
   ========================================================================== */

.s-b11 .s-b11__inner {
  display: flex;
  flex-direction: column;
  gap: 50px;
}

/* --- Heading ------------------------------------------------------------
   The Comforter word lies over the Mulish heading in one grid cell. The
   heading sits 50 down inside the 85-tall group; the accent starts at 0.  */
.s-b11 .s-b11__intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--layout-gutter);
  text-align: center;
}
.s-b11 .s-b11__title {
  display: grid;
  width: 100%;
  max-width: 753px;
  font: inherit;
}
.s-b11 .s-b11__title > * {
  grid-area: 1 / 1;
  width: 100%;
}
.s-b11 .s-b11__title-main {
  margin-top: 50px;
}
.s-b11 .s-b11__title-accent {
  color: var(--amber-4);
}
.s-b11 .s-b11__subheading {
  width: 100%;
  max-width: 480px;
}

/* --- Cards --------------------------------------------------------------
   Three 430 blocks with the 25 gutter: 430 * 3 + 25 * 2 = 1340 exactly.   */
.s-b11 .s-b11__cards {
  --flow-basis: 430px;
}

/* --- Service_S6_Card, Pas → Hov -----------------------------------------
   The text panel swaps Rich Black 3 for Amber 4. Nothing else moves: the
   type stays Rich Black 1, the photograph and the button keep their place.
   :focus-within carries it to the keyboard, since the whole card is a
   target for the link inside it.                                           */
.s-b11 .s-b11__card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 550px;
  background: var(--rich-black-3);
  transition: background-color var(--t-base) ease;
}

.s-b11 .s-b11__card:hover,
.s-b11 .s-b11__card:focus-within {
  background: var(--amber-4);
}

/* The text panel ends at 229 in the macket (41.64 % of 550). It is a floor,
   not a fixed height: below 1440 the card narrows, the title wraps onto
   more lines and the panel grows into the photo rather than over it.      */
.s-b11 .s-b11__panel {
  flex: 0 0 auto;
  min-height: 229px;
  display: flex;
  flex-direction: column;
  gap: var(--layout-gutter);
  padding: 50px 25px 25px;
}
/* No font reset on the title: it carries .t-intro-black, and resetting the
   h3 here would win on the cascade and undo the type class.              */
.s-b11 .s-b11__card-title,
.s-b11 .s-b11__card-line {
  color: var(--content-primary);
}

.s-b11 .s-b11__photo-wrap {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}
.s-b11 .s-b11__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The button sits over the photo, 25 from the bottom and 25 from the right;
   its width is the label plus 25 of padding on each side, which is what
   makes the three buttons three different widths in the macket.           */
.s-b11 .s-b11__button {
  position: absolute;
  right: 25px;
  bottom: 25px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 25px;
  background: var(--action-fill);
  color: var(--content-on-accent);
  transition: background-color var(--t-fast) ease, box-shadow var(--t-fast) ease;
}
/* The label is trimmed to its cap height, so 25 + 11 + 25 gives the 61 of
   the macket. It carries the trim rather than the anchor because only a
   flex item is a block container of its own text.                        */
.s-b11 .s-b11__button-label {
  white-space: nowrap;
}
.s-b11 .s-b11__button:hover,
.s-b11 .s-b11__button:focus-visible {
  background: var(--action-fill-hover);
  box-shadow: inset 0 0 0 3px var(--action-border-hover);
}

/* ===== business/b12.css ===== */
/* ==========================================================================
   For Business Experts — block 12, "Your book starts here"
   Figma: node 1003:12320 "Section 14", 885 x 796 at macket x 278, centred.
   Form component: Main_S14_Form, instance 1003:12325, component set 1356:8297
   with the four states Default 152:994, Loading 1356:8298, Error 1356:8324,
   Send 1356:8351. Field plate: Main_S14_Form_text_card, set 144:914.
   85 heading + 50 + 661 form = 796.
   ========================================================================== */

/* The heading block is 885 = eight columns with their gutters, centred:
   two columns and a gutter each side. The form is 657 = six columns, also
   centred, so it starts one column plus a gutter inside the heading.      */
.s-b12 .s-b12__grid {
  row-gap: 50px;
}
.s-b12 .s-b12__title {
  grid-column: 3 / span 8;
}
.s-b12 .s-b12__form {
  grid-column: 4 / span 6;
}

/* --- Heading ------------------------------------------------------------
   The Comforter word lies over the Mulish heading in one grid cell. The
   heading sits 50 down inside the 85-tall group; the accent starts at 0.  */
.s-b12 .s-b12__title {
  display: grid;
  justify-items: center;
  text-align: center;
  font: inherit;
}
.s-b12 .s-b12__title > * {
  grid-area: 1 / 1;
  width: 100%;
  max-width: 617px;
}
.s-b12 .s-b12__title-main {
  margin-top: 50px;
}
.s-b12 .s-b12__title-accent {
  color: var(--amber-4);
}

/* --- Form ---------------------------------------------------------------
   50 + 420 fields + 25 + 61 button + 44 + 11 status + 50 = 661.           */
.s-b12 .s-b12__form {
  display: flex;
  flex-direction: column;
  gap: var(--layout-gutter);
  padding: 50px 25px;
  background: var(--vista-blue-1);
}
.s-b12 .s-b12__fields {
  display: flex;
  flex-direction: column;
  gap: var(--layout-gutter);
}
.s-b12 .s-b12__field {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.s-b12 .s-b12__label {
  color: var(--content-on-brand);
}

/* --- Plates -------------------------------------------------------------
   Editorial White 4 plate, no border in the resting state. 15 of padding
   all round: 15 + cap height 11 + 15 = 41 for the two single-line fields. */
.s-b12 .s-b12__plate {
  width: 100%;
  border: 0;
  background: var(--editorial-white-4);
  color: var(--content-primary);
}
.s-b12 .s-b12__input {
  height: 41px;
  padding: 0 15px;
}
.s-b12 .s-b12__textarea {
  height: 225px;
  padding: 15px;
  resize: vertical;
}
.s-b12 .s-b12__plate::placeholder {
  color: var(--vista-blue-1);
  opacity: 1;
}

/* Focus is a white plate with a 3px Amber 4 stroke — the decision base.css
   already applies site wide. Here the stroke sits on the plate edge rather
   than 2 outside it, which is how Main_S14_Form_text_card draws its Act
   variants (144:911 small, 144:910 big).                                  */
.s-b12 .s-b12__plate:focus-visible {
  outline-offset: 0;
  background-color: var(--editorial-white-2);
}

/* --- Actions ------------------------------------------------------------ */
.s-b12 .s-b12__actions {
  display: flex;
  align-items: center;
  gap: var(--layout-gutter);
}
.s-b12 .s-b12__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 25px;
  border: 0;
  background: var(--action-fill);
  color: var(--content-on-accent);
  cursor: pointer;
  transition: background-color var(--t-fast) ease, box-shadow var(--t-fast) ease;
}
/* The label is trimmed to its cap height, so 25 + 11 + 25 gives the 61 of
   the macket. It carries the trim rather than the button because only a
   flex item is a block container of its own text.                        */
.s-b12 .s-b12__submit-label {
  white-space: nowrap;
}
.s-b12 .s-b12__submit:hover:not([disabled]),
.s-b12 .s-b12__submit:focus-visible:not([disabled]) {
  background: var(--action-fill-hover);
  box-shadow: inset 0 0 0 3px var(--action-border-hover);
}

/* The Loading variant leaves the button looking exactly as it does at rest,
   so nothing is restyled here — it is only made unusable.                 */
.s-b12 .s-b12__submit[disabled] {
  cursor: progress;
}

/* --- Status line --------------------------------------------------------
   At rest the reassurance line stands alone on the left. In the three other
   states the state word takes the left and the message takes the right.
   25 of the 44 between the button row and the status line comes from the
   form's own gap, the remaining 19 from here.                             */
.s-b12 .s-b12__status {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--layout-gutter);
  margin-top: 19px;
  color: var(--content-on-brand);
}
.s-b12 .s-b12__message {
  text-align: right;
}
.s-b12 .s-b12__hint[hidden],
.s-b12 .s-b12__state[hidden],
.s-b12 .s-b12__message[hidden] {
  display: none;
}

/* ===== business/b13.css ===== */
/* ==========================================================================
   For Business Experts — block 13, the Business Expert Guide sign-up
   Figma: node 909:10630 "Section 11", 1276 x 645 at macket x 164.
     Frame 341 (909:10631)  430 picture column, bottom aligned
     Frame 342 (909:10634)  738 text column at macket x 619, 501 tall
   609 picture + 25 + 11 caption = 645, and the text column is 144 down from
   the block's top so the two columns end level.

   The two columns start 114 into the working area (macket 164) and measure
   430 and 738 with the 25 gutter between them, so they are written as shares
   of the working area rather than as grid items: 738 is not a column count.

   This is the same row the Free resources screen draws three times
   (sections/free-resources/fr2), on the page background instead of a Rich
   black 3 band, with the caption moved under the picture and an
   "Unsubscribe any time." line added under the field.
   ========================================================================== */

.s-b13 .s-b13__row {
  margin-left: 8.50746%;       /* macket 164 - 50 = 114 of 1340 */
  display: flex;
  align-items: flex-end;
  gap: var(--layout-gutter);
}

/* 609 picture + 25 + 11 caption = 645. Both columns shrink, so the
   430 : 738 proportion holds all the way down to 1200 instead of the picture
   staying put and the text taking the whole squeeze.                       */
.s-b13 .s-b13__figure {
  flex: 0 1 35.07341%;         /* 430 / 1226 — the row, not the working area */
  min-width: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--layout-gutter);
}
.s-b13 .s-b13__photo {
  width: 100%;
  height: auto;
  aspect-ratio: 595 / 842;
  object-fit: cover;
}
.s-b13 .s-b13__caption {
  color: var(--content-primary);
}

/* The text column's CONTENT ends level with the bottom of the picture, not
   with the bottom of the caption. 36 is the caption's own 11 plus the 25
   above it, so the offset is the caption block rather than a magic number. */
.s-b13 .s-b13__text {
  flex: 0 1 60.19576%;         /* 738 / 1226 — the row, not the working area */
  min-width: 0;
  padding-bottom: 36px;
  display: flex;
  flex-direction: column;
  gap: 150px;
}

/* --- Heading ------------------------------------------------------------
   The Comforter word lies over the Mulish heading in one grid cell. The
   heading sits 50 down inside the 85-tall group; the accent starts at 0.
   The group is 657 wide inside the 738 column.                            */
.s-b13 .s-b13__title {
  display: grid;
  width: 100%;
  max-width: 657px;
  font: inherit;
}
.s-b13 .s-b13__title > * {
  grid-area: 1 / 1;
  width: 100%;
}
.s-b13 .s-b13__title-main {
  margin-top: 50px;
}
.s-b13 .s-b13__title-accent {
  color: var(--amber-4);
}

/* --- "What's inside" ----------------------------------------------------
   11 + 25 + 230 = 266.                                                    */
.s-b13 .s-b13__detail {
  display: flex;
  flex-direction: column;
  gap: var(--layout-gutter);
}
.s-b13 .s-b13__detail-title {
  color: var(--content-primary);
}
.s-b13 .s-b13__detail-body {
  display: flex;
  flex-direction: column;
  gap: 50px;
}

/* Three points 25 apart: 11 * 3 + 25 * 2 = 83. The em dash is a separate run
   in the file, followed by three spaces; HTML collapses runs of spaces, so
   the gap is set here instead of typed.                                   */
.s-b13 .s-b13__points {
  display: flex;
  flex-direction: column;
  gap: var(--layout-gutter);
  max-width: 657px;
}
.s-b13 .s-b13__point {
  display: flex;
  gap: 12px;
  color: var(--content-primary);
}
.s-b13 .s-b13__dash {
  flex: 0 0 auto;
}

/* --- The sign-up form ---------------------------------------------------
   61 row + 25 + 11 note = 97. 544 plate + 25 + 169 button = 738. The plate
   is the Main_S14_Form_text_card variant with a 3px Vista Blue 1 stroke and
   no fill, not the Editorial White 4 plate the contact forms use.         */
.s-b13 .s-b13__form {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--layout-gutter);
}
.s-b13 .s-b13__row-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--layout-gutter);
}
/* The field's label is not drawn in the macket — the placeholder carries the
   meaning there. It stays in the markup for the screen reader and is taken
   out of the visual flow rather than dropped. Same for the status line while
   it has nothing to say: out of flow so it cannot add a gap.              */
.s-b13 .s-b13__label,
.s-b13 .s-b13__status:empty {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
/* 544 is what the plate measures at the reference width once the 169 button
   and the 25 between them come out of the 738 column. It is written as "take
   what is left" rather than as the literal 544: with 544 as the flex basis
   the pair wraps the moment the column drops under 738, which is most of the
   1200-1440 band, and the button drops to a line of its own.              */
.s-b13 .s-b13__plate {
  flex: 1 1 0;
  min-width: 0;
  height: 61px;
  padding: 0 15px;
  border: 3px solid var(--vista-blue-1);
  background: none;
  color: var(--content-primary);
}
.s-b13 .s-b13__plate::placeholder {
  color: var(--vista-blue-1);
  opacity: 1;
}
.s-b13 .s-b13__plate:focus-visible {
  outline-offset: 0;
  background-color: var(--editorial-white-2);
}

.s-b13 .s-b13__submit {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 25px;
  border: 0;
  background: var(--action-fill);
  color: var(--content-on-accent);
  cursor: pointer;
  transition: background-color var(--t-fast) ease, box-shadow var(--t-fast) ease;
}
/* The label is trimmed to its cap height, so 25 + 11 + 25 gives the 61 of
   the macket. It carries the trim rather than the button, because only a
   flex item is a block container of its own text.                         */
.s-b13 .s-b13__submit-label {
  white-space: nowrap;
}
.s-b13 .s-b13__submit:hover:not([disabled]),
.s-b13 .s-b13__submit:focus-visible:not([disabled]) {
  background: var(--action-fill-hover);
  box-shadow: inset 0 0 0 3px var(--action-border-hover);
}
.s-b13 .s-b13__submit[disabled] {
  cursor: progress;
}

/* --- "unsubscribe any time." -------------------------------------------
   909:10649: Base, lowercased by the style, right aligned, 544 wide — the
   width of the field, not of the whole row. The lowercase is a transform,
   not typed capitals.

   ITS FILL IN THE FILE IS EDITORIAL WHITE 4, WHICH IS THIS PAGE'S OWN
   BACKGROUND, so the line is invisible in the macket. It is drawn here in
   the secondary text colour instead; see b13.assets.md. Revert the one
   declaration below if the file is right and the line is meant to be a
   ghost.                                                                  */
.s-b13 .s-b13__note {
  width: 73.7127%;             /* 544 / 738 */
  text-align: right;
  text-transform: lowercase;
  color: var(--content-secondary);
}

.s-b13 .s-b13__status {
  color: var(--content-primary);
}

/* ===== m-base.css ===== */
/* ==========================================================================
   Mobile foundation — Figma page "Mobile", hand-off document v1.0.
   Load AFTER every desktop stylesheet. See CONTRACT_MOBILE.md.

   The whole file is one media query. Below 1024 this layer overrides the
   desktop layer; at 1024 and up not a single rule here applies, so the
   desktop layout is untouched byte for byte.

   Why an overlay rather than two wrapped halves: the desktop CSS is live and
   already verified. Wrapping it would rewrite every one of its rules to prove
   a layout that is not changing. This way the desktop bytes stay as they are
   and the mobile layer states only its differences.
   ========================================================================== */

@media (max-width: 1023.98px) {

  /* --- 3.1 Grid ---------------------------------------------------------
     402 reference · 6 columns · Stretch · margin 25 · gutter 25
     Working area 352. Column 37.83 is derived and written nowhere.        */
  :root {
    --m-reference: 402px;
    --m-margin:    25px;
    --m-gutter:    25px;
    --m-content:   352px;   /* at the reference width                      */
    --m-max:       430px;   /* the column stops growing here (3.2)         */

    /* 4. Three gaps carry 94 % of 3 010 Auto Layout nodes. */
    --m-gap-tight: 10px;
    --m-gap-mid:   15px;
    --m-gap:       25px;
    --m-gap-block: 50px;
    --m-gap-big:   75px;

    /* 9.1 Header: logo at y 59, rule at y 89. */
    --m-header-h:  89px;

    /* 5.2 Touch targets grow from the centre toward this. */
    --m-tap:       44px;
  }

  /* --- 3.2 Reflow -------------------------------------------------------
     The desktop floor is 1200 and it is what puts a horizontal scrollbar on
     a phone. Below the breakpoint there is no floor: the page is as wide as
     the window and never wider.                                           */
  body {
    min-width: 0;
    overflow-x: clip;
  }

  /* Working area. Below 430 it stretches with the window and the 25 margins
     hold; above 430 it stops at 380 and centres, and the window fills with
     the page ground. Nothing scales — sizes and spacing are the macket's.  */
  .container {
    width: min(100% - var(--m-margin) * 2, calc(var(--m-max) - var(--m-margin) * 2));
    margin-inline: auto;
  }

  /* 6 columns, not 12. A block that asked for the desktop grid gets the
     mobile one without having to know which layer it is in.               */
  .grid12 {
    grid-template-columns: repeat(6, 1fr);
    gap: var(--m-gutter);
  }

  /* --- Intent tags ------------------------------------------------------
     `flow` on mobile is a single column: two 430-basis children side by side
     cannot fit 352. Bleed keeps its meaning — the full window, which above
     430 is wider than the column.                                          */
  .is-flow { display: block; }
  .is-flow > * + * { margin-top: var(--m-gap); }

  .is-bleed-left,
  .is-bleed-right,
  .is-bleed-both,
  .m-bleed {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: 0;
  }

  /* --- 3.1 Background lines ---------------------------------------------
     Unlike desktop, where the line layer spans the page, `BackgroundLines`
     on mobile is 352 wide and starts below the header — it lives inside the
     working area. The desktop layer's seven lines at 12.5 % of the window
     are wrong here and are switched off; each screen draws its own set
     inside its own container.                                              */
  .page > .gridlines { display: none; }

  /* --- 5.6 Touch targets ------------------------------------------------
     The area grows from the centre of the element toward 44 on each axis,
     independently, and never moves or resizes what is drawn. Where a
     neighbour is closer than 44, the block sets --tap-h (or --tap-w) to
     twice the half-gap for EVERY item in that row, so the row is even under
     the thumb (5.3).

     ::after and not padding: padding would move the element.               */
  .m-tap { position: relative; }
  .m-tap::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width:  max(100%, var(--tap-w, var(--m-tap)));
    height: max(100%, var(--tap-h, var(--m-tap)));
  }

  /* An indicator is not a target: carousel dots and arrows show that more
     exists, they do not move anything (5.7).                               */
  .m-indicator { pointer-events: none; }

  /* --- 7 Type -----------------------------------------------------------
     Eleven of the twelve mobile styles are the desktop values unchanged —
     the 15 and 25 sizes are the same file-wide. Only the Comforter accent
     differs, and it differs by half: 50 on mobile against 100 on desktop.
     The styles are named "… Mobile" in Figma for exactly this reason.      */
  .t-heading-accent,
  .t-heading-accent-small { font-size: 50px; }

  /* 7.2 The one style with no desktop counterpart: the numeral on the error
     page. 500 is the size, not a typo.                                     */
  .t-404 {
    font-family: "Comforter", cursive;
    font-weight: 400;
    font-size: 500px;
    letter-spacing: 0.05em;
  }

  /* --- 3.2 Long pages ---------------------------------------------------
     Screens run to 14 382. Smooth anchor scrolling has to clear the pinned
     header or the target lands underneath it.                              */
  :target { scroll-margin-top: calc(var(--m-header-h) + var(--m-gap)); }

}

/* ==========================================================================
   Layer switch. A page carries both sets of blocks; each layer hides the
   other's. The mobile blocks are marked `is-m` by the screen that writes
   them; everything else in <main> is the desktop layer.

   The second query is the only rule in this file that applies at 1024 and up,
   and it can only hide blocks that a desktop-only build never emits — so the
   desktop layer is still untouched.
   ========================================================================== */
@media (max-width: 1023.98px) {
  .page > main > section:not(.is-m) { display: none; }
  .page > main > .is-m + .is-m { margin-top: var(--gap-m, var(--m-gap-big)); }
  .page > main > .is-m:first-child { margin-top: 0; }
}
@media (min-width: 1024px) {
  .page > main > .is-m { display: none; }
}

/* ===== m-header.css ===== */
/* ==========================================================================
   Mobile header and menu — Figma `Menu_mob` 1244:11197.
   Inside the mobile media query; nothing here exists at 1024 and up.
   ========================================================================== */

@media (max-width: 1023.98px) {

  /* The desktop header and its three sub-rows do not appear on a phone: the
     mobile menu is an overlay with its own, flatter list. */
  .page > .site-header { display: none; }

  .m-header[hidden] { display: block; }   /* `hidden` is for the no-CSS case */

  .m-header {
    position: sticky;
    top: 0;
    z-index: 10;
    height: var(--m-header-h);            /* 89 — the rule sits on the edge   */
  }
  .page > .m-header { position: sticky; z-index: 10; }

  /* 8. The one effect in the whole mobile version. */
  .m-header__plate {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: var(--header-plate);
    -webkit-backdrop-filter: blur(var(--header-blur));
    backdrop-filter: blur(var(--header-blur));
  }

  /* Logo at 25,59. Its touch area reaches 44 on the vertical — the room is
     there, and nothing else is near it. */
  .m-header__logo {
    position: absolute;
    z-index: 2;
    left: var(--m-margin);
    top: 59px;
    --tap-w: 107px;
  }
  .m-header__logo img { width: auto; height: 15px; }

  /* The button at 332,49 is 70 × 40 in the file: wide enough across, four
     pixels short down. The area takes the full 44 on both axes; the nearest
     other target is the logo, 200 away. */
  .m-header__toggle {
    position: absolute;
    z-index: 2;
    right: var(--m-margin);
    top: 49px;
    width: 45px;
    height: 40px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
  }

  /* Three bars drawn in CSS, as the file draws them — not an exported icon. */
  .m-header__bars,
  .m-header__bars::before,
  .m-header__bars::after {
    display: block;
    width: 20px;
    height: 2px;
    background: var(--content-primary);
  }
  .m-header__bars { position: relative; }
  .m-header__bars::before,
  .m-header__bars::after { content: ""; position: absolute; left: 0; }
  .m-header__bars::before { top: -6px; }
  .m-header__bars::after  { top:  6px; }

  /* Line 54 at y 89, 352 wide — inside the working area, not edge to edge. */
  .m-header__rule {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
    width: min(100% - var(--m-margin) * 2, calc(var(--m-max) - var(--m-margin) * 2));
    margin: 0;
    border: 0;
    border-top: var(--line-width) solid var(--line-color);
  }

  /* --- The overlay ------------------------------------------------------
     402 × 830 in the file, anchored under the header. On a real phone it
     takes the window, because a fixed height would leave the page showing
     under it on a tall screen and cut the buttons off on a short one.     */
  .page > .m-header { position: sticky; z-index: 10; }
  .page > .m-menu   { position: fixed;  z-index: 20; }

  .m-menu {
    position: fixed;
    inset: 0;
    z-index: 20;
    background: var(--surface-page);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .m-menu[hidden] { display: none; }

  .m-menu__inner {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    padding-block: 49px var(--m-gap-block);
  }

  /* Close at 332,0 · 45 × 40 with a 20 × 20 glyph, then the rule at y 40. */
  .m-menu__head { position: relative; height: 40px; }

  .m-menu__close {
    position: absolute;
    right: 0;
    top: 0;
    width: 45px;
    height: 40px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
  }
  .m-menu__close span,
  .m-menu__close span::before,
  .m-menu__close span::after { display: block; }
  .m-menu__close span {
    position: relative;
    width: 20px;
    height: 20px;
  }
  .m-menu__close span::before,
  .m-menu__close span::after {
    content: "";
    position: absolute;
    left: 0;
    top: 9px;
    width: 20px;
    height: 2px;
    background: var(--content-primary);
  }
  .m-menu__close span::before { transform: rotate(45deg); }
  .m-menu__close span::after  { transform: rotate(-45deg); }

  .m-menu__rule,
  .m-menu__list li + li {
    border: 0;
    border-top: var(--line-width) solid var(--line-color);
  }
  .m-menu__rule { position: absolute; bottom: 0; left: 0; right: 0; margin: 0; }

  /* Nine items on a 41 step: the label sits 15 below its own rule, the row is
     26 tall. 41 between centres is under 44, so by 5.2 every area takes half
     the gap on each side — 41 — and by 5.3 every item in the list takes the
     same one, so the first and last are not larger than the rest. */
  .m-menu__list { margin-top: var(--m-gap); }
  .m-menu__list li { padding-bottom: 15px; }
  /* 15 above the label and 15 below gives a 42 step, not the file's 41: in
     Figma the rule is a zero-height line, in CSS it is a real pixel. The
     padding above absorbs it so the step lands on 41 exactly. */
  .m-menu__list li + li { padding-top: 14px; }
  .m-menu__list a { display: block; --tap-h: 41px; }

  /* The two calls to action and the address, at the foot of the overlay.
     `margin-top: auto` pins them down however tall the window is, which is
     what the file's fixed 646 does on a 830 frame. */
  .m-menu__foot {
    margin-top: auto;
    padding-top: var(--m-gap-big);
    display: grid;
    justify-items: center;
    gap: var(--m-gap-mid);
  }

  .m-menu__foot .m-btn {
    display: grid;
    place-items: center;
    width: 253px;
    max-width: 100%;
    height: 41px;
    text-align: center;
  }
  .m-menu__foot .m-btn--fill {
    background: var(--action-fill);
    color: var(--content-on-accent);
  }
  .m-menu__foot .m-btn--line {
    box-shadow: inset 0 0 0 3px var(--border-strong);
    color: var(--content-primary);
  }

  .m-menu__mail { margin-top: calc(var(--m-gap-block) + 6px); }
  .m-menu__mail a { --tap-h: 44px; }

  /* While the overlay is open the page underneath does not scroll. */
  body.is-m-menu-open { overflow: hidden; }

}

/* The mobile chrome exists in the markup at every width; only the media query
   keeps it off the desktop layer. `hidden` is removed by the script as soon
   as it runs, so without this the header renders twice above 1024. */
@media (min-width: 1024px) {
  .m-header, .m-menu, .m-footer { display: none !important; }
}

/* ===== m-footer.css ===== */
/* ==========================================================================
   Mobile footer — Figma `Footer_m` 1774:15900, 402 × 449.
   Inside the mobile media query; nothing here exists at 1024 and up.
   ========================================================================== */

@media (max-width: 1023.98px) {

  .page > .site-footer { display: none; }
  .m-footer[hidden] { display: block; }

  /* The file leaves 75 between the last block and the footer. The desktop
     layer sets its own gap on .site-footer, which is hidden down here, so
     this one has to be stated. */
  .page > .m-footer { margin-top: var(--m-gap-big); }

  .m-footer {
    background: var(--surface-brand);
    color: var(--content-on-brand);
    text-align: center;
  }

  /* The block runs edge to edge; the content keeps the 25 margins. */
  .m-footer__inner { padding-block: var(--m-gap) var(--m-gap-block); }

  .m-footer__logo {
    display: inline-block;
    --tap-h: 44px;
    --tap-w: 107px;
  }
  .m-footer__logo img { width: auto; height: 15px; }

  /* Three groups. The file sets them 10 apart, not 25: `Frame 481` runs
     logo 15 · 10 · group 169 · 10 · group 62 · 10 · group 98 = 374, which
     with the 25 above and 50 below is the footer's 449. The 25 that stood
     here was what made the block 46 too tall on all 37 screens. */
  .m-footer__group { margin-top: var(--m-gap-tight); }
  .m-footer__rule {
    margin: 0 0 var(--m-gap-mid);
    border: 0;
    border-top: var(--line-width) solid var(--content-on-brand);
  }

  /* Two lines, 30 tall in the file: 11 a line on a 19 step. */
  .m-footer__tagline { margin-inline: auto; max-width: 30ch; line-height: 19px; }

  /* Three marks on a 50 step: 50 between centres clears 44, so each area is
     the full 44 × 44 and they still do not touch. */
  .m-footer__social {
    display: flex;
    justify-content: center;
    gap: 25px;
    margin-top: var(--m-gap);
  }
  .m-footer__social a { display: block; }

  /* `text-box-trim` only takes effect on a block box: a bare <span> inside a
     grid is still inline, the trim is ignored, and the line keeps its full
     leading. Every trimmed label here is blockified for that reason — the
     same trap that put 202px of drift into the FAQ.
     Figma writes the three address lines on an 18 step from a 49-tall box. */
  .m-footer__office span { display: block; }
  .m-footer__office {
    display: grid;
    gap: 7px;
    margin-top: var(--m-gap);
    font-style: normal;
  }

  /* 5.3 — one row, one size. The step is 36 in the file, so every link in
     both lists takes a 36 band: the rows stay even under the thumb and no
     two areas meet. This is the floor the contract records at §5.4.        */
  .m-footer__reach,
  .m-footer__legal {
    display: grid;
    gap: 25px;
  }
  /* `block`, not `inline-block`: an inline-block still sits in a line box, so
     the <li> keeps the full leading even after the label itself is trimmed and
     the row measures 19 where the file measures 11. */
  .m-footer__reach a,
  .m-footer__legal a {
    display: block;
    --tap-h: 36px;
  }

  .m-footer__legal a { color: var(--content-on-inverse); }

}

/* ===== m-up.css ===== */
/* ==========================================================================
   Mobile "up" control — Figma `Button_form` 41 × 52, drawn at 25,143 on all
   37 screens. Contract §9.2.
   ========================================================================== */

@media (max-width: 1023.98px) {

  /* The desktop control is 61 × 72 and sits at the desktop margin; the mobile
     one is its own size at its own place, so the shared element is restyled
     rather than duplicated. */
  .site-up { position: relative; }
  .site-up::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width:  max(100%, var(--tap-w, var(--m-tap)));
    height: max(100%, var(--tap-h, var(--m-tap)));
  }

  .site-up {
    position: fixed;
    left: var(--m-margin);
    bottom: var(--m-margin);
    padding: 0;
    width: 41px;
    height: 52px;

    /* 5.5 — three pixels short across. The room is there: the nearest other
       target is the footer, and on a scrolled page nothing sits beside it. */
    --tap-w: 44px;
    --tap-h: 52px;
  }

  /* The file draws it at y 143, under the header. As a floating control it
     keeps the file's x and moves to the foot of the window, out of the
     reading column — the same decision as on desktop, and for the same
     reason: at 143 it would sit on whatever band is passing under it. */

  .site-up__label { font-size: 15px; }

}

/* ===== business/m1.css ===== */
/* ==========================================================================
   Business mobile — block 1, the hero.
   Figma: `For Business Experts_m` 1655:15662 / "Section 1" 1655:15809,
   402 x 785, top 89.

     photo        402 x 425, full window, at the top of the block
     plate        Vista Blue 1, full window, 402 x 360
     kicker       25 in from the plate top, centred
     lockup       "THAT SELLS YOUR THINKING…" with the script "The book" drawn
                  over it; the Mulish word hangs 15 below the top of the group,
                  which is as tall as the Comforter cap, 38
     lede         15 under the lockup, centred
     button       25 under the lede, the full 352

   This file also carries the vocabulary the screen's twelve blocks share —
   the heading lockup (`Group 89` / `Group 90`), the button (`Button_form`)
   and the two card surfaces. They are one component each in the file, so they
   are written once here rather than copied into twelve stylesheets.

   The whole file is one media query; nothing here exists at 1024 and up.
   ========================================================================== */

@media (max-width: 1023.98px) {

  /* ======================================================================
     Shared (bm- : business mobile; m- is taken by the shared mobile layer)

     The heading lockup — Figma `Group 89` / `Group 90`.
     Comforter 50 and Mulish 25 share one cell and the script is drawn over
     the word. The group is as tall as the script's cap height, 38, or as the
     15 offset plus the word where the word runs to more than one line —
     Section 1's three-line word makes the group 95. That is the file's own
     rule and it needs no measured height here.

     `display: grid` is also what lets the two labels carry `u-trim`: a grid
     item is a block box, and `text-box-trim` does nothing on an inline one.
     ====================================================================== */
  .bm-lockup {
    display: grid;
    font: inherit;
    text-align: center;
  }
  /* `min-width: 0` so the cell is the working area and not the widest word
     in it: without it the 25 word stops wrapping below the macket width and
     the whole group is pushed past the right margin. With it the word wraps
     and the script, which is centred, overflows the margin evenly on both
     sides — which is what the two long Comforter words on these screens,
     "Consultants" and "Discovery", need at 320. */
  .bm-lockup > * { grid-area: 1 / 1; min-width: 0; }
  .bm-lockup__word { margin-top: var(--m-gap-mid); }
  .bm-lockup__script {
    color: var(--content-accent);
    pointer-events: none;
  }
  /* Sections 4 and 12 set their lockup left. */
  .bm-lockup--left { text-align: left; }
  /* Sections 4, 7, 8, 10 and 11 inset the word 6 — what the 10 % tracking on
     its last letter takes back. The file writes the number on those groups
     and on no others. */
  .bm-lockup--inset .bm-lockup__word { margin-left: 6px; }
  /* Sections 7 and 9 draw the script on a dark ground, so it takes the
     inverse pairing instead of the accent. */
  .bm-lockup--light .bm-lockup__script { color: var(--content-on-inverse); }

  /* ======================================================================
     Shared: `Button_form`, 61 tall.
     25 of padding + the label's 11 cap height + 25 = 61, so the height comes
     from the label rather than being set here, and a two-line label gives the
     80 the file draws elsewhere. The width is the label plus its padding,
     except where the macket stretches it across the working area.

     A block-level flex box rather than an inline one: inline-level children
     sit on a text baseline, which would leave the strut's descender under
     the button.
     ====================================================================== */
  .bm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--m-gap);
    border: 0;
    background: var(--action-fill);
    color: var(--content-on-accent);
    text-align: center;
    text-decoration: none;
    cursor: pointer;
  }
  .bm-btn--full { display: flex; width: 100%; }
  /* Section 5's "Result": no fill, a 3px Rich Black 1 stroke drawn inside so
     the button keeps its 61 and nothing moves. */
  .bm-btn--ghost {
    background: none;
    color: var(--content-primary);
    box-shadow: inset 0 0 0 3px var(--border-strong);
  }

  /* ======================================================================
     Shared: the two card surfaces, both with 25 of padding all round.
     Vista Blue 1 carries Sections 2, 3, 5, 6 and 7; Rich Black 3 carries the
     Section 9 FAQ rows and the Section 10 start cards.
     ====================================================================== */
  .bm-plate {
    background: var(--surface-brand);
    color: var(--content-on-brand);
    padding: var(--m-gap);
  }
  .bm-plate--pale {
    background: var(--rich-black-3);
    color: var(--content-primary);
  }

  /* ======================================================================
     Block 1
     ====================================================================== */

  .s-bm1 { display: flow-root; }

  /* --- 3.1 Background lines --------------------------------------------
     `BackgroundLines` 1655:15663: four lines at 0, 33.33, 66.67 and 100 per
     cent of the working area — Figma x 25 · 142.33 · 259.67 · 377 on the 402
     macket — starting under the header and running the length of the screen.
     The file draws one continuous set, so one layer is drawn here and
     positioned against <main>, which base.css has already made the nearest
     positioned ancestor. z-index -1 keeps it under every plate and word.

     The file's 14 273 runs past the screen's own 10 935; it is the designer's
     single long guide, not a height to transfer.                          */
  .s-bm1__lines {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: -1;
    pointer-events: none;
  }
  .s-bm1__lines > .container { position: relative; height: 100%; }
  .s-bm1__lines i {
    position: absolute;
    top: 0;
    bottom: 0;
    width: var(--line-width);
    background: var(--line-color);
  }
  .s-bm1__lines i:nth-child(1) { left: 0; }
  .s-bm1__lines i:nth-child(2) { left: 33.333%; }
  .s-bm1__lines i:nth-child(3) { left: 66.667%; }
  .s-bm1__lines i:nth-child(4) { right: 0; }

  /* --- The photograph ---------------------------------------------------
     Full window below 430. Above it the window is wider than the design ever
     gets, so the picture stops at the 430 column and centres with the rest of
     the page instead of stretching to a size the macket does not have.

     The picture carries its own transparency where the mask cuts away, and
     the page ground shows through it exactly as the file draws.            */
  .s-bm1__photo {
    display: block;
    width: 100%;
    max-width: var(--m-max);
    margin-inline: auto;
    height: auto;
  }

  /* --- The plate --------------------------------------------------------
     Figma "Frame 669" 402 x 360: 25 of padding top and bottom around the 309
     of copy. It runs the full window, so above 430 the ground keeps going
     while the copy inside stops at the column.                             */
  .s-bm1__plate {
    background: var(--surface-brand);
    color: var(--content-on-brand);
    padding-block: var(--m-gap);
  }

  /* Figma "Frame 236": kicker 11, lockup at 26, lede at 136 — a 15 step each
     time — then 25 from the copy block to the button. */
  .s-bm1__title { margin-top: var(--m-gap-mid); }
  .s-bm1__lede  { margin-top: var(--m-gap-mid); }
  .s-bm1__cta   { margin-top: var(--m-gap); }

}

/* ===== business/m2.css ===== */
/* ==========================================================================
   Business mobile — block 2, the form and the proof line.
   Figma: "Section 2" 1655:15992, 402 x 1161; `Form_Pas` 1663:16087, 352 x 592.

     lockup   64 tall — the script's 38 plus the two-line word hanging 15 down
     form     Vista Blue 1, 25 of padding, 25 under the lockup
     field    label, then the plate 10 under it
     plates   Editorial White 4; 15 + 11 + 15 = 41 on the two single lines,
              225 on the textarea
     fields   25 apart
     button   25 under the last field, centred
     line     25 under the button, centred
     stats    50 under the form; four 168.5 x 111 cards on a 15 gutter, then
              one across the 352
     trust    15 under the cards, a full-window Amber 4 band 52 tall

   This file also carries the form vocabulary, because Section 11 is the same
   component and the two share one script.
   ========================================================================== */

@media (max-width: 1023.98px) {

  /* ======================================================================
     Shared: `Form_Pas`, 352 x 592 — Sections 2 and 11
     ====================================================================== */
  .bm-form {
    margin-top: var(--m-gap);
    padding: var(--m-gap);
    background: var(--surface-brand);
    color: var(--content-on-brand);
  }

  .bm-form__fields { display: grid; gap: var(--m-gap); }
  .bm-form__field  { display: grid; gap: var(--m-gap-tight); }

  .bm-form__plate {
    width: 100%;
    border: 0;
    background: var(--editorial-white-4);
    color: var(--content-primary);
  }
  .bm-form__input    { height: 41px; padding: 0 var(--m-gap-mid); }
  .bm-form__textarea { height: 225px; padding: var(--m-gap-mid); resize: vertical; }
  .bm-form__plate::placeholder { color: var(--vista-blue-1); opacity: 1; }

  /* 12. Keyboard focus is a white plate with a 3px Amber 4 stroke. The stroke
     is the browser's own outline bound to the accent token, so nothing is
     drawn at rest and nothing moves when it appears. */
  .bm-form__plate:focus-visible {
    outline: 3px solid var(--border-accent);
    outline-offset: 0;
    background-color: var(--editorial-white-2);
  }

  .bm-form__actions { margin-top: var(--m-gap); text-align: center; }
  /* Loading leaves the button looking exactly as it does at rest; it is only
     made unusable, so a second tap is impossible. */
  .bm-form [data-bm-submit][disabled] { cursor: progress; }

  .bm-form__status { margin-top: var(--m-gap); text-align: center; }
  /* `:not([hidden])` so the block display does not beat the hidden attribute:
     in the three states that are not Default the reassurance line goes and
     the state word takes its place. Each span needs its own block box or
     `u-trim` finds no line box to trim. */
  .bm-form__status > span:not([hidden]) { display: block; }
  .bm-form__message { margin-top: var(--m-gap-tight); }

  /* ======================================================================
     Block 2
     ====================================================================== */

  /* --- The five proof cards --------------------------------------------
     Figma "Frame 670" opens 50 under the form — the one place on this screen
     the rhythm goes wider than 25.                                        */
  /* Two up at the macket width. 142 is what a card needs before its 50-size
     numeral starts pushing the row wider than the working area, so below the
     width where two of them and a 15 gutter still fit — around 355 — the row
     falls to one card and nothing crosses the window. Nothing scales. */
  .s-bm2__stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(142px, 1fr));
    gap: var(--m-gap-mid);
    margin-top: var(--m-gap-block);
  }
  .s-bm2__stats > li { min-width: 0; }
  .s-bm2__stat { text-align: center; }
  .s-bm2__stat--wide { grid-column: 1 / -1; }
  /* 111 tall: 25 + the numeral's 35 cap + 15 + the label's 11 + 25.
     The label stays on one line: the component's own text node is 195 wide
     inside a 118.5 box and simply overhangs the card, which is what keeps the
     card at the 111 the file draws. */
  .s-bm2__stat-label { margin-top: var(--m-gap-mid); white-space: nowrap; }

  /* --- TrustLine --------------------------------------------------------
     The band is the full window; the row inside it starts on the same margin
     as the working area and simply keeps going. Swipe, no dots: the file
     draws it as one strip, not as a carousel.                             */
  .s-bm2__trust {
    margin-top: var(--m-gap-mid);
    padding-block: 13px 14px;
    background: var(--surface-accent);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  .s-bm2__trust::-webkit-scrollbar { display: none; }

  /* The left inset follows the working area: the 25 margin below 430, and
     whatever centres the 380 column above it. */
  .s-bm2__trust-row {
    display: flex;
    align-items: center;
    gap: var(--m-gutter);
    width: max-content;
    padding-inline: max(var(--m-margin),
                        calc((100vw - (var(--m-max) - var(--m-margin) * 2)) / 2));
  }
  /* 5.2/5.3 The marks are 16 to 25 tall, so every one takes the same 44 band
     on the vertical; across, each is already wider than 44. */
  .s-bm2__logo {
    display: block;
    --tap-h: 44px;
  }
  .s-bm2__logo img { display: block; }

}

/* ===== business/m3.css ===== */
/* ==========================================================================
   Business mobile — block 3, why a book.
   Figma: "Section 3" 1663:16027, 402 x 675.

     eyebrow  two lines, centred
     lockup   15 under it; the script's 38 plus a four-line word hanging 15
              down makes the group 126
     cards    25 under the lockup, 15 apart, 25 of padding each
     close    25 under the last card, centred
   ========================================================================== */

@media (max-width: 1023.98px) {

  .s-bm3__eyebrow { text-align: center; }
  .s-bm3__title   { margin-top: var(--m-gap-mid); }

  .s-bm3__cards {
    display: grid;
    gap: var(--m-gap-mid);
    margin-top: var(--m-gap);
  }
  /* 11 + 15 = the 26 the file puts between a card's name and its body. */
  .s-bm3__body { margin-top: var(--m-gap-mid); }

  .s-bm3__close { margin-top: var(--m-gap); text-align: center; }

}

/* ===== business/m4.css ===== */
/* ==========================================================================
   Business mobile — block 4, how it works.
   Figma: "Section 4" 1674:4910, 402 x 1196; `Ellipse 20` 1674:4913.

     plate    full window, Vista Blue 1, 25 of padding at the top and sides,
              50 at the foot — Figma "Frame 289" at 25,25 running to 1146 in
              a 1196 block
     lockup   left, the word inset 6
     sub      15 under the lockup, three lines
     lede     25 under the sub
     steps    25 under the lede, 15 apart; each card 25 of padding, the
              numeral and the name on one row 15 apart, the body 15 under
     button   15 under the last card, centred
   ========================================================================== */

@media (max-width: 1023.98px) {

  .s-bm4__plate {
    position: relative;
    overflow: hidden;              /* the arc runs past the top-left corner */
    padding-block: var(--m-gap) var(--m-gap-block);
    background: var(--surface-brand);
    color: var(--content-on-brand);
  }

  /* --- The arc ----------------------------------------------------------
     A quarter of an ellipse 244 x 279.5 whose centre sits on the plate's
     bottom-left of the figure — it enters at the top edge 244.5 in and
     leaves at the left edge 280 down, which is what the file's 244.5 x 279.85
     vector bounds describe. One pixel, hairline colour.                    */
  .s-bm4__arc {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
  }
  .s-bm4__arc path { stroke: var(--line-color); }

  .s-bm4__inner { position: relative; }

  .s-bm4__sub  { margin-top: var(--m-gap-mid); }
  .s-bm4__lede { margin-top: var(--m-gap); }

  .s-bm4__steps {
    display: grid;
    gap: var(--m-gap-mid);
    margin-top: var(--m-gap);
  }
  .s-bm4__step {
    padding: var(--m-gap);
    background: var(--editorial-white-4);
    color: var(--content-primary);
  }
  /* A flex row so both labels are block boxes and `u-trim` reaches them; the
     raw text of a flex container is not a box it can trim. */
  .s-bm4__head {
    display: flex;
    align-items: baseline;
    gap: var(--m-gap-mid);
  }
  .s-bm4__num  { color: var(--vista-blue-1); }
  .s-bm4__body { margin-top: var(--m-gap-mid); }

  .s-bm4__cta { margin-top: var(--m-gap-mid); text-align: center; }

}

/* ===== business/m5.css ===== */
/* ==========================================================================
   Business mobile — block 5, client voices.
   Figma: "Section 5" 1683:4850, 402 x 1004.

     head     lockup, then the caption 15 under it, both centred
     cards    25 under the head, 25 apart
     card     Vista Blue, 25 of padding; the name column 139 and the portrait
              138 on a 25 gutter, the quote 25 under them
     result   15 under the card: the chip 126 and the outcome 211, 15 apart
     button   25 under the last card, the full 352
   ========================================================================== */

@media (max-width: 1023.98px) {

  .s-bm5__sub { margin-top: var(--m-gap-mid); text-align: center; }

  .s-bm5__cards {
    display: grid;
    gap: var(--m-gap);
    margin-top: var(--m-gap);
  }

  /* 139 + 25 + 138 = 302, the card's inside width. */
  .s-bm5__who {
    display: grid;
    grid-template-columns: 139fr 138fr;
    gap: var(--m-gutter);
    align-items: start;
  }
  .s-bm5__name { min-width: 0; }
  .s-bm5__role { margin-top: var(--m-gap); }

  .s-bm5__portrait {
    display: block;
    width: 100%;
    height: auto;
  }

  .s-bm5__quote { margin: var(--m-gap) 0 0; }

  /* The chip keeps its drawn 126; the outcome takes the rest of the 352 on
     the same 15 gutter the file uses inside "Frame 678". */
  .s-bm5__result {
    display: grid;
    grid-template-columns: 126fr 211fr;
    gap: var(--m-gap-mid);
    align-items: start;
    margin-top: var(--m-gap-mid);
  }
  .s-bm5__result > p { min-width: 0; }

  .s-bm5__cta { margin-top: var(--m-gap); }

}

/* ===== business/m6.css ===== */
/* ==========================================================================
   Business mobile — block 6, the three formats.
   Figma: "Section 6" 1683:4889, 352 x 720.

     head     lockup, caption 15 under it, the intro 15 under that
     cards    25 under the head, 15 apart; 25 of padding, the name and the
              price on one row, the description 15 under it
     button   25 under the last card, the full 352
   ========================================================================== */

@media (max-width: 1023.98px) {

  .s-bm6__sub   { margin-top: var(--m-gap-mid); text-align: center; }
  .s-bm6__intro { margin-top: var(--m-gap-mid); text-align: center; }

  .s-bm6__list {
    display: grid;
    gap: var(--m-gap-mid);
    margin-top: var(--m-gap);
  }

  /* A flex row so both labels are block boxes and `u-trim` reaches them. */
  .s-bm6__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--m-gap-mid);
  }
  .s-bm6__price { color: var(--content-accent); flex: 0 0 auto; }

  .s-bm6__desc { margin-top: var(--m-gap-mid); }

  .s-bm6__cta { margin-top: var(--m-gap); }

}

/* ===== business/m7.css ===== */
/* ==========================================================================
   Business mobile — block 7, the Discovery Sprint.
   Figma: "Section 7" 1683:5030, 352 x 609; `Group 108` 1683:5031, 352 x 198.

     art      352 x 198, the lockup sitting 80 down inside it
     panel    25 under the photo; Vista Blue, 25 of padding
     lead     three lines, centred, the format name in ExtraBlack
     copy     15 under the lead
     price    50 under the copy — the one wide step on this block
     button   25 under the panel, centred, the width of its label
   ========================================================================== */

@media (max-width: 1023.98px) {

  .s-bm7__art { position: relative; }
  .s-bm7__photo { display: block; width: 100%; height: auto; }

  /* 80 of the photo's 198, measured from its top, is where `Group 90` sits. */
  .s-bm7__lockup {
    position: absolute;
    top: 40.404%;                  /* 80 / 198 */
    left: 0;
    right: 0;
  }
  /* Over the photograph the pair swaps: the script is white (the --light
     modifier) and the Mulish word takes the accent. */
  .s-bm7__lockup .bm-lockup__word { color: var(--content-accent); }

  .s-bm7__panel { margin-top: var(--m-gap); text-align: center; }
  .s-bm7__copy  { margin-top: var(--m-gap-mid); }
  .s-bm7__price {
    margin-top: var(--m-gap-block);
    color: var(--content-on-inverse);
  }

  .s-bm7__cta { margin-top: var(--m-gap); text-align: center; }

}

/* ===== business/m8.css ===== */
/* ==========================================================================
   Business mobile — block 8, the founder.
   Figma: "Section 8" 1683:5092, 402 x 675; `Group 109` 1683:5093, 402 x 350.

     art      402 x 350, full window: amber 0…151, photo 88…402, and the
              amber plate over 88…151 at half strength
     copy     25 under the art, inside the 352
     lockup   centred, the word inset 6
     sub      15 under the lockup; bio, quote and the marks 25 apart
     marks    three, 25 x 25 and 33 x 25, on a 25 step, centred
   ========================================================================== */

@media (max-width: 1023.98px) {

  /* Above 430 the picture stops at the column and centres, as every other
     full-window photograph on the mobile layer does. */
  .s-bm8__media {
    position: relative;
    width: 100%;
    max-width: var(--m-max);
    margin-inline: auto;
    aspect-ratio: 402 / 350;
  }

  .s-bm8__photo {
    position: absolute;
    top: 0;
    left: 21.891%;                 /* 88 / 402 */
    z-index: 1;
    width: 78.109%;                /* 314 / 402 */
    height: 100%;
    object-fit: cover;
  }

  .s-bm8__slab,
  .s-bm8__tint {
    position: absolute;
    top: 0;
    bottom: 0;
    background: var(--amber-4);
  }
  .s-bm8__slab { left: 0; width: 37.562%; }          /* 151 / 402 */
  /* The second plate lies over the photograph's left edge. */
  .s-bm8__tint {
    left: 21.891%;
    width: 15.672%;                                   /* 63 / 402 */
    z-index: 2;
    opacity: 0.5;
  }

  .s-bm8__copy  { margin-top: var(--m-gap); text-align: center; }
  .s-bm8__sub   { margin-top: var(--m-gap-mid); }
  .s-bm8__bio   { margin-top: var(--m-gap); }
  .s-bm8__quote { margin: var(--m-gap) 0 0; }

  /* 5.3 Every mark takes the same area: the widest is 33, all three reach a
     full 44 x 44, and the 25 gutter keeps their centres 50 apart, so no two
     areas touch. */
  .s-bm8__social {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--m-gutter);
    margin-top: var(--m-gap);
  }
  .s-bm8__social a   { display: block; }
  .s-bm8__social img { display: block; }

}

/* ===== business/m9.css ===== */
/* ==========================================================================
   Business mobile — block 9, the FAQ.
   Figma: "Section 9" 1683:13576, 402 x 459; `Faq_6_m` 1683:13559.

     plate    full window, Vista Blue 1, 25 of padding top and bottom
     lockup   centred, the script white against the blue
     rows     25 under the lockup, 15 apart
     closed   25 + the question's cap height + 25 — 61 on one line, 80 on two
     open     the same plate grown by 15 + the answer

   The plate is on the row, not on the question and the answer separately, so
   an open row is one surface.
   ========================================================================== */

@media (max-width: 1023.98px) {

  .s-bm9__plate {
    padding-block: var(--m-gap);
    background: var(--surface-brand);
    color: var(--content-on-brand);
  }

  .s-bm9__items {
    display: grid;
    gap: var(--m-gap-mid);
    margin-top: var(--m-gap);
  }

  .s-bm9__item {
    background: var(--editorial-white-4);
    color: var(--content-primary);
  }

  .s-bm9__head { font: inherit; }

  .s-bm9__q {
    display: block;
    width: 100%;
    padding: var(--m-gap);
    border: 0;
    background: none;
    text-align: left;
    cursor: pointer;
  }
  /* The label has to be a block for text-box-trim to reach it: an inline box
     keeps its leading and the row comes out 8 taller than the file draws. */
  .s-bm9__q > span { display: block; }

  /* The question's own 25 of bottom padding is not the gap: the file leaves
     15 between a label and its body, so the answer adds that itself and then
     closes the plate underneath. */
  .s-bm9__a { padding: 0 var(--m-gap) var(--m-gap); margin-top: var(--m-gap-mid); }
  .s-bm9__a[hidden] { display: none; }

}

/* ===== business/m10.css ===== */
/* ==========================================================================
   Business mobile — block 10, three ways to start.
   Figma: "Section 10" 1683:5005, 352 x 763.

     head    lockup + caption 15 under it
     cards   25 under the head, 15 apart
     card    25 of padding; title, then the line 25 under it, then the button
             25 under that — 202 / 183 / 240 tall, all of it from the copy
   ========================================================================== */

@media (max-width: 1023.98px) {

  .s-bm10__sub { margin-top: var(--m-gap-mid); text-align: center; }

  .s-bm10__cards {
    display: grid;
    gap: var(--m-gap-mid);
    margin-top: var(--m-gap);
  }

  .s-bm10__card { text-align: center; }
  .s-bm10__line { margin-top: var(--m-gap); }
  .s-bm10__cta  { margin-top: var(--m-gap); }

}

/* ===== business/m12.css ===== */
/* ==========================================================================
   Business mobile — block 12, the Business Expert Guide.
   Figma: "Section 12" 1683:13599, 352 x 795; `Form_cards_mobile` 1683:13617.

     caption  one line, 15 above the picture
     picture  352 x 352
     lockup   25 under the picture, left, the script over the word
     inside   25 under the lockup
     points   15 under it, indented 63, 25 apart
     label    25 under the last point, the field 10 under it, 41 tall
     button   15 under the field, the full 352
     status   the form's own line; empty until it has something to say
   ========================================================================== */

@media (max-width: 1023.98px) {

  .s-bm12__photo {
    display: block;
    width: 100%;
    height: auto;
    margin-top: var(--m-gap-mid);
  }

  .s-bm12__title  { margin-top: var(--m-gap); }
  .s-bm12__inside { margin-top: var(--m-gap); }

  /* Figma "Frame 338" starts 63 in from the working area's left edge. */
  .s-bm12__points {
    margin-top: var(--m-gap-mid);
    padding-left: 63px;
  }
  .s-bm12__point { margin-top: var(--m-gap); }

  .s-bm12__form  { margin-top: var(--m-gap); }
  .s-bm12__label { display: block; }

  /* `Form_cards_mobile` Small: an Editorial White plate on a hairline, 41
     tall — 15 + the label's 11 + 15. */
  .s-bm12__plate {
    display: block;
    width: 100%;
    height: 41px;
    margin-top: var(--m-gap-tight);
    padding: 0 var(--m-gap-mid);
    border: var(--line-width) solid var(--border-hairline);
    background: var(--editorial-white-4);
    color: var(--content-primary);
  }
  .s-bm12__plate::placeholder { color: var(--vista-blue-1); opacity: 1; }

  /* 12. Keyboard focus: a white ground with a 3px Amber 4 stroke. */
  .s-bm12__plate:focus-visible {
    outline: 3px solid var(--border-accent);
    outline-offset: 0;
    background-color: var(--editorial-white-2);
  }

  .s-bm12__submit { margin-top: var(--m-gap-mid); }
  .s-bm12__submit[disabled] { cursor: progress; }

  .s-bm12__status:empty { display: none; }
  .s-bm12__status { margin-top: var(--m-gap-mid); }

}