/* ============================================================
   /subscribe + DonateCard — strict port
   Source: src/app/subscribe/page.tsx (390 lines)
          src/components/subscription/DonateCard.tsx (128 lines)
          src/theme/theme.ts (h1/h2 weight 700, h3-h6 weight 600,
              all-headings fontFamily var(--font-serif), text.primary #000,
              text.secondary #6c757d, background.paper #f5f5f5,
              primary.main #002855, facts.main/opinions.main same).
   Every value below is a literal sx → CSS translation.
   ============================================================ */

/* React: <Box sx={{bgcolor:'#f8fafc', minHeight:'100vh', py:8}}> */
.tdn-sub {
	background: #f8fafc;
	min-height: 100vh;
	padding: 64px 0;
}
/* React: <Container maxWidth="lg"> = 1200px centered with 16px h-padding. */
.tdn-sub__container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 16px;
}

/* Header Box textAlign center mb:6 → 48px ----------------------------------- */
.tdn-sub__head {
	text-align: center;
	margin-bottom: 48px;
}

/* <Typography variant="h3" fontWeight="bold" fontFamily="Georgia, serif" color="#002855" gutterBottom>
   h3 default font-size 3rem, line-height 1.167.  gutterBottom = mb:0.35em = 1.05rem. */
.tdn-page__content .tdn-sub__title,
.tdn-sub .tdn-sub__title {
	margin: 0 0 1.05rem !important;
	font-family: Georgia, serif !important;   /* explicit sx fontFamily */
	font-weight: 700 !important;
	font-size: 3rem !important;
	line-height: 1.167 !important;
	color: #002855 !important;
}

/* <Typography variant="h6" color="text.secondary" sx={{maxWidth:600, mx:'auto'}}>
   h6 default font-size 1.25rem, line-height 1.6. text.secondary #6c757d. */
.tdn-sub__lede {
	max-width: 600px;
	margin: 0 auto;
	font-family: var(--font-serif);            /* theme.h6 inherits var(--font-serif) */
	font-size: 1.25rem;
	line-height: 1.6;
	color: #6c757d;
}

/* <Box mt:4 flex justify:center><ToggleButtonGroup bgcolor:white px:4 py:1> */
.tdn-sub__toggle-wrap {
	margin-top: 32px;
	display: flex;
	justify-content: center;
}
.tdn-sub__toggle {
	display: inline-flex;
	background: #fff;
	border: 1px solid rgba(0,0,0,0.12);
	border-radius: 4px;
	overflow: hidden;
}
.tdn-sub__toggle-btn {
	padding: 8px 32px;                   /* py:1 = 8px, px:4 = 32px */
	background: transparent;
	border: 0;
	border-left: 1px solid rgba(0,0,0,0.12);
	font-family: var(--font-sans);
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.02857em;
	text-transform: uppercase;
	color: rgba(0,0,0,0.6);
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease;
}
.tdn-sub__toggle-btn:first-child { border-left: 0; }
.tdn-sub__toggle-btn:hover { background: rgba(0,40,85,0.04); }
.tdn-sub__toggle-btn.is-active {
	background: rgba(0,40,85,0.08);
	color: #002855;
}

.tdn-sub__notice {
	max-width: 600px;
	margin: 0 auto 32px;
	padding: 12px 16px;
	background: #fff4e5;
	border: 1px solid #ffb74d;
	border-radius: 4px;
	font-family: var(--font-sans);
	font-size: 0.875rem;
	color: #663c00;
}

/* Step 1 Card -- React: <Card sx={{mb:6, p:4, maxWidth:600, mx:'auto', border:'1px solid #e2e8f0', boxShadow:2}}>
   maxWidth 600px. mb:6 = 48px. p:4 = 32px. border literal. boxShadow:2 = MUI elevation 2. */
.tdn-sub-step1 {
	max-width: 600px;
	margin: 0 auto 48px;
	padding: 32px;
	background: #f5f5f5;                     /* MUI Paper background.paper override */
	border: 1px solid #e2e8f0;
	border-radius: 4px;
	box-shadow:
		0 3px 1px -2px rgba(0,0,0,0.2),
		0 2px 2px 0   rgba(0,0,0,0.14),
		0 1px 5px 0   rgba(0,0,0,0.12);      /* MUI elevation 2 */
}
.tdn-page__content .tdn-sub-step1__title,
.tdn-sub-step1__title {
	margin: 0 0 0.525rem !important;          /* gutterBottom on h5 */
	font-family: var(--font-serif) !important;  /* theme.h5 (no sx fontFamily override) */
	font-weight: 700 !important;
	font-size: 1.5rem !important;
	line-height: 1.334 !important;
	color: #000 !important;
	text-align: center;
}
.tdn-sub-step1__lede {
	margin: 0 0 24px;
	font-family: var(--font-sans);
	font-size: 0.875rem;
	line-height: 1.43;
	color: #6c757d;
	text-align: center;
}
.tdn-sub-step1__stack {
	display: flex; flex-direction: column;
	gap: 16px;                                /* Stack spacing 2 */
}
/* React TextField size="small" outlined → 40px tall, padding 8.5px 14px */
.tdn-sub-step1__field {
	position: relative;
}
.tdn-sub-step1__field input {
	display: block; width: 100%; box-sizing: border-box;
	height: 40px;
	padding: 8.5px 14px;
	background: #fff;
	border: 1px solid rgba(0,0,0,0.23);
	border-radius: 4px;
	outline: 0;
	font-family: var(--font-sans);
	font-size: 1rem;
	color: #000;
	transition: border-color .15s ease, border-width .15s ease, padding .15s ease;
}
.tdn-sub-step1__field input:hover { border-color: rgba(0,0,0,0.87); }
.tdn-sub-step1__field input:focus {
	border-color: #002855;
	border-width: 2px;
	padding: 7.5px 13px;
}
.tdn-sub-step1__field input::placeholder { color: transparent; }
.tdn-sub-step1__field label {
	position: absolute;
	left: 14px;
	top: 50%;
	transform: translateY(-50%);
	font-family: var(--font-sans);
	font-size: 0.875rem;
	color: rgba(0,0,0,0.6);
	pointer-events: none;
	background: transparent;
	padding: 0;
	transition: top .15s ease, transform .15s ease, font-size .15s ease, color .15s ease, background-color .15s ease, padding .15s ease;
}
.tdn-sub-step1__field input:focus + label,
.tdn-sub-step1__field input:not(:placeholder-shown) + label {
	top: 0;
	transform: translateY(-50%);
	font-size: 0.75rem;
	background: #f5f5f5;
	padding: 0 4px;
	color: #002855;
}

/* Tier grid -----------------------------------------------------------------
 * React: <Grid container spacing={4} justifyContent="center">
 *          <Grid item xs={12} md={6} lg={4}> each tier
 * spacing 4 = 32px gap. lg=4 = 3 columns (12/4) at lg breakpoint (1200px).
 * md=6 = 2 columns. xs=12 = 1 column.
 *
 * NOTE: switched from CSS Grid to Flexbox because MUI's `justifyContent="center"`
 * centers partial rows (Stakeholder + Founders sit centered in the second
 * row when only 2 of 3 columns are filled). CSS Grid would left-align the
 * partial row — wrong. Flexbox with justify-content:center + flex-wrap:wrap
 * matches React. -------------------------------------------------------------- */
.tdn-sub-tiers {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 32px;
}
/* Mobile: one column at full width.  Tablet (md≥900px): two per row at 50%.
   Desktop (lg≥1200px): three per row at 33.33% — and partial rows center. */
.tdn-sub-tiers > * {
	flex: 0 0 100%;
	max-width: 360px;
}
@media (min-width: 900px) {
	.tdn-sub-tiers > * { flex: 0 0 calc(50% - 16px); max-width: none; }
}
@media (min-width: 1200px) {
	.tdn-sub-tiers > * { flex: 0 0 calc(33.333% - 22px); }
}

/* React: <Card sx={{height:'100%', display:'flex', flexDirection:'column',
        transition:'0.3s', '&:hover':{transform:'translateY(-5px)', boxShadow:6}}}>
   MUI Card = Paper elevation=1: shadow stack. Hover boxShadow 6.  */
.tdn-sub-tier {
	height: 100%;
	display: flex;
	flex-direction: column;
	background: #f5f5f5;                      /* MUI background.paper */
	border-radius: 4px;
	box-shadow:
		0 2px 1px -1px rgba(0,0,0,0.2),
		0 1px 1px 0   rgba(0,0,0,0.14),
		0 1px 3px 0   rgba(0,0,0,0.12);
	color: #000;
	transition: transform .3s ease, box-shadow .3s ease;
}
.tdn-sub-tier:hover {
	transform: translateY(-5px);
	box-shadow:
		0 3px 5px -1px rgba(0,0,0,0.2),
		0 6px 10px 0  rgba(0,0,0,0.14),
		0 1px 18px 0  rgba(0,0,0,0.12);       /* MUI elevation 6 */
}

/* Civic tier — border 2px solid #a42a38 + "MOST POPULAR" banner */
.tdn-sub-tier--civic {
	position: relative;
	border: 2px solid #a42a38;
}
.tdn-sub-tier__banner {
	padding: 4px 0;                           /* py:0.5 */
	text-align: center;
	background: #a42a38;
	color: #fff;
	font-family: var(--font-sans);
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 1px;
}

/* Stakeholder = bg #f1f5f9 */
.tdn-sub-tier--stakeholder { background: #f1f5f9; }
/* Founders = bg #002855 white text. Bump specificity so name+price beat
   the base `.tdn-page__content .tdn-sub-tier__name { color: #000 }`. */
.tdn-sub-tier--founders { background: #002855; color: #fff; }
.tdn-page__content .tdn-sub-tier--founders .tdn-sub-tier__name,
.tdn-page__content .tdn-sub-tier--founders .tdn-sub-tier__price,
.tdn-sub-tier--founders .tdn-sub-tier__name,
.tdn-sub-tier--founders .tdn-sub-tier__price { color: #fff !important; }
.tdn-sub-tier--founders .tdn-sub-tier__unit { color: rgba(255,255,255,0.7) !important; }

/* React: <CardContent sx={{p:4, flexGrow:1}}>  = padding 32px, flex column. */
.tdn-sub-tier__content {
	padding: 32px;
	flex-grow: 1;
	display: flex;
	flex-direction: column;
}

/* React: <Typography variant="h5" fontWeight="bold" gutterBottom>{tier.name}
   h5 default 1.5rem; gutterBottom = mb:0.35em = 0.525rem.
   theme.h5 fontFamily = var(--font-serif) (no sx override). */
.tdn-page__content .tdn-sub-tier__name,
.tdn-sub-tier .tdn-sub-tier__name {
	margin: 0 0 0.525rem !important;
	font-family: var(--font-serif) !important;
	font-weight: 700 !important;
	font-size: 1.5rem !important;
	line-height: 1.334 !important;
	color: #000 !important;
}

/* React: <Typography variant="h4" fontWeight="bold" color="#002855" mb={2}>
   h4 default 2.125rem; mb:2 = 16px.  theme.h4 weight 600 → overridden bold=700.
   theme.h4 fontFamily = var(--font-serif). */
.tdn-page__content .tdn-sub-tier__price,
.tdn-sub-tier .tdn-sub-tier__price {
	margin: 0 0 16px !important;
	font-family: var(--font-serif) !important;
	font-weight: 700 !important;
	font-size: 2.125rem !important;
	line-height: 1.235 !important;
	color: #002855 !important;
}
.tdn-sub-tier--civic .tdn-sub-tier__price,
.tdn-page__content .tdn-sub-tier--civic .tdn-sub-tier__price {
	color: #a42a38 !important;                /* React: <Typography color="#a42a38"> */
}
.tdn-sub-tier__price--red { color: #a42a38 !important; }

/* React: inline <Typography component="span" variant="body1" color="text.secondary">/ forever</Typography>
   variant body1 = 1rem regular. text.secondary = #6c757d. */
.tdn-sub-tier__unit {
	font-family: var(--font-sans);
	font-size: 1rem;
	font-weight: 400;
	color: #6c757d !important;
	margin-left: 4px;
}

/* "More Information" — React: <Button variant="outlined" color="inherit" size="small" sx={{mb:4, alignSelf:'flex-start'}}>
   size=small = padding 4px 10px, font 0.8125rem.  mb:4 = 32px. */
.tdn-sub-tier__info {
	align-self: flex-start;
	margin: 0 0 32px;
	padding: 4px 10px;
	background: transparent;
	border: 1px solid rgba(0,0,0,0.5);
	border-radius: 4px;
	font-family: var(--font-sans);
	font-size: 0.8125rem;
	font-weight: 500;
	line-height: 1.75;
	letter-spacing: 0.02857em;
	text-transform: uppercase;
	color: rgba(0,0,0,0.87);
	cursor: pointer;
	transition: background-color .15s ease;
}
.tdn-sub-tier__info:hover { background: rgba(0,0,0,0.04); }
.tdn-sub-tier__info--red {
	color: #a42a38;
	border-color: #a42a38;
}
.tdn-sub-tier__info--red:hover { background: rgba(164,42,56,0.04); }
.tdn-sub-tier__info--ghost {
	color: #fff;
	border-color: rgba(255,255,255,0.5);
}
.tdn-sub-tier__info--ghost:hover { background: rgba(255,255,255,0.08); }

/* "Subscribe via Stripe" / "Create Free Account" / "Join the Circle"
   React contained Button medium = padding 6px 16px, min-height 36.5px, fontSize 0.875rem.
   sx py:1.5 → 12px top/bottom. fontWeight bold. width 100%. mt:auto via flex-grow spacer. */
.tdn-sub-tier__cta {
	display: block;
	width: 100%;
	padding: 12px 16px;
	border: 0;
	border-radius: 4px;
	font-family: var(--font-sans);
	font-size: 0.875rem;
	font-weight: 700;
	line-height: 1.75;
	letter-spacing: 0.02857em;
	text-transform: uppercase;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	transition: background-color .25s ease, box-shadow .25s ease;
	box-shadow:
		0 3px 1px -2px rgba(0,0,0,0.2),
		0 2px 2px 0   rgba(0,0,0,0.14),
		0 1px 5px 0   rgba(0,0,0,0.12);
}
/* React: Civic/Informed/Stakeholder/Founders all have <Box sx={{flexGrow:1}}/>
   BEFORE their CTA — pushing the CTA to the bottom of the CardContent so
   cards align across the row. Free tier (line 192-216) does NOT have that
   spacer, so its CTA sits right after the More Info button with just mt:3.
   We mirror that: margin-top auto on the contained-style CTAs only. */
.tdn-sub-tier:not(.tdn-sub-tier--free) .tdn-sub-tier__cta {
	margin-top: auto;
}
.tdn-sub-tier__cta--outlined {
	background: transparent;
	color: #002855;
	border: 1px solid rgba(0,40,85,0.5);
	box-shadow: none;
}
.tdn-sub-tier__cta--outlined:hover { background: rgba(0,40,85,0.04); border-color: #002855; }
/* React: Free tier's "Create Free Account" sx={{py:1.5, mt:3, fontWeight:'bold'}}
   py:1.5 = 12px (already on .tdn-sub-tier__cta).  mt:3 = 24px (just above the CTA). */
.tdn-sub-tier__cta--outlined { margin-top: 24px; }

/* React contained primary → bg #002855, white text */
.tdn-sub-tier__cta--contained { background: #002855; color: #fff; }
.tdn-sub-tier__cta--contained:hover { background: #001e3d; }

/* React civic: <Button variant="contained" sx={{bgcolor:'#a42a38', '&:hover':{bgcolor:'#801a2b'}}}> */
.tdn-sub-tier__cta--red { background: #a42a38; color: #fff; }
.tdn-sub-tier__cta--red:hover { background: #801a2b; }

/* React founders: <Button variant="contained" sx={{bgcolor:'white', color:'#002855', '&:hover':{bgcolor:'#f1f5f9'}}}> */
.tdn-sub-tier__cta--white { background: #fff; color: #002855; }
.tdn-sub-tier__cta--white:hover { background: #f1f5f9; }

/* Free tier logged-in state — React: <Alert severity="success" sx={{mb:3}}>You are logged in.</Alert> */
.tdn-sub-tier__loggedin {
	margin-top: auto;
	padding: 6px 16px;
	background: rgb(237,247,237);
	color: rgb(30,70,32);
	border-radius: 4px;
	font-family: var(--font-sans);
	font-size: 0.875rem;
	line-height: 1.43;
}

/* Why Donate -- React: <Box mt={10} mb={6} bgcolor='white' p={6} borderRadius={2} boxShadow={1} border='1px solid #e2e8f0'>
   mt:10 = 80px. mb:6 = 48px. p:6 = 48px. borderRadius 2 = 8px. boxShadow 1 = elev1. */
.tdn-sub-whydonate {
	margin: 80px 0 48px;
	padding: 48px;
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	box-shadow:
		0 2px 1px -1px rgba(0,0,0,0.2),
		0 1px 1px 0   rgba(0,0,0,0.14),
		0 1px 3px 0   rgba(0,0,0,0.12);
}

/* React: <Typography variant="h4" fontWeight="bold" fontFamily="Georgia, serif" color="#002855" gutterBottom textAlign="center"> */
.tdn-page__content .tdn-sub-whydonate__title,
.tdn-sub-whydonate__title {
	margin: 0 0 0.74375rem !important;        /* gutterBottom on h4 = 0.35em = 0.74375rem */
	font-family: Georgia, serif !important;
	font-weight: 700 !important;
	font-size: 2.125rem !important;
	line-height: 1.235 !important;
	color: #002855 !important;
	text-align: center;
}
.tdn-sub-whydonate__inner {
	margin-top: 32px;                         /* React: <Box mt:4> */
	text-align: center;
	max-width: 800px;
	margin-left: auto;
	margin-right: auto;
}
/* React: <Typography variant="h6" color="text.secondary" sx={{lineHeight:1.8, fontStyle:'italic'}}> */
.tdn-sub-whydonate__quote {
	margin: 0;
	font-family: var(--font-serif);
	font-size: 1.25rem;
	font-weight: 600;
	font-style: italic;
	line-height: 1.8;
	color: #6c757d;
}

/* React: <Box mt={6} maxWidth='md' mx='auto'><DonateCard/></Box>
   maxWidth=md = 900px. mt:6 = 48px. */
.tdn-sub-donate-wrap {
	margin: 48px auto 0;
	max-width: 900px;
}

/* ============================================================
   DonateCard — strict port from components/subscription/DonateCard.tsx
   <Card sx={{mt:6, p:2, bgcolor:'#f1f5f9', border:'1px solid #cbd5e1'}}>
   ============================================================ */
.tdn-don {
	background: #f1f5f9;
	border: 1px solid #cbd5e1;
	border-radius: 4px;
	padding: 16px;                            /* p:2 = 16px */
	box-shadow:
		0 2px 1px -1px rgba(0,0,0,0.2),
		0 1px 1px 0   rgba(0,0,0,0.14),
		0 1px 3px 0   rgba(0,0,0,0.12);
	color: #000;
}
.tdn-don__content {
	padding: 16px;                            /* CardContent default 16px */
}

/* h5 fontWeight bold color #002855 gutterBottom "Make a Custom Contribution" */
.tdn-don .tdn-don__title,
.tdn-page__content .tdn-don__title {
	margin: 0 0 0.525rem !important;
	font-family: var(--font-serif) !important;
	font-weight: 700 !important;
	font-size: 1.5rem !important;
	line-height: 1.334 !important;
	color: #002855 !important;
}
/* body2 text.secondary mb:3 */
.tdn-don__lede {
	margin: 0 0 24px;
	font-family: var(--font-sans);
	font-size: 0.875rem;
	line-height: 1.43;
	color: #6c757d;
}
.tdn-don__notice {
	margin: 0 0 16px;
	padding: 8px 12px;
	background: #fff4e5;
	border: 1px solid #ffb74d;
	border-radius: 4px;
	font-family: var(--font-sans);
	font-size: 0.875rem;
	color: #663c00;
}

/* ToggleButtonGroup fullWidth color=primary bgcolor:white */
.tdn-don__interval-toggle {
	display: flex;
	margin-bottom: 24px;
	background: #fff;
	border: 1px solid rgba(0,0,0,0.12);
	border-radius: 4px;
	overflow: hidden;
}
.tdn-don__interval-btn {
	flex: 1 1 0;
	padding: 11px 16px;
	background: transparent;
	border: 0;
	border-left: 1px solid rgba(0,0,0,0.12);
	font-family: var(--font-sans);
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.02857em;
	text-transform: uppercase;
	color: rgba(0,0,0,0.6);
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease;
}
.tdn-don__interval-btn:first-child { border-left: 0; }
.tdn-don__interval-btn:hover { background: rgba(0,40,85,0.04); }
.tdn-don__interval-btn.is-active {
	background: rgba(0,40,85,0.08);
	color: #002855;
}

/* Preset amounts — Box mb:3 display:flex gap:2 flexWrap:wrap, 4 Buttons each flex:1 minWidth:60. */
.tdn-don__presets {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
	margin-bottom: 24px;
}
.tdn-don__preset {
	flex: 1 1 0;
	min-width: 60px;
	padding: 6px 16px;
	background: transparent;
	border: 1px solid rgba(0,40,85,0.5);
	border-radius: 4px;
	font-family: var(--font-sans);
	font-size: 0.875rem;
	font-weight: 700;
	line-height: 1.75;
	letter-spacing: 0.02857em;
	text-transform: uppercase;
	color: #002855;
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.tdn-don__preset:hover { background: rgba(0,40,85,0.04); border-color: #002855; }
.tdn-don__preset.is-active {
	background: #002855;
	color: #fff;
	border-color: #002855;
}

/* Custom Amount TextField w/ $-adornment, bg white, mb:2 = 16px */
.tdn-don-field {
	position: relative;
	margin-bottom: 16px;
}
.tdn-don-field input {
	display: block; width: 100%; box-sizing: border-box;
	height: 56px;
	padding: 16.5px 14px 16.5px 32px;         /* room for $ adornment */
	background: #fff;
	border: 1px solid rgba(0,0,0,0.23);
	border-radius: 4px;
	outline: 0;
	font-family: var(--font-sans);
	font-size: 1rem;
	color: #000;
	transition: border-color .15s ease, border-width .15s ease;
	appearance: textfield;
	-moz-appearance: textfield;
}
.tdn-don-field input::-webkit-inner-spin-button,
.tdn-don-field input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.tdn-don-field input::placeholder { color: transparent; }
.tdn-don-field input:hover { border-color: rgba(0,0,0,0.87); }
.tdn-don-field input:focus { border-color: #002855; border-width: 2px; }
.tdn-don-field__prefix {
	position: absolute;
	left: 14px;
	top: 50%;
	transform: translateY(-50%);
	font-family: var(--font-sans);
	font-size: 1rem;
	color: #6c757d;
	pointer-events: none;
}
.tdn-don-field label {
	position: absolute;
	left: 14px;
	top: 0;
	transform: translateY(-50%);
	font-family: var(--font-sans);
	font-size: 0.75rem;
	color: #002855;
	background: #f1f5f9;                      /* notch matches card bg */
	padding: 0 4px;
	pointer-events: none;
}

/* FormControlLabel checkbox — React: <Checkbox/> + body2 label, mb:3 = 24px */
.tdn-don-checkbox {
	display: flex; align-items: flex-start; gap: 8px;
	margin-bottom: 24px;
	cursor: pointer;
}
.tdn-don-checkbox input { position: absolute; opacity: 0; pointer-events: none; }
.tdn-don-checkbox__box {
	flex: 0 0 24px;
	width: 24px; height: 24px;
	display: flex; align-items: center; justify-content: center;
	color: transparent;
	transition: color .15s ease;
}
.tdn-don-checkbox__box::before {
	content: "";
	width: 18px; height: 18px;
	border: 2px solid rgba(0,0,0,0.6);
	border-radius: 2px;
	display: block;
	transition: border-color .15s ease, background-color .15s ease;
}
.tdn-don-checkbox input:checked + .tdn-don-checkbox__box { color: #fff; }
.tdn-don-checkbox input:checked + .tdn-don-checkbox__box::before {
	background: #002855;
	border-color: #002855;
}
.tdn-don-checkbox__box svg { position: absolute; pointer-events: none; }
.tdn-don-checkbox__label {
	font-family: var(--font-sans);
	font-size: 0.875rem;
	line-height: 1.43;
	color: #6c757d;
}

.tdn-don-guest {
	display: flex; flex-direction: column; gap: 12px;
	margin-bottom: 16px;
}
.tdn-don-guest input {
	height: 48px;
	padding: 12px 14px;
	background: #fff;
	border: 1px solid rgba(0,0,0,0.23);
	border-radius: 4px;
	font-family: var(--font-sans);
	font-size: 0.875rem;
}

/* Donate Button — React: contained fullWidth size=large sx={{bgcolor:'#002855', py:1.5, fontWeight:'bold', fontSize:'1.1rem'}}.
   size=large default padding 8px 22px → y overridden by py:1.5 = 12px. */
.tdn-don__cta {
	display: block; width: 100%;
	padding: 12px 22px;
	background: #002855;
	color: #fff;
	border: 0;
	border-radius: 4px;
	font-family: var(--font-sans);
	font-size: 1.1rem;
	font-weight: 700;
	line-height: 1.75;
	letter-spacing: 0.02857em;
	text-transform: uppercase;
	cursor: pointer;
	box-shadow:
		0 3px 1px -2px rgba(0,0,0,0.2),
		0 2px 2px 0   rgba(0,0,0,0.14),
		0 1px 5px 0   rgba(0,0,0,0.12);
	transition: background-color .25s ease;
}
.tdn-don__cta:hover { background: #001a3b; }

/* ============================================================
   Tier-info <dialog> modal — strict port from <Dialog open=…>
   React: <DialogTitle bgcolor:#002855 color:white Georgia>
          <DialogContent dividers p:4 body1 lineHeight:1.8>
          <DialogActions p:2 <Button variant=contained primary>Close>
   ============================================================ */
.tdn-sub-modal {
	width: 100%;
	max-width: 600px;
	padding: 0;
	border: 0;
	border-radius: 4px;
	background: #fff;
	box-shadow:
		0 11px 15px -7px rgba(0,0,0,0.2),
		0 24px 38px 3px  rgba(0,0,0,0.14),
		0 9px 46px 8px   rgba(0,0,0,0.12);
}
.tdn-sub-modal::backdrop { background: rgba(0,0,0,0.5); }
.tdn-sub-modal__header {
	display: flex; align-items: center; justify-content: space-between;
	padding: 16px 24px;
	background: #002855;
	color: #fff;
}
.tdn-sub-modal__title {
	font-family: Georgia, serif;
	font-weight: 500;
	font-size: 1.25rem;
	line-height: 1.6;
	color: #fff;
}
.tdn-sub-modal__close {
	background: transparent; border: 0;
	color: #fff;
	cursor: pointer;
	padding: 8px;
	border-radius: 50%;
}
.tdn-sub-modal__close:hover { background: rgba(255,255,255,0.08); }
.tdn-sub-modal__body {
	padding: 32px;                            /* p:4 */
	border-top: 1px solid rgba(0,0,0,0.12);
	border-bottom: 1px solid rgba(0,0,0,0.12);
	font-family: var(--font-sans);
	font-size: 1rem;
	line-height: 1.8;
	color: #000;
}
.tdn-sub-modal__actions {
	display: flex; justify-content: flex-end;
	padding: 16px;                            /* p:2 */
}
.tdn-sub-modal__btn {
	padding: 6px 16px;
	background: #002855;
	color: #fff;
	border: 0;
	border-radius: 4px;
	font-family: var(--font-sans);
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1.75;
	letter-spacing: 0.02857em;
	text-transform: uppercase;
	cursor: pointer;
}

/* Lift ALL WP wrappers so the #f8fafc band runs edge-to-edge on /subscribe.
   theme.css's `.tdn-container { padding: 0 16px }` was leaving a 16px gap on
   each side where the body background showed through, making the band look
   narrower than React's. Suppress that on subscribe. */
.tdn-container:has(.tdn-sub) {
	padding: 0 !important;
	max-width: 100% !important;
}
.tdn-page__content:has(.tdn-sub) {
	max-width: 100% !important;
	padding: 0;
}
.tdn-page:has(.tdn-sub) { padding-block: 0; }