/* ============================================================================
   Learn AI with Hugo — newsletter home + lead-magnet funnel
   Shared design system. White canvas · navy ink · Sky-blue accents ·
   ABC Diatype throughout. Watercolor coastal collage + Mac desktop motifs.
   (Alternate Oat + Monday Blue palette specced in "_source/Colour/LOCKED — Oat + Monday Blue.md".)
   ============================================================================ */

/* ---- Fonts ---------------------------------------------------------------- */
@font-face {
  font-family: "ABC Diatype";
  src: url("/assets/fonts/ABCDiatype-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "ABC Diatype";
  src: url("/assets/fonts/ABCDiatype-Medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "ABC Diatype";
  src: url("/assets/fonts/ABCDiatype-Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "ABC Diatype Mono";
  src: url("/assets/fonts/ABCDiatypeMono-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}

/* ---- Tokens --------------------------------------------------------------- */
:root {
  --bg:          #ffffff;   /* oat milk canvas */
  --ink:         #10203a;   /* headings — deep navy */
  --ink-2:       #24344f;   /* strong body / icons */
  --muted:       #4f5b73;   /* subheads — blue-grey, AA on oat canvas */
  --muted-2:     #7a8296;   /* faint meta / placeholders */

  --blue:        #75b4db;   /* brand accent — Monday Blue */
  --blue-deep:   #75b4db;   /* hover / pressed / links */
  --blue-ink:    #17408f;   /* deep blue for text-on-light where legibility matters */
  --blue-soft:   #a9c2f2;   /* soft dusty-blue fill — for use ON dark or white surfaces */
  --blue-tint:   rgba(117, 180, 219, 0.10);   /* faint accent wash on white */
  --blue-ring:   rgba(117, 180, 219, 0.30);   /* focus ring — reads on the oat canvas */

  --line:        rgba(29, 45, 80, 0.12);   /* hairline divider on oat */
  --line-2:      rgba(29, 45, 80, 0.18);   /* stronger edge — inputs, chips */
  --card:        #fffdf9;   /* near-white card, lifts off the oat canvas */
  --surface:     #fffdf7;   /* near-white input/surface */

  --font-display: "ABC Diatype", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;   /* headings only */
  --font-sans: "ABC Diatype", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "ABC Diatype Mono", ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

  --maxw: 600px;
  --radius:    14px;
  --radius-sm: 10px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(16, 32, 58, 0.05), 0 1px 3px rgba(16, 32, 58, 0.07);
  --shadow-md: 0 14px 34px -14px rgba(16, 32, 58, 0.28);
  --shadow-btn: 0 6px 18px -6px rgba(117, 180, 219, 0.5);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---- Reset ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
a { color: inherit; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; }

/* Subtle, barely-there background texture (AI/grid aesthetic, very low contrast) */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(125% 85% at 50% -20%, rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0) 55%);
}

/* ---- Layout --------------------------------------------------------------- */
.page {
  flex: 1 0 auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 56px 24px 40px;
}
.hero {
  width: 100%;
  max-width: var(--maxw);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ---- Eyebrow badge -------------------------------------------------------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 26px;
}
.eyebrow__dot {
  width: 7px; height: 7px;
  border-radius: 1px;          /* small brand square, echoes the headline period */
  background: var(--blue);
}

/* ---- Headline + accent ---------------------------------------------------- */
.headline {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.3rem, 7vw, 3.6rem);
  line-height: 1.04;
  letter-spacing: -0.025em;
  color: var(--ink);
}
/* Underlined accent word(s) */
.accent {
  position: relative;
  white-space: nowrap;
  display: inline-block;
}
.accent__line {
  display: block;          /* blue marker under the accent phrase */
  position: absolute;
  left: -0.03em;
  right: -0.03em;
  bottom: 0.01em;          /* chunky marker across the whole phrase, sat low */
  height: 0.15em;
  background: var(--blue);
  border-radius: 3px;
  z-index: -1;             /* behind the text — highlighter / marker look */
  transform: scaleX(1);
  transform-origin: left center;
}
/* Small black square full stop at the end of the headline (Ally-style) */
.headline .dot {
  display: inline-block;
  width: 0.16em;
  height: 0.16em;
  margin-left: 0.015em;
  background: var(--ink);
  border-radius: 1px;
  vertical-align: baseline;
  transform-origin: center bottom;
}

/* ---- Subhead -------------------------------------------------------------- */
.subhead {
  margin: 22px auto 0;
  max-width: 44ch;
  color: var(--muted);
  font-size: clamp(1rem, 2.4vw, 1.12rem);
  line-height: 1.62;
}

/* ---- Access fallback note (sits under the "Open the guide" button) --------- */
.fineprint {
  margin: 16px auto 0;
  max-width: 38ch;
  color: var(--muted);
  font-size: clamp(0.82rem, 2vw, 0.9rem);
  line-height: 1.55;
}
.fineprint a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ---- Form ----------------------------------------------------------------- */
.form {
  display: flex;
  gap: 10px;
  width: 100%;
  max-width: 460px;
  margin: 34px auto 0;
}
.form__input {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--font-sans);
  font-size: 15px;
  color: var(--ink);
  background: var(--surface);
  border: 1.5px solid var(--line-2);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  outline: none;
  transition: border-color 0.18s var(--ease), box-shadow 0.18s var(--ease), background 0.18s var(--ease);
}
.form__input::placeholder { color: var(--muted-2); }
.form__input:focus {
  border-color: var(--blue-deep);
  background: #fffdf7;
  box-shadow: 0 0 0 4px var(--blue-ring);
}
.form__input:disabled { opacity: 0.6; }

.btn {
  flex: 0 0 auto;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  color: #fff;
  background: var(--ink);
  border: none;
  border-radius: var(--radius-sm);
  padding: 14px 22px;
  white-space: nowrap;
  transition: transform 0.16s var(--ease), background 0.16s var(--ease), box-shadow 0.16s var(--ease);
}
.btn:hover { background: #1c3350; transform: translateY(-1px); box-shadow: 0 10px 22px -10px rgba(16, 32, 58, 0.55); }
.btn:active { transform: translateY(0); box-shadow: none; }
.btn:disabled { cursor: default; opacity: 0.75; transform: none; box-shadow: none; }
.btn--block { display: block; width: 100%; text-align: center; }

/* ---- Microcopy ------------------------------------------------------------ */
.microcopy {
  margin: 16px auto 0;
  max-width: 42ch;
  color: var(--muted-2);
  font-size: 12.5px;
  line-height: 1.5;
}

/* ---- Form status (error) -------------------------------------------------- */
.form-status {
  margin: 12px auto 0;
  min-height: 1em;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.02em;
  color: #c0392b;
}

/* The corrected address inside "did you mean …?" — a real button, so a typo
   costs one tap instead of a re-type. Reads as a suggestion, not an error. */
.form-status__fix {
  font-family: inherit;
  font-size: inherit;
  letter-spacing: inherit;
  color: var(--blue-ink);
  background: var(--blue-tint);
  border: 1px solid var(--blue);
  border-radius: var(--radius-sm);
  padding: 2px 7px;
  margin: 0 1px;
  cursor: pointer;
  transition: background 0.16s var(--ease), color 0.16s var(--ease);
}
/* Hover darkens the fill and keeps the ink dark — white on the mid blue is
   only 2.3:1 at this size, well under the readable minimum. */
.form-status__fix:hover { background: var(--blue-ring); color: var(--blue-ink); }
.form-status__fix:focus-visible { outline: 2px solid var(--blue-ink); outline-offset: 2px; }

/* ---- Locked guide preview (branded — not Remy's) -------------------------- */
.preview {
  position: relative;
  width: 100%;
  max-width: 320px;
  margin: 52px auto 0;
  aspect-ratio: 4 / 4.4;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow-md);
  overflow: hidden;
  transform: rotate(-1deg);   /* tilted-collage language, matches the compare cards */
}
.preview__doc {
  position: absolute;
  inset: 0;
  padding: 26px 24px;
  display: flex;
  flex-direction: column;
  gap: 11px;
  filter: blur(3.5px);
  opacity: 0.6;
  -webkit-mask-image: linear-gradient(180deg, #000 74%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 74%, transparent 100%);
}
.preview__mark {
  width: 26px; height: 26px;
  border-radius: 5px;
  background: var(--blue);
  margin-bottom: 6px;
}
.preview__doc .title { height: 16px; border-radius: 4px; background: #d6d9df; }
.preview__doc .title.w1 { width: 82%; }
.preview__doc .title.w2 { width: 58%; }
.preview__doc .line { height: 9px; border-radius: 3px; background: #eceef1; }
.preview__doc .line.w-100 { width: 100%; }
.preview__doc .line.w-90 { width: 90%; }
.preview__doc .line.w-85 { width: 85%; }
.preview__doc .line.w-70 { width: 70%; }
.preview__lock {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.preview__lock-badge {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  background: var(--ink);
  border-radius: 9px;
  box-shadow: 0 10px 22px -10px rgba(10, 12, 17, 0.45);
}
.preview__lock-badge svg { width: 20px; height: 20px; color: var(--blue-soft); }
.preview__lock-text {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.82);
  padding: 5px 11px;
  border-radius: 6px;
}

/* ---- Access page bits ----------------------------------------------------- */
.cta-wrap { margin: 34px auto 0; width: 100%; max-width: 320px; }
.btn--lg { padding: 16px 24px; font-size: 13px; }

.callout {
  width: 100%;
  max-width: 460px;
  margin: 44px auto 0;
  text-align: left;
  background: #fffdf9;
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  padding: 20px 22px;
  display: flex;
  gap: 14px;
}
.callout__icon {
  flex: 0 0 auto;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 9px;
  background: var(--blue-tint);
  color: var(--blue-deep);
}
.callout__icon svg { width: 18px; height: 18px; }
.callout__label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 2px 0 6px;
}
.callout__text { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.6; }

/* ---- Footer --------------------------------------------------------------- */
.footer {
  flex-shrink: 0;
  width: 100%;
  padding: 40px 24px 46px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  border-top: 1px solid var(--line);
}
.wordmark {
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--blue-deep);
  text-decoration: none;
}
.socials { display: flex; gap: 12px; }
.socials a {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  color: var(--ink-2);
  transition: color 0.18s var(--ease), border-color 0.18s var(--ease), transform 0.18s var(--ease);
}
.socials a:hover { color: var(--blue-deep); border-color: var(--blue); transform: translateY(-2px); }
.socials svg { width: 18px; height: 18px; }
.copyright {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: var(--muted-2);
  text-align: center;
}
.footer__issues {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px solid var(--line-2);
  padding-bottom: 2px;
  transition: color 0.18s var(--ease), border-color 0.18s var(--ease);
}
.footer__issues:hover { color: var(--blue-deep); border-color: var(--blue-deep); }

/* ---- Motion staging ------------------------------------------------------- */
/* Only hide pre-animation when JS is active; never trap content invisible. */
.js [data-animate] { opacity: 0; will-change: transform, opacity; }
.js [data-accent-line] { transform: scaleX(0); }
.js [data-dot] { transform: scale(0); }

@media (prefers-reduced-motion: reduce) {
  .js [data-animate] { opacity: 1 !important; transform: none !important; }
  .js [data-accent-line] { transform: scaleX(1) !important; }
  .js [data-dot] { transform: scale(1) !important; }
  .btn, .form__input, .socials a { transition: none !important; }
}

/* ---- Responsive ----------------------------------------------------------- */
@media (max-width: 520px) {
  .page { padding: 40px 20px 32px; }
  .form { flex-direction: column; max-width: 100%; }
  .btn { width: 100%; text-align: center; }
  .eyebrow { margin-bottom: 20px; }
  .preview { margin-top: 44px; max-width: 300px; transform: none; }
  /* Phones only: shrink the headline. Headlines are per-guide now, so they may
     wrap — only the .accent phrase stays unbreakable. */
  .headline { font-size: clamp(1.6rem, 8.4vw, 2.4rem); }
}

/* ============================================================================
   HOMEPAGE — newsletter landing ("cobalt ink on paper" + Mac desktop nostalgia)
   Everything below is additive: guide pages don't use these classes.
   ============================================================================ */

/* ---- Pixel Mac cursor ------------------------------------------------------ */
/* Hugo's pixel arrow rebuilt on its true 12x19 pixel grid — every block is a
   whole pixel, with a 2x render for Retina so nothing gets smoothed or scaled.
   Black/white arrow on the canvas; cobalt-filled variant on clickables. */
body[data-page="home"],
body[data-page="guide"],
body[data-page="access"] {
  cursor: url("/assets/img/pixel-cursor.png?grid") 0 0, auto;
  cursor: -webkit-image-set(url("/assets/img/pixel-cursor.png?grid") 1x, url("/assets/img/pixel-cursor-2x.png?grid") 2x) 0 0, auto;
  cursor: image-set(url("/assets/img/pixel-cursor.png?grid") 1x, url("/assets/img/pixel-cursor-2x.png?grid") 2x) 0 0, auto;
}
body[data-page="home"] a,
body[data-page="home"] button,
body[data-page="home"] summary,
body[data-page="home"] [role="tab"],
body[data-page="guide"] a,
body[data-page="guide"] button,
body[data-page="access"] a,
body[data-page="access"] button {
  cursor: url("/assets/img/pixel-cursor-blue.png?grid") 0 0, pointer;
  cursor: -webkit-image-set(url("/assets/img/pixel-cursor-blue.png?grid") 1x, url("/assets/img/pixel-cursor-blue-2x.png?grid") 2x) 0 0, pointer;
  cursor: image-set(url("/assets/img/pixel-cursor-blue.png?grid") 1x, url("/assets/img/pixel-cursor-blue-2x.png?grid") 2x) 0 0, pointer;
}
body[data-page="home"] input,
body[data-page="home"] textarea,
body[data-page="guide"] input,
body[data-page="access"] input { cursor: text; }

/* ---- Riso grain overlay ----------------------------------------------------- */
.grain {
  display: none;
}

/* ---- Top bar ----------------------------------------------------------------- */
.topbar {
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding: 26px 28px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}
.topbar__nav { display: flex; align-items: center; gap: 22px; }
.topbar__link {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-2);
  transition: color 0.18s var(--ease);
}
.topbar__link:hover { color: var(--blue); }
.topbar__link--pill {
  border: 1.5px solid var(--blue);
  color: var(--blue-ink);
  border-radius: var(--radius-pill);
  padding: 8px 16px;
  white-space: nowrap;
  transition: background 0.18s var(--ease), color 0.18s var(--ease);
}
.topbar__link--pill:hover { background: var(--blue); color: #fffdf9; }

/* Solid blue pill: the primary action in the chrome. This is the first and only
   blue-filled element of its kind on the site, which is deliberate, so keep it
   to one per bar. The outline --pill above stays the quiet secondary. Hover
   deepens toward --blue-ink via color-mix rather than a new hex, so the pill
   never leaves the palette. */
.topbar__link--solid {
  border: 1.5px solid var(--blue);
  background: var(--blue);
  color: #fffdf9;
  border-radius: var(--radius-pill);
  padding: 8px 16px;
  white-space: nowrap;   /* a pill label must never stack into a blob */
  transition: background 0.18s var(--ease), border-color 0.18s var(--ease),
              transform 0.16s var(--ease), box-shadow 0.16s var(--ease);
}
.topbar__link--solid:hover {
  background: color-mix(in srgb, var(--blue) 84%, var(--blue-ink));
  border-color: color-mix(in srgb, var(--blue) 84%, var(--blue-ink));
  color: #fffdf9;
  transform: translateY(-1px);
  box-shadow: var(--shadow-btn);
}
.topbar__link--solid:active { transform: translateY(0); box-shadow: none; }

/* ---- Home layout rhythm ------------------------------------------------------ */
.page--home {
  justify-content: flex-start;
  padding: 0 0 110px;
  overflow-x: clip;   /* edge-cropped decorations (palm) must not cause sideways scroll */
}
.section {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  padding: 110px 24px 0;
}
.section__head { text-align: center; }
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.section-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.7rem, 4.6vw, 2.5rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.section-title em { font-style: italic; color: var(--blue); }
.dot--sm {
  display: inline-block;
  width: 0.15em; height: 0.15em;
  margin-left: 0.06em;
  background: var(--blue);
  border-radius: 1px;
}
.section__sub {
  margin: 14px auto 0;
  max-width: 44ch;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.6;
}
.microcopy--center { text-align: center; }

/* ---- Hero (home) -------------------------------------------------------------- */
.hero--home {
  position: relative;
  margin: 0 auto;
  padding: 92px 24px 0;
}
/* the tagline runs longer than a punchy two-worder — smaller size, even lines */
.hero--home .headline { font-size: clamp(1.9rem, 5.4vw, 2.7rem); text-wrap: balance; }

/* faded watercolor beach washed behind the very top of the page */
.page-beach {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: min(78vh, 660px);
  object-fit: cover;
  object-position: center top;
  mix-blend-mode: multiply;
  opacity: 0.16;
  -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
  pointer-events: none;
  user-select: none;
}
/* Phones: guide + access pages stay pure white — no beach wash. */
@media (max-width: 520px) {
  body[data-page="guide"] .page-beach,
  body[data-page="access"] .page-beach { display: none; }
}

/* ---- Comparison ("Most AI newsletters are slop") ------------------------------- */
.compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  margin-top: 44px;
  align-items: start;
}
.compare__card {
  background: var(--card);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  padding: 26px 26px 30px;
  box-shadow: var(--shadow-sm);
  transform: rotate(0.5deg);
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.compare__card:hover {
  transform: rotate(0.5deg) translateY(-5px);
  box-shadow: var(--shadow-md);
}
.compare__card--us {
  border: 2px solid var(--blue);
  box-shadow: var(--shadow-md);
  transform: rotate(-0.7deg);
}
.compare__card--us:hover {
  transform: rotate(-0.7deg) translateY(-5px);
  box-shadow: 0 20px 44px -14px rgba(16, 32, 58, 0.34);
}
.compare__label {
  display: inline-block;
  margin: 0 0 16px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-pill);
  padding: 6px 13px;
}
.compare__label--us { color: var(--blue-ink); border-color: var(--blue); background: var(--blue-tint); }
.compare__list {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-direction: column;
  gap: 13px;
}
.compare__list li {
  position: relative;
  padding-left: 28px;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.5;
}
.compare__list li::before {
  content: "✕";
  position: absolute;
  left: 0; top: 0.05em;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: #b3543f;
}
.compare__list--us li { color: var(--ink-2); }
.compare__list--us li::before { content: "✓"; color: var(--blue); }

/* ---- Typewriter letter ---------------------------------------------------------- */
/* Hugo's generated picture, letter and all — static, revealed with the standard
   smooth data-reveal rise. */
.letter {
  width: min(100%, 440px);
  margin: 40px auto 0;
}
.letter__machine {
  width: 100%;
  height: auto;
  mix-blend-mode: multiply;   /* white background melts into the canvas */
  user-select: none;
}

/* ---- Access-page unlocked preview (same card as the landing, lock open) ------- */
.preview--open .preview__doc {
  filter: none;
  opacity: 0.85;
}

/* ---- Welcome page (post-subscribe) — numbered inbox steps --------------------- */
.steps {
  margin: 34px auto 0;
  max-width: 480px;
  text-align: left;
  background: #fff;
  border: 1px solid rgba(16, 32, 58, 0.10);
  border-radius: var(--radius);
  padding: 6px 22px;
  box-shadow: 0 14px 34px rgba(16, 32, 58, 0.07);
}
.step {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 16px 0;
}
.step + .step { border-top: 1px solid rgba(16, 32, 58, 0.08); }
.step__num {
  flex: none;
  width: 26px;
  height: 26px;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--blue-tint);
  color: var(--blue-ink);
  font-family: var(--font-mono);
  font-size: 13px;
  display: grid;
  place-items: center;
}
.step__body {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--muted);
}
.step__body strong { color: var(--ink); font-weight: 600; }
@media (max-width: 520px) {
  .steps { padding: 2px 16px; }
}

/* ---- Previous issues — a Mac folder per issue --------------------------------------- */
.archive {
  max-width: 720px;
  margin: 40px auto 0;
  text-align: center;
}
.archive__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  align-items: start;
}
.archive__folderitem {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
}
.archive__folder {
  width: min(100%, 150px);
  height: auto;
  mix-blend-mode: multiply;   /* white background melts into the canvas */
  user-select: none;
  transition: transform 0.25s var(--ease);
}
.archive__folderitem:hover .archive__folder { transform: translateY(-5px); }
.archive__date {
  margin-top: 2px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.archive__name {
  margin-top: 5px;
  max-width: 20ch;
  font-weight: 500;
  font-size: 0.94rem;
  line-height: 1.35;
  color: var(--ink);
}
.archive__all { display: inline-block; margin-top: 56px; }

/* ---- FAQ ---------------------------------------------------------------------------- */
.faq {
  max-width: 640px;
  margin: 40px auto 0;
  border-top: 1px solid var(--line-2);
}
.faq__item { border-bottom: 1px solid var(--line-2); }
.faq__q {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 20px 4px;
  font-weight: 500;
  font-size: 1.02rem;
  color: var(--ink);
}
.faq__q::-webkit-details-marker { display: none; }
.faq__mark {
  flex: 0 0 auto;
  position: relative;
  width: 16px; height: 16px;
}
.faq__mark::before, .faq__mark::after {
  content: "";
  position: absolute;
  background: var(--blue);
  border-radius: 1px;
  transition: transform 0.25s var(--ease);
}
.faq__mark::before { left: 0; right: 0; top: 7px; height: 2.5px; }
.faq__mark::after  { top: 0; bottom: 0; left: 7px; width: 2.5px; }
.faq__item[open] .faq__mark::after { transform: scaleY(0); }
.faq__a {
  margin: 0;
  padding: 0 36px 22px 4px;
  color: var(--muted);
  font-size: 0.96rem;
  line-height: 1.65;
}

/* ---- Contact — the pinned handwritten note ---------------------------------------------- */
.contact {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  margin-top: 10px;
}
.contact__notewrap {
  position: relative;
  width: min(100%, 380px);
  transform: rotate(1.2deg);
  filter: drop-shadow(0 18px 28px rgba(16, 32, 58, 0.16));
}
.contact__noteimg { width: 100%; height: auto; user-select: none; }
/* invisible hit-target over the handwritten email line in the photo */
.contact__mail {
  position: absolute;
  left: 12.6%; width: 77.3%;
  top: 86.6%; height: 8.1%;
  border-radius: 8px;
  transition: background 0.18s var(--ease);
}
.contact__mail:hover { background: rgba(117, 180, 219, 0.18); }
.contact__mail:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
  background: rgba(117, 180, 219, 0.18);
}

/* ---- Final signup ------------------------------------------------------------------------ */
.section--again { position: relative; text-align: center; }
.again .form { max-width: 440px; }

/* navy ink palms leaning in from the right margin */
.again__palm {
  position: absolute;
  right: -48px;
  bottom: -80px;
  width: 250px;
  height: auto;
  transform: rotate(4deg);
  mix-blend-mode: multiply;
  opacity: 0.92;
  pointer-events: none;
  user-select: none;
}

/* ---- Newsletter form success state -------------------------------------------------------- */
.form-success {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 34px auto 0;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--blue-ink);
  border: 1.5px dashed var(--blue);
  border-radius: var(--radius-pill);
  padding: 14px 22px;
  background: var(--blue-tint);
}

/* ---- Scroll reveal ------------------------------------------------------------------------- */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s ease, transform 0.7s var(--ease);
}
.js [data-reveal].is-visible { opacity: 1; transform: none; }
/* keep the collage tilts once revealed */
.js .compare__card[data-reveal].is-visible { transform: rotate(0.5deg); }

/* ---- Motion safety --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
  .archive__arrow { transition: none !important; }
}

/* ---- Responsive (home) ------------------------------------------------------------------------ */
@media (max-width: 760px) {
  .section { padding-top: 84px; }
  .page-beach { height: 46vh; opacity: 0.13; }
  .again__palm { display: none; }
  .compare { grid-template-columns: 1fr; }
  .compare__card, .compare__card--us { transform: none; }
  .js .compare__card[data-reveal].is-visible { transform: none; }
  .archive__grid { gap: 14px; }
  .archive__name { font-size: 0.82rem; max-width: none; }
  .topbar { padding: 20px 20px 0; }
  /* The wordmark alone eats ~230px of the ~350px a 390px screen offers, so a
     wordmark plus two real actions cannot share one row. The nav drops to its
     own row instead of shrinking the pills or letting their labels stack, which
     keeps both pills exactly as they read on desktop. */
  .topbar { flex-wrap: wrap; }
  .topbar__nav { width: 100%; justify-content: flex-start; padding-top: 14px; }
  .topbar__nav { gap: 14px; }
  /* Plain links drop out on mobile; both pill shapes stay, because they are the
     actions. Covers the homepage (Contact + Work with me) and the work-with-me
     bar (section links out, Let's talk stays). */
  .topbar__link:not(.topbar__link--pill):not(.topbar__link--solid) { display: none; }
}

/* ============================================================================
   WORK WITH ME: /work-with-me (+ /work-with-me/b preview)
   The one long-form sales page. It deliberately breaks the site's 600px letter
   column: a 1000px content width, left-aligned headers with mono eyebrow
   labels, full-bleed section bands, a drawn timeline, and decode/scramble
   titles driven by work-with-me/wwm.js. Same palette, same ABC Diatype.
   Everything here is prefixed .wwm- and additive. /work-with-me/booked uses
   none of it.

   SURFACES (Hugo's 30 Jul review): this page is white and the grey-blue wash
   only, no warm oat or cream. So the .wwm- rules below use #ffffff and
   --blue-tint directly rather than --card/--surface. These classes appear on no
   other page, so the rest of the site keeps its warm paper untouched. Bands
   alternate white / wash down the page; --tint and --paper now render the same,
   which is what makes the rhythm read as deliberate.
   ============================================================================ */

/* ---- Page shell + full bleed bands ----------------------------------------- */
.page--wwm {
  justify-content: flex-start;
  align-items: stretch;      /* sections run edge to edge, not centred boxes */
  padding: 0;
  overflow-x: clip;
}
/* ---- Sticky section bar (this page only) -------------------------------------
   The homepage topbar stays static and link-free; only /work-with-me gets a
   section nav, because only this page is long enough to need one. The <header>
   goes full width so its hairline spans the viewport, and .topbar__inner carries
   the 1080px measure the static topbar normally holds itself. Sticky works here
   because the header is a sibling of .page--wwm, not a child: the page's
   overflow-x: clip would otherwise kill it.
   ----------------------------------------------------------------------------- */
.topbar--wwm {
  position: sticky;
  top: 0;
  z-index: 20;
  display: block;
  max-width: none;
  padding: 0;
  border-bottom: 1px solid transparent;
  transition: background 0.24s var(--ease), border-color 0.24s var(--ease);
}
.topbar--wwm .topbar__inner {
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding: 26px 28px 18px;   /* at rest it sits exactly like the static topbar */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  transition: padding 0.24s var(--ease);
}
/* Once the page moves, the bar lifts onto a paper wash and condenses. */
.topbar--wwm.is-stuck {
  background: rgba(255, 255, 255, 0.86);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
          backdrop-filter: blur(10px) saturate(140%);
  border-bottom-color: var(--line);
}
.topbar--wwm.is-stuck .topbar__inner { padding: 14px 28px; }

/* Scrollspy: the active section's link takes ink and grows the blue marker,
   the same gesture as .accent__line under the headline. */
.topbar__link--spy { position: relative; }
.topbar__link--spy::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: -5px;
  height: 2px;
  border-radius: 2px;
  background: var(--blue);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.26s var(--ease);
}
.topbar__link--spy.is-active { color: var(--ink); }
.topbar__link--spy.is-active::after { transform: scaleX(1); }

/* Anchors land clear of the stuck bar instead of under it. */
.page--wwm .wwm-section[id] { scroll-margin-top: 84px; }

.wwm-section { width: 100%; padding: 86px 0; }
.wwm-inner {
  width: 100%;
  max-width: 1064px;         /* 1000px of content + 32px gutters */
  margin: 0 auto;
  padding: 0 32px;
}
.wwm-section--rule  { border-top: 1px solid var(--line); }
.wwm-section--tint  {
  background: var(--blue-tint);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.wwm-section--paper {
  background: var(--blue-tint);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

/* ---- Section header: mono eyebrow, big left-aligned title ------------------- */
.wwm-eyebrow {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 20px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--blue-ink);
}
.wwm-eyebrow::before {
  content: "";
  flex: 0 0 auto;
  width: 7px; height: 7px;
  border-radius: 1px;
  background: var(--blue);
}
.wwm-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.95rem, 4.2vw, 2.9rem);
  line-height: 1.05;
  letter-spacing: -0.028em;
  color: var(--ink);
  max-width: 22ch;
}
.wwm-sub {
  margin: 18px 0 0;
  max-width: 54ch;
  color: var(--muted);
  font-size: 1.02rem;
  line-height: 1.65;
}
.wwm-body { margin-top: 46px; }

/* ---- Hero ------------------------------------------------------------------- */
/* The problem band used to sit between the hero and What I build. With it gone
   the hero hands straight over to the first wash band, so it keeps a generous
   bottom so the handover reads as a deliberate breath rather than a cut. */
.wwm-hero { padding: 78px 0 104px; }
.wwm-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 46px;   /* 1000 content - 320 art - 46 = 634 for the text, and line one needs 624 at 3.85rem */
}
.wwm-h1 {
  font-size: clamp(1.72rem, 6.4vw, 3.85rem);
  line-height: 1.0;
  letter-spacing: -0.032em;
  max-width: 19ch;
}
.wwm-subhead {
  margin: 26px 0 0;
  max-width: 46ch;
  font-size: clamp(1rem, 1.6vw, 1.14rem);
}
.wwm-cta {
  margin: 32px 0 0;
  max-width: none;
  text-align: left;
}
.wwm-cta .btn { display: inline-block; }
.wwm-btn--lg { padding: 17px 30px; font-size: 13px; }

/* ---- Refund badge -------------------------------------------------------------
   Was fine print under the button; it is a badge now (Hugo's 3 Aug review). The
   point is that the refund reads as a FEATURE of the offer, not a legal aside,
   so it gets a chip: hairline edge, blue-tint fill, the undo icon in accent ink,
   text at 13px in --ink-2. inline-flex so it hugs its own copy instead of
   stretching the column, which is also what centres it inside the dark band
   (.wwm-band is text-align: center, and an inline-level box just follows).
   ----------------------------------------------------------------------------- */
.wwm-refund {
  display: inline-flex;
  /* flex-start, not center: at 13px/1.42 the line box is 18.5px and the icon is
     15px, so top-aligning with a 2px nudge lands within a quarter pixel of
     optically centred on one line, and keeps the icon on the FIRST line when
     the copy wraps to two on a phone. */
  align-items: flex-start;
  gap: 9px;
  margin: 18px 0 0;
  max-width: 100%;
  padding: 9px 15px 10px;
  border: 1px solid var(--line-2);
  border-radius: 8px;
  background: var(--blue-tint);
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1.42;
  text-align: left;
}
.wwm-refund svg {
  flex: 0 0 auto;
  width: 15px; height: 15px;
  margin-top: 2px;
  color: var(--blue-ink);
}

/* ---- Hero art: the constellation --------------------------------------------
   Decoration only, never content. Ten square nodes drift on independent slow
   loops; ten hairlines converge on one blue square, with six fainter
   node-to-node links so it reads as a mesh and not a star. Every few seconds a
   blue square runs an edge into the centre.

   The artwork is drawn on a fixed 320x400 canvas and scaled by --wwm-art-k into
   the box the layout can actually spare, so every coordinate below is a canvas
   unit and the whole thing resizes from one number. Runs at full scale (k = 1)
   because the h1 caps at 3.85rem: .accent is white-space: nowrap, and at that
   size the first line "Custom AI systems that" is an unbreakable ~624px, which
   fits beside the 320px art in the 1000px column. Raise the h1 cap and the art
   must scale back down (at 4.15rem line one is 673px and only k = 0.825 fits,
   or "that" drops onto a line of its own). The scale stays on
   .wwm-constellation, never on .wwm-hero__art, because main.js writes transform
   to the [data-animate] box on entrance.
   --------------------------------------------------------------------------- */
.wwm-hero__art {
  --wwm-art-w: 320px;
  --wwm-art-h: 400px;
  --wwm-art-k: 1;
  display: block;
  position: relative;
  width: calc(var(--wwm-art-w) * var(--wwm-art-k));
  height: calc(var(--wwm-art-h) * var(--wwm-art-k));
}
.wwm-constellation {
  position: absolute;
  left: 50%; top: 50%;
  width: var(--wwm-art-w);
  height: var(--wwm-art-h);
  transform: translate(-50%, -50%) scale(var(--wwm-art-k));
}
.wwm-constellation > svg {
  display: block;
  width: var(--wwm-art-w);
  height: var(--wwm-art-h);
}

/* Two line weights: spokes carry the converging story, links just add mesh. */
.wwm-constellation__spoke { fill: none; stroke: rgba(29, 45, 80, 0.15); stroke-width: 1; }
.wwm-constellation__link  { fill: none; stroke: rgba(29, 45, 80, 0.09); stroke-width: 1; }
.wwm-constellation__node  { fill: #ffffff; stroke: rgba(29, 45, 80, 0.34); stroke-width: 1.5; }
.wwm-constellation__node--soft { fill: var(--blue-soft); stroke: none; opacity: 0.7; }

/* Duration, delay and travel are set inline on each <g>, so the numbers sit
   next to the node they move and nothing depends on sibling order. */
.wwm-constellation__drift {
  animation: wwm-ca-drift var(--t, 22s) ease-in-out infinite alternate;
  animation-delay: var(--d, 0s);
}
@keyframes wwm-ca-drift {
  from { transform: translate(0, 0); }
  to   { transform: translate(var(--dx, 4px), var(--dy, -3px)); }
}

/* The centre breathes, very slightly, on one shared beat. */
.wwm-constellation__core,
.wwm-constellation__halo { transform-box: fill-box; transform-origin: center; }
.wwm-constellation__core { animation: wwm-ca-core 7.5s ease-in-out infinite; }
@keyframes wwm-ca-core {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.07); }
}
.wwm-constellation__halo { animation: wwm-ca-halo 7.5s ease-in-out infinite; }
@keyframes wwm-ca-halo {
  0%, 100% { opacity: 0.7; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.12); }
}

/* Pulses. Edges are straight lines, so a plain translate is exact and needs no
   offset-path: each keyframe travels one node's delta to the centre (162,192). */
.wwm-constellation__pulse { fill: var(--blue); opacity: 0; }
.wwm-constellation__pulse--1 { animation: wwm-ca-p1 14s cubic-bezier(0.4, 0.02, 0.3, 1) infinite 0.6s; }
.wwm-constellation__pulse--2 { animation: wwm-ca-p2 14s cubic-bezier(0.4, 0.02, 0.3, 1) infinite 4.2s; }
.wwm-constellation__pulse--3 { animation: wwm-ca-p3 14s cubic-bezier(0.4, 0.02, 0.3, 1) infinite 7.6s; }
.wwm-constellation__pulse--4 { animation: wwm-ca-p4 14s cubic-bezier(0.4, 0.02, 0.3, 1) infinite 10.8s; }
@keyframes wwm-ca-p1 {   /* node 46,92 */
  0%        { transform: translate(0, 0); opacity: 0; }
  3%, 17%   { opacity: 0.95; }
  22%, 100% { transform: translate(116px, 100px); opacity: 0; }
}
@keyframes wwm-ca-p2 {   /* node 240,78 */
  0%        { transform: translate(0, 0); opacity: 0; }
  3%, 17%   { opacity: 0.95; }
  22%, 100% { transform: translate(-78px, 114px); opacity: 0; }
}
@keyframes wwm-ca-p3 {   /* node 94,278 */
  0%        { transform: translate(0, 0); opacity: 0; }
  3%, 17%   { opacity: 0.95; }
  22%, 100% { transform: translate(68px, -86px); opacity: 0; }
}
@keyframes wwm-ca-p4 {   /* node 186,318 */
  0%        { transform: translate(0, 0); opacity: 0; }
  3%, 17%   { opacity: 0.95; }
  22%, 100% { transform: translate(-24px, -126px); opacity: 0; }
}

/* ---- Card grids -------------------------------------------------------------- */
.wwm-grid {
  display: grid;
  gap: 16px;
}
.wwm-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.wwm-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.wwm-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* What I build: line icon, title, body */
.wwm-card {
  background: #ffffff;
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  padding: 24px 24px 26px;
  box-shadow: var(--shadow-sm);
  transition: border-color 0.22s var(--ease), box-shadow 0.22s var(--ease), transform 0.22s var(--ease);
}
.wwm-card:hover {
  border-color: var(--blue);
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}
.wwm-card__icon {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  margin-bottom: 18px;
  border-radius: 9px;
  background: var(--blue-tint);
  color: var(--blue-ink);
}
.wwm-card__icon svg { width: 19px; height: 19px; }
.wwm-card__title {
  margin: 0 0 6px;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.wwm-card__body {
  margin: 0;
  color: var(--muted);
  font-size: 0.94rem;
  line-height: 1.6;
}

/* Skills: little labelled files, deliberately flatter than the build cards */
.wwm-file {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background: #ffffff;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-sm);
  padding: 18px 18px 20px;
  transition: border-color 0.22s var(--ease), transform 0.22s var(--ease);
}
.wwm-file:hover { border-color: var(--blue); transform: translateY(-3px); }
.wwm-file__chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 16px;
  padding: 5px 10px;
  border: 1px solid var(--line-2);
  border-radius: 6px;
  background: var(--blue-tint);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--muted);
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wwm-file__chip::before {
  content: "";
  flex: 0 0 auto;
  width: 6px; height: 6px;
  border-radius: 1px;
  background: var(--blue);
}
.wwm-file__title {
  margin: 0 0 6px;
  font-size: 0.98rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink);
}
.wwm-file__body {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.58;
}
.wwm-file__rules {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: auto;
  padding-top: 20px;
}
.wwm-file__rules span { height: 1px; background: var(--line); }
.wwm-file__rules span:nth-child(2) { width: 72%; }
.wwm-file__rules span:nth-child(3) { width: 44%; }

/* Quiet client proof under the What I build grid. Deliberately not cards: a mono
   eyebrow reused from the section headers, then hairline rows with the small
   blue square marker. It should read as a footnote to the grid, not a feature. */
.wwm-proof { margin-top: 42px; }
.wwm-proof .wwm-eyebrow { margin-bottom: 14px; }
.wwm-proof__list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
}
.wwm-proof__list li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 13px 2px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.55;
}
.wwm-proof__list li::before {
  content: "";
  flex: 0 0 auto;
  width: 5px; height: 5px;
  margin-top: 0.62em;
  border-radius: 1px;
  background: var(--blue);
}

/* Who this is for: white cards on the wash band, shadowed so they pop */
.wwm-fit {
  background: #ffffff;
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  padding: 28px 28px 30px;
  box-shadow: 0 1px 2px rgba(16, 32, 58, 0.04), 0 10px 26px rgba(16, 32, 58, 0.06);
  transition: border-color 0.22s var(--ease), transform 0.22s var(--ease), box-shadow 0.22s var(--ease);
}
.wwm-fit:hover {
  border-color: var(--blue);
  transform: translateY(-3px);
  box-shadow: 0 2px 4px rgba(16, 32, 58, 0.05), 0 18px 38px rgba(16, 32, 58, 0.1);
}
.wwm-fit__num {
  display: inline-block;
  margin-bottom: 16px;
  padding: 4px 8px;
  border-radius: 5px;
  background: var(--blue-tint);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--blue-ink);
}
.wwm-fit__title {
  margin: 0 0 8px;
  font-size: 1.06rem;
  font-weight: 700;
  line-height: 1.28;
  letter-spacing: -0.012em;
  color: var(--ink);
}
.wwm-fit__body {
  margin: 0;
  color: var(--muted);
  font-size: 0.94rem;
  line-height: 1.62;
}

/* Systems already shipped (variant B): slim hairline rows */
.wwm-rows { border-top: 1px solid var(--line-2); }
.wwm-row {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 22px 4px;
  border-bottom: 1px solid var(--line-2);
}
.wwm-row::before {
  content: "";
  flex: 0 0 auto;
  width: 8px; height: 8px;
  margin-top: 9px;
  border-radius: 1px;
  background: var(--blue);
}
.wwm-row p {
  margin: 0;
  color: var(--ink-2);
  font-size: 1rem;
  line-height: 1.6;
}

/* ---- How it works: the timeline ---------------------------------------------- */
.wwm-timeline {
  position: relative;
  max-width: 760px;
}
.wwm-timeline__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.wwm-step {
  position: relative;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 22px;
  padding-bottom: 34px;
}
.wwm-step:last-child { padding-bottom: 0; }
/* The rail, built one segment per step so it ends exactly on the last node:
   ::before is the static hairline, ::after is the blue line that draws down. */
.wwm-step:not(:last-child)::before,
.wwm-step:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 21px;              /* node centre: (44 - 2) / 2 */
  top: 48px;
  bottom: 0;
  width: 2px;
  border-radius: 2px;
}
.wwm-step::before { background: var(--line-2); }
.wwm-step::after  { background: var(--blue); transform-origin: top center; }
.wwm-step__node {
  position: relative;
  z-index: 1;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border: 1.5px solid var(--line-2);
  border-radius: 11px;
  background: var(--bg);
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--muted-2);
  transition: border-color 0.4s var(--ease), color 0.4s var(--ease), background 0.4s var(--ease);
}
.wwm-step__title {
  margin: 10px 0 7px;
  font-size: 1.08rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.012em;
  color: var(--ink);
}
.wwm-step__body {
  margin: 0;
  max-width: 56ch;
  color: var(--muted);
  font-size: 0.98rem;
  line-height: 1.65;
}

/* ---- Honesty note: one quiet aside, no card ---------------------------------- */
.wwm-honest {
  max-width: 720px;
  padding: 4px 0 4px 26px;
  border-left: 3px solid var(--blue);
}
.wwm-honest p {
  margin: 0;
  color: var(--ink-2);
  font-size: clamp(1.02rem, 1.9vw, 1.18rem);
  line-height: 1.7;
}


/* ---- Built for real clients: two wide cards, each with a drawn diagram -------
   Graduated from work-with-me/previews/diagrams.html on 3 Aug. Sits in the slot
   the hidden Skills band left behind, between How it works and Who this is for.

   THE BAND. White with a hairline top rule, because Who this is for underneath
   it is a wash band and two washes must never touch. The contrast is carried by
   the cards instead: white card on white band, hairline edge, and the drawing on
   a faint --blue-tint panel so it reads as an artefact rather than decoration.

   TWO DRAWINGS PER CARD, NOT ONE SCALED DOWN. Each card ships a wide SVG and a
   stacked narrow SVG, swapped at 760px. One drawing squeezed into a 335px phone
   puts the mono micro-labels near 5px, which is unreadable; the narrow version
   re-routes the same nodes down the page instead of shrinking them.

   THE DRAWING LANGUAGE matches the hero constellation: square nodes at rx 2,
   hairlines at 1.5 to 1.8, mono uppercase micro-labels, and blue used only where
   something is alive (the pulses, the filled cells). No third-party logos and no
   circles except the person glyph. Nothing in these SVGs uses <defs> or an id,
   so nothing can collide with the constellation's gradient.

   MOTION. The pulses and the row fills are pure CSS on the SVG, always running;
   the card entrance rides the page's [data-reveal] + .wwm-stagger machinery, so
   it replays with everything else. Reduced motion freezes it in the block at the
   bottom of this file.
   --------------------------------------------------------------------------- */
/* ---- The section ------------------------------------------------------- */
.wwm-dg-cards { display: grid; gap: 18px; }

.wwm-dg-card {
  background: #ffffff;
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  padding: 28px 30px 26px;
  box-shadow: var(--shadow-sm);
  transition: border-color 0.22s var(--ease), box-shadow 0.22s var(--ease);
}
.wwm-dg-card:hover { border-color: var(--blue); box-shadow: var(--shadow-md); }

.wwm-dg-card__head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.wwm-dg-card__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.3rem;
  letter-spacing: -0.022em;
  color: var(--ink);
}
.wwm-dg-card__tag {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue-ink);
  background: var(--blue-tint);
  border: 1px solid rgba(117, 180, 219, 0.4);
  border-radius: 5px;
  padding: 4px 8px 5px;
  white-space: nowrap;
}
.wwm-dg-card__line {
  margin: 12px 0 0;
  max-width: 62ch;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.62;
}

/* The drawing sits on its own faint panel, so it reads as an artefact rather
   than as decoration bleeding off the card. */
.wwm-dg-figure {
  margin: 24px 0 0;
  padding: 22px 20px;
  background: var(--blue-tint);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.wwm-dg-svg { display: block; width: 100%; height: auto; }
.wwm-dg-svg--narrow { display: none; }
@media (max-width: 760px) {
  .wwm-dg-svg--wide { display: none; }
  .wwm-dg-svg--narrow { display: block; }
  .wwm-dg-card { padding: 22px 18px 20px; }
  .wwm-dg-figure { padding: 16px 12px; }
}

/* ---- Shared SVG vocabulary --------------------------------------------- */
.wwm-dg-node  { fill: #ffffff; stroke: rgba(29, 45, 80, 0.30); stroke-width: 1.6; }
.wwm-dg-node--strong { stroke: rgba(29, 45, 80, 0.44); stroke-width: 1.8; }
.wwm-dg-node--blue   { fill: rgba(117, 180, 219, 0.14); stroke: rgba(117, 180, 219, 0.8); }
.wwm-dg-wire  { fill: none; stroke: rgba(29, 45, 80, 0.22); stroke-width: 1.5; }
.wwm-dg-wire--soft { stroke: rgba(29, 45, 80, 0.12); }
.wwm-dg-tip   { fill: none; stroke: rgba(29, 45, 80, 0.34); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.wwm-dg-rule  { stroke: rgba(29, 45, 80, 0.13); stroke-width: 1; }
.wwm-dg-bar   { fill: rgba(29, 45, 80, 0.16); }
.wwm-dg-bar--blue { fill: rgba(117, 180, 219, 0.55); }
.wwm-dg-glyph { fill: none; stroke: rgba(29, 45, 80, 0.44); stroke-width: 1.6; stroke-linecap: round; }

.wwm-dg-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  fill: var(--ink-2);
}
.wwm-dg-label--muted { fill: var(--muted-2); }
.wwm-dg-label--blue  { fill: var(--blue-ink); }
.wwm-dg-label--cap   { font-size: 11px; letter-spacing: 0.2em; fill: var(--muted-2); }
/* One label ("market research") is twice the length of the others and has to
   live in the same box on a phone, so it gets a tighter cut rather than a
   taller box that would break the row. */
.wwm-dg-label--tight { font-size: 9.5px; letter-spacing: 0.05em; }

/* Pulses: small blue squares travelling a wire. Every leg is straight, so a
   plain translate is exact and no offset-path is needed. */
.wwm-dg-pulse { fill: var(--blue); opacity: 0; }

/* Dashboard / spreadsheet rows filling in, one after another. */
.wwm-dg-row { fill: rgba(117, 180, 219, 0.28); opacity: 0; }
.wwm-dg-row--1 { animation: wwm-dg-row 9s ease-in-out infinite 0.2s; }
.wwm-dg-row--2 { animation: wwm-dg-row 9s ease-in-out infinite 1.1s; }
.wwm-dg-row--3 { animation: wwm-dg-row 9s ease-in-out infinite 2.0s; }
.wwm-dg-row--4 { animation: wwm-dg-row 9s ease-in-out infinite 2.9s; }
@keyframes wwm-dg-row {
  0%, 6%    { opacity: 0; }
  14%, 46%  { opacity: 1; }
  60%, 100% { opacity: 0; }
}

/* ---- Card 1 pulses: inboxes -> bus -> dashboard -> brief ---------------- */
/* wide: inbox rows sit at y 41 / 89 / 137, the bus is x=140, dashboard at 190 */
.wwm-c1w-p1 { animation: wwm-c1w-p1 9s cubic-bezier(0.4, 0.02, 0.3, 1) infinite 0.1s; }
.wwm-c1w-p2 { animation: wwm-c1w-p2 9s cubic-bezier(0.4, 0.02, 0.3, 1) infinite 1.5s; }
.wwm-c1w-p3 { animation: wwm-c1w-p3 9s cubic-bezier(0.4, 0.02, 0.3, 1) infinite 2.9s; }
.wwm-c1w-p4 { animation: wwm-c1w-p4 9s cubic-bezier(0.4, 0.02, 0.3, 1) infinite 4.4s; }
.wwm-c1w-p5 { animation: wwm-c1w-p5 9s cubic-bezier(0.4, 0.02, 0.3, 1) infinite 5.8s; }
@keyframes wwm-c1w-p1 {
  0%       { transform: translate(0, 0);      opacity: 0; }
  4%       { opacity: 0.95; }
  22%      { transform: translate(30px, 0); }
  40%      { transform: translate(30px, 48px); }
  56%      { transform: translate(56px, 48px); opacity: 0.95; }
  62%, 100%{ transform: translate(56px, 48px); opacity: 0; }
}
@keyframes wwm-c1w-p2 {
  0%       { transform: translate(0, 0);      opacity: 0; }
  4%       { opacity: 0.95; }
  22%      { transform: translate(30px, 0); }
  40%      { transform: translate(30px, 0); }
  56%      { transform: translate(56px, 0);   opacity: 0.95; }
  62%, 100%{ transform: translate(56px, 0);   opacity: 0; }
}
@keyframes wwm-c1w-p3 {
  0%       { transform: translate(0, 0);      opacity: 0; }
  4%       { opacity: 0.95; }
  22%      { transform: translate(30px, 0); }
  40%      { transform: translate(30px, -48px); }
  56%      { transform: translate(56px, -48px); opacity: 0.95; }
  62%, 100%{ transform: translate(56px, -48px); opacity: 0; }
}
/* dashboard -> out along one line into the stack of briefs. Two pulses on the
   same wire, staggered, because two documents come out of it. */
@keyframes wwm-c1w-p4 {
  0%       { transform: translate(0, 0);       opacity: 0; }
  8%       { opacity: 0.95; }
  56%      { transform: translate(124px, 0);   opacity: 0.95; }
  64%, 100%{ transform: translate(124px, 0);   opacity: 0; }
}
@keyframes wwm-c1w-p5 {
  0%       { transform: translate(0, 0);       opacity: 0; }
  8%       { opacity: 0.95; }
  56%      { transform: translate(124px, 0);   opacity: 0.95; }
  64%, 100%{ transform: translate(124px, 0);   opacity: 0; }
}

/* narrow card 1: inbox columns at x 56 / 170 / 284, bus y=64, dashboard top 92 */
.wwm-c1n-p1 { animation: wwm-c1n-p1 9s cubic-bezier(0.4, 0.02, 0.3, 1) infinite 0.1s; }
.wwm-c1n-p2 { animation: wwm-c1n-p2 9s cubic-bezier(0.4, 0.02, 0.3, 1) infinite 1.5s; }
.wwm-c1n-p3 { animation: wwm-c1n-p3 9s cubic-bezier(0.4, 0.02, 0.3, 1) infinite 2.9s; }
.wwm-c1n-p4 { animation: wwm-c1n-p4 9s cubic-bezier(0.4, 0.02, 0.3, 1) infinite 4.4s; }
.wwm-c1n-p5 { animation: wwm-c1n-p5 9s cubic-bezier(0.4, 0.02, 0.3, 1) infinite 5.8s; }
@keyframes wwm-c1n-p1 {
  0%       { transform: translate(0, 0);       opacity: 0; }
  4%       { opacity: 0.95; }
  24%      { transform: translate(0, 22px); }
  42%      { transform: translate(111px, 22px); }
  58%      { transform: translate(111px, 46px); opacity: 0.95; }
  64%, 100%{ transform: translate(111px, 46px); opacity: 0; }
}
@keyframes wwm-c1n-p2 {
  0%       { transform: translate(0, 0);       opacity: 0; }
  4%       { opacity: 0.95; }
  24%      { transform: translate(0, 22px); }
  42%      { transform: translate(0, 22px); }
  58%      { transform: translate(0, 46px);    opacity: 0.95; }
  64%, 100%{ transform: translate(0, 46px);    opacity: 0; }
}
@keyframes wwm-c1n-p3 {
  0%       { transform: translate(0, 0);       opacity: 0; }
  4%       { opacity: 0.95; }
  24%      { transform: translate(0, 22px); }
  42%      { transform: translate(-111px, 22px); }
  58%      { transform: translate(-111px, 46px); opacity: 0.95; }
  64%, 100%{ transform: translate(-111px, 46px); opacity: 0; }
}
/* dashboard -> down the one wire into the stack of briefs */
@keyframes wwm-c1n-p4 {
  0%       { transform: translate(0, 0);      opacity: 0; }
  8%       { opacity: 0.95; }
  56%      { transform: translate(0, 25px);   opacity: 0.95; }
  64%, 100%{ transform: translate(0, 25px);   opacity: 0; }
}
@keyframes wwm-c1n-p5 {
  0%       { transform: translate(0, 0);      opacity: 0; }
  8%       { opacity: 0.95; }
  56%      { transform: translate(0, 25px);   opacity: 0.95; }
  64%, 100%{ transform: translate(0, 25px);   opacity: 0; }
}

/* ---- Card 2 pulses ----------------------------------------------------- */
/* Before: five wires firing over each other, deliberately busy. */
.wwm-c2w-b { animation-name: wwm-c2w-b; animation-duration: 5.4s; animation-timing-function: cubic-bezier(0.45, 0.05, 0.4, 1); animation-iteration-count: infinite; }
.wwm-c2w-b--1 { animation-delay: 0s;    --tx: 128px; --ty: -117px; }
.wwm-c2w-b--2 { animation-delay: 0.6s;  --tx: 128px; --ty: -65px; }
.wwm-c2w-b--3 { animation-delay: 1.15s; --tx: 128px; --ty: -13px; }
.wwm-c2w-b--4 { animation-delay: 1.75s; --tx: 128px; --ty: 39px; }
.wwm-c2w-b--5 { animation-delay: 2.35s; --tx: 128px; --ty: 91px; }
@keyframes wwm-c2w-b {
  0%        { transform: translate(0, 0); opacity: 0; }
  8%        { opacity: 0.95; }
  46%       { transform: translate(var(--tx), var(--ty)); opacity: 0.95; }
  54%, 100% { transform: translate(var(--tx), var(--ty)); opacity: 0; }
}
/* After: one unhurried run, and the agents feeding up from underneath. */
.wwm-c2w-a1 { animation: wwm-c2w-a1 5.4s cubic-bezier(0.4, 0.02, 0.3, 1) infinite 0.4s; }
@keyframes wwm-c2w-a1 {
  0%        { transform: translate(0, 0); opacity: 0; }
  10%       { opacity: 0.95; }
  50%       { transform: translate(60px, 0); opacity: 0.95; }
  58%, 100% { transform: translate(60px, 0); opacity: 0; }
}
.wwm-c2w-a2 { animation: wwm-c2w-a2 5.4s cubic-bezier(0.4, 0.02, 0.3, 1) infinite 2.4s; }
@keyframes wwm-c2w-a2 {
  0%        { transform: translate(0, 0); opacity: 0; }
  10%       { opacity: 0.95; }
  50%       { transform: translate(0, -28px); opacity: 0.95; }
  58%, 100% { transform: translate(0, -28px); opacity: 0; }
}
/* narrow card 2 */
.wwm-c2n-b { animation-name: wwm-c2w-b; animation-duration: 5.4s; animation-timing-function: cubic-bezier(0.45, 0.05, 0.4, 1); animation-iteration-count: infinite; }
.wwm-c2n-b--1 { animation-delay: 0s;    --tx: -113px; --ty: 34px; }
.wwm-c2n-b--2 { animation-delay: 0.6s;  --tx: 0px;    --ty: 34px; }
.wwm-c2n-b--3 { animation-delay: 1.15s; --tx: 113px;  --ty: 34px; }
.wwm-c2n-b--4 { animation-delay: 1.75s; --tx: -57px;  --ty: 92px; }
.wwm-c2n-b--5 { animation-delay: 2.35s; --tx: 57px;   --ty: 92px; }
.wwm-c2n-a1 { animation: wwm-c2n-a1 5.4s cubic-bezier(0.4, 0.02, 0.3, 1) infinite 0.4s; }
@keyframes wwm-c2n-a1 {
  0%        { transform: translate(0, 0); opacity: 0; }
  10%       { opacity: 0.95; }
  50%       { transform: translate(0, 34px); opacity: 0.95; }
  58%, 100% { transform: translate(0, 34px); opacity: 0; }
}
.wwm-c2n-a2 { animation: wwm-c2n-a2 5.4s cubic-bezier(0.4, 0.02, 0.3, 1) infinite 2.4s; }
@keyframes wwm-c2n-a2 {
  0%        { transform: translate(0, 0); opacity: 0; }
  10%       { opacity: 0.95; }
  50%       { transform: translate(0, -30px); opacity: 0.95; }
  58%, 100% { transform: translate(0, -30px); opacity: 0; }
}

/* ---- FAQ: the shared component, left aligned in this page's column ----------- */
.wwm-section .faq { max-width: 760px; margin: 46px 0 0; }

/* ---- The dark band (closing CTA) --------------------------------------------- */
.wwm-band {
  background: var(--ink);
  border-radius: 18px;
  padding: 62px 44px 58px;
  text-align: center;
  box-shadow: var(--shadow-md);
}
.wwm-band__title {
  margin: 0 auto;
  max-width: 18ch;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  line-height: 1.06;
  letter-spacing: -0.028em;
  color: #ffffff;
  text-wrap: balance;
}
.wwm-band__sub {
  margin: 20px auto 0;
  max-width: 44ch;
  color: rgba(255, 255, 255, 0.72);
  font-size: 1.02rem;
  line-height: 1.62;
}
.wwm-band .wwm-cta { margin: 32px auto 0; text-align: center; }
.wwm-btn--invert { background: #ffffff; color: var(--ink); }
.wwm-btn--invert:hover {
  background: color-mix(in srgb, #ffffff 92%, var(--blue));
  box-shadow: 0 10px 22px -10px rgba(0, 0, 0, 0.6);
}
/* Same badge, sitting on ink: the fill and edge invert to translucent white so
   it stays a chip rather than becoming a punched-out white block. */
.wwm-refund--invert {
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.07);
  color: rgba(255, 255, 255, 0.84);
}
.wwm-refund--invert svg { color: rgba(255, 255, 255, 0.92); }

/* ============================================================================
   Motion. Every pre-hidden state is scoped to .js so the page is fully
   readable with JavaScript off. Reveals ride main.js's [data-reveal] observer.
   ============================================================================ */

/* Grids: the container stops moving, its children stagger instead. */
.js .wwm-stagger[data-reveal] { opacity: 1; transform: none; transition: none; }
.js .wwm-stagger[data-reveal] > * {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
.js .wwm-stagger[data-reveal].is-visible > * { opacity: 1; transform: none; }
.js .wwm-stagger[data-reveal].is-visible > *:nth-child(1) { transition-delay: 0.02s; }
.js .wwm-stagger[data-reveal].is-visible > *:nth-child(2) { transition-delay: 0.09s; }
.js .wwm-stagger[data-reveal].is-visible > *:nth-child(3) { transition-delay: 0.16s; }
.js .wwm-stagger[data-reveal].is-visible > *:nth-child(4) { transition-delay: 0.23s; }
.js .wwm-stagger[data-reveal].is-visible > *:nth-child(5) { transition-delay: 0.30s; }
.js .wwm-stagger[data-reveal].is-visible > *:nth-child(6) { transition-delay: 0.37s; }

/* Timeline: the rail draws from the top, steps rise in, nodes light up. */
.js .wwm-timeline[data-reveal] { opacity: 1; transform: none; transition: none; }
.js .wwm-timeline[data-reveal] .wwm-step {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.55s var(--ease), transform 0.55s var(--ease);
}
.js .wwm-timeline[data-reveal].is-visible .wwm-step { opacity: 1; transform: none; }
.js .wwm-timeline[data-reveal].is-visible .wwm-step:nth-child(2) { transition-delay: 0.20s; }
.js .wwm-timeline[data-reveal].is-visible .wwm-step:nth-child(3) { transition-delay: 0.44s; }
.js .wwm-timeline[data-reveal].is-visible .wwm-step:nth-child(4) { transition-delay: 0.68s; }

.js .wwm-timeline[data-reveal] .wwm-step::after {
  transform: scaleY(0);
  transition: transform 0.34s linear;
}
.js .wwm-timeline[data-reveal].is-visible .wwm-step::after { transform: scaleY(1); }
.js .wwm-timeline[data-reveal].is-visible .wwm-step:nth-child(1)::after { transition-delay: 0.10s; }
.js .wwm-timeline[data-reveal].is-visible .wwm-step:nth-child(2)::after { transition-delay: 0.34s; }
.js .wwm-timeline[data-reveal].is-visible .wwm-step:nth-child(3)::after { transition-delay: 0.58s; }
.js .wwm-timeline[data-reveal].is-visible .wwm-step__node {
  border-color: var(--blue);
  background: var(--blue-tint);
  color: var(--blue-ink);
}
.js .wwm-timeline[data-reveal].is-visible .wwm-step:nth-child(2) .wwm-step__node { transition-delay: 0.20s; }
.js .wwm-timeline[data-reveal].is-visible .wwm-step:nth-child(3) .wwm-step__node { transition-delay: 0.44s; }
.js .wwm-timeline[data-reveal].is-visible .wwm-step:nth-child(4) .wwm-step__node { transition-delay: 0.68s; }

/* Scramble targets are never hidden: wwm.js swaps glyphs in place on the live
   text, so with JS off or reduced motion on, the words simply sit there. */

@media (prefers-reduced-motion: reduce) {
  .js .wwm-stagger[data-reveal] > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .js .wwm-timeline[data-reveal] .wwm-step::after {
    transform: scaleY(1) !important;
    transition: none !important;
  }
  .js .wwm-timeline[data-reveal] .wwm-step {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .js .wwm-timeline[data-reveal] .wwm-step__node {
    border-color: var(--blue);
    background: var(--blue-tint);
    color: var(--blue-ink);
    transition: none !important;
  }
  .wwm-card, .wwm-file, .wwm-fit, .wwm-step__node { transition: none !important; }

  /* The client diagrams freeze on a settled state: pulses gone, dashboard and
     spreadsheet rows resting filled rather than mid-cycle. */
  .wwm-dg-pulse { display: none; animation: none !important; }
  .wwm-dg-row { animation: none !important; opacity: 0.55; }
  .wwm-dg-card { transition: none !important; }

  /* The constellation freezes on its base layout: nodes at rest, centre at full
     size. display:none on an SVG <g> hides its children but does NOT stop their
     animations, so the pulses are silenced by name as well as hidden. */
  .wwm-constellation__drift,
  .wwm-constellation__core,
  .wwm-constellation__halo,
  .wwm-constellation__pulse { animation: none !important; }
  .wwm-constellation__pulses { display: none; }

  /* The sticky bar still gains its wash and the spy marker still shows which
     section you are in; they just arrive without easing. */
  .topbar--wwm,
  .topbar--wwm .topbar__inner,
  .topbar__link--spy::after,
  .topbar__link--solid { transition: none !important; }
}

/* ---- Responsive ---------------------------------------------------------------- */
/* The art lifts at 1100, not 1000: between 1000 and 1064 the container is
   narrower than its own 1000px cap, so the text column loses the room line one
   of the headline needs and "that" drops onto a line of its own. */
@media (max-width: 1100px) {
  .wwm-hero__art { display: none; }
  .wwm-hero__inner { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 1000px) {
  .wwm-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Same two-row treatment as the homepage bar, for the same width reason. The
   section links are already gone by here, so row two is just the Let's talk pill. */
@media (max-width: 760px) {
  .topbar--wwm .topbar__inner { padding: 20px 20px 0; flex-wrap: wrap; }
  .topbar--wwm.is-stuck .topbar__inner { padding: 12px 20px 0; }
  /* Hugo's call (3 Aug): on phones the Let's talk pill sat in the way, and with
     the section links already hidden it was the nav's only visible child. Hide
     the whole nav, so the wwm topbar is wordmark-only on mobile. The page's own
     CTAs (hero + dark band) carry the booking link there. */
  .topbar--wwm .topbar__nav { display: none; }
}
@media (max-width: 860px) {
  .wwm-section { padding: 68px 0; }
  .wwm-hero { padding: 60px 0 72px; }
  .wwm-inner { padding: 0 24px; }
  .wwm-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wwm-body { margin-top: 34px; }
}
@media (max-width: 620px) {
  .wwm-inner { padding: 0 20px; }
  .wwm-grid--3,
  .wwm-grid--4,
  .wwm-grid--2 { grid-template-columns: minmax(0, 1fr); }
  /* The accent phrase never breaks, so this tops out where it still fits a
     narrow phone on one line. */
  .wwm-h1 { font-size: clamp(1.72rem, 8.6vw, 2.4rem); }
  .wwm-honest { padding-left: 20px; }
  .wwm-band { padding: 42px 22px 40px; border-radius: 14px; }
  .wwm-cta .btn { width: auto; }
  .wwm-step { grid-template-columns: 38px minmax(0, 1fr); gap: 16px; padding-bottom: 28px; }
  .wwm-step:not(:last-child)::before,
  .wwm-step:not(:last-child)::after { left: 18px; top: 42px; }
  .wwm-step__node { width: 38px; height: 38px; border-radius: 10px; font-size: 12px; }
  .wwm-step__title { margin-top: 7px; }
}