/*
 * Daily Spins Guides: planner styles for the guide pages (.fd-page).
 * Loaded in the head of guide pages only. Page width, the space around it, header, footer and fonts
 * belong to the theme; the --fd-* tokens below are fallbacks for the theme's own. Otherwise
 * every rule is scoped to .fd-page and works on top of whatever column the theme provides.
 */

/* ---------------------------------------------------------------------------------------------
   1. Tokens. The theme declares the same names on :root and wins; these are fallbacks.
   --------------------------------------------------------------------------------------------- */
:where(:root) {
	--fd-paper: #FAF6EE;
	--fd-card: #FFFDF8;
	--fd-paper-2: #F3EDE1;
	--fd-ink: #1D2440;
	--fd-ink-2: #5A6079;
	--fd-rule: #E4DCCB;
	--fd-perf: #CFC5B0;
	--fd-tomato: #E4572E;
	--fd-cta: #C9441F;
	--fd-mustard: #F2B134;
	--fd-mustard-soft: #FCE7A6;
	--fd-blue: #2F55B5;
	--fd-teal: #0E9A8C;
	--fd-radius: 14px;
	--fd-blue-deep: #1F3C8A;
	--fd-head-font: "Bricolage Grotesque", "Nunito Sans", ui-sans-serif, system-ui, sans-serif;
	--fd-body-font: "Nunito Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.fd-page {
	--fd-measure: 56rem;                 /* the column a page with no contents rail keeps to */
	--fd-rail: 21rem;                    /* the contents rail beside the text on wide screens */
	--fd-rail-gap: 3.4rem;               /* space between the reading column and that rail */
	--fd-gap: clamp(2.4rem, 6vw, 3.6rem); /* space between sections */
	--fd-teal-text: #0A6E64;             /* teal dark enough for small text (5:1 and up) */
	--fd-tomato-text: #A93716;           /* tomato dark enough for small text */
	--fd-lift: 0 1px 0 rgba(29, 36, 64, 0.04), 0 14px 26px -22px rgba(29, 36, 64, 0.5);
	width: 100%;
	color: var(--fd-ink);
	font-family: var(--fd-body-font);
	line-height: 1.65;
	overflow-wrap: break-word;
	-webkit-text-size-adjust: 100%;
}
.fd-page *,
.fd-page *::before,
.fd-page *::after { box-sizing: border-box; }

/* ---------------------------------------------------------------------------------------------
   2. Sheet and reading column
   --------------------------------------------------------------------------------------------- */
/* One width for everything. The trail, the heading, the board, the paragraphs, the tables and
   the charts share the sheet's left and right edge, so no block is a step wider than the one
   above it. Room under the header and above the footer comes from the theme. */
.fd-page .fd-sheet { width: 100%; max-width: var(--fd-measure); margin: 0 auto; }
.fd-page .fd-text { margin-top: var(--fd-gap); }
.fd-page .fd-top + .fd-text,
.fd-page .fd-main > .fd-text:first-child { margin-top: 2rem; }

/* Wide screens: the guide takes the theme's full column and the contents list moves into a
   rail that stays with the reader, so the text reaches the same left edge as the site logo
   and the space on the right carries the contents instead of standing empty. */
@media screen and (min-width: 1100px) {
	.fd-page .fd-sheet--rail {
		display: grid;
		grid-auto-flow: row dense;
		grid-template-columns: var(--fd-rail) minmax(0, 1fr);
		column-gap: var(--fd-rail-gap);
		align-items: start;
		max-width: none;
	}
	.fd-page .fd-sheet--rail > .fd-trail,
	.fd-page .fd-sheet--rail > .fd-top,
	.fd-page .fd-sheet--rail > .fd-board { grid-column: 1 / -1; }
	.fd-page .fd-sheet--rail > .fd-main { grid-column: 2; min-width: 0; }
	/* The standfirst sits above the board, where the rail has not started yet, so a reading column
	   here left a strip of nothing beside it and ended on a line no other block used: not the
	   sheet's right edge, not the rail's, not the reading column's. It takes the sheet, like the
	   crumbs, the heading and the board around it. */
	.fd-page .fd-sheet--rail > .fd-rail {
		grid-column: 1;
		align-self: start;
		position: sticky;
		top: 1.6rem;
		max-height: calc(100vh - 3.2rem);
		overflow-y: auto;
		overscroll-behavior: contain;
		margin-top: var(--fd-gap);
	}
	.fd-page .fd-rail .fd-agenda { margin: 0; }
	.fd-page .fd-rail .fd-agenda ol { columns: 1; }
}

/* ---------------------------------------------------------------------------------------------
   3. Type
   --------------------------------------------------------------------------------------------- */
.fd-page h1,
.fd-page h2,
.fd-page h3 {
	font-family: var(--fd-head-font);
	color: var(--fd-ink);
	letter-spacing: -0.02em;
	line-height: 1.12;
	margin: 0 0 0.55em;
	padding: 0;
	text-wrap: balance;
}
.fd-page h1 { font-size: 1.765em; font-weight: 800; }   /* 30px on a 17px body */
.fd-page h2 { font-size: 1.412em; font-weight: 800; }   /* 24px */
.fd-page h3 { font-size: 1.118em; font-weight: 700; line-height: 1.25; margin-top: 1.8em; } /* 19px */
@media (min-width: 545px) {
	.fd-page h1 { font-size: 2em; }      /* 34px */
	.fd-page h2 { font-size: 1.588em; }  /* 27px */
	.fd-page h3 { font-size: 1.176em; }  /* 20px */
}
@media (min-width: 922px) {
	.fd-page h1 { font-size: 2.471em; }  /* 42px */
	.fd-page h2 { font-size: 1.765em; }  /* 30px */
	.fd-page h3 { font-size: 1.235em; }  /* 21px */
}
.fd-page h2[id],
.fd-page h3[id] { scroll-margin-top: 6rem; }

/* every section heading gets a small mustard index tab, like a planner divider */
.fd-page .fd-text > h2::before {
	content: "";
	display: block;
	width: 2.6rem;
	height: 0.4rem;
	margin: 0 0 0.75rem;
	border-radius: 999px;
	background: var(--fd-mustard);
}

.fd-page p,
.fd-page ul,
.fd-page ol { margin: 0 0 1.05em; }
.fd-page ul:not([class]),
.fd-page ol:not([class]) { padding-left: 1.4em; }
.fd-page ul:not([class]) { list-style: disc; }
.fd-page ol:not([class]) { list-style: decimal; }
.fd-page li { margin: 0 0 0.45em; }
.fd-page ul:not([class]) > li::marker { color: var(--fd-tomato); }
.fd-page ol:not([class]) > li::marker { color: var(--fd-ink-2); font-weight: 800; }
.fd-page strong,
.fd-page b { font-weight: 800; }
.fd-page sup { font-size: 0.7em; line-height: 0; }

.fd-page a {
	color: var(--fd-blue);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
}
.fd-page a:hover { color: var(--fd-blue-deep); text-decoration-thickness: 2px; }
.fd-page a:focus-visible,
.fd-page summary:focus-visible,
.fd-page input:focus-visible,
.fd-page select:focus-visible { outline: 3px solid var(--fd-blue); outline-offset: 2px; border-radius: 4px; }

.fd-page .fd-small { font-size: 0.85em; line-height: 1.55; color: var(--fd-ink-2); }

/* ---------------------------------------------------------------------------------------------
   4. Trail and top
   --------------------------------------------------------------------------------------------- */
.fd-page .fd-trail {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.2rem 0.55rem;
	margin-top: 0.25rem;
	margin-bottom: 1.15rem;
	font-size: 0.875em;
	line-height: 1.45;
	color: var(--fd-ink-2);
}
.fd-page .fd-trail a { color: var(--fd-ink-2); text-decoration-color: var(--fd-perf); }
.fd-page .fd-trail a:hover { color: var(--fd-blue); text-decoration-color: currentColor; }
.fd-page .fd-trail span[aria-hidden] { color: var(--fd-perf); font-weight: 700; }
.fd-page .fd-trail [aria-current] { color: var(--fd-ink); font-weight: 700; }

.fd-page .fd-top { margin-top: 0; margin-bottom: 0; }
.fd-page .fd-date {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	margin: 0 0 1.1rem;
	padding: 0.34em 0.95em 0.34em 0.75em;
	border-radius: 999px;
	background: var(--fd-mustard);
	color: var(--fd-ink);
	font-size: 0.78em;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
/* a tiny calendar sheet */
.fd-page .fd-date::before {
	content: "";
	flex: 0 0 auto;
	width: 1em;
	height: 0.95em;
	border: 2px solid currentColor;
	border-top-width: 0.3em;
	border-radius: 3px;
}
.fd-page .fd-top h1 { margin-bottom: 0.5em; }
.fd-page .fd-lede { font-size: 1.1em; line-height: 1.6; margin-bottom: 1.3rem; }
.fd-page .fd-stamps { display: flex; flex-wrap: wrap; gap: 0.55rem; margin: 0; padding: 0; list-style: none; }
.fd-page .fd-stamp {
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
	margin: 0;
	padding: 0.36em 0.85em;
	border: 1.5px dashed var(--fd-ink-2);
	border-radius: 8px;
	background: var(--fd-card);
	color: var(--fd-ink);
	font-size: 0.82em;
	font-weight: 700;
	line-height: 1.3;
}
.fd-page .fd-stamp::before {
	content: "";
	flex: 0 0 auto;
	width: 0.55em;
	height: 0.55em;
	border-radius: 50%;
	background: var(--fd-teal);
}
.fd-page .fd-stamp--age {
	border: 2px dashed var(--fd-tomato);
	border-radius: 999px;
	font-weight: 800;
	letter-spacing: 0.02em;
}
.fd-page .fd-stamp--age::before { display: none; }

/* ---------------------------------------------------------------------------------------------
   5. The offers board: the full width of the sheet, straight after the top
   --------------------------------------------------------------------------------------------- */
.fd-page .fd-board { width: 100%; max-width: none; margin: 2.1rem 0 0; scroll-margin-top: 6rem; }
.fd-page .fd-board > p:only-child { max-width: var(--fd-measure); margin: 0 auto; }

/* ---------------------------------------------------------------------------------------------
   6. Opening: glance card and agenda
   --------------------------------------------------------------------------------------------- */
.fd-page .fd-open { margin-top: var(--fd-gap); }

/* glance: a desk-calendar card with a mustard tab and big numbers */
.fd-page .fd-glance {
	margin: 1.9rem 0;
	padding: 0.95rem 0 0;
	border-top: 2px solid var(--fd-ink);
	border-bottom: 1px solid var(--fd-rule);
}
.fd-page .fd-glance__title {
	margin: 0 0 0.9rem;
	padding: 0;
	font-family: var(--fd-head-font);
	font-size: 0.78em;
	font-weight: 800;
	letter-spacing: 0.1em;
	line-height: 1.2;
	text-transform: uppercase;
	color: var(--fd-ink-2);
}
.fd-page .fd-glance ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0 2.6rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.fd-page .fd-glance li {
	flex: 1 1 10rem;
	margin: 0 0 1rem;
	padding: 0;
	font-size: 0.86em;
	line-height: 1.45;
	color: var(--fd-ink-2);
}
.fd-page .fd-glance li strong {
	display: block;
	margin-bottom: 0.3rem;
	font-family: var(--fd-head-font);
	font-size: 2.05em;
	font-weight: 800;
	line-height: 1.02;
	letter-spacing: -0.03em;
	color: var(--fd-ink);
	font-variant-numeric: tabular-nums;
	overflow-wrap: normal;
	text-wrap: balance;
}

/* agenda: a ruled planner page with numbered checkbox squares */
.fd-page .fd-agenda {
	margin: 1.8rem 0 0;
	padding: 1.05rem 1.25rem 0.55rem;
	background: var(--fd-card);
	border: 1px solid var(--fd-rule);
	border-radius: var(--fd-radius);
	box-shadow: var(--fd-lift);
}
.fd-page .fd-agenda__title {
	margin: 0 0 0.35rem;
	font-family: var(--fd-head-font);
	font-size: 1.12em;
	font-weight: 800;
	letter-spacing: -0.01em;
	line-height: 1.3;
}
.fd-page .fd-agenda ol { margin: 0; padding: 0; list-style: none; counter-reset: fd-agenda; }
.fd-page .fd-agenda li {
	counter-increment: fd-agenda;
	display: flex;
	align-items: baseline;
	gap: 0.75rem;
	margin: 0;
	padding: 0.5rem 0;
	border-top: 1px solid var(--fd-rule);
	line-height: 1.4;
	break-inside: avoid;
}
.fd-page .fd-agenda li::before {
	content: counter(fd-agenda);
	flex: 0 0 1.55rem;
	height: 1.55rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 2px solid var(--fd-ink-2);
	border-radius: 5px;
	background: var(--fd-card);
	color: var(--fd-ink-2);
	font-size: 0.74em;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}
.fd-page .fd-agenda li:hover::before { background: var(--fd-mustard-soft); border-color: var(--fd-ink); color: var(--fd-ink); }
.fd-page .fd-agenda a { color: var(--fd-ink); font-weight: 700; text-decoration: none; }
.fd-page .fd-agenda a:hover { color: var(--fd-blue); text-decoration: underline; }
@media (min-width: 760px) {
	.fd-page .fd-agenda ol { columns: 2; column-gap: 2.2rem; }
}

/* ---------------------------------------------------------------------------------------------
   7. Quick answer ticks
   --------------------------------------------------------------------------------------------- */
.fd-page .fd-ticks { margin: 0.4rem 0 1.2rem; padding: 0; list-style: none; }
.fd-page .fd-ticks li { position: relative; margin: 0 0 0.9em; padding-left: 2.45rem; }
.fd-page .fd-ticks li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.1em;
	width: 1.6rem;
	height: 1.6rem;
	border-radius: 50%;
	background: var(--fd-tomato) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.6 8.4l2.9 2.9 5.9-6.4' fill='none' stroke='%23fff' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 64% no-repeat;
	box-shadow: 0 2px 0 rgba(169, 55, 22, 0.35);
}

/* ---------------------------------------------------------------------------------------------
   8. Tables
   --------------------------------------------------------------------------------------------- */
.fd-page .fd-scroll {
	margin: 1.4rem 0 1.7rem;
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	background:
		linear-gradient(to right, var(--fd-card) 40%, rgba(255, 253, 248, 0)) left center / 2.4rem 100% no-repeat local,
		linear-gradient(to left, var(--fd-card) 40%, rgba(255, 253, 248, 0)) right center / 2.4rem 100% no-repeat local,
		radial-gradient(farthest-side at 0 50%, rgba(29, 36, 64, 0.22), rgba(29, 36, 64, 0)) left center / 0.9rem 100% no-repeat scroll,
		radial-gradient(farthest-side at 100% 50%, rgba(29, 36, 64, 0.22), rgba(29, 36, 64, 0)) right center / 0.9rem 100% no-repeat scroll,
		var(--fd-card);
	border: 1px solid var(--fd-rule);
	border-radius: var(--fd-radius);
	box-shadow: var(--fd-lift);
}
.fd-page .fd-grid {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	border-spacing: 0;
	background: transparent;
	font-size: 0.9em;
	line-height: 1.45;
}
.fd-page .fd-grid th,
.fd-page .fd-grid td {
	padding: 0.7rem 0.85rem;
	border: 0;
	text-align: left;
	vertical-align: top;
}
.fd-page .fd-grid thead th {
	background: var(--fd-ink);
	color: #fff;
	font-size: 0.94em;
	font-weight: 800;
	line-height: 1.3;
	vertical-align: bottom;
}
.fd-page .fd-grid tbody td { border-top: 1px solid var(--fd-rule); }
.fd-page .fd-grid tbody tr:first-child td { border-top: 0; }
.fd-page .fd-grid tbody tr:nth-child(even) { background: rgba(190, 165, 120, 0.2); } /* paper-2 over the card, see-through for the scroll shadow */
.fd-page .fd-grid tbody td:first-child { font-weight: 700; color: var(--fd-ink); }
.fd-page .fd-grid a { font-weight: 700; }

/* figures: tabular, and columns that hold only figures (marked by the plugin) right-aligned */
.fd-page .fd-num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.fd-page span.fd-num { font-weight: 800; }
.fd-page .fd-grid td.fd-num { text-align: right; }
.fd-page .fd-grid[data-num] td { font-variant-numeric: tabular-nums; }
.fd-page .fd-grid[data-num~="2"] :is(th, td):nth-child(2),
.fd-page .fd-grid[data-num~="3"] :is(th, td):nth-child(3),
.fd-page .fd-grid[data-num~="4"] :is(th, td):nth-child(4),
.fd-page .fd-grid[data-num~="5"] :is(th, td):nth-child(5),
.fd-page .fd-grid[data-num~="6"] :is(th, td):nth-child(6),
.fd-page .fd-grid[data-num~="7"] :is(th, td):nth-child(7),
.fd-page .fd-grid[data-num~="8"] :is(th, td):nth-child(8),
.fd-page .fd-grid[data-num~="9"] :is(th, td):nth-child(9),
.fd-page .fd-grid[data-num~="10"] :is(th, td):nth-child(10),
.fd-page .fd-grid[data-num~="11"] :is(th, td):nth-child(11),
.fd-page .fd-grid[data-num~="12"] :is(th, td):nth-child(12) { text-align: right; }
.fd-page .fd-grid td[data-fig] { white-space: nowrap; font-variant-numeric: tabular-nums; } /* "−£12.00" never splits */

/* tables of seven columns or more use the full width of the sheet on wide screens */
@media (min-width: 922px) {
	.fd-page .fd-text > .fd-scroll:has(> .fd-grid > thead th:nth-child(7)) {
		width: min(68rem, calc(100vw - 4rem));
		max-width: none;
		margin-left: calc((100% - min(68rem, calc(100vw - 4rem))) / 2);
		margin-right: calc((100% - min(68rem, calc(100vw - 4rem))) / 2);
	}
	/* once the plan takes the left column there is no room either side, so a wide table
	   keeps to the reading column and scrolls inside its own frame */
	.fd-page .fd-sheet--rail .fd-main .fd-text > .fd-scroll:has(> .fd-grid > thead th:nth-child(7)) {
		width: auto;
		max-width: 100%;
		margin-left: 0;
		margin-right: 0;
	}
}

/* positive and warning values */
.fd-page td.fd-good { background: rgba(14, 154, 140, 0.11); color: var(--fd-teal-text); font-weight: 700; }
.fd-page td.fd-warn { background: rgba(228, 87, 46, 0.1); color: var(--fd-tomato-text); font-weight: 700; }
.fd-page span.fd-good,
.fd-page span.fd-warn {
	padding: 0.05em 0.35em;
	border-radius: 5px;
	font-weight: 800;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}
.fd-page span.fd-good { background: rgba(14, 154, 140, 0.13); color: var(--fd-teal-text); }
.fd-page span.fd-warn { background: rgba(228, 87, 46, 0.12); color: var(--fd-tomato-text); }

/* ---------------------------------------------------------------------------------------------
   9. Steps: numbered day badges, joined by a perforated line
   --------------------------------------------------------------------------------------------- */
.fd-page .fd-steps { margin: 1.4rem 0 1.6rem; padding: 0; list-style: none; counter-reset: fd-step; }
.fd-page .fd-steps > li {
	counter-increment: fd-step;
	position: relative;
	min-height: 4.1rem;
	margin: 0;
	padding: 0.15rem 0 1.4rem 4.6rem;
	background: repeating-linear-gradient(to bottom, var(--fd-perf) 0 5px, transparent 5px 10px) 1.62rem 4.15rem / 2px calc(100% - 4.4rem) no-repeat;
}
.fd-page .fd-steps > li:last-child { padding-bottom: 0.4rem; background: none; }
.fd-page .fd-steps > li::before,
.fd-page .fd-steps > li::after {
	position: absolute;
	left: 0;
	width: 3.35rem;
	text-align: center;
	border: 2px solid var(--fd-ink);
}
.fd-page .fd-steps > li::before {
	content: "Step";
	top: 0;
	height: 1.2rem;
	border-bottom: 0;
	border-radius: 9px 9px 0 0;
	background: var(--fd-cta);
	color: #fff;
	font-size: 0.66rem;
	font-weight: 800;
	line-height: 1.05rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}
.fd-page .fd-steps > li::after {
	content: counter(fd-step);
	top: 1.2rem;
	height: 2.45rem;
	border-top: 0;
	border-radius: 0 0 9px 9px;
	background: var(--fd-card);
	color: var(--fd-ink);
	font-family: var(--fd-head-font);
	font-size: 1.45rem;
	font-weight: 800;
	line-height: 2.2rem;
	font-variant-numeric: tabular-nums;
	box-shadow: 0 6px 12px -10px rgba(29, 36, 64, 0.6);
}
.fd-page .fd-steps > li > strong:first-child { display: block; margin-bottom: 0.15rem; font-size: 1.04em; }

/* ---------------------------------------------------------------------------------------------
   10. Pin notes: sticky notes with a push pin and a folded corner
   --------------------------------------------------------------------------------------------- */
.fd-page .fd-pin {
	position: relative;
	margin: 1.9rem 0 1.7rem;
	padding: 1.3rem 1.35rem 1.15rem;
	background: linear-gradient(-45deg, transparent 1.15rem, var(--fd-mustard-soft) 0);
	color: var(--fd-ink);
	border-radius: 3px;
	filter: drop-shadow(0 6px 8px rgba(29, 36, 64, 0.12));
}
.fd-page .fd-pin::before {
	content: "";
	position: absolute;
	top: -0.5rem;
	left: 50%;
	width: 1.05rem;
	height: 1.05rem;
	margin-left: -0.52rem;
	border-radius: 50%;
	background: radial-gradient(circle at 35% 32%, #FFB59C 0 16%, var(--fd-tomato) 22% 100%);
	box-shadow: 0 2px 2px rgba(29, 36, 64, 0.35);
}
.fd-page .fd-pin::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	width: 1.63rem;
	height: 1.63rem;
	background: linear-gradient(to top left, transparent 50%, #EDCB6A 0);
	border-radius: 0 0 0 3px;
}
.fd-page .fd-pin > :last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------------------------------------
   11. Worked sums in a dashed box
   --------------------------------------------------------------------------------------------- */
.fd-page .fd-sum {
	margin: 1.3rem 0 1.45rem;
	padding: 0.85rem 1.1rem 0.85rem 1.15rem;
	border: 2px dashed var(--fd-perf);
	border-left: 6px solid var(--fd-mustard);
	border-radius: 10px;
	background: var(--fd-card);
	color: var(--fd-ink);
	font-weight: 700;
	line-height: 1.55;
	font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------------------------------------
   12. Charts as cards with captions
   --------------------------------------------------------------------------------------------- */
.fd-page .fd-chart {
	display: flex;
	flex-direction: column;
	margin: 2.1rem 0 2.3rem;
	padding: 0.95rem 0 0;
	border-top: 2px solid var(--fd-ink);
}
.fd-page .fd-chart picture { display: block; }
.fd-page .fd-chart img {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	margin: 0;
	border: 1px solid var(--fd-rule);
	border-radius: 0;
}
.fd-page .fd-chart figcaption {
	order: -1;
	margin: 0 0 0.9rem;
	padding: 0;
	font-size: 0.9em;
	line-height: 1.5;
	color: var(--fd-ink-2);
}

/* ---------------------------------------------------------------------------------------------
   13. Questions: every answer open on the page, ruled like a planner's notes
   --------------------------------------------------------------------------------------------- */
.fd-page .fd-asked {
	margin: 1.3rem 0 0;
	border-top: 2px solid var(--fd-ink);
}
.fd-page .fd-ask {
	padding: 1.15rem 0 0.35rem;
	border-bottom: 1px solid var(--fd-rule);
}
.fd-page .fd-ask > h3 {
	position: relative;
	margin: 0 0 0.5rem;
	padding-left: 1.6rem;
	font-size: 1.06em;
	font-weight: 800;
	line-height: 1.35;
	letter-spacing: -0.01em;
	color: var(--fd-ink);
}
/* a pencil tick in the margin, in place of the usual question mark */
.fd-page .fd-ask > h3::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.42em;
	width: 0.85rem;
	height: 0.5rem;
	border-left: 2px solid var(--fd-tomato);
	border-bottom: 2px solid var(--fd-tomato);
	transform: rotate(-45deg);
}
.fd-page .fd-ask > :last-child { margin-bottom: 0.9rem; }
.fd-page .fd-ask p { color: var(--fd-ink-2); }
.fd-page .fd-ask p:first-of-type { color: var(--fd-ink); }

/* ---------------------------------------------------------------------------------------------
   14. Next on your list: tear-off cards with a tomato top edge
   --------------------------------------------------------------------------------------------- */
.fd-page .fd-cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 14.5rem), 1fr));
	gap: 1rem;
	margin: 1.1rem 0 0;
	padding: 0;
	list-style: none;
}
.fd-page .fd-cards li { margin: 0; }
.fd-page .fd-cards a {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	height: 100%;
	padding: 1.4rem 1.15rem 1.1rem;
	background: var(--fd-card);
	border: 1px solid var(--fd-rule);
	border-top: 6px solid var(--fd-tomato);
	border-radius: 6px 6px 12px 12px;
	box-shadow: var(--fd-lift);
	color: var(--fd-ink);
	text-decoration: none;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
/* the perforation under the torn edge */
.fd-page .fd-cards a::before {
	content: "";
	position: absolute;
	left: 0.85rem;
	right: 0.85rem;
	top: 0.55rem;
	border-top: 2px dotted var(--fd-perf);
}
.fd-page .fd-cards strong {
	font-family: var(--fd-head-font);
	font-size: 1.08em;
	font-weight: 800;
	line-height: 1.25;
	letter-spacing: -0.01em;
	color: var(--fd-ink);
}
.fd-page .fd-cards span { font-size: 0.9em; line-height: 1.45; color: var(--fd-ink-2); }
.fd-page .fd-cards a:hover { transform: translateY(-2px); box-shadow: 0 18px 30px -22px rgba(29, 36, 64, 0.6); }
.fd-page .fd-cards a:hover strong { color: var(--fd-blue); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.18em; }

/* ---------------------------------------------------------------------------------------------
   15. Guide directories (homepage, hubs, all guides)
   --------------------------------------------------------------------------------------------- */
.fd-page .fd-guides { margin: 1rem 0 1.4rem; padding: 0; list-style: none; }
.fd-page .fd-guides li {
	position: relative;
	margin: 0;
	padding: 0.55rem 0 0.55rem 1.55rem;
	border-bottom: 1px solid var(--fd-rule);
	line-height: 1.5;
	break-inside: avoid;
}
/* a small ticket as the bullet */
.fd-page .fd-guides li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 1.02em;
	width: 0.85rem;
	height: 0.58rem;
	border-radius: 2px;
	background:
		radial-gradient(circle at 0 50%, var(--fd-paper) 0.13rem, transparent 0.15rem),
		radial-gradient(circle at 100% 50%, var(--fd-paper) 0.13rem, transparent 0.15rem),
		var(--fd-mustard);
}
.fd-page .fd-guides a { font-weight: 800; }
@media (min-width: 700px) {
	.fd-page .fd-guides { columns: 2; column-gap: 2.2rem; }
}

/* ---------------------------------------------------------------------------------------------
   16. Care line
   --------------------------------------------------------------------------------------------- */
.fd-page .fd-care { padding-top: 1.1rem; border-top: 2px dashed var(--fd-perf); }
.fd-page .fd-care .fd-small { margin: 0; }
.fd-page .fd-next + .fd-care { margin-top: 2.6rem; }

/* ---------------------------------------------------------------------------------------------
   17. Calculators (built by assets/calc.js inside every empty div.fd-calc)
   --------------------------------------------------------------------------------------------- */
.fd-page .fd-calc {
	margin: 1.8rem 0 2rem;
	background: var(--fd-card);
	border: 1px solid var(--fd-rule);
	border-radius: var(--fd-radius);
	box-shadow: var(--fd-lift);
	overflow: hidden;
}
.fd-page .fd-calc:empty { display: none; } /* no script: no empty box */
.fd-page .fd-calc__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.15rem 1rem;
	padding: 0.8rem 1.2rem 0.75rem;
	background: var(--fd-mustard-soft);
	border-bottom: 2px dashed var(--fd-perf);
}
.fd-page .fd-calc__name {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	margin: 0;
	font-family: var(--fd-head-font);
	font-size: 1.08em;
	font-weight: 800;
	letter-spacing: -0.01em;
	line-height: 1.3;
	color: var(--fd-ink);
}
.fd-page .fd-calc__name::before {
	content: "";
	flex: 0 0 auto;
	width: 0.95rem;
	height: 1.1rem;
	border: 2px solid currentColor;
	border-radius: 3px;
	background: linear-gradient(currentColor, currentColor) 50% 0.2rem / 60% 2px no-repeat, linear-gradient(currentColor, currentColor) 50% 0.45rem / 60% 2px no-repeat, linear-gradient(currentColor, currentColor) 50% 0.7rem / 60% 2px no-repeat;
}
.fd-page .fd-calc__hint { margin: 0; font-size: 0.82em; line-height: 1.4; color: var(--fd-ink-2); }
.fd-page .fd-calc__body { display: grid; grid-template-columns: minmax(0, 1fr); }
.fd-page .fd-calc__rows { padding: 0.35rem 1.2rem 0.9rem; }
.fd-page .fd-calc__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.85rem;
	margin: 0;
	padding: 0.6rem 0;
	border-bottom: 1px solid var(--fd-rule);
	cursor: pointer;
}
.fd-page .fd-calc__row:last-child { border-bottom-color: transparent; }
.fd-page .fd-calc__label { min-width: 0; font-size: 0.92em; font-weight: 700; line-height: 1.3; color: var(--fd-ink); }
.fd-page .fd-calc__label small { display: block; margin-top: 0.1rem; font-size: 0.86em; font-weight: 600; color: var(--fd-ink-2); }
.fd-page .fd-calc__field {
	display: inline-flex;
	align-items: stretch;
	flex: 0 0 auto;
	width: 9.2rem;
	border: 1.5px solid var(--fd-perf);
	border-radius: 9px;
	background: #fff;
	overflow: hidden;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.fd-page .fd-calc__field--pick { width: auto; max-width: 100%; }
.fd-page .fd-calc__field--pick select { flex: 0 1 auto; width: auto; }
.fd-page .fd-calc__field:focus-within { border-color: var(--fd-blue); box-shadow: 0 0 0 3px rgba(47, 85, 181, 0.22); }
.fd-page .fd-calc__unit {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	padding: 0 0.55rem;
	background: var(--fd-paper-2);
	color: var(--fd-ink-2);
	font-size: 0.8em;
	font-weight: 800;
	white-space: nowrap;
}
.fd-page .fd-calc input,
.fd-page .fd-calc select {
	flex: 1 1 auto;
	width: 100%;
	min-width: 0;
	height: auto;
	margin: 0;
	padding: 0.48rem 0.6rem;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	color: var(--fd-ink);
	font: inherit;
	font-size: 1em;
	font-weight: 800;
	line-height: 1.3;
	text-align: right;
	font-variant-numeric: tabular-nums;
	-moz-appearance: textfield;
	appearance: textfield;
}
.fd-page .fd-calc input:focus,
.fd-page .fd-calc select:focus { outline: none; }
.fd-page .fd-calc input::-webkit-outer-spin-button,
.fd-page .fd-calc input::-webkit-inner-spin-button { margin: 0; -webkit-appearance: none; }
.fd-page .fd-calc select {
	padding-right: 1.9rem;
	text-align: left;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%235A6079' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 0.6rem center / 0.7rem no-repeat;
}

.fd-page .fd-calc__sheet {
	padding: 1rem 1.2rem 1.2rem;
	background: var(--fd-paper-2);
	border-top: 2px dashed var(--fd-perf);
}
.fd-page .fd-calc__lines { margin: 0 0 1.1rem; padding: 0; list-style: none; }
.fd-page .fd-calc__lines li {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.1rem 0.9rem;
	margin: 0;
	padding: 0.38rem 0;
	border-bottom: 1px dotted var(--fd-perf);
	font-size: 0.9em;
	line-height: 1.4;
	color: var(--fd-ink-2);
}
.fd-page .fd-calc__lines b { margin-left: auto; text-align: right; white-space: nowrap; color: var(--fd-ink); font-weight: 800; font-variant-numeric: tabular-nums; }

/* the stamped total */
.fd-page .fd-calc__stamp {
	display: inline-flex;
	flex-direction: column;
	align-items: flex-start;
	margin: 0.2rem 0 0 0.25rem;
	padding: 0.55rem 1.05rem 0.6rem;
	border: 3px double currentColor;
	border-radius: 12px;
	transform: rotate(-1.5deg);
	transform-origin: left center;
	color: var(--fd-teal-text);
	background: rgba(14, 154, 140, 0.08);
}
.fd-page .fd-calc__stamp--down { color: var(--fd-tomato-text); background: rgba(228, 87, 46, 0.08); }
.fd-page .fd-calc__stamp-label { font-size: 0.72em; font-weight: 800; letter-spacing: 0.09em; line-height: 1.3; text-transform: uppercase; }
.fd-page .fd-calc__stamp-figure {
	font-family: var(--fd-head-font);
	font-size: 2.05em;
	font-weight: 800;
	line-height: 1.08;
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums;
}
.fd-page .fd-calc__stamp-extra { font-size: 0.8em; font-weight: 700; line-height: 1.3; }
.fd-page .fd-calc__stamp-extra[hidden] { display: none; }
.fd-page .fd-calc__note { margin: 1rem 0 0; font-size: 0.88em; line-height: 1.5; color: var(--fd-ink); }

@media (min-width: 760px) {
	.fd-page .fd-calc__body { grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); }
	.fd-page .fd-calc__sheet { border-top: 0; border-left: 2px dashed var(--fd-perf); }
}

/* ---------------------------------------------------------------------------------------------
   18. Phones (down to 360px wide)
   --------------------------------------------------------------------------------------------- */
@media (max-width: 544px) {
	.fd-page .fd-lede { font-size: 1.04em; }
	.fd-page .fd-stamp { font-size: 0.78em; }
	.fd-page .fd-glance ul { gap: 0 1.6rem; }
	.fd-page .fd-glance li { flex-basis: 8rem; font-size: 0.84em; }
	.fd-page .fd-glance li strong { font-size: 1.75em; }
	.fd-page .fd-agenda { padding: 0.95rem 1rem 0.45rem; }
	.fd-page .fd-grid { font-size: 0.84em; }
	.fd-page .fd-grid th,
	.fd-page .fd-grid td { padding: 0.55rem 0.6rem; }
	.fd-page .fd-grid thead th { min-width: 5.5rem; }
	.fd-page .fd-grid tbody td:first-child { min-width: 7.5rem; }
	/* tables of figures scroll sideways with their first column held in place */
	.fd-page .fd-grid[data-num] th:first-child,
	.fd-page .fd-grid[data-num] td:first-child { position: sticky; left: 0; z-index: 1; }
	.fd-page .fd-grid[data-num] td:first-child { background: var(--fd-card); box-shadow: inset -1px 0 0 var(--fd-rule); }
	.fd-page .fd-grid[data-num] tbody tr:nth-child(even) td:first-child { background: #F4EEE3; }
	.fd-page .fd-grid[data-num] thead th:first-child { background: var(--fd-ink); }
	/* tables of words become one card per row, each value under its column label */
	.fd-page .fd-grid[data-stack] { font-size: 0.93em; }
	.fd-page .fd-grid[data-stack] thead {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip: rect(0 0 0 0);
		clip-path: inset(50%);
		white-space: nowrap;
		border: 0;
	}
	.fd-page .fd-grid[data-stack],
	.fd-page .fd-grid[data-stack] tbody,
	.fd-page .fd-grid[data-stack] tr,
	.fd-page .fd-grid[data-stack] td { display: block; width: 100%; }
	.fd-page .fd-grid[data-stack] tr { padding: 0.85rem 0.95rem 0.8rem; border-top: 1px solid var(--fd-rule); }
	.fd-page .fd-grid[data-stack] tbody tr:first-child { border-top: 0; }
	.fd-page .fd-grid[data-stack] tbody td { min-width: 0; padding: 0.1rem 0 0.45rem; border: 0; }
	.fd-page .fd-grid[data-stack] tbody td:first-child {
		padding-bottom: 0.5rem;
		font-family: var(--fd-head-font);
		font-size: 1.07em;
		font-weight: 800;
		line-height: 1.3;
		letter-spacing: -0.01em;
	}
	.fd-page .fd-grid[data-stack] td + td::before {
		content: attr(data-label);
		content: attr(data-label) / "";
		display: block;
		margin-bottom: 0.1rem;
		font-family: var(--fd-body-font);
		font-size: 0.74em;
		font-weight: 800;
		line-height: 1.4;
		letter-spacing: 0.05em;
		text-transform: uppercase;
		color: var(--fd-ink-2);
	}
	.fd-page .fd-grid[data-stack] td.fd-good,
	.fd-page .fd-grid[data-stack] td.fd-warn { margin: 0.15rem 0 0.45rem; padding: 0.4rem 0.65rem 0.45rem; border-radius: 8px; }
	.fd-page .fd-grid[data-stack] td.fd-good::before { color: var(--fd-teal-text); }
	.fd-page .fd-grid[data-stack] td.fd-warn::before { color: var(--fd-tomato-text); }
	.fd-page .fd-steps > li { padding-left: 4.1rem; }
	.fd-page .fd-steps > li::before,
	.fd-page .fd-steps > li::after { width: 3rem; }
	.fd-page .fd-steps > li { background-position: 1.45rem 4.15rem; }
	.fd-page .fd-pin { padding: 1.2rem 1.05rem 1.05rem; }
	.fd-page .fd-sum { padding: 0.75rem 0.85rem; font-size: 0.95em; }
	.fd-page .fd-chart { padding: 0.4rem 0.4rem 0.8rem; }
	.fd-page .fd-ask { padding-top: 0.95rem; }
	.fd-page .fd-ask > h3 { font-size: 1.02em; }
	.fd-page .fd-calc__head { padding: 0.75rem 0.95rem 0.7rem; }
	.fd-page .fd-calc__rows { padding: 0.25rem 0.95rem 0.8rem; }
	.fd-page .fd-calc__sheet { padding: 0.9rem 0.95rem 1.05rem; }
	.fd-page .fd-calc__field { width: 7.9rem; }
	.fd-page .fd-calc input { padding: 0.45rem 0.5rem; }
	.fd-page .fd-calc__lines li { font-size: 0.86em; }
	.fd-page .fd-calc__stamp-figure { font-size: 1.8em; }
}
@media (max-width: 380px) {
	.fd-page .fd-calc__row { gap: 0.6rem; }
	.fd-page .fd-calc__field { width: 7.1rem; }
	.fd-page .fd-calc__unit { padding: 0 0.4rem; }
	.fd-page .fd-glance li strong { font-size: 1.55em; }
}

/* ---------------------------------------------------------------------------------------------
   19. Motion and print
   --------------------------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.fd-page *,
	.fd-page *::before,
	.fd-page *::after { transition: none !important; }
	.fd-page .fd-cards a:hover { transform: none; }
}

@media print {
	.fd-page { color: #000; font-size: 11pt; }
	.fd-page .fd-sheet { max-width: none; }
	.fd-page .fd-trail,
	.fd-page .fd-top,
	.fd-page .fd-text { max-width: none; }
	.fd-page .fd-text { margin-top: 1.4rem; }
	.fd-page a { color: #000; }
	.fd-page .fd-text p a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.85em; }
	.fd-page .fd-glance,
	.fd-page .fd-agenda,
	.fd-page .fd-scroll,
	.fd-page .fd-chart,
	.fd-page .fd-cards a,
	.fd-page .fd-calc { box-shadow: none !important; filter: none !important; }
	.fd-page .fd-scroll { overflow: visible; border-color: #999; }
	.fd-page .fd-grid thead th { background: #fff !important; color: #000 !important; border-bottom: 2px solid #000; }
	.fd-page .fd-grid tbody tr:nth-child(even) { background: none; }
	.fd-page .fd-date,
	.fd-page .fd-glance__title { background: none; border: 1px solid #000; }
	.fd-page .fd-pin { background: none; border: 1px solid #999; filter: none; }
	.fd-page .fd-pin::before,
	.fd-page .fd-pin::after,
	.fd-page .fd-calc__hint { display: none; }
	.fd-page .fd-ticks li::before,
	.fd-page .fd-steps > li::before,
	.fd-page .fd-stamp::before { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
	.fd-page .fd-calc__stamp { transform: none; }
	.fd-page .fd-chart,
	.fd-page .fd-pin,
	.fd-page .fd-sum,
	.fd-page .fd-glance,
	.fd-page .fd-calc,
	.fd-page .fd-grid tr,
	.fd-page .fd-steps > li,
	.fd-page .fd-cards li { break-inside: avoid; }
	.fd-page h2,
	.fd-page h3 { break-after: avoid; }
	.fd-page .fd-ask { break-inside: avoid; }
	.fd-page .fd-cards a:hover { transform: none; }
}