/*
 * Friendchise — main.css
 *
 * ALL component/section styling goes in this one file, sectioned by comment
 * headers, following the Manta baseline (one file, one version string, no
 * build step). See style.css for the version-bump rule this depends on.
 *
 * Nothing here yet -- real component styles arrive in Phase 4 (blog/article
 * blocks) and Phase 5 (marketing page patterns), once the reference import
 * gives us the real design to work from.
 */

/* ==========================================================================
   1. Base / resets beyond theme.json
   ========================================================================== */
:root {
	--fc-content-width: 1200px;
}
html {
	scroll-behavior: smooth;
}
body {
	overflow-x: hidden;
}
a {
	transition: color .15s ease;
}
.wp-block-button__link {
	transition: background-color .15s ease, color .15s ease, box-shadow .15s ease, transform .15s ease;
}

/* 22 Aug 2026 (4th pass): two button-related bugs found together on the
   hero CTAs.
   1. "Buttons are next to each other" -- .wp-block-buttons is a core flex
      block with no gap of its own set here, so it was entirely dependent
      on WordPress's blockGap CSS variable for spacing between the two
      buttons. That variable got set to 0 in round 3 (to kill the white
      gap between the hero and stats sections) -- fixing that bug quietly
      broke button spacing everywhere a buttons group has more than one
      button. Fixed properly now with an explicit gap here, independent
      of the blockGap variable either way.
   2. Hanna asked for a completely different button shape -- "forget the
      generic pill." Replaced the fully-rounded pill with a bold
      rounded-square + hard offset shadow (a solid, no-blur drop shadow,
      like a sticker sitting slightly off the page) that presses in on
      hover/press. More distinctive, and matches the "be bold, don't hold
      back" direction from the stats/steps redesign. */
.wp-block-buttons {
	gap: 14px;
	flex-wrap: wrap;
	margin-top: 20px;
}

:root {
	--fc-btn-radius: 10px;
	--fc-btn-shadow: var(--fc-plum);
}

/* Sitewide CTA fill style. Originally written scoped to "header.wp-block-group"
   only (section 2) -- that meant every fill button OUTSIDE the header (hero,
   steps, live-locations, why-join) rendered with WordPress's default dark
   button colour instead of pink. Caught from Hanna's homepage screenshot
   21 Aug: promoted to a sitewide rule here so it applies everywhere. */
.wp-block-buttons .wp-block-button.is-style-fill .wp-block-button__link {
	background: var(--fc-pink);
	color: #fff;
	border: 2px solid var(--fc-plum);
	border-radius: var(--fc-btn-radius);
	padding: 12px 26px;
	font-weight: 700;
	font-size: 15px;
	box-shadow: 4px 4px 0 var(--fc-btn-shadow);
}
.wp-block-buttons .wp-block-button.is-style-fill .wp-block-button__link:hover {
	background: var(--fc-pink-dark);
	color: #fff;
	transform: translate(2px, 2px);
	box-shadow: 2px 2px 0 var(--fc-btn-shadow);
}
.wp-block-buttons .wp-block-button.is-style-fill .wp-block-button__link:active {
	transform: translate(4px, 4px);
	box-shadow: 0 0 0 var(--fc-btn-shadow);
}

/* Sitewide CTA outline style -- added 21 Aug for the About/Solo Travelers/
   Collaborate marketing pages, which use a white-fill, pink-border button
   for secondary CTAs (WordPress core registers "Outline" as a default
   button style, this just themes it). */
.wp-block-buttons .wp-block-button.is-style-outline .wp-block-button__link {
	background: #fff;
	color: var(--fc-pink);
	border: 2px solid var(--fc-pink);
	border-radius: var(--fc-btn-radius);
	padding: 10px 24px;
	font-weight: 700;
	font-size: 15px;
	box-shadow: 4px 4px 0 var(--fc-btn-shadow);
}
.wp-block-buttons .wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: var(--fc-pink);
	color: #fff;
	transform: translate(2px, 2px);
	box-shadow: 2px 2px 0 var(--fc-btn-shadow);
}
.wp-block-buttons .wp-block-button.is-style-outline .wp-block-button__link:active {
	transform: translate(4px, 4px);
	box-shadow: 0 0 0 var(--fc-btn-shadow);
}
/* Same two styles, on a pink section background (page heroes) -- swap to a
   white fill / pink text so the fill button doesn't disappear against pink,
   and the outline button reads white-on-pink instead of pink-on-pink. The
   hard shadow stays plum in both cases -- dark enough to read against
   pink, white or neutral alike, so it's one rule instead of three. */
.fc-page-hero .wp-block-buttons .wp-block-button.is-style-fill .wp-block-button__link,
.fc-hero .wp-block-buttons .wp-block-button.is-style-fill .wp-block-button__link,
.fc-live .wp-block-buttons .wp-block-button.is-style-fill .wp-block-button__link {
	background: #fff;
	color: var(--fc-pink);
	border-color: var(--fc-plum);
}
.fc-page-hero .wp-block-buttons .wp-block-button.is-style-fill .wp-block-button__link:hover,
.fc-hero .wp-block-buttons .wp-block-button.is-style-fill .wp-block-button__link:hover,
.fc-live .wp-block-buttons .wp-block-button.is-style-fill .wp-block-button__link:hover {
	background: var(--fc-plum);
	color: #fff;
}
.fc-page-hero .wp-block-buttons .wp-block-button.is-style-outline .wp-block-button__link,
.fc-hero .wp-block-buttons .wp-block-button.is-style-outline .wp-block-button__link,
.fc-live .wp-block-buttons .wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent;
	color: #fff;
	border-color: #fff;
}
.fc-page-hero .wp-block-buttons .wp-block-button.is-style-outline .wp-block-button__link:hover,
.fc-hero .wp-block-buttons .wp-block-button.is-style-outline .wp-block-button__link:hover,
.fc-live .wp-block-buttons .wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: #fff;
	color: var(--fc-pink);
}

/* ==========================================================================
   1b. Sitewide content max-width

   Added 22 Aug 2026. Every section in this theme is hand-authored with a
   "layout":{"type":"constrained","contentSize":"1200px"} block attribute,
   which is what WordPress's block editor normally turns into a centered,
   width-capped content area automatically. Confirmed from Hanna's real
   (non-full-page) browser screenshot that this isn't actually happening on
   a real wide screen -- every section was rendering edge-to-edge with no
   cap at all, unlike the live site's visibly narrower, centered content.
   Rather than depend on WordPress's block-support rendering to add that
   automatically (which this hand-authored-template setup apparently
   doesn't get reliably), every section's own content wrapper is capped
   here explicitly, so it's guaranteed regardless. 1200px matches what
   every section's block comment already specifies -- this fixes the
   bug rather than picks a new number. If 1200px still reads narrower
   than the live site's actual width once Hanna compares, change the
   --fc-content-width variable above and it updates everywhere at once.

   Targets the direct child of every "fc-" prefixed section (the row/grid/
   heading/button-group that holds each section's actual content), plus
   the header and footer's own inner row -- covers every section across
   every template, including ones not yet reached in the block-by-block
   pass, not just the front page.
   ========================================================================== */
header.wp-block-group > *,
footer.wp-block-group > *,
main section.wp-block-group[class*=" fc-"] > * {
	max-width: var(--fc-content-width);
	margin-left: auto !important;
	margin-right: auto !important;
	width: 100%;
	box-sizing: border-box;
	padding-left: 24px;
	padding-right: 24px;
}

/* 22 Aug 2026, second fix in this pass: an unwanted white gap was showing
   between full-bleed sections (e.g. the pink hero and the plum stats band
   right after it), even though both have solid backgrounds that should
   touch directly -- every section already controls its own spacing with
   explicit padding-top/-bottom. Root cause: WordPress's default block gap
   (theme.json didn't set styles.spacing.blockGap, so it fell back to
   WordPress's own ~2em default) inserts margin between top-level blocks
   automatically. Set blockGap to 0 in theme.json now that every section
   manages its own spacing -- this defensive override kills it here too,
   in case margin is coming from somewhere theme.json's setting doesn't
   reach. */
main.wp-block-group > * + * {
	margin-top: 0 !important;
}

/* ==========================================================================
   2. Header / navigation

   Best-effort visual match written 21 Aug 2026 from the confirmed real
   markup in parts/header.html (logo file, five nav items, CTA button) --
   NOT pixel-matched against the live site's computed CSS, since UiCore
   Framework generates that at runtime and we don't have it. Compare
   against a live screenshot once the theme is activated on
   friendchise-local, and adjust colours/spacing/sizing here rather than
   in parts/header.html.
   ========================================================================== */
header.wp-block-group {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--fc-neutral);
	border-bottom: 1px solid var(--fc-line);
}
header.wp-block-group .wp-block-image img {
	display: block;
	width: 160px;
	height: auto;
}
header.wp-block-group .wp-block-navigation {
	gap: 4px;
}
header.wp-block-group .wp-block-navigation-item > .wp-block-navigation-item__content {
	font-weight: 500;
	font-size: 15.5px;
	color: var(--fc-plum);
	padding: 8px 14px;
}
header.wp-block-group .wp-block-navigation-item > .wp-block-navigation-item__content:hover {
	color: var(--fc-pink);
}
header.wp-block-group .wp-block-navigation__submenu-container {
	background: #fff;
	border: 1px solid var(--fc-line);
	border-radius: 10px;
	padding: 6px;
	box-shadow: 0 8px 24px rgba(78, 26, 61, .08);
}
/* 22 Aug 2026: this used to duplicate the sitewide fill-button rule near
   the top of the file (section 1) with identical values -- a leftover
   from before that rule was promoted to sitewide. The header's fill
   button ("Join the waitlist") is matched by the sitewide selector
   already, so this dedicated copy was just two places that had to be
   kept in sync by hand. Removed rather than updated. */
@media (max-width: 781px) {
	header.wp-block-group .wp-block-group {
		flex-wrap: wrap;
		row-gap: 12px;
	}
}
/* 9 Sep 2026: Ari -- mobile audit, "some elements don't scale or don't
   function." The "About" submenu ("Friendchise for Solo Travelers") uses
   the desktop hover-dropdown card look (white background, border,
   shadow, radius) from the base .wp-block-navigation__submenu-container
   rule above unconditionally -- including inside the mobile hamburger
   overlay, where the nav is a plain stacked list, not a dropdown. There
   it reads as a disconnected white pill floating over "About"/"Blog"
   rather than a nested item under "About". Scoped to the open mobile
   overlay (.is-menu-open) only, so the real desktop dropdown is
   untouched: strip the card chrome and let it sit inline as a plain,
   slightly indented row in the stack, right-aligned like its siblings. */
@media (max-width: 781px) {
	header.wp-block-group .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
		background: transparent;
		border: none;
		box-shadow: none;
		border-radius: 0;
		padding: 0;
		width: 100%;
	}
	header.wp-block-group .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		padding: 4px 14px 4px 28px;
		font-size: 14px;
		opacity: .8;
	}
}

/* ==========================================================================
   3. Footer

   Replaced 27 Aug 2026: Hanna asked to swap the pink form-card footer for
   a new dark, hero-style closing CTA ("There's a table tonight. One seat
   is yours.") as the actual site footer, "for now" -- i.e. this is the
   footer until further notice, not a one-off homepage section. Two new
   theme.json colours (--fc-ink, a near-black plum for the background, and
   --fc-sunshine, the yellow accent on "yours" and the primary button)
   support this and nothing else site-wide yet.

   IMPORTANT, read before touching this again: several existing CTA
   buttons across the site (front-page hero, front-page steps section,
   front-page why-join section, the About page) link to "#newsletter"
   expecting to land on the working Brevo sign-up form that used to be the
   whole right half of the old footer. That form is real (Hanna's actual
   Brevo list, wired through inc/newsletter.php) and must keep working --
   it has NOT been deleted, only visually demoted. It now lives in the
   quieter .fc-footer-bottom strip below the new CTA panel, unchanged
   functionally from the old .fc-footer-newsletter markup/CSS. The
   id="newsletter" anchor now sits on the outer <footer> itself (the CTA
   panel is the first thing in it), so every existing "#newsletter" link
   still resolves to a sensible landing spot instead of a dead anchor --
   it just lands on the new headline/buttons first, with the real capture
   form one scroll further down, instead of jumping straight to the form
   the way it used to. Flag to Hanna if she wants a tighter anchor
   (id="newsletter-form" also exists, right on the form itself, for that).

   Structure:
   - .fc-footer-cta: the new dark panel -- dot row, headline with the
     yellow "yours" span, two buttons (fill-yellow "Take a seat" to the
     live app; outline-white "Get the launch email" to the real form
     further down), small uppercase caption line.
   - .fc-footer-bottom: the demoted original footer content (link nav,
     social icons, legal nav, the real newsletter form, copyright), same
     two-column grid as before, just recoloured for the dark background
     instead of pink and set smaller/quieter since it is no longer the
     visual lead.
   ========================================================================== */
footer.wp-block-group a {
	color: #fff;
}
footer.wp-block-group.fc-footer {
	background: var(--fc-ink);
}

/* ---- CTA panel ("There's a table tonight...") ----
   Values here are deliberately copied from the already-approved Front V2
   concept page's own closer section (.v2-closer / .v2-display / .v2-mark /
   .v2-seats / .v2-btn, templates/page-frontv2.html + this file's "fcv2"
   rules), not re-guessed from the screenshot -- same colours (--fc-ink,
   --fc-sunshine, --fc-cream now equal --v2-ink/--v2-zest/--v2-cream),
   same 4px button radius and monospace caption treatment, same seat-row
   motif (filled = taken, ring = open) used everywhere else V2 shows a
   seat, reused here as the dot row instead of a generic pagination
   indicator. Kept the .fc- prefix / theme-standard class naming rather
   than importing the "v2-" classes directly, since this is now the
   sitewide footer, not the concept page. */
.fc-footer-cta {
	padding: 88px 24px 64px;
	text-align: center;
}
/* 28 Aug 2026: widening this alone (720px -> 1040px) previously did
   nothing visible -- turned out both this group and its parent
   (.fc-footer-cta) still had "layout":{"type":"constrained"} in
   parts/footer.html with no explicit contentSize, so WordPress was
   auto-capping this div AND its own children (the headline, buttons,
   caption) at theme.json's default contentSize (720px) at render
   time, independently of this max-width. Dropped the "layout"
   attribute from both group blocks so this CSS is the only thing
   controlling width. */
.fc-footer-cta-inner {
	max-width: 1040px;
	margin: 0 auto;
}
.fc-footer-seats {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 7px;
	margin-bottom: 30px;
}
.fc-footer-seats .fc-seat {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	flex: 0 0 auto;
}
.fc-footer-seats .fc-seat.is-taken {
	background: var(--fc-pink);
}
.fc-footer-seats .fc-seat.is-open {
	border: 2px solid var(--fc-sunshine);
}
.fc-footer-cta-headline.wp-block-heading {
	color: var(--fc-cream);
	font-size: clamp(2.6rem, 7.4vw, 6rem);
	line-height: .92;
	letter-spacing: -.04em;
	font-weight: 800;
	margin: 0 0 34px;
}
.fc-footer-cta-headline .fc-highlight-yellow {
	color: var(--fc-sunshine);
}
.fc-footer-cta-buttons.wp-block-buttons {
	justify-content: center;
	margin: 0 0 26px;
	gap: 14px;
}
.fc-footer-cta-buttons .wp-block-button .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 16px 28px;
	font-size: 15px;
	font-weight: 700;
	border-radius: 4px;
	transition: transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
}
.fc-footer-cta-buttons .wp-block-button.is-style-fill-yellow .wp-block-button__link {
	background: var(--fc-sunshine);
	color: var(--fc-plum);
	border: 2px solid transparent;
	box-shadow: 5px 5px 0 var(--fc-pink);
}
.fc-footer-cta-buttons .wp-block-button.is-style-fill-yellow .wp-block-button__link:hover {
	transform: translate(2px, 2px);
	box-shadow: 3px 3px 0 var(--fc-pink);
}
.fc-footer-cta-buttons .wp-block-button.is-style-fill-yellow .wp-block-button__link:active {
	transform: translate(5px, 5px);
	box-shadow: 0 0 0 var(--fc-pink);
}
.fc-footer-cta-buttons .wp-block-button.is-style-outline-white .wp-block-button__link {
	background: transparent;
	color: var(--fc-cream);
	border: 2px solid rgba(255, 244, 236, .3);
}
.fc-footer-cta-buttons .wp-block-button.is-style-outline-white .wp-block-button__link:hover {
	border-color: var(--fc-sunshine);
	color: var(--fc-sunshine);
}
.fc-footer-cta-caption.wp-block-paragraph {
	font-family: ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas, monospace;
	color: rgba(255, 244, 236, .45);
	font-size: 11px;
	letter-spacing: .14em;
	text-transform: uppercase;
	margin: 0;
}

/* ---- Demoted original footer content: links, social, legal, real
   newsletter form, copyright. Same grid/markup approach as before,
   just recoloured and scaled down since the CTA panel above is now the
   visual lead. ---- */
/* 30 Aug 2026: Ari -- this strip was rendering narrower than the CTA
   panel above it: with the block's own "layout":{"type":"constrained"}
   attribute now dropped (see the matching parts/footer.html comment),
   its child .fc-footer-row was no longer being auto-capped by
   WordPress core at theme.json's 720px default -- but .fc-footer-bottom
   itself is still a direct child of <footer class="fc-footer">, which
   this file's own "header.wp-block-group > *, footer.wp-block-group > *"
   rule (section 1, near the top) caps at var(--fc-content-width) with
   !important margins. That rule's selector (footer.wp-block-group > *)
   out-specifies a bare .fc-footer-bottom class, so max-width here needs
   the same "footer.wp-block-group > " prefix to actually win, not just
   a bigger number. Matched to 1040px, the same as .fc-footer-cta-inner
   above it, so the two sections' edges align rather than landing on
   var(--fc-content-width)'s wider default by accident. */
footer.wp-block-group > .fc-footer-bottom {
	max-width: 1040px;
	margin: 0 auto;
	border-top: 1px solid rgba(255, 255, 255, .12);
	padding: 40px 24px 32px;
}
/* 30 Aug 2026: Ari -- "I want the form to be wider... it is so
   text-heavy it is very vertical in aspect ratio." The nav links only
   ever need enough width for one short word per line (Home, About,
   Collaborate...) plus the social icon row, so they got a fixed rail
   instead of a fraction (was 3fr of 3fr/7fr, which grew the links
   column right along with the row even though it never needed the
   extra space); the newsletter column now absorbs all of that freed
   width via 1fr, on top of the wider .fc-footer-bottom above -- the
   real Brevo form's own fields/labels wrap far less at that width. */
.fc-footer-row {
	display: grid;
	grid-template-columns: 220px 1fr;
	gap: 40px;
	align-items: start;
}
.fc-footer-links > * {
	margin-bottom: 20px;
}
.fc-footer-links > *:last-child {
	margin-bottom: 0;
}
footer.wp-block-group .wp-block-navigation {
	gap: 6px;
}
footer.wp-block-group .wp-block-navigation-item > .wp-block-navigation-item__content {
	color: #fff;
	opacity: .75;
	font-size: 14px;
	padding: 3px 0;
}
footer.wp-block-group .wp-block-navigation-item > .wp-block-navigation-item__content:hover {
	opacity: 1;
	color: var(--fc-sunshine);
}
.fc-footer-nav-legal .wp-block-navigation-item > .wp-block-navigation-item__content {
	font-size: 12px;
	opacity: .5;
}
.fc-footer-nav-legal .wp-block-navigation-item > .wp-block-navigation-item__content:hover {
	opacity: .8;
}
.fc-footer-links .wp-block-social-links {
	gap: 10px;
}
footer.wp-block-group .wp-block-social-links .wp-social-link {
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, .1);
}
footer.wp-block-group .wp-block-social-links .wp-social-link a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}
footer.wp-block-group .wp-block-social-links .wp-social-link svg {
	width: 16px;
	height: 16px;
}
footer.wp-block-group .wp-block-social-links .wp-social-link:hover {
	background: var(--fc-sunshine);
}
footer.wp-block-group .wp-block-social-links .wp-social-link a svg {
	fill: #fff;
}
.fc-footer-newsletter h2.wp-block-heading {
	margin-bottom: 8px;
	font-size: 20px;
	color: #fff;
}
.fc-footer-newsletter > .wp-block-paragraph {
	color: rgba(255, 255, 255, .7);
	font-size: 14px;
}
/* 12 Sep 2026: Ari -- "In the footer, I want [fluentform id="8"] to be
   there." Replaces the Brevo embed's styling that lived here. Fluent
   Forms ships light-theme defaults (#1a1a1a labels and consent text),
   which are invisible against the plum footer -- only the required
   asterisk showed. So this is a colour correction plus the same input
   and offset-shadow button treatment the Brevo form had, to keep the
   footer looking unchanged. The .ff_screen_reader_title legend is left
   alone deliberately: it is meant to stay visually hidden. */
.fc-footer-newsletter #newsletter-form { margin: 16px 0 0; }
.fc-footer-newsletter .fluentform .ff-el-input--label label { color: #fff; font-size: 14px; font-weight: 700; }
.fc-footer-newsletter .fluentform .ff-el-form-check-label,
.fc-footer-newsletter .fluentform .ff-el-form-check-label span,
.fc-footer-newsletter .fluentform .ff_t_c,
.fc-footer-newsletter .fluentform .ff_t_c p,
.fc-footer-newsletter .fluentform .ff-el-tc p {
	color: rgba(255, 255, 255, .72);
	font-size: 13px;
	line-height: 1.5;
}
.fc-footer-newsletter .fluentform a { color: #fff; text-decoration: underline; }
.fc-footer-newsletter .fluentform .ff-el-form-control {
	border: 2px solid var(--fc-line) !important;
	border-radius: var(--fc-btn-radius) !important;
	padding: 12px 14px !important;
	font-size: 15px !important;
	transition: border-color .15s ease;
}
.fc-footer-newsletter .fluentform .ff-el-form-control:focus {
	border-color: var(--fc-sunshine) !important;
	outline: none;
}
.fc-footer-newsletter .fluentform .ff-btn-submit {
	border: 2px solid var(--fc-plum) !important;
	border-radius: var(--fc-btn-radius) !important;
	box-shadow: 4px 4px 0 var(--fc-plum) !important;
	transition: transform .15s ease, box-shadow .15s ease;
}
.fc-footer-newsletter .fluentform .ff-btn-submit:hover {
	transform: translate(2px, 2px);
	box-shadow: 2px 2px 0 var(--fc-plum) !important;
}
.fc-footer-copyright {
	margin-top: 32px;
	opacity: .6;
}

@media (max-width: 781px) {
	.fc-footer-cta {
		padding: 64px 20px 48px;
	}
	.fc-footer-row {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   4. Article / blog blocks (Quick Summary callout, TOC, FAQ)

   Ported verbatim from the "Friendchise Article Elements" plugin v1.2.0 (a
   prior session's work, supplied 20 Aug 2026), which the enqueue in
   inc/article-elements.php replaces. Class names are unchanged on purpose --
   the 26 existing posts already contain this markup and must keep rendering
   without a find-and-replace across the database.

   Dropped intentionally: the plugin's .uicore-entry-meta rules, which patched
   two bugs specific to the Lumi/UiCore theme's own post-meta markup. This
   theme doesn't use that markup, so there's nothing for those rules to patch.
   ========================================================================== */
:root {
	--fc-pink: #FC599D;
	--fc-pink-dark: #D6417F;
	--fc-plum: #4E1A3D;
	--fc-neutral: #F8FCFC;
	--fc-line: #EBE3E8;
	--fc-ink: #2A0E20;
	--fc-sunshine: #FFD84D;
	--fc-cream: #FFF4EC;
}

/* ---- Summary / TOC box ---- */
.fc-summary-box {
	background: var(--fc-neutral);
	border: 1px solid #E7F2F2;
	border-radius: 14px;
	padding: 28px;
	margin-bottom: 2.4em !important; /* breathing room before the body text */
}
.fc-kicker {
	font-size: 12px;
	font-weight: 700; /* Inter 700 */
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--fc-pink);
	margin-bottom: 8px;
}
/* 7 Sep 2026 fix: Ari -- "the table of contents doesn't really look clear
   as a ToC. Separate it a bit better from the summary." The kicker,
   summary paragraph and "In this article" title/list previously all sat
   flush against each other inside .fc-summary-box (site-wide blockGap is
   deliberately 0, see theme.json, so nothing but each element's own
   margin created any space) -- reads as one undifferentiated paragraph
   rather than "summary, then a contents list". A top margin plus a
   divider line on .fc-toc-title now gives the ToC its own visually
   separate zone at the bottom of the box, echoing the divider style
   already used for .fc-toc li and .fc-article-rule elsewhere. */
.fc-toc-title {
	font-size: 15px;
	font-weight: 600; /* Inter 600 */
	color: var(--fc-plum);
	margin-top: 20px !important;
	margin-bottom: 12px !important;
	padding-top: 18px;
	border-top: 1px solid var(--fc-line);
}
.fc-toc { list-style: none; padding-left: 0; margin: 0; }
.fc-toc li { padding: 7px 0; margin: 0; border-bottom: 1px solid var(--fc-line); }
.fc-toc li:last-child { border-bottom: none; }
.fc-toc li a {
	display: flex; align-items: center; gap: 9px;
	text-decoration: none;
	color: var(--fc-plum);
	font-weight: 500; /* Inter 500 */
	font-size: 15.5px;
}
.fc-toc li a::before {
	content: ""; width: 6px; height: 6px; border-radius: 50%;
	background: var(--fc-pink); flex: 0 0 auto;
}
.fc-toc li a:hover { color: var(--fc-pink-dark); }

/* The auto-TOC placeholder: looks like a quiet note in the editor,
   is replaced with the real list on the live site -- see
   inc/article-elements.php's the_content filter. */
.fc-toc-auto {
	font-size: 13.5px;
	color: #6E5B68;
	border: 1px dashed var(--fc-line);
	border-radius: 8px;
	padding: 10px 14px;
}

/* ---- FAQ accordions (card style) ---- */
details.fc-faq {
	border: 1px solid var(--fc-line);
	border-radius: 12px;
	margin-bottom: 12px;
	background: #fff;
	overflow: hidden;
	transition: border-color .15s ease;
}
details.fc-faq[open] { border-color: #F5A6C8; }
details.fc-faq > summary {
	display: flex; align-items: center; justify-content: space-between; gap: 14px;
	padding: 16px 20px;
	font-weight: 600; /* Inter 600 */
	font-size: 16.5px;
	color: var(--fc-plum);
	cursor: pointer;
	list-style: none;
}
details.fc-faq > summary::-webkit-details-marker { display: none; }
details.fc-faq > summary::after {
	content: ""; flex: 0 0 auto; width: 11px; height: 11px;
	border-right: 2.5px solid var(--fc-pink);
	border-bottom: 2.5px solid var(--fc-pink);
	transform: rotate(45deg); margin-top: -4px;
	transition: transform .18s ease;
}
details.fc-faq[open] > summary::after { transform: rotate(225deg); margin-top: 4px; }
details.fc-faq > :not(summary) { padding-left: 20px; padding-right: 20px; color: #6E5B68; }
details.fc-faq > :last-child { padding-bottom: 18px; margin-bottom: 0; }
@media (prefers-reduced-motion: reduce) {
	details.fc-faq > summary::after, details.fc-faq { transition: none; }
}

/* ==========================================================================
   5. Marketing page sections (hero, feature grid, CTA -- Phase 5)

   Written 21 Aug 2026 for templates/front-page.html, built from the real
   homepage content Hanna pasted (see that file's own end-of-file note for
   what's real vs. simplified). Best-effort visual design using theme.json's
   brand tokens -- not pixel-matched to the live UiCore/Elementor build,
   same caveat as sections 2/3. Compare against a screenshot and adjust here.
   ========================================================================== */

/* ---- Shared section rhythm ---- */
.fc-hero-row,
.fc-steps-row,
.fc-live-row,
.fc-founder-row {
	gap: 40px;
}
.fc-hero-copy,
.fc-live-copy,
.fc-founder-copy {
	flex: 1 1 420px;
	min-width: 280px;
}
.fc-hero-image,
.fc-steps-image,
.fc-live-image {
	flex: 0 1 420px;
	min-width: 240px;
}

.fc-steps-image img,
.fc-live-image img {
	border-radius: 20px;
	width: 100%;
	height: auto;
}

/* Hero image -- 22 Aug (4th pass): Hanna asked for it bigger and "a bit
   more horizontal," dropping the 1:1 box from the previous round. Split
   out of the shared .fc-hero-image/.fc-steps-image/.fc-live-image flex
   rule above so only the homepage hero gets the larger size -- steps
   keeps the smaller boxed treatment (live-locations was split out to
   its own larger size too, 25 Aug -- see below). */
.fc-hero-image {
	flex: 1 1 480px;
	min-width: 300px;
}
.fc-hero-image img {
	border-radius: 20px;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	display: block;
}

/* Live-locations image -- 25 Aug, Hanna asked for it bigger. Same technique
   as the hero image above: split out of the shared .fc-hero-image/
   .fc-steps-image/.fc-live-image flex rule so only this one grows --
   .fc-steps-image keeps the smaller boxed size it shares with nothing else. */
.fc-live-image {
	flex: 1 1 480px;
	min-width: 300px;
}

/* Hero now matches the live site's pink section (backgroundColor/textColor
   block attributes on the wp:group, same has-brand-pink-background-color /
   has-white-color classes the marketing-page heroes already use) --
   .fc-hero shares the pink-section text/button treatment with
   .fc-page-hero, defined together in section 11 further down, rather
   than duplicating it here. */

/* Subtle background liveliness -- 22 Aug (4th pass), Hanna's request for
   "some subtle elements in the background... without deferring too much
   focus from the text." Two soft, low-opacity circles bleeding off the
   edges of the pink section, sitting behind the actual hero content.
   Desktop only (see the mobile block below) -- on a small screen the
   hero's background is already the real photo, and stacking decorative
   circles behind that too would just be visual noise in a tight space. */
.fc-hero {
	position: relative;
	overflow: hidden;
}
.fc-hero::before,
.fc-hero::after {
	content: "";
	position: absolute;
	border-radius: 50%;
	background: rgba(255, 255, 255, .08);
	pointer-events: none;
	z-index: 0;
}
.fc-hero::before {
	width: 460px;
	height: 460px;
	top: -220px;
	right: -140px;
}
.fc-hero::after {
	width: 280px;
	height: 280px;
	bottom: -160px;
	left: 12%;
	background: rgba(255, 255, 255, .06);
}
.fc-hero .fc-hero-row {
	position: relative;
	z-index: 1;
}

/* Hero on mobile -- 22 Aug (4th pass), rewritten, then rewritten again
   (6th pass). The boxed image becomes a full-bleed background behind the
   copy, with a dark gradient overlay for text contrast, per Hanna's
   original request.
   4th-pass fix: the image sat in a CSS Grid "stack" area at height:100%,
   which needs a DEFINITE parent height to resolve -- an implicit grid
   row sized by its own content isn't definite even with a min-height on
   the container, so the image was resolving to nothing and disappearing
   entirely. Switched to absolute positioning (.fc-hero-row as the
   positioned box, the image filling it with inset:0), which always
   resolves against the row's real rendered box.
   6th-pass fix: that made the image visible again, but it was still
   sitting inside a visible pink margin instead of reaching the true
   edges of the screen -- "padding-left/right: 0 !important" here should
   have closed that gap, and on paper it does beat the sitewide
   content-gutter rule ("1b" above) on !important alone, but a margin or
   width constraint from somewhere upstream (most likely WordPress's own
   per-block layout output, which this hand-authored-template setup has
   already shown isn't fully predictable) was apparently still leaving
   some inset. Rather than keep chasing exactly which upstream rule it
   is, switched to the standard CSS "break out of the container"
   technique: force the row to the full viewport width and pull it back
   to the true left edge with a negative margin, which repositions it
   against the viewport directly and can't be quietly narrowed by
   whatever padding or width its parent happens to be carrying. Corners
   are square now too on mobile -- rounded corners cutting into the very
   edges of the screen never made sense once the box is genuinely
   full-bleed. */
@media (max-width: 781px) {
	.fc-hero::before,
	.fc-hero::after {
		display: none;
	}
	/* 23 Aug (10th pass): found the REAL undefeated rule this time by
	   actually computing specificity against every selector in this file
	   that could touch .fc-hero-row, instead of theorising about
	   WordPress's generated CSS again. It's rule "1b" near the top of
	   this file (section 1b, "Sitewide content max-width", added round
	   2): "main section.wp-block-group[class*=\" fc-\"] > *". .fc-hero-row
	   is a direct child of section.fc-hero, so it's matched by that "> *"
	   and gets max-width/margin-left/margin-right/width/padding from it,
	   margin-left/right WITH !important.
	   Specificity is compared column by column -- (IDs, classes, elements)
	   -- and only drops to the next column when the current one ties.
	   Rule 1b's selector has 2 elements (main, section) and 2 class-level
	   selectors (.wp-block-group, [class*=" fc-"]) = (0, 2, 2). Every
	   previous round's fix, all the way through the 9th pass's
	   ".fc-hero .fc-hero-row", used exactly 2 classes and 0 elements =
	   (0, 2, 0). The class column TIES at 2 either way, so the browser
	   drops to the element column -- where 1b's rule has MORE (2 vs 0)
	   and therefore wins, regardless of !important (both sides had it)
	   and regardless of source order (specificity is decided before
	   source order ever matters). Every round since the 6th has been
	   adding classes to a column that was already tied, which can only
	   ever produce another tie -- it could never cross rule 1b's
	   specificity without also changing the element column.
	   Fixed by adding "[class]" to .fc-hero-row's own selector here --
	   a real attribute selector (every element in this markup has a
	   class attribute, so it always matches; it's here purely to add one
	   more class-level selector), which raises this rule's class column
	   to 3, unambiguously ahead of 1b's 2 -- wins outright at the class
	   column, before the element column is ever consulted. This is a
	   fully computed fix, not a hardened guess: I have the actual
	   selector text of the rule that was winning, and the actual column
	   tallies for both sides.
	   Kept the circles/overflow fix from the 7th pass -- that diagnosis
	   (an overflow:hidden ancestor clipping the breakout) was independent
	   of this and still correct. */
	/* 23 Aug (11th pass): the image itself is genuinely full-bleed now
	   (10th pass fixed that for real), but Hanna's screenshot showed a
	   pink bar above the image and another below it, before the stats
	   section starts. Cause: .fc-hero's padding-top:56px/padding-bottom:
	   48px come from the block's own "style" attribute -- a literal
	   inline `style="padding-top:56px;padding-bottom:48px"` on the
	   <section> tag, not a class. .fc-hero-row breaks out to 100vw
	   horizontally, but that doesn't touch the section's own vertical
	   padding -- the row still sits inside it, so the section's pink
	   background shows through above and below as that padding. Needs
	   !important specifically because it's beating an inline style, not
	   a class -- any external stylesheet rule needs !important to win
	   against an inline style attribute at all, specificity aside. */
	.fc-hero {
		overflow: visible !important;
		padding-top: 0 !important;
		padding-bottom: 0 !important;
	}
	.fc-hero .fc-hero-row[class] {
		display: block !important;
		position: relative !important;
		width: 100vw !important;
		max-width: 100vw !important;
		margin-left: calc(50% - 50vw) !important;
		margin-right: calc(50% - 50vw) !important;
		border-radius: 0 !important;
		overflow: hidden !important;
		min-height: 420px !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
	.fc-hero .fc-hero-row .fc-hero-image {
		position: absolute !important;
		inset: 0 !important;
		z-index: 0 !important;
		width: 100% !important;
		height: 100% !important;
		min-width: 0 !important;
		max-width: none !important;
	}
	.fc-hero .fc-hero-row .fc-hero-image img {
		border-radius: 0 !important;
		width: 100% !important;
		height: 100% !important;
		max-width: none !important;
		aspect-ratio: auto !important;
		object-fit: cover !important;
	}
	.fc-hero .fc-hero-row::after {
		content: "";
		position: absolute;
		inset: 0;
		z-index: 1;
		background: linear-gradient(180deg, rgba(20,4,14,.25) 0%, rgba(20,4,14,.65) 100%);
		pointer-events: none;
	}
	.fc-hero .fc-hero-row .fc-hero-copy {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 2;
		padding: 24px 20px 32px;
	}
}

/* ---- 2. Stats ---- */
/* REBUILT FROM SCRATCH 23 Aug (round 14), markup and CSS both, after
   four straight rounds (7th, 11th, 12th, 13th passes) of finding and
   fixing real, verified bugs that still didn't add up to a block that
   held together. Every one of those bugs traced back to the same root
   cause: this section used to be nested wp:group blocks, and WordPress
   generates its own inline styles and layout-support CSS for every
   wp:group -- which this theme's own CSS then had to fight, over and
   over, with more and more !important. The markup is now plain HTML in
   a single wp:html block (see templates/front-page.html) -- WordPress
   never touches it, so nothing is generated, nothing to fight, and
   every rule below is the only rule in the entire cascade that can
   possibly apply to these classes. No !important anywhere in this
   section any more; none is needed. Same bold dark stat band design as
   before (full-bleed plum background, oversized pink numbers, thin
   dividers) and the exact same three numbers/labels -- only the
   underlying implementation changed. */
.fc-stats {
	background: var(--fc-plum);
	color: #fff;
	padding: 56px 20px;
}
.fc-stats-row {
	max-width: var(--fc-content-width);
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
}
.fc-stat {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 8px 32px;
}
.fc-stat + .fc-stat::before {
	content: "";
	position: absolute;
	left: 0;
	top: 6px;
	bottom: 6px;
	width: 1px;
	background: rgba(255,255,255,.18);
}
.fc-stat-number {
	color: var(--fc-pink);
	font-weight: 800;
	font-size: 3.5rem;
	line-height: 1;
	letter-spacing: -.02em;
	margin: 0 0 8px;
}
.fc-stat-label {
	color: #fff;
	opacity: .85;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	margin: 0;
}
/* Mobile: single column, number+label side by side, centered as a group
   instead of pinned to the left edge (round 15, per Hanna's direction).
   Two measured fixes from round 15:
   (1) "more spacing above/below than looking even" -- real, not a
   guess: .fc-stats's own top/bottom padding (36px) plus .fc-stat's own
   top/bottom padding (16px) gave 52px from the section edge to the
   first/last row, but only 32px (16+16) between rows, since adjacent
   rows' padding is all there was setting that gap. Fixed by setting
   .fc-stats's vertical padding equal to .fc-stat's (16px), so the
   outer gap (16+16=32) now matches the inter-row gap (16+16=32)
   exactly, instead of guessing at new numbers.
   (2) "text not vertically centered with the numbers" -- align-items:
   center was correctly centering each item's box, but the label's
   inherited (larger, non-1) line-height gave it a taller box than the
   number's (which has line-height:1), so the two glyphs' optical
   centers didn't actually land in the same place even though the
   boxes were centered. Fixed by giving the label line-height: 1 too,
   so both glyphs sit in a tight box the same way and align-items:
   center lines them up for real.
   Label font-size raised 12.5px -> 15px per Hanna's direction ("closer
   to the size of the numbers") -- verified, not guessed: rendered this
   exact markup/CSS with the real Inter font in headless Chromium at
   300/320/360/375px widths and measured each label's box height to
   confirm none wrap to a second line (16px was tried first and DID
   wrap "Community members" at 320px -- dropped to 15px specifically
   because it's the largest size that stays one line down to a 300px
   viewport). Two-line wrapping on just one row is what caused
   uneven-looking row heights before (13th pass) -- re-check this the
   same way (don't just eyeball it) if the label copy ever changes. */
@media (max-width: 781px) {
	.fc-stats {
		padding: 16px 20px;
	}
	.fc-stats-row {
		grid-template-columns: 1fr;
	}
	.fc-stat {
		flex-direction: row;
		align-items: center;
		justify-content: center;
		text-align: left;
		gap: 10px;
		padding: 16px 4px;
	}
	.fc-stat + .fc-stat::before {
		left: 4px;
		right: 4px;
		top: 0;
		bottom: auto;
		width: auto;
		height: 1px;
	}
	.fc-stat-number {
		font-size: 1.75rem;
		line-height: 1;
		margin: 0;
	}
	.fc-stat-label {
		font-size: 15px;
		line-height: 1;
		letter-spacing: .02em;
	}
}

/* ---- 3. How Friendchise works ---- */
/* Redesigned 22 Aug (was a plain "1. Title" list with divider lines) --
   numbered circle badges on a connecting vertical line, timeline style.
   22 Aug (6th pass): heading made bigger -- theme.json's sitewide h2
   default (2rem) read as too small for a section heading this
   prominent. Bigger than the sitewide default, still clearly a step
   down from the hero's 3.5rem h1. */
.fc-steps h2 {
	font-size: 2.75rem;
	margin-bottom: 32px;
}
.fc-steps-list {
	--fc-step-badge: 40px;
	--fc-step-pad: 14px;
	flex: 1 1 420px;
	min-width: 280px;
	position: relative;
}
/* 22 Aug (6th pass), rewritten: the line kept running past badge 4 no
   matter how the top/bottom offsets were tuned. Root cause found this
   time -- the OLD approach drew one long line the full height of
   .fc-steps-list and tried to inset it from the container's top/bottom
   edges by "padding + half a badge," which only lands on the last
   badge's actual center if every step is exactly the same height. Step
   4's paragraph is the longest of the four and wraps to more lines than
   the badge is tall, so the container's real bottom edge sits further
   down than the formula assumed, and the line overshot into that extra
   space below the last badge every time.
   New approach: instead of one line spanning the whole list, each step
   (except the last) draws its OWN short segment from its own badge down
   to its own bottom edge -- entirely in that step's local coordinates,
   so it's correct regardless of how tall that step's text is. Since
   adjacent steps have no gap between them, one step's trailing segment
   and the next step's badge always meet exactly at the shared boundary,
   giving one continuous-looking line -- and because the LAST step gets
   no trailing segment at all, the line can never run past it again. */
.fc-step {
	position: relative;
	display: flex;
	gap: 18px;
	align-items: flex-start;
	padding: var(--fc-step-pad) 0;
}
.fc-step:not(:last-child)::after {
	content: "";
	position: absolute;
	left: calc((var(--fc-step-badge) - 2px) / 2);
	top: calc(var(--fc-step-pad) + var(--fc-step-badge));
	bottom: calc(-1 * var(--fc-step-pad));
	width: 2px;
	background: var(--fc-line);
	z-index: 0;
}
.fc-step-num {
	position: relative;
	z-index: 1;
	flex-shrink: 0;
	width: var(--fc-step-badge);
	height: var(--fc-step-badge);
	border-radius: 50%;
	background: var(--fc-pink);
	color: #fff;
	font-weight: 700;
	font-size: 17px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.fc-step-body {
	flex: 1 1 auto;
	padding-top: 6px;
}
.fc-step h4 {
	color: var(--fc-plum);
	margin-bottom: 4px !important;
}
.fc-step p {
	color: #6E5B68;
	margin: 0;
}

/* ---- 4. Carousels (shared chrome) + Testimonials ----
   Testimonials rebuilt as a real carousel 23 Aug (round 16), replacing
   the static grid -- see templates/front-page.html's own comment on
   that section for why the markup is plain HTML rather than wp:group
   blocks. Horizontal scroll-snap does the actual sliding (native touch
   swipe and trackpad support for free, no drag/gesture JS needed) --
   assets/js/interactions.js only drives the prev/next buttons, the dot
   indicators, and the auto-rotate timer.

   25 Aug: generalized .fc-testimonials-carousel/-track into shared
   .fc-carousel/.fc-carousel-track classes so other sections can reuse
   the exact same JS and chrome instead of duplicating it --
   interactions.js now looks up any [data-fc-carousel] root's track via
   the generic .fc-carousel-track class. Two more carousels now share
   this: Reviews (section 6b, "What our community says") and the photo
   gallery (section 7b, "Friendchise meetups around the world!").
   .fc-testimonials-track/.fc-reviews-track/.fc-gallery-track stay as
   add-on classes on the track itself, as scoping hooks for the
   card-size rules that do differ per carousel type (see sections 6b/7b
   -- those rules target e.g. ".fc-reviews-track .fc-review", not the
   track class directly, since the card classes' base look is shared
   with pages that aren't a carousel at all). */
.fc-testimonials {
	background: var(--fc-neutral);
	padding: 56px 20px;
}
.fc-testimonials-inner {
	max-width: var(--fc-content-width);
	margin: 0 auto;
}
.fc-carousel {
	position: relative;
}
.fc-carousel-track {
	display: flex;
	gap: 24px;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	margin: 0 -4px;
	padding: 4px 10px 10px 4px;
}
.fc-carousel-track::-webkit-scrollbar {
	display: none;
}

/* 14 Sep 2026 -- why the carousels do not snap until .is-ready.
   PageSpeed returned NO_LCP on every page that has a carousel and passed on
   every page that does not, with the failure following the carousels rather
   than the page. Lighthouse's own timeline showed why it could not be the
   usual suspects: the hero image finished loading 111ms BEFORE the first
   contentful paint, the page then sat still for 2.3s, and Chrome still
   emitted no LCP candidate at all -- not the image, not any text -- with
   lcpInvalidated false. Nothing was discarded. Recording had already stopped.
   Chrome stops recording LCP on user input or on a scroll, and Lighthouse
   never clicks or types.
   The scroll came from these tracks. A scroll-snap container re-snaps when
   its content changes size, and with scroll-behavior smooth that re-snap is
   an animated scroll rather than an instant offset. Every image inside these
   tracks was unsized until earlier today, so each one arriving resized the
   track and triggered another re-snap -- some of them landing before the
   first paint, which killed LCP recording before anything could be recorded.
   That also explains the roughly one-in-four pass rate: it was a race
   between the first re-snap and the first paint.
   Snapping is therefore held off until the carousel is actually set up,
   which interactions.js does on first interaction. Nothing about the
   behaviour changes for someone using the carousel -- snapping only matters
   once you scroll it, and by then is-ready is on. The initial scrollLeft
   correction in setupCarousel deliberately runs while behaviour is still
   auto, so it lands instantly instead of animating. */
.fc-carousel-track.is-ready {
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
}
/* 26 Aug 2026: Hanna: "the testimonial calendar is also kinda boring
   now. Make it pop more, not just grey boxes overlayed on top of each
   other." White cards on the near-white --fc-neutral section
   background (#F8FCFC) had almost no contrast -- that's the "grey box"
   read. Fixed with the same move that already worked for Stats/
   We-are-Live/Hero on this exact site: solid brand-colour cards
   instead of a pale neutral one, alternating pink/plum so adjacent
   cards read as distinct rather than a repeating strip, each with the
   sitewide bold offset shadow (in the *other* brand colour per card,
   so it stays visible against either background) instead of no shadow
   at all. A small circular quote-mark badge per card (matching the
   why-join icon badges' size/shape language) reinforces "this is a
   quote" now that the text itself is on a solid colour instead of
   quietly implied by a plain white card. */
/* 26 Aug 2026 (round 4): Hanna: "This looks a little awkward seeing
   2,5 cards. Just keep it as 2 and switch in pairs for the
   testimonials." Was 3-up (calc(33.333% - 16px)), which is why a
   sliver of a 4th card always peeked in at this content width -- never
   a clean stopping point. Now a true 2-up card width, and
   interactions.js reads a new optional [data-fc-step] attribute (set
   to "2" only on this carousel's root in front-page.html) so prev/
   next and the dots move by pairs instead of one card at a time --
   the reviews and photo carousels don't set the attribute, so they
   default to step 1 and are completely unaffected. */
.fc-testimonial {
	scroll-snap-align: start;
	box-sizing: border-box;
	flex: 0 0 calc(50% - 12px);
	min-width: 240px;
	border-radius: 18px;
	padding: 28px 26px;
	color: #fff;
}
.fc-testimonial:nth-child(odd) {
	background: var(--fc-pink);
	box-shadow: 6px 6px 0 var(--fc-plum);
}
.fc-testimonial:nth-child(even) {
	background: var(--fc-plum);
	box-shadow: 6px 6px 0 var(--fc-pink);
}
.fc-testimonial::before {
	content: "\201C";
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	margin-bottom: 14px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .2);
	color: #fff;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 22px;
	line-height: 1;
}
.fc-testimonial h4 {
	color: #fff;
	font-size: 18px;
	margin: 0 0 10px;
}
.fc-testimonial p {
	color: rgba(255, 255, 255, .92);
	font-size: 15px;
	margin: 0;
}
/* 10 Sep 2026: Ari -- "In all carousel elements, have the arrows
   centered instead of being at the edges." Previously .fc-carousel-dots
   used flex: 1 1 auto to soak up the row's remaining space, which shoved
   the flex: 0 0 auto prev/next buttons out to the row's own left/right
   edges (see the dots' own comment below). Centering this row and letting
   the dots size to their own content groups prev-dots-next together in
   the middle for every carousel, dots visible or not. */
.fc-carousel-controls {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	margin-top: 24px;
}
.fc-carousel-btn {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: #fff;
	color: var(--fc-plum);
	border: 2px solid var(--fc-plum);
	cursor: pointer;
	padding: 0;
	transition: background .15s ease, color .15s ease, transform .15s ease;
}
.fc-carousel-btn:hover {
	background: var(--fc-pink);
	border-color: var(--fc-pink);
	color: #fff;
}
.fc-carousel-btn:active {
	transform: scale(.92);
}
.fc-carousel-dots {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 10px;
}
.fc-carousel-dot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: #D9CCD5;
	border: none;
	padding: 0;
	cursor: pointer;
	transition: background .15s ease, transform .15s ease;
}
.fc-carousel-dot:hover {
	background: var(--fc-pink);
}
.fc-carousel-dot.is-active {
	background: var(--fc-pink);
	transform: scale(1.25);
}
@media (max-width: 600px) {
	.fc-testimonial {
		flex-basis: 86%;
	}
}

/* ---- 5. We are Live! ----
   Redesigned 23 Aug (round 16) -- Hanna's read on the plain-white
   version: "unbalanced... make it pop more and pizzaz, bold and
   beautiful." Went bold rather than tweak spacing again: full brand-
   pink background (reusing the same pink-section button/text treatment
   already shared by .fc-hero/.fc-page-hero above, rather than a new
   one-off), a real "LIVE" status badge with a pulsing dot instead of
   plain pink-on-pink heading text (which would otherwise vanish now
   that the section itself is pink), the location list turned into
   pill-shaped chips instead of a plain bulleted list, soft decorative
   circles matching the hero's existing background treatment, and a
   bold offset-shadow frame on the photo matching the sitewide button
   shadow language (var(--fc-btn-shadow)) so the image reads as
   deliberately designed rather than a plain rounded rectangle. */
.fc-live {
	position: relative;
	overflow: hidden;
}
.fc-live::before,
.fc-live::after {
	content: "";
	position: absolute;
	border-radius: 50%;
	background: rgba(255, 255, 255, .08);
	pointer-events: none;
	z-index: 0;
}
.fc-live::before {
	width: 380px;
	height: 380px;
	top: -180px;
	left: -120px;
}
.fc-live::after {
	width: 260px;
	height: 260px;
	bottom: -150px;
	right: 8%;
	background: rgba(255, 255, 255, .06);
}
.fc-live-row {
	position: relative;
	z-index: 1;
	align-items: center;
}
.fc-live-heading {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
	font-size: 2.25rem;
}
.fc-live-heading .fc-live-highlight {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: #fff;
	color: var(--fc-pink);
	font-size: .58em;
	font-weight: 800;
	letter-spacing: .02em;
	text-transform: uppercase;
	padding: 6px 16px 6px 12px;
	border-radius: 999px;
}
.fc-live-heading .fc-live-highlight::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #2ECC71;
	animation: fc-live-pulse 1.8s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
	.fc-live-heading .fc-live-highlight::before {
		animation: none;
	}
}
@keyframes fc-live-pulse {
	0%, 100% { opacity: 1; transform: scale(1); }
	50% { opacity: .45; transform: scale(1.35); }
}
.fc-live .wp-block-list {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 20px 0;
	padding: 0;
}
.fc-live .wp-block-list li {
	display: flex;
	align-items: center;
	gap: 8px;
	background: rgba(255, 255, 255, .14);
	border: 1.5px solid rgba(255, 255, 255, .35);
	border-radius: 999px;
	padding: 9px 18px;
	font-weight: 600;
	font-size: 14px;
}
.fc-live .wp-block-list li::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #fff;
	flex-shrink: 0;
}
.fc-live-image img {
	border: 4px solid #fff;
	box-shadow: 12px 12px 0 var(--fc-btn-shadow);
}
@media (max-width: 781px) {
	.fc-live::before,
	.fc-live::after {
		display: none;
	}
	.fc-live-heading {
		font-size: 1.9rem;
	}
	.fc-live-image img {
		box-shadow: 8px 8px 0 var(--fc-btn-shadow);
	}
}

/* ---- 6. Reviews ----
   .fc-review/.fc-review-stars/.fc-review-byline are shared across four
   places: the homepage carousel below, and three static
   .fc-reviews-grid uses (About/Solo Travelers/Collaborate pages, and
   the block-library reference page) -- so the base card look here stays
   generic and untouched by the carousel work. .fc-reviews-grid itself
   is intentionally kept even though the homepage no longer uses it. */
.fc-reviews h2 {
	margin-bottom: 32px;
}
.fc-reviews-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 20px;
}
.fc-review {
	background: var(--fc-neutral);
	border: 1px solid #E7F2F2;
	border-radius: 14px;
	padding: 22px;
}
.fc-review-stars {
	color: var(--fc-pink);
	letter-spacing: 2px;
	margin-bottom: 8px !important;
}
.fc-review-stars .fc-review-score {
	color: #6E5B68;
	letter-spacing: normal;
	font-size: 13px;
	margin-left: 4px;
}
.fc-review p:not(.fc-review-stars):not(.fc-review-byline) {
	color: #333;
	font-size: 15px;
}
.fc-review-byline {
	color: var(--fc-plum);
	font-size: 14px;
	margin-top: 8px !important;
	margin-bottom: 0 !important;
}

/* ---- 6b. Reviews carousel (homepage only) ----
   Turned from a static grid into a real carousel 25 Aug, at Hanna's
   request, reusing the exact same .fc-carousel/.fc-carousel-track
   chrome and interactions.js logic the testimonials carousel already
   uses (see section 4's comment) -- no new JS needed, just the same
   markup shape. Sizing rules below are scoped to
   ".fc-reviews-track .fc-review" specifically, not the bare .fc-review
   class, so the three other .fc-reviews-grid pages (which still use
   .fc-review as a plain card, not a carousel slide) are unaffected.

   Review lengths vary a lot -- from one sentence to a full paragraph --
   which would make cards very uneven heights side by side in a
   horizontal carousel (flexbox stretches every card in the row to
   match the tallest one, so a single long review would drag every
   other visible card up to its height, mostly empty). Clamped the
   quote text to 6 lines with an ellipsis so cards stay a consistent,
   scannable size, scoped the same way; the full review is still real,
   just visually trimmed the same way a printed pull-quote would be. */
.fc-reviews-track .fc-review {
	scroll-snap-align: start;
	flex: 0 0 calc(33.333% - 16px);
	min-width: 260px;
}
.fc-reviews-track .fc-review p:not(.fc-review-stars):not(.fc-review-byline) {
	/* 10 Sep 2026: Ari -- Sarah/Germany's longer review was getting cut
	   off mid-sentence at 6 lines. Raised the clamp to 17 so a review of
	   that length fits in full at every carousel width (14 still clipped
	   the last line at the narrow single-card mobile width); still
	   clamped rather than removed outright, in case a future review runs
	   even longer than that. */
	display: -webkit-box;
	-webkit-line-clamp: 17;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
@media (max-width: 900px) {
	.fc-reviews-track .fc-review {
		flex-basis: calc(50% - 12px);
	}
}
@media (max-width: 600px) {
	.fc-reviews-track .fc-review {
		flex-basis: 86%;
	}
}

/* ---- 7. Gallery ----
   .fc-gallery-grid/.fc-gallery-item stay as the plain static-grid look,
   still used by the block-library reference page's demo -- the
   homepage's own carousel treatment lives in section 7b below, scoped
   so it doesn't touch this base look. */
.fc-gallery h2 {
	margin-bottom: 32px;
}
.fc-gallery-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 12px;
}
.fc-gallery-item {
	margin: 0 !important;
	border-radius: 12px;
	overflow: hidden;
}
.fc-gallery-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	aspect-ratio: 3 / 4;
	display: block;
}

/* ---- 7b. Gallery carousel (homepage only) ----
   Turned from a static grid into a real carousel 25 Aug, reusing the
   same .fc-carousel/.fc-carousel-track chrome and interactions.js
   logic as the testimonials/reviews carousels (see section 4's
   comment) -- no new JS needed here either.

   Hanna asked for the pink background plus "some more creativity...
   as it is showcasing people and happy faces" -- switched the section
   to the same brand-pink treatment as .fc-hero/.fc-live (soft
   decorative circles included, same technique), and gave each photo a
   playful alternating tilt like a scattered set of printed photos,
   straightening out and scaling up slightly on hover for a bit of
   life. The bold offset shadow frame reuses var(--fc-btn-shadow), the
   same language already used for the We-are-Live photo and the
   sitewide buttons, so it reads as deliberate rather than a one-off.
   .fc-gallery-item keeps its original 3:4 aspect ratio and object-fit
   (section 7 above) -- only sizing/tilt/shadow are added here, scoped
   to ".fc-gallery-track .fc-gallery-item" so the block-library grid
   demo (bare .fc-gallery-item, no .fc-gallery-track ancestor) is
   unaffected. */
.fc-gallery {
	position: relative;
	overflow: hidden;
}
.fc-gallery::before,
.fc-gallery::after {
	content: "";
	position: absolute;
	border-radius: 50%;
	background: rgba(255, 255, 255, .08);
	pointer-events: none;
	z-index: 0;
}
.fc-gallery::before {
	width: 320px;
	height: 320px;
	top: -140px;
	right: -80px;
}
.fc-gallery::after {
	width: 220px;
	height: 220px;
	bottom: -120px;
	left: 6%;
	background: rgba(255, 255, 255, .06);
}
.fc-gallery h2,
.fc-gallery-carousel,
.fc-gallery .fc-carousel-controls {
	position: relative;
	z-index: 1;
}
.fc-gallery-track {
	/* Extra top/side padding beyond .fc-carousel-track's own 4px so the
	   tilted, hover-scaled cards have room to rotate/grow without
	   clipping against the track's own overflow:hidden edge. */
	padding: 20px 8px 4px;
}
.fc-gallery-track .fc-gallery-item {
	scroll-snap-align: start;
	flex: 0 0 200px;
	border: 4px solid #fff;
	box-shadow: 8px 8px 0 var(--fc-btn-shadow);
	transition: transform .2s ease;
}
.fc-gallery-track .fc-gallery-item:nth-child(odd) {
	transform: rotate(-2.5deg);
}
.fc-gallery-track .fc-gallery-item:nth-child(even) {
	transform: rotate(2.5deg);
}
.fc-gallery-track .fc-gallery-item:hover {
	transform: rotate(0) scale(1.05);
}
/* The default .fc-carousel-dot color (light mauve, pink when active) and
   .fc-carousel-btn hover state (pink background) both assume a light
   section background -- against .fc-gallery's own pink, they'd lose
   contrast or vanish outright. Scoped overrides, pink-section-only. */
.fc-gallery .fc-carousel-dots .fc-carousel-dot {
	background: rgba(255, 255, 255, .45);
}
.fc-gallery .fc-carousel-dots .fc-carousel-dot:hover {
	background: rgba(255, 255, 255, .8);
}
.fc-gallery .fc-carousel-dots .fc-carousel-dot.is-active {
	background: #fff;
}
.fc-gallery .fc-carousel-btn:hover {
	background: #fff;
	border-color: #fff;
	color: var(--fc-plum);
}
@media (max-width: 600px) {
	.fc-gallery-track .fc-gallery-item {
		flex: 0 0 150px;
	}
}
@media (prefers-reduced-motion: reduce) {
	.fc-gallery-track .fc-gallery-item {
		transition: none;
	}
}

/* ---- 8. Why join Friendchise ----
   25 Aug: redesigned from a plain dotted list into icon-badge cards, at
   Hanna's request for a creative treatment on the 4 benefit cards --
   no carousel this time (the gallery/testimonials/reviews carousels
   already cover that pattern on this page, and four short benefit
   lines don't need paging through anyway).

   Deliberately NOT numbered circles: "How Friendchise works" (section
   3 above) already owns that exact visual language for its sequential
   steps, and these four items aren't a sequence -- reusing numbered
   badges here would read as repetitive and imply an ordering that
   isn't real. Used a distinct icon per card instead (people, compass,
   heart, calendar-check -- one per benefit), same "decorative visuals
   belong in CSS, not markup" approach this section's old dot marker
   already used: each icon is a plain inline-SVG data URI on
   .fc-why-item::before, no icon font or external request, matching the
   reasoning in this section's original comment for why hand-copied
   icon fonts were avoided from the start. No markup changes needed --
   .fc-why-item is used as-is in templates/front-page.html §8 and the
   block-library reference page, so both get the new look automatically
   (unlike the carousel sections, there's no structural divergence to
   scope around here). Badge color alternates pink/plum per card for a
   bit of the brand's two-tone rhythm. Cards get a real white surface,
   border and lift-on-hover instead of sitting flat against the page,
   which needed the section background to go from plain white to a
   light neutral so the cards read as cards. */
.fc-why {
	background: var(--fc-neutral);
}
.fc-why h2 {
	margin-bottom: 32px;
}
.fc-why-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 24px;
	margin-bottom: 32px;
}
.fc-why-item {
	position: relative;
	background: #fff;
	border: 1px solid var(--fc-line);
	border-radius: 16px;
	padding: 36px 22px 26px;
	text-align: center;
	transition: transform .18s ease, box-shadow .18s ease;
}
.fc-why-item:hover {
	transform: translateY(-6px);
	box-shadow: 6px 8px 0 var(--fc-btn-shadow);
}
.fc-why-item::before {
	content: "";
	display: block;
	width: 56px;
	height: 56px;
	margin: 0 auto 18px;
	border-radius: 50%;
	background-color: var(--fc-pink);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 28px 28px;
}
/* Icon set replaced 26 Aug 2026 -- Hanna: "Those other content card icons
   also look hand-drawn, get proper iconography inside the circles." The
   previous set was already stroke-based inline-SVG (no font/external
   request either), but used custom freehand paths for the people and
   heart glyphs. Swapped for the standard Feather icon set's own paths
   (users / compass / heart / calendar+check) -- a well-established,
   symmetric icon language instead of hand-tuned curves -- and bumped the
   icon-to-badge ratio (26px -> 28px) so they fill the circle with more
   confidence. Compass was already Feather's own path (kept as-is);
   calendar keeps this section's existing check-overlay idea, redrawn on
   Feather's actual calendar proportions instead of custom ones. */
.fc-why-item:nth-child(1)::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M23 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E");
}
.fc-why-item:nth-child(2)::before {
	background-color: var(--fc-plum);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpolygon points='15.24 8.76 13.4 13.4 8.76 15.24 10.6 10.6 15.24 8.76'/%3E%3C/svg%3E");
}
.fc-why-item:nth-child(3)::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'/%3E%3C/svg%3E");
}
.fc-why-item:nth-child(4)::before {
	background-color: var(--fc-plum);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4.5' width='18' height='16' rx='2.2'/%3E%3Cpath d='M16 2.5v4M8 2.5v4M3 9.5h18'/%3E%3Cpath d='M8.5 14l2.2 2.2L15.5 12'/%3E%3C/svg%3E");
}
.fc-why-item h4 {
	color: var(--fc-plum);
	margin-bottom: 4px !important;
}
.fc-why-item p {
	color: #6E5B68;
	margin: 0;
}
@media (prefers-reduced-motion: reduce) {
	.fc-why-item {
		transition: none;
	}
}

/* ---- 9. Partners ----
   25 Aug: Hanna flagged the logo row as not showing the logos off well
   -- the cause was the grayscale(1) + opacity:.7 dimming treatment,
   normally a fine "trusted by" pattern, but it fought against these
   four specific logos: Loi Loi's dark circular badge and Linkfluence
   Partners' small wordmark were already low-contrast and became nearly
   illegible at 70% opacity, and Samoa's wide banner logo has its own
   baked-in light background, which grayscale turned into a flat gray
   rectangle that swallowed the text inside it.

   Fixed by dropping the dimming entirely (full color, always) and
   giving each logo its own white card instead -- normalizes the very
   different source aspect ratios (a 300x59 wordmark, a 300x300 badge,
   a 150x150 square, and a 1100x300 banner) into a consistent size and
   guarantees a clean white background behind every logo regardless of
   what's baked into the source file, the same fix that solved Samoa's
   gray-blob problem. Hover swaps the old "fade to color" cue for the
   sitewide lift + bold offset shadow (var(--fc-btn-shadow)) already
   used on the Why-join cards and the We-are-Live/gallery photos, so it
   reads as the same "hoverable card" language as the rest of the page. */
.fc-partners h2 {
	margin-bottom: 28px;
}
/* 26 Aug 2026 (round 3): Hanna: "Logos look better. Could the bounding
   box around them be removed? make it look like a gallery-grid 4
   columns, 1 row?" Dropped the card chrome (white bg, border,
   padding, hover shadow) entirely and switched to a plain CSS Grid --
   4 equal columns on desktop, exactly as asked, degrading to 2 columns
   on small screens rather than forcing 4 cramped ones. Removed the
   block's own "layout":{"type":"flex"} attribute in
   templates/front-page.html so WordPress doesn't generate a competing
   display:flex rule -- .fc-partners-row is a plain group now, fully
   controlled by this class, same approach as the footer row. The
   even-sizing fix from round 2 (76px height cap, cropped source files)
   stays untouched -- that's about the logos themselves, independent of
   whatever's drawn around them. */
.fc-partners-row {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 40px;
	align-items: center;
	justify-items: center;
}
.fc-partner-logo {
	margin: 0 !important;
	width: 100%;
	transition: transform .18s ease, opacity .18s ease;
}
.fc-partner-logo:hover {
	transform: translateY(-4px);
	opacity: .8;
}
.fc-partner-logo a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
}
.fc-partner-logo img {
	max-width: 100%;
	max-height: 76px;
	width: auto;
	height: auto;
	object-fit: contain;
	display: block;
}
/* 26 Aug 2026 (round 4): Hanna: "Add a text box below them so we can
   write who/what the instances are." One editable caption under the
   whole grid (templates/front-page.html), not per-logo -- keeps the
   grid itself untouched and gives Hanna a single place to describe
   the collaborations in her own words. Left the actual copy as an
   obvious placeholder rather than writing real partner descriptions
   on her behalf. */
.fc-partners-caption {
	max-width: 640px;
	margin: 28px auto 0;
	text-align: center;
	font-size: 14px;
	font-style: italic;
	color: #8A7484;
}
@media (max-width: 640px) {
	.fc-partners-row {
		grid-template-columns: repeat(2, 1fr);
		gap: 32px;
	}
}
@media (prefers-reduced-motion: reduce) {
	.fc-partner-logo {
		transition: none;
	}
}

/* ---- 10. Founder ----
   25 Aug: "Create a striking Meet the founder block" -- was plain text plus
   a small circle photo, easy to scroll past. Turned .fc-founder-row into a
   spotlight card: white panel on a soft neutral section background, with
   the same bold offset shadow used sitewide on buttons/photos so it reads
   as a signature Friendchise treatment rather than a one-off. Kicker
   becomes a pink pill badge, scoped to .fc-founder .fc-kicker only so the
   generic .fc-kicker used elsewhere (steps, live block) is untouched. Added
   a large translucent pink quotation mark behind the first line of the
   quote via :nth-of-type(2) -- the kicker <p> is nth-of-type(1) and the
   first quote paragraph is nth-of-type(2), so this lands precisely with no
   markup change. The photo gets the same white-border + offset-shadow
   frame as the We-are-Live photo, plus a soft decorative pink circle
   peeking out behind it, and gains its own flex-basis for the first time
   (it previously had none). The LinkedIn icon is restyled as a proper
   circular button, reusing the footer's proven hover pattern (light pink
   at rest, solid pink + white icon + lift on hover) rather than inventing
   a new one. Byline turned pink for brand accent. CSS-only, no markup
   changes -- grep -rln "fc-founder" templates/ confirmed these classes are
   unique to front-page.html, so there's no cross-page scoping risk. */
/* 26 Aug 2026: Hanna: "The founder box is a bit off a heavy mess. It's
   not congruent with rest of the brand vision." Compared against how
   every other card on the page actually behaves (.fc-why-item,
   .fc-partner-logo): white surface, a thin var(--fc-line) border, and
   the bold offset shadow reserved for HOVER only, never sitting on the
   card at rest. Founder broke that pattern in three ways at once -- a
   permanent 10px offset shadow on the outer card AND a second identical
   one on the photo, a translucent pink circle floating behind the
   photo, and a 4.5rem decorative quote mark -- which is what read as
   "heavy" and out of step with the calmer cards around it. Removed all
   three; the card is now a plain bordered surface like its neighbors,
   and the photo keeps a soft, standard blur shadow (the same value
   already used sitewide for dropdown/submenu depth, see section 2)
   instead of a second hard offset. Kicker also switched from a
   founder-only pink pill back to the plain uppercase .fc-kicker style
   every other section already uses (steps, live block) -- the pill was
   its own small inconsistency on top of the rest. */
.fc-founder {
	background: var(--fc-neutral);
}
/* 26 Aug 2026 (round 4): Hanna: "the visual card is getting a bit
   repetitive now. Try some different types of borders to make it more
   dynamic." Fair -- by this point the flat plum offset-shadow was on
   the founder card AND the testimonial cards AND every button, so
   founder no longer read as distinct. Swapped it for a genuinely
   different construction: a gradient ring border (pink -> plum,
   diagonal) via the standard double-background/background-clip trick
   -- border-box paints the gradient, padding-box paints the white
   card on top of it, so only a 4px ring of gradient shows -- plus a
   soft ambient shadow for lift instead of a hard offset one. Uses
   both brand colours in one motif rather than either flat, which
   nothing else on the page currently does. */
.fc-founder-row {
	position: relative;
	border-radius: 24px;
	padding: 48px 44px;
	border: 4px solid transparent;
	background-color: #fff;
	background-image: linear-gradient(#fff, #fff), linear-gradient(135deg, var(--fc-pink), var(--fc-plum));
	background-origin: border-box;
	background-clip: padding-box, border-box;
	box-shadow: 0 24px 48px rgba(78, 26, 61, .16);
	z-index: 1;
}
/* 26 Aug 2026 (round 3): Hanna: "Founder box has a lots of typography
   going on and look messy. Also the bounding box looks boring. Put
   some creativity that is not just a grey box. Playfulness, it's a
   person!" Two separate fixes:
   1. Typography hierarchy instead of three uniform quote paragraphs --
      the first line is now a real pull-quote (bigger, bolder, plum),
      the other two drop to smaller muted text, so it reads as
      headline + supporting detail instead of one dense block.
   2. The plain bordered rectangle becomes a playful "stacked card" --
      first tried a translucent pink ::before peeking out behind the
      card, but at this card's actual size a 16px offset read as an
      antialiasing glitch, not a deliberate shape, and it silently
      broke .fc-kicker's pink-on-white contrast wherever the peek
      covered it. Replaced with the same hard, no-blur offset shadow
      already used sitewide for buttons and (as of this round) the
      testimonial cards -- one property, no stacking-context tricks,
      unmistakably a "card stacked on a card" at a glance. The photo
      itself becomes a tilted polaroid -- square, thick white frame,
      deeper shadow, a small rotated heart sticker at one corner
      (reusing the exact heart path from the why-join icons, for
      visual continuity rather than inventing a new shape) -- instead
      of the plain centered circle avatar, so it reads as a real
      candid photo instead of a corporate headshot. */
.fc-founder-copy p {
	margin-bottom: 14px;
}
/* 26 Aug 2026 (round 4): Hanna pasted the full three-paragraph quote
   back and asked to "keep the body text all in similar font/
   typography" -- the previous round's pull-quote-vs-muted-detail
   split was a typography choice she didn't want. One consistent style
   for all three lines now. */
.fc-founder-copy p:nth-of-type(2),
.fc-founder-copy p:nth-of-type(3),
.fc-founder-copy p:nth-of-type(4) {
	font-size: 1.05rem;
	color: var(--fc-plum);
	line-height: 1.7;
}
.fc-founder-copy strong {
	color: var(--fc-pink);
}
.fc-founder-image {
	flex: 0 1 320px;
	min-width: 220px;
	position: relative;
	transform: rotate(3deg);
}
.fc-founder-image img {
	box-sizing: border-box;
	border-radius: 16px;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border: 10px solid #fff;
	border-bottom-width: 30px;
	box-shadow: 0 14px 28px rgba(78, 26, 61, .22);
}
.fc-founder-image::after {
	content: "";
	position: absolute;
	bottom: 4px;
	left: -18px;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: var(--fc-plum);
	border: 3px solid #fff;
	transform: rotate(-10deg);
	box-shadow: 0 4px 10px rgba(0, 0, 0, .18);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffffff' d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 22px 22px;
}
.fc-founder .wp-block-social-links {
	margin-top: 8px;
}
.fc-founder .wp-block-social-links .wp-social-link {
	background: rgba(252, 89, 157, .12);
	transition: background .2s ease, transform .2s ease;
}
.fc-founder .wp-block-social-links .wp-social-link a svg {
	fill: var(--fc-plum);
	transition: fill .2s ease;
}
.fc-founder .wp-block-social-links .wp-social-link:hover {
	background: var(--fc-pink);
	transform: translateY(-3px);
}
.fc-founder .wp-block-social-links .wp-social-link:hover a svg {
	fill: #fff;
}
@media (prefers-reduced-motion: reduce) {
	.fc-founder .wp-block-social-links .wp-social-link {
		transition: none;
	}
	.fc-founder .wp-block-social-links .wp-social-link:hover {
		transform: none;
	}
}
@media (max-width: 781px) {
	.fc-founder-row {
		padding: 32px 24px;
		border-width: 3px;
		box-shadow: 0 16px 32px rgba(78, 26, 61, .16);
	}
	/* The shared stacking rule (section 5) sets flex:0 0 auto on
	   .fc-founder-copy for the mobile column layout. With an auto flex-basis
	   and flex-shrink:0, a flex item's used width for text content resolves
	   to its max-content size rather than the container width -- so the
	   founder quote (much longer than the live-block copy this rule was
	   written for) rendered as one unbroken line and overflowed off the
	   right edge of the screen instead of wrapping. Verified in a headless
	   browser: a bare-bones repro of that exact rule gave a 390px-viewport
	   flex item a computed width over 1000px. Forcing width:100% here
	   (founder-scoped, so fc-live-copy/fc-split-copy are untouched) gives
	   the item a definite main size again so text wraps normally. */
	.fc-founder-copy {
		width: 100%;
	}
	/* The polaroid tilt reads fine sitting next to text on desktop, but
	   once the image stacks above the text (full width) a rotated square
	   photo eats extra horizontal space it doesn't have -- straightened
	   out below the row's own breakpoint. */
	.fc-founder-image {
		transform: none;
		max-width: 280px;
		margin: 0 auto;
	}
}

/* ---- 11. Page hero (About / Solo Travelers / Collaborate / homepage) ----
   Added 21 Aug for the marketing pages -- a pink, full-width variant of the
   homepage hero, same fc-hero-row/-copy/-image children so it inherits the
   same responsive split. Confirmed real from Hanna's live screenshots.
   22 Aug: .fc-hero (the homepage hero) joined this shared block once it
   switched to the same pink treatment -- one definition for both instead
   of two copies drifting apart. 25 Aug: .fc-gallery joined too, once
   the photo carousel switched to the same pink background. */
.fc-page-hero,
.fc-hero,
.fc-live,
.fc-gallery {
	color: #fff;
}
.fc-page-hero h1,
.fc-page-hero .fc-kicker,
.fc-hero h1 {
	color: #fff;
}
.fc-page-hero p,
.fc-hero p {
	opacity: .92;
}
/* 22 Aug: Hanna's read on the homepage hero was "not as bold and strong
   as the live site" -- theme.json never set an explicit h1 size, so it
   was falling back to the browser default (~2em), nowhere near live's
   scale. Sized and weighted explicitly here rather than guessed at
   sitewide, scoped to the homepage hero specifically since that's the
   one flagged; the marketing-page heroes can get the same treatment
   later if Hanna wants it once we reach them in the block-by-block pass.

   22 Aug, later same day: that font-size bump introduced a NEW bug --
   the browser's default heading margin is em-based (roughly 0.67em top
   and bottom), so it scales with font-size. At the old ~2em fallback
   size that margin was small and unnoticeable; at 3.5rem it became
   ~38px top AND bottom, which read as "spacing is broken" (too much
   air around the headline, uneven against the paragraph below it).
   theme.json's h1/h2/h3 element styles now set an explicit margin too
   (see theme.json), which fixes this sitewide, but pinning it here too
   with a normal (higher-specificity) selector removes any doubt for
   the one heading actually under scrutiny right now. */
.fc-hero h1 {
	font-size: 3.5rem;
	line-height: 1.08;
	font-weight: 800;
	letter-spacing: -.01em;
	margin: 0 0 20px;
}
@media (max-width: 781px) {
	.fc-hero h1 {
		font-size: 2.5rem;
	}
}
/* 22 Aug: the white outline button read as blending into the pink
   background -- a 2px border reads thin against a fully saturated color
   at this size. Thickened and bolded specifically on pink sections
   (desktop button styles elsewhere are unaffected). */
.fc-page-hero .wp-block-buttons .wp-block-button.is-style-outline .wp-block-button__link,
.fc-hero .wp-block-buttons .wp-block-button.is-style-outline .wp-block-button__link,
.fc-live .wp-block-buttons .wp-block-button.is-style-outline .wp-block-button__link {
	border-width: 2.5px;
	font-weight: 700;
}

/* ---- 12. Checklist items (pink check, "Why solo travelers love
   Friendchise") ---- */
.fc-check-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 20px 28px;
}
.fc-check-item {
	padding-left: 30px;
	position: relative;
}
.fc-check-item::before {
	content: "";
	position: absolute;
	left: 0;
	top: 2px;
	width: 20px;
	height: 20px;
	border-radius: 5px;
	background-color: var(--fc-pink);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect x='1' y='1' width='18' height='18' rx='4' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M5.5 10.5l3 3 6-6.5' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect x='1' y='1' width='18' height='18' rx='4' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M5.5 10.5l3 3 6-6.5' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.fc-check-item h4 {
	color: var(--fc-plum);
	margin-bottom: 2px !important;
}
.fc-check-item p {
	color: #6E5B68;
	margin: 0;
}

/* ---- 13. Icon list items (Collaborate: "Why collaborate?", "Who should
   collaborate with us?") -- circular pink badge, generic outline glyph.
   Best-effort visual match, not the live site's exact UiCore icon set. ---- */
.fc-icon-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 28px;
}
.fc-icon-item {
	text-align: left;
}
.fc-icon-badge {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: #FDEEF4;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 14px;
}
.fc-icon-badge svg {
	width: 24px;
	height: 24px;
	stroke: var(--fc-pink);
}
.fc-icon-item h4 {
	color: var(--fc-plum);
	margin-bottom: 4px !important;
}
.fc-icon-item p {
	color: #6E5B68;
	margin: 0;
}

/* ---- 14. Two-column highlight band (Mission/Vision; "Real experiences,
   real people") -- pink section, two stacked-on-mobile columns. ---- */
.fc-duo-row {
	gap: 40px;
}
.fc-duo-item {
	flex: 1 1 320px;
	min-width: 260px;
}
.fc-duo-item h3 {
	color: #fff;
	margin-bottom: 8px !important;
}
.fc-duo-item p {
	color: #fff;
	opacity: .92;
	margin: 0;
}

/* ---- 15. Split image+text (reusable) -- same pattern as fc-founder-row,
   generic name so About's "Join the Friendchise community" section (and
   any future one) can reuse it without borrowing founder-specific naming. */
.fc-split-copy {
	flex: 1 1 420px;
	min-width: 280px;
}
.fc-split-image {
	flex: 0 1 420px;
	min-width: 240px;
}
.fc-split-image img {
	border-radius: 20px;
	width: 100%;
	height: auto;
}

/* ---- 16. Plain page header (Contact) -- no colour band, just a title and
   standfirst, matching the live site's Contact page (the only marketing
   page without a pink hero). ---- */
.fc-page-header {
	padding-bottom: 8px;
}
.fc-page-header p {
	color: #6E5B68;
	font-size: 1.0625rem;
	max-width: 60ch;
}

/* ---- Responsive ----
   .fc-hero-row/.fc-hero-image are deliberately left out of this generic
   "stack on mobile" rule (22 Aug, 4th pass) -- the homepage hero has its
   own complete mobile treatment (absolute-positioned full-bleed image
   with a text overlay, see the dedicated mobile block above) that
   doesn't stack at all, so flex-direction/flex-basis here would be dead
   weight at best and confusing to a future edit at worst.

   23 Aug (round 16): found and fixed the same bug round 12 found in the
   stats section, just on the copy side of these rows instead of the
   image side. .fc-live-copy/.fc-founder-copy/.fc-split-copy all set
   "flex: 1 1 420px" for the desktop ROW layout, where flex-basis governs
   width. Once flex-direction switches to column here, that same 420px
   governs HEIGHT instead -- and since these copy columns often render
   shorter than 420px of actual content, flex-basis was forcing extra
   empty space at the bottom of the text column before the image
   started, exactly the "gap that shouldn't be there" bug round 12
   diagnosed for .fc-stat. The image side of this exact rule already had
   the fix (flex-basis: auto below) -- the copy side never got the same
   treatment, so it's been sitting here as a latent bug since whichever
   round first added mobile stacking; only became obvious once the
   "We are Live!" redesign gave the copy column enough real content
   (badge, pill list, bigger button) that a headless-browser check of
   the actual rendered gap flagged it outright, rather than a small
   unnoticed few pixels. */
@media (max-width: 781px) {
	.fc-steps-row,
	.fc-live-row,
	.fc-founder-row,
	.fc-page-hero-row,
	.fc-split-row {
		flex-direction: column;
	}
	.fc-live-copy,
	.fc-founder-copy,
	.fc-split-copy {
		flex: 0 0 auto;
	}
	.fc-steps-image,
	.fc-live-image,
	.fc-founder-image,
	.fc-split-image {
		flex-basis: auto;
		width: 100%;
	}
}

/* ==========================================================================
   6. Forms (WPForms Lite overrides)

   Added 21 Aug 2026 for the Contact and Collaborate pages, both of which use
   a real WPForms Lite form (still an active plugin -- only Elementor/UiCore
   are being deactivated). This themes WPForms' own default markup/classes
   so the plugin's form matches the rest of the site; it does not replace or
   duplicate the plugin's rendering. See templates/page-contact.html and
   templates/page-collaborate-with-friendchise.html for the flagged spot
   where the real form ID (from wp-admin -> WPForms -> All Forms) still
   needs to go in.
   ========================================================================== */
.fc-form-card {
	background: #fff;
	border: 1px solid var(--fc-line);
	border-radius: 16px;
	padding: 28px;
}
.wpforms-container .wpforms-field-label {
	color: var(--fc-plum);
	font-weight: 600;
	font-size: 15px;
}
.wpforms-container input[type=text],
.wpforms-container input[type=email],
.wpforms-container input[type=tel],
.wpforms-container textarea,
.wpforms-container select {
	border: 1px solid var(--fc-line) !important;
	border-radius: 8px !important;
	padding: 10px 14px !important;
	font-size: 15px !important;
}
.wpforms-container input[type=text]:focus,
.wpforms-container input[type=email]:focus,
.wpforms-container input[type=tel]:focus,
.wpforms-container textarea:focus {
	border-color: var(--fc-pink) !important;
	outline: none;
}
.wpforms-container .wpforms-field-description {
	color: #6E5B68;
	font-size: 13px;
}
.wpforms-container button[type=submit] {
	background: var(--fc-pink) !important;
	border-radius: 999px !important;
	padding: 10px 26px !important;
	font-weight: 600 !important;
	font-size: 15px !important;
	border: 0 !important;
}
.wpforms-container button[type=submit]:hover {
	background: var(--fc-pink-dark) !important;
}

/* ==========================================================================
   7. Blog: listing cards, single article, pagination

   Written 21 Aug 2026. Covers templates/home.html, index.html, archive.html
   and single.html. The card markup is identical across the three listing
   templates, so everything here is written against the .fc-post-card classes
   rather than against any one template's wrapper.

   Nothing in this section touches the article-elements classes in section 4
   (.fc-summary-box, .fc-toc, details.fc-faq). Those styles are the ported
   plugin's and the 26 existing posts depend on them unchanged.
   ========================================================================== */

/* ---- Listing intro (blog index heading, archive title) ---- */
.fc-blog-intro {
	margin-bottom: 48px;
}
.fc-blog-intro h1 {
	margin-bottom: 10px;
}
.fc-blog-intro p {
	font-size: 1.0625rem;
	margin: 0;
}

/* ---- Post card grid ---- */
.fc-post-grid {
	gap: 28px;
}

.fc-post-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: #fff;
	border: 1px solid var(--fc-line);
	border-radius: 16px;
	overflow: hidden;
	transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.fc-post-card:hover {
	border-color: #F5A6C8;
	box-shadow: 0 10px 28px rgba(78, 26, 61, .09);
	transform: translateY(-2px);
}

.fc-post-card-image {
	margin: 0 !important;
}
.fc-post-card-image img {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
}

/* A post with no featured image still needs the card to look deliberate
   rather than truncated, so the body carries the full padding either way. */
.fc-post-card-body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	gap: 0;
	padding: 22px;
}

.fc-post-card-date {
	font-size: 13px;
	font-weight: 500;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: #6E5B68;
	margin: 0 0 8px !important;
}

.fc-post-card-title {
	font-size: 1.1875rem;
	line-height: 1.35;
	font-weight: 600;
	margin: 0 0 10px !important;
}
.fc-post-card-title a {
	color: var(--fc-plum);
	text-decoration: none;
}
.fc-post-card-title a:hover {
	color: var(--fc-pink);
}

.fc-post-card-excerpt {
	font-size: 15px;
	line-height: 1.55;
	color: #6E5B68;
	margin: 0 !important;
}
.fc-post-card-excerpt .wp-block-post-excerpt__more-text {
	margin-top: 12px;
}

/* ---- Pagination ---- */
.fc-pagination {
	margin-top: 48px;
	gap: 6px;
	align-items: center;
}
.fc-pagination .page-numbers,
.fc-pagination .wp-block-query-pagination-previous,
.fc-pagination .wp-block-query-pagination-next {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	padding: 8px 14px;
	border-radius: 999px;
	border: 1px solid var(--fc-line);
	color: var(--fc-plum);
	font-size: 15px;
	font-weight: 500;
	text-decoration: none;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.fc-pagination .page-numbers:hover,
.fc-pagination .wp-block-query-pagination-previous:hover,
.fc-pagination .wp-block-query-pagination-next:hover {
	border-color: var(--fc-pink);
	color: var(--fc-pink);
}
.fc-pagination .page-numbers.current {
	background: var(--fc-pink);
	border-color: var(--fc-pink);
	color: #fff;
}
.fc-pagination .page-numbers.dots {
	border-color: transparent;
}

/* ---- Single article head ---- */
/* 22 Aug 2026: reordered below the title and re-styled to match the live
   site (Hanna's screenshot comparison) -- was a category badge + date
   sitting above a smaller title. See templates/single.html for the markup
   history and the open question about title color. */
.fc-article-title {
	font-size: 2.75rem;
	line-height: 1.15;
	font-weight: 700;
	color: var(--fc-plum);
	margin-bottom: 16px !important;
}

.fc-article-meta {
	gap: 8px; /* 7 Sep 2026, later same day: Ari -- "Put this all in one row." Four
	             items (Created/Updated/Reading time/Written by) at the original
	             13px + .04em + 10px gaps/margins totalled wider than the 720px
	             reading column, wrapping "Written by ..." onto its own line.
	             Trimmed gap/margin/letter-spacing and font-size slightly below
	             (see the dot separator and the date/author/shortcode rule
	             further down) so all four fit on one row at normal desktop
	             widths; flex-wrap stays put as a safety net for narrow screens. */
	flex-wrap: wrap;
	align-items: center;
	margin-bottom: 24px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .025em;
	text-transform: uppercase;
	color: #6E5B68;
}
.fc-article-meta > * {
	margin: 0 !important;
}
/* Dot separator between each meta item, drawn in CSS so the markup stays
   free of decorative characters. */
.fc-article-meta > * + *::before {
	content: "";
	display: inline-block;
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: var(--fc-line);
	vertical-align: middle;
	margin-right: 6px;
}
.fc-article-date,
.fc-article-author,
.fc-article-meta .wp-block-shortcode {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .025em;
	text-transform: uppercase;
	color: #6E5B68;
}
/* 7 Sep 2026 fix: Ari -- "Missing a 'Created (date)' wording." wp:post-date
   has no label of its own (unlike the "Updated ..." shortcode paragraph),
   so it's added here the same way "Updated " already is -- in CSS, since
   the block itself is dynamic markup we don't hand-author. */
.fc-article-date::before {
	content: "Created ";
}
/* "BY " prefix on the byline, matching live -- kept in CSS rather than the
   markup for the same reason as the dot separators above.

   7 Sep 2026 fix: .fc-article-author matches BOTH this selector AND the
   dot-separator selector above (.fc-article-meta > * + *::before) for the
   same single ::before box, and the two have equal specificity, so CSS
   resolves it property-by-property rather than rule-by-rule: "content"
   here won -- being later in the file -- and became "By ", but width/
   height/background/border-radius/margin-right were never re-declared here,
   so they kept leaking in from the dot rule. The result was "By " forced
   into a 3px x 3px circular box, overflowing it and rendering on its own
   broken line instead of inline before the name (visible live on any
   single post, worse once the new fc_updated_date meta item made the row
   more crowded -- Ari: "Layout style looks... not cohesive with rest of
   website"). Explicit resets below undo the leaked box sizing so "By "
   renders as normal inline text again. */
.fc-article-author {
	display: inline-flex;
	align-items: center;
}
.fc-article-author::before {
	/* 7 Sep 2026 fix, take two: Ari -- "missing a dividing dot-element
	   between the time and writer." A single ::before can only hold one
	   generated box, so it can't draw both the small circular separator
	   dot (matching every other item in this row) AND the "Written by "
	   text label in front of the block's own dynamic name text. Solved
	   with flex order instead: the dot stays a normal ::before (the same
	   circle every other meta item gets, no longer reset away), "Written
	   by" moves to ::after, and both are pulled ahead of the name (the
	   block's own text content, an unstyled anonymous flex item that
	   can't take an explicit order and so keeps the default of 0) by
	   giving the dot order -2 and the label order -1. */
	content: "";
	display: inline-block;
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: var(--fc-line);
	margin-right: 10px;
	order: -2;
}
.fc-article-author::after {
	content: "Written by";
	order: -1;
	margin-right: 4px;
}

.fc-article-image {
	margin-top: 0;
	margin-bottom: 8px;
}
.fc-article-image img {
	width: 100%;
	height: auto;
	border-radius: 18px;
}

/* ---- Article hero: site-width image, title overlay, meta below ----
   7 Sep 2026: Ari -- "the article hero section is really big, have the
   image in the background and the text on the foreground and meta data
   below the image." Replaces the previous stacked layout (title, then
   the meta row, then a contained 720px-wide featured image) with a
   section where the post-featured-image block (.fc-article-hero-bg) is
   absolutely positioned to fill it edge to edge, the title sits on top
   against a dark gradient for contrast, and the meta row moves to its
   own row below the image -- still inside the original .fc-article-head
   720px reading column, which is now meta-only (see
   templates/single.html). .fc-article-image/-title/-meta above are left
   in place for their existing color/type rules (the title reuses
   .fc-article-title, just recolored below) and in case any other
   template still references them.

   7 Sep 2026, same day, follow-up: Ari -- "No need for the 'full width'
   bordering for the article. Just site width will do." The hero was
   originally alignfull (edge-to-edge, spanning the full browser width);
   dropped the align:full attribute in templates/single.html and capped
   this section at the theme's own wideSize (1200px, see theme.json) so
   it lines up with the rest of the site's wide content instead of
   bleeding to the browser edge. */
.fc-article-hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: 62vh;
	max-width: 1200px;
	margin: 0 auto;
	overflow: hidden;
	border-radius: 18px;
	background: var(--fc-plum); /* shows briefly while the image loads */
}
.fc-article-hero .fc-article-hero-bg {
	position: absolute;
	inset: 0;
	margin: 0 !important;
	padding: 0 !important; /* 7 Sep 2026 fix, revised same day: figure.wp-block-post-featured-image
	               picks up the theme's root-padding-aware alignment padding (24px each side)
	               by default, which showed as plum bars flanking the image once
	               the hero was capped at site width instead of bleeding edge to
	               edge -- Ari: "There's still some extra spacing in the sides.
	               make the image fill it appropriately." Zeroing padding here wasn't
	               enough on its own: the generic child-spacing rule just above
	               ("main section.wp-block-group[class*=\" fc-\"] > *") sets
	               padding-left/right: 24px with specificity (0,2,2), which beats
	               this two-class selector's (0,2,0) regardless of source order --
	               so the 24px padding kept winning even though this rule looked
	               correct in the stylesheet. !important forces this override to
	               actually apply. Ari, second report: "Hero still shows purple
	               borders." Confirmed fixed via live getComputedStyle after this
	               change (padding: 0px 0px). */
	width: 100% !important;
	height: 100%;
}
.fc-article-hero .fc-article-hero-bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.fc-article-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(20, 4, 15, .8), rgba(20, 4, 15, 0) 58%);
	pointer-events: none;
}
.fc-article-hero-inner {
	position: relative;
	z-index: 1;
	width: 100%;
	padding: 48px 24px 56px;
}
.fc-article-hero .fc-article-title {
	color: #fff;
	margin-bottom: 0 !important;
	text-shadow: 0 2px 20px rgba(0, 0, 0, .35);
}
@media (max-width: 782px) {
	.fc-article-hero { min-height: 42vh; }
	.fc-article-hero-inner { padding: 32px 20px; }
}

/* ---- Single article foot ---- */
.fc-article-rule.wp-block-separator {
	border: 0;
	border-top: 1px solid var(--fc-line);
	opacity: 1;
	max-width: 100%;
	margin: 0 0 28px;
}

.fc-article-nav {
	gap: 20px;
}
.fc-article-nav .wp-block-post-navigation-link {
	flex: 1 1 240px;
	margin: 0;
}
.fc-article-nav .wp-block-post-navigation-link.post-navigation-link-next {
	text-align: right;
}
.fc-article-nav .wp-block-post-navigation-link a {
	color: var(--fc-plum);
	text-decoration: none;
	font-weight: 500;
	font-size: 15.5px;
}
.fc-article-nav .wp-block-post-navigation-link a:hover {
	color: var(--fc-pink);
}
.fc-article-nav .post-navigation-link-previous::before,
.fc-article-nav .post-navigation-link-next::before {
	display: block;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #6E5B68;
	margin-bottom: 4px;
}
.fc-article-nav .post-navigation-link-previous::before {
	content: "Previous";
}
.fc-article-nav .post-navigation-link-next::before {
	content: "Next";
}

/* ---- 404 search field ---- */
.fc-404-search {
	max-width: 420px;
	margin: 32px auto 0;
}
.fc-404-search .wp-block-search__input {
	border: 1px solid var(--fc-line);
	border-radius: 999px 0 0 999px;
	padding: 10px 18px;
	font-size: 15px;
}
.fc-404-search .wp-block-search__button {
	background: var(--fc-pink);
	color: #fff;
	border: 0;
	border-radius: 0 999px 999px 0;
	padding: 10px 22px;
	font-weight: 600;
	font-size: 15px;
	cursor: pointer;
	transition: background-color .15s ease;
}
.fc-404-search .wp-block-search__button:hover {
	background: var(--fc-pink-dark);
}

/* ---- Motion preference ---- */
@media (prefers-reduced-motion: reduce) {
	.fc-post-card,
	.fc-post-card:hover {
		transition: none;
		transform: none;
	}
}

/* ==========================================================================
   8. Block library (templates/page-blocklibrary.html only)

   Added 21 Aug 2026. Presentational chrome for the internal reference page
   that catalogues every reusable section component -- the tag/label/frame
   around each demo, not the components themselves (those all reuse their
   real classes from sections 2-7 unchanged, so this page renders them
   exactly as they look everywhere else on the site).
   ========================================================================== */
.fc-lib-intro {
	border-bottom: 1px solid var(--fc-line);
}
.fc-lib-demo {
	border: 1px solid var(--fc-line);
	border-radius: 16px;
	overflow: hidden;
	margin: 0 auto 56px;
}
.fc-lib-demo > .fc-lib-tag {
	margin: 0;
	padding: 14px 24px;
	background: var(--fc-neutral);
	border-bottom: 1px solid var(--fc-line);
}
.fc-lib-tag {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--fc-pink);
}
.fc-lib-tag .fc-lib-class {
	color: #6E5B68;
	font-weight: 400;
	text-transform: none;
	letter-spacing: 0;
}
.fc-lib-note {
	padding: 14px 24px 0;
	color: #6E5B68;
	font-size: 14.5px;
	max-width: 70ch;
}
.fc-lib-swatches {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}
.fc-lib-swatch {
	flex: 0 0 140px;
}
.fc-lib-swatch-color {
	height: 64px;
	border-radius: 10px;
	border: 1px solid var(--fc-line);
	margin-bottom: 6px;
}
.fc-lib-swatch p {
	margin: 0;
	font-size: 13px;
	color: #6E5B68;
}
.fc-lib-swatch p strong {
	display: block;
	color: var(--fc-plum);
	font-size: 14px;
}


/* ==========================================================================
   9. Front V2 — "Tonight's Tables"  (templates/page-frontv2.html only)

   Built 26 Aug 2026. Hanna asked for a complete alternative front page:
   "a mix between a SaaS service and a social media frontpage... clear
   signals on what the product is, who benefits from it, and why they
   should join", with the standing instruction from the previous round
   still in force ("go crazy and tone it down").

   EVERY selector below is scoped under .fcv2, which only ever appears on
   templates/page-frontv2.html. The live front page cannot be affected by
   anything in this section -- that isolation is the whole point, since
   this is a concept page running its own palette (dark plum canvas, a
   yellow accent that does not exist elsewhere on the site) alongside the
   real one.

   The organising idea is that the product's atomic unit is a table with
   an empty seat, so a seat row (.v2-seats / .v2-seat, filled = taken,
   yellow ring = open) is the one motif that repeats at every scale: in
   the hero table, on every plan ticket, as the whole how-it-works
   diagram, and in the closing line. New accent token --v2-zest is
   deliberately not in theme.json: it belongs to this concept only until
   somebody decides it belongs to the brand.
   ========================================================================== */

/* ==========================================================================
   FRIENDCHISE FRONT V2 — "Tonight's Tables"
   Everything scoped under .fcv2 so it cannot touch the live front page.
   ========================================================================== */

.fcv2 {
	--v2-ink: #2A0E20;
	--v2-ink-2: #3D1530;
	--v2-pink: #FC599D;
	--v2-pink-hot: #FF7AB4;
	--v2-plum: #4E1A3D;
	--v2-cream: #FFF4EC;
	--v2-cream-2: #FFE3D2;
	--v2-zest: #FFB74D;
	--v2-w: 1200px;
	--v2-mono: ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas, monospace;

	background: var(--v2-ink);
	color: var(--v2-cream);
	overflow-x: clip;
	position: relative;
}

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

/* Grain. Sits over everything, ignores pointer events. Gives the flat
   brand colours a bit of tooth so the dark plum doesn't read as a
   default dark-mode rectangle. */
.fcv2::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 40;
	opacity: .28;
	mix-blend-mode: overlay;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

.fcv2 .v2-wrap {
	max-width: var(--v2-w);
	margin: 0 auto;
	padding: 0 24px;
}

/* ---- shared type ---- */
.fcv2 .v2-label {
	font-family: var(--v2-mono);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--v2-pink-hot);
	margin: 0 0 18px;
}
.fcv2 .v2-label--dim { color: rgba(255, 244, 236, .45); }
.fcv2 .v2-display {
	font-size: clamp(2.6rem, 7.4vw, 6rem);
	line-height: .92;
	letter-spacing: -.04em;
	font-weight: 800;
	margin: 0;
}
.fcv2 .v2-h2 {
	font-size: clamp(2.1rem, 5vw, 3.8rem);
	line-height: .98;
	letter-spacing: -.035em;
	font-weight: 800;
	margin: 0 0 18px;
}
.fcv2 .v2-lede {
	font-size: 1.15rem;
	line-height: 1.55;
	color: rgba(255, 244, 236, .72);
	margin: 0;
	max-width: 44ch;
}
.fcv2 .v2-mark { color: var(--v2-zest); }

/* ---- the seat row: THE motif ---- */
.fcv2 .v2-seats { display: flex; gap: 7px; align-items: center; }
.fcv2 .v2-seat { width: 12px; height: 12px; border-radius: 50%; flex: 0 0 auto; }
.fcv2 .v2-seat.is-taken { background: var(--v2-pink); }
.fcv2 .v2-seat.is-open { border: 2px solid var(--v2-zest); }

/* ---- buttons ---- */
.fcv2 .v2-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 16px 28px;
	font-size: 15px;
	font-weight: 700;
	text-decoration: none;
	border: 2px solid transparent;
	border-radius: 4px;
	transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.fcv2 .v2-btn--primary {
	background: var(--v2-zest);
	color: var(--v2-plum);
	box-shadow: 5px 5px 0 var(--v2-pink);
}
.fcv2 .v2-btn--primary:hover {
	transform: translate(2px, 2px);
	box-shadow: 3px 3px 0 var(--v2-pink);
}
.fcv2 .v2-btn--ghost {
	border-color: rgba(255, 244, 236, .3);
	color: var(--v2-cream);
}
.fcv2 .v2-btn--ghost:hover { border-color: var(--v2-zest); color: var(--v2-zest); }
.fcv2 .v2-btns { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }

/* ==========================================================================
   1. HERO — type is oversized and the table bleeds off the right edge.
   Deliberately NOT a tidy two-column hero: the headline runs wider than
   the visual, and the visual is cropped by the viewport so the page
   reads as a window onto something larger.
   ========================================================================== */
.fcv2 .v2-hero {
	position: relative;
	/* 28 Aug 2026: bottom padding added -- Hanna: "spacing is still tight
	   above [the band]". Root cause wasn't the band's own top margin
	   (already bumped once) but the absolutely-positioned hero table
	   graphic (.v2-table-wrap, incl. its radial glow) hanging out of
	   normal flow below the button row, with nothing pushing the
	   section's real bottom edge down to clear it. This gives the
	   section guaranteed room regardless of text length. */
	padding: 56px 0 72px;
	overflow: visible;
}
.fcv2 .v2-hero-inner { position: relative; z-index: 2; }
.fcv2 .v2-hero h1 { max-width: 15ch; }
.fcv2 .v2-hero-foot {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 40px;
	align-items: end;
	margin-top: 40px;
}
/* .v2-hero-meta ("Free while opening branches / Not a dating app") removed
   27 Aug 2026 -- Hanna: the line under the CTAs read as clutter. */

/* the top-down table, pure CSS, cropped by the right edge */
.fcv2 .v2-table-wrap {
	position: absolute;
	right: -40px;
	top: 18px;
	width: 440px;
	height: 440px;
	z-index: 1;
}
.fcv2 .v2-table-wrap::before {
	content: "";
	position: absolute;
	inset: -120px;
	background: radial-gradient(circle at 50% 50%, rgba(252, 89, 157, .3), transparent 62%);
	pointer-events: none;
}
.fcv2 .v2-table {
	position: absolute;
	left: 85px;
	top: 85px;
	width: 270px;
	height: 270px;
	border-radius: 50%;
	background: var(--v2-cream);
	box-shadow: 0 34px 70px rgba(0, 0, 0, .5), inset 0 0 0 11px var(--v2-cream-2);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	color: var(--v2-plum);
}
.fcv2 .v2-table-venue { font-weight: 800; font-size: 19px; letter-spacing: -.02em; margin: 0; }
.fcv2 .v2-table-when {
	font-family: var(--v2-mono);
	font-size: 10px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: rgba(78, 26, 61, .6);
	margin: 7px 0 13px;
}
.fcv2 .v2-chair {
	position: absolute;
	width: 76px;
	height: 76px;
	border-radius: 50%;
	overflow: hidden;
	background: var(--v2-ink-2);
	box-shadow: 0 10px 22px rgba(0, 0, 0, .45);
}
.fcv2 .v2-chair img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fcv2 .v2-chair--open {
	border: 3px dashed var(--v2-zest);
	background: rgba(255, 216, 77, .08);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--v2-mono);
	font-size: 10px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--v2-zest);
	text-align: center;
	line-height: 1.25;
	box-shadow: none;
	overflow: visible;
	isolation: isolate;
}

/* Same compositing fix as .v3-chair--open above; kept in step so the legacy
   V2 front page cannot reintroduce the main-thread repaint loop. */
.fcv2 .v2-chair--open::after {
	content: "";
	position: absolute;
	inset: -3px;
	border-radius: 50%;
	border: 2px solid rgba(255, 216, 77, .5);
	z-index: -1;
	pointer-events: none;
	animation: v2-pulse 2.4s ease-in-out infinite;
}
@keyframes v2-pulse {
	0%, 100% { transform: scale(1);    opacity: 1; }
	50%      { transform: scale(1.35); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
	.fcv2 .v2-chair--open::after { animation: none; opacity: 0; }
}
.fcv2 .v2-chair-1 { left: 182px; top: 2px; }
.fcv2 .v2-chair-2 { left: 354px; top: 126px; }
.fcv2 .v2-chair-3 { left: 288px; top: 329px; }
.fcv2 .v2-chair-4 { left: 76px;  top: 329px; }
.fcv2 .v2-chair-5 { left: 10px;  top: 126px; }
.fcv2 .v2-table-badge {
	position: absolute;
	left: 0;
	top: 46px;
	background: var(--v2-zest);
	color: var(--v2-plum);
	font-family: var(--v2-mono);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	padding: 8px 12px;
	border-radius: 4px;
	transform: rotate(-6deg);
	box-shadow: 0 8px 18px rgba(0, 0, 0, .4);
	z-index: 3;
}

/* ==========================================================================
   2. MANIFESTO BAND — rotated so it cuts across the section seam rather
   than sitting politely between two blocks.
   ========================================================================== */
.fcv2 .v2-band {
	/* 27 Aug 2026: Hanna flagged the cut as "too steep", with the ink
	   background peeking through on one side and too much of it showing
	   on the other. Root cause: at -2.2deg the band's rotated ends swing
	   ~36px vertically at typical desktop widths, more than the -30px
	   overlap into .v2-spec below was covering, so a sliver of the ink
	   background (the seam between the black .fcv2 canvas and the cream
	   spec section) showed through unevenly left/right. Fixed by easing
	   the angle and giving the band a much bigger, symmetric overlap on
	   both sides so the swing stays safely inside it regardless. */
	position: relative;
	z-index: 5;
	margin: 56px 0 -40px;
	transform: rotate(-1deg);
	background: var(--v2-pink);
	color: #fff;
	padding: 15px 0;
	overflow: hidden;
	white-space: nowrap;
	width: 130%;
	margin-left: -15%;
	border-top: 3px solid var(--v2-ink);
	border-bottom: 3px solid var(--v2-ink);
}
.fcv2 .v2-band-track { display: inline-flex; animation: v2-slide 32s linear infinite; }
.fcv2 .v2-band span {
	font-family: var(--v2-mono);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	padding: 0 20px;
}
.fcv2 .v2-band .v2-band-x { color: var(--v2-zest); }
@keyframes v2-slide {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
	.fcv2 .v2-band-track { animation: none; }
}

/* ==========================================================================
   3. SPEC — what this actually is. Terms set enormous and hung into the
   left margin so the block reads as a spread, not a feature table.
   ========================================================================== */
.fcv2 .v2-spec {
	/* top padding is bigger than the section below it needs on its own --
	   the band above overlaps -40px into this section (see .v2-band), so
	   the net visible gap under the band is 92-40 = 52px, not 92px. */
	background: var(--v2-cream);
	color: var(--v2-plum);
	padding: 92px 0 56px;
}
.fcv2 .v2-spec .v2-label { color: var(--v2-pink); }
.fcv2 .v2-spec-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px 48px;
	align-items: end;
	padding: 20px 0 18px;
	border-bottom: 3px solid var(--v2-plum);
}
.fcv2 .v2-spec-row:first-of-type { border-top: 3px solid var(--v2-plum); }
.fcv2 .v2-spec-idx {
	/* 27 Aug 2026: Hanna wanted these bigger, and the section overall
	   less "SaaS feature table". Bumped from 11px to 14px and turned
	   into a small rounded chip (like a social tag) instead of a plain
	   uppercase spec-sheet label. */
	grid-column: 1 / -1;
	display: inline-flex;
	font-family: var(--v2-mono);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--v2-pink);
	background: rgba(252, 89, 157, .12);
	padding: 5px 12px;
	border-radius: 999px;
	margin: 0 0 10px;
}
.fcv2 .v2-spec-term {
	font-size: clamp(2.4rem, 6vw, 4.6rem);
	font-weight: 800;
	letter-spacing: -.045em;
	line-height: .92;
	margin: 0;
}
.fcv2 .v2-spec-def {
	font-size: 1.05rem;
	line-height: 1.6;
	color: rgba(78, 26, 61, .78);
	margin: 0 0 6px;
}
.fcv2 .v2-spec-not {
	margin-top: 30px;
	font-family: var(--v2-mono);
	font-size: 16px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: rgba(78, 26, 61, .55);
}
.fcv2 .v2-spec-not s { opacity: .5; }

/* ==========================================================================
   4. WHO IT'S FOR — a stack of confessions. The unselected ones stay on
   the page, dimmed, so it reads like overhearing a room rather than
   operating a tab control.
   ========================================================================== */
.fcv2 .v2-who { padding: 60px 0 56px; }
.fcv2 .v2-who-list { margin-top: 20px; }
.fcv2 .v2-conf {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 32px;
	align-items: center;
	padding: 16px 0;
	border-top: 2px solid rgba(255, 244, 236, .12);
	cursor: pointer;
	transition: opacity .2s ease;
}
.fcv2 .v2-conf:last-child { border-bottom: 2px solid rgba(255, 244, 236, .12); }
.fcv2 .v2-conf-line {
	font-size: clamp(1.5rem, 3.6vw, 2.7rem);
	font-weight: 800;
	letter-spacing: -.03em;
	line-height: 1.06;
	margin: 0;
	color: rgba(255, 244, 236, .32);
	transition: color .2s ease;
}
.fcv2 .v2-conf-line em { font-style: normal; }
.fcv2 .v2-conf-tag {
	font-family: var(--v2-mono);
	font-size: 10px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: rgba(255, 244, 236, .3);
	white-space: nowrap;
}
.fcv2 .v2-conf-body {
	grid-column: 1 / -1;
	display: none;
	grid-template-columns: 1.25fr .75fr;
	gap: 44px;
	align-items: start;
	padding: 14px 0 22px;
}
.fcv2 .v2-conf.is-open .v2-conf-line { color: var(--v2-cream); }
.fcv2 .v2-conf.is-open .v2-conf-line em { color: var(--v2-zest); }
.fcv2 .v2-conf.is-open .v2-conf-tag { color: var(--v2-zest); }
.fcv2 .v2-conf.is-open .v2-conf-body { display: grid; }
.fcv2 .v2-conf-body > p {
	font-size: 1.08rem;
	line-height: 1.6;
	color: rgba(255, 244, 236, .72);
	margin: 0;
}

/* ---- ticket card ---- */
.fcv2 .v2-ticket {
	background: var(--v2-cream);
	color: var(--v2-plum);
	border-radius: 14px;
	padding: 22px 22px 0;
	position: relative;
	box-shadow: 0 22px 44px rgba(0, 0, 0, .4);
}
.fcv2 .v2-ticket-city {
	font-family: var(--v2-mono);
	font-size: 10px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--v2-pink);
	margin: 0 0 10px;
	font-weight: 700;
}
.fcv2 .v2-ticket-venue {
	font-size: 1.3rem;
	font-weight: 800;
	letter-spacing: -.025em;
	line-height: 1.12;
	margin: 0 0 8px;
}
.fcv2 .v2-ticket-when { font-size: .92rem; color: rgba(78, 26, 61, .62); margin: 0 0 18px; }
.fcv2 .v2-ticket-stub {
	border-top: 2px dashed rgba(78, 26, 61, .22);
	margin: 0 -22px;
	padding: 15px 22px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	position: relative;
}
.fcv2 .v2-ticket-stub::before,
.fcv2 .v2-ticket-stub::after {
	content: "";
	position: absolute;
	top: -11px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--v2-ink);
}
.fcv2 .v2-ticket-stub::before { left: -10px; }
.fcv2 .v2-ticket-stub::after  { right: -10px; }
.fcv2 .v2-ticket-left {
	font-family: var(--v2-mono);
	font-size: 10px;
	letter-spacing: .1em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--v2-plum);
}
.fcv2 .v2-ticket-host { display: flex; align-items: center; gap: 8px; font-size: .85rem; color: rgba(78, 26, 61, .7); }
.fcv2 .v2-ticket-host img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; }

/* ==========================================================================
   5. HOW IT WORKS — one long communal table across the whole page, seats
   filling left to right. The explanation IS the motif.
   ========================================================================== */
.fcv2 .v2-how { background: var(--v2-cream); color: var(--v2-plum); padding: 60px 0 60px; }
.fcv2 .v2-how .v2-label { color: var(--v2-pink); }
.fcv2 .v2-longtable { position: relative; margin-top: 44px; }
.fcv2 .v2-longtable-seats {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	margin-bottom: 14px;
}
.fcv2 .v2-longtable-cluster { display: flex; gap: 12px; }
.fcv2 .v2-longtable-seats .v2-seat { width: 15px; height: 15px; }
.fcv2 .v2-longtable-seats .v2-seat.is-open { border-color: rgba(78, 26, 61, .3); }
/* Seats start empty and fill left-to-right when the section scrolls into
   view -- the diagram performs the sentence instead of illustrating it. */
.fcv2 .v2-longtable-seats .v2-seat.is-taken {
	background: transparent;
	border: 2px solid rgba(78, 26, 61, .3);
	transition: background .4s ease, border-color .4s ease;
}
.fcv2 .v2-longtable.is-live .v2-longtable-seats .v2-seat.is-taken {
	background: var(--v2-pink);
	border-color: transparent;
}
.fcv2 .v2-longtable-cluster:nth-child(1) .v2-seat { transition-delay: .10s; }
.fcv2 .v2-longtable-cluster:nth-child(2) .v2-seat { transition-delay: .45s; }
.fcv2 .v2-longtable-cluster:nth-child(3) .v2-seat { transition-delay: .80s; }
.fcv2 .v2-longtable-cluster:nth-child(4) .v2-seat { transition-delay: 1.15s; }
@media (prefers-reduced-motion: reduce) {
	.fcv2 .v2-longtable-seats .v2-seat.is-taken {
		background: var(--v2-pink);
		border-color: transparent;
		transition: none;
	}
}
/* 27 Aug 2026: dropped the solid plum "table edge" bar -- Hanna wanted
   this whole diagram to read as a live social status, not furniture.
   Replaced with a small live-dot caption (the same blinking dot used on
   "Open right now" in the feed section below) reporting the same fill
   state the seats above are animating toward. */
.fcv2 .v2-longtable-caption {
	display: flex;
	align-items: center;
	font-family: var(--v2-mono);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: rgba(78, 26, 61, .55);
}
.fcv2 .v2-how-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 0; }
.fcv2 .v2-step { position: relative; padding-top: 40px; text-align: left; }
.fcv2 .v2-step::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 2px;
	height: 28px;
	background: var(--v2-plum);
	opacity: .45;
}
.fcv2 .v2-step-n {
	font-family: var(--v2-mono);
	font-size: 11px;
	letter-spacing: .16em;
	font-weight: 700;
	color: var(--v2-pink);
	margin: 0 0 12px;
}
.fcv2 .v2-step h3 { font-size: 1.3rem; font-weight: 800; letter-spacing: -.025em; margin: 0 0 8px; }
.fcv2 .v2-step p { font-size: .95rem; line-height: 1.55; color: rgba(78, 26, 61, .72); margin: 0; }

/* ==========================================================================
   6. FEED — two full-bleed rails drifting in opposite directions. Reads
   as a city turning over, not as a card grid.
   ========================================================================== */
.fcv2 .v2-feed { padding: 60px 0 64px; overflow: hidden; }
.fcv2 .v2-live-dot {
	display: inline-block;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--v2-zest);
	margin-right: 8px;
	animation: v2-blink 1.8s ease-in-out infinite;
}
@keyframes v2-blink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .fcv2 .v2-live-dot { animation: none; } }
.fcv2 .v2-rail { overflow: hidden; width: 100%; padding: 22px 0; }
.fcv2 .v2-rail-track { display: flex; gap: 22px; width: max-content; animation: v2-slide 46s linear infinite; }
.fcv2 .v2-rail--back .v2-rail-track { animation-direction: reverse; animation-duration: 58s; }
.fcv2 .v2-rail .v2-ticket { width: 300px; flex: 0 0 300px; }
.fcv2 .v2-rail-track > .v2-ticket:nth-child(odd)  { transform: rotate(-1.4deg); }
.fcv2 .v2-rail-track > .v2-ticket:nth-child(even) { transform: rotate(1.6deg); }
@media (prefers-reduced-motion: reduce) {
	.fcv2 .v2-rail-track { animation: none; }
}
.fcv2 .v2-ticket.is-full { opacity: .45; }
.fcv2 .v2-stamp {
	position: absolute;
	top: 16px;
	right: 16px;
	font-family: var(--v2-mono);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--v2-plum);
	border: 2px solid var(--v2-plum);
	border-radius: 6px;
	padding: 4px 8px;
	transform: rotate(-8deg);
	opacity: .55;
}

/* ==========================================================================
   7. PROOF
   ========================================================================== */
.fcv2 .v2-proof { background: var(--v2-pink); color: #fff; padding: 60px 0; }
.fcv2 .v2-proof .v2-label { color: rgba(255, 255, 255, .72); }
.fcv2 .v2-proof-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 28px; }
.fcv2 .v2-proof-grid > *:nth-child(2) { transform: translateY(28px); }
/* 28 Aug 2026: Hanna: "I only see small faces in icons. I want image
   spots where you can really see people having fun together." Swapped
   the lorem-ipsum text-post cards (never filled in with real
   testimonials anyway) for actual photography, sized big enough to
   read as a scene rather than a tiny circular avatar crop. Using the
   same group photos already proven on the live front page (hero,
   steps, we're-live sections) rather than the small individual host
   crops used elsewhere on this page -- landscape/portrait shots of
   real people together, not another face-in-a-circle. */
.fcv2 .v2-proof-photo {
	position: relative;
	display: block;
	margin: 0;
	border-radius: 18px;
	overflow: hidden;
	border: 2px solid rgba(255, 255, 255, .24);
	aspect-ratio: 4 / 5;
}
.fcv2 .v2-proof-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
/* .v2-reacts / .v2-react (like/retweet pills) removed 27 Aug 2026 -- Hanna:
   these are real testimonials, not social posts, fake engagement counts
   didn't make sense here. */

/* ==========================================================================
   8. BRANCHES — the name is friend + franchise, so the cities are branches
   on a chain. Offset rows make the chain read as a route, not a table.
   ========================================================================== */
.fcv2 .v2-branches { padding: 56px 0; }
.fcv2 .v2-branch-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 28px; }
.fcv2 .v2-branch-list > *:nth-child(even) { transform: translateY(26px); }
.fcv2 .v2-branch { border: 2px solid rgba(255, 244, 236, .18); border-radius: 18px; padding: 26px 24px; }
/* 28 Aug 2026: Hanna wanted each location card visually distinct --
   "add a graphic element that showcases the location". Small inline
   currentColor SVGs, no photos, so they stay crisp at any size and tint
   automatically with the card's existing open/ask colour state, matching
   the page's established pure-CSS/SVG illustration approach (the hero
   table is the same idea). One line-icon per city: palm trees (Las
   Palmas), a pomegranate (Granada literally means pomegranate in
   Spanish), Helsinki Cathedral's dome, and a dashed circle + plus for
   the "Yours?" card, echoing its own dashed border. */
.fcv2 .v2-branch-icon { width: 46px; height: 46px; margin-bottom: 14px; color: rgba(255, 244, 236, .55); }
.fcv2 .v2-branch-icon svg { width: 100%; height: 100%; display: block; }
.fcv2 .v2-branch.is-open .v2-branch-icon { color: var(--v2-zest); }
.fcv2 .v2-branch.is-open { border-color: var(--v2-zest); }
.fcv2 .v2-branch-city { font-size: 1.4rem; font-weight: 800; letter-spacing: -.025em; margin: 0 0 6px; }
.fcv2 .v2-branch-status {
	font-family: var(--v2-mono);
	font-size: 10px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--v2-zest);
	margin: 0;
}
.fcv2 .v2-branch--ask { border-style: dashed; }
.fcv2 .v2-branch--ask a { color: var(--v2-zest); }

/* ==========================================================================
   9. TRUST
   ========================================================================== */
.fcv2 .v2-trust { background: var(--v2-ink-2); padding: 52px 0; }
.fcv2 .v2-trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; margin-top: 24px; }
.fcv2 .v2-trust-item h4 { font-size: 1.05rem; font-weight: 800; margin: 0 0 8px; }
.fcv2 .v2-trust-item p { font-size: .92rem; line-height: 1.55; color: rgba(255, 244, 236, .6); margin: 0; }
.fcv2 .v2-trust-item::before {
	content: "";
	display: block;
	width: 26px;
	height: 3px;
	background: var(--v2-zest);
	margin-bottom: 16px;
}

/* ==========================================================================
   10. FOUNDER
   ========================================================================== */
.fcv2 .v2-founder { background: var(--v2-cream); color: var(--v2-plum); padding: 60px 0; }
.fcv2 .v2-founder .v2-label { color: var(--v2-pink); }
.fcv2 .v2-founder-row { display: grid; grid-template-columns: 220px 1fr; gap: 48px; align-items: center; }
/* 28 Aug 2026: Hanna called the previous treatment (rectangular photo,
   rotated, hard offset shadow) a copy of the live front page's own
   founder card -- fair, it's the same "tilted photo + hard shadow" trick
   front-page.html already uses (see section 10 there). Rebuilt around
   THIS page's own visual language instead: a circular photo echoing the
   round table/avatars used everywhere else in .fcv2, a soft blurred glow
   behind it (same device as the hero table's radial glow, not a hard
   offset), no rotation on the photo itself, and a small rotated
   "Founder" tag re-using the hero table-badge treatment -- so the one
   thing it does borrow, it borrows from this page. */
.fcv2 .v2-founder-photo {
	position: relative;
	width: 200px;
	height: 200px;
	margin: 0 auto;
}
.fcv2 .v2-founder-photo::before {
	content: "";
	position: absolute;
	inset: -34px;
	background: radial-gradient(circle at 50% 50%, rgba(252, 89, 157, .32), transparent 70%);
	pointer-events: none;
	z-index: 0;
}
.fcv2 .v2-founder-img {
	position: relative;
	z-index: 1;
	display: block;
	width: 200px;
	height: 200px;
	object-fit: cover;
	border-radius: 50%;
	border: 4px solid var(--v2-pink);
	box-shadow: 0 18px 40px rgba(78, 26, 61, .28);
}
.fcv2 .v2-founder-tag {
	position: absolute;
	z-index: 2;
	right: -4px;
	bottom: 6px;
	background: var(--v2-zest);
	color: var(--v2-plum);
	font-family: var(--v2-mono);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	padding: 6px 13px;
	border-radius: 20px;
	transform: rotate(-6deg);
	box-shadow: 0 6px 14px rgba(0, 0, 0, .22);
}
.fcv2 .v2-founder-quote {
	font-size: clamp(1.4rem, 3.2vw, 2.3rem);
	font-weight: 800;
	line-height: 1.16;
	letter-spacing: -.03em;
	margin: 0 0 20px;
}
.fcv2 .v2-founder-sig {
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: var(--v2-mono);
	font-size: 11px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: rgba(78, 26, 61, .55);
	margin: 0;
}
.fcv2 .v2-founder-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--v2-pink);
	display: inline-block;
}
/* 28 Aug 2026: LinkedIn button next to the founder's name -- same URL
   already used on the live front page's founder block
   (https://www.linkedin.com/in/hannareunanen). Small circular icon
   button rather than a text link, subtle at rest, fills pink on hover
   like the page's other interactive accents. */
.fcv2 .v2-founder-linkedin {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: rgba(78, 26, 61, .08);
	color: var(--v2-plum);
	transition: background .15s ease, color .15s ease, transform .15s ease;
}
.fcv2 .v2-founder-linkedin svg { width: 13px; height: 13px; display: block; }
.fcv2 .v2-founder-linkedin:hover { background: var(--v2-pink); color: var(--v2-cream); transform: translateY(-1px); }

/* 28 Aug 2026: .v2-closer removed -- Hanna: the site footer (parts/footer.html,
   .fc-footer-cta) now carries this exact "There's a table tonight" closing
   CTA sitewide, so having it again at the bottom of this page's own content
   was a straight duplicate right above the real one. */

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1100px) {
	.fcv2 .v2-table-wrap { right: -180px; top: 60px; }
}
@media (max-width: 900px) {
	.fcv2 .v2-hero { padding-top: 48px; }
	.fcv2 .v2-hero h1 { max-width: none; }
	.fcv2 .v2-table-wrap {
		position: relative;
		right: auto;
		top: auto;
		margin: 44px auto 0;
		transform: scale(.92);
	}
	.fcv2 .v2-hero-foot { grid-template-columns: 1fr; align-items: start; }
	.fcv2 .v2-conf-body { grid-template-columns: 1fr; gap: 26px; }
	.fcv2 .v2-how-grid { grid-template-columns: repeat(2, 1fr); gap: 30px; }
	.fcv2 .v2-longtable-seats { padding: 0 2%; }
	.fcv2 .v2-proof-grid { grid-template-columns: 1fr; }
	.fcv2 .v2-proof-grid > *:nth-child(2) { transform: none; }
	.fcv2 .v2-branch-list { grid-template-columns: repeat(2, 1fr); }
	.fcv2 .v2-trust-grid { grid-template-columns: repeat(2, 1fr); }
	.fcv2 .v2-spec-row { grid-template-columns: 1fr; align-items: start; }
}
@media (max-width: 640px) {
	.fcv2 .v2-how-grid { grid-template-columns: 1fr; }
	.fcv2 .v2-longtable-seats .v2-seat:nth-child(n+13) { display: none; }
	.fcv2 .v2-branch-list { grid-template-columns: 1fr; }
	.fcv2 .v2-branch-list > *:nth-child(even) { transform: none; }
	.fcv2 .v2-trust-grid { grid-template-columns: 1fr; }
	.fcv2 .v2-founder-row { grid-template-columns: 1fr; }
	.fcv2 .v2-table-wrap { transform: scale(.78); margin: 10px auto -40px; }
	.fcv2 .v2-conf-tag { display: none; }
}

/* The shared header is a light neutral bar, which reads as a mistake
   sitting on top of this page's dark canvas. :has() lets it be restyled
   for this one page without a body class, a second header part, or any
   change to parts/header.html. Browsers without :has() simply keep the
   normal header, which is a cosmetic mismatch and not a broken page. */
body:has(main.fcv2) header.wp-block-group {
	background: #2A0E20;
	border-bottom-color: rgba(255, 244, 236, .12);
}
body:has(main.fcv2) header.wp-block-group .wp-block-navigation-item > .wp-block-navigation-item__content {
	color: #FFF4EC;
}
body:has(main.fcv2) header.wp-block-group .wp-block-navigation-item > .wp-block-navigation-item__content:hover {
	color: #FFD84D;
}

/* ==========================================================================
   10. Front V3 — "Tonight's Tables" (light)  (templates/page-frontv3.html,
   and now templates/page-about.html -- see section 17 below)

   Built 29 Aug 2026 at Ari's request: Front V2's all-dark-plum canvas read
   as "very powering and somewhat depressing" for a product about making
   new friends, aimed primarily at a female audience -- "bring some air
   into the design." This block is a direct structural clone of section 9
   above (same ten sections, same motifs, same JS hooks) with three
   changes throughout: the page runs on light, warm section tints instead
   of one dark ink canvas; the amber --v2-zest accent is replaced with a
   warmer coral (--v3-coral) that reads clearly on light backgrounds
   instead of dark ones; and shadows/surfaces are softer and slightly
   more spaced out (no grain texture, lighter shadows, +10-15% padding)
   so the page feels airier rather than louder.

   31 Aug 2026: Ari asked for the About page rebuilt "with the new
   layout," reusing "visually appealing element blocks... created thus
   far" -- this design graduated from a homepage concept to the theme's
   second real page here, so the invariant below is no longer literally
   true. Everything under .fcv3 (tokens, .v3-h2/.v3-lede/.v3-btn type,
   .v3-band, .v3-founder-*, .v3-spec-*) is now shared by both pages
   rather than duplicated -- section 17 adds only the handful of new
   component classes About needed that V3 didn't already have (hero
   photo layout, story-section wrapper, join-community split, centered
   CTA). /frontv2/ still can't be reached by anything here -- it never
   carries the .fcv3 class.

   Section backgrounds are deliberately varied rather than flat, so
   adjacent light sections still read as distinct beats: base cream for
   Hero, white for Spec/How/Founder, soft peach for Who/Branches, soft
   blush for Feed/Trust, and the brand pink itself for the Band strip and
   the Proof photos -- the one place a fully saturated colour earns its
   keep, as a punch of warmth around real photos of people together.
   ========================================================================== */

.fcv3 {
	--v3-bg:       #FFFBF7;  /* base warm near-white -- hero */
	--v3-white:    #FFFFFF;  /* spec / how / founder */
	--v3-peach:    #FFF3E8;  /* who / branches */
	--v3-blush:    #FFEDF2;  /* feed / trust */
	--v3-card-2:   #FFE3D2;  /* inset ring on the hero table, echoes v2's cream-2 */
	--v3-ink:      #4E1A3D;  /* primary text -- the existing brand plum, reused */
	--v3-pink:     #FC599D;  /* brand pink -- unchanged from Front V2 */
	--v3-pink-hot: #FF7AB4;
	--v3-coral:    #F0855C;  /* new warm accent, replaces the v2-zest amber */
	--v3-night:      #2A0E20;  /* 30 Aug 2026: one deliberate dark section
	                              (How), same value as Front V2's canvas,
	                              "to bring some overall contrast" against
	                              the otherwise light page -- see 5. HOW */
	--v3-night-ink:  #FFF4EC;  /* text on --v3-night */
	--v3-w: 1200px;
	--v3-mono: ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas, monospace;

	background: var(--v3-bg);
	color: var(--v3-ink);
	overflow-x: clip;
	position: relative;
}

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

/* No grain overlay here (compare .fcv2::after) -- the noise texture gave
   the dark plum canvas some tooth, but the same treatment on a light,
   airy palette just reads as dirt on the page. Leaving light sections
   flat and clean is part of "bringing air in". */

.fcv3 .v3-wrap {
	max-width: var(--v3-w);
	margin: 0 auto;
	padding: 0 24px;
}

/* ---- shared type ---- */
.fcv3 .v3-label {
	font-family: var(--v3-mono);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--v3-pink-hot);
	margin: 0 0 18px;
}
.fcv3 .v3-label--dim { color: rgba(78, 26, 61, .42); }
.fcv3 .v3-display {
	/* 10 Sep 2026: Ari -- "make the hero header H1 a bit smaller." Trimmed
	   both ends of the clamp (was 2.6rem/7.4vw/6rem) rather than just the
	   max, so it reads smaller across the whole viewport range, not only
	   at the top end.
	   10 Sep 2026 (round 2): Ari -- "still a bit big on desktop." The
	   first pass (2.3rem/6.6vw/5.2rem) was still hitting its 5.2rem cap
	   at ~1130px+ (83.2px). Dropped the cap to 4.4rem and eased the
	   vw factor to 5.6vw so it reaches that cap a bit later too. */
	font-size: clamp(2.2rem, 5.6vw, 4.4rem);
	line-height: .92;
	letter-spacing: -.04em;
	font-weight: 800;
	margin: 0;
}
.fcv3 .v3-h2 {
	font-size: clamp(2.1rem, 5vw, 3.8rem);
	line-height: .98;
	letter-spacing: -.035em;
	font-weight: 800;
	margin: 0 0 18px;
}
.fcv3 .v3-lede {
	font-size: 1.15rem;
	line-height: 1.6;
	color: rgba(78, 26, 61, .68);
	margin: 0;
	max-width: 44ch;
}
.fcv3 .v3-mark { color: var(--v3-coral); }

/* ---- the seat row: THE motif ---- */
.fcv3 .v3-seats { display: flex; gap: 7px; align-items: center; }
.fcv3 .v3-seat { width: 12px; height: 12px; border-radius: 50%; flex: 0 0 auto; }
.fcv3 .v3-seat.is-taken { background: var(--v3-pink); }
.fcv3 .v3-seat.is-open { border: 2px solid var(--v3-coral); }

/* ---- buttons ---- */
.fcv3 .v3-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 16px 28px;
	font-size: 15px;
	font-weight: 700;
	text-decoration: none;
	border: 2px solid transparent;
	border-radius: 6px;
	transition: transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
}
.fcv3 .v3-btn--primary {
	background: var(--v3-pink);
	color: #fff;
	box-shadow: 5px 5px 0 var(--v3-coral);
}
.fcv3 .v3-btn--primary:hover {
	transform: translate(2px, 2px);
	box-shadow: 3px 3px 0 var(--v3-coral);
}
.fcv3 .v3-btn--ghost {
	border-color: rgba(78, 26, 61, .25);
	color: var(--v3-ink);
}
.fcv3 .v3-btn--ghost:hover { border-color: var(--v3-coral); color: var(--v3-coral); }
.fcv3 .v3-btns { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 38px; }

/* 7 Sep 2026 fix: Ari flagged the front-page hero buttons rendering wrong
   ("How a plan works" showed as a small solid-pink button floating inside
   a bigger grey-bordered box). Root cause: a wp:button block renders as
   <div class="wp-block-button v3-btn ..."><a class="wp-block-button__link
   wp-element-button" ...>text</a></div> -- the .v3-btn rules above land on
   the WRAPPER div, but the actual visible/clickable element is the inner
   anchor, which still carries WordPress core's own default button styling
   (its own padding/background/radius) since nothing here ever reset it.
   That's two nested "buttons": mostly invisible on v3-btn--primary since
   both happen to render pink, but obvious on v3-btn--ghost, where the
   outer border shows around an inner solid WP-default button. This exact
   bug class was already fixed once on this site (see the sticky CTA note
   in this file's article-layout section) but not for the shared v3-btn
   component itself, so every wp:button using v3-btn/v3-btn--primary/
   v3-btn--ghost was affected (frontv3 hero, Collaborate page CTAs) --
   core/read-more's "Read the article" link (templates/home.html) is NOT
   affected, since it puts these classes straight on its own <a> with no
   wrapper div, so the base rules above already describe it correctly on
   their own.
   Fix: when .v3-btn sits on an actual wp:button wrapper (recognisable by
   WordPress's own .wp-block-button class also being present), neutralise
   the wrapper's box model entirely and move all the real button styling
   onto its .wp-block-button__link instead, so there's only ever one
   visible box. */
.fcv3 .wp-block-button.v3-btn {
	display: block;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
}
.fcv3 .wp-block-button.v3-btn .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 16px 28px;
	font-size: 15px;
	font-weight: 700;
	text-decoration: none;
	border: 2px solid transparent;
	border-radius: 6px;
	transition: transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
}
.fcv3 .wp-block-button.v3-btn--primary .wp-block-button__link {
	background: var(--v3-pink);
	color: #fff;
	box-shadow: 5px 5px 0 var(--v3-coral);
}
.fcv3 .wp-block-button.v3-btn--primary .wp-block-button__link:hover {
	transform: translate(2px, 2px);
	box-shadow: 3px 3px 0 var(--v3-coral);
}
.fcv3 .wp-block-button.v3-btn--ghost .wp-block-button__link {
	border-color: rgba(78, 26, 61, .25);
	color: var(--v3-ink);
	background: transparent;
}
.fcv3 .wp-block-button.v3-btn--ghost .wp-block-button__link:hover {
	border-color: var(--v3-coral);
	color: var(--v3-coral);
}

/* ==========================================================================
   1. HERO
   ========================================================================== */
.fcv3 .v3-hero {
	position: relative;
	padding: 64px 0 80px;
	overflow: visible;
}
.fcv3 .v3-hero-inner { position: relative; z-index: 2; }
.fcv3 .v3-hero h1 { max-width: 15ch; }
.fcv3 .v3-hero-foot {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 44px;
	align-items: end;
	margin-top: 44px;
}

/* the top-down table, pure CSS, cropped by the right edge. .v3-table-scale
   is a plain, unstyled wrapper at desktop widths (position stays static,
   so it doesn't change how .v3-table-wrap's absolute right/top resolve
   against .v3-hero) -- it only takes on a real size at the mobile
   breakpoints below, where it's what keeps the table from overflowing
   the viewport. See the responsive section for why. */
/* 30 Aug 2026 (round 3): Ari, a third time: "still cuts off on the 2nd
   circle, I want full circles." The mobile fixes above (.v3-table-scale)
   only ever touched widths <=1100px -- at real desktop widths this base
   rule was still in play, and `right: -40px` deliberately let the table
   bleed 40px past .v3-hero's own right edge (which spans the full
   section width, unlike the 1200px-capped text column inside it -- see
   the comment above .v3-table-wrap's old position). Chair-2 sits near
   the box's right edge (left: 354px of the 440px box), so that bleed
   put it ~30px past the section's edge at EVERY viewport width,
   desktop included, and .fcv3's overflow-x: clip cropped it -- this
   was never mobile-only, it was just more obviously awkward once the
   whole table shrank. Pulled the box in from -40px to 16px so chair-2
   sits with a real margin inside the section instead of bleeding off
   it; confirmed with a width sweep from 320px to 1920px that no chair
   crosses the edge anywhere in that range now. */
.fcv3 .v3-table-wrap {
	/* 10 Sep 2026: Ari -- "the table image a little more to the center."
	   Nudged in from 16px to 72px; still well inside the no-chair-clips-
	   the-edge margin the 30 Aug fix established (it only needed >0px),
	   just less pinned to the hard edge. */
	position: absolute;
	right: 72px;
	top: 18px;
	width: 440px;
	height: 440px;
	z-index: 1;
}
.fcv3 .v3-table-wrap::before {
	content: "";
	position: absolute;
	inset: -120px;
	background: radial-gradient(circle at 50% 50%, rgba(252, 89, 157, .16), transparent 62%);
	pointer-events: none;
}
/* 14 Sep 2026 -- the disc itself is now a raster asset, not CSS paint.
   Why: Chrome only nominates <img>, <video>, background-image and text-bearing
   block elements as LCP candidates. A circle drawn with background + box-shadow
   is none of those, so the front page had no eligible image above the fold and
   fell back to competing text blocks (~42k px2 on mobile). That is right on the
   edge of what Chrome will accept, and Lighthouse returned NO_LCP on about
   three runs in four -- taking TBT, TTI and every other trace-dependent audit
   down with it, while /contact/ (which has a real featured image) passed 4/4.
   .v3-table-art is a 520x520 design-pixel image exported at 2x from exactly
   these numbers -- 270px white disc, 11px #FFE3D2 inset ring, 0 28px 56px
   rgba(78,26,61,.14) shadow -- so the rendering is unchanged; it is just an
   image now. 520 rather than 440 so the shadow's full blur tail fits inside
   the bitmap instead of being cut off at the box edge.
   It gives a 270,400 px2 candidate on desktop and ~80,500 px2 on mobile, both
   comfortably larger than the h1, at 0.72 bits/px -- 14x Chrome's 0.05 bpp
   entropy floor for LCP images, so it cannot be discarded as a placeholder.
   .v3-table keeps its box and its text; it just stopped painting itself. */
.fcv3 .v3-table-art {
	position: absolute;
	left: -40px;
	top: -40px;
	width: 520px;
	height: 520px;
	max-width: none;
	z-index: 0;
	pointer-events: none;
	-webkit-user-select: none;
	user-select: none;
}
.fcv3 .v3-table {
	position: absolute;
	left: 85px;
	top: 85px;
	width: 270px;
	height: 270px;
	border-radius: 50%;
	background: var(--v3-white);
	box-shadow: 0 28px 56px rgba(78, 26, 61, .14), inset 0 0 0 11px var(--v3-card-2);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	color: var(--v3-ink);
}
/* The disc is painted twice on purpose, and that is not a mistake.
   .v3-table keeps its own background and shadow so the hero is correct on any
   page that has not got the .v3-table-art image in its markup -- the homepage
   content lives in the database (Pages -> Home), not in a theme file, so CSS
   and markup do not deploy together and either one can land first. Where the
   image is present this rule switches the CSS paint off, so only the image
   draws. Where :has() is unsupported nothing switches off and the CSS disc
   simply sits underneath an identical image, which looks the same. */
.fcv3 .v3-table-wrap:has(.v3-table-art) .v3-table {
	background: none;
	box-shadow: none;
}
.fcv3 .v3-table-venue { font-weight: 800; font-size: 19px; letter-spacing: -.02em; margin: 0; }
.fcv3 .v3-table-when {
	font-family: var(--v3-mono);
	font-size: 10px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: rgba(78, 26, 61, .55);
	margin: 7px 0 13px;
}
.fcv3 .v3-chair {
	position: absolute;
	width: 76px;
	height: 76px;
	border-radius: 50%;
	overflow: hidden;
	background: var(--v3-peach);
	box-shadow: 0 10px 20px rgba(78, 26, 61, .16);
}
.fcv3 .v3-chair img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fcv3 .v3-chair--open {
	border: 3px dashed var(--v3-coral);
	background: rgba(240, 133, 92, .08);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--v3-mono);
	font-size: 10px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--v3-coral);
	text-align: center;
	line-height: 1.25;
	box-shadow: none;
	overflow: visible;
	isolation: isolate;
}

/* 15 Sep 2026 -- the "open seat" pulse used to animate box-shadow spread,
   which the compositor cannot handle: Chrome repainted these two hero chairs
   on the main thread every frame, forever. Under Lighthouse's 4x CPU throttle
   that kept the main thread from ever going quiet, so its trace was truncated
   and PageSpeed reported NO_LCP plus an error on every trace-dependent audit.
   Same expanding ring, drawn on a pseudo-element and animated with transform
   and opacity only, so it stays on the compositor. overflow is reopened
   because .v3-chair clips (it crops avatar photos); the open chair holds only
   a text label, so nothing needs clipping. */
.fcv3 .v3-chair--open::after {
	content: "";
	position: absolute;
	inset: -3px;
	border-radius: 50%;
	border: 2px solid rgba(240, 133, 92, .45);
	z-index: -1;
	pointer-events: none;
	animation: v3-pulse 2.4s ease-in-out infinite;
}
@keyframes v3-pulse {
	0%, 100% { transform: scale(1);    opacity: 1; }
	50%      { transform: scale(1.35); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
	.fcv3 .v3-chair--open::after { animation: none; opacity: 0; }
}
.fcv3 .v3-chair-1 { left: 182px; top: 2px; }
.fcv3 .v3-chair-2 { left: 354px; top: 126px; }
.fcv3 .v3-chair-3 { left: 288px; top: 329px; }
.fcv3 .v3-chair-4 { left: 76px;  top: 329px; }
.fcv3 .v3-chair-5 { left: 10px;  top: 126px; }
.fcv3 .v3-table-badge {
	position: absolute;
	left: 0;
	top: 46px;
	background: var(--v3-coral);
	color: #fff;
	font-family: var(--v3-mono);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	padding: 8px 12px;
	border-radius: 4px;
	transform: rotate(-6deg);
	box-shadow: 0 8px 16px rgba(78, 26, 61, .16);
	z-index: 3;
}

/* ==========================================================================
   2. MANIFESTO BAND -- on a light page the seam under the rotated strip
   doesn't need camouflaging the way it did against a dark canvas (see
   .v2-band's comment), so this drops the ink border trick entirely and
   just lets the strip float with its own soft pink shadow.
   ========================================================================== */
.fcv3 .v3-band {
	position: relative;
	z-index: 5;
	margin: 64px 0 -32px;
	transform: rotate(-1deg);
	background: var(--v3-pink);
	color: #fff;
	padding: 15px 0;
	overflow: hidden;
	white-space: nowrap;
	width: 130%;
	margin-left: -15%;
	box-shadow: 0 10px 28px rgba(252, 89, 157, .22);
}
/* 12 Sep 2026: Ari, Solo Travelers -- "There's some white color above the
   ribbon element", then twice more after two wrong fixes. The real cause,
   found by enumerating every matched rule on the band rather than reading
   the stylesheet: line 189's `main.wp-block-group > * + * { margin-top: 0
   !important }` had ALREADY zeroed .v3-band's 64px top margin on every
   page. So the gap was never that margin, and setting margin-top to 0 --
   and then to -28px -- changed precisely nothing, because !important beat
   both. What is actually visible is the band's rotation: at -1deg and 130%
   width its top edge sits ~12px LOWER at the left end than its bounding
   box, so a thin wedge of whatever is behind it shows through above it.
   That is invisible where the section above shares the page background
   (.v3-hero on the homepage, .v3-about-hero on About) and obvious against
   .v3-collab-hero's peach.

   The fix pulls the band up from the HERO's side -- margin-bottom on the
   preceding section -- which the `> * + *` reset does not touch, so no
   second !important is needed. -28px beats half of bandwidth * tan(1deg)
   (~12px at desktop, less when narrower) at every width, and the hero
   takes the overlap back as padding so the space under the button is
   unchanged. */
.fcv3 .v3-collab-hero:has(+ .v3-band) { padding-bottom: 116px; margin-bottom: -28px; }
/* 30 Aug 2026: content grew from 6 short items to 8 (see the template
   comment above the track markup) -- kept the same per-character scroll
   speed rather than the same duration, or the longer list would rush by
   noticeably faster than before. 32s * (~196/~119 weighted chars+icons) */
.fcv3 .v3-band-track { display: inline-flex; animation: v3-slide 54s linear infinite; }
.fcv3 .v3-band span {
	font-family: var(--v3-mono);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	padding: 0 20px;
}
.fcv3 .v3-band .v3-band-x { color: rgba(255, 255, 255, .88); }
@keyframes v3-slide {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
	.fcv3 .v3-band-track { animation: none; }
}

/* ==========================================================================
   3. SPEC
   ========================================================================== */
.fcv3 .v3-spec {
	/* the band above overlaps -32px into this section, so net visible
	   gap under the band is 96-32 = 64px. */
	background: var(--v3-white);
	color: var(--v3-ink);
	padding: 96px 0 64px;
}
/* 30 Aug 2026: Ari -- "What is Friendchise" promoted from a small eyebrow
   label to the section's actual v3-h2 heading (see the markup), and the
   "01 / The unit" / "02 / The rule" / "03 / The end" idx chips removed
   entirely, so the .v3-spec .v3-label and .v3-spec-idx rules that styled
   them are gone too. */
/* 30 Aug 2026 (round 2): Ari -- the row terms (clamp(2.4rem..4.6rem))
   were rendering LARGER than the section's own v3-h2 (clamp(2.1rem
   ..3.8rem) at its clamp max), so "A plan." etc. visually outranked
   "What is Friendchise." above them instead of reading as entries under
   it. Gave the h2 real breathing room from the row list (18px shared
   margin -> 40px, scoped to this section only) and shrank the terms
   well below the heading's size so the hierarchy reads correctly:
   section title, then a list of smaller terms+definitions under it. */
.fcv3 .v3-spec .v3-h2 { margin-bottom: 40px; }
.fcv3 .v3-spec-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px 52px;
	/* was align-items: end -- made sense when the term was the huge
	   ~4.6rem element in the row, but now that it's the smaller label
	   (see .v3-spec-term above) bottom-aligning it against a 3-line
	   definition left an odd gap above it. Top-aligned reads as a
	   proper term/definition pair. */
	align-items: start;
	padding: 20px 0 18px;
	border-bottom: 3px solid var(--v3-ink);
}
.fcv3 .v3-spec-row:first-of-type { border-top: 3px solid var(--v3-ink); }
.fcv3 .v3-spec-term {
	font-size: clamp(1.6rem, 2.8vw, 2.15rem);
	font-weight: 800;
	letter-spacing: -.03em;
	line-height: 1.05;
	margin: 0;
}
.fcv3 .v3-spec-def {
	font-size: 1.05rem;
	line-height: 1.6;
	color: rgba(78, 26, 61, .78);
	margin: 0 0 6px;
}
.fcv3 .v3-spec-not {
	margin-top: 30px;
	font-family: var(--v3-mono);
	font-size: 16px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: rgba(78, 26, 61, .5);
}
.fcv3 .v3-spec-not s { opacity: .5; }

/* ==========================================================================
   4. WHO IT'S FOR
   ========================================================================== */
.fcv3 .v3-who { background: var(--v3-peach); padding: 72px 0 64px; }
.fcv3 .v3-who-list { margin-top: 20px; }
.fcv3 .v3-conf {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 32px;
	align-items: center;
	padding: 16px 0;
	border-top: 2px solid rgba(78, 26, 61, .12);
	cursor: pointer;
	transition: opacity .2s ease;
}
.fcv3 .v3-conf:last-child { border-bottom: 2px solid rgba(78, 26, 61, .12); }
.fcv3 .v3-conf-line {
	font-size: clamp(1.5rem, 3.6vw, 2.7rem);
	font-weight: 800;
	letter-spacing: -.03em;
	line-height: 1.06;
	margin: 0;
	color: rgba(78, 26, 61, .3);
	transition: color .2s ease;
}
.fcv3 .v3-conf-line em { font-style: normal; }
.fcv3 .v3-conf-tag {
	font-family: var(--v3-mono);
	font-size: 10px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: rgba(78, 26, 61, .32);
	white-space: nowrap;
}
.fcv3 .v3-conf-body {
	grid-column: 1 / -1;
	display: none;
	grid-template-columns: 1.25fr .75fr;
	gap: 48px;
	align-items: start;
	padding: 14px 0 22px;
}
.fcv3 .v3-conf.is-open .v3-conf-line { color: var(--v3-ink); }
.fcv3 .v3-conf.is-open .v3-conf-line em { color: var(--v3-coral); }
.fcv3 .v3-conf.is-open .v3-conf-tag { color: var(--v3-coral); }
.fcv3 .v3-conf.is-open .v3-conf-body { display: grid; }
.fcv3 .v3-conf-body > p {
	font-size: 1.08rem;
	line-height: 1.6;
	color: rgba(78, 26, 61, .72);
	margin: 0;
}

/* ---- ticket card ---- */
.fcv3 .v3-ticket {
	background: var(--v3-white);
	color: var(--v3-ink);
	border-radius: 16px;
	padding: 22px 22px 0;
	position: relative;
	box-shadow: 0 16px 32px rgba(78, 26, 61, .1);
}
.fcv3 .v3-ticket-city {
	font-family: var(--v3-mono);
	font-size: 10px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--v3-pink);
	margin: 0 0 10px;
	font-weight: 700;
}
.fcv3 .v3-ticket-venue {
	font-size: 1.3rem;
	font-weight: 800;
	letter-spacing: -.025em;
	line-height: 1.12;
	margin: 0 0 8px;
}
.fcv3 .v3-ticket-when { font-size: .92rem; color: rgba(78, 26, 61, .6); margin: 0 0 18px; }
.fcv3 .v3-ticket-stub {
	border-top: 2px dashed rgba(78, 26, 61, .2);
	margin: 0 -22px;
	padding: 15px 22px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	position: relative;
}
/* the little "hole punch" circles need to match whatever sits behind the
   card so they read as cutouts rather than dots -- unlike Front V2's
   single dark canvas, this page's sections carry different light tints,
   so each context gets its own match instead of one fixed colour. */
.fcv3 .v3-ticket-stub::before,
.fcv3 .v3-ticket-stub::after {
	content: "";
	position: absolute;
	top: -11px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--v3-bg);
}
.fcv3 .v3-ticket-stub::before { left: -10px; }
.fcv3 .v3-ticket-stub::after  { right: -10px; }
.fcv3 .v3-who .v3-ticket-stub::before,
.fcv3 .v3-who .v3-ticket-stub::after { background: var(--v3-peach); }
.fcv3 .v3-feed .v3-ticket-stub::before,
.fcv3 .v3-feed .v3-ticket-stub::after { background: var(--v3-blush); }
.fcv3 .v3-ticket-left {
	font-family: var(--v3-mono);
	font-size: 10px;
	letter-spacing: .1em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--v3-ink);
}
.fcv3 .v3-ticket-host { display: flex; align-items: center; gap: 8px; font-size: .85rem; color: rgba(78, 26, 61, .68); }
.fcv3 .v3-ticket-host img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; }

/* ==========================================================================
   5. HOW IT WORKS

   30 Aug 2026: Ari -- "change this also into the black version just to
   bring some overall contrast." This is the one section on the page that
   runs on Front V2's original dark canvas (--v3-night, same value as
   .fcv2's --v2-ink) rather than the light palette everywhere else, as a
   deliberate single dark beat between the light Spec section above and
   the blush Feed section below. The eyebrow label is gone too (folded
   into the v3-h2, see the markup); every other rule below just has its
   light-on-dark colours swapped for dark-on-light equivalents.
   ========================================================================== */
.fcv3 .v3-how { background: var(--v3-night); color: var(--v3-night-ink); padding: 72px 0 72px; }
.fcv3 .v3-longtable { position: relative; margin-top: 44px; }
.fcv3 .v3-longtable-seats {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	margin-bottom: 14px;
}
.fcv3 .v3-longtable-cluster { display: flex; gap: 12px; }
.fcv3 .v3-longtable-seats .v3-seat { width: 15px; height: 15px; }
.fcv3 .v3-longtable-seats .v3-seat.is-open { border-color: rgba(255, 244, 236, .3); }
.fcv3 .v3-longtable-seats .v3-seat.is-taken {
	background: transparent;
	border: 2px solid rgba(255, 244, 236, .3);
	transition: background .4s ease, border-color .4s ease;
}
.fcv3 .v3-longtable.is-live .v3-longtable-seats .v3-seat.is-taken {
	background: var(--v3-pink-hot);
	border-color: transparent;
}
.fcv3 .v3-longtable-cluster:nth-child(1) .v3-seat { transition-delay: .10s; }
.fcv3 .v3-longtable-cluster:nth-child(2) .v3-seat { transition-delay: .45s; }
.fcv3 .v3-longtable-cluster:nth-child(3) .v3-seat { transition-delay: .80s; }
.fcv3 .v3-longtable-cluster:nth-child(4) .v3-seat { transition-delay: 1.15s; }
@media (prefers-reduced-motion: reduce) {
	.fcv3 .v3-longtable-seats .v3-seat.is-taken {
		background: var(--v3-pink-hot);
		border-color: transparent;
		transition: none;
	}
}
/* 30 Aug 2026: Ari -- "10 of 16 brings no value, remove it." Dropped
   the .v3-longtable-caption line (a live-dot + "X of Y spots taken"
   counter under the seat diagram) from the template; the animated
   seat-fill already says this visually, the number was extra clutter.
   .v3-live-dot itself stays -- it's still used by the Feed section's
   "Open right now" label. */
.fcv3 .v3-how-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 0; }
.fcv3 .v3-step { position: relative; padding-top: 40px; text-align: left; }
.fcv3 .v3-step::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 2px;
	height: 28px;
	background: var(--v3-night-ink);
	opacity: .35;
}
.fcv3 .v3-step-n {
	font-family: var(--v3-mono);
	font-size: 11px;
	letter-spacing: .16em;
	font-weight: 700;
	color: var(--v3-pink-hot);
	margin: 0 0 12px;
}
.fcv3 .v3-step h3 { font-size: 1.3rem; font-weight: 800; letter-spacing: -.025em; margin: 0 0 8px; }
.fcv3 .v3-step p { font-size: .95rem; line-height: 1.55; color: rgba(255, 244, 236, .72); margin: 0; }
.fcv3 .v3-step-dots { display: none; gap: 6px; margin-bottom: 14px; }
.fcv3 .v3-step-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	box-sizing: border-box;
	border: 1.5px solid var(--v3-pink-hot);
	background: transparent;
}
.fcv3 .v3-step-dot.is-filled { background: var(--v3-pink-hot); }

/* 12 Sep 2026: Ari, Solo Travelers -- "I liked the 1-2-3-4 balls here that
   is present in the front page. Bring them here too. Also, make the width
   better aligned for 3 elements now that one is missing." The dot runs
   (1 filled of N above 01, 2 of N above 02, ...) were added on 10 Sep but
   only ever shown <=640px; the homepage keeps that, while any grid marked
   .v3-how-grid--3 shows them at every width instead of the plain ::before
   tick, and tracks its three steps rather than leaving a fourth column of
   dead space on the right. Dot visuals moved up out of the <=640 block so
   both breakpoints share one definition -- the base .v3-step-dots is still
   display:none, so nothing shows unless a rule below opts in. */
.fcv3 .v3-how-grid--3 { grid-template-columns: repeat(3, 1fr); }
.fcv3 .v3-how-grid--3 .v3-step { padding-top: 0; }
.fcv3 .v3-how-grid--3 .v3-step::before { display: none; }
.fcv3 .v3-how-grid--3 .v3-step-dots { display: flex; }
@media (min-width: 641px) {
	/* a touch larger than the mobile run, which sits under much smaller type */
	.fcv3 .v3-how-grid--3 .v3-step-dots { gap: 7px; margin-bottom: 16px; }
	.fcv3 .v3-how-grid--3 .v3-step-dot { width: 9px; height: 9px; }
}

/* ==========================================================================
   6. FEED
   ========================================================================== */
.fcv3 .v3-feed { background: var(--v3-blush); padding: 72px 0 76px; overflow: hidden; }
.fcv3 .v3-live-dot {
	display: inline-block;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--v3-coral);
	margin-right: 8px;
	animation: v3-blink 1.8s ease-in-out infinite;
}
@keyframes v3-blink { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .fcv3 .v3-live-dot { animation: none; } }
.fcv3 .v3-rail {
	overflow: hidden;
	width: 100%;
	padding: 56px 0; /* 7 Sep 2026: Ari -- "The shadow behind these cards has a weird clipping
	                    on the top and bottom edges." .v3-ticket's box-shadow (0 16px 32px)
	                    bleeds up to ~48px below and ~32px above the card once the ±1.4-1.6deg
	                    rotation is factored in, but this container's overflow:hidden (needed
	                    to clip the marquee horizontally) was also clipping that shadow at only
	                    22px of vertical padding. Widened enough to contain the full shadow. */
	-webkit-mask-image: linear-gradient(to right, transparent, #000 64px, #000 calc(100% - 64px), transparent);
	        mask-image: linear-gradient(to right, transparent, #000 64px, #000 calc(100% - 64px), transparent);
	/* Ari, same message: "The top row also ends a bit suddenly. Can you get it to loop nicely
	   in an infinite manner?" The marquee already loops seamlessly (translateX(-50%) over an
	   exactly-doubled card set), but with no fade at the section's edges every card just
	   hard-cuts against the viewport edge, reading as a stopped list rather than a flowing
	   ticker. This mask fades cards to transparent at both edges instead, matching how the
	   two rows already move at different speeds/directions. */
}
.fcv3 .v3-rail-track { display: flex; gap: 22px; width: max-content; animation: v3-slide 46s linear infinite; }
.fcv3 .v3-rail--back .v3-rail-track { animation-direction: reverse; animation-duration: 58s; }
.fcv3 .v3-rail .v3-ticket { width: 300px; flex: 0 0 300px; }
.fcv3 .v3-rail-track > .v3-ticket:nth-child(odd)  { transform: rotate(-1.4deg); }
.fcv3 .v3-rail-track > .v3-ticket:nth-child(even) { transform: rotate(1.6deg); }
@media (prefers-reduced-motion: reduce) {
	.fcv3 .v3-rail-track { animation: none; }
}
.fcv3 .v3-ticket.is-full { opacity: .5; }
.fcv3 .v3-stamp {
	position: absolute;
	top: 16px;
	right: 16px;
	font-family: var(--v3-mono);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--v3-ink);
	border: 2px solid var(--v3-ink);
	border-radius: 6px;
	padding: 4px 8px;
	transform: rotate(-8deg);
	opacity: .5;
}

/* ==========================================================================
   7. PROOF -- the one place a fully saturated colour earns its keep: a
   punch of warmth around real photos of people together, same as Front V2.
   ========================================================================== */
.fcv3 .v3-proof { background: var(--v3-pink); color: #fff; padding: 72px 0; }
.fcv3 .v3-proof .v3-label { color: rgba(255, 255, 255, .78); }
/* 9 Sep 2026: Ari -- "What it actually looks like needs a carousel
   instead of images stacked on top of each other for mobile." Reused
   the exact .fc-carousel/.fc-carousel-track/.fc-carousel-controls
   chrome + interactions.js logic already driving the reviews carousel
   (see section 4's comment: "a fourth carousel needs no JS changes at
   all, just that markup shape") rather than writing new JS.
   9 Sep 2026 (round 2): Ari -- "make the images smaller, every viewport
   is either 1 image (mobile) or 2 images. 6 images in total." Went from
   3 photos in a desktop-only static grid (hidden controls) to 6 photos
   in the SAME carousel at every width -- no more static-grid special
   case. .v3-proof-grid is capped to a 600px max-width and centered
   (rather than stretching to the section's full content width) so two
   1:1 cards plus the gap actually read as "smaller", not just fewer
   per row of a wide track; the <=640px rule further down (sitewide
   mobile breakpoint) drops that to one card per view. See the
   pink-section dot/button color overrides mirroring the .fc-gallery
   ones already used for this exact problem (default carousel chrome
   assumes a light section background; this one's pink like
   .fc-gallery's). scroll-snap-align is "start", not "center" -- with
   exactly 2 cards fitting the capped container, "center" snaps to the
   middle of whichever single card is active and always leaves a sliver
   of a third card peeking at one edge; "start" snaps each pair flush
   to the track's edge so exactly 2 full cards show at a time, with the
   next card fully offscreen until the dot/arrow advances. */
/* 10 Sep 2026: Ari -- the carousel images did not scale well on
   desktop, looking lonely at a fixed 2-up -- wanted it to update
   depending on width: max 4 on desktop, eventually 1 on mobile.
   Widened the cap from 600px (fixed 2-up look) to 860px so 4 cards fit
   comfortably at roughly 200px each, and made the per-card width
   respond at the same 900/640px breakpoints already used elsewhere in
   this file (v3-how-grid, v3-trust-grid, etc: 4 -> 2 -> 1). */
.fcv3 .v3-proof-grid { max-width: 1120px; margin: 28px auto 0; }
.fcv3 .v3-proof-grid .fc-carousel-track {
	display: flex;
	gap: 16px;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	margin: 0 -4px;
	padding: 4px 4px 10px;
}
.fcv3 .v3-proof-grid .fc-carousel-track::-webkit-scrollbar { display: none; }
/* 10 Sep 2026: Ari -- "remove the dots below the carousel." Hid
   .fc-carousel-dots for this carousel only (JS still creates them,
   just not shown) and switched to justify-content: space-between so
   prev/next fall to the row's own edges without the dots' flex:1
   auto holding them apart. */
.fcv3 .v3-proof .fc-carousel-controls { display: flex; max-width: 1120px; margin: 20px auto 0; }
.fcv3 .v3-proof .fc-carousel-dots { display: none; }
.fcv3 .v3-proof .fc-carousel-dots .fc-carousel-dot { background: rgba(255, 255, 255, .45); }
.fcv3 .v3-proof .fc-carousel-dots .fc-carousel-dot:hover { background: rgba(255, 255, 255, .8); }
.fcv3 .v3-proof .fc-carousel-dots .fc-carousel-dot.is-active { background: #fff; }
.fcv3 .v3-proof .fc-carousel-btn:hover { background: #fff; border-color: #fff; color: var(--v3-ink); }
.fcv3 .v3-proof-photo {
	position: relative;
	display: block;
	margin: 0;
	border-radius: 20px;
	overflow: hidden;
	border: 2px solid rgba(255, 255, 255, .28);
	aspect-ratio: 1 / 1;
	flex: 0 0 calc(25% - 12px); /* 4-up above 900px */
	scroll-snap-align: start;
}
.fcv3 .v3-proof-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* ==========================================================================
   8. BRANCHES

   30 Aug 2026: Ari -- the "Friend + franchise" eyebrow and the per-city
   SVG icons are both gone (icons: "terrible"). The .v3-branch-icon rules
   that styled them are removed along with them.
   ========================================================================== */
.fcv3 .v3-branches { background: var(--v3-peach); padding: 68px 0; }
.fcv3 .v3-branch-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin-top: 28px; }
.fcv3 .v3-branch-list > *:nth-child(even) { transform: translateY(26px); }
.fcv3 .v3-branch { border: 2px solid rgba(78, 26, 61, .14); border-radius: 20px; padding: 26px 24px; background: var(--v3-white); }
.fcv3 .v3-branch.is-open { border-color: var(--v3-coral); }
.fcv3 .v3-branch-city { font-size: 1.4rem; font-weight: 800; letter-spacing: -.025em; margin: 0 0 6px; }
.fcv3 .v3-branch-status {
	font-family: var(--v3-mono);
	font-size: 10px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--v3-coral);
	margin: 0;
}
.fcv3 .v3-branch--ask { border-style: dashed; background: transparent; }
.fcv3 .v3-branch--ask a { color: var(--v3-coral); }

/* ==========================================================================
   9. TRUST
   ========================================================================== */
.fcv3 .v3-trust { background: var(--v3-blush); padding: 64px 0; }
.fcv3 .v3-trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; margin-top: 24px; }
.fcv3 .v3-trust-item h4 { font-size: 1.05rem; font-weight: 800; margin: 0 0 8px; }
.fcv3 .v3-trust-item p { font-size: .92rem; line-height: 1.55; color: rgba(78, 26, 61, .58); margin: 0; }
.fcv3 .v3-trust-item::before {
	content: "";
	display: block;
	width: 26px;
	height: 3px;
	background: var(--v3-coral);
	margin-bottom: 16px;
}
/* 10 Sep 2026: Ari -- "Why join Friendchise? block needs a CTA." Reuses
   the sitewide .v3-btn/.v3-btns component (see section 2/hero) rather
   than a one-off button, just centered under the benefits grid instead
   of the hero's left-aligned pair. */
.fcv3 .v3-trust .v3-btns { justify-content: center; margin-top: 36px; }

/* ==========================================================================
   9b. REVIEWS
   30 Aug 2026: "Current site is missing a carousel element for user
   testimonials like the livesite" -- reuses the sitewide .fc-carousel/
   .fc-review markup and interactions.js behaviour as-is (see
   assets/js/interactions.js section 1 -- a carousel needs no JS
   changes, just the [data-fc-carousel]/.fc-carousel-track/
   .fc-carousel-controls shape). Colour needs nothing either:
   --fc-pink/--fc-plum (the controls, dots, hover states) are the exact
   same hex values as --v3-pink/--v3-ink, so those already match.
   Only the card shell gets a v3-scoped nudge below -- the global
   .fc-review is a cool near-white on a hairline cyan border
   (--fc-neutral/#E7F2F2), which reads slightly cold against V3's warm
   cream page. Swapped for the same white-card/soft-shadow language
   every other V3 card already uses (.v3-branch, .v3-trust-item)
   instead of a border. Per Ari: name + country + quote only, no star
   rating, so the .fc-review-stars line is simply omitted from the
   markup rather than hidden in CSS.
   ========================================================================== */
/* 30 Aug 2026 (round 2): Ari -- two follow-ups on this carousel.
   1) "The cards have a weird off background color compared to
   surrounding bg color." The section had no background of its own, so
   it fell through to the page's base cream (--v3-bg, #FFFBF7) --
   nearly the same value as the card's white, so the card read as a
   faint discoloured patch rather than a distinct card. Gave the
   section its own peach tint (same token .v3-branches already uses)
   so the white cards actually pop against it.
   2) "Remove the pagination element (circles), just show the cards."
   Hidden with visibility (not display: none) so the dots keep their
   flex:1 1 auto space in .fc-carousel-controls -- that's what pushes
   the prev/next buttons to the row's outer edges; display:none would
   collapse that gap and bunch both buttons in the middle. */
/* 30 Aug 2026 (round 3): Ari -- "still a shade between the elements."
   The 28px box-shadow blur was wider than the 24px gap the shared
   .fc-carousel-track uses between cards (see section 4 above), so two
   adjacent cards' shadows overlapped IN the gap and visibly darkened
   it instead of showing clean peach through -- confirmed by sampling
   the gap pixels, consistently a few shades darker than the section's
   actual peach. Dropped the bleeding shadow for a plain border instead
   (same move .v3-branch already makes, and border edges don't blur
   into neighbouring cards no matter how tight the gap is). */
/* 31 Aug 2026: Ari -- "put the names at the bottom of the card, makes
   them more in sync." Quote lengths vary a lot even after the 6-line
   clamp (one sentence vs. a near-full paragraph), so the byline used to
   sit directly under whatever the quote's own height happened to be --
   a short quote left its byline high up, a long one pushed it almost to
   the card's edge, and across three cards in a row nothing lined up.
   .fc-carousel-track already stretches every card in a row to match the
   tallest one (flex default align-items: stretch), so turning the card
   itself into a column flex container and pinning the byline to the
   bottom with margin-top: auto anchors every byline to the same row,
   regardless of quote length. Needs !important to beat the shared
   .fc-review-byline { margin-top: 8px !important } rule (section 6). */
.fcv3 .v3-reviews { background: var(--v3-peach); padding: 64px 0; }
.fcv3 .v3-reviews .fc-review {
	background: var(--v3-white);
	border: 2px solid rgba(78, 26, 61, .1);
	border-radius: 18px;
	box-shadow: none;
	display: flex;
	flex-direction: column;
}
.fcv3 .v3-reviews .fc-review-byline { color: var(--v3-ink); margin-top: auto !important; }
.fcv3 .v3-reviews .fc-review p:not(.fc-review-byline) { color: rgba(78, 26, 61, .74); }
.fcv3 .v3-reviews .fc-carousel-dots { visibility: hidden; }

/* ==========================================================================
   10. FOUNDER
   ========================================================================== */
.fcv3 .v3-founder { background: var(--v3-white); color: var(--v3-ink); padding: 72px 0; }
.fcv3 .v3-founder .v3-label { color: var(--v3-pink); }
.fcv3 .v3-founder-row { display: grid; grid-template-columns: 220px 1fr; gap: 52px; align-items: center; }
.fcv3 .v3-founder-photo {
	position: relative;
	width: 200px;
	height: 200px;
	margin: 0 auto;
}
.fcv3 .v3-founder-photo::before {
	content: "";
	position: absolute;
	inset: -34px;
	background: radial-gradient(circle at 50% 50%, rgba(252, 89, 157, .18), transparent 70%);
	pointer-events: none;
	z-index: 0;
}
.fcv3 .v3-founder-img {
	position: relative;
	z-index: 1;
	display: block;
	width: 200px;
	height: 200px;
	object-fit: cover;
	border-radius: 50%;
	border: 4px solid var(--v3-pink);
	box-shadow: 0 14px 32px rgba(78, 26, 61, .16);
}
.fcv3 .v3-founder-tag {
	position: absolute;
	z-index: 2;
	right: -4px;
	bottom: 6px;
	background: var(--v3-coral);
	color: #fff;
	font-family: var(--v3-mono);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	padding: 6px 13px;
	border-radius: 20px;
	transform: rotate(-6deg);
	box-shadow: 0 6px 14px rgba(78, 26, 61, .16);
}
.fcv3 .v3-founder-quote {
	font-size: clamp(1.4rem, 3.2vw, 2.3rem);
	font-weight: 800;
	line-height: 1.16;
	letter-spacing: -.03em;
	margin: 0 0 20px;
}
.fcv3 .v3-founder-sig {
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: var(--v3-mono);
	font-size: 11px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: rgba(78, 26, 61, .5);
	margin: 0;
}
.fcv3 .v3-founder-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--v3-pink);
	display: inline-block;
}
.fcv3 .v3-founder-linkedin {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: rgba(78, 26, 61, .08);
	color: var(--v3-ink);
	transition: background .15s ease, color .15s ease, transform .15s ease;
}
.fcv3 .v3-founder-linkedin svg { width: 13px; height: 13px; display: block; }
.fcv3 .v3-founder-linkedin:hover { background: var(--v3-pink); color: #fff; transform: translateY(-1px); }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
/* 30 Aug 2026 (round 2): Ari, again: "still cuts off on the 2nd circle,
   I want full circles." Traced this to a SECOND, wider gap the first
   fix didn't cover: the old standalone rule right here --
   ".v3-table-wrap { right: -180px; top: 60px; }" at <=1100px -- kept
   the table at its full un-scaled 440px size and just nudged it via
   `right`, which is measured against .v3-hero's own box. Below 1100px
   .v3-hero is narrower than the viewport-plus-440px-table needs, so
   the table's right edge ran past the viewport edge and .fcv3's
   overflow-x: clip cropped it -- same underlying mechanism as the
   chair-2 bug already fixed below for <=900px, just still open for
   901-1100px. Rather than patch `right` again (a magic-number game
   that breaks again at the next width someone tests), extended the
   real fix -- the .v3-table-scale wrapper that gives the table its
   true, final on-screen footprint -- up to this same 1100px
   threshold, so there's no width left where the table can overflow
   its section. It'll render a bit smaller than before in the old
   901-1100px window, but never clipped, which is the point. */
@media (max-width: 1100px) {
	.fcv3 .v3-table-scale {
		position: relative;
		width: 340px;
		height: 340px;
		margin: 44px auto 0;
		overflow: visible;
	}
	.fcv3 .v3-table-scale .v3-table-wrap {
		position: absolute;
		left: 0;
		top: 0;
		right: auto;
		transform: scale(0.7727); /* 340 / 440 */
		transform-origin: top left;
	}
}
@media (max-width: 900px) {
	.fcv3 .v3-hero { padding-top: 48px; }
	.fcv3 .v3-hero h1 { max-width: none; }
	.fcv3 .v3-hero-foot { grid-template-columns: 1fr; align-items: start; }
	.fcv3 .v3-conf-body { grid-template-columns: 1fr; gap: 26px; }
	.fcv3 .v3-how-grid { grid-template-columns: repeat(2, 1fr); gap: 30px; }
	.fcv3 .v3-longtable-seats { padding: 0 2%; }
	.fcv3 .v3-branch-list { grid-template-columns: repeat(2, 1fr); }
	.fcv3 .v3-trust-grid { grid-template-columns: repeat(2, 1fr); }
	.fcv3 .v3-spec-row { grid-template-columns: 1fr; align-items: start; }
	.fcv3 .v3-proof-grid { max-width: 600px; }
	.fcv3 .v3-proof-photo { flex: 0 0 calc(50% - 8px); }
	.fcv3 .v3-proof .fc-carousel-controls { max-width: 600px; }
}
@media (max-width: 640px) {
	.fcv3 .v3-how-grid { grid-template-columns: 1fr; }
	.fcv3 .v3-longtable-seats .v3-seat:nth-child(n+13) { display: none; }
	.fcv3 .v3-branch-list { grid-template-columns: 1fr; }
	.fcv3 .v3-branch-list > *:nth-child(even) { transform: none; }
	.fcv3 .v3-trust-grid { grid-template-columns: 1fr; }
	.fcv3 .v3-founder-row { grid-template-columns: 1fr; }
	.fcv3 .v3-table-scale { width: 240px; height: 240px; margin: 20px auto 12px; }
	.fcv3 .v3-table-scale .v3-table-wrap { transform: scale(0.5455); } /* 240 / 440 */
	.fcv3 .v3-conf-tag { display: none; }
	.fcv3 .v3-proof-photo { flex: 0 0 100%; }
	/* 10 Sep 2026 (round 3): Ari -- "you simply put a circle above the
	   number. I want the other elements there like 1 colored circle + 3
	   non-colored circles above number 01, 2 colored + 2 non-colored
	   above 02, and so on." Reuses the exact same filled/outline dot
	   look as .v3-longtable-seats (is-taken/is-open) above this section,
	   just at a per-step scale of 4 -- markup adds one .v3-step-dots row
	   per step in templates/front-page.html, with N dots carrying
	   .is-filled to match that step's number. Hidden by default (desktop
	   keeps the plain ::before tick); only shown at this breakpoint. */
	.fcv3 .v3-step { padding-top: 0; }
	.fcv3 .v3-step::before { display: none; }
	.fcv3 .v3-step-dots { display: flex; gap: 6px; margin-bottom: 14px; }
	.fcv3 .v3-step-dot {
		width: 7px;
		height: 7px;
		border-radius: 50%;
		box-sizing: border-box;
		border: 1.5px solid var(--v3-pink-hot);
		background: transparent;
	}
	.fcv3 .v3-step-dot.is-filled { background: var(--v3-pink-hot); }
	/* 10 Sep 2026: Ari -- "I want the circular line in the horizontal pane
	   to disappear in mobile since the elements are now present above the
	   number." The .v3-longtable seat-fill diagram sits directly above
	   this section as a separate decorative intro, and on mobile it reads
	   as a duplicate of the per-step dot rows added above. Hidden here
	   only (desktop keeps the animated seat-fill diagram). */
	.fcv3 .v3-longtable { display: none; }
}
/* 9 Sep 2026: Ari -- mobile audit, "some elements don't scale or don't
   function." .v3-longtable-seats's 4 columns are "repeat(4, 1fr)", but
   each column's content (a .v3-longtable-cluster of 4 fixed 15px seats
   + 12px gaps = 96px) sets that track's minimum size, since a bare "1fr"
   track never shrinks below its content's min-content width. Below
   roughly 470px of available width the four 96px clusters (444px total
   with gaps) genuinely don't fit, and because they can't shrink they
   overflow .fcv3's own edge-to-edge clipping instead -- on a 375px phone
   the whole 4th seat cluster renders entirely off-screen, invisible.
   Shrinking the seats/gaps themselves (rather than adding minmax(0,1fr),
   which would leave the dots too cramped to read) keeps every cluster
   fully visible and evenly spaced down to narrow phone widths. */
@media (max-width: 480px) {
	.fcv3 .v3-longtable-seats { gap: 10px; }
	.fcv3 .v3-longtable-cluster { gap: 6px; }
	.fcv3 .v3-longtable-seats .v3-seat { width: 11px; height: 11px; }
}

/* No header override for this page (compare .fcv2's :has() block above) --
   the shared header's own default look, a light neutral bar with plum
   nav text, already matches this page's palette, so the header just
   works unmodified. */

/* ==========================================================================
   17. About page (V3-style rebuild)  (templates/page-about.html only)

   31 Aug 2026: Ari -- "Rebuild the About page with the new layout. Choose
   visually appealing element blocks that you've created thus far."
   Rebuilt on the .fcv3 design system from section 10 rather than a
   parallel copy of it -- the page carries the .fcv3 class directly, so
   every token (--v3-bg/-white/-peach/-blush/-pink/-coral/-ink) and every
   already-styled component (.v3-h2, .v3-lede, .v3-btn, .v3-label,
   .v3-band, .v3-spec-row/-term/-def/-not, .v3-founder-row/-photo/-img/
   -tag/-quote/-sig) is reused as-is below with zero duplication. The
   classes in this section are only the NEW shapes About needed that V3's
   ten homepage sections didn't already have: a text+photo hero (V3's
   hero is a bespoke chair diagram, not reusable for a company-story
   page), a wrapper that puts the founder block on its own tinted
   section instead of white, a split image+text block for the "join the
   community" section, and a centered closing CTA.

   Real content throughout is transcribed verbatim from the live About
   page (itself verified from Hanna's screenshot, 21 Aug) -- restyled
   into the new components, not rewritten. Two photos are still the same
   open items the previous build flagged (hero photo, join-community
   photo) -- kept as the same placeholder + alt-text flag rather than
   guessed at. The founder photo is not a placeholder: it's the real,
   already-in-use asset from the homepage Founder section.

   Section rhythm mirrors section 10's own alternation so the page
   doesn't read as a flat re-skin: cream hero, pink band, white mission/
   vision, peach founder story, blush join-community, white closing CTA.
   ========================================================================== */
.fcv3 .v3-about-hero { background: var(--v3-bg); padding: 64px 0 56px; }
.fcv3 .v3-about-hero-row {
	display: flex;
	flex-wrap: wrap;
	gap: 48px;
	align-items: center;
}
.fcv3 .v3-about-hero-copy { flex: 1 1 420px; min-width: 280px; }
.fcv3 .v3-about-hero-copy .v3-display { font-size: clamp(2.2rem, 5.6vw, 3.6rem); }
.fcv3 .v3-about-hero-copy .v3-lede { max-width: none; margin-top: 18px; }
.fcv3 .v3-about-hero-copy .v3-lede + .v3-lede { margin-top: 10px; }

/* Shared rounded-photo treatment for the two still-pending real photos
   (hero, join-community) -- soft shadow instead of a border so it reads
   fine against any of this page's light section tints, unlike
   .v3-proof-photo's white-tinted border, which was tuned specifically
   for sitting on the fully saturated pink of the Proof section. */
.fcv3 .v3-about-photo { flex: 1 1 380px; min-width: 260px; margin: 0; }
.fcv3 .v3-about-photo img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 24px;
	box-shadow: 0 24px 48px rgba(78, 26, 61, .14);
}

/* ---- Mission & vision -- reuses .v3-spec (section 10) directly, band
   overlap and all, plus .v3-spec-not for the page's own "not a dating
   app" line, split out of the founder story below into its own visual
   beat since About states it as plainly as V3's Spec section does. ---- */

/* ---- Our story -- .v3-founder-row/-photo/-img/-tag/-quote/-sig
   (section 10) reused verbatim; this wrapper only supplies the tinted
   section background .v3-founder itself hardcodes to white, so About's
   rhythm doesn't repeat white right after Mission & vision. A longer
   supporting paragraph sits under the quote -- About has more to say
   than the homepage's one-line aside. */
.fcv3 .v3-about-story { background: var(--v3-peach); padding: 72px 0; }
.fcv3 .v3-about-story .v3-founder-row { align-items: start; }
.fcv3 .v3-founder-more {
	font-size: 1.05rem;
	line-height: 1.6;
	color: rgba(78, 26, 61, .74);
	margin: 0 0 22px;
}

/* ---- Join the community -- split image+text, photo first like the
   live page's own "Join the Friendchise community" section. ---- */
.fcv3 .v3-join { background: var(--v3-blush); padding: 72px 0; }
.fcv3 .v3-join-row {
	display: flex;
	flex-wrap: wrap;
	gap: 48px;
	align-items: center;
}
.fcv3 .v3-join-copy { flex: 1 1 440px; min-width: 280px; }
.fcv3 .v3-join-copy .v3-lede { max-width: none; margin: 14px 0; }
.fcv3 .v3-join .v3-about-photo { flex-basis: 380px; }

/* ---- Closing newsletter CTA -- centered, reuses .v3-h2/.v3-lede/.v3-btn
   with a centering override local to this section. Button still points
   at the sitewide footer form via #newsletter rather than a duplicate
   Brevo embed -- see the template's own end-of-file note for why. ---- */
.fcv3 .v3-about-cta { background: var(--v3-white); padding: 72px 0 80px; text-align: center; }
.fcv3 .v3-about-cta .v3-h2 { margin: 0 auto 14px; }
.fcv3 .v3-about-cta .v3-lede { max-width: 52ch; margin: 0 auto 32px; }
.fcv3 .v3-about-cta .v3-btns { justify-content: center; margin-top: 0; }

@media (max-width: 900px) {
	.fcv3 .v3-about-hero-row { gap: 32px; }
	.fcv3 .v3-about-story .v3-founder-row { grid-template-columns: 1fr; }
	.fcv3 .v3-join-row { flex-direction: column-reverse; }
}


/* ==========================================================================
   18. Contact & Collaborate pages (V3-style rebuild)
   (templates/page-contact.html, templates/page-collaborate-with-friendchise.html)

   7 Sep 2026: Ari -- "Finish the Contact and Collaborate pages also into
   the new layout form" (the .fcv3 design system these homepage/About
   pages already use), verified against the live production pages at
   friendchiseapp.com/contact/ and /collaborate-with-friendchise/ for
   real, current copy. Both pages already existed built against the
   OLDER "fc-*" sitewide component system (section 2/8/16 above) with
   real, previously-verified content -- this is a re-skin onto .fcv3,
   not a content rewrite, reusing every already-shared token and
   component (.v3-h2/.v3-lede/.v3-btn/.v3-label) and adding only the
   handful of new shapes these two pages needed that neither the
   homepage nor About already had: a generic split (copy+photo or
   copy+form) section, a form-card shell for the real WPForms Lite
   embeds (styled by the sitewide, non-.fc-scoped .wpforms-container
   rules in section 6 -- those already apply here untouched), an icon
   grid for Collaborate's two benefit lists, and a logo grid for the
   partner row. Collaborate's own reviews section reuses .v3-reviews
   and the exact fc-carousel/fc-review markup frontv3 already has,
   full 8-review set, not the old page's 2-review static grid -- one
   real carousel component, no duplicate styling needed.

   Section rhythm alternates the same light tints section 10/17 use so
   neither page reads as a flat re-skin: Contact goes cream header ->
   white split; Collaborate goes peach hero -> white why -> blush form
   -> peach who -> white partners -> peach reviews (.v3-reviews already
   sets its own peach background, section 9b above).
   ========================================================================== */

/* ---- Plain page header (Contact's "Contact" title + standfirst -- no
   hero photo/band, matching the live page, which has never had one). ---- */
.fcv3 .v3-page-hero { background: var(--v3-bg); padding: 64px 0 8px; }
.fcv3 .v3-page-hero .v3-lede { max-width: 60ch; margin-top: 14px; }

/* ---- Generic split (copy + photo, or copy + form-card) -- same shape
   as .v3-join/.v3-about-hero-row (section 17) but under a page-agnostic
   name since three different pages now want this exact layout with
   different right-hand content. .v3-split--reverse flips which side the
   media sits on without touching markup order (Contact wants form on
   the right of its own copy sometimes, photo-first other times). ---- */
.fcv3 .v3-split { padding: 64px 0; }
.fcv3 .v3-split-row {
	display: flex;
	flex-wrap: wrap;
	gap: 48px;
	align-items: center;
}
.fcv3 .v3-split-copy { flex: 1 1 420px; min-width: 280px; }
.fcv3 .v3-split-media { flex: 1 1 380px; min-width: 260px; margin: 0; }
.fcv3 .v3-split-media img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 24px;
	box-shadow: 0 24px 48px rgba(78, 26, 61, .14);
}
.fcv3 .v3-split--reverse .v3-split-row { flex-direction: row-reverse; }

/* ---- Form card -- white shell for the real WPForms Lite embed, same
   soft-shadow/rounded language as .v3-about-photo/.v3-branch rather than
   the older .fc-form-card's flat hairline border. The form's own fields
   need no page-specific styling: .wpforms-container rules in section 6
   are global (not .fc-scoped), so they already theme the form wherever
   it's dropped, including here. ---- */
.fcv3 .v3-form-card {
	background: var(--v3-white);
	border-radius: 24px;
	padding: 36px;
	box-shadow: 0 24px 48px rgba(78, 26, 61, .10);
	border: 1px solid rgba(78, 26, 61, .08);
}

/* ---- Icon grid (Collaborate: "Why collaborate?", "Who should
   collaborate with us?") -- square rounded badge instead of the old
   fc-icon-grid's circle, coral-tinted to match V3's warm accent rather
   than the old system's cool pink-tinted circle. ---- */
.fcv3 .v3-icon-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 28px;
	margin-top: 8px;
}

/* 12 Sep 2026: Ari, Solo Travelers -- "Change this grid to 3 columns per
   row. Elements can be a bit wider so text is max. 2-3 rows." The base
   grid is auto-fit/minmax(240px), so on a wide viewport five items pack
   into four columns and leave a lone orphan on the second row, each one
   narrow enough that the copy runs to four lines. Fixed three columns
   give ~330px items -- two or three lines of copy, and a clean 3 + 2.
   Opt-in, so Collaborate's own icon grids keep the auto-fit behaviour. */
.fcv3 .v3-icon-grid--3 { grid-template-columns: repeat(3, 1fr); gap: 34px 40px; }
@media (max-width: 900px) { .fcv3 .v3-icon-grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .fcv3 .v3-icon-grid--3 { grid-template-columns: 1fr; } }
.fcv3 .v3-icon-item { text-align: left; }
.fcv3 .v3-icon-badge {
	width: 52px;
	height: 52px;
	border-radius: 14px;
	background: var(--v3-blush);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 16px;
}
.fcv3 .v3-icon-badge svg { width: 26px; height: 26px; stroke: var(--v3-coral); }
.fcv3 .v3-icon-item h4 { font-size: 1.05rem; font-weight: 800; margin: 0 0 6px; }
.fcv3 .v3-icon-item p { font-size: .95rem; line-height: 1.55; color: rgba(78, 26, 61, .68); margin: 0; }

/* ---- Collaborate hero -- peach-tinted split, same shape as the generic
   .v3-split above, just its own background so the page opens on a tint
   rather than white. ---- */
.fcv3 .v3-collab-hero { background: var(--v3-peach); padding: 64px 0; }

/* ---- Partner logos -- rounded white cards on a light section, same
   card language as .v3-branch/.v3-trust-item, replacing the old
   fc-partners-row's plain ungrouped row so each logo reads as its own
   tile rather than floating on bare page background. ---- */
.fcv3 .v3-partners { background: var(--v3-white); padding: 56px 0; }
.fcv3 .v3-partners-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 20px;
	margin-top: 28px;
}
.fcv3 .v3-partner-logo {
	border: 2px solid rgba(78, 26, 61, .1);
	border-radius: 16px;
	background: var(--v3-white);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	margin: 0;
	min-height: 100px;
}
.fcv3 .v3-partner-logo img { max-width: 100%; max-height: 56px; width: auto; height: auto; object-fit: contain; }

@media (max-width: 781px) {
	.fcv3 .v3-split-row,
	.fcv3 .v3-collab-hero .v3-split-row {
		flex-direction: column;
	}
}


/* ==========================================================================
   19. Blog index (V3-style rebuild)
   (templates/home.html -- the real /blog/ posts index)

   7 Sep 2026: Ari -- "Make it into a best practice blog pages site with
   a hero section for the latest article and then a grid with pagination."
   Rebuilt off the 21 Aug "fc-*" flat-grid build (section 7 above, left
   untouched -- still used by archive.html/index.html, out of scope here)
   onto .fcv3, matching Home/About/Contact/Collaborate.

   The featured hero reuses .v3-split/.v3-split-row/.v3-split-copy/
   .v3-split-media wholesale (section 18) -- only the meta row and the
   section's own background are new here. The grid below is a genuinely
   new, warmer card design (.v3-post-card*) rather than a re-skin of the
   old .fc-post-card, since Ari asked for this to read as a real
   "best-practice" rebuild, not a coat of paint on the old grid.
   ========================================================================== */

/* ---- Featured hero section background ---- */
.fcv3 .v3-blog-hero { background: var(--v3-peach); }

/* ---- Featured hero meta row (date + category, between excerpt and the
   "Read the article" button) ---- */
.fcv3 .v3-blog-featured-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	align-items: center;
	font-family: var(--v3-mono);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: rgba(78, 26, 61, .5);
	margin: 20px 0 32px;
}
.fcv3 .v3-blog-featured-meta .wp-block-post-terms a {
	color: var(--v3-coral);
	text-decoration: none;
}
.fcv3 .v3-blog-featured-meta .wp-block-post-terms a:hover {
	text-decoration: underline;
}

/* ---- Grid section ---- */
.fcv3 .v3-blog-grid-section {
	background: var(--v3-white);
	padding: 72px 0 88px;
}

.fcv3 .v3-post-grid {
	gap: 32px;
	margin-top: 8px;
}

.fcv3 .v3-post-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--v3-bg);
	border: 1px solid rgba(78, 26, 61, .08);
	border-radius: 20px;
	overflow: hidden;
	transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.fcv3 .v3-post-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 16px 32px rgba(78, 26, 61, .12);
	border-color: rgba(240, 133, 92, .4);
}

.fcv3 .v3-post-card-image {
	margin: 0 !important;
}
.fcv3 .v3-post-card-image img {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
}

/* A post with no featured image still needs the card to look deliberate
   rather than truncated -- same reasoning as the old .fc-post-card-body,
   carried over here. */
.fcv3 .v3-post-card-body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	gap: 0;
	padding: 24px;
}

.fcv3 .v3-post-card-date {
	font-family: var(--v3-mono);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--v3-coral);
	margin: 0 0 10px !important;
}

.fcv3 .v3-post-card-title {
	font-size: 1.2rem;
	line-height: 1.35;
	font-weight: 800;
	margin: 0 0 10px !important;
}
.fcv3 .v3-post-card-title a {
	color: var(--v3-ink);
	text-decoration: none;
}
.fcv3 .v3-post-card-title a:hover {
	color: var(--v3-coral);
}

.fcv3 .v3-post-card-excerpt {
	font-size: 15px;
	line-height: 1.6;
	color: rgba(78, 26, 61, .68);
	margin: 0 !important;
}
.fcv3 .v3-post-card-excerpt .wp-block-post-excerpt__more-text {
	margin-top: 12px;
	display: inline-block;
}

/* ---- Pagination ---- */
.fcv3 .v3-pagination {
	margin-top: 56px;
	gap: 8px;
	align-items: center;
}
.fcv3 .v3-pagination .page-numbers,
.fcv3 .v3-pagination .wp-block-query-pagination-previous,
.fcv3 .v3-pagination .wp-block-query-pagination-next {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	padding: 10px 16px;
	border-radius: 999px;
	border: 2px solid rgba(78, 26, 61, .12);
	color: var(--v3-ink);
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.fcv3 .v3-pagination .page-numbers:hover,
.fcv3 .v3-pagination .wp-block-query-pagination-previous:hover,
.fcv3 .v3-pagination .wp-block-query-pagination-next:hover {
	border-color: var(--v3-coral);
	color: var(--v3-coral);
}
.fcv3 .v3-pagination .page-numbers.current {
	background: var(--v3-pink);
	border-color: var(--v3-pink);
	color: #fff;
}
.fcv3 .v3-pagination .page-numbers.dots {
	border-color: transparent;
}

@media (max-width: 781px) {
	.fcv3 .v3-blog-hero .v3-split-row {
		flex-direction: column;
	}
	.fcv3 .v3-blog-grid-section {
		padding: 48px 0 64px;
	}
}


/* ---- 19b. Blog hero title/lede -- merged into the featured-post section
   (V3-style rebuild follow-up)

   7 Sep 2026: Ari -- "The page's title doesn't flow well into the hero."
   The title+lede used to be their own .v3-page-hero section (cream bg)
   sitting directly on the featured post's own peach-bg section right
   below it -- a hard color seam with barely any gap, reading as two
   stacked blocks rather than one hero moment. Fixed in
   templates/home.html by moving the title+lede INSIDE the same
   .v3-blog-hero section as the featured post, wrapped in this
   .v3-blog-hero-intro div, with real margin below it so "Blog" -> lede
   -> latest article now flows as one continuous panel instead of two
   abutting ones. .v3-page-hero itself is untouched -- Contact/
   Collaborate still use it as their own page header, unaffected by this. */
.fcv3 .v3-blog-hero-intro {
	max-width: 640px;
	margin: 0 0 48px;
}
.fcv3 .v3-blog-hero-intro .v3-h2 {
	margin-bottom: 14px;
}
.fcv3 .v3-blog-hero-intro .v3-lede {
	max-width: 60ch;
}


/* ==========================================================================
   20. Single article: edited date, two-column layout, sticky CTA, author box
   (templates/single.html)

   7 Sep 2026: Ari -- "Update the blog post singlepage page's layout...
   Make sure it includes the create date, edited date, author name, reading
   time, summary and auto-filling table of contents (h2 headers only) and an
   author box at the end. I also want a sticky CTA on the right side in
   desktop."

   Builds on section 7's article chrome (.fc-article-title, .fc-article-meta,
   .fc-article-image, etc) rather than replacing it -- this section only adds
   what's new: the "edited" meta item, the two-column body, the sidebar CTA,
   and the author box. See templates/single.html's own trailing comment for
   the full reasoning, especially why the edited-date item is a plain
   paragraph rather than a wp:shortcode block.
   ========================================================================== */

/* ---- "Updated d.m.Y" meta item -- hidden entirely when the shortcode
   returned an empty string (post never edited after publishing). Relies on
   the paragraph block serializing with no whitespace inside the tag; see
   single.html's comment. */
.fc-article-meta .fc-article-updated:empty {
	display: none;
}
.fc-article-meta .fc-article-updated {
	font-size: 12px; /* kept in sync with .fc-article-date/-author/wp-block-shortcode above -- see the one-row fix note on .fc-article-meta. */
	font-weight: 600;
	letter-spacing: .025em;
	text-transform: uppercase;
	color: #6E5B68;
}

/* ---- Two-column article body ---- */
.fc-article-layout-row {
	display: flex;
	align-items: stretch;
	gap: 48px;
}

.fc-article-main {
	flex: 1 1 0;
	min-width: 0;
}

/* 7 Sep 2026 fix: Ari -- "the text's spacing etc. in articles is really
   tight... more airy between paragraphs." Site-wide blockGap is
   deliberately 0 (theme.json), so most sections control their own gaps
   explicitly -- but wp:post-content inherited that same 0 gap, collapsing
   spacing between paragraphs/headings/lists in the actual article prose
   down to nothing. Scoped to .fc-article-main .entry-content only, so no
   other blockGap:0-dependent layout on the site (which all rely on that
   0 default) is affected. */
.fc-article-main .entry-content > * {
	margin-top: 0;
	margin-bottom: 1.4em;
}
.fc-article-main .entry-content > *:last-child {
	margin-bottom: 0;
}
.fc-article-main .entry-content > h2,
.fc-article-main .entry-content > h3 {
	margin-top: .6em;
}

.fc-article-sidebar {
	flex: 0 0 300px;
	width: 300px;
}

/* ---- Sticky CTA card ----
   7 Sep 2026 fix: the "Find a branch" button was rendering flat dark grey
   (#32373c, WordPress core's own default button color) instead of the
   site's real brand button -- every OTHER pink/bordered/shadowed button on
   this site gets that look from a rule scoped to ITS OWN section
   (.fc-hero .wp-block-button__link, .fc-live .wp-block-button__link, etc),
   not from a sitewide default, so a plain wp:button with no ancestor match
   just falls through to core's fallback. Given its own scoped rule below,
   matching the same recipe (pink fill, plum border, hard offset shadow)
   used everywhere else on the site. */
.fc-sticky-cta {
	position: sticky;
	top: 32px;
	background: var(--fc-cream);
	border: 1px solid rgba(78, 26, 61, .14);
	border-radius: 18px;
	padding: 28px 24px;
	box-shadow: 0 10px 28px rgba(78, 26, 61, .08);
}
.fc-sticky-cta-label {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--fc-pink);
	margin: 0 0 8px !important;
}
.fc-sticky-cta-title {
	font-size: 1.25rem;
	line-height: 1.3;
	font-weight: 700;
	color: var(--fc-plum);
	margin: 0 0 12px !important;
}
.fc-sticky-cta-copy {
	font-size: 14.5px;
	line-height: 1.55;
	color: #6E5B68;
	margin: 0 0 20px !important;
}
.fc-sticky-cta .wp-block-buttons {
	margin: 0 !important;
}
.fc-sticky-cta .wp-block-button {
	margin: 0 !important;
	width: 100%;
}
.fc-sticky-cta .wp-block-button__link {
	display: flex;
	width: 100%;
	justify-content: center;
	text-align: center;
	background: var(--fc-pink);
	color: #fff;
	border: 2px solid var(--fc-plum);
	border-radius: var(--fc-btn-radius);
	padding: 13px 20px;
	font-weight: 700;
	font-size: 15px;
	box-shadow: 4px 4px 0 var(--fc-btn-shadow);
	transition: background-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.fc-sticky-cta .wp-block-button__link:hover {
	background: var(--fc-pink-dark);
	color: #fff;
	transform: translate(2px, 2px);
	box-shadow: 2px 2px 0 var(--fc-btn-shadow);
}
.fc-sticky-cta .wp-block-button__link:active {
	transform: translate(4px, 4px);
	box-shadow: 0 0 0 var(--fc-btn-shadow);
}

/* ---- Signup section (optional, per-post) ----
   7 Sep 2026: Ari -- wants "above the author box... a special place for
   a heading (h2), text, and a form short code like [the Las Palmas
   co-living post]... it should look nicer than what the current format
   is." That reference page places a bare, totally unstyled Fluent Forms
   embed directly in post content; this is the same idea (any form
   shortcode, e.g. [fluentform id="7"] or [wpforms id="5"]) but given
   real styling via the fc_signup_section shortcode (inc/article-elements.php),
   which renders nothing unless an editor has set a heading in the post's
   meta box -- see that file. The generic input/select/textarea/button
   resets below aren't scoped to any one form plugin, since the field is
   a free-text shortcode and could be Fluent Forms, WPForms, or anything
   else shortcode-based. */
.fc-signup-section {
	margin: 48px 0;
	background: var(--fc-cream);
	border: 1px solid rgba(78, 26, 61, .14);
	border-radius: 18px;
	padding: 40px 32px;
}
.fc-signup-inner {
	max-width: 560px;
	margin: 0 auto;
	text-align: center;
}
.fc-signup-heading {
	font-size: 1.6rem;
	line-height: 1.25;
	font-weight: 700;
	color: var(--fc-plum);
	margin: 0 0 12px !important;
}
.fc-signup-text {
	font-size: 15.5px;
	line-height: 1.6;
	color: #6E5B68;
	margin: 0 0 24px !important;
}
.fc-signup-form {
	text-align: left;
}
.fc-signup-form label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: var(--fc-plum);
	margin: 0 0 6px;
}
.fc-signup-form input[type="text"],
.fc-signup-form input[type="email"],
.fc-signup-form input[type="tel"],
.fc-signup-form input[type="url"],
.fc-signup-form input[type="number"],
.fc-signup-form select,
.fc-signup-form textarea {
	display: block;
	width: 100%;
	padding: 12px 14px;
	margin: 0 0 14px;
	font-size: 15px;
	font-family: inherit;
	color: var(--fc-plum);
	background: #fff;
	border: 1px solid rgba(78, 26, 61, .2);
	border-radius: 10px;
	box-sizing: border-box;
}
.fc-signup-form button,
.fc-signup-form input[type="submit"],
.fc-signup-form .ff-btn-submit {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	background: var(--fc-pink);
	color: #fff !important;
	border: 2px solid var(--fc-plum);
	border-radius: var(--fc-btn-radius);
	padding: 13px 28px;
	font-weight: 700;
	font-size: 15px;
	cursor: pointer;
	box-shadow: 4px 4px 0 var(--fc-btn-shadow);
	transition: background-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.fc-signup-form button:hover,
.fc-signup-form input[type="submit"]:hover,
.fc-signup-form .ff-btn-submit:hover {
	background: var(--fc-pink-dark);
	transform: translate(2px, 2px);
	box-shadow: 2px 2px 0 var(--fc-btn-shadow);
}
@media (max-width: 782px) {
	.fc-signup-section {
		padding: 32px 20px;
	}
}

/* ---- Author box ----
   Switched from three separate blocks (wp:avatar + wp:post-author-name +
   wp:post-author-biography) to a single wp:post-author block after
   wp:avatar rendered a genuinely empty <div></div> live -- see
   single.html's comment. wp:post-author generates its own sub-element
   classes (wp-block-post-author__avatar/__content/__byline/__name/__bio),
   which is what these rules target; .fc-author-box itself is just the
   className passed to that block, carrying the spacing/divider. */
.fc-author-box {
	align-items: flex-start;
	margin-top: 48px;
	padding-top: 32px;
	border-top: 1px solid var(--fc-line);
	gap: 18px;
}
.fc-author-box .wp-block-post-author__avatar {
	flex: 0 0 auto;
}
.fc-author-box .wp-block-post-author__avatar img {
	display: block;
	border-radius: 50%;
}
.fc-author-box .wp-block-post-author__content {
	flex: 1 1 auto;
	min-width: 0;
}
.fc-author-box .wp-block-post-author__byline {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--fc-pink);
	margin: 0 0 4px !important;
}
.fc-author-box .wp-block-post-author__name {
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--fc-plum);
	margin: 0 0 6px !important;
}
.fc-author-box .wp-block-post-author__bio {
	font-size: 15px;
	line-height: 1.6;
	color: #6E5B68;
	margin: 0 !important;
}

/* ---- Responsive: collapse to one column, CTA sits below the article
   instead of stacking beside it, and stops being sticky (nothing to pin
   against once it's no longer beside a long scrolling column). ---- */
@media (max-width: 960px) {
	.fc-article-layout-row {
		flex-direction: column;
		gap: 32px;
	}
	.fc-article-sidebar {
		flex: 1 1 auto;
		width: 100%;
	}
	.fc-sticky-cta {
		position: static;
	}
}

/* ==========================================================================
   21. Single article, V3 pass -- bring the article template onto the same
   visual language as the front page, WITHOUT giving every element the
   same treatment.
   (templates/single.html)

   12 Sep 2026 (round 1): Ari -- "kinda blah, doesn't match the artistic
   punch of the frontpage." Re-skinned onto .fcv3 tokens.

   12 Sep 2026 (round 2): Ari -- "It's AI slop all over the place." The
   round-1 pass was the actual problem: the summary box, FAQ, signup
   section, sticky CTA and author box were ALL rendered as the same white
   rounded card with a 2px border and a hard offset coral shadow. Five
   components wearing one costume reads as generated, not designed --
   "be inspired to create new, not just make something existing simply
   bigger."

   The organising rules this round, all borrowed from what the homepage
   actually does rather than invented here:

   1. ONE saturated colour panel per page, and it's the thing you're
      meant to click. Straight out of the homepage's PROOF section
      (.v3-proof: "the one place a fully saturated colour earns its
      keep" -- pink fill, white type). That's the sticky CTA now.
   2. The hard offset shadow is RESERVED for that panel and for buttons.
      Nothing else on the page gets one, so it means "interactive"
      instead of meaning "this is a box."
   3. Editorial structure is made of RULES, not boxes -- lifted from the
      homepage's "What is Friendchise" spec rows (.v3-spec-row: 3px ink
      border-top/bottom, no card at all). The summary/contents block and
      the author block are built this way, so they read as typography
      rather than as more furniture.
   4. Coral is never text on a light background and never a background
      behind white text (Ari: "the orange+white color is a terrible combo
      in text and bg color"). It survives only as rules, offset shadows
      and small geometric accents. Body copy accents are ink; the brand
      warmth is carried by the pink panel.
   5. Corners: sharp for structural/editorial elements (hero, table,
      rules), and a restrained 6px -- matching .v3-btn's own radius --
      for the filled panels. No more 18-20px pillow cards.

   templates/single.html carries .fcv3 on <main>, so every .fcv3-scoped
   rule (tokens, .v3-label, .v3-btn, etc) is live here. Sections 4, 7 and
   20 above are untouched: those bare, non-.fcv3 selectors are the
   fallback layer for a post rendered through an older template, and are
   literally what paints before these more specific rules override.
   ========================================================================== */

/* ---- Page gutter.
   12 Sep 2026: Ari -- "the blog in general doesn't seem to have any
   spacing around the edges for mobile", and the related grid at the foot
   was "edge-to-edge, feeling claustrophobic".

   A constrained layout only ever gives you `max-width` + auto side
   margins, so it produces a gutter by CENTRING -- which silently stops
   working the moment the viewport is narrower than the contentSize
   (1040px here). Below that every section rendered flush to both edges:
   measured at 375px, body copy, meta row and the related grid all sat at
   x=0. These three wrappers are the article's own top-level sections, so
   one padding rule on them covers the whole page at every width. It is
   deliberately NOT inside a media query -- at wide widths centring
   absorbs it (the body column stays at x=113 on a 1280 viewport), and
   between 1040px and ~1090px it is the only thing keeping the text off
   the edge. The hero is left out on purpose: its image is meant to bleed,
   and its own inner padding (matched to this value below) insets the
   title. ---- */
.fcv3 .fc-article-head,
.fcv3 .fc-article-layout,
.fcv3 .fc-article-foot {
	padding-left: var(--fc-gutter, 24px);
	padding-right: var(--fc-gutter, 24px);
}

/* ---- Hero: sharp corners. The hero butts straight up against the
   header with no gap, so a rounded top edge just reads as a rendering
   mistake (Ari: "the curved top corners are pointless because it
   connects directly on to the header"). ---- */
.fcv3 .fc-article-hero {
	border-radius: 0;
}
.fcv3 .fc-article-hero .fc-article-title {
	font-size: clamp(2rem, 4.6vw, 3.4rem);
	font-weight: 800;
	letter-spacing: -.03em;
	line-height: .98;
}

/* ---- Category kicker: MOVED OUT of the hero overlay in
   templates/single.html and down under the image, into the meta row.
   As small pink mono type sitting on top of an arbitrary photo it
   disappeared into whatever was behind it (Ari: "put the blog category
   somewhere different that doesn't blend with the background"). A solid
   ink chip can't blend into any photo, and it doesn't compete with the
   pink CTA panel further down the page. ---- */
/* The chip and the meta line now share one flex row (Ari: "have the blog
   and meta data all on the same row"), so .fc-article-headrow owns the
   spacing and the chip itself needs no margin.

   Historical note worth keeping: while this block sat directly inside the
   constrained .fc-article-head, a `margin: 0 0 16px` shorthand here broke
   it badly -- WordPress positions a constrained child with `margin-left:
   auto; margin-right: auto`, and the shorthand wiped those autos out,
   dumping the chip at x=0 while the meta row sat at x=223. The chip
   treatment lives on the term links rather than this wrapper, which also
   means several categories render as several chips. */
.fcv3 .fc-article-headrow {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 18px;
}
.fcv3 .fc-article-kicker {
	/* Flex, not the default block: as a block this wrapper inherits the
	   body's 28.8px line-height and its inline-block chip then sits on the
	   text baseline -- 4px of slack above it and 1.3px below. The row
	   centres the WRAPPER, so the visible chip landed 1.36px low against
	   the meta text beside it. Flex removes the baseline/descender slack,
	   collapsing the wrapper onto the chip's real box. */
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0;
}
.fcv3 .fc-article-kicker a {
	display: inline-block;
	padding: 7px 12px 6px;
	background: var(--v3-ink);
	color: var(--v3-night-ink);
	font-family: var(--v3-mono);
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
	line-height: 1;
	text-decoration: none;
}
.fcv3 .fc-article-kicker a:hover {
	background: var(--v3-pink);
	color: #fff;
}
/* A post with no category leaves wp:post-terms rendering an empty
   wrapper -- collapse it rather than printing an empty chip. */
.fcv3 .fc-article-kicker:empty { display: none; margin: 0; }

/* ---- Meta row: quiet mono, coral dot separators. ---- */
.fcv3 .fc-article-meta {
	font-family: var(--v3-mono);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .06em;
	color: rgba(78, 26, 61, .55);
}
.fcv3 .fc-article-meta > * + *::before {
	background: var(--v3-coral);
}
.fcv3 .fc-article-date,
.fcv3 .fc-article-author,
.fcv3 .fc-article-meta .fc-article-updated,
.fcv3 .fc-article-meta .wp-block-shortcode {
	font-family: var(--v3-mono);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .06em;
	color: rgba(78, 26, 61, .55);
}
.fcv3 .fc-article-author::before { background: var(--v3-coral); }

/* ---- Body copy. The decorative coral dash that used to hang off every
   h2 is gone (Ari: "the line before the heading brings nothing, remove
   it") -- the headings carry themselves on weight and tracking. ---- */
.fcv3 .fc-article-main .entry-content > h2 {
	font-size: 1.75rem;
	font-weight: 800;
	letter-spacing: -.025em;
	line-height: 1.2;
	color: var(--v3-ink);
}
.fcv3 .fc-article-main .entry-content > h3 {
	font-size: 1.25rem;
	font-weight: 700;
	letter-spacing: -.015em;
	color: var(--v3-ink);
}

/* Inline links: ink type with a pink underline, rather than coral type.
   Coral text on a cream page was both the weakest contrast on the page
   and the exact combination Ari called out. */
.fcv3 .fc-article-main .entry-content a {
	color: var(--v3-ink);
	text-decoration-line: underline;
	text-decoration-color: var(--v3-pink);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}
.fcv3 .fc-article-main .entry-content a:hover {
	color: var(--fc-pink-dark);
	text-decoration-color: var(--fc-pink-dark);
}
/* In-content wp:button links are not inline text links -- they set only a
   background colour on the block itself, so the rule above was landing
   coral type on a saturated pink fill with no contrast at all. */
.fcv3 .fc-article-main .entry-content .wp-block-button__link {
	color: #fff;
	text-decoration: none;
}
.fcv3 .fc-article-main .entry-content .wp-block-button__link:hover {
	color: #fff;
}

/* Pull quotes: the homepage's confession voice, scaled to body copy. */
.fcv3 .fc-article-main .entry-content blockquote {
	position: relative;
	margin: 1.8em 0;
	padding: 4px 0 4px 28px;
	border-left: 4px solid var(--v3-coral);
}
.fcv3 .fc-article-main .entry-content blockquote p {
	font-size: 1.3rem;
	font-weight: 700;
	letter-spacing: -.015em;
	line-height: 1.35;
	color: var(--v3-ink);
	margin: 0 !important;
}
.fcv3 .fc-article-main .entry-content blockquote cite {
	display: block;
	margin-top: 10px;
	font-family: var(--v3-mono);
	font-size: 12px;
	font-weight: 600;
	font-style: normal;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: rgba(78, 26, 61, .5);
}

/* ---- Tables: no card, no radius, no vertical rules. The previous pass
   wrapped the table in a rounded, overflow-hidden border, which clipped
   the cell borders mid-stroke -- Ari: "you have black lines that simply
   end with the rounded corner. Don't even round the corners." Rebuilt as
   a plain editorial table: a mono header over a heavy ink rule, hairline
   row dividers, and nothing else. Cell borders are explicitly zeroed
   first, because WordPress core's own table-block styles put a 1px
   border on every cell (that's where the dark grid came from -- this
   file had no table rules at all before now). ---- */
.fcv3 .fc-article-main .entry-content figure.wp-block-table {
	overflow-x: auto;
}
.fcv3 .fc-article-main .entry-content table {
	width: 100%;
	border: 0;
	border-collapse: collapse;
	border-radius: 0;
	margin: 1.8em 0;
	font-size: 15.5px;
}
.fcv3 .fc-article-main .entry-content table th,
.fcv3 .fc-article-main .entry-content table td {
	border: 0;
	border-bottom: 1px solid rgba(78, 26, 61, .1);
	padding: 15px 28px 15px 14px;
	text-align: left;
	vertical-align: top;
}
/* First cell of each row sits flush with the body text's left edge, so the
   table lines up with the column it interrupts; the rest get real gutters
   so adjacent columns stop reading as one block of prose. */
.fcv3 .fc-article-main .entry-content table th:first-child,
.fcv3 .fc-article-main .entry-content table td:first-child {
	padding-left: 0;
}
.fcv3 .fc-article-main .entry-content table th:last-child,
.fcv3 .fc-article-main .entry-content table td:last-child {
	padding-right: 0;
}
/* 12 Sep 2026: Ari -- "the table header row's font is hard to read, it's
   small and the rows/columns blend together visually." The header was
   10.5px mono at 60% ink, which is caption-sized and washed out for what
   is actually a column title. Now 12.5px, full-strength ink, tighter
   tracking, over the same heavy rule. */
.fcv3 .fc-article-main .entry-content table th {
	font-family: var(--v3-mono);
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--v3-ink);
	padding-bottom: 12px;
	border-bottom: 2px solid var(--v3-ink);
}
.fcv3 .fc-article-main .entry-content table td {
	color: var(--v3-ink);
	line-height: 1.5;
}
/* Banded rows do the row-separation work that vertical rules used to do
   badly -- a tint rather than a grid, so nothing has an edge to clip. */
.fcv3 .fc-article-main .entry-content table tbody tr:nth-child(even) td {
	background: rgba(78, 26, 61, .045);
}
/* The first column is the row's label, so it carries the weight. */
.fcv3 .fc-article-main .entry-content table td:first-child {
	font-weight: 700;
}
.fcv3 .fc-article-main .entry-content table tr:last-child td {
	border-bottom: 0;
}

/* ---- Summary + contents: NOT a card.
   This is the homepage's spec-row treatment (.v3-spec-row -- 3px ink
   rules, no box, no fill, no shadow) applied to the article's opening
   brief. It sets the reader up in the page's own voice instead of being
   a fourth white rectangle. Class names are untouched
   (.fc-summary-box/.fc-kicker/.fc-toc*) so the 26 existing posts need no
   markup changes. ---- */
.fcv3 .fc-summary-box {
	background: var(--v3-ink);
	color: var(--v3-night-ink);
	border: 0;
	border-radius: 0;
	box-shadow: none;
	padding: 32px 34px 34px;
}
.fcv3 .fc-kicker {
	font-family: var(--v3-mono);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--v3-pink-hot);
	margin-bottom: 16px;
}
/* With no box around it, the summary paragraph itself has to carry the
   emphasis -- set a step above body copy. */
.fcv3 .fc-summary-box > p:not(.fc-kicker):not(.fc-toc-title) {
	font-size: 1.1rem;
	line-height: 1.6;
	color: var(--v3-night-ink);
	margin-bottom: 0 !important;
}
/* 12 Sep 2026: Ari -- "the ticket-esque shape is great for the CTA. Copy
   the element for the quick summary and ToC where the dividing lines and
   small indent divides the summary and ToC." Same perforation device as
   the sticky CTA: a dashed tear line with a notch bitten out of each edge
   of the panel, here splitting the summary from the contents list. The
   notches are offset by the panel's own horizontal padding (34px) plus
   half the circle (10px). */
.fcv3 .fc-toc-title {
	position: relative;
	font-family: var(--v3-mono);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--v3-pink-hot);
	margin-top: 28px !important;
	padding-top: 26px;
	border-top: 2px dashed rgba(255, 244, 236, .38);
}
.fcv3 .fc-toc-title::before,
.fcv3 .fc-toc-title::after {
	content: "";
	position: absolute;
	top: -11px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #FFFBF7; /* --v3-bg: the page the panel sits on */
}
.fcv3 .fc-toc-title::before { left: -44px; }
.fcv3 .fc-toc-title::after { right: -44px; }
/* Numbered mono index instead of pink dots: it reads as a contents list
   at a glance, and it's the one place the article can echo the
   homepage's 01/02/03 counting without adding another shape. */
/* 12 Sep 2026: Ari -- "the hover effect isn't very clear, maybe underline
   it when someone hovers the ToC links?"

   That needed the numeral moved off the link first. It used to be the
   link's own ::before, i.e. part of the anchor's content -- and a
   text-decoration set on an element is drawn across all of its in-flow
   descendants, with no way for a descendant to opt out (you cannot
   "un-underline" part of a decorated element). So underlining the link
   would have underlined "01" and the gap along with the title. The
   counter now hangs off the <li> as an absolutely positioned marker, the
   anchor goes back to being plain inline text, and the underline lands on
   the title alone. Both share --fc-toc-line so the numeral stays locked
   to the title's first line however many lines the title wraps to. */
.fcv3 .fc-toc {
	counter-reset: fc-toc;
	--fc-toc-line: 23px;
}
.fcv3 .fc-toc li {
	counter-increment: fc-toc;
	position: relative;
	padding: 10px 0 10px 34px;
	border-bottom: 1px solid rgba(255, 244, 236, .15);
}
.fcv3 .fc-toc li:last-child { border-bottom: 0; }
.fcv3 .fc-toc li::before {
	content: counter(fc-toc, decimal-leading-zero);
	position: absolute;
	left: 0;
	top: 10px;
	font-family: var(--v3-mono);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .06em;
	line-height: var(--fc-toc-line);
	color: var(--v3-pink-hot);
}
/* section 4 put a pink dot here; the numeral replaces it */
.fcv3 .fc-toc li a::before {
	content: none;
}
.fcv3 .fc-article-main .entry-content .fc-toc li a {
	display: inline;
	font-size: 16px;
	font-weight: 600;
	line-height: var(--fc-toc-line);
	color: var(--v3-night-ink);
	text-decoration: none;
}
.fcv3 .fc-article-main .entry-content .fc-toc li a:hover {
	color: var(--v3-pink-hot);
	text-decoration: underline;
	text-decoration-color: var(--v3-pink-hot);
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}
.fcv3 .fc-toc-auto {
	border-color: rgba(255, 244, 236, .3);
	border-radius: 0;
	color: rgba(255, 244, 236, .7);
}

/* ---- FAQ: a rules-based accordion list rather than a stack of cards,
   for the same reason as the summary block. ---- */
.fcv3 details.fc-faq {
	background: none;
	border: 0;
	border-bottom: 1px solid rgba(78, 26, 61, .16);
	border-radius: 0;
	box-shadow: none;
	margin-bottom: 0;
	transition: border-color .15s ease;
}
.fcv3 details.fc-faq[open] {
	border-bottom-color: var(--v3-ink);
}
.fcv3 details.fc-faq > summary {
	padding-left: 0;
	padding-right: 0;
	color: var(--v3-ink);
	font-weight: 700;
}
.fcv3 details.fc-faq > summary::after {
	border-right-color: var(--v3-ink);
	border-bottom-color: var(--v3-ink);
}
.fcv3 details.fc-faq > :not(summary) {
	padding-left: 0;
	padding-right: 0;
}

/* ---- Signup form: ticket family, but its own idiom (Ari: "make the form
   box also look more ticket-esque but not a carbon copy of the other
   similar elements").

   The sticky CTA and the summary panel both use the same device -- a
   dashed tear line with round notches bitten out of the panel's edges.
   Using it a third time is exactly the copy-paste this page has already
   been pulled up on, so this one is a COUPON instead: the diagonal
   corner cut of a cloakroom ticket, with a dashed "cut here" outline set
   in from it. Dashes and a cut edge keep it in the family; the shape and
   where the dashes run are its own.

   The chamfer is a clip-path rather than a border trick so the peach
   fill itself is cut -- and the inset dashed rule stays a plain
   rectangle, whose corners land inside the chamfer (at 14px inset
   against a 20px cut) and so read as deliberate rather than clipped. ---- */
.fcv3 .fc-signup-section {
	position: relative;
	background: var(--v3-peach);
	border: 0;
	border-radius: 0;
	box-shadow: none;
	padding: 44px 40px;
	clip-path: polygon(
		20px 0%, calc(100% - 20px) 0%, 100% 20px,
		100% calc(100% - 20px), calc(100% - 20px) 100%,
		20px 100%, 0% calc(100% - 20px), 0% 20px
	);
}
.fcv3 .fc-signup-section::before {
	content: "";
	position: absolute;
	inset: 14px;
	border: 2px dashed rgba(78, 26, 61, .2);
	pointer-events: none;
}
.fcv3 .fc-signup-heading {
	font-weight: 800;
	letter-spacing: -.02em;
	color: var(--v3-ink);
}
.fcv3 .fc-signup-form button,
.fcv3 .fc-signup-form input[type="submit"],
.fcv3 .fc-signup-form .ff-btn-submit {
	background: var(--v3-pink);
	border-color: var(--v3-ink);
	box-shadow: 5px 5px 0 var(--v3-ink);
}
.fcv3 .fc-signup-form button:hover,
.fcv3 .fc-signup-form input[type="submit"]:hover,
.fcv3 .fc-signup-form .ff-btn-submit:hover {
	transform: translate(2px, 2px);
	box-shadow: 3px 3px 0 var(--v3-ink);
}

/* ---- Sticky CTA: THE saturated panel. Same move the homepage makes in
   its PROOF section -- a solid pink field with white type, the only one
   on the page. Nothing else here is a colour block, so it separates
   itself from the article the instant it comes into view, without
   needing to be bigger or louder than what surrounds it. ---- */
/* 12 Sep 2026: Ari -- "make the sticky CTA look at least somewhat
   different rather than always hashing the same graphic shadow in the
   back." Fair: the previous version put the hard offset shadow on the
   panel AND on the button inside it, so the one device the whole site
   already leans on got used twice in a single component.

   It now earns its separation from SHAPE instead: a ticket. Square
   corners, no shadow at all, and a perforation -- a dashed tear line
   with a notch bitten out of each edge -- directly above the button, so
   the button reads as the stub you tear off. That is the product's own
   metaphor rather than a new invention: this file's Front V2 notes
   describe the atomic unit as "a table with seats... on every plan
   ticket", and the homepage already runs a feed rail of plan tickets. */
.fcv3 .fc-sticky-cta {
	background: var(--v3-pink);
	border: 0;
	border-radius: 0;
	box-shadow: none;
	padding: 30px 26px 26px;
}
.fcv3 .fc-sticky-cta-label {
	font-family: var(--v3-mono);
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .18em;
	color: rgba(255, 255, 255, .85);
}
.fcv3 .fc-sticky-cta-title {
	font-size: 1.45rem;
	font-weight: 800;
	letter-spacing: -.025em;
	line-height: 1.15;
	color: #fff;
}
.fcv3 .fc-sticky-cta-copy {
	color: rgba(255, 255, 255, .85);
}
/* The perforation. It hangs off .wp-block-buttons rather than off the
   panel so it always lands immediately above the button, whatever length
   the heading and copy run to. The two notches are circles painted in the
   page background colour, centred on the panel's own edges (-26px panel
   padding, -10px half the circle). */
.fcv3 .fc-sticky-cta .wp-block-buttons {
	position: relative;
	margin-top: 26px !important;
	padding-top: 26px;
	border-top: 2px dashed rgba(255, 255, 255, .55);
}
.fcv3 .fc-sticky-cta .wp-block-buttons::before,
.fcv3 .fc-sticky-cta .wp-block-buttons::after {
	content: "";
	position: absolute;
	top: -10px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #FFFBF7; /* --v3-bg: the page behind the sidebar */
}
.fcv3 .fc-sticky-cta .wp-block-buttons::before { left: -36px; }
.fcv3 .fc-sticky-cta .wp-block-buttons::after { right: -36px; }

/* The stub: a flat white block, mono uppercase like a printed ticket
   action. No offset shadow -- that is the whole point of this pass -- so
   the hover affordance is a straight colour inversion instead. */
.fcv3 .fc-sticky-cta .wp-block-button__link {
	background: #fff;
	color: var(--v3-ink);
	border: 0;
	border-radius: 0;
	box-shadow: none;
	font-family: var(--v3-mono);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	padding: 16px 20px;
	transition: background-color .15s ease, color .15s ease;
}
.fcv3 .fc-sticky-cta .wp-block-button__link:hover,
.fcv3 .fc-sticky-cta .wp-block-button__link:active {
	background: var(--v3-ink);
	color: #fff;
	transform: none;
	box-shadow: none;
}

/* ---- Author: also not a card (Ari: "the author box looks just a carbon
   copy from all the other similar elements"). One heavy coral rule and a
   ringed avatar, set as an editorial byline. It's the last thing on the
   page and shouldn't compete with the CTA panel beside it. ---- */
/* 12 Sep 2026: Ari -- square avatar, with "written by" + the name beside
   it and the bio underneath both. Then: "no strong borders for the
   avatar, spacing is weird."

   The first attempt used a grid with the avatar spanning two auto rows
   and the byline/name placed one per row. That is what made the spacing
   weird: the avatar's 64px got distributed across those two rows, so
   "WRITTEN BY" and the name were pushed to opposite ends of it instead
   of sitting as a tight pair (measured live: a 21px hole between them),
   and the name's inherited 32px line-height added more air on top.

   A flex row has none of that behaviour, but wp:post-author nests
   byline/name/bio inside one __content wrapper, so flex alone would put
   all three beside the avatar. The bio is pulled back by exactly the
   avatar's width plus the gap, which lands it flush with the avatar's
   left edge and full width -- no wrapper needed, and the two numbers
   live in custom properties so they can't drift apart. */
.fcv3 .fc-author-box {
	--fc-author-avatar: 64px;
	--fc-author-gap: 18px;
	display: flex;
	/* core's .wp-block-post-author sets flex-wrap: wrap, and with the
	   content column on flex-basis:auto its natural (bio-length) width
	   pushed it onto its own line under the avatar. */
	flex-wrap: nowrap;
	align-items: flex-start;
	gap: var(--fc-author-gap);
	margin-top: 64px;
	padding: 26px 0 0;
	background: none;
	border: 0;
	border-top: 3px solid var(--v3-coral);
	border-radius: 0;
	box-shadow: none;
}
.fcv3 .fc-author-box .wp-block-post-author__avatar {
	flex: 0 0 var(--fc-author-avatar);
	width: var(--fc-author-avatar);
	/* core ships .wp-block-post-author__avatar { margin-right: 1em }, which
	   stacked on top of the flex gap (36px total) and knocked the bio's
	   negative pull out of alignment. One value owns the spacing now. */
	margin-right: 0;
}
/* Square, and no heavy outline -- the photo carries itself. */
.fcv3 .fc-author-box .wp-block-post-author__avatar img {
	display: block;
	width: 100%;
	height: auto;
	border: 0;
	border-radius: 0;
	object-fit: cover;
}
.fcv3 .fc-author-box .wp-block-post-author__content {
	flex: 1 1 0;
	min-width: 0;
	/* drops the byline/name pair to optically centre against the square
	   rather than hanging off its top edge */
	padding-top: 7px;
}
.fcv3 .fc-author-box .wp-block-post-author__byline {
	font-family: var(--v3-mono);
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .18em;
	color: rgba(78, 26, 61, .5);
	margin: 0 0 3px !important;
}
.fcv3 .fc-author-box .wp-block-post-author__name {
	font-size: 1.25rem;
	font-weight: 800;
	letter-spacing: -.02em;
	line-height: 1.2;
	color: var(--v3-ink);
	margin: 0 !important;
}
.fcv3 .fc-author-box .wp-block-post-author__bio {
	margin: 18px 0 0 calc(-1 * (var(--fc-author-avatar) + var(--fc-author-gap))) !important;
}

/* ---- Foot: "These may also interest you" grid, replacing the old
   prev/next pair (Ari: "a grid of articles like 3-4... rather than a
   next/previous article"). The cards are deliberately quiet -- image,
   mono category, title -- because the pink ticket further up is still
   the one loud thing on the page. ---- */
.fcv3 .fc-article-rule.wp-block-separator {
	border-top-color: rgba(78, 26, 61, .14);
	margin-bottom: 48px;
}
/* margin-block only. A `margin: 0 0 30px` shorthand here zeroed the
   auto side margins WordPress uses to centre a constrained child, which
   dropped this heading 113px to the left of the grid underneath it --
   the same trap the category chip hit earlier in this section. */
.fcv3 .fc-related-title {
	font-size: 1.5rem;
	font-weight: 800;
	letter-spacing: -.02em;
	color: var(--v3-ink);
	margin-top: 0 !important;
	margin-bottom: 30px !important;
}
/* Own grid rather than the post-template block's own layout: theme.json
   sets blockGap to 0 sitewide, so core's grid would render gapless. */
.fcv3 .fc-related-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 34px 26px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.fcv3 .fc-related-grid > li {
	margin: 0;
	min-width: 0;
}
.fcv3 .fc-related-thumb {
	margin: 0 0 15px;
}
.fcv3 .fc-related-thumb img {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}
.fcv3 .fc-related-kicker {
	font-family: var(--v3-mono);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: rgba(78, 26, 61, .5);
	margin: 0 0 9px;
}
.fcv3 .fc-related-kicker a {
	color: inherit;
	text-decoration: none;
}
.fcv3 .fc-related-name {
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -.01em;
	margin: 0 !important;
}
.fcv3 .fc-related-name a {
	color: var(--v3-ink);
	text-decoration: none;
}
.fcv3 .fc-related-name a:hover {
	color: var(--fc-pink-dark);
}
@media (max-width: 900px) {
	.fcv3 .fc-related-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
	.fcv3 .fc-related-grid { grid-template-columns: 1fr; }
}

@media (max-width: 782px) {
	.fcv3 .fc-summary-box {
		padding: 26px 22px 28px;
	}
	.fcv3 .fc-toc-title::before { left: -32px; }
	.fcv3 .fc-toc-title::after { right: -32px; }
	.fcv3 .fc-signup-section {
		padding: 34px 24px;
		clip-path: polygon(
			14px 0%, calc(100% - 14px) 0%, 100% 14px,
			100% calc(100% - 14px), calc(100% - 14px) 100%,
			14px 100%, 0% calc(100% - 14px), 0% 14px
		);
	}
	.fcv3 .fc-signup-section::before { inset: 10px; }
	.fcv3 .fc-article-main .entry-content table {
		font-size: 14.5px;
	}
	.fcv3 .fc-article-main .entry-content table th,
	.fcv3 .fc-article-main .entry-content table td {
		padding: 12px 16px 12px 10px;
	}
	.fcv3 .fc-article-main .entry-content table th {
		font-size: 11.5px;
	}
	/* keep the hero title on the same left edge as the body copy */
	.fcv3 .fc-article-hero-inner {
		padding-left: var(--fc-gutter, 24px);
		padding-right: var(--fc-gutter, 24px);
	}
	/* The separator is a ::before on every item after the first, so once
	   the meta row wraps, the second line OPENS with a floating dot (Ari:
	   "the meta data is misaligned and not as neat as in desktop"). At
	   this width the row always wraps -- there is no arrangement of four
	   items where the dots read correctly -- so they come off entirely
	   and a wider gap does the separating instead. Keeping flex-wrap (as
	   opposed to forcing a column) means the items still pair up on one
	   line on a larger phone or a tablet rather than always stacking. */
	.fcv3 .fc-article-meta {
		gap: 5px 16px;
	}
	.fcv3 .fc-article-meta > * + *::before {
		display: none;
	}
}