/*
  My Affairs Organized - home page
  Design tokens are the real brand values, carried over unchanged from the design export.
  Layout variables switch at 900px. Everything is scoped under .mao-page so it cannot
  leak into the rest of the site, and the theme cannot reach in.
*/

/* ---------------------------------------------------------------- tokens */
.mao-page {
  /* Deep cool ink */
  --ink-900:#0A2430; --ink-800:#11333F; --ink-700:#1B4150; --ink-600:#2C5566;
  /* Harbour blue */
  --blue-900:#0F4E6B; --blue-700:#136A8E; --blue-600:#1B84AE; --blue-500:#2BA0D0;
  --blue-300:#8FCFE7; --blue-200:#C3E6F3; --blue-100:#E4F3F9;
  /* Eucalyptus green */
  --green-800:#265A4E; --green-700:#337364; --green-600:#4A8E7C; --green-500:#6FA898;
  --green-300:#A9CCC1; --green-200:#D3E6DF; --green-100:#EAF3F0;
  /* Sunlight yellow */
  --yellow-800:#7A5A10; --yellow-700:#B8881B; --yellow-600:#DDA62A; --yellow-500:#F2C24B;
  --yellow-400:#F8D779; --yellow-200:#FCEDC4; --yellow-100:#FDF6E4;
  /* Cool neutrals */
  --paper:#FBFCFC; --neutral-50:#F4F7F7; --neutral-100:#EBEFEF; --neutral-200:#DDE4E4;
  --neutral-300:#C4CFCF; --neutral-400:#9AA8A8; --neutral-500:#748383; --neutral-600:#586666;
  --white:#FFFFFF;
  /* Brand red */
  --red-600:#B4443C; --red-700:#96332C; --red-100:#F7E4E2;

  --text-heading:var(--ink-900);
  --text-body:var(--ink-700);
  --text-muted:var(--neutral-600);
  --text-on-dark:#EAF2F4;
  --text-on-dark-muted:#A8C2CB;
  --border-hairline:var(--neutral-200);
  --border-strong:var(--neutral-300);

  --font-display:"Newsreader",Georgia,"Times New Roman",serif;
  --font-sans:"Plus Jakarta Sans","Helvetica Neue",Arial,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;

  --size-body-l:18px; --size-body:16px; --size-body-s:14px; --size-caption:13px; --size-label:12px;
  --lh-tight:1.08; --lh-heading:1.22; --lh-snug:1.4; --lh-body:1.62;
  --w-light:300; --w-regular:400; --w-medium:500; --w-semibold:600; --w-bold:700;
  --track-display:-.018em; --track-label:.14em;

  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px;
  --space-6:24px; --space-8:32px; --space-10:40px; --space-12:48px; --space-16:64px;

  --radius-s:8px; --radius-m:12px; --radius-l:18px; --radius-xl:28px; --radius-pill:999px;
  --container-max:1180px; --container-prose:660px;

  --shadow-2:0 2px 4px rgba(10,36,48,.06),0 8px 24px rgba(10,36,48,.07);
  --shadow-3:0 8px 16px rgba(10,36,48,.08),0 24px 54px rgba(10,36,48,.12);
  --ease-calm:cubic-bezier(.22,.61,.36,1);

  /* ---- layout variables: desktop ---- */
  --gutter:64px; --heroy:64px; --secy:104px; --heady:16px;
  --h1:64px; --h2:44px; --h3f:30px; --splitgap:64px; --secgap:48px; --tightY:48px;
  --cardpad:32px; --panelpad:56px; --price:60px; --quotefs:19px;
  --heroimgw:320px; --ctaw:auto; --linkgap:20px; --navgap:32px;
  --herodir:row; --cols2:minmax(0,1.6fr) minmax(250px,.6fr);
  --cols2q:repeat(auto-fit,minmax(300px,1fr));
  --modflow:column; --modrows:repeat(9,auto);
  --icongrid:repeat(4,minmax(0,1fr));
  --factsHeadCols:minmax(360px,1fr) minmax(380px,1.35fr);
  --footy:48px; --wordmark:44px; --wordmark2:13px;
}

@media (max-width:900px) {
  .mao-page {
    --gutter:20px; --heroy:32px; --secy:56px; --heady:14px;
    --h1:44px; --h2:32px; --h3f:26px; --splitgap:28px; --secgap:28px; --tightY:28px;
    --cardpad:22px; --panelpad:24px; --price:46px; --quotefs:19px;
    --heroimgw:100%; --ctaw:100%; --linkgap:12px; --navgap:14px;
    --herodir:column-reverse; --cols2:minmax(0,1fr);
    --cols2q:minmax(0,1fr);
    --modflow:row; --modrows:auto;
    --icongrid:repeat(2,minmax(0,1fr));
    --factsHeadCols:minmax(0,1fr);
    --footy:40px; --wordmark:30px; --wordmark2:11px;
  }
}

/* ---------------------------------------------------------------- base */
.mao-page,
.mao-page *,
.mao-page *::before,
.mao-page *::after { box-sizing:border-box; }

.mao-page {
  margin:0;
  background:var(--paper);
  color:var(--text-body);
  font:var(--w-regular) var(--size-body)/var(--lh-body) var(--font-sans);
  -webkit-font-smoothing:antialiased;
  text-wrap:pretty;
  overflow-x:hidden;
}
.mao-page h1, .mao-page h2, .mao-page h3 { margin:0; color:var(--text-heading); }
.mao-page p { margin:0; }
.mao-page img { max-width:100%; }
.mao-page a { text-decoration:none; }
.mao-page :focus-visible { outline:2px solid var(--blue-500); outline-offset:2px; }

.mao-wrap { max-width:var(--container-max); margin:0 auto; }

/* ---------------------------------------------------------------- header */
.mao-header {
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:var(--navgap);
  padding:var(--heady) var(--gutter);
  background:var(--paper);
  border-bottom:1px solid var(--border-hairline);
}
.mao-wordmark { display:grid; gap:6px; justify-items:start; }
.mao-wordmark-a {
  font-family:var(--font-display); font-weight:var(--w-light);
  font-size:var(--wordmark); letter-spacing:-.024em; line-height:1; color:var(--ink-900);
}
.mao-wordmark-rule { height:2px; width:100%; background:var(--red-600); }
.mao-wordmark-b {
  font-family:var(--font-sans); font-weight:var(--w-semibold);
  font-size:var(--wordmark2); letter-spacing:.34em; text-transform:uppercase; color:var(--red-700);
}
.mao-nav { display:flex; flex-wrap:wrap; align-items:center; gap:var(--linkgap); }
.mao-navlink {
  font:var(--w-medium) 18px/var(--lh-snug) var(--font-sans);
  color:var(--text-heading);
  transition:color 160ms var(--ease-calm);
}
.mao-navlink:hover { color:var(--red-700); }

/* ---------------------------------------------------------------- buttons */
.mao-btn {
  display:inline-flex; align-items:center; justify-content:center; text-align:center;
  background:var(--red-600); color:var(--white);
  font-family:var(--font-sans); font-weight:var(--w-semibold); font-size:var(--size-body-l);
  padding:var(--space-4) var(--space-6);
  border-radius:var(--radius-pill);
  line-height:1.25; text-wrap:balance;
  border:0; cursor:pointer;
  transition:background-color 160ms var(--ease-calm);
}
.mao-btn:hover, .mao-btn:focus-visible { background:var(--red-700); color:var(--white); }
.mao-btn--hero { width:var(--ctaw); box-shadow:var(--shadow-2); }
.mao-btn--wide { padding:var(--space-4) var(--space-8); }
.mao-btn--lg { width:var(--ctaw); margin-top:var(--space-2); padding:var(--space-5) var(--space-10); }
.mao-btn--pill-sm {
  font:var(--w-semibold) 18px/1.4 var(--font-sans);
  padding:var(--space-3) var(--space-5);
  white-space:nowrap;
}

/* ---------------------------------------------------------------- shared type */
.mao-eyebrow-red {
  font:var(--w-semibold) var(--size-label)/1.1 var(--font-sans);
  letter-spacing:var(--track-label); text-transform:uppercase; color:var(--red-700);
}
.mao-h1 {
  font-family:var(--font-display); font-weight:var(--w-light);
  font-size:var(--h1); line-height:var(--lh-tight);
  letter-spacing:var(--track-display); color:var(--text-heading); text-wrap:balance;
}
.mao-h2 {
  font-family:var(--font-display); font-weight:var(--w-light);
  font-size:var(--h2); line-height:var(--lh-heading);
  letter-spacing:var(--track-display); color:var(--text-heading); text-wrap:balance;
}
.mao-h3 {
  font-family:var(--font-display); font-weight:var(--w-light);
  font-size:var(--h3f); line-height:1.2;
  letter-spacing:var(--track-display); color:var(--text-heading);
}
.mao-underline { display:block; height:3px; width:96px; background:var(--red-600); }
.mao-lead { font:var(--w-regular) var(--size-body-l)/var(--lh-body) var(--font-sans); color:var(--text-body); }
.mao-lead strong { color:var(--text-heading); font-weight:var(--w-semibold); }
.mao-p { font:var(--w-regular) var(--size-body)/var(--lh-body) var(--font-sans); color:var(--text-body); }

/* ---------------------------------------------------------------- hero */
.mao-hero { padding:var(--heroy) var(--gutter) var(--tightY); background:var(--paper); }
.mao-hero-inner {
  max-width:var(--container-max); margin:0 auto;
  display:flex; flex-direction:var(--herodir); gap:var(--splitgap); align-items:center;
}
.mao-hero-copy { flex:1 1 0%; min-width:0; display:grid; gap:var(--space-5); justify-items:start; }
.mao-chips { display:flex; flex-wrap:wrap; align-items:flex-start; gap:var(--space-2); }
.mao-chip {
  display:inline-flex; align-items:center; white-space:nowrap;
  font:var(--w-medium) var(--size-body-s)/var(--lh-snug) var(--font-sans);
  color:var(--text-heading);
  border:1px solid var(--border-strong); border-radius:var(--radius-pill);
  padding:var(--space-2) var(--space-4);
}
.mao-hero-media { flex:none; width:var(--heroimgw); display:grid; gap:var(--space-2); }

/* offset picture frame, used by the hero and the story image */
.mao-frame { position:relative; width:100%; padding:0 0 12px 12px; }
.mao-frame::before {
  content:""; position:absolute; left:0; bottom:0;
  width:calc(100% - 24px); height:calc(100% - 12px);
  border-radius:var(--radius-xl); background:var(--blue-200);
}
.mao-frame-inner {
  position:relative; width:100%; max-width:100%; aspect-ratio:4 / 5;
  border-radius:var(--radius-xl); overflow:hidden;
  background:var(--neutral-100); box-shadow:var(--shadow-3);
}
.mao-frame-inner img { width:100%; height:100%; object-fit:cover; display:block; }
.mao-frame-inner--story img { object-position:50% 35%; }

/* ---------------------------------------------------------------- course panel */
.mao-course { padding:var(--tightY) var(--gutter) var(--secy); background:var(--paper); }
.mao-sec-head-centre {
  max-width:var(--container-max); margin:0 auto var(--space-8);
  display:grid; gap:var(--space-3); justify-items:center; text-align:center;
}
.mao-panel {
  max-width:var(--container-max); margin:0 auto;
  display:grid; grid-template-columns:var(--cols2); gap:var(--splitgap);
  align-items:start;
  background:var(--blue-100); border-radius:var(--radius-xl); padding:var(--panelpad);
}
.mao-panel-copy { display:grid; gap:var(--space-5); align-content:start; }
.mao-bullets { display:grid; gap:var(--space-3); }
.mao-bullet { display:flex; align-items:flex-start; gap:var(--space-3); }
.mao-bullet::before {
  content:""; flex:none; width:6px; height:6px; margin-top:10px;
  border-radius:999px; background:var(--red-600);
}
.mao-note-red {
  font:var(--w-medium) var(--size-body)/var(--lh-body) var(--font-sans);
  color:var(--red-700);
}
.mao-toggle {
  justify-self:start;
  display:inline-flex; align-items:center; gap:var(--space-2);
  font-family:var(--font-sans); font-weight:var(--w-bold); font-size:var(--size-body-l);
  color:var(--red-700); background:none; border:0; padding:0; cursor:pointer;
  transition:color 160ms var(--ease-calm);
}
.mao-toggle:hover { color:var(--red-600); }
.mao-toggle svg { width:18px; height:18px; transition:transform 240ms var(--ease-calm); }
.mao-toggle[aria-expanded="true"] svg { transform:rotate(180deg); }

.mao-pricecard {
  display:grid; gap:var(--space-5); align-content:start;
  background:var(--white); border:2px solid var(--red-600);
  box-shadow:var(--shadow-2); border-radius:var(--radius-l); padding:var(--space-6);
}
.mao-label {
  font:var(--w-semibold) var(--size-label)/1.1 var(--font-sans);
  letter-spacing:var(--track-label); text-transform:uppercase; color:var(--blue-900);
}
.mao-price-row { display:flex; align-items:baseline; gap:var(--space-3); flex-wrap:wrap; }
.mao-price {
  font-family:var(--font-mono); font-weight:var(--w-medium);
  font-size:var(--price); line-height:1; letter-spacing:-.03em; color:var(--ink-900);
  font-variant-numeric:tabular-nums;
}
.mao-save {
  display:inline-flex; align-items:center; white-space:nowrap;
  font:var(--w-semibold) var(--size-body-s)/var(--lh-snug) var(--font-sans); color:var(--red-700);
}
.mao-chip--soft {
  display:inline-flex; align-items:center;
  font:var(--w-regular) var(--size-body-s)/var(--lh-snug) var(--font-sans); color:var(--text-body);
  border:1px solid var(--border-hairline); border-radius:var(--radius-pill);
  padding:var(--space-2) var(--space-4);
}
.mao-hr { height:1px; background:var(--border-hairline); }

/* ---------------------------------------------------------------- inside the course */
.mao-inside {
  max-width:var(--container-max); margin:var(--space-10) auto 0;
  display:grid; gap:var(--space-6);
}
.mao-inside[hidden] { display:none; }
.mao-inside-head { display:grid; gap:var(--space-3); justify-items:start; }
.mao-inside-head .mao-p { max-width:74ch; font-size:var(--size-body-l); }
.mao-modules {
  display:grid;
  grid-auto-flow:var(--modflow); grid-template-rows:var(--modrows);
  grid-auto-columns:minmax(0,1fr);
  gap:0 var(--space-12);
  background:var(--blue-100); border-radius:var(--radius-xl); padding:var(--cardpad);
}
.mao-module {
  display:flex; align-items:baseline; gap:var(--space-3);
  border-bottom:1px solid var(--blue-200); padding:10px 0;
}
.mao-module-n {
  flex:none; width:22px;
  font-family:var(--font-mono); font-weight:var(--w-medium);
  font-size:12px; letter-spacing:.06em; color:var(--red-600);
  font-variant-numeric:tabular-nums;
}
.mao-module-t {
  font:var(--w-medium) var(--size-body)/var(--lh-body) var(--font-sans);
  color:var(--text-heading);
}

/* ---------------------------------------------------------------- story + facts */
.mao-story { padding:var(--space-10) var(--gutter) var(--secy); background:var(--paper); }
.mao-story-grid {
  max-width:var(--container-max); margin:0 auto var(--space-10);
  display:grid; grid-template-columns:var(--factsHeadCols); gap:var(--splitgap);
  align-items:start;
}
.mao-story-media { align-self:start; }
.mao-story-copy { display:grid; gap:var(--space-4); justify-items:start; padding-top:var(--space-6); }
.mao-story-copy .mao-p { max-width:68ch; }

.mao-facts-head {
  max-width:var(--container-max); margin:var(--space-16) auto var(--space-12);
  display:grid; gap:var(--space-3); justify-items:start;
}
/* The original had white-space:nowrap here, which clipped this heading on a phone. */
.mao-h2--facts { font-size:clamp(24px,3.2vw,44px); }
.mao-facts {
  max-width:var(--container-max); margin:0 auto;
  display:grid; grid-template-columns:var(--icongrid); gap:var(--space-6) var(--space-8);
}
.mao-fact { display:grid; gap:var(--space-2); align-content:start; }
.mao-fact-icon {
  display:grid; place-items:center; width:34px; height:34px;
  border-radius:var(--radius-s); background:var(--blue-100); color:var(--blue-700);
}
.mao-fact-icon svg { width:18px; height:18px; }
.mao-fact-problem {
  font-family:var(--font-sans); font-weight:var(--w-semibold);
  font-size:15px; line-height:1.35; color:var(--ink-900);
}
.mao-fact-solution {
  font:var(--w-regular) 13px/var(--lh-snug) var(--font-sans); color:var(--green-800);
}
.mao-centre-cta {
  max-width:var(--container-max); margin:var(--space-10) auto 0;
  display:flex; justify-content:center;
}

/* ---------------------------------------------------------------- small things */
.mao-small { padding:var(--secy) var(--gutter); background:var(--blue-100); }
.mao-small-inner {
  max-width:var(--container-max); margin:0 auto;
  display:grid; gap:var(--space-3); justify-items:start;
}
.mao-small-inner .mao-lead { max-width:78ch; }
.mao-small-inner .mao-underline { margin-top:var(--space-2); }
.mao-small-body { margin-top:var(--space-4); }

/* ---------------------------------------------------------------- testimonials */
.mao-quotes { padding:var(--secy) var(--gutter); background:var(--paper); }
.mao-quotes-inner { max-width:var(--container-max); margin:0 auto; display:grid; gap:var(--secgap); }
.mao-quote-grid { display:grid; grid-template-columns:var(--cols2q); gap:var(--space-10); }
.mao-quote {
  margin:0; display:grid; gap:var(--space-5); align-content:start;
  border-left:3px solid var(--red-600); padding-left:var(--space-6);
}
.mao-quote blockquote {
  margin:0; font-family:var(--font-display); font-weight:var(--w-regular);
  font-size:var(--quotefs); line-height:var(--lh-snug);
  letter-spacing:var(--track-display); color:var(--text-heading);
}
.mao-byline { display:flex; align-items:center; gap:var(--space-3); }
.mao-avatar {
  flex:none; width:52px; height:52px; border-radius:999px; overflow:hidden;
  border:2px solid var(--blue-500); background:var(--neutral-100);
}
.mao-avatar img { width:100%; height:100%; object-fit:cover; display:block; }
.mao-byline-name {
  font:var(--w-semibold) var(--size-body-s)/var(--lh-snug) var(--font-sans); color:var(--text-muted);
}

/* ---------------------------------------------------------------- final call */
.mao-final { padding:var(--secy) var(--gutter); background:var(--ink-900); }
.mao-final-inner {
  max-width:var(--container-prose); margin:0 auto;
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:var(--space-5);
}
.mao-final .mao-h2 { color:var(--text-on-dark); }
.mao-p-ondark {
  font:var(--w-regular) var(--size-body-l)/var(--lh-body) var(--font-sans);
  color:var(--text-on-dark-muted); max-width:48ch;
}
.mao-fineprint {
  font:var(--w-regular) var(--size-body-s)/var(--lh-snug) var(--font-sans);
  color:var(--text-on-dark-muted);
}

/* ---------------------------------------------------------------- footer */
.mao-footer { padding:var(--footy) var(--gutter); background:var(--paper); border-top:1px solid var(--border-hairline); }
.mao-footer-inner { max-width:var(--container-max); margin:0 auto; display:grid; gap:var(--space-5); }
.mao-footnav { display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-3); }
.mao-footlink {
  font:var(--w-regular) var(--size-body-s)/var(--lh-snug) var(--font-sans); color:var(--text-body);
}
.mao-footlink:hover { color:var(--red-700); }
.mao-sep { color:var(--border-strong); }
.mao-fine {
  font:var(--w-regular) var(--size-body-s)/var(--lh-snug) var(--font-sans);
  color:var(--text-muted); max-width:74ch;
}
.mao-copyline {
  font:var(--w-regular) var(--size-caption)/1.45 var(--font-sans); color:var(--neutral-500);
}

@media (prefers-reduced-motion:reduce) {
  .mao-page * { transition-duration:0ms !important; animation-duration:0ms !important; }
}

/* ================================================================ legal page
   Terms, privacy, disclaimers. Long-form reading: one narrow column, generous
   spacing, no decoration that gets in the way of the words.
*/
.mao-legal-hero {
  padding:var(--secy) var(--gutter);
  background:linear-gradient(168deg,var(--blue-100) 0%,var(--green-100) 100%);
}
.mao-legal-hero-inner { max-width:var(--container-prose); margin:0 auto; }

.mao-legal-main { padding:var(--secy) var(--gutter); background:var(--paper); }
.mao-legal-wrap {
  max-width:var(--container-prose); margin:0 auto;
  display:grid; gap:var(--space-16);
}

.mao-legal-article { display:grid; gap:var(--space-8); }
.mao-legal-h2 {
  font-family:var(--font-display); font-weight:var(--w-light);
  font-size:var(--h2); line-height:var(--lh-heading);
  letter-spacing:var(--track-display); color:var(--text-heading);
  padding-bottom:var(--space-4);
  border-bottom:1px solid var(--border-hairline);
  scroll-margin-top:var(--space-8);
}
.mao-legal-group { display:grid; gap:var(--space-3); }
.mao-legal-h3 {
  font:var(--w-semibold) 21px/var(--lh-snug) var(--font-sans);
  color:var(--text-heading);
}
.mao-legal-h4 {
  margin-top:var(--space-3);
  font:var(--w-semibold) var(--size-body-l)/var(--lh-snug) var(--font-sans);
  color:var(--text-heading);
}
.mao-legal-p {
  font:var(--w-regular) var(--size-body)/1.62 var(--font-sans);
  color:var(--text-body);
}
.mao-legal-sub { padding-left:var(--space-8); }
.mao-legal-strong { font-weight:var(--w-semibold); color:var(--text-heading); }
.mao-legal-p--gap { margin-top:var(--space-2); }
.mao-legal-link {
  color:var(--blue-700); text-decoration:underline;
  text-decoration-thickness:1px; text-underline-offset:3px;
  word-break:break-word;
}
.mao-legal-link:hover { color:var(--blue-900); }
.mao-legal-card {
  background:var(--neutral-50); border:1px solid var(--border-hairline);
  border-radius:var(--radius-l); padding:var(--space-6);
  display:grid; gap:var(--space-1);
}

@media (max-width:900px) {
  .mao-legal-sub { padding-left:var(--space-5); }
}

/* =========================================================================
   ABOUT PAGE
   Carried over from the design export. Layout switches at 900px, same as
   the rest of the page.
   ========================================================================= */

.mao-ab-measure { max-width:56ch; }
.mao-ab-red { color:var(--red-700); font-weight:var(--w-semibold); }
.mao-ab-centred { text-align:center; }
.mao-p strong { color:var(--text-heading); font-weight:var(--w-semibold); }
.mao-frame--right { padding:0 12px 12px 0; }
.mao-frame--right::before { left:auto; right:0; }
.mao-ab-portrait img { object-position:52% 30%; }

/* ---------------------------------------------------------------- hero */
.mao-ab-hero { padding:var(--heroy) var(--gutter) var(--tightY); background:var(--paper); }
.mao-ab-hero-inner {
  max-width:var(--container-max); margin:0 auto;
  display:flex; flex-direction:var(--herodir); gap:var(--splitgap); align-items:center;
}
.mao-ab-hero-copy { flex:1 1 0%; min-width:0; display:grid; gap:var(--space-5); justify-items:start; }
.mao-ab-hero-media { flex:none; width:var(--heroimgw); }
.mao-ab-standfirst {
  font-family:var(--font-display); font-weight:var(--w-light);
  font-size:var(--h3f); line-height:1.25; letter-spacing:var(--track-display);
  color:var(--text-heading); max-width:28ch;
}
.mao-ab-callout {
  display:grid; grid-template-columns:auto minmax(0,1fr);
  gap:var(--space-4); align-items:center; max-width:56ch;
  background:var(--blue-100); border-radius:var(--radius-l);
  padding:var(--space-4) var(--space-5);
}
.mao-ab-callout-icon {
  display:grid; place-items:center; width:40px; height:40px;
  border-radius:var(--radius-pill); background:var(--white);
  color:var(--red-600); box-shadow:var(--shadow-2);
}
.mao-ab-callout-icon svg { width:20px; height:20px; }

/* ---------------------------------------------------------------- why I started */
.mao-ab-why { padding:var(--secy) var(--gutter); background:var(--blue-100); }
.mao-ab-why-inner {
  max-width:var(--container-max); margin:0 auto;
  display:grid; gap:var(--space-10); justify-items:center;
}
.mao-ab-why-head { display:grid; gap:var(--space-4); justify-items:center; text-align:center; }
.mao-ab-bighead {
  font-family:var(--font-display); font-weight:var(--w-light);
  font-size:var(--h2); line-height:var(--lh-heading); letter-spacing:var(--track-display);
  color:var(--text-heading); max-width:24ch; text-wrap:balance;
}
.mao-ab-pills-block { display:grid; gap:var(--space-4); justify-items:center; width:100%; }
.mao-ab-pills { display:flex; flex-wrap:wrap; justify-content:center; gap:var(--space-3); }
.mao-ab-pill {
  display:flex; align-items:center; gap:var(--space-3);
  background:var(--white); border-radius:var(--radius-pill);
  padding:var(--space-2) var(--space-5) var(--space-2) var(--space-2);
  box-shadow:var(--shadow-2);
}
.mao-ab-pill-icon {
  flex:none; display:grid; place-items:center; width:36px; height:36px;
  border-radius:var(--radius-pill); background:var(--blue-200); color:var(--blue-900);
}
.mao-ab-pill-icon svg { width:18px; height:18px; }
.mao-ab-pill-text {
  font:var(--w-semibold) var(--size-body-s)/var(--lh-snug) var(--font-sans);
  color:var(--ink-900);
}
.mao-ab-cards {
  width:100%; display:grid;
  grid-template-columns:var(--abcols2,minmax(0,1fr) minmax(0,1fr)); gap:var(--space-4);
}
.mao-ab-card {
  background:var(--white); border-radius:var(--radius-l);
  padding:var(--cardpad); box-shadow:var(--shadow-2);
  display:grid; gap:var(--space-3); align-content:start;
}
.mao-ab-turn {
  font-family:var(--font-display); font-weight:var(--w-light);
  font-size:var(--h3f); line-height:1.25; letter-spacing:var(--track-display);
  color:var(--text-heading); text-align:center; max-width:30ch; text-wrap:balance;
}

/* ---------------------------------------------------------------- the three steps */
.mao-ab-steps { padding:var(--secy) var(--gutter); background:var(--paper); }
.mao-ab-steps-inner {
  max-width:var(--container-max); margin:0 auto;
  display:grid; grid-template-columns:var(--abcolsb,minmax(0,.8fr) minmax(0,1.2fr));
  gap:var(--splitgap); align-items:start;
}
.mao-ab-steps-aside { display:grid; gap:var(--space-6); position:var(--absticky,sticky); top:var(--space-8); }
.mao-ab-quote {
  margin:0; font-family:var(--font-display); font-weight:var(--w-light);
  font-size:var(--abquote,28px); line-height:var(--lh-snug);
  letter-spacing:var(--track-display); color:var(--text-heading); text-wrap:balance;
}
.mao-ab-steplist { display:grid; }
.mao-ab-step {
  display:grid; grid-template-columns:var(--abnumcol,56px) minmax(0,1fr);
  gap:var(--space-4); padding:var(--space-8) 0; border-top:1px solid var(--border-hairline);
}
.mao-ab-step:first-child { padding-top:0; border-top:0; }
.mao-ab-step:last-child { padding-bottom:0; }
.mao-ab-step-n {
  font-family:var(--font-mono); font-weight:var(--w-medium); font-size:14px;
  letter-spacing:.06em; color:var(--red-600); padding-top:8px;
}
.mao-ab-step-body { display:grid; gap:var(--space-3); }

/* the book illustration */
.mao-ab-bookstage {
  width:100%; min-width:0; aspect-ratio:1 / 1;
  border-radius:var(--radius-xl); overflow:hidden; container-type:inline-size;
}
.mao-ab-bookscene {
  width:100%; height:100%; background:var(--blue-100);
  display:flex; align-items:center; justify-content:center;
  perspective:200cqw; font-family:var(--font-sans);
}
.mao-ab-book {
  position:relative; width:55.556cqw; height:71.111cqw;
  transform:rotateY(-18deg) rotateX(4deg); transform-style:preserve-3d;
}
.mao-ab-book-shadow {
  position:absolute; left:3.333cqw; right:-4.444cqw; bottom:-6.667cqw; height:6.667cqw;
  background:radial-gradient(ellipse at center,rgba(20,35,60,.28),rgba(20,35,60,0) 70%);
  transform:rotateX(90deg) translateZ(-3.333cqw);
}
.mao-ab-book-pages {
  position:absolute; inset:.667cqw -1.111cqw -.667cqw 1.556cqw; background:#F7F4EC;
  border-radius:.667cqw 1.556cqw 1.556cqw .667cqw;
  box-shadow:inset -.222cqw 0 0 #E6E0D2,inset -.556cqw 0 0 #F7F4EC,inset -.778cqw 0 0 #E6E0D2;
}
.mao-ab-book-cover {
  position:absolute; inset:0; border-radius:.889cqw 1.778cqw 1.778cqw .889cqw;
  background:linear-gradient(90deg,var(--blue-300) 0%,var(--blue-200) 12%,var(--blue-200) 60%,var(--blue-300) 100%);
  box-shadow:0 3.333cqw 6.667cqw rgba(20,35,60,.22),0 .889cqw 2cqw rgba(20,35,60,.12);
  overflow:hidden; display:block;
}
.mao-ab-book-spine {
  position:absolute; top:0; bottom:0; left:0; width:7.111cqw;
  background:linear-gradient(90deg,var(--red-700),var(--red-600) 55%,var(--red-700));
  box-shadow:inset -.333cqw 0 .667cqw rgba(0,0,0,.18);
}
.mao-ab-book-crease {
  position:absolute; top:0; bottom:0; left:7.111cqw; width:1.111cqw;
  background:linear-gradient(90deg,rgba(0,0,0,.18),rgba(0,0,0,0));
}
.mao-ab-book-sheen {
  position:absolute; inset:0;
  background:linear-gradient(115deg,rgba(255,255,255,.35) 0%,rgba(255,255,255,0) 35%,rgba(255,255,255,0) 70%,rgba(255,255,255,.12) 100%);
}
.mao-ab-book-label {
  position:absolute; left:13.333cqw; right:6.222cqw; top:16.667cqw;
  background:var(--white); border-radius:1.111cqw;
  padding:4.889cqw 4cqw; display:flex; flex-direction:column; gap:2.222cqw;
  box-shadow:0 .222cqw 0 rgba(20,35,60,.06);
}
.mao-ab-book-rule { width:6.222cqw; height:.333cqw; background:var(--red-600); }
.mao-ab-book-title {
  font-family:var(--font-display); font-weight:var(--w-light);
  font-size:5.556cqw; line-height:1.02; color:var(--ink-900); letter-spacing:-.02em;
}
.mao-ab-book-sub {
  font-size:1.333cqw; font-weight:var(--w-bold); letter-spacing:.2em;
  text-transform:uppercase; color:var(--red-700);
}

/* ---------------------------------------------------------------- a little more */
.mao-ab-more { padding:var(--secy) var(--gutter); background:var(--blue-100); }
.mao-ab-more-inner {
  max-width:var(--container-max); margin:0 auto;
  display:grid; grid-template-columns:var(--aboffcols,340px minmax(0,1fr));
  gap:var(--splitgap); align-items:center;
}
.mao-ab-more-copy { display:grid; gap:var(--space-5); justify-items:start; }
.mao-ab-note {
  display:grid; grid-template-columns:auto minmax(0,1fr);
  gap:var(--space-4); align-items:start; margin-top:var(--space-2);
}
.mao-ab-note-icon {
  display:grid; place-items:center; width:44px; height:44px;
  border-radius:var(--radius-s); background:var(--white);
  color:var(--blue-700); box-shadow:var(--shadow-2);
}
.mao-ab-note-icon svg { width:22px; height:22px; }
.mao-ab-note-body { display:grid; gap:var(--space-2); }
.mao-ab-note-title {
  font-family:var(--font-sans); font-weight:var(--w-semibold);
  font-size:18px; color:var(--ink-900);
}
.mao-ab-loves-head { margin-top:var(--space-3); }
.mao-ab-loves {
  display:grid; grid-template-columns:var(--ablovecols,repeat(3,minmax(0,1fr)));
  gap:var(--space-3); width:100%;
}
.mao-ab-love {
  display:flex; align-items:center; gap:var(--space-3);
  background:var(--white); border-radius:var(--radius-m);
  padding:var(--space-3) var(--space-4); box-shadow:var(--shadow-2);
}
.mao-ab-love-icon {
  flex:none; display:grid; place-items:center; width:32px; height:32px;
  border-radius:var(--radius-s); background:var(--blue-100); color:var(--blue-700);
}
.mao-ab-love-icon svg { width:16px; height:16px; }
.mao-ab-love-text {
  min-width:0; overflow-wrap:anywhere;
  font:var(--w-regular) var(--size-body-s)/var(--lh-snug) var(--font-sans);
  color:var(--text-body);
}
.mao-ab-love-text strong { color:var(--ink-900); font-weight:var(--w-semibold); }

/* ---------------------------------------------------------------- what it became */
.mao-ab-became { padding:var(--secy) var(--gutter); background:var(--paper); }
.mao-ab-became-panel {
  max-width:var(--container-max); margin:0 auto;
  display:grid; grid-template-columns:var(--abcols2,minmax(0,1fr) minmax(0,1fr));
  gap:var(--splitgap); align-items:center;
  border:2px solid var(--red-600); border-radius:var(--radius-xl);
  padding:var(--panelpad); box-shadow:var(--shadow-2); background:var(--white);
}
.mao-ab-became-copy { display:grid; gap:var(--space-4); }
.mao-ab-became-cta { display:grid; gap:var(--space-6); justify-items:start; }

/* ---------------------------------------------------------------- phone */
@media (max-width:900px) {
  .mao-page {
    --abcols2:minmax(0,1fr);
    --abcolsb:minmax(0,1fr);
    --aboffcols:minmax(0,1fr);
    --ablovecols:minmax(0,1fr);
    --absticky:static;
    --abnumcol:40px;
    --abquote:24px;
  }
  .mao-ab-hero-media { width:100%; }
  .mao-ab-bookstage { max-width:340px; justify-self:center; }
  .mao-ab-became-cta .mao-btn { width:100%; }
}