@charset "UTF-8";

/*
Theme Name: little-life-theme

Front page (Home v3) — standalone stylesheet.

Compiles to front.css in the theme root, alongside style.css and
woocommerce.css. It is enqueued ONLY on the front page template, which does not
load style.css: this sheet carries its own reset and its own @font-face, so the
design's measurements are not fought over by the site-wide cascade.

Source: fast-templates-source/little-life-stories-home-page-v3/
  css/tokens.css  → front/abstracts/{colors,typography,tokens}
  css/home.css    → front/{base,components,widgets}

Class names from the design file (.v2-*, .lls-price, .trustpilot-widget) are
kept verbatim. Two custom properties cross the CSS/JS boundary and must not be
renamed: --v2-navh (measured header height) and --v2-rev-h (measured review
card height, which the photo frames are sized from).

The page changes layout at exactly two widths, 760px and 900px. Those media
queries live with the component or widget they affect, not in one block at the
end, so a size and its breakpoint are read together.
*/

/* Tokens, page-local values and mixins
--------------------------------------------- */

/* Colours
--------------------------------------------- */

/* Colours — design tokens (tokens/colors.css)
--------------------------------------------- */

/* The whole palette. Eleven colours of our own — fifteen values, because navy
   carries a hover and a pressed state — plus two third-party brand colours.
   If a page needs a shade that is not here, that is a design decision to add
   here deliberately, not a hex to invent in the page. */
:root {

	/* Navy — one colour, three states. Text, every primary fill, every border. */
	--lls-navy: #2f4148;
	--lls-navy-hover: #3d555f;
	--lls-navy-active: #1f2e33;

	/* Greys — two, both navy-derived. There is no neutral grey in this brand. */
	--lls-slate: #4c6169; /* all secondary and body copy */
	--lls-slate-faint: #6b7f86; /* eyebrow labels, fine print, placeholders */

	/* Papers — four, each a distinct surface. */
	--lls-paper: #fbfaf8; /* page background, and text on navy */
	--lls-white: #fff; /* cards and input fills */
	--lls-cream: #fdf1e2; /* accent band, stripe gaps */
	--lls-linen: #efede8; /* quieter card fill (home reviews) */

	/* Lines — two. One warm edge, one cooler field border that has to read
     as an affordance and is therefore deliberately darker. */
	--lls-line: #e7e4dc;
	--lls-field: #c9d2d5;

	/* Accents — two, and no more. */
	--lls-sky: #99d5ef; /* candy stripe, selected state, focus ring */
	--lls-honey: #fddda6; /* discount pills, secondary buttons */

	/* Third-party brand colours. Fixed by their owners; never restyle. */
	--lls-trustpilot: #00b67a;
	--lls-stripe: #635bff;

	/* Semantic aliases — write these in page CSS, not the base names. */
	--text-primary: var(--lls-navy);
	--text-secondary: var(--lls-slate);
	--text-body: var(--lls-slate);
	--text-label: var(--lls-slate-faint);
	--text-placeholder: var(--lls-slate-faint);
	--text-on-navy: var(--lls-paper);
	--text-white: var(--lls-white);
	--surface-page: var(--lls-paper);
	--surface-card: var(--lls-white);
	--surface-card-quiet: var(--lls-linen);
	--surface-accent: var(--lls-cream);
	--border-strong: var(--lls-navy);
	--border-hairline: rgba(47, 65, 72, 0.1); /* the 10% navy rule under the header and between nav rows */
	--border-card: var(--lls-line);
	--border-divider: var(--lls-line);
	--border-dashed: var(--lls-line);
	--border-field: var(--lls-field);
	--border-field-focus: var(--lls-navy);
	--action-fill: var(--lls-navy);
	--action-fill-hover: var(--lls-navy-hover);
	--action-fill-active: var(--lls-navy-active);
	--action-secondary-fill: var(--lls-honey);
	--state-selected: var(--lls-sky);
	--focus-ring: var(--lls-sky);

	/* Decoration */
	--stripe-primary: var(--lls-sky);
	--stripe-alt: var(--lls-honey);
	--stripe-gap: var(--lls-cream);
	--pill-fill: var(--lls-honey);
	--surface-page-translucent: rgba(251, 250, 248, 0.94);

	/* The one shadow in the system. Used only on the selected segment of a
     segmented toggle, where the two surfaces are both off-white and nothing
     else separates them. Do not reuse it to lift cards or buttons. */
	--shadow-segment: 0 1px 3px rgba(47, 65, 72, 0.14);

	/* Third-party, fixed */
	--brand-trustpilot: var(--lls-trustpilot);
	--brand-stripe: var(--lls-stripe);
	--brand-pay-button: #000; /* Apple Pay / Google Pay fill — their guidelines, not ours to change */
}

/* Fonts and type scale
--------------------------------------------- */

/* Typography — fonts and type tokens (tokens/fonts.css + tokens/typography.css)
--------------------------------------------- */

/* Two families only, both variable, both self-hosted. The binaries are the
   theme's existing ones in /fonts — this stylesheet declares them itself
   because style.css is not loaded on this template. */
@font-face {
	font-family: Lora;
	src: url("./fonts/Lora-VariableFont_wght.ttf") format("truetype");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: Lora;
	src: url("./fonts/Lora-Italic-VariableFont_wght.ttf") format("truetype");
	font-weight: 100 900;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: Montserrat;
	src: url("./fonts/Montserrat-VariableFont_wght.ttf") format("truetype");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: Montserrat;
	src: url("./fonts/Montserrat-Italic-VariableFont_wght.ttf") format("truetype");
	font-weight: 100 900;
	font-style: italic;
	font-display: swap;
}

/* Lora for headings, Montserrat for everything else. No third family.
   Headings default to 600. Two deliberate exceptions: 700 on small uppercase
   flags, 500 on Lora pull quotes. Body copy is 16px on every page.
   The fluid sizes are what stops the H1 breaking on a 320px screen. */
:root {
	--font-heading: "Lora", georgia, serif;
	--font-body: "Montserrat", system-ui, sans-serif;
	--weight-heading: 600; /* default for every heading */
	--weight-flag: 700; /* small uppercase flags only */
	--weight-quote: 500; /* Lora pull quotes, where 600 reads too assertive */
	--weight-strong: 600; /* labels, buttons, emphasised body */
	--weight-medium: 500; /* input text, nav links */
	--weight-body: 400;

	/* Display — home page hero only */
	--type-hero: clamp(33px, 9.6vw, 60px);
	--type-hero-lh: 1.08;
	--type-hero-ls: -0.018em;

	/* H1 — page titles other than the hero */
	--type-h1: clamp(30px, 7.4vw, 40px);
	--type-h1-lh: 1.14;
	--type-h1-ls: -0.012em;

	/* H2 — section and card headings, identical to 22px from 458px up */
	--type-h2: clamp(19px, 4.8vw, 22px);
	--type-h2-lh: 1.2;

	/* H3 — the Total label */
	--type-h3: 19px;
	--type-h3-lh: 1.3;

	/* H4 — card titles (step cards, review titles) and mobile nav links */
	--type-h4: 21px;
	--type-h4-lh: 1.28;

	/* Body */
	--type-lead: clamp(16px, 4.4vw, 20px); /* hero subline */
	--type-lead-lh: 1.55;
	--type-body: 16px;
	--type-body-lh: 1.6;
	--type-longform: clamp(16px, 4.1vw, 18px); /* pages read at length (About us) */
	--type-longform-lh: 1.65;
	--type-small: 15px;
	--type-small-lh: 1.5;
	--type-caption: 14px;
	--type-fine: 13px;
	--type-fine-lh: 1.6;

	/* Voice — someone speaking: sample-question cards and customer quotes */
	--type-voice: clamp(16px, 4.1vw, 18px);
	--type-voice-lh: 1.45;

	/* Prices — one headline price per page, one inside each comparison card */
	--type-price-display: 40px;
	--type-price-card: 30px;

	/* Button label. One size on every button, on every page. */
	--type-button: 17px;

	/* Two uppercase treatments, and only two. EYEBROW labels a section from the
     page background above its heading, 700 because at this size and tracking
     600 reads unweighted. FLAG is a badge on a filled surface, smaller and
     less tracked because the coloured field does some of the work. Anything
     else small and quiet is not an eyebrow — use --type-fine in sentence case. */
	--type-eyebrow: 12px;
	--type-eyebrow-ls: 0.16em;
	--type-eyebrow-weight: 700;
	--type-flag: 11px;
	--type-flag-ls: 0.12em;
	--type-flag-weight: 700;

	/* Numerals in prices and totals always use tabular figures. */
	--numeric-price: tabular-nums;
}

/* Spacing, radius, motion, layout
--------------------------------------------- */

/* Spacing, radius, motion, layout — design tokens
--------------------------------------------- */

/* The page gutter is 22px everywhere, at every width. It is the one
   measurement the whole site is aligned to — do not change it per page. */
:root {
	--gutter: 22px;
	--gutter-tight: 13px; /* checkout header below 430px only */
	--container: 1160px; /* sections only align across pages if this is never overridden locally */
	--column: 520px; /* checkout single-column max width */
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 10px;
	--space-4: 12px;
	--space-5: 14px;
	--space-6: 18px;
	--space-7: 22px;
	--space-8: 26px;
	--space-9: 30px;
	--space-10: 38px;
	--space-12: 44px;
	--space-16: 76px; /* bottom of a page, above the footer stripe */

	/* Component internals, taken from the built pages */
	--pad-card: 22px 20px 24px;
	--pad-card-compact: 20px 20px 22px;
	--pad-input: 16px 18px;
	--pad-input-payment: 9px 12px;
	--pad-button: 18px 22px;
	--pad-button-nav: 11px 20px;
	--pad-header: 9px 20px;
	--hit-min: 44px; /* every tappable target, no exceptions */
}

/* Seven radii. Semantic, not a scale — match the role, not the number. */
:root {
	--radius-line: 2px; /* rounded cap on a hairline bar, e.g. burger bars */
	--radius-badge: 6px; /* small flags, tags, card-brand swatches */
	--radius-payment: 8px; /* card-payment fields only, squarer to read as bank-standard */
	--radius-control: 10px; /* buttons, inputs, photos, toggle segments */
	--radius-track: 12px; /* small inline panels, and a segmented toggle's track */
	--radius-card: 14px; /* every card, panel and framed photo */
	--radius-pill: 999px; /* pills, chips, radio dots */

	/* Aliases kept so existing references keep reading correctly. */
	--radius-button: var(--radius-control);
	--radius-field: var(--radius-control);
	--radius-image: var(--radius-control);
	--radius-field-payment: var(--radius-payment);
	--radius-chip: var(--radius-track);
}

/* Fills change, sizes mostly do not. Nothing bounces. No shadows appear or
   lift on interaction — this brand has no elevation system. */
:root {
	--ease: ease;
	--dur-fill: 0.35s; /* button background */
	--dur-press: 0.12s; /* the only transform, and it is tiny */
	--dur-border: 0.25s; /* input focus, tier selection */
	--dur-chevron: 0.25s; /* accordion arrow rotation */
	--dur-reveal: 0.45s; /* a new section appearing */
	--dur-fade: 0.2s; /* an element fading out in place, e.g. burger middle bar */
	--dur-morph: 0.35s; /* the burger morphing into a cross */
	--press-scale: 0.975;
	--focus-ring-width: 2px;
	--focus-ring-offset: 3px;
}

@keyframes lls-reveal {

	from {
		opacity: 0;
		transform: translateY(14px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

/* Breakpoints. Custom properties cannot be used in media queries; these are
   documentation and for JS that needs the same numbers. The SCSS equivalents
   this stylesheet actually queries on live in _structure.scss. */
:root {
	--bp-header-tight: 430px; /* checkout header trims to fit the Trustpilot box */
	--bp-badge-label: 520px; /* Trustpilot fallback drops its text label */
	--bp-express-row: 700px; /* Apple/Google Pay go side by side */
	--bp-nav: 760px; /* burger menu becomes an inline nav */
	--bp-split: 900px; /* hero splits in two; carousels become grids */
}

/* Values this page uses that the token set does not contain
--------------------------------------------- */

/* Page-local values (--hp-*)
--------------------------------------------- */

/* Used by this page but NOT in the design system token set. Each is listed in
   the source README against its nearest system value so it can be promoted,
   corrected to the nearest step, or deliberately kept local.

   No colour appears here — the page uses nothing outside the palette. */
:root {

	/* Type — line-heights and tracking that differ from the tokenised scale */
	--hp-h2-lh: 1.12; /* system --type-h1-lh is 1.14 */
	--hp-h3-lh: 1.25; /* system --type-h4-lh is 1.28 */
	--hp-rev-title-lh: 1.3; /* review card titles, a third value again */
	--hp-navpanel-lh: 1.3;
	--hp-step-eyebrow-ls: 0.17em; /* system --type-eyebrow-ls is 0.16em */
	--hp-swipe-ls: 0.1em;
	--hp-seg-lh: 1.5;
	--hp-age-lh: 1.2;
	--hp-weekly-lh: 1.3;
	--hp-faq-q-lh: 1.35;
	--hp-price-lh: 1;
	--hp-price-ls: -0.02em;
	--hp-nav-login-ls: 0.01em;
	--hp-vsl-text-lh: 1.55;

	/* Measures — no measure tokens exist in the system */
	--hp-measure-hero: 16ch;
	--hp-measure-hero-sub: 32ch;
	--hp-measure-26: 26ch;
	--hp-measure-34: 34ch;
	--hp-measure-40: 40ch;
	--hp-measure-60: 60ch;
	--hp-measure-68: 68ch;
	--hp-measure-72: 72ch;

	/* Spacing steps the 4/8-derived scale does not contain */
	--hp-space-6: 6px;
	--hp-space-7: 7px;
	--hp-space-9: 9px;
	--hp-space-11: 11px;
	--hp-space-13: 13px;
	--hp-space-15: 15px;
	--hp-space-16: 16px;
	--hp-space-17: 17px;
	--hp-space-20: 20px;
	--hp-space-24: 24px;
	--hp-space-32: 32px;
	--hp-space-34: 34px;

	/* Section rhythm — five different vertical paddings, none on the scale */
	--hp-sec-42: 42px;
	--hp-sec-44: 44px;
	--hp-sec-46: 46px;
	--hp-sec-48: 48px;
	--hp-sec-50: 50px;

	/* Header + burger geometry */
	--hp-header-blur: 10px;
	--hp-nav-gap: 16px;
	--hp-logo-size: 54px;
	--hp-burger-w: 22px;
	--hp-burger-h: 16px;
	--hp-burger-bar: 2px;
	--hp-burger-step: 7px; /* bar spacing, and the cross translate */
	--hp-navpanel-buy-pad: 13px 24px;

	/* Candy stripe geometry (the design system inlines these in .lls-stripe) */
	--hp-stripe-height: 20px;
	--hp-stripe-band: 11px;
	--hp-stripe-period: 22px;

	/* The Our Story band is a WIDER stripe than the candy-stripe device */
	--hp-wide-stripe-band: 15px;
	--hp-wide-stripe-period: 30px;

	/* Hero */
	--hp-hero-height: clamp(300px, 80vw, 560px);
	--hp-hero-height-wide: 560px;
	--hp-hero-text-max: 604px;
	--hp-tp-width: 340px;
	--hp-tp-height: 24px;
	--hp-stars-ls: 2px;

	/* How it works */
	--hp-seg-max: 320px;
	--hp-seg-gap: 5px;
	--hp-seg-pad: 11px 0;
	--hp-hiw-card-basis: min(calc(100% - 44px), 340px);
	--hp-hiw-grid-col: 320px;
	--hp-hiw-grid-gap: 20px;
	--hp-hiw-grid-max: 1040px;
	--hp-hiw-body-pad: 20px 22px 24px;

	/* Buttons */
	--hp-btn-max: 340px;
	--hp-btn-pad: 18px 20px; /* system --pad-button is 18px 22px */

	/* Reviews */
	--hp-rev-card-basis: min(72vw, 300px);
	--hp-rev-card-pad: 22px 22px 24px;
	--hp-rev-photo-ratio: 0.8; /* photo width = 0.8 x measured card height (4:5) */
	--hp-rev-lead: max(22px, calc(50% - 150px));
	--hp-rev-tail: max(22px, calc(50% - 112px));

	/* Our books */
	--hp-spread-max: 640px;
	--hp-range-max: 720px;

	/* Our questions */
	--hp-age-pad: 10px 17px;
	--hp-qcard-pad: 17px 19px;
	--hp-qgrid-min: 290px;
	--hp-tip-pad: 17px 19px;

	/* Will I finish */
	--hp-fin-grid-min: 230px;
	--hp-fin-card-pad: 22px 22px 24px;

	/* What's included */
	--hp-buy-max: 860px;
	--hp-buy-card-max: 420px;
	--hp-buy-card-pad: 26px 24px 28px;
	--hp-weekly-pad: 8px 20px;
	--hp-texture-size: 512px;
	--hp-texture-opacity: 0.7;
	--hp-star-lg: 19px;
	--hp-lock-size: 15px;
	--hp-lock-shift: -1px;

	/* Our story */
	--hp-story-max: 760px;
	--hp-story-card-pad: 30px 26px 32px;
	--hp-story-border: 2px;
	--hp-story-photo-max: 300px;
	--hp-story-frame: 8px;

	/* FAQ */
	--hp-faq-max: 780px;
	--hp-faq-q-pad: 18px 20px;
	--hp-faq-a-pad: 0 18px 20px;
	--hp-faq-a2-pull: -8px;

	/* Explainer / VSL */
	--hp-vsl-max: 340px;
	--hp-vsl-play: 62px;
	--hp-vsl-tri-w: 19px;
	--hp-vsl-tri-h: 12px;
	--hp-vsl-tri-shift: 5px;

	/* FAQ page (--faq-*) — full /faq/ template */
	--faq-container: 780px;
	--faq-h1-lh: 1.1;
	--faq-h1-ls: -0.015em;
	--faq-h1-measure: 22ch;
	--faq-contact-measure: 46ch;
	--faq-underline-offset: 2px;
	--faq-title-pad-top: 36px;
	--faq-list-pad-top: 40px;
	--faq-list-pad-bottom: 48px;
	--faq-row-pad-x: 20px;
	--faq-stack-gap: 9px;
	--faq-chevron-stroke: 1.7;
	--faq-chevron-rotation: 180deg;
	--faq-answer-gap: 11px;
	--faq-focus-offset-inset: -3px;
	--faq-cta-max: 340px;
	--faq-cta-pad: 18px 20px;

	/* About us / Our Story page (--os-*) */
	--os-container: 780px;
	--os-h1-measure: 20ch;
	--os-weight-prose-strong: 700;
	--os-section-pad-top: 36px;
	--os-section-pad-bottom: 40px;
	--os-card-pad: 32px 24px 34px;
	--os-head-gap: 26px;
	--os-list-indent: 22px;
	--os-photo-max: 620px;
	--os-photo-max-wide: 720px;
	--os-photo-portrait-max: 440px;
	--os-photo-portrait-max-wide: 500px;
	--os-photo-ratio: 4 / 3;
	--os-photo-ratio-portrait: 4 / 5;
	--os-photo-ratio-landscape: 16 / 9;
	--os-photo-border: 8px;
	--os-photo-inline-margin: 6px;

	/* Thank you page (--ty-*) */
	--ty-column: 520px;
	--ty-title-measure: 17ch;
	--ty-cta-max: 550px;
	--ty-lift: 8vh; /* keeps the block above the true centre */

	/* Product page (--pp-*) */
	--pp-h1-lh: 1.12; /* system --type-h1-lh is 1.14 */
	--pp-h1-ls: -0.015em; /* system --type-h1-ls is -0.012em */
	--pp-title-measure: 22ch;
	--pp-lede-measure: 46ch;
	--pp-note-measure: 440px;
	--pp-price-lh: 1;
	--pp-copy-lh: 1.4;
	--pp-count-size: 20px;
	--pp-siblings-q-lh: 1.25;
	--pp-space-6: 6px;
	--pp-space-9: 9px;
	--pp-space-11: 11px;
	--pp-space-15: 15px;
	--pp-space-16: 16px;
	--pp-space-20: 20px;
	--pp-space-32: 32px;
	--pp-space-34: 34px;
	--pp-space-40: 40px;
	--pp-space-54: 54px;
	--pp-header-blur: 10px;
	--pp-nav-gap: 16px;
	--pp-logo-size: 54px;
	--pp-burger-w: 22px;
	--pp-burger-h: 16px;
	--pp-burger-bar: 2px;
	--pp-burger-step: 7px; /* bar spacing, and the cross translate */
	--pp-stripe-height: 20px;
	--pp-stripe-band: 11px;
	--pp-stripe-period: 22px;
	--pp-tier-basis: clamp(238px, 70vw, 300px);
	--pp-select-border: 2px; /* selected-state border weight */
	--pp-tier-gap: 11px;
	--pp-tier-dot: 21px;
	--pp-tier-dot-ring: 3px;
	--pp-tier-dot-offset: 3px;
	--pp-copy-icon: 20px;
	--pp-tier-price-indent: 32px; /* aligns price under the card heading */
	--pp-flag-offset: -11px;
	--pp-flag-left: 20px;
	--pp-flag-pad: 5px 11px;
	--pp-count-w: 56px;
	--pp-count-h: 52px;
	--pp-gift-width: 424px;
	--pp-gift-pad: 16px 22px 17px;
	--pp-gift-icon: 30px;
	--pp-gift-options-width: 380px;
	--pp-gift-row-pad: 12px 2px; /* 44px tap target — see README */
	--pp-gift-dot: 19px;
	--pp-gift-dot-border: 1.5px;
	--pp-gift-dot-inner: 9px;
	--pp-summary-width: 460px;
	--pp-summary-pad: 24px 22px 26px;
	--pp-line-desc-gap: 4px 7px;
	--pp-line-pill-pad: 2px 10px;
	--pp-line-pill-shift: 1px;
	--pp-checkout-pad: 18px 20px; /* system --pad-button is 18px 22px */
	--pp-guarantee-icon: 15px;
	--pp-guarantee-icon-shift: -1px;
	--pp-trustpilot-width: 340px;
	--pp-trustpilot-height: 24px;
	--pp-stars-ls: 2px;
}

/* Breakpoints and container as SCSS values
--------------------------------------------- */

/* Structure — the numbers SCSS itself needs
--------------------------------------------- */

/* Custom properties cannot be used inside a media query, so the two
   breakpoints this page changes layout at are SCSS variables. They must stay
   equal to --bp-nav and --bp-split in _tokens.scss. */

/* checkout header trims to fit the Trustpilot box */

/* Trustpilot fallback drops its text label */

/* Apple/Google Pay go side by side */

/* burger out, inline nav in; step carousel becomes a grid */

/* hero splits in two; the review strip stops snapping */

/* The container and gutter are absolute across the site. A page that sets its
   own container misaligns visibly against its neighbours when viewed in
   sequence. Written as var() in rules; kept here for reference and mixins. */

/* Mixins
--------------------------------------------- */

/* Mixins
--------------------------------------------- */

/* The two breakpoints, named so a rule says what it responds to. */

/* Section shell: centred column with the page gutter. The max width is a
   parameter because this page deliberately uses five different ones — see the
   source README, "Page-local values". */

/* Photo frames own their geometry (a fixed height or an aspect ratio, plus
   overflow: hidden); the image only fills the frame. That is why a photo can
   be swapped from the media library without touching layout. */

/* Reset, page shell, shared type treatments
--------------------------------------------- */

/* Reset
--------------------------------------------- */

/* Reset
--------------------------------------------- */

/* NOT optional. .v2-nav and .v2-footer-inner set box-sizing explicitly because
   of this rule, and the step and review cards are sized with
   min(calc(100% - 44px), 340px) and min(72vw, 300px) basis calculations that
   assume a border-box model. Under content-box the padded cards overflow their
   basis and both carousels break. This template does not load style.css, so
   nothing else supplies it. */
*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	margin: 0;
	background: var(--surface-page, #fbfaf8);
}

/* Page shell, links, images
--------------------------------------------- */

/* Page shell and elements
--------------------------------------------- */

/* overflow-x: clip contains the hero's negative-margin media bleed below
   900px without creating a scroll container. */
.v2-page {
	min-height: 100vh;
	position: relative;
	font-family: var(--font-body, "Montserrat", system-ui, sans-serif);
	font-size: var(--type-body, 16px);
	line-height: var(--type-body-lh, 1.6);
	color: var(--text-primary, #2f4148);
	background: var(--surface-page, #fbfaf8);
	overflow-x: clip;
}

a {
	color: var(--text-primary, #2f4148);
	text-decoration: none;
}

a:hover {
	color: var(--text-primary, #2f4148);
	text-decoration: underline;
}

img {
	max-width: 100%;
}

/* Screen reader text, skip link
--------------------------------------------- */

/* Screen reader text and skip link
--------------------------------------------- */

/* Clipped rather than display: none, so the text stays in the accessibility
   tree and is read out. This page does not load style.css, where the rest of
   the theme's copy of this rule lives — see sass/front.scss. */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	word-wrap: normal !important;
}

/* Visible while focused, and only then: the first Tab on the page reveals it.
   z-index clears both the header (60) and the nav overlay (55), so it cannot
   be printed underneath either of them. */
.screen-reader-text:focus {
	clip: auto !important;
	clip-path: none;
	top: var(--space-2, 8px);
	left: var(--space-2, 8px);
	z-index: 100;
	display: block;
	width: auto;
	height: auto;
	margin: 0;
	padding: var(--pad-button-nav, 11px 20px);
	font-family: var(--font-body, "Montserrat", system-ui, sans-serif);
	font-size: var(--type-caption, 14px);
	font-weight: var(--weight-strong, 600);
	line-height: normal;
	text-decoration: none;
	color: var(--text-on-navy, #fbfaf8);
	background: var(--action-fill, #2f4148);
	border-radius: var(--radius-control, 10px);
	outline: var(--focus-ring-width, 2px) solid var(--focus-ring, #99d5ef);
	outline-offset: var(--focus-ring-offset, 3px);
}

/* The skip link's target. tabindex="-1" in the markup is what lets focus land
   here at all; without it Safari moves the viewport but leaves focus behind,
   and the next Tab returns to the top of the page. No focus ring: the jump is
   programmatic, so browsers do not treat it as :focus-visible. */
.v2-page main:focus {
	outline: none;
}

/* Eyebrow, H2, H3
--------------------------------------------- */

/* Shared type treatments
--------------------------------------------- */

/* Three treatments repeat across sections with identical styling, so they are
   named here rather than duplicated nine times. Each maps to a treatment the
   design system itself names — this is not a new component library. */

/* EYEBROW — 12px/700/0.16em uppercase, labelling a section from the page
   background directly above its heading. Nine on this page. */
.v2-eyebrow {
	margin: 0 0 var(--hp-space-11, 11px);
	font-size: var(--type-eyebrow, 12px);
	font-weight: var(--type-eyebrow-weight, 700);
	letter-spacing: var(--type-eyebrow-ls, 0.16em);
	text-transform: uppercase;
	color: var(--text-body, #4c6169);
}

.v2-eyebrow-center {
	text-align: center;
}

/* SECTION HEADING — every H2 on the page. Note the line-height is 1.12, two
   hundredths tighter than the token; reproduced as designed. */
.v2-h2 {
	margin: 0;
	font-family: var(--font-heading, "Lora", Georgia, serif);
	font-weight: var(--weight-heading, 600);
	font-size: var(--type-h1, clamp(30px, 7.4vw, 40px));
	line-height: var(--hp-h2-lh, 1.12);
	letter-spacing: var(--type-h1-ls, -0.012em);
	text-align: center;
	text-wrap: pretty;
}

/* CARD HEADING — step cards, review cards, reassurance cards. */
.v2-h3 {
	margin: 0;
	font-family: var(--font-heading, "Lora", Georgia, serif);
	font-weight: var(--weight-heading, 600);
	font-size: var(--type-h4, 21px);
	line-height: var(--hp-h3-lh, 1.25);
}

/* Header, nav overlay, buttons, stripe, footer
--------------------------------------------- */

/* Buttons and focus ring
--------------------------------------------- */

/* Buttons and the focus ring
--------------------------------------------- */

/* PRIMARY BUTTON — the six identical "Buy Now" calls to action. The fill
   changes over 0.35s; the press is scale(0.975) over 0.12s and is the only
   transform in the design system. No shadow, no lift. */
.v2-btn {
	display: block;
	width: 100%;
	max-width: var(--hp-btn-max, 340px);
	margin: 0 auto;
	padding: var(--hp-btn-pad, 18px 20px);
	background: var(--action-fill, #2f4148);
	color: var(--text-on-navy, #fbfaf8);
	font-family: var(--font-body, "Montserrat", system-ui, sans-serif);
	font-weight: var(--weight-strong, 600);
	font-size: var(--type-button, 17px);
	border-radius: var(--radius-control, 10px);
	text-align: center;
	text-decoration: none;
	transition: background-color var(--dur-fill, 0.35s) var(--ease, ease), transform var(--dur-press, 0.12s) var(--ease, ease);
	-webkit-tap-highlight-color: transparent;

	/* The CTAs are links, so a:hover in base/_elements would repaint the label
     navy against the navy fill. Restated here, and on every state below. */
}

.v2-btn:hover {
	text-decoration: none;
	color: var(--text-on-navy, #fbfaf8);
	background-color: var(--action-fill-hover, #3d555f);
}

.v2-btn:active {
	color: var(--text-on-navy, #fbfaf8);
	background-color: var(--action-fill-active, #1f2e33);
	transform: scale(var(--press-scale, 0.975));
}

/* The header / nav-panel Buy Now. Same behaviour, smaller box. */
.v2-login {
	text-decoration: none;
	transition: background-color var(--dur-fill, 0.35s) var(--ease, ease), transform var(--dur-press, 0.12s) var(--ease, ease);
	-webkit-tap-highlight-color: transparent;
}

.v2-login:hover {
	text-decoration: none;
	color: var(--text-on-navy, #fbfaf8);
	background-color: var(--action-fill-hover, #3d555f);
}

.v2-login:active {
	color: var(--text-on-navy, #fbfaf8);
	background-color: var(--action-fill-active, #1f2e33);
	transform: scale(0.97);
}

/* FOCUS RING — 2px sky at 3px offset, the design system's global rule. The
   design file applied it to .v2-btn only; every interactive control gets it
   here. :focus-visible rather than :focus, so the ring appears for keyboard
   and switch users and not on mouse clicks. */
.v2-btn:focus-visible,
.v2-login:focus-visible,
.v2-logo:focus-visible,
.v2-burger:focus-visible,
.v2-nav-links a:focus-visible,
.v2-navpanel-link:focus-visible,
.v2-seg-btn:focus-visible,
.v2-age:focus-visible,
.v2-faq-q:focus-visible,
.v2-rev-name a:focus-visible,
.v2-footer-nav a:focus-visible,
.trustpilot-widget a:focus-visible {
	outline: var(--focus-ring-width, 2px) solid var(--focus-ring, #99d5ef);
	outline-offset: var(--focus-ring-offset, 3px);
}

/* On the navy band the sky ring is the accessible choice too — it has the
   contrast against #2F4148 that a navy ring would not. */
.v2-buy-section .v2-btn:focus-visible {
	outline-color: var(--focus-ring, #99d5ef);
}

/* Membership checkout (v3) — scoped under .llife-checkout-v3 on body
--------------------------------------------- */

/* Membership checkout buttons — restyle legacy .btn / .btn-orange under .llife-checkout-v3
--------------------------------------------- */

/* Mockups match the front primary (navy, Montserrat 17, radius-control).
   Markup keeps WooCommerce classes; front.css overrides them only on this page. */
body.llife-checkout-v3 .llife-checkout-gate__continue.btn,
body.llife-checkout-v3 .llife-checkout-gate__continue.btn-orange,
body.llife-checkout-v3 .llife-checkout-gate__continue.button,
body.llife-checkout-v3 #place_order.btn,
body.llife-checkout-v3 #place_order.btn-orange,
body.llife-checkout-v3 #place_order.button,
body.llife-checkout-v3 .form-row.place-order #place_order {
	display: block;
	width: 100%;
	max-width: none;
	margin: 0;
	padding: var(--pad-button, 18px 22px);
	min-height: 0;
	background: var(--action-fill, #2f4148) !important;
	background-color: var(--action-fill, #2f4148) !important;
	color: var(--text-on-navy, #fbfaf8) !important;
	font-family: var(--font-body, "Montserrat", system-ui, sans-serif);
	font-weight: var(--weight-strong, 600);
	font-size: var(--type-button, 17px);
	line-height: 1.25;
	border: 0 !important;
	border-radius: var(--radius-control, 10px);
	box-shadow: none;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--dur-fill, 0.35s) var(--ease, ease), transform var(--dur-press, 0.12s) var(--ease, ease);
	-webkit-tap-highlight-color: transparent;
}

body.llife-checkout-v3 .llife-checkout-gate__continue.btn:hover,
body.llife-checkout-v3 .llife-checkout-gate__continue.btn:focus,
body.llife-checkout-v3 .llife-checkout-gate__continue.btn-orange:hover,
body.llife-checkout-v3 .llife-checkout-gate__continue.btn-orange:focus,
body.llife-checkout-v3 .llife-checkout-gate__continue.button:hover,
body.llife-checkout-v3 .llife-checkout-gate__continue.button:focus,
body.llife-checkout-v3 #place_order.btn:hover,
body.llife-checkout-v3 #place_order.btn:focus,
body.llife-checkout-v3 #place_order.btn-orange:hover,
body.llife-checkout-v3 #place_order.btn-orange:focus,
body.llife-checkout-v3 #place_order.button:hover,
body.llife-checkout-v3 #place_order.button:focus,
body.llife-checkout-v3 .form-row.place-order #place_order:hover,
body.llife-checkout-v3 .form-row.place-order #place_order:focus {
	background: var(--action-fill-hover, #3d555f) !important;
	background-color: var(--action-fill-hover, #3d555f) !important;
	color: var(--text-on-navy, #fbfaf8) !important;
	text-decoration: none;
}

body.llife-checkout-v3 .llife-checkout-gate__continue.btn:active,
body.llife-checkout-v3 .llife-checkout-gate__continue.btn-orange:active,
body.llife-checkout-v3 .llife-checkout-gate__continue.button:active,
body.llife-checkout-v3 #place_order.btn:active,
body.llife-checkout-v3 #place_order.btn-orange:active,
body.llife-checkout-v3 #place_order.button:active,
body.llife-checkout-v3 .form-row.place-order #place_order:active {
	background: var(--action-fill-active, #1f2e33) !important;
	background-color: var(--action-fill-active, #1f2e33) !important;
	transform: scale(var(--press-scale, 0.975));
}

body.llife-checkout-v3 .llife-checkout-gate__continue.btn:focus-visible,
body.llife-checkout-v3 .llife-checkout-gate__continue.btn-orange:focus-visible,
body.llife-checkout-v3 .llife-checkout-gate__continue.button:focus-visible,
body.llife-checkout-v3 #place_order.btn:focus-visible,
body.llife-checkout-v3 #place_order.btn-orange:focus-visible,
body.llife-checkout-v3 #place_order.button:focus-visible,
body.llife-checkout-v3 .form-row.place-order #place_order:focus-visible {
	outline: var(--focus-ring-width, 2px) solid var(--focus-ring, #99d5ef);
	outline-offset: var(--focus-ring-offset, 3px);
}

body.llife-checkout-v3 .llife-checkout-gate__continue {
	margin-top: var(--space-6, 18px);
}

body.llife-checkout-v3 .form-row.place-order {
	align-items: stretch;
}

body.llife-checkout-v3 .form-row.place-order #place_order {
	max-width: none;
	margin-left: 0;
	margin-right: 0;
}

body.llife-checkout-v3 .form-row.place-order .llife-checkout-under-button {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2, 8px);
	width: 100%;
	margin: var(--space-4, 12px) 0 0;
	padding: 0;
	text-align: center;
	font-family: var(--font-body, "Montserrat", system-ui, sans-serif);
	font-size: var(--type-caption, 14px);
	font-weight: var(--weight-medium, 500);
	line-height: var(--type-small-lh, 1.5);
	color: var(--text-body, #4c6169);
}

body.llife-checkout-v3 .form-row.place-order .llife-checkout-under-button::before {
	position: static;
	transform: none;
	flex-shrink: 0;
	width: var(--hp-lock-size, 15px);
	height: var(--hp-lock-size, 15px);
	margin: 0;
}

/* Membership checkout layout and chrome — scoped under body.llife-checkout-v3
--------------------------------------------- */

/* Beat legacy woocommerce.css (Dreaming Outloud, orange dashed cards, black
   field borders, Lora on buttons) by nesting under body + page shell. */
body.llife-checkout-v3 {

	/* Cap at Our Story width — never wider than --hp-story-max (760).
     Always a single column (gate → summary → payment), all breakpoints. */

	/* Summary + express + card: revealed together after Continue. */

	/* --- Gate ------------------------------------------------------------- */

	/* --- Order summary ---------------------------------------------------- */

	/* Rows follow the product page summary (.p-line): 15px, grey copy, no rule
     between them — only the dashed one above the total. */

	/* "Child 1" is the only strong word in the row, as on the product page. */

	/* .p-total: one dashed rule above, Lora label at 19 and amount at 22. */

	/* Total lives in the Pay button on membership checkout. */

	/* Discount toggle — full-width row, chevron flips on aria-expanded. */

	/* --- Express + payment ------------------------------------------------ */

	/* Same eyebrow treatment for EXPRESS and OR PAY BY CARD (no side rules). */

	/* Trustpilot under Pay — centred. */
}

body.llife-checkout-v3 .v2-page {
	background: var(--surface-accent, #fdf1e2);
	color: var(--text-primary, #2f4148);
	font-family: var(--font-body, "Montserrat", system-ui, sans-serif);
	font-size: var(--type-body, 16px);
	line-height: var(--type-body-lh, 1.6);
}

body.llife-checkout-v3 .v2-header--checkout {
	background: var(--surface-card, #fff);
	border-bottom: 1px solid var(--border-hairline, rgba(47, 65, 72, 0.1));
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}

body.llife-checkout-v3 .v2-header--checkout .v2-nav {
	justify-content: flex-start;
	background: var(--surface-card, #fff);
}

body.llife-checkout-v3 .v2-footer--checkout {
	background: var(--surface-card, #fff);
}

body.llife-checkout-v3 .v2-footer--checkout .v2-footer-legal {
	font-family: var(--font-body, "Montserrat", system-ui, sans-serif);
	font-size: var(--type-caption, 14px);
	font-weight: var(--weight-body, 400);
	color: var(--text-body, #4c6169);
}

body.llife-checkout-v3 .llife-checkout-v3__content.checkout.container,
body.llife-checkout-v3 .llife-checkout-v3__content.woocommerce-form,
body.llife-checkout-v3 .llife-checkout-v3__content.woocommerce-form.checkout {
	box-sizing: border-box;
	width: 100%;
	max-width: var(--hp-story-max, 760px);
	margin: 0 auto;
	padding: var(--space-8, 26px) var(--gutter, 22px) var(--space-12, 44px);
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: stretch;
	gap: var(--space-8, 26px);
	min-height: calc(100vh - 177px);
}

body.llife-checkout-v3 .llife-checkout-gate,
body.llife-checkout-v3 .woocommerce-checkout-review-order.product-info-block,
body.llife-checkout-v3 .product-info-block,
body.llife-checkout-v3 form.checkout.woo-inputs {
	width: 100%;
	max-width: none;
	margin-left: 0;
	margin-right: 0;
	flex: none;
}

body.llife-checkout-v3 .llife-checkout-gate-locked-region {
	display: flex;
	flex-direction: column;
	gap: var(--space-8, 26px);
	width: 100%;
}

body.llife-checkout-v3 .llife-checkout-gate {
	margin-bottom: 0;
	width: 100%;
}

body.llife-checkout-v3 .llife-checkout-title,
body.llife-checkout-v3 .llife-checkout-next-steps {
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	border-radius: 0;
}

body.llife-checkout-v3 .llife-checkout-next-steps__title {
	margin: 0 0 var(--space-6, 18px);
	font-family: var(--font-heading, "Lora", Georgia, serif);
	font-weight: var(--weight-heading, 600);
	font-size: var(--type-h1, clamp(30px, 7.4vw, 40px));
	line-height: var(--type-h1-lh, 1.14);
	letter-spacing: var(--type-h1-ls, -0.012em);
	text-align: left;
	color: var(--text-primary, #2f4148);
}

body.llife-checkout-v3 .llife-checkout-gate__subhint {
	display: block;
	margin: 0 0 var(--space-2, 8px);
	font-family: var(--font-body, "Montserrat", system-ui, sans-serif);
	font-size: var(--type-caption, 14px);
	font-weight: var(--weight-medium, 500);
	line-height: var(--type-small-lh, 1.5);
	color: var(--text-label, #6b7f86);
}

body.llife-checkout-v3 .llife-checkout-gate__posthint,
body.llife-checkout-v3 .llife-checkout-gate__hint {
	font-family: var(--font-body, "Montserrat", system-ui, sans-serif);
	font-size: var(--type-caption, 14px);
	font-weight: var(--weight-body, 400);
	color: var(--text-body, #4c6169);
}

body.llife-checkout-v3 .llife-checkout-gate__error {
	font-family: var(--font-body, "Montserrat", system-ui, sans-serif);
	font-size: var(--type-caption, 14px);
	color: #c00;
}

body.llife-checkout-v3 .llife-checkout-gate .form-row {
	margin: 0;
	padding: 0;
	width: 100%;
}

body.llife-checkout-v3 .llife-checkout-gate .input-text,
body.llife-checkout-v3 .llife-checkout-gate input.input-text,
body.llife-checkout-v3 .llife-checkout-gate textarea.input-text {
	width: 100%;
	box-sizing: border-box;
	margin: 0 0 var(--space-5, 14px);
	padding: var(--pad-input, 16px 18px);
	background: var(--surface-card, #fff) !important;
	border: 1px solid var(--border-field, #c9d2d5);
	border-radius: var(--radius-control, 10px);
	color: var(--text-primary, #2f4148);
	font-family: var(--font-body, "Montserrat", system-ui, sans-serif);
	font-size: var(--type-body, 16px);
	font-weight: var(--weight-medium, 500);
	line-height: var(--type-body-lh, 1.6);
	transition: border-color var(--dur-border, 0.25s) var(--ease, ease);
}

body.llife-checkout-v3 .llife-checkout-gate .input-text:focus,
body.llife-checkout-v3 .llife-checkout-gate input.input-text:focus,
body.llife-checkout-v3 .llife-checkout-gate textarea.input-text:focus {
	border-color: var(--border-field-focus, #2f4148);
	outline: none;
}

body.llife-checkout-v3 .llife-checkout-gate .input-text::placeholder,
body.llife-checkout-v3 .llife-checkout-gate input.input-text::placeholder,
body.llife-checkout-v3 .llife-checkout-gate textarea.input-text::placeholder {
	color: var(--text-placeholder, #6b7f86);
	font-weight: var(--weight-body, 400);
	opacity: 1;
}

body.llife-checkout-v3 .llife-checkout-v3-guarantee {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2, 8px);
	margin: var(--space-5, 14px) 0 0;
	font-family: var(--font-body, "Montserrat", system-ui, sans-serif);
	font-size: var(--type-caption, 14px);
	font-weight: var(--weight-medium, 500);
	line-height: var(--type-small-lh, 1.5);
	color: var(--text-body, #4c6169);
	text-align: center;
}

body.llife-checkout-v3 .llife-checkout-v3-guarantee__icon {
	display: block;
	width: var(--hp-lock-size, 15px);
	height: var(--hp-lock-size, 15px);
	flex-shrink: 0;
}

body.llife-checkout-v3 .woocommerce-checkout-review-order.product-info-block,
body.llife-checkout-v3 .product-info-block {
	width: 100%;
	max-width: none;
	margin: 0;
	padding: var(--space-8, 26px) var(--space-7, 22px) var(--space-7, 22px);
	border: 1px solid var(--border-card, #e7e4dc);
	border-radius: var(--radius-card, 14px);
	background: var(--surface-card, #fff);
	display: flex;
	flex-direction: column;
	gap: 0;
	height: auto;
	box-sizing: border-box;
	place-self: center;
}

body.llife-checkout-v3 .product-info-block .product-text {
	width: 100%;
	align-self: stretch;
	align-items: stretch;
	row-gap: 0;
	display: flex;
	flex-direction: column;
}

body.llife-checkout-v3 .product-info-block .product-text h3 {
	margin: 0 0 var(--space-6, 18px);
	font-family: var(--font-heading, "Lora", Georgia, serif);
	font-weight: var(--weight-heading, 600);
	font-size: var(--type-h2, clamp(19px, 4.8vw, 22px));
	line-height: var(--type-h2-lh, 1.2);
	color: var(--text-primary, #2f4148);
	text-align: left;
	place-self: stretch;
}

body.llife-checkout-v3 .product-info-block .product-text .llife-checkout-applied-discount {
	display: none;
}

body.llife-checkout-v3 .numbered-list {
	width: 100%;
	margin: 0;
	font-family: var(--font-body, "Montserrat", system-ui, sans-serif);
	font-size: var(--type-small, 15px);
	font-weight: var(--weight-body, 400);
	line-height: var(--type-small-lh, 1.5);
	color: var(--text-primary, #2f4148);
}

body.llife-checkout-v3 .numbered-list .numbered-list-item,
body.llife-checkout-v3 .numbered-list p.numbered-list-item {
	width: 100%;
	margin: 0;
	padding: 0 0 var(--pp-space-9, 9px);
	padding-left: 0;
	justify-self: stretch;
}

body.llife-checkout-v3 .numbered-list p {
	padding-left: 0;
}

body.llife-checkout-v3 .llife-checkout-membership-line {
	margin-bottom: 0;
	border-bottom: 0;
}

body.llife-checkout-v3 .llife-checkout-membership-line__row {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: baseline;
	gap: var(--space-5, 14px);
	width: 100%;
	font-family: var(--font-body, "Montserrat", system-ui, sans-serif);
	font-size: var(--type-small, 15px);
	line-height: var(--type-small-lh, 1.5);
	font-weight: var(--weight-body, 400);
}

body.llife-checkout-v3 .llife-checkout-membership-line__copy {
	flex: 1 1 auto;
	min-width: 0;
	text-align: left;
}

body.llife-checkout-v3 .llife-checkout-membership-line__title {
	display: inline;
	font-family: var(--font-body, "Montserrat", system-ui, sans-serif);
	font-size: var(--type-small, 15px);
	font-weight: var(--weight-strong, 600);
	color: var(--text-primary, #2f4148);
	flex-wrap: wrap;
	column-gap: var(--space-2, 8px);
}

body.llife-checkout-v3 .llife-checkout-membership-line__copies {
	font-family: var(--font-body, "Montserrat", system-ui, sans-serif);
	font-size: var(--type-small, 15px);
	font-weight: var(--weight-body, 400);
	color: var(--text-body, #4c6169);
}

body.llife-checkout-v3 .llife-checkout-membership-line__discount {
	display: inline-block;
	margin-left: var(--space-2, 8px);
	padding: 2px 10px;
	vertical-align: 1px;
	font-family: var(--font-body, "Montserrat", system-ui, sans-serif);
	font-size: var(--type-fine, 13px);
	font-weight: var(--weight-medium, 500);
	line-height: 1.4;
	color: var(--text-primary, #2f4148);
	background: var(--pill-fill, #fddda6);
	border-radius: var(--radius-pill, 999px);
	white-space: nowrap;
}

body.llife-checkout-v3 .llife-checkout-membership-line__prices {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	text-align: right;
}

body.llife-checkout-v3 .llife-checkout-membership-line__price {
	display: inline-flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	align-items: baseline;
	gap: var(--space-2, 8px);
	text-align: right;
}

body.llife-checkout-v3 .llife-checkout-membership-line__price,
body.llife-checkout-v3 .llife-checkout-membership-line__price-value,
body.llife-checkout-v3 .llife-checkout-membership-line__price .woocommerce-Price-amount,
body.llife-checkout-v3 .llife-checkout-membership-line__price-value .woocommerce-Price-amount {
	font-family: var(--font-body, "Montserrat", system-ui, sans-serif);
	font-size: var(--type-small, 15px);
	font-weight: var(--weight-body, 400);
	font-variant-numeric: var(--numeric-price, tabular-nums);
	color: var(--text-primary, #2f4148);
	white-space: nowrap;
}

body.llife-checkout-v3 .order-total.woocommerce-variation-price {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: baseline;
	gap: var(--pp-space-16, 16px);
	width: 100%;
	margin: var(--pp-space-15, 15px) 0 0;
	padding: var(--pp-space-15, 15px) 0 0;
	border-top: 1px dashed var(--border-dashed, #e7e4dc);
	border-bottom: 0;
	align-self: stretch;
	font-family: var(--font-heading, "Lora", Georgia, serif);
	font-weight: var(--weight-heading, 600);
	font-size: var(--type-h3, 19px);
	line-height: var(--type-h3-lh, 1.3);
	color: var(--text-primary, #2f4148);
	font-variant-numeric: var(--numeric-price, tabular-nums);
}

body.llife-checkout-v3 .order-total.woocommerce-variation-price > span:first-child {
	flex: 1 1 auto;
	text-align: left;
}

body.llife-checkout-v3 .order-total.woocommerce-variation-price .woocommerce-Price-amount,
body.llife-checkout-v3 .order-total.woocommerce-variation-price strong {
	flex: 0 0 auto;
	margin: 0;
	font-weight: var(--weight-heading, 600);
	font-size: var(--type-h2, clamp(19px, 4.8vw, 22px));
	line-height: var(--pp-price-lh, 1);
	text-align: right;
}

body.llife-checkout-v3 .order-total-low {
	font-family: var(--font-heading, "Lora", Georgia, serif);
	font-weight: var(--weight-heading, 600);
	font-size: var(--type-h3, 19px);
	line-height: var(--type-h3-lh, 1.3);
	color: var(--text-primary, #2f4148);
}

body.llife-checkout-v3 .order-total-low strong {
	font-weight: var(--weight-heading, 600);
	font-size: inherit;
}

body.llife-checkout-v3 .form-row.place-order .order-total-low {
	display: none;
}

body.llife-checkout-v3 .woocommerce-form-coupon-wrap {
	width: 100%;
	margin: 0;
	padding: var(--space-5, 14px) 0 0;
	text-align: left;
}

body.llife-checkout-v3 .coupon-toggle {
	display: block;
	width: 100%;
	justify-content: unset;
}

body.llife-checkout-v3 .coupon-toggle .showcoupon {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4, 12px);
	width: 100%;
	margin: 0;
	padding: 0;
	padding-right: 0;
	color: var(--text-body, #4c6169);
	font-family: var(--font-body, "Montserrat", system-ui, sans-serif);
	font-size: var(--type-caption, 14px);
	font-weight: var(--weight-medium, 500);
	line-height: var(--type-small-lh, 1.5);
	text-decoration: none;
	cursor: pointer;
}

body.llife-checkout-v3 .coupon-toggle .showcoupon:hover {
	color: var(--text-primary, #2f4148);
	text-decoration: none;
}

body.llife-checkout-v3 .coupon-toggle .ll-custom-select__chevron {
	position: static;
	flex-shrink: 0;
	top: auto;
	right: auto;
	width: 10px;
	height: 10px;
	margin: 0;
	border-right: 2px solid var(--text-body, #4c6169);
	border-bottom: 2px solid var(--text-body, #4c6169);
	transform: rotate(45deg);
	transition: transform var(--dur-chevron, 0.25s) var(--ease, ease);
}

body.llife-checkout-v3 .coupon-toggle .showcoupon[aria-expanded="true"] .ll-custom-select__chevron {
	transform: rotate(-135deg);
}

body.llife-checkout-v3 .checkout_coupon {
	display: flex;
	justify-content: space-between;
	align-items: stretch;
	width: 100%;
	margin-top: var(--space-4, 12px);
}

body.llife-checkout-v3 .checkout_coupon .form-row-first .input-text {
	width: 100%;
}

body.llife-checkout-v3 .checkout_coupon .form-row-last {
	padding-left: 10px;
}

body.llife-checkout-v3 .checkout_coupon .coupon-button,
body.llife-checkout-v3 .checkout_coupon .button {
	font-family: var(--font-body, "Montserrat", system-ui, sans-serif);
	font-size: var(--type-caption, 14px);
	font-weight: var(--weight-medium, 500);
	color: var(--text-primary, #2f4148) !important;
	background: var(--pill-fill, #fddda6);
	border: 1px solid var(--border-strong, #2f4148);
	border-radius: var(--radius-control, 10px);
}

body.llife-checkout-v3 .checkout_coupon .input-text {
	font-family: var(--font-body, "Montserrat", system-ui, sans-serif);
	font-weight: var(--weight-medium, 500);
	color: var(--text-primary, #2f4148);
	border: 1px solid var(--border-field, #c9d2d5);
	border-radius: var(--radius-control, 10px);
	background: var(--surface-card, #fff) !important;
}

body.llife-checkout-v3 .checkout_coupon .coupon-error-notice {
	font-family: var(--font-body, "Montserrat", system-ui, sans-serif);
}

body.llife-checkout-v3 .checkout-smoooth,
body.llife-checkout-v3 .llife-checkout-v3-express-label,
body.llife-checkout-v3 #wc-stripe-express-checkout-button-separator {
	display: block;
	width: 100%;
	margin: 0 0 var(--space-5, 14px);
	padding: 0;
	border: 0;
	background: none;
	font-family: var(--font-body, "Montserrat", system-ui, sans-serif);
	font-size: var(--type-eyebrow, 12px);
	font-weight: var(--type-eyebrow-weight, 700);
	line-height: var(--type-fine-lh, 1.6);
	letter-spacing: var(--type-eyebrow-ls, 0.16em);
	text-transform: uppercase;
	text-align: center;
	color: var(--text-label, #6b7f86);
	white-space: nowrap;
}

body.llife-checkout-v3 .checkout-smoooth::before,
body.llife-checkout-v3 .checkout-smoooth::after,
body.llife-checkout-v3 .llife-checkout-v3-express-label::before,
body.llife-checkout-v3 .llife-checkout-v3-express-label::after,
body.llife-checkout-v3 #wc-stripe-express-checkout-button-separator::before,
body.llife-checkout-v3 #wc-stripe-express-checkout-button-separator::after {
	content: none;
}

body.llife-checkout-v3 #wc-stripe-express-checkout-button-separator {
	margin: var(--space-5, 14px) 0;
	padding-top: 14px;
	font-size: 0;
	line-height: 0;
	color: transparent;
	min-height: calc(var(--type-eyebrow, 12px) * var(--type-fine-lh, 1.6));
}

body.llife-checkout-v3 #wc-stripe-express-checkout-button-separator::before {
	content: "— OR PAY BY CARD —";
	display: block;
	font-family: var(--font-body, "Montserrat", system-ui, sans-serif);
	font-size: var(--type-eyebrow, 12px);
	font-weight: var(--type-eyebrow-weight, 700);
	line-height: var(--type-fine-lh, 1.6);
	letter-spacing: var(--type-eyebrow-ls, 0.16em);
	text-transform: uppercase;
	text-align: center;
	color: var(--text-label, #6b7f86);
	white-space: nowrap;
}

body.llife-checkout-v3 #wc-stripe-express-checkout-button-separator::after {
	content: none;
}

body.llife-checkout-v3 .payment-back {
	background: transparent;
	border: none;
	border-radius: 0;
	padding: 22px 0;
}

body.llife-checkout-v3 .payment-back::before {
	display: none;
}

body.llife-checkout-v3 #customer_details {
	background: var(--surface-card, #fff);
	border: 1px solid var(--border-card, #e7e4dc);
	border-radius: var(--radius-card, 14px);
	padding: var(--pad-card, 22px 20px 24px);
}

body.llife-checkout-v3 #customer_details > .woocommerce-billing-fields:first-of-type {
	position: relative;
}

body.llife-checkout-v3 #customer_details > .woocommerce-billing-fields:first-of-type::before {
	position: absolute;
	content: "";
	right: 0;
	top: 0;
	background-repeat: no-repeat;
	width: 100%;
	max-width: 200px;
	height: 25px;
	background-image: url("./img/stripe-blurple.svg");
	background-size: auto;
	background-position: right;
}

body.llife-checkout-v3 .woo-inputs,
body.llife-checkout-v3 .woocommerce-billing-fields,
body.llife-checkout-v3 .woocommerce-shipping-fields,
body.llife-checkout-v3 .payment-methods {
	font-family: var(--font-body, "Montserrat", system-ui, sans-serif);
	color: var(--text-primary, #2f4148);
}

body.llife-checkout-v3 .woo-inputs .section-header,
body.llife-checkout-v3 .woocommerce-billing-fields h3,
body.llife-checkout-v3 .woocommerce-shipping-fields h3,
body.llife-checkout-v3 #payment .payment_methods label {
	font-family: var(--font-heading, "Lora", Georgia, serif);
	font-weight: var(--weight-heading, 600);
	font-size: var(--type-h2, clamp(19px, 4.8vw, 22px));
	line-height: var(--type-h2-lh, 1.2);
	color: var(--text-primary, #2f4148);
}

body.llife-checkout-v3 .woo-inputs .input-text,
body.llife-checkout-v3 .woo-inputs input.input-text,
body.llife-checkout-v3 .woo-inputs .woocommerce-input-wrapper select,
body.llife-checkout-v3 .woo-inputs select {
	background: var(--surface-card, #fff) !important;
	border: 1px solid var(--border-field, #c9d2d5);
	border-radius: var(--radius-payment, 8px);
	color: var(--text-primary, #2f4148);
	font-family: var(--font-body, "Montserrat", system-ui, sans-serif);
	font-size: var(--type-body, 16px);
	font-weight: var(--weight-medium, 500);
}

body.llife-checkout-v3 .woocommerce-privacy-policy-text,
body.llife-checkout-v3 .woocommerce-terms-and-conditions-wrapper {
	font-family: var(--font-body, "Montserrat", system-ui, sans-serif);
	font-size: var(--type-fine, 13px);
	line-height: var(--type-fine-lh, 1.6);
	color: var(--text-body, #4c6169);
	text-align: center;
}

body.llife-checkout-v3 .woocommerce-privacy-policy-text a,
body.llife-checkout-v3 .woocommerce-terms-and-conditions-wrapper a {
	color: var(--text-primary, #2f4148);
	text-decoration: underline;
}

body.llife-checkout-v3 .llife-checkout-under-button {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2, 8px);
	width: 100%;
	margin: var(--space-4, 12px) 0 0;
	padding: 0;
	text-align: center;
	font-family: var(--font-body, "Montserrat", system-ui, sans-serif);
	font-size: var(--type-caption, 14px);
	font-weight: var(--weight-medium, 500);
	line-height: var(--type-small-lh, 1.5);
	color: var(--text-body, #4c6169);
}

body.llife-checkout-v3 .llife-checkout-trustpilot {
	display: block;
	width: 100%;
	max-width: var(--hp-tp-width, 340px);
	height: var(--hp-tp-height, 24px);
	margin: var(--space-5, 14px) auto 0;
}

body.llife-checkout-v3 .llife-checkout-trustpilot .v2-tp-fallback {
	justify-content: center;
	gap: var(--space-2, 8px);
}

body.llife-checkout-v3 .llife-checkout-trustpilot .v2-tp-stars {
	font-size: var(--type-body, 16px);
	letter-spacing: var(--hp-stars-ls, 2px);
	color: var(--brand-trustpilot, #00b67a);
}

body.llife-checkout-v3 .llife-checkout-trustpilot .v2-tp-label {
	font-family: var(--font-body, "Montserrat", system-ui, sans-serif);
	font-size: var(--type-caption, 14px);
	font-weight: var(--weight-medium, 500);
	color: var(--text-body, #4c6169);
}

@media (max-width: 429px) {

	body.llife-checkout-v3 .v2-header--checkout .v2-nav {
		padding-left: var(--gutter-tight, 13px);
		padding-right: var(--gutter-tight, 13px);
	}

	body.llife-checkout-v3 .v2-header--checkout .v2-logo img {
		width: var(--space-10, 38px);
		height: var(--space-10, 38px);
	}
}

/* Waiting state shared by the three checkout buttons
--------------------------------------------- */

/* Waiting state — three animated dots after the label
---------------------------------------------

   JS adds .button-loading while a request is in flight: the product page
   Checkout (front-membership-product.js), Continue to payment and Place order
   (front-checkout.js). Same animation the legacy .btn carries in
   woocommerce.css, which none of these three buttons inherit. */
.v2-btn.button-loading,
body.llife-checkout-v3 .llife-checkout-gate__continue.button-loading,
body.llife-checkout-v3 #place_order.button-loading {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.4em;
	cursor: wait;
	pointer-events: none;
}

.v2-btn.button-loading::after,
body.llife-checkout-v3 .llife-checkout-gate__continue.button-loading::after,
body.llife-checkout-v3 #place_order.button-loading::after {
	content: "";
	flex: 0 0 auto;
	width: 6px;
	height: 6px;
	margin-left: 2px;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.35);
	box-shadow: 10px 0 0 0 rgba(255, 255, 255, 0.35), 20px 0 0 0 rgba(255, 255, 255, 0.35);
	animation: llife-membership-checkout-dots 1.05s ease-in-out infinite;
}

@keyframes llife-membership-checkout-dots {

	0%,
	100% {
		background-color: rgba(255, 255, 255, 0.35);
		box-shadow: 10px 0 0 0 rgba(255, 255, 255, 0.35), 20px 0 0 0 rgba(255, 255, 255, 0.35);
	}

	16.6% {
		background-color: #fff;
		box-shadow: 10px 0 0 0 rgba(255, 255, 255, 0.35), 20px 0 0 0 rgba(255, 255, 255, 0.35);
	}

	33.3% {
		background-color: rgba(255, 255, 255, 0.35);
		box-shadow: 10px 0 0 0 #fff, 20px 0 0 0 rgba(255, 255, 255, 0.35);
	}

	50% {
		background-color: rgba(255, 255, 255, 0.35);
		box-shadow: 10px 0 0 0 rgba(255, 255, 255, 0.35), 20px 0 0 0 #fff;
	}
}

/* Header, inline nav, burger
--------------------------------------------- */

/* Header, inline nav, burger
--------------------------------------------- */

/* Measured 73px at every width: 54px logo + 9px padding top and bottom + 1px
   border. Position is RELATIVE, not sticky — this page's header scrolls away.
   js/front-home.js writes the measured height to --v2-navh, which the mobile
   nav overlay is positioned from; keep doing that if the markup changes,
   because the header grows when the inline nav wraps. */
.v2-header {
	position: relative;
	z-index: 60;
	background: var(--surface-page-translucent, rgba(251, 250, 248, 0.94));
	backdrop-filter: blur(var(--hp-header-blur, 10px));
	-webkit-backdrop-filter: blur(var(--hp-header-blur, 10px));
	border-bottom: 1px solid var(--border-hairline, rgba(47, 65, 72, 0.1));
}

.v2-nav {
	box-sizing: border-box;
	width: 100%;
	margin: 0;
	padding: var(--pad-header, 9px 20px); /* note 20px, not the 22px page gutter */
	display: flex;
	align-items: center;
	gap: var(--hp-nav-gap, 16px);
}

.v2-logo {
	display: flex;
	align-items: center;
}

.v2-logo img {
	display: block;
	width: var(--hp-logo-size, 54px);
	height: var(--hp-logo-size, 54px);
}

/* Membership checkout: logo only, left-aligned. */
.v2-header--checkout .v2-nav {
	justify-content: flex-start;
}

/* Inline nav and header Buy Now are hidden below 760px. */
.v2-nav-links {
	display: none;
}

.v2-nav-login {
	display: none;
	font-family: var(--font-body, "Montserrat", system-ui, sans-serif);
	font-weight: var(--weight-strong, 600);
	font-size: var(--type-caption, 14px);
	letter-spacing: var(--hp-nav-login-ls, 0.01em);
	color: var(--text-on-navy, #fbfaf8);
	background: var(--action-fill, #2f4148);
	border-radius: var(--radius-control, 10px);
	padding: var(--pad-button-nav, 11px 20px);
}

.v2-burger {
	display: flex;
	margin-left: auto;
	align-items: center;
	justify-content: center;
	width: var(--hit-min, 44px); /* do not trim the 44px target */
	height: var(--hit-min, 44px);
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
}

.v2-burger-box {
	position: relative;
	display: block;
	width: var(--hp-burger-w, 22px);
	height: var(--hp-burger-h, 16px);
}

.v2-burger-bar {
	position: absolute;
	left: 0;
	display: block;
	width: var(--hp-burger-w, 22px);
	height: var(--hp-burger-bar, 2px);
	border-radius: var(--radius-line, 2px);
	background: var(--action-fill, #2f4148);
}

/* The burger morphing into a cross is the one place a transform runs at fill
   speed (0.35s) rather than press speed. The middle bar fades over 0.2s. */
.v2-burger-bar--top {
	top: 0;
	transition: transform var(--dur-morph, 0.35s) var(--ease, ease);
}

.v2-burger-bar--mid {
	top: 7px;
	transition: opacity var(--dur-fade, 0.2s) var(--ease, ease);
	opacity: 1;
}

.v2-burger-bar--bottom {
	top: 14px;
	transition: transform var(--dur-morph, 0.35s) var(--ease, ease);
}

.v2-burger[aria-expanded="true"] .v2-burger-bar--top {
	transform: translateY(var(--hp-burger-step, 7px)) rotate(45deg);
}

.v2-burger[aria-expanded="true"] .v2-burger-bar--mid {
	opacity: 0;
}

.v2-burger[aria-expanded="true"] .v2-burger-bar--bottom {
	transform: translateY(calc(-1 * var(--hp-burger-step, 7px))) rotate(-45deg);
}

/* In-page anchors. The header does not stick here, so no offset is needed —
   the property is declared so it is obvious it was considered. If this header
   is ever made sticky, change this to var(--v2-navh). */
#how-it-works,
#our-books,
#our-questions {
	scroll-margin-top: 0;
}

/* --- 760px — burger out, inline nav and header Buy Now in ---------------- */
@media (min-width: 760px) {

	.v2-nav-links {
		display: flex;
		align-items: center;
		gap: var(--space-8, 26px);
		margin-left: auto;
		font-size: var(--type-caption, 14px);
		font-weight: var(--weight-medium, 500);
	}

	.v2-nav-login {
		display: inline-block;
	}

	.v2-burger {
		display: none;
	}
}

/* Mobile nav overlay
--------------------------------------------- */

/* Mobile nav overlay
--------------------------------------------- */

/* A full-bleed panel, not a raised sheet — the brand has no elevation system,
   so no shadow and no scrim. It starts at --v2-navh, measured from the real
   header by js/front-home.js, and sits BELOW the header's z-index on purpose
   so the header stays visible and the burger stays tappable while it is open. */
.v2-navpanel {
	position: fixed;
	left: 0;
	right: 0;
	top: var(--v2-navh, 73px);
	bottom: 0;
	z-index: 55;
	background: var(--surface-page, #fbfaf8);
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: var(--space-6, 18px);
	padding: var(--space-8, 26px) var(--gutter, 22px) calc(var(--space-8, 26px) + env(safe-area-inset-bottom));
}

.v2-navpanel[hidden] {
	display: none;
}

.v2-navpanel-nav {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: var(--space-1, 4px);
	text-align: right;
}

.v2-navpanel-link {
	font-family: var(--font-heading, "Lora", Georgia, serif);
	font-weight: var(--weight-heading, 600);
	font-size: var(--type-h4, 21px);
	line-height: var(--hp-navpanel-lh, 1.3);
	padding: var(--space-4, 12px) 0;
	border-bottom: 1px solid var(--border-hairline, rgba(47, 65, 72, 0.1));
}

.v2-navpanel-buy {
	align-self: flex-end;
	font-family: var(--font-body, "Montserrat", system-ui, sans-serif);
	font-weight: var(--weight-strong, 600);
	font-size: var(--type-body, 16px);
	color: var(--text-on-navy, #fbfaf8);
	background: var(--action-fill, #2f4148);
	border-radius: var(--radius-control, 10px);
	padding: var(--hp-navpanel-buy-pad, 13px 24px);
}

/* Candy stripe
--------------------------------------------- */

/* Candy stripe
--------------------------------------------- */

/* The signature device: a 20px band of 11px vertical stripes on cream. It
   marks a page edge or the seam between hero and content, never a decorative
   flourish mid-section. Blue by default; .v2-stripe-peach is the honey variant.
     .v2-stripe-mid     the seam between hero text and hero photo — mobile only
     .v2-stripe-bottom  the full-width rule under the hero — from 900px */
.v2-stripe {
	height: var(--hp-stripe-height, 20px);
	background: repeating-linear-gradient(90deg, var(--stripe-primary, #99d5ef) 0 var(--hp-stripe-band, 11px), var(--stripe-gap, #fdf1e2) var(--hp-stripe-band, 11px) var(--hp-stripe-period, 22px));
}

.v2-stripe-pink {
	background: var(--surface-accent, #fdf1e2);
}

.v2-stripe-peach {
	background: repeating-linear-gradient(90deg, var(--stripe-alt, #fddda6) 0 var(--hp-stripe-band, 11px), var(--stripe-gap, #fdf1e2) var(--hp-stripe-band, 11px) var(--hp-stripe-period, 22px));
}

.v2-stripe-mid {
	display: block;
	margin: var(--space-8, 26px) calc(-1 * var(--gutter, 22px)) 0;
}

.v2-stripe-bottom {
	display: none;
}

/* --- 900px — the mid stripe is dropped for the full-width one ------------ */
@media (min-width: 900px) {

	.v2-stripe-mid {
		display: none;
	}

	.v2-stripe-bottom {
		display: block;
	}
}

/* Shared carousel behaviour
--------------------------------------------- */

/* Shared carousel behaviour
--------------------------------------------- */

/* Hide the scrollbar without losing scrolling. Used by the step carousel, the
   review strip and the age-chip row. */
.v2-scroll {
	scrollbar-width: none;
}

.v2-scroll::-webkit-scrollbar {
	height: 0;
}

/* Footer
--------------------------------------------- */

/* Footer
--------------------------------------------- */

/* Note this footer is NOT inside the 1160px container — it uses the 22px
   gutter but no max-width, so on a wide screen the logo and links sit hard
   left while the legal line is centred. Same as the product page; reproduced
   as designed. */
.v2-footer {
	background: var(--surface-page, #fbfaf8);
	padding: var(--hp-space-34, 34px) 0 var(--hp-space-32, 32px);
}

.v2-footer-inner {
	box-sizing: border-box;
	width: 100%;
	padding: 0 var(--gutter, 22px);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--hp-space-16, 16px);
}

.v2-footer-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-5, 14px) var(--space-8, 26px);
}

.v2-footer-logo {
	width: var(--hp-logo-size, 54px);
	height: var(--hp-logo-size, 54px);
}

.v2-footer-nav {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2, 8px) var(--space-8, 26px);
	font-size: var(--type-caption, 14px);
	font-weight: var(--weight-medium, 500);
}

.v2-footer-legal {
	margin: 0;
	width: 100%;
	text-align: center;
	font-size: var(--type-caption, 14px);
	color: var(--text-body, #4c6169);
}

/* Membership checkout: candy stripe at the page edge, then legal line. */
.v2-stripe--checkout-end {
	flex-shrink: 0;
}

.v2-footer--checkout {
	background: var(--surface-card, #fff);
	padding: var(--space-6, 18px) var(--gutter, 22px) var(--space-8, 26px);
}

/* The page's sections, in the order they appear
--------------------------------------------- */

/* Hero
--------------------------------------------- */

/* Hero
--------------------------------------------- */

/* Below 900px: stacked — stripe, centred text, mid stripe, photo bleeding to
   both viewport edges. From 900px: a two-column grid on the true page centre,
   so the text centres in the visible cream half and the photo fills the right
   half to the screen edge. No viewport maths, no negative margins. */
.v2-hero-section {
	background: var(--surface-accent, #fdf1e2);
	overflow: hidden;
}

.v2-hero {
	max-width: var(--container, 1160px);
	margin: 0 auto;
	padding: 0 var(--gutter, 22px);
}

.v2-hero-text {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding-top: var(--space-9, 30px);
}

.v2-hero-text .v2-eyebrow {
	margin: 0 0 var(--space-5, 14px);
}

.v2-hero-title {
	margin: 0;
	max-width: var(--hp-measure-hero, 16ch);
	font-family: var(--font-heading, "Lora", Georgia, serif);
	font-weight: var(--weight-heading, 600);
	font-size: var(--type-hero, clamp(33px, 9.6vw, 60px));
	line-height: var(--type-hero-lh, 1.08);
	letter-spacing: var(--type-hero-ls, -0.018em);
	text-wrap: pretty;
}

.v2-hero-sub {
	margin: var(--hp-space-17, 17px) 0 0;
	max-width: var(--hp-measure-hero-sub, 32ch);
	font-size: var(--type-lead, clamp(16px, 4.4vw, 20px));
	line-height: var(--type-lead-lh, 1.55);
	color: var(--text-body, #4c6169);
	text-wrap: pretty;
}

/* TRUSTPILOT — a fixed-height box the live widget mounts into. The design
   system says it must not go below 300px; this one is capped at 340px and
   full-width otherwise, so it does drop under that on the narrowest phones.
   Reproduced as designed. */
.trustpilot-widget {
	position: relative;
	width: 100%;
	max-width: var(--hp-tp-width, 340px);
	height: var(--hp-tp-height, 24px);

	/* Margin, not padding: the box is exactly --hp-tp-height for the iframe. */
	margin: 0;
	padding-top: 17px;
}

.trustpilot-widget a {
	text-decoration: none;
}

/* Revealed by js/front-home.js only when the live widget fails to render. The
   box does not change size either way. */
.v2-tp-fallback {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--hp-space-9, 9px);
}

.v2-tp-fallback[hidden] {
	display: none;
}

.v2-tp-stars {
	letter-spacing: var(--hp-stars-ls, 2px);
	font-size: var(--type-body, 16px);
	color: var(--brand-trustpilot, #00b67a);
}

.v2-tp-label {
	font-size: var(--type-caption, 14px);
	color: var(--text-body, #4c6169);
}

/* The frame owns its geometry; the image only fills it. */
.v2-hero-media {
	margin: 0 calc(-1 * var(--gutter, 22px));
}

.v2-hp-hero {
	position: relative;
	overflow: hidden;
	width: 100%;
	height: var(--hp-hero-height, clamp(300px, 80vw, 560px));
}

.v2-hp-hero img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
	object-position: 50% 40%;
}

/* --- 900px — the hero splits into two columns on the true page centre ---- */
@media (min-width: 900px) {

	.v2-hero {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: 0;
		align-items: stretch;
		max-width: none;
		margin: 0;
		padding: 0;
	}

	.v2-hero-text {
		align-items: center;
		text-align: center;
		justify-content: center;
		max-width: var(--hp-hero-text-max, 604px);
		margin: 0 auto;
		padding: var(--space-9, 30px) var(--gutter, 22px) var(--space-12, 44px);
	}

	.v2-hero-media {
		margin: 0;
	}

	.v2-hp-hero {
		width: 100%;
		height: 100%;
		max-height: var(--hp-hero-height-wide, 560px);
		min-height: var(--hp-hero-height-wide, 560px);
	}
}

/* How it works
--------------------------------------------- */

/* How it works
--------------------------------------------- */

/* A segmented "For me / As a gift" toggle rewrites all three cards' eyebrow,
   title and body. The photos, the tints and the card order do not change.
   Below 760px the row is a scroll-snap carousel; from 760px a centred 3-up grid. */
.v2-hiw-section {
	background: var(--surface-page, #fbfaf8);
	padding: var(--hp-sec-42, 42px) 0 var(--hp-sec-46, 46px);
}

.v2-hiw-wrap {
	max-width: var(--container, 1160px);
	margin: 0 auto;
}

.v2-hiw-head {
	padding: 0 var(--gutter, 22px);
}

/* The segmented toggle. This is the ONE place the design system's single
   shadow is allowed: both surfaces are off-white and nothing else separates
   the selected pill from its track. Do not reuse --shadow-segment elsewhere. */
.v2-seg {
	display: flex;
	gap: var(--hp-seg-gap, 5px);
	margin: var(--gutter, 22px) auto var(--space-8, 26px);
	max-width: var(--hp-seg-max, 320px);
	background: var(--surface-card-quiet, #efede8);
	border-radius: var(--radius-track, 12px);
	padding: var(--space-1, 4px);
}

.v2-seg-btn {
	flex: 1;
	text-align: center;
	font-family: var(--font-body, "Montserrat", system-ui, sans-serif);
	font-size: var(--type-body, 16px);
	line-height: var(--hp-seg-lh, 1.5);
	font-weight: var(--weight-medium, 500);
	padding: var(--hp-seg-pad, 11px 0);
	border-radius: var(--radius-control, 10px);
	cursor: pointer;
	border: 0;
	background: transparent;
	color: var(--text-body, #4c6169);
	transition: background var(--dur-border, 0.25s) var(--ease, ease), color var(--dur-border, 0.25s) var(--ease, ease);
}

.v2-seg-btn--on {
	font-weight: var(--weight-strong, 600);
	background: var(--surface-page, #fbfaf8);
	color: var(--text-primary, #2f4148);
	box-shadow: var(--shadow-segment, 0 1px 3px rgba(47, 65, 72, 0.14));
}

.v2-hiw {
	display: flex;
	overflow-x: auto;
	gap: var(--space-5, 14px);
	scroll-snap-type: x mandatory;
	padding: 0 var(--gutter, 22px) var(--hp-space-6, 6px);
	scroll-padding-left: var(--gutter, 22px);
}

/* One card plus a 22px peek of the next, until they cap at 340px. */
.v2-hiw-card {
	flex: 0 0 var(--hp-hiw-card-basis, min(100% - 44px, 340px));
	scroll-snap-align: start;
	border-radius: var(--radius-card, 14px);
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

/* Three tints, in order. Sky, honey, cream. */
.v2-hiw-card--1 {
	background: var(--state-selected, #99d5ef);
}

.v2-hiw-card--2 {
	background: var(--pill-fill, #fddda6);
}

.v2-hiw-card--3 {
	background: var(--surface-accent, #fdf1e2);
}

.v2-hiw-photo {
	position: relative;
	width: 100%;
	aspect-ratio: 1/1;
	overflow: hidden;
}

.v2-hiw-photo img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
	object-position: 50% 45%;
}

.v2-hiw-body {
	padding: var(--hp-hiw-body-pad, 20px 22px 24px);
}

.v2-hiw-body .v2-h3 {
	margin: var(--space-3, 10px) 0 var(--hp-space-9, 9px);
}

/* Step eyebrow. The tracking is 0.17em here, not the tokenised 0.16em. */
.v2-hiw-eyebrow {
	margin: 0;
	font-size: var(--type-eyebrow, 12px);
	font-weight: var(--type-eyebrow-weight, 700);
	letter-spacing: var(--hp-step-eyebrow-ls, 0.17em);
	text-transform: uppercase;
	color: var(--text-body, #4c6169);
}

.v2-hiw-text {
	margin: 0;
	font-size: var(--type-body, 16px);
	line-height: var(--type-body-lh, 1.6);
	color: var(--text-body, #4c6169);
}

/* Swipe hint. Uppercase and tracked here, which contradicts the design
   system's own rule that this hint is guidance and not a label — the product
   page renders it in sentence case. Reproduced as designed. */
.v2-swipe {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2, 8px);
	margin: var(--hp-space-16, 16px) 0 0;
	font-size: var(--type-caption, 14px);
	letter-spacing: var(--hp-swipe-ls, 0.1em);
	text-transform: uppercase;
	font-weight: var(--weight-strong, 600);
	color: var(--text-body, #4c6169);
}

.v2-hiw-cta {
	padding: var(--space-9, 30px) var(--gutter, 22px) 0;
}

/* --- 760px — the carousel becomes a centred 3-up grid -------------------- */
@media (min-width: 760px) {

	.v2-hiw {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, var(--hp-hiw-grid-col, 320px)));
		justify-content: center;
		gap: var(--hp-hiw-grid-gap, 20px);
		overflow: visible;
		max-width: var(--hp-hiw-grid-max, 1040px); /* a second, narrower container */
		margin: 0 auto;
		padding-bottom: 0;
	}

	.v2-swipe {
		display: none;
	}
}

/* Reviews
--------------------------------------------- */

/* Reviews — the swipeable carousel
--------------------------------------------- */

/* Alternating review cards and customer photos on one horizontal scroll-snap
   strip over a sky-blue band.

   The one clever bit: each photo frame is 4:5 and must match the height of the
   tallest review card. Its WIDTH is therefore derived from that height —
   width = 0.8 x height — and the height is published by js/front-home.js as
   --v2-rev-h on the strip. The script sums each card's own children to measure
   and never reads the stretched row back, so the frames cannot inflate the
   thing they are measured from.

   The lead and tail spacers do the centring: at narrow widths they are half
   the strip minus half a card, so the first and last item can still snap to
   centre. From 900px they collapse to the gutter and snapping is off. */
.v2-rev-section {
	background: var(--state-selected, #99d5ef);
	padding: var(--hp-sec-44, 44px) 0 var(--hp-sec-46, 46px);
}

.v2-rev-head {
	max-width: var(--container, 1160px);
	margin: 0 auto;
	padding: 0 var(--gutter, 22px);
}

.v2-rev-strip {
	display: flex;
	align-items: stretch;
	gap: var(--space-5, 14px);
	overflow-x: auto;
	padding: var(--space-8, 26px) 0 var(--hp-space-6, 6px);
	box-sizing: content-box;
	scroll-snap-type: x mandatory;
}

.v2-rev-strip > article,
.v2-rev-strip > div {
	scroll-snap-align: center;
}

.v2-rev-lead {
	flex: 0 0 var(--hp-rev-lead, max(22px, 50% - 150px));
}

.v2-rev-tail {
	flex: 0 0 var(--hp-rev-tail, max(22px, 50% - 112px));
}

.v2-rev-card {
	flex: 0 0 var(--hp-rev-card-basis, min(72vw, 300px));
	background: var(--surface-page, #fbfaf8);
	border-radius: var(--radius-card, 14px);
	padding: var(--hp-rev-card-pad, 22px 22px 24px);
	display: flex;
	flex-direction: column;
	gap: var(--hp-space-11, 11px);
}

.v2-rev-card .v2-h3 {
	line-height: var(--hp-rev-title-lh, 1.3);
}

.v2-rev-stars {
	letter-spacing: var(--hp-stars-ls, 2px);
	font-size: var(--type-body, 16px);
	color: var(--brand-trustpilot, #00b67a);
}

.v2-rev-quote {
	margin: 0;
	font-size: var(--type-body, 16px);
	line-height: var(--type-body-lh, 1.6);
	color: var(--text-body, #4c6169);
}

/* margin: auto 0 0 pins the attribution to the bottom of the card, so all
   four cards align on it however long the quote runs. */
.v2-rev-name {
	margin: auto 0 0;
	padding-top: var(--space-2, 8px);
	font-family: var(--font-heading, "Lora", Georgia, serif);
	font-style: italic;
	font-size: var(--type-caption, 14px);
	text-align: right;
	color: var(--text-body, #4c6169);
}

.v2-rev-name a {
	color: var(--text-body, #4c6169);
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* Width from the measured card height. The min() chain stops the frame ever
   exceeding a card's own width on a narrow screen. */
.v2-rev-photo {
	flex: 0 0 min(var(--v2-rev-h, 300px) * var(--hp-rev-photo-ratio, 0.8), var(--hp-rev-card-basis, min(72vw, 300px)));
	aspect-ratio: 4/5;
	align-self: center;
	position: relative;
	border-radius: var(--radius-card, 14px);
	overflow: hidden;
}

.v2-rev-photo img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
	object-position: 50% 35%;
}

.v2-rev-cta {
	padding: var(--hp-space-24, 24px) var(--gutter, 22px) 0;
}

/* --- 900px — snapping off, spacers collapse to the gutter ---------------- */
@media (min-width: 900px) {

	.v2-rev-strip {
		scroll-snap-type: none;
	}

	.v2-rev-strip > article,
	.v2-rev-strip > div {
		scroll-snap-align: start;
	}

	.v2-rev-lead,
	.v2-rev-tail {
		flex: 0 0 var(--gutter, 22px);
	}
}

/* Our books
--------------------------------------------- */

/* Our books
--------------------------------------------- */
.v2-books-section {
	background-color: var(--surface-accent, #fdf1e2);
	padding: var(--hp-sec-44, 44px) 0 var(--hp-sec-48, 48px);
}

.v2-books {
	max-width: var(--container, 1160px);
	margin: 0 auto;
	padding: 0 var(--gutter, 22px);
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.v2-books-h {
	max-width: var(--hp-measure-34, 34ch);
}

.v2-books-lede {
	margin: var(--hp-space-16, 16px) 0 0;
	max-width: var(--hp-measure-72, 72ch);
	font-size: var(--type-body, 16px);
	line-height: var(--type-body-lh, 1.6);
	color: var(--text-body, #4c6169);
	text-wrap: pretty;
}

/* The open-book spread. Contain, not cover — nothing is cropped off the sides. */
.v2-books-spread {
	position: relative;
	width: 100%;
	max-width: var(--hp-spread-max, 640px);
	aspect-ratio: 2262/1201;
	margin: var(--space-5, 14px) 0 0;
}

.v2-books-spread img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
	object-fit: contain;
}

/* The cover range, flat lay. Contain as well, for the same reason. */
.v2-books-range {
	position: relative;
	width: 100%;
	max-width: var(--hp-range-max, 720px);
	aspect-ratio: 16/9;
	margin: var(--space-5, 14px) 0 0;
	border-radius: var(--radius-card, 14px);
	overflow: hidden;
}

.v2-books-range img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
	object-fit: contain;
	object-position: 50% 50%;
}

.v2-books-cta {
	margin: var(--hp-space-24, 24px) 0 0;
}

/* Our questions
--------------------------------------------- */

/* Our questions
--------------------------------------------- */

/* Five age chips swap the six sample question cards below them. Nothing else
   on the page moves. */
.v2-q-section {
	background: var(--surface-page, #fbfaf8);
	padding: var(--hp-sec-46, 46px) 0 var(--hp-sec-50, 50px);
}

.v2-q {
	max-width: var(--container, 1160px);
	margin: 0 auto;
	padding: 0 var(--gutter, 22px);
}

.v2-q-h {
	margin: 0 auto;
	max-width: var(--hp-measure-34, 34ch);
}

.v2-q-lede {
	margin: var(--hp-space-16, 16px) auto 0;
	max-width: var(--hp-measure-68, 68ch);
	font-size: var(--type-body, 16px);
	line-height: var(--type-body-lh, 1.6);
	color: var(--text-body, #4c6169);
	text-align: center;
	text-wrap: pretty;
}

.v2-q-examples {
	margin: var(--space-9, 30px) 0 0;
}

/* justify-content: safe center — centred when the chips fit, left-aligned when
   they overflow, so the first chip is never scrolled out of reach. */
.v2-ages {
	display: flex;
	gap: var(--hp-space-7, 7px);
	overflow-x: auto;
	padding: var(--space-5, 14px) 0 var(--space-1, 4px);
	justify-content: safe center;
}

/* Unselected: linen fill with a linen border, so the box is invisible. */
.v2-age {
	font-family: var(--font-body, "Montserrat", system-ui, sans-serif);
	font-weight: var(--weight-strong, 600);
	font-size: var(--type-caption, 14px);
	line-height: var(--hp-age-lh, 1.2);
	padding: var(--hp-age-pad, 10px 17px);
	border-radius: var(--radius-control, 10px);
	cursor: pointer;
	white-space: nowrap;
	border: 1px solid var(--surface-card-quiet, #efede8);
	background-color: var(--surface-card-quiet, #efede8);
	color: var(--text-body, #4c6169);
	transition: background-color var(--dur-border, 0.25s) var(--ease, ease), border-color var(--dur-border, 0.25s) var(--ease, ease), color var(--dur-border, 0.25s) var(--ease, ease);
}

.v2-age--on {
	background-color: var(--pill-fill, #fddda6);
	border-color: var(--text-primary, #2f4148);
	color: var(--text-primary, #2f4148);
}

.v2-qgrid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(var(--hp-qgrid-min, 290px), 1fr));
	gap: var(--space-3, 10px);
	margin-top: var(--space-5, 14px);
}

.v2-qcard {
	margin: 0;
	background: var(--pill-fill, #fddda6);
	border-radius: var(--radius-track, 12px);
	padding: var(--hp-qcard-pad, 17px 19px);
	font-size: var(--type-voice, clamp(16px, 4.1vw, 18px));
	font-weight: var(--weight-medium, 500);
	line-height: var(--type-voice-lh, 1.45);
	color: var(--text-primary, #2f4148);
}

.v2-tip {
	display: flex;
	gap: var(--hp-space-11, 11px);
	align-items: flex-start;
	background: var(--surface-accent, #fdf1e2);
	border: 1px solid var(--border-strong, #2f4148);
	border-radius: var(--radius-track, 12px);
	padding: var(--hp-tip-pad, 17px 19px);
	margin-top: var(--hp-space-20, 20px);
}

.v2-tip-icon {
	flex: none;
	width: 18px;
	height: 18px;
	margin-top: 2px;
}

.v2-tip-text {
	margin: 0;
	font-size: var(--type-body, 16px);
	line-height: var(--type-body-lh, 1.6);
	color: var(--text-body, #4c6169);
}

.v2-tip-text strong {
	font-family: var(--font-heading, "Lora", Georgia, serif);
	font-weight: var(--weight-heading, 600);
	color: var(--text-primary, #2f4148);
}

.v2-q-cta {
	margin: var(--space-9, 30px) auto 0;
}

/* Will I finish
--------------------------------------------- */

/* Will I finish
--------------------------------------------- */

/* Same card treatment as How It Works — tinted fill, 14px radius, no border.
   The third fill is white rather than cream so it still reads against this
   section's cream band. */
.v2-fin-section {
	background: var(--surface-accent, #fdf1e2);
	padding: var(--hp-sec-46, 46px) 0 var(--hp-sec-50, 50px);
}

.v2-fin {
	max-width: var(--container, 1160px);
	margin: 0 auto;
	padding: 0 var(--gutter, 22px);
}

.v2-fin-h {
	margin: 0 auto;
	max-width: var(--hp-measure-26, 26ch);
}

.v2-fin-lede {
	margin: var(--hp-space-16, 16px) auto 0;
	max-width: var(--hp-measure-60, 60ch);
	font-size: var(--type-body, 16px);
	line-height: var(--type-body-lh, 1.6);
	color: var(--text-body, #4c6169);
	text-align: center;
	text-wrap: pretty;
}

.v2-fin-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(var(--hp-fin-grid-min, 230px), 1fr));
	gap: var(--space-5, 14px);
	margin: var(--space-9, 30px) auto 0;
	width: 100%;
}

.v2-fin-card {
	border-radius: var(--radius-card, 14px);
	padding: var(--hp-fin-card-pad, 22px 22px 24px);
	display: flex;
	flex-direction: column;
	gap: var(--hp-space-9, 9px);
}

.v2-fin-card p {
	margin: 0;
	font-size: var(--type-body, 16px);
	line-height: var(--type-body-lh, 1.6);
	text-wrap: pretty;
}

.v2-fin-card--1 {
	background: var(--state-selected, #99d5ef);
}

.v2-fin-card--2 {
	background: var(--pill-fill, #fddda6);
}

.v2-fin-card--3 {
	background: var(--surface-card, #fff);
}

/* What's included
--------------------------------------------- */

/* What's included
--------------------------------------------- */

/* The only section carrying a price. Navy band with a tiled paper texture at
   70% over it; a white card sits on top. Both the price and the weekly reframe
   are written by js/front-commerce.js. */
.v2-buy-section {
	position: relative;
	background-color: var(--action-fill, #2f4148);
	padding: var(--hp-sec-46, 46px) 0 var(--hp-sec-50, 50px);
	overflow: hidden;
}

/* The genuine 512px tile from the design project, served from the theme. */
.v2-buy-texture {
	position: absolute;
	inset: 0;
	background-image: url("./img/front/hp-papertexture.png");
	background-size: var(--hp-texture-size, 512px);
	background-repeat: repeat;
	opacity: var(--hp-texture-opacity, 0.7);
	pointer-events: none;
}

.v2-buy {
	position: relative;
	max-width: var(--hp-buy-max, 860px);
	margin: 0 auto;
	padding: 0 var(--gutter, 22px);
}

/* On navy the eyebrow goes honey, not slate. */
.v2-buy-eyebrow {
	color: var(--pill-fill, #fddda6);
}

.v2-buy-h {
	color: var(--text-on-navy, #fbfaf8);
}

/* Currency-aware reframe of the listed price. It must be derived from whatever
   the price element actually says, or the two contradict each other on screen. */
.v2-buy-weekly {
	margin: var(--space-6, 18px) auto 0;
	width: fit-content;
	background: var(--pill-fill, #fddda6);
	border-radius: var(--radius-pill, 999px);
	padding: var(--hp-weekly-pad, 8px 20px);
	font-size: var(--type-body, 16px);
	font-weight: var(--weight-strong, 600);
	line-height: var(--hp-weekly-lh, 1.3);
	color: var(--text-primary, #2f4148);
	white-space: nowrap;
}

.v2-buy-card {
	background: var(--surface-card, #fff);
	border: 1px solid var(--border-card, #e7e4dc);
	border-radius: var(--radius-card, 14px);
	padding: var(--hp-buy-card-pad, 26px 24px 28px);
	margin: var(--hp-space-20, 20px) auto 0;
	width: 100%;
	max-width: var(--hp-buy-card-max, 420px);
	display: flex;
	flex-direction: column;
	gap: var(--gutter, 22px);
}

.v2-buy-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--hp-space-13, 13px);
}

.v2-buy-list li {
	display: flex;
	gap: var(--hp-space-11, 11px);
	align-items: flex-start;
	font-size: var(--type-body, 16px);
	line-height: var(--type-body-lh, 1.6);
}

.v2-buy-list img {
	flex: none;
	width: var(--hp-star-lg, 19px);
	height: var(--hp-star-lg, 19px);
	margin-top: 3px;
}

.v2-buy-foot {
	border-top: 1px solid var(--border-card, #e7e4dc);
	padding-top: var(--gutter, 22px);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--hp-space-15, 15px);
}

.v2-buy-price {
	margin: 0;
	font-family: var(--font-heading, "Lora", Georgia, serif);
	font-weight: var(--weight-heading, 600);
	font-size: var(--type-price-display, 40px);
	line-height: var(--hp-price-lh, 1);
	letter-spacing: var(--hp-price-ls, -0.02em);
}

.v2-buy-note {
	margin: 0;
	font-size: var(--type-body, 16px);
	line-height: var(--type-small-lh, 1.5);
	text-align: center;
	color: var(--text-body, #4c6169);
	font-weight: var(--weight-body, 400);
	font-style: normal;
}

.v2-buy-note-strong {
	font-weight: var(--weight-strong, 600);
	color: var(--text-primary, #2f4148);
}

.v2-buy-guarantee {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--hp-space-7, 7px);
	margin: 0;
	font-size: var(--type-caption, 14px);
	color: var(--text-body, #4c6169);
}

.v2-buy-guarantee img {
	flex: none;
	width: var(--hp-lock-size, 15px);
	height: var(--hp-lock-size, 15px);
	position: relative;
	top: var(--hp-lock-shift, -1px); /* optical alignment */
}

/* Our story
--------------------------------------------- */

/* Built by parents / Our story
--------------------------------------------- */

/* This band is a WIDER stripe than the candy-stripe device — 15px bands on a
   30px period, not 11/22 — and it is a full section background behind a card
   rather than a 20px edge rule. A different device wearing the same clothes;
   reproduced as designed. */
.v2-story-section {
	background: repeating-linear-gradient(90deg, var(--stripe-primary, #99d5ef) 0 var(--hp-wide-stripe-band, 15px), var(--stripe-gap, #fdf1e2) var(--hp-wide-stripe-band, 15px) var(--hp-wide-stripe-period, 30px));
	padding: var(--hp-sec-46, 46px) 0 var(--hp-sec-50, 50px);
}

.v2-story {
	max-width: var(--hp-story-max, 760px);
	margin: 0 auto;
	padding: 0 var(--gutter, 22px);
	text-align: center;
}

/* 2px border, not the 1px every other card in the system uses. */
.v2-story-card {
	background: var(--surface-accent, #fdf1e2);
	border: var(--hp-story-border, 2px) solid var(--border-strong, #2f4148);
	border-radius: var(--radius-card, 14px);
	padding: var(--hp-story-card-pad, 30px 26px 32px);
}

/* An 8px white mount rather than a border colour — a print-photo frame. */
.v2-story-photo {
	position: relative;
	width: 100%;
	max-width: var(--hp-story-photo-max, 300px);
	aspect-ratio: 4/5;
	margin: var(--gutter, 22px) auto 0;
	border: var(--hp-story-frame, 8px) solid var(--surface-card, #fff);
	border-radius: var(--radius-card, 14px);
	overflow: hidden;
}

.v2-story-photo img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
	object-position: 50% 30%;
}

.v2-story-text {
	margin: var(--hp-space-20, 20px) 0 0;
	font-size: var(--type-body, 16px);
	line-height: var(--type-body-lh, 1.6);
	color: var(--text-body, #4c6169);
	text-wrap: pretty;
}

.v2-story-sign {
	margin: var(--hp-space-16, 16px) 0 0;
	font-family: var(--font-heading, "Lora", Georgia, serif);
	font-style: italic;
	font-size: var(--type-body, 16px);
	color: var(--text-body, #4c6169);
}

/* FAQ
--------------------------------------------- */

/* FAQ accordion (Home widget + FAQ v2 page)
--------------------------------------------- */

/* Single-open: opening one row closes any other. The chevron rotates 180deg
   over 0.25s. Closed rows are collapsed with [hidden], so their text is out of
   the accessibility tree and out of find-in-page. */

/* --- Home FAQ band ------------------------------------------------------- */
.v2-faq-section {
	background-color: var(--surface-accent, #fdf1e2);
	padding: var(--hp-sec-44, 44px) 0 var(--hp-sec-48, 48px);
}

.v2-faq {
	max-width: var(--hp-faq-max, 780px);
	margin: 0 auto;
	padding: 0 var(--gutter, 22px);
}

.v2-faq-h {
	margin: 0 0 var(--hp-space-24, 24px);
}

.v2-faq-rows {
	display: flex;
	flex-direction: column;
	gap: var(--hp-space-9, 9px);
}

/* --- Shared row / question / answer -------------------------------------- */
.v2-faq-row {
	background: var(--surface-card, #fff);
	border: 1px solid var(--border-card, #e7e4dc);
	border-radius: var(--radius-track, 12px);
	overflow: hidden;
}

.v2-faq-q {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-5, 14px);
	background: transparent;
	border: 0;
	padding: var(--hp-faq-q-pad, 18px 20px);
	cursor: pointer;
	text-align: left;
	font-family: var(--font-heading, "Lora", Georgia, serif);
	font-weight: var(--weight-heading, 600);
	font-size: var(--type-button, 17px);
	line-height: var(--hp-faq-q-lh, 1.35);
	color: var(--text-primary, #2f4148);
}

/* Inset ring: the row clips at overflow:hidden. */
.v2-faq-q:focus-visible {
	outline-offset: var(--faq-focus-offset-inset, -3px);
}

.v2-faq-icon {
	flex: none;
	display: grid;
	place-items: center;
	width: var(--space-8, 26px);
	height: var(--space-8, 26px);
	color: var(--text-body, #4c6169);
	transition: transform var(--dur-chevron, 0.25s) var(--ease, ease);
	transform: none;
}

.v2-faq-q[aria-expanded="true"] .v2-faq-icon {
	transform: rotate(var(--faq-chevron-rotation, 180deg));
}

.v2-faq-chevron {
	fill: none;
}

.v2-faq-chevron path {
	stroke: var(--text-body, #4c6169);
	stroke-width: var(--faq-chevron-stroke, 1.7);
	stroke-linecap: round;
	stroke-linejoin: round;
}

.v2-faq-a[hidden] {
	display: none;
}

.v2-faq-a p {
	margin: 0;
	padding: var(--hp-faq-a-pad, 0 18px 20px);
	font-size: var(--type-body, 16px);
	line-height: var(--type-body-lh, 1.6);
	color: var(--text-body, #4c6169);
}

/* The one row with a second paragraph pulls up so the two read as one block. */
.v2-faq-a .v2-faq-a2 {
	margin-top: var(--hp-faq-a2-pull, -8px);
}

.v2-faq-section .v2-faq-cta {
	margin: var(--space-9, 30px) auto 0;
}

/* --- FAQ v2 page (page-templates-v2/faq.php) ------------------------------ */
.v2-faq-title {
	background: var(--surface-accent, #fdf1e2);
	padding: var(--faq-title-pad-top, 36px) 0 var(--space-2, 8px);
}

.v2-faq-title-inner {
	max-width: var(--faq-container, 780px);
	margin: 0 auto;
	padding: 0 var(--gutter, 22px);
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.v2-faq-title h1 {
	font-family: var(--font-heading, "Lora", Georgia, serif);
	font-weight: var(--weight-heading, 600);
	font-size: var(--type-h1, clamp(30px, 7.4vw, 40px));
	line-height: var(--faq-h1-lh, 1.1);
	letter-spacing: var(--faq-h1-ls, -0.015em);
	margin: 0;
	max-width: var(--faq-h1-measure, 22ch);
	text-wrap: pretty;
}

.v2-faq-list {
	padding: var(--faq-list-pad-top, 40px) 0 var(--faq-list-pad-bottom, 48px);
	background-color: var(--surface-accent, #fdf1e2);
}

.v2-faq-inner {
	max-width: var(--faq-container, 780px);
	margin: 0 auto;
	padding: 0 var(--gutter, 22px);
}

.v2-faq-stack {
	display: flex;
	flex-direction: column;
	gap: var(--faq-stack-gap, 9px);
}

.v2-faq-list .v2-faq-q {
	padding: var(--space-6, 18px) var(--faq-row-pad-x, 20px);
	font-size: var(--type-h3, 19px);
	line-height: var(--type-h3-lh, 1.3);
}

.v2-faq-list .v2-faq-a {
	padding: 0 var(--faq-row-pad-x, 20px) 20px;
	display: flex;
	flex-direction: column;
	gap: var(--faq-answer-gap, 11px);
}

.v2-faq-list .v2-faq-a[hidden] {
	display: none;
}

.v2-faq-list .v2-faq-a p {
	padding: 0;
}

.v2-faq-contact {
	margin: var(--space-9, 30px) auto 0;
	max-width: var(--faq-contact-measure, 46ch);
	font-size: var(--type-body, 16px);
	line-height: var(--type-body-lh, 1.6);
	color: var(--text-body, #4c6169);
	text-align: center;
	text-wrap: pretty;
}

.v2-faq-contact a {
	text-decoration: underline;
	text-underline-offset: var(--faq-underline-offset, 2px);
}

.v2-faq-list .v2-faq-cta {
	display: block;
	width: 100%;
	max-width: var(--faq-cta-max, 340px);
	margin: var(--space-7, 22px) auto 0;
	background: var(--action-fill, #2f4148);
	color: var(--text-on-navy, #fbfaf8);
	font-family: var(--font-body, "Montserrat", system-ui, sans-serif);
	font-weight: var(--weight-strong, 600);
	font-size: var(--type-button, 17px);
	padding: var(--faq-cta-pad, 18px 20px);
	border-radius: var(--radius-control, 10px);
	text-align: center;
}

/* About us / Our Story page
--------------------------------------------- */

/* About us / Our Story page (page-templates-v2/about-us.php)
--------------------------------------------- */

/* Source: fast-templates-source/our-story-export/
   Cream band → 780px column → off-white prose card. Body is --type-longform.
   Header/footer/nav come from front chrome — not restyled here. */
.os-story {
	background: var(--surface-accent, #fdf1e2);
	padding: var(--os-section-pad-top, 36px) 0 var(--os-section-pad-bottom, 40px);
}

.os-story-inner {
	max-width: var(--os-container, 780px);
	margin: 0 auto;
	padding: 0 var(--gutter, 22px);
}

/* Off-white card on cream — no border, no shadow (colour step only). */
.os-story-card {
	background: var(--surface-page, #fbfaf8);
	border-radius: var(--radius-card, 14px);
	padding: var(--os-card-pad, 32px 24px 34px);
}

.os-story-head {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.os-story-head h1 {
	font-family: var(--font-heading, "Lora", Georgia, serif);
	font-weight: var(--weight-heading, 600);
	font-size: var(--type-h1, clamp(30px, 7.4vw, 40px));
	line-height: var(--type-h1-lh, 1.14);
	letter-spacing: var(--type-h1-ls, -0.012em);
	margin: 0;
	max-width: var(--os-h1-measure, 20ch);
	text-wrap: pretty;
}

.os-story-prose {
	display: flex;
	flex-direction: column;
	gap: var(--space-6, 18px);
	margin-top: var(--os-head-gap, 26px);
}

.os-story-prose p {
	margin: 0;
	font-size: var(--type-longform, clamp(16px, 4.1vw, 18px));
	line-height: var(--type-longform-lh, 1.65);
	color: var(--text-body, #4c6169);
	text-wrap: pretty;
}

.os-p-strong {
	font-weight: var(--os-weight-prose-strong, 700);
}

.os-p-underline {
	text-decoration-line: underline;
}

.os-story-prose em {
	font-style: italic;
}

.os-prose-list {
	margin: 0;
	padding: 0 0 0 var(--os-list-indent, 22px);
	display: flex;
	flex-direction: column;
	gap: var(--space-2, 8px);
	font-size: var(--type-longform, clamp(16px, 4.1vw, 18px));
	line-height: var(--type-longform-lh, 1.65);
	color: var(--text-body, #4c6169);
}

/* Photo frames own geometry so Media Library swaps never move layout. */
.os-photo {
	width: 100%;
	max-width: var(--os-photo-max, 620px);
	aspect-ratio: var(--os-photo-ratio, 4/3);
	margin: 0 auto;
	position: relative;
	border: var(--os-photo-border, 8px) solid var(--surface-card, #fff);
	border-radius: var(--radius-card, 14px);
	overflow: hidden;
	box-sizing: border-box;
	background: var(--surface-card-quiet, #efede8);
}

.os-photo--portrait {
	aspect-ratio: var(--os-photo-ratio-portrait, 4/5);
	max-width: var(--os-photo-portrait-max, 440px);
}

.os-photo--landscape {
	aspect-ratio: var(--os-photo-ratio-landscape, 16/9);
}

.os-photo-inline {
	margin: var(--os-photo-inline-margin, 6px) auto;
}

.os-photo-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
}

.os-photo[data-object-position="50% 50%"] > .os-photo-img {
	object-position: 50% 50%;
}

.os-photo[data-object-position="50% 45%"] > .os-photo-img {
	object-position: 50% 45%;
}

@media (min-width: 900px) {

	.os-photo {
		max-width: var(--os-photo-max-wide, 720px);
	}

	.os-photo--portrait {
		max-width: var(--os-photo-portrait-max-wide, 500px);
	}
}

/* Explainer / VSL
--------------------------------------------- */

/* Explainer / VSL
--------------------------------------------- */

/* The section heading and shell are real. The slot below is a footprint only:
   whatever the real embed does — its own poster, its own lazy-load, its own
   aspect ratio — takes over from .v2-vsl-slot. */
.v2-vsl-section {
	background: var(--surface-page, #fbfaf8);
	padding: var(--hp-sec-46, 46px) 0 var(--hp-sec-50, 50px);
}

.v2-vsl {
	max-width: var(--container, 1160px);
	margin: 0 auto;
	padding: 0 var(--gutter, 22px);
}

.v2-vsl-h {
	margin: 0 auto;
	max-width: var(--hp-measure-34, 34ch);
}

/* 340px wide, 9:16 — the footprint the design reserves for the video. */
.v2-vsl-slot {
	width: 100%;
	max-width: var(--hp-vsl-max, 340px);
	aspect-ratio: 9/16;
	margin: var(--space-8, 26px) auto 0;
	border-radius: var(--radius-track, 12px);
	background: var(--surface-card-quiet, #efede8);
	border: 1px dashed var(--border-field, #c9d2d5);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--space-4, 12px);
	text-align: center;
	padding: var(--hp-space-20, 20px);
}

.v2-vsl-slot p {
	margin: 0;
	font-size: var(--type-caption, 14px);
	line-height: var(--hp-vsl-text-lh, 1.55);
	color: var(--text-body, #4c6169);
	max-width: var(--hp-measure-40, 40ch);
}

/* The real video fills the same box; no dashed edge, no play glyph.
   --v2-vsl-poster is the cover image, set from the template when the
   attachment exists — a CSS fallback for browsers that ignore <video poster>
   until the file starts playing. */
.v2-vsl-slot--ready {
	background-color: transparent;
	background-image: var(--v2-vsl-poster, none);
	background-size: cover;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	border: 0;
	padding: 0;
	overflow: hidden;
}

.v2-vsl-slot--ready video {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
	border-radius: var(--radius-track, 12px);
}

.v2-vsl-play {
	display: grid;
	place-items: center;
	width: var(--hp-vsl-play, 62px);
	height: var(--hp-vsl-play, 62px);
	border-radius: var(--radius-pill, 999px);
	background: var(--action-fill, #2f4148);
}

.v2-vsl-tri {
	width: 0;
	height: 0;
	border-left: var(--hp-vsl-tri-w, 19px) solid var(--surface-page, #fbfaf8);
	border-top: var(--hp-vsl-tri-h, 12px) solid transparent;
	border-bottom: var(--hp-vsl-tri-h, 12px) solid transparent;
	margin-left: var(--hp-vsl-tri-shift, 5px);
}

/* Product page
--------------------------------------------- */

/* Product page
--------------------------------------------- */

/* Mock banner when the chooser is embedded under the live membership template */
.llife-membership-product-mock__label {
	margin: 0;
	padding: var(--space-5, 14px) var(--gutter, 22px);
	font-family: var(--font-body, "Montserrat", system-ui, sans-serif);
	font-size: var(--type-caption, 14px);
	font-weight: var(--weight-strong, 600);
	line-height: 1.4;
	text-align: center;
	color: var(--text-primary, #2f4148);
	background: var(--pill-fill, #fddda6);
}

/* §2 — Page shell, links, primary button (scoped — do not leak onto chrome) */
.p-page {
	position: relative;
	font-family: var(--font-body, "Montserrat", system-ui, sans-serif);
	font-size: var(--type-body, 16px);
	line-height: var(--type-body-lh, 1.6);
	color: var(--text-primary, #2f4148);
	background: var(--surface-page, #fbfaf8);
	overflow-x: clip;

	/* Checkout CTA reuses .v2-btn; keep hover/press local to this shell. */
}

.p-page a {
	color: var(--text-primary, #2f4148);
	text-decoration: none;
}

.p-page a:hover {
	color: var(--text-primary, #2f4148);
	text-decoration: underline;
}

.p-page .v2-btn {
	text-decoration: none;
	transition: background-color var(--dur-fill, 0.35s) var(--ease, ease), transform var(--dur-press, 0.12s) var(--ease, ease);
	-webkit-tap-highlight-color: transparent;
}

.p-page .v2-btn:hover {
	text-decoration: none;
	background-color: var(--action-fill-hover, #3d555f);
}

.p-page .v2-btn:active {
	background-color: var(--action-fill-active, #1f2e33);
	transform: scale(var(--press-scale, 0.975));
}

.p-page .v2-btn:focus-visible {
	outline: var(--focus-ring-width, 2px) solid var(--focus-ring, #99d5ef);
	outline-offset: var(--focus-ring-offset, 3px);
}

/* §3 — Header + inline nav + burger */
.p-header {
	position: sticky;
	top: 0;
	z-index: 60;
	background: var(--surface-page-translucent, rgba(251, 250, 248, 0.94));
	backdrop-filter: blur(var(--pp-header-blur, 10px));
	-webkit-backdrop-filter: blur(var(--pp-header-blur, 10px));
	border-bottom: 1px solid var(--border-hairline, rgba(47, 65, 72, 0.1));
}

.v2-nav {
	box-sizing: border-box;
	width: 100%;
	margin: 0;
	padding: var(--pad-header, 9px 20px);
	display: flex;
	align-items: center;
	gap: var(--pp-nav-gap, 16px);
}

.p-logo {
	display: flex;
	align-items: center;
}

.p-logo img {
	display: block;
	width: var(--pp-logo-size, 54px);
	height: var(--pp-logo-size, 54px);
}

/* Inline nav — hidden below 760px, see §14 */
.v2-nav-links {
	display: none;
}

/* Burger — shown below 760px, hidden from 760px, see §14 */
.v2-burger {
	display: flex;
	margin-left: auto;
	align-items: center;
	justify-content: center;
	width: var(--hit-min, 44px);
	height: var(--hit-min, 44px);
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
}

.v2-burger-box {
	position: relative;
	display: block;
	width: var(--pp-burger-w, 22px);
	height: var(--pp-burger-h, 16px);
}

.v2-burger-bar {
	position: absolute;
	left: 0;
	display: block;
	width: var(--pp-burger-w, 22px);
	height: var(--pp-burger-bar, 2px);
	border-radius: var(--radius-line, 2px);
	background: var(--action-fill, #2f4148);
}

.v2-burger-bar--top {
	top: 0;
	transition: transform var(--dur-morph, 0.35s) var(--ease, ease);
}

.v2-burger-bar--mid {
	top: 7px;
	transition: opacity var(--dur-fade, 0.2s) var(--ease, ease);
	opacity: 1;
}

.v2-burger-bar--bottom {
	top: 14px;
	transition: transform var(--dur-morph, 0.35s) var(--ease, ease);
}

.v2-burger[aria-expanded="true"] .v2-burger-bar--top {
	transform: translateY(var(--pp-burger-step, 7px)) rotate(45deg);
}

.v2-burger[aria-expanded="true"] .v2-burger-bar--mid {
	opacity: 0;
}

.v2-burger[aria-expanded="true"] .v2-burger-bar--bottom {
	transform: translateY(calc(-1 * var(--pp-burger-step, 7px))) rotate(-45deg);
}

/* §4 — Mobile nav overlay */
.p-navpanel {
	position: fixed;
	left: 0;
	right: 0;
	top: var(--v2-navh, 73px);
	bottom: 0;
	z-index: 55;
	background: var(--surface-page, #fbfaf8);
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: var(--space-6, 18px);
	padding: var(--space-8, 26px) var(--gutter, 22px) calc(var(--space-8, 26px) + env(safe-area-inset-bottom));
}

.p-navpanel[hidden] {
	display: none;
}

.p-navpanel-nav {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: var(--space-1, 4px);
	text-align: right;
}

.p-navpanel-link {
	font-family: var(--font-heading, "Lora", Georgia, serif);
	font-weight: var(--weight-heading, 600);
	font-size: var(--type-h2, clamp(19px, 4.8vw, 22px));
	line-height: var(--type-h3-lh, 1.3);
	padding: var(--space-4, 12px) 0;
	border-bottom: 1px solid var(--border-hairline, rgba(47, 65, 72, 0.1));
}

/* §5 — Candy stripe */
.p-stripe {
	height: var(--pp-stripe-height, 20px);
	background: repeating-linear-gradient(90deg, var(--stripe-alt, #fddda6) 0 var(--pp-stripe-band, 11px), var(--stripe-gap, #fdf1e2) var(--pp-stripe-band, 11px) var(--pp-stripe-period, 22px));
}

/* §6 — Choose section */
.p-choose {
	background: var(--surface-page, #fbfaf8);
	padding: var(--pp-space-40, 40px) 0 var(--pp-space-54, 54px);
}

.p-container {
	max-width: var(--container, 1160px);
	margin: 0 auto;
	padding: 0 var(--gutter, 22px);
}

.p-title {
	margin: 0 auto;
	max-width: var(--pp-title-measure, 22ch);
	font-family: var(--font-heading, "Lora", Georgia, serif);
	font-weight: var(--weight-heading, 600);
	font-size: var(--type-h1, clamp(30px, 7.4vw, 40px));
	line-height: var(--pp-h1-lh, 1.12);
	letter-spacing: var(--pp-h1-ls, -0.015em);
	text-align: center;
	text-wrap: pretty;
}

/* A div, not a p: the copy comes from ACF and may arrive wrapped in <p>, which
   a <p> here would break out of and leave against the left edge. */
.p-lede {
	margin: var(--space-5, 14px) auto 0;
	max-width: var(--pp-lede-measure, 46ch);
	font-size: var(--type-body, 16px);
	line-height: var(--type-body-lh, 1.6);
	color: var(--text-body, #4c6169);
	text-align: center;
	text-wrap: pretty;
}

.p-lede p {
	margin: 0;
}

/* §7 — Tier cards */
.p-tiers-wrap {
	margin: var(--space-8, 26px) 0 0;
}

.p-tiers {
	display: flex;
	overflow-x: auto;
	gap: var(--space-5, 14px);
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	margin: 0 calc(-1 * var(--gutter, 22px));
	padding: var(--pp-space-11, 11px) var(--space-5, 14px) var(--pp-space-6, 6px);
}

.p-tiers::-webkit-scrollbar {
	height: 0;
}

.p-tier {
	flex: 0 0 var(--pp-tier-basis, clamp(238px, 70vw, 300px));
	scroll-snap-align: center;
	display: flex;
	flex-direction: column;
	position: relative;
	cursor: pointer;
	border-radius: var(--radius-card, 14px);
	padding: var(--pad-card, 22px 20px 24px);
	border: var(--pp-select-border, 2px) solid var(--border-card, #e7e4dc);
	background-color: var(--surface-card, #fff);
	transition: background-color var(--dur-border, 0.25s) var(--ease, ease), border-color var(--dur-border, 0.25s) var(--ease, ease);
}

.p-tier--selected {
	background-color: var(--surface-accent, #fdf1e2);
	border-color: var(--text-primary, #2f4148);
}

.p-tier--selected .p-tier-dot {
	border-color: var(--text-primary, #2f4148);
	background-color: var(--text-primary, #2f4148);
	box-shadow: inset 0 0 0 var(--pp-tier-dot-ring, 3px) var(--surface-page, #fbfaf8);
}

.p-tier-flag {
	position: absolute;
	top: var(--pp-flag-offset, -11px);
	left: var(--pp-flag-left, 20px);
	font-size: var(--type-flag, 11px);
	font-weight: var(--type-flag-weight, 700);
	letter-spacing: var(--type-flag-ls, 0.12em);
	text-transform: uppercase;
	background: var(--action-fill, #2f4148);
	color: var(--text-on-navy, #fbfaf8);
	border-radius: var(--radius-pill, 999px);
	padding: var(--pp-flag-pad, 5px 11px);
}

.p-tier-body {
	flex: 1;
	display: flex;
	align-items: flex-start;
	gap: var(--pp-tier-gap, 11px);
}

.p-tier-dot {
	flex: none;
	width: var(--pp-tier-dot, 21px);
	height: var(--pp-tier-dot, 21px);
	margin-top: var(--pp-tier-dot-offset, 3px);
	border-radius: var(--radius-pill, 999px);
	border: var(--pp-select-border, 2px) solid var(--border-field, #c9d2d5);
	background-color: var(--surface-card, #fff);
	box-shadow: inset 0 0 0 var(--pp-tier-dot-ring, 3px) transparent;
}

.p-tier-main {
	flex: 1;
}

.p-tier-name {
	margin: 0;
	font-family: var(--font-heading, "Lora", Georgia, serif);
	font-weight: var(--weight-heading, 600);
	font-size: var(--type-h2, clamp(19px, 4.8vw, 22px));
	line-height: var(--type-h2-lh, 1.2);
}

.p-tier-perchild {
	margin: var(--space-1, 4px) 0 0;
	font-family: var(--font-body, "Montserrat", system-ui, sans-serif);
	font-weight: var(--weight-medium, 500);
	font-size: var(--type-caption, 14px);
	line-height: var(--pp-copy-lh, 1.4);
	color: var(--text-body, #4c6169);
}

.p-copies {
	list-style: none;
	margin: var(--space-5, 14px) 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-2, 8px);
}

.p-copy {
	display: flex;
	align-items: flex-start;
	gap: var(--pp-space-9, 9px);
	font-size: var(--type-caption, 14px);
	line-height: var(--pp-copy-lh, 1.4);
}

.p-copy-icon {
	flex: none;
	width: var(--pp-copy-icon, 20px);
	height: var(--pp-copy-icon, 20px);
}

.p-tier-price {
	margin-top: auto;
	padding-left: var(--pp-tier-price-indent, 32px);
	padding-bottom: var(--pp-space-6, 6px);
}

.p-tier-amount {
	margin: var(--pp-space-16, 16px) 0 0;
	font-family: var(--font-heading, "Lora", Georgia, serif);
	font-weight: var(--weight-heading, 600);
	font-size: var(--type-price-card, 30px);
	line-height: var(--pp-price-lh, 1);
}

.p-tier-suffix {
	font-family: var(--font-body, "Montserrat", system-ui, sans-serif);
	font-weight: var(--weight-medium, 500);
	font-size: var(--type-caption, 14px);
	color: var(--text-body, #4c6169);
}

/* §8 — Swipe hint */
.p-swipe {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-3, 10px);
	margin: var(--space-4, 12px) 0 0;
	font-size: var(--type-fine, 13px);
	font-weight: var(--weight-medium, 500);
	color: var(--text-label, #6b7f86);
}

.p-swipe-arrow {
	visibility: visible;
}

.p-swipe-arrow[data-hidden="true"] {
	visibility: hidden;
}

/* §9 — Child count */
.p-siblings {
	margin: var(--space-6, 18px) 0 0;
}

/* Sits under the count row, so the gap is above it. */
.p-siblings-pill {
	width: fit-content;
	margin: var(--space-5, 14px) auto 0;
	border-radius: var(--radius-pill, 999px);
	padding: var(--space-2, 8px) var(--space-6, 18px);
	font-size: var(--type-body, 16px);
	font-weight: var(--weight-medium, 500);
	line-height: var(--type-lead-lh, 1.55);
	color: var(--text-primary, #2f4148);
	background-color: var(--pill-fill, #fddda6);
}

.p-siblings-q {
	margin: 0 0 var(--space-4, 12px);
	font-family: var(--font-heading, "Lora", Georgia, serif);
	font-weight: var(--weight-heading, 600);
	font-size: var(--type-h2, clamp(19px, 4.8vw, 22px));
	line-height: var(--pp-siblings-q-lh, 1.25);
	text-align: center;
}

.p-counts {
	display: flex;
	justify-content: center;
	gap: var(--pp-space-9, 9px);
}

.p-count {
	width: var(--pp-count-w, 56px);
	height: var(--pp-count-h, 52px);
	border-radius: var(--radius-control, 10px);
	cursor: pointer;
	font-family: var(--font-heading, "Lora", Georgia, serif);
	font-weight: var(--weight-heading, 600);
	font-size: var(--pp-count-size, 20px);
	line-height: var(--pp-price-lh, 1);
	font-variant-numeric: var(--numeric-price, tabular-nums);
	color: var(--text-primary, #2f4148);
	border: var(--pp-select-border, 2px) solid var(--border-field, #c9d2d5);
	background-color: var(--surface-card, #fff);
	transition: background-color var(--dur-border, 0.25s) var(--ease, ease), border-color var(--dur-border, 0.25s) var(--ease, ease), color var(--dur-border, 0.25s) var(--ease, ease);
}

.p-count--selected {
	background-color: var(--state-selected, #99d5ef);
	border-color: var(--text-primary, #2f4148);
}

.p-siblings-note {
	margin: var(--space-4, 12px) 0 0;
	font-size: var(--type-fine, 13px);
	line-height: var(--type-fine-lh, 1.6);
	color: var(--text-body, #4c6169);
	text-align: center;
}

/* §10 — Gift question */
.p-giftband {
	margin: var(--space-9, 30px) calc((100% - 100vw) / 2) 0;
	padding: var(--space-6, 18px) calc((100vw - 100%) / 2 + var(--gutter, 22px)) var(--pp-space-20, 20px);
	background: repeating-linear-gradient(90deg, var(--stripe-primary, #99d5ef) 0 var(--pp-stripe-band, 11px), var(--stripe-gap, #fdf1e2) var(--pp-stripe-band, 11px) var(--pp-stripe-period, 22px));
}

.p-gift {
	width: 100%;
	max-width: var(--pp-gift-width, 424px);
	margin: 0 auto;
	background: var(--surface-card, #fff);
	border: 1px solid var(--border-strong, #2f4148);
	border-radius: var(--radius-card, 14px);
	padding: var(--pp-gift-pad, 16px 22px 17px);
}

.p-gift-head {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-4, 12px);
}

.p-gift-icon {
	flex: none;
	width: var(--pp-gift-icon, 30px);
	height: var(--pp-gift-icon, 30px);
}

.p-gift-title {
	margin: 0;
	font-family: var(--font-heading, "Lora", Georgia, serif);
	font-weight: var(--weight-heading, 600);
	font-size: var(--type-h2, clamp(19px, 4.8vw, 22px));
	line-height: var(--type-h2-lh, 1.2);
}

.p-gift-options {
	display: flex;
	flex-direction: column;
	margin: var(--space-4, 12px) auto 0;
	width: 100%;
	max-width: var(--pp-gift-options-width, 380px);
}

.p-gift-option {
	display: flex;
	align-items: center;
	gap: var(--space-4, 12px);
	width: 100%;
	padding: var(--pp-gift-row-pad, 12px 2px);
	margin: 0;
	cursor: pointer;
	background: transparent;
	border: 0;
	border-radius: 0;
	text-align: left;
}

.p-gift-option--selected .p-gift-dot {
	border-color: var(--text-primary, #2f4148);
}

.p-gift-option--selected .p-gift-dot-inner {
	background: var(--text-primary, #2f4148);
}

.p-gift-option--selected .p-gift-label {
	font-weight: var(--weight-strong, 600);
	color: var(--text-primary, #2f4148);
}

.p-gift-dot {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--pp-gift-dot, 19px);
	height: var(--pp-gift-dot, 19px);
	border-radius: var(--radius-pill, 999px);
	border: var(--pp-gift-dot-border, 1.5px) solid var(--border-field, #c9d2d5);
	background: var(--surface-card, #fff);
}

.p-gift-dot-inner {
	display: block;
	width: var(--pp-gift-dot-inner, 9px);
	height: var(--pp-gift-dot-inner, 9px);
	border-radius: var(--radius-pill, 999px);
	background: transparent;
}

.p-gift-label {
	font-family: var(--font-body, "Montserrat", system-ui, sans-serif);
	font-size: var(--type-caption, 14px);
	line-height: var(--type-voice-lh, 1.45);
	font-weight: var(--weight-body, 400);
	color: var(--text-body, #4c6169);
	text-align: left;
}

/* §11 — Order summary */
.p-summaryband {
	margin: 0 calc((100% - 100vw) / 2);
	padding: var(--space-8, 26px) calc((100vw - 100%) / 2 + var(--gutter, 22px)) var(--space-4, 12px);
	background-color: var(--surface-page, #fbfaf8);
}

.p-afternote {
	margin: 0 auto;
	max-width: var(--pp-note-measure, 440px);
	font-size: var(--type-fine, 13px);
	line-height: var(--type-fine-lh, 1.6);
	color: var(--text-body, #4c6169);
	text-align: center;
	text-wrap: pretty;
}

.p-summary {
	width: 100%;
	max-width: var(--pp-summary-width, 460px);
	margin: var(--space-6, 18px) auto 0;
	background: var(--surface-card, #fff);
	border: 1px solid var(--border-card, #e7e4dc);
	border-radius: var(--radius-card, 14px);
	padding: var(--pp-summary-pad, 24px 22px 26px);
}

.p-lines {
	display: flex;
	flex-direction: column;
	gap: var(--pp-space-9, 9px);
}

.p-line {
	display: flex;
	justify-content: space-between;
	gap: var(--space-5, 14px);
	font-size: var(--type-small, 15px);
	line-height: var(--type-small-lh, 1.5);
}

.p-line-desc {
	color: var(--text-body, #4c6169);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--pp-line-desc-gap, 4px 7px);
}

.p-line-who {
	font-weight: var(--weight-strong, 600);
	color: var(--text-primary, #2f4148);
}

.p-line-pill {
	display: inline-block;
	background-color: var(--pill-fill, #fddda6);
	color: var(--text-primary, #2f4148);
	border-radius: var(--radius-pill, 999px);
	padding: var(--pp-line-pill-pad, 2px 10px);
	font-size: var(--type-fine, 13px);
	font-weight: var(--weight-medium, 500);
	vertical-align: var(--pp-line-pill-shift, 1px);
}

.p-line-value {
	font-variant-numeric: var(--numeric-price, tabular-nums);
	white-space: nowrap;
}

.p-total {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: var(--pp-space-16, 16px);
	border-top: 1px dashed var(--border-dashed, #e7e4dc);
	margin-top: var(--pp-space-15, 15px);
	padding-top: var(--pp-space-15, 15px);
}

.p-total-label {
	font-family: var(--font-heading, "Lora", Georgia, serif);
	font-weight: var(--weight-heading, 600);
	font-size: var(--type-h3, 19px);
}

.p-total-value {
	font-family: var(--font-heading, "Lora", Georgia, serif);
	font-weight: var(--weight-heading, 600);
	font-size: var(--type-h2, clamp(19px, 4.8vw, 22px));
	line-height: var(--pp-price-lh, 1);
	font-variant-numeric: var(--numeric-price, tabular-nums);
}

/* auto sides, not 0: .v2-btn caps the width at 340px, narrower than the card. */
.p-checkout {
	display: block;
	width: 100%;
	margin: var(--pp-space-20, 20px) auto 0;
	border: 0;
	cursor: pointer;
	appearance: none;
	background: var(--action-fill, #2f4148);
	color: var(--text-on-navy, #fbfaf8);
	font-family: var(--font-body, "Montserrat", system-ui, sans-serif);
	font-weight: var(--weight-strong, 600);
	font-size: var(--type-button, 17px);
	padding: var(--pp-checkout-pad, 18px 20px);
	border-radius: var(--radius-control, 10px);
	text-align: center;
}

.p-guarantee {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2, 8px);
	margin: var(--space-5, 14px) 0 0;
	font-size: var(--type-fine, 13px);
	color: var(--text-body, #4c6169);
}

.p-guarantee-icon {
	flex: none;
	width: var(--pp-guarantee-icon, 15px);
	height: var(--pp-guarantee-icon, 15px);
	position: relative;
	top: var(--pp-guarantee-icon-shift, -1px);
}

/* §12 — Trustpilot + customer quote */
.p-trust {
	width: 100%;
	max-width: var(--pp-summary-width, 460px);
	margin: var(--pp-space-6, 6px) auto 0;
}

.p-trust-inner {
	display: flex;
	flex-direction: column;
	gap: var(--space-3, 10px);
	text-align: center;
}

.trustpilot-widget {
	width: 100%;
	max-width: var(--pp-trustpilot-width, 340px);
	height: auto;
	margin: 0 auto;
}

.trustpilot-widget a {
	text-decoration: none;
}

.p-trust-stars {
	margin: 0;
	letter-spacing: var(--pp-stars-ls, 2px);
	font-size: var(--type-caption, 14px);
	color: var(--brand-trustpilot, #00b67a);
}

.p-trust-stars[hidden] {
	display: none;
}

.p-quote {
	margin: 0;
	font-family: var(--font-heading, "Lora", Georgia, serif);
	font-weight: var(--weight-quote, 500);
	font-size: var(--type-voice, clamp(16px, 4.1vw, 18px));
	line-height: var(--type-voice-lh, 1.45);
	color: var(--text-primary, #2f4148);
	text-wrap: pretty;
}

.p-quote-attr {
	margin: 0;
	font-size: var(--type-fine, 13px);
	line-height: var(--type-small-lh, 1.5);
	color: var(--text-body, #4c6169);
}

/* §13 — Footer */
.p-footer {
	background: var(--surface-page, #fbfaf8);
	padding: var(--pp-space-34, 34px) 0 var(--pp-space-32, 32px);
}

.p-footer-inner {
	box-sizing: border-box;
	width: 100%;
	padding: 0 var(--gutter, 22px);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--pp-space-16, 16px);
}

.p-footer-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-5, 14px) var(--space-8, 26px);
}

.p-footer-logo {
	width: var(--pp-logo-size, 54px);
	height: var(--pp-logo-size, 54px);
}

.p-footer-nav {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2, 8px) var(--space-8, 26px);
	font-size: var(--type-caption, 14px);
	font-weight: var(--weight-medium, 500);
}

.p-footer-legal {
	margin: 0;
	width: 100%;
	text-align: center;
	font-size: var(--type-caption, 14px);
	color: var(--text-body, #4c6169);
}

/* §14 — Breakpoints */
@media (min-width: 760px) {

	.v2-nav-links {
		display: flex;
		align-items: center;
		gap: var(--space-8, 26px);
		margin-left: auto;
		font-size: var(--type-caption, 14px);
		font-weight: var(--weight-medium, 500);
	}

	.v2-burger {
		display: none;
	}
}

@media (min-width: 900px) {

	.p-tiers {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--space-6, 18px);
		overflow: visible;
		margin: 0;
		padding: var(--pp-space-11, 11px) 0 0;
	}

	.p-tier {
		flex: none;
	}

	.p-tier > * {
		min-width: 0;
	}

	.p-swipe {
		display: none;
	}
}

/* Thank you (order-received)
--------------------------------------------- */

/* Thank you — WooCommerce order-received
--------------------------------------------- */

/* woocommerce.css is dequeued on this page (llife_front_enqueue), so every rule
   the order-received body needs is here. One cream band between two candy
   stripes, one centred column: heading, lede, then either the portal CTA — a
   wider button than the .v2-btn default — or, on a gift, the white card.

   .woocommerce-order is the wrapper checkout/thankyou.php prints; page.php adds
   an empty .container above it, which is why the band is on .site-main. */

/* The page is short, so it is stretched to the viewport and the footer is
   pushed to the bottom. WooCommerce puts .woocommerce-order-received on body. */
body.woocommerce-order-received {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

body.woocommerce-order-received .v2-page {
	flex: 1 0 auto;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

.llife-thank-you .site-main {
	flex: 1 0 auto;
	display: flex;
	flex-direction: column;
	background: var(--surface-accent, #fdf1e2);
}

/* The candy stripes sit at the edges of the band, so the height goes to the
   section between them and not to main — which means the column has to stay a
   column all the way down, through every wrapper between the two: page.php's
   unnamed content div, the .woocommerce div the [woocommerce_checkout]
   shortcode is wrapped in, and the .woocommerce-order thankyou.php prints.
   Miss one and the section stops stretching. The empty .container page.php puts
   above them must not take a share of the height, hence :last-child. */
.llife-thank-you .site-main > div:last-child,
.llife-thank-you .site-main .woocommerce,
.llife-thank-you .site-main .woocommerce-order {
	flex: 1 0 auto;
	display: flex;
	flex-direction: column;
}

.ty-stripe {
	flex: 0 0 auto;
}

/* Centred in what the header, the footer and the stripes leave, then lifted by
   --ty-lift: the extra bottom padding is what moves the block above the true
   centre. */
.ty-section {
	flex: 1 0 auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: var(--os-section-pad-top, 36px) 0 calc(var(--os-section-pad-bottom, 40px) + var(--ty-lift, 8vh));
}

.ty-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	max-width: var(--ty-column, 520px);
	margin: 0 auto;
	padding: 0 var(--gutter, 22px);
	text-align: center;
}

.ty-title {
	margin: 0;
	max-width: var(--ty-title-measure, 17ch);
	font-family: var(--font-heading, "Lora", Georgia, serif);
	font-weight: var(--weight-heading, 600);
	font-size: var(--type-h1, clamp(30px, 7.4vw, 40px));
	line-height: var(--type-h1-lh, 1.14);
	letter-spacing: var(--type-h1-ls, -0.012em);
	color: var(--text-primary, #2f4148);
	text-wrap: pretty;
}

.ty-lede {
	margin: var(--space-8, 26px) 0 0;
	font-size: var(--type-body, 16px);
	line-height: var(--type-body-lh, 1.6);
	color: var(--text-body, #4c6169);
	text-wrap: pretty;
}

.ty-lede strong {
	font-weight: var(--weight-strong, 600);
	color: var(--text-primary, #2f4148);
}

.ty-lede a {
	color: var(--text-primary, #2f4148);
	text-decoration: underline;
}

/* Gift order: no CTA — the questions belong to the recipient — so the space
   goes to a card that says what happens to their email and when. */
.ty-gift {
	box-sizing: border-box;
	width: 100%;
	margin: var(--space-8, 26px) 0 0;
	padding: var(--space-8, 26px) var(--space-7, 22px);
	background: var(--surface-card, #fff);
	border-radius: var(--radius-card, 14px);
}

.ty-gift-line {
	margin: 0;
	font-size: var(--type-body, 16px);
	line-height: var(--type-body-lh, 1.6);
	color: var(--text-body, #4c6169);
	text-wrap: pretty;
}

.ty-gift-line strong {
	font-weight: var(--weight-strong, 600);
	color: var(--text-primary, #2f4148);
}

.ty-gift-email {
	margin: var(--space-6, 18px) 0 0;
	font-weight: var(--weight-strong, 600);
	font-size: var(--type-body, 16px);
	line-height: var(--type-body-lh, 1.6);
	color: var(--text-primary, #2f4148);
	overflow-wrap: anywhere;
}

/* Fine print: the quiet grey, one step down in size. */
.ty-gift-note {
	margin: var(--space-6, 18px) 0 0;
	font-size: var(--type-small, 15px);
	line-height: var(--type-small-lh, 1.5);
	color: var(--text-label, #6b7f86);
	text-wrap: pretty;
}

.ty-cta-note {
	margin: var(--space-9, 30px) 0 0;
	font-size: var(--type-body, 16px);
	line-height: var(--type-body-lh, 1.6);
	color: var(--text-body, #4c6169);
}

/* Wider than the six Buy Now buttons — the design gives this one the column. */
.ty-cta {
	max-width: var(--ty-cta-max, 550px);
	margin-top: var(--space-6, 18px);
}

/* Declined payment: thankyou.php prints these outside the band, and the Pay /
   My account links are WooCommerce's own .button markup. */
.llife-thank-you .woocommerce-order > .woocommerce-notice {
	max-width: var(--ty-column, 520px);
	margin: 0 auto;
	padding: var(--space-8, 26px) var(--gutter, 22px) 0;
	font-size: var(--type-body, 16px);
	line-height: var(--type-body-lh, 1.6);
	color: var(--text-primary, #2f4148);
	text-align: center;
}

.llife-thank-you .woocommerce-thankyou-order-failed-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-4, 12px);
	padding-bottom: var(--os-section-pad-bottom, 40px);
}

.llife-thank-you .woocommerce-thankyou-order-failed-actions .button {
	display: inline-block;
	padding: var(--pad-button, 18px 22px);
	background: var(--action-fill, #2f4148);
	color: var(--text-on-navy, #fbfaf8);
	font-family: var(--font-body, "Montserrat", system-ui, sans-serif);
	font-weight: var(--weight-strong, 600);
	font-size: var(--type-button, 17px);
	border: 0;
	border-radius: var(--radius-control, 10px);
	text-decoration: none;
}

.llife-thank-you .woocommerce-thankyou-order-failed-actions .button:hover,
.llife-thank-you .woocommerce-thankyou-order-failed-actions .button:focus {
	color: var(--text-on-navy, #fbfaf8);
	background: var(--action-fill-hover, #3d555f);
	text-decoration: none;
}