/* =========================================================================
   My Affairs Organized - One Page template
   Design tokens + component styles, section numbers match README.md
   ========================================================================= */

/* -------------------------------------------------------------------------
   0. DESIGN TOKENS - colour, type, spacing, radii, shadows, motion
   (verbatim from the approved design export's :root custom properties)
 ------------------------------------------------------------------------- */
:root{
	/* ---- Base palette ---- */
	--ink-900:#0A2430;--ink-800:#11333F;--ink-700:#1B4150;--ink-600:#2C5566;

	--blue-900:#0F4E6B;--blue-700:#136A8E;--blue-600:#1B84AE;--blue-500:#2BA0D0;
	--blue-300:#8FCFE7;--blue-200:#C3E6F3;--blue-100:#E4F3F9;

	--green-800:#265A4E;--green-700:#337364;--green-600:#4A8E7C;--green-500:#6FA898;
	--green-300:#A9CCC1;--green-200:#D3E6DF;--green-100:#EAF3F0;

	--yellow-700:#B8881B;--yellow-800:#7A5A10;--yellow-600:#DDA62A;--yellow-500:#F2C24B;--yellow-400:#F8D779;
	--yellow-200:#FCEDC4;--yellow-100:#FDF6E4;

	--peach-100:#FDF1EC;--peach-200:#FADFD4;--peach-300:#F4C6B5;--peach-400:#EBA68E;
	--peach-500:#DE846A;--peach-600:#C4664B;--peach-700:#A04E36;--peach-800:#7C3B28;

	--red-100:#F9E4E1;--red-200:#F2C7C2;--red-300:#E29C95;--red-500:#CC5349;
	--red-600:#B4443C;--red-700:#96332C;--red-800:#782823;

	--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;

	/* ---- Semantic aliases ---- */
	--text-heading:var(--ink-900);
	--text-body:var(--ink-700);
	--text-muted:var(--neutral-600);
	--text-on-dark:#EAF2F4;
	--text-on-dark-muted:#A8C2CB;
	--text-link:var(--blue-700);
	--text-link-hover:var(--blue-900);

	--surface-page:var(--paper);
	--surface-card:var(--white);
	--surface-sunken:var(--neutral-50);
	--surface-ink:var(--ink-900);
	--surface-blue-soft:var(--blue-100);
	--surface-green-soft:var(--green-100);
	--surface-yellow-soft:var(--yellow-100);
	--surface-peach-soft:var(--peach-100);
	--surface-peach:var(--peach-200);
	--surface-red-soft:var(--red-100);
	--surface-brick:var(--red-700);

	--border-hairline:var(--neutral-200);
	--border-strong:var(--neutral-300);
	--border-on-dark:rgba(234,242,244,.18);

	--action-primary:var(--blue-700);
	--action-primary-hover:var(--blue-900);
	--action-primary-text:var(--white);
	--action-secondary-border:var(--blue-700);
	--action-secondary-text:var(--blue-900);
	--action-accent:var(--yellow-500);
	--action-accent-hover:var(--yellow-600);
	--action-accent-text:var(--ink-900);
	--action-warm:var(--red-700);
	--action-warm-hover:var(--red-800);
	--action-warm-text:var(--white);

	--focus-ring:var(--blue-500);

	--status-done:var(--green-700);
	--status-done-soft:var(--green-100);
	--status-progress:var(--blue-600);
	--status-progress-soft:var(--blue-100);
	--status-attention:var(--yellow-600);
	--status-attention-soft:var(--yellow-100);
	--status-attention-text:var(--yellow-800);
	--status-danger-text:var(--red-700);
	--status-danger:var(--red-600);
	--status-danger-soft:var(--red-100);

	--text-warm:var(--red-700);
	--text-peach-ink:var(--peach-800);
	--text-on-brick:#FDF1EC;
	--text-on-brick-muted:#EFC9BF;
	--border-peach:var(--peach-200);
	--border-red:var(--red-200);

	/* ---- Gradients & washes ---- */
	--wash-calm:linear-gradient(168deg,var(--blue-100) 0%,var(--green-100) 100%);
	--wash-ink:linear-gradient(158deg,var(--ink-900) 0%,var(--blue-900) 100%);
	--scrim-image:linear-gradient(90deg,rgba(10,36,48,.78) 0%,rgba(10,36,48,.34) 55%,rgba(10,36,48,0) 100%);
	--wash-peach:linear-gradient(168deg,var(--peach-100) 0%,var(--yellow-100) 100%);
	--wash-dusk:linear-gradient(158deg,var(--blue-900) 0%,var(--red-800) 100%);

	/* ---- Type ---- */
	--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-display-xl:clamp(44px,5.2vw,68px);
	--size-display-l:clamp(34px,3.6vw,48px);
	--size-display-m:32px;
	--size-heading-l:26px;
	--size-heading-m:21px;
	--size-heading-s:18px;
	--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;

	--weight-light:300;--weight-regular:400;--weight-medium:500;--weight-semibold:600;--weight-bold:700;

	--track-display:-.018em;
	--track-body:0em;
	--track-label:.14em;

	--type-display-xl:var(--weight-light) var(--size-display-xl)/var(--lh-tight) var(--font-display);
	--type-display-l:var(--weight-light) var(--size-display-l)/var(--lh-heading) var(--font-display);
	--type-heading-l:var(--weight-regular) var(--size-heading-l)/var(--lh-heading) var(--font-display);
	--type-heading-m:var(--weight-semibold) var(--size-heading-m)/var(--lh-snug) var(--font-sans);
	--type-heading-s:var(--weight-semibold) var(--size-heading-s)/var(--lh-snug) var(--font-sans);
	--type-body-l:var(--weight-regular) var(--size-body-l)/var(--lh-body) var(--font-sans);
	--type-body:var(--weight-regular) var(--size-body)/var(--lh-body) var(--font-sans);
	--type-body-s:var(--weight-regular) var(--size-body-s)/var(--lh-snug) var(--font-sans);
	--type-label:var(--weight-semibold) var(--size-label)/1.1 var(--font-sans);
	--type-mono:var(--weight-regular) var(--size-caption)/1.45 var(--font-mono);

	/* ---- Spacing / radii / layout ---- */
	--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;
	--space-20:80px;--space-24:96px;--space-32:128px;

	--radius-xs:4px;--radius-s:8px;--radius-m:12px;--radius-l:18px;--radius-xl:28px;--radius-pill:999px;

	--border-width:1px;--border-width-thick:2px;

	--container-max:1180px;--container-prose:660px;
	--gutter-page:clamp(20px,5vw,64px);
	--section-y:clamp(56px,7vw,112px);

	/* ---- Shadows ---- */
	--shadow-none:none;
	--shadow-hairline:0 0 0 1px var(--border-hairline);
	--shadow-1:0 1px 2px rgba(10,36,48,.05),0 1px 10px rgba(10,36,48,.04);
	--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);
	--shadow-inset-top:inset 0 1px 0 rgba(255,255,255,.6);
	--shadow-focus:0 0 0 3px rgba(43,160,208,.34);
	--blur-veil:saturate(1.05) blur(14px);

	/* ---- Motion ---- */
	--ease-calm:cubic-bezier(.22,.61,.36,1);
	--ease-in-out:cubic-bezier(.4,0,.2,1);
	--dur-instant:90ms;
	--dur-fast:160ms;
	--dur-base:240ms;
	--dur-slow:420ms;
	--dur-reveal:640ms;
	--transition-control:background-color var(--dur-fast) var(--ease-calm),color var(--dur-fast) var(--ease-calm),border-color var(--dur-fast) var(--ease-calm),box-shadow var(--dur-fast) var(--ease-calm);
	--press-scale:.985;
}

@media (prefers-reduced-motion:reduce){
	:root{
		--dur-fast:0ms;
		--dur-base:0ms;
		--dur-slow:0ms;
		--dur-reveal:0ms;
	}
}

/* -------------------------------------------------------------------------
   0. GLOBAL BASE
 ------------------------------------------------------------------------- */
.mao-onepage,
.mao-onepage *,
.mao-onepage *::before,
.mao-onepage *::after{
	box-sizing:border-box;
}
html{ scroll-behavior:smooth; }
body.mao-onepage{
	margin:0;
	font:var(--type-body);
	color:var(--text-body);
	background:var(--surface-page);
	-webkit-font-smoothing:antialiased;
	text-wrap:pretty;
}
.mao-onepage h1,
.mao-onepage h2,
.mao-onepage h3,
.mao-onepage h4{
	margin:0;
	color:var(--text-heading);
}
.mao-onepage h1{ font:var(--type-display-l); letter-spacing:var(--track-display); }
.mao-onepage h2{ font:var(--type-heading-l); }
.mao-onepage h3{ font:var(--type-heading-m); }
.mao-onepage h4{ font:var(--type-heading-s); }
.mao-onepage p{ margin:0; }
.mao-onepage a{ color:var(--text-link); text-decoration-thickness:1px; text-underline-offset:3px; }
.mao-onepage a:hover{ color:var(--text-link-hover); }
.mao-onepage :focus-visible{ outline:2px solid var(--focus-ring); outline-offset:2px; }
.mao-onepage img{ max-width:100%; }
.mao-eyebrow{
	font:var(--type-label);
	letter-spacing:var(--track-label);
	text-transform:uppercase;
	color:var(--blue-700);
}
.mao-prose{ max-width:var(--container-prose); font:var(--type-body-l); }
.mao-container{ max-width:var(--container-max); margin:0 auto; }

/* -------------------------------------------------------------------------
   Buttons - hover/press states (inline styles supply the resting look;
   these add the interactive states a pure inline style can't express)
 ------------------------------------------------------------------------- */
.mao-onepage .mao-btn{
	transition:var(--transition-control), transform var(--dur-instant) var(--ease-calm);
	cursor:pointer;
}
.mao-onepage .mao-btn:active{ transform:scale(var(--press-scale)); }
.mao-onepage .mao-btn-red:hover{ background:var(--red-700) !important; color:var(--white) !important; }
.mao-onepage .mao-btn-outline:hover{ background:var(--surface-sunken) !important; }
.mao-onepage .mao-btn-yellow:hover{ background:var(--yellow-600) !important; }
.mao-onepage .mao-play-btn:hover{ background:var(--red-700) !important; }

/* -------------------------------------------------------------------------
   Header / nav
 ------------------------------------------------------------------------- */
.mao-header{
	position:sticky;
	top:0;
	z-index:30;
	background:rgba(251,252,252,.86);
	-webkit-backdrop-filter:var(--blur-veil);
	backdrop-filter:var(--blur-veil);
	border-bottom:1px solid var(--border-hairline);
	padding:0 var(--gutter-page);
}
.mao-header__inner{
	max-width:var(--container-max);
	margin:0 auto;
	padding:12px 0;
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:var(--space-4) var(--space-8);
	flex-wrap:wrap;
}
.mao-logo{
	text-decoration:none;
	display:inline-grid;
	gap:6px;
	justify-items:stretch;
}
.mao-logo:hover{ color:inherit; }
.mao-logo__word{
	font-family:var(--font-display);
	font-weight:300;
	font-size:34px;
	line-height:1;
	letter-spacing:-.024em;
	color:var(--ink-900);
	white-space:nowrap;
}
.mao-logo__rule{ height:1px; background:var(--red-600); }
.mao-logo__sub{
	font-family:var(--font-sans);
	font-weight:600;
	font-size:14px;
	line-height:1;
	letter-spacing:.34em;
	text-transform:uppercase;
	color:var(--blue-700);
	white-space:nowrap;
}
.mao-nav{
	display:flex;
	align-items:center;
	gap:var(--space-3) var(--space-8);
	flex-wrap:wrap;
}
.mao-nav__link{
	font-weight:var(--weight-medium);
	font-size:18px;
	color:var(--ink-900);
	text-decoration:none;
	padding:6px 0;
}
.mao-nav__link:hover{ color:var(--blue-700); }
.mao-nav__cta{
	display:inline-flex;
	align-items:center;
	height:48px;
	padding:0 24px;
	border-radius:999px;
	background:var(--red-600);
	color:var(--white);
	font-weight:var(--weight-semibold);
	font-size:18px;
	text-decoration:none;
}
.mao-nav__toggle{
	display:none;
	align-items:center;
	justify-content:center;
	width:44px;
	height:44px;
	border-radius:999px;
	border:1px solid var(--border-strong);
	background:var(--white);
	color:var(--ink-900);
	cursor:pointer;
}

@media (max-width:759px){
	.mao-nav__toggle{ display:inline-flex; }
	.mao-nav{
		display:none;
		width:100%;
		flex-direction:column;
		align-items:stretch;
		gap:var(--space-3);
		padding-bottom:var(--space-4);
	}
	.mao-nav.is-open{ display:flex; }
	.mao-nav__link{ padding:10px 0; border-bottom:1px solid var(--border-hairline); }
	.mao-nav__cta{ justify-content:center; }
}

/* -------------------------------------------------------------------------
   1. Hero
 ------------------------------------------------------------------------- */
.mao-hero{ padding:var(--space-10) var(--gutter-page) var(--space-10); }
.mao-hero__grid{
	max-width:var(--container-max);
	margin:0 auto;
	display:grid;
	grid-template-columns:repeat(auto-fit, minmax(min(100%, 400px), 1fr));
	gap:var(--space-12) var(--space-16);
	align-items:center;
}
.mao-hero__copy{ display:grid; gap:var(--space-6); align-content:center; }
.mao-hero__label{
	font:var(--type-label);
	letter-spacing:.2em;
	text-transform:uppercase;
	color:var(--blue-700);
}
.mao-hero h1{
	font-family:var(--font-display);
	font-weight:400;
	font-size:clamp(38px,4.8vw,66px);
	line-height:1.06;
	letter-spacing:-.022em;
	color:var(--blue-900);
	text-wrap:pretty;
}
.mao-hero em{ font-style:italic; color:var(--blue-500); }
.mao-hero p{ font:var(--type-body-l); color:var(--text-body); max-width:560px; text-wrap:pretty; }
.mao-hero p strong{ font-weight:var(--weight-semibold); color:var(--text-heading); }
.mao-hero__actions{ display:flex; flex-wrap:wrap; gap:var(--space-3); margin-top:var(--space-2); }
.mao-hero__media{
	position:relative;
	max-width:460px;
	width:100%;
	justify-self:center;
	padding:0 0 14px 14px;
}
.mao-hero__media-offset{
	position:absolute;
	left:0; bottom:0;
	width:calc(100% - 28px);
	height:calc(100% - 14px);
	border-radius:var(--radius-xl);
	background:var(--blue-200);
}
.mao-hero__media-frame{
	position:relative;
	aspect-ratio:4/5;
	border-radius:var(--radius-xl);
	overflow:hidden;
	box-shadow:var(--shadow-3);
	background:var(--neutral-100);
}
.mao-hero__media-frame img{ width:100%; height:100%; object-fit:cover; object-position:66% 30%; display:block; }

/* -------------------------------------------------------------------------
   2. Course video
 ------------------------------------------------------------------------- */
.mao-video-section{ background:var(--surface-sunken); padding:var(--space-12) var(--gutter-page) var(--space-10); }
.mao-video-section__inner{ max-width:var(--container-max); margin:0 auto; display:grid; gap:var(--space-10); }
.mao-section-head{ display:grid; gap:var(--space-4); }
.mao-h2{
	font-family:var(--font-display);
	font-weight:400;
	font-size:clamp(34px,4.4vw,60px);
	line-height:1.08;
	letter-spacing:var(--track-display);
	color:var(--text-heading);
	text-wrap:balance;
}
.mao-h2 em{ font-style:italic; color:var(--blue-500); }
.mao-video-section__head .mao-h2{ text-align:center; }
.mao-video-flag{ display:flex; align-items:center; justify-content:center; gap:var(--space-4); width:100%; }
.mao-video-flag__line{ width:48px; height:2px; background:var(--red-600); }
.mao-video-flag__text{
	font-family:var(--font-sans);
	font-size:18px;
	font-weight:700;
	letter-spacing:.2em;
	text-transform:uppercase;
	color:var(--red-600);
	text-align:center;
}
.mao-video-wrap{ width:100%; max-width:760px; justify-self:center; margin:0 auto; }
.mao-video-card{
	position:relative;
	z-index:1;
	padding:clamp(8px,1.4vw,14px);
	background:var(--blue-100);
	border:1px solid var(--blue-200);
	display:grid;
	gap:clamp(8px,1.4vw,14px);
	border-radius:calc(var(--radius-xl) + 6px);
	box-shadow:var(--shadow-3);
}
.mao-video-frame{
	position:relative;
	width:100%;
	aspect-ratio:16/9;
	border-radius:var(--radius-l);
	overflow:hidden;
	background:var(--ink-900);
}
.mao-video-frame img,
.mao-video-frame iframe{
	position:absolute;
	inset:0;
	width:100%;
	height:100%;
	border:0;
	display:block;
}
.mao-video-frame img{ object-fit:cover; object-position:50% 38%; }
.mao-video-frame.is-playing img{ display:none; }
.mao-video-card.is-playing .mao-video-meta{ display:none; }
.mao-video-meta{
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	justify-content:space-between;
	gap:var(--space-3) var(--space-5);
	padding:4px 4px 2px;
}
.mao-video-meta__label{ font-weight:var(--weight-semibold); color:var(--blue-900); }
.mao-play-btn{
	display:inline-flex;
	align-items:center;
	gap:14px;
	height:64px;
	padding:0 30px 0 10px;
	border-radius:999px;
	border:0;
	background:var(--red-600);
	color:var(--white);
	font-weight:var(--weight-semibold);
	font-size:19px;
	cursor:pointer;
	box-shadow:0 10px 24px rgba(150,51,44,.28);
	transition:background var(--dur-fast) var(--ease-calm), box-shadow var(--dur-base) var(--ease-calm);
}
.mao-play-btn__icon{
	flex:0 0 auto;
	width:44px; height:44px;
	border-radius:999px;
	background:var(--white);
	color:var(--red-600);
	display:flex; align-items:center; justify-content:center;
	padding-left:3px;
}
.mao-video-intro{ margin:0 auto; max-width:760px; text-align:center; font:var(--type-body-l); color:var(--text-body); text-wrap:pretty; }
.mao-video-intro strong{ font-weight:var(--weight-semibold); color:var(--text-heading); }
.mao-price-box{
	width:100%; max-width:420px;
	margin:0 auto;
	background:var(--white);
	border:1px solid var(--border-hairline);
	border-radius:var(--radius-l);
	box-shadow:var(--shadow-2);
	padding:var(--space-5);
	display:grid; gap:var(--space-3);
}
.mao-price-box__label{ font:var(--type-label); letter-spacing:var(--track-label); text-transform:uppercase; color:var(--text-muted); }
.mao-price-row{ display:flex; align-items:center; gap:var(--space-3); flex-wrap:wrap; }
.mao-price{ font-family:var(--font-mono); font-size:36px; line-height:1; font-weight:400; color:var(--text-heading); letter-spacing:-.02em; }
.mao-pill-tag{
	display:inline-flex; align-items:center; gap:var(--space-1);
	padding:5px 11px; border-radius:var(--radius-pill);
	font:var(--type-label); letter-spacing:.06em; text-transform:uppercase; white-space:nowrap;
	background:var(--status-done-soft); color:var(--green-800);
}
.mao-price-box p{ font:var(--type-body-s); color:var(--text-body); }
.mao-btn-red-block{
	display:flex; align-items:center; justify-content:center;
	height:48px; border-radius:999px;
	background:var(--red-600); color:var(--white);
	font-weight:var(--weight-semibold); letter-spacing:.06em;
	text-decoration:none;
}
.mao-price-box__foot{ font:var(--type-body-s); color:var(--text-muted); display:flex; gap:8px; align-items:flex-start; }
.mao-price-box__foot svg{ flex:0 0 auto; margin-top:3px; color:var(--green-700); }

/* -------------------------------------------------------------------------
   3. What's inside
 ------------------------------------------------------------------------- */
.mao-inside{ padding:var(--space-10) var(--gutter-page) var(--section-y); }
.mao-inside__inner{ max-width:var(--container-max); margin:0 auto; display:grid; gap:var(--space-10); }
.mao-inside__head{ display:grid; gap:var(--space-4); max-width:var(--container-max); margin:0 auto; text-align:center; justify-items:center; }
.mao-inside__head .mao-h2{ max-width:100%; font-size:clamp(30px,3.7vw,56px); }
.mao-inside__head p{ font:var(--type-body-l); color:var(--text-body); max-width:680px; text-wrap:pretty; }
.mao-modules{ display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:var(--space-4); }
.mao-module-card{
	background:var(--white);
	border:1px solid var(--border-hairline);
	border-radius:var(--radius-l);
	box-shadow:var(--shadow-1);
	padding:var(--space-6);
	display:grid; gap:var(--space-4);
	align-content:start;
}
.mao-module-card__top{ display:flex; align-items:center; justify-content:space-between; gap:var(--space-3); }
.mao-module-card__label{ font:var(--type-label); letter-spacing:var(--track-label); text-transform:uppercase; color:var(--blue-700); }
.mao-module-card__icon{
	flex:0 0 auto; width:32px; height:32px; border-radius:999px;
	background:var(--surface-blue-soft); color:var(--blue-700);
	display:flex; align-items:center; justify-content:center; padding-left:2px;
}
.mao-module-card__title{ font:var(--type-heading-s); color:var(--text-heading); text-wrap:pretty; }

/* -------------------------------------------------------------------------
   4. About
 ------------------------------------------------------------------------- */
.mao-about{ background:var(--surface-sunken); padding:var(--section-y) var(--gutter-page); }
.mao-about__inner{ max-width:var(--container-max); margin:0 auto; display:grid; gap:var(--space-16); }
.mao-about__row{
	display:grid;
	grid-template-columns:repeat(auto-fit, minmax(min(100%, 340px), 1fr));
	gap:var(--space-10) var(--space-16);
	align-items:stretch;
}
.mao-about__image{ position:relative; min-height:320px; border-radius:var(--radius-xl); overflow:hidden; box-shadow:var(--shadow-2); }
.mao-about__image img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.mao-about__copy{ display:grid; gap:var(--space-4); align-content:center; max-width:640px; }
.mao-about__copy p{ font:var(--type-body); color:var(--text-body); text-wrap:pretty; }
.mao-about__copy p strong{ font-weight:var(--weight-semibold); color:var(--text-heading); }
.mao-about__intro{ margin-top:var(--space-2) !important; font:var(--type-body-l) !important; color:var(--text-heading) !important; }
.mao-about__story{ display:grid; gap:var(--space-4); max-width:640px; align-content:start; }
.mao-about__story p{ font:var(--type-body); color:var(--text-body); text-wrap:pretty; }
.mao-about__story p strong{ font-weight:var(--weight-semibold); color:var(--text-heading); }
.mao-pull-quote{
	margin:var(--space-2) 0 !important;
	font-family:var(--font-display);
	font-weight:var(--weight-light);
	font-size:clamp(24px,2.4vw,30px) !important;
	line-height:1.25 !important;
	letter-spacing:var(--track-display);
	color:var(--blue-700) !important;
	text-wrap:pretty;
}
.mao-about__image--tall{ position:relative; min-height:420px; width:100%; border-radius:var(--radius-xl); overflow:hidden; box-shadow:var(--shadow-2); }
.mao-about__closing{
	margin:0; padding-top:var(--space-10);
	border-top:1px solid var(--border-hairline);
	text-align:center;
	font-family:var(--font-display);
	font-weight:var(--weight-light);
	font-size:clamp(28px,3.4vw,46px);
	line-height:1.2;
	letter-spacing:var(--track-display);
	color:var(--text-heading);
	text-wrap:balance;
}

/* -------------------------------------------------------------------------
   5. Worst day comparison (dark band)
 ------------------------------------------------------------------------- */
.mao-compare{ background:var(--wash-ink); padding:var(--section-y) var(--gutter-page); }
.mao-compare__inner{ max-width:900px; margin:0 auto; display:grid; gap:var(--space-10); }
.mao-compare .mao-h2{ color:var(--text-on-dark); text-align:center; }
.mao-compare .mao-h2 em{ color:var(--blue-300); }
.mao-compare__labels{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); padding-bottom:var(--space-3); }
.mao-compare__labels span{ font:var(--type-label); letter-spacing:var(--track-label); text-transform:uppercase; }
.mao-compare__labels span:first-child{ color:var(--text-on-dark-muted); }
.mao-compare__labels span:last-child{ color:var(--text-on-dark); padding-left:var(--space-4); }
.mao-compare-row{
	display:grid;
	grid-template-columns:minmax(0,1fr) minmax(0,1fr);
	border-top:1px solid var(--border-on-dark);
}
.mao-compare-row__item{ display:flex; gap:var(--space-3); align-items:flex-start; padding:var(--space-4); font:var(--type-body); }
.mao-compare-row__item--no{ padding-left:0; color:var(--text-on-dark-muted); }
.mao-compare-row__item--no svg{ color:var(--red-300); }
.mao-compare-row__item--yes{ padding-right:0; color:var(--text-on-dark); border-left:1px solid var(--border-on-dark); }
.mao-compare-row__item--yes svg{ color:var(--green-300); }
.mao-compare-row__item svg{ flex:0 0 auto; margin-top:4px; }
.mao-compare__cta{ display:flex; justify-content:center; }
.mao-btn-yellow{
	display:inline-flex; align-items:center; justify-content:center; gap:var(--space-2);
	padding:15px 30px; border-radius:var(--radius-pill);
	font-weight:var(--weight-semibold); font-size:17px; font-family:var(--font-sans);
	text-decoration:none; white-space:nowrap; cursor:pointer;
	background:var(--action-accent); color:var(--action-accent-text);
	border:1px solid transparent; box-shadow:var(--shadow-1);
}

@media (max-width:759px){
	.mao-compare-row,
	.mao-compare__labels{ grid-template-columns:1fr; }
	.mao-compare-row__item--yes{ border-left:0; border-top:1px dashed var(--border-on-dark); padding-left:0; }
	.mao-compare__labels span:last-child{ padding-left:0; padding-top:var(--space-2); }
}

/* -------------------------------------------------------------------------
   6. What you walk away with + Who it's for
 ------------------------------------------------------------------------- */
.mao-outcome{ background:var(--surface-sunken); padding:var(--section-y) var(--gutter-page); }
.mao-outcome__inner{ max-width:var(--container-max); margin:0 auto; display:grid; gap:var(--space-16); }
.mao-outcome__grid{
	display:grid;
	grid-template-columns:repeat(auto-fit, minmax(min(100%, 420px), 1fr));
	gap:var(--space-10) var(--space-12);
	align-items:center;
}
.mao-outcome__left{ display:grid; gap:var(--space-4); }
.mao-outcome__image{
	margin-top:var(--space-4);
	width:100%; aspect-ratio:16/10;
	border-radius:var(--radius-xl); overflow:hidden; box-shadow:var(--shadow-3);
}
.mao-outcome__image img{ width:100%; height:100%; object-fit:cover; display:block; }
.mao-outcome__list{
	display:grid;
	background:var(--white); border:1px solid var(--border-hairline);
	border-radius:var(--radius-l); box-shadow:var(--shadow-1); overflow:hidden;
}
.mao-outcome__item{ display:flex; gap:var(--space-4); align-items:flex-start; padding:var(--space-5) var(--space-6); border-bottom:1px solid var(--border-hairline); }
.mao-outcome__item:last-child{ border-bottom:0; }
.mao-outcome__tick{
	flex:0 0 auto; width:28px; height:28px; border-radius:999px;
	background:var(--surface-green-soft); color:var(--green-700);
	display:flex; align-items:center; justify-content:center;
}
.mao-outcome__item span.mao-outcome__text{ font:var(--type-body); color:var(--text-heading); padding-top:2px; }
.mao-who-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); gap:var(--space-4); }
.mao-who-card{ border-radius:var(--radius-l); padding:var(--space-8); box-shadow:var(--shadow-1); }
.mao-who-card--is-for{ background:var(--surface-blue-soft); border:1px solid var(--blue-200); }
.mao-who-card--isnt-for{ background:var(--surface-card); border:1px solid var(--border-hairline); }
.mao-who-card h3{ font:var(--type-heading-l); letter-spacing:var(--track-display); margin-bottom:var(--space-4); }
.mao-who-card p{ font:var(--type-body); color:var(--text-body); text-wrap:pretty; }

/* -------------------------------------------------------------------------
   7. How it works (+ quiz teaser)
 ------------------------------------------------------------------------- */
.mao-how{ padding:var(--section-y) var(--gutter-page); }
.mao-how__inner{ max-width:760px; margin:0 auto; display:grid; gap:var(--space-5); text-align:center; justify-items:center; }
.mao-how__lede{
	margin:0; font-family:var(--font-display); font-weight:var(--weight-light);
	font-size:clamp(26px,2.8vw,36px); line-height:1.22; letter-spacing:var(--track-display);
	color:var(--text-heading); text-wrap:balance;
}
.mao-how__sub{ margin:0; font-weight:var(--weight-semibold); color:var(--blue-700); }
.mao-how__quiz-prompt{
	margin-top:var(--space-2);
	display:inline-flex; align-items:center; gap:10px;
	padding:12px 22px; border-radius:var(--radius-pill);
	border:1px solid var(--blue-200); background:var(--surface-blue-soft);
	color:var(--blue-900); font-weight:var(--weight-semibold); font-size:15px;
	cursor:pointer; text-decoration:none;
}
.mao-how__quiz-prompt:hover{ background:var(--blue-200); color:var(--blue-900); }

/* -------------------------------------------------------------------------
   8. The small things
 ------------------------------------------------------------------------- */
.mao-small-things{ background:var(--surface-sunken); padding:var(--section-y) var(--gutter-page); }
.mao-small-things__inner{
	max-width:var(--container-max); margin:0 auto;
	display:grid; grid-template-columns:repeat(auto-fit, minmax(320px, 1fr));
	gap:var(--space-12) var(--space-16); align-items:center;
}
.mao-small-things__copy{ display:grid; gap:var(--space-5); }
.mao-small-things__sub{ margin:0; font:var(--type-heading-s); color:var(--blue-700); }
.mao-small-things__copy p{ font:var(--type-body); color:var(--text-body); text-wrap:pretty; }
.mao-small-things__lede{ font:var(--type-body-l) !important; }
.mao-small-things__closing{ font:var(--type-body-l) !important; color:var(--text-heading) !important; }
.mao-small-things__image{ position:relative; aspect-ratio:16/10; border-radius:var(--radius-xl); overflow:hidden; box-shadow:var(--shadow-3); background:var(--neutral-100); }
.mao-small-things__image img{ width:100%; height:100%; object-fit:cover; display:block; }

/* -------------------------------------------------------------------------
   9. Testimonials
 ------------------------------------------------------------------------- */
.mao-testimonials{ padding:var(--section-y) var(--gutter-page); }
.mao-testimonials__inner{ max-width:var(--container-max); margin:0 auto; display:grid; gap:var(--space-10); }
.mao-testimonials__head{ display:grid; gap:var(--space-4); max-width:680px; margin:0 auto; text-align:center; }
.mao-testimonials__grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:var(--space-4); }
.mao-testimonial{
	margin:0; background:var(--white); border:1px solid var(--border-hairline);
	border-radius:var(--radius-l); box-shadow:var(--shadow-1); padding:var(--space-6);
	display:flex; flex-direction:column; gap:var(--space-6); justify-content:space-between;
}
.mao-testimonial blockquote{
	margin:0; font-family:var(--font-display); font-weight:var(--weight-light);
	font-size:21px; line-height:1.42; color:var(--text-heading); text-wrap:pretty;
}
.mao-testimonial figcaption{ display:flex; gap:var(--space-3); align-items:center; }
.mao-testimonial__avatar{
	flex:0 0 auto; width:48px; height:48px; border-radius:999px;
	box-shadow:0 0 0 2px var(--blue-500); overflow:hidden;
}
.mao-testimonial__avatar img{ width:100%; height:100%; object-fit:cover; display:block; }
.mao-testimonial__name{ font-weight:var(--weight-semibold); color:var(--text-heading); display:block; }
.mao-testimonial__loc{ font:var(--weight-regular) var(--size-caption)/1.45 var(--font-sans); color:var(--text-muted); }

/* -------------------------------------------------------------------------
   10. Pricing
 ------------------------------------------------------------------------- */
.mao-pricing{ background:var(--surface-sunken); padding:var(--section-y) var(--gutter-page) var(--space-10); }
.mao-pricing__inner{ max-width:560px; margin:0 auto; display:grid; gap:var(--space-8); }
.mao-pricing__head{ display:grid; gap:var(--space-4); text-align:center; }
.mao-pricing-card{
	background:var(--white); border:1px solid var(--border-hairline);
	border-radius:var(--radius-xl); box-shadow:var(--shadow-2);
	padding:clamp(24px,4vw,40px); display:grid; gap:var(--space-6);
}
.mao-pricing-card__top{ display:grid; gap:var(--space-2); }
.mao-pricing-card__name{ font:var(--type-heading-s); color:var(--text-heading); }
.mao-pricing-card__price{ font-family:var(--font-mono); font-size:48px; line-height:1; color:var(--text-heading); letter-spacing:-.02em; }
.mao-pricing-card ul{ list-style:none; margin:0; padding:0; display:grid; border-top:1px solid var(--border-hairline); }
.mao-pricing-card li{ display:flex; gap:var(--space-3); align-items:flex-start; padding:var(--space-4) 0; border-bottom:1px solid var(--border-hairline); }
.mao-pricing-card li .mao-outcome__tick{ width:26px; height:26px; }
.mao-pricing-card li span.mao-pricing-card__item-text{ font:var(--type-body); color:var(--text-heading); padding-top:1px; }
.mao-btn-red-block--tall{ height:56px; }
.mao-pricing-card__foot{ margin:0; font:var(--type-body-s); color:var(--text-muted); text-align:center; }

/* -------------------------------------------------------------------------
   11. FAQ
 ------------------------------------------------------------------------- */
.mao-faq{ background:var(--surface-page); padding:var(--space-10) var(--gutter-page) var(--section-y); }
.mao-faq__inner{ max-width:820px; margin:0 auto; display:grid; gap:var(--space-8); }
.mao-faq__head{ display:grid; gap:var(--space-4); text-align:center; }
.mao-faq-list{ background:var(--white); border:1px solid var(--border-hairline); border-radius:var(--radius-l); box-shadow:var(--shadow-1); overflow:hidden; }
.mao-faq-item{ border-bottom:1px solid var(--border-hairline); }
.mao-faq-item:last-child{ border-bottom:0; }
.mao-faq-item__btn{
	width:100%; display:flex; justify-content:space-between; align-items:center; gap:var(--space-4);
	padding:var(--space-5) var(--space-6); background:transparent; border:0; cursor:pointer;
	text-align:left; font:var(--type-heading-s); color:var(--text-heading);
	transition:background var(--dur-fast) var(--ease-calm);
	font-family:var(--font-sans);
}
.mao-faq-item__btn:hover{ background:var(--surface-sunken); }
.mao-faq-item__icon{
	flex:0 0 auto; display:flex; color:var(--blue-700);
	transition:transform var(--dur-base) var(--ease-calm);
	transform:rotate(0deg);
}
.mao-faq-item.is-open .mao-faq-item__icon{ transform:rotate(180deg); }
.mao-faq-item__panel{
	max-height:0;
	overflow:hidden;
	transition:max-height var(--dur-base) var(--ease-calm);
}
.mao-faq-item.is-open .mao-faq-item__panel{ max-height:600px; }
.mao-faq-item__panel p{ margin:0; padding:0 var(--space-6) var(--space-6); font:var(--type-body); color:var(--text-body); max-width:660px; text-wrap:pretty; }
.mao-faq__disclaimer{ margin:0; font:var(--type-body-s); color:var(--text-muted); text-align:center; }

/* -------------------------------------------------------------------------
   12. Final call to action (dark band)
 ------------------------------------------------------------------------- */
.mao-final-cta{ background:var(--wash-ink); color:var(--text-on-dark); padding:var(--section-y) var(--gutter-page); }
.mao-final-cta__inner{ max-width:760px; margin:0 auto; display:grid; gap:var(--space-6); justify-items:center; text-align:center; }
.mao-final-cta .mao-h2{ color:var(--text-on-dark); }
.mao-final-cta .mao-h2 em{ color:var(--blue-300); }
.mao-final-cta__price{ margin:0; font:var(--type-body-l); color:var(--text-on-dark-muted); }
.mao-final-cta__price span{ font-family:var(--font-mono); color:var(--text-on-dark); }
.mao-final-cta__quiz{ margin:0; font:var(--type-body-s); color:var(--text-on-dark-muted); }
.mao-final-cta__quiz a,
.mao-final-cta__quiz button{
	color:var(--text-on-dark);
	text-underline-offset:3px;
	background:none; border:0; padding:0; font:inherit; cursor:pointer;
	text-decoration:underline; text-decoration-thickness:1px;
}

/* -------------------------------------------------------------------------
   13. Footer
 ------------------------------------------------------------------------- */
.mao-footer{ background:var(--surface-ink); color:var(--text-on-dark); padding:var(--space-12) var(--gutter-page) var(--space-8); border-top:1px solid var(--border-on-dark); }
.mao-footer__inner{ max-width:var(--container-max); margin:0 auto; display:grid; gap:var(--space-8); }
.mao-footer__top{ display:flex; justify-content:space-between; align-items:flex-start; gap:var(--space-8); flex-wrap:wrap; }
.mao-footer__logo{ display:inline-grid; gap:5px; }
.mao-footer__logo-word{ font-family:var(--font-display); font-weight:300; font-size:28px; line-height:1; letter-spacing:-.024em; color:var(--white); white-space:nowrap; }
.mao-footer__logo-rule{ height:1px; background:var(--red-500); }
.mao-footer__logo-sub{ font-family:var(--font-sans); font-weight:600; font-size:11px; line-height:1; letter-spacing:.34em; text-transform:uppercase; color:var(--white); white-space:nowrap; }
.mao-footer__nav{ display:flex; gap:var(--space-3) var(--space-6); flex-wrap:wrap; }
.mao-footer__nav a{ font:var(--type-body-s); color:var(--text-on-dark-muted); text-decoration:none; }
.mao-footer__nav a:hover{ color:var(--text-on-dark); }
.mao-footer__legal{ display:grid; gap:var(--space-3); max-width:720px; }
.mao-footer__legal p{ margin:0; font:var(--type-body-s); color:var(--text-on-dark-muted); }
.mao-footer__bottom{ padding-top:var(--space-5); border-top:1px solid var(--border-on-dark); font:var(--weight-regular) var(--size-caption)/1.45 var(--font-sans); color:var(--text-on-dark-muted); }

/* -------------------------------------------------------------------------
   Quiz modal
 ------------------------------------------------------------------------- */
.mao-modal{
	position:fixed; inset:0; z-index:100;
	display:none;
	align-items:center; justify-content:center;
	padding:var(--space-4);
}
.mao-modal.is-open{ display:flex; }
.mao-modal__scrim{
	position:absolute; inset:0;
	background:rgba(10,36,48,.42);
	-webkit-backdrop-filter:blur(3px);
	backdrop-filter:blur(3px);
}
.mao-modal__panel{
	position:relative; z-index:1;
	width:100%; max-width:560px;
	max-height:85vh; overflow:auto;
	background:var(--white);
	border-radius:28px;
	box-shadow:var(--shadow-3);
	padding:var(--space-8);
	display:grid; gap:var(--space-4);
}
.mao-modal__close{
	position:absolute; top:var(--space-4); right:var(--space-4);
	width:36px; height:36px; border-radius:999px;
	border:1px solid var(--border-hairline); background:var(--white);
	color:var(--ink-900); display:flex; align-items:center; justify-content:center;
	cursor:pointer; font-size:18px; line-height:1;
}
.mao-modal__close:hover{ background:var(--surface-sunken); }
.mao-modal__label{ font:var(--type-label); letter-spacing:var(--track-label); text-transform:uppercase; color:var(--red-600); }
.mao-modal__title{ font-family:var(--font-display); font-weight:400; font-size:clamp(26px,3vw,34px); color:var(--text-heading); margin:0; }
.mao-modal__body{ font:var(--type-body); color:var(--text-body); }
.mao-modal__body iframe{ max-width:100%; }

/* -------------------------------------------------------------------------
   Utility
 ------------------------------------------------------------------------- */
.mao-visually-hidden{
	position:absolute !important;
	width:1px; height:1px;
	padding:0; margin:-1px; overflow:hidden;
	clip:rect(0,0,0,0); white-space:nowrap; border:0;
}