/*
Theme Name: Friendchise
Theme URI: https://work.friendchiseapp.com
Author: Friendchise
Description: Custom block theme for Friendchise — meet like-minded people over food and drinks. Replaces the Elementor build as part of the Local -> GitHub -> Hostinger staging pipeline.
Requires at least: 6.5
Tested up to: 7.0
Requires PHP: 8.2
Version: 0.7.17
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: friendchise
Tags: block-theme, full-site-editing, custom-colors, custom-menu
*/

/*
 * Design tokens live in theme.json, not here.
 * Component styles live in assets/css/main.css.
 * This file exists for the theme header above and nothing else.
 *
 * THE RULE: any commit that touches assets/css/main.css, assets/js/interactions.js,
 * or adds/renames/removes a file in patterns/ MUST bump the Version: line above,
 * in the same commit. If the number doesn't change, the URL doesn't change, and
 * the browser plus Hostinger's LiteSpeed cache will keep serving the OLD file
 * after a perfectly successful deploy. This was the single most expensive
 * avoidable mistake on the Manta Squadron build — see gameplan §6.
 */

/* ==========================================================================
   WHY THERE IS COMPONENT CSS IN THIS FILE (12 Sep 2026)

   Everything below section 22 belongs in assets/css/main.css, and it should
   be moved there the moment that becomes possible again. It is here because
   IT CANNOT BE SAVED THERE FROM STAGING RIGHT NOW.

   What was found: work.friendchiseapp.com's edge rejects any POST larger
   than ~128KB with a bare "403 Forbidden" (no WordPress notice, no PHP
   involved -- the request never reaches WordPress). Probed directly by
   POSTing main.css back to Appearance -> Theme File Editor unchanged, with
   a deliberately invalid nonce so nothing could be written, at a range of
   sizes: 1KB, 50KB, 100KB and 128KB all returned 200; 150KB, 200KB and the
   real 236,806-byte file all returned 403. The threshold sits between
   128,000 and 150,000 bytes -- i.e. a 131,072-byte (128KiB) request-body
   limit at the edge/WAF, not a WordPress or PHP limit.

   main.css passed that limit some time between the 12 Sep 0.6.52 pass
   (which saved fine) and now. So the Theme File Editor -- which is the
   ONLY route onto staging while the hPanel Git integration is still
   pointed at production (see claude/friendchise-git-deploy-workaround-
   hard-rule.md) -- can no longer write main.css at all, at any size,
   because it always posts the whole file.

   That leaves the theme with no way to add component CSS to staging, so
   this file is now enqueued (functions.php, handle friendchise-style,
   dependent on friendchise-main so it always loads after it) and carries
   the new section. It is the standard WordPress theme stylesheet, it is
   tracked in git like every other theme file, and it loses nothing except
   main.css's single-file tidiness.

   TO UNDO THIS, in order:
     1. Fix the Git deploy so pushes land on staging (the real fix -- then
        file size stops mattering, because git writes the file directly).
        Failing that, raise the edge POST limit, or split main.css into
        several files each under 128KB.
     2. Move section 22 below into main.css, in file order after section 21.
     3. Remove the friendchise-style enqueue from functions.php.
     4. Leave this comment's findings somewhere durable first -- the 128KB
        ceiling will bite the next person otherwise.
   ========================================================================== */

/* ==========================================================================
   22. Contact page (V3 rebuild, round 2)
   (templates/page-contact.html)

   12 Sep 2026: Ari -- "Redesign the contact page according to the new
   visual language. Don't be boring."

   The 7 Sep build (section 18) was a page header plus one .v3-split
   holding the WPForms embed in a soft 24px pillow card. That was already
   out of step with section 21's round-2 conclusions, written five days
   later after Ari called the article template "AI slop": pillow cards,
   uniform soft shadows and one treatment applied to everything is what
   reads as generated. So this section is built to section 21's own five
   rules rather than inventing a new look:

     1. One saturated panel per page, and it is the thing you are meant
        to click. Here: the form card -- 3px ink border, 6px radius,
        hard coral offset shadow -- on a peach section. Everything else
        on the page is rules and type.
     2. The hard offset shadow means "interactive", so it appears on the
        form card and the buttons only.
     3. Editorial structure is made of RULES, not boxes. The four routing
        rows are .v3-spec-row (section 10) reused verbatim -- the same 3px
        ink rules as the homepage's "What is Friendchise" -- so the
        page's main content block is typography, not a card grid. Only
        .v3-route-link is new.
     4. Coral never carries text and never sits behind white text: it is
        the form card's offset shadow and the founder chip, nothing else.
     5. 6px corners on filled panels, no pillows.

   Almost everything here is a local override of already-shared
   components (.v3-page-hero, .v3-spec-row/-term/-def/-not, .v3-label,
   .v3-founder-photo/-img/-tag/-sig, .v3-form-card, .v3-about-cta,
   .v3-band, .v3-live-dot). The genuinely new shapes are three: the
   status line under the hero, the routing-row link, and the "front desk"
   column (who answers + what happens next) beside the form.
   ========================================================================== */

/* ---- 22a. Page header --------------------------------------------------
   .v3-page-hero's own padding is 64px 0 8px -- it was written for a page
   whose next section was a white split, so it needed almost no bottom
   padding. This page puts the pink band directly after it, and main's
   "> * + * { margin-top: 0 !important }" reset (section 1) zeroes the
   band's own 64px top margin, so without this the band would sit 8px
   under the lede. The band's rotation wedge needs no compensation here
   (compare .v3-collab-hero:has(+ .v3-band) above): .v3-page-hero's
   background IS --v3-bg, the page background, so there is nothing behind
   the band for the wedge to expose.
   ------------------------------------------------------------------------ */
.fcv3 .v3-page-hero--contact {
	padding: 68px 0 78px;
}
.fcv3 .v3-page-hero--contact .v3-display {
	max-width: 17ch;
}
.fcv3 .v3-page-hero--contact .v3-lede {
	max-width: 50ch;
	margin-top: 24px;
}

/* Status line. Reuses .v3-live-dot's blinking coral dot from section 10
   (which the global prefers-reduced-motion block already stills). */
.fcv3 .v3-status {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 26px;
	margin: 32px 0 0;
	font-family: var(--v3-mono);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: rgba(78, 26, 61, .5);
}
.fcv3 .v3-status > span {
	display: inline-flex;
	align-items: center;
}

/* ---- 22b. Routing rows -------------------------------------------------
   .v3-spec-row brings its own 3px ink rules, two-column term/definition
   grid and single-column stacking at narrow widths -- nothing to restate.
   ------------------------------------------------------------------------ */
.fcv3 .v3-routes {
	background: var(--v3-white);
	padding: 76px 0 80px;
}
.fcv3 .v3-routes .v3-h2 {
	margin-bottom: 40px;
}

/* The one new component on this page's upper half. Ink text with a pink
   rule under it rather than coral text (rule 4), and the arrow steps away
   on hover instead of the whole thing changing colour -- the same
   "movement, not repaint" idea as .v3-btn's offset-shadow hover. */
.fcv3 .v3-route-link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-top: 16px;
	padding-bottom: 3px;
	font-family: var(--v3-mono);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--v3-ink);
	text-decoration: none;
	border-bottom: 2px solid var(--v3-pink);
	transition: gap .15s ease, border-color .15s ease;
}
.fcv3 .v3-route-link:hover,
.fcv3 .v3-route-link:focus-visible {
	gap: 16px;
	border-bottom-color: var(--v3-coral);
	color: var(--v3-ink);
}

/* .v3-spec-not is 30px from its previous sibling by default, which is the
   row list here -- that reads as too tight under a 3px rule. */
.fcv3 .v3-routes .v3-spec-not {
	margin-top: 36px;
}

/* ---- 22c. Form + front desk -------------------------------------------- */
.fcv3 .v3-desk-section {
	background: var(--v3-peach);
	padding: 76px 0 84px;
	scroll-margin-top: 90px; /* the routing rows link here by anchor */
}
.fcv3 .v3-desk-row {
	display: flex;
	flex-wrap: wrap;
	gap: 56px;
	align-items: flex-start;
}
.fcv3 .v3-desk-form {
	flex: 1 1 470px;
	min-width: 300px;
}
.fcv3 .v3-desk {
	flex: 0 1 300px;
	min-width: 250px;
	padding-top: 6px;
}
.fcv3 .v3-desk-h2 {
	margin-bottom: 12px;
}
.fcv3 .v3-desk-lede {
	max-width: 46ch;
	margin: 0 0 30px;
}

/* The form shell used to be .v3-form-card--hard, defined here: a white
   card with a 3px ink border and a hard coral offset shadow, with mono
   uppercase field labels. It is gone, and so is every rule that styled it.

   13 Sep 2026, Ari: "Contact page form could look visually the same as
   the one in the article." The articles already have a fully designed
   signup panel -- .fc-signup-section, with notched corners, a dashed
   inner rule and a pink button on peach -- and it is the form a visitor
   is most likely to have already seen, since it appears on all 45 posts
   against one contact page. So the article's panel is now THE form
   treatment, and Contact and Collaborate both point at it rather than
   carrying a second, rarer one.

   Both pages therefore use class="fc-signup-section fc-signup-form" on
   the div wrapping their [wpforms] shortcode. The panel itself needs no
   new CSS at all -- .fcv3 .fc-signup-section already exists and is not
   scoped to articles. What DID need adding is section 28: the article
   form is FluentForms and these two are WPForms, so the field, label and
   submit rules had to be taught the second plugin's markup. The values
   there are the article's values, not new ones.
   ------------------------------------------------------------------------ */

/* Front desk column. The founder photo/chip/signature are section 10's
   components at a smaller size -- 200px is a section-anchoring portrait,
   132px is a "this is who reads it" avatar. */
.fcv3 .v3-desk .v3-founder-photo {
	width: 132px;
	height: 132px;
	margin: 0 0 28px;
}
.fcv3 .v3-desk .v3-founder-img {
	width: 132px;
	height: 132px;
	border-width: 3px;
}
.fcv3 .v3-desk .v3-founder-tag {
	right: -12px;
	bottom: 2px;
}
.fcv3 .v3-desk .v3-label {
	margin-bottom: 4px;
}
.fcv3 .v3-desk-steps {
	list-style: none;
	margin: 0;
	padding: 0;
}
.fcv3 .v3-desk-step {
	padding: 16px 0 15px;
	border-top: 2px solid rgba(78, 26, 61, .16);
}
.fcv3 .v3-desk-step:last-child {
	border-bottom: 2px solid rgba(78, 26, 61, .16);
}
.fcv3 .v3-desk-step-n {
	display: block;
	margin: 0 0 7px;
	font-family: var(--v3-mono);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .16em;
	color: var(--v3-pink-hot);
}
.fcv3 .v3-desk-step p {
	margin: 0;
	font-size: .97rem;
	line-height: 1.55;
	color: rgba(78, 26, 61, .78);
}
.fcv3 .v3-desk .v3-founder-sig {
	margin-top: 26px;
}

/* ---- 22d. Responsive ---------------------------------------------------
   Placed at the end of the file on purpose so it wins over the earlier
   .fcv3 responsive blocks it deliberately builds on (those already stack
   .v3-spec-row to one column, which this page inherits for free).
   ------------------------------------------------------------------------ */
@media (max-width: 900px) {
	.fcv3 .v3-desk-row {
		gap: 44px;
	}
	.fcv3 .v3-desk {
		flex: 1 1 100%;
	}
}

@media (max-width: 640px) {
	.fcv3 .v3-page-hero--contact {
		padding: 48px 0 62px;
	}
	.fcv3 .v3-page-hero--contact .v3-display,
	.fcv3 .v3-page-hero--contact .v3-lede {
		max-width: none;
	}
	.fcv3 .v3-status {
		gap: 6px 18px;
		font-size: 10px;
	}
	.fcv3 .v3-routes {
		padding: 56px 0 60px;
	}
	.fcv3 .v3-desk-section {
		padding: 56px 0 64px;
	}
	/* The narrow-width rules for .v3-form-card--hard lived here. The card is
	   retired; .fc-signup-section brings its own 782px step (padding
	   34px 24px, notch 14px, dashed inset 10px), so there is nothing to
	   restate. Section 28 handles the submit button going full width. */
}

/* ==========================================================================
   23. Collaborate page, visual pass
   (templates/page-collaborate-with-friendchise.html)

   12 Sep 2026: Ari -- "This page has some work done but it is quite bleh.
   Don't work on the language too much, just the visual side."

   So: every string on the page is carried over verbatim from the 7 Sep
   build. What changed is structure and treatment. What was wrong:

     - No band, so the page never announced itself as part of the site.
     - TWO near-identical .v3-icon-grid sections ("Why collaborate?" and
       "Who should collaborate with us?") one after the other, separated
       only by the form. Same badge, same h4, same paragraph, twice --
       the exact "five components wearing one costume" failure section 21
       was written to stop.
     - Every heading centred, nothing else doing any work: no rules, no
       numerals, no dark beat, no saturated panel. A flat light page from
       top to bottom.
     - The form sat in the soft 24px .v3-form-card pillow that section 21
       retired, in the middle of the page, before the proof.
     - The partner row rendered a literal "logo file needed" note to the
       public, and the logos floated with no shell at all.
     - The hero photo is a 225x300 portrait being stretched by
       .v3-split-media's width:100%, so it rendered soft and oversized.

   The fixes, following section 21's five rules the same way section 22
   (Contact) does:

     1. One saturated panel, and it's the thing you click -> the form,
        moved to sit right after the partner proof, in section 22's
        .v3-form-card--hard shell (reused wholesale, including its field,
        label and submit-button rules -- those are scoped to the card,
        not to the Contact page, so they already apply here).
     2. Hard offset shadow = interactive, so the hero photo gets an ink
        border and a slight tilt instead of a shadow. Nothing else on the
        page has one.
     3. Structure from RULES and numerals, not boxes -- both benefit
        sections are now rule-topped columns rather than floating cards.
     4. Coral carries no text on light. The one place it becomes type is
        the numerals on the dark section, where it runs ~7:1 against
        --v3-night; on light it stays an icon stroke only.
     5. 6px corners, no pillows.

   And the two benefit sections are now told apart by treatment, not just
   by their headings: "Why collaborate?" is the page's one dark beat with
   big coral numerals (the homepage does exactly this once, section 5's
   HOW, "to bring some overall contrast"), while "Who should collaborate
   with us?" stays light and keeps its icons, restyled as ink-outlined
   squares over 3px rules.

   New section order: hero -> band -> why (night) -> who (peach) ->
   partners (white) -> form (blush) -> reviews (peach, own background).
   Pitch, qualify, prove, convert, reassure.
   ========================================================================== */

/* ---- 23a. Hero --------------------------------------------------------
   padding-bottom is deliberately NOT set here: adding the band brings
   .v3-collab-hero:has(+ .v3-band) (section 18) into play, which sets
   padding-bottom:116px and margin-bottom:-28px to kill the wedge the
   band's -1deg rotation exposes against this section's peach. Setting a
   "padding" shorthand here would be beaten on that longhand anyway, but
   writing only padding-top keeps the interaction obvious to read.
   ------------------------------------------------------------------------ */
.fcv3 .v3-collab-hero {
	padding-top: 68px;
}
.fcv3 .v3-collab-hero .v3-display {
	max-width: 15ch;
}
.fcv3 .v3-collab-hero .v3-lede {
	max-width: 44ch;
	margin-top: 20px;
}

/* The template used to point at the 225x300 THUMBNAIL, which
   .v3-split-media's flex: 1 1 380px plus img{width:100%} then upscaled to
   ~450px -- that, not the layout, is why the hero looked soft. It now
   loads the 768x1024 rendition, so this only has to hold the column to a
   sensible portrait width, then give it the ink border and
   a small tilt -- the same rotated-object language as .v3-band,
   .v3-stamp and .v3-founder-tag -- rather than a shadow, which on this
   site means "interactive". */
.fcv3 .v3-collab-hero .v3-split-media {
	flex: 0 1 340px;
	max-width: 340px;
	transform: rotate(-1.5deg);
}
.fcv3 .v3-collab-hero .v3-split-media img {
	border: 3px solid var(--v3-ink);
	border-radius: 6px;
	box-shadow: none;
}

/* ---- 23b. "Why collaborate?" -- the page's one dark beat -------------- */
.fcv3 .v3-collab-why {
	background: var(--v3-night);
	color: var(--v3-night-ink);
	padding: 80px 0 84px;
}
.fcv3 .v3-collab-why .v3-h2 {
	color: var(--v3-night-ink);
	max-width: 18ch;
	margin-bottom: 48px;
}
.fcv3 .v3-why-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 40px;
}
.fcv3 .v3-why-item {
	border-top: 3px solid rgba(255, 244, 236, .3);
	padding-top: 20px;
}
/* The one place coral becomes type. It is legible here (~7:1 on
   --v3-night) in a way it never is on the light sections, which is why
   rule 4 bans it there and not here. */
/* Selector is .v3-why-item .v3-why-n, not just .v3-why-n, and it has to
   stay that way: ".fcv3 .v3-why-item p" below is (0,2,1) and would
   otherwise beat a bare ".fcv3 .v3-why-n" (0,2,0) on both font-size and
   colour -- which is exactly what happened on the first deploy: the
   numerals rendered at body size in body colour. Caught by computed
   style, not by reading the file. */
.fcv3 .v3-why-item .v3-why-n {
	font-family: var(--v3-mono);
	font-size: clamp(2rem, 4vw, 2.9rem);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -.02em;
	color: var(--v3-coral);
	margin: 0 0 18px;
}
.fcv3 .v3-why-item h3 {
	font-size: 1.14rem;
	font-weight: 800;
	line-height: 1.25;
	margin: 0 0 10px;
	color: var(--v3-night-ink);
}
.fcv3 .v3-why-item p {
	margin: 0;
	font-size: .97rem;
	line-height: 1.6;
	color: rgba(255, 244, 236, .72);
}

/* ---- 23c. "Who should collaborate with us?" ---------------------------
   A MODIFIER, not a change to .v3-icon-grid / -item / -badge: those are
   shared with the Solo Travelers page (.v3-icon-grid--3), so restyling
   them directly would have silently restyled that page too -- the
   shared-class trap documented in the frontv3 conversion notes.
   ------------------------------------------------------------------------ */
.fcv3 .v3-collab-who {
	background: var(--v3-peach);
	padding: 80px 0 84px;
}
.fcv3 .v3-collab-who .v3-h2 {
	margin-bottom: 14px;
}
.fcv3 .v3-collab-who .v3-lede {
	max-width: 62ch;
	margin: 0 0 48px;
}
.fcv3 .v3-icon-grid--ruled {
	grid-template-columns: repeat(3, 1fr);
	gap: 40px;
	margin-top: 0;
}
.fcv3 .v3-icon-grid--ruled .v3-icon-item {
	border-top: 3px solid var(--v3-ink);
	padding-top: 20px;
}
.fcv3 .v3-icon-grid--ruled .v3-icon-badge {
	width: 46px;
	height: 46px;
	border-radius: 6px;
	background: transparent;
	border: 2px solid var(--v3-ink);
	margin-bottom: 18px;
}
.fcv3 .v3-icon-grid--ruled .v3-icon-badge svg {
	width: 23px;
	height: 23px;
}
.fcv3 .v3-icon-grid--ruled .v3-icon-item h4 {
	font-size: 1.14rem;
	line-height: 1.25;
	margin-bottom: 10px;
}

/* ---- 23d. Partner logos -----------------------------------------------
   Was: bare logos on white with nothing holding them. Now each sits in
   its own bordered tile, so the row reads as a set. Separate tiles rather
   than one divided strip on purpose -- the grid is auto-fit and wraps,
   and a shared-divider treatment leaves a stray edge on the last tile of
   every wrapped row at some widths.
   ------------------------------------------------------------------------ */
.fcv3 .v3-partners {
	padding: 80px 0 84px;
}
.fcv3 .v3-partners-grid {
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: 16px;
	margin-top: 40px;
}
.fcv3 .v3-partners-grid > * {
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 112px;
	padding: 20px;
	background: var(--v3-white);
	border: 3px solid var(--v3-ink);
	border-radius: 6px;
}
/* Logos arrive at wildly different aspect ratios (a 300x59 wordmark next
   to a 150x150 square). Capping height rather than width is what makes
   them sit on one optical line. 13 Sep 2026: shown in full color at rest
   (previously greyed back to .72 opacity + grayscale(1)) -- Ari compared
   this against the live production grid, which shows every logo in its
   own brand color, and asked for staging to match. Cards were also
   widened (158px -> 210px min) so wide wordmark logos (Casa Alsatia,
   Samoa) have room to reach the height cap instead of being squeezed
   down to a sliver by the old narrower column width. */
.fcv3 .v3-partner-logo img {
	width: 140px;
	height: 48px;
	object-fit: contain;
}
/* Text stand-in for a partner with no logo file yet. The public-facing
   "logo file needed" note that used to render here is gone -- that
   belongs in the template comment, not on the page. */
.fcv3 .v3-partner-text {
	font-family: var(--v3-mono);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	text-align: center;
	color: rgba(78, 26, 61, .55);
}

/* ---- 23e. The form ----------------------------------------------------
   .v3-form-card--hard and its field/label/submit rules come from section
   22 unchanged -- they were written scoped to the card, not to the
   Contact page, precisely so a second form could reuse them.
   ------------------------------------------------------------------------ */
.fcv3 .v3-collab-form {
	background: var(--v3-blush);
	padding: 80px 0 88px;
	scroll-margin-top: 90px; /* both "Collaborate now" buttons land here */
}
.fcv3 .v3-collab-form .v3-wrap {
	max-width: 720px;
}
.fcv3 .v3-collab-form .v3-h2 {
	margin-bottom: 28px;
}

/* ---- 23f. Responsive -------------------------------------------------- */
@media (max-width: 900px) {
	.fcv3 .v3-why-grid,
	.fcv3 .v3-icon-grid--ruled {
		grid-template-columns: repeat(2, 1fr);
		gap: 32px;
	}
}

@media (max-width: 640px) {
	.fcv3 .v3-why-grid,
	.fcv3 .v3-icon-grid--ruled {
		grid-template-columns: 1fr;
		gap: 28px;
	}
	/* The tilt needs room on both sides to read as deliberate; at phone
	   width the photo is full-bleed inside the gutter and a rotation just
	   clips its corners against the edge. */
	.fcv3 .v3-collab-hero .v3-split-media {
		max-width: 100%;
		transform: none;
	}
	.fcv3 .v3-collab-why,
	.fcv3 .v3-collab-who,
	.fcv3 .v3-partners,
	.fcv3 .v3-collab-form {
		padding: 56px 0 62px;
	}
	.fcv3 .v3-collab-why .v3-h2,
	.fcv3 .v3-collab-who .v3-lede {
		margin-bottom: 34px;
	}
}

/* ==========================================================================
   24. Generic pages: prose/legal + Elementor landing pages
   (templates/page.html -- the eight pages with no template of their own)

   12 Sep 2026, pre-launch audit. Ari: "Go through the entire site's
   published pages and articles... especially for landing pages", with
   the front page as the reference for anything uncertain.

   Every page on templates/page.html measured badly at every width:
   body text at x=0 (flush to both screen edges) at 375px, two h1s, and
   on the five Elementor pages a full-bleed campaign hero squeezed into
   a 720px prose column. Details and the fixes are in page.html's own
   header comment; this section is the styling half.

   Front-page reference values used here, measured off the live page
   rather than guessed:
     - gutter 24px at 375 and 768, 57px at 1280 (24px inner padding on a
       centred 1200px .v3-wrap)
     - ink #4E1A3D for body copy, pink #FC599D for links
   The prose measure stays 720px rather than the front page's 1200px --
   1200px of legal text is an unreadable line length, and the front page
   is a landing page, not a document. Everything else follows it.

   Why the tokens are redeclared: --v3-* live on .fcv3, which these
   pages deliberately do not carry (they are documents and third-party
   page builds, not the V3 design system). Rather than pull all of
   .fcv3 onto them, the two values actually needed are restated locally.
   ========================================================================== */

.fc-page {
	--p-ink: #4E1A3D;
	--p-pink: #FC599D;
	color: var(--p-ink);
}

/* The gutter is real padding, not a by-product of centring -- that is
   the whole bug this fixes. Vertical rhythm matches the front page's
   lightest section beat (64/80) rather than the old 60/20. */
.fc-page-body {
	padding: 64px 24px 80px;
}
.fc-page-body .entry-content {
	max-width: 720px;
	margin-left: auto;
	margin-right: auto;
}

/* ---- Prose type ---- */
.fc-page-body:not(:has(.fcv3)) .entry-content h1 {
	font-size: clamp(2rem, 4.5vw, 2.9rem);
	line-height: 1.06;
	letter-spacing: -.03em;
	font-weight: 800;
	margin: 0 0 18px;
}
.fc-page-body:not(:has(.fcv3)) .entry-content h2 {
	font-size: clamp(1.35rem, 2.6vw, 1.75rem);
	line-height: 1.22;
	letter-spacing: -.02em;
	font-weight: 800;
	margin: 46px 0 12px;
}
.fc-page-body:not(:has(.fcv3)) .entry-content h3 {
	font-size: 1.14rem;
	line-height: 1.3;
	font-weight: 800;
	margin: 32px 0 8px;
}
.fc-page-body:not(:has(.fcv3)) .entry-content h4 {
	font-size: 1rem;
	font-weight: 700;
	margin: 24px 0 6px;
}
.fc-page-body:not(:has(.fcv3)) .entry-content p,
.fc-page-body:not(:has(.fcv3)) .entry-content li {
	font-size: 1.02rem;
	line-height: 1.7;
	color: rgba(78, 26, 61, .82);
	margin: 0 0 14px;
}
.fc-page-body:not(:has(.fcv3)) .entry-content ul,
.fc-page-body:not(:has(.fcv3)) .entry-content ol {
	margin: 0 0 18px;
	padding-left: 1.3em;
}
.fc-page-body:not(:has(.fcv3)) .entry-content li {
	margin-bottom: 8px;
}
.fc-page-body:not(:has(.fcv3)) .entry-content strong {
	color: var(--p-ink);
	font-weight: 700;
}
.fc-page-body:not(:has(.fcv3)) .entry-content a {
	color: var(--p-pink);
	text-decoration: underline;
	text-underline-offset: 2px;
}
.fc-page-body:not(:has(.fcv3)) .entry-content a:hover,
.fc-page-body:not(:has(.fcv3)) .entry-content a:focus-visible {
	color: var(--p-ink);
}
.fc-page-body:not(:has(.fcv3)) .entry-content hr {
	border: 0;
	border-top: 2px solid rgba(78, 26, 61, .14);
	margin: 40px 0;
}

/* Legal copy is full of bare URLs and email addresses, and a token
   longer than the column cannot wrap: /terms-conditions/ pushed the
   whole document to 388px of horizontal scroll at a 375px viewport off
   the single string "https://work.friendchiseapp.com". break-word only
   breaks a word that would otherwise overflow, so ordinary text is
   untouched. Applied to the article body too -- same risk, same fix. */
.fc-page-body:not(:has(.fcv3)) .entry-content p,
.fc-page-body:not(:has(.fcv3)) .entry-content li,
.fc-page-body:not(:has(.fcv3)) .entry-content h1,
.fc-page-body:not(:has(.fcv3)) .entry-content h2,
.fc-page-body:not(:has(.fcv3)) .entry-content h3,
.fc-page-body:not(:has(.fcv3)) .entry-content td,
.fcv3 .entry-content p,
.fcv3 .entry-content li {
	overflow-wrap: break-word;
}

/* Tables in legal copy: same card treatment as section 21 gave article
   tables, so a document page does not drop to browser defaults. */
.fc-page-body:not(:has(.fcv3)) .entry-content table {
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 22px;
	font-size: .95rem;
}
.fc-page-body:not(:has(.fcv3)) .entry-content th,
.fc-page-body:not(:has(.fcv3)) .entry-content td {
	border: 2px solid rgba(78, 26, 61, .14);
	padding: 10px 12px;
	text-align: left;
	vertical-align: top;
}
.fc-page-body:not(:has(.fcv3)) .entry-content th {
	background: #FFF3E8;
	font-weight: 700;
	color: var(--p-ink);
}

/* ---- Elementor landing pages ----------------------------------------
   These five pages are third-party page builds whose sections manage
   their own full-bleed width and internal padding. The prose measure
   and gutter above are exactly wrong for them, so they come off -- but
   only for them, via the body class Elementor itself sets. Scoped by
   body.elementor-page rather than by page slug so a new Elementor page
   is handled automatically.
   -------------------------------------------------------------------- */
/* Elementor pages carry small decorative widgets positioned past the
   section edge -- /expat/ has one 30px image whose right edge lands at
   380px on a 375px viewport, which was enough to give the whole
   document a horizontal scrollbar. Clipping here rather than on <body>
   keeps position:sticky working, and it is the same thing .fcv3 already
   does for the band and the feed rails. */
body.elementor-page .fc-page-body {
	padding: 0;
	overflow-x: clip;
}
body.elementor-page .fc-page-body .entry-content {
	max-width: none;
}
/* Elementor ships its own complete type system; the prose rules above
   would fight it. Reset the ones that reach inside. */
body.elementor-page .fc-page-body:not(:has(.fcv3)) .entry-content p,
body.elementor-page .fc-page-body:not(:has(.fcv3)) .entry-content li,
body.elementor-page .fc-page-body:not(:has(.fcv3)) .entry-content h1,
body.elementor-page .fc-page-body:not(:has(.fcv3)) .entry-content h2,
body.elementor-page .fc-page-body:not(:has(.fcv3)) .entry-content h3,
body.elementor-page .fc-page-body:not(:has(.fcv3)) .entry-content h4 {
	font-size: inherit;
	line-height: inherit;
	letter-spacing: normal;
	color: inherit;
	margin: revert;
}
body.elementor-page .fc-page-body:not(:has(.fcv3)) .entry-content a {
	color: inherit;
	text-decoration: none;
}

/* ---- Contact: routing-link tap target -------------------------------
   Measured 24px tall at 375px. It is a mono text link with a rule under
   it, not a button, so it never picked up any padding -- but it is one
   of the four primary actions on that page. Padding is added above the
   text only, so the pink rule stays tight to the words and the visual
   design is unchanged; the hit area grows to 40px.
   -------------------------------------------------------------------- */
@media (max-width: 640px) {
	.fcv3 .v3-route-link {
		padding-top: 17px;
		padding-bottom: 5px;
		margin-top: 8px;
	}
}

/* ==========================================================================
   25. Pre-launch consistency pass
   (spacing rhythm, small-type legibility, carousel dot a11y)

   12 Sep 2026, from Ari's review of the audit: "Make paddings etc.
   congruent", "Make them to be legible. I agree they are small",
   "Adjust according to best practices".

   ---- 25a. SPACING RHYTHM -------------------------------------------------
   The front page is the reference. Measured off it:

     hero (cream, band follows)       64 / 80
     band                             15 / 15
     spec  (first section AFTER band) 96 / 64
     who                              72 / 64
     how (night)                      72 / 72
     feed                             72 / 76
     proof                            72 / 72
     trust                            64 / 64
     reviews                          64 / 64
     founder                          72 / 72

   So the front page states three things, and sections 22 and 23 were
   improvising around them (76/80, 76/84, 80/84):

     1. A hero with the band under it is 64 top / 80 bottom.
     2. The section immediately after the band gets 96 top. That is not
        decoration -- .v3-band carries margin-bottom:-32px, so the next
        section slides up under it and needs the extra 32 back before
        its content starts. Any section following the band without it
        reads tight.
     3. Everything else is 72, and 72 bottom, with the beat before the
        footer allowed 80.

   Those three rules are now applied to Contact and Collaborate rather
   than each page carrying its own near-miss values. Nothing on the
   front page changes.
   ------------------------------------------------------------------------ */

/* Contact */
.fcv3 .v3-page-hero--contact {
	padding: 64px 0 80px;
}
.fcv3 .v3-routes {
	padding: 96px 0 72px;
}
.fcv3 .v3-desk-section {
	padding: 72px 0 80px;
}

/* Collaborate */
.fcv3 .v3-collab-hero {
	padding-top: 64px;
}
.fcv3 .v3-collab-why {
	padding: 96px 0 72px;
}
.fcv3 .v3-collab-who,
.fcv3 .v3-partners,
.fcv3 .v3-collab-form {
	padding: 72px 0 72px;
}

@media (max-width: 640px) {
	/* Same proportions, scaled: the front page's own narrow-width beat
	   is a little over half its desktop value. */
	.fcv3 .v3-page-hero--contact {
		padding: 48px 0 62px;
	}
	.fcv3 .v3-routes {
		padding: 64px 0 56px;
	}
	.fcv3 .v3-desk-section,
	.fcv3 .v3-collab-why,
	.fcv3 .v3-collab-who,
	.fcv3 .v3-partners,
	.fcv3 .v3-collab-form {
		padding: 56px 0 60px;
	}
}

/* ---- 25b. SMALL-TYPE LEGIBILITY ----------------------------------------
   Every text node on the site was measured; 21 distinct classes rendered
   below 12px, several at 10px, all of them mono with .12-.18em tracking
   which costs another notch of legibility on top of the size.

   The floor is now 12px for anything a reader is meant to READ -- eyebrow
   labels, bylines, dates, kickers, reading time, form labels, the
   contact status line, the front-desk step numbers.

   The exception is five micro-labels that sit INSIDE artwork rather than
   in the reading flow -- the hero table's chair and badge chips, the
   rotated founder tag, the rotated stamp. Those are graphic elements
   with fixed boxes; they go to 11px, which is as far as they can move
   without breaking their own geometry. Flagged rather than forced.
   ------------------------------------------------------------------------ */

.fcv3 .v3-label,
.fcv3 .v3-conf-tag,
.fcv3 .v3-ticket-city,
.fcv3 .v3-ticket-left,
.fcv3 .v3-step-n,
.fcv3 .v3-founder-sig,
.fcv3 .v3-status,
.fcv3 .v3-desk-step-n,
.fcv3 .v3-post-card-date,
.fcv3 .fc-kicker,
.fcv3 .fc-toc-title,
.fcv3 .fc-article-kicker,
.fcv3 .fc-article-date,
.fcv3 .fc-article-updated,
.fcv3 .fc-article-author,
.fcv3 .fc-article-meta,
.fcv3 .fc-sticky-cta-label,
.fcv3 .fc-related-kicker,
.fcv3 .wp-block-post-author__byline,
.wpforms-container .wpforms-required-label {
	font-size: 12px;
}

/* Two rules in main.css sit at three classes deep and beat the list
   above on specificity, so they need matching depth rather than a
   shorter selector: the kicker's own anchor, and the author byline
   inside .fc-author-box. Found by computed style after the first pass,
   not by reading the file. */
.fcv3 .fc-article-kicker a,
.fcv3 .fc-related-kicker a,
.fcv3 .fc-author-box .wp-block-post-author__byline {
	font-size: 12px;
}

/* Round 3, same trap again, found by re-measuring after 0.6.80. main.css
   carries ".fcv3 .fc-article-meta .fc-article-updated" and its shortcode
   sibling at (0,3,0) and 11px, which beat the (0,2,0) list above -- so
   ".updated" and the meta shortcode were still rendering at 11px on every
   article. Matching depth, not shortening the selector. */
.fcv3 .fc-article-meta .fc-article-updated,
.fcv3 .fc-article-meta .wp-block-shortcode {
	font-size: 12px;
}

/* Article table headers. main.css sizes them 12.5px on desktop but drops
   them to 11.5px under 782px -- so the one place on the site where small
   type is genuinely being READ in quantity (comparison tables in the
   guides) fell under the floor at exactly the width where it matters
   most. The desktop value is left alone; only the narrow step is lifted.
   Scoped to the article body so no other table is touched. */
@media (max-width: 782px) {
	.fcv3 .fc-article-main .entry-content table th {
		font-size: 12px;
	}
}

/* Micro-labels inside artwork. 11px is the ceiling their boxes allow. */
.fcv3 .v3-chair,
.fcv3 .v3-table-badge,
.fcv3 .v3-table-when,
.fcv3 .v3-founder-tag,
.fcv3 .v3-stamp {
	font-size: 11px;
}

/* ---- 25c. CAROUSEL DOTS ------------------------------------------------
   .fcv3 .v3-reviews .fc-carousel-dots was visibility:hidden, which hides
   a control visually while leaving it in the accessibility tree and the
   tab order -- a keyboard user tabs through eight invisible buttons
   between the prev and next arrows. display:none removes it from both.

   The arrows stay, so nothing is lost functionally. If the dots should
   instead be VISIBLE (they are the only thing communicating how many
   reviews there are and where you are in them, which is the usual
   argument for keeping them) this is the single line to change.
   ------------------------------------------------------------------------ */
.fcv3 .v3-reviews .fc-carousel-dots {
	display: none;
}

/* ==========================================================================
   26. Landing pages built as page CONTENT, not as templates
   (/expat/ first; the Barcelona pages next)

   12 Sep 2026: Ari -- "I won't use Elementor going forward. So do your
   fixes accordingly."

   The five Elementor pages cannot each get their own theme template,
   because the Theme File Editor -- the only route onto staging while Git
   deploy is broken -- can edit files but not create them. So these pages
   carry their V3 markup in the PAGE CONTENT instead, wrapped in a single
   .fcv3 div, and render through the generic templates/page.html. Same
   design system, same components, no new template files, and the page
   stays editable in the block editor.

   .fc-page-body's 720px prose measure and 24px gutter are exactly wrong
   for a full-bleed landing page, so a page whose content carries .fcv3
   opts out of both. This is the same exception the Elementor block in
   section 24 makes, keyed off the markup instead of a plugin's body
   class -- which means it keeps working after Elementor is gone.
   ========================================================================== */
.fc-page-body:has(> .entry-content > .fcv3),
.fc-page-body:has(> .fcv3) {
	padding: 0;
	overflow-x: clip;
}
.fc-page-body:has(> .entry-content > .fcv3) .entry-content,
.fc-page-body:has(> .fcv3) .entry-content {
	max-width: none;
}

/* ---- Two section shells these pages need that only existed under
   Collaborate-specific names. Same values, page-agnostic names, so the
   Barcelona conversions can reuse them rather than inventing a third
   set. Everything else on these pages reuses components that were
   already generic: .v3-split, .v3-spec-row, .v3-why-grid, .v3-icon-grid,
   .v3-reviews, .v3-about-cta. ---- */
.fcv3 .v3-lander-hero {
	background: var(--v3-peach);
	padding-top: 64px;
}
/* Same band-wedge compensation as .v3-collab-hero: the band is rotated
   -1deg and 130% wide, so its top edge sits ~12px lower at the left end
   than its bounding box and exposes a wedge of whatever is behind it --
   invisible on the page background, obvious against this section's peach. */
.fcv3 .v3-lander-hero:has(+ .v3-band) {
	padding-bottom: 116px;
	margin-bottom: -28px;
}
.fcv3 .v3-lander-hero .v3-display {
	max-width: 16ch;
}
.fcv3 .v3-lander-hero .v3-lede {
	max-width: 52ch;
	margin-top: 20px;
}
.fcv3 .v3-lander-hero .v3-split-media img {
	border: 3px solid var(--v3-ink);
	border-radius: 6px;
	box-shadow: none;
}

.fcv3 .v3-lander-dark {
	background: var(--v3-night);
	color: var(--v3-night-ink);
	padding: 96px 0 72px;
}
.fcv3 .v3-lander-dark .v3-h2 {
	color: var(--v3-night-ink);
	max-width: 20ch;
	margin-bottom: 48px;
}

/* White and peach content beats, on the section-25 rhythm. */
.fcv3 .v3-lander-rows {
	background: var(--v3-white);
	padding: 72px 0 72px;
}
.fcv3 .v3-lander-rows .v3-h2 {
	margin-bottom: 40px;
}
.fcv3 .v3-lander-split {
	background: var(--v3-peach);
	padding: 72px 0 72px;
}
.fcv3 .v3-lander-split .v3-h2 {
	margin-bottom: 18px;
}
.fcv3 .v3-lander-split h3 {
	font-size: 1.2rem;
	font-weight: 800;
	line-height: 1.3;
	margin: 26px 0 8px;
}
.fcv3 .v3-lander-split p {
	font-size: 1.02rem;
	line-height: 1.65;
	color: rgba(78, 26, 61, .78);
	margin: 0;
}

@media (max-width: 640px) {
	.fcv3 .v3-lander-dark,
	.fcv3 .v3-lander-rows,
	.fcv3 .v3-lander-split {
		padding: 56px 0 60px;
	}
	.fcv3 .v3-lander-dark .v3-h2 {
		margin-bottom: 34px;
	}
}

/* ---- 26b. Prose rules must not reach inside a lander ------------------
   Section 24's prose typography was written as ".fc-page .entry-content
   h2" and friends -- (0,2,1) -- which beats ".fcv3 .v3-h2" (0,2,0). On a
   landing page whose content IS .fcv3 markup that meant the document
   styles silently won: the "Why expats love Friendchise" h2 rendered at
   21.6px instead of the V3 clamp, measured by computed style.

   Rather than restate every V3 rule at a higher specificity, section 24's
   selectors are now prefixed .fc-page-body:not(:has(.fcv3)), so they
   simply do not match on a lander. Document pages are unaffected -- they
   have no .fcv3 -- and this keeps ONE definition of the V3 type scale.
   ---------------------------------------------------------------------- */

/* ==========================================================================
   27. Hero media treatment + heading rhythm, made global
   13 Sep 2026

   Ari, on the Solo Travelers hero: "The hero image is kinda small now in
   comparison. How about somehow incorporating it more with the background
   without killing visibility/contrast?" -- plus "Spacing is a little tight
   in two rows", and the standing instruction: "make sure that when you
   code stuff that these things are more global than each page having
   unique stuff. Makes it more manageable."

   That last point is the reason this section exists at all. The hero photo
   was small because section 23 capped .v3-collab-hero .v3-split-media at
   340px -- a value chosen for ONE image, Collaborate's 768x1024 portrait --
   and the Solo Travelers page happens to reuse .v3-collab-hero as its hero
   shell. A page-specific number leaked onto another page. Same story with
   the -1.5deg tilt and the 3px ink frame.

   So this replaces all three with one treatment that works for any hero
   image at any aspect ratio, and both hero shells point at it.
   ========================================================================== */

/* ---- 27a. Hero media: a hard-edged panel that bleeds off the page -----
   13 Sep 2026, round 2. The first attempt was a soft radial halo plus a
   feathered edge mask. Ari: "This is visually terrible. How about
   something like the page on Wirmax, visually speaking?"

   He is right, and it was wrong on the site's OWN terms. Section 21
   retired soft pillow treatments precisely because a blurred edge sitting
   on a flat ground reads as a rendering fault rather than a decision, and
   a feather argues with everything else in the V3 language: the rotated
   band, the hard offset shadow, the 3px rules. Trying to dissolve the
   photo into the page was solving the wrong problem.

   The reference does the opposite, and so does this now. The photo is no
   longer an OBJECT on the page with an edge that has to be resolved --
   it is a PANEL. Full height of the hero, bleeding past the right edge of
   the viewport, cut on the left by one hard diagonal. Two of its three
   visible edges ARE the viewport, so there is no edge treatment left to
   get wrong, and the one edge that remains is a deliberate hard line.

   The cut leans the same way as .v3-band's -1deg rotation (top edge
   further right, bottom further left) so the hero's diagonal and the
   band immediately below it agree instead of arguing.

   This also retires the whole "which max-width?" problem from section 23.
   The panel's size comes from the viewport, and object-fit:cover makes
   the image fill it at any aspect ratio -- so Collaborate's 768x1024
   portrait and the 1024x683 landscapes on Solo Travelers and /expat/ need
   no per-page numbers, and neither will the next one.

   Global by construction: both hero shells and .v3-hero-media take the
   same rule, and all three pages carry a .v3-band directly after the hero.
   ------------------------------------------------------------------------ */

.fcv3 .v3-collab-hero,
.fcv3 .v3-lander-hero {
	position: relative;
	overflow: hidden; /* the panel is flush to the viewport; never let it scroll */
}

/* .v3-band carries its own 64px top margin. On pages where the band is a
   DIRECT child of main, section 1's "> * + * { margin-top: 0 !important }"
   reset kills it -- but on /expat/ the band lives inside the page content
   wrapper, so the reset never reaches it and the band sat 46px clear of the
   hero at phone width and 22px at desktop, while Collaborate and Solo
   Travelers had it tight. That is why /expat/ looked subtly different for
   no visible reason. Zeroing it here rather than in the reset keeps the
   rule where the relationship actually lives: a band directly after a hero
   is always tight to it, wherever the markup happens to sit. */
.fcv3 .v3-collab-hero + .v3-band,
.fcv3 .v3-lander-hero + .v3-band {
	margin-top: 0;
}

/* Desktop: the panel is taken out of flow and pinned to the section, so it
   fills the hero's full height including the 116px bottom padding that
   .v3-collab-hero:has(+ .v3-band) adds for the band's wedge. That is what
   makes it read as a panel rather than a picture -- it touches the header
   above and runs under the band below. */
@media (min-width: 901px) {
	.fcv3 .v3-collab-hero .v3-split-row,
	.fcv3 .v3-lander-hero .v3-split-row {
		min-height: 420px;
		align-items: center;
	}

	/* The copy has to clear the NARROWEST point of the panel, which is the
	   bottom of the diagonal -- i.e. the panel's own left edge, not where
	   the cut starts at the top. 46% against a 48vw panel leaves 60px of
	   air at 1024 and 95px at 1280, and only grows from there. */
	.fcv3 .v3-collab-hero .v3-split-copy,
	.fcv3 .v3-lander-hero .v3-split-copy {
		flex: 0 1 auto;
		max-width: 46%;
		padding-right: 24px;
	}

	.fcv3 .v3-collab-hero .v3-split-media,
	.fcv3 .v3-lander-hero .v3-split-media,
	.fcv3 .v3-hero-media {
		position: absolute;
		inset: 0 0 0 auto;
		z-index: 0;
		width: min(48vw, 860px);
		max-width: none;
		margin: 0;
		transform: none; /* retires section 23's Collaborate-only tilt */
		/* Ari tried the flat-rectangle "match the article image" look
		   (see git history / friendchise-hero-panel-treatment.md) and
		   asked for the diagonal back once he saw it live -- so this is
		   restored to the original bleeding-panel cut. Do not remove
		   this clip-path again without checking with him first. */
		clip-path: polygon(13% 0, 100% 0, 100% 100%, 0 100%);
	}

	.fcv3 .v3-collab-hero .v3-split-media img,
	.fcv3 .v3-lander-hero .v3-split-media img,
	.fcv3 .v3-hero-media img {
		display: block;
		width: 100%;
		height: 100%;
		max-width: none;
		max-height: none;
		object-fit: cover;
		margin: 0;
		border: 0;
		border-radius: 0;
		box-shadow: none;
	}
}

/* Below 901px the split has already stacked, so a side panel has no side to
   sit on. The photo becomes a full-bleed band instead: edge to edge across
   the viewport (the negative margin resolves against .v3-split-row's width,
   which is the wrap, so it is exactly the gutter), with the diagonal moved
   to the bottom edge where there is room for it to read. Same idea, same
   hard cut, rotated to suit the shape. */
@media (max-width: 900px) {
	/* Ari: "Lot of empty space now."

	   Exactly the same trap as flex:0 0 auto on the media below, one
	   element up. .v3-split-copy is flex: 1 1 420px, and once the row
	   stacks it is a flex COLUMN, so that 420px is a flex-basis on the
	   HEIGHT -- the copy box was held open at 420px while its content
	   ended 115px short of the bottom. Measured on Contact at 375px:
	   content finished at y=477, the box ran to y=592.

	   Shrink-wrapping it is the whole fix. Worth noting the pattern: in
	   this layout every "flex: 1 1 <px>" written for a horizontal row
	   becomes a height the moment the row stacks. */
	.fcv3 .v3-collab-hero .v3-split-copy,
	.fcv3 .v3-lander-hero .v3-split-copy {
		flex: 0 0 auto;
	}

	.fcv3 .v3-collab-hero .v3-split-media,
	.fcv3 .v3-lander-hero .v3-split-media,
	.fcv3 .v3-hero-media {
		position: static;
		/* flex:0 0 auto matters: when the row stacks it becomes a flex
		   COLUMN, so flex-basis/grow govern HEIGHT, and the inherited
		   grow from the desktop rules stretched the panel past its own
		   clamp (measured 380px against a 340px maximum on /expat/).
		   Pinning the flex makes the height below authoritative. */
		flex: 0 0 auto;
		/* align-self is doing the real work here. The stacked row is a flex
		   COLUMN, so a flex item with width:auto does not fill the cross
		   axis on its own -- it shrink-wraps, which left the photo stopping
		   two thirds of the way across with cream beside it. Stretch plus
		   the negative inline margins is what makes it exactly 100vw. */
		align-self: stretch;
		width: auto;
		max-width: none;
		/* No top margin: .v3-split-row's own 48px gap already separates the
		   copy from the photo, and 32px on top of it was reading as a
		   second, unexplained gap. */
		margin: 0 calc(50% - 50vw) 0;
		height: clamp(220px, 58vw, 340px);
		transform: none;
		/* No cut here. See the rule below: the BAND supplies the angle, and
		   it sits over this edge. */
		clip-path: none;
	}

	/* Ari: "the mobile is kinda weird. How about making the image bottom
	   line match the angle of the animated bar (or making the bar slightly
	   over the image so it covers the bottom line nicely under it)?"

	   The second option, because it leaves ONE angle on the page instead of
	   two that have to be kept in sync. What was weird was not the diagonal
	   itself -- it was a photo cut at one angle, then 84px of dead cream,
	   then the band cut at a different one. Three edges arguing.

	   So on mobile the photo runs flush to the bottom of the hero and the
	   band is pulled up over it. The band's own -1deg rotation then becomes
	   the only angle in the composition, and it hides the photo's straight
	   bottom edge underneath itself.

	   -14px is the overlap. The band's rotation moves its top edge by about
	   3.3px either side of centre at phone width (half of 375px times
	   tan 1deg), so 14px clears that comfortably at any width the rule
	   covers without eating into the photo. */
	.fcv3 .v3-collab-hero:has(+ .v3-band),
	.fcv3 .v3-lander-hero:has(+ .v3-band) {
		padding-bottom: 0;
		margin-bottom: -14px;
	}
	.fcv3 .v3-collab-hero .v3-split-media img,
	.fcv3 .v3-lander-hero .v3-split-media img,
	.fcv3 .v3-hero-media img {
		display: block;
		width: 100%;
		height: 100%;
		max-width: none;
		max-height: none;
		object-fit: cover;
		margin: 0;
		border: 0;
		border-radius: 0;
		box-shadow: none;
	}
}

/* ---- 27b. Heading-to-grid rhythm --------------------------------------
   Both tight rows Ari spotted on the Solo Travelers dark section, fixed
   at the component rather than on that page:

   1. .v3-h2 ships margin-bottom 18px. Under a 60px display heading that
      has wrapped to two lines, 18px reads as a collision -- measured at
      exactly 18px between the heading and the step grid. The front page's
      own equivalent, .v3-spec .v3-h2, uses 40px. Matching it rather than
      inventing a third number.
   2. .v3-step-n ("01") had margin-bottom 0, so the mono index sat flush
      on the step title. Its two cousins already have air --
      .v3-desk-step-n 7px, .v3-why-n 18px -- so this brings the third into
      line.

   Both are global: the homepage's How section gets the same improvement,
   which is the point.
   ------------------------------------------------------------------------ */
.fcv3 .v3-how .v3-h2,
.fcv3 .v3-lander-dark .v3-h2,
.fcv3 .v3-collab-why .v3-h2 {
	margin-bottom: 40px;
}
/* Selector depth matters here: main.css carries ".fcv3 .v3-step p
   { margin: 0 }" at (0,2,1), and .v3-step-n IS a <p>, so a bare
   ".fcv3 .v3-step-n" (0,2,0) loses and the margin stays zero. Same trap as
   .v3-why-item p vs .v3-why-n in section 26b. Verified by computed style,
   not by reading the file. */
.fcv3 .v3-step .v3-step-n {
	margin-bottom: 10px;
}


/* ==========================================================================
   28. One form treatment, two form plugins
   13 Sep 2026

   Ari: "Contact page form could look visually the same as the one in the
   article."

   The articles already carry a finished signup panel -- .fc-signup-section:
   peach ground, notched corners via clip-path, a 2px dashed rule inset
   14px, sentence-case labels, white 10px-radius fields, and a pink submit
   with a hard ink offset. It is also the form a visitor is most likely to
   have met already, appearing on all 45 posts against a single contact
   page. So it wins, and Contact and Collaborate now use it instead of the
   white ink-bordered card they had.

   The panel needed no new CSS: .fcv3 .fc-signup-section was never scoped
   to articles, so adding the class to those two pages was enough. The gap
   is the PLUGIN. Articles render FluentForms; Contact (id 5) and
   Collaborate (id 2765) render WPForms, whose markup and class names are
   completely different -- and whose own stylesheet sets fields with
   !important, so matching it requires !important back rather than mere
   specificity. That is the only reason this section exists.

   Every value below is copied from the article rules, not invented. If the
   article panel changes, change it there and mirror it here -- or better,
   move both to custom properties.
   ========================================================================== */

/* Fields. Mirrors ".fc-signup-form input[type=text] ..." exactly. */
.fcv3 .fc-signup-section .wpforms-container input[type=text],
.fcv3 .fc-signup-section .wpforms-container input[type=email],
.fcv3 .fc-signup-section .wpforms-container input[type=tel],
.fcv3 .fc-signup-section .wpforms-container input[type=url],
.fcv3 .fc-signup-section .wpforms-container select,
.fcv3 .fc-signup-section .wpforms-container textarea {
	padding: 12px 14px !important;
	font-size: 15px !important;
	font-family: inherit !important;
	color: var(--v3-ink) !important;
	background: #fff !important;
	border: 1px solid rgba(78, 26, 61, .2) !important;
	border-radius: 10px !important;
	box-shadow: none !important;
}
.fcv3 .fc-signup-section .wpforms-container input[type=text]:focus,
.fcv3 .fc-signup-section .wpforms-container input[type=email]:focus,
.fcv3 .fc-signup-section .wpforms-container input[type=tel]:focus,
.fcv3 .fc-signup-section .wpforms-container input[type=url]:focus,
.fcv3 .fc-signup-section .wpforms-container textarea:focus {
	border-color: var(--v3-pink) !important;
}

/* Labels. The article's are sentence case at 13/600 -- NOT the mono
   uppercase the retired card used, which is the most visible part of the
   change. Stated longhand because the old rule set family, tracking and
   transform, and each has to be actively undone. */
.fcv3 .fc-signup-section .wpforms-container .wpforms-field-label {
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: normal;
	text-transform: none;
	color: var(--v3-ink);
	margin: 0 0 6px;
}

/* Submit. ".fcv3 .fc-signup-form button" already gives pink-on-ink with the
   5px offset, but WPForms' own button rules carry !important, so the same
   declarations have to be repeated at that weight to land. */
.fcv3 .fc-signup-section .wpforms-container button[type=submit] {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	background: var(--v3-pink) !important;
	color: #fff !important;
	border: 2px solid var(--v3-ink) !important;
	border-radius: 10px !important;
	padding: 13px 28px !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	box-shadow: 5px 5px 0 var(--v3-ink);
	transition: transform .15s ease, box-shadow .15s ease;
}
.fcv3 .fc-signup-section .wpforms-container button[type=submit]:hover {
	background: var(--v3-pink) !important;
	transform: translate(2px, 2px);
	box-shadow: 3px 3px 0 var(--v3-ink);
}
.fcv3 .fc-signup-section .wpforms-container button[type=submit]:active {
	transform: translate(5px, 5px);
	box-shadow: 0 0 0 var(--v3-ink);
}

/* The panel is peach, so it needs a non-peach ground to sit on the way it
   does in an article. Contact's form section was peach, which would have
   made the panel invisible except for its notch and dashed rule.
   Collaborate's blush is already distinct enough and is left alone. */
.fcv3 .v3-desk-section {
	background: var(--v3-bg);
}

@media (max-width: 640px) {
	.fcv3 .fc-signup-section .wpforms-container button[type=submit] {
		width: 100%;
		padding: 15px 20px !important;
	}
}

/* ---- About: closing newsletter CTA becomes the page's one saturated
   panel (rule 1) -- previously plain white/flat, the only section on
   the page carrying no colour weight while Story (peach) and Join
   (blush) already carry tints and Mission/Vision's rule-based rows
   carry their own structure from the rules themselves. Pink fill +
   white type, same recipe as the homepage's Proof section (the site's
   one other fully-saturated panel); the button gets a white-fill/
   pink-text swap so it doesn't vanish against the pink field -- same
   idea as the old fc-page-hero button swap, just fcv3-scoped. Ari,
   13 Sep 2026: "Rework the visual of the about page so it matches the
   rest of the site better." No copy changed, background/button only. */
.fcv3 .v3-about-cta {
	background: var(--v3-pink);
	color: #fff;
}
.fcv3 .v3-about-cta .v3-lede { color: rgba(255, 255, 255, .85); }
.fcv3 .v3-about-cta .v3-btn--primary {
	background: #fff;
	color: var(--v3-pink);
	box-shadow: 5px 5px 0 var(--v3-ink);
}
.fcv3 .v3-about-cta .v3-btn--primary:hover {
	background: var(--v3-blush);
}


/* 13 Sep 2026: header "Join the waitlist" nav CTA. The header template
   part sits outside the .fcv3 wrapper (the V3 design system's CSS is all
   scoped ".fcv3 .v3-something" and its color variables are defined on
   .fcv3 itself), so the existing .v3-btn/.v3-btn--primary classes render
   unstyled (falls back to the theme's default dark WP button style) when
   used in the header. This is a small standalone equivalent, hardcoded to
   the same brand pink/coral since the CSS custom properties aren't in
   scope here. */
/* 13 Sep 2026 fix: WordPress's own block-library CSS gives every
   .wp-block-button__link a default dark pill background/radius of its
   own, independent of theme CSS -- styling only the outer .wp-block-button
   wrapper (as this rule originally did) leaves that default anchor style
   still painting a second, dark pill nested inside it. This theme already
   has the fix for the same bug on the V3 buttons (see main.css, "one
   visible box" note): neutralise the wrapper's own box model completely
   and move all real styling onto .wp-block-button__link instead. */
.fc-header-cta.wp-block-button {
	display: block;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
}
.fc-header-cta.wp-block-button .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 12px 22px;
	font-size: 15px;
	font-weight: 700;
	text-decoration: none;
	border-radius: 6px;
	background: #FC599D;
	color: #fff;
	box-shadow: 4px 4px 0 #F0855C;
	transition: transform .15s ease, box-shadow .15s ease;
	white-space: nowrap;
}
.fc-header-cta.wp-block-button .wp-block-button__link:hover {
	transform: translate(2px, 2px);
	box-shadow: 2px 2px 0 #F0855C;
	color: #fff;
}

/* 13 Sep 2026: sticky header fix. body { overflow-x: hidden; } (main.css)
   forces the UA to also treat overflow-y as "auto" per spec, which makes
   BODY (not the viewport/html) the sticky positioning containing block --
   but body itself never actually scrolls (html does), so position:sticky
   silently breaks and .fc-site-header scrolls away instead of sticking.
   overflow-x: clip has the same no-horizontal-scrollbar effect without
   triggering that auto-conversion, so sticky works again. */
body {
	overflow-x: clip;
}

.fc-site-header {
	background: #FFFBF7;
}
/* The sticky rule has to live on the wp:template-part's own auto-generated
   wrapper div, not the header itself: that wrapper is header's immediate
   containing block and (since it holds nothing but the header) is exactly
   as tall as the header, leaving zero room for the header to "travel" --
   so position:sticky on the header directly unsticks after 1px of scroll.
   The wrapper's own parent (.wp-site-blocks, the whole page) is tall, so
   making the wrapper itself sticky gives it real room to stick throughout
   the page. */
.wp-block-template-part:has(> .fc-site-header) {
	position: sticky;
	top: 0;
	z-index: 999;
}

/* 13 Sep 2026: text logo in the header, replacing the old <img> wordmark
   file so Ari can edit the name/link straight from the block editor.
   Uses the same heading font as the rest of the site (Inter, 700 -- see
   theme.json styles.elements.h1/h2) since the header sits outside .fcv3
   and so can't reach the design system's own heading rules. */
.fc-logo-text {
	margin: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: 24px;
	line-height: 1;
}
.fc-logo-text a {
	color: #4E1A3D;
	text-decoration: none;
}
.fc-logo-text a:hover {
	color: #4E1A3D;
}

/* 13 Sep 2026: Home page founder photo, bigger, top aligned with the
   "Why this exists" eyebrow and bottom aligned with the name/LinkedIn
   signature row. .v3-founder-row/-photo are shared with the About page
   (which already decouples its own row alignment via
   .v3-about-story .v3-founder-row -- see main.css section 10/22), so this
   is a modifier on this one instance rather than a change to the shared
   rule that would also resize About's circular avatar. */
.fcv3 .v3-founder-row--tall {
	grid-template-columns: 240px 1fr;
	align-items: stretch;
}
.fcv3 .v3-founder-row--tall .v3-founder-photo {
	width: 240px;
	height: 100%;
	margin: 0;
}
.fcv3 .v3-founder-row--tall .v3-founder-photo figure,
.fcv3 .v3-founder-row--tall .v3-founder-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 8px;
	display: block;
}
@media (max-width: 900px) {
	.fcv3 .v3-founder-row--tall {
		grid-template-columns: 1fr;
	}
	/* 13 Sep 2026: square on mobile, was a fixed 260px letterbox band.
	   object-fit: cover on the img handles the crop inside the square. */
	.fcv3 .v3-founder-row--tall .v3-founder-photo {
		width: 100%;
		height: auto;
		aspect-ratio: 1 / 1;
	}
}

/* 13 Sep 2026: mobile menu overlay restyle.

   It was rendering with core defaults and almost no theme styling: flat
   white instead of the site ground colour, no side gutters so links sat
   against the screen edge, a 4px gap between items, and top level items
   aligned right while the About submenu aligned left, which made those
   sub items look loose instead of nested.

   Now a real panel: warm background, side gutters, left aligned list with
   large tap targets and hairline dividers, and the submenu grouped behind
   a continuous indent rail. The chevron toggle is hidden on mobile by core
   and submenus render expanded, so no disclosure behaviour is needed.

   Scoped to .is-menu-open under 781px, so the desktop dropdown is not
   affected. Supersedes the 9 Sep submenu chrome rules in main.css
   section 1, which load first and are overridden here. */
@media (max-width: 781px) {
	header.wp-block-group .wp-block-navigation__responsive-container.is-menu-open {
		/* core paints the open overlay white from a more specific rule, so
		   this has to win outright to match the header ground colour */
		background-color: #FFFBF7 !important;
	}
	header.wp-block-group .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
		padding: 8px 24px 40px;
	}
	header.wp-block-group .wp-block-navigation__responsive-container-close {
		top: 20px;
		right: 20px;
		color: var(--fc-plum);
	}
	header.wp-block-group .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
		align-items: stretch;
		gap: 0;
		width: 100%;
	}
	header.wp-block-group .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item {
		width: 100%;
		border-bottom: 1px solid var(--fc-line);
	}
	header.wp-block-group .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:last-child {
		border-bottom: none;
	}
	header.wp-block-group .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
		display: block;
		width: 100%;
		padding: 15px 0;
		font-size: 18px;
		font-weight: 600;
		text-align: left;
		color: var(--fc-plum);
	}
	/* About and its children have to stack. Core lays the parent item out
	   as a nowrap flex row, which puts the whole submenu in a second column
	   beside the About link instead of underneath it. */
	header.wp-block-group .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.has-child {
		flex-wrap: wrap;
		align-items: flex-start;
	}
	header.wp-block-group .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.has-child > .wp-block-navigation-item__content {
		flex: 0 0 100%;
	}
	/* Core sets width and padding-left on the submenu container from a more
	   specific selector than anything scoped to this header, so the indent
	   rail needs these to win outright. */
	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;
		flex: 0 0 100%;
		border-left: 2px solid var(--fc-line) !important;
		width: 100% !important;
		margin: 0 0 12px 2px !important;
		padding: 2px 0 2px 16px !important;
	}
	header.wp-block-group .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		padding: 9px 0;
		font-size: 15px;
		font-weight: 500;
		opacity: .72;
	}
}