/**
 * Homepage.
 *
 * ⚠ TOKENS FROM ce-brand.css, NEVER LITERALS. That file is enqueued as this one's dependency, so
 * its custom properties are guaranteed to be defined and ordered before these rules. A hex code
 * typed here is a colour that stops following the brand the next time the brand moves — which has
 * already happened once on this site, when a marketing graphic's red was taken for the mark.
 */

.ce-home {
	font-family: var( --ce-font-sans );
	color: var( --ce-brand-ink );
}

/**
 * ⚠ THE LAST 40px OF THE FULL-BLEED, AND IT IS IN TWO PLACES. Home_Page puts this page on Astra's
 * `page-builder` layout, which drops the theme's 1240px content cap — but not the padding. The
 * content container keeps 20px a side and the article inside it keeps another 20px, so the bands
 * stopped 20px short of each edge even after the cap was gone. On the hero that reads as a white
 * sliver down both sides of the blue the board runs edge to edge.
 *
 * Zeroing only the container looked like it had worked, because the band measurement — 1180 — was
 * already correct from the cap being dropped; it was the SECTION width, 1320 against a 1360
 * viewport, that still named the second 20px. Measure the thing whose edge is wrong.
 *
 * The article half also has to OUT-SPECIFY the theme, not merely come after it. Astra sets that
 * padding from an inline block through `.ast-single-post.ast-page-builder-template .site-main >
 * article` — three classes and an element. A tidy `.ast-page-builder-template .ast-article-single`
 * is two classes, so it lost, silently, and the section stayed 1320 with the rule sitting in the
 * CSSOM looking applied. The selector here matches that weight and wins on order instead.
 *
 * `padding`, not `padding-inline`: the same theme rule adds `padding-top: 2em`, which put a band of
 * white between the header and the top of the hero's blue.
 *
 * Scoped to the content area's own container and the single-post article, so the header's and
 * footer's `.ast-container` keep their padding. Safe to remove because every band here carries its
 * own gutter of at least 20px, so nothing reaches a screen edge.
 *
 * This stylesheet is enqueued only on the page this feature owns, so the rule cannot reach another.
 */
.ast-page-builder-template .site-content > .ast-container,
.ast-page-builder-template .site-main > article.ast-article-single {
	padding: 0;
}

/* ── hero ─────────────────────────────────────────────────────────────────── */

.ce-home-hero {
	background: var( --ce-brand-gradient );
	color: #fff;
}

/**
 * ⚠ THE BAND IS 1180 OF CONTENT, AND max-width ALONE DOES NOT SAY THAT. The theme sets
 * html{box-sizing:border-box} with *{box-sizing:inherit}, so every element here is border-box and a
 * bare `max-width: 1180px` counts the 72px gutters INSIDE the 1180 — the content band came out at
 * 1044 on staging, 136px short, and the hero headline and lede each wrapped onto a third line.
 *
 * It rendered correctly in a local harness only because that harness had no theme stylesheet, so
 * these boxes fell back to content-box and the band measured the 1180 the board shows. Matching a
 * design in a harness that does not carry the site's own CSS proves nothing about the site.
 *
 * So the gutter is named once and the cap is the band PLUS both gutters. The arithmetic now states
 * the intent, and it holds whatever box-sizing the page inherits.
 */
/**
 * ⚠ 1280, NOT THE BOARD'S 1180 — a deliberate divergence, Scott's call on 8 Nov 2026 looking at
 * the rendered page on a wide monitor: "We should have the page a little wider". The board file
 * still says 1180, so if the two are ever diffed again, this is the known difference and the board
 * is the one that is out of date.
 *
 * Only the GRIDS were meant to gain from it — the four price tiles, the three course cards, the
 * ceVault panel. The hero's text column gains too, and that is why `.ce-home-lede` carries a
 * reading cap below: measured at 1180 the lede already ran 80 characters a line, and at 1280 it
 * would be 87. Widening a page is not a reason to widen a paragraph.
 */
:root { --ce-band: 1280px; }

.ce-home-hero-in {
	--ce-gutter: clamp( 20px, 5vw, 72px );
	max-width: calc( var( --ce-band ) + 2 * var( --ce-gutter ) );
	margin: 0 auto;
	/* padding-block, never a shorthand: a `padding: Ypx Xpx` here is what collapses the side
	   gutter to zero the moment someone edits the vertical rhythm. */
	/* ⚠ THE HERO'S VERTICAL PADDING FOLLOWS THE VIEWPORT'S HEIGHT, NOT ITS WIDTH. 5vw tied the
	   hero's breathing room to how WIDE the monitor is, so a short laptop at 1440×768 got the
	   same 56px as a tall 1440×1440 — and the price tiles fell below the fold on exactly the
	   screens that could least afford it. vh spends the space where it exists. Scott, 9 Nov
	   2026: "I want the package cards to show without the person scrolling down". */
	padding-block: clamp( 24px, 4vh, 44px );
	padding-inline: var( --ce-gutter );
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: clamp( 24px, 4vw, 52px );
}

.ce-home-hero-copy {
	/* ⚠ 460px AND the 52px gap below are the board's, and together they decide WHERE THE HERO
	   STACKS. 460 + 408 + 52 = 920, so the row drops the card below the copy as soon as the
	   container is under 920 — about a 1020px viewport. My 420 + 408 + 48 = 876 held them side by
	   side down to ~975, which squeezed the copy to 452px and broke the headline over four lines
	   at 1000 where the board was showing two. */
	flex: 1 1 460px;
	min-width: 0;   /* without this the long h1 refuses to wrap and pushes the card off-screen */
}

.ce-home-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 7px 14px;
	border-radius: var( --ce-brand-radius-pill );
	background: rgba( 255, 255, 255, 0.16 );
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.11em;
	text-transform: uppercase;
}

.ce-home-h1 {
	font-family: var( --ce-font-display );
	/* ⚠ 600 and 1.12, measured off the board. I had 500/1.08, which reads noticeably lighter at
	   50px — the single most visible way the build drifted from the approved design. */
	font-weight: 600;
	/* ⚠ -0.005em is the board's, on `h1, h2` — Scott, 8 Nov. Ours was tighter; the course-card
	   title keeps its own -0.015em because the board sets exactly that on `.ce-tile-t`. */
	letter-spacing: -0.005em;
	/* ⚠ A FLAT 50px, like the board — not a vw clamp. The clamp resolved to 46px at a 1000px
	   viewport where the board was still 50, so the two drifted apart exactly in the band where
	   the layout is tightest. The phone size is set in the 640px block and is unaffected. */
	font-size: 50px;
	line-height: 1.12;
	text-wrap: balance;
	margin: 16px 0 14px;
	color: #fff;
}

.ce-home-lede {
	/**
	 * ⚠ NO READING CAP ON THIS PARAGRAPH, AND THAT IS DELIBERATE — DO NOT "RESTORE" ONE.
	 *
	 * I added `max-width: 62ch` when the band went to 1280, on the ordinary rule that running text
	 * stops being comfortable past about 65 characters. Rendered, it put the lede on THREE lines,
	 * short of the headline's right edge, and Scott asked for it back at two: "needs to expand to the
	 * edge of the top edge to have two lines" (8 Nov 2026).
	 *
	 * Measured at a 1920 viewport with the band at 1280 — the hero copy column is 820 wide and its
	 * right edge is 1140, the SAME edge as the h1's box:
	 *
	 *   62ch = 638px -> 3 lines      70ch = 720px -> 2 lines
	 *   78ch = 803px -> 2 lines      uncapped = 820px -> 2 lines
	 *
	 * Uncapped is what matches the ask, because it is the only one whose right edge IS the headline's.
	 * The line is not unbounded either way: the column is bounded by the band, so this paragraph can
	 * never exceed 820 however wide the window gets. The measure rule is a guideline; this is a two-
	 * line lede in a hero, not body copy, and the composition won.
	 */
	/**
	 * ⚠ 24px UNDER IT, WHICH IS THE BOARD'S, AND IT IS NOT DEAD WEIGHT EVEN THOUGH IT COLLAPSES.
	 * The hero copy is normal flow, so this margin and the badge's 30px top margin collapse to 30 —
	 * the same gap either way, which is why the difference did not show in a screenshot. It earns
	 * its place when the badge renders NOTHING: Badges::combined() returns '' when the feature flag
	 * is off or either column has no data, and with `margin: 0` the lede would then butt straight
	 * into whatever follows.
	 */
	margin: 0 0 24px;
	font-size: clamp( 15px, 1.6vw, 17.5px );
	line-height: 1.55;   /* board value */
	/* ⚠ NO MEASURE CAP, AND THAT IS THE BOARD. A 62ch cap resolved to 638px inside a 720px copy
	   column, so the lede wrapped onto THREE lines where the board shows two — the cap was doing
	   nothing but breaking the sentence a word early. The column itself is the measure here: it is
	   460px at its basis and only reaches 720 in the widest hero, and below ~640px the cap never
	   bound at all, so dropping it changes nothing on a phone. Scott, 8 Nov: two lines. */
	color: rgba( 255, 255, 255, 0.92 );
}

/**
 * ⚠ CENTRED IN THE COPY COLUMN, AS THE BOARD HAS IT. `.g-rev` on the board is
 * `margin: 30px auto 0` — the auto is the whole point. Ours sat flush left, 145px off the column's
 * centre at 1360, which reads as a stray card rather than as the hero's own proof.
 * The card carries the auto margins because the wrapper is a full-width block and the card is the
 * thing with the 430px cap. Scott asked whether it should be centred; the board already said yes.
 */
.ce-home-badge { margin-top: 30px; }
.ce-home-badge .ce-rev-combined { margin-inline: auto; }

/* ── the builder card ─────────────────────────────────────────────────────── */

.ce-home-build {
	flex: 0 1 408px;
	min-width: 0;
	background: #fff;
	border-radius: 20px;
	box-shadow: 0 24px 54px rgba( 2, 32, 70, 0.36 );
	overflow: hidden;
	color: var( --ce-brand-ink );
}

.ce-home-build-head { padding: 15px 24px 11px; }

.ce-home-build-h {
	/* ⚠ The board's tracking is on `h1, h2` GLOBALLY, and this heading is an h2 — it was the one
	   heading left on `normal`. Tighter, so the phone's one-line fit is unaffected. */
	letter-spacing: -0.005em;

	margin: 0;
	font-family: var( --ce-font-display );
	font-weight: 600;   /* board value */
	font-size: 20px;
	line-height: 1.25;
}

.ce-home-build-body {
	padding: 0 26px 22px;
	display: flex;
	flex-direction: column;
	gap: 13px;
}

.ce-home-fs { border: 0; padding: 0; margin: 0; }

.ce-home-leg {
	font-size: 13px;
	font-weight: 700;
	color: #3f5269;
	margin-bottom: 8px;
	padding: 0;
}

/* The hint was #9aa9bd and measured 2.4:1 on white — under the 4.5:1 that 13px text needs, which
   made the one line telling a broker-salesperson which option to pick the least readable on the
   card. This token is 6.5:1. */
.ce-home-hint {
	font-weight: 400;
	color: var( --ce-brand-muted );
}

.ce-home-opts {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
}

.ce-home-opt {
	display: flex;
	align-items: center;
	gap: 10px;
	/* ⚠ A GRID ITEM WILL NOT SHRINK BELOW ITS CONTENT without this. min-width defaults to auto, so
	   a 1fr track is a FLOOR, not a ceiling: at 360px the two permit pills measured 154 + 142 in a
	   268px row and "Business Bkr." ran 10px past the card edge. The page itself did not scroll, so
	   an overflow check on the document missed it entirely. */
	min-width: 0;
	/* 44px is the touch-target floor. box-sizing matters: without it min-height applies to the
	   content box and every option renders at its floor PLUS padding PLUS border. */
	box-sizing: border-box;
	min-height: 44px;
	padding: 9px 12px;   /* board value */
	border: 1.5px solid var( --ce-brand-line );
	border-radius: 12px;
	background: #fff;
	font: inherit;
	/* ⚠ 14px, MATCHING THE BOARD. I had 15 here, and in a 174px pill that one pixel is the
	   difference between "Business Broker" holding one line and breaking after "Business" — which
	   is exactly how the built page drifted from the approved design while every other dimension
	   (card 408px, button 174px, heading 20px, h1 50px) matched to the pixel. */
	font-size: 14px;
	font-weight: 600;
	color: var( --ce-brand-ink );
	text-align: left;
	cursor: pointer;
}

.ce-home-opt:hover { border-color: #cfdef2; }

.ce-home-opt:focus-visible {
	outline: 2px solid var( --ce-brand );
	outline-offset: 2px;
}

.ce-home-opt.is-on {
	border-color: var( --ce-brand );
	background: #f1f7fe;
}

.ce-home-tick {
	flex: 0 0 auto;
	/* 16px + 1.5px border a side = the board's 19px box. 18 made it 21. */
	width: 16px;
	height: 16px;
	border-radius: 4px;
	border: 1.5px solid #cfdef2;
	background: #fff;
	position: relative;
}

.ce-home-opt.is-on .ce-home-tick {
	background: var( --ce-brand );
	border-color: var( --ce-brand );
}

/* The check is drawn, not an icon font or an SVG per button: two borders rotated. */
.ce-home-opt.is-on .ce-home-tick::after {
	content: '';
	position: absolute;
	left: 5px;
	top: 1px;
	width: 5px;
	height: 10px;
	border: solid #fff;
	border-width: 0 2.2px 2.2px 0;
	transform: rotate( 45deg );
}

/* The price band, as the board draws it: a tinted footer to the card, the figure centred with a
   small raised currency glyph, the package name in brand blue, then a full-width call to action. */
.ce-home-quote {
	margin: 4px -26px -22px;
	padding: 14px 26px 16px;
	background: #f2f8ff;
	border-top: 1px solid #dde9f7;
}

.ce-home-priceline {
	margin: 0 0 3px;
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: 10px;
}

.ce-home-price {
	font-family: var( --ce-font-display );
	font-weight: 500;   /* board value; the browser default 400 read thinner */
	font-size: 40px;
	line-height: 0.95;
	font-variant-numeric: tabular-nums;
	color: var( --ce-brand-ink );
}

/* Raised and small beside the figure, never scaled by the number's own size changing. */
.ce-home-cur {
	font-size: 0.46em;
	vertical-align: 0.62em;
	font-weight: 600;
}

.ce-home-forall {
	font-size: 15px;
	font-weight: 600;
	color: var( --ce-brand-muted );
}

.ce-home-pkg {
	margin: 0 0 14px;
	font-size: 13.5px;
	line-height: 1.4;
	font-weight: 700;
	color: var( --ce-brand );
	text-align: center;
}

.ce-home-cta {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	box-sizing: border-box;
	width: 100%;
	min-height: 48px;
	padding: 15px 20px;
	border-radius: var( --ce-brand-radius-pill );
	background: var( --ce-brand );
	color: #fff;
	font-weight: 700;
	font-size: 16.5px;
	text-decoration: none;
	box-shadow: 0 8px 20px rgba( 4, 107, 210, 0.32 );
}

.ce-home-cta:hover,
.ce-home-cta:focus { background: var( --ce-brand-dark ); color: #fff; }

.ce-home-fine {
	margin: 10px 0 0;
	font-size: 12px;
	line-height: 1.45;
	/* ⚠ #8798ab on the tinted band measured 2.76:1 — the worst on the page, and this is the line
	   that carries the route to the reduced package. */
	color: var( --ce-brand-muted );
	text-align: center;
}

/* ⚠ A LINK INSIDE A SENTENCE IS STILL A TAP TARGET. Bare, this measured 17px tall — and it is the
   only route to the reduced package from the hero. inline-block with vertical padding gives it a
   real target without pushing the centred fine print off its line. */
.ce-home-fine a {
	/* ⚠ inline, NOT inline-block — this is how the board does it. Padding on an INLINE box
	   enlarges the clickable area without affecting the line box, so the hit target clears 44px
	   while the paragraph stays 17px tall. inline-block grew the paragraph to 45px and pushed the
	   card's whole bottom edge down. */
	display: inline;
	padding: 14px 4px;
	color: #46637f;
	text-decoration: underline;
}

/* ⚠ "Business Broker" does not fit a half-width pill at 390px and ran off the card edge. Both
   labels ship and the media query picks one; display:none keeps the unused one out of the
   accessibility tree too, so a screen reader reads exactly what is on screen. */
.ce-lbl-abbr { display: none; }

/**
 * ⚠ THE THIRD FORM IS SCOPED THROUGH .has-tiny, NOT APPLIED TO EVERY LABEL. Only the two permit
 * pills carry a shorter variant; `.ce-lbl-abbr` is also used by the ceVault twin rings, and hiding
 * it globally below 375 would blank those instead of shortening them.
 */
.ce-lbl-tiny { display: none; }

@media ( max-width: 640px ) {
	.ce-lbl-full { display: none; }
	/* ⚠ nowrap AND a tighter pill. Swapping the text alone was not enough: at 15px with 14px of
	   side padding the label box is 83px and "Business Bkr." needs about 95, so it still broke
	   after "Business". The abbreviation only earns its keep if it fits on ONE line. */
	.ce-lbl-abbr { display: inline; white-space: nowrap; }
	.ce-home-opt { padding-inline: 10px; gap: 8px; }   /* 14px is the base now */
}

/* The narrowest common phones. The pills overflowed the card at 360px, so the padding and the
   gap tighten here — but NOT the type. Measured once min-width:0 was in place: "Business Bkr."
   is 93px at 14px and the pill still ends 17px inside the card at 360. Dropping the label to
   13px as well bought nothing a reader would thank us for. */
@media ( max-width: 400px ) {
	.ce-home-opt { padding-inline: 8px; gap: 6px; }
}

/**
 * ⚠ THE NARROWEST PHONES GET SHORTER WORDS, NOT A DIFFERENT LAYOUT. Scott, 8 Nov, on seeing the
 * pills stacked one per row: "you had it right prior." The 2x2 grid stays; the labels give way.
 *
 * Measured at 320 with the 2x2 grid, pill box 110:
 *
 *   Property Mgmt  132  ->  Prop. Mgmt
 *   Business Bkr.  121  ->  Bus. Bkr.
 *   Salesperson    113  ->  unchanged; the tighter padding below covers its 3px
 *
 * The padding and gap come in a further 2px each because "Salesperson" has no sensible short form
 * — it is the licence's name — and 3px is all it needed.
 */
@media ( max-width: 374px ) {
	.has-tiny .ce-lbl-abbr { display: none; }
	.has-tiny .ce-lbl-tiny { display: inline; white-space: nowrap; }
	.ce-home-opt { padding-inline: 6px; gap: 4px; }
}

/**
 * ⚠ THE CTA IS SIX PIXELS SHORT AT 320, AND ONLY THERE. "Show my CE package" needs 169px; the
 * button offers width minus 40 of padding, 10 of gap and the 15px arrow, which is 163 at 320 and
 * 203 by 360. So it wrapped to two lines — the button grew to 91px tall — on the narrowest phones
 * and nowhere else.
 *
 * The side padding gives way rather than the type or the words: 16.5px is the one piece of copy on
 * this card a thumb is meant to aim at, and "Show my CE package" is the whole promise. 14px of
 * padding leaves 175 against the 169 needed.
 *
 * ⚠ 329, NOT THE 374 ABOVE. Below 326 is where it actually fails; borrowing the pill breakpoint
 * would have narrowed the button at 360 and 374, where it already fits with 30px to spare.
 */
@media ( max-width: 329px ) {
	.ce-home-cta { padding-inline: 14px; }
}

/**
 * ⚠ ABBREVIATE ONLY WHERE IT ACTUALLY DOES NOT FIT. Scott, 8 Nov: "if stacked, don't abbreviate
 * Business Broker if it fits." The switch was keyed to 640 — the point where the hero stacks — but
 * stacking does not shrink this card: it is `flex: 0 1 408px`, so from about 400px up the pill is
 * at its full width and the label has 130px to play with.
 *
 * Measured, label space against the 109px "Business Broker" needs:
 *
 *   390  two lines      410  two lines      420  ONE line
 *   430  one line       480  one line       640  one line
 *
 * ⚠ 425, NOT 401. The first cut used 401 from an arithmetic estimate of where 109px of label space
 * appears; rendered, 401 and 410 still wrapped — the estimate was two pixels optimistic and the
 * label silently took a second line inside the pill. 420 is the first width that holds one line,
 * and it does so with the label at exactly 109 in 109, so the rule starts at 425 for margin.
 * Measured, never computed: this is the second time today an estimate of a text width has been
 * wrong in the direction that looks fine in a number and bad on screen.
 *
 * Scoped to .ce-home-opt: the ceVault twin rings use these same classes and must keep the 640 rule.
 */
@media ( min-width: 425px ) and ( max-width: 640px ) {
	.ce-home-opt .ce-lbl-full { display: inline; }
	.ce-home-opt .ce-lbl-abbr { display: none; }
}

/* ── sections ─────────────────────────────────────────────────────────────── */

/* ⚠ THE FIRST SECTION UNDER THE HERO IS TIGHTER THAN THE REST. The price tiles are the one
   block that has to clear the fold; every other section is reached by scrolling anyway, so
   only this gap is bought at the expense of the page's rhythm. */
.ce-home-hero + .ce-home-sec { padding-top: clamp( 16px, 1.6vw, 24px ); }

.ce-home-sec {
	--ce-gutter: clamp( 20px, 5vw, 72px );
	max-width: calc( var( --ce-band ) + 2 * var( --ce-gutter ) );
	margin: 0 auto;
	padding-block: clamp( 34px, 4vw, 44px );
	padding-inline: var( --ce-gutter );
}

.ce-home-h2 {
	font-family: var( --ce-font-display );
	font-weight: 500;
	/* ⚠ the board's `h1, h2` tracking; this was -0.02em. */
	letter-spacing: -0.005em;
	font-size: clamp( 23px, 3vw, 32px );
	margin: 0 0 6px;
	text-wrap: balance;
}

.ce-home-sub {
	margin: 0;
	font-size: 16.5px;
	line-height: 1.55;
	color: #4a5f7d;
}

.ce-home-sec-head { text-align: center; max-width: 720px; margin: 0 auto 24px; }

/* Visually hidden, still in the accessibility tree and still a heading for the outline.
   ⚠ Never display:none or visibility:hidden here — both remove it from the tree as well as the
   screen, which turns a legitimate heading into text only a crawler sees. */
.ce-home-vh {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset( 50% );
	white-space: nowrap;
	border: 0;
}

/* ── price tiles ──────────────────────────────────────────────────────────── */

.ce-home-plan {
	display: grid;
	grid-template-columns: repeat( 4, minmax( 0, 1fr ) );
	gap: 14px;
}

.ce-home-tile {
	display: flex;
	flex-direction: column;
	gap: 5px;
	padding: 18px;
	border: 1px solid #dde7f3;
	border-radius: 16px;
	background: #fff;
	min-width: 0;
}

.ce-home-tile-k {
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var( --ce-brand-muted );
}

.ce-home-tile.is-lead .ce-home-tile-k { color: var( --ce-brand ); }

.ce-home-tile-p {
	font-size: 26px;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	line-height: 1.1;
}

.ce-home-from {
	font-size: 13px;
	font-weight: 700;
	color: var( --ce-brand-muted );
}

/* The per-CE-hour line, directly under the price, as the board has it. */
.ce-home-tile-per {
	font-size: 13.5px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var( --ce-brand-muted );
}

.ce-home-tile-l { font-size: 14px; font-weight: 700; margin-top: 2px; }

.ce-home-tile-b {
	font-size: 13px;
	line-height: 1.5;
	color: var( --ce-brand-muted );
}

/* ⚠ A TEXT LINK IS STILL A TAP TARGET. Left as a bare inline link this measured 30px tall on a
   phone — under the 44px floor, and it is the only way off these four tiles. inline-flex plus a
   min-height gives it the height without boxing it in visually. */
.ce-home-tile-a {
	margin-top: auto;
	display: inline-flex;
	align-items: flex-end;
	box-sizing: border-box;
	min-height: 44px;
	padding-top: 10px;
	font-size: 14.5px;
	font-weight: 700;
	color: var( --ce-brand );
	text-decoration: none;
}

.ce-home-tile-a:hover { text-decoration: underline; }

/* ── review quotes ────────────────────────────────────────────────────────── */

.ce-home-quotes {
	display: grid;
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	gap: 14px;
}

.ce-home-q {
	margin: 0;
	padding: 17px;
	border: 1px solid #dde7f3;
	border-radius: 14px;
	background: #fff;
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-width: 0;
}

.ce-home-stars { color: #e8a33d; font-size: 14px; letter-spacing: 2px; }

.ce-home-q blockquote {
	margin: 0;
	font-size: 14.5px;
	line-height: 1.55;
	color: #33455e;
}

.ce-home-q figcaption {
	margin-top: auto;
	font-size: 13px;
	color: #6b7f99;
}

/* ── phones ───────────────────────────────────────────────────────────────── */

@media ( max-width: 900px ) {
	.ce-home-plan { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); }
	.ce-home-quotes { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); }
}

@media ( max-width: 640px ) {
	/* ⚠ THE H1 IS SIZED TO LAND ON TWO LINES, and the bound is different on every phone.
	   Measured by stepping the size down until the line count changed: three lines until 31px at
	   390, until 30px at 375, and until 28px at 360 — so one fixed value either wastes the big
	   phones or breaks the small ones. 7.7vw tracks the available width (viewport less the 40px
	   gutter), floored at 26 and capped at 31 so it cannot grow back into three lines. */
	/* ⚠ THE FLOOR HAS TO SIT BELOW WHAT 7.7vw GIVES ON THE NARROWEST PHONE, or it overrides the
	   scaling and puts the size back up. A 26px floor resolved to 26px at 320 — where two lines
	   need 25px or less — so the headline went back to three lines on exactly the device the
	   floor was meant to protect. 22px is below 7.7vw everywhere down to 286px wide. */
	/* ⚠ THE vw TERM IS WHAT DECIDES THE LINE COUNT, AND 7.7 WAS TOO BIG. Scott asked for the
	   headline on TWO lines on a phone; 7.7vw gave 30px at 390 (THREE lines) and 24.6px at 320
	   (FOUR). Measured, with the copy column at viewport-40: two lines need <=27px at 390 and
	   <=21.5px at 320. 6.7vw gives 26.1px and 21.4px, so both hold, and it stays under the
	   27px/350px limit up through 430. The 20px floor is only a backstop below ~313px, where
	   the vw term would otherwise go under it; from 320 up the vw term governs.
	   ⚠ Checking only 320 is how this was missed the first time — the floor bound there, so the
	   vw term was never exercised at the width most phones actually report. */
	.ce-home-h1 { font-size: clamp( 20px, 6.7vw, 31px ); }

	/**
	 * ⚠ THE BOARD'S PHONE PADDINGS, WHICH OUR CLAMPS MISSED BY A FEW PIXELS. The board sets
	 * `.hero-pad { padding: 34px 20px 32px }` and `.sec-pad { padding: 38px 20px }`. Our clamps
	 * bottom out at 34 for both, so the hero carried 2px too much beneath it and every section 4px
	 * too little above. Side padding already agreed at 20.
	 */
	.ce-home-hero-in { padding-bottom: 32px; }
	/* ⚠ 18px AND no ellipsis, together — neither alone is enough. Measured at 20px Playfair the
	   heading needs 291px without the ellipsis and 308px with it, against 302px of card at a
	   390px phone, 287px at 375 and 272px at 360. Dropping the ellipsis alone wins one line on
	   a 390 only; it still wraps on an SE and on most Android. 291 x 18/20 = 262px clears all
	   three. */
	/**
	 * ⚠ 18px DOES NOT FIT EVERY PHONE, AND 320 WAS NOT THE ONLY ONE. The heading box is the viewport
	 * less the hero's 20px gutters and the card's 24px padding — W-88 — and the string needs 295px
	 * at 18px. So 18px holds only from ~383px up: 390, 393, 412, 414 and 430 are fine, but 375
	 * (iPhone SE and 8) and 360 (most Androids) wrapped to two lines, as did 320.
	 *
	 * The required size is 18(W-88)/295, which is a line, not a ratio — a plain vw term cannot
	 * follow it because of the fixed 88px. `6vw - 5.4px` tracks it with a little to spare and the
	 * cap keeps Scott's 18px wherever it genuinely fits:
	 *
	 *   320 -> 13.8 (needs <=14.1) · 360 -> 16.2 (<=16.6) · 375 -> 17.1 (<=17.5) · 390+ -> 18
	 *
	 * Still no ellipsis here; that is desktop-only and is what bought the single line to begin with.
	 */
	.ce-home-build-h { font-size: clamp( 13px, calc( 6vw - 5.4px ), 18px ); }
	.ce-home-quotes { grid-template-columns: 1fr; }
	/* One quote on a phone. The rest stay in the markup for the crawler and for wider screens. */
	.ce-home-q:nth-of-type( n + 2 ) { display: none; }
	/* The blurb goes on a phone; the price, the per-hour line and the label carry the tile. */
	.ce-home-tile-b { display: none; }
}

/* ── the three course tiles ───────────────────────────────────────────────── */

.ce-home-tiles {
	display: grid;
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	gap: 18px;
}

.ce-home-tile-ph {
	position: relative;
	display: flex;
	min-height: 470px;
	border-radius: 20px;
	overflow: hidden;
}

/* ⚠ display:contents, so <picture> does not become a box between the tile and the absolutely
   positioned image inside it. Without this the photo has no positioned ancestor to fill. */
.ce-home-tile-ph picture { display: contents; }

.ce-home-ph {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	filter: saturate( 1.05 ) contrast( 1.04 );
}

/* The scrim is what makes white text legible over a photograph whose brightness we do not
   control. It is heaviest at the bottom, where the text sits. */
.ce-home-scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient( 180deg,
		rgba( 2, 22, 52, 0.46 ) 0%,
		rgba( 2, 22, 52, 0.10 ) 18%,
		rgba( 2, 22, 52, 0.52 ) 40%,
		rgba( 2, 22, 52, 0.86 ) 62%,
		rgba( 2, 22, 52, 0.97 ) 100% );
}

.ce-home-tile-ph.is-pkg { background: var( --ce-brand-gradient ); }

.ce-home-ph-pad {
	position: relative;
	z-index: 1;
	flex: 1;
	min-width: 0;
	padding: 24px 26px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 18px;
}

/* ⚠ THE PACKAGE CARD HAS NO PHOTOGRAPH, so space-between is wrong for it. On the other two the
   gap between the chip and the copy IS the picture; here it is nothing at all, which left the
   heading floating a third of the way down an otherwise empty card. Scott, 9 Nov 2026: "move the
   heading and body up." The foot still sits at the bottom — margin-top: auto on the foot keeps the
   price and the button on the row's shared line — so only the heading and the ticks move. */
.ce-home-tile-ph.is-pkg .ce-home-ph-pad { justify-content: flex-start; gap: 30px; }

/* ⚠ margin-top: auto ON THE FOOT PUSHED THE WHOLE FOOT DOWN, heading and ticks with it, which is
   the gap Scott saw twice. The foot holds everything below the chip, so the thing that has to sink
   is its LAST ROW, not the block. It stretches instead and distributes its own rows: heading and
   ticks at the top, price and button at the bottom, where they line up with the other two cards. */
.ce-home-tile-ph.is-pkg .ce-home-ph-foot { flex: 1; align-content: space-between; }

/* ⚠ THE FOOT IS A GRID SO THE PRICE AND THE BUTTON SHARE THE LAST LINE. Scott, 9 Nov 2026:
   "place the button on the lower right hand corner of each of the boxes and lower the price to the
   bottom as well — in line." Title and blurb span both tracks; the price takes the left of the
   final row and the button the right, both aligned to the baseline of the card's foot.

   ⚠ NO MARKUP CHANGED. The three cards do not share a shape — two carry a blurb and a per-course
   price, the package carries a tick list and a stacked price block — so placing by grid COLUMN
   rather than rewriting each card is what lets one rule serve all three. */
.ce-home-ph-foot {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 10px 14px;
	align-items: end;
}
.ce-home-ph-foot .ce-home-ph-t,
.ce-home-ph-foot .ce-home-ph-b,
.ce-home-ph-foot .ce-home-ticks { grid-column: 1 / -1; }
.ce-home-ph-foot .ce-home-ph-p { grid-column: 1; justify-self: start; align-self: end; min-width: 0; }

/* ⚠ BACK IN COLUMN ONE WITH THE OTHERS. It spanned both tracks while it carried three lines; with
   the saving moved into the ticks and "nothing else to buy" gone, the block is a figure and a short
   note, so it fits beside the button exactly as "$20 per course" does — and the three prices sit on
   one line across the row, which is what Scott asked for. */
.ce-home-ph-foot .ce-home-pkg-price { grid-column: 1; justify-self: start; align-self: end; min-width: 0; }
.ce-home-ph-foot .ce-home-wbtn { grid-column: 2; justify-self: end; align-self: end; margin-top: 0; }

.ce-home-chip {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	padding: 7px 13px;
	border-radius: var( --ce-brand-radius-pill );
}

/* The live dot on the hero chip. Green, and 8px — the red one on the board belongs to the
   renewal-deadline strip, which is a different thing entirely. */
.ce-home-dot {
	display: block;
	flex: 0 0 auto;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #5fe09b;
	box-shadow: 0 0 8px rgba( 95, 224, 155, .75 );
	/* ⚠ THE DESIGN SYSTEM'S PATTERN, NOT A SECOND ONE. ce-brand.css owns `ce-brand-pulse` and
	   states what it means — a steady "this is live" on a small dot — so the hero chip reuses those
	   keyframes rather than declaring its own. The glow above is the same shape as .ce-brand-dot's,
	   recoloured to the green: the brand blue would disappear on this dot. Scott, 9 Nov 2026:
	   "the green dot in the pill should be pulsating as set in the rules for other pills". */
	animation: ce-brand-pulse 2s ease-in-out infinite;
}

/* ⚠ MOTION IS A PREFERENCE, NOT A DECORATION — the same rule ce-brand.css applies to its own
   dot. Repeated here because this dot carries its own animation declaration; an audience buying a
   legal requirement is not a niche one for reduced motion. */
@media ( prefers-reduced-motion: reduce ) {
	.ce-home-dot { animation: none; }
}

.ce-home-chip.is-light { background: rgba( 255, 255, 255, 0.93 ); color: var( --ce-brand-deep ); }

/* ⚠ THE HERO CHIP IS ITS OWN SIZE ON THE BOARD — 13px/600 with light tracking, not the
   11px/800 of the chips on the photo tiles. Sharing one class made the hero chip two steps
   smaller and much heavier than approved. */
.ce-home-hero .ce-home-chip {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.04em;
	padding: 7px 15px;
	background: rgba( 255, 255, 255, 0.18 );   /* board value; 0.16 sat a shade darker */
}
.ce-home-chip.is-ghost { background: rgba( 255, 255, 255, 0.19 ); color: #fff; }

.ce-home-ph-t {
	margin: 0;
	font-family: var( --ce-font-display );
	font-weight: 500;
	letter-spacing: -0.015em;
	/* ⚠ 24, NOT 25. One point buys the package heading a single line: 353px against the 363
	   available, where 25px measured 368 and forced a break that left half the card empty. */
	font-size: 24px;
	color: #fff;
	text-shadow: 0 1px 3px rgba( 1, 14, 34, 0.45 );
}

.ce-home-ph-b {
	margin: 0;
	font-size: 14.5px;
	line-height: 1.6;
	color: rgba( 255, 255, 255, 0.9 );
	text-shadow: 0 1px 3px rgba( 1, 14, 34, 0.45 );
}

.ce-home-ph-p {
	font-size: 20px;
	font-weight: 800;
	color: #fff;
	font-variant-numeric: tabular-nums;
	text-shadow: 0 1px 3px rgba( 1, 14, 34, 0.45 );
}

.ce-home-per { font-size: 13.5px; font-weight: 600; color: rgba( 255, 255, 255, 0.74 ); }

/* ⚠ SIZED TO ITS LABEL, NOT STRETCHED TO A CAP. `width: 100%` with `max-width: 200px` made every
   one of these 200px wide whatever it said, so "Browse courses" and "See the calendar" both read
   as slabs on a 415px card. Scott, 9 Nov 2026: "the buttons are way too fat." Width is now the
   label plus its padding.

   ⚠ 40px, AND NOT LOWER WITHOUT A DECISION. 44px is the WCAG 2.2 target-size floor and these are
   the only way into the calendar and the catalogue from this row. 40 reads noticeably slimmer
   while staying within the AA threshold of 24px and close to the AAA one; going to 34 would clear
   the look and fail the guideline. */
.ce-home-wbtn {
	align-self: center;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-height: 40px;
	margin-top: 10px;
	padding: 9px 20px;
	border-radius: var( --ce-brand-radius-pill );
	background: #fff;
	color: var( --ce-brand-deep );
	font-size: 13.5px;
	font-weight: 700;
	text-decoration: none;
}

.ce-home-ticks {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 9px;
}

.ce-home-ticks li {
	position: relative;
	padding-left: 26px;
	font-size: 14px;
	line-height: 1.5;
	color: rgba( 255, 255, 255, 0.93 );
}

/* The tick is drawn rather than an icon per item: a filled disc with a check in it. */
.ce-home-ticks li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 1px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: rgba( 255, 255, 255, 0.2 );
}

.ce-home-ticks li::after {
	content: '';
	position: absolute;
	left: 5.5px;
	top: 4px;
	width: 4px;
	height: 8px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate( 45deg );
}

/* ⚠ THE FIGURE AND ITS NOTE SHARE A LINE, the saving sits under them. Scott, 9 Nov 2026: "all 36
   hours nothing else to buy should be to the right of the price." Stacked, the block ran three
   deep and read as three separate claims; beside the figure the note is plainly a caption of it.
   Baseline alignment, not centre: a 32px numeral and a 13.5px line centred look misaligned. */
.ce-home-pkg-price {
	display: grid;
	grid-template-columns: auto minmax( 0, 1fr );
	gap: 4px 12px;
	align-items: baseline;
	margin-top: 2px;
}
.ce-home-pkg-price .ce-home-ph-save { grid-column: 1 / -1; }

.ce-home-ph-big {
	font-size: 32px;
	font-weight: 800;
	line-height: 1.05;
	color: #fff;
	font-variant-numeric: tabular-nums;
}

.ce-home-ph-note { font-size: 13.5px; font-weight: 600; color: rgba( 255, 255, 255, 0.76 ); }

.ce-home-ph-save { font-size: 13.5px; line-height: 1.5; color: rgba( 255, 255, 255, 0.84 ); }
.ce-home-ph-save strong { color: #fff; font-weight: 800; }

/* ── ceVault ──────────────────────────────────────────────────────────────── */

.ce-home-vault {
	display: flex;
	flex-wrap: wrap;
	border: 1px solid #e3ecf8;
	border-radius: 20px;
	background: #fff;
	overflow: hidden;
}

.ce-home-vault-copy {
	/* ⚠ EQUAL BASES. 420/360 resolved to 619/560 at 1180 — the LIGHTER column was the wider one,
	   which is what made the row look lopsided. Equal bases give 590/590.
	   ⚠ The row wraps on the CONTAINER width, not the viewport: the section's gutter is 5vw a side,
	   so the container is about 0.9 x viewport and 450+450 can no longer fit at roughly 1000px of
	   viewport, NOT 900. The divider rule has to use that number — see the note on .ce-home-gauge.
	   I had this wrong first time and it left 900-1000px rendering a stacked row with a vertical
	   divider down one side. */
	flex: 1 1 450px;
	/* ⚠ border-box, OR THE BASIS LIES. flex-basis sizes the CONTENT box, so without this the
	   32px of side padding is added on top: each column asks for 514px, the pair needs 1028, and
	   the row wrapped at 1040 while the arithmetic said it had 934 to spare. That is what put a
	   stacked row next to a left-hand divider between 1000 and 1140. */
	box-sizing: border-box;
	min-width: 0;
	padding: 30px 32px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	align-items: flex-start;
	/* ⚠ THE COPY SITS AT THE TOP AND THE BUTTON AT THE BOTTOM, rather than the block floating in
	   the middle. Centring the whole column fixed the "ran out of content" look but left the call
	   to action adrift halfway down; pinning it to the bottom uses the height at BOTH ends and
	   lands it on roughly the same line as the gauge's caption opposite. See .ce-home-cta below. */
	justify-content: flex-start;
}

/* The list carries four items against a 470px column; a little more air between them uses the
   height rather than leaving it at the bottom, and makes each line easier to pick out. */
.ce-home-vault-copy .ce-home-bullets { gap: 10px; }

/* ⚠ margin-top:auto, NOT a fixed margin. The copy above it is variable — the lede wraps to two
   lines at one width and three at another — so any typed gap is right at exactly one size. auto
   eats whatever is left, which is what puts the button on the floor of the column at every width. */
.ce-home-vault-copy .ce-home-cta { margin-top: auto; }

.ce-home-kick {
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var( --ce-brand );
}

/* The mark is blue. It was briefly red here, taken from a marketing graphic — the 2026 logo is
   blue, and a second brand colour on one word reads as a mistake. */
.ce-home-ce { color: var( --ce-brand ); }

.ce-home-bullets {
	margin: 0;
	padding-left: 18px;
	display: flex;
	flex-direction: column;
	gap: 7px;
	font-size: 14.5px;
	line-height: 1.5;
	color: #44576f;
}

.ce-home-cta.is-inline { width: auto; min-height: 44px; padding: 11px 26px; font-size: 16px; box-shadow: none; }

.ce-home-gauge {
	flex: 1 1 450px;
	box-sizing: border-box;   /* see the note on .ce-home-vault-copy */
	min-width: 0;
	background: #f5f9ff;
	border-left: 1px solid #e3ecf8;
	padding: 30px 32px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.ce-home-arc { position: relative; width: 100%; }
.ce-home-arc svg { width: 100%; display: block; }

/* ⚠ The readout is HTML over the SVG, not <text> inside it, and its type is a share of the gauge's
   own width so the figure scales with the arc instead of swamping it on a phone. */
.ce-home-readout {
	position: absolute;
	inset: 0;
	container-type: inline-size;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	padding-bottom: 3%;
	pointer-events: none;
}

.ce-home-readout-n {
	display: flex;
	align-items: baseline;
	gap: 2px;
	font-family: var( --ce-font-display );
}

.ce-home-done {
	font-size: 104px;
	font-size: 21.27cqw;
	font-weight: 600;
	line-height: 0.82;
	letter-spacing: -0.03em;
	color: var( --ce-brand-ink );
}

.ce-home-of {
	font-size: 48px;
	font-size: 9.82cqw;
	font-weight: 500;
	line-height: 1;
	color: #8aa2c0;
}

.ce-home-readout-l {
	margin-top: 12px;
	margin-top: 2.45cqw;
	font-size: 14.5px;
	font-size: max( 11px, 2.97cqw );
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var( --ce-brand-muted );
}

.ce-home-twins { display: flex; gap: 11px; }

.ce-home-twin {
	flex: 1;
	min-width: 0;
	background: #fff;
	border: 1px solid #dde7f3;
	border-radius: 13px;
	padding: 12px 13px;
	display: flex;
	align-items: center;
	gap: 11px;
}

.ce-home-ring { position: relative; flex: 0 0 auto; display: block; width: 56px; height: 56px; }
.ce-home-ring svg { display: block; width: 56px; height: 56px; }

.ce-home-ring-n {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 17px;
	font-weight: 800;
	color: var( --ce-brand-ink );
	font-variant-numeric: tabular-nums;
}

.ce-home-twin-t { min-width: 0; }
.ce-home-twin-l { display: block; font-size: 13px; font-weight: 700; }

.ce-home-twin-n {
	display: block;
	margin-top: 2px;
	font-size: 11.5px;
	line-height: 1.4;
	/* ⚠ #6b7f99 measured 4.1:1 on white — under the 4.5 that 11.5px text needs. The token is
	   6.1:1. Small grey supporting text is exactly where contrast quietly fails, because it
	   still LOOKS fine to anyone who already knows what it says. */
	color: var( --ce-brand-muted );
	font-variant-numeric: tabular-nums;
}

.ce-home-sample { margin: 0; font-size: 13px; line-height: 1.5; color: var( --ce-brand-muted ); }

/* ── reviews additions ────────────────────────────────────────────────────── */

.ce-home-badge.is-centre { display: flex; justify-content: center; margin: 0 auto 26px; }
.ce-home-readall { margin: 20px 0 0; text-align: center; }

.ce-home-readall a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 44px;
	font-size: 15.5px;
	font-weight: 700;
	color: var( --ce-brand );
	text-decoration: none;
}

.ce-home-readall a:hover { text-decoration: underline; }

/* ── FAQ ──────────────────────────────────────────────────────────────────── */

.ce-home-faq { background: #f5f9ff; border-top: 1px solid #e3ecf8; }

/**
 * ⚠ THE SAME BAND ARITHMETIC AS THE OTHER THREE, AND IT WAS MISSED HERE. The board's FAQ column is
 * 860 of CONTENT; a bare `max-width: 860px` under the theme's border-box counted the gutters
 * inside it and left 724, so the questions sat 136px narrower than designed. Found by diffing the
 * board's layout values rather than its text.
 */
.ce-home-faq-in {
	--ce-gutter: clamp( 20px, 5vw, 72px );
	max-width: calc( 860px + 2 * var( --ce-gutter ) );
	margin: 0 auto;
	padding-block: clamp( 34px, 4vw, 44px );
	padding-inline: var( --ce-gutter );
}

/* The heading carries the spacing a removed subline used to provide. */
.ce-home-faq-in .ce-home-h2 { margin-bottom: 26px; }

.ce-home-faq-list { display: flex; flex-direction: column; gap: 10px; }

/* ⚠ THE PADDING BELONGS TO THE SUMMARY, NOT THE DETAILS. Clicking a <details> anywhere other
   than its <summary> does nothing, so padding on the details makes a band of the row LOOK
   clickable and not be. Measured in a width sweep: the summary was 28px tall from 430px up —
   fine for a mouse, but 768-1024 is an iPad. Moving the padding inside makes the whole row the
   target and leaves the row's height where it was. */
.ce-home-faq-q {
	background: #fff;
	border: 1px solid #dde7f3;
	border-radius: 12px;
	padding: 0 20px;
}

.ce-home-faq-q summary {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 14px;
	box-sizing: border-box;
	min-height: 56px;
	padding: 14px 0;
	font-size: 16.5px;
	font-weight: 700;
	color: var( --ce-brand-ink );
	cursor: pointer;
	list-style: none;
}

.ce-home-faq-q summary::-webkit-details-marker { display: none; }

/* A drawn chevron that turns when the item opens — no icon font, no script. */
.ce-home-chev {
	flex: 0 0 auto;
	width: 10px;
	height: 10px;
	border: solid #6b7f99;
	border-width: 0 2.2px 2.2px 0;
	transform: rotate( 45deg ) translate( -2px, -2px );
	transition: transform 0.15s;
}

.ce-home-faq-q[open] .ce-home-chev { transform: rotate( -135deg ) translate( -2px, -2px ); }

.ce-home-faq-a { font-size: 15.5px; line-height: 1.65; color: #44576f; }
.ce-home-faq-a p { margin: 0 0 16px; }   /* the details no longer carries the bottom padding */

/* ── need assistance ──────────────────────────────────────────────────────── */

/* ⚠ THREE CARDS, EVEN THIRDS, AND THEY STRETCH. align-items defaults to stretch here on
   purpose: the newsletter card is a form and is taller than the two link cards, and three cards
   of different heights in a row reads as a mistake. The link cards push their button to the
   bottom with margin-top:auto so the three bottom edges line up too.

   ⚠ is-two IS NOT A SECOND DESIGN. With the newsletter form switched off at Forms\Gate the
   third card is not rendered at all, and two cards in a three-column grid would leave a hole;
   the modifier simply drops the grid to two tracks. */
.ce-home-help3 {
	display: grid;
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	gap: 16px;
}
.ce-home-help3.is-two { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); }

.ce-home-help-card {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	overflow: hidden;
	border: 1px solid #e3ecf8;
	border-radius: 20px;
	background: #fff;
	box-shadow: 0 10px 26px rgba( 2, 32, 70, 0.06 );
}

/* The padded column that holds the copy. On a photo card it sits above the scrim. */
.ce-home-help-in {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 24px 26px;
}

/* ⚠ A PHOTO CARD CARRIES NO BORDER AND NO WHITE. The border drew a pale line around the
   photograph's edge, and the white background showed through for the moment before a lazy image
   decoded. The three delivery cards above are built the same way. */
.ce-home-help-card.is-photo {
	border-color: transparent;
	background: var( --ce-brand-deep );
	min-height: 430px;
}
/* ⚠ THIS SCRIM IS NOT THE DELIVERY CARDS' SCRIM, and the difference is where the words are.
   .ce-home-scrim is weighted to the BOTTOM because those cards put their title there; this card
   puts a heading and three lines of copy at the TOP and a button at the foot, so the gradient has
   to be dark at both ends and may only thin in the middle — which is also where the face is.
   Measured against the support photograph, whose pale yellow background washed white text out
   completely at the delivery cards' weighting. */
.ce-home-help-card.is-photo .ce-home-scrim {
	background: linear-gradient(
		180deg,
		rgba( 2, 32, 70, 0.82 ) 0%,
		rgba( 2, 32, 70, 0.62 ) 38%,
		rgba( 2, 32, 70, 0.42 ) 62%,
		rgba( 2, 32, 70, 0.78 ) 100%
	);
}

.ce-home-help-card.is-photo .ce-home-help-h,
.ce-home-help-card.is-photo .ce-home-help-p { color: #fff; }
.ce-home .ce-home-help-card.is-photo .ce-home-help-p { color: rgba( 255, 255, 255, 0.92 ); }


.ce-home-help-h {
	margin: 0 0 8px;
	font-family: var( --ce-font-display );
	font-weight: 500;
	letter-spacing: -0.005em;
	font-size: clamp( 20px, 1.9vw, 24px );
	line-height: 1.2;
	color: var( --ce-brand-ink );
}

.ce-home .ce-home-help-p {
	margin: 0 0 18px;
	font-size: 15.5px;
	line-height: 1.55;
	color: #41506a;
}

/* ⚠ ONE BUTTON, TWO GROUNDS. Scott, 9 Nov 2026: "the buttons should be the same" — they were a
   solid blue CTA and a ghost outline. Both are now the white pill the photo cards above already
   use; `is-ink` is the same pill inverted for the one card that has no photograph behind it, so
   the shape, size and weight stay identical and only the colour answers the background. */
/* Centred under the copy, not ranged left. Scott, 9 Nov 2026: "make the other buttons center". */
.ce-home-help-card .ce-home-wbtn {
	margin-top: auto;
	align-self: center;
	max-width: none;
	width: auto;
}
.ce-home-wbtn.is-ink {
	background: var( --ce-brand );
	color: #fff;
}
.ce-home-wbtn.is-ink:hover { background: var( --ce-brand-deep ); }

/* ⚠ THE MIDDLE CARD IS BLUE, NOT A PHOTOGRAPH. Scott, 9 Nov 2026: "that card was meant to be
   blue as a center card." It paints the same --ce-brand-gradient as the hero and the nav band, so
   the centre of the band answers the top of the page. */
.ce-home-help-card.is-form {
	background: var( --ce-brand-gradient );
	border-color: transparent;
}

/* ⚠ THE FORM SITS ON THE BLUE, WITH NO PANEL BEHIND IT. There was a frosted box; Scott, 9 Nov
   2026: "the whole box is blue with the form inside." That means every piece of the form's own
   chrome has to answer a dark ground — heading, intro, labels and the required mark — while the
   inputs stay white, because a white field on blue is what tells the eye where to type. */
.ce-home-help-card.is-form .ce-form__h,
.ce-home-help-card.is-form .ce-form__label { color: #fff; }
.ce-home .ce-home-help-card.is-form .ce-form__intro { color: rgba( 255, 255, 255, 0.90 ); }
.ce-home-help-card.is-form .ce-form__req { color: #9ecbff; }
.ce-home-help-card.is-form .ce-form__input {
	background: #fff;
	border-color: rgba( 255, 255, 255, 0.65 );
}

/* ⚠ THE SUBMIT IS THE SAME WHITE PILL AS THE OTHER TWO CARDS' BUTTONS. It was brand blue, which
   on a brand-blue card is nearly invisible; and the three cards are a set, so the one thing the
   eye compares across them should not be three different buttons. */
/* ⚠ THE FORM HAS TO STRETCH BEFORE THE BUTTON CAN BE PUSHED DOWN. margin-top: auto only moves a
   flex child, and the form was a plain block — so the submit sat wherever the email field left it,
   ranged left, while the two cards beside it had their buttons pinned to the foot. Each level from
   the card to the <form> is now a column that fills its parent. Scott, 9 Nov 2026: "make the Sign
   me up button centered on the bottom to match the right and left cards for balance." */
.ce-home-help-card.is-form .ce-form,
.ce-home-help-card.is-form .ce-form__form {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-height: 0;
}

/* ⚠ THE SAME METRICS AS .ce-home-wbtn, COPIED DELIBERATELY. This is ceForms' own submit button,
   not a .ce-home-wbtn, so it inherits none of that rule — and the first version of this override
   was written against the wbtn's OLD size, leaving the centre card's button 47px tall beside two
   40px ones. Scott, 9 Nov 2026: "seems fatter then the other two." Keep these four values in step
   with .ce-home-wbtn above; there is no shared selector to do it for us.
   ⚠ AND THE SAME TRAP CAUGHT ME FROM THE OTHER SIDE, 10 Nov 2026. Raising .ce-home-wbtn to the
   44px tap floor left this one at 40 — the identical drift, mirrored. This selector is (0,3,0) so
   it also beats forms.css's own 44px floor, which means the floor can never reach this button
   from there. If either value moves again, move both. */
.ce-home-help-card.is-form .ce-form__submit {
	margin-top: auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	align-self: center;
	box-sizing: border-box;
	min-height: 44px;
	padding: 9px 20px;
	border: 0;
	border-radius: var( --ce-brand-radius-pill );
	background: #fff;
	color: var( --ce-brand-deep );
	font-size: 13.5px;
	font-weight: 700;
}
/* ⚠ THE COLOUR HAS TO BE RESTATED, NOT ONLY THE BACKGROUND. forms.css carries
   `.ce-form .ce-form__submit:hover, .ce-form .ce-form__submit:focus-visible { color: #fff }`
   for its own dark-fill button. Overriding the background alone left white text on a pale blue
   tint and the label all but vanished — Scott, 9 Nov 2026: "fix this botton on hover."
   focus-visible sits in that same vendor selector, so it needs the same answer here or a keyboard
   user walks into the identical bug with no pointer to tell them. */
.ce-home-help-card.is-form .ce-form__submit:hover,
.ce-home-help-card.is-form .ce-form__submit:focus-visible {
	background: #eaf2fd;
	color: var( --ce-brand-deep );
}

/* The two white pills beside it had no hover state at all. All three give the same answer now. */
.ce-home-wbtn:not( .is-ink ):hover,
.ce-home-wbtn:not( .is-ink ):focus-visible { background: #eaf2fd; }

/* The status line after a submit has to be legible on the blue too. */
.ce-home-help-card.is-form .ce-form__msg { color: #fff; }

/* ⚠ THE FORM BRINGS ITS OWN HEADING, AND IT IS RE-SIZED HERE RATHER THAN HIDDEN. ceForms draws
   an h2 and an intro from Definition, which is the copy that has been approved for that form;
   hiding it to impose a card heading would mean the same words live in two places. It is only
   made to MATCH the two cards beside it. */
/* ⚠ NO PADDING ON THE CARD ITSELF. .ce-home-help-in already pads every card by 24px; adding
   24 here as well inset this one twice and pushed its heading a clear 24px below the two
   beside it — visible the moment the three sat in a row. */

/* ⚠ THE TWO NAME FIELDS SHARE A ROW HERE, which they do not on a full-width page. Stacked, the
   form card ran 597px and the two link cards beside it were stretched to match — most of their
   height empty. The email row is already marked is-wide by the Renderer, so it spans both
   tracks and the required field keeps the emphasis of a full-width input. */
.ce-home-help-card .ce-form__fields {
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	gap: 10px 12px;
}
.ce-home-help-card .ce-form__row { margin: 0; }
.ce-home-help-card .ce-form__row.is-wide { grid-column: 1 / -1; }
/* ⚠ THE CARD PADS, THE FORM DOES NOT. ceForms pads its own <section> by 24px, which is right
   on a page of its own and wrong inside a card that already pads — the two together inset this
   card twice, dropping its heading 24px below its neighbours' and lifting its button 24px
   above theirs. Measured against the other two cards, not guessed. */
.ce-home-help-card .ce-form { margin: 0; padding: 0; }
.ce-home-help-card .ce-form__h {
	margin: 0 0 8px;
	font-family: var( --ce-font-display );
	font-weight: 500;
	letter-spacing: -0.005em;
	font-size: clamp( 20px, 1.9vw, 24px );
	line-height: 1.2;
	color: var( --ce-brand-ink );
}
.ce-home .ce-home-help-card .ce-form__intro {
	margin: 0 0 14px;
	font-size: 15.5px;
	line-height: 1.55;
	color: #41506a;
}

/* ⚠ ONE COLUMN ON A PHONE, and the form card last. Three cards side by side below about 900
   would squeeze the form's fields narrower than its labels. */
@media ( max-width: 900px ) {
	.ce-home-help3,
	.ce-home-help3.is-two { grid-template-columns: minmax( 0, 1fr ); }
}

.ce-home-ghost {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-height: 44px;
	padding: 11px 24px;
	border: 1.5px solid #cfdef2;
	border-radius: var( --ce-brand-radius-pill );
	color: var( --ce-brand-ink );
	font-size: 16px;
	font-weight: 700;
	text-decoration: none;
}

.ce-home-ghost:hover { border-color: var( --ce-brand ); }

/* ── narrower ─────────────────────────────────────────────────────────────── */

@media ( max-width: 900px ) {
	.ce-home-tiles { grid-template-columns: 1fr; }
	.ce-home-tile-ph { min-height: 430px; }
}

/* ⚠ 1000px, NOT 900 — this follows the ceVault row's WRAP, which the other rules above do not
   share. The row holds two 450px columns inside a container of about 0.9 x viewport, so it wraps
   near 1000px of viewport. Styled at 900 instead, every width from 900 to 1000 drew a stacked row
   with the divider still running down the left edge of the lower half. */
@media ( max-width: 1000px ) {
	.ce-home-gauge { border-left: 0; border-top: 1px solid #e3ecf8; }
}

@media ( max-width: 640px ) {
	/* The twins stack their ring above the label: at 136px wide the label column is 41px, and
	   "Internet" alone needs about 58, so it painted straight through the card border. */
	.ce-home-twin { flex-direction: column; gap: 8px; text-align: center; }
	.ce-home-twin-t { width: 100%; }
}

/**
 * ⚠ 38px FROM 641 TO 900, WHICH IS THE BOARD'S `@media (max-width: 900px)` RULE. We held the full
 * 50px across this range. It fits either way — the hero is stacked below ~1020, so the copy has
 * the whole band — but 50px at 700px wide is a different page from the one that was approved.
 */
@media ( min-width: 641px ) and ( max-width: 900px ) {
	.ce-home-h1 { font-size: 38px; }
}

/* ── the squeezed hero band, 1021-1299 ────────────────────────────────────── */

/**
 * ⚠ ONE BAND OF WIDTHS GETS THE CARD *BESIDE* A COLUMN TOO NARROW FOR A 50px HEADLINE, and it is
 * the laptop and iPad-landscape range. Below ~1020 the row wraps and the copy takes the full band,
 * so 50px is comfortable; above ~1300 the column reaches ~710px and 50px fits. Between the two the
 * card is still alongside while the copy is squeezed, and the headline ran to FOUR lines.
 *
 * Measured, side-by-side, with the theme stylesheet loaded:
 *
 *   1024  copy 473  -> four lines    largest that holds two: 37px
 *   1100  copy 538  -> four lines                            42px
 *   1200  copy 624  -> three lines                           49px
 *   1300  copy 710  -> two lines                             52px
 *
 * 3.55vw sits under every one of those (36.4 / 39.1 / 42.6 / 46.1) with room to spare, and the
 * board's 50px is untouched from 1300 up, where it fits. The 34px floor is unreachable inside this
 * query and is only a backstop.
 *
 * ⚠ DO NOT "SIMPLIFY" THIS INTO THE min-width:641px BLOCK. Below 1021 the hero is stacked and a
 * reduced headline there would be smaller for no reason.
 */
@media ( min-width: 1021px ) and ( max-width: 1299px ) {
	.ce-home-h1 { font-size: clamp( 34px, 3.55vw, 50px ); }
}

/* ── desktop reading size ─────────────────────────────────────────────────── */

/**
 * ⚠ DESKTOP ONLY, AND DELIBERATELY SCOPED min-width RATHER THAN RAISING THE BASE SIZES.
 * The phone sizes are tuned to the pixel — the h1 to land on two lines, the builder heading and
 * its hint to each hold one, the permit pills to fit a 360px card. Raising the base values would
 * walk straight back through all of that. Everything here applies from 641px up, where there is
 * room: the supporting text was running 13–14.5px in 589px columns, which is small to read on a
 * desktop even though it measured fine.
 *
 * Scott, 8 Nov: "the text size can be slightly increased on the desktop". Slightly — one step per
 * item, not a redesign of the scale.
 */
@media ( min-width: 641px ) {
	.ce-home-lede { font-size: 18px; }

	/**
	 * ⚠ 19px AND THE ELLIPSIS, DESKTOP ONLY. Scott, 8 Nov: one pixel smaller with "..." after it,
	 * provided it still holds a single line. The phone keeps 18px and NO ellipsis — that was a
	 * deliberate earlier call, because dropping the three dots is what got the heading onto one
	 * line at 390 in the first place.
	 *
	 * The ellipsis is a ::after rather than copy, so the phone rule does not have to strip it back
	 * out of the translated string, and so it cannot drift from the heading it belongs to. It is a
	 * single U+2026, not three periods.
	 */
	.ce-home-build-h { font-size: 19px; }
	.ce-home-build-h::after { content: '\2026'; }

	/* The ceVault column, where the balancing just freed the most room. */
	.ce-home-sub { font-size: 17px; }
	.ce-home-bullets { font-size: 15.5px; }

	/* The three photo tiles and the package panel beside them. */
	.ce-home-ph-b { font-size: 15.5px; }
	.ce-home-ticks li { font-size: 15px; }

	/* The price tiles. */
	.ce-home-tile-b { font-size: 14px; line-height: 1.55; }
	.ce-home-tile-l { font-size: 15px; }

	/* The FAQ answers. */
	.ce-home-faq-a { font-size: 16px; }
}


/* ── the board's phone band padding ───────────────────────────────────────── */

/**
 * ⚠ LAST IN THE FILE ON PURPOSE. `.ce-home-faq-in` declares its own `padding-block` further down
 * than the phone block above, so an override written up there loses on source order and silently
 * does nothing — which is exactly what happened on the first attempt: the hero and the sections
 * took the new value and the FAQ stayed at 34.
 *
 * The board puts `.sec-pad { padding: 38px 20px }` on SIX elements at <=640, the FAQ band among
 * them, and 38 is top AND bottom.
 */
@media ( max-width: 640px ) {
	.ce-home-sec,
	.ce-home-faq-in { padding-block: 38px; }
}

/* ⚠ AND IT OUTRANKS OUR HEADING MARGINS TOO — the same failure, found later. Astra sets a
   0.7em bottom margin on headings inside .entry-content, which beats a bare class, so three of
   these were rendering a margin nobody wrote:

     .ce-home-h2       asked 6px  rendered 22.4   (0.7em of 32px)
     .ce-home-help-h   asked 8px  rendered 16.8   (0.7em of 24px)
     .ce-home-build-h  asked 0    rendered 13.3   (0.7em of 19px)

   .ce-home-ph-t escaped it only by luck: Astra's newer rule wraps the tags in :where(), which
   contributes no specificity, so that one tied and our later sheet won. The three above are hit by
   an older, plainer rule. Re-stated at (0,2,0); the values are unchanged. Scott, 9 Nov 2026, asked
   what the heading margins were doing. */
.ce-home .ce-home-h2      { margin: 0 0 6px; }
.ce-home .ce-home-help-h  { margin: 0 0 8px; }
.ce-home .ce-home-build-h { margin: 0; }
.ce-home .ce-home-ph-t    { margin: 0; }

/* ⚠ ASTRA OUTRANKS OUR PARAGRAPH MARGINS, AND DID SO SILENTLY. The theme ships
   `.entry-content p { margin-bottom: 1.6em }` — specificity (0,1,1) — which beats a bare
   `.ce-home-pkg` (0,1,0) however late our sheet loads. So EVERY <p> on this page was carrying an
   em-based margin nobody wrote, and the rules below were being ignored:

     .ce-home-lede        asked 24px   rendered 28.8
     .ce-home-sub         asked 0      rendered 27.2
     .ce-home-ph-b        asked 0      rendered 24.8
     .ce-home-sample      asked 0      rendered 20.8
     .ce-home-priceline   asked 3px    rendered 25.6
     .ce-home-pkg         asked 14px   rendered 21.6
     .ce-home-fine        asked 0      rendered 19.2

   Re-stated here at (0,2,0) so our own values apply. THE VALUES ARE UNCHANGED — this is not a
   retune, it is the retune that was already written finally taking effect.

   ⚠ DO NOT "SIMPLIFY" THIS TO `.ce-home p { margin: 0 }`. That is (0,1,1), which ties Astra and
   wins only on load order — but it also outranks every component rule above it, so the lede's
   24px and the package line's 14px would both collapse to zero and the card would close up.
   Each selector carries a class of its own for that reason. Scott, 9 Nov 2026. */
.ce-home .ce-home-lede      { margin: 0 0 24px; }
.ce-home .ce-home-sub       { margin: 0; }
.ce-home .ce-home-ph-b      { margin: 0; }
.ce-home .ce-home-sample    { margin: 0; }
.ce-home .ce-home-priceline { margin: 0 0 3px; }
.ce-home .ce-home-pkg       { margin: 0 0 14px; }
.ce-home .ce-home-fine      { margin: 10px 0 0; }

/* The FAQ answers are the one place the paragraphs are CONTENT, not components: they come from the
   FAQ store and an answer may legitimately run to several paragraphs. So they keep a deliberate gap
   BETWEEN paragraphs and lose only the trailing one, which was padding the answer box from the
   inside. Today every answer is a single paragraph, so today this is purely the trailing 16px. */
.ce-home .ce-home-faq-a p             { margin: 0 0 12px; }
.ce-home .ce-home-faq-a p:last-child  { margin-bottom: 0; }

/* ⚠ A BUTTON IS NOT A LINK, AND THE THEME DISAGREED. Astra ships an inline
   `.ast-single-post .entry-content a { text-decoration: underline }` at (0,2,1), which outranks a
   bare `.ce-home-wbtn` (0,1,0) — so every button on this page drew a link underline through its
   label however many times the component said otherwise. This is the same failure as the
   paragraph margins above: the theme beating our class rules on specificity, silently.

   The selectors below are (0,2,1) — an element plus two classes — which TIES Astra's rule, and
   home.css is loaded after that inline block (index 37 against 3, measured), so the tie resolves
   our way. Scott, 9 Nov 2026: "remove all links in the buttons in the page, they are only
   buttons." */
.ce-home a.ce-home-wbtn,
.ce-home a.ce-home-cta,
.ce-home a.ce-home-ghost,
.ce-home a.ce-home-readall,
.ce-home a.ce-home-chip { text-decoration: none; }

/* ⚠ NO TRANSITIONS ON THE GAUGE, AND THAT IS DELIBERATE. The script tweens it frame by frame;
   a CSS transition on the same properties would restart on every one of those frames and the arc
   would lag the number it is supposed to be in step with. Motion preference is handled in the
   script, which paints the finished reading in one go.

   ⚠ THE KNOB STILL TURNS ABOUT THE ARC'S OWN CENTRE. transform-box: fill-box would use the
   circle's bounding box and send it off on its own orbit; view-box keeps the origin in the SVG's
   coordinate space, where 150 148 is the centre of the semicircle. */
.ce-home-knob {
	transform-box: view-box;
	transform-origin: 150px 148px;
}


/* ── the package card's price row, on a phone ─────────────────────────────── */

/**
 * ⚠ "$119 all 36 hours" RENDERED ONE CHARACTER PER LINE ON THE LIVE HOMEPAGE. Found at 375px on
 * 10 Nov 2026, minutes after the cutover, by scrolling the real page rather than reading the CSS.
 *
 * The chain: `.ce-home-ph-foot` is `grid-template-columns: 1fr auto` and never stacked, so on a
 * 283px row the button claimed 167px and left the price column 102. Inside it
 * `.ce-home-pkg-price` is `auto minmax( 0, 1fr )` — and `minmax(0, …)` permits a column to reach
 * ZERO, so the note took 15px and set itself vertically, one glyph to a line, 178px tall.
 *
 * ⚠ THE FIX IS THE OUTER GRID, NOT THE INNER ONE. `minmax(0, 1fr)` is right where it is: it is
 * what stops a long note overflowing the card. The fault is asking two columns to share a width
 * that only fits one. Stacked, the price block gets the whole row and the note reads normally.
 */
@media ( max-width: 640px ) {
	/* ⚠ THE TEMPLATE ALONE DOES NOTHING — THE PLACEMENT HAS TO MOVE TOO. The first attempt set
	   `grid-template-columns: 1fr` and stopped there, and the row stayed two columns wide. The
	   button carries an explicit `grid-column: 2` further up this file, and an item placed in a
	   column the template does not define creates an IMPLICIT one, sized auto. Declaring one
	   explicit column while something still asks for the second is not a one-column grid.
	   Caught by measuring the computed gridTemplateColumns after deploying the first fix, which
	   still read two values. */
	.ce-home-ph-foot { grid-template-columns: 1fr; }
	.ce-home-ph-foot .ce-home-wbtn {
		grid-column: 1;
		justify-self: start;
		margin-top: 4px;
	}
}

/**
 * ⚠ 44px IS THE FLOOR FOR SOMETHING YOU TAP. These sat at 40 — close enough to look fine and
 * small enough to miss. Only our own controls are touched here; the theme's header and footer
 * chrome has the same problem and is not ours to retune from this file.
 */
.ce-home-wbtn { min-height: 44px; box-sizing: border-box; }