/* ========================================================================
   Frontsill marketing site — "Sunlit terrace"
   ========================================================================

   WHY THIS FILE EXISTS SEPARATELY FROM styles.css
   -----------------------------------------------
   marketing/styles.css is the OLD design system (ds-* classes: indigo/coral,
   browser-chrome mockups, floating gradient blobs). marketing/pitch.html —
   the Quick Pitch page — still runs on it and must keep looking exactly as
   it does today, so styles.css is deliberately left untouched rather than
   rewritten in place. This file is the marketing home page's own system,
   under its own wm-* prefix, and the two never mix.

   WHO THIS IS DESIGNED FOR
   ------------------------
   Not developers, and not startup founders. A family, a couple, or one
   person running a small place in Spain — often over 35, often over 55,
   usually with no website of their own and no interest in acquiring
   opinions about software. Every choice below follows from that:

   - TYPE IS BIG. Body copy is 20px, never below 18px. Health Literacy
     Online recommends >=19px for older readers, and Nielsen Norman found
     the ability to use websites falls ~0.8% a year from age 25 to 60 —
     people in their 40s already need larger text than the designers
     drawing it. Line height is 1.65 for the same reason.

   - CONTRAST IS CHECKED, NOT EYEBALLED. Every colour that carries text has
     a measured ratio in the comment beside it. The bright display colours
     (--wm-tomato, --wm-sun, --wm-olive) are for LARGE SHAPES ONLY; their
     -ink variants are the text-safe versions. Never set small text in a
     non-ink variant.

   - TARGETS ARE LARGE. Buttons are min 56px tall, links in body copy are
     underlined (colour alone is not a signal for older or colour-blind
     eyes), and there is not a single dropdown or slider on the page —
     NN/g flags both as disproportionately hard with declining motor
     control.

   - SHAPES ARE SQUIRCLES. Erik asked for these specifically. `corner-shape:
     squircle` is Chromium-only as of 2026 (Safari and Firefox have not
     shipped it), so it is layered ON TOP of a generous border-radius:
     browsers that understand it get true superellipse corners, everyone
     else gets soft rounded ones and nothing looks broken. That is why
     every rounded thing here sets BOTH properties — do not "tidy up" the
     border-radius away.

   - NOTHING READS AS SOFTWARE. No browser chrome, no dashboard mockups, no
     gradient mesh, no monospace, no dark mode toggle, no charts. The
     decorative shapes are suns, arches and leaves, drawn flat.

   PALETTE: "Sunlit terrace" — a Spanish courtyard at midday. Erik ruled out
   brown and beige explicitly. The warm background below is a ROSE-cast
   near-neutral white, not a yellow-cast cream. It was originally a rosier
   #FFF6F2; Erik's "it's too pink" on 2026-08-04 took the red bias out of
   every neutral. Keep blue <= green <= red, all within a few points of each
   other, and above 95% lightness — pink lies on one side of that and beige
   on the other.
   ------------------------------------------------------------------- */

:root {
  /* ---- Warm neutrals ---- */
  /* ---- NEUTRALS: near-neutral, and that is the point ----
     Erik, 2026-08-04: "it's too pink." He was right, and it was these, not
     the accents. The old values carried a heavy red-over-blue bias — the
     background was 8 points of red over blue and the borders were 20 to 30,
     which over a whole page reads as a rose bath rather than as warmth.
     These sit at 2 to 7, i.e. effectively neutral with only a whisper left.

     If you ever retune them, check TWO things, because there are ditches on
     both sides of this road: R minus B above ~10 starts reading pink, and
     G noticeably below R with B far below both starts reading BEIGE, which
     is separately banned. Keep R >= G >= B, all within a few points. ---- */
  --wm-paper: #faf9f8;        /* page background */
  --wm-paper-deep: #f1f0ee;   /* alternating band */
  --wm-card: #ffffff;
  --wm-line: #e5e3e0;
  --wm-line-strong: #cfccc8;

  /* ---- Ink ---- */
  --wm-ink: #2b1f2d;          /* 14.94:1 on --wm-paper */
  --wm-ink-soft: #6b5a6e;     /* 6.03:1 on --wm-paper — secondary text only */

  /* ---- Tomato: the lead colour ---- */
  --wm-tomato: #b8371f;       /* deep tomato — large fills. Deepened from the
                                 original #e04a2f, which read bright and
                                 energetic; this is the same hue with the
                                 brightness taken out, so it stays a red and
                                 never drifts toward brown. 5.83:1 on white,
                                 5.48:1 on paper — so unlike the old bright
                                 tomato it carries text safely on its own. */
  --wm-tomato-ink: #b8371f;   /* same value — the deep fill is now text-safe,
                                 so there is no longer a bright/ink split to
                                 get wrong on this colour */
  --wm-tomato-deep: #8e2715;  /* hover / pressed */
  --wm-tomato-wash: #f4efed;      /* icon tiles — was #f7e4de, openly pink */
  --wm-tomato-wash-deep: #e6dedb;

  /* ---- Sun gold: highlights and big flat shapes ---- */
  --wm-sun: #d99a2b;          /* LARGE SHAPES ONLY — never text on white.
                                 Muted down from #f5b733: still unmistakably
                                 gold, no longer sunshine-bright. */
  --wm-sun-ink: #8a5a00;      /* 5.93:1 on white — text-safe gold */
  --wm-sun-wash: #f6eed9;

  /* ---- Navy: the logo's own dark ----
     Erik, 2026-08-04: "look at the logo. There's a dark color that is used
     ... extract that color and then apply it to the text. It's way too
     harsh right now."

     --wm-navy IS the logo's dark, sampled straight out of
     images/frontsill-logo.png (the arch and the door handle) — exact, not
     eyeballed. Its two companions in that file are the amber #e7a52d and
     the olive #6f7b4d, both of which already have tokens above.

     The two -text values below are the SAME navy lifted toward the paper,
     because the raw colour is not the answer on its own: at full strength
     it is 16.4:1 on --wm-paper, i.e. DARKER than --wm-ink, so pasting it
     straight onto text would have made the exact harshness Erik was
     objecting to slightly worse while technically doing what was asked.
     Lifting it keeps the logo's hue — which is the part he wants to see on
     the page — and drops the contrast to a level that reads as ink rather
     than as a shout. Both are comfortably past AA, so this is softening,
     not a legibility trade. Use --wm-navy itself for shapes and the two
     -text values for words. */
  --wm-navy: #090446;         /* the logo's dark, exactly */
  --wm-navy-text: #514d7b;    /* 7.0:1 on --wm-paper — headings */
  --wm-navy-text-soft: #696690; /* 5.4:1 on --wm-paper — secondary lines */

  /* ---- Olive: the calm, natural counterweight ---- */
  --wm-olive: #5f7a45;        /* LARGE SHAPES ONLY */
  --wm-olive-ink: #4f6636;    /* 6.39:1 on white — text-safe */
  --wm-olive-wash: #e8eee0;
  --wm-logo-green: #6f7b4d;   /* the logo's sill bar, exactly — 4.55:1 on
                                  white, sampled straight from
                                  images/frontsill-logo.png rather than
                                  reusing --wm-olive-ink above, which is a
                                  separate icon-tint colour, not the logo's
                                  own green. Erik, 2026-08-12: "Free" should
                                  read in "the same green we use in the
                                  logo." */

  /* ---- Squircle radii ----
     Paired with corner-shape below. Squircle corners read visually tighter
     than a circular radius of the same value, so the @supports block bumps
     them up — the shape stays identical to the eye across browsers. */
  --wm-r-sm: 10px;
  --wm-r: 16px;
  --wm-r-lg: 22px;
  --wm-r-xl: 28px;
  --wm-r-pill: 999px;         /* now used ONLY for the language toggle */

  /* ---- NO SHADOWS. THIS IS A HARD RULE, NOT A STYLE PREFERENCE. ----
     Erik ruled out drop shadows permanently on 2026-08-04. There are no
     shadow tokens here on purpose, so that reaching for one means noticing
     you are breaking a rule rather than filling in a blank. This design is
     flat: separation comes from BORDERS and from background colour, never
     from a shadow. Do not add box-shadow, filter: drop-shadow, or a
     shadow-coloured gradient standing in for one — not for cards, not for
     buttons, not "just a subtle one" on a modal or a dropdown. See the
     "never use drop shadows" hard rule in CLAUDE.md. ---- */

  /* Fraunces is the whole "these are businesses after all" note, answered.
     Nunito's rounded terminals were doing most of the playfulness; a warm
     editorial serif reads the way a good restaurant's menu or a boutique
     hotel's sign reads — characterful and established rather than bouncy.
     Source Sans 3 underneath is humanist and quiet: warm enough not to feel
     like software, plain enough to stay out of the serif's way, and highly
     legible at the large sizes this audience needs. */
  --wm-font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --wm-font-body: "Source Sans 3", system-ui, -apple-system, sans-serif;

  --wm-wrap: 1140px;
}

/* True squircles where supported (Chromium 139+ as of 2026). Everywhere else
   the border-radius above stands on its own. */
@supports (corner-shape: squircle) {
  :root {
    --wm-r-sm: 13px;
    --wm-r: 21px;
    --wm-r-lg: 29px;
    --wm-r-xl: 37px;
  }
  .wm-sq { corner-shape: squircle; }
}

/* ======================================================================
   BASE
   ====================================================================== */

body.wm {
  margin: 0;
  background: var(--wm-paper);
  color: var(--wm-ink);
  font-family: var(--wm-font-body);
  font-size: 20px;          /* deliberately large — see the header comment */
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* SIDEWAYS IS CUT OFF; UP AND DOWN IS NOT. The decorative shapes hang off
   the left and right edges of the page on purpose, and nothing clips them
   at a section boundary any more (see .wm-hero) — so this is what stops
   them turning the page into something you can drag sideways.

   Two things about this line are deliberate:

   `clip`, NOT `hidden`. They look interchangeable and are not. `hidden`
   makes this a scrolling box, and a scrolling box between the page and a
   `position: sticky` header is one of the classic ways to stop the header
   sticking — the Quick Pitch page's header is sticky. `clip` cuts the
   overflow off and creates no scrolling box at all.

   On <main>, NOT on <body> or <html>. Tried on the body first and it does
   not hold: the browser hands the body's overflow up to the page itself
   (the standard says to, when <html> is left alone), the body stops
   clipping anything, and the sun goes back to widening the page — measured,
   70px of sideways drag on a phone. <main> is an ordinary element, so it
   simply clips, and it wraps every decorative shape on both pages.

   Only the sideways axis is named, so up-and-down stays untouched and a
   shape can still bleed from one section into the next. Never write this as
   plain `overflow`, and never as `hidden`. */
.wm main { overflow-x: clip; }
/* `position: relative` (Erik, 2026-08-05) added for the new background
   field further down this file (.wm-deco-field) — see its own comment for
   why. Doesn't create a scrolling box and doesn't touch the sticky header
   the same way `overflow: hidden` would (see the comment on the line
   above) — it only gives an absolutely positioned descendant somewhere to
   anchor to that is still inside <main>'s own clip. Without it, a
   position: absolute element sitting directly in <main> skips straight
   past <main> to the page itself for positioning purposes, and the clip
   above stops bounding it — caught in testing: the field was still
   widening a phone-width page by 91px with the clip rule already in
   place, because it was doing exactly that. */
.wm main { position: relative; }

/* Every nav/CTA link on this page is a same-page `#anchor` jump (Talk to
   us, What it costs, etc.) — without this they snap instantly, which reads
   as jarring. html:has(.wm) scopes it to pages that use this stylesheet. */
html:has(.wm) { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html:has(.wm) { scroll-behavior: auto; }
}

.wm, .wm * { box-sizing: border-box; }
.wm img { max-width: 100%; display: block; }
.wm ul { list-style: none; margin: 0; padding: 0; }

.wm h1, .wm h2, .wm h3, .wm h4 {
  font-family: var(--wm-font-display);
  font-weight: 600;           /* was 800 — heavy display weight reads loud */
  line-height: 1.14;
  letter-spacing: -0.012em;
  color: var(--wm-ink);
  margin: 0;
  /* Long Spanish compounds ("disponibilidad", "establecimiento") overflow
     narrow phones otherwise — Spanish headlines run ~20% longer than the
     English they are translated from. */
  overflow-wrap: break-word;
}

.wm p { margin: 0; }

/* Links inside running text are underlined, not just coloured. Colour alone
   is not a link signal for older or colour-blind readers. */
/* DELIBERATELY NO COLOUR ON `.wm a`. That selector is one class AND one
   element (0,1,1), which out-specifies a single component class such as
   `.wm-btn-primary { color: #fff }` (0,1,0) — so it silently repaints every
   button label in the link colour. That is exactly what happened while this
   was being built: the primary buttons rendered as solid tomato pills with
   tomato text on them, i.e. blank. Colour is therefore set by each component
   itself (.wm-nav-links a, .wm-footer a, .wm-btn-*), and a new link in
   running text should carry .wm-link rather than rely on a blanket rule. */
.wm a { text-decoration: none; }

/* Links in running text are underlined, not just coloured — colour on its own
   is not a link signal for older or colour-blind readers. */
.wm .wm-link {
  color: var(--wm-tomato-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.wm :focus-visible {
  outline: 3px solid var(--wm-tomato-ink);
  outline-offset: 3px;
  border-radius: 4px;
}

.wm-wrap {
  width: 100%;
  max-width: var(--wm-wrap);
  margin: 0 auto;
  padding: 0 24px;
}

.wm-only-screenreader {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Skip link — keyboard users land here first. */
.wm-skip {
  position: absolute; left: 16px; top: -100px; z-index: 200;
  background: var(--wm-ink); color: #fff;
  padding: 14px 22px; font-weight: 700;
  border-radius: var(--wm-r-sm);
  transition: top 0.15s ease;
}
.wm-skip:focus { top: 16px; }

/* ======================================================================
   SECTIONS
   ====================================================================== */

.wm-section { padding: 104px 0; position: relative; }
.wm-section-warm { background: var(--wm-paper-deep); }
.wm-section-white { background: var(--wm-card); }

/* ---- FROSTED-GLASS BACKGROUND FIELD (Erik, 2026-08-05) ----
   The markup for this (.wm-deco-field, in index.html, right at the top of
   <body>) explains the shapes themselves. This is the stacking-order half
   of it, and it is the part that makes this different from the hero's own
   sun/leaf and the Quick Pitch page's orbs — both of THOSE sit inside one
   section, in front of that section's own background colour. Erik asked
   for this one to sit behind a section's colour too, not just behind the
   words: "it should live behind all elements and colors on the page... put
   it behind everything — even the background colors of each content
   section."

   HOW "BEHIND A SOLID COLOUR" ACTUALLY WORKS: it can't be seen through an
   opaque background — nothing can. What "behind everything" gets you
   instead is a field that is genuinely lower in the page's paint order
   than EVERY section, not just lower than their text. Where a section has
   no background colour of its own (the plain paper bands — "What you
   get", "Price", "Questions"), the field shows through, same as it would
   through a window. Where a section DOES set a colour (the white and warm
   bands, the red "Say hello" band), that section's own background is what
   quietly covers it there — not a rule fighting the shapes, just the
   normal, correct way a lower layer behaves.

   WHY IT WORKS WITHOUT AN EXTRA z-index. This relies on the exact same
   mechanic explained in full on .wm-hero-deco below: a `position: relative`
   element with no z-index of its own still outranks a plain, non-positioned
   sibling that comes before it in the markup, background AND content
   together. Every .wm-section already carries `position: relative` (the
   rule right above this comment) for that reason. .wm-deco-field only
   needs to be `position: absolute` (so it does not take up space) and
   placed BEFORE the header and every section in the markup — no z-index at
   all, because it does not need to outrank anything, only to lose to
   everything that comes after it. Giving it one anyway would be the exact
   mistake that rule already warns against: it would put it up in the same
   contest as .wm-header's z-index: 100 and .wm-skip's z-index: 200 for no
   reason, instead of sitting quietly below the sections' own z-index: auto.

   .wm-footer is given `position: relative` right where it's defined, for
   this same reason and no other — it is the one block on the page that
   didn't already have it, and without it the field could show up over the
   copyright line instead of losing to the footer's own dark background
   like every other block on the page. */
/* THE FIELD IS CLIPPED, AND THAT IS WHAT STOPS THE PAGE ENDING BELOW THE
   FOOTER (Erik, 2026-08-08: "this weird space below the footer... the page
   should stop at the bottom of the footer").

   These pieces are `position: absolute`, so they take up no space in the
   flow — but a piece that hangs BELOW the last real thing on the page still
   counts toward how far the page can be scrolled. The lowest pieces sit at
   97% of the way down and then drift further, so the page kept ending in a
   band of empty paper under the dark footer with a few blurred shapes
   floating in it. Measured before this fix: 108px of it once everything had
   settled, and 25,665px of it when the field was working from a page height
   that had since changed (a resize, or switching language).

   `overflow: clip` is the fix, and NOTHING MEASURES THE BOX IT CLIPS TO.
   That second half is the load-bearing part. Pinning all four sides
   (top/right/bottom/left: 0) makes this box exactly <main>'s box, worked out
   by the browser on every single paint — and <main> is precisely the page
   minus the header and the footer, so the box ends where the footer begins
   by construction. A height handed in by JS instead was tried first and is
   not good enough: it is right only until the page's real height changes
   under it, and it left 2,366px of empty paper below the footer the moment
   the window was resized. This version has nothing to go stale.

   So whatever a piece's fraction, size, blur or drift works out to, it
   cannot reach past <main>, and nothing here can make the page taller than
   its own content. Pieces near the very bottom are cut at the line where
   the footer starts, and the footer's own dark background sits over that
   line, so the cut is never visible.

   `clip`, NOT `hidden` — same distinction as `.wm main` further up this
   file: `hidden` would make this a scrolling box, `clip` simply cuts. And
   the cut runs on both axes on purpose: sideways it lands on exactly the
   same edge `.wm main { overflow-x: clip }` already cuts at, so it changes
   nothing there. */
.wm-deco-field {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  overflow: clip;
  pointer-events: none;
}
/* "top" (how far down the page) is set in pixels by setupDecoField() in
   app.js — it has to be measured against the page's real height, which
   isn't something a percentage in this file can know. Rotation is inline
   too (data-rot, read by the same function), so a piece is already at its
   angle from the very first paint rather than snapping into it once the
   script runs. Everything else — size, colour wash, blur — is a plain
   custom property set per piece in the markup, the same pattern
   .wm-pitch-orb already uses for --orb.
   will-change is safe here for the reason already noted on .wm-hero-sun/
   .wm-hero-leaf above: it would only be a trap on an element with a
   position: fixed descendant, and nothing inside one of these pieces is
   fixed. */
.wm-deco-piece {
  position: absolute;
  width: var(--piece, 100px);
  opacity: var(--op, 0.18);
  filter: blur(var(--blur, 7px));
  will-change: transform;
}
.wm-deco-piece img { width: 100%; height: auto; display: block; }

/* Smaller screens already have less empty margin for a piece to sit in
   without crowding the words above it — fainter rather than resized, so
   the same field still reads as one continuous background at any width. */
@media (max-width: 640px) {
  .wm-deco-piece { opacity: calc(var(--op, 0.18) * 0.7); }
}

.wm-head { max-width: 720px; margin: 0 auto 56px; text-align: center; }
.wm-head.is-left { margin-left: 0; text-align: left; }

.wm-eyebrow {
  /* Was a filled pastel pill, which read as a sticker. Now a small
     letterspaced label sitting on a short rule — the standard editorial
     device, and the single biggest step up in register after the typeface. */
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--wm-font-body);
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--wm-tomato-ink);
  margin-bottom: 20px;
}
.wm-eyebrow::before {
  content: "";
  width: 28px; height: 2px;
  background: currentColor;
  flex: none;
}
.wm-eyebrow.is-olive { color: var(--wm-olive-ink); }
.wm-eyebrow.is-sun { color: var(--wm-sun-ink); }
/* Centred section heads need the rule centred with the text, not hanging. */
.wm-head .wm-eyebrow { justify-content: center; }

.wm-head h2 {
  font-size: clamp(1.85rem, 4vw, 2.75rem);
  margin-bottom: 18px;
}
.wm-head p {
  font-size: 1.15rem;
  color: var(--wm-ink-soft);
  max-width: 620px;
  margin: 0 auto;
}
.wm-head.is-left p { margin-left: 0; }

/* ======================================================================
   BUTTONS — 56px minimum, pill-shaped, unmistakably tappable
   ====================================================================== */

.wm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 60px;           /* unchanged — the target stays large */
  padding: 16px 32px;
  font-family: var(--wm-font-body);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  border: 1px solid transparent;
  border-radius: var(--wm-r-sm);
  cursor: pointer;
  text-align: center;
  transition: transform 0.14s ease, background 0.14s ease;
}
.wm-btn:active { transform: translateY(2px); }

.wm-btn-primary {
  background: var(--wm-tomato-ink);
  color: #fff;
}
.wm-btn-primary:hover { background: var(--wm-tomato-deep); }

.wm-btn-ghost {
  background: transparent;
  color: var(--wm-ink);
  border-color: var(--wm-line-strong);
}
.wm-btn-ghost:hover { border-color: var(--wm-ink); background: rgba(255,255,255,0.6); }

.wm-btn-block { width: 100%; }

/* The "this opens in a new tab" mark, on the buttons that actually do open a
   new tab (Erik, 2026-08-04 — he asked for a little icon so people know the
   page won't replace the one they're reading). Sized in em so it always
   matches the button's own text instead of drifting when the button's font
   size changes, and drawn in currentColor so it works on any button colour.
   The negative margin only trims .wm-btn's 10px gap down to something that
   reads as part of the label rather than a second item beside it.

   Every button using it also carries a real "(opens in a new tab)" sentence
   in a .wm-only-screenreader span: the icon tells a sighted person and nobody
   else, so the sentence is what a screen reader announces. Keep both. */
.wm-btn-newtab {
  width: 0.95em;
  height: 0.95em;
  flex: none;
  margin-left: -3px;
  opacity: 0.75;
}

/* ======================================================================
   HEADER
   ====================================================================== */

.wm-header {
  position: sticky; top: 0; z-index: 100;
  /* Was rgba(255,246,242,.94) — the ORIGINAL pink paper, hardcoded, which
     is why the bar stayed pink after the token went neutral. Never hardcode
     a colour that shadows a token; colour-mix keeps it tied to --wm-paper. */
  background: var(--wm-paper);   /* fallback if color-mix is unsupported */
  background: color-mix(in srgb, var(--wm-paper) 94%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--wm-line);
}

.wm-nav {
  display: flex; align-items: center; gap: 20px;
  min-height: 84px;
}

.wm-brand { display: flex; align-items: center; gap: 10px; flex: none; }

/* ---- The logo (Erik's own artwork, 2026-08-04) ----
   This used to be a tomato-coloured rounded square with a plain white glyph
   inside it — a stand-in until there was a real logo. The real one is a
   full-colour drawing that carries its own shape and its own background
   (it is transparent around the arch), so it is shown on its own: no tile
   behind it, no rounding, nothing tinting it. Putting it back inside a
   coloured square would fight the artwork's own navy/amber/olive.

   Sized by HEIGHT with width: auto, because the artwork is taller than it
   is wide (701 x 853). Never pin it to a square box — that either squashes
   the arch or leaves it floating in dead space. The intrinsic width/height
   are on the <img> in the HTML so the header does not shift while the
   image loads. ---- */
.wm-brand-mark {
  height: 44px; width: auto; flex: none;
  display: flex; align-items: center; justify-content: center;
}
.wm-brand-mark img { height: 100%; width: auto; display: block; }
.wm-brand-name {
  font-family: var(--wm-font-display);
  font-size: 1.45rem; font-weight: 600;
  color: var(--wm-ink); letter-spacing: -0.01em;
}

.wm-nav-links { display: flex; gap: 6px; margin-left: auto; }
.wm-nav-links a {
  font-family: var(--wm-font-body);
  font-weight: 600; font-size: 1rem;
  color: var(--wm-ink);
  padding: 12px 16px;
  border-radius: var(--wm-r-sm);
}
.wm-nav-links a:hover { background: var(--wm-tomato-wash); color: var(--wm-tomato-ink); }

.wm-nav-actions { display: flex; align-items: center; gap: 12px; flex: none; }

.wm-lang {
  display: flex; gap: 4px;
  background: var(--wm-card);
  border: 1px solid var(--wm-line);
  border-radius: var(--wm-r-pill);
  padding: 4px;
}
.wm-lang-btn {
  min-width: 48px; min-height: 40px;
  border: 0; background: transparent; cursor: pointer;
  border-radius: var(--wm-r-pill);
  font-size: 1rem; line-height: 1;
  font-family: var(--wm-font-body); font-weight: 700;
  color: var(--wm-ink-soft);
}
.wm-lang-btn.is-on { background: var(--wm-tomato-wash); color: var(--wm-tomato-ink); }

/* ---- Collapsed at the very top, grows open once you scroll (Erik,
   2026-08-05, adjusted same day: "before the user scrolls I want the
   language selector to be in the place where the button is when the user
   scrolls, and when they start to scroll move the language selector to the
   left") ----
   The hero right below the header already has its own "Talk to us" button,
   so showing a second one in the bar at rest is redundant. At rest this one
   is collapsed to zero width, so the language switch sits where the button
   normally would (flush at the right of the bar); once the visitor scrolls,
   it grows open and the language switch is pushed left to make room — an
   ordinary flexbox reflow, not a second animation to keep in sync. See
   setupNavCta() in app.js for the scroll listener that adds/removes
   ".wm-header.is-scrolled".

   `max-width` (not `width`) is what's animated, because the button's own
   width isn't a fixed number — it holds different text per language
   ("Talk to us" / "Hablemos" / "Parlem") — so a `width` transition would
   need a per-language value to animate to. 200px clears the longest of the
   three with room to spare; `overflow: hidden` + `white-space: nowrap`
   keep the label clipped rather than wrapping while it's still growing.
   `padding` and `margin-left` animate alongside it so the collapsed state
   is truly zero width, not just zero-width content sitting inside leftover
   padding. The -12px margin-left at rest cancels out `.wm-nav-actions`'s
   own 12px gap, so the language switch and the (invisible) button are
   flush with no dead gap between them.

   `visibility` is paired with `opacity` rather than used alone: opacity is
   what actually fades the label, and visibility is what keeps the button
   out of the tab order and unclickable while it's collapsed. The
   transition-delay on visibility is the trick that makes both feel like one
   smooth motion instead of a hard cut — showing flips visibility on
   immediately (delay 0s) so the fade-in is visible from its first frame;
   hiding waits for the fade-out to finish (delay matches the other
   durations) before flipping visibility off, so it isn't clipped mid-fade. */
.wm-nav-cta {
  min-height: 52px; font-size: 1.02rem;
  max-width: 0; padding: 12px 0; margin-left: -12px;
  overflow: hidden; white-space: nowrap;
  opacity: 0; visibility: hidden;
  transition: max-width 0.32s ease, padding 0.32s ease, margin-left 0.32s ease,
    opacity 0.22s ease, visibility 0s linear 0.32s;
}
.wm-header.is-scrolled .wm-nav-cta {
  max-width: 200px; padding: 12px 26px; margin-left: 0;
  opacity: 1; visibility: visible;
  transition: max-width 0.32s ease, padding 0.32s ease, margin-left 0.32s ease,
    opacity 0.22s ease, visibility 0s linear 0s;
}

.wm-nav-toggle {
  display: none;
  width: 56px; height: 56px;
  border: 1px solid var(--wm-line-strong);
  background: var(--wm-card);
  border-radius: var(--wm-r-sm);
  cursor: pointer;
  padding: 0;
  align-items: center; justify-content: center;
  flex-direction: column; gap: 5px;
}
.wm-nav-toggle span {
  display: block; width: 24px; height: 3px;
  background: var(--wm-ink); border-radius: 2px;
}

/* ======================================================================
   HERO
   ====================================================================== */

/* NOTHING CLIPS THE DECORATION HERE (Erik, 2026-08-04): "I don't like that
   the circles get cut off, they should bleed from one section to another
   seamlessly." The hero used to clip its own overflow, which sliced a flat
   edge straight through the sun and the arch at the hero's top and bottom
   boundaries — a hard straight line across a round shape, in the middle of
   plain paper, with nothing there to explain it.

   Sideways scrolling is held back by `overflow-x: clip` on <main> instead
   (see the BASE section). Stopping the page being draggable sideways was the
   only other thing the clip here was doing, and <main> does that for both
   pages at once without touching the up-and-down axis.

   Never put `overflow: hidden` back on the hero or on .wm-hero-deco. If a
   shape ever needs to stop somewhere, stop it at the edge of a section that
   has its own background — a real edge the eye can see a reason for. */
.wm-hero { padding: 72px 0 96px; position: relative; }

/* Flat decorative shapes — a sun and an arch. Deliberately NOT blurred
   gradient blobs, which are the visual signature of a software landing
   page and the exact impression this redesign is removing. */
/* THE DECORATION ALWAYS SITS BEHIND THE WORDS. Erik, 2026-08-04, on the
   Quick Pitch page: "Don't put the text behind the circle in the header."
   The sun was painting OVER the headline — half of "Your own page." came
   out washed out under it. Cause: the deco layer is positioned and the
   hero's own .wm-wrap was not, and a positioned element paints above an
   unpositioned one no matter which comes first in the page. The home page
   happened to escape it only because its .wm-hero-grid carries a
   position of its own; the pitch page's plain wrap did not.
   These two lines make it structural rather than accidental — the deco is
   pinned to the back layer, and everything inside the hero's wrap to the
   front — so any new hero content is in front by default. Do not remove
   either half, and never fix an overlap here by moving a shape instead. */
/* WHAT KEEPS A BLEEDING SHAPE OFF THE WORDS BELOW IT, now that nothing
   clips it: every .wm-section is `position: relative` and comes after the
   hero on the page, so a section paints over this layer in full — its
   background where it has one, its words either way. A shape can therefore
   run past the hero and carry on across plain paper, disappear behind the
   next coloured or white panel at that panel's own edge, and never wash out
   a line of text on the way. That is why `.wm-section { position: relative }`
   is load-bearing and not just tidiness — don't drop it. */
.wm-hero-deco { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.wm-hero > .wm-wrap { position: relative; z-index: 1; }
/* These two are moved on scroll by setupHeroParallax() in app.js. will-change
   promotes them to their own layer up front so the drift is smooth from the
   first scroll rather than hitching while the browser catches up.
   Safe here specifically because both are empty elements: will-change (like
   transform) would otherwise make them the containing block for any
   position:fixed descendant, which is the trap documented against .dash-head
   in CLAUDE.md. Do not copy this onto anything that has children. */
.wm-hero-sun, .wm-hero-leaf { will-change: transform; }
.wm-hero-sun {
  position: absolute; top: -120px; right: -100px;
  width: 560px; height: 560px;
  border-radius: 50%;
  /* Bigger and far fainter than before: at 420px of solid wash it read as a
     cartoon sun. At this size and opacity it is ambient warmth you notice
     without looking at, which is the job. */
  background: var(--wm-sun-wash);
  opacity: 0.5;
}
.wm-hero-leaf {
  position: absolute; bottom: -140px; left: -110px;
  width: 340px; height: 340px;
  border-radius: 50%;
  background: var(--wm-olive-wash);
  opacity: 0.4;
}

.wm-hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 64px;
  align-items: center;
}

.wm-hero h1 {
  font-size: clamp(2.4rem, 5.2vw, 3.7rem);
  margin-bottom: 26px;
}
.wm-hero h1 .wm-hl {
  color: var(--wm-tomato-ink);
  /* A hand-drawn-feeling underline rather than a highlighter block — warmer,
     and it keeps the text on the page background so contrast stays at
     5.11:1 instead of dropping onto a tinted fill. */
  background-image: linear-gradient(var(--wm-sun), var(--wm-sun));
  background-repeat: no-repeat;
  background-size: 100% 4px;   /* was 12px — a marker stripe. Now a rule. */
  background-position: 0 96%;
  padding: 0 1px;
}

.wm-hero-sub {
  font-size: 1.22rem;
  color: var(--wm-ink-soft);
  margin-bottom: 36px !important;
  max-width: 30em;
}

.wm-hero-cta { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 28px; }

.wm-hero-note {
  display: flex; align-items: center; gap: 12px;
  font-size: 1.02rem; font-weight: 700;
  color: var(--wm-olive-ink);
}
.wm-hero-note svg { width: 26px; height: 26px; flex: none; }

/* ---- Hero picture: a framed photograph, not a browser window ----
   The old design wrapped this same screenshot in fake browser chrome with a
   URL bar. To this audience that reads as "software"; framed like a picture
   it reads as "a place". */
.wm-hero-copy { position: relative; z-index: 2; }
/* Scaled up a little and left to overflow its own grid track — the frame,
   its offset colour pad and the floating chip all grow together since the
   transform is on the shared wrapper, not the frame alone. No layout
   reflow happens (transform doesn't affect the grid track), so it simply
   bleeds left over the copy column; .wm-hero-copy's z-index above keeps
   the words on top where the two overlap. */
.wm-hero-art { position: relative; transform: scale(1.22); transform-origin: 100% 50%; }
.wm-hero-frame {
  position: relative;
  border-radius: var(--wm-r-xl);
  overflow: hidden;
  border: 10px solid var(--wm-card);
  outline: 1px solid var(--wm-line-strong);
  transform: rotate(-1.6deg);
}
.wm-hero-frame img { width: 100%; height: auto; }
.wm-hero-pad {
  position: absolute;
  inset: 26px -26px -26px 26px;
  border-radius: var(--wm-r-xl);
  background: var(--wm-sun);
  z-index: -1;
}

/* The small floating card — one real, human sentence, not a metric. */
.wm-hero-chip {
  position: absolute;
  right: -18px; bottom: -30px;
  background: var(--wm-card);
  border-radius: var(--wm-r);
  border: 1px solid var(--wm-line-strong);
  padding: 18px 24px;
  display: flex; align-items: center; gap: 14px;
  max-width: 290px;
}
.wm-hero-chip-dot {
  width: 46px; height: 46px; flex: none;
  border-radius: var(--wm-r-sm);
  background: var(--wm-olive-wash);
  color: var(--wm-olive-ink);
  display: flex; align-items: center; justify-content: center;
}
.wm-hero-chip-dot svg { width: 24px; height: 24px; }
.wm-hero-chip-text { font-size: 0.95rem; line-height: 1.4; font-weight: 700; }
.wm-hero-chip-text small {
  display: block; font-weight: 400; font-size: 0.86rem;
  color: var(--wm-ink-soft);
}

/* ======================================================================
   THE COST SECTION — one enormous, honest number
   ====================================================================== */

.wm-cost-figure {
  max-width: 760px; margin: 0 auto 56px;
  background: #f6eed9;
  border-radius: var(--wm-r-lg);
  padding: 56px 40px;
  text-align: center;
}
.wm-cost-big {
  font-family: var(--wm-font-display);
  font-size: clamp(3rem, 8.5vw, 5rem);
  font-weight: 500;
  line-height: 1;
  color: var(--wm-tomato-ink);
  letter-spacing: -0.025em;
  margin-bottom: 14px;
}
.wm-cost-caption { font-size: 1.25rem; font-weight: 700; margin-bottom: 10px !important; }
.wm-cost-source { font-size: 0.95rem; color: var(--wm-ink-soft); }

/* The coin row: five coins, one of them taken away. A picture a person can
   read in a second without a legend, instead of a percentage bar chart. */
.wm-coins { display: flex; justify-content: center; gap: 14px; margin-bottom: 34px; flex-wrap: wrap; }
.wm-coin {
  /* Erik singled this out as worth keeping ("the punch card"), so the idea
     is untouched — four coins and a gap where the fifth went. Only the
     finish changes: muted gold, lighter figure, slightly smaller. */
  width: 66px; height: 66px;
  border-radius: 50%;
  background: var(--wm-sun);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--wm-font-display);
  font-weight: 500; font-size: 1.4rem;
  color: #402905;   /* 5.60:1 on the gold — #55380a measured only 4.40 */
}
.wm-coin.is-gone {
  background: transparent;
  border: 2px dashed var(--wm-line-strong);
  color: var(--wm-ink-soft);
  font-family: var(--wm-font-body);
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.wm-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.wm-fact {
  background: var(--wm-card);
  border-radius: var(--wm-r);
  border: 1px solid var(--wm-line);
  padding: 32px 28px;
}
.wm-fact-icon {
  width: 96px; height: 96px;
  border-radius: var(--wm-r);
  background: var(--wm-tomato-wash);
  color: var(--wm-tomato-ink);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 20px;
}
.wm-fact-icon svg { width: 48px; height: 48px; }
.wm-fact h3 { font-size: 1.2rem; margin-bottom: 10px; }
.wm-fact p { color: var(--wm-ink-soft); font-size: 1.02rem; }

/* ======================================================================
   WHAT YOU GET — three big warm cards
   ====================================================================== */

.wm-gets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.wm-get {
  background: var(--wm-card);
  border-radius: var(--wm-r-lg);
  padding: 44px 36px;
  display: flex; flex-direction: column;
}
.wm-get-art {
  width: 96px; height: 96px;
  border-radius: var(--wm-r);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 28px;
}
.wm-get-art svg { width: 48px; height: 48px; }
.wm-get-art.is-tomato { background: var(--wm-tomato-wash); color: var(--wm-tomato-ink); }
.wm-get-art.is-sun { background: var(--wm-sun-wash); color: var(--wm-sun-ink); }
.wm-get-art.is-olive { background: var(--wm-olive-wash); color: var(--wm-olive-ink); }
.wm-get h3 { font-size: 1.5rem; margin-bottom: 14px; }
.wm-get p { color: var(--wm-ink-soft); font-size: 1.08rem; }

/* ======================================================================
   HOW IT WORKS — three steps, enormous numerals
   ====================================================================== */

.wm-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.wm-step {
  background: var(--wm-card);
  border-radius: var(--wm-r-lg);
  padding: 40px 34px;
  position: relative;
}
.wm-step-num {
  /* Were 76px blocks of flat bright colour with a heavy numeral in them —
     the most poster-like thing on the page. Now a large serif figure sitting
     over a short rule: same three-step rhythm, same colour coding, read as
     a chapter number instead of a badge. */
  display: block;
  font-family: var(--wm-font-display);
  font-size: 3.4rem;
  font-weight: 500;
  line-height: 1;
  color: var(--wm-tomato-ink);
  padding-bottom: 16px;
  margin-bottom: 22px;
  border-bottom: 2px solid currentColor;
  width: 2.2ch;
}
.wm-step:nth-child(2) .wm-step-num { color: var(--wm-sun-ink); }
.wm-step:nth-child(3) .wm-step-num { color: var(--wm-olive-ink); }
.wm-step h3 { font-size: 1.4rem; margin-bottom: 12px; }
.wm-step p { color: var(--wm-ink-soft); font-size: 1.05rem; margin-bottom: 16px !important; }
.wm-step-when {
  /* Was a filled grey pill, which read as a button — see the identical
     fix on .wm-eyebrow above. Now plain letterspaced text. */
  display: inline-block;
  font-family: var(--wm-font-body);
  font-weight: 700; font-size: 0.85rem;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--wm-ink-soft);
}

.wm-reassure {
  margin-top: 44px;
  background: none;
  border: 2px solid var(--wm-olive-ink);
  border-radius: var(--wm-r-lg);
  padding: 34px 38px;
  display: flex; gap: 22px; align-items: center;
  max-width: 860px; margin-left: auto; margin-right: auto;
}
.wm-reassure svg { width: 40px; height: 40px; flex: none; color: var(--wm-olive-ink); }
.wm-reassure p { font-size: 1.1rem; font-weight: 600; color: var(--wm-olive-ink); }

/* ======================================================================
   PRICE
   ====================================================================== */

.wm-free {
  max-width: 780px; margin: 0 auto 60px;
  background: var(--wm-olive-wash);
  border-radius: var(--wm-r-lg);
  padding: 52px 44px;
  text-align: center;
}
.wm-free h3 {
  font-size: clamp(2rem, 4.6vw, 2.9rem);
  color: var(--wm-olive-ink);
  margin-bottom: 14px;
}
.wm-free p { font-size: 1.15rem; color: var(--wm-ink-soft); max-width: 30em; margin: 0 auto; }

/* The extras grid — every add-on gets its own card, three across, icon
   above the text (matching the "What you get" cards higher up the page)
   instead of beside it. Each card ends in a footer with the price and a
   Preview button that opens a real screenshot of that feature in a
   lightbox (see .wm-extra-preview and #extraPreview below, and
   openExtraPreview() in app.js). */
.wm-extras {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}
.wm-extra {
  display: flex; flex-direction: column;
  padding: 32px 28px;
  background: var(--wm-card);
  border-radius: var(--wm-r-lg);
}
.wm-extra-icon {
  width: 72px; height: 72px; flex: none;
  border-radius: var(--wm-r);
  background: var(--wm-tomato-wash);
  color: var(--wm-tomato-ink);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 20px;
}
.wm-extra-icon.is-sun { background: var(--wm-sun-wash); color: var(--wm-sun-ink); }
.wm-extra-icon.is-olive { background: var(--wm-olive-wash); color: var(--wm-olive-ink); }
.wm-extra-icon svg { width: 34px; height: 34px; }
.wm-extra-body { flex: 1; min-width: 0; }
.wm-extra-body h4 { font-size: 1.1rem; margin-bottom: 8px; }
.wm-extra-body p { font-size: 0.96rem; color: var(--wm-ink-soft); }
/* No divider and no space reserved for a price row any more (Erik,
   2026-08-13: "remove the line... move [See it] to the left side of the
   box") — See it now sits directly under the description, on the left,
   same as every other piece of text in the card. */
.wm-extra-foot {
  display: flex; align-items: center; justify-content: flex-start; gap: 12px;
  margin-top: 18px;
}
/* Prices are hidden site-wide for now (Erik, 2026-08-13: "don't display any
   prices on this page right now... keep the prices, just don't display
   them") — the number, "a month", and "Free" are all still written into
   this HTML/i18n.js exactly as before, just not shown. To flip them back on:
   delete this rule, and give .wm-extra-foot back a border-top + padding-top
   (see git history for the exact values) now that there's something above
   See it again worth separating from the description with a line. */
.wm-extra-price { display: none; }
.wm-extra-price small {
  font-size: 0.72rem; font-weight: 700; color: var(--wm-ink-soft); display: block;
  margin-top: 1px; /* close to the price above it, not floating apart */
}
.wm-extra-price[data-i18n="price.alwaysFree"] { color: var(--wm-logo-green); }
.wm-extra-preview {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  background: transparent; border: 1px solid var(--wm-line-strong);
  border-radius: var(--wm-r-sm);
  padding: 9px 14px;
  font-family: var(--wm-font-body); font-size: 0.86rem; font-weight: 700;
  color: var(--wm-ink); cursor: pointer;
  transition: border-color 0.14s ease, background 0.14s ease;
}
.wm-extra-preview svg { width: 16px; height: 16px; flex: none; }
.wm-extra-preview:hover { border-color: var(--wm-ink); background: var(--wm-paper-deep); }

/* A closing note under the grid. Erik, 2026-08-13: the plain-text version
   (no box, no background) got lost at the bottom of a long card grid —
   "this needs to stand out a little more." Now a tinted callout, same
   pattern as .wm-free above: a warm wash + rounded corners give it contrast
   against the plain section background, no border or shadow needed. */
.wm-price-contact {
  max-width: 620px; margin: 48px auto 0;
  background: var(--wm-tomato-wash);
  border-radius: var(--wm-r-lg);
  padding: 44px 40px;
  text-align: center;
}
.wm-price-contact p { font-size: 1.2rem; font-weight: 600; color: var(--wm-ink); margin-bottom: 22px; }

/* ======================================================================
   WHO'S BEHIND THIS — the trust moment
   ====================================================================== */

.wm-who-grid {
  display: grid; grid-template-columns: 380px 1fr; gap: 60px; align-items: center;
  max-width: 980px; margin: 0 auto;
}
.wm-who-photo {
  border-radius: var(--wm-r-xl);
  overflow: hidden;
  border: 10px solid var(--wm-card);
  outline: 1px solid var(--wm-line-strong);
}
.wm-who-photo img { width: 100%; height: auto; }
.wm-who h2 { font-size: clamp(1.9rem, 4vw, 2.7rem); margin-bottom: 20px; }
.wm-who p { font-size: 1.14rem; color: var(--wm-ink-soft); margin-bottom: 18px !important; }
.wm-who p:last-child { margin-bottom: 0 !important; }
.wm-who strong { color: var(--wm-ink); }

/* ======================================================================
   QUESTIONS
   ====================================================================== */

.wm-qs { max-width: 820px; margin: 0 auto; }
.wm-q {
  background: var(--wm-card);
  border-radius: var(--wm-r);
  margin-bottom: 16px;
  overflow: hidden;
}
.wm-q summary {
  list-style: none;
  cursor: pointer;
  padding: 26px 32px;
  font-family: var(--wm-font-display);
  font-weight: 600; font-size: 1.15rem;
  display: flex; align-items: center; gap: 18px;
  min-height: 60px;
}
.wm-q summary::-webkit-details-marker { display: none; }
.wm-q summary::after {
  content: "";
  margin-left: auto; flex: none;
  width: 16px; height: 16px;
  border-right: 4px solid var(--wm-tomato-ink);
  border-bottom: 4px solid var(--wm-tomato-ink);
  border-radius: 2px;
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}
.wm-q[open] summary::after { transform: rotate(-135deg); }
.wm-q-body { padding: 0 32px 28px; color: var(--wm-ink-soft); font-size: 1.06rem; }

/* ======================================================================
   CONTACT
   ====================================================================== */

.wm-contact { background: var(--wm-tomato); color: #fff; }
.wm-contact h2, .wm-contact .wm-head h2 { color: #fff; }
.wm-contact .wm-head p { color: rgba(255,255,255,0.94); font-size: 1.18rem; }
/* No background box here. The tinted panel was left over from when the eyebrow
   was a filled pill (see .wm-eyebrow above); once it became a label on a short
   rule, the box just read as a stray patch of lighter red. The label and its
   rule are plain white like everything else in this section — the rule takes
   its colour from `color`, so the one declaration covers both. */
.wm-contact .wm-eyebrow { color: #fff; }

/* WhatsApp. Rendered by app.js ONLY when a number is configured — see
   renderWhatsApp(). Spain has the highest WhatsApp use in Europe, so when
   this is switched on it becomes the loudest thing in the section and the
   form below it reads as the fallback. */
.wm-wa { max-width: 620px; margin: 0 auto 28px; text-align: center; }
.wm-btn-wa {
  width: 100%;
  background: #fff;
  color: var(--wm-ink);
}
.wm-btn-wa:hover { background: var(--wm-paper); }
.wm-btn-wa svg { color: #25d366; flex: none; }
.wm-wa-note {
  margin-top: 12px !important;
  color: rgba(255, 255, 255, 0.92);
  font-size: 1rem;
  font-weight: 600;
}

/* The hand-built contact form's own styles (.wm-form / .wm-field / the
   status line / the footnote) lived here until 2026-08-04, when the form was
   replaced by our own Inquiries widget on both pages — Erik: "Everything
   needs to land in Inquiries". The widget brings its own fields, its own
   card and its own confirmation, so none of it was referenced by anything
   any more. Deliberately deleted rather than left in place: dead form CSS is
   exactly what a future session would style a new hand-rolled form with. If
   this site ever needs a form again, embed the widget. */


/* ======================================================================
   FOOTER
   ====================================================================== */

.wm-footer {
  /* See the comment on .wm-deco-field further up this file — this is the
     one block that needed its own `position: relative` added to keep the
     new background field behind it rather than over it. */
  position: relative;
  background: var(--wm-ink);
  color: rgba(255,255,255,0.78);
  padding: 46px 0;
  font-size: 1rem;
  text-align: center;
}
.wm-footer a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

/* ======================================================================
   RESPONSIVE
   ====================================================================== */

@media (max-width: 980px) {
  .wm-hero-grid { grid-template-columns: 1fr; gap: 72px; }
  .wm-who-grid { grid-template-columns: 1fr; gap: 40px; max-width: 560px; }
  .wm-facts, .wm-gets, .wm-steps { grid-template-columns: 1fr; }
  .wm-extras { grid-template-columns: repeat(2, 1fr); }
  .wm-hero-frame { transform: none; }
  .wm-hero-art { transform: none; }
}

@media (max-width: 860px) {
  /* The nav collapses to a hamburger. The drawer is a plain vertical stack
     of large targets — no nested menus, nothing that needs a steady hand. */
  .wm-nav-toggle { display: flex; }
  .wm-nav-links {
    display: none;
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--wm-card);
    border-bottom: 1px solid var(--wm-line);
    flex-direction: column;
    gap: 0;
    padding: 12px;
  }
  .wm-header.is-open .wm-nav-links { display: flex; }
  .wm-nav-links a { padding: 18px 20px; font-size: 1.14rem; border-radius: var(--wm-r-sm); }
  .wm-nav-cta { display: none; }
  .wm-header { position: relative; }

  /* THE BAR HAS TO FIT ON A PHONE, WITH ROOM TO SPARE. Once the menu is a
     hamburger, three things share the bar: the logo and name, the language
     switch, and the hamburger itself. At their full desktop sizes they add up
     to 390px of content on a screen that has 335px to give at 375px wide — so
     the bar ran off the right edge, the page could be dragged sideways, and
     the hamburger was half off-screen. These are the same three things, just
     sized for a phone; nothing is removed and nothing moves.

     Everything you tap here stays at least 42px tall, which is the size a
     finger needs. Shrink these further and you buy width by making the
     buttons hard to hit — take the width from somewhere else instead.

     The last two lines are the backstop, and they are the part not to trade
     away. Everything else up here has a size it cannot go below, so the name
     is the one thing allowed to give way: if the bar ever runs out of room
     again — a longer word in a language added later, a font that loads wider
     than expected — the name shortens with a "…" instead of the row growing
     past the edge of the phone and taking half the hamburger with it. The
     sizes above are chosen so this never actually has to happen; it is there
     so that being wrong about them costs a shortened word rather than a page
     that can be dragged sideways. Note that the header sits OUTSIDE <main>,
     so the clip on `.wm main` never covered this — see the note there. */
  .wm-nav { gap: 12px; }
  .wm-brand { flex: 0 1 auto; min-width: 0; }
  .wm-brand-name {
    min-width: 0; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap;
  }
  /* The links carry this on a wide screen, and they are a drawer down here —
     so without it the language switch and the hamburger would sit against the
     logo with the rest of the bar empty to their right. It went unnoticed
     while the bar was too wide for the screen, because too-wide content fills
     the width by itself. */
  .wm-nav-actions { gap: 10px; margin-left: auto; }
  .wm-lang { padding: 3px; gap: 2px; }
  .wm-lang-btn { min-width: 38px; min-height: 42px; }
  .wm-nav-toggle { width: 46px; height: 46px; }
}

@media (max-width: 640px) {
  body.wm { font-size: 19px; }
  .wm-section { padding: 72px 0; }
  .wm-hero { padding: 48px 0 72px; }
  .wm-wrap { padding: 0 20px; }
  /* The logo and the name come down a size with everything else on this
     page — the bar is 84px tall and a 44px drawing in it starts to read as
     the biggest thing on the screen once the type around it shrinks. */
  .wm-brand-mark { height: 38px; }
  .wm-brand-name { font-size: 1.2rem; }
  /* On a phone the hero copy fills the width, so the sun ends up sitting
     behind the headline with its hard edge cutting through the words. Pull
     it up out of the text and shrink it — it stays as warmth in the corner
     rather than a shape competing with the thing you're meant to read. */
  .wm-hero-sun { width: 260px; height: 260px; top: -110px; right: -70px; }
  .wm-hero-leaf { width: 220px; height: 220px; bottom: -110px; left: -90px; }
  .wm-hero-cta { flex-direction: column; align-items: stretch; }
  .wm-hero-cta .wm-btn { width: 100%; }
  .wm-hero-chip { position: static; margin-top: 26px; max-width: none; }
  .wm-hero-pad { display: none; }
  .wm-cost-figure { padding: 40px 24px; }
  .wm-coin { width: 58px; height: 58px; font-size: 1.2rem; }
  .wm-get, .wm-step { padding: 34px 26px; }
  .wm-free { padding: 40px 26px; }
  .wm-price-contact { padding: 36px 24px; }
  .wm-extras { grid-template-columns: 1fr; }
  .wm-extra { padding: 26px 24px; }
  .wm-q summary { padding: 22px 24px; font-size: 1.1rem; }
  .wm-q-body { padding: 0 24px 24px; }
  .wm-reassure { flex-direction: column; gap: 16px; padding: 28px 26px; }
}

/* ON THE NARROWEST PHONES THE DRAWING STANDS ALONE. Below 375px — an old
   iPhone SE, a small Android — the logo, the word "Frontsill", the three
   language buttons and the hamburger no longer all fit across the bar, and
   something has to go. It is the word, because the drawing beside it is the
   same brand and says the same thing, while dropping a language button or
   shrinking the hamburger would take away something a visitor needs to tap.
   Left to itself the word would shorten to "Front…" (the backstop up on
   .wm-brand), which looks like a fault rather than a decision.

   The word is hidden the way a screen reader still hears it, NOT with
   `display: none`. The logo next to it is a picture with no words in it, so
   turning the name off outright would leave the link back to the top of the
   page with nothing to announce it to someone using a screen reader.

   Not on the Quick Pitch page: its bar holds the logo and nothing else, so
   there is plenty of room there at any width. */
@media (max-width: 374px) {
  body:not(.wm-pitch) .wm-brand-name {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
}

/* Motion is decorative only here, but respect the preference anyway. */
@media (prefers-reduced-motion: reduce) {
  .wm *, .wm *::before, .wm *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

/* ======================================================================
   QUICK PITCH PAGE (pitch.html) — same codebase, same style guide
   ----------------------------------------------------------------------
   Erik, 2026-08-04: "take on the branding that the marketing site has and
   align there. So in the future, if I make any changes there, it'll update
   here. It should just be kind of one code base... one style guide for the
   marketing page and the quick pitch page."

   The Quick Pitch page used to run on styles.css (the OLD ds-* system) with
   200 lines of its own <style> block on top, about half of which named its
   own colours instead of using tokens. So the page Erik actually hands to
   prospects was the one page his brand changes never reached. It is on this
   file now, and the note at the top of this file saying pitch.html "still
   runs on styles.css and must keep looking exactly as it does today" is
   what has just been undone — deliberately, by him.

   EVERY RULE BELOW IS SCOPED TO .wm-pitch, which sits on pitch.html's
   <body> and nowhere else. That scoping is what lets these live in the
   shared stylesheet without touching the home page. Keep it on anything
   added here, and add it HERE rather than starting a style block on the
   page. Every value is a token: change --wm-tomato-ink or --wm-r and this
   page changes with the rest of the site.
   ====================================================================== */

/* ---- Density. The home page's hero is built to fill a screen and be
   scrolled past; this one has to be taken in at a glance, so the same
   pieces sit closer together. Nothing here changes a colour or a face. ---- */
.wm-pitch .wm-hero { padding: 40px 0 64px; }
.wm-pitch .wm-nav { justify-content: center; }

/* ---- No bar until you scroll (Erik, 2026-08-04) ----
   "Take the logo out of a header bar but keep it in its current location. I
   don't want to see that line until the user scrolls and then the user sees
   a header bar."

   At rest the logo is just the top of the page: same place, same size, but
   nothing drawn around it — no fill, no line under it. The bar only exists
   once the page has moved, which is the only moment it has a job to do
   (holding the brand in place over content sliding past underneath).

   The logo does not move when that happens. Only the fill and the line
   arrive, faded in — so it reads as the page catching up to the logo, not
   as the logo jumping into a bar. Do not add a height change here: shrinking
   the bar on scroll moves the artwork, which is exactly what Erik asked to
   keep still.

   The header stays in the page's flow at scroll 0 (sticky, not fixed), so
   it takes up its own space and nothing can ever sit behind it on landing —
   the same reasoning as the portal's own header bar.

   `.wm-pitch .wm-header` is two classes, so it beats the plain `.wm-header`
   rule in the phone media query that drops the home page's header to
   `position: relative` for its dropdown menu. This page has no menu.

   NO SHADOW under the bar, ever — the line and the fill are the separation.

   The fill is solid, and the home page's frosted blur is deliberately not
   used here. Everything this bar ever sits over is the same flat paper
   colour, so a blur is invisible work — and on iPhones a blurred bar that
   switches on mid-scroll is one of the things WebKit draws worst. ---- */
.wm-pitch .wm-header {
  position: sticky; top: 0;
  background: transparent;
  backdrop-filter: none;
  border-bottom-color: transparent;
  transition: background-color 0.18s ease, border-bottom-color 0.18s ease;
}
.wm-pitch .wm-header.is-stuck {
  background: var(--wm-paper);
  border-bottom-color: var(--wm-line);
}
@media (prefers-reduced-motion: reduce) {
  .wm-pitch .wm-header { transition: none; }
}

/* ---- WHOLE CIRCLES ON THIS PAGE, NEVER SLICED ----
   Erik, 2026-08-04, and not for the first time: "i still see circles cut off
   on the quick pitch page. stop this from happening."

   The two decorative shapes are shared with the home page, where they are
   deliberately hung off the edges so only an arc of each shows and the page
   feels like it carries on past the window. On THIS page he does not want
   that: a shape sliced flat by the edge of a page he hands to a prospect
   reads as something broken, not as a design.

   So on the pitch page both shapes sit entirely inside the hero, with room
   to spare on every side, and they are sized against the window (min() with
   a vw) so a narrow window shrinks them instead of pushing them out over an
   edge. The home page's hero is untouched — these rules are scoped to
   .wm-pitch.

   The other half of this lives in app.js: the drift-on-scroll is clamped to
   the room each shape actually has, on this page only, so scrolling can
   never carry one back out over an edge. Changing a size or an offset here
   without looking at that is how this comes back. Nothing on this page may
   leave the hero box, ever — a new decorative shape added here obeys the
   same rule. */
.wm-pitch .wm-hero-sun {
  width: auto; height: min(560px, 44vw);
  top: 28px; right: 32px;
}
.wm-pitch .wm-hero-leaf {
  width: auto; height: min(340px, 30vw);
  bottom: 40px; left: 32px;
}
/* On a phone the headline fills the width, so a whole circle at the desktop
   size lands its edge straight through "Your own page. Free." — the same
   complaint in a different form. Small, and up in the corner beside the logo,
   where it clears the words entirely and still reads as warmth. */
@media (max-width: 640px) {
  .wm-pitch .wm-hero-sun {
    width: auto; height: 118px;
    top: 10px; right: 14px;
  }
  .wm-pitch .wm-hero-leaf {
    width: auto; height: 104px;
    bottom: 28px; left: 16px;
  }
}

/* ---- THE DOOR MOTIF (Erik, 2026-08-05): "the background... it needs to be
   more like I'm looking through a frosted pane of glass. Take the door from
   the website — just the yellow part with the handle — and replace all the
   dots with that... it needs to still be blurry and the parallaxing still
   works."

   So every dot on this page — both hero shapes above, plus every
   .wm-pitch-orb further down — is now the SAME shape: the gold door from
   the Frontsill logo (images/frontsill-logo.png), navy handle included, not
   the navy archway or the olive sill around it. One selector list, so every
   shape stays the same door rather than three of them drifting apart one
   edit at a time.

   The door is drawn with border-radius, not a traced copy of the logo file —
   a percentage radius scales with whatever box each shape already has
   (--orb, the min()/vw caps, the mobile shrink), so this reuses every
   sizing/position number above and in .wm-pitch-orb untouched. Height stays
   the controlling number per shape (unchanged from before); aspect-ratio is
   what turns the old circle into a door, and it belongs here once rather
   than on every individual shape's own rule.

   filter: blur() is the "frosted glass" itself — it never touches position,
   so the scroll-drift transform in pitch.html's own script keeps moving a
   soft, out-of-focus door exactly as it moved a sharp circle before. Kept
   modest on purpose: enough to read as glass, not so much the door
   dissolves into a smear at the smallest mobile size. */
.wm-pitch .wm-hero-sun,
.wm-pitch .wm-hero-leaf,
.wm-pitch-orb {
  aspect-ratio: 3 / 5;
  border-radius: 50% 50% 14% 14% / 60% 60% 8% 8%;
  background: var(--wm-sun);
  filter: blur(10px);
}
/* The handle: the logo's own navy dot, sat where it sits on the real door —
   right of centre, a little below the middle. A plain ::after rather than
   new markup, since every one of these three selectors is still an empty
   element (see the will-change note on .wm-hero-sun/.wm-hero-leaf and on
   .wm-pitch-orb below for why that matters) — a ::after adds no real child
   node, so it can't trip that trap. */
.wm-pitch .wm-hero-sun::after,
.wm-pitch .wm-hero-leaf::after,
.wm-pitch-orb::after {
  content: "";
  position: absolute;
  top: 54%;
  left: 62%;
  width: 16%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: var(--wm-navy);
}

/* ---- MORE CIRCLES, ALL THE WAY DOWN (Erik, 2026-08-04: "add more circles
   and add the parallax") ----

   The hero's two shapes now have company: every section of this page carries
   its own set, and all of them drift as you scroll. What makes that safe to
   keep adding to is that an orb CANNOT be cut off by construction, rather
   than because its numbers were checked once:

   - It is never taller than 46% of the section it lives in, and never wider
     than 44% of the window, whatever px size it asks for. So a short section
     shrinks its own circles instead of overflowing, and a narrow window does
     the same. `aspect-ratio` then makes the width follow the height, which is
     what keeps them round while the height is doing all that work.
   - Every position below is a PERCENTAGE, and no offset goes past 20%. An orb
     at `top: 14%` that is at most 46% tall ends at 60% — inside, at any
     section height, on any screen.
   - Sizes are the `--orb` custom property, never a bare width/height, so the
     two caps above can never be bypassed by accident.

   That is the whole rule for adding another one: give it `--orb`, a colour
   class, and two percentage offsets of 20% or less. Do not hand it a pixel
   width, and do not push an offset past 20% "just for this one" — that is
   how the page ends up with a sliced circle again.

   Two more things are load-bearing. The deco layer is `overflow: hidden` as
   the backstop, and it sits at z-index 0 with the section's own .wm-wrap
   above it, so a shape can never wash over the words (the same fix, and the
   same reason, as the hero's own layer further up this file). */
.wm-pitch .wm-section { position: relative; }
.wm-pitch .wm-section > .wm-wrap { position: relative; z-index: 1; }
.wm-pitch-deco {
  position: absolute; inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

.wm-pitch-orb {
  position: absolute;
  /* Shape (border-radius/aspect-ratio) and colour (background) are set once,
     for this and the two hero shapes together, by the door-motif rule above
     .wm-pitch-orb::after — kept out of here so the door can never drift out
     of sync between the three of them. Only this shape's box (height, via
     --orb) and its own drift math stay here. */
  width: auto;
  height: min(var(--orb, 200px), 44vw, 46%);
  opacity: 0.5;
  /* Safe on these specifically because they are empty elements — see the note
     on .wm-hero-sun above, and the .dash-head trap in CLAUDE.md, for why this
     must never be copied onto something with children. */
  will-change: transform;
}
/* Every orb used to get one of three colours (gold/olive/clay) for variety,
   picked by an extra class (wm-pitch-orb-olive / -clay) riding alongside the
   position class on the same span in pitch.html. Now they're all the same
   door, so those two colour classes have nothing left to do — harmless to
   leave on the markup, but there's no rule for them here any more and none
   needs adding back. */

/* Hero — two more, tucked into the empty margins either side of the reading
   column, well below the headline so nothing new lands near the words. */
.wm-pitch-orb-h1 { --orb: 190px; right: 7%; top: 44%; }
.wm-pitch-orb-h2 { --orb: 120px; left: 6%; top: 24%; }

/* There is deliberately no set for the "Say hello" section — see the comment
   above that section in pitch.html. The enquiry widget copies the shape of
   whatever card-like box it finds beside itself, and a circle is one. */

/* "One page, and one place to run it" — this section is white, not paper, so
   the same washes read a shade stronger here. Kept a little fainter for it. */
.wm-pitch-orb-s1 { --orb: 300px; right: 5%; top: 10%; opacity: 0.4; }
.wm-pitch-orb-s2 { --orb: 170px; left: 6%; bottom: 12%; opacity: 0.34; }

/* The last section, with the one button on the page. It is short, so the 46%
   cap does most of the sizing here — the px values are an upper bound, not
   what you get. */
.wm-pitch-orb-c1 { --orb: 200px; right: 11%; top: 12%; }
.wm-pitch-orb-c2 { --orb: 110px; left: 13%; bottom: 14%; }

/* On a phone the reading column runs edge to edge, so a circle of any size
   sits under the words rather than beside them. They stay — very faint, and
   small enough to read as texture rather than as a shape crossing a line. */
@media (max-width: 640px) {
  .wm-pitch-orb { height: min(var(--orb, 200px), 30vw, 30%); opacity: 0.4; }
  .wm-pitch-orb-s1, .wm-pitch-orb-s2 { opacity: 0.3; }
}

/* ---- One rhythm for the reading column ----
   Erik, 2026-08-03: "why is there no space between the main copy, the two
   sections that have a visual, and stuff below it?" Every gap down this
   column is ONE number, set here and shrunk once for phones, rather than a
   margin per block — five separately-nudged margins is exactly how a column
   ends up tight in some places and arbitrary in others. A new block added
   here inherits the rhythm by being a child; give it no margin of its own. */
.wm-pitch { --pitch-gap: 34px; --pitch-hero-gap: 72px; }
.wm-pitch .wm-pitch-lead { max-width: 900px; margin: 0 auto; text-align: center; }
.wm-pitch .wm-pitch-lead h1 { margin: 0; }
.wm-pitch .wm-pitch-heroshot { max-width: 900px; margin: 34px auto 0; }
/* The one join on this page that is NOT the column's own rhythm: the big
   picture handing over to the reading column beneath it (Erik, 2026-08-04).
   It is the boundary between two different things — a picture and a wall of
   words — not a join between two blocks of the same kind, and at the shared
   34px the paragraph read as a caption hanging off the photo's own drop
   shadow. Its own number, so widening it here can never quietly widen the
   four joins further down the column. */
.wm-pitch .wm-pitch-copy {
  max-width: 820px; margin: var(--pitch-hero-gap) auto 0;
  display: flex; flex-direction: column; gap: var(--pitch-gap);
}
.wm-pitch .wm-pitch-copy > * { margin: 0 !important; }

/* ---- Extra room between the sections, and nothing else ----
   Erik, 2026-08-04 (second pass): the four joins down this column keep the
   doubled space they were given earlier that day, but the visible line at
   each one is gone — "I just wanna use space to separate it visually. I
   don't think it needs lines." So this is a blank spacer now, not a rule.
   Do not draw a line here again: no background, no border, no pseudo-
   element standing in for one.

   It is a CHILD of the column rather than a margin on a block, which is
   what makes it obey the one-rhythm rule above instead of working around
   it: sitting in the flex flow, it collects a full --pitch-gap above AND
   below, so the space at a join doubles by itself and still tracks the one
   number if that number ever changes. Do not give it a margin of its own.

   The 1px height is deliberate: it is exactly what the old line occupied,
   so removing the line took nothing off the space at any join. */
.wm-pitch .wm-pitch-gap {
  align-self: stretch;
  height: 1px;
}

/* ---- The join between the free-page panel and "Say hello" ----
   Erik, 2026-08-04: too much air there. It was the only place on this page
   where three separate spaces stacked on one join — the column's trailing
   spacer, the hero's own bottom padding, and a full section's top padding —
   which came to roughly 200px of nothing between a one-line promise and the
   form it is meant to lead into. The spacer is gone from the markup and this
   halves what is left, so the form reads as the answer to the panel rather
   than as an unrelated page further down. The section's BOTTOM padding is
   untouched: the join below it is an ordinary one between two sections. */
.wm-pitch .wm-pitch-talk { padding-top: 40px; }

/* Bold, Erik 2026-08-04. Scoped to the pitch page's own lede on purpose — the
   home page's .wm-hero-sub sits under a heading that carries the weight there
   and stays as it was. */
.wm-pitch .wm-hero-sub { max-width: none; text-align: center; font-weight: 700; }
.wm-pitch .wm-pitch-terms { justify-content: center; }
:is(.wm-pitch, .wm-story) .wm-pitch-cta { justify-content: center; }

/* ---- The comparison ----
   The losing route is an ordinary card; the winning one is filled in ink so
   the eye lands on it first and the comparison is made before either row is
   read. Separation is background only — no outline, no shadow, ever. Erik,
   2026-08-04: "remove the outlines around the boxes... I hate outlines."
   Don't put a border back on either row to make the pale one read as a card. */
.wm-pitch .wm-pitch-flow { display: flex; flex-direction: column; gap: 12px; }
/* The room inside the row is 30px on both sides, and it has to LOOK equal on
   both sides too — which is why the first step below is not a fixed width.
   Erik, 2026-08-04: the space to the right of "reaches you" read as tight
   next to the left-hand edge. Measured, it was: 19px on the right against
   43px on the left, because the first step was a fixed 82px box with a much
   shorter word centred in it, quietly adding 24px of air the padding never
   put there. Widening the right side alone would have hidden that rather
   than fixed it. */
.wm-pitch .wm-pitch-route {
  display: flex; align-items: center; gap: 10px;
  padding: 22px 30px;
  background: var(--wm-card);
  border: 0;
  border-radius: var(--wm-r);
}
.wm-pitch .wm-pitch-route-win {
  background: var(--wm-ink);
  color: var(--wm-card);
}
/* No fixed width — the step is exactly as wide as its own word, so the
   padding above is the whole of the space at the left edge. Both rows say
   "Guest" here, so they still line up with each other. See the note on the
   row's padding for why a fixed width was the wrong thing here. */
.wm-pitch .wm-pitch-node { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; flex: 0 0 auto; }
/* The middle step carries a second line, so it needs room the two ends don't —
   and it IS one width for both rows, not a per-row one, so the two rows'
   middle steps sit at the same width even though they say different things.
   That is why this is a width and not `flex: 1` (which would size each row to
   its own longest word and leave the two visibly out of step by a few px). */
.wm-pitch .wm-pitch-node-mid { width: 200px; }
.wm-pitch .wm-pitch-node-ico { display: inline-flex; opacity: 0.75; }
.wm-pitch .wm-pitch-node-ico svg { width: 34px; height: 34px; }
.wm-pitch .wm-pitch-node-label { font-family: var(--wm-font-body); font-weight: 700; font-size: 1.15rem; line-height: 1.2; }
.wm-pitch .wm-pitch-node-note { font-size: 1rem; line-height: 1.35; font-weight: 400; color: var(--wm-ink-soft); }
.wm-pitch .wm-pitch-route-win .wm-pitch-node-note { color: rgba(255, 255, 255, 0.68); }
.wm-pitch .wm-pitch-arrow { display: inline-flex; flex: 1 1 auto; justify-content: center; opacity: 0.35; }
.wm-pitch .wm-pitch-arrow svg { width: 22px; height: 22px; }
.wm-pitch .wm-pitch-end { display: flex; flex-direction: column; align-items: flex-end; margin-left: auto; flex: 0 0 auto; text-align: right; }
.wm-pitch .wm-pitch-end-amount { font-family: var(--wm-font-display); font-size: 1.9rem; font-weight: 600; line-height: 1.05; white-space: nowrap; }
/* Gold, not the bright fill — this is text, and --wm-sun is large-shapes-only. */
.wm-pitch .wm-pitch-route-win .wm-pitch-end-amount { color: var(--wm-sun); }
.wm-pitch .wm-pitch-end-label { font-size: 0.86rem; color: var(--wm-ink-soft); }
.wm-pitch .wm-pitch-route-win .wm-pitch-end-label { color: rgba(255, 255, 255, 0.62); }

/* ---- The kit ----
   What you can switch on, as a wrapped row rather than a list. It has to
   stay a PICTURE: one glance, no sentence to read.

   Two groups, not one row (Erik, 2026-08-04): the pieces a guest touches,
   then the pieces that run the place. The split IS the message — it is what
   stops the page reading as "we sell a booking button". The sub-label is
   quieter than the lead above it, so the block still reads as one list with
   a seam in it rather than two sections competing for the same glance.

   The chips carry a struck-through price plus "Free*" again as of
   2026-08-05 — see the markup comment on pitch.html for the full reasoning.
   .wm-pitch-chip-price is the muted, struck-through original price;
   .wm-pitch-chip-free is the bold "Free*" next to it, coloured to match the
   green panel below so the two read as one idea.

   NO OUTLINE ON THESE (Erik, 2026-08-04: "remove the outline from the
   pills. They look like ass."). They were a white chip with a grey border
   in the old system. They are a flat wash now, which is how this design
   separates things everywhere else — background colour, not a line and
   never a shadow. Don't put a border back on them. */
.wm-pitch .wm-pitch-kit-block { display: flex; flex-direction: column; gap: 18px; align-items: center; }
/* Bigger than the sub-label under it (Erik, 2026-08-04) — it is the header
   for this whole block, so it has to read as one at a glance instead of
   sitting at the same weight as the two group labels below it.

   NORMAL SENTENCE CASE, NOT ALL CAPITALS (Erik, 2026-08-04: "This section is
   extraordinarily hard to read. Stop using so much capitalized lettering.").
   All three lines here — the header and both group labels — were set in
   spaced-out capitals, stacked one under the other, and together they turned
   the quickest-to-read block on the page into the slowest. Capitals strip
   out the ascenders and descenders the eye uses to recognise a word's shape,
   so every word has to be spelled out; the extra letter spacing makes it
   worse again by pulling the letters of one word apart until they read as
   loose letters rather than a word. The block is a PICTURE — one glance, no
   sentence to read — and capitals are the one thing that guarantees it can't
   be taken in at a glance.

   The hierarchy that the capitals used to carry now comes from size, weight
   and colour instead: a larger, darker header over two smaller, paler group
   labels. Don't put text-transform: uppercase back on any of them, and don't
   reintroduce letter-spacing here — the sizes below were set for normal
   letter spacing and go gappy the moment it's added.

   32px, AND THE SAME 32px ON A PHONE (Erik, 2026-08-05: "make the elements
   in this section bigger. it needs to be more pronounced" — bumped up from
   the 24px it launched at the day before). Headings on this page step in
   whole, recognisable sizes — 24 / 32 / 40 / 48 — rather than landing on
   whatever number a fraction of a rem happens to produce. 2rem is 32px
   exactly. If this ever needs to be bigger again, the next size up is 40px,
   not 34 or 36.

   The colour is the logo's navy, lifted — see --wm-navy-text at the top of
   this file for why it is lifted and not the raw sampled value. */
.wm-pitch .wm-pitch-kit-lead {
  font-size: 2rem; font-weight: 700; color: var(--wm-navy-text);
}
.wm-pitch .wm-pitch-kit-group { display: flex; flex-direction: column; gap: 10px; align-items: center; align-self: stretch; }
/* A little extra room above the second group ("What you run the place on")
   so it doesn't read as glued to the first group's row of chips right above
   it — .wm-pitch-kit-block's own 18px gap already separates every child
   evenly; this just adds a bit more before the second group specifically. */
.wm-pitch .wm-pitch-kit-group + .wm-pitch-kit-group { margin-top: 8px; }
.wm-pitch .wm-pitch-kit-sub {
  font-size: 1.15rem; font-weight: 700;
  color: var(--wm-navy-text-soft);
  text-align: center;
}
.wm-pitch .wm-pitch-kit { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
/* Bigger and more pronounced as of 2026-08-05 (Erik: "make the elements in
   this section bigger") — padding and type both stepped up from 9px 15px /
   1rem so the row reads as the page's main event rather than a footnote. */
.wm-pitch .wm-pitch-chip {
  display: inline-flex; align-items: baseline; gap: 8px;
  padding: 13px 20px;
  border-radius: var(--wm-r-sm);
  background: var(--wm-paper-deep);
  color: var(--wm-ink);
  font-size: 1.2rem; font-weight: 700; line-height: 1.3;
}
/* The old, real price — struck through, not deleted, so the chip still
   tells a reader this add-on normally costs money. Muted so the eye lands
   on "Free*" next to it, not on the price. */
.wm-pitch .wm-pitch-chip-price {
  text-decoration: line-through;
  color: var(--wm-ink-soft);
  font-weight: 500;
  font-size: 0.88em;
}
/* Same green as the free-page panel below (--wm-olive-ink), on purpose —
   this "Free*" and that panel are one idea, so they share one colour. */
.wm-pitch .wm-pitch-chip-free {
  color: var(--wm-olive-ink);
  font-weight: 700;
}
/* PERMANENTLY free, not trial-free (Erik, 2026-08-05) — Staff scheduling,
   Automatic emails and Team calendar. Same green as .wm-pitch-chip-free
   above (still "free", still the same idea as the panel below), but no
   asterisk and nothing struck through next to it, because there is no old
   price and no two-month clock on these three. Don't add a price span or an
   asterisk back onto a chip using this class. */
.wm-pitch .wm-pitch-chip-free-always {
  color: var(--wm-olive-ink);
  font-weight: 700;
}

/* "Your page is free. No contract, cancel any time." — MORE PRONOUNCED
   (Erik, 2026-08-04). It carries the two things a prospect most needs to
   hear before the button right under it: it costs nothing to start, and
   nothing traps you. It is the last thing read before the call to action,
   so on this page it is allowed to be the loudest line in the column.

   AND IT SITS IN A PALE GREEN PANEL (Erik, again 2026-08-04, later the same
   day: "I like that approach, but it needs to be more prominent. It needs
   to live in a light green box... just needs to stand out a little bit
   more."). Bigger type alone had it still reading as one more line of the
   column; a filled panel makes it a thing on the page.

   Both colours are the design system's own olive pair, the same one the
   marketing home page fills its olive cards with — wash behind, ink on top,
   which is a contrast ratio that was checked when the token was made. No
   border and no shadow: the fill IS the separation, per the rule at the top
   of this file. Don't reach for a new green here; there is only one. */
.wm-pitch .wm-pitch-terms {
  /* THE ICON SITS ABOVE THE SENTENCE (Erik, 2026-08-04: "move the icon above
     the text since everything is centered"). Every other thing in this
     column is centred on the page's midline, and a mark parked to the left
     of centred text was the one element breaking that line — worst on a
     phone, where the sentence wraps to two lines and the icon sat beside
     the taller block rather than with it.

     .wm-hero-note, the shared base class, is a ROW, and the marketing home
     page uses it that way. This is the only place that turns it into a
     column, which is why the override lives here under .wm-pitch and not on
     the base. align-items: center is inherited from the base and does the
     horizontal centring here for nothing. */
  flex-direction: column;
  font-size: 1.24rem;
  gap: 12px;
  padding: 20px 24px;
  background: var(--wm-olive-wash);
  border-radius: var(--wm-r);
  /* Centred because on a phone the sentence takes two lines inside the
     panel, and left-ragged lines under a centred icon read as a mistake.
     Does nothing on a desktop, where it is one line. */
  text-align: center;
}
/* Bigger than the 30px it was beside the text: on its own line it is read as
   a picture rather than as a bullet, and at 30px it looked stranded. */
.wm-pitch .wm-pitch-terms svg { width: 50px; height: 50px; }

/* The sentence is two lines with two weights (Erik, 2026-08-04). "Your
   website is free." is the promise and keeps the panel's own 700; the line
   under it is the reassurance at 500, so the two read as headline-then-
   detail instead of one long run of bold. Each line is a block, which is
   what puts them on separate lines regardless of how wide the screen is —
   never let them re-join on a desktop, that is the whole point of the
   change.

   500 only exists because pitch.html's Google Fonts line was changed to ask
   for it. Source Sans 3 was loaded at 400/600/700 only, and a browser given
   a weight it does not have quietly rounds DOWN — so this line would have
   come out at 400 and looked like a bug rather than a choice. If this pair
   is ever reused on another page, that page's font line needs the 500 too.

   THE SUB LINE IS A FULL SENTENCE NOW (2026-08-05), not a three-word
   reassurance — it explains the two-free-months offer the chips' "Free*"
   points back to. Smaller than the lead and width-capped so it reads as a
   comfortable couple of lines instead of one wide, hard-to-scan ribbon. */
.wm-pitch .wm-pitch-terms-lead,
.wm-pitch .wm-pitch-terms-sub { display: block; }
.wm-pitch .wm-pitch-terms-lead { font-weight: 700; }
.wm-pitch .wm-pitch-terms-sub {
  font-weight: 500;
  font-size: 0.82em;
  line-height: 1.45;
  max-width: 46ch;
  margin: 0 auto;
}

/* ---- Our own Inquiries widget, on both pages ----
   The Quick Pitch page's "Talk to us" section and the home page's contact
   band both run the same embed, so this lives on .wm (the site) rather than
   under either page. It is the ONLY rule either page applies to that widget,
   and it is layout, not looks: the widget caps its own width, and an
   uncentred card under a centred heading reads as a mistake on a wide
   screen. Everything about how it LOOKS — colours, corners, field style, its
   own heading — is either inherited from the page automatically or set in
   the portal's branding editor for the `openfront` account. Don't add
   styling for it here; that would fight the branding editor, and only on
   our own two pages. */
.wm .openfront-inquiries { margin-inline: auto; }

/* ---- The story pair at the foot ----
   Same width, same edges, no stagger, and neither one covers the other.
   .wm-hero-frame carries a rotation for the home page's single hero shot,
   which reads as charm on one picture and as a mistake on a matched pair.

   SCOPED TO :is(.wm-pitch, .wm-story), NOT .wm-pitch ALONE (2026-08-05).
   This whole block — the story pair down to the zoomer window at the end
   of it — was built for pitch.html first. The main marketing page
   (index.html) wanted the identical section, so rather than copy every
   rule under a second class name, the existing .wm-pitch-* selectors in
   this block were widened to also match a plain .wm-story wrapper — see
   the section carrying that class in index.html. Nothing outside this
   block (the header, hero, route diagram, kit chips, etc. above) was
   touched, and none of it should be: those stay pitch.html-only. If a
   THIRD page ever wants this section, add it to this one :is() list
   rather than starting a fourth copy of these rules. */
:is(.wm-pitch, .wm-story) .wm-pitch-story { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; align-items: stretch; max-width: 1000px; margin: 0 auto; }
/* The button, moved into this same section on 2026-08-05 so it reads as
   part of the comparison above it rather than a block of its own further
   down the page. 56px matches .wm-head's own margin-bottom — the same
   amount of air used everywhere else on this page between one piece of
   the section and the next. */
:is(.wm-pitch, .wm-story) .wm-pitch-story-cta { margin-top: 56px; }
/* Both frames are 1.676 to 1 as of 2026-08-04 — the portal one because its
   file is that shape (see the markup comment on it), the page one because
   .wm-pitch-scroll below holds that shape whatever length its picture is —
   so the frames come out the same height. Each figure is still a column
   with its caption pushed to the bottom, which keeps the two captions level
   with each other if a future picture ever breaks that ratio. */
:is(.wm-pitch, .wm-story) .wm-pitch-shot { margin: 0; display: flex; flex-direction: column; }
:is(.wm-pitch, .wm-story) .wm-pitch-shot figcaption { margin-top: auto; }
:is(.wm-pitch, .wm-story) .wm-pitch-shot .wm-hero-frame { transform: none; border-width: 8px; }
:is(.wm-pitch, .wm-story) .wm-pitch-shot figcaption {
  padding-top: 14px; text-align: center;
  font-size: 1rem; font-weight: 700; color: var(--wm-ink-soft);
}

/* ---- The page shot pans down the whole page and back up ----
   Erik, 2026-08-04: keep the picture the size it is, but let it scroll so a
   reader sees the rest of the page. See the long note in pitch.html for why
   it is done this way; the short version is that everything here is derived,
   nothing is measured, so swapping the picture for one of a different length
   (or for a prospect's own, on a personalised /p/<slug> page) needs no edit
   to this file.

   THE WINDOW: the frame keeps the exact shape it had when it held a 900x537
   crop. Never give this a fixed pixel height — the figure beside it has none
   either, and the two would stop matching the moment the column width moved.

   THE PAN: object-fit: cover sizes the picture to the window's width, so
   anything longer than the window overflows below it, and object-position
   slides the visible slice from the very top to the very bottom — the whole
   length, exactly, however long the file is. A picture the same shape as the
   window has nothing to overflow and simply sits still, which is the right
   behaviour rather than a special case to write.

   THE CORNERS: this box is square, with no rounding of its own. It sits
   inside the frame, which already rounds and clips everything in it, and the
   overflowing part of the picture never leaves this box in the first place.
   Rounding it here as well would cut a hair inside the frame's own curve and
   show a sliver of the mat in each corner. */
:is(.wm-pitch, .wm-story) .wm-pitch-scroll {
  display: block;   /* it is a <span> — see the note on it in pitch.html */
  aspect-ratio: 900 / 537;
  overflow: hidden;
}
:is(.wm-pitch, .wm-story) .wm-pitch-scroll img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 0%;
  /* Slow on purpose. It holds still at the top and at the foot of the page
     for a few seconds each way, so a reader who arrives mid-pass still gets
     a steady look at something rather than a picture permanently in motion. */
  animation: wm-pitch-pan 48s ease-in-out infinite alternate;
}
/* Stop it while someone is actually looking at something. */
:is(.wm-pitch, .wm-story) .wm-pitch-scroll:hover img { animation-play-state: paused; }

@keyframes wm-pitch-pan {
  0%, 6% { object-position: 50% 0%; }
  94%, 100% { object-position: 50% 100%; }
}

/* Motion nobody asked for is exactly what this setting is for. The top of the
   page is what the picture showed before any of this, so that is where it
   rests. */
@media (prefers-reduced-motion: reduce) {
  :is(.wm-pitch, .wm-story) .wm-pitch-scroll img { animation: none; object-position: 50% 0%; }
}

/* ---- Either picture, opened bigger over the page ----
   Erik, 2026-08-04: "If the user clicks on any one of these visuals ... it
   should open a modal to show a bigger view ... and the modal still should
   continue to scroll. I do like the interaction that if you hover over it
   with your cursor, it stops moving. That's necessary in the modal as well."

   THERE IS ALMOST NOTHING HERE ABOUT PANNING, AND THAT IS THE POINT. The
   window is handed a copy of the picture's own box, so the pan and the
   stop-while-a-cursor-is-on-it above apply to it unchanged. The only two
   rules below that touch it are the ones undoing the small window's fixed
   shape, because in here the shape is worked out from the screen instead.

   NO SHADOW on the sheet, the frame or the button — see the hard rule at the
   top of this file. The dark wash is what separates the window from the page. */

/* The picture itself, as a button. Everything a browser puts on a button by
   default has to come off: it is a picture frame that happens to be pressable,
   not a control that happens to contain a picture. */
:is(.wm-pitch, .wm-story) .wm-pitch-zoom {
  display: block;
  width: 100%;
  padding: 0;
  background: none;
  font: inherit;
  color: inherit;
  -webkit-appearance: none;
  appearance: none;
  cursor: zoom-in;
}
/* HOVER IS THE MARK BELOW GOING DARK, AND NOTHING ELSE. This first darkened
   the hairline the frame already carries, which was reverted the same day:
   Erik, 2026-08-04, "remove the outlines around the boxes... I hate outlines."
   He was talking about the comparison rows, but a picture answering a cursor
   by drawing a line round itself is the same instinct, and the mark answers
   it clearly enough on its own. Don't reach for a border here. */
/* The shared focus ring squares every focused thing off to a 4px corner, which
   nothing minded while nothing focusable was this big. On a picture frame it
   reads as the corners snapping off, so this one keeps its own. */
:is(.wm-pitch, .wm-story) .wm-pitch-zoom:focus-visible { border-radius: var(--wm-r-xl); }

/* "This opens." Always visible, because hover tells a cursor and nobody else
   and this page is mostly read on a phone. Solid white with the page's own
   hairline rather than anything translucent — it has to stay readable over
   whatever corner of whatever screenshot happens to be underneath it. */
:is(.wm-pitch, .wm-story) .wm-pitch-zoom-mark {
  position: absolute;
  right: 10px; bottom: 10px;
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  border-radius: var(--wm-r-sm);
  background: var(--wm-card);
  border: 1px solid var(--wm-line-strong);
  color: var(--wm-ink);
  pointer-events: none;   /* the whole picture is the target, not this */
}
:is(.wm-pitch, .wm-story) .wm-pitch-zoom-mark svg { width: 21px; height: 21px; display: block; }
:is(.wm-pitch, .wm-story) .wm-pitch-zoom:hover .wm-pitch-zoom-mark { background: var(--wm-ink); color: #fff; border-color: var(--wm-ink); }

/* The window itself. Above the sticky header (z-index 100) and the skip link
   (200), since while this is open it is the only thing on screen. */
:is(.wm-pitch, .wm-story) .wm-pitch-zoomer {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(14px, 3vw, 44px);
  background: rgba(43, 31, 45, 0.88);   /* --wm-ink, nearly solid */
  overscroll-behavior: contain;
  animation: wm-zoomer-in 0.16s ease-out;
}
/* WITHOUT THIS THE WINDOW IS ALWAYS OPEN. `display: flex` above beats the
   browser's own `[hidden] { display: none }`, and the script opens and closes
   this by that attribute. The same trap shipped a permanently-visible banner
   in the owner portal once already — see the [hidden] note in admin.css. */
:is(.wm-pitch, .wm-story) .wm-pitch-zoomer[hidden] { display: none; }

@keyframes wm-zoomer-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  :is(.wm-pitch, .wm-story) .wm-pitch-zoomer { animation: none; }
}

/* Wraps the picture exactly, so the caption and Close line up with its edges.
   The frame's own width and height are set by the script in real pixels; this
   column simply takes whatever they come out as. */
:is(.wm-pitch, .wm-story) .wm-pitch-zoomer-sheet {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: fit-content;
  max-width: 100%;
  max-height: 100%;
}
:is(.wm-pitch, .wm-story) .wm-pitch-zoomer-frame {
  transform: none;          /* .wm-hero-frame tilts the home page's one photo */
  border-width: 8px;        /* the same frame the two small pictures wear */
  flex: 0 0 auto;
}
/* The copy of the picture fills the frame in both cases — a long one because
   the script left it something to pan through, a short one because the script
   gave the frame the picture's own shape, so there is nothing to crop. */
:is(.wm-pitch, .wm-story) .wm-pitch-zoomer-frame > img { width: 100%; height: 100%; object-fit: cover; }
:is(.wm-pitch, .wm-story) .wm-pitch-zoomer-frame .wm-pitch-scroll {
  aspect-ratio: auto;       /* in here the shape comes off the screen instead */
  width: 100%; height: 100%;
}

:is(.wm-pitch, .wm-story) .wm-pitch-zoomer-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  flex: 0 0 auto;
}
:is(.wm-pitch, .wm-story) .wm-pitch-zoomer-cap {
  color: #fff;
  font-weight: 700;
  font-size: 1.05rem;
  min-width: 0;
}
/* Named plainly rather than an × in a corner: this page is written for people
   who should never have to guess what a symbol means. White on the wash, since
   the ghost button's ink-on-transparent would be invisible here. */
:is(.wm-pitch, .wm-story) .wm-pitch-zoomer-close {
  flex: 0 0 auto;
  min-height: 52px;
  padding: 12px 28px;
  background: var(--wm-card);
  color: var(--wm-ink);
  border-color: var(--wm-card);
}
:is(.wm-pitch, .wm-story) .wm-pitch-zoomer-close:hover { background: var(--wm-paper-deep); }
:is(.wm-pitch, .wm-story) .wm-pitch-zoomer :focus-visible { outline-color: #fff; }

@media (max-width: 860px) {
  .wm-pitch { --pitch-gap: 26px; --pitch-hero-gap: 48px; }
  .wm-pitch .wm-hero { padding: 24px 0 44px; }
  .wm-pitch .wm-pitch-heroshot { margin-top: 24px; }
  .wm-pitch .wm-pitch-talk { padding-top: 28px; }
  /* The two routes stay LEFT-TO-RIGHT on a phone. Stacking each row's own
     steps would destroy the thing the picture is for — the eye following a
     booking from the guest to what is left of it. Only type and gaps shrink. */
  /* Same equal-looking space as the wide screen, just less of it — and no
     fixed width on the first step here either, for the same reason. */
  .wm-pitch .wm-pitch-route { gap: 5px; padding: 14px 14px; }
  /* The middle step is the one people actually READ — the two ends are a word
     and a number. On a phone it used to be a 100px box with 0.68rem type in
     it, and the two arrows either side, being `flex: 1`, quietly ate all the
     leftover room: measured on a 390px phone, 108px of the row went to two
     16px arrows while the sentence next to them wrapped inside 100px. Erik,
     2026-08-04, having to pinch-zoom to read it: "this is for owners who
     don't have a lot of time. If it's hard to read they will move on."
     So the middle now TAKES that room instead: the calc is the row's own
     width minus everything else standing on it (the "Guest" step, the amount,
     the gaps, and enough left for both arrows), which is the largest the
     middle can be without pushing anything off the row. It stays one number
     rather than `flex: 1` so both rows still match — see the note on the
     wide-screen rule. 96px is the floor for a very narrow phone; the 200px
     cap is the wide-screen width, so nothing here ever exceeds it.

     The 100% is the ROW's width, deliberately, not the screen's: the same row
     is also shown as a sample inside a narrow box on the marketing style
     guide, and measuring off the screen there made it 33px too wide for the
     box it was sitting in. Keep this relative to the row. */
  .wm-pitch .wm-pitch-node-mid { width: clamp(96px, calc(100% - 153px), 200px); }
  .wm-pitch .wm-pitch-node-ico svg { width: 26px; height: 26px; }
  .wm-pitch .wm-pitch-node-label { font-size: clamp(0.86rem, 4.1vw, 1.15rem); }
  .wm-pitch .wm-pitch-node-note { font-size: clamp(0.74rem, 3.5vw, 1rem); }
  .wm-pitch .wm-pitch-arrow svg { width: 16px; height: 16px; }
  .wm-pitch .wm-pitch-end-amount { font-size: 1.3rem; }
  .wm-pitch .wm-pitch-end-label { font-size: 0.7rem; }
  .wm-pitch .wm-pitch-chip { padding: 11px 16px; font-size: 1.05rem; }
  /* The block header holds its 32px here too — see the rule above; the
     phone is not a reason to slide it to some in-between number. */
  .wm-pitch .wm-pitch-kit-sub { font-size: 1.05rem; }
  .wm-pitch .wm-pitch-terms { font-size: 1.1rem; padding: 18px; gap: 10px; }
  .wm-pitch .wm-pitch-terms svg { width: 43px; height: 43px; }
  :is(.wm-pitch, .wm-story) .wm-pitch-story { grid-template-columns: 1fr; gap: 30px; }
  /* The row under the picture has a whole phone's width to share between a
     caption and a button, so both come down a size rather than wrapping onto
     two lines and stealing height from the picture itself. */
  :is(.wm-pitch, .wm-story) .wm-pitch-zoomer-sheet { gap: 12px; }
  :is(.wm-pitch, .wm-story) .wm-pitch-zoomer-cap { font-size: 0.92rem; }
  :is(.wm-pitch, .wm-story) .wm-pitch-zoomer-close { min-height: 48px; padding: 10px 20px; font-size: 0.95rem; }
  :is(.wm-pitch, .wm-story) .wm-pitch-zoom-mark { width: 34px; height: 34px; right: 8px; bottom: 8px; }
  :is(.wm-pitch, .wm-story) .wm-pitch-zoom-mark svg { width: 19px; height: 19px; }
}