/* ===== FOUNDATION (#107) ===== */
/* ==========================================================================
   WEBMYSITE — STYLESHEET, PART ONE: THE FOUNDATION
   Plain CSS. No preprocessor, no build step, no framework.

   This file delivers only what part one asked for: tokens, fonts, base
   rules, the button, the header and its scrolled state, and the 390px
   responsive rules for header and container. The hero, the chat panel,
   the how-it-works icons and connectors, the examples grid, pricing and
   FAQ are part two — their section rules are deliberately absent here,
   not forgotten.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. :root — PALETTE, TYPE SCALE, SPACING SCALE, RADII, ELEVATION
   -------------------------------------------------------------------------- */

:root {
  /* Palette — six tokens, each with exactly one job. Never referenced by
     hex anywhere below this block. */
  --color-ink: #0B1310;         /* all text on light grounds */
  --color-paper: #FFFFFF;       /* primary ground */
  --color-mist: #F4F7F5;        /* secondary ground, cards, reply bubbles */
  --color-line: #E3E8E5;        /* hairlines, borders */
  --color-brand-green: #0E9F6E; /* the one accent */
  --color-deep-green: #0B6B4B;  /* hover/pressed state of Brand Green only */

  /* Footer is the one section that inverts: white text on Ink. Named for
     what it does, not for where it's used, so a future section that also
     needs an inverted ground doesn't need a new pair invented for it. */
  --color-ink-contrast: #FFFFFF;

  /* Type scale — sizes and line-heights as specified. Only two heading
     scales exist in the approved homepage (hero H1, section heads); a
     third size for h3–h6 is not specified anywhere in the brief, so none
     is invented here. If part two's sections need a third level, it gets
     named and justified there, not guessed at here. */
  --text-display-xl-size: 64px;
  --text-display-xl-line: 1.05;
  --text-display-l-size: 44px;
  --text-display-l-line: 1.1;
  --text-body-size: 17px;
  --text-body-line: 1.6;
  --text-label-size: 14px;
  --text-label-line: 1.2;
  --text-label-tracking: 0.04em;

  /* Wordmark tracking, named separately from body letter-spacing because
     it applies to one element only and at a different value (−1% vs the
     label's +4%). Keeping it a distinct token stops someone reusing the
     label's tracking on the wordmark by reaching for "the nearest one". */
  --tracking-wordmark: -0.01em;

  /* Spacing scale — named by the pixel value it holds, per the rule: a
     multiplier-named scale drops undefined steps silently. Every value
     used anywhere in the three-part build should trace to one of these;
     if a section needs a step not listed here, that is a part-two
     problem to raise, not a inline magic number to add quietly. */
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-56: 56px;
  --space-64: 64px;
  --space-80: 80px;
  --space-96: 96px;

  /* Radii — named by px, per the same rule. 0 and anything above 24px on
     a large surface are rule violations, not values, so no token exists
     for either. */
  --radius-8: 8px;
  --radius-12: 12px;
  --radius-16: 16px;
  --radius-24: 24px;
  --radius-round: 9999px; /* icon scale only */

  /* Elevation — a single token, used only on the phone panel and example
     thumbnails on hover (part two). Everything else stays flat with a
     1px Line border; defining it here, once, stops a second shadow value
     appearing by accident three files from now. */
  --elevation-1: 0 1px 2px rgba(11, 19, 16, 0.04), 0 8px 24px rgba(11, 19, 16, 0.06);

  /* Container */
  --container-max: 1200px;
  --container-gutter: var(--space-40); /* 20px at 390px, see media query */

  /* One focus language, referenced everywhere instead of repeated */
  --focus-ring-color: var(--color-brand-green);
  --focus-ring-width: 2px;
  --focus-ring-offset: 2px;
}

/* --------------------------------------------------------------------------
   2. @font-face — SORA & INTER, SELF-HOSTED, LATIN SUBSET
   -------------------------------------------------------------------------- */

/*
 * The faces are declared at the end of this file, against paths that exist.
 *
 * What was here pointed at /assets/fonts/sora/sora-700-latin.woff2 — a
 * root-relative address, and the theme lives under
 * /wp-content/themes/wms-base/. So every one of these requests 404'd and the
 * page has been rendering in a system sans-serif since it was built, silently,
 * because a missing font is not an error a browser reports anywhere a person
 * would look. Six weights, none of them ever loaded.
 *
 * The replacements are variable fonts covering the whole weight range in one
 * file each, addressed relative to this stylesheet.
 */

/* --------------------------------------------------------------------------
   3. BASE RULES — RESET, BODY, HEADINGS, PARAGRAPHS, LINKS, LISTS,
      CONTAINER, LABEL/EYEBROW, FOCUS LANGUAGE
   -------------------------------------------------------------------------- */

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

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

body,
h1, h2, h3, h4, h5, h6,
p,
figure,
blockquote,
dl, dd {
  margin: 0;
}

ul[class],
ol[class] {
  margin: 0;
  padding: 0;
  list-style: none;
}

img,
picture,
svg {
  display: block;
  max-width: 100%;
}

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

/* Every section sets its own background and text colour in the same rule
   (enforced section-by-section in part two). Body carries the page-wide
   default only — Paper ground, Ink text — so nothing above a section
   silently inherits the wrong one. */
body {
  background-color: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-inter);
  font-weight: 400;
  font-size: var(--text-body-size);
  line-height: var(--text-body-line);
  -webkit-font-smoothing: antialiased;
}

h1 {
  font-family: var(--font-sora);
  font-weight: 800;
  font-size: var(--text-display-xl-size);
  line-height: var(--text-display-xl-line);
  letter-spacing: -0.01em;
}

h2 {
  font-family: var(--font-sora);
  font-weight: 700;
  font-size: var(--text-display-l-size);
  line-height: var(--text-display-l-line);
  letter-spacing: -0.005em;
}

/* h3–h6 intentionally take no scale of their own here — see the :root
   comment above the type-scale tokens. They inherit body size/weight
   until a real use (with a real size) turns up in part two or three. */
h3, h4, h5, h6 {
  font-family: var(--font-sora);
  font-weight: 700;
}

p {
  max-width: 65ch; /* keeps body copy readable regardless of section width */
}

a {
  color: var(--color-brand-green);
  text-decoration: none;
}

a:hover {
  color: var(--color-deep-green);
  text-decoration: underline;
}

/* The wordmark ----------------------------------------------------------
   Markup contract:
   <a class="wms-wordmark" href="/">WebMyS<span class="wms-wordmark__i">i</span>te</a>

   The dot is not erased from the live "i" glyph and repainted — plain CSS
   can't selectively recolour half a character. Instead an opaque Brand
   Green square is drawn on top of the existing dot, sized to fully cover
   it regardless of the section's background colour underneath. This is
   why it works unchanged on both the Paper header and the Ink footer
   without a separate "erase" step: the square is opaque, not a colour
   swap. The offset values below are set against Sora 800's rendered
   metrics and are marked here as needing a one-time pixel check against
   the shipped woff2 — font hinting can shift a dot by a pixel or two
   between weights, this is the one place in the file that isn't purely
   derived from a token. */
.wms-wordmark {
  display: inline-flex;
  align-items: baseline;
  font-family: var(--font-sora);
  font-weight: 800;
  letter-spacing: var(--tracking-wordmark);
  color: var(--color-ink);
  font-size: var(--space-24); /* header sets the real rendered size; this is the floor */
  text-decoration: none;
}

.wms-wordmark:hover {
  /* Identity, not a link — so no hover colour change. `inherit` rather
     than Ink: pinned to Ink it vanished into the Ink footer band the
     moment a cursor touched it, which the hover audit caught. */
  color: inherit;
  text-decoration: none;
}

.wms-wordmark__i {
  position: relative;
  display: inline-block;
}

.wms-wordmark__i::after {
  content: '';
  position: absolute;
  /* calibrated to Sora 800 at 1em; see comment above the .wms-wordmark rule */
  top: -0.62em;
  left: 0.14em;
  width: 0.22em;
  height: 0.22em;
  background-color: var(--color-brand-green);
  border-radius: 2px; /* "small rounded square", not a circle */
}

/* Footer inversion: wordmark turns white, dot stays green — the one place
   the wordmark's own colour rule is overridden, and it's overridden here
   once rather than redefining the whole component in the footer section. */
.wms-footer .wms-wordmark {
  color: var(--color-ink-contrast);
}

/* The label / eyebrow treatment ------------------------------------------
   Colour is Ink, not Brand Green. Green is reserved for exactly three
   things on this page (wordmark dot, CTA buttons, thumbnail frame — see
   part two); a coloured eyebrow label would be a fourth green thing that
   nobody decided on, so it stays neutral. */
.wms-label {
  display: inline-block;
  font-family: var(--font-inter);
  font-weight: 600;
  font-size: var(--text-label-size);
  line-height: var(--text-label-line);
  letter-spacing: var(--text-label-tracking);
  text-transform: uppercase;
  color: var(--color-ink);
}

/* Container ---------------------------------------------------------------
   Gutter is 40px desktop, 20px mobile (rule, not this file's invention);
   the mobile value is applied in the 390px media query at the end. */
.wms-container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-gutter);
}

/* One focus language, applied identically to every interactive element.
   :focus-visible only — a mouse click never shows the ring, keyboard
   navigation always does. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}

/* Remove the default outline only where the rule above supplies its own —
   never remove it unconditionally, which would leave :focus (non-visible
   browsers) with nothing at all. */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
input:focus:not(:focus-visible),
textarea:focus:not(:focus-visible),
select:focus:not(:focus-visible),
summary:focus:not(:focus-visible),
[tabindex]:focus:not(:focus-visible) {
  outline: none;
}

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

/* --------------------------------------------------------------------------
   4. THE BUTTON — EVERY STATE, SIZED TO ITS LABEL
   -------------------------------------------------------------------------- */

/* Sized to its label: no `height` anywhere on this component. The 52px/48px
   figures from the identity spec are achieved as the *default* rendered
   height of a single-line label at this padding + line-height, not as a
   fixed box — so a label that wraps to two lines grows the button instead
   of overflowing it. `min-height` is used only to stop a very short label
   (an icon-only button, say) from collapsing thinner than the intended
   touch target; it is a floor, not a ceiling. */
.wms-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  width: fit-content;
  min-height: 52px;
  padding: var(--space-16) var(--space-24);
  border-radius: var(--radius-12);
  border: 1px solid transparent;
  font-family: var(--font-inter);
  font-weight: 600;
  font-size: var(--text-body-size);
  line-height: 1.2;
  cursor: pointer;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, transform 100ms ease;
  /* no box-shadow here — elevation is reserved for the phone panel and
     example thumbnails only, per the rule; a raised button would be a
     second, undeclared use of the elevation token */
}

.wms-btn--primary {
  background-color: var(--color-brand-green);
  color: var(--color-ink-contrast);
  border-color: var(--color-brand-green);
}

.wms-btn--primary:hover {
  background-color: var(--color-deep-green);
  border-color: var(--color-deep-green);
}

.wms-btn--primary:active {
  background-color: var(--color-deep-green);
  border-color: var(--color-deep-green);
  transform: translateY(1px); /* tactile press feedback without a shadow */
}

.wms-btn--primary:disabled {
  background-color: var(--color-brand-green);
  border-color: var(--color-brand-green);
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
  transform: none;
}

/* Secondary — not used on the homepage as drafted (every CTA on this page
   is Primary, per the section-by-section contract), but specified here
   because the button component is shared across the product: claim flow,
   billing path, and any future page that isn't all-CTA. Ghost treatment:
   Ink text and border on Paper, no fill, so it reads as "also available"
   rather than competing with the one Primary action on any given screen. */
.wms-btn--secondary {
  background-color: transparent;
  color: var(--color-ink);
  border-color: var(--color-line);
}

.wms-btn--secondary:hover {
  background-color: var(--color-mist);
  border-color: var(--color-line);
}

.wms-btn--secondary:active {
  background-color: var(--color-mist);
  transform: translateY(1px);
}

.wms-btn--secondary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
  transform: none;
}

/* --------------------------------------------------------------------------
   5. THE HEADER, INCLUDING ITS SCROLLED STATE
   -------------------------------------------------------------------------- */

.wms-header {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  height: 88px;
  background-color: transparent;
  border-bottom: 1px solid transparent; /* reserves the space the border will occupy once scrolled, so the switch doesn't shift layout by 1px */
  transition: height 150ms ease, background-color 150ms ease, border-color 150ms ease;
}

.wms-header__inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-24);
}

.wms-header__wordmark {
  /* .wms-wordmark base rule handles font/colour/dot; this sets the
     rendered size for the header context specifically */
  font-size: var(--space-24);
}

.wms-header__cta {
  /* header CTA is always Primary — enforced by markup (part two uses
     .wms-btn--primary here), this selector exists for spacing only */
  flex-shrink: 0;
}

/* Past 24px of scroll, JS (outside this file's scope) adds this class. */
.wms-header--scrolled {
  height: 64px;
  background-color: var(--color-paper);
  border-bottom-color: var(--color-line);
}

/* --------------------------------------------------------------------------
   6. RESPONSIVE — HEADER & CONTAINER AT 390px
   -------------------------------------------------------------------------- */

@media (max-width: 390px) {
  :root {
    --container-gutter: var(--space-20);
  }

  .wms-header {
    height: 72px; /* the 88px desktop figure was never specified for mobile; this keeps the wordmark and CTA off the top edge without inventing a new scale step — see spacing scale */
  }

  .wms-header--scrolled {
    height: 56px;
  }

  .wms-header__wordmark {
    font-size: var(--space-20); /* stays comfortably above the 24px-rendered-height floor where the dot is the only remaining mark, once the icon/favicon scale is reached — this is still header-scale, not favicon-scale */
  }

  .wms-btn {
    padding-inline: var(--space-16); /* label-sized, not height-sized — only the horizontal breathing room tightens on narrow screens */
    min-height: 48px;
  }
}

/* ===== HERO AND CHAT (#109) ===== */
/* ============================================================================
   WMS — HERO + CHAT
   Director's brief #104, part two of two: the hero band and the chat panel
   that sits inside it, plus the three icons the mockup shows and does not.

   Scope, per the brief: hero and chat only. Nothing else is styled or
   redefined here.

   ASSUMPTIONS ABOUT THE FOUNDATION (already written, not repeated here):
   - Palette, type scale, spacing and radii exist as custom properties on
     :root. Spacing is named by the px value it holds (--space-16 holds
     16px, and so on) per the standing rule against multiplier scales.
     Colours are named as in the approved palette table
     (--color-ink, --color-paper, --color-mist, --color-line,
     --color-brand-green, --color-deep-green). Type-scale entries are
     assumed to exist as shorthand tokens (--text-display-xl,
     --text-body) holding the full `font:` shorthand, since the brief
     already fixed their values (64/1.05 Sora 800, 17/1.6 Inter 400 etc.)
     and re-declaring the numbers here would be the exact duplication the
     brief rules against. If the foundation uses different literal names
     for the same values, rename the var() calls only — the values are
     fixed by the identity doc and are not mine to change.
   - .container, .btn / .btn--primary and .wms-header are already styled.
     `.wms-hero__inner` below carries `.container` in markup and this file
     only adds the grid layer the mockup requires on top of it.
   - `prefers-reduced-motion` and `.wms-chat--play` are covered fully in
     this file; the IntersectionObserver that adds `.wms-chat--play` when
     the panel scrolls into view is not CSS and is out of scope here.

   REFERENCE MARKUP — the shape this CSS expects. Kept as a comment because
   the class contract needs a body to make sense of, not because CSS ships
   HTML. The chat block nests inside the hero's grid, not below it: the
   written contract had `.wms-chat` as a sibling section, the approved
   mockup put it beside the headline, and per the brief the drawing wins.

   <section class="wms-hero">
     <div class="wms-hero__inner container">
       <div class="wms-hero__content">
         <h1 class="wms-hero__title">Your website, sold and run over WhatsApp</h1>
         <p class="wms-hero__subtitle">No forms, no dashboard — just a conversation.</p>
         <ul class="wms-hero__meta">
           <li class="wms-hero__meta-item">No account to create.</li>
           <li class="wms-hero__meta-item">Your first two versions are free to look at.</li>
         </ul>
         <a class="wms-hero__cta btn btn--primary" href="#invite">Start on WhatsApp</a>
         <ul class="wms-hero__points">
           <li class="wms-hero__point">
             <span class="wms-hero__point-icon" aria-hidden="true">
               <!-- ICON 1 — simple chat: a rounded speech bubble with two
                    message lines inside, depicting the WhatsApp conversation
                    itself, not a dashboard. -->
               <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"
                    stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
                 <path d="M4 5.5h16a1 1 0 0 1 1 1v9a1 1 0 0 1-1 1H9l-4 3v-3H4a1 1 0 0 1-1-1v-9a1 1 0 0 1 1-1Z"/>
                 <path d="M8 10h8M8 13h5"/>
               </svg>
             </span>
             <span class="wms-hero__point-label">simple chat</span>
             <span class="wms-hero__point-text">No forms, no fields, just a message.</span>
           </li>
           <li class="wms-hero__point">
             <span class="wms-hero__point-icon" aria-hidden="true">
               <!-- ICON 2 — live in minutes: a clock face with the hands
                    short of a full turn, depicting the site going live
                    within minutes, not days. -->
               <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"
                    stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
                 <circle cx="12" cy="12" r="8.5"/>
                 <path d="M12 7.5V12l3 2"/>
               </svg>
             </span>
             <span class="wms-hero__point-label">live in minutes</span>
             <span class="wms-hero__point-text">Answer a few questions and it's online.</span>
           </li>
           <li class="wms-hero__point">
             <span class="wms-hero__point-icon" aria-hidden="true">
               <!-- ICON 3 — you own it: a key's round bow and a warded
                    shaft, depicting outright ownership and control of the
                    site, not a lease on it. -->
               <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"
                    stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
                 <circle cx="8" cy="12" r="3.5"/>
                 <path d="M11 12h9M17 12v3M20 12v2"/>
               </svg>
             </span>
             <span class="wms-hero__point-label">you own it</span>
             <span class="wms-hero__point-text">Buy it outright, host it wherever you like.</span>
           </li>
         </ul>
       </div>

       <div class="wms-chat">
         <div class="wms-chat__inner">
           <div class="wms-chat__frame">
             <div class="wms-chat__thread">
               <div class="wms-chat__message wms-chat__message--customer">
                 <div class="wms-chat__bubble">Hi, I run a barber shop in Leeds — can I get a website?</div>
               </div>
               <div class="wms-chat__typing" aria-hidden="true">
                 <span class="wms-chat__typing-dot"></span>
                 <span class="wms-chat__typing-dot"></span>
                 <span class="wms-chat__typing-dot"></span>
               </div>
               <div class="wms-chat__message wms-chat__message--reply">
                 <div class="wms-chat__sender">Marvin</div>
                 <div class="wms-chat__bubble">
                   Here's a first version, built from your name and town.
                   <span class="wms-chat__thumbnail">
                     <img class="wms-chat__thumbnail-image" src="/img/examples/barber.webp" alt="">
                     <span class="wms-chat__thumbnail-label">Fade &amp; Line, Leeds</span>
                   </span>
                 </div>
               </div>
             </div>
             <div class="wms-chat__composer" aria-hidden="true">Message Marvin…</div>
           </div>
         </div>
       </div>
     </div>
   </section>
   ============================================================================ */


/* ── ICON SPEC (applies to all three point icons above) ──────────────────
   Grid: 24×24 viewBox, drawn to the pixel grid, no sub-pixel anchor points.
   Stroke: 1.5px, colour currentColor (never Brand Green — see below).
   Corners: round linecap and round linejoin throughout, no mitred joins —
   this echoes the rounded-square wordmark dot and the radii scale rather
   than introducing a second, sharper icon language.
   Fill: none. No icon font, no sprite fetch, no library: each icon is the
   inline <svg> shown in the markup above.
   ------------------------------------------------------------------------ */


/* ============================================================================
   1. THE HERO
   ============================================================================ */

.wms-hero {
  /* Every section states its own ground and ink in the same rule — this is
     Paper, never inherited. */
  background: var(--color-paper);
  color: var(--color-ink);
  padding-block: var(--space-96);
  /* Contains the 8px entrance rise of the chat's animated children so it
     can never introduce a horizontal scrollbar on a page that also has to
     be photographed clean for the OG image. */
  overflow: hidden;
}

.wms-hero__inner {
  /* .container (already styled) supplies max-width and gutters; this adds
     the two-column band the approved mockup shows and the written contract
     did not. 440px is the chat panel's fixed width: wide enough that the
     sender name and a 4:3 thumbnail never wrap, narrow enough that the
     headline column keeps roughly 60% of the 1200px content width. */
  display: grid;
  grid-template-columns: minmax(0, 1fr) 440px;
  column-gap: var(--space-64);
  align-items: start;
}

.wms-hero__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-24);
}

.wms-hero__title {
  font: var(--text-display-xl); /* 64/1.05 Sora 800, per the type scale */
  margin: 0;
  /* Caps the line at 20 characters per row so Display XL never runs
     underneath — or past — the fixed 440px chat column beside it. */
  max-width: 20ch;
}

.wms-hero__subtitle {
  font: var(--text-body); /* 17/1.6 Inter 400 */
  margin: 0;
  max-width: 42ch;
}

.wms-hero__meta {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.wms-hero__meta-item {
  font: var(--text-body);
  /* Supporting fact, not a second headline: dimmed against the same ink,
     never a second colour, so it stays legible if it's ever read aloud
     from a screenshot without its surrounding hierarchy. */
  opacity: 0.72;
}

.wms-hero__cta {
  margin-top: var(--space-8);
  /* Sizes to its label per the standing rule; nothing fixed here. */
  align-self: flex-start;
}

.wms-hero__points {
  list-style: none;
  margin: var(--space-48) 0 0;
  padding: 0;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-24);
}

.wms-hero__point {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-8);
}

.wms-hero__point-icon {
  /* Ink, deliberately not Brand Green. Green appears in exactly three
     places on this page — the wordmark dot, the two CTA buttons and the
     thumbnail frame — and these are informational glyphs, not something
     you can act on, so they take the colour of the copy beside them. */
  color: var(--color-ink);
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}

.wms-hero__point-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

.wms-hero__point-label {
  /* Bold, sentence case, as written in the approved copy ("simple chat",
     not "SIMPLE CHAT") — this is not the uppercase Label token used for
     chrome elsewhere on the page, it's a short sentence and reads as one. */
  font: var(--text-body);
  font-weight: 600;
}

.wms-hero__point-text {
  /* No token in the scale sits between Body(17) and the uppercase
     Label(14): 15px, sentence case, is a deliberate one-off for this
     single supporting line so three short points don't crowd under a
     bold label without dropping into chrome-style type. */
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
  color: var(--color-ink);
  opacity: 0.72;
}


/* ============================================================================
   2. THE CHAT
   ============================================================================ */

.wms-chat {
  /* The hero's right-hand grid cell — see the reconciliation note at the
     top of this file for why this sits inside .wms-hero__inner rather
     than as its own section below it. */
  width: 100%;
}

.wms-chat__inner {
  width: 100%;
  max-width: 440px;
}

.wms-chat__frame {
  background: var(--color-paper);
  color: var(--color-ink);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-24); /* the one surface allowed the full 24px */
  box-shadow: var(--shadow-elevated); /* the single elevation token */
  padding: var(--space-24);
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.wms-chat__thread {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.wms-chat__message {
  display: flex;
  flex-direction: column;
  max-width: 84%;
}

.wms-chat__message--customer {
  align-self: flex-end;
  align-items: flex-end;
}

.wms-chat__message--reply {
  align-self: flex-start;
  align-items: flex-start;
}

.wms-chat__sender {
  /* Shown once, above the first reply only — the sole appearance of
     "Marvin" on the page. Not the uppercase Label token: a name isn't
     chrome. */
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--color-ink);
  opacity: 0.6;
  margin-bottom: var(--space-4);
}

.wms-chat__bubble {
  font: var(--text-body);
  font-size: 15px; /* one step below the page's running Body, as chat copy is elsewhere */
  padding: var(--space-12) var(--space-16);
  border-radius: var(--radius-16);
}

.wms-chat__message--customer .wms-chat__bubble {
  background: var(--color-paper);
  border: 1px solid var(--color-line);
  /* Direction is a shape convention, not a colour one: the corner nearest
     the edge the message came from is reduced. No bubble here is ever
     tinted Brand Green — that is the two-greens mistake named and rejected
     in the identity doc. */
  border-bottom-right-radius: 4px;
}

.wms-chat__message--reply .wms-chat__bubble {
  background: var(--color-mist);
  border: none;
  border-bottom-left-radius: 4px;
}

.wms-chat__typing {
  /* Reserved for the play-once entrance only. In the finished state —
     the default, and what prefers-reduced-motion users and the OG-image
     capture always see — there is no typing indicator, because the
     exchange is already complete. Height and opacity, not display:none,
     so it can be brought in without a layout jump. */
  display: flex;
  align-items: center;
  gap: 4px;
  height: 0;
  overflow: hidden;
  opacity: 0;
}

.wms-chat__typing-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-ink);
  opacity: 0.3;
}

.wms-chat__thumbnail {
  display: block;
  margin-top: var(--space-12);
}

.wms-chat__thumbnail-image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-12);
  /* The second of the three places green appears on the entire page. */
  border: 2px solid var(--color-brand-green);
}

.wms-chat__thumbnail-label {
  /* Smaller than the Label token and never uppercase: this is a caption
     under a picture, not a piece of interface chrome. */
  display: block;
  margin-top: var(--space-8);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-ink);
  opacity: 0.72;
}

.wms-chat__composer {
  /* Decorative chrome only — never a real input, never focusable, so it
     carries no :focus-visible treatment and no name attribute in markup. */
  display: flex;
  align-items: center;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-8);
  padding: var(--space-12) var(--space-16);
  font: var(--text-body);
  font-size: 15px;
  color: var(--color-ink);
  opacity: 0.4;
  pointer-events: none;
  user-select: none;
}


/* ============================================================================
   3. THE PLAY-ONCE EXCHANGE
   Customer bubble in (200ms, 8px rise) → 600ms pause → typing indicator
   900ms → reply bubble in → thumbnail cross-fades 150ms after. ~2.0s total,
   comfortably under the 2.5s ceiling. Plays once: `.wms-chat--play` is
   added by the (out-of-scope) scroll observer and is never removed or
   re-added, so there is nothing here to loop.

   Base state, above, IS the finished state — opacity 1, no transform, no
   typing indicator. That is deliberate: with no JS, with the animation
   class never applied, or with reduced motion requested, the panel simply
   renders complete on first paint. The whole block below only exists to
   temporarily rewind that finished state to its start and play it forward
   once, and it is only reachable when motion is welcome.
   ============================================================================ */

@media (prefers-reduced-motion: no-preference) {

  .wms-chat--play .wms-chat__message--customer .wms-chat__bubble {
    animation: wms-bubble-in 200ms ease-out both;
    animation-delay: 0ms;
  }

  .wms-chat--play .wms-chat__typing {
    /* steps(1) holds the "from" keyframe for the full 900ms then jumps
       straight to the "to" keyframe at the very end — visible for the
       whole pause, gone the instant the reply appears, no fade either
       side to read as decoration in its own right. */
    animation: wms-typing-window 900ms steps(1) both;
    animation-delay: 800ms; /* 200ms bubble-in + 600ms pause */
  }

  .wms-chat--play .wms-chat__typing-dot {
    animation: wms-typing-dot 300ms ease-in-out 3;
    animation-delay: 800ms;
  }

  .wms-chat--play .wms-chat__typing-dot:nth-child(2) {
    animation-delay: 950ms;
  }

  .wms-chat--play .wms-chat__typing-dot:nth-child(3) {
    animation-delay: 1100ms;
  }

  .wms-chat--play .wms-chat__sender,
  .wms-chat--play .wms-chat__message--reply .wms-chat__bubble {
    animation: wms-bubble-in 200ms ease-out both;
    animation-delay: 1700ms; /* 800ms + 900ms typing window */
  }

  .wms-chat--play .wms-chat__thumbnail {
    animation: wms-thumb-in 150ms ease-out both;
    animation-delay: 1850ms; /* 150ms after the reply bubble starts in */
  }

  @keyframes wms-bubble-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  @keyframes wms-typing-window {
    from { opacity: 1; height: 16px; }
    to   { opacity: 0; height: 0; }
  }

  @keyframes wms-typing-dot {
    0%, 100% { opacity: 0.3; transform: translateY(0); }
    50%      { opacity: 1;   transform: translateY(-2px); }
  }

  @keyframes wms-thumb-in {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
}


/* ============================================================================
   4. RESPONSIVE — HERO AND CHAT AT 390px
   390px is the narrowest common device width the Director tests this page
   against (iPhone 12/13/14 class); 480px gives it a little headroom
   without inventing a second breakpoint no other section defines.
   ============================================================================ */

@media (max-width: 480px) {

  .wms-hero {
    padding-block: var(--space-56);
  }

  .wms-hero__inner {
    /* Band stacks: words, then the chat panel, in source order — the
       reading order the mockup already implies once there's no width for
       two columns. */
    grid-template-columns: 1fr;
    row-gap: var(--space-40);
  }

  .wms-hero__title {
    /* Display XL at 64px overflows a 390px viewport at 1.05 line-height
       with an ascender/descender to spare; scaled down here only for the
       narrowest band, not redefined as a new token — the desktop value in
       the type scale is untouched. */
    font-size: 40px;
    line-height: 1.15;
    max-width: none;
  }

  .wms-hero__subtitle,
  .wms-hero__meta-item {
    max-width: none;
  }

  .wms-hero__points {
    /* Three across at 390px leaves each icon+label+line under 110px wide
       and wraps every label onto two lines — stacked, one per row, each
       point keeps the full-width line it was written for. */
    grid-template-columns: 1fr;
    gap: var(--space-16);
  }

  .wms-chat__inner {
    max-width: 100%;
  }

  .wms-chat__frame {
    padding: var(--space-16);
  }

  .wms-chat__message {
    max-width: 92%;
  }
}

/* ===== STEPS TO FOOTER (#108) ===== */
/* =========================================================================
   WebMySite — homepage stylesheet, PART TWO OF TWO
   Steps · Examples · Pricing · FAQ · Invite · Footer · mobile reflow.

   Tokens (--ink, --paper, --mist, --line, --brand-green, --deep-green,
   --font-display, --font-text, --space-8/16/20/24/32/40/48/56/64/96,
   --radius-8/12/16/24/full, --elevation) are assumed to exist on :root
   from part one and are only ever referenced here, never redefined.

   Every wrapper below (`__list`, `__grid`, `__inner`) sets its own
   max-width/gutter rather than depending on a shared `.wms-container`
   utility that this file can't see. If part one already applies one,
   this is redundant but harmless; if it doesn't, this file still
   stands on its own — the safer failure mode of the two.
   ========================================================================= */

/* -------------------------------------------------------------------------
   ICON SYSTEM — governs every inline SVG on the page, including the three
   hero points built in part one and the step icons built here. Keeping the
   spec in one place is the point: an icon drawn to a different stroke or
   grid anywhere on the page reads as a second hand on the same drawing.

   - 24×24 viewBox, drawn on a 2px module (1px clearance at the edges).
   - stroke: currentColor, stroke-width: 1.75 — thin enough to sit inside
     a 64px circle without looking bolded, thick enough to survive
     favicon-scale downsizing in a screenshot or OG crop.
   - fill: none. No solid icon shapes — line-only, matching the wordmark's
     one-shape restraint.
   - stroke-linecap: round, stroke-linejoin: round — the same corner
     language as the shape scale (never a hard 0 corner anywhere on the
     page, icons included).
   - colour is Ink, never Brand Green. Green is reserved for the three
     named places (wordmark dot, the two CTA buttons, the thumbnail
     frame); an icon is decorative, not something you can act on, and
     colouring it green would be a fourth appearance nobody decided on.
   - what each depicts is content, authored per icon alongside its copy
     (chat bubble outline / a play-triangle-in-circle for "live in
     minutes" / a house outline for "you own it"; step icons depend on
     whatever the how-it-works copy ends up being) — not something this
     stylesheet can fix, only the container it sits in.
   ------------------------------------------------------------------------- */

/* =========================================================================
   1. STEPS
   ========================================================================= */

.wms-steps {
  background: var(--paper);
  color: var(--ink);
  padding: var(--space-96) 0;
}

.wms-steps__heading {
  /* Not named in the markup contract, but every other section with body
     copy above its content has one; adding it here follows the same
     __element convention rather than leaving the heading unstyled. */
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 44px;
  line-height: 1.1;
  max-width: 640px;
  margin: 0 auto var(--space-56);
  text-align: center;
}

.wms-steps__list {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-40);
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--space-40);
  list-style: none;
}

/* The connector runs the full width of the row, behind everything, and
   the icon circles (opaque background) sit on top and mask it — a single
   line rather than a per-gap segment computed against however many steps
   there end up being. Robust to 3 steps or 5 without touching this rule. */
.wms-steps__list::before {
  content: '';
  position: absolute;
  top: 32px; /* vertical centre of the 64px icon circle below */
  left: var(--space-40);
  right: var(--space-40);
  height: 1px;
  background: var(--line);
  z-index: 0;
}

.wms-steps__item {
  position: relative;
  z-index: 1;
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-16);
}

.wms-steps__icon {
  position: relative;
  width: 64px;
  height: 64px;
  border-radius: var(--radius-full); /* icon scale — the one place full-round is allowed */
  background: var(--mist);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
}

.wms-steps__icon svg {
  width: 28px;
  height: 28px;
  stroke: var(--ink);
  stroke-width: 1.75;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* The number rides as a badge on the icon circle rather than as a
   separate line, so the eye reads "icon = this step" instead of parsing
   a number and a picture as two unrelated facts stacked vertically. */
.wms-steps__index {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 26px;
  height: 26px;
  border-radius: var(--radius-full);
  background: var(--paper);
  border: 1px solid var(--line);
  color: var(--ink);
  font-family: var(--font-text);
  font-weight: 600;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wms-steps__title {
  font-family: var(--font-text);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.3;
  color: var(--ink);
}

.wms-steps__text {
  font-family: var(--font-text);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink);
  opacity: 0.7; /* muted body copy under a bold title — no new colour token, just opacity on Ink */
  max-width: 220px;
}

/* =========================================================================
   2. EXAMPLES
   ========================================================================= */

.wms-examples {
  /* Mist here, Paper above and below it — the alternating ground is the
     rhythm device that lets a long page read in sections without any
     section becoming invisible against its neighbour. */
  background: var(--mist);
  color: var(--ink);
  padding: var(--space-96) 0;
}

.wms-examples__heading {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 44px;
  line-height: 1.1;
  text-align: center;
  margin: 0 auto var(--space-56);
  max-width: 640px;
}

.wms-examples__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-24);
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--space-40);
}

.wms-examples__card {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-16);
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  /* overflow is NOT hidden on the card itself — see .wms-examples__thumb —
     so a focus-visible outline on this whole-card link never gets
     clipped by the corner radius. */
}

.wms-examples__card:hover {
  transform: translateY(-4px);
  box-shadow: var(--elevation);
  /* "no colour shift" per the brief — lift only, nothing recolours */
}

.wms-examples__card:focus-visible {
  outline: 2px solid var(--brand-green);
  outline-offset: 2px;
  border-radius: var(--radius-16);
}

.wms-examples__thumb {
  /* This element owns the top-corner clipping instead of the card, so the
     card's own border-radius can stay purely decorative and never fight
     the focus ring above. */
  overflow: hidden;
  border-radius: var(--radius-16) var(--radius-16) 0 0;
  aspect-ratio: 4 / 3; /* a common above-the-fold crop; keeps five different real sites' screenshots from producing five different card heights */
  background: var(--mist); /* shows briefly if the screenshot is slow to paint */
}

.wms-examples__thumb-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.wms-examples__body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
  padding: var(--space-24);
}

.wms-examples__label {
  font-family: var(--font-text);
  font-weight: 600;
  font-size: 16px;
  color: var(--ink);
}

.wms-examples__view {
  font-family: var(--font-text);
  font-weight: 600;
  font-size: 14px;
  color: var(--ink);
  opacity: 0.6; /* affordance without a fourth green — see icon-system note above */
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.wms-examples__view::after {
  content: '\2192'; /* → */
  display: inline-block;
  transition: transform 0.2s ease;
}

.wms-examples__card:hover .wms-examples__view::after {
  transform: translateX(4px);
}

/* =========================================================================
   3. PRICING
   ========================================================================= */

.wms-pricing {
  background: var(--paper);
  color: var(--ink);
  padding: var(--space-96) 0;
}

.wms-pricing__heading {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 44px;
  line-height: 1.1;
  text-align: center;
  margin: 0 auto var(--space-24);
  max-width: 640px;
}

/* Not in the original markup contract by name, but the brief is explicit
   that the two-free-versions line is copy, not styling — this class exists
   only so it can sit centred above the grid as plain body text, with no
   card, border or colour of its own. */
.wms-pricing__trial {
  font-family: var(--font-text);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  opacity: 0.8;
  text-align: center;
  max-width: 560px;
  margin: 0 auto var(--space-56);
}

.wms-pricing__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-32);
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--space-40);
  align-items: stretch;
}

/* .wms-pricing__card--monthly and --buyout carry identical styling.
   Equal visual weight was explicit in the brief — the modifiers exist so
   markup/content (price, CTA href) can target a card, never so this
   stylesheet can. Do not add a highlighted/featured variant later without
   going back to the Director; that's exactly the third-card instinct the
   brief ruled out. */
.wms-pricing__card {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-16);
  padding: var(--space-40);
}

.wms-pricing__card-title {
  font-family: var(--font-text);
  font-weight: 600;
  font-size: 18px;
  color: var(--ink);
}

.wms-pricing__price {
  display: flex;
  align-items: baseline;
  gap: var(--space-8);
}

.wms-pricing__price-figure {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 48px;
  line-height: 1;
  color: var(--ink);
}

.wms-pricing__price-period {
  font-family: var(--font-text);
  font-weight: 500;
  font-size: 16px;
  color: var(--ink);
  opacity: 0.6;
}

.wms-pricing__features {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.wms-pricing__feature {
  display: flex;
  align-items: flex-start;
  gap: var(--space-8);
  font-family: var(--font-text);
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
}

.wms-pricing__feature svg {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  stroke: var(--ink); /* deliberately not Brand Green — see icon-system note; a green checkmark would be the page's fourth green */
  stroke-width: 1.75;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.wms-pricing__cta {
  margin-top: auto; /* pins the button to the same baseline on both cards regardless of feature-list length */
}

.wms-pricing__cta .wms-btn {
  width: 100%;
}

/* =========================================================================
   4. QUESTIONS — native <details>/<summary>, no accordion
   ========================================================================= */

.wms-faq {
  background: var(--mist);
  color: var(--ink);
  padding: var(--space-96) 0;
}

.wms-faq__heading {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 44px;
  line-height: 1.1;
  text-align: center;
  margin: 0 auto var(--space-56);
  max-width: 640px;
}

.wms-faq__list {
  max-width: 720px; /* narrower than the page grid — the closed-state line length the brief flags is a reading-column concern, not a full-width one */
  margin-inline: auto;
  padding-inline: var(--space-40);
  border-top: 1px solid var(--line);
}

.wms-faq__item {
  border-bottom: 1px solid var(--line);
}

.wms-faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
  padding: var(--space-24) 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-text);
  font-weight: 600;
  font-size: 17px;
  line-height: 1.4;
  color: var(--ink);
}

.wms-faq__question::-webkit-details-marker {
  display: none;
}

/* Explicit here rather than assumed inherited from a generic base rule:
   the native browser focus ring on <summary> is inconsistent enough across
   engines that this section can't risk relying on an unseen global
   selector to reach it. Same values as the page's one focus language. */
.wms-faq__question:focus-visible {
  outline: 2px solid var(--brand-green);
  outline-offset: 2px;
  border-radius: var(--radius-8);
}

/* A plain CSS plus, no icon font, nothing fetched. Rotating the vertical
   stroke onto the horizontal one turns the plus into a minus on open —
   two lines, one already-drawn transition, no separate open-state asset. */
.wms-faq__marker {
  position: relative;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}

.wms-faq__marker::before,
.wms-faq__marker::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--ink);
  border-radius: 1px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.wms-faq__marker::before {
  width: 14px;
  height: 2px;
  transform: translate(-50%, -50%);
}

.wms-faq__marker::after {
  width: 2px;
  height: 14px;
  transform: translate(-50%, -50%);
}

.wms-faq__item[open] .wms-faq__marker::after {
  transform: translate(-50%, -50%) rotate(90deg);
  opacity: 0;
}

.wms-faq__answer {
  padding: 0 0 var(--space-32);
  font-family: var(--font-text);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  opacity: 0.85;
  max-width: 640px;
}

/* =========================================================================
   5. THE FINAL INVITATION + FOOTER
   ========================================================================= */

.wms-invite {
  background: var(--paper);
  color: var(--ink);
  padding: var(--space-96) 0;
  text-align: center;
}

.wms-invite__inner {
  max-width: 640px;
  margin-inline: auto;
  padding-inline: var(--space-40);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-24);
}

.wms-invite__heading {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 44px;
  line-height: 1.1;
}

.wms-invite__subtitle {
  font-family: var(--font-text);
  font-size: 17px;
  line-height: 1.6;
  opacity: 0.75;
}

.wms-footer {
  /* Ink is already a hex, not a semantic "dark" alias — using the token
     directly keeps this the same colour as body text everywhere else on
     the page, just inverted to a background here. */
  background: var(--ink);
  color: var(--paper);
  padding: var(--space-64) 0 var(--space-40);
}

.wms-footer__inner {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--space-40);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-40);
}

/* The wordmark component (text + green dot) is defined once in part one.
   The dot never inherits its parent's colour — that's the whole reason it
   survives on the dark ground without being redeclared — so setting the
   wordmark's own text colour to Paper here is the only override this
   footer needs to make. */
.wms-footer__wordmark {
  color: var(--paper);
}

.wms-footer__tagline {
  font-family: var(--font-text);
  font-size: 14px;
  color: var(--paper);
  opacity: 0.6;
  margin-top: var(--space-8);
}

.wms-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-24) var(--space-40);
}

.wms-footer__link {
  font-family: var(--font-text);
  font-weight: 500;
  font-size: 15px;
  color: var(--paper);
  opacity: 0.7;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.wms-footer__link:hover {
  opacity: 1;
}

/* Brand Green against Ink is the one contrast pairing already vetted in
   the identity spec (the wordmark dot uses exactly this pairing on this
   exact ground), so reusing it here for focus rather than falling back to
   white keeps one rule instead of a dark-ground exception to it. */
.wms-footer__link:focus-visible {
  opacity: 1;
  outline: 2px solid var(--brand-green);
  outline-offset: 2px;
  border-radius: var(--radius-8);
}

.wms-footer__bottom {
  margin-top: var(--space-40);
  padding-top: var(--space-24);
  border-top: 1px solid rgba(255, 255, 255, 0.12); /* Line has no dark-ground value defined; a low-opacity white hairline is the one-off equivalent, used only here */
  font-family: var(--font-text);
  font-size: 13px;
  color: var(--paper);
  opacity: 0.6;
}

/* =========================================================================
   6. RESPONSIVE — 390px
   Breakpoint set below tablet width; 390px, the narrowest common phone
   viewport the mockup is checked against, clears it comfortably.
   ========================================================================= */

@media (max-width: 599px) {

  /* Standing rule — 96px desktop / 56px mobile — applied to every section
     this file owns, in one place, rather than six separate repetitions. */
  .wms-steps,
  .wms-examples,
  .wms-pricing,
  .wms-faq,
  .wms-invite {
    padding: var(--space-56) 0;
  }

  .wms-footer {
    padding: var(--space-40) 0 var(--space-24);
  }

  .wms-steps__list,
  .wms-examples__grid,
  .wms-pricing__grid,
  .wms-faq__list,
  .wms-invite__inner,
  .wms-footer__inner {
    padding-inline: var(--space-20); /* the 20px mobile gutter */
  }

  /* STEPS: stack vertically. The connector is a desktop-only device —
     five vertically stacked items already read as a sequence without it,
     and computing a vertical equivalent per breakpoint isn't worth the
     rule for something the layout communicates on its own at this width. */
  .wms-steps__list {
    flex-direction: column;
    align-items: center;
    gap: var(--space-40);
  }

  .wms-steps__list::before {
    display: none;
  }

  .wms-steps__item {
    max-width: 320px;
  }

  /* EXAMPLES: five across becomes one full-width column. Three-across at
     an intermediate width was considered and dropped — with only five
     cards the mismatched last row (2-then-3, or 3-then-2) looks like a
     layout bug rather than a deliberate grid, so this collapses straight
     from 5 columns to 1 rather than stopping at 3 first. */
  .wms-examples__grid {
    grid-template-columns: 1fr;
  }

  /* PRICING: two equal cards stacked, monthly first — source order already
     matches the brief's stated order, so no explicit order property is
     needed to preserve it. */
  .wms-pricing__grid {
    grid-template-columns: 1fr;
  }

  .wms-pricing__card {
    padding: var(--space-32);
  }
}
/* ==================================================================
   TOKEN ALIASES — written because three parts were written apart.

   The stylesheet arrived in three pieces and each named the same
   things slightly differently: --brand-green for --color-brand-green,
   --font-display for the Sora stack, --elevation for --elevation-1.
   Fifteen names were used and never defined, and an undefined custom
   property drops its whole declaration without a word — the failure
   that once left a page with no section padding and three pricing
   cards overflowing their container.

   Aliased rather than rewritten: the definitions above stay the single
   source, and these point at them. Anything new uses the long names.
   ================================================================== */

:root {
  /* Colour */
  --ink: var(--color-ink);
  --paper: var(--color-paper);
  --mist: var(--color-mist);
  --line: var(--color-line);
  --brand-green: var(--color-brand-green);

  /* Type: the two faces, with the fallbacks the identity specified. */
  --font-display: 'Sora', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-sora: var(--font-display);
  --font-body: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-text: var(--font-body);
  --font-inter: var(--font-body);

  /* Shorthands used with the `font:` property, so they carry size and
     line-height together and must name a family last. */
  --text-body: var(--text-body-size) / var(--text-body-line) var(--font-body);
  --text-display-xl: 800 var(--text-display-xl-size) / var(--text-display-xl-line) var(--font-display);

  /* Elevation and radii */
  --elevation: var(--elevation-1);
  --shadow-elevated: var(--elevation-1);
  --radius-full: var(--radius-round);
}

/* ==================================================================
   LEGIBILITY CORRECTION — measured on the built page.

   Brand Green #0E9F6E carries white text at 3.39:1. That is fine for
   a rule, a frame or a focus ring, where the bar is 3:1, and short of
   the 4.5:1 that a button label needs. The page's own checker found
   five failures on it: every call to action on the page.

   The accent keeps its jobs at two values rather than one. Brand
   Green is unchanged wherever it is a shape — the wordmark dot, the
   thumbnail frame, the focus outline. Where it carries or sits under
   a word it deepens to Action Green, 4.83:1 in both directions and
   close enough that the page still reads as one colour. Deep Green
   stays the pressed state and passes comfortably.
   ================================================================== */

:root {
  --color-action-green: #0B8259;
}

.wms-btn--primary {
  background: var(--color-action-green);
  border-color: var(--color-action-green);
}

.wms-btn--secondary,
.wms-examples__view,
.wms-chat__thumbnail-label {
  color: var(--color-action-green);
}

/* ==================================================================
   CORRECTIONS AFTER THE FIRST BUILD

   Each of these is a fault found on the rendered page rather than in
   the stylesheet, which is why they are here and dated together.
   ================================================================== */

/* ------------------------------------------------------------------
   A button's label is the button's to colour.

   `a:hover` sets colour at specificity 0,1,1; `.wms-btn--primary` sets
   it at 0,1,0. So every call to action on the page turned dark green
   on hover — green text on a green fill — and picked up an underline.
   The button states win here, and they say what they mean.

   This is also why the contrast checker missed it: it measures the
   page at rest, and a hover state is not a state the page is ever in
   when nobody is touching it.
   ------------------------------------------------------------------ */
.wms-btn,
.wms-btn:hover,
.wms-btn:focus,
.wms-btn:active {
  text-decoration: none;
}

.wms-btn--primary,
.wms-btn--primary:hover,
.wms-btn--primary:focus,
.wms-btn--primary:active {
  color: #FFFFFF;
}

/* ------------------------------------------------------------------
   The secondary button: an outline that fills on hover.

   Ink label inside a green outline at rest, so it reads as the quieter
   of the two; green fill and white label on hover, so the two buttons
   agree about what green means.
   ------------------------------------------------------------------ */
.wms-btn--secondary {
  background-color: transparent;
  border: 2px solid var(--color-action-green);
  color: var(--color-ink);
}

.wms-btn--secondary:hover,
.wms-btn--secondary:focus,
.wms-btn--secondary:active {
  background-color: var(--color-action-green);
  border-color: var(--color-action-green);
  color: #FFFFFF;
}

/* The line under a call to action. Small, quiet, and never wider than
   the button it belongs to plus a little. */
.wms-btn__note {
  display: block;
  margin-top: var(--space-8);
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.4;
  color: var(--color-slate, #55635C);
}

/* ------------------------------------------------------------------
   The note sits close under its button, not adrift below it.

   The paragraph wrapping each call to action carries the section's own
   bottom margin, so the line landed a whole spacing step away and read
   as a separate thought rather than the button's own small print.
   ------------------------------------------------------------------ */
.wms-hero__cta,
.wms-invite .wms-btn__note {
  margin-bottom: 0;
}

.wms-btn__note {
  margin-top: var(--space-8);
}

/* ------------------------------------------------------------------
   In the invitation the note is a flex item, so a margin cannot close
   the gap.

   .wms-invite__inner is a flex column with a 24px gap, which spaces
   every child equally — heading, line, button, note. That is right for
   the first three and wrong for the fourth, which belongs to the button
   above it rather than being another thing in the stack. Pulled back up
   by the gap it was given, leaving the 8px the note sets itself.
   ------------------------------------------------------------------ */
.wms-invite__inner .wms-btn__note {
  margin-top: calc( var(--space-8) - 24px );
}

/* ------------------------------------------------------------------
   The header carries the wordmark, and the shrunk header carries the W.

   Both images are in the markup; one is shown at a time. A 799px
   logotype in a 64px bar is either illegible or the only thing in it.
   ------------------------------------------------------------------ */
.wms-header__wordmark {
  display: inline-flex;
  align-items: center;
}

.wms-header__logo {
  display: block;
  width: auto;
  height: 30px;
}

.wms-header__icon {
  display: none;
  width: auto;
  height: 32px;
}

.wms-header--scrolled .wms-header__logo {
  display: none;
}

.wms-header--scrolled .wms-header__icon {
  display: block;
}

/* ------------------------------------------------------------------
   The website in the conversation is a message, not a page.

   It arrived at the size of a website rather than the size of a photo
   in a chat, which made the panel a frame around a screenshot instead
   of a conversation with a picture in it. Roughly a third of what it
   was, which is what an image preview in a thread actually looks like.
   ------------------------------------------------------------------ */
.wms-chat__thumbnail {
  max-width: 168px;
}

.wms-chat__thumbnail-image {
  width: 100%;
  height: auto;
  max-height: 210px;
  object-fit: cover;
  object-position: top center;
}

.wms-chat__thumbnail-label {
  font-size: 12px;
}

/* ------------------------------------------------------------------
   The step number belongs to its icon.

   The badge is positioned against whatever contains it, and it used to
   be a sibling of the icon — so its container was the whole step and
   the numbers floated off at the far right of each column, attached to
   nothing. Nested into the icon, the same rule lands where the design
   drew it.
   ------------------------------------------------------------------ */
.wms-steps__icon {
  position: relative;
}

/* ------------------------------------------------------------------
   The example cards need their words held off the edge.
   ------------------------------------------------------------------ */
.wms-examples__label,
.wms-examples__view {
  padding-left: var(--space-16);
  padding-right: var(--space-16);
}

.wms-examples__view {
  padding-bottom: var(--space-16);
}

/* The note about what these are: small, under the grid, not a
   paragraph of throat-clearing above it. */
.wms-examples__body {
  margin-top: var(--space-24);
  font-size: 13px;
  color: var(--color-slate, #55635C);
  text-align: center;
}

/* A plain link hovers to the green that carries text, not the green that
   draws shapes: brand green on white is 3.39:1 and a link is a word. */
a:hover,
a:focus-visible {
  color: var(--color-action-green);
}


/* ==========================================================================
   CORRECTIONS — 27 August, from the Director's read of the built page.
   ========================================================================== */

/* --------------------------------------------------------------------------
   The ink is lighter, and it leans green.

   #0B1310 was 18.8:1 on white — technically excellent and, on a screen, hard
   in the way that pure black is hard: it reads as an unset default rather
   than a chosen colour. #1B2A24 keeps 15:1, which is far more than the 4.5:1
   anything here needs, and carries enough green that the page sits with the
   brand rather than beside it. The bias is meant to be felt and not named.

   Every dimmed variant on the page is this colour at an opacity, and the
   footer is this colour as a ground, so the whole page moves from one line.
   -------------------------------------------------------------------------- */
/* Superseded by the identity palette at the end of this file. The value
   that was here is now one line in one block, with every other colour. */

/* --------------------------------------------------------------------------
   The header has somewhere to go.

   Five in-page anchors between the logo and the button. They disappear below
   960px, where the button is the only thing in the bar worth the width — a
   hamburger holding five anchors on a page you scroll anyway is a control
   that costs more than it saves.
   -------------------------------------------------------------------------- */
.wms-header__nav {
  display: flex;
  align-items: center;
  gap: var(--space-32);
  margin-inline: auto;
}

.wms-header__nav-link {
  font-family: var(--font-text);
  font-weight: 500;
  font-size: 15px;
  line-height: 1.2;
  color: var(--color-ink);
  text-decoration: none;
  white-space: nowrap;
  padding-block: var(--space-8);
  /* The underline is drawn rather than switched on, so it grows from the
     middle instead of appearing all at once. */
  background-image: linear-gradient(var(--color-brand-green), var(--color-brand-green));
  background-repeat: no-repeat;
  background-position: 50% 100%;
  background-size: 0 2px;
  transition: background-size 160ms ease, color 160ms ease;
}

.wms-header__nav-link:hover,
.wms-header__nav-link:focus-visible {
  color: var(--color-action-green);
  background-size: 100% 2px;
}

@media (max-width: 960px) {
  .wms-header__nav {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   The three points are cards now.

   Icon, label and line were sitting on the same white as everything around
   them, so three separate claims read as one loose paragraph in columns. An
   outline and a radius is all it takes to make them three things.
   -------------------------------------------------------------------------- */
.wms-hero__point {
  border: 1px solid var(--color-line);
  border-radius: var(--radius-16);
  padding: var(--space-20);
  background: var(--color-paper);
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.wms-hero__point:hover {
  border-color: var(--color-brand-green);
  box-shadow: var(--elevation-1);
}

/* --------------------------------------------------------------------------
   The two standing facts, now above the three steps they describe.

   Centred and held to a reading column, because they are the preamble to a
   centred heading rather than a list in a left-aligned hero.

   Written as `ul.` rather than the bare class on purpose: the base sheet
   resets every classed list with `ul[class], ol[class] { margin: 0 }`, which
   is (0,1,1) and beats a plain class. The bottom margin was being dropped and
   the facts sat flush on top of the steps. Matching the reset's specificity
   and coming later in the file is what actually wins it.
   -------------------------------------------------------------------------- */
ul.wms-steps__facts {
  list-style: none;
  /* Not a negative top margin against the heading's 56px.
     That arithmetic was dropped on the floor by the parser and the facts
     landed flush against the steps — the second one reading as a caption on
     the row of numbers. The heading's own bottom margin is tightened below
     instead, which is the thing that was actually too big. */
  margin: 0 auto var(--space-56);
  padding: 0;
  max-width: 720px;
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  text-align: center;
}

.wms-steps__fact {
  font-family: var(--font-text);
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-ink);
  opacity: 0.72;
}

@media (max-width: 640px) {
  .wms-steps__facts {
    text-align: left;
  }
}

/* --------------------------------------------------------------------------
   A little air over the examples heading, as asked.
   -------------------------------------------------------------------------- */
.wms-examples__heading {
  margin-top: 5px;
}

/* text-align centres the words inside the box; it does not centre the box.
   Every paragraph on this page is capped at 65ch by a base rule, so this one
   was a 468px column of centred text pinned to the left gutter — which reads
   as left-aligned, because it is. */
.wms-examples__body {
  margin-inline: auto;
}

/* --------------------------------------------------------------------------
   ABOUT — what the thing actually is.

   Placed after the proof and before the price: by here a visitor has seen
   that it works and is deciding whether they want it, which is the only
   moment a description of the machine is worth reading.
   -------------------------------------------------------------------------- */
.wms-about {
  background: var(--color-paper);
  color: var(--color-ink);
  padding: var(--space-96) 0;
}

.wms-about__inner {
  max-width: 960px;
  margin-inline: auto;
}

.wms-about__heading {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 44px;
  line-height: 1.1;
  text-align: center;
  margin: 0 auto var(--space-24);
  /* Wide enough for this heading to break where it means to. At 640px it
     wrapped a two-letter word onto a line of its own. */
  max-width: 780px;
  text-wrap: balance;
}

.wms-about__lead {
  font-family: var(--font-text);
  font-size: 19px;
  line-height: 1.6;
  text-align: center;
  max-width: 680px;
  margin: 0 auto var(--space-56);
  opacity: 0.78;
}

.wms-about__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-32);
}

.wms-about__item {
  /* A rule at the top rather than a box around it: the three points in the
     hero are already cards, and a page of cards inside cards stops meaning
     anything. */
  border-top: 2px solid var(--color-brand-green);
  padding-top: var(--space-20);
}

.wms-about__item-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19px;
  line-height: 1.3;
  margin: 0 0 var(--space-12);
}

.wms-about__item-text {
  font-family: var(--font-text);
  font-size: 15px;
  line-height: 1.6;
  margin: 0;
  opacity: 0.78;
}

@media (max-width: 860px) {
  .wms-about__grid {
    grid-template-columns: 1fr;
    gap: var(--space-32);
  }

  .wms-about__heading {
    font-size: 32px;
  }

  .wms-about__lead {
    font-size: 17px;
  }
}

/* --------------------------------------------------------------------------
   QUESTIONS — each one is a door into the conversation.

   These were <details> panels and are now links, so everything the old rules
   drew for the open state, the plus-to-minus marker and the answer body has
   nothing left to style. What replaces it has to read as pressable at a
   glance, because a question that looks like a heading will not be tapped.
   -------------------------------------------------------------------------- */
.wms-faq__lead {
  font-family: var(--font-text);
  font-size: 16px;
  line-height: 1.6;
  text-align: center;
  margin: 0 auto var(--space-40);
  opacity: 0.72;
}

/* A heading followed by a line that belongs to it keeps a short gap; the
   56px in the base rules is the distance to a section's content, not to its
   own subtitle. */
.wms-steps__heading {
  margin-bottom: var(--space-16);
}

.wms-faq__heading {
  margin-bottom: var(--space-12);
}

.wms-faq__list {
  /* Was a single stacked column divided by hairlines, which is the shape of
     a list you read. These are buttons. */
  border-top: 0;
  padding-inline: 0;
  max-width: 900px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-12);
}

.wms-faq__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
  border: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
  border-radius: var(--radius-12);
  padding: var(--space-16) var(--space-20);
  background: var(--color-paper);
  text-decoration: none;
  /* Stated, not inherited. The generic `a` rule paints every link brand
     green, which is 3.4:1 on white — fine for the small green words it was
     written for and wrong for a card-sized target whose whole surface is the
     link. The child span already sets ink, so nothing looked broken; the
     element underneath it was still carrying an unreadable colour, waiting
     for the first person to put text directly in the row. */
  color: var(--color-ink);
  transition: border-color 160ms ease, background-color 160ms ease, transform 160ms ease;
}

.wms-faq__item:hover,
.wms-faq__item:focus-visible {
  border-color: var(--color-brand-green);
  background: var(--color-mist);
  color: var(--color-ink);
  transform: translateY(-1px);
}

.wms-faq__question {
  /* Reset the flex/padding the <summary> rule set: the row is the flex
     container now and this is one child inside it. */
  display: block;
  padding: 0;
  font-family: var(--font-text);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.4;
  color: var(--color-ink);
}

/* The marker was a CSS plus that turned into a minus. Nothing opens any
   more, so it is the chat glyph — the same one the hero uses — saying where
   the tap goes. */
.wms-faq__marker {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  /* Deep green, which the token block reserves for hover and pressed states.
     The exception is deliberate: this glyph sits on white at rest and on mist
     under the cursor, and brand green clears 4.5:1 on neither of them (3.4 and
     3.1). Action green clears white at 4.8 and misses mist at 4.47, which is
     the kind of near-pass that is worse than a plain fail because it looks
     settled. Deep green clears both grounds at 6:1 and needs no per-state
     exception underneath it. */
  color: var(--color-deep-green);
}

.wms-faq__marker::before,
.wms-faq__marker::after {
  content: none;
}

.wms-faq__marker svg {
  display: block;
  width: 100%;
  height: 100%;
}

@media (max-width: 720px) {
  .wms-faq__list {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   The footer wears the real mark.

   Its ground is var(--ink) already, which is the same value the page's text
   is set in — so the lighter ink above moves both at once and they stay the
   same colour, which is the point.
   -------------------------------------------------------------------------- */
.wms-footer__brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-12);
}

.wms-footer__logo {
  display: block;
  width: auto;
  height: 26px;
}

.wms-footer__tagline {
  margin-top: 0;
}

/* Five links now rather than two, so they wrap as a column on the wide
   layout instead of running along the bottom edge. */
.wms-footer__links {
  flex-direction: column;
  gap: var(--space-12);
}

/* The closing line spans the footer rather than sharing the row.
   It was written as the last thing under a full-width rule; adding the brand
   block made it a third flex item and it went to sit in a 221px column with
   a short rule floating over it. */
.wms-footer__bottom {
  flex-basis: 100%;
  width: 100%;
  /* Every paragraph is capped at 65ch by a base rule, which turned a
     full-width closing line into a 468px column that flex then parked beside
     the links. The cap is for reading columns; this is a footer rule. */
  max-width: none;
}

@media (max-width: 860px) {
  .wms-footer__links {
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--space-12) var(--space-24);
  }
}


/* ==========================================================================
   CORRECTIONS — 27 August, second pass.
   ========================================================================== */

/* --color-mint and --color-forest are defined with the rest of the palette
   at the end of this file. */

/* --------------------------------------------------------------------------
   Every button that opens WhatsApp says so before it is pressed.

   The glyph is sized against the label rather than fixed, so it stays in
   proportion when the button shrinks on a narrow screen.
   -------------------------------------------------------------------------- */
.wms-btn__glyph {
  display: inline-flex;
  width: 1.25em;
  height: 1.25em;
  flex-shrink: 0;
}

.wms-btn__glyph svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* --------------------------------------------------------------------------
   WHAT £29 INCLUDES

   Its own ground, directly after the three steps, where somebody stops asking
   how it works and starts asking what they would be getting.
   -------------------------------------------------------------------------- */
.wms-included {
  background: var(--color-forest);
  color: var(--color-paper);
  padding: var(--space-80) 0;
}

.wms-included__heading {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 34px;
  line-height: 1.15;
  margin: 0 0 var(--space-40);
  max-width: 22ch;
  text-wrap: balance;
}

.wms-included__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  /* Two columns that fill in reading order down each one, so the list scans
     as two short lists rather than one long one folded in half. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-16) var(--space-48);
}

.wms-included__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-12);
}

.wms-included__tick {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  /* Aligns the tick to the cap height of the first line rather than its box,
     which otherwise floats it above short items and below wrapped ones. */
  margin-top: 2px;
  color: var(--color-mint);
}

.wms-included__tick svg {
  display: block;
  width: 100%;
  height: 100%;
}

.wms-included__text {
  font-family: var(--font-text);
  font-size: 16px;
  line-height: 1.5;
}

.wms-included__excludes {
  margin: var(--space-40) 0 0;
  max-width: none;
  padding-top: var(--space-24);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  font-family: var(--font-text);
  font-size: 15px;
  line-height: 1.6;
  /* Dimmed, not hidden. At 0.72 on this ground it is still 8:1 — quieter than
     the list and never the kind of small grey print that reads as something
     we were hoping you would not read. */
  opacity: 0.72;
}

@media (max-width: 720px) {
  .wms-included {
    padding: var(--space-56) 0;
  }

  .wms-included__heading {
    font-size: 26px;
    max-width: none;
  }

  .wms-included__list {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   THE BAR ON A PHONE — a hamburger, the icon, and the button.

   Below 960px the five links do not fit beside a mark and a call to action,
   so they go behind the button and the mark drops to the icon. The icon is
   shown at every scroll position on a phone, not only once the bar has
   shrunk: the wordmark never fits in that row, scrolled or not.
   -------------------------------------------------------------------------- */
.wms-header__burger {
  display: none;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin-inline-start: calc( var(--space-8) * -1 );
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  color: var(--color-ink);
}

.wms-header__burger-bar {
  display: block;
  width: 20px;
  height: 2px;
  border-radius: 1px;
  background: currentColor;
  transition: transform 180ms ease, opacity 180ms ease;
}

/* Open, the three bars are a cross. The middle one goes; the outer two meet
   in the place it left, which is why they translate before they rotate. */
.wms-header__burger[aria-expanded='true'] .wms-header__burger-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.wms-header__burger[aria-expanded='true'] .wms-header__burger-bar:nth-child(2) {
  opacity: 0;
}

.wms-header__burger[aria-expanded='true'] .wms-header__burger-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.wms-header__burger:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
  border-radius: var(--radius-8);
}

@media (max-width: 960px) {
  .wms-header__burger {
    display: flex;
  }

  /* The mark is the icon on a phone, scrolled or not. */
  .wms-header__logo {
    display: none;
  }

  .wms-header__icon,
  .wms-header--scrolled .wms-header__icon {
    display: block;
    height: 28px;
  }

  /* The bar is burger, mark, button — with the mark taking the space between
     them rather than the nav, which is no longer in the row. */
  .wms-header__inner {
    gap: var(--space-12);
  }

  .wms-header__wordmark {
    margin-inline-end: auto;
  }

  /* The panel. Pinned under the bar rather than over it, so the button that
     opened it stays visible and stays pressable. */
  .wms-header__nav {
    display: none;
    position: fixed;
    top: 72px;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 0;
    padding: var(--space-8) var(--container-gutter) var(--space-24);
    background: var(--color-paper);
    border-bottom: 1px solid var(--color-line);
    box-shadow: var(--elevation-1);
    max-height: calc( 100dvh - 72px );
    overflow-y: auto;
  }

  .wms-menu-open .wms-header__nav {
    display: flex;
  }

  /* The scroll lock is the only reason the panel needs anything of the page:
     a menu you can scroll the page behind is a menu you close by accident. */
  .wms-menu-open body {
    overflow: hidden;
  }

  .wms-header__nav-link {
    padding-block: var(--space-16);
    border-bottom: 1px solid var(--color-line);
    font-size: 17px;
    background-image: none;
  }

  .wms-header__nav-link:last-child {
    border-bottom: 0;
  }

  /* The bar does not grow when the page scrolls under an open panel. */
  .wms-header {
    height: 72px;
  }

  .wms-header--scrolled {
    height: 72px;
    background-color: var(--color-paper);
    border-bottom-color: var(--color-line);
  }
}

@media (max-width: 420px) {
  /* The call to action keeps its place in the bar down to the narrowest
     phone; it is the only thing in the row that does anything. */
  .wms-header__cta .wms-btn {
    padding-inline: var(--space-12);
    font-size: 15px;
    min-height: 44px;
  }
}

/* --------------------------------------------------------------------------
   A PAGE OF WORDS — the privacy notice, and whatever follows it.

   Written against what the editor produces rather than against classes,
   because nobody writing a policy is going to add them.
   -------------------------------------------------------------------------- */
.wms-doc {
  background: var(--color-paper);
  color: var(--color-ink);
  padding: var(--space-80) 0 var(--space-96);
}

.wms-doc__inner {
  max-width: 760px;
}

.wms-doc__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 44px;
  line-height: 1.1;
  margin: 0 0 var(--space-12);
  text-wrap: balance;
}

.wms-doc__updated {
  font-family: var(--font-text);
  font-size: 14px;
  margin: 0 0 var(--space-48);
  opacity: 0.6;
}

.wms-doc__body {
  font-family: var(--font-text);
  font-size: 17px;
  line-height: 1.7;
}

.wms-doc__body h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 24px;
  line-height: 1.25;
  margin: var(--space-48) 0 var(--space-12);
}

.wms-doc__body h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19px;
  line-height: 1.3;
  margin: var(--space-32) 0 var(--space-8);
}

.wms-doc__body p,
.wms-doc__body li {
  max-width: 68ch;
}

.wms-doc__body p {
  margin: 0 0 var(--space-16);
}

.wms-doc__body ul,
.wms-doc__body ol {
  margin: 0 0 var(--space-16);
  padding-left: var(--space-24);
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.wms-doc__body ul[class],
.wms-doc__body ol[class] {
  /* The base sheet resets classed lists to no margin; an editor's list is
     unclassed, but a block editor sometimes adds one. */
  margin: 0 0 var(--space-16);
}

.wms-doc__body li {
  list-style: disc;
}

.wms-doc__body ol li {
  list-style: decimal;
}

.wms-doc__body a {
  color: var(--color-action-green);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.wms-doc__body strong {
  font-weight: 700;
}

@media (max-width: 640px) {
  .wms-doc {
    padding: var(--space-48) 0 var(--space-64);
  }

  .wms-doc__title {
    font-size: 32px;
  }
}


/* ==========================================================================
   THE IDENTITY PALETTE — 27 August.

   Five colours, from the brand sheet, and every colour on this site is one of
   them or derived from one. The logotype itself is drawn in #345959, so that
   is the anchor rather than a colour picked to sit beside it.

       #345959  slate      the mark's own colour; secondary text
       #04BF8A  bright     accents, and only on the dark ground
       #107357  mid        buttons, links, rules, focus — everything you act on
       #08401B  forest     text, headings, the dark bands
       #EFF2EB  mist       the secondary ground

   The one rule worth stating: **bright green never touches white.** #04BF8A is
   2.38:1 on paper, which fails even the 3:1 a border needs, and 2.44:1 on the
   mid green — so as a tick, a rule or a focus ring on a light page it is
   decoration that some people simply cannot see. On the forest ground it is
   5.02:1 and it sings. That is its whole job here.

   Everything you can act on is #107357: 5.81:1 as white-on-green for a button
   label, 5.81:1 as green-on-white for a link or a border. One colour clearing
   both bars replaces the old pair that cleared one each and had to be kept
   apart by hand.

   Redefining the tokens rather than the rules is deliberate. Every rule in
   this file already reads a token; the aliases (--ink, --brand-green, --line)
   point at these long names, so this block moves the whole page.
   ========================================================================== */

:root {
  --color-paper: #FFFFFF;
  --color-mist: #EFF2EB;
  /* Derived, not from the sheet: a palette of five has no hairline in it.
     Mist walked two steps toward slate, which keeps it in the same family. */
  --color-line: #DCE4DA;

  --color-ink: #08401B;
  --color-slate: #345959;
  --color-ink-contrast: #FFFFFF;

  /* The green you can act on. Both names kept because the file uses one for
     shapes and one for text; they were different values chosen to clear
     different bars, and a single colour that clears both is one fewer thing
     to get wrong. */
  --color-brand-green: #107357;
  --color-action-green: #107357;
  --color-deep-green: #08401B;

  /* Accents, on the dark ground only. */
  --color-accent: #04BF8A;
  --color-mint: #04BF8A;

  /* The dark bands: what £29 includes, and the footer. Same colour as the
     text, which is what makes them read as the page turned over rather than
     as a different page. */
  --color-forest: #08401B;

  --focus-ring-color: var(--color-action-green);

  /* The aliases follow the long names, so nothing below needs touching. */
  --ink: var(--color-ink);
  --paper: var(--color-paper);
  --mist: var(--color-mist);
  --line: var(--color-line);
  --brand-green: var(--color-brand-green);
}

/* The wordmark's dot and the marks on the dark bands take the bright green;
   everything on a light ground takes the mid. */
.wms-wordmark__i::after,
.wms-footer .wms-wordmark__i::after {
  background-color: var(--color-accent);
}

/* Secondary lines are a colour now, not the ink at an opacity.
   An opacity is a guess at a colour that happens to land near one; slate is
   the colour the identity actually specifies for this, and it holds 7.7:1 on
   paper and 6.8:1 on mist rather than whatever the arithmetic produced. */
.wms-hero__subtitle,
.wms-hero__point-text,
.wms-steps__fact,
.wms-steps__text,
.wms-about__lead,
.wms-about__item-text,
.wms-faq__lead,
.wms-faq__answer,
.wms-invite__subtitle,
.wms-pricing__trial,
.wms-pricing__feature,
.wms-examples__body,
.wms-doc__body,
.wms-doc__updated,
.wms-header__nav-link {
  color: var(--color-slate);
  opacity: 1;
}

/* Headings, prices and anything that is a control keep the forest green.
   The split is the hierarchy: what you read is slate, what you are meant to
   notice is a step darker and greener. */
.wms-header__nav-link:hover,
.wms-header__nav-link:focus-visible {
  color: var(--color-action-green);
}


/* ==========================================================================
   THE TWO FACES, SERVED FROM HERE.

   Sora and Inter, the latin cut of each, as variable fonts. Self-hosted
   rather than linked from Google: a page that fetches its typeface from
   another company's server hands that company a log line for every visitor,
   and the whole product is sold to people who have been told nothing about
   them leaves the conversation.

   The latin subset only, which is a quarter of the bytes. The customers are
   UK small businesses and no page here will ever draw Cyrillic.

   font-display: swap, deliberately. The alternative is a page that renders
   nothing until a font arrives, on phones on a bad signal, to sell a website
   to somebody who is between jobs.
   ========================================================================== */

@font-face {
  font-family: 'Sora';
  src: url('fonts/sora.woff2') format('woff2');
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('fonts/inter.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* Who is selling this, on the page where the card details go. Quiet, and
   never quieter than the terms it sits beside. */
.wms-claim__who {
  max-width: 640px;
  margin: var(--space-32) auto 0;
  font-family: var(--font-text);
  font-size: 14px;
  line-height: 1.6;
  text-align: center;
  color: var(--color-slate);
}

/* ------------------------------------------------------------------
   The number, under the last button only.

   Both WhatsApp and WhatsApp Business claim these links, and which one
   opens is a setting on the phone rather than anything the page can
   decide. Somebody running their shop on WhatsApp Business lands in
   their personal WhatsApp with no way across. This is the way across,
   and it is deliberately quiet: it is for the person who already tried
   the button, not competition for it.
   ------------------------------------------------------------------ */
.wms-wa-number {
  margin: var(--space-12) 0 0;
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-slate, #55635C);
}

.wms-wa-number__value {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  /* Selectable on a phone that has no clipboard permission, which is the
     whole fallback: the copy button is a convenience, never the only way
     to get the number. */
  user-select: all;
}

.wms-wa-number__copy {
  margin-left: var(--space-8);
  padding: 2px 8px;
  border: 1px solid currentColor;
  border-radius: 4px;
  background: none;
  font: inherit;
  font-size: 12px;
  color: inherit;
  cursor: pointer;
}

.wms-wa-number__copy:hover,
.wms-wa-number__copy:focus-visible {
  border-color: var(--color-action-green);
  color: var(--color-action-green);
}

/* ==========================================================================
   THE CLAIM PAGE

   ## WHY THIS SECTION HAD TO BE WRITTEN AT ALL

   The claim page was dressed by site.css, then by brand.css, and then by
   neither. `wms_wears_our_chrome()` was widened to cover it — correctly, so
   that the one screen where money changes hands wears the identity and has a
   menu — and widening it stopped site.css loading. brand.css went at the same
   time, with its Google fonts. Nothing replaced either, because this sheet was
   written for the homepage and the homepage does not have plan cards.

   So every rule this page's markup asks for went missing at once, and the
   result is not a page that looks slightly wrong — it is markup with no design
   on it. `.wms-wrap` had no width, so paragraphs ran to both edges of a phone.
   `.wms-plan__price` had no size, so the figure a customer is deciding about
   was set in body text. `.wms-btn--go` asked for `var(--wms-action)`, a token
   from a sheet that is no longer loaded, so the browser's own grey button
   showed through on the two controls that take the money. `.wms-badge` had no
   box, so "save 17%" ran on as part of a button's sentence.

   One cause, six symptoms. That is worth saying because each symptom reads
   like its own small fix, and six small fixes here would have left the page
   still undressed in every place nobody happened to look.

   Everything is scoped under `.wms-claim` and written in this sheet's own
   tokens. Scoped, because these class names came from a different design and
   must not reach any other page that still uses them; this sheet's tokens,
   because a colour named in one sheet and read in another is what caused this.
   ========================================================================== */

.wms-claim {
  padding-block: var(--space-56) var(--space-80);
}

/*
 * The gutter, which is the whole of the mobile fix.
 *
 * `.wms-wrap` is the claim page's container and this sheet had never heard of
 * it, so it was a plain block: full bleed, text touching both edges of the
 * phone, on the screen where somebody decides whether to trust us with a card.
 */
.wms-claim .wms-wrap {
  width: 100%;
  max-width: 900px;
  margin-inline: auto;
  padding-inline: var(--space-20);
}

.wms-claim .wms-landing__hero h1 {
  font-family: var(--font-display);
  font-size: clamp(28px, 6vw, var(--text-display-l-size));
  line-height: var(--text-display-l-line);
  font-weight: 800;
  color: var(--color-ink);
  text-wrap: balance;
}

.wms-claim .wms-landing__sub {
  margin-top: var(--space-16);
  max-width: 62ch;
  font-family: var(--font-body);
  font-size: var(--text-body-size);
  line-height: var(--text-body-line);
  color: var(--color-slate);
}

/* Two choices, side by side where there is room and stacked where there is
   not. `auto-fit` rather than a breakpoint: the cards decide by the space they
   are actually given, which is also correct inside the narrower wrap. */
.wms-claim .wms-plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-24);
  margin-top: var(--space-40);
  /*
   * Each card is its own height.
   *
   * Stretched, the two matched and the shorter one carried seven hundred
   * pixels of white between its last line and its button — because one offer
   * has ten things in it and the other has four. Equal height is tidiness;
   * a card that is mostly empty is a card that looks unfinished.
   */
  align-items: start;
}

.wms-claim .wms-plan {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  padding: var(--space-24);
  background: var(--color-paper);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-16);
}

.wms-claim .wms-plan--pick {
  border-color: var(--color-action-green);
  box-shadow: var(--elevation-1);
}

.wms-claim .wms-plan h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1.2;
  color: var(--color-ink);
}

/*
 * The figure, given a box of its own.
 *
 * Both cards carry `.wms-plan__price`, so the month and the one-off are the
 * same size and the same weight by construction rather than by two rules that
 * have to be kept in step. That was asked for directly, and it is also the
 * only way the two prices can be compared at a glance.
 */
.wms-claim .wms-plan__price {
  display: flex;
  align-items: baseline;
  gap: var(--space-8);
  margin: 0;
  padding: var(--space-12) var(--space-16);
  background: var(--color-mist);
  border-radius: var(--radius-12);
}

.wms-claim .wms-plan__price strong {
  font-family: var(--font-display);
  font-size: 40px;
  line-height: 1;
  letter-spacing: -0.02em;
  font-weight: 800;
  color: var(--color-action-green);
  font-variant-numeric: tabular-nums;
}

.wms-claim .wms-plan__price span {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--color-slate);
}

.wms-claim .wms-plan ul {
  margin: 0;
  padding-left: var(--space-20);
  display: grid;
  gap: var(--space-8);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
  color: var(--color-slate);
}

/* The button sits at the foot of the card whatever length the list above it
   ran to, so two cards of different heights still press in the same place. */
.wms-claim .wms-plan .wms-btn {
  width: 100%;
  margin-top: auto;
}

/*
 * Both buttons are green with white on them.
 *
 * They used to be an action colour and a quiet outline, which said "this one
 * is the ordinary choice and that one is the rare one". Both are the action
 * green now, and the difference between the two offers is carried by the
 * cards — one is ringed as the recommendation — rather than by making one
 * control look half-disabled next to the other.
 *
 * The first attempt gave the buyout the deep green. It is a green by name and
 * reads as black at button size, which is the answer to a different question
 * than the one asked: the point of the change is that both controls should
 * look like things you can press.
 *
 * Every state names its own colour. `a:hover` beats `.wms-btn--primary` on
 * specificity and has repainted a label on a matching fill twice already; a
 * button that only colours its resting state is one markup change from the
 * same fault.
 */
.wms-claim .wms-btn--go,
.wms-claim .wms-btn--go:hover,
.wms-claim .wms-btn--go:focus,
.wms-claim .wms-btn--go:active {
  color: var(--color-ink-contrast);
}

.wms-claim .wms-btn--go {
  background-color: var(--color-action-green);
  border: 1px solid var(--color-action-green);
}

.wms-claim .wms-btn--go:hover,
.wms-claim .wms-btn--go:focus-visible {
  background-color: var(--color-deep-green);
  border-color: var(--color-deep-green);
}

.wms-claim .wms-btn--ghost,
.wms-claim .wms-btn--ghost:hover,
.wms-claim .wms-btn--ghost:focus,
.wms-claim .wms-btn--ghost:active {
  color: var(--color-ink-contrast);
}

.wms-claim .wms-btn--ghost {
  background-color: var(--color-action-green);
  border: 1px solid var(--color-action-green);
}

.wms-claim .wms-btn--ghost:hover,
.wms-claim .wms-btn--ghost:focus-visible {
  background-color: var(--color-deep-green);
  border-color: var(--color-deep-green);
}

.wms-claim .wms-btn--go:disabled,
.wms-claim .wms-btn--ghost:disabled,
.wms-claim .wms-btn--year:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/*
 * The year, under the month with air between them.
 *
 * It is the same product bought for longer, so it stays inside the monthly
 * card and stays quieter than the button above it. The gap is deliberate and
 * was asked for: with the two controls touching, the second read as a second
 * line of the first.
 */
.wms-claim .wms-plan .wms-btn--year {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: var(--space-16);
  min-height: 48px;
  padding: var(--space-12) var(--space-24);
  background: transparent;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-12);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--color-ink);
  cursor: pointer;
  transition: border-color 150ms ease, background-color 150ms ease;
}

.wms-claim .wms-plan .wms-btn--year:hover,
.wms-claim .wms-plan .wms-btn--year:focus-visible {
  border-color: var(--color-action-green);
  background: var(--color-mist);
}

/*
 * The saving, as a sticker rather than as part of the sentence.
 *
 * It was printed inside the button's label, so the control read "or $100 for a
 * year save 17%" — one run-on line in which the only number that makes anybody
 * choose the year is the least visible thing. Taken out of the flow and pinned
 * to the right edge, the label stays centred and the saving is a separate
 * object on the button.
 */
.wms-claim .wms-badge {
  position: absolute;
  right: var(--space-12);
  top: 50%;
  transform: translateY(-50%);
  padding: 3px 9px;
  background: var(--color-action-green);
  color: var(--color-ink-contrast);
  border-radius: var(--radius-round);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* Room kept for the sticker only on a button that has one. The label is short
   enough that it would not reach the badge anyway; this is so it still cannot
   when a price runs long. */
.wms-claim .wms-btn--year:has(.wms-badge) {
  padding-right: 96px;
}

.wms-claim .wms-plan__note {
  margin: var(--space-8) 0 0;
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-slate);
}

/* What the page says back while it is fetching a checkout. It holds its line
   whether or not there is anything in it, so pressing a button does not shift
   the page under the thumb that pressed it. */
.wms-claim .wms-form__note {
  min-height: 1.5em;
  margin: var(--space-16) 0 0;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
  text-align: center;
  color: var(--color-slate);
}

/*
 * The plan the preview bar was pressed for.
 *
 * claim.js marks it and scrolls to it, and nothing showed the mark — so the
 * one thing that told somebody "this is the one you asked for" was invisible,
 * and the scroll looked like the page had simply jumped.
 */
.wms-claim .is-asked {
  outline: 2px solid var(--color-action-green);
  outline-offset: 3px;
}

@media (max-width: 600px) {
  .wms-claim {
    padding-block: var(--space-32) var(--space-56);
  }

  .wms-claim .wms-wrap {
    padding-inline: var(--space-16);
  }

  .wms-claim .wms-plan {
    padding: var(--space-20);
  }

  .wms-claim .wms-plan__price strong {
    font-size: 34px;
  }
}

/* ==========================================================================
   THE CONTACT PAGE

   It reuses the privacy notice's container — .wms-doc and .wms-doc__inner —
   because the two are read together: somebody arrives here from that notice
   asking how their information is erased, and a change of design between the
   two pages reads as a change of company. Only the three routes are new.

   It had a design once, in brand.css, under a set of class names nothing has
   loaded for weeks: a bar of its own with a wordmark in it, `wms-cards`,
   `wms-said`, `wms-with-i`. The page was words in a column, on the one route
   a person takes when something has gone wrong for them.
   ========================================================================== */

.wms-doc__lead {
  margin: 0 0 var(--space-48);
  max-width: 62ch;
  font-family: var(--font-text);
  font-size: 19px;
  line-height: 1.6;
  color: var(--color-slate);
}

/*
 * Three routes, and they are not a sequence — whichever one is yours is the
 * one you read, so they are equals rather than a numbered list.
 *
 * Stacked rather than columned. They sit in the privacy notice's own 760px
 * measure, which fits two across and leaves the third alone on a second row
 * with a hole beside it; and at that width a column is 250px for four lines
 * of prose, which is a newspaper, not a card.
 */
.wms-routes {
  display: grid;
  gap: var(--space-16);
}

.wms-route {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  padding: var(--space-24);
  background: var(--color-mist);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-16);
}

.wms-route__head {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.3;
  color: var(--color-ink);
}

.wms-route p {
  margin: 0;
  font-family: var(--font-text);
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-slate);
}

.wms-route__to {
  font-weight: 600;
  /* An address is a thing to copy, so it never breaks across a line and it
     never shrinks to the body colour. */
  word-break: break-word;
}

.wms-route a {
  color: var(--color-action-green);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.wms-route__post {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  margin: var(--space-32) 0 0;
  font-family: var(--font-text);
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-slate);
}

/*
 * The icon, sized once.
 *
 * `wms_icon()` writes `<svg class="wms-i">` and the only sheet that gave that
 * class a size was site.css, which our own pages do not load — so every icon
 * on this page rendered at whatever a browser makes of an SVG with no
 * dimensions, which is 300 by 150.
 */
.wms-i {
  width: 1.15em;
  height: 1.15em;
  flex: 0 0 auto;
  fill: none;
  stroke: var(--color-action-green);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.wms-route__post .wms-i {
  stroke: var(--color-slate);
}

/* ==========================================================================
   THE CLAIM PAGE, AFTER THE PAYMENT

   The return from Stripe used to be one heading and one paragraph. The
   Director's first test purchase landed on it and found nothing about the plan
   just bought, the designs a month it includes, or how a change reaches the
   live site. It now carries all three and the words Marvin answers to, in the
   claim page's own cards so paying and being welcomed look like one place.

   Scoped under .wms-claim like the rest of this page, in this sheet's tokens.
   `.wms-next` rather than `.wms-steps`, which the homepage already owns.
   ========================================================================== */

.wms-claim .wms-done__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  margin: 0 0 var(--space-16);
  padding: var(--space-4) var(--space-12);
  background: var(--color-mist);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-round);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--color-action-green);
}

.wms-claim .wms-done__badge::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: var(--radius-round);
  background: var(--color-action-green);
}

.wms-claim .wms-done__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-12);
  margin: var(--space-24) 0 0;
}

/* The second button is the one people will need tomorrow, so it is visible
   but quieter than opening the website they have just bought. Every state
   names its colour, for the same reason as the buttons above. */
.wms-claim .wms-btn--help,
.wms-claim .wms-btn--help:hover,
.wms-claim .wms-btn--help:focus,
.wms-claim .wms-btn--help:active {
  color: var(--color-action-green);
}

.wms-claim .wms-btn--help {
  background-color: var(--color-paper);
  border: 1.5px solid var(--color-action-green);
}

.wms-claim .wms-btn--help:hover,
.wms-claim .wms-btn--help:focus-visible {
  background-color: var(--color-mist);
}

.wms-claim .wms-done__left {
  margin: 0;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
  font-weight: 600;
  color: var(--color-ink);
}

/* A real sequence, so it is numbered: the address comes before the first
   change, and the change comes before pressing Update. */
.wms-claim .wms-next {
  display: grid;
  gap: var(--space-16);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: wms-next;
}

.wms-claim .wms-next li {
  position: relative;
  padding-left: 40px;
  counter-increment: wms-next;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  color: var(--color-slate);
}

.wms-claim .wms-next li::before {
  content: counter(wms-next);
  position: absolute;
  top: -1px;
  left: 0;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: var(--radius-round);
  background: var(--color-action-green);
  color: var(--color-ink-contrast);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
}

.wms-claim .wms-next strong {
  display: block;
  font-weight: 700;
  color: var(--color-ink);
}

.wms-claim .wms-tips {
  margin-top: var(--space-24);
  padding: var(--space-24);
  background: var(--color-paper);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-16);
}

.wms-claim .wms-tips h2 {
  margin: 0 0 var(--space-16);
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1.2;
  color: var(--color-ink);
}

.wms-claim .wms-tips__list {
  display: grid;
  gap: var(--space-12);
  margin: 0 0 var(--space-16);
  padding: 0;
  list-style: none;
}

.wms-claim .wms-tips__list li {
  display: grid;
  grid-template-columns: minmax(0, 14rem) 1fr;
  gap: var(--space-4) var(--space-16);
  align-items: baseline;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
  color: var(--color-slate);
}

/* What to type, set as something to type: a chip in the ink colour, never
   broken across a line, because half of "Human Support Request" is not a
   command. */
.wms-claim .wms-tips__say {
  justify-self: start;
  padding: 2px var(--space-8);
  background: var(--color-mist);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-8);
  font-weight: 600;
  color: var(--color-ink);
  white-space: nowrap;
}

@media (max-width: 600px) {
  .wms-claim .wms-tips {
    padding: var(--space-20);
  }

  .wms-claim .wms-tips__list li {
    grid-template-columns: 1fr;
  }

  .wms-claim .wms-done__actions .wms-btn {
    width: 100%;
  }
}

/* ==========================================================================
   THE LANGUAGES
   wmysite.com's eight languages along the foot of every page, and on
   webmysite.co.uk the one link to the global site. A full-width row under the
   links, quieter than they are: somebody looking for their language scans for
   its name, written in itself.
   ========================================================================== */

.wms-footer__langs {
  flex-basis: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-8) var(--space-20);
  padding-top: var(--space-20);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.wms-footer__lang {
  color: inherit;
  opacity: 0.78;
  font-size: 14px;
  text-decoration: none;
}

.wms-footer__lang:hover,
.wms-footer__lang[aria-current="true"] {
  opacity: 1;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.wms-footer__lang:focus-visible {
  opacity: 1;
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

.wms-footer__lang--other {
  margin-inline-start: auto;
}

@media (max-width: 600px) {
  .wms-footer__lang--other {
    flex-basis: 100%;
    margin-inline-start: 0;
  }
}