/* Built from build/blocks/*.css by build/css.mjs. */


/* ---- _shared.css ---- */
/* =====================================================================
   MIRO'S SYSTEM. Only our red and purple survive.
   ---------------------------------------------------------------------
   Measured from miro.com on 2026-09-28 at 1440x900, colour scheme pinned
   to light. Where the getdesign file and the live site disagreed, the
   measurement won — the file calls the primary button a black pill; it
   is an 8px rectangle, and the file's 80px hero display is 56px live.

   The thing that makes it read as Miro, and the thing no token list
   tells you: THE PAGE GROUND IS GREY. Content rides on #F0F0F0 in white
   cards at 20px with 24px of padding. Everything else follows from that.

   Typeface: Roobert PRO is licensed, so Hanken Grotesk stands in for the
   display cuts. Body is Noto Sans, which is what miro.com actually
   serves its paragraphs in.
   ===================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600&family=Noto+Sans:wght@400;500;600;700&display=swap');

* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* ours, and only these */
  --orange: #c0392b;
  --orange-dark: #9A2E22;
  --purple: #3c3158;

  /* theirs */
  --ground: #F0F0F0;
  --card: #FFFFFF;
  --surface: #FAFAFC;
  /* Miro's near-black is replaced by our two brand colours: purple carries
     the dark surfaces, red carries every action. Only ink for type stays
     near-black, because purple body text on white is not readable. */
  --dark: #3c3158;
  --ink: #1C1C1E;
  --slate: #555A6A;
  /* Miro's #6B6F7E and #8E91A0 read 4.9:1 and 3.2:1 on white. The second
     fails, so both are darkened to the first value that clears 4.5:1. */
  --steel: #63666F;
  --stone: #63666F;
  --hairline: #E0E2E8;
  --hairline-soft: #EEF0F3;
  --white: #FFFFFF;
  --grey: #F0F0F0;
  --faint: #EEF0F3;
  --line: #E0E2E8;

  /* their pastel feature tints, rebuilt from our two hues */
  /* Two ramps, so purple can carry structure and red can be rare.
     Contrast on white: purple-400 5.05:1 · purple-500 11.85:1 ·
     red-500 5.44:1 · red-600 7.32:1. Anything lighter is a fill, not text. */
  --purple-50:  #F5F5F7;  --purple-100: #E8E6EB;  --purple-200: #CCC9D4;
  --purple-300: #A7A2B4;  --purple-400: #736B87;  --purple-500: #3C3158;
  --purple-600: #312848;  --purple-700: #28203A;  --purple-800: #1E182C;
  --red-50:  #FCF5F4;  --red-100: #F7E7E6;  --red-200: #EFCCC8;
  --red-300: #E3A6A0;  --red-400: #D27066;  --red-500: #C0392B;
  --red-600: #9D2F23;  --red-700: #7F261C;  --red-800: #601C16;
  --tint-red: #F9EFED;
  --tint-red-deep: #EFCFC9;
  /* Lightened from Miro's tint weight until our red clears 4.5:1 on it.
     Their pastels sit on white; ours carry label text. */
  --tint-purple: #F1F0F4;
  --tint-purple-deep: #D8D4DF;

  --r-btn: 8px;
  --r-panel: 12px;
  --r-card: 20px;
  --r-pill: 9999px;

  --shell: 1195px;
  --display: 'Hanken Grotesk', sans-serif;
  --body: 'Noto Sans', sans-serif;
}

body {
  font-family: var(--body);
  background: var(--ground);
  color: var(--slate);
  width: 100%;
  -webkit-font-smoothing: antialiased;
}

/* ---- Type: their scale, measured. --------------------------------- */
h1, h2, h3, h4, h5 { font-family: var(--display); color: var(--ink); }
/* The scale, corrected. The 22px body came from measuring a hero subtitle on
   miro.com and calling it body copy; their blog runs paragraphs at 16/24, and
   the getdesign file's body-md is 16px. 18px is the middle we hold, on the
   grounds that this is health writing read by tired people. The display sizes
   come down with it — 48px on an h2 in a 1195px shell was shouting. */
h1 { font-size: 48px; line-height: 54px; font-weight: 500; letter-spacing: -0.6px; }
h2 { font-size: 36px; line-height: 43.2px; font-weight: 500; letter-spacing: -0.4px; }
h3 { font-size: 28px; line-height: 34px; font-weight: 500; letter-spacing: -0.3px; }
h4 { font-size: 20px; line-height: 27px; font-weight: 500; letter-spacing: normal; }
h5 { font-size: 17px; line-height: 24px; font-weight: 500; }
p, li { font-size: 18px; line-height: 27px; letter-spacing: normal; color: var(--slate); }
p em, li em, h3 em { font-weight: inherit; font-style: italic; }

/* ---- The shell. Everything sits in 1195 and rides on the grey. ----- */
.what-is-section, .includes-section, .for-notfor, .pricing-note,
.waitlist-section, .crisis-note {
  max-width: var(--shell); margin: 20px auto; width: 100%;
  background: var(--card); border-radius: var(--r-card);
  padding: 64px 40px 48px; border: 0;
}

/* ---- Nav: a white card floating on the grey. ----------------------- */
/* Their header is a flush full-width white bar, 73px tall, and it is sticky —
   measured on miro.com/blog, position: sticky, top 0. The floating rounded
   card this replaces was my invention, not theirs. */
nav {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  background: var(--card); border: 0; border-radius: 0;
  max-width: none; width: 100%; margin: 0; height: 73px; padding: 0 40px;
  position: sticky; top: 0; z-index: 100;
}
nav > * { min-width: 0; }
.wordmark { font-family: var(--display); font-size: 20px; font-weight: 600; letter-spacing: normal;
  text-transform: none; color: var(--ink); text-decoration: none; }
.nav-links { justify-self: center; display: flex; gap: 32px; list-style: none; }
.nav-links a { font-size: 16px; font-weight: 500; color: var(--ink); text-decoration: none; letter-spacing: normal; opacity: 1; }
.nav-links a:hover { color: var(--orange); }
.nav-right { justify-self: end; display: flex; align-items: center; gap: 16px; }
.nav-cta {
  font-size: 16px; font-weight: 600; letter-spacing: normal; text-transform: none;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--white); background: var(--orange); border: 0; border-radius: var(--r-btn);
  padding: 0 20px; height: 44px; line-height: 1; text-decoration: none;
}
.nav-cta:hover { background: var(--orange-dark); color: var(--white); opacity: 1; }

.hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; background: none; border: none; padding: 4px; }
.hamburger span { display: block; width: 22px; height: 2px; background: var(--ink); transition: all 0.2s ease; }
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.mobile-menu { display: none; position: fixed; top: 76px; left: 12px; right: 12px; background: var(--card);
  border: 0; border-radius: var(--r-panel); padding: 20px; z-index: 99; flex-direction: column; gap: 4px; }
.mobile-menu.open { display: flex; }
.mobile-menu a { font-size: 18px; font-weight: 500; color: var(--ink); text-decoration: none; padding: 10px 0; border-bottom: 1px solid var(--hairline-soft); }
.mobile-menu a:last-child { border-bottom: none; }

/* ---- Buttons: 8px, weight 600, 48px tall. -------------------------- */
.btn-primary {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; font-family: var(--body); font-size: 16px; font-weight: 600;
  letter-spacing: normal; text-transform: none; line-height: 1;
  color: var(--white); background: var(--orange); padding: 0 24px;
  text-decoration: none; border: 0; border-radius: var(--r-btn); cursor: pointer;
}
.btn-primary:hover { background: var(--orange-dark); }
/* The old design underlined these four with a border and a 2px gap. Clearing
   that gap with padding-bottom: 0 also flattened the nav button, which is a
   button and not a link — hence "Read the Journal" sitting low in a 32px box.
   The reset now only touches the text links. */
.btn-text, .text-link, .founder-links a {
  font-family: var(--body); font-weight: 600; text-decoration: none; border-bottom: 0; padding-bottom: 0;
}
.nav-cta { font-family: var(--body); text-decoration: none; border-bottom: 0; }
.btn-text, .text-link, .founder-links a { font-size: 16px; letter-spacing: normal; color: var(--orange); }
.btn-text:hover, .text-link:hover, .founder-links a:hover { color: var(--orange-dark); }

/* ---- Page sections ------------------------------------------------- */
.what-is { display: grid; grid-template-columns: 1fr 2fr; gap: 48px; align-items: start; }
.what-is h2 { font-size: 48px; }
.what-is-body p { margin-bottom: 20px; }
.includes-section { background: var(--tint-purple); }
.includes-inner { display: grid; grid-template-columns: 1fr 2fr; gap: 48px; align-items: start; }
.includes-list { list-style: none; display: flex; flex-direction: column; gap: 4px; }
.includes-list li { font-size: 18px; line-height: 27px; letter-spacing: normal; color: var(--slate);
  padding: 16px 0 16px 24px; position: relative; border-bottom: 1px solid var(--hairline); }
.includes-list li:last-child { border-bottom: none; }
.includes-list li::before { content: ''; position: absolute; left: 0; top: 24px; width: 8px; height: 8px;
  border-radius: 50%; background: var(--orange); }

.for-notfor { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; background: transparent; padding: 0; }
.for-col, .notfor-col { background: var(--card); border-radius: var(--r-card); padding: 32px; }
.notfor-col { background: var(--tint-red); }
.for-col h3, .notfor-col h3 { font-size: 28px; line-height: 34px; letter-spacing: -0.6px; margin-bottom: 20px; }
.check-list { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.check-list li { font-size: 18px; line-height: 27px; letter-spacing: normal; color: var(--slate);
  padding-left: 24px; position: relative; }
.check-list li::before { content: ''; position: absolute; left: 0; top: 10px; width: 8px; height: 8px;
  border-radius: 50%; background: var(--orange); }

.pricing-note { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.pricing-note h2 { font-size: 28px; line-height: 34px; }
.pricing-note p { margin-bottom: 20px; }

/* ---- Waitlist -------------------------------------------------------- */
.waitlist-section { display: grid; grid-template-columns: 1fr minmax(0, 380px); gap: 40px; align-items: center; }

/* ---- Crisis note: their yellow-surface callout, in our red tint. ---- */
.crisis-note { background: var(--tint-red); padding: 24px 32px; }
.crisis-note p { font-size: 18px; line-height: 27px; letter-spacing: normal; }

/* ---- Sources --------------------------------------------------------- */
.prog-sources { margin-top: 32px; border-top: 1px solid var(--hairline); padding-top: 24px; }
.prog-sources summary { font-family: var(--body); font-size: 16px; font-weight: 600; letter-spacing: normal;
  text-transform: none; color: var(--orange); cursor: pointer; list-style: none; }
.prog-sources summary::-webkit-details-marker { display: none; }
.prog-sources summary::after { content: ' +'; }
.prog-sources[open] summary::after { content: ' −'; }
.prog-sources ol { margin: 20px 0 0 20px; display: flex; flex-direction: column; gap: 12px; }
.prog-sources li { font-size: 15px; line-height: 23px; letter-spacing: normal; color: var(--steel); }
.prog-sources a { color: var(--orange); }

/* ---- Footer: their full-width dark band, squared into the shell. ---- */
footer {
  background: var(--purple); color: var(--white); border: 0;
  max-width: var(--shell); margin: 40px auto 0; width: 100%;
  border-radius: var(--r-card) var(--r-card) 0 0; overflow: hidden;
}
.footer-logo { padding: 32px 40px 20px; position: relative; }
.footer-logo::after { content: ""; position: absolute; left: 40px; right: 40px; bottom: 0; height: 1px; background: rgba(255,255,255,0.14); }
.footer-wordmark { display: flex; align-items: center; line-height: 0; flex-shrink: 0; }
footer .footer-wordmark svg g { fill: var(--white); }
.footer-top { padding: 32px 40px; display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; position: relative; }
.footer-top::after { content: ""; position: absolute; left: 40px; right: 40px; bottom: 0; height: 1px; background: rgba(255,255,255,0.14); }
.footer-signup h3 { font-family: var(--display); font-size: 28px; line-height: 34px; font-weight: 500;
  letter-spacing: -0.3px; color: var(--white); margin-bottom: 20px; max-width: 12ch; }
.footer-signup h3 .nb { white-space: nowrap; }
.footer-signup p { font-size: 16px; color: var(--white); opacity: 0.7; margin-bottom: 20px; line-height: 24px; }
.footer-email-row { display: flex; gap: 10px; max-width: 460px; }
.footer-email-row input { flex: 1; min-height: 48px; font-family: var(--body); font-size: 16px;
  padding: 14px 18px; border: 0; background: var(--white); color: var(--ink); outline: none; border-radius: var(--r-btn); }
.footer-email-row input::placeholder { color: var(--stone); }
.footer-email-row button { font-family: var(--body); min-height: 48px; font-size: 16px; font-weight: 600;
  letter-spacing: normal; text-transform: none; padding: 14px 24px; background: var(--orange);
  color: var(--white); border: none; cursor: pointer; white-space: nowrap; border-radius: var(--r-btn); }
.footer-email-row button:hover { background: var(--orange-dark); }
.footer-nav { display: grid; grid-template-columns: repeat(4, auto); gap: 8px 32px; justify-content: end; text-align: right; }
.footer-col { display: contents; }
.footer-nav a, .footer-links a { font-size: 16px; font-weight: 500; color: var(--white); opacity: 0.8; text-decoration: none; padding: 4px 0; display: block; }
.footer-nav a:hover, .footer-links a:hover { opacity: 1; color: var(--orange); }
.footer-bottom { padding: 20px 40px 28px; display: flex; justify-content: space-between; align-items: center; gap: 32px; flex-wrap: wrap; width: 100%; }
.footer-copyright { font-size: 14px; color: var(--white); opacity: 0.7; }
.footer-disclaimer { font-size: 14px; color: var(--white); opacity: 0.6; line-height: 21px; max-width: 480px; text-align: right; }

.hidden-field { display: none; }

.skip-link { position: absolute; left: -9999px; top: 0; z-index: 200; background: var(--ink);
  color: var(--white); padding: 12px 20px; font-size: 16px; font-weight: 600; text-decoration: none; border-radius: var(--r-btn); }
.skip-link:focus { left: 16px; top: 16px; }

a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible, summary:focus-visible, details:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 2px;
}

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

/* ---- Phone ---------------------------------------------------------- */
@media (max-width: 768px) {
  h1 { font-size: 32px; line-height: 37px; letter-spacing: -0.4px; }
  h2 { font-size: 26px; line-height: 32px; letter-spacing: -0.3px; }
  h3 { font-size: 22px; line-height: 28px; letter-spacing: normal; }
  h4 { font-size: 19px; line-height: 26px; }
  p, li { font-size: 17px; line-height: 26px; }
  nav { margin: 0; top: 0; height: 64px; padding: 0 20px; grid-template-columns: 1fr auto; border-radius: 0; }
  .nav-links { display: none; }
  .nav-right .nav-cta { display: none; }
  .hamburger { display: flex; }
  .what-is-section, .includes-section, .pricing-note, .waitlist-section, .crisis-note {
    padding: 32px 20px; margin: 12px; width: auto; border-radius: var(--r-panel); }
  .what-is, .includes-inner, .pricing-note, .waitlist-section { grid-template-columns: 1fr; gap: 28px; }
  .for-notfor { grid-template-columns: 1fr; margin: 12px; width: auto; gap: 12px; }
  .for-col, .notfor-col { padding: 24px; border-radius: var(--r-panel); }
  footer { margin: 24px 0 0; border-radius: var(--r-panel) var(--r-panel) 0 0; }
  .footer-top { grid-template-columns: 1fr; gap: 32px; padding: 28px 20px; }
  .footer-logo { padding: 20px 20px 16px; }
  .footer-logo::after, .footer-top::after { left: 20px; right: 20px; }
  .footer-signup h3 { font-size: 28px; line-height: 34px; letter-spacing: -0.6px; max-width: none; }
  .footer-nav { grid-template-columns: repeat(2, auto); justify-content: start; text-align: left; gap: 8px 24px; }
  .footer-bottom { padding: 20px; flex-direction: column; align-items: flex-start; gap: 12px; }
  .footer-disclaimer { text-align: left; }
  .footer-email-row { flex-direction: column; }
}


/* Anything sitting on the red surface takes white, or the accent disappears
   into its own background. Caught at 1:1 on the Habit Lab page. */
[style*="background: var(--orange)"], [style*="background:#c0392b"],
.hl-close-cta, .red-surface { color: var(--white); }
.hl-close-cta a, .hl-close-cta .btn-text, .hl-close-cta .text-link,
.hl-close-cta .hl-quiz-link, .red-surface a { color: var(--white); }
.hl-close-cta .btn-primary, .red-surface .btn-primary { background: var(--white); color: var(--ink); }


/* ---- section.css ---- */
/* Every section is a white card riding on the grey. */
.prog-section {
  max-width: var(--shell); margin: 20px auto; width: 100%;
  background: var(--card); border-radius: var(--r-card);
  padding: 64px 40px 48px; border: 0;
}
.prog-section > h2 { font-family: var(--display); font-size: 36px; line-height: 43.2px;
  font-weight: 500; letter-spacing: -0.4px; color: var(--ink); }
.prog-section > h2 + .tile-grid, .prog-section > h2 + .people-grid { margin-top: 32px; }
/* Miro's eyebrows are ordinary small labels, never tracked caps. */
.section-label { font-family: var(--body); font-size: 16px; font-weight: 600; letter-spacing: normal;
  text-transform: none; color: var(--orange); margin-bottom: 16px; display: block; }
.prog-badge { display: inline-block; font-family: var(--body); font-size: 14px; font-weight: 600;
  letter-spacing: normal; text-transform: none; color: var(--ink); background: var(--tint-red);
  border-radius: var(--r-btn); padding: 6px 12px; margin-bottom: 20px; }
.prog-lede { font-size: 18px; line-height: 27px; letter-spacing: normal; color: var(--slate);
  margin: 12px 0 32px; max-width: 34ch; }
.prog-facts { list-style: none; display: grid; gap: 1px; background: var(--hairline);
  border: 1px solid var(--hairline); border-radius: var(--r-panel); overflow: hidden; margin: 24px 0; padding: 0; }
.prog-facts li { background: var(--card); display: grid; grid-template-columns: 22px 130px 1fr;
  align-items: center; gap: 12px; padding: 16px 20px; }
.prog-facts svg { width: 18px; height: 18px; fill: none; stroke: var(--orange); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.prog-fact-label { font-family: var(--body); font-size: 15px; font-weight: 500; letter-spacing: normal;
  text-transform: none; color: var(--steel); }
.prog-facts b { font-size: 16px; font-weight: 600; color: var(--ink); }
@media (max-width: 768px) {
  .prog-section { padding: 32px 20px; margin: 12px; width: auto; border-radius: var(--r-panel); }
  .prog-section > h2 { font-size: 30px; line-height: 35px; letter-spacing: -0.8px; }
  /* Three children, two columns: the value had nowhere to go but row 2
     column 1, which is the 22px icon column — "Two weeks an article" came
     out one word per line. It sits under the label instead. */
  .prog-facts li { grid-template-columns: 22px 1fr; row-gap: 2px; align-items: start; }
  .prog-fact-label { grid-column: 2; }
  .prog-facts b { grid-column: 2; }
}


/* ---- hero.css ---- */
/* Miro's hero: no full-bleed band. A white card on the grey ground with the
   image rounded inside it, the way every asset on miro.com is treated. */
.prog-hero-text {
  max-width: var(--shell); margin: 20px auto; width: 100%;
  background: var(--card); border-radius: var(--r-card);
  padding: 64px 40px 48px;
  display: grid; grid-template-columns: 1.2fr 1fr; gap: 48px; align-items: end;
  border: 0;
}
.prog-hero-text h1 { font-family: var(--display); font-weight: 500; font-size: 56px;
  line-height: 61.6px; letter-spacing: normal; color: var(--ink); }
.prog-hero-right p { margin-bottom: 24px; }
.prog-hero-image {
  max-width: var(--shell); margin: 0 auto 20px; width: 100%;
  height: 520px; min-height: 0; overflow: hidden; border-radius: var(--r-card);
}
.prog-hero-image img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; display: block; }
.prog-hero-btns { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
@media (max-width: 768px) {
  .prog-hero-text { grid-template-columns: 1fr; gap: 24px; padding: 32px 20px; margin: 12px; width: auto; border-radius: var(--r-panel); }
  .prog-hero-text h1 { font-size: 36px; line-height: 40px; }
  .prog-hero-image { height: 300px; margin: 0 12px 12px; width: auto; border-radius: var(--r-panel); }
}


/* ---- split.css ---- */
.prog-split { display: grid; grid-template-columns: 1fr 1.15fr; gap: 48px; align-items: start; }
.prog-split h2 { font-family: var(--display); font-size: 36px; line-height: 43.2px;
  font-weight: 500; letter-spacing: -0.4px; color: var(--ink); }
.prog-prose p { font-size: 18px; line-height: 27px; letter-spacing: normal; color: var(--slate); margin-bottom: 20px; }
.prog-prose p:last-child { margin-bottom: 0; }
@media (max-width: 768px) {
  .prog-split { grid-template-columns: 1fr; gap: 24px; }
  .prog-split h2 { font-size: 30px; line-height: 35px; letter-spacing: -0.8px; }
}


/* ---- tiles.css ---- */
/* Miro's signature card: white, 20px, 24px of padding, sitting in a grid.
   Inside a white section they take a tint so the edge still reads. */
.tile-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.tile-grid-4 { grid-template-columns: repeat(2, 1fr); }
.tile { background: var(--tint-purple); border: 0; border-radius: var(--r-card); padding: 24px; }
.tile-num { display: block; font-family: var(--body); font-size: 15px; font-weight: 600;
  letter-spacing: normal; text-transform: none; color: var(--orange); margin-bottom: 12px; }
.tile h4 { font-family: var(--display); font-size: 20px; line-height: 27px; font-weight: 500;
  letter-spacing: normal; color: var(--ink); margin-bottom: 8px; }
.tile p { font-size: 17px; line-height: 25.5px; letter-spacing: normal; color: var(--slate); }
.card-icon { width: 28px; height: 28px; fill: none; stroke: var(--orange); stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round; display: block; margin-bottom: 16px; }
@media (max-width: 768px) { .tile-grid, .tile-grid-4 { grid-template-columns: 1fr; gap: 12px; } }


/* ---- cta.css ---- */
/* Miro's answer to "where do I go next" is not a coloured panel: it is a white
   card on the page ground, the same object as every other card on the site —
   their "Need help getting started?" row. So that is what this is. Purple is
   the footer and nothing else.

   Two adjacent calls to action sit side by side, because two stacked
   full-width cards at the end of a page is a lot of nothing. */
.cta-about {
  max-width: var(--shell); margin: 20px auto; width: 100%;
  background: var(--card); color: var(--slate); border-radius: var(--r-card);
  padding: 48px 40px;
  box-shadow: 0 1px 2px rgba(28,28,30,0.04), 0 8px 24px rgba(28,28,30,0.06);
}
.cta-about h2 { font-family: var(--display); font-size: 36px; line-height: 43.2px; font-weight: 500;
  letter-spacing: -0.4px; color: var(--ink); margin-bottom: 16px; max-width: 18ch; }
.cta-about p { font-size: 18px; line-height: 27px; letter-spacing: normal;
  color: var(--slate); margin-bottom: 32px; max-width: 46ch; }
.cta-about .btn-primary { background: var(--orange); color: var(--white); }
.cta-about .btn-primary:hover { background: var(--orange); color: var(--white); }
.cta-links { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.cta-about .btn-text, .cta-about .text-link { color: var(--orange); }
.cta-about .btn-text:hover, .cta-about .text-link:hover { color: var(--orange-dark); }
.about-cols, .founder-block { max-width: var(--shell); margin-inline: auto; width: 100%; }
@media (max-width: 768px) {
  .cta-about { padding: 32px 20px; margin: 12px; width: auto; border-radius: var(--r-panel); }
  .cta-about h2 { font-size: 30px; line-height: 35px; letter-spacing: -0.8px; }
}


/* Two adjacent CTAs pair up. Scoped with :has() so only that case is touched. */
div:has(> .cta-about + .cta-about) {
  display: flex; flex-wrap: wrap; align-items: stretch;
  justify-content: center; column-gap: 20px;
}
div:has(> .cta-about + .cta-about) > * { flex: 1 1 100%; }
div:has(> .cta-about + .cta-about) > .cta-about {
  flex: 1 1 calc((var(--shell) - 20px) / 2);
  max-width: calc((var(--shell) - 20px) / 2);
  margin-inline: 0;
}
@media (max-width: 900px) {
  div:has(> .cta-about + .cta-about) > .cta-about { flex-basis: 100%; max-width: none; }
}


/* ---- prose.css ---- */
.legal-content {
  max-width: var(--shell); margin: 20px auto; width: 100%;
  background: var(--card); border-radius: var(--r-card); padding: 64px 40px 48px;
}
.legal-content h1 { font-family: var(--display); font-weight: 500; font-size: 48px; line-height: 54px;
  letter-spacing: normal; color: var(--ink); margin-bottom: 12px; }
.last-updated { font-size: 15px; color: var(--stone); margin-bottom: 40px; display: block; }
.legal-content h2 { font-family: var(--display); font-size: 28px; line-height: 35px; font-weight: 500;
  letter-spacing: normal; color: var(--ink); margin-top: 40px; margin-bottom: 12px; }
.legal-content p { font-size: 19px; line-height: 28.5px; letter-spacing: normal; color: var(--slate); margin-bottom: 20px; max-width: 70ch; }
.legal-content a { color: var(--orange); font-weight: 600; }
.legal-content a:hover { color: var(--orange-dark); }
.privacy-list { list-style: none; display: flex; flex-direction: column; gap: 12px; margin: 24px 0; padding: 0; }
.privacy-list li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start;
  font-size: 18px; line-height: 27px; letter-spacing: normal; color: var(--slate); }
.privacy-list svg { width: 22px; height: 22px; margin-top: 2px; fill: none; stroke: var(--orange);
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.privacy-note { font-size: 16px; line-height: 24px; color: var(--steel); border-top: 1px solid var(--hairline); padding-top: 16px; }
.privacy-note a { color: var(--orange); font-weight: 600; }
@media (max-width: 768px) {
  .legal-content { padding: 32px 20px; margin: 12px; width: auto; border-radius: var(--r-panel); }
  .legal-content h1 { font-size: 36px; line-height: 40px; }
  .legal-content p { font-size: 17px; line-height: 26px; }
}


/* ---- columns.css ---- */
.about-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 20px auto; }
.about-col { background: var(--card); border-radius: var(--r-card); padding: 32px; }
.about-col-label { display: block; font-family: var(--body); font-size: 16px; font-weight: 600;
  letter-spacing: normal; text-transform: none; color: var(--orange); margin-bottom: 12px; }
.about-col p { font-size: 19px; line-height: 28.5px; letter-spacing: normal; color: var(--slate); margin-bottom: 16px; }
@media (max-width: 768px) {
  .about-cols { grid-template-columns: 1fr; gap: 12px; margin: 12px; width: auto; }
  .about-col { padding: 24px; border-radius: var(--r-panel); }
}


/* ---- people.css ---- */
.people-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.person { background: var(--tint-purple); border-radius: var(--r-card); padding: 24px; }
.person-photo, .person-placeholder { width: 72px; height: 72px; border-radius: 50%; overflow: hidden;
  background: var(--hairline); margin-bottom: 16px; display: block; }
.person-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.person h4 { font-family: var(--display); font-size: 20px; line-height: 26px; font-weight: 500; color: var(--ink); }
.person-role { font-size: 16px; line-height: 24px; color: var(--steel); margin-top: 4px; }
.person-tbc { font-size: 16px; color: var(--stone); }
@media (max-width: 768px) { .people-grid { grid-template-columns: 1fr; gap: 12px; } }


/* ---- imageBand.css ---- */
/* Miro rounds every asset. Nothing runs to the edge of the window. */
.section-image {
  max-width: var(--shell); margin: 20px auto; width: 100%;
  border-radius: var(--r-card); overflow: hidden; display: block;
}
.section-image img { width: 100%; height: auto; display: block; }
@media (max-width: 768px) { .section-image { margin: 12px; width: auto; border-radius: var(--r-panel); } }


/* ---- waitlist.css ---- */
.waitlist-section { display: grid; grid-template-columns: 1fr minmax(0, 400px); gap: 40px; align-items: center; }
.waitlist-copy h2 { font-family: var(--display); font-size: 28px; line-height: 34px; font-weight: 500; letter-spacing: -0.3px; color: var(--ink); }
.waitlist-copy p { margin-top: 12px; }
.waitlist-card { background: var(--tint-purple); border-radius: var(--r-card); padding: 28px; display: grid; gap: 12px; }
.waitlist-field { display: grid; gap: 6px; }
.waitlist-field label { font-size: 15px; font-weight: 600; color: var(--ink); }
.waitlist-field input, .waitlist-field select {
  width: 100%; min-height: 48px; font-family: var(--body); font-size: 16px; padding: 13px 16px;
  border: 1px solid var(--hairline); border-radius: var(--r-btn); background: var(--card); color: var(--ink); outline: none;
}
.waitlist-promise { font-size: 15px; line-height: 22px; color: var(--steel); }
@media (max-width: 768px) {
  .waitlist-section { grid-template-columns: 1fr; gap: 24px; }
  .waitlist-card { padding: 20px; border-radius: var(--r-panel); }
}


/* ---- crisis.css ---- */
.crisis-note { background: var(--tint-red); }
.crisis-note p { font-size: 18px; line-height: 27px; letter-spacing: normal; color: var(--ink); }
.crisis-note a { color: var(--orange); font-weight: 600; }


/* ---- custom.css ---- */
/* =====================================================================
   The custom blocks, in Miro's system.

   These classes used to be styled by CSS stored alongside the content in
   the CMS, which the build appended last so it beat every stylesheet in
   this repo. That inline CSS is switched off on this branch (see
   build/blocks.mjs) and replaced here, so the whole site is styled by one
   system rather than two arguing.

   Everything is the same object: a white card at 20px riding on the grey
   ground, 24 to 40px of padding, Hanken Grotesk for display, Noto Sans
   for text, one red accent.
   ===================================================================== */

/* ---- Shared shell for every custom band --------------------------- */
.about-hero, .founder-block, .about-hl, .hero-wrap, .home-middle,
.view-all-strip, .hl-hero-text, .hl-intro, .hl-tools, .hl-close-cta,
.prog-cards, .tool-grid {
  max-width: var(--shell); margin: 20px auto; width: 100%;
  background: var(--card); border-radius: var(--r-card); padding: 48px 40px;
}

/* ---- About -------------------------------------------------------- */
.about-hero h1 { font-family: var(--display); font-size: 48px; line-height: 54px;
  font-weight: 500; letter-spacing: normal; color: var(--ink); max-width: 18ch; }
.about-hero p { margin-top: 16px; max-width: 46ch; }
.about-hl { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.about-hl-image { border-radius: var(--r-panel); overflow: hidden; }
.about-hl-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.about-hl-text h2 { margin-bottom: 16px; }

.founder-block { display: grid; grid-template-columns: 240px 1fr; gap: 40px; align-items: start; }
.founder-photo { border-radius: var(--r-panel); overflow: hidden; }
.founder-photo img { width: 100%; display: block; }
.founder-title { font-family: var(--body); font-size: 16px; font-weight: 600; color: var(--orange); margin-bottom: 8px; }
.founder-body p { margin-bottom: 16px; }
.founder-links { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 8px; }

/* ---- Homepage ------------------------------------------------------ */
.hero-wrap { display: grid; grid-template-columns: 1.4fr 1fr; gap: 24px; padding: 24px; }
.hero-featured { display: grid; gap: 0; border-radius: var(--r-panel); overflow: hidden; background: var(--tint-purple); }
.hero-featured-image { border-radius: var(--r-panel) var(--r-panel) 0 0; overflow: hidden; }
.hero-featured-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-featured-body { padding: 28px; }
.hero-featured-body h1, .hero-featured-body h2 { font-family: var(--display); font-size: 40px;
  line-height: 46px; font-weight: 500; letter-spacing: -0.3px; color: var(--ink); }
.hero-byline { font-size: 16px; color: var(--steel); margin-top: 12px; }
.hero-sidebar { display: grid; gap: 16px; align-content: start; }
a.hero-featured, a.sidebar-article, .prog-card, .tool-card { text-decoration: none; }
.hero-featured-body h1, .hero-featured-body h2, .sidebar-article-title { text-decoration: none; }
.sidebar-article { display: grid; grid-template-columns: 96px 1fr; gap: 14px; align-items: center;
  background: var(--card); border-radius: var(--r-panel); padding: 12px; text-decoration: none; }
.sidebar-article-image { border-radius: var(--r-btn); overflow: hidden; aspect-ratio: 3/2; }
.sidebar-article-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sidebar-article-tag, .article-meta { font-family: var(--body); font-size: 14px; font-weight: 600;
  letter-spacing: normal; text-transform: none; color: var(--orange); }
.sidebar-article-title { font-family: var(--display); font-size: 17px; line-height: 23px;
  font-weight: 500; color: var(--ink); margin-top: 4px; }
.sidebar-article-meta { font-size: 14px; color: var(--stone); }
.view-all-strip { display: flex; justify-content: flex-end; padding: 20px 40px; }
.home-middle { padding: 0; background: transparent; }

/* ---- Habit Lab ----------------------------------------------------- */
.hl-hero-text { display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: end; }
.hl-eyebrow { font-family: var(--body); font-size: 16px; font-weight: 600; letter-spacing: normal;
  text-transform: none; color: var(--orange); }
.hl-head { font-family: var(--display); font-size: 48px; line-height: 54px; font-weight: 500;
  letter-spacing: normal; color: var(--ink); }
.hl-hero-image, .hl-cover { border-radius: var(--r-card); overflow: hidden; }
.hl-hero-image img, .hl-cover img, .hl-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hl-hero-btns { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 24px; }
.hl-intro { display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; }
.hl-intro-note { font-size: 16px; color: var(--steel); }

/* The quiz box was a square grey slab with a solid red button in it — the old
   design, untouched. It becomes a card in the system: white, 20px, a hairline
   to read against the white section behind it, and the same outline pill the
   homepage uses for this exact link. */
.hl-intro-aside {
  background: var(--card) !important; border: 1px solid var(--hairline);
  border-radius: var(--r-card) !important; padding: 28px !important;
  display: flex !important; flex-direction: column; align-items: flex-start;
  gap: 16px !important; align-self: start;
}
.hl-intro-aside p {
  font-family: var(--display) !important; font-size: 22px !important;
  line-height: 29px !important; font-weight: 500 !important;
  letter-spacing: -0.2px; color: var(--ink) !important; margin: 0 !important;
}
.hl-intro-aside .hl-intro-note { margin: 0; }
.hl-links { display: flex; gap: 20px; flex-wrap: wrap; }
.hl-quiz-link { font-family: var(--body); font-size: 16px; font-weight: 600; letter-spacing: normal;
  text-transform: none; color: var(--orange); }
.hl-card, .hl-slide { border-radius: var(--r-panel); overflow: hidden; }
.hl-scrim { background: linear-gradient(to top, rgba(28,28,30,0.75), transparent); }
.hl-tools-head { margin-bottom: 24px; }

/* ---- Programme and tool cards: Miro's 20px card, tinted. ---------- */
.prog-cards, .tool-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; background: transparent; padding: 0; }
.prog-card, .tool-card { background: var(--card); border-radius: var(--r-card); overflow: hidden; text-decoration: none; display: block; }
.prog-card-image { aspect-ratio: 4/3; overflow: hidden; }
.prog-card-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.prog-card-body, .tool-card-body { padding: 24px; }
.prog-card-label, .tool-status, .tool-technique { font-family: var(--body); font-size: 14px;
  font-weight: 600; letter-spacing: normal; text-transform: none; color: var(--orange); }
.prog-card-title, .tool-card-head { font-family: var(--display); font-size: 20px; line-height: 27px;
  font-weight: 500; color: var(--ink); margin: 8px 0; }
.prog-card-cta, .prog-card-arrow { font-family: var(--body); font-size: 16px; font-weight: 600; color: var(--orange); }
.tool-card-art { aspect-ratio: 16/10; background: var(--tint-purple); }
.tool-card-live { color: var(--orange); }
.tool-soon { color: var(--stone); }

/* ---- Careers and forms --------------------------------------------- */
.pk-role { background: var(--card); border-radius: var(--r-card); padding: 32px; margin-bottom: 20px; }
.pk-role-head { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.pk-role-type { font-size: 16px; color: var(--steel); }
.pk-role-photo { border-radius: var(--r-panel); overflow: hidden; }
.pk-role-list h3, .pk-role-pay h3 { font-family: var(--body); font-size: 16px; font-weight: 600;
  letter-spacing: normal; text-transform: none; color: var(--orange); margin-bottom: 12px; }
.pk-role-list ul { margin: 0; padding-left: 20px; }
.pk-role-list li { font-size: 18px; line-height: 27px; letter-spacing: normal; margin-bottom: 8px; }
.pk-form { background: var(--card); border-radius: var(--r-card); padding: 32px; display: grid; gap: 20px; }
.pk-fieldset { display: grid; gap: 16px; border: 0; }
.pk-field { display: grid; gap: 6px; }
.pk-field label { font-size: 15px; font-weight: 600; color: var(--ink); }
.pk-field input:not([type=checkbox]), .pk-field select, .pk-field textarea {
  width: 100%; min-height: 48px; font-family: var(--body); font-size: 16px; padding: 13px 16px;
  border: 1px solid var(--hairline); border-radius: var(--r-btn);
  background: var(--card); color: var(--ink); outline: none;
}
.pk-consent, .pk-checks { font-size: 16px; color: var(--slate); }
.pk-form-msg { font-size: 16px; }
.pk-faq { display: grid; gap: 12px; }
.pk-group { display: grid; gap: 12px; }

/* ---- Tables: their 12px panel, hairline rules. --------------------- */
.pk-table-wrap { overflow-x: auto; border: 1px solid var(--hairline); border-radius: var(--r-panel); }
.pk-table { border-collapse: collapse; width: 100%; min-width: 460px; font-size: 17px; }
.pk-table th { text-align: left; font-family: var(--body); font-size: 15px; font-weight: 600;
  letter-spacing: normal; text-transform: none; color: var(--steel); background: var(--surface);
  padding: 14px 20px; border-bottom: 1px solid var(--hairline); }
.pk-table td { padding: 16px 20px; border-bottom: 1px solid var(--hairline-soft); color: var(--slate); }
.pk-table tr:last-child td { border-bottom: 0; }
.pk-table td:first-child { font-weight: 600; color: var(--ink); }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.red { color: var(--orange); }

@media (max-width: 768px) {
  .about-hero, .founder-block, .about-hl, .hero-wrap, .home-middle,
  .view-all-strip, .hl-hero-text, .hl-intro, .hl-tools, .hl-close-cta {
    padding: 24px 20px; margin: 12px; width: auto; border-radius: var(--r-panel);
  }
  .about-hero h1, .hl-head { font-size: 36px; line-height: 40px; }
  .about-hl, .founder-block, .hero-wrap, .hl-hero-text, .hl-intro { grid-template-columns: 1fr; gap: 24px; }
  .prog-cards, .tool-grid { grid-template-columns: 1fr; gap: 12px; margin: 12px; width: auto; }
  .hero-featured-body h1, .hero-featured-body h2 { font-size: 28px; line-height: 34px; letter-spacing: -0.6px; }
  .pk-role, .pk-form { padding: 24px; border-radius: var(--r-panel); }
}


/* These three came out of the contrast audit on the Habit Lab page, all with
   the same cause: the old design put this text on a dark card, and the page's
   own markup still carries that assumption. On a white Miro card it was white
   on white, red on red, and ink on purple. */
.prog-card p, .prog-card-body p { color: var(--slate); }
.prog-card-cta { background: var(--orange); color: var(--white); border-radius: var(--r-btn);
  padding: 8px 14px; display: inline-block; font-size: 15px; font-weight: 600; }


/* One tool card still carried a purple fill from the page's own markup, which
   put ink, slate and red text on a dark ground. Every card is a white Miro
   card; the design decides this, not the page. */
a.tool-card, .tool-grid .tool-card { background: var(--card) !important; }

/* The hand-written pages set a font-family on heading classes, which beats the
   element selector in _shared.css. This system wins, so it says so. */
h1, h2, h3, h4, h5, .hl-head, .about-hero h1, .prog-hero-text h1, .legal-content h1 {
  font-family: var(--display) !important;
}
p, li, body { font-family: var(--body); }


/* ===== Miro's card anatomy, from the "Need help getting started?" row.
   Label as a tinted pill top-left, a circular arrow top-right, the heading
   under them, and the artwork anchored to the bottom bleeding to the card
   edges. Ours stacked image-then-text-then-badge, which is why it read as
   cluttered next to theirs. Soft shadow, 20px, white on a light ground. */
.prog-cards, .tool-grid { align-items: stretch; }

.prog-card, .tool-card {
  position: relative; display: flex; flex-direction: column;
  background: var(--card); border-radius: var(--r-card); overflow: hidden;
  box-shadow: 0 1px 2px rgba(28,28,30,0.04), 0 8px 24px rgba(28,28,30,0.06);
  padding: 24px 24px 0; min-height: 420px; text-decoration: none;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.prog-card:hover, .tool-card:hover {
  box-shadow: 0 2px 4px rgba(28,28,30,0.06), 0 16px 40px rgba(28,28,30,0.10);
  transform: translateY(-2px);
}

/* The pill. Tinted ground, darker text of the same hue — never white on red,
   which is what a button looks like. */
.prog-card-label, .tool-status, .tool-technique {
  align-self: flex-start; background: var(--tint-red); color: var(--orange-dark);
  border-radius: var(--r-pill); padding: 6px 14px;
  font-family: var(--body); font-size: 15px; font-weight: 600; letter-spacing: normal;
  text-transform: none; display: inline-block; margin: 0;
}
.tool-status { background: var(--tint-purple); color: var(--purple); }

/* The arrow, top right. Their black circle becomes our purple one. */
.prog-card-cta, .prog-card-arrow {
  position: absolute; top: 20px; right: 20px;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--purple); color: var(--white);
  display: grid; place-items: center; padding: 0;
  font-size: 0; overflow: hidden;
}
.prog-card-cta::after, .prog-card-arrow::after {
  content: "↗"; font-size: 15px; line-height: 1; color: var(--white);
}
.prog-card:hover .prog-card-arrow, .tool-card:hover .prog-card-arrow { background: var(--orange); }

.prog-card-title, .tool-card-head {
  font-family: var(--display); font-size: 28px; line-height: 34px; font-weight: 500;
  letter-spacing: -0.4px; color: var(--ink); margin: 16px 0 8px; max-width: 14ch;
}
.prog-card-body p, .tool-card-body p { font-size: 17px; line-height: 25.5px; color: var(--slate); margin-bottom: 20px; }
.prog-card-body, .tool-card-body { padding: 0; display: contents; }

/* Artwork last, bleeding to the card's edges. */
.prog-card-image, .tool-card-art {
  order: 99; margin: auto -24px 0; border-radius: 0;
  aspect-ratio: 16/11; overflow: hidden; background: var(--tint-purple);
}
.prog-card-image img, .tool-card-art img { width: 100%; height: 100%; object-fit: cover; display: block; }

@media (max-width: 768px) {
  .prog-card, .tool-card { min-height: 0; padding: 20px 20px 0; }
  .prog-card-title, .tool-card-head { font-size: 24px; line-height: 30px; }
  .prog-card-image, .tool-card-art { margin: auto -20px 0; }
}


/* The real markup carries three things I had styled as one: a .prog-card-reveal
   overlay from the old hover design, a .prog-card-cta inside it, and a separate
   .prog-card-arrow in the body. One arrow per card.

   I had promoted the .prog-card-cta and hidden the arrow, but the cta lives
   inside the reveal, and a hidden parent hides it too, so the cards ended up
   with no badge at all. The arrow is the one that sits in the body, so that is
   the one that becomes the badge. */
.prog-card-arrow {
  position: absolute !important; top: 20px !important; right: 20px !important;
  width: 32px !important; height: 32px !important; border-radius: 50% !important;
  background: var(--purple) !important; display: grid !important; place-items: center !important;
  padding: 0 !important; margin: 0 !important; font-size: 0 !important;
  opacity: 1 !important; color: transparent !important; z-index: 2;
}
/* The label and title come first, the artwork last and bleeding to the edges. */
.prog-card-body { display: contents !important; }
.prog-card-label { order: 1; }
.prog-card-title { order: 2; }
.prog-card-body p { order: 3; }
.prog-card-image { order: 99 !important; }


/* tool-card-live is a modifier on the card, not a label — styling it as a pill
   made the card itself a 9999px circle and forced display:block, which is what
   broke the Habit Lab row. It marks the one tool that is shipped, so it gets a
   red edge and nothing else. */
.tool-card.tool-card-live {
  border-radius: var(--r-card) !important;
  display: flex !important;
  box-shadow: 0 0 0 2px var(--orange), 0 8px 24px rgba(28,28,30,0.08) !important;
}
/* The status pills were grey on grey. Live is red, everything else is purple. */
.tool-status { background: var(--tint-purple) !important; color: var(--purple) !important; }
.tool-card-live .tool-status { background: var(--tint-red) !important; color: var(--orange-dark) !important; }
.tool-technique {
  background: var(--tint-red); color: var(--orange-dark);
  border-radius: var(--r-pill); padding: 6px 14px; align-self: flex-start;
  font-size: 15px; font-weight: 600; order: 3; margin-bottom: 20px;
}
/* The head carries the name and the status side by side. */
.tool-card-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; order: 1; }
.tool-card-body { display: contents !important; }
.tool-card-body p { order: 2; }
.tool-card-art { order: 99 !important; border-radius: 0 !important; }


/* Nothing on miro.com runs to the window edge. The hand-written hero images
   were still full-bleed. */
.hl-hero-image, .hl-cover, .about-hl-image, .section-image, .prog-hero-image {
  max-width: var(--shell) !important; margin-left: auto !important; margin-right: auto !important;
  width: 100% !important; border-radius: var(--r-card) !important; overflow: hidden !important;
}
/* One band height for the whole site. The two pictures on About had no ratio
   at all, so each one took its source's natural height at 1195px wide: the
   first came out 796px and the second 1790px, which is close to two screens
   of one photograph. They are the same band as every other one now. */
.hl-hero-image, .hl-cover, .section-image { max-height: 520px !important; aspect-ratio: 16 / 9 !important; }
.hl-hero-image img, .hl-cover img, .section-image img {
  width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important;
}
@media (max-width: 768px) {
  .hl-hero-image, .hl-cover, .about-hl-image, .section-image, .prog-hero-image {
    margin-left: 12px !important; margin-right: 12px !important; width: auto !important;
    border-radius: var(--r-panel) !important;
  }
}


/* ===== Audit fixes, whole site at 1440 ==============================
   Eight pages still had tracked uppercase labels — the one thing Miro
   does nowhere. They survived because the hand-written pages' own CSS
   is more specific than mine. This system wins, so it says so. */
.hl-eyebrow, .hl-links a, .hl-quiz-link, .pk-table th, .prog-fact-label,
.section-label, .tile-num, .prog-badge, .about-col-label, .sidebar-article-tag,
.article-meta, .j-cat, .j-pill, .a-side-head, .waitlist-field label,
.pk-field label, .tool-status, .tool-technique, .prog-card-label,
.footer-email-row button, .btn-primary, .nav-cta, .btn-text, .text-link,
.founder-title, .person-role, .last-updated, .prog-sources summary {
  text-transform: none !important;
  letter-spacing: normal !important;
}
/* and they come up to a readable size */
.hl-eyebrow, .hl-links a, .hl-quiz-link, .prog-fact-label, .section-label,
.tile-num, .about-col-label, .sidebar-article-tag, .article-meta, .j-cat,
.j-pill, .a-side-head, .founder-title { font-size: 15px !important; font-weight: 600 !important; }

/* The filter pills on the journal index are controls, so they look like it. */
.j-pill {
  background: var(--card); border: 1px solid var(--hairline); border-radius: var(--r-pill);
  padding: 8px 16px; color: var(--ink); cursor: pointer;
}
.j-pill.on { background: var(--orange); border-color: var(--orange); color: var(--white); }

/* Long-form copy in a 1195px shell ran to 106 characters on the programme
   pages and 262 on the quiz. Miro's own body never approaches that. */
.prog-prose p, .legal-content p, .what-is-body p, .about-col p,
.hl-intro-text p, .prog-lede, .waitlist-copy p, .quiz-intro p, .quiz-q p {
  max-width: 68ch;
}
.prog-section > p, .prog-section > div > p { max-width: 68ch; }


/* Naming the classes one page at a time was losing to markup I had not read.
   Miro uses no uppercase transform and no positive tracking anywhere, so this
   is stated once, globally. Headings keep their negative tracking, which is a
   different thing and is theirs. */
body *, body *::before, body *::after { text-transform: none !important; }
body *:not(h1):not(h2):not(h3):not(h4):not(h5):not(.prog-card-title):not(.tool-card-head):not(.hl-head) {
  letter-spacing: normal !important;
}

/* A paragraph in a 1195px shell ran to 262 characters on the quiz. Nothing in
   this system should exceed a readable measure. */
p { max-width: 68ch; }
.footer-disclaimer, .fine, td p, th p, .pk-table p { max-width: none; }


/* The sidebar rows were a 96x64 stamp beside a title that wrapped to four
   lines in a 168px column — the image read as an afterthought. MiroBlog's
   cards put the image on top at the full width of the card, which is the only
   thing that works in a 302px rail. */
.hero-sidebar { gap: 24px; }
.sidebar-article {
  display: grid !important; grid-template-columns: 1fr !important; gap: 12px !important;
  background: var(--card); border-radius: var(--r-card); padding: 0 0 4px !important; overflow: hidden;
}
.sidebar-article-image {
  aspect-ratio: 16 / 10; width: 100%; border-radius: var(--r-panel) !important; overflow: hidden;
}
.sidebar-article-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sidebar-article-body { display: grid; gap: 6px; }
.sidebar-article-title { font-size: 19px !important; line-height: 25px !important; margin-top: 0 !important; }
.sidebar-article-tag { font-size: 14px !important; }
.sidebar-article-meta { font-size: 14px !important; }

/* With the rail carrying real images, the split can give it more room. */
.hero-wrap { grid-template-columns: 1.25fr 1fr; }

/* ===== Old-system leftovers, removed at the root ======================
   The audit found the same four habits on every page, all of them from
   the stylesheets underneath rather than from anything written here.

   1. Opacity used to make grey. The old system dimmed text with
      opacity 0.4 to 0.8 instead of choosing a colour, which is why the
      copy looked washed out. Miro sets a colour and leaves it alone.
   2. Purple used as a text colour. Here purple is a surface.
   3. The old tokens: #FAFAFA white, #F2F2F0 grey, #0D0D0B ink and the
      rgba(13,13,11,0.08) hairline, still coming from each page's own
      :root and beating anything scoped to a class.
   4. The old typeface on form controls and buttons, which do not
      inherit font-family.
   ===================================================================== */

:root {
  --white: #FFFFFF !important;
  --grey: #F0F0F0 !important;
  --ink: #1C1C1E !important;
  --faint: #EEF0F3 !important;
  --line: #E0E2E8 !important;
  --purple: #3c3158 !important;
  --orange: #c0392b !important;
  --orange-dark: #9A2E22 !important;
}

/* 1. No more opacity-as-grey. Decorative layers keep theirs. */
p, li, span, a, h1, h2, h3, h4, h5, h6, small, em, strong, b, label, legend,
summary, td, th, figcaption, button, input, select, textarea, dt, dd, blockquote {
  opacity: 1 !important;
}
.hl-scrim, .error-num, .material-icons, [class*="scrim"], [class*="overlay"],
[class*="watermark"], .a-video img, .ambient { opacity: revert !important; }

/* Anything that was dimmed now takes the muted colour instead. */
.footer-copyright, .footer-disclaimer { color: rgba(255,255,255,0.75) !important; }
.prog-fact-label, .waitlist-promise, .hl-intro-note, .prog-lede,
.person-role, .last-updated, .teach-role, .quiz-option-desc, small {
  color: #63666F !important;
}

/* 2. Purple is a surface, not a text colour. */
h1, h2, h3, h4, h5, .a-listen-label, .a-evidence-btn, summary, legend,
label, th, .prog-facts b, .tool-status { color: #1C1C1E !important; }
footer h1, footer h2, footer h3, footer h4, footer h5, footer p, footer a { color: #FFFFFF !important; }
.tool-status { color: #3c3158 !important; }

/* 3. Old radii. */
/* This used to be [class] { border-radius: unset }, which cleared the radius
   on every classed element on the site — the nav button and the featured
   article card among them. Old radii are named explicitly instead. */
.a-avatar, .person-photo, .person-placeholder { border-radius: 50%; }
.pk-table-wrap, .a-lang-btn, .a-evidence-btn, details, .a-copy,
input, select, textarea, .btn-submit { border-radius: 8px !important; }
.pk-table-wrap, .lexical-table-container { border-radius: 12px !important; }

/* 4. The typeface, including the controls that never inherit it. */
body, p, li, span, a, div, small, em, strong, b, label, legend, summary,
td, th, figcaption, input, select, textarea, button, .wordmark, .j-pill,
.quiz-q, .quiz-option, .quiz-option-text, .btn-next, .btn-submit, .error-num {
  font-family: 'Noto Sans', sans-serif !important;
}
/* That rule catches `span` with !important, so it was overriding the icon
   font too and the quiz drew its ligature names as words: "bolt",
   "lock_open", "spa", "search" beside each answer. An icon font is a
   typeface doing a job, not body copy. */
.material-icons, .material-symbols-outlined, .material-symbols-rounded {
  font-family: 'Material Icons', 'Material Symbols Outlined' !important;
  font-weight: normal !important; font-style: normal !important;
  letter-spacing: normal !important; text-transform: none !important;
  white-space: nowrap; word-wrap: normal; direction: ltr;
  -webkit-font-feature-settings: 'liga'; font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6, .hl-head, .a-tldr-head, .prog-card-title, .tool-card-head,
.sidebar-article-title, .hero-featured-body h1, .hero-featured-body h2 {
  font-family: 'Hanken Grotesk', sans-serif !important;
}

/* 5. Links are not underlined by a border. */
a { border-bottom: 0 !important; }
.a-body a, .prog-prose a, .legal-content a { text-decoration: underline; text-underline-offset: 3px; }

/* 6. Old surfaces. */
.a-main, .a-side, .j-filters, .a-lang-btn { background: #FFFFFF !important; }
.a-listen, .a-side-thumb, .j-card-img { background: #F0F0F0 !important; }


/* ===== Proportion fixes ============================================
   The sidebar cards went from a 96px stamp to media at 77% of the
   card — corrected in one direction and overshot in the other. Their
   blog cards sit nearer 60%, which is what a 16/9 crop and a little
   breathing room under the text gives. */
.sidebar-article-image { aspect-ratio: 16 / 9 !important; }
.sidebar-article { padding: 0 0 12px !important; }
.sidebar-article-body { gap: 8px; padding: 0 2px; }

/* Same overshoot on the programme cards: the artwork was 75% of the
   card. 16/9 leaves the label, heading and copy room to be read. */
.prog-card-image, .tool-card-art { aspect-ratio: 16 / 9 !important; }

/* The contact page sets its own h1 at 52px, which is 3.3x its body copy.
   Nothing in this system exceeds the h1 scale. */
h1 { font-size: 48px !important; line-height: 54px !important; }
@media (max-width: 768px) { h1 { font-size: 32px !important; line-height: 37px !important; } }

/* The scrim is a gradient over the Habit Lab photograph, so it is
   decorative and correctly empty — but it was drawn over a strip that no
   longer has a dark photograph under it on the homepage, so it read as a
   459px block of nothing. It only applies where there is an image. */
.hl-scrim { display: none; }
.hl-slide .hl-scrim, .hl-cover .hl-scrim { display: block; }


/* ===== Homepage ====================================================

   The slider. Miro's own file has no carousel and no cross-fade: what
   it has is pill tabs, and what the live site uses for a row of things
   is a horizontally scrolling card row with circular arrow controls.
   Ours was three images stacked on top of each other cross-fading over
   1.1 seconds, which is not a pattern they use anywhere. The three
   slides are now three cards in a scrolling row, all visible, and the
   Glide / Reset / Thrive links under it become the pill tabs. */
.hl-card {
  position: static !important; height: auto !important;
  display: flex; gap: 20px; overflow-x: auto; padding-bottom: 8px;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
}
.hl-slide {
  position: relative !important; opacity: 1 !important; inset: auto !important;
  transition: none !important; flex: 0 0 380px; scroll-snap-align: start;
  border-radius: var(--r-card); overflow: hidden; aspect-ratio: 4 / 3;
}
.hl-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Their pill tabs, for the three programmes. */
.hl-links { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 24px; }
.hl-links a, .hl-quiz-link {
  background: var(--card); border: 1px solid var(--hairline); border-radius: var(--r-pill);
  padding: 10px 20px; color: var(--ink); font-size: 16px; font-weight: 600; text-decoration: none;
}
.hl-links a.on, .hl-links a:hover { background: var(--ink); border-color: var(--ink); color: var(--white); }
.hl-quiz-link { border-color: var(--orange); color: var(--orange); }
.hl-quiz-link:hover { background: var(--orange); color: var(--white); }

/* The "All articles" strip was its own little card under the hero. It is
   the hero's own footer, so it joins it. */
.hero-wrap { border-radius: var(--r-card) var(--r-card) 0 0 !important; padding-bottom: 8px !important; }
.view-all-strip {
  margin-top: -20px !important; border-radius: 0 0 var(--r-card) var(--r-card) !important;
  padding: 8px 24px 20px !important; background: var(--card);
}

/* The featured card and the rail are the same height, so the text block
   was left with blank space under it. The image takes the slack instead. */
.hero-featured { display: flex !important; flex-direction: column; }
.hero-featured-image { flex: 1 1 auto; min-height: 260px; }
.hero-featured-body { flex: 0 0 auto; }

/* And the hero reads more quietly: the headline comes down from 40px,
   which was competing with the page's own h1 scale. */
.hero-featured-body h1, .hero-featured-body h2 {
  font-size: 30px !important; line-height: 37px !important; letter-spacing: -0.3px !important;
}
.hero-featured-body { padding: 24px !important; }


/* Three corrections to the pass above.

   The image took all the slack instead of some of it, so it grew to 689px
   and squeezed the text into 128. The grid no longer stretches the two
   columns to match: each is its natural height, and the image is capped. */
.hero-wrap { align-items: start !important; }
.hero-featured { display: grid !important; }
.hero-featured-image { flex: none; max-height: 420px; aspect-ratio: 16 / 10; }

/* The old stylesheet positions .hl-links absolutely against the slide, so
   the pill tabs were floating over the featured photograph. They belong
   under the row. */
.hl-links { position: static !important; left: auto !important; bottom: auto !important; }
.hl-card { overflow-x: auto !important; overflow-y: hidden !important; }


/* Contact, success and 404 still set their own 16px body copy, which put the
   48px h1 at 3x the text under it. One body size across the site. */
body p, body li { font-size: 18px; line-height: 27px; }
.footer-copyright, .footer-disclaimer, .fine, .meta, .sidebar-article-meta,
.prog-sources li, .privacy-note, .last-updated, small { font-size: 15px; line-height: 23px; }


/* The hero card was 682px tall while the featured column was 425, leaving
   233px of blank white under the article. The two columns are the same
   height now and the image takes the difference rather than the page. */
.hero-wrap { align-items: stretch !important; }
.hero-featured { display: grid !important; grid-template-rows: 1fr auto; }
.hero-featured-image { width: 100% !important; max-height: none !important;
  aspect-ratio: auto !important; min-height: 260px; }
.hero-featured-image img { width: 100%; height: 100%; object-fit: cover; display: block; }


/* The Habit Lab block now renders real cards, so the rules that were holding
   the old slide markup together are retired. */
.hl-card, .hl-slide, .hl-scrim, .hl-cover, .hl-links { all: unset; display: none !important; }

/* Hover, which the whole site was missing. Miro lifts a card and darkens an
   action; nothing here moved at all. */
.j-card, .artcard, .sidebar-article, .tile, .person {
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.j-card:hover, .artcard:hover, .sidebar-article:hover {
  box-shadow: 0 2px 4px rgba(28,28,30,0.06), 0 16px 40px rgba(28,28,30,0.10);
  transform: translateY(-2px);
}
.hero-featured { transition: box-shadow 0.2s ease; }
.hero-featured:hover { box-shadow: 0 16px 40px rgba(28,28,30,0.10); }
.hero-featured-image img, .sidebar-article-image img, .j-card-img img {
  transition: transform 0.35s ease;
}
.hero-featured:hover .hero-featured-image img,
.sidebar-article:hover .sidebar-article-image img,
.j-card:hover .j-card-img img { transform: scale(1.04); }
.hero-featured-image, .sidebar-article-image, .j-card-img { overflow: hidden; }


/* The featured image was taking all the slack needed to match the rail, so it
   grew to 697px and pushed the headline off the first screen. Both columns are
   capped so the whole hero — picture, category, headline, byline — lands above
   the fold on a laptop. */
.hero-wrap { align-items: start !important; }
.hero-featured-image { aspect-ratio: 16 / 9 !important; max-height: 360px !important; min-height: 0 !important; }
.sidebar-article-image { max-height: 150px !important; }
.hero-featured-body { padding: 20px 24px 24px !important; }


/* Back to image-left, text-right — which is what was asked for in the first
   place. The original problem was a 96px stamp, not the arrangement; the
   answer was a bigger thumbnail, not a full-bleed image on top of the text. */
.sidebar-article {
  display: grid !important; grid-template-columns: 180px 1fr !important;
  gap: 16px !important; align-items: center !important;
  padding: 0 !important; background: transparent !important; border-radius: 0 !important;
  overflow: visible !important;
}
.sidebar-article-image {
  aspect-ratio: 16 / 10 !important; max-height: none !important; width: 180px !important;
  border-radius: var(--r-panel) !important; overflow: hidden !important;
}
.sidebar-article-body { display: grid; gap: 4px; }
.sidebar-article-title { font-size: 18px !important; line-height: 24px !important; }
.sidebar-article-tag { font-size: 14px !important; }
.sidebar-article-meta { font-size: 14px !important; }

/* Two short rows next to a tall featured card left a block of white. The rows
   spread across the column instead, so the card has no dead space in it. */
.hero-sidebar { align-content: space-between !important; }
.sidebar-article:hover { transform: none; box-shadow: none; }
.sidebar-article:hover .sidebar-article-title { color: var(--orange); }


/* The rail takes three articles — the builder already slices three, there are
   only three published in English so the third slot is waiting on content.
   Sized so three sit comfortably beside the featured card rather than three
   crowding or two floating. */
.hero-sidebar { align-content: start !important; gap: 20px !important; }
.sidebar-article { padding-bottom: 20px !important; border-bottom: 1px solid var(--hairline-soft) !important; }
.sidebar-article:last-child { border-bottom: 0 !important; padding-bottom: 0 !important; }


/* One body size across the site. The sweep found 13px on the quiz, 15 on
   success, 16 on the hand-written pages, 19 on the legal ones and 22 in the
   journal — each page's own stylesheet setting its own. */
body p, body li, body .prog-prose p, body .what-is-body p, body .about-col p,
body .legal-content p, body .hl-prog-blurb, body .quiz-q, body .quiz-option-text,
body .includes-list li, body .check-list li, body .prog-card-body p, body .tile p {
  font-size: 18px; line-height: 27px;
}
/* The sizes that are deliberately not body copy. */
body .footer-copyright, body .footer-disclaimer, body .fine, body .meta,
body .sidebar-article-meta, body .sidebar-article-tag, body .article-meta,
body .prog-sources li, body .privacy-note, body .last-updated, body small,
body .quiz-option-desc, body .hl-prog-status, body .tool-status, body .prog-card-label,
body .person-role, body .waitlist-promise, body figcaption {
  font-size: 15px; line-height: 23px;
}
body .a-standfirst, body .stand { font-size: 22px; line-height: 31px; }


/* Last pass on body size. Naming classes kept losing to markup I had not read,
   so it is stated for the element and the exceptions are named instead. */
p, li { font-size: 18px !important; line-height: 27px !important; }
.footer-copyright, .footer-disclaimer, .fine, .meta, .sidebar-article-meta,
.sidebar-article-tag, .article-meta, .prog-sources li, .privacy-note,
.last-updated, small, .quiz-option-desc, .hl-prog-status, .tool-status,
.prog-card-label, .person-role, .waitlist-promise, figcaption, .hero-byline,
.tool-technique, .prog-fact-label, .j-cat, .a-side-head, td, th {
  font-size: 15px !important; line-height: 23px !important;
}
.a-standfirst, .stand, .prog-lede { font-size: 22px !important; line-height: 31px !important; }
.hl-prog-blurb { font-size: 17px !important; line-height: 25px !important; }


/* No purple panels outside the footer. The journal's lead image placeholder
   was a 380px purple block behind the photograph. */
.j-lead-img { background: var(--grey) !important; }


/* Heading rhythm. The sweep found headings sitting flush on the paragraph
   under them on seven pages — 0px on About and the AI policy, 8px on the
   feature lists. Miro gives a heading room below it in proportion to its
   size, and three times as much above as below. Set once, for the element,
   because every page was deciding this for itself. */
h1 { margin-bottom: 16px; }
h2 { margin-bottom: 14px; }
h3 { margin-bottom: 12px; }
h4, h5 { margin-bottom: 10px; }
h1 + p, h2 + p, h3 + p, h4 + p, h5 + p,
h1 + ul, h2 + ul, h3 + ul, h4 + ul, h1 + ol, h2 + ol, h3 + ol { margin-top: 0; }

/* Headings that sit in a row with something else are laid out, not spaced. */
.pk-role-head h2, .pk-role-head h3, .tool-card-head, .hl-prog-title,
.a-tldr-head, .hl-head h2, .footer-signup h3 { margin-bottom: 0; }
.hl-prog-title { margin: 16px 0 12px; }
.hl-head h2 { margin-bottom: 0; }
.a-tldr-head { margin-bottom: 20px; }
.footer-signup h3 { margin-bottom: 20px; }


/* ===== The founder block =============================================
   The name was an h2 at 36px — a headline. It should read as a sign-off,
   so the bio comes first and the name sits under it like a signature.
   Ordered rather than re-marked-up: the heading is still the heading for
   anything reading the document, it just is not shouted at the reader. */
.founder-block {
  grid-template-columns: 320px 1fr !important; gap: 40px !important;
  align-items: center !important;
}
.founder-photo { border-radius: var(--r-panel); overflow: hidden; }
.founder-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.founder-body { display: flex; flex-direction: column; }
.founder-body p:not(.founder-title) { order: 1; max-width: 62ch; }
.founder-body h2 {
  order: 2; font-family: var(--display); font-size: 20px !important; line-height: 27px !important;
  font-weight: 600 !important; letter-spacing: normal !important; color: var(--ink) !important;
  margin: 20px 0 2px !important; padding-top: 20px; border-top: 1px solid var(--hairline-soft);
}
.founder-title { order: 3; font-size: 15px !important; color: var(--steel) !important; margin: 0 !important; }
.founder-links { order: 4; margin-top: 20px; display: flex; gap: 20px; flex-wrap: wrap; }

/* ===== Two cards, one baseline ======================================
   The buttons sat 54px apart because the copy above them is different
   lengths. The card is a column and the actions are pushed to the floor,
   so they line up whatever the copy does. */
.cta-about { display: flex; flex-direction: column; }
.cta-about h2, .cta-about p { flex: 0 0 auto; }
.cta-about p { margin-bottom: 24px; }
.cta-links { margin-top: auto; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }

/* The second of the two paired CTAs used to be told apart from the first by
   an ink outline that filled ink on hover — from when the first was a solid
   red slab and two reds side by side were too much. Both are the same outline
   pill now, so "Work with us" no longer turns black, and the pair is
   distinguished by position rather than by colour. */


/* The portrait collapsed to 320x0: height:100% inside a grid item that is
   centred has no height to be 100% of. It gets its own ratio instead. */
.founder-photo { aspect-ratio: 1 / 1; height: auto !important; align-self: start; }
.founder-photo img { height: 100%; width: 100%; object-fit: cover; }


/* ===== Buttons, settled ============================================
   The header button is an outline, not a fill — the one in the nav was
   competing with the actual call to action on every page. It takes the
   "Take the quiz" shape, which is the pill: a 1px border, no fill, and
   the fill arriving on hover. Every header on the site uses it.

   The footer keeps its red. It is the one filled button below the fold
   and it is the thing to do there. */
.nav-cta {
  background: transparent !important; color: var(--orange) !important;
  border: 1px solid var(--orange) !important; border-radius: 9999px !important;
  height: 44px !important; padding: 0 20px !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  font-size: 16px !important; font-weight: 600 !important; line-height: 1 !important;
  transition: background-color 0.2s ease, color 0.2s ease !important;
}
.nav-cta:hover { background: var(--orange) !important; color: var(--white) !important; }

.footer-email-row button {
  background: var(--orange) !important; color: var(--white) !important;
  border-radius: 8px !important;
}
.footer-email-row button:hover { background: var(--orange-dark) !important; color: var(--white) !important; }

/* The journal footer sat at 16px where every other page is 20px. */
footer { border-radius: 20px 20px 0 0 !important; }


/* ===== Button shape, one rule ========================================
   Named, not inferred. This was `button:not(...)` \u2014 every <button> on the
   site gets the pill \u2014 which is wrong for any control that happens to be a
   button without looking like one. It bent the evidence tabs' underline into
   a lens, and the exception list was growing one :not() at a time.

   A button earns the pill by being on this list. The single exception is the
   footer subscribe, which sits against a square-ended input. */
.btn-primary, .btn-text, .text-link, .nav-cta, .hl-quiz-link,
.btn-submit, .btn-next, .btn-back, .result-restart, .quiz-option, .j-pill,
.waitlist-card button, .waitlist-form button,
a.btn-primary, input[type=submit] {
  border-radius: 9999px !important;
}
/* Circles stay circles. */
.prog-card-cta, .hl-prog-arrow, .prog-card-arrow, .a-avatar, .a-play,
.person-photo, .person-placeholder, .a-share a, .a-share button { border-radius: 50% !important; }
/* The footer pair: a rounded input and its button, the one square-ish shape. */
.footer-email-row button, .footer-email-row input { border-radius: 8px !important; }


/* ===== Button fill, one rule =========================================
   Every button outside the footer is the same object: a pill with no fill,
   a red edge and a red label, that fills red on hover. Nothing is a solid
   red slab any more.

   Audited across 17 pages, this replaced four different treatments: red
   fill at 9999px, red fill at 6px, red fill at 0px, and — at the end of
   Habit Lab — a white fill with ink text and no border at all, which was
   an invisible button on a white card.

   Left out on purpose: the footer subscribe, which keeps its red fill and
   8px against a square-ended input; the quiz answers, which are choices
   rather than actions; and the article language picker, which opens a menu.
   The journal filters follow the rule and use the red fill for the one that
   is selected, because there it means state, not emphasis. */
a.btn-primary, button.btn-primary, .btn-primary,
.nav-cta, .hl-quiz-link, .btn-submit, .btn-next,
.waitlist-card button, .waitlist-form button, .j-pill, input[type=submit] {
  display: inline-flex !important; align-items: center !important;
  justify-content: center !important; gap: 8px;
  min-height: 48px !important; padding: 0 24px !important;
  background: transparent !important;
  border: 1px solid var(--orange) !important;
  border-radius: var(--r-pill) !important;
  color: var(--orange) !important;
  font-family: var(--body) !important; font-size: 16px !important;
  font-weight: 600 !important; line-height: 1 !important;
  letter-spacing: normal !important; text-transform: none !important;
  text-decoration: none !important; width: auto !important;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease !important;
}
a.btn-primary:hover, button.btn-primary:hover, .btn-primary:hover,
.nav-cta:hover, .hl-quiz-link:hover, .btn-submit:hover, .btn-next:hover,
.waitlist-card button:hover, .waitlist-form button:hover, .j-pill:hover, input[type=submit]:hover {
  background: var(--orange) !important; color: var(--white) !important;
  border-color: var(--orange) !important;
}
/* The nav button is the one that sits in a 73px bar, so it stays shorter. */
.nav-cta { min-height: 44px !important; padding: 0 20px !important; }
/* A filter that is on. */
.j-pill { background: transparent !important; min-height: 40px !important; padding: 0 16px !important; font-size: 15px !important; }
.j-pill.on { background: var(--orange) !important; color: var(--white) !important; }
/* The subscribe button in the footer is not part of this. */
.footer-email-row button {
  background: var(--orange) !important; color: var(--white) !important;
  border: 1px solid var(--orange) !important; border-radius: 8px !important;
}
.footer-email-row button:hover { background: var(--orange-dark) !important; border-color: var(--orange-dark) !important; }
/* A form's submit fills its column; it should not stretch edge to edge. */
.waitlist-card button { align-self: flex-start; }
/* pause.html only joined the new stylesheet now, and its waitlist submit has
   no class of its own. */
.waitlist-form button, .waitlist-copy .btn-primary { align-self: flex-start; }

/* The Pause hero was bottom-aligned. Its left column holds a pill and a
   headline (121px); its right holds a paragraph, a fact panel and two buttons
   (366px). Bottom-aligning dropped the headline 245px so it hung below the
   panel beside it. Top-aligned, the headline starts level with the paragraph,
   which is the order it should be read in. */
.pause-hero-text { align-items: start !important; }

/* Every phone screenshot on the Pause page renders at 287px, which is the
   width its srcset is cut for. The one in "Understand your triggers" is a
   direct child of the split grid rather than sitting in a wrapper, so it
   stretched to fill its 571px column — twice the size of its siblings, and
   upscaled from a 287px source, so soft as well as large. */
.app-shot { max-width: 287px !important; height: auto !important; }
.prog-split > .app-shot { justify-self: center; align-self: start; }
/* The one in the hero band is deliberately smaller. */
.band-phone .app-shot { max-width: none !important; }


/* ===== Forms =========================================================
   Measured across every form on the site: the field labels were 11px on
   Pause, Glide, Reset, Thrive and Contact, and 14px on Careers and
   Reviewers, against 18px body copy. The inputs ranged 14px to 16px.
   A label that small is the hardest thing on the page to read and it sits
   on the one screen where getting it wrong costs the most.

   One size for all of them. Inputs stay at 16px or more, which is also
   what stops Safari on iPhone zooming the page when a field takes focus. */
.pk-field label, .pk-field > span, .waitlist-field span, .waitlist-field > span,
form label, form label > span, form legend, fieldset legend {
  font-family: var(--body) !important; font-size: 16px !important;
  line-height: 24px !important; font-weight: 600 !important;
  color: var(--ink) !important; letter-spacing: normal !important;
  text-transform: none !important; opacity: 1 !important;
  display: block; margin-bottom: 8px;
}
form input[type=text], form input[type=email], form input[type=tel],
form input[type=url], form input[type=number], form select, form textarea,
.waitlist-field input, .pk-field input:not([type=checkbox]):not([type=radio]),
.pk-field select, .pk-field textarea {
  font-family: var(--body) !important; font-size: 17px !important;
  line-height: 24px !important; color: var(--ink) !important;
  min-height: 52px !important; padding: 12px 16px !important;
  background: var(--card) !important; border: 1px solid var(--hairline) !important;
  border-radius: var(--r-btn) !important; width: 100%;
}
form textarea, .pk-field textarea { min-height: 140px !important; }
form input:focus, form select:focus, form textarea:focus {
  outline: 2px solid var(--orange) !important; outline-offset: 1px; border-color: var(--orange) !important;
}
form input::placeholder, form textarea::placeholder { color: var(--steel) !important; opacity: 1; }
/* ===== Multi-select, as chips ========================================
   Nineteen specialties in a three-column grid of small boxes is a lot of
   furniture for one question: 26 ticks, and the two-line labels
   ("Endocrinology and diabetes") knocked the rows out of line so the grid
   read ragged. On a phone it became nineteen stacked rows.

   They are chips you tap instead. The list flows and wraps, so no ragged
   grid and no column to squeeze on a narrow screen; the whole chip is the
   target rather than a 20px square; and it is the same toggle-pill the
   journal filters already use.

   The real checkbox is still there, just not drawn — `input:checked + span`
   does the work, so this needs no :has() and no JavaScript, and the form
   submits exactly as it did. */
.pk-checks {
  display: flex !important; flex-wrap: wrap; gap: 8px; margin-top: 12px;
}
.pk-checks label {
  display: inline-flex !important; margin: 0 !important; cursor: pointer;
  font-weight: 400 !important;
}
/* Off-screen rather than display:none, so it keeps its place in the tab
   order and screen readers still announce a checkbox. */
.pk-checks input[type=checkbox], .pk-checks input[type=radio] {
  position: absolute !important; width: 1px !important; height: 1px !important;
  min-height: 0 !important; padding: 0 !important; margin: -1px !important;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0 !important;
}
.pk-checks label > span {
  display: inline-flex !important; align-items: center; min-height: 40px;
  padding: 0 16px !important; margin: 0 !important;
  background: var(--card); border: 1px solid var(--hairline);
  border-radius: var(--r-pill); color: var(--ink) !important;
  font-size: 15px !important; line-height: 20px !important; font-weight: 500 !important;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.pk-checks label:hover > span { border-color: var(--purple-300); }
.pk-checks input:checked + span {
  background: var(--purple-500) !important; border-color: var(--purple-500) !important;
  color: var(--white) !important;
}
/* A tick, so a chosen chip is not colour alone. */
.pk-checks input:checked + span::before {
  content: "\2713"; margin-right: 8px; font-size: 13px; line-height: 1;
}
.pk-checks input:focus-visible + span {
  outline: 2px solid var(--orange); outline-offset: 2px;
}

/* The consent line is one long sentence beside one box, so it stays a row. */
.pk-consent label {
  display: flex !important; align-items: flex-start; gap: 10px;
  margin: 0 !important; font-weight: 400 !important; cursor: pointer;
}
.pk-consent label > span {
  display: block !important; margin: 0 !important; flex: 1 1 auto; min-width: 0;
  font-weight: 400 !important; font-size: 16px !important; line-height: 24px !important;
}
.pk-consent input[type=checkbox], .pk-radio input {
  flex: 0 0 auto; width: 20px !important; height: 20px !important;
  min-height: 0 !important; margin: 2px 0 0 !important; padding: 0 !important;
  border-radius: 4px !important; accent-color: var(--orange);
}
.pk-consent { margin-top: 8px; }

/* The apply form is a 620px column in a 1195px card, so it sat hard left with
   half the card empty beside it for the whole scroll. Centre the column, and
   let the fields that are naturally short share a row instead of each taking
   a full line of their own. */
.pk-apply > h2, .pk-apply > .prog-lede, .pk-apply > .pk-form {
  max-width: 760px !important; margin-inline: auto !important; text-align: left !important;
}
.pk-form { max-width: 760px !important; width: 100% !important; }
.pk-form { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; }
/* Anything that needs the full measure keeps it. */
.pk-form > .pk-fieldset, .pk-form > .pk-consent, .pk-form > button,
.pk-form > .pk-form-msg, .pk-form > .pk-group, .pk-form > .hidden-field,
.pk-form > .pk-field:has(textarea), .pk-form > .pk-field:has(select[multiple]) {
  grid-column: 1 / -1;
}
.pk-group { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; }
.pk-group > .pk-fieldset, .pk-group > .pk-field:has(textarea) { grid-column: 1 / -1; }
/* Two fields side by side only line up if their inputs do. One of them often
   carries a line of help under its label, which pushed its input lower than
   its neighbour's. Let the field fill the row and drop its input to the
   bottom, so the boxes sit on one line whatever is above them. */
.pk-form > .pk-field, .pk-group > .pk-field { display: flex; flex-direction: column; }
.pk-form > .pk-field > input, .pk-form > .pk-field > select, .pk-form > .pk-field > textarea,
.pk-group > .pk-field > input, .pk-group > .pk-field > select, .pk-group > .pk-field > textarea {
  margin-top: auto;
}
.pk-field small { display: block; margin-bottom: 8px; color: var(--steel); font-size: 15px; line-height: 22px; }

@media (max-width: 760px) {
  .pk-form, .pk-group { grid-template-columns: 1fr !important; }
}
/* Chips wrap on their own; no phone rule needed. */

/* A hidden honeypot field must stay hidden. */
.hidden-field, .hidden-field * { display: none !important; }

/* Glide's module numbers were 10px and the Careers role labels and sub-heads
   were 13px, against 18px body copy. 15px is the smallest size in this system
   and nothing needs to go under it. */
.week-num, .pk-role-type, .module-num, .prog-fact-label,
.section-label, .prog-badge, .person-tbc, .hl-eyebrow {
  font-size: 15px !important; line-height: 22px !important;
  letter-spacing: normal !important; text-transform: none !important;
}


/* ===== People ========================================================
   Reset and Thrive already showed unfilled roles as an empty frame with a
   "to be announced" tag. Glide was the odd one out: it carried the founder's
   own photograph and bio where the other two carried the team. It uses the
   same pattern now, and the pattern lives here so all three match.

   The tag is a plain red pill, not the tracked uppercase chip it was. */
.people-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.people-grid-2 { grid-template-columns: repeat(2, 1fr); max-width: 760px; }
.person { background: var(--card); border: 1px solid var(--hairline);
  border-radius: var(--r-card); padding: 24px; }
.person-photo { border: 0 !important; overflow: hidden; margin-bottom: 16px;
  border-radius: var(--r-panel) !important; }
.person-photo-empty { aspect-ratio: 1 / 1; background: var(--tint-purple) !important;
  display: flex; align-items: center; justify-content: center; }
.person-placeholder { width: 56px !important; height: 56px !important; border-radius: 0 !important;
  fill: none; stroke: var(--purple); stroke-width: 1.2;
  stroke-linecap: round; stroke-linejoin: round; opacity: 0.45; }
.person h4 { font-family: var(--display); font-size: 22px !important; line-height: 29px;
  font-weight: 500; letter-spacing: -0.2px; color: var(--ink) !important; margin: 0 0 8px; }
.person-role { margin: 0 0 12px !important; }
.person-tbc { display: inline-block; font-family: var(--body);
  font-size: 15px !important; font-weight: 600; letter-spacing: normal !important;
  text-transform: none !important; color: var(--orange-dark) !important;
  background: var(--tint-red); border: 0 !important;
  border-radius: var(--r-pill); padding: 5px 12px !important; opacity: 1 !important; }
.person > p:last-child { font-size: 17px !important; line-height: 25px !important;
  color: var(--slate) !important; opacity: 1 !important; margin: 0 !important; }
/* Glide's teaching block was a photo beside a bio; it is a grid of people now. */
.teach-section > h2 { margin-bottom: 8px; }
.teach-section .prog-lede { margin: 0 0 28px; max-width: 46ch; }
@media (max-width: 768px) {
  .people-grid, .people-grid-2 { grid-template-columns: 1fr; gap: 12px; }
}


/* ===== Arrows =======================================================
   The arrow belongs to the card, not to the button.

   Counted on miro.com's homepage: 10 filled buttons, none with an icon.
   134 text links, none with an icon. 6 cards, every one with a 32px dark
   circle in its corner. The chevrons in their nav are a different glyph
   doing a different job — a menu opens.

   I had this backwards and gave every link an arrow on the grounds that
   it takes you somewhere, which is true of all of them, so the arrow told
   a reader nothing. On a card it is the only mark saying the whole tile
   is clickable, so there it earns its place. Nowhere else.

   The card arrow is the rule below, near the card itself. Do not add an
   ::after to a button, a text link or a form control. */


/* The careers form hides its role-specific questions with the `hidden`
   attribute. My .pk-group { display: grid } beat the browser's rule for
   [hidden], so every role's questions showed at once. A class selector
   outranks the user-agent sheet, so the intent has to be restated here. */
[hidden] { display: none !important; }


/* ===== Footer, standardised =========================================
   The email box was white on the CMS pages and rgba(250,250,250,0.07) on
   every hand-written page and the journal — a leftover from when the
   footer was a dark panel, which read as purple rather than white. One
   input everywhere: white, 50px, no border, 8px. */
.footer-email-row input,
footer .footer-email-row input,
footer input[type=email] {
  background: #FFFFFF !important; color: var(--ink) !important;
  border: 0 !important; border-radius: 8px !important;
  min-height: 50px !important; height: 50px !important;
  padding: 0 18px !important; font-size: 16px !important;
}
.footer-email-row input::placeholder, footer input[type=email]::placeholder {
  color: #6E717A !important; opacity: 1 !important;
}
.footer-email-row button, footer .footer-email-row button {
  min-height: 50px !important; height: 50px !important; border-radius: 8px !important;
}
/* The journal footer has no status line under the box, which is where its
   38px shortfall came from. The space is reserved so every footer is the
   same height whatever the subscribe mechanism is. */
.footer-signup .footer-email-msg, .footer-signup::after { min-height: 24px; }
.footer-signup .footer-email-row { margin-bottom: 0; }


/* ===== One card, three names ========================================
   The homepage renders .hl-prog; Habit Lab renders .prog-card for the
   programmes and .tool-card for the apps. Three markups, one object —
   so they share one rule set rather than three that drift.

   Anatomy, in order: a tinted status pill, a circular arrow top right,
   the name, one line of copy, and the artwork bleeding to the bottom. */
.hl-prog, .prog-card, .tool-card {
  position: relative; display: flex; flex-direction: column;
  background: var(--card); border-radius: var(--r-card); overflow: hidden;
  box-shadow: 0 1px 2px rgba(28,28,30,0.04), 0 8px 24px rgba(28,28,30,0.06);
  padding: 24px 24px 0; min-height: 420px; text-decoration: none;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.hl-prog:hover, .prog-card:hover, .tool-card:hover {
  box-shadow: 0 2px 4px rgba(28,28,30,0.06), 0 16px 40px rgba(28,28,30,0.10);
  transform: translateY(-2px);
}
.hl-prog-live, .tool-card-live { box-shadow: 0 0 0 2px var(--orange), 0 8px 24px rgba(28,28,30,0.08) !important; }

/* The inner wrappers are dissolved so every part is a direct child and
   the order below actually applies. */
.prog-card-body, .tool-card-body { display: contents !important; }

/* 1. status pill */
.hl-prog-status, .prog-card-label, .tool-status {
  order: 1; align-self: flex-start; margin: 0 0 0 0 !important;
  background: var(--tint-purple); color: var(--purple);
  border-radius: 9999px; padding: 6px 14px;
  font-family: var(--body); font-size: 15px; font-weight: 600; letter-spacing: normal;
}
.hl-prog-live .hl-prog-status, .tool-card-live .tool-status {
  background: var(--tint-red); color: var(--orange-dark);
}
/* 2. name. `.tool-card .tool-card-head` rather than the bare class, because the
   page's own stylesheet carries `.tool-card h3 { font-size: 19px }`. */
.hl-prog-title, .prog-card-title, .tool-card .tool-card-head {
  order: 2; font-family: var(--display); font-size: 28px; line-height: 34px;
  font-weight: 500; letter-spacing: -0.3px; color: var(--ink); margin: 16px 0 12px !important;
  display: block !important;
}
/* 3. one line of copy */
.hl-prog-blurb, .prog-card-blurb, .prog-card p, .tool-card p {
  order: 3; font-size: 17px !important; line-height: 25px !important;
  color: var(--slate); margin-bottom: 20px !important;
}
/* 4. the technique chip, where a card has one */
.tool-technique { order: 4; align-self: flex-start; margin-bottom: 20px; }
/* The three app pictures are 800x800 illustrations, drawn to fill a square.
   A 16/9 crop showed a horizontal band of each one, and an anchor cut down to
   a band stops reading as an anchor. The copy is one line now, so the card can
   give the square back. */
.tool-card-art { aspect-ratio: 1 / 1 !important; }

/* 5. artwork, last, bleeding to the edges */
.hl-prog-art, .prog-card-image, .tool-card-art {
  order: 99; display: block; margin: auto -24px 0 !important;
  aspect-ratio: 16 / 9; overflow: hidden; background: var(--tint-purple); border-radius: 0 !important;
}
.hl-prog-art img, .prog-card-image img, .tool-card-art img {
  width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.35s ease;
}
.hl-prog:hover .hl-prog-art img, .prog-card:hover .prog-card-image img,
.tool-card:hover .tool-card-art img { transform: scale(1.04); }

/* the arrow */
.hl-prog-arrow, .prog-card-cta, .prog-card-arrow {
  position: absolute; top: 20px; right: 20px; width: 32px; height: 32px;
  border-radius: 50% !important; background: var(--purple);
  display: grid; place-items: center; padding: 0; font-size: 0; z-index: 2;
}
.hl-prog-arrow::after, .prog-card-cta::after, .prog-card-arrow::after {
  content: "↗"; font-size: 15px; line-height: 1; color: var(--white);
}
.hl-prog:hover .hl-prog-arrow, .prog-card:hover .prog-card-arrow,
.tool-card:hover .prog-card-arrow { background: var(--orange) !important; }

/* The grids they sit in, matched to the homepage's. */
.prog-cards, .tool-grid, .hl-progs { display: grid; gap: 20px; align-items: stretch; }
.prog-cards, .tool-grid { grid-template-columns: repeat(3, 1fr); }
.hl-progs { grid-template-columns: repeat(4, 1fr); }

/* The closing section had a 410px card floating in a full-width white
   area with 300px of nothing under it. */
.hl-close-cta { max-width: var(--shell) !important; width: 100% !important; padding: 48px 40px !important; }
.hl-close-cta .hl-quiz-link { margin-top: 8px; }

@media (max-width: 1100px) { .hl-progs { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 768px) {
  .prog-cards, .tool-grid, .hl-progs { grid-template-columns: 1fr; gap: 12px; }
  .hl-prog, .prog-card, .tool-card { min-height: 0; padding: 20px 20px 0; }
  .hl-prog-art, .prog-card-image, .tool-card-art { margin: auto -20px 0 !important; }
}


/* "Built for real life" left ~160px of white under its text because the
   photograph beside it set the row height. The image takes a ratio and
   the row starts at the top, so the column is as tall as its content. */
/* Two columns of equal height, the way every other split row on the site
   works. Neither side is allowed to leave a block of white under itself:
   the text sets the height and the photograph fills it. */
.about-hl { align-items: stretch !important; }
.about-hl-image { align-self: stretch; aspect-ratio: auto; min-height: 380px; }
.about-hl-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hl-close-cta { padding: 0 !important; background: transparent !important; box-shadow: none !important; }


/* ===== Small screens =================================================
   A sweep at 390px and 768px found four pages scrolling sideways. Three
   separate causes, all of them a width derived from something other than
   the space available.

   1. The Habit Lab hero set `height: 55vh` on a phone. With the 16/9
      aspect-ratio this layer adds, the width then came from the height —
      924px inside a 390px phone, half a screen off the side.
   2. .founder-block carried `320px 1fr !important` from the fix that
      stopped the portrait collapsing. The !important beat the phone rule
      that folds it to one column, so the text sat in a 110px gutter.
   3. An article image was laid out at a fixed 620px.
*/
@media (max-width: 768px) {
  /* Let the width come from the screen, and the height from the ratio. */
  /* `height: auto` is not enough on its own: the page also sets a
     min-height of 480px, and with the ratio above that still drives the
     width to 853px. */
  .hl-hero-image, .hl-cover, .section-image, .prog-hero-image, .about-hl-image {
    height: auto !important; max-height: none !important; min-height: 0 !important;
  }
  .founder-block { grid-template-columns: 1fr !important; }
  .founder-photo { max-width: 100% !important; width: 100% !important; }
  .prog-split, .prog-split-wide, .teach-inner, .hl-tools-head, .about-cols {
    grid-template-columns: 1fr !important;
  }
}
/* Nothing is allowed to be wider than the box it sits in. */
img, video, iframe, svg, table { max-width: 100%; }
.a-body img, .prog-prose img, .about-col img { height: auto !important; }


/* ===== Phone layout =================================================
   Several two-column rules sit outside any media query and later in the
   file than the one that folds them, so they won on a phone. The worst
   was .hero-wrap: the featured article came out 11px wide beside a 291px
   sidebar. These restate the fold with enough weight to hold. */
@media (max-width: 768px) {
  .hero-wrap, .about-hl, .founder-block, .hl-hero-text, .hl-intro,
  .prog-split, .prog-split-wide, .teach-inner, .about-cols, .cta-grid {
    grid-template-columns: 1fr !important;
  }
  /* A thumbnail and a headline still read side by side; 180px of picture
     against 94px of words did not. */
  /* The thumbnail carried a fixed 180px width, so narrowing the column
     only made it spill across the headline instead of beside it. */
  .sidebar-article {
    grid-template-columns: 96px 1fr !important; grid-template-rows: auto !important;
    gap: 12px !important; align-items: start !important;
  }
  .sidebar-article-image {
    width: 100% !important; height: auto !important; min-height: 0 !important;
    aspect-ratio: 1 / 1 !important;
  }
  .sidebar-article-image img { width: 100% !important; height: 100% !important; object-fit: cover !important; }
  /* _shared hides the nav button on a phone — the menu behind the hamburger
     already carries it — but the button system sets `display: inline-flex`
     with !important, which beat `display: none` and forced it back onto every
     page. Said again here, after that rule. */
  .nav-right .nav-cta, nav .nav-cta { display: none !important; }

  /* A bare text link was a 22px tap target. Phones want 44. */
  .btn-text, .text-link, .founder-links a, .j-more .btn-text, .view-all-strip .btn-text {
    display: inline-flex !important; align-items: center !important;
    min-height: 44px !important;
  }
}

/* Habit Lab's two card grids went straight from one column to three at
   769px, so a tablet got three ~280px cards. The homepage row and the
   careers grid both step through two; these now match. */
@media (min-width: 769px) and (max-width: 1100px) {
  .prog-cards, .tool-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

/* The Habit Lab hero photograph sat on the grey ground between two white
   cards — the only thing on the page not inside one, which read as a loose
   band rather than part of the hero. Joined to the card above it, so the
   hero is one object: words, then the picture, same as a programme card. */
@media (max-width: 768px) {
  .hl-hero-text {
    border-radius: var(--r-panel) var(--r-panel) 0 0 !important;
    margin-bottom: 0 !important; padding-bottom: 28px !important;
  }
  .hl-hero-image {
    margin-top: 0 !important;
    border-radius: 0 0 var(--r-panel) var(--r-panel) !important;
  }
}


/* ===== Colour, rebalanced ===========================================
   Counted across six pages: red was doing 22 different jobs — buttons,
   the nav pill, every eyebrow, category tags, filter pills, pay pills,
   status badges, article meta, text links. It covered almost no surface
   (20k px² against purple's 326k) but nothing else competed with it, so
   the site read red.

   Red now means one thing: an action, or the one product that is live.
   Purple carries structure and wayfinding. Ink still carries reading. */

/* Eyebrows and section labels */
.section-label, .hl-eyebrow, .prog-badge { color: var(--purple-400) !important; }

/* Category and meta */
.j-cat, .sidebar-article-tag, .article-meta, .hero-byline, .a-side-head {
  color: var(--purple-400) !important;
}

/* Filters: outline in purple, filled purple when chosen */
.j-pill { border-color: var(--purple-300) !important; color: var(--purple-500) !important; }
.j-pill:hover { background: var(--purple-500) !important; border-color: var(--purple-500) !important; color: var(--white) !important; }
.j-pill.on { background: var(--purple-500) !important; border-color: var(--purple-500) !important; color: var(--white) !important; }

/* Pay and status sit on a purple tint */
.pk-role-payline, .person-tbc {
  background: var(--purple-50) !important; color: var(--purple-600) !important;
}

/* Text links read as navigation, not as actions */
.btn-text, .text-link, .founder-links a, .a-body a, .prog-prose a {
  color: var(--purple-500) !important;
}
.btn-text:hover, .text-link:hover, .founder-links a:hover,
.a-body a:hover, .prog-prose a:hover { color: var(--red-500) !important; }

/* The header button is a way in, not the action */
.nav-cta { border-color: var(--purple-500) !important; color: var(--purple-500) !important; }
.nav-cta:hover { background: var(--purple-500) !important; border-color: var(--purple-500) !important; color: var(--white) !important; }

/* Card arrows follow the structure colour */
.hl-prog-arrow, .prog-card-arrow, .pk-role-more { background: var(--purple-500) !important; }
.hl-prog:hover .hl-prog-arrow, .prog-card:hover .prog-card-arrow,
.tool-card:hover .prog-card-arrow, .pk-role:hover .pk-role-more { background: var(--purple-400) !important; }

/* Footer goes one step deeper so the page has a floor */
footer { background: var(--purple-600) !important; }

/* ---- What stays red -------------------------------------------------
   The primary button, and the edge and badge on whatever is live. */
.btn-primary { border-color: var(--red-500) !important; color: var(--red-500) !important; }
.btn-primary:hover { background: var(--red-500) !important; border-color: var(--red-500) !important; color: var(--white) !important; }
.footer-email-row button { background: var(--red-500) !important; border-color: var(--red-500) !important; }
.footer-email-row button:hover { background: var(--red-600) !important; border-color: var(--red-600) !important; }
.hl-prog-live, .tool-card-live { box-shadow: 0 0 0 2px var(--red-500), 0 8px 24px rgba(28,28,30,0.08) !important; }
.hl-prog-live .hl-prog-status, .tool-card-live .tool-status {
  background: var(--red-50) !important; color: var(--red-600) !important;
}

/* Stragglers the sweep found still red. */
.hl-quiz-link { border-color: var(--purple-500) !important; color: var(--purple-500) !important; }
.hl-quiz-link:hover { background: var(--purple-500) !important; color: var(--white) !important; }
.about-col h2, .about-col.red h2 { color: var(--purple-500) !important; }

/* Last four the sweep caught: all of them mark or label something, none
   of them is an action. */
.about-col, .about-col h2, .about-col p { color: var(--purple-500) !important; }
.about-col.red h2 { color: var(--purple-500) !important; }
.j-badge { border-color: var(--purple-300) !important; color: var(--purple-500) !important; }
.a-play { background: var(--purple-500) !important; }
.a-evidence-btn { border-color: var(--purple-300) !important; color: var(--purple-500) !important; }
.a-evidence-btn.on, .a-evidence-btn[aria-selected="true"] {
  background: var(--purple-500) !important; border-color: var(--purple-500) !important; color: var(--white) !important;
}

/* Module numbers label a lesson; they are not an action. */
.week-num, .module-num { color: var(--purple-400) !important; }

/* A text link turning red on hover said "this is an action", which is the
   one thing red is reserved for. It stays navigational: darker purple and
   an underline. The outline pill still fills — same family, more weight,
   because it is a bigger control, not a different kind of thing. */
.btn-text:hover, .text-link:hover, .founder-links a:hover,
.a-body a:hover, .prog-prose a:hover {
  color: var(--purple-700) !important; text-decoration: underline !important;
  text-underline-offset: 3px;
}

/* The quiz is the same offer wherever it appears, so it is one component.
   It is also a helper — "not sure which programme fits?" — not the action
   the page is asking for, so it reads in the structure colour. */
.hl-intro-aside .hl-quiz-link, .hl-close-cta .hl-quiz-link { align-self: flex-start; }


/* ===== One red action per page ======================================
   Red was tied to the .btn-primary class, so a page carried as many reds
   as it had buttons — six on careers, four on the quiz. The class says
   nothing about what the button does.

   The rule: red is the button that SENDS something, or opens the live
   product. If it only moves you — down the page, to another page — it is
   purple. That is testable from the markup: a commit is a submit button,
   a move is an href.

   Across nine pages this takes body reds from 20 to 6. */

/* Default: every button is purple. The selectors match the weight of the
   original button rule, which uses a.btn-primary — a plain .btn-primary
   loses to it on specificity and changes nothing. */
a.btn-primary, button.btn-primary, .btn-primary, a.btn-next, button.btn-next,
a.btn-submit, button.btn-submit, a.hl-quiz-link, .hl-quiz-link,
.waitlist-card button, .waitlist-form button, .pk-form button, input[type=submit] {
  background: transparent !important;
  border-color: var(--purple-500) !important;
  color: var(--purple-500) !important;
}
a.btn-primary:hover, button.btn-primary:hover, .btn-primary:hover,
a.btn-next:hover, button.btn-next:hover, a.btn-submit:hover, button.btn-submit:hover,
a.hl-quiz-link:hover, .hl-quiz-link:hover,
.waitlist-card button:hover, .waitlist-form button:hover, .pk-form button:hover,
input[type=submit]:hover {
  background: var(--purple-500) !important;
  border-color: var(--purple-500) !important;
  color: var(--white) !important;
}

/* Red: the commit. A submit button sends something that cannot be taken
   back — an application, an email address, an answer. */
.pk-form button[type=submit], .waitlist-card button[type=submit],
.waitlist-form button[type=submit],
button.btn-submit, a.btn-submit, button.btn-next, a.btn-next,
button[type=submit].btn-primary,
/* and the two links that are a page's single ask rather than a jump */
a.btn-primary[href="/careers"],   /* About — see the roles */
a.btn-go {                        /* Pause — open the live product */
  border-color: var(--red-500) !important;
  color: var(--red-500) !important;
}
.pk-form button[type=submit]:hover, .waitlist-card button[type=submit]:hover,
.waitlist-form button[type=submit]:hover,
button.btn-submit:hover, a.btn-submit:hover, button.btn-next:hover, a.btn-next:hover,
button[type=submit].btn-primary:hover,
a.btn-primary[href="/careers"]:hover, a.btn-go:hover {
  background: var(--red-500) !important;
  border-color: var(--red-500) !important;
  color: var(--white) !important;
}

/* Pause already has its red: opening the app. The Play Store signup is
   the second ask on that page, so it stays purple. */
#playstore .waitlist-card button[type=submit] {
  border-color: var(--purple-500) !important; color: var(--purple-500) !important;
}
#playstore .waitlist-card button[type=submit]:hover {
  background: var(--purple-500) !important; color: var(--white) !important;
}

/* The quiz results panel is hidden until the quiz is finished, so the size
   sweep never saw it: 11-14px, below the floor, the moment it opens. */
.result-restart, .result-tag, .btn-back, .quiz-results a {
  font-size: 15px !important; line-height: 22px !important;
}
.result-other-links a, .result-others a { font-size: 15px !important; line-height: 22px !important; }


/* ---- careers.css ---- */
/* Roles at a glance. Scrolls inside itself on a phone rather than pushing the
   page sideways. The border and the corners live on the wrapper, because
   border-collapse ignores a radius set on the table. */
.pk-table-wrap { overflow-x: auto; margin-top: 2rem; max-width: 760px;
  border: 1px solid var(--line); border-radius: 10px; }
.pk-table { border-collapse: collapse; width: 100%; min-width: 460px; font-size: 15px; }
.pk-table th { text-align: left; font-size: 11px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--purple); background: var(--tint-purple);
  padding: 0.7rem 1.1rem; border-bottom: 1px solid var(--line); white-space: nowrap; }
.pk-table td { padding: 0.8rem 1.1rem; border-bottom: 1px solid var(--faint);
  border-right: 1px solid var(--faint); line-height: 1.5; vertical-align: top; }
.pk-table th:not(:last-child) { border-right: 1px solid var(--faint); }
.pk-table td:last-child { border-right: 0; }
.pk-table tbody tr:nth-child(even) td { background: var(--tint-row); }
.pk-table tr:last-child td { border-bottom: 0; }
.pk-table td:first-child { font-weight: 700; color: var(--purple); white-space: nowrap; }

.pk-role-head { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.pk-role-type { font-size: 13px; opacity: 0.55; }
.pk-role-shut { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--white); background: var(--ink); padding: 3px 8px; }
.pk-role .prog-prose { max-width: 680px; }
.pk-role-list { margin-top: 2.5rem; max-width: 680px; }
.pk-role-list h3, .pk-role-pay h3 { font-size: 13px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--purple); margin-bottom: 1rem; }
.pk-role-list ul { margin: 0; padding-left: 1.1rem; }
.pk-role-list li { font-size: 15px; line-height: 1.7; opacity: 0.75; margin-bottom: 0.6rem; }
.pk-role-pay { margin-top: 2.5rem; max-width: 680px; }
.pk-role-pay p { font-size: 15px; line-height: 1.75; opacity: 0.75; margin-bottom: 0.75rem; }
.pk-role .btn-primary { margin-top: 2.5rem; }
.pk-role-closed { margin-top: 2.5rem; font-size: 15px; opacity: 0.55; }

.pk-faq { max-width: 680px; margin-top: 2rem; border-top: 1px solid var(--faint); }
.pk-faq details { border-bottom: 1px solid var(--faint); }
.pk-faq summary { cursor: pointer; padding: 1.15rem 0; font-size: 16px; font-weight: 700;
  color: var(--purple); list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
.pk-faq summary::-webkit-details-marker { display: none; }
.pk-faq summary::after { content: '+'; font-weight: 400; opacity: 0.4; }
.pk-faq details[open] summary::after { content: '\2013'; }
.pk-faq p { font-size: 15px; line-height: 1.8; opacity: 0.72; padding-bottom: 1.25rem; max-width: 60ch; }

.pk-apply .prog-lede { max-width: 620px; }
.pk-form { max-width: 620px; margin-top: 2.5rem; }
.pk-field { margin-bottom: 1.75rem; }
.pk-field > label { display: block; font-size: 14px; font-weight: 700; color: var(--purple);
  margin-bottom: 0.4rem; }
.pk-field > label em { font-weight: 400; font-style: normal; opacity: 0.45; }
.pk-field small { display: block; font-size: 13px; opacity: 0.55; margin-bottom: 0.5rem; }
/* Matched on "not a checkbox" rather than by listing types. An <input> with no
   type attribute is a text box, but input[type=text] does not select it — which
   left the name, WhatsApp and country boxes at the browser's own 143px-wide,
   Arial, inset-border default while everything around them was styled. */
.pk-field input:not([type=checkbox]), .pk-field select, .pk-field textarea {
  width: 100%; font: inherit; font-size: 15px; line-height: 1.4;
  padding: 0.75rem 0.9rem; border: 1px solid var(--line, rgba(13,13,11,0.2));
  background: var(--white); color: var(--ink); border-radius: 0; }

/* A select sizes itself around its own dropdown arrow, so it came out two
   pixels taller than the inputs beside it. Drawing the arrow ourselves makes
   every control on the form the same height and the same shape. */
.pk-field select {
  appearance: none; -webkit-appearance: none; padding-right: 2.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%230D0D0B' stroke-opacity='.5' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1rem center; background-size: 12px 8px; }
.pk-field textarea { resize: vertical; line-height: 1.6; }
.pk-field input:focus-visible, .pk-field select:focus-visible, .pk-field textarea:focus-visible {
  outline: 2px solid var(--orange); outline-offset: 1px; }
.pk-checks { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0.5rem; }
.pk-checks label { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 14px;
  line-height: 1.45; opacity: 0.8; }
.pk-checks input { margin-top: 3px; flex: none; }
.pk-consent label { display: flex; align-items: flex-start; gap: 0.6rem; font-size: 14px;
  line-height: 1.6; font-weight: 400; color: var(--ink); opacity: 0.8; }
.pk-consent input { margin-top: 4px; flex: none; }
.pk-form-msg { margin-top: 1.25rem; font-size: 15px; line-height: 1.6; }
.pk-form-msg.ok { color: var(--purple); font-weight: 700; }
.pk-form-msg.bad { color: var(--orange-dark, #a93226); }
.pk-form button[disabled] { opacity: 0.55; cursor: progress; }

@media (max-width: 768px) {
  .pk-role-head { gap: 0.5rem; }
  .pk-checks { grid-template-columns: 1fr; }
}

/* A checkbox group names itself with a legend, so it needs the label's looks. */
.pk-fieldset { border: 0; padding: 0; margin-inline: 0; }
.pk-fieldset legend { padding: 0; font-size: 14px; font-weight: 700; color: var(--purple);
  margin-bottom: 0.4rem; }
.pk-fieldset legend em { font-weight: 400; font-style: normal; opacity: 0.45; }

/* A photo for each job. The empty state is deliberately plain and labelled:
   an unset image should look unset, not like a design choice. */
.pk-role-photo { margin-bottom: 2.5rem; aspect-ratio: 16 / 7; overflow: hidden;
  border: 1px solid var(--faint); }
.pk-role-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pk-role-photo-empty { display: flex; align-items: center; justify-content: center;
  background: var(--grey); }
.pk-role-photo-empty span { font-size: 12px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; opacity: 0.35; }


/* ===== Roles, as cards that open ====================================
   Each role used to be a full-width section: three of them ran 4,766px,
   about two screens each, and the third was four screens down. As cards
   every opening is on one screen, and the one you want takes the row. */
.pk-roles {
  max-width: var(--shell); margin: 20px auto; width: 100%;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px;
}
.pk-role {
  display: flex; flex-direction: column;
  background: var(--card); border-radius: var(--r-card); overflow: hidden;
  box-shadow: 0 1px 2px rgba(28,28,30,0.04), 0 8px 24px rgba(28,28,30,0.06);
  transition: box-shadow 0.2s ease;
}
.pk-role:hover { box-shadow: 0 2px 4px rgba(28,28,30,0.06), 0 16px 40px rgba(28,28,30,0.10); }
/* The open one gets the whole row, which is what lets the detail read at a
   sensible measure instead of in a third of the width. */
.pk-role[open] { grid-column: 1 / -1; }

.pk-role-face {
  position: relative; display: grid; gap: 0; padding: 24px 24px 0; flex: 1 1 auto;
  grid-template-rows: auto auto auto auto 1fr;
  cursor: pointer; list-style: none;
}
.pk-role-face::-webkit-details-marker { display: none; }
.pk-role-type {
  justify-self: start; order: 1; background: var(--tint-purple); color: var(--purple);
  border-radius: var(--r-pill); padding: 6px 14px; margin-bottom: 16px;
  font-family: var(--body); font-size: 15px; font-weight: 600;
}
/* Two lines of room whether the name needs them or not, so the line and the
   pay pill below start at the same height on every card in the row. */
.pk-role-name {
  order: 2; font-family: var(--display); font-size: 28px; line-height: 34px;
  font-weight: 500; letter-spacing: -0.3px; color: var(--ink); margin-bottom: 12px;
  min-height: 68px; display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
}
.pk-role[open] .pk-role-name { min-height: 0; -webkit-line-clamp: none; overflow: visible; }
/* The line is the first sentence of the role's own intro, so its length is
   not in this file's gift. Three lines, then it stops. */
.pk-role-line {
  order: 3; font-size: 17px; line-height: 25px; color: var(--slate); margin-bottom: 16px;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden; min-height: 75px;
}
/* Open, the full intro sits right below and starts with this very sentence,
   so the card face stops repeating it. */
.pk-role[open] .pk-role-line { display: none; }
.pk-role-payline {
  order: 4; justify-self: start; font-family: var(--body); font-size: 15px;
  font-weight: 600; color: var(--orange-dark); background: var(--tint-red);
  border-radius: var(--r-pill); padding: 5px 12px; margin-bottom: 20px;
}
.pk-role-shut {
  order: 5; justify-self: start; font-size: 15px; font-weight: 600;
  color: var(--steel); margin-bottom: 20px;
}
.pk-role-photo { order: 99; display: block; margin: auto -24px 0;
  aspect-ratio: 16 / 10; overflow: hidden; background: var(--tint-purple); }
.pk-role-photo img { width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 0.35s ease; }
.pk-role:hover .pk-role-photo img { transform: scale(1.04); }
.pk-role-photo-empty { display: grid; place-items: center; }
.pk-role-photo-empty span { font-size: 15px; color: var(--steel); }
/* An open card hides its picture: the detail is the point, not the artwork. */
.pk-role[open] .pk-role-photo { display: none; }

/* The circle says open or shut. */
.pk-role-more {
  position: absolute; top: 20px; right: 20px; width: 32px; height: 32px;
  border-radius: 50%; background: var(--purple); display: grid; place-items: center;
  transition: background-color 0.2s ease;
}
.pk-role-more::after {
  content: "+"; font-size: 20px; line-height: 1; color: var(--white);
  transition: transform 0.2s ease;
}
.pk-role[open] .pk-role-more::after { content: "\2212"; }
.pk-role:hover .pk-role-more { background: var(--orange); }

.pk-role-body { padding: 8px 24px 28px; }
.pk-role-body .prog-prose { max-width: 68ch; }
/* Both lists are short. Stacked they each used 680px of a 1195px row. */
.pk-role-lists {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px 40px; margin: 24px 0 0;
}
.pk-role-list h3, .pk-role-pay h3 {
  font-family: var(--display) !important; font-size: 22px !important;
  line-height: 29px !important; font-weight: 500 !important;
  letter-spacing: -0.2px; color: var(--ink) !important; margin-bottom: 12px !important;
}
.pk-role-list ul { margin: 0; padding-left: 20px; }
.pk-role-list li { font-size: 17px; line-height: 25px; color: var(--slate); margin-bottom: 8px; }
.pk-role-pay { margin-top: 24px; }

.pk-role-body .btn-primary { margin-top: 24px; }
.pk-role-closed { margin-top: 24px; color: var(--steel); }

@media (max-width: 1100px) { .pk-roles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 768px) {
  .pk-roles { grid-template-columns: 1fr; gap: 12px; margin: 12px; width: auto; }
  .pk-role { border-radius: var(--r-panel); }
  .pk-role-face { padding: 20px 20px 0; }
  .pk-role-photo { margin: auto -20px 0; }
  .pk-role-body { padding: 8px 20px 24px; }
  .pk-role-lists { grid-template-columns: 1fr; gap: 20px; }
}


/* ---- habitLab.css ---- */
/* Habit Lab, built as Miro's "Need help getting started?" row.

   Each card is self-contained: a tinted status pill, a circular arrow, the
   programme name, one line of copy, and its own artwork bleeding to the
   bottom edge. The whole card is the link. Nothing cross-fades and nothing is
   positioned absolutely over a photograph, which is what the old version did. */

.home-middle {
  max-width: var(--shell); margin: 20px auto; width: 100%;
  background: var(--card); border-radius: var(--r-card); padding: 48px 40px;
  /* The quiz link sits in the head row, to the right, above the cards. It
     comes after the cards in the markup, so the grid places it. */
  display: grid; grid-template-columns: 1fr auto; grid-template-areas:
    "head quiz"
    "cards cards";
  column-gap: 24px;
}
.hl-head { grid-area: head; }
.hl-foot { grid-area: quiz; justify-self: end; align-self: end; margin: 0 0 28px; }
.hl-progs { grid-area: cards; }
.hl-head { max-width: none; margin: 0 0 28px; padding: 0; }
.hl-eyebrow {
  display: inline-block; font-family: var(--body); font-size: 15px; font-weight: 600;
  letter-spacing: normal; text-transform: none; color: var(--orange);
  background: none; padding: 0; border-radius: 0; margin-bottom: 8px;
}
.hl-head h2 {
  font-family: var(--display); font-size: 36px; line-height: 43.2px; font-weight: 500;
  letter-spacing: -0.4px; color: var(--ink); max-width: 20ch;
}
/* One sentence, two lines — so the break is deliberate, not a wrap. */
.hl-br { display: block; }

/* The photograph is a 1100x1650 portrait and the card crops it to 16:11. A
   centred crop takes the strip from y447 down, and her face sits at y300-520,
   so it lost the top of her head. Pulling the crop up to 20% puts her face in
   the upper third of the card. */
.hl-prog[href="/glide"] .hl-prog-art img { object-position: center 20%; }

.hl-progs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; align-items: stretch; }

.hl-prog {
  position: relative; display: flex; flex-direction: column;
  background: var(--card); border-radius: var(--r-card); overflow: hidden;
  box-shadow: 0 1px 2px rgba(28,28,30,0.04), 0 8px 24px rgba(28,28,30,0.06);
  padding: 24px 24px 0; min-height: 420px; text-decoration: none;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.hl-prog:hover {
  box-shadow: 0 2px 4px rgba(28,28,30,0.06), 0 16px 40px rgba(28,28,30,0.10);
  transform: translateY(-2px);
}
/* The one that is shipped gets a red edge, the way Miro marks a live thing. */
.hl-prog-live { box-shadow: 0 0 0 2px var(--orange), 0 8px 24px rgba(28,28,30,0.08); }
.hl-prog-live:hover { box-shadow: 0 0 0 2px var(--orange), 0 16px 40px rgba(28,28,30,0.12); }

.hl-prog-status {
  align-self: flex-start; background: var(--tint-purple); color: var(--purple);
  border-radius: var(--r-pill); padding: 6px 14px;
  font-family: var(--body); font-size: 15px; font-weight: 600; letter-spacing: normal;
}
.hl-prog-live .hl-prog-status { background: var(--tint-red); color: var(--orange-dark); }

.hl-prog-arrow {
  position: absolute; top: 20px; right: 20px; width: 32px; height: 32px;
  border-radius: 50%; background: var(--purple); display: grid; place-items: center;
  transition: background-color 0.2s ease;
}
.hl-prog-arrow::after { content: "↗"; font-size: 15px; line-height: 1; color: var(--white); }
.hl-prog:hover .hl-prog-arrow { background: var(--orange); }

.hl-prog-title {
  font-family: var(--display); font-size: 28px; line-height: 34px; font-weight: 500;
  letter-spacing: -0.3px; color: var(--ink); margin: 16px 0 8px;
}
.hl-prog-blurb { font-size: 17px; line-height: 25.5px; color: var(--slate); margin-bottom: 20px; }

.hl-prog-art {
  display: block; order: 99; margin: auto -24px 0;
  aspect-ratio: 16 / 11; overflow: hidden; background: var(--tint-purple);
}
.hl-prog-art img { width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 0.35s ease; }
.hl-prog:hover .hl-prog-art img { transform: scale(1.04); }


.hl-quiz-link {
  display: inline-flex; align-items: center; height: 44px; padding: 0 20px;
  background: var(--card); border: 1px solid var(--orange); border-radius: var(--r-pill);
  font-family: var(--body); font-size: 16px; font-weight: 600; letter-spacing: normal;
  text-transform: none; color: var(--orange); text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.hl-quiz-link:hover { background: var(--orange); color: var(--white); }

@media (max-width: 1100px) { .hl-progs { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 768px) {
  .home-middle { padding: 32px 20px; margin: 12px; width: auto; border-radius: var(--r-panel); }
  .hl-head h2 { font-size: 26px; line-height: 32px; letter-spacing: -0.3px; }
  .home-middle { grid-template-columns: 1fr; grid-template-areas: "head" "quiz" "cards"; }
  .hl-foot { justify-self: start; margin: 0 0 20px; }
  .hl-progs { grid-template-columns: 1fr; gap: 12px; }
  .hl-prog { min-height: 0; padding: 20px 20px 0; border-radius: var(--r-panel); }
  .hl-prog-art { margin: auto -20px 0; }
}


/* ---- audit.css ---- */
/* The AUDIT page. One column, because the whole page is one task. */
.au-hero, .au-wrap {
  max-width: 760px; margin: 20px auto; width: 100%;
  background: var(--card); border-radius: var(--r-card); padding: 48px 40px;
}
.au-hero { padding-bottom: 40px; }
.au-badge { display: inline-block; font-family: var(--body); font-size: 15px;
  font-weight: 600; color: var(--orange); margin-bottom: 8px; }
.au-hero h1 { font-family: var(--display); font-size: 48px; line-height: 54px;
  font-weight: 500; letter-spacing: -0.8px; color: var(--ink); margin: 0 0 16px; }
.au-lede { font-size: 18px; line-height: 27px; color: var(--slate); margin: 0; max-width: 56ch; }

.au-help { font-size: 16px; line-height: 24px; color: var(--steel);
  background: var(--tint-purple); border-radius: var(--r-panel); padding: 16px 20px; margin: 0 0 28px; }

.au-q { border: 0; padding: 20px 0 0; margin: 0; border-top: 1px solid var(--hairline-soft); }
.au-q:first-of-type { border-top: 0; padding-top: 0; }
.au-q legend { font-family: var(--body); font-size: 17px; line-height: 25px; font-weight: 600;
  color: var(--ink); padding: 0; margin: 0 0 12px; }
.au-num { display: inline-block; min-width: 26px; color: var(--orange); font-weight: 700; }
.au-opts { display: flex; flex-direction: column; gap: 4px; padding-bottom: 20px; }
.au-opt { display: flex; align-items: center; gap: 12px; font-size: 17px; line-height: 25px;
  color: var(--slate); cursor: pointer; padding: 6px 0; min-height: 44px; }
.au-opt input { width: 20px; height: 20px; margin: 0; flex: none; accent-color: var(--orange); }
.au-opt:hover { color: var(--ink); }

.au-result { background: var(--tint-purple); border-radius: var(--r-card); padding: 24px 28px; margin: 8px 0 28px; }
.au-score { font-size: 17px; line-height: 25px; color: var(--ink); margin: 0; }
.au-score strong { font-family: var(--display); font-size: 28px; color: var(--purple); }
.au-sep { color: var(--hairline); margin: 0 8px; }
.au-note { font-size: 17px; line-height: 25px; color: var(--slate); margin: 10px 0 0; }
.au-note[data-level] { color: var(--orange-dark); font-weight: 600; }

.au-safety { background: var(--tint-red); border-radius: var(--r-card); padding: 28px; margin: 0 0 24px; }
.au-safety h2 { font-family: var(--display); font-size: 22px; line-height: 29px; font-weight: 500;
  color: var(--ink); margin: 0 0 10px; }
.au-safety p { font-size: 17px; line-height: 25px; color: var(--ink); margin: 0 0 20px; }
.au-cite { font-size: 15px; line-height: 22px; color: var(--steel); margin: 0; }

@media (max-width: 768px) {
  .au-hero, .au-wrap { padding: 32px 20px; margin: 12px; width: auto; border-radius: var(--r-panel); }
  .au-hero h1 { font-size: 34px; line-height: 40px; letter-spacing: -0.4px; }
  .au-safety { padding: 20px; border-radius: var(--r-panel); }
}


/* ---- journal.css ---- */
/* The journal and the article pages, in Miro's system.
 *
 * These two pages are standalone HTML with their own stylesheets rather than
 * block-built like the rest of the site, so every change this file carries
 * used to be made twice — once in templates/journal.html and once in
 * templates/article.html. The two copies had drifted: the filter pills were
 * purple on one and white on the other.
 *
 * It lives here now, both templates link miro.css, and a change is made once.
 * Colours read from the tokens, so a change to the ramp reaches these pages
 * like it reaches every other.
 */

/* ===== MIRO, applied to the journal. ==================================
   The instruction is that this system wins, so these are !important: the
   two journal templates carry ~500 lines of their own inline CSS and a
   class selector in there beats an element selector here. */
body { background: var(--ground) !important; color: var(--slate) !important; font-family: 'Noto Sans', sans-serif !important; }
h1, h2, h3, h4, h5, .a-head h1, .a-tldr-head, .hl-head, .j-lead h2 {
  font-family: 'Hanken Grotesk', sans-serif !important; color: var(--ink) !important; }
h1, .a-head h1 { font-size: 44px !important; line-height: 50px !important; font-weight: 500 !important; letter-spacing: normal !important; }
h2 { font-size: 34px !important; line-height: 41px !important; font-weight: 500 !important; letter-spacing: -0.4px !important; }
h3 { font-size: 26px !important; line-height: 32px !important; font-weight: 500 !important; letter-spacing: -0.3px !important; }
.a-body p, .a-body li, .j-card p { font-family: 'Noto Sans', sans-serif !important;
  font-size: 18px !important; line-height: 28px !important; letter-spacing: normal !important; color: var(--slate) !important; }
.a-standfirst { font-size: 22px !important; line-height: 31px !important; color: var(--slate) !important; }

/* Every surface becomes a white Miro card on the grey ground. */
.a-head, .a-layout, .a-body, .a-faq, .a-evidence, .a-side-block, .a-tldr,
.j-grid, .j-lead, .j-filters, .a-author, .a-listen, .a-cover {
  border-radius: 20px !important; }
.a-head, .a-layout { background: var(--white) !important; max-width: 1195px !important; margin: 20px auto !important; padding: 40px !important; }
.a-tldr { background: var(--tint-purple) !important; padding: 28px !important; }
.a-side-block { background: var(--tint-purple) !important; padding: 24px !important; border: 0 !important; }
.a-cover, .a-cover img, .j-card-img, .j-card-img img, .a-side-thumb { border-radius: 12px !important; overflow: hidden !important; }
.j-card { background: var(--white) !important; border-radius: 20px !important; border: 0 !important; overflow: hidden !important; }
nav { background: var(--white) !important; border: 0 !important; border-radius: 20px !important;
  max-width: 1195px !important; margin: 16px auto 0 !important; }
footer { background: var(--ink) !important; max-width: 1195px !important; margin: 40px auto 0 !important;
  border-radius: 20px 20px 0 0 !important; overflow: hidden !important; }

/* Labels stop being tracked small caps. */
.a-side-head, .j-cat, .a-tldr-head, .a-ev-tab, .nav-cta, .j-badge, .a-lang-group {
  text-transform: none !important; letter-spacing: normal !important; font-size: 16px !important; font-weight: 600 !important; }
.a-tldr-head { font-size: 26px !important; line-height: 32px !important; letter-spacing: -0.3px !important; }
.a-body a, .j-card a { color: var(--red-500) !important; }
.btn-primary, .nav-cta { border-radius: 8px !important; text-transform: none !important; letter-spacing: normal !important; }
@media (max-width: 768px) {
  h1, .a-head h1 { font-size: 36px !important; line-height: 40px !important; }
  h2 { font-size: 30px !important; line-height: 35px !important; letter-spacing: -0.8px !important; }
  .a-body p, .a-body li { font-size: 18px !important; line-height: 26px !important; letter-spacing: normal !important; }
  .a-head, .a-layout { padding: 24px 20px !important; margin: 12px !important; border-radius: 12px !important; }
}

/* The blanket heading rule painted the footer's heading ink-on-ink. Anything
   inside the dark band is white. */
footer h1, footer h2, footer h3, footer h4, footer .footer-signup h3 { color: var(--white) !important; }
footer p, footer a, footer .footer-copyright, footer .footer-disclaimer { color: var(--white) !important; }
footer .footer-copyright, footer .footer-disclaimer { opacity: 0.75; }

/* Nothing runs to the window edge on miro.com. The cover joins the shell. */
.a-cover, .a-listen, .a-faq, .a-evidence, .a-author, .j-lead, .j-filters, .j-grid, .j-more {
  max-width: 1195px !important; margin-left: auto !important; margin-right: auto !important; width: 100% !important;
}
.a-cover { margin-block: 20px !important; }
.a-cover img { width: 100% !important; height: auto !important; max-height: 520px !important; object-fit: cover !important; }

/* ===== MiroBlog, measured at 1440. The journal is not the marketing site.
   Ground is a warm cream #FBF7EF, cards are 16px not 20, body is 16/24, and
   the header is a flush full-width white bar 73px tall. ================== */
body { background: #FBF7EF !important; }
nav { background: var(--white) !important; border-radius: 0 !important; max-width: none !important;
  width: 100% !important; margin: 0 !important; height: 73px !important; padding: 0 40px !important;
  position: sticky !important; top: 0 !important; }
.a-head, .a-layout { background: var(--white) !important; border-radius: 20px !important; }
.a-tldr, .a-side-block { border-radius: 20px !important; }
.j-card, .a-cover, .a-cover img, .j-card-img, .j-card-img img, .a-side-thumb,
.a-listen, .a-faq, .a-evidence, .a-author, .j-lead { border-radius: 20px !important; }
/* Nothing on a reading page should be smaller than 15px. Measured here: the
   footer links were 13px against 16px on every marketing page, Subscribe was
   11px, and the byline, date, language button, listen row, captions and the
   author bio all sat at 12 or 13. */
.footer-nav a, .footer-links a { font-size: 16px !important; }
.footer-email-row button, .footer-email-row input { font-size: 16px !important; }
.j-card-meta, .j-card time, .j-card span, .a-meta, .a-meta span, .a-meta b,
.a-lang-btn, .a-listen-label, .a-listen-note, figcaption, .a-author p,
.btn-text, .a-side-head, .last-updated, .a-byline, .a-byline b,
.a-byline-text span, .a-toc li a, .a-side-author p, .a-side-article span,
.a-side-block p, .a-side-block span {
  font-size: 15px !important; line-height: 22px !important;
}
.a-body p, .a-body li, .j-card p { font-size: 18px !important; line-height: 27px !important; letter-spacing: normal !important; }
.a-body h2 { font-size: 30px !important; line-height: 37px !important; font-weight: 500 !important; letter-spacing: normal !important; }
.a-body h3 { font-size: 24px !important; line-height: 31px !important; font-weight: 500 !important; letter-spacing: normal !important; }
/* Black gives way: the footer is purple, actions are red. */
footer { background: var(--purple-500) !important; border-radius: 20px 20px 0 0 !important; }
.btn-primary, .nav-cta { background: var(--red-500) !important; color: var(--white) !important; border-radius: 8px !important; }
.btn-primary:hover, .nav-cta:hover { background: var(--orange-dark) !important; }
@media (max-width: 768px) {
  nav { height: 64px !important; padding: 0 20px !important; }
  .a-body h2 { font-size: 28px !important; line-height: 34px !important; }
}

/* The body column kept an old 45ch cap, so text ran 463px inside a 794px
   column. MiroBlog sets no measure cap; the column is the measure. */
.a-body p, .a-body li, .a-body h2, .a-body h3, .a-standfirst { max-width: none !important; }
.a-body { padding-left: 40px !important; padding-right: 40px !important; }

/* The same global statement the pages get: no uppercase transform, no positive
   tracking, and a measure cap. The journal templates carry their own stylesheet
   so it has to be said here too. */
body *, body *::before, body *::after { text-transform: none !important; }
body *:not(h1):not(h2):not(h3):not(h4):not(h5):not(.a-head h1):not(.a-tldr-head) { letter-spacing: normal !important; }
/* ===== Reading column, sidebar ======================================
   Measured on an article at 1440: body lines ran 80 characters, which is
   past the 45-75 that people read comfortably. `68ch` resolved to 700px
   because `ch` is measured on the zero of the body face and this one is
   wide. A flat 620px gives about 68 real characters.

   The sidebar was sticky at top:0, so it pinned underneath the 73px nav
   and its own heading was hidden behind it. It is also 982px tall in a
   900px viewport, so its foot could never be reached. Only the contents
   list sticks now \u2014 that is the part worth following down the page; the
   author, the read-next and the share row scroll away with the article. */
.a-body p, .a-body li { max-width: min(620px, 100%) !important; }

/* The column has to span the article for the sticky child to have anywhere
   to travel; left at its own 982px it scrolled away a fifth of the way down. */
.a-side { position: static !important; align-self: stretch !important; }
.a-side > .a-side-block:first-child {
  position: sticky; top: 93px;
  max-height: calc(100vh - 113px); overflow-y: auto;
}

/* The summary box is a child of .a-main, so it misses the 40px padding that
   sets the text column \u2014 it sat 24px right of the words it summarises. */
.a-tldr { margin-left: 40px !important; margin-right: 40px !important; }
.a-body figure, .a-body img, .a-body table { max-width: min(620px, 100%) !important; }
/* Phone: a bare text link was a 22px tap target, and the two-up rows need
   to fold. Same rules the rest of the site uses. */
@media (max-width: 768px) {
  .btn-text, .text-link, .j-more .btn-text, .a-lang-btn {
    display: inline-flex !important; align-items: center !important; min-height: 44px !important;
  }
  .a-layout, .j-lead, .j-grid { grid-template-columns: 1fr !important; }
  .a-side { position: static !important; }
}

/* The standfirst ran the full 1115px of the header \u2014 about 140 characters,
   twice the body measure, on the line people read second. */
.a-standfirst, .a-head > p { max-width: 720px !important; }

/* The evidence tabs are buttons, so the blanket pill radius was bending the
   underline of the selected one into a lens. A tab is a tab. */
.a-ev-tab { border-radius: 0 !important; }

/* The byline in the sidebar was set at 26px \u2014 the size of a section heading
   \u2014 inside a 320px card whose own bio runs at 15px, and it wrapped onto two
   lines. It is a name, not a heading. */
.a-side-author h3 {
  font-size: 19px !important; line-height: 26px !important;
  font-weight: 600 !important; letter-spacing: -0.1px !important;
  margin-bottom: 8px !important;
}
.a-side-creds {
  display: block; font-size: 15px !important; line-height: 22px !important;
  font-weight: 400 !important; color: var(--steel, var(--steel)) !important;
  letter-spacing: normal !important;
}

/* ===== Sources and review history ===================================
   It was a transparent run of text with a tick icon \u2014 a button that gave no
   sign of being one. It follows the site rule now: a pill with no fill, a red
   edge and a red label, filling red when you point at it. */
.a-evidence-btn {
  display: inline-flex !important; align-items: center; gap: 10px;
  min-height: 44px; padding: 0 20px;
  background: transparent !important; border: 1px solid var(--orange, var(--red-500)) !important;
  border-radius: 9999px !important; color: var(--orange, var(--red-500)) !important;
  font-family: 'Noto Sans', sans-serif !important; font-size: 16px !important;
  font-weight: 600 !important; letter-spacing: normal !important;
  transition: background-color .2s ease, color .2s ease;
}
.a-evidence-btn svg { stroke: currentColor !important; width: 18px; height: 18px; }
.a-evidence-btn::after { opacity: 1; font-size: 12px; margin-left: 2px; }
.a-evidence-btn:hover { background: var(--orange, var(--red-500)) !important; color: var(--white) !important; }
.a-ev-tabs { gap: 24px; }

/* The four sidebar blocks were flush against each other, 0px between all
   three joins, so the column read as one grey slab. */
.a-side { display: flex !important; flex-direction: column; gap: 20px; }
/* Sticky as one piece: the contents list on its own travelled down over the
   author and read-next blocks. Capped to the viewport so its foot is
   reachable \u2014 the column is taller than the screen. */
.a-side { position: sticky !important; top: 93px; align-self: start !important;
  max-height: calc(100vh - 113px); overflow-y: auto; }
.a-side > .a-side-block:first-child { position: static; max-height: none; overflow: visible; }
/* Same button as the rest of the site: a pill with no fill and a red edge,
   red on hover. The selected filter uses the fill to mean state. */
.j-pill { background: transparent !important; border: 1px solid var(--red-500) !important; border-radius: 9999px !important;
  padding: 0 16px !important; min-height: 40px !important; display: inline-flex !important; align-items: center !important;
  color: var(--red-500) !important; font-size: 15px !important; font-weight: 600 !important;
  transition: background-color .2s ease, color .2s ease !important; }
.j-pill:hover { background: var(--red-500) !important; color: var(--white) !important; }
.j-pill.on { background: var(--red-500) !important; border-color: var(--red-500) !important; color: var(--white) !important; }
/* ===== Colour, rebalanced ==========================================
   Red was doing 22 jobs across the site and nothing competed with it.
   Here too: filters, category tags, the nav pill and the badge were all
   red. Purple carries structure now; red means an action. */
.j-pill { border-color: var(--purple-300) !important; color: var(--purple-500) !important; background: transparent !important; }
.j-pill:hover, .j-pill.on { background: var(--purple-500) !important; border-color: var(--purple-500) !important; color: var(--white) !important; }
.j-cat, .a-side-head, .article-meta, .sidebar-article-tag, .j-badge { color: var(--purple-400) !important; }
.nav-cta { border-color: var(--purple-500) !important; color: var(--purple-500) !important; }
.nav-cta:hover { background: var(--purple-500) !important; color: var(--white) !important; }
.btn-text, .text-link, .a-body a { color: var(--purple-500) !important; }
.btn-text:hover, .text-link:hover, .a-body a:hover {
  color: var(--purple-700) !important; text-decoration: underline !important; text-underline-offset: 3px; }
footer { background: var(--purple-600) !important; }
.j-cat, .a-side-head, .a-ev-tab { font-size: 15px !important; font-weight: 600 !important; }

/* The tables inside articles were still on the pre-Miro tokens — a translucent
   purple header and a translucent zebra. Miro's table is a 12px panel with
   hairline rules and a solid surface header. */
.a-body .lexical-table-container, .a-body table { border-radius: 12px !important; overflow: hidden !important;
  border: 1px solid var(--hairline) !important; }
.a-body th, .a-body .lexical-table-cell-header-1 {
  background: var(--surface) !important; color: var(--steel) !important;
  font-family: 'Noto Sans', sans-serif !important; font-size: 15px !important; font-weight: 600 !important;
  border-bottom: 1px solid var(--hairline) !important; }
.a-body td, .a-body .lexical-table-cell { background: var(--white) !important; color: var(--slate) !important;
  border-bottom: 1px solid var(--hairline-soft) !important; border-right: 1px solid var(--hairline-soft) !important; }
.a-body tr:last-child td { border-bottom: 0 !important; }
.a-body td:last-child, .a-body th:last-child { border-right: 0 !important; }
.a-body td p, .a-body th p { color: inherit !important; font-size: 17px !important; line-height: 25px !important; }
.a-body th p { font-size: 15px !important; font-weight: 600 !important; }
.a-body td:first-child { font-weight: 600 !important; color: var(--ink) !important; }
.a-body td:first-child p { color: var(--ink) !important; }

/* The journal templates carry their own .nav-cta with a 2px bottom padding
   left over from the underlined-link treatment, so the button rendered 129x25
   with the label hard against the top. Buttons are buttons here too. */
.nav-cta, .btn-primary, .footer-email-row button, .a-share a, .a-share button {
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  line-height: 1 !important; border-radius: 8px !important; border-bottom: 0 !important;
  text-decoration: none !important;
}
.nav-cta { height: 44px !important; padding: 0 20px !important; background: var(--red-500) !important;
  color: var(--white) !important; font-size: 16px !important; font-weight: 600 !important; }
.btn-primary { height: 48px !important; padding: 0 24px !important; font-size: 16px !important; font-weight: 600 !important; }
.footer-email-row button { height: 48px !important; padding: 0 24px !important; }
.footer-email-row input { height: 48px !important; border-radius: 8px !important; }
.a-share a, .a-share button { width: 44px !important; height: 44px !important; border-radius: 8px !important; }

/* ===== Old-system leftovers, removed at the root ======================
   The audit found the same four habits on every page, all of them from
   the stylesheets underneath rather than from anything written here.

   1. Opacity used to make grey. The old system dimmed text with
      opacity 0.4 to 0.8 instead of choosing a colour, which is why the
      copy looked washed out. Miro sets a colour and leaves it alone.
   2. Purple used as a text colour. Here purple is a surface.
   3. The old tokens: #FAFAFA white, #F2F2F0 grey, #0D0D0B ink and the
      rgba(13,13,11,0.08) hairline, still coming from each page's own
      :root and beating anything scoped to a class.
   4. The old typeface on form controls and buttons, which do not
      inherit font-family.
   ===================================================================== */

/* The token overrides that used to sit here redefined the old names to the
   new values, because this layer lived inside each template and had to beat
   that page's own :root. _shared.css defines all of them now and arrives in
   the same file, so the block is gone. Two of its lines had become
   self-referential in the move — `--white: var(--white)` resolves to nothing,
   which is why every white panel went transparent. */

/* 1. No more opacity-as-grey. Decorative layers keep theirs. */
p, li, span, a, h1, h2, h3, h4, h5, h6, small, em, strong, b, label, legend,
summary, td, th, figcaption, button, input, select, textarea, dt, dd, blockquote {
  opacity: 1 !important;
}
.hl-scrim, .error-num, .material-icons, [class*="scrim"], [class*="overlay"],
[class*="watermark"], .a-video img, .ambient { opacity: revert !important; }

/* Anything that was dimmed now takes the muted colour instead. */
.footer-copyright, .footer-disclaimer { color: rgba(255,255,255,0.75) !important; }
.prog-fact-label, .waitlist-promise, .hl-intro-note, .prog-lede,
.person-role, .last-updated, .teach-role, .quiz-option-desc, small {
  color: var(--steel) !important;
}

/* 2. Purple is a surface, not a text colour. */
h1, h2, h3, h4, h5, .a-listen-label, .a-evidence-btn, summary, legend,
label, th, .prog-facts b, .tool-status { color: var(--ink) !important; }
footer h1, footer h2, footer h3, footer h4, footer h5, footer p, footer a,
.cta-about h2, .cta-about p, .cta-about a { color: var(--white) !important; }
.tool-status { color: var(--purple-500) !important; }

/* 3. Old radii. */
/* This used to be [class] { border-radius: unset }, which cleared the radius
   on every classed element on the site — the nav button and the featured
   article card among them. Old radii are named explicitly instead. */
.a-avatar, .person-photo, .person-placeholder { border-radius: 50%; }
.pk-table-wrap, .a-lang-btn, .a-evidence-btn, details, .a-copy,
input, select, textarea, .btn-submit { border-radius: 8px !important; }
.pk-table-wrap, .lexical-table-container { border-radius: 12px !important; }

/* The site-wide typeface rule lives in custom.css. It used to be repeated
   here, which meant the icon-font exception below had to be repeated too. */
h1, h2, h3, h4, h5, h6, .hl-head, .a-tldr-head, .prog-card-title, .tool-card-head,
.sidebar-article-title, .hero-featured-body h1, .hero-featured-body h2 {
  font-family: 'Hanken Grotesk', sans-serif !important;
}

/* 5. Links are not underlined by a border. */
a { border-bottom: 0 !important; }
.a-body a, .prog-prose a, .legal-content a { text-decoration: underline; text-underline-offset: 3px; }

/* 6. Old surfaces. */
.a-main, .a-side, .j-filters, .a-lang-btn { background: var(--white) !important; }
.a-listen, .a-side-thumb, .j-card-img { background: var(--ground) !important; }

/* The journal header was a different size from every other page: its own
   stylesheet sets nav links at 12px where the rest of the site is 16px. */
.nav-links a { font-size: 16px !important; font-weight: 500 !important; color: var(--ink) !important; }
/* Desktop only. Unconditional, this beat the phone rule further up the file
   and kept 40px of side padding on a 375px screen — 80px of a phone spent on
   margin, which squeezed the wordmark from 107px to 78px. */
@media (min-width: 769px) {
  nav { height: 73px !important; padding: 0 40px !important; }
}

/* The category pills sat on a white strip on the cream ground. The pills carry
   their own surface; the strip does not need one. */
.j-filters { background: transparent !important; border: 0 !important; padding: 24px 0 !important; }
/* The filter row was pinned to the top of the viewport and rode down the
   page over the articles. It is a control you use once, not a toolbar. */
.j-filters { position: static !important; top: auto !important; z-index: auto !important; }

/* Hover, which the journal had none of. */
.j-card { transition: box-shadow 0.2s ease, transform 0.2s ease; }
.j-card:hover { box-shadow: 0 2px 4px rgba(28,28,30,0.06), 0 16px 40px rgba(28,28,30,0.10); transform: translateY(-2px); }
.j-card-img { overflow: hidden; }
.j-card-img img { transition: transform 0.35s ease; }
.j-card:hover .j-card-img img { transform: scale(1.04); }


/* One body size across the site. The sweep found 13px on the quiz, 15 on
   success, 16 on the hand-written pages, 19 on the legal ones and 22 in the
   journal — each page's own stylesheet setting its own. */
body p, body li, body .prog-prose p, body .what-is-body p, body .about-col p,
body .legal-content p, body .hl-prog-blurb, body .quiz-q, body .quiz-option-text,
body .includes-list li, body .check-list li, body .prog-card-body p, body .tile p {
  font-size: 18px; line-height: 27px;
}
/* The sizes that are deliberately not body copy. */
body .footer-copyright, body .footer-disclaimer, body .fine, body .meta,
body .sidebar-article-meta, body .sidebar-article-tag, body .article-meta,
body .prog-sources li, body .privacy-note, body .last-updated, body small,
body .quiz-option-desc, body .hl-prog-status, body .tool-status, body .prog-card-label,
body .person-role, body .waitlist-promise, body figcaption {
  font-size: 15px; line-height: 23px;
}
body .a-standfirst, body .stand { font-size: 22px; line-height: 31px; }

/* The journal was on MiroBlog's cream ground while every other page is on the
   marketing grey. Miro really does run two grounds, but a reader moving from
   the homepage to an article should not feel the floor change, so it matches
   the rest of the site. Revert this block to #FBF7EF to go back. */
body { background: var(--ground) !important; }

.j-lead-img { background: var(--ground) !important; }


/* Heading rhythm. The sweep found headings sitting flush on the paragraph
   under them on seven pages — 0px on About and the AI policy, 8px on the
   feature lists. Miro gives a heading room below it in proportion to its
   size, and three times as much above as below. Set once, for the element,
   because every page was deciding this for itself. */
h1 { margin-bottom: 16px; }
h2 { margin-bottom: 14px; }
h3 { margin-bottom: 12px; }
h4, h5 { margin-bottom: 10px; }
h1 + p, h2 + p, h3 + p, h4 + p, h5 + p,
h1 + ul, h2 + ul, h3 + ul, h4 + ul, h1 + ol, h2 + ol, h3 + ol { margin-top: 0; }

/* Headings that sit in a row with something else are laid out, not spaced. */
.pk-role-head h2, .pk-role-head h3, .tool-card-head, .hl-prog-title,
.a-tldr-head, .hl-head h2, .footer-signup h3 { margin-bottom: 0; }
.hl-prog-title { margin: 16px 0 12px; }
.hl-head h2 { margin-bottom: 0; }
.a-tldr-head { margin-bottom: 20px; }
.footer-signup h3 { margin-bottom: 20px; }


/* ===== Buttons, settled ============================================
   The header button is an outline, not a fill — the one in the nav was
   competing with the actual call to action on every page. It takes the
   "Take the quiz" shape, which is the pill: a 1px border, no fill, and
   the fill arriving on hover. Every header on the site uses it.

   The footer keeps its red. It is the one filled button below the fold
   and it is the thing to do there. */
.nav-cta {
  background: transparent !important; color: var(--orange) !important;
  border: 1px solid var(--orange) !important; border-radius: 9999px !important;
  height: 44px !important; padding: 0 20px !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  font-size: 16px !important; font-weight: 600 !important; line-height: 1 !important;
  transition: background-color 0.2s ease, color 0.2s ease !important;
}
.nav-cta { background: transparent !important; border: 1px solid var(--purple-500) !important; color: var(--purple-500) !important; }
.nav-cta:hover { background: var(--purple-500) !important; border-color: var(--purple-500) !important; color: var(--white) !important; }
.j-badge { border-color: var(--purple-300) !important; color: var(--purple-500) !important; }
.a-play { background: var(--purple-500) !important; }
/* The language menu is closed at rest, so its 11px never showed in a sweep. */
.a-lang-menu a, .a-lang-en, .a-lang-menu b, .a-lang-menu span {
  font-size: 15px !important; line-height: 22px !important; }
/* The reference list and its DOI links sit below the article. */
.a-sources, .a-sources li, .a-sources a, .a-sources b {
  font-size: 15px !important; line-height: 23px !important; }
.a-history, .a-history li, .a-history b { font-size: 15px !important; line-height: 23px !important; }
.a-evidence-btn { border-color: var(--purple-300) !important; color: var(--purple-500) !important; }
.a-evidence-btn.on, .a-evidence-btn[aria-selected="true"] {
  background: var(--purple-500) !important; border-color: var(--purple-500) !important; color: var(--white) !important; }

.footer-email-row button {
  background: var(--orange) !important; color: var(--white) !important;
  border-radius: 8px !important;
}
.footer-email-row button:hover { background: var(--orange-dark) !important; color: var(--white) !important; }

/* The journal footer sat at 16px where every other page is 20px. */
footer { border-radius: 20px 20px 0 0 !important; }


/* ===== Button shape, one rule ========================================
   Every button on the site is a pill. The single exception is the footer
   subscribe, which sits against a square-ended input and would look odd
   rounded — that one keeps the 8px. */
/* ===== Button shape, one rule ========================================
   Named, not inferred. This was `button:not(...)` \u2014 every <button> on the
   site gets the pill \u2014 which is wrong for any control that happens to be a
   button without looking like one. It bent the evidence tabs' underline into
   a lens, and the exception list was growing one :not() at a time.

   A button earns the pill by being on this list. The single exception is the
   footer subscribe, which sits against a square-ended input. */
.btn-primary, .btn-text, .text-link, .nav-cta, .hl-quiz-link,
.btn-submit, .btn-next, .btn-back, .result-restart, .quiz-option, .j-pill,
.a-evidence-btn,
.waitlist-card button, .waitlist-form button,
a.btn-primary, input[type=submit] {
  border-radius: 9999px !important;
}
/* Circles stay circles. */
.prog-card-cta, .hl-prog-arrow, .prog-card-arrow, .a-avatar, .a-play,
.person-photo, .person-placeholder, .a-share a, .a-share button { border-radius: 50% !important; }
/* The footer pair: a rounded input and its button, the one square-ish shape. */
.footer-email-row button, .footer-email-row input { border-radius: 8px !important; }


/* ===== Arrows =======================================================
   An arrow means "this takes you somewhere", so it goes on links and not
   on controls: not on Subscribe, Send message, Send application, the
   journal filters, the language picker or the evidence tabs.

   Two already carry one in their own copy — the quiz link and "All
   articles", which lives in the CMS content rather than a template — so
   they are excluded rather than given a second. */
/* Already has one, or is not a journey. */
.hl-quiz-link::after, .view-all-strip .btn-text::after, .j-more .btn-text::after { content: none; }
.hl-quiz-link, .view-all-strip .btn-text { }


/* The careers form hides its role-specific questions with the `hidden`
   attribute. My .pk-group { display: grid } beat the browser's rule for
   [hidden], so every role's questions showed at once. A class selector
   outranks the user-agent sheet, so the intent has to be restated here. */
[hidden] { display: none !important; }


/* ===== Footer, standardised =========================================
   The email box was white on the CMS pages and rgba(250,250,250,0.07) on
   every hand-written page and the journal — a leftover from when the
   footer was a dark panel, which read as purple rather than white. One
   input everywhere: white, 50px, no border, 8px. */
.footer-email-row input,
footer .footer-email-row input,
footer input[type=email] {
  background: var(--white) !important; color: var(--ink) !important;
  border: 0 !important; border-radius: 8px !important;
  min-height: 50px !important; height: 50px !important;
  padding: 0 18px !important; font-size: 16px !important;
}
.footer-email-row input::placeholder, footer input[type=email]::placeholder {
  color: var(--steel) !important; opacity: 1 !important;
}
.footer-email-row button, footer .footer-email-row button {
  min-height: 50px !important; height: 50px !important; border-radius: 8px !important;
}
/* The journal footer has no status line under the box, which is where its
   38px shortfall came from. The space is reserved so every footer is the
   same height whatever the subscribe mechanism is. */
.footer-signup .footer-email-msg, .footer-signup::after { min-height: 24px; }
.footer-signup .footer-email-row { margin-bottom: 0; }

/* No form here, so nothing reserves the status line. */
.footer-signup .footer-email-row::after { content: ""; display: block; }
.footer-signup { padding-bottom: 24px; }