/* ===== 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.                               */
.is-bleed-left {
  margin-left: calc(50% - 50vw);
  margin-right: var(--bleed-stop, 0%);
}
.is-bleed-right {
  margin-right: calc(50% - 50vw);
  margin-left: var(--bleed-stop, 0%);
}

/* --- 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;
  inset: 0;
  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 ------------------------------------------------------------ */
.site-header__logo {
  position: absolute;
  z-index: 2;
  left: 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.  */
.site-header__nav {
  position: absolute;
  inset: 0;
  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.     */
.site-header__sub {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  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));
  /* The file gives this the same Editorial White 4 at 75 % as the bar above
     it, but it only ever draws the header over the cream hero. On a live
     page the sticky header travels over the blue and amber bands, and there
     a 75 % plate that covers three columns and not the rest reads as a grey
     smear cut through the headline behind it — the bar gets away with it
     because it spans the full width, this row does not. So the row's own
     plate is opaque: the two links stay legible over anything, and the strip
     reads as a panel that belongs to the menu instead of a smudge. */
  background: var(--surface-page);
}

/* 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 seven lines continue down through the whole row, group or not. */
.site-header__sub-lines { z-index: 1; }

.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);
}

/* ===== wellness/w1.css ===== */
/* ==========================================================================
   For Wellness Experts — block 1, hero
   Figma: node 917:7698 "Section 1 [fluid]", macket x 164 - 1301, y 261 - 930,
   1137 x 669. The block is a Figma group, so its children carry absolute
   coordinates; they are rewritten here as shares of the 1137 frame.

   1137 = 114 (column 2's left edge) to 1251 in the working area. Text column
   657 is six columns with their gutters; the photograph is 525 and is pinned
   to the frame's right edge (612 + 525 = 1137).

   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
   669 tall, and the composition keeps its proportions as the working area
   narrows between 1200 and 1440.
   ========================================================================== */

.s-w1 .s-w1__stage {
  position: relative;
  margin-left: 8.50746%;       /* 114 / 1340 */
  width: 84.85075%;            /* 1137 / 1340 */
}

/* --- Photograph, macket 776,261 · 525 x 669 ------------------------------
   Exported from "Group 113" (917:7697) as one RGBA file: the cut-out
   portrait, the Vista Blue 1 silhouette offset 10 to the left behind it and
   the second crop at the right edge are a single masked composition in the
   file. The mask path is not readable through the plugin and the layers only
   make sense composited, so they ship as one image with real alpha — the
   page background and the seven vertical lines read through the ground
   around him, which is what the macket shows.                              */
.s-w1 .s-w1__media {
  margin: 0 0 0 53.82586%;     /* 612 / 1137 */
  width: 46.17414%;            /* 525 / 1137 */
}

.s-w1 .s-w1__media img {
  width: 100%;
  aspect-ratio: 525 / 669;
}

/* --- Text column, macket 164,261 · 657 wide ----------------------------- */
.s-w1 .s-w1__lede {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  width: 57.78364%;            /* 657 / 1137 */
  display: flex;
  flex-direction: column;
  gap: var(--layout-gutter);
}

.s-w1 .s-w1__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 50px;
}

/* The Comforter word lies over the Mulish heading in one grid cell and
   paints above it, so it comes last in the DOM. The heading sits 50 down
   inside the group; the accent starts at 0 and is 614.219 of the 657 wide. */
.s-w1 .s-w1__title {
  display: grid;
  width: 100%;
  font: inherit;
}
.s-w1 .s-w1__title > * {
  grid-area: 1 / 1;
  justify-self: start;
}
.s-w1 .s-w1__title-main {
  margin-top: 50px;
  width: 100%;
}
.s-w1 .s-w1__title-accent {
  width: 93.48844%;            /* 614.219 / 657 */
  color: var(--amber-4);
}

.s-w1 .s-w1__intro {
  width: 100%;
}

/* --- Button_form --------------------------------------------------------
   25 + cap height 11 + 25 = 61. The hover state empties the fill and leaves
   a 3px stroke, drawn as an inset shadow so the box never changes size.   */
.s-w1 .s-w1__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-w1 .s-w1__cta:hover,
.s-w1 .s-w1__cta:focus-visible {
  background: var(--action-fill-hover);
  box-shadow: inset 0 0 0 3px var(--action-border-hover);
}

/* ===== wellness/w2.css ===== */
/* ==========================================================================
   For Wellness Experts — block 2, "Tell us about your book idea"
   Figma: node 917:7657 "Section 2", 1340 x 661 — the whole working area.
   Form component: FAQ_S7_Form, instance 917:7664, 657 x 661.

   The instance is FAQ_S7_Form with its WhatsApp button switched off, so what
   is left is Main_S14_Form (Main's section 15) with one copy change: the
   message placeholder reads "Type your message", not "Tell us about your
   book idea". The rules below are s15's, renamed. See the report: this form
   now exists on five screens and wants a shared partial.

   Heading column 544 is five columns with their gutters, starting at column
   2; the form 657 is six, starting at column 7. 114 + 544 + 25 + 657 = 1340.
   Form: 50 + 506 + 44 + 11 + 50 = 661.
   ========================================================================== */

.s-w2 .s-w2__intro {
  grid-column: 2 / span 5;
  align-self: start;
}
.s-w2 .s-w2__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.
   The text box is 569 — the 544 column plus the gutter beside it, which is
   how the file draws it, so it is written as a share of the column.       */
.s-w2 .s-w2__title {
  display: grid;
  width: 104.59559%;           /* 569 / 544 */
  font: inherit;
}
.s-w2 .s-w2__title > * {
  grid-area: 1 / 1;
  width: 100%;
}
.s-w2 .s-w2__title-main {
  margin-top: 50px;
}
.s-w2 .s-w2__title-accent {
  color: var(--amber-4);
}

/* --- Form ---------------------------------------------------------------
   50 + 420 fields + 25 + 61 button + 44 + 11 status + 50 = 661.           */
.s-w2 .s-w2__form {
  display: flex;
  flex-direction: column;
  padding: 50px 25px;
  background: var(--vista-blue-1);
}
.s-w2 .s-w2__body {
  display: flex;
  flex-direction: column;
  gap: var(--layout-gutter);
}
.s-w2 .s-w2__fields {
  display: flex;
  flex-direction: column;
  gap: var(--layout-gutter);
}
.s-w2 .s-w2__field {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.s-w2 .s-w2__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-w2 .s-w2__plate {
  width: 100%;
  border: 0;
  background: var(--editorial-white-4);
  color: var(--content-primary);
}
.s-w2 .s-w2__input {
  height: 41px;
  padding: 0 15px;
}
.s-w2 .s-w2__textarea {
  height: 225px;
  padding: 15px;
  resize: vertical;
}
.s-w2 .s-w2__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-w2 .s-w2__plate:focus-visible {
  outline-offset: 0;
  background-color: var(--editorial-white-2);
}

/* --- Actions ------------------------------------------------------------ */
.s-w2 .s-w2__actions {
  display: flex;
  align-items: center;
  gap: var(--layout-gutter);
}
.s-w2 .s-w2__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-w2 .s-w2__submit-label {
  white-space: nowrap;
}
.s-w2 .s-w2__submit:hover: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-w2 .s-w2__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-w2 .s-w2__status {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--layout-gutter);
  margin-top: 44px;
  color: var(--content-on-brand);
}
.s-w2 .s-w2__message {
  text-align: right;
}
.s-w2 .s-w2__hint[hidden],
.s-w2 .s-w2__state[hidden],
.s-w2 .s-w2__message[hidden] {
  display: none;
}

/* ===== wellness/w3.css ===== */
/* ==========================================================================
   For Wellness Experts — block 3, "A book isn't a sales tool"
   Figma: node 917:7699 "Section 3", 1340 x 431 — the whole working area.
   Card component: Main_S5_Card, instances 917:7707 / 917:7708 / 917:7709
   (variants S5_Card/Pas, /Hov — the hover swaps the brand surface for the
   accent, which is the only thing that changes).

   184 heading + 50 + 161 cards + 25 + 11 closing line = 431.
   The heading column is 1112 — ten columns with their gutters, starting at
   column 2 — and is centred inside the working area.
   ========================================================================== */

.s-w3 .s-w3__inner {
  display: flex;
  flex-direction: column;
  gap: var(--layout-gutter);
}

.s-w3 .s-w3__upper {
  display: flex;
  flex-direction: column;
  gap: 50px;
}

/* --- Heading ------------------------------------------------------------ */
.s-w3 .s-w3__head {
  width: 82.98507%;            /* 1112 / 1340 */
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--layout-gutter);
  text-align: center;
}

/* The Comforter word lies over the Mulish heading in one grid cell and
   paints above it, so it comes last in the DOM. The heading sits 50 down
   inside the 148-tall group; the accent starts at 0.                      */
.s-w3 .s-w3__title {
  display: grid;
  width: 100%;
  font: inherit;
}
.s-w3 .s-w3__title > * {
  grid-area: 1 / 1;
  width: 100%;
}
.s-w3 .s-w3__title-main {
  margin-top: 50px;
}
.s-w3 .s-w3__title-accent {
  color: var(--amber-4);
}

/* --- Cards --------------------------------------------------------------
   Three 430 blocks with the 25 gutter: 430 * 3 + 25 * 2 = 1340 exactly, so
   the row is the whole working area. Same basis as Main's sections 5 and 14:
   the flow tag says the row wraps when the cards stop fitting.            */
.s-w3 .s-w3__cards {
  --flow-basis: 430px;
  align-items: stretch;
}

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

/* Variant S5_Card/Hov: the brand surface becomes the accent. Nothing else
   moves, and the type stays Rich Black 1.                                 */
.s-w3 .s-w3__card:hover,
.s-w3 .s-w3__card:focus-within {
  background: var(--amber-4);
}

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

/* --- Closing line, macket 241,420 · 858 wide, centred -------------------
   The file sets the run to no-wrap and measures it at 858 x 11 — one line.
   The box is therefore left at the full working area and only centred: a
   fixed 858 would tip the sentence onto a second line the moment the
   rendered text measured a pixel more than the macket's, and 858 still fits
   inside the 1100 working area at the 1200 floor, so it never wraps.      */
.s-w3 .s-w3__close {
  width: 100%;
  text-align: center;
}

/* ===== wellness/w4.css ===== */
/* ==========================================================================
   For Wellness Experts — block 4, How it works
   Figma: instance 917:7945 of the component set whose seven variants are
   917:7721 (prop=How_it_works_main/00) through 917:7826 (…/06). It is the
   same dial as Main's section 6, with this screen's own copy in every step.

   The component carries seven stacked variants; here it is one arc with the
   steps as data. The arc never moves: the stops ride it, and the open step
   always sits at the arc's rightmost point.

   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", 1150 box at (−442, −25) with a 1px stroke, i.e. centre
   (83, 550) and radius 574.5 in stage coordinates.
   ========================================================================== */

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

.s-w4 .s-w4__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-w4 .s-w4__accent {
  position: absolute;
  z-index: 1;
  top: 50px;
  left: 0;
  white-space: nowrap;
  color: var(--editorial-white-4);
}

.s-w4 .s-w4__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-w4 .s-w4__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-w4 .s-w4__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 57 further out that the macket puts the numerals.
   The open step is offset 0, so it is not rotated at all.                 */
.s-w4 .s-w4__dial {
  position: absolute;
  inset: 0;
}

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

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

.s-w4 .s-w4__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-w4 .s-w4__stop[data-offset="0"] .s-w4__bullet {
  background: var(--rich-black-1);
}

.s-w4 .s-w4__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-w4 .s-w4__stop[data-offset="0"] .s-w4__num {
  color: var(--content-on-brand);
  cursor: default;
}

/* --- The open step ------------------------------------------------------
   In the macket 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 (steps 01–06) or two
   (step 00). Centring the title alone and taking the body out of flow
   reproduces that without measuring either of them. Macket x 821 − 50.     */
.s-w4 .s-w4__steps {
  position: absolute;
  top: 550px;
  right: 0;
  left: 771px;
}

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

.s-w4 .s-w4__step[hidden] { display: none; }

.s-w4 .s-w4__steptitle {
  color: var(--content-on-brand);
}

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

/* --- Chevrons -----------------------------------------------------------
   On this screen the pair does not sit on one line as it does on Main: the
   macket puts "next" at 625,525 and "prev" at 600,575, one step further
   round the arc. Each is therefore placed on its own rather than as a row. */
.s-w4 .s-w4__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);
}

.s-w4 .s-w4__chev--next { top: 525px; left: 575px; }
.s-w4 .s-w4__chev--prev { top: 575px; left: 550px; }

.s-w4 .s-w4__chev[hidden] { display: none; }

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

.s-w4 .s-w4__chev path {
  stroke: var(--content-on-accent);
}

.s-w4 .s-w4__chev--prev svg { transform: rotate(180deg); }

/* --- Call to action, macket 1156,989 · pinned to the working area's right */
.s-w4 .s-w4__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-w4 .s-w4__cta:hover,
.s-w4 .s-w4__cta:focus-visible {
  background: var(--action-fill-hover);
  box-shadow: inset 0 0 0 3px var(--action-border-hover);
}

/* ===== wellness/w5.css ===== */
/* ==========================================================================
   For Wellness Experts — block 5, five published authors
   Figma: node 1003:12014 "Section 5", 1340 x 668 — the whole working area.

   Five 430 cards on the 25 gutter: three across the first row (430 * 3 +
   25 * 2 = 1340), two centred on the second (macket x 227.5 and 682.5,
   which is exactly what a centred wrap produces). The rows are 50 apart —
   the tallest card in row one is 309 and row two starts at 359.

   Card: a Vista Blue 1 panel 216 tall (25 + the 141 portrait + 50), then 25,
   then the "Result" row. The portrait and the name column are bottom
   aligned inside the panel, which is what makes the two-line and three-line
   roles sit on the same baseline as the portrait's foot.
   ========================================================================== */

.s-w5 .s-w5__cards {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  gap: 50px var(--layout-gutter);
}

/* 430 is written as "a third of the row less the two gutters" rather than as
   the literal 430: with 430 as a fixed basis the row wraps the moment the
   working area drops under 1340, which is most of the 1200-1440 band, and
   the three cards would break to 2 + 1 there.                             */
.s-w5 .s-w5__card {
  flex: 0 0 calc((100% - var(--layout-gutter) * 2) / 3);
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--layout-gutter);
}

/* --- Panel, 430 x 216 --------------------------------------------------- */
.s-w5 .s-w5__panel {
  display: flex;
  align-items: flex-end;
  gap: var(--layout-gutter);
  padding: 25px 25px 50px;
  background: var(--vista-blue-1);
  color: var(--content-on-brand);
}

.s-w5 .s-w5__portrait {
  flex: 0 0 auto;
  width: 125px;
  height: 141px;
  object-fit: cover;
}

.s-w5 .s-w5__who {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--layout-gutter);
}

/* --- Result row ---------------------------------------------------------
   Button_form drawn as a label, not a control: the macket gives it no
   destination and it names the row rather than doing anything. See the
   report.                                                                 */
.s-w5 .s-w5__result {
  display: flex;
  align-items: flex-start;
  gap: var(--layout-gutter);
}

.s-w5 .s-w5__chip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 25px;
  white-space: nowrap;
  background: var(--action-fill);
  color: var(--content-on-accent);
}

.s-w5 .s-w5__outcome {
  flex: 1 1 0;
  min-width: 0;
}

/* ===== wellness/w6.css ===== */
/* ==========================================================================
   For Wellness Experts — block 6, "Services for you"
   Figma: node 1003:12039 "Section 6", 1340 x 856 — the whole working area.
   Row component: Main_S9_Card, instances 1003:12047 / 1003:12048 /
   1003:12049 — the same component the homepage's section 9 uses, with three
   rows instead of five and a total price instead of a monthly one.

   183 heading + 50 + 512 rows + 50 + 61 button = 856.
   Heading column 790, centred; the intro paragraph inside it is 658 — six
   columns with their gutters — and centred in turn.
   ========================================================================== */

.s-w6 .s-w6__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 50px;
}

/* --- Heading ------------------------------------------------------------ */
.s-w6 .s-w6__head {
  width: 58.95522%;            /* 790 / 1340 */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--layout-gutter);
  text-align: center;
}

/* The Comforter word lies over the Mulish heading in one grid cell and
   paints above it, so it comes last in the DOM. The heading sits 50 down
   inside the 85-tall group; "SERVICES" starts at 0 and 33 further right. */
.s-w6 .s-w6__title {
  position: relative;
  width: 68.86076%;            /* 544 / 790 */
  padding-top: 50px;
}
.s-w6 .s-w6__title-main {
  display: block;
}
.s-w6 .s-w6__title-accent {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  color: var(--amber-4);
}

.s-w6 .s-w6__sub {
  width: 100%;
}

.s-w6 .s-w6__intro {
  width: 83.29114%;            /* 658 / 790 */
}

/* --- Rows ---------------------------------------------------------------
   Three rows, 25 apart, each the full width of the working area.
   50 + 25 name/price row + 25 + 29 description + 50 = 154.                */
.s-w6 .s-w6__list {
  display: flex;
  flex-direction: column;
  gap: var(--layout-gutter);
}

.s-w6 .s-w6__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-w6 .s-w6__row:hover,
.s-w6 .s-w6__row:focus-visible {
  background: var(--amber-4);
  color: var(--rich-black-1);
}

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

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

/* --- Button_form -------------------------------------------------------- */
.s-w6 .s-w6__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-fast), box-shadow var(--t-fast);
}
.s-w6 .s-w6__cta:hover,
.s-w6 .s-w6__cta:focus-visible {
  background: var(--action-fill-hover);
  box-shadow: inset 0 0 0 3px var(--action-border-hover);
}

/* ===== wellness/w7.css ===== */
/* ==========================================================================
   For Wellness Experts — block 7, Discovery Sprint
   Figma: node 1003:12067 "Section 7 [bleed:both]", bounding box 1440 x 912.

   The tag reads bleed:both, but nothing is drawn past the right margin: the
   1440 comes from the photograph's frame 1003:12069, which is 1187 wide with
   its image fill only 935 of that, so its last 252 carry no pixels. The
   composition that is actually drawn is the homepage's section 10 exactly —
   an amber band off the LEFT window edge, the photograph's right edge pinned
   to macket x = 1188 — so it is built as bleed:left with the same stop,
   1 − 1138 / 1340 = 15.075 %, and the same internal geometry. See the report.

   Every horizontal measure inside the block is a share of the 1188 frame, so
   the composition holds while the frame narrows between 1200 and 1440.
   485 to the panel column + 427 of column = 912.
   ========================================================================== */

.s-w7 .s-w7__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-w7 .s-w7__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-w7 .s-w7__media {
  position: absolute;
  left: 21.2963%;              /* 253 / 1188 */
  top: 50px;
  width: 78.7037%;             /* 935 / 1188 */
  margin: 0;
  z-index: 1;
}

.s-w7 .s-w7__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; the intersection is
   935 − 253 wide and 225 − 50 tall, measured from the photo's own corner.  */
.s-w7 .s-w7__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-w7 .s-w7__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-w7 .s-w7__lockup > * {
  grid-area: 1 / 1;
}

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

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

/* --- Panel + button column, macket 505,485 · 430 wide -------------------- */
.s-w7 .s-w7__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-w7 .s-w7__panel {
  width: 100%;
  background: var(--vista-blue-1);
  padding: var(--layout-gutter) var(--layout-gutter) 50px;
}

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

.s-w7 .s-w7__lead,
.s-w7 .s-w7__copy,
.s-w7 .s-w7__price {
  width: 100%;
}

.s-w7 .s-w7__price {
  color: var(--editorial-white-4);
}

/* --- Button_form --------------------------------------------------------
   The border is the same colour as the fill at rest, so the box does not
   change size when the hover state empties the fill.                      */
.s-w7 .s-w7__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 22px;
  border: 3px solid var(--action-fill);
  background: var(--action-fill);
  color: var(--rich-black-1);
  cursor: pointer;
  transition: background-color var(--t-fast) ease, border-color var(--t-fast) ease;
}

.s-w7 .s-w7__cta:hover,
.s-w7 .s-w7__cta:focus-visible {
  background: var(--action-fill-hover);
  border-color: var(--action-border-hover);
}

/* ===== wellness/w8.css ===== */
/* ==========================================================================
   For Wellness Experts — block 8, the founder
   Figma: node 1003:12087, tagged frame 1003:12088 ("Section 12 [bleed:left]",
   1340 x 682). It is the homepage's section 12 unchanged — same geometry,
   same photograph, same copy — so the rules below are s12's, renamed. See
   the report: this block now exists twice and wants a shared partial.

   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).
   ========================================================================== */

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

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

.s-w8 .s-w8__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-w8 .s-w8__slab,
.s-w8 .s-w8__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-w8 .s-w8__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-w8 .s-w8__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-w8 .s-w8__intro {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 50px;
}

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

.s-w8 .s-w8__lockup > * {
  grid-area: 1 / 1;
}

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

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

/* --- Six-column text blocks, right aligned in the column ---------------- */
.s-w8 .s-w8__sub,
.s-w8 .s-w8__bio,
.s-w8 .s-w8__quote {
  width: 85.214%;              /* 657 / 771 */
  color: var(--rich-black-1);
}

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

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

.s-w8 .s-w8__social a:hover,
.s-w8 .s-w8__social a:focus-visible {
  opacity: 0.6;
}

/* ===== wellness/w9.css ===== */
/* ==========================================================================
   For Wellness Experts — block 9, FAQ accordion
   Figma: node 1003:12117 "Section 9", 1440 x 654, full window width.
   Card component: FAQ_for_wellness, component set 1003:12147, whose variants
   keep the homepage's names — Home_S13_Card_1..4 x Pas / Act. Every answer
   below is lifted from an Act variant; the Pas variants carry the question
   only.

   The row geometry is Main's section 13 exactly — 61 collapsed, 25 between
   rows, 25 / 25 / 25 / 50 of trigger padding and a 607 answer column inset
   50 from the left with 228 left empty on the right — so the rules below are
   s13's, renamed. See the report: this is the seventh copy of one accordion
   and it wants a shared partial.

   100 + 85 heading + 50 + 319 list + 100 = 654.
   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).
   ========================================================================== */

/* Full-window Vista Blue 1 fill. This block carries --gap: 0 in the markup:
   the fill is meant to start exactly where the founder block above it ends. */
.s-w9 {
  background: var(--vista-blue-1);
  padding-block: 100px;
}

/* The 50 between the heading and the list is the grid's own row gap, not a
   margin on the list: a margin on top of the gap would silently make the
   block taller. */
.s-w9 .s-w9__grid {
  row-gap: 50px;
}

.s-w9 .s-w9__title,
.s-w9 .s-w9__list {
  grid-column: 3 / span 8;
}

/* --- Heading ------------------------------------------------------------
   The Comforter word lies over the Mulish heading in one grid cell and
   paints above it, so it comes last in the DOM. The heading sits 50 down
   inside the 85-tall group; the accent starts at 0.                       */
.s-w9 .s-w9__title {
  display: grid;
  text-align: center;
  font: inherit;
}
.s-w9 .s-w9__title > * {
  grid-area: 1 / 1;
  width: 100%;
}
.s-w9 .s-w9__title-main {
  margin-top: 50px;
}
.s-w9 .s-w9__title-accent {
  color: var(--editorial-white-4);
}

/* --- Rows ---------------------------------------------------------------
   Collapsed row is 61: 25 + cap height 11 + 25. Gap between rows 25.      */
.s-w9 .s-w9__list {
  display: flex;
  flex-direction: column;
  gap: var(--layout-gutter);
}
.s-w9 .s-w9__item {
  background: var(--editorial-white-4);
}
.s-w9 .s-w9__question {
  font: inherit;
}
.s-w9 .s-w9__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-w9 .s-w9__label {
  color: var(--content-primary);
}

/* The chevron is Main_S11_Arrows: a 45-degree rule, 21.213 x 10.607. The
   file the homepage already ships, reused rather than re-exported.        */
.s-w9 .s-w9__chevron {
  flex: 0 0 auto;
  width: 21.213px;
  height: 10.607px;
  transition: transform var(--t-base) ease;
}
.s-w9 .s-w9__item.is-open .s-w9__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-w9 .s-w9__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--t-base) ease;
}
.s-w9 .s-w9__panel-inner {
  overflow: hidden;
  visibility: hidden;
  transition: visibility 0s linear var(--t-base);
}
.s-w9 .s-w9__item.is-open .s-w9__panel {
  grid-template-rows: 1fr;
}
.s-w9 .s-w9__item.is-open .s-w9__panel-inner {
  visibility: visible;
  transition-delay: 0s;
}

/* Open row: 25 + question + 50 + answer + 50 = 166. 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 stays empty on the right, as the Act variants draw it.   */
.s-w9 .s-w9__answer {
  padding: 25px 228px 50px 50px;
  color: var(--content-primary);
}

/* ===== wellness/w10.css ===== */
/* ==========================================================================
   For Wellness Experts — block 10, three ways to start
   Figma: node 1003:12367 "Section 10", 1340 x 759 — the whole working area.
   Card component: Service_S6_Card, instances 1003:12374 / 1003:12375 /
   1003:12376.

   This block is the homepage's section 14 unchanged — same three cards, the
   same three photographs and the same copy — so the rules below are s14's,
   renamed. See the report: it now exists twice and wants a shared partial.

   159 heading + 50 + 550 cards = 759. No fill: the page background shows.
   ========================================================================== */

.s-w10 .s-w10__inner {
  display: flex;
  flex-direction: column;
  gap: 50px;
}

/* --- Heading ------------------------------------------------------------
   The Comforter word lies over the Mulish heading in one grid cell and
   paints above it, so it comes last in the DOM. The heading sits 50 down
   inside the 85-tall group; the accent starts at 0.                       */
.s-w10 .s-w10__intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--layout-gutter);
  text-align: center;
}
.s-w10 .s-w10__title {
  display: grid;
  width: 100%;
  max-width: 753px;
  font: inherit;
}
.s-w10 .s-w10__title > * {
  grid-area: 1 / 1;
  width: 100%;
}
.s-w10 .s-w10__title-main {
  margin-top: 50px;
}
.s-w10 .s-w10__title-accent {
  color: var(--amber-4);
}
.s-w10 .s-w10__subheading {
  width: 100%;
  max-width: 480px;
}

/* --- Cards --------------------------------------------------------------
   Three 430 blocks with the 25 gutter: 430 * 3 + 25 * 2 = 1340 exactly, so
   the row is the whole working area.                                      */
.s-w10 .s-w10__cards {
  --flow-basis: 430px;
}

/* Hover: the Service_S6_Card Hov variant swaps Rich Black 3 for Amber 4 on
   the text panel. 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-w10 .s-w10__card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 550px;
  background: var(--rich-black-3);
  transition: background-color var(--t-base) ease;
}

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

/* The text panel ends at 229 in the macket. 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-w10 .s-w10__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-w10 .s-w10__card-title,
.s-w10 .s-w10__card-line {
  color: var(--content-primary);
}

.s-w10 .s-w10__photo-wrap {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}
.s-w10 .s-w10__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-w10 .s-w10__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-w10 .s-w10__button-label {
  white-space: nowrap;
}
.s-w10 .s-w10__button:hover,
.s-w10 .s-w10__button:focus-visible {
  background: var(--action-fill-hover);
  box-shadow: inset 0 0 0 3px var(--action-border-hover);
}

/* ===== wellness/w11.css ===== */
/* ==========================================================================
   For Wellness Experts — block 11, "Your book starts here"
   Figma: node 1003:12377 "Section 11", 885 x 796, centred in the working
   area. Form component: Main_S14_Form, instance 1003:12382, 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.

   This is Main's section 15 unchanged. The behaviour lives in w2.js, which
   drives both forms on this screen.

   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-w11 .s-w11__grid {
  row-gap: 50px;
}
.s-w11 .s-w11__title {
  grid-column: 3 / span 8;
}
.s-w11 .s-w11__form {
  grid-column: 4 / span 6;
}

/* --- Heading ------------------------------------------------------------
   The Comforter word lies over the Mulish heading in one grid cell and
   paints above it, so it comes last in the DOM. The heading sits 50 down
   inside the 85-tall group; the accent starts at 0. The lockup is 617 wide
   and centred inside the 885.                                             */
.s-w11 .s-w11__title {
  display: grid;
  justify-items: center;
  text-align: center;
  font: inherit;
}
.s-w11 .s-w11__title > * {
  grid-area: 1 / 1;
  width: 100%;
  max-width: 617px;
}
.s-w11 .s-w11__title-main {
  margin-top: 50px;
}
.s-w11 .s-w11__title-accent {
  color: var(--amber-4);
}

/* --- Form ---------------------------------------------------------------
   50 + 420 fields + 25 + 61 button + 44 + 11 status + 50 = 661.           */
.s-w11 .s-w11__form {
  display: flex;
  flex-direction: column;
  gap: var(--layout-gutter);
  padding: 50px 25px;
  background: var(--vista-blue-1);
}
.s-w11 .s-w11__fields {
  display: flex;
  flex-direction: column;
  gap: var(--layout-gutter);
}
.s-w11 .s-w11__field {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.s-w11 .s-w11__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-w11 .s-w11__plate {
  width: 100%;
  border: 0;
  background: var(--editorial-white-4);
  color: var(--content-primary);
}
.s-w11 .s-w11__input {
  height: 41px;
  padding: 0 15px;
}
.s-w11 .s-w11__textarea {
  height: 225px;
  padding: 15px;
  resize: vertical;
}
.s-w11 .s-w11__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-w11 .s-w11__plate:focus-visible {
  outline-offset: 0;
  background-color: var(--editorial-white-2);
}

/* --- Actions ------------------------------------------------------------ */
.s-w11 .s-w11__actions {
  display: flex;
  align-items: center;
  gap: var(--layout-gutter);
}
.s-w11 .s-w11__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-w11 .s-w11__submit-label {
  white-space: nowrap;
}
.s-w11 .s-w11__submit:hover: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-w11 .s-w11__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-w11 .s-w11__status {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--layout-gutter);
  margin-top: 19px;
  color: var(--content-on-brand);
}
.s-w11 .s-w11__message {
  text-align: right;
}
.s-w11 .s-w11__hint[hidden],
.s-w11 .s-w11__state[hidden],
.s-w11 .s-w11__message[hidden] {
  display: none;
}

/* ===== wellness/w12.css ===== */
/* ==========================================================================
   For Wellness Experts — block 12, the Wellness Expert Guide
   Figma: node 1003:12445 "Frame 12", 1226 x 645, macket x 164 - 1390.

   It is row 2 of the Free resources screen's guide list, on this page's own
   background rather than on that screen's Rich black 3 band, so the rules
   below are fr2's, renamed. See the report: it now exists twice and wants a
   shared partial.

   1226 is eleven columns with their gutters, so the block is 2 / span 11 and
   runs from one column in to the working area's right edge.
   430 picture column + 25 + 738 text column = 1193; the remaining 33 stays
   empty on the right, exactly as the file draws it.
   ========================================================================== */

.s-w12 .s-w12__row {
  grid-column: 2 / span 11;
  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. The picture's own ratio then shortens it, and the row is
   bottom-aligned, so the two columns stay level.                          */
.s-w12 .s-w12__figure {
  flex: 0 1 430px;
  min-width: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--layout-gutter);
}
.s-w12 .s-w12__photo {
  width: 100%;
  height: auto;
  aspect-ratio: 595 / 842;
  object-fit: cover;
}
.s-w12 .s-w12__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.
   85 heading + 150 + 230 detail + 36 = 501, which is the column the file
   draws at macket y 144.                                                  */
.s-w12 .s-w12__text {
  flex: 0 1 738px;
  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 and
   paints above it, so it comes last in the DOM. The heading sits 50 down
   inside the 85-tall group; the accent starts at 0. The group is 657 wide. */
.s-w12 .s-w12__title {
  display: grid;
  width: 100%;
  max-width: 657px;
  font: inherit;
}
.s-w12 .s-w12__title > * {
  grid-area: 1 / 1;
  width: 100%;
}
.s-w12 .s-w12__title-main {
  margin-top: 50px;
}
.s-w12 .s-w12__title-accent {
  color: var(--amber-4);
}

/* --- "What's inside" ----------------------------------------------------
   11 + 25 + 194 = 230.                                                    */
.s-w12 .s-w12__detail {
  display: flex;
  flex-direction: column;
  gap: var(--layout-gutter);
}
.s-w12 .s-w12__detail-title {
  color: var(--content-primary);
}
.s-w12 .s-w12__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-w12 .s-w12__points {
  display: flex;
  flex-direction: column;
  gap: var(--layout-gutter);
  max-width: 657px;
}
.s-w12 .s-w12__point {
  display: flex;
  gap: 12px;
  color: var(--content-primary);
}
.s-w12 .s-w12__dash {
  flex: 0 0 auto;
}

/* --- The sign-up row ----------------------------------------------------
   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-w12 .s-w12__form {
  position: relative;
  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.                             */
.s-w12 .s-w12__label,
.s-w12 .s-w12__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-w12 .s-w12__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-w12 .s-w12__plate::placeholder {
  color: var(--vista-blue-1);
  opacity: 1;
}
.s-w12 .s-w12__plate:focus-visible {
  outline-offset: 0;
  background-color: var(--editorial-white-2);
}

.s-w12 .s-w12__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-w12 .s-w12__submit-label {
  white-space: nowrap;
}
.s-w12 .s-w12__submit:hover:not([disabled]) {
  background: var(--action-fill-hover);
  box-shadow: inset 0 0 0 3px var(--action-border-hover);
}
.s-w12 .s-w12__submit[disabled] {
  cursor: progress;
}

/* Once it has something to say the status line takes a row of its own under
   the pair. The macket draws no such line, so it stays out of the layout
   until it is needed — see w12.assets.md.                                 */
.s-w12 .s-w12__status {
  flex: 1 0 100%;
  color: var(--content-primary);
}