/* ==========================================================================
   The Future Patient — v2
   Ported from the Claude Design handoff (the-future-patient-companion).
   Every colour, size and spacing value below is taken from the design files;
   they are named here so a change happens in one place instead of forty.
   ========================================================================== */

:root {
	/* --- ink / dark surfaces ------------------------------------------- */
	--ink:            #0d1422;  /* nav, footer, dark page background        */
	--ink-deep:       #0a0f1a;  /* video wells, Speaking footer             */
	--ink-darkest:    #090d16;  /* Journey — the low panel                  */
	--navy:           #1c2233;  /* dark cards, headings on light            */
	--navy-hero-end:  #1c2a45;  /* hero gradient foot                       */
	--navy-card:      #131c30;  /* Journey photo frame, dark                */

	/* --- warm / light surfaces ----------------------------------------- */
	--cream:          #fdf9f2;  /* Buy the Book page background             */
	--sand:           #f6eedd;  /* About page background, light panels      */
	--sand-deep:      #f3e2bd;  /* Journey golden-hour gradient             */
	--paper:          #ffffff;  /* cards, photo mounts                      */

	/* --- accent --------------------------------------------------------- */
	--amber:          #e8a34c;
	--amber-light:    #ffd9a0;
	--amber-dark:     #b0743a;  /* accent on light backgrounds              */

	/* --- vitals red — the journey's heartbeat rail only ------------------ */
	--vital:          #ff3b47;  /* the completed trace                      */
	--vital-glow:     #ffb3b8;  /* the pulse travelling along it            */
	--vital-dot:      #ff5a64;  /* the beat marker at the current moment    */
	--vital-track:    rgba(255, 255, 255, 0.22);  /* the untravelled trace  */

	/* --- lines and secondary text --------------------------------------- */
	--rule-warm:      #e5dbc6;
	--text-body:      #5c5646;  /* serif body on light                      */
	--text-strong:    #2a3244;  /* serif lead on light                      */
	--text-mono:      #8a806e;  /* mono captions on light                   */
	--text-mono-dark: #6b7a99;  /* mono captions on dark                    */

	/* --- type ------------------------------------------------------------ */
	--sans:  'Bricolage Grotesque', 'Helvetica Neue', Arial, sans-serif;
	--serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
	--mono:  'Space Mono', ui-monospace, 'SF Mono', Menlo, monospace;

	/* --- shared geometry -------------------------------------------------- */
	--gutter:  6vw;
	--measure: 1180px;
	--pill:    30px;
}

/* --------------------------------------------------------------------------
   Reset — only what the design actually depends on.
   -------------------------------------------------------------------------- */

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

/* Nothing should ever scroll or drag sideways. */
html { overflow-x: clip; }

body {
	margin: 0;
	overflow-x: clip;
	max-width: 100%;
	font-family: var(--sans);
	background: var(--ink);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* height:auto matters: every <img> carries width/height attributes so the
   browser can reserve space before the file arrives, and without this the
   attribute height wins over any CSS width and the image stretches. */
img { max-width: 100%; height: auto; display: block; }

a { color: var(--amber); text-decoration: none; }
a:hover { color: var(--amber-light); }

/* Light pages flip the default link colour, matching each design's <style>.
   :where() keeps this at zero specificity so it stays a page-level default:
   the nav and footer sit on ink even on a light page, and their own white
   rules must still win. Without :where() this would repaint them brown. */
:where(.page--light) a { color: var(--amber-dark); }
:where(.page--light) a:hover { color: var(--amber); }

button { font: inherit; color: inherit; background: none; border: 0; }

/* A visible focus ring everywhere — the prototypes had none, and keyboard
   users need one. Amber reads against both the ink and the sand surfaces. */
:where(a, button, input, textarea, [tabindex]):focus-visible {
	outline: 2px solid var(--amber);
	outline-offset: 3px;
	border-radius: 4px;
}

/* The small text links — nav, footer, retailer names — are 11–13px, so their
   boxes are well under the 24px minimum target size. Rather than pad them and
   push the design around, extend the hit area with a pseudo-element: invisible,
   costs no layout, and the horizontal reach is kept to 4px a side so adjacent
   links meet rather than overlap. */
.site-nav__link,
.site-nav__brand,
.site-footer__links a,
.retailers a { position: relative; }

.site-nav__link::before,
.site-nav__brand::before,
.site-footer__links a::before,
.retailers a::before {
	content: '';
	position: absolute;
	inset: -8px -4px;
}

.visually-hidden {
	position: absolute;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.skip-link {
	position: absolute;
	left: 50%;
	top: 0;
	transform: translate(-50%, -110%);
	z-index: 100;
	background: var(--amber);
	color: var(--navy);
	font-size: 13px;
	font-weight: 700;
	padding: 10px 20px;
	border-radius: 0 0 10px 10px;
	transition: transform 0.15s ease;
}
.skip-link:focus { transform: translate(-50%, 0); color: var(--navy); }

/* --------------------------------------------------------------------------
   Shared type helpers
   -------------------------------------------------------------------------- */

/* The small letter-spaced monospace eyebrow used on every page. */
.eyebrow {
	font-family: var(--mono);
	font-size: 12px;
	letter-spacing: 3px;
	color: var(--amber-light);
	margin: 0 0 16px;
}
.eyebrow--dark  { color: var(--amber-dark); }
.eyebrow--muted { color: rgba(255, 255, 255, 0.5); font-size: 11px; }

/* The even smaller mono caption under photos and stats. */
.caption {
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: 1px;
	color: var(--text-mono);
	margin: 0;
}
.caption--light { color: rgba(255, 255, 255, 0.5); }

.lede,
.prose {
	font-family: var(--serif);
	line-height: 1.7;
}

.shell {
	max-width: var(--measure);
	margin: 0 auto;
}

/* --------------------------------------------------------------------------
   Buttons — the design draws these as divs; here they are real links.
   -------------------------------------------------------------------------- */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	font-family: var(--sans);
	font-size: 15px;
	font-weight: 700;
	padding: 14px 28px;
	border-radius: var(--pill);
	cursor: pointer;
	text-align: center;
	transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}
.btn:active { transform: translateY(1px); }

/* Solid amber — the primary action on dark backgrounds. */
.btn--amber { background: var(--amber); color: var(--navy); }
.btn--amber:hover { background: var(--amber-light); color: var(--navy); }

/* Outlined on dark. */
.btn--ghost {
	border: 1px solid rgba(255, 255, 255, 0.6);
	color: #fff;
	font-weight: 600;
}
.btn--ghost:hover {
	border-color: #fff;
	background: rgba(255, 255, 255, 0.08);
	color: #fff;
}

/* Solid navy — the primary action on light backgrounds. */
.btn--navy { background: var(--navy); color: #fff; font-size: 14px; padding: 13px 26px; }
.btn--navy:hover { background: var(--ink); color: #fff; }

/* Outlined on light. */
.btn--outline {
	border: 1px solid var(--navy);
	color: var(--navy);
	font-weight: 600;
	font-size: 14px;
	padding: 13px 26px;
}
.btn--outline:hover { background: var(--navy); color: #fff; }

.btn-row {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}

/* --------------------------------------------------------------------------
   Site navigation
   -------------------------------------------------------------------------- */

.site-nav {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	padding: 18px var(--gutter);
	background: var(--ink);
}
.site-nav--ruled { border-bottom: 1px solid rgba(255, 255, 255, 0.1); }

.site-nav__brand {
	color: #fff;
	font-weight: 800;
	font-size: 14px;
	letter-spacing: 1.5px;
}
.site-nav__brand:hover { color: var(--amber-light); }

.site-nav__links {
	display: flex;
	align-items: center;
	gap: 24px;
	flex-wrap: wrap;
	font-size: 13px;
	font-weight: 600;
}

.site-nav__link { color: rgba(255, 255, 255, 0.9); }
.site-nav__link:hover { color: var(--amber-light); }

/* The current page is underlined in amber. */
.site-nav__link[aria-current='page'] {
	color: var(--amber-light);
	border-bottom: 2px solid var(--amber);
	padding-bottom: 3px;
}

/* Speaking sits in a pill instead of underlined. */
.site-nav__cta {
	color: #fff;
	border: 1px solid rgba(255, 255, 255, 0.55);
	padding: 7px 16px;
	border-radius: var(--pill);
}
.site-nav__cta:hover { color: #fff; border-color: #fff; background: rgba(255, 255, 255, 0.08); }
.site-nav__cta[aria-current='page'] {
	color: var(--amber-light);
	border-color: var(--amber);
	padding-bottom: 7px;
}

/* Four links plus a brand will not sit on one line on a phone. The design
   wraps rather than collapsing to a menu, so tighten the gap and let it. */
@media (max-width: 640px) {
	.site-nav { padding: 14px var(--gutter); }
	.site-nav__links { gap: 14px; font-size: 12px; width: 100%; }
	.site-nav__cta { padding: 6px 13px; }
}

/* Five nav items cannot share a line on a phone at any readable size — the
   full set needs ~392px of the 330 available at 375px. Rather than orphan the
   Speaking pill on a third row (which costs the journey page, whose nav is
   fixed, a permanent 108px of screen), the longest label shortens to
   "Journey". Only one of the two spans is ever in the accessibility tree,
   because display:none removes the other. */
.nav-short { display: none; }

@media (max-width: 560px) {
	.site-nav__links { gap: 8px; font-size: 11px; }
	.site-nav__cta { padding: 5px 10px; }
	.nav-full  { display: none; }
	.nav-short { display: inline; }
}

/* --------------------------------------------------------------------------
   Site footer
   -------------------------------------------------------------------------- */

.site-footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	padding: 26px var(--gutter);
	background: var(--ink);
}
.site-footer--deep { background: var(--ink-deep); }

.site-footer__copy { color: rgba(255, 255, 255, 0.6); font-size: 12px; }

.site-footer__links {
	display: flex;
	gap: 24px;
	flex-wrap: wrap;
	font-size: 13px;
	font-weight: 600;
}
.site-footer__links a { color: #fff; }
.site-footer__links a:hover { color: var(--amber-light); }
.site-footer__links .is-accent { color: var(--amber); }

/* ==========================================================================
   BUY THE BOOK
   ========================================================================== */

.page-buy { background: var(--cream); min-height: 100vh; }

.buy-hero {
	padding: clamp(44px, 6vw, 80px) var(--gutter);
	background:
		radial-gradient(ellipse 80% 70% at 70% 20%, rgba(232, 163, 76, 0.14), transparent 60%),
		linear-gradient(180deg, var(--ink), var(--navy-hero-end));
}
.buy-hero__inner {
	max-width: var(--measure);
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	gap: clamp(32px, 5vw, 72px);
	align-items: center;
	justify-content: center;
}
.buy-hero__cover { flex: 0 1 340px; min-width: 260px; }
.buy-hero__cover img {
	width: 100%;
	border-radius: 6px;
	box-shadow: 0 40px 80px rgba(0, 0, 0, 0.55);
}
.buy-hero__body { flex: 1 1 420px; max-width: 620px; }

.buy-hero__title {
	font-size: clamp(36px, 4vw, 54px);
	font-weight: 800;
	color: #fff;
	line-height: 1.05;
	letter-spacing: -0.5px;
	margin: 0;
}
.buy-hero__lede {
	font-family: var(--serif);
	font-size: clamp(16px, 1.5vw, 19px);
	color: rgba(255, 255, 255, 0.85);
	line-height: 1.7;
	margin: 20px 0 0;
}
.buy-hero .btn-row { margin-top: 30px; }

.retailers {
	display: flex;
	gap: 20px;
	flex-wrap: wrap;
	margin: 20px 0 0;
	padding: 0;
	list-style: none;
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 1px;
	color: rgba(255, 255, 255, 0.55);
}
.retailers a { color: inherit; }
.retailers a:hover { color: var(--amber-light); }

/* --- the three feature cards ------------------------------------------- */

.feature-grid {
	padding: clamp(44px, 5vw, 72px) var(--gutter) 12px;
}
.feature-grid__inner {
	max-width: var(--measure);
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 20px;
}
.feature {
	border: 1px solid var(--rule-warm);
	border-radius: 14px;
	padding: 26px;
	background: var(--paper);
}
.feature__glyph {
	font-family: var(--mono);
	font-size: 22px;
	color: var(--amber);
	line-height: 1;
}
.feature__title {
	font-size: 18px;
	font-weight: 700;
	color: var(--navy);
	margin: 12px 0 8px;
}
.feature__text {
	font-family: var(--serif);
	font-size: 15px;
	color: var(--text-body);
	line-height: 1.65;
	margin: 0;
}

/* --- pull quote + QR panel ---------------------------------------------- */

.endorse {
	padding: clamp(36px, 5vw, 64px) var(--gutter);
}
.endorse__inner {
	max-width: var(--measure);
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	gap: 40px;
	align-items: center;
}
.endorse__quote {
	flex: 1.4 1 380px;
	border-left: 3px solid var(--amber);
	padding-left: 26px;
	margin: 0;
}
.endorse__quote p {
	font-family: var(--serif);
	font-style: italic;
	font-size: clamp(19px, 2vw, 24px);
	color: var(--navy);
	line-height: 1.6;
	margin: 0;
}
.endorse__quote footer {
	font-family: var(--mono);
	font-size: 11px;
	color: var(--text-mono);
	letter-spacing: 1px;
	margin-top: 16px;
}

.qr-panel {
	flex: 1 1 300px;
	max-width: 380px;
	background: var(--navy);
	border-radius: 16px;
	padding: 28px;
	display: flex;
	gap: 18px;
	align-items: center;
}
.qr-panel__code {
	width: 74px;
	height: 74px;
	flex-shrink: 0;
	border-radius: 8px;
	background: #fff;
	padding: 5px;
}
.qr-panel__eyebrow {
	font-family: var(--mono);
	font-size: 10px;
	color: var(--amber-light);
	letter-spacing: 2px;
}
.qr-panel__text {
	font-size: 15px;
	color: #fff;
	font-weight: 600;
	line-height: 1.5;
	margin-top: 6px;
}

/* ==========================================================================
   ABOUT
   ========================================================================== */

.page-about { background: var(--sand); min-height: 100vh; }

.about-intro { padding: clamp(48px, 6vw, 88px) var(--gutter) 0; }
.about-intro__inner {
	max-width: var(--measure);
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	gap: clamp(36px, 5vw, 72px);
	align-items: flex-start;
}
.about-intro__aside { flex: 0 1 400px; min-width: 280px; }
.about-intro__body  { flex: 1 1 440px; max-width: 640px; }

/* A white photo mount, tilted a degree and a half, as in the design. */
.photo-mount {
	background: var(--paper);
	padding: 14px 14px 12px;
	border-radius: 6px;
	box-shadow: 0 30px 60px rgba(60, 45, 20, 0.25);
}
.photo-mount--tilt { transform: rotate(-1.5deg); }
.photo-mount img {
	width: 100%;
	display: block;
	object-fit: cover;
}
.photo-mount figcaption { margin-top: 10px; }

.stat-row {
	display: flex;
	gap: clamp(20px, 3vw, 40px);
	margin-top: 36px;
	padding-left: 8px;
	flex-wrap: wrap;
}
.stat__value {
	font-size: 30px;
	font-weight: 800;
	color: var(--navy);
	line-height: 1.1;
}
.stat__value--accent { color: var(--amber); }
.stat__label {
	font-family: var(--mono);
	font-size: 10px;
	color: var(--text-mono);
	letter-spacing: 2px;
}

.about-title {
	font-size: clamp(38px, 4.4vw, 60px);
	font-weight: 800;
	color: var(--navy);
	line-height: 1.03;
	letter-spacing: -1px;
	margin: 0;
}
.about-lede {
	font-family: var(--serif);
	font-size: clamp(17px, 1.6vw, 21px);
	color: var(--text-strong);
	line-height: 1.7;
	margin: 24px 0 0;
}
.about-body {
	font-family: var(--serif);
	font-size: 16px;
	color: var(--text-body);
	line-height: 1.75;
	margin: 18px 0 0;
}
.about-pull {
	margin: 30px 0 0;
	border-left: 3px solid var(--amber);
	padding-left: 22px;
}
.about-pull p {
	font-family: var(--serif);
	font-style: italic;
	font-size: 18px;
	color: var(--navy);
	line-height: 1.6;
	margin: 0;
}
.about-intro .btn-row { margin-top: 32px; }

/* --- foreword panel ------------------------------------------------------ */

.foreword { padding: clamp(48px, 6vw, 80px) var(--gutter); }
.foreword__inner {
	max-width: var(--measure);
	margin: 0 auto;
	background: var(--ink);
	border-radius: 18px;
	padding: clamp(30px, 4vw, 52px);
	display: flex;
	flex-wrap: wrap;
	gap: 36px;
	align-items: center;
}
.foreword__body { flex: 1 1 380px; }
.foreword__quote {
	font-family: var(--serif);
	font-style: italic;
	font-size: clamp(17px, 1.6vw, 21px);
	color: rgba(255, 255, 255, 0.9);
	line-height: 1.65;
	margin: 0;
}
.foreword__name { font-size: 14px; color: #fff; font-weight: 700; margin-top: 18px; }
.foreword__role {
	font-family: var(--mono);
	font-size: 11px;
	color: rgba(255, 255, 255, 0.55);
	letter-spacing: 1px;
	margin-top: 4px;
}
.foreword__aside { flex: 0 1 200px; min-width: 160px; }
.foreword__portrait {
	aspect-ratio: 1;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.15);
	background: repeating-linear-gradient(45deg, #17233c, #17233c 12px, #1c2a47 12px, #1c2a47 24px);
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	font-family: var(--mono);
	font-size: 10px;
	line-height: 1.6;
	color: var(--text-mono-dark);
	padding: 12px;
}

/* ==========================================================================
   SPEAKING
   ========================================================================== */

.page-speaking { background: var(--ink); min-height: 100vh; }

.speaking-hero {
	padding: clamp(48px, 6vw, 88px) var(--gutter) 0;
	background: radial-gradient(ellipse 80% 60% at 30% 10%, rgba(232, 163, 76, 0.12), transparent 60%);
}
.speaking-hero__inner {
	max-width: var(--measure);
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	gap: clamp(36px, 5vw, 72px);
	align-items: center;
}
.speaking-hero__body { flex: 1 1 440px; max-width: 620px; }
.speaking-hero__media { flex: 1 1 380px; max-width: 560px; }
.speaking-hero__title {
	font-size: clamp(38px, 4.4vw, 60px);
	font-weight: 800;
	color: #fff;
	line-height: 1.03;
	letter-spacing: -1px;
	margin: 0;
}
.speaking-hero__lede {
	font-family: var(--serif);
	font-size: clamp(16px, 1.5vw, 19px);
	color: rgba(255, 255, 255, 0.8);
	line-height: 1.7;
	margin: 22px 0 0;
}
.speaking-hero .btn-row { margin-top: 30px; }

/* --- signature talks ------------------------------------------------------ */

.talks { padding: clamp(48px, 6vw, 80px) var(--gutter) 0; }
.talks__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 20px;
}
.talk {
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 16px;
	padding: 28px;
	background: rgba(255, 255, 255, 0.03);
}
.talk__number {
	font-family: var(--mono);
	font-size: 11px;
	color: var(--amber-light);
	letter-spacing: 2px;
}
.talk__title {
	font-size: 20px;
	font-weight: 700;
	color: #fff;
	margin: 12px 0 10px;
	line-height: 1.25;
}
.talk__text {
	font-family: var(--serif);
	font-size: 15px;
	color: rgba(255, 255, 255, 0.7);
	line-height: 1.65;
	margin: 0;
}
.talk__meta {
	font-family: var(--mono);
	font-size: 10px;
	color: rgba(255, 255, 255, 0.4);
	letter-spacing: 1px;
	margin-top: 16px;
}

/* --- booking panel -------------------------------------------------------- */

.booking { padding: clamp(48px, 6vw, 80px) var(--gutter); }
.booking__inner {
	max-width: var(--measure);
	margin: 0 auto;
	background: var(--sand);
	border-radius: 18px;
	padding: clamp(30px, 4vw, 52px);
	display: flex;
	flex-wrap: wrap;
	gap: clamp(28px, 4vw, 56px);
	align-items: center;
}
.booking__body { flex: 1 1 340px; }
.booking__title {
	font-size: clamp(26px, 2.6vw, 36px);
	font-weight: 800;
	color: var(--navy);
	line-height: 1.1;
}
.booking__text {
	font-family: var(--serif);
	font-size: 15px;
	color: var(--text-body);
	line-height: 1.7;
	margin: 14px 0 0;
}

.booking__form {
	flex: 1 1 340px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.field-row { display: flex; gap: 12px; flex-wrap: wrap; }
.field-row > * { flex: 1 1 140px; }

.booking__form input,
.booking__form textarea {
	width: 100%;
	background: var(--paper);
	border: 1px solid var(--rule-warm);
	border-radius: 10px;
	padding: 13px 16px;
	font-family: var(--sans);
	font-size: 14px;
	color: var(--navy);
	transition: border-color 0.15s ease;
}
.booking__form textarea { resize: vertical; min-height: 96px; }
.booking__form input::placeholder,
.booking__form textarea::placeholder { color: var(--text-mono); }
.booking__form input:hover,
.booking__form textarea:hover { border-color: #d3c5a5; }

.booking__submit {
	background: var(--navy);
	color: #fff;
	font-weight: 700;
	font-size: 15px;
	padding: 14px;
	border-radius: var(--pill);
	text-align: center;
	cursor: pointer;
	width: 100%;
	transition: background-color 0.18s ease;
}
.booking__submit:hover { background: var(--ink); }
.booking__submit[disabled] { opacity: 0.6; cursor: progress; }

/* The honeypot: present in the DOM for bots, invisible and unreachable
   for people and for screen readers. */
.hp {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.form-status {
	font-family: var(--mono);
	font-size: 12px;
	line-height: 1.6;
	margin: 0;
	min-height: 1em;
}
.form-status--ok    { color: #2f7d4f; }
.form-status--error { color: #b3402e; }

/* On the invitation the confirmation is the whole point of the page, so it is
   set as a panel rather than a caption: big, bold, and unmistakably coloured
   so nobody wonders whether their reply went through. The !important flags
   are deliberate — this one message must not be quietly overridden by the
   generic .form-status caption styling that sits above it. */
.rsvp__form .form-status {
	font-family: var(--sans) !important;
	font-size: 19px !important;
	font-weight: 800 !important;
	line-height: 1.45;
	letter-spacing: -0.2px;
	min-height: 0;
	text-wrap: pretty;
}
.rsvp__form .form-status--ok,
.rsvp__form .form-status--error {
	margin-top: 4px;
	padding: 18px 20px;
	border-radius: 14px;
	border: 2px solid currentColor;
}
.rsvp__form .form-status--ok {
	color: #14663f !important;
	background: #d8f0e2;
}
.rsvp__form .form-status--error {
	color: #94291f !important;
	background: #fbe0dc;
}

/* ==========================================================================
   VIDEO WELL — shared by Speaking and Journey
   ========================================================================== */

.video-card {
	border-radius: 14px;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, 0.16);
	background: var(--ink-deep);
	box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5);
}
.video-card__frame {
	position: relative;
	aspect-ratio: 16 / 9;
	background: #10182a;
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	cursor: pointer;
	overflow: hidden;
}
.video-card__frame img,
.video-card__frame iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border: 0;
}
/* A soft scrim so the play button stays legible over any still. */
.video-card__frame::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(8, 11, 18, 0.15), rgba(8, 11, 18, 0.45));
	pointer-events: none;
}
.video-card__play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 2;
	width: 74px;
	height: 74px;
	border-radius: 50%;
	background: var(--amber);
	color: var(--navy);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 24px;
	box-shadow: 0 8px 30px rgba(232, 163, 76, 0.4);
	transition: transform 0.18s ease, background-color 0.18s ease;
}
.video-card__frame:hover .video-card__play { transform: translate(-50%, -50%) scale(1.07); }
.video-card__play--pale { background: rgba(255, 255, 255, 0.92); box-shadow: none; }
.video-card__play--small { width: 66px; height: 66px; font-size: 22px; }

.video-card__bar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	padding: 13px 18px;
}
.video-card__bar a { color: #fff; font-size: 13px; font-weight: 700; }
.video-card__bar a:hover { color: var(--amber-light); }
.video-card__meta {
	font-family: var(--mono);
	font-size: 11px;
	color: var(--amber-light);
	white-space: nowrap;
}

/* Once clicked the frame is replaced by the iframe; hide the poster chrome. */
.video-card__frame.is-playing::after,
.video-card__frame.is-playing .video-card__play { display: none; }

/* ==========================================================================
   JOURNEY — the horizontal companion experience
   ========================================================================== */

html.journey, body.journey { height: 100%; overscroll-behavior: none; overflow: hidden; }

.journey-shell {
	font-family: var(--sans);
	height: 100vh;
	height: 100dvh;
	overflow: hidden;
	position: relative;
	background: var(--ink);
}

.journey__nav {
	position: fixed;
	top: 0; left: 0; right: 0;
	z-index: 30;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	padding: 18px 5vw 34px;
	/* The nav floats over panels that are sometimes cream. A scrim that has
	   already faded to 42% by the time it reaches the text leaves white on
	   sand at 3.3:1 — under AA. Hold it dark through the text, then fade in
	   the padding below, where there is room for the transition to read as
	   one rather than as an edge. */
	background: linear-gradient(180deg,
		rgba(8, 11, 18, 0.92) 0%,
		rgba(8, 11, 18, 0.82) 48%,
		rgba(8, 11, 18, 0) 100%);
}
.journey__nav .site-nav__brand,
.journey__nav .site-nav__link,
.journey__nav .site-nav__current { text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5); }
.journey__nav .site-nav__cta { background: rgba(8, 11, 18, 0.35); }
.journey__nav .site-nav__current {
	color: var(--amber-light);
	border-bottom: 2px solid var(--amber);
	padding-bottom: 3px;
}

/* --- the track ------------------------------------------------------------ */

.journey__track {
	display: flex;
	height: 100vh;
	height: 100dvh;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}
.journey__track::-webkit-scrollbar { display: none; }

.panel {
	width: 100vw;
	height: 100vh;
	height: 100dvh;
	flex-shrink: 0;
	scroll-snap-align: start;
	overflow-y: auto;
	display: flex;
	/* The nav and the rail both float over the panels, and both change height
	   as they wrap on narrow screens. journey.js measures them and writes
	   --nav-h / --rail-h, so the clearance is always right; the fallbacks are
	   the desktop heights, for the moment before the script runs. */
	padding:
		calc(var(--nav-h, 84px) + 22px)
		var(--gutter)
		calc(var(--rail-h, 68px) + 26px);
	background: var(--ink);
}
.panel:focus { outline: none; }
.panel:focus-visible { outline: 2px solid var(--amber); outline-offset: -4px; }
.panel__inner {
	margin: auto;
	width: 100%;
	max-width: 1500px;
	display: flex;
	flex-wrap: wrap;
	gap: clamp(28px, 4vw, 60px);
	align-items: center;
	justify-content: center;
}
/* The media column wants every spare pixel; the text column is capped. */
.panel__media { flex: 99 1 560px; max-width: 920px; min-width: 0; }
.panel__text  { flex: 1 1 320px;  max-width: 440px; }

/* Panel backgrounds, in the order the design lays them out. */
.panel--intro {
	background:
		radial-gradient(ellipse 80% 60% at 75% 20%, rgba(232, 163, 76, 0.10), transparent 60%),
		radial-gradient(ellipse 70% 60% at 15% 90%, rgba(63, 182, 196, 0.08), transparent 60%),
		var(--ink);
}
.panel--sand   { background: var(--sand); }
.panel--low    { background: var(--ink-darkest); }
.panel--golden { background: linear-gradient(180deg, var(--sand) 0%, var(--sand-deep) 100%); }
.panel--home   { background: linear-gradient(180deg, var(--sand-deep) 0%, var(--sand) 100%); }
.panel--finale {
	background: radial-gradient(ellipse 80% 60% at 50% 30%, rgba(232, 163, 76, 0.12), transparent 65%), var(--ink);
	text-align: center;
}
.panel--finale .panel__inner { max-width: 680px; display: block; }

/* --- intro panel ---------------------------------------------------------- */

.intro__body { flex: 1.3 1 480px; max-width: 720px; }
.intro__aside { flex: 1 1 340px; max-width: 460px; }
.intro__title {
	font-size: clamp(40px, 5.4vw, 76px);
	font-weight: 800;
	color: #fff;
	line-height: 1.02;
	letter-spacing: -1px;
	margin: 18px 0 0;
}
.intro__lede {
	font-family: var(--serif);
	font-size: clamp(17px, 1.5vw, 21px);
	color: rgba(255, 255, 255, 0.85);
	line-height: 1.7;
	max-width: 560px;
	margin: 14px 0 0;
}
.intro__stats {
	display: flex;
	gap: clamp(20px, 3vw, 44px);
	margin: 34px 0 0;
	flex-wrap: wrap;
}
.intro__stats .stat__value { font-size: 34px; color: var(--amber-light); }
.intro__stats .stat__label { color: rgba(255, 255, 255, 0.55); }
.intro__note { margin-top: 30px; max-width: 470px; }
.intro__note-title { font-size: 17px; font-weight: 700; color: #fff; }
.intro__note p {
	font-family: var(--serif);
	font-size: 15px;
	color: rgba(255, 255, 255, 0.72);
	line-height: 1.7;
	margin: 8px 0 0;
}
.intro__begin { margin-top: 34px; }
.intro__begin .arrow { display: inline-block; animation: bob 1.6s ease-in-out infinite; }

.ekg { display: block; margin: 22px 0 4px; max-width: 100%; }
.ekg--animated polyline { stroke-dasharray: 600; animation: ekg 6s linear infinite; }

@keyframes bob { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(8px); } }
@keyframes ekg { to { stroke-dashoffset: -600; } }

/* --- moment panels -------------------------------------------------------- */

.moment__eyebrow {
	font-family: var(--mono);
	font-size: 12px;
	letter-spacing: 3px;
	color: var(--amber-light);
}
.moment__title {
	font-size: clamp(28px, 2.6vw, 40px);
	font-weight: 800;
	color: #fff;
	line-height: 1.06;
	margin: 12px 0 16px;
}
.moment__quote {
	font-family: var(--serif);
	font-style: italic;
	font-size: clamp(18px, 1.6vw, 23px);
	color: rgba(255, 255, 255, 0.92);
	line-height: 1.55;
	margin: 0 0 16px;
}
.moment__text {
	font-family: var(--serif);
	font-size: 15px;
	color: rgba(255, 255, 255, 0.68);
	line-height: 1.7;
	margin: 0 0 20px;
}
.moment__source {
	font-family: var(--mono);
	font-size: 11px;
	color: rgba(255, 255, 255, 0.45);
	letter-spacing: 1px;
}

/* A copy slot still waiting for John's words. Dashed underline so nobody
   mistakes it for finished text. Delete the class, not this rule, when the
   real line goes in — the rule stays useful for the next draft. */
.is-draft {
	font-style: normal !important;
	opacity: 0.75;
	text-decoration: underline dashed var(--amber) 1.5px;
	text-underline-offset: 6px;
}

/* Light-panel variants of the same four. */
.panel--sand .moment__eyebrow,
.panel--golden .moment__eyebrow,
.panel--home .moment__eyebrow { color: var(--amber-dark); }
.panel--sand .moment__title,
.panel--golden .moment__title,
.panel--home .moment__title { color: var(--navy); }
.panel--sand .moment__quote,
.panel--golden .moment__quote,
.panel--home .moment__quote { color: var(--text-strong); }
.panel--sand .moment__text,
.panel--golden .moment__text,
.panel--home .moment__text { color: var(--text-body); }
.panel--sand .moment__source,
.panel--golden .moment__source,
.panel--home .moment__source { color: var(--text-mono); }

/* The low panel is dimmer throughout. */
.panel--low .moment__eyebrow { color: #8fa4c9; }
.panel--low .moment__source  { color: rgba(255, 255, 255, 0.4); }
.panel--low .video-card { border-color: rgba(255, 255, 255, 0.12); background: #070b12; box-shadow: 0 30px 70px rgba(0, 0, 0, 0.6); }
.panel--low .video-card__meta { color: rgba(255, 255, 255, 0.55); }

/* Golden panel inverts the video card's frame. */
.panel--golden .video-card { border-color: rgba(60, 45, 20, 0.2); background: var(--navy); box-shadow: 0 30px 70px rgba(60, 45, 20, 0.35); }

/* Photo mounts inside panels. */
.panel .photo-mount { padding: 14px 14px 12px; border-radius: 14px; box-shadow: 0 30px 70px rgba(60, 45, 20, 0.3); }
.panel .photo-mount img { border-radius: 6px; aspect-ratio: 3 / 2; }
.photo-mount--dark {
	background: var(--navy-card);
	border: 1px solid rgba(255, 255, 255, 0.14);
	box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5);
}
.photo-mount--dark figcaption { color: rgba(255, 255, 255, 0.5); }

/* --- finale --------------------------------------------------------------- */

.finale__title {
	font-size: clamp(34px, 4vw, 56px);
	font-weight: 800;
	color: #fff;
	line-height: 1.05;
	letter-spacing: -0.5px;
}
.finale__text {
	font-family: var(--serif);
	font-size: clamp(16px, 1.5vw, 20px);
	color: rgba(255, 255, 255, 0.8);
	line-height: 1.7;
	margin: 20px auto 0;
	max-width: 520px;
}
.finale .btn-row { justify-content: center; margin-top: 34px; }
.finale .ekg { margin: 0 auto 24px; }

/* --- progress rail --------------------------------------------------------- */

.rail {
	position: fixed;
	left: 0; right: 0; bottom: 0;
	z-index: 30;
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 16px 5vw 18px;
	background: linear-gradient(180deg, rgba(8, 11, 18, 0), rgba(8, 11, 18, 0.88));
}
.rail__btn {
	width: 36px;
	height: 36px;
	flex-shrink: 0;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.35);
	background: rgba(8, 11, 18, 0.4);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 15px;
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}
.rail__btn:hover:not([disabled]) { border-color: var(--amber); background: rgba(232, 163, 76, 0.15); }
.rail__btn[disabled] { opacity: 0.35; cursor: default; }

.rail__index {
	font-family: var(--mono);
	font-size: 11px;
	color: var(--amber-light);
	letter-spacing: 1.5px;
	white-space: nowrap;
}
/* The progress bar is a cardiac trace. Three layers stacked in the same box:
   the full trace in faint white, the travelled portion in red revealed by a
   clip-path, and a pale pulse running along the travelled portion only —
   because the second and third layers share one clipped <svg>. A dot marks
   the current moment and pulses like a beat. */
.rail__ekg {
	flex: 1;
	height: 34px;
	position: relative;
	min-width: 0;
}
.rail__ekg svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
}

/* Every stroke uses non-scaling-stroke (set on the shared trace) because the
   svg is stretched horizontally by preserveAspectRatio="none" — without it
   the line weight would smear along with the geometry. */
.rail__ekg-track { stroke: var(--vital-track); stroke-width: 1.5; }

.rail__ekg-done {
	clip-path: inset(0 100% 0 0);
	transition: clip-path 0.4s ease;
	filter: drop-shadow(0 0 5px rgba(255, 59, 71, 0.7));
}
.rail__ekg-line  { stroke: var(--vital); stroke-width: 2; }
.rail__ekg-pulse {
	stroke: var(--vital-glow);
	stroke-width: 2.5;
	stroke-dasharray: 60 940;
	animation: ekgflow 3.2s linear infinite;
}

.rail__beat {
	position: absolute;
	top: 50%;
	left: 0;
	width: 9px;
	height: 9px;
	margin: -4.5px 0 0 -4.5px;
	border-radius: 50%;
	background: var(--vital-dot);
	transition: left 0.4s ease;
	animation: beatGlow 1.1s ease-out infinite;
}

@keyframes ekgflow { to { stroke-dashoffset: -1000; } }
@keyframes beatGlow {
	0%, 100% { box-shadow: 0 0 0 0 rgba(255, 59, 71, 0.6); }
	50%      { box-shadow: 0 0 0 9px rgba(255, 59, 71, 0); }
}
.rail__title {
	font-family: var(--mono);
	font-size: 11px;
	color: rgba(255, 255, 255, 0.55);
	white-space: nowrap;
	max-width: 200px;
	overflow: hidden;
	text-overflow: ellipsis;
}
.rail__toggle {
	font-family: var(--mono);
	font-size: 11px;
	color: #fff;
	border: 1px solid rgba(255, 255, 255, 0.35);
	padding: 7px 14px;
	border-radius: 20px;
	cursor: pointer;
	letter-spacing: 1px;
	background: rgba(8, 11, 18, 0.4);
	flex-shrink: 0;
	transition: border-color 0.15s ease;
}
.rail__toggle:hover { border-color: var(--amber); }

/* On a phone the rail has no room for the moment's caption. */
@media (max-width: 720px) {
	.rail { gap: 10px; padding: 12px 5vw 14px; }
	.rail__title { display: none; }
	.rail__index { font-size: 10px; letter-spacing: 1px; }
	.rail__toggle { padding: 6px 11px; }
}

/* Four nav items plus a brand cannot share a line at phone widths. Tighten
   them so the nav costs two rows rather than three — it is fixed over the
   panels, and every row it takes is a row of content pushed off-screen. */
@media (max-width: 560px) {
	.journey__nav { padding: 12px 5vw 26px; gap: 6px; }
	.journey__nav .site-nav__brand { font-size: 12px; letter-spacing: 1.2px; }
	.journey__nav .site-nav__links { gap: 8px; font-size: 11px; width: 100%; }
	.journey__nav .site-nav__cta { padding: 5px 10px; }
}

/* --- index overlay --------------------------------------------------------- */

.jump {
	position: fixed;
	inset: 0;
	z-index: 50;
	background: rgba(8, 11, 18, 0.96);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 40px var(--gutter);
	overflow-y: auto;
}
.jump[hidden] { display: none; }
.jump__grid {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
	max-width: 900px;
}
.jump__item {
	border: 1px solid rgba(255, 255, 255, 0.25);
	border-radius: 12px;
	padding: 14px 18px;
	cursor: pointer;
	min-width: 130px;
	text-align: left;
	display: block;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}
.jump__item:hover,
.jump__item[aria-current='true'] { border-color: var(--amber); background: rgba(232, 163, 76, 0.1); }
.jump__num { display: block; font-family: var(--mono); font-size: 11px; color: var(--amber-light); }
.jump__label { display: block; font-size: 14px; font-weight: 700; color: #fff; margin-top: 4px; }
.jump__close {
	margin-top: 30px;
	font-family: var(--mono);
	font-size: 12px;
	color: rgba(255, 255, 255, 0.6);
	cursor: pointer;
	letter-spacing: 2px;
}
.jump__close:hover { color: #fff; }

/* --------------------------------------------------------------------------
   Reduced motion — honour the OS setting everywhere.
   -------------------------------------------------------------------------- */

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

/* ==========================================================================
   ADDED IN UPDATE 1 — the Aug 2026 design revision.
   Speaking gains a video library and testimonials; About gains the research
   questions and the Substack articles; Buy the Book gains a second quote.
   ========================================================================== */

/* --- Buy the Book: two stacked endorsements ---------------------------- */

.endorse__quotes {
	flex: 1.4 1 380px;
	display: flex;
	flex-direction: column;
	gap: 28px;
}
/* The quotes now sit inside a flex column, so they must not also flex. */
.endorse__quotes .endorse__quote { flex: none; }
/* The second quote is set smaller — the foreword outranks it. */
.endorse__quote--sm p { font-size: clamp(16px, 1.6vw, 19px); }
.endorse__quote--sm footer { margin-top: 14px; }

/* --- About: "John helps healthcare companies" --------------------------- */

.helps { margin-top: 26px; }
.helps__title { margin-bottom: 12px; font-size: 11px; letter-spacing: 2px; }

.helps__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.helps__list li {
	position: relative;
	padding-left: 24px;
	font-family: var(--serif);
	font-size: 15px;
	color: var(--text-strong);
	line-height: 1.6;
}
.helps__list li::before {
	content: '→';
	position: absolute;
	left: 0;
	color: var(--amber);
	font-family: var(--sans);
	font-weight: 800;
}

/* --- Shared section headings on the light pages ------------------------- */

.section-title {
	font-size: clamp(26px, 2.8vw, 38px);
	font-weight: 800;
	color: var(--navy);
	line-height: 1.12;
	max-width: 720px;
	margin: 0;
}
.section-lede {
	font-family: var(--serif);
	font-size: 16px;
	color: var(--text-body);
	line-height: 1.75;
	margin: 16px 0 0;
	max-width: 720px;
}

/* --- About: the three research questions -------------------------------- */

.ongoing { padding: clamp(48px, 6vw, 72px) var(--gutter) 0; }

.q-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 18px;
	margin-top: 28px;
}
.q-card {
	background: var(--paper);
	border: 1px solid var(--rule-warm);
	border-radius: 14px;
	padding: 24px;
}
.q-card__num {
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 2px;
	color: var(--amber);
}
.q-card__title {
	font-size: 17px;
	font-weight: 700;
	color: var(--navy);
	margin: 10px 0 8px;
	line-height: 1.3;
}
.q-card__text {
	font-family: var(--serif);
	font-size: 14px;
	color: var(--text-body);
	line-height: 1.65;
	margin: 0;
}

/* --- About: Substack articles -------------------------------------------- */

.articles { padding: clamp(48px, 6vw, 72px) var(--gutter) 0; }

.articles__head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 16px;
	margin-bottom: 22px;
}
.articles__head .btn { flex-shrink: 0; }

.article-grid {
	display: grid;
	/* 320px, not the design's 240px: at the 1180px measure that yields three
	   columns, so six articles land as 3+3 rather than a lopsided 4+2. */
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: 18px;
}
.article {
	background: var(--paper);
	border: 1px solid var(--rule-warm);
	border-radius: 14px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: border-color 0.18s ease, transform 0.18s ease;
}
.article:hover { border-color: var(--amber); transform: translateY(-2px); }
.article img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	background: var(--sand);
}
.article h3 {
	font-size: 15px;
	font-weight: 700;
	color: var(--navy);
	line-height: 1.35;
	margin: 0;
	padding: 16px 18px;
}
.article:hover h3 { color: var(--navy); }

/* --- Speaking: the video library ----------------------------------------- */

.library { padding: clamp(48px, 6vw, 80px) var(--gutter) 0; }

.library__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 18px;
}
.clip {
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 14px;
	overflow: hidden;
	background: var(--ink-deep);
	display: flex;
	flex-direction: column;
	transition: border-color 0.18s ease;
}
.clip:hover { border-color: rgba(232, 163, 76, 0.5); }

.clip__frame {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	padding: 0;
	border: 0;
	background: #10182a;
	cursor: pointer;
	overflow: hidden;
}
.clip__frame img,
.clip__frame iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border: 0;
}
.clip__frame::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(8, 11, 18, 0.15), rgba(8, 11, 18, 0.45));
	pointer-events: none;
}
.clip__play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 2;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--amber);
	color: var(--navy);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	transition: transform 0.18s ease;
}
.clip__frame:hover .clip__play { transform: translate(-50%, -50%) scale(1.08); }
.clip__frame.is-playing::after,
.clip__frame.is-playing .clip__play { display: none; }

.clip__body { padding: 14px 16px; }
.clip__body h3 {
	font-size: 14px;
	font-weight: 700;
	color: #fff;
	line-height: 1.4;
	margin: 0;
}
.clip__body p {
	font-family: var(--serif);
	font-size: 13px;
	color: rgba(255, 255, 255, 0.6);
	line-height: 1.5;
	margin: 4px 0 0;
}

/* --- Speaking: Vital Signs ------------------------------------------------ */

.vitals { padding: clamp(48px, 6vw, 80px) var(--gutter) 0; }

.vitals__title {
	font-size: clamp(24px, 2.6vw, 34px);
	font-weight: 800;
	color: #fff;
	line-height: 1.15;
	max-width: 700px;
	margin: 0;
}
.vitals__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 18px;
	margin-top: 28px;
}
.vital {
	border-left: 3px solid var(--amber);
	padding: 4px 0 4px 20px;
	margin: 0;
}
.vital p {
	font-family: var(--serif);
	font-style: italic;
	font-size: 16px;
	color: rgba(255, 255, 255, 0.9);
	line-height: 1.65;
	margin: 0;
}
.vital footer { margin-top: 12px; }
.vital footer b {
	display: block;
	font-family: var(--sans);
	font-size: 13px;
	font-weight: 700;
	color: #fff;
}
.vital footer span {
	display: block;
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: 1px;
	color: rgba(255, 255, 255, 0.5);
	margin-top: 2px;
}

/* --- Speaking: the "find John elsewhere" row ----------------------------- */

.elsewhere {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 18px;
	margin: 20px 0 0;
	padding: 0;
	list-style: none;
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 1px;
}
.elsewhere a { color: var(--amber-dark); position: relative; }
.elsewhere a:hover { color: var(--amber); }
/* Same 24px minimum target size as the nav and footer links. */
.elsewhere a::before { content: ''; position: absolute; inset: -8px -4px; }

/* ==========================================================================
   ADDED IN UPDATE 3 — the Patient App page (Mitali Heart).
   ========================================================================== */

.page-app { background: var(--ink); }

/* The red EKG belongs to Mitali, not to the book — same trace, vitals colour. */
.ekg--vital polyline { stroke: var(--vital); }

/* --- hero ---------------------------------------------------------------- */

.app-hero {
	padding: 80px var(--gutter) 100px;
	background:
		radial-gradient(ellipse 80% 60% at 75% 10%, rgba(232, 163, 76, 0.10), transparent 60%),
		radial-gradient(ellipse 70% 60% at 10% 100%, rgba(255, 59, 71, 0.06), transparent 60%),
		var(--ink);
}
.app-hero__inner {
	max-width: 1300px;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	gap: clamp(40px, 6vw, 90px);
	align-items: center;
	justify-content: center;
}
.app-hero__body { flex: 1.3 1 480px; max-width: 680px; }
.app-hero__demo { flex: 0 1 360px; min-width: 300px; }

.app-hero__title {
	font-size: clamp(38px, 4.6vw, 66px);
	font-weight: 800;
	color: #fff;
	line-height: 1.04;
	letter-spacing: -1px;
	margin: 18px 0 0;
}
/* The second sentence is the promise — it carries the accent. */
.app-hero__title span { color: var(--amber); }

.app-hero__lede {
	font-family: var(--serif);
	font-size: clamp(17px, 1.5vw, 21px);
	color: rgba(255, 255, 255, 0.85);
	line-height: 1.7;
	max-width: 560px;
	margin: 14px 0 0;
}
.app-hero .btn-row { margin-top: 32px; }

.app-hero__meta {
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 1.5px;
	color: rgba(255, 255, 255, 0.5);
	margin: 28px 0 0;
}

/* --- the phone mock ------------------------------------------------------ */

.phone {
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 44px;
	background: var(--ink-deep);
	padding: 18px 16px 22px;
	box-shadow: 0 40px 90px rgba(0, 0, 0, 0.55);
	transform: rotate(1.2deg);
}
.phone__head {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 8px 14px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.phone__avatar {
	width: 34px;
	height: 34px;
	flex-shrink: 0;
	border-radius: 50%;
	background: var(--amber);
	color: var(--navy);
	font-weight: 800;
	font-size: 15px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.phone__name  { color: #fff; font-weight: 700; font-size: 14px; }
.phone__phase { font-family: var(--mono); font-size: 10px; letter-spacing: 1px; color: var(--amber-light); }
.phone__live {
	margin-left: auto;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--vital-dot);
	animation: beatGlow 1.2s ease-out infinite;
}

.phone__thread {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 16px 4px 4px;
}
.bubble {
	font-size: 13px;
	line-height: 1.55;
	padding: 10px 14px;
	margin: 0;
	color: rgba(255, 255, 255, 0.92);
}
.bubble--them {
	align-self: flex-end;
	max-width: 85%;
	background: #1c2a47;
	border-radius: 16px 16px 4px 16px;
}
.bubble--app {
	align-self: flex-start;
	max-width: 88%;
	background: rgba(232, 163, 76, 0.14);
	border: 1px solid rgba(232, 163, 76, 0.3);
	border-radius: 16px 16px 16px 4px;
}
.phone__input {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 8px;
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 22px;
	padding: 10px 14px;
	font-size: 12px;
	color: rgba(255, 255, 255, 0.4);
}
.phone__input span:first-child { flex: 1; }
.phone__mic { color: var(--amber); font-size: 14px; }

.phone__caption {
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: 1px;
	color: rgba(255, 255, 255, 0.45);
	text-align: center;
	margin: 14px 0 0;
}

/* --- why it exists -------------------------------------------------------- */

.app-why { padding: 90px var(--gutter); background: var(--sand); }
.app-why__inner {
	max-width: 1100px;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	gap: clamp(32px, 5vw, 70px);
	align-items: center;
}
.app-why__body { flex: 1 1 420px; }

.app-why__title {
	font-size: clamp(30px, 3.2vw, 46px);
	font-weight: 800;
	color: var(--navy);
	line-height: 1.06;
	margin: 14px 0 18px;
}
.app-why__text {
	font-family: var(--serif);
	font-size: 16px;
	color: var(--text-body);
	line-height: 1.75;
	margin: 0;
}

/* The six phases are a real sequence, so they are an ordered list — the
   arrows between them are drawn, not typed, so screen readers hear six
   items rather than one run-on string. */
.phases {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 0;
	margin: 20px 0 0;
	padding: 0;
	list-style: none;
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--text-mono);
	line-height: 1.8;
}
.phases li + li::before {
	content: '→';
	color: var(--amber);
	margin: 0 8px;
}

.app-quote {
	flex: 1 1 380px;
	max-width: 480px;
	margin: 0;
	background: var(--paper);
	border-radius: 16px;
	padding: 34px 36px;
	box-shadow: 0 30px 70px rgba(60, 45, 20, 0.25);
}
.app-quote__mark {
	font-family: var(--serif);
	font-size: 40px;
	line-height: 1;
	color: var(--amber);
}
.app-quote blockquote { margin: 0; }
.app-quote blockquote p {
	font-family: var(--serif);
	font-style: italic;
	font-size: clamp(19px, 1.8vw, 24px);
	color: var(--navy);
	line-height: 1.5;
	margin: 6px 0 18px;
}
.app-quote figcaption {
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 1.5px;
	color: var(--text-mono);
}

/* --- what it does --------------------------------------------------------- */

.app-features { padding: 90px var(--gutter); background: var(--ink); }

.app-features__title {
	font-size: clamp(30px, 3.2vw, 46px);
	font-weight: 800;
	color: #fff;
	line-height: 1.06;
	margin: 14px 0 40px;
	max-width: 700px;
}
/* Explicit columns rather than auto-fit: four cards on an auto-fit grid land
   as 3 + 1 at most desktop widths, which reads as a mistake. Two, then four —
   never three. */
.app-features__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px;
}
@media (min-width: 1120px) {
	.app-features__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
	.app-features__grid { grid-template-columns: minmax(0, 1fr); }
}
.app-card {
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 14px;
	padding: 26px 28px;
	background: #10192c;
}
/* The safety card is the one nobody should skim past. */
.app-card--flag {
	border-color: rgba(232, 163, 76, 0.45);
	background: rgba(232, 163, 76, 0.08);
}
.app-card__num { font-family: var(--mono); font-size: 12px; color: var(--amber-light); }
.app-card__title {
	font-size: 20px;
	font-weight: 800;
	color: #fff;
	margin: 12px 0 8px;
	line-height: 1.25;
}
.app-card__text {
	font-family: var(--serif);
	font-size: 15px;
	color: rgba(255, 255, 255, 0.68);
	line-height: 1.7;
	margin: 0;
}

/* --- closing call --------------------------------------------------------- */

.app-cta {
	padding: 90px var(--gutter);
	background: linear-gradient(180deg, var(--sand) 0%, var(--sand-deep) 100%);
	text-align: center;
}
.app-cta__inner { max-width: 640px; margin: 0 auto; }
.app-cta .ekg { margin: 0 auto 22px; }
.app-cta__title {
	font-size: clamp(32px, 3.6vw, 50px);
	font-weight: 800;
	color: var(--navy);
	line-height: 1.05;
	margin: 0;
}
.app-cta__text {
	font-family: var(--serif);
	font-size: 17px;
	color: var(--text-body);
	line-height: 1.7;
	margin: 18px auto 0;
	max-width: 500px;
}
.app-cta .btn-row { justify-content: center; margin-top: 32px; }

/* --- footer with a safety notice ------------------------------------------ */

.site-footer--stacked {
	display: block;
	padding: 26px var(--gutter);
}
.site-footer__notice {
	font-family: var(--serif);
	font-size: 13px;
	color: rgba(255, 255, 255, 0.5);
	line-height: 1.6;
	margin: 0 0 18px;
	max-width: 720px;
}
.site-footer__row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
}

/* ==========================================================================
   ADDED FOR THE BOOK LAUNCH — the invitation and its RSVP.

   Engraved register: centred, generous whitespace, hairline rules, small caps
   for the particulars. Built entirely from the existing tokens — an
   invitation should look like it came from the same house as the book.
   ========================================================================== */

.page-launch { background: var(--sand); }

/* --- the card ------------------------------------------------------------ */

.invite {
	padding: clamp(28px, 3.6vw, 52px) var(--gutter) clamp(24px, 4vw, 44px);
}

/* The card and the evening sit side by side so the whole invitation is
   visible without scrolling. The card takes the larger share — it is the
   thing people came to read. */
.invite__spread {
	max-width: 1280px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1.6fr 1fr;
	gap: clamp(28px, 3.2vw, 52px);
	align-items: start;
}
@media (max-width: 900px) {
	.invite__spread { grid-template-columns: minmax(0, 1fr); }
}

.invite__aside {
	min-width: 0;
	max-width: 56ch;
	/* Matches the card's own top padding, so both columns start on the same
	   line instead of one being inset by its border. */
	padding-top: clamp(0px, 3vw, 46px);
}
@media (max-width: 900px) {
	.invite__aside { padding-top: 0; }
}
.invite__aside-cta {
	margin: 24px 0 0;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
/* Three buttons share this column, so they are set a little tighter than a
   button standing on its own. The default 26px sides cost 36px of a row that
   only just fits; 20px buys that back without making them look cramped, and
   because it applies to all three they stay a matched set. */
.invite__aside-cta .btn {
	padding-left: 20px;
	padding-right: 20px;
}
.invite__aside .letter__lede { margin-top: 0; }

.invite__card {
	min-width: 0;
	background: var(--paper);
	border: 1px solid var(--rule-warm);
	border-radius: 4px;              /* invitations are cards, not pills */
	padding: clamp(26px, 2.9vw, 42px) clamp(24px, 4vw, 56px);
	box-shadow: 0 30px 70px rgba(60, 45, 20, 0.14);
	text-align: center;
}

.invite__rule {
	border: 0;
	border-top: 1px solid var(--amber);
	width: 64px;
	margin: clamp(13px, 1.6vw, 19px) auto;
	opacity: 0.7;
}

.invite__occasion {
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: var(--amber-dark);
	margin: 0;
}

.invite__line {
	font-family: var(--serif);
	font-size: clamp(15px, 1.5vw, 17px);
	font-style: italic;
	color: var(--text-body);
	margin: 0 0 14px;
}

.invite__title {
	font-family: var(--sans);
	font-size: clamp(34px, 5.4vw, 56px);
	font-weight: 800;
	letter-spacing: -1px;
	line-height: 1.02;
	color: var(--navy);
	margin: 0;
	text-wrap: balance;
}

.invite__byline {
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--text-mono);
	margin: 14px 0 0;
}

.invite__cover {
	margin: 0;
	width: 100%;
}
.invite__cover img {
	width: 100%;
	border-radius: 3px;
	box-shadow: 0 18px 40px rgba(60, 45, 20, 0.32);
}

/* The particulars, spelled out the way an engraved card spells them. */
/* The cover on the left, the particulars on the right. The card above stays
   centred; this block is the one place that reads left-aligned, because a
   date and an address are read, not admired. */
.invite__details {
	display: grid;
	grid-template-columns: minmax(0, 0.78fr) minmax(0, 1fr);
	gap: clamp(20px, 2.6vw, 32px);
	align-items: center;
	text-align: left;
	margin: 0;
}
@media (max-width: 620px) {
	.invite__details {
		grid-template-columns: minmax(0, 1fr);
		justify-items: center;
		text-align: center;
		gap: 22px;
	}
	.invite__details .invite__cover { max-width: 210px; }
}

.invite__particulars { display: flex; flex-direction: column; gap: 9px; min-width: 0; }

.invite__when {
	font-family: var(--sans);
	font-size: clamp(21px, 1.85vw, 26px);
	font-weight: 800;
	letter-spacing: -0.4px;
	line-height: 1.25;
	color: var(--navy);
	margin: 0;
	text-wrap: balance;
}
.invite__time {
	font-family: var(--mono);
	font-size: clamp(20px, 1.8vw, 24px);
	font-weight: 700;
	letter-spacing: 1.5px;
	color: var(--amber-dark);
	margin: 0;
}
/* The address is the one line a guest will screenshot and follow, so it is
   set to be read rather than admired — the flourish moves to the city line
   underneath it. */
.invite__venue {
	font-family: var(--sans);
	font-size: clamp(16px, 1.5vw, 18px);
	font-weight: 700;
	line-height: 1.45;
	color: var(--navy);
	margin: 0;
}
/* The street address is what a guest follows, so it stays readable — but the
   venue name above it now carries the weight. */
.invite__where {
	font-family: var(--sans);
	font-size: clamp(15px, 1.4vw, 17px);
	font-weight: 500;
	letter-spacing: 0.2px;
	line-height: 1.5;
	color: var(--text-strong);
	margin: -6px 0 0;
}
.invite__city {
	font-family: var(--mono);
	font-size: 12px;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	color: var(--text-mono);
	margin: 6px 0 0;
}

/* A chevron instead of a line of type: it says "there is more below" without
   having to say it. The bob is small on purpose — this sits at the foot of a
   formal card, not on a landing page. prefers-reduced-motion stops it, and
   the link still works as a plain jump to the form. */
.scroll-cue {
	display: block;
	width: 44px;
	height: 44px;
	margin: clamp(12px, 1.6vw, 20px) auto 0;
	color: var(--amber-dark);
	border-radius: 50%;
	transition: color 0.18s ease, background-color 0.18s ease;
}
.scroll-cue svg {
	width: 100%;
	height: 100%;
	display: block;
	animation: nudge 2.1s ease-in-out infinite;
}
.scroll-cue:hover { color: var(--amber); background: rgba(232, 163, 76, 0.12); }

@keyframes nudge {
	0%, 55%, 100% { transform: translateY(0); }
	22%           { transform: translateY(5px); }
	38%           { transform: translateY(2px); }
}

/* --- the letter ----------------------------------------------------------- */

.letter { padding: clamp(30px, 5vw, 56px) var(--gutter); }

/* John's note on the left, the room on the right — both visible together. */
.letter__spread {
	max-width: 1280px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
	gap: clamp(30px, 5vw, 72px);
	align-items: start;
}
.letter__col { min-width: 0; }
.letter__col .program__title { margin-bottom: 14px; }

.letter__lede {
	font-family: var(--serif);
	font-size: clamp(19px, 2vw, 23px);
	color: var(--text-strong);
	line-height: 1.6;
	margin: 0;
}
.letter__text {
	font-family: var(--serif);
	font-size: 17.5px;
	color: var(--text-body);
	line-height: 1.75;
	margin: 18px 0 0;
}
/* The sign-off: name in the display face, the credentials quieter beneath it,
   and the number a real tel: link so a phone can dial it. */
.signoff { margin: 26px 0 0; }

.signoff__name {
	font-family: var(--sans);
	font-size: 19px;
	font-weight: 800;
	letter-spacing: -0.2px;
	color: var(--navy);
	margin: 0;
}
.signoff__role {
	font-family: var(--serif);
	font-size: 15px;
	line-height: 1.55;
	color: var(--text-body);
	margin: 3px 0 0;
}
.signoff__tel {
	font-family: var(--mono);
	font-size: 14px;
	letter-spacing: 0.5px;
	margin: 9px 0 0;
}
.signoff__tel a { color: var(--amber-dark); position: relative; }
.signoff__tel a:hover { color: var(--amber); }
/* The same 24px minimum tap target the nav and footer links use. */
.signoff__tel a::before { content: ''; position: absolute; inset: -8px -4px; }

/* --- the evening ----------------------------------------------------------- */

.program__title {
	font-size: clamp(24px, 2.6vw, 32px);
	font-weight: 800;
	color: var(--navy);
	line-height: 1.15;
	margin: 0 0 20px;
}
/* A real ordered list: the evening genuinely runs in this order. */
.program__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
}
.program__list li {
	display: flex;
	gap: 22px;
	align-items: baseline;
	padding: 16px 0;
	border-top: 1px solid var(--rule-warm);
}
.program__list li:last-child { border-bottom: 1px solid var(--rule-warm); }

/* The one-line note that sits under the running order. */
.program__note {
	font-family: var(--serif);
	font-style: italic;
	font-size: 17px;
	color: var(--text-mono);
	margin: 18px 0 0;
}

.program__time {
	font-family: var(--mono);
	/* A monospace face reads smaller than a serif at the same size, so the
	   times need a little more than the items to sit level with them. */
	font-size: clamp(15px, 1.3vw, 16.5px);
	font-weight: 700;
	color: var(--amber-dark);
	flex-shrink: 0;
	min-width: 56px;
	font-variant-numeric: tabular-nums;
}
.program__what {
	font-family: var(--serif);
	/* The running order was set smaller than the prose beside it, which had
	   the emphasis backwards: this is the part a guest actually needs. Now a
	   step above the body text rather than below it. */
	font-size: clamp(18px, 1.5vw, 20px);
	color: var(--text-strong);
	line-height: 1.5;
}

/* --- the RSVP -------------------------------------------------------------- */

.rsvp { padding: clamp(40px, 6vw, 72px) var(--gutter) clamp(56px, 7vw, 90px); }
.rsvp__inner {
	/* Close to the 1280 the spreads above use, so the page doesn't visibly
	   narrow at the bottom. The two-column grid keeps the form itself from
	   growing to an uncomfortable line length. */
	max-width: 1160px;
	margin: 0 auto;
	background: var(--paper);
	border: 1px solid var(--rule-warm);
	border-radius: 16px;
	padding: clamp(28px, 4vw, 52px);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: clamp(28px, 4vw, 56px);
	align-items: start;
}

.rsvp__title {
	font-size: clamp(26px, 2.8vw, 36px);
	font-weight: 800;
	color: var(--navy);
	line-height: 1.1;
	margin: 0 0 14px;
}
.rsvp__text {
	font-family: var(--serif);
	font-size: 17.5px;
	color: var(--text-body);
	line-height: 1.75;
	margin: 0;
}
.rsvp__note {
	font-family: var(--serif);
	font-size: 15px;
	color: var(--text-mono);
	line-height: 1.7;
	margin: 16px 0 0;
}

.rsvp__form { display: flex; flex-direction: column; gap: 18px; }

.field { display: flex; flex-direction: column; gap: 6px; }
.field label {
	font-size: 13px;
	font-weight: 700;
	color: var(--navy);
	letter-spacing: 0.2px;
}
.field__opt {
	font-weight: 400;
	color: var(--text-mono);
	font-size: 12px;
}
.field__hint {
	font-family: var(--serif);
	font-size: 13px;
	color: var(--text-mono);
	line-height: 1.5;
	margin: 0;
}

.rsvp__form input[type="text"],
.rsvp__form input[type="email"],
.rsvp__form textarea {
	width: 100%;
	background: var(--sand);
	border: 1px solid var(--rule-warm);
	border-radius: 10px;
	padding: 12px 15px;
	font-family: var(--sans);
	font-size: 15px;
	color: var(--navy);
	transition: border-color 0.15s ease, background-color 0.15s ease;
}
.rsvp__form input:hover,
.rsvp__form textarea:hover { border-color: #d3c5a5; }
.rsvp__form input:focus,
.rsvp__form textarea:focus { background: #fff; }
.rsvp__form textarea { resize: vertical; min-height: 84px; }
.rsvp__form ::placeholder { color: #a99e86; }

/* The three answers, as tappable rows rather than bare radio buttons. */
.choice { border: 0; margin: 0; padding: 0; }
.choice legend {
	font-size: 13px;
	font-weight: 700;
	color: var(--navy);
	padding: 0;
	margin-bottom: 8px;
}
.choice__opt {
	display: flex;
	align-items: center;
	gap: 11px;
	border: 1px solid var(--rule-warm);
	border-radius: 10px;
	padding: 12px 15px;
	margin-bottom: 8px;
	cursor: pointer;
	font-size: 15px;
	color: var(--navy);
	background: var(--sand);
	transition: border-color 0.15s ease, background-color 0.15s ease;
}
.choice__opt:hover { border-color: #d3c5a5; }
.choice__opt input { accent-color: var(--amber-dark); width: 17px; height: 17px; flex-shrink: 0; }
.choice__opt:has(input:checked) {
	border-color: var(--amber);
	background: rgba(232, 163, 76, 0.1);
}
/* Without :has(), the row simply stays plain — the radio still shows the
   answer, so nothing is lost on an older browser. */
.choice__opt:focus-within { outline: 2px solid var(--amber); outline-offset: 2px; }

.rsvp__submit {
	background: var(--navy);
	color: #fff;
	font-family: var(--sans);
	font-weight: 700;
	font-size: 15px;
	padding: 15px;
	border-radius: var(--pill);
	text-align: center;
	cursor: pointer;
	width: 100%;
	transition: background-color 0.18s ease, color 0.18s ease;
}
.rsvp__submit[disabled] { opacity: 0.6; cursor: progress; }

.rsvp__privacy {
	font-family: var(--serif);
	font-size: 13px;
	color: var(--text-mono);
	line-height: 1.6;
	margin: 0;
}

/* --- the no-JavaScript thank-you ------------------------------------------- */

.page-thanks { background: var(--ink); }
.thanks {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 40px var(--gutter);
	gap: 4px;
}
.thanks h1 {
	font-size: clamp(32px, 4vw, 48px);
	font-weight: 800;
	color: #fff;
	letter-spacing: -0.5px;
	margin: 8px 0 0;
}
.thanks p {
	font-family: var(--serif);
	font-size: 17px;
	color: rgba(255, 255, 255, 0.8);
	line-height: 1.7;
	margin: 14px 0 0;
	max-width: 46ch;
}
.thanks__where {
	font-family: var(--mono) !important;
	font-size: 11px !important;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	line-height: 2.1 !important;
	color: rgba(255, 255, 255, 0.55) !important;
	margin-top: 26px !important;
}
.thanks .btn-row { justify-content: center; margin-top: 34px; }

/* --- RSVP: the dropdown, and the photograph beside the form --------------- */

.rsvp__form select {
	width: 100%;
	background: var(--sand);
	border: 1px solid var(--rule-warm);
	border-radius: 10px;
	padding: 12px 15px;
	font-family: var(--sans);
	font-size: 15px;
	color: var(--navy);
	cursor: pointer;
	/* The native arrow is inconsistent across platforms; this one matches the
	   amber the rest of the form uses. */
	appearance: none;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23b0743a' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 15px center;
	padding-right: 40px;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}
.rsvp__form select:hover { border-color: #d3c5a5; }

.rsvp__photo {
	margin: 28px 0 0;
	background: var(--paper);
	padding: 12px 12px 10px;
	border-radius: 10px;
	border: 1px solid var(--rule-warm);
	box-shadow: 0 20px 44px rgba(60, 45, 20, 0.16);
}
.rsvp__photo img {
	width: 100%;
	border-radius: 5px;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}
.rsvp__photo figcaption {
	font-family: var(--serif);
	font-style: italic;
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--text-mono);
	margin-top: 10px;
}

/* --- the launch page's stripped nav and footer ---------------------------
   The invitation is sent as a private link, so it deliberately offers no way
   into the rest of the site. Both strips keep their colour and their line of
   type and lose everything else. */

.site-nav--bare { justify-content: flex-start; }
.site-nav--bare .site-nav__brand { cursor: default; }
/* The wordmark is a <span> here, not a link, so the hover and the expanded
   hit area both need switching off. */
.site-nav--bare .site-nav__brand:hover { color: #fff; }
.site-nav--bare .site-nav__brand::before { content: none; }

.site-footer--bare { justify-content: flex-start; }


/* ---------------------------------------------------------------------------
 * The venue credit on the invitation
 *
 * A quiet band between the agenda and the RSVP. Hairline rules top and bottom
 * mark it as an aside rather than a section of the invitation proper, and the
 * logo is capped small: the Association is being thanked, not co-branded.
 * ------------------------------------------------------------------------- */

.venue-credit {
	padding: clamp(26px, 4vw, 44px) var(--gutter);
}
.venue-credit__inner {
	max-width: 640px;
	margin: 0 auto;
	text-align: center;
	border-top: 1px solid var(--rule-warm);
	border-bottom: 1px solid var(--rule-warm);
	padding: clamp(24px, 3.5vw, 34px) 0;
}
.venue-credit__eyebrow {
	font-family: var(--mono);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--amber-dark);
	margin: 0 0 20px;
}
.venue-credit__logo {
	display: block;
	width: auto;
	height: auto;
	max-width: 240px;
	max-height: 92px;
	margin: 0 auto 18px;

	/* The supplied mark is a JPEG, so it carries a solid white box that would
	   sit as a visible plate on this cream page. Multiply drops the white into
	   the background and leaves the black artwork untouched. If a browser does
	   not support it the logo simply keeps its white ground — no worse than
	   the file itself. A transparent PNG would make this line unnecessary. */
	mix-blend-mode: multiply;
}
.venue-credit__text {
	font-family: var(--serif);
	font-size: 16.5px;
	line-height: 1.6;
	color: var(--text-mono);
	margin: 0 auto;
	max-width: 54ch;

	/* Evens the line lengths so the sentence does not end with one orphaned
	   word. Ignored by browsers that do not support it, which just fall back
	   to ordinary wrapping. */
	text-wrap: balance;
}

@media (max-width: 560px) {
	.venue-credit__logo { max-width: 190px; }
	.venue-credit__text { font-size: 15.5px; }
}


/* ---------------------------------------------------------------------------
 * Buttons on the invitation
 *
 * The shared navy buttons hover to --ink, which on a navy button is almost no
 * change at all. On this page they fill with the amber already carrying the
 * eyebrow and the agenda times, so the rollover is unmistakable and still
 * belongs to the palette. Amber behind navy text is a wide contrast margin.
 *
 * :focus-visible matches :hover throughout, so a keyboard user gets the same
 * signal a mouse user does.
 * ------------------------------------------------------------------------- */

.page-launch .btn--navy:hover,
.page-launch .btn--navy:focus-visible,
.page-launch .rsvp__submit:hover,
.page-launch .rsvp__submit:focus-visible {
	background: var(--amber);
	color: var(--navy);
}

.page-launch .btn--outline {
	background: transparent;
	border-color: var(--navy);
	color: var(--navy);
}
.page-launch .btn--outline:hover,
.page-launch .btn--outline:focus-visible {
	background: var(--amber);
	border-color: var(--amber);
	color: var(--navy);
}

/* Stacked on a narrow phone rather than squeezed onto one row. */
@media (max-width: 420px) {
	.invite__aside-cta .btn { flex: 1 1 100%; }
}


/* ---------------------------------------------------------------------------
 * Save-the-date buttons, shown under the RSVP confirmation
 *
 * Amber-bordered rather than solid, so they read as a follow-on offer and do
 * not compete with the confirmation panel itself.
 * ------------------------------------------------------------------------- */

.cal { margin: 16px 0 0; }

.cal__lead {
	font-family: var(--sans);
	font-size: 13.5px;
	font-weight: 700;
	color: var(--navy);
	margin: 0 0 10px;
}

.cal__row {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.cal__btn {
	display: inline-flex;
	align-items: center;
	font-family: var(--sans);
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
	color: var(--navy);
	background: transparent;
	border: 1px solid var(--amber-dark);
	border-radius: var(--pill);
	padding: 9px 16px;
	transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.cal__btn:hover,
.cal__btn:focus-visible {
	background: var(--amber);
	border-color: var(--amber);
	color: var(--navy);
}

@media (max-width: 420px) {
	.cal__btn { flex: 1 1 100%; justify-content: center; }
}


/* ---------------------------------------------------------------------------
 * A note inside the RSVP form
 *
 * Amber left rule rather than a full panel: it has to be noticed while
 * somebody is working down the fields, without looking like an error or
 * competing with the confirmation that appears further down.
 * ------------------------------------------------------------------------- */

.rsvp__form .form-note {
	margin: 4px 0 4px;
	padding: 12px 0 12px 14px;
	border-left: 3px solid var(--amber);
	font-family: var(--serif);
	font-size: 15px;
	line-height: 1.6;
	color: var(--text-body);
}


/* ---------------------------------------------------------------------------
 * The sticky RSVP button
 *
 * Phones only. On a wide screen the form sits beside the invitation and needs
 * no shortcut; on a phone it is four screens down past the agenda.
 *
 * Hidden entirely above 860px rather than merely unstyled, so it can never
 * appear on a desktop even if the script runs.
 * ------------------------------------------------------------------------- */

.rsvp-dock { display: none; }

@media (max-width: 860px) {

	.rsvp-dock {
		display: block;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 40;
		padding: 12px var(--gutter);
		/* Clears the home indicator on a modern iPhone. */
		padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
		background: rgba(245, 238, 225, 0.94);
		backdrop-filter: blur(8px);
		border-top: 1px solid var(--rule-warm);
		transition: transform 0.25s ease, opacity 0.25s ease;
	}

	.rsvp-dock .btn {
		width: 100%;
		font-size: 16px;
		padding: 15px 20px;
	}

	/* Slides away once the form is on screen. */
	.rsvp-dock.is-hidden {
		transform: translateY(120%);
		opacity: 0;
		pointer-events: none;
	}

	/* So the last of the page is not sitting under the bar. */
	.page-launch .site-footer--bare { padding-bottom: 88px; }
}

@media (max-width: 860px) and (prefers-reduced-motion: reduce) {
	.rsvp-dock { transition: none; }
}


/* ---------------------------------------------------------------------------
 * "By invitation only" on the card
 *
 * Same treatment as the eyebrow above the title, so the two amber lines
 * bracket the particulars rather than one shouting louder than the other.
 * A hairline separates it from the address without adding another full rule.
 * ------------------------------------------------------------------------- */

.invite__only {
	font-family: var(--mono);
	/* Deliberately heavier than the eyebrow it echoes at the top of the card.
	   A condition of entry has to be read, not merely balanced against the
	   occasion line. Space Mono ships a real 700, so this is a true bold and
	   not a slant the browser has faked. */
	font-size: clamp(13px, 1.15vw, 14.5px);
	font-weight: 700;
	/* Wide tracking plus bold at a larger size starts to look stretched, so
	   the letterspacing comes back a little as the weight goes up. */
	letter-spacing: 2.2px;
	text-transform: uppercase;
	color: var(--amber-dark);
	margin: 18px 0 0;
	padding-top: 16px;
	border-top: 1px solid var(--rule-warm);
}


/* ---------------------------------------------------------------------------
 * Credits in the agenda
 *
 * Two different scopes, so two different weights. The emcee runs the whole
 * evening and is credited once above the list; a moderator belongs to one
 * item and sits beneath it, quieter than the item it describes so the running
 * order still reads as a running order.
 * ------------------------------------------------------------------------- */

.program__host {
	font-family: var(--serif);
	font-style: italic;
	font-size: clamp(15.5px, 1.35vw, 17px);
	color: var(--text-mono);
	margin: -8px 0 20px;
}

.program__by {
	display: block;
	margin-top: 4px;
	font-family: var(--serif);
	font-size: clamp(15px, 1.25vw, 16.5px);
	font-style: italic;
	line-height: 1.45;
	color: var(--text-mono);
}


/* ---------------------------------------------------------------------------
 * The homepage, while the book is not yet on sale
 *
 * The retailer buttons and the four shop names are still styled above and
 * still work — they are simply not on the page yet, because there is nothing
 * honest to point them at. These two rules cover what stands in for them.
 * ------------------------------------------------------------------------- */

/* The line under the buttons: what the book is, and when it arrives. */
.buy-hero__note {
	font-family: var(--serif);
	font-size: 15.5px;
	line-height: 1.65;
	/* Matches the lede above it, one step dimmer. The hero is dark, so this
	   is a white alpha rather than a palette token, as everything else there is. */
	color: rgba(255, 255, 255, 0.62);
	margin: 20px 0 0;
	max-width: 44ch;
}

/* The endorsements used to share a row with a QR panel. With the panel gone
   they would stretch to the full measure and read as one long line, so the
   quotes keep a comfortable column instead of filling the space they inherited. */
.endorse__inner--wide {
	display: block;
}
.endorse__inner--wide .endorse__quotes {
	max-width: 62ch;
	margin: 0 auto;
}
.endorse__inner--wide .endorse__quote + .endorse__quote {
	margin-top: 30px;
}


/* ---------------------------------------------------------------------------
 * The hub homepage
 *
 * The feature cards became doorways rather than statements, so their titles
 * are links now. They should read as headings, not as blue-underlined text.
 * ------------------------------------------------------------------------- */

.feature__title a {
	color: inherit;
	text-decoration: none;
}
.feature__title a:hover,
.feature__title a:focus-visible { color: var(--amber); }

/* The whole card is the target, not just the words. The heading link is
   stretched over its card so a thumb anywhere on it works. */
.feature { position: relative; }
.feature__title a::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
}
.feature:hover .feature__title a { color: var(--amber); }

/* The note under the hero buttons carries a link on the homepage. */
.buy-hero__note a {
	color: var(--amber);
	text-decoration: none;
	font-weight: 700;
}
.buy-hero__note a:hover,
.buy-hero__note a:focus-visible { text-decoration: underline; }

/* ═══════════════════════════════════════════════════════════════════════════
 * THE PARTNERSHIP PAGE
 *
 * A sibling of the invitation, not a new design: same palette, same type, same
 * rhythm. Everything here either styles something the launch page has no
 * equivalent of (the budget table) or adjusts spacing for a document that is
 * read once, on a phone, and then printed.
 * ═══════════════════════════════════════════════════════════════════════════ */

.site-nav__tag {
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 2.4px;
	text-transform: uppercase;
	color: var(--amber);
	margin-left: auto;
}

/* --- Block 2: the offer -------------------------------------------------- */

.partner-hero {
	padding: clamp(34px, 6vw, 68px) var(--gutter) clamp(28px, 4vw, 44px);
	text-align: center;
}
.partner-hero__inner { max-width: 720px; margin: 0 auto; }

.partner-hero__title {
	font-size: clamp(30px, 6.4vw, 46px);
	font-weight: 800;
	letter-spacing: -.02em;
	line-height: 1.08;
	color: var(--navy);
	margin: 0 0 22px;
}

.partner-hero__when {
	font-family: var(--sans);
	font-size: clamp(16px, 1.6vw, 18px);
	font-weight: 700;
	color: var(--amber-dark);
	margin: 0 0 8px;
}
.partner-hero__where {
	font-family: var(--sans);
	font-size: clamp(15px, 1.4vw, 16.5px);
	line-height: 1.5;
	color: var(--text-strong);
	margin: 0 0 26px;
}

/* The number is the reason the page exists, so it is set like a headline
   rather than buried in a sentence. */
.partner-hero__ask {
	font-family: var(--serif);
	font-size: clamp(20px, 2.6vw, 26px);
	line-height: 1.45;
	color: var(--navy);
	margin: 0;
	padding-top: 22px;
	border-top: 1px solid var(--rule-warm);
}
.partner-hero__ask strong { font-weight: 700; color: var(--amber-dark); }
.partner-hero__balance {
	font-size: clamp(15.5px, 1.5vw, 17px);
	color: var(--text-mono);
}

/* --- Blocks 3–8: the body ------------------------------------------------ */

.partner-block { padding: clamp(30px, 4.5vw, 52px) var(--gutter); }
.partner-block--tint { background: var(--sand, #f6f1e6); }
.partner-block--last { padding-bottom: clamp(40px, 6vw, 72px); }

.partner-block__inner { max-width: 720px; margin: 0 auto; }

/* Block 3 puts the cover beside the copy; everything else is a single column. */
.partner-block__inner--split {
	max-width: 900px;
	display: grid;
	grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
	gap: clamp(24px, 4vw, 48px);
	align-items: center;
}
.partner-block__cover { margin: 0; }
.partner-block__cover img {
	width: 100%;
	height: auto;
	border-radius: 3px;
	box-shadow: 0 18px 40px rgba(60, 45, 20, 0.28);
}

.partner-block__title {
	font-size: clamp(21px, 2.4vw, 27px);
	font-weight: 800;
	letter-spacing: -.01em;
	color: var(--navy);
	margin: 0 0 16px;
}

.partner-block__text {
	font-family: var(--serif);
	font-size: clamp(16.5px, 1.5vw, 18px);
	line-height: 1.7;
	color: var(--text-body);
	margin: 0 0 16px;
}
.partner-block__text:last-child { margin-bottom: 0; }
.partner-block__text--lead { margin-top: 20px; font-size: clamp(17px, 1.6vw, 19px); }
.partner-block__text strong { color: var(--navy); }

.partner-list {
	list-style: none;
	margin: 0 0 20px;
	padding: 0;
}
.partner-list li {
	position: relative;
	font-family: var(--serif);
	font-size: clamp(16.5px, 1.5vw, 18px);
	line-height: 1.6;
	color: var(--text-body);
	padding: 12px 0 12px 26px;
	border-top: 1px solid var(--rule-warm);
}
.partner-list li:last-child { border-bottom: 1px solid var(--rule-warm); }
.partner-list li::before {
	content: '';
	position: absolute;
	left: 4px;
	top: 21px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--amber);
}

/* --- Block 6: the budget ------------------------------------------------- */

.budget {
	width: 100%;
	border-collapse: collapse;
	font-family: var(--sans);
	font-size: clamp(15px, 1.4vw, 16.5px);
}
.budget th,
.budget td {
	padding: 11px 0;
	border-bottom: 1px solid var(--rule-warm);
	text-align: left;
	color: var(--text-body);
}
.budget thead th {
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	color: var(--text-mono);
	border-bottom-width: 2px;
	padding-bottom: 8px;
}
/* Figures line up on the decimal, so the column can be read as a column. */
.budget__num {
	text-align: right;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	padding-left: 18px;
}
.budget__donated td { color: var(--text-mono); font-weight: 400; }
.budget__donated td em { font-style: italic; }

.budget__total th,
.budget__total td {
	font-weight: 800;
	font-size: clamp(16px, 1.5vw, 18px);
	color: var(--navy);
	border-bottom: 0;
	border-top: 2px solid var(--navy);
	padding-top: 13px;
}

/* --- Block 8: sign-off and actions --------------------------------------- */

.partner-signoff { margin: 26px 0 0; }
.partner-signoff__name {
	font-family: var(--sans);
	font-size: 17px;
	font-weight: 800;
	color: var(--navy);
	margin: 0 0 2px;
}
.partner-signoff__mail {
	font-family: var(--serif);
	font-size: 16px;
	margin: 0;
}
.partner-signoff__mail a { color: var(--amber-dark); text-decoration: none; }
.partner-signoff__mail a:hover { text-decoration: underline; }

.partner-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px 22px;
	margin: 28px 0 0;
}
.partner-actions__link {
	font-family: var(--sans);
	font-size: 14.5px;
	font-weight: 700;
	color: var(--amber-dark);
	text-decoration: none;
}
.partner-actions__link:hover { text-decoration: underline; }

@media (max-width: 620px) {
	.partner-block__inner--split { grid-template-columns: minmax(0, 1fr); }
	/* On a phone the cover leads, then the words. */
	.partner-block__cover { order: -1; max-width: 220px; margin: 0 auto; }
	.partner-actions .btn { width: 100%; }
}

/* ═══════════════════════════════════════════════════════════════════════════
 * PRINT — the same page, as the one-pager PDF
 *
 * The PDF is generated from this page rather than authored separately, so the
 * two can never drift apart. Everything below exists to make that one render
 * come out as a clean two-page document.
 * ═══════════════════════════════════════════════════════════════════════════ */

@media print {

	@page {
		size: Letter;
		margin: 11mm 13mm;
	}

	/* Chrome drops background colours in print unless asked; the tinted blocks
	   and the amber rules are how the page is read, so they stay. */
	* { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }

	.no-print,
	.skip-link,
	.site-footer { display: none !important; }

	body { background: #fff; font-size: 10pt; }

	/* The header keeps the wordmark but loses the bar, so page one opens on
	   the offer rather than a band of navy. */
	.site-nav--bare {
		background: none !important;
		border-bottom: 1px solid #d8ccb4;
		padding: 0 0 6pt !important;
		margin-bottom: 10pt;
	}
	.site-nav__brand { color: #1c2233 !important; font-size: 10pt !important; }
	.site-nav__tag { color: #b0743a !important; font-size: 8pt !important; }

	/* Two US Letter pages. Every vertical gap is compressed rather than the
	   type shrunk, so it stays readable in the hand. */
	.partner-hero { padding: 0 0 8pt !important; text-align: left; }
	.partner-hero__title { font-size: 18pt !important; margin-bottom: 6pt !important; }
	.partner-hero__when { font-size: 10.5pt !important; margin-bottom: 3pt !important; }
	.partner-hero__where { font-size: 9.6pt !important; margin-bottom: 7pt !important; }
	.partner-hero__ask { font-size: 12pt !important; padding-top: 7pt !important; }
	.partner-hero__balance { font-size: 10pt !important; }

	.partner-block { padding: 8pt 0 !important; background: none !important; }
	.partner-block--tint { background: #faf6ee !important; padding: 8pt 8pt !important; }
	.partner-block__inner,
	.partner-block__inner--split { max-width: none !important; }
	.partner-block__title { font-size: 11.5pt !important; margin-bottom: 5pt !important; }
	.partner-block__text,
	.partner-list li { font-size: 9pt !important; line-height: 1.38 !important; }
	.partner-list li { padding: 4pt 0 4pt 13pt !important; }
	.partner-list li::before { top: 8.5pt; width: 3.5pt; height: 3.5pt; }
	/* Chrome's print engine renders a soft box-shadow as a solid grey slab, so
	   the cover gets a hairline instead. The explicit height stops the figure
	   overflowing its grid cell and landing on the section below. */
	.partner-block__inner--split {
		display: grid !important;
		grid-template-columns: 1fr 84pt !important;
		gap: 14pt !important;
		align-items: start !important;
	}
	.partner-block__cover {
		max-width: 84pt;
		margin: 0;
	}
	.partner-block__cover img {
		box-shadow: none !important;
		border: 1px solid #d8ccb4;
		max-height: 120pt;
		width: auto;
	}

	.program__list li { padding: 3.4pt 0 !important; }
	.program__time { font-size: 9pt !important; }
	.program__what { font-size: 9.4pt !important; }
	.program__by { font-size: 8.6pt !important; }

	.budget { font-size: 8.8pt !important; }
	.budget th, .budget td { padding: 3.2pt 0 !important; }

	/* The budget is the part a sponsor scrutinises. Splitting it across a page
	   break would put the total on its own, away from the lines it sums. */
	.budget { break-inside: avoid; page-break-inside: avoid; }
	.partner-block__title,
	h2 { break-after: avoid; page-break-after: avoid; }
	.partner-list li,
	.program__list li { break-inside: avoid; page-break-inside: avoid; }

	.partner-signoff { margin-top: 9pt !important; }
	.partner-actions { margin-top: 10pt !important; }

	/* On paper a link is not clickable, so the address has to be on the page. */
	.partner-actions__link::after {
		content: " (https://thefuturepatient.com/launch.html)";
		font-family: inherit;
		font-weight: 400;
		color: #6f6753;
	}
	.partner-signoff__mail a,
	.partner-actions__link { color: #1c2233 !important; text-decoration: none !important; }
}

/* The entity stamp at the foot of the sponsorship page. An <address> element,
   which is what it is, so it reads as a postal address to a screen reader
   rather than as another line of copy. */
.partner-footer {
	display: block;
	text-align: left;
}
.partner-footer__entity {
	font-family: var(--sans);
	font-style: normal;
	font-size: 12.5px;
	line-height: 1.6;
	color: var(--text-mono);
	margin: 10px 0 0;
}
.partner-footer__entity strong { color: var(--text-strong); font-weight: 700; }

@media print {
	/* The footer is hidden everywhere else in print; this one stays, because a
	   sponsorship document has to say who is asking. */
	.partner-footer {
		display: block !important;
		border-top: 1px solid #d8ccb4;
		padding: 7pt 0 0 !important;
		margin-top: 12pt;
		background: none !important;
	}
	.partner-footer .site-footer__copy { font-size: 8pt !important; color: #6f6753 !important; }
	.partner-footer__entity { font-size: 8pt !important; margin-top: 3pt !important; color: #6f6753 !important; }
}

/* A zero-height full-width flex item: it fills the line it is on, so whatever
   follows starts a new row. Used in the invitation's button group, where the
   three buttons need about 400px and the column is only that wide on a large
   screen. Where they do not fit, the natural wrap would strand the last one
   alone; this puts the primary action on its own line instead, with the two
   secondary ones paired beneath it. */
.btn-row__break {
	flex-basis: 100%;
	height: 0;
	margin: 0;
}
/* Two cases where the break is not wanted: from 1260px up the column is wide
   enough for all three side by side, and below 420px every button is already
   full width, so a break would only add an empty row. */
@media (min-width: 1260px), (max-width: 420px) {
	.btn-row__break { display: none; }
}