/*
 * Feast and Find, Secondary Page Template Styles
 * Shared styles for About, Essentials, Contact, Checklists, Ship Guide.
 * All selectors prefixed ffp- (feast-find-page).
 * Uses the same Figma-measured tokens as the homepage.
 */


/* ═══════════════════════════════════════════════
   RESET, Astra container override for templates
   ═══════════════════════════════════════════════ */

.ff-page {
  max-width: none;
  margin: 0;
  padding: 0;
}


/* ═══════════════════════════════════════════════
   PAGE HERO (shared across all secondary pages)
   Already defined in global.css as .ff-page-hero
   Adding badge support here.
   ═══════════════════════════════════════════════ */

.ffp-badge {
  display: inline-block;
  font-family: var(--wp--preset--font-family--primary);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  line-height: 16px;
  color: var(--ff-teal);
  margin-bottom: 16px;
}

.ffp-badge--teal {
  background: var(--ff-teal);
  color: var(--ff-teal-dark);
  padding: 6px 16px;
  border-radius: var(--ff-radius-pill);
}


/* ═══════════════════════════════════════════════
   LAYOUT CONTAINERS
   ═══════════════════════════════════════════════ */

.ffp-section {
  padding: 96px 0;
}

.ffp-section--alt {
  background: var(--ff-sand-alt);
}

.ffp-section--cta {
  background: var(--ff-ocean);
  color: var(--ff-white);
  text-align: center;
  /* 2026 layout pass: clamp the vertical padding so the CTA band scales
   * with viewport width, 64 px on phones (calmer, less billboard-y),
   * 96 px on desktop (full closer presence). 8vw inflection means the
   * ceiling is hit around 1200 px, the floor below ~800 px. */
  padding: clamp(64px, 8vw, 96px) 0;
}

.ffp-section--cta h2 {
  color: var(--ff-white);
  /* 2026-04-23 layout pass: closer h2 was visibly undersized at the inherited
   * 36 px / 40 lh, a premium closer wants more display weight. Clamped
   * 32-44 px with a tight 1.1 line-height so it reads as an end-of-page
   * banner rather than a mid-body header. The inherited `.ffp-section h2`
   * rule (36 px / 40 lh) still wins on non-CTA bands. */
  font-size: clamp(32px, 4.5vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin-bottom: 16px;
}

/*
 * Cascade fix: `.ffp-section--cta p` (specificity 0,2,0) and `.ffp-section p`
 * (also 0,2,0) tie, and `.ffp-section p` is declared later in the file so it
 * WINS, applying `color: var(--ff-muted)` (dark grey #3f484d) to every
 * paragraph inside the CTA band. Visible result: dark grey text on dark teal
 * ocean background, ~3:1 contrast, unreadable. Every previous "bump the
 * alpha" fix in this file was silently overridden by that later rule.
 *
 * Real fix: bump specificity so `.ffp-section--cta p` wins unambiguously
 * regardless of source order. Compound-class selector `.ffp-section.ffp-section--cta p`
 * = 0,3,0, which beats 0,2,0 in every cascade regardless of who comes first.
 * The same specificity bump is applied to anchor and li elements below.
 */
.ffp-section.ffp-section--cta p,
.ffp-section.ffp-section--cta li {
  color: rgba(255, 255, 255, 0.96);
  font-size: 18px;
  line-height: 28px;
  max-width: 520px;
  margin: 0 auto 32px;
}

.ffp-section.ffp-section--cta li {
  font-size: 14px;
  line-height: 1.55;
  margin: 0;
}

/* Underline applies to inline anchors only, NOT to the CTA buttons.
 * Previously this rule underlined every <a> in the section, which made
 * the "Try the Calculator" / "Ship Guides" buttons render with underlined
 * text (not premium). The :not() guards exclude the two button classes
 * used inside our CTA bands. */
.ffp-section.ffp-section--cta a:not(.ffh-btn):not(.wp-element-button):not(.wp-block-button__link) {
  color: #ffffff;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

/* Closing-CTA button row, single shared rule for every `__buttons`
 * wrapper inside an `.ffp-section--cta`. About uses `.ffp-buttons`,
 * Essentials closer uses `.ffe-closer__buttons`, and any future CTA
 * wrapper that ends in `__buttons` inherits the same rhythm. Ensures
 * consistent 16 px gap + 32 px top margin regardless of template. */
.ffp-section--cta .ffp-buttons,
.ffp-section--cta [class$="__buttons"] {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
  margin-top: 32px;
  margin-bottom: 0;
}

/* Eyebrow rhythm inside the CTA band, tightens the eyebrow-to-h2 spacing
 * so the three-line header stack (eyebrow / h2 / paragraph) reads as one
 * measured unit. Without this, inherited `.ffp-eyebrow { margin-bottom:
 * 12px }` from elsewhere + the h2's own margin-top creates an awkward gap. */
.ffp-section--cta .ffp-eyebrow,
.ffp-section--cta .ffe-closer__eyebrow {
  display: inline-block;
  margin-bottom: 14px;
}

/* Mobile override, matches the existing .ffe-closer__buttons responsive
 * rule. Stacks buttons vertically on narrow viewports so labels don't
 * wrap mid-word inside a cramped flex row. */
@media (max-width: 480px) {
  .ffp-section--cta .ffp-buttons,
  .ffp-section--cta [class$="__buttons"] {
    flex-direction: column;
    align-items: stretch;
  }
}

.ffp-narrow {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 var(--ff-page-padding, 48px);
}

.ffp-wide {
  /* 2026 layout pass: literal 1280 → token --ff-wide-width (now 1200 px)
   * so content aligns to the same grid as Astra's header. */
  max-width: var(--ff-wide-width);
  margin: 0 auto;
  padding: 0 var(--ff-page-padding, 48px);
}

.ffp-center {
  text-align: center;
}


/* ═══════════════════════════════════════════════
   TYPOGRAPHY
   ═══════════════════════════════════════════════ */

.ffp-section h2 {
  font-size: 36px;
  line-height: 40px;
  color: var(--ff-ocean);
  margin: 0 0 32px;
}

/* Body text 17→18px + darker from muted to navy for older-reader legibility.
   Site audience skews 40+/50+/60+; the prior 17px muted measured comfortable
   but not generous. 18px navy reads cleanly at arm's length on most screens. */
.ffp-section p {
  font-size: 18px;
  line-height: 1.7;
  color: var(--ff-navy);
  margin: 0 0 20px;
}

.ffp-section p:last-child {
  margin-bottom: 0;
}

.ffp-muted {
  font-size: 14px;
  color: var(--ff-stone);
  font-style: italic;
}

.ffp-breadcrumb {
  font-size: 14px;
  color: var(--ff-stone);
}

.ffp-breadcrumb a {
  color: var(--ff-ocean);
  text-decoration: none;
}

.ffp-breadcrumb a:hover {
  color: var(--ff-coral);
}


/* ═══════════════════════════════════════════════
   CARD GRID
   ═══════════════════════════════════════════════ */

.ffp-card-grid {
  display: grid;
  gap: 32px;
  margin-top: 48px;
}

.ffp-card-grid--2 {
  grid-template-columns: repeat(2, 1fr);
}

.ffp-card-grid--3 {
  grid-template-columns: repeat(3, 1fr);
}


/* ═══════════════════════════════════════════════
   CARDS
   ═══════════════════════════════════════════════ */

.ffp-card {
  background: var(--ff-white);
  border: 1px solid var(--ff-border);
  border-radius: var(--ff-radius);
  box-shadow: var(--ff-shadow-card);
  /* 2026-04-23 premium-polish pass: 33 → 32 puts the card on the 4-/8-px
   * grid everything else in the design system snaps to. Visually ~identical
   * but the inspector diff is clean. */
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: box-shadow var(--ff-ease-normal), transform var(--ff-ease-normal);
}

.ffp-card:hover {
  box-shadow: var(--ff-shadow-card-hover);
  transform: translateY(-3px);
}

.ffp-card h3 {
  font-size: 22px;
  line-height: 1.3;
  color: var(--ff-navy);
  margin: 0;
}

/* Card body 15→16px, muted→navy for readability parity with .ffp-section p.
   Kept relative line-height (1.6) for a slightly tighter card feel vs main body. */
.ffp-card p {
  font-size: 16px;
  line-height: 1.6;
  color: var(--ff-navy);
  margin: 0;
}

/* Card as a link (Essentials, Checklists) */
.ffp-card--link {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

.ffp-card--link:hover {
  color: inherit;
}

.ffp-card__arrow {
  font-size: 14px;
  font-weight: 600;
  color: var(--ff-ocean);
  margin-top: auto;
  padding-top: 8px;
  transition: color var(--ff-ease-fast);
}

.ffp-card--link:hover .ffp-card__arrow {
  color: var(--ff-coral);
}


/* ── Icon circles on cards ────────────────────── */

.ffp-card__icon-circle {
  width: 56px;
  height: 56px;
  border-radius: var(--ff-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  margin-bottom: 8px;
}

.ffp-card__icon-circle--blue  { background: var(--ff-icon-bg-blue); }
.ffp-card__icon-circle--teal  { background: var(--ff-icon-bg-teal); }
.ffp-card__icon-circle--coral { background: var(--ff-icon-bg-coral); }

.ffp-card__icon-circle--lg {
  width: 88px;
  height: 88px;
  font-size: 2.25rem;
}


/* ═══════════════════════════════════════════════
   ESSENTIALS: SECTION HEADERS + FEATURED CARD
   ═══════════════════════════════════════════════ */

/* Section header with eyebrow + title + lede.
   Used to group Essentials cards into themed sections. */
.ffp-section-head {
  max-width: 640px;
  margin: 0 auto 32px;
  text-align: center;
}

.ffp-eyebrow {
  display: inline-block;
  font-family: var(--wp--preset--font-family--primary);
  /* 2026 readability pass: literal 13 px (up from the 12-px eyebrow token).
   * Eyebrows that label important sections, "ABOUT US", "READY TO PRICE
   * IT OUT?", "SEND A MESSAGE", read clearly for 50+ visitors at this
   * size while still feeling like a quiet hierarchy marker. */
  font-size: 13px;
  font-weight: var(--ff-eyebrow-weight);
  letter-spacing: var(--ff-eyebrow-tracking);
  text-transform: uppercase;
  color: var(--ff-coral);
  margin-bottom: 12px;
}

/* Form status messages for contact + lead-magnet forms. Rendered by
 * assets/js/forms.js after a fetch submit. Sit below the form fields;
 * calm visual weight, accessible color contrast, no animation. */
.ff-form-status {
  margin-top: 16px;
  padding: 14px 18px;
  border-radius: var(--ff-radius-sm);
  font-size: 16px;
  line-height: 1.5;
  font-weight: 500;
}
.ff-form-status--success {
  background: rgba(0, 112, 94, 0.10);
  color: var(--ff-teal-dark);
  border: 1px solid rgba(0, 112, 94, 0.25);
}
.ff-form-status--error {
  background: rgba(154, 61, 46, 0.08);
  color: var(--ff-coral-dark);
  border: 1px solid rgba(154, 61, 46, 0.30);
}

.ffp-section-head h2 {
  /* Tighter default bottom margin, the lede sits below. */
  margin: 0 0 12px;
}

.ffp-section-head__lede {
  font-size: 17px;
  line-height: 28px;
  color: var(--ff-muted);
  margin: 0;
}

/* Featured "Start Here" card, full-width editorial anchor
   at the top of the Essentials page. Uses the existing
   .ffp-card base, so shadow / radius / hover behavior match. */
.ffp-card--featured {
  padding: 56px;
  background: linear-gradient(135deg, #fdf9f1 0%, #ffffff 70%);
  border-color: var(--ff-border);
}

.ffp-card--featured:hover {
  /* Same lift as .ffp-card:hover, keeps the interaction consistent. */
  transform: translateY(-3px);
}

.ffp-card__featured-inner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 48px;
  align-items: center;
}

.ffp-card__featured-lead {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ffp-card__featured-title {
  font-size: 32px;
  line-height: 40px;
  color: var(--ff-ocean);
  margin: 0;
}

.ffp-card__featured-text {
  font-size: 17px;
  line-height: 28px;
  color: var(--ff-muted);
  margin: 0;
}

.ffp-card--featured .ffp-card__arrow {
  /* Slightly more prominent than the default card arrow. */
  font-size: 15px;
  margin-top: 8px;
  padding-top: 0;
}

/* Badge variant that sits on a card background rather than
   the page hero's dark gradient. Gives the "START HERE" pill
   visual weight against the cream featured card. */
.ffp-badge--on-card {
  background: var(--ff-coral-bg, rgba(154, 61, 46, 0.08));
  color: var(--ff-coral);
  padding: 6px 14px;
  border-radius: var(--ff-radius-pill);
  margin-bottom: 4px;
  align-self: flex-start;
}


/* ═══════════════════════════════════════════════
   ESSENTIALS ARTICLE (virtual pages at /essentials/{slug}/)
   Rendered by page-essentials-article.php. Body-text sizing is
   deliberately bumped (17-18px base, 1.7 line-height) because the
   audience skews 40+/50+/60+, older-reader legibility beats
   compactness.
   ═══════════════════════════════════════════════ */

.ffea-hero {
  position: relative;
  max-width: var(--ff-content-width);
  margin: 0 auto;
  padding: 72px var(--ff-page-padding, 48px) 40px;
  isolation: isolate;
}

/* Decorative illustration sits behind the hero copy. color: var(--ff-ocean)
 * so ff_illustration() 'currentColor' patterns tint to brand ocean. */
.ffea-hero__illus-wrap {
  position: absolute;
  inset: 0 0 auto 0;
  height: 220px;
  overflow: hidden;
  color: var(--ff-ocean);
  pointer-events: none;
  z-index: -1;
  opacity: 0.7;
}
.ffea-hero__illus {
  display: block;
}
/* Wave-band illustration, stretches across the full hero width */
.ffea-hero__illus.ff-illus--hero-waves {
  position: absolute;
  inset: auto 0 -10px 0;
  width: 100%;
  height: auto;
  max-height: 200px;
}
/* Round decorative marks (sun / compass / cash), anchor top-right */
.ffea-hero__illus.ff-illus--hero-sun,
.ffea-hero__illus.ff-illus--hero-compass,
.ffea-hero__illus.ff-illus--hero-cash {
  position: absolute;
  top: 28px;
  right: clamp(16px, 5vw, 72px);
  width: min(180px, 28vw);
  height: auto;
  opacity: 0.7;
}
/* Cash/tipping illustration reads best at slightly higher opacity
 * because the filled bill/coin geometry carries more ink than the
 * sun or compass marks. */
.ffea-hero__illus.ff-illus--hero-cash {
  opacity: 0.85;
  top: 36px;
  width: min(200px, 32vw);
}

.ffea-hero__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ffea-hero__eyebrow {
  /* 13 px retained (vs 12 px global eyebrow), article hero eyebrows sit
     over a larger title and want a half-step more visual weight. */
  font-size: 13px;
  font-weight: 800;
  /* Standardized via --ff-eyebrow-tracking (was 0.16em literal). */
  letter-spacing: var(--ff-eyebrow-tracking);
  color: var(--ff-coral);
}

.ffea-hero__title {
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ff-ocean);
  margin: 0;
}

.ffea-hero__deck {
  font-size: 20px;
  line-height: 1.55;
  color: var(--ff-navy);
  margin: 8px 0 0;
  max-width: 640px;
}

.ffea-hero__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  font-size: 15px;
  color: var(--ff-muted);
}

.ffea-hero__meta a {
  color: var(--ff-ocean);
  text-decoration: none;
  font-weight: 600;
}
.ffea-hero__meta a:hover { color: var(--ff-coral); }
.ffea-hero__dot { color: var(--ff-border); }

.ffea-article {
  max-width: var(--ff-content-width);
  margin: 0 auto;
  padding: 0 var(--ff-page-padding, 48px) 40px;
}

.ffea-section {
  margin-bottom: 56px;
}

.ffea-section__heading {
  display: flex;
  align-items: baseline;
  gap: 16px;
  font-size: 28px;
  color: var(--ff-ocean);
  margin: 0 0 16px;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

.ffea-section__num {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: var(--ff-coral);
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}

.ffea-section__body {
  font-size: 18px;
  line-height: 1.7;
  color: var(--ff-navy);
  margin: 0 0 16px;
}

.ffea-section__bullets {
  list-style: none;
  padding: 0;
  margin: 12px 0 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ffea-section__bullets li {
  position: relative;
  padding-left: 24px;
  font-size: 17px;
  line-height: 1.6;
  color: var(--ff-navy);
}

.ffea-section__bullets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 12px;
  height: 2px;
  background: var(--ff-coral);
  border-radius: 2px;
}

.ffea-section__bullets li strong {
  color: var(--ff-ocean);
  font-weight: 700;
}

/* Takeaways callout, quiet teal card, visually distinct from sections */
.ffea-takeaways {
  margin: 48px 0 40px;
  padding: 28px 32px;
  background: rgba(152, 240, 218, 0.14);
  border: 1px solid rgba(0, 112, 94, 0.25);
  border-left: 4px solid var(--ff-teal-dark);
  border-radius: var(--ff-radius);
}

.ffea-takeaways__heading {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ff-teal-dark);
  margin: 0 0 16px;
}

.ffea-takeaways ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ffea-takeaways li {
  position: relative;
  padding-left: 26px;
  font-size: 17px;
  line-height: 1.55;
  color: var(--ff-navy);
}

.ffea-takeaways li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  width: 20px;
  height: 22px;
  color: var(--ff-teal-dark);
  font-weight: 800;
}

/* Related reads, two- or three-column grid of next-link cards */
.ffea-related {
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid var(--ff-border);
}

.ffea-related__heading {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ff-stone);
  margin: 0 0 14px;
}

.ffea-related__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
}

.ffea-related__card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  background: var(--ff-white);
  border: 1px solid var(--ff-border);
  border-radius: var(--ff-radius-sm);
  text-decoration: none;
  font-size: 15px;
  font-weight: 700;
  color: var(--ff-ocean);
  transition: border-color var(--ff-ease-fast), transform var(--ff-ease-fast), box-shadow var(--ff-ease-fast);
}

.ffea-related__card:hover {
  border-color: var(--ff-ocean);
  transform: translateY(-2px);
  box-shadow: var(--ff-shadow-card);
  color: var(--ff-ocean);
}

.ffea-related__arrow { font-size: 16px; }


/* ── Inline diagrams inside essentials articles ──────
 * Used by page-essentials-article.php when a specific article slug
 * needs a visual (currently the Cabin Selection Guide's top-down
 * ship diagram). Sits between sections as a standalone figure with
 * sand-alt background + rounded container so it reads as editorial
 * art, not a generic placeholder. */

.ffea-diagram {
  margin: 28px 0 36px;
  padding: 20px 24px 16px;
  background: var(--ff-sand-alt);
  border-radius: var(--ff-radius);
  border: 1px solid rgba(0, 99, 128, 0.08);
  text-align: center;
}

.ffea-diagram__svg {
  max-width: 640px;
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

.ffea-diagram__caption {
  margin: 14px auto 0;
  max-width: 560px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ff-muted);
  font-style: italic;
}

@media (max-width: 640px) {
  .ffea-diagram {
    padding: 14px 16px 12px;
    margin: 20px -8px 28px;
  }
}

.ffea-cta {
  margin-top: 40px;
}

@media (max-width: 768px) {
  .ffea-hero { padding: 56px 24px 32px; }
  .ffea-article { padding: 0 24px 32px; }
  .ffea-section__heading { font-size: 24px; gap: 12px; }
  .ffea-section__body { font-size: 17px; }
  .ffea-section__bullets li { font-size: 16px; }
  .ffea-takeaways { padding: 22px 24px; }
  .ffea-takeaways li { font-size: 16px; }
}


/* ═══════════════════════════════════════════════
   ESSENTIALS, page-specific polish (ffe-*)
   Scoped so About/Contact/Checklists don't inherit these tweaks.
   ═══════════════════════════════════════════════ */

.ffe-hero {
  /* Slightly tighter hero on Essentials, the jump nav below the deck
     adds a row of content, so we trim the vertical padding to keep the
     whole hero inside a single comfortable viewport-glance. */
  min-height: 300px;
}

/* In-page jump nav just below the hero lede.
 * 2026 readability pass: 13 → 15 px so the subnav reads cleanly for the
 * 50+ cruise-traveler audience. With 6 anchors the row may wrap to 2
 * lines on narrow phones; that's fine, wrap > tiny single-line text.
 * `display: flex` (was inline-flex) lets the row use its full width and
 * center properly inside the centered hero block. */
.ffe-jump {
  margin-top: 24px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 16px;
  max-width: 720px;
  margin-inline: auto;
  font-size: 15px;
  line-height: 1.4;
  font-weight: 600;
  letter-spacing: 0.3px;
}

.ffe-jump a {
  color: rgba(255, 255, 255, 0.94);
  text-decoration: none;
  padding: 4px 2px;
  border-bottom: 1.5px solid rgba(255, 255, 255, 0.4);
  transition: border-color var(--ff-ease-fast), color var(--ff-ease-fast);
}

.ffe-jump a:hover,
.ffe-jump a:focus-visible {
  color: #fff;
  border-bottom-color: #fff;
  outline: none;
}

.ffe-jump__sep {
  color: rgba(255, 255, 255, 0.45);
  font-size: 0.9em;
}


/* Featured card, richer editorial treatment. Adds a 2×2 art tile grid
   so the right column isn't just a single icon circle, plus a "at a glance"
   facts strip underneath that reads as magazine-style editorial. */
.ffe-featured-section {
  padding-top: 72px;
  padding-bottom: 72px;
}

/* Richer background gradient + tighter composition on the featured card. */
.ffe-featured.ffp-card--featured {
  background: linear-gradient(135deg, #fdf9f1 0%, #fff 55%, #f5ede0 100%);
  border: 1px solid rgba(16, 125, 160, 0.08);
  position: relative;
  overflow: hidden;
}

/* Decorative corner flourish, a soft ocean-tinted blur that anchors the card
   without getting in the way of hover/focus states. */
.ffe-featured.ffp-card--featured::after {
  content: "";
  position: absolute;
  width: 280px;
  height: 280px;
  top: -80px;
  right: -80px;
  background: radial-gradient(circle, rgba(152, 240, 218, 0.35) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.ffe-featured .ffp-card__featured-inner,
.ffe-featured .ffe-featured__facts {
  position: relative;
  z-index: 1;
}

/* Kicker sits between badge and body, gives the featured card a magazine
   "dek" typographic layer so the headline has air. */
.ffp-card__featured-kicker {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--ff-ocean);
  margin: 0;
  letter-spacing: -0.01em;
}

.ffe-featured__checklist {
  margin: 10px 0 14px;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 18px;
  font-size: 15px;
  line-height: 22px;
  color: var(--ff-muted);
}

.ffe-featured__checklist li {
  position: relative;
  padding-left: 22px;
}

.ffe-featured__checklist li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--ff-teal-dark);
  font-weight: 700;
}

.ffe-featured__art {
  display: grid;
  grid-template-columns: 100px 100px;
  grid-template-rows: 100px 100px;
  gap: 14px;
  align-self: center;
}

.ffe-featured__art-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 38px;
  border-radius: var(--ff-radius);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
  line-height: 1;
  transition: transform 400ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Subtle tile-stagger hover, each tile shifts a few pixels in a different
   direction on card hover. Not cute, just intentional. */
.ffe-featured:hover .ffe-featured__art-tile--a { transform: translate(-3px, -3px); }
.ffe-featured:hover .ffe-featured__art-tile--b { transform: translate(3px, -3px); }
.ffe-featured:hover .ffe-featured__art-tile--c { transform: translate(-3px, 3px); }
.ffe-featured:hover .ffe-featured__art-tile--d { transform: translate(3px, 3px); }

.ffe-featured__art-tile--a { background: var(--ff-icon-bg-coral); color: var(--ff-coral); }
.ffe-featured__art-tile--b { background: var(--ff-icon-bg-teal);  color: var(--ff-teal-dark); }
.ffe-featured__art-tile--c { background: var(--ff-icon-bg-blue);  color: var(--ff-ocean); }
.ffe-featured__art-tile--d { background: #fdf4dc; color: #8a6a1f; }

/* "At a glance" facts strip below the featured card's main content.
   Editorial-magazine-feel: three hairline-separated stat stacks. */
.ffe-featured__facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid rgba(16, 125, 160, 0.12);
}

.ffe-featured__fact {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 0 16px;
  border-right: 1px solid rgba(16, 125, 160, 0.1);
}

.ffe-featured__fact:last-child {
  border-right: none;
}

.ffe-featured__fact-num {
  font-size: 28px;
  font-weight: 800;
  color: var(--ff-ocean);
  letter-spacing: -0.02em;
  line-height: 1;
}

.ffe-featured__fact-lbl {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--ff-stone);
  line-height: 1.4;
  text-align: center;
}


/* ── Essentials: shared card-meta label ───────────────── */

.ffe-meta {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ff-coral);
  margin-bottom: 4px;
}


/* ── Essentials: asymmetric grid for "Plan & budget" ──── */

/* One wide primary card + one compact companion. Breaks the uniformity of
   the old 2-column-equal grid so the page reads as editorial, not a
   products-page product list. */
.ffe-asymmetric-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 32px;
  margin-top: 48px;
  align-items: stretch;
}

.ffe-card-primary {
  display: flex;
  flex-direction: column;
  padding: 40px;
  gap: 12px;
}

.ffe-card-primary__header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 4px;
}

.ffe-card-primary__header .ffp-card__icon-circle {
  margin-bottom: 0;
}

.ffe-card-primary .ffe-meta {
  margin-bottom: 0;
}

.ffe-card-primary h3 {
  font-size: 26px;
  line-height: 1.2;
  color: var(--ff-ocean);
}

.ffe-card-primary > p {
  font-size: 16px;
  line-height: 1.55;
}

.ffe-card-compact {
  padding: 32px;
}

.ffe-card-compact h3 {
  font-size: 20px;
  line-height: 1.25;
}

.ffe-bullet-list {
  margin: 4px 0 8px;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ffe-bullet-list li {
  position: relative;
  padding-left: 18px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ff-muted);
}

.ffe-bullet-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 8px;
  height: 2px;
  background: var(--ff-teal-dark);
  border-radius: 2px;
}


/* ── Essentials: editorial 3-card grid with meta ──────── */

.ffe-editorial-card h3 {
  font-size: 20px;
  line-height: 1.3;
}


/* ── Essentials: ONE HERO FREEBIE ───────────────────────
   Lead-magnet module sitting directly after the hero. The strategy doc
   is explicit: one strong freebie > nine weak ones. This module has to
   feel prominent and real, email capture that looks credible, a visual
   preview of the PDF contents, zero doubt about what's being offered. */

.ffe-freebie-section {
  padding-top: 64px;
  padding-bottom: 64px;
}

.ffe-freebie {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 40px;
  padding: 48px;
  background: linear-gradient(135deg, #fdf4dc 0%, #fdf9f1 55%, #fff 100%);
  border: 1px solid rgba(212, 168, 83, 0.3);
  border-radius: var(--ff-radius);
  box-shadow: var(--ff-shadow-card);
  position: relative;
  overflow: hidden;
  align-items: center;
}

/* Subtle gold ribbon glow upper-right, signals "gift" without shouting. */
.ffe-freebie::after {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 260px;
  height: 260px;
  background: radial-gradient(circle, rgba(212, 168, 83, 0.25) 0%, transparent 70%);
  pointer-events: none;
}

.ffe-freebie > * {
  position: relative;
  z-index: 1;
}

.ffe-freebie__body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ffe-freebie__eyebrow {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.16em;
  color: #8a6a1f;
}

.ffe-freebie__title {
  font-size: 36px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ff-ocean);
  margin: 0;
}

.ffe-freebie__kicker {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--ff-navy);
  margin: 0 0 4px;
}

.ffe-freebie__points {
  list-style: none;
  padding: 0;
  margin: 0 0 4px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ff-muted);
}

.ffe-freebie__points li {
  position: relative;
  padding-left: 22px;
}

.ffe-freebie__points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 10px;
  height: 2px;
  background: var(--ff-coral);
  border-radius: 2px;
}

.ffe-freebie__points strong {
  color: var(--ff-navy);
  font-weight: 700;
}

.ffe-freebie__form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
  padding-top: 16px;
  border-top: 1px solid rgba(16, 125, 160, 0.15);
}

.ffe-freebie__label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.2px;
  color: var(--ff-ocean);
}

.ffe-freebie__row {
  display: flex;
  gap: 10px;
  align-items: stretch;
}

.ffe-freebie__input {
  flex: 1;
  min-width: 0;
  font-family: var(--wp--preset--font-family--primary);
  font-size: 15px;
  padding: 12px 16px;
  background: var(--ff-white);
  border: 1px solid var(--ff-border);
  border-radius: var(--ff-radius-sm);
  color: var(--ff-navy);
  transition: border-color var(--ff-ease-fast), box-shadow var(--ff-ease-fast);
}

.ffe-freebie__input:focus {
  outline: none;
  border-color: var(--ff-ocean);
  box-shadow: 0 0 0 3px rgba(16, 125, 160, 0.15);
}

.ffe-freebie__submit {
  white-space: nowrap;
  padding: 12px 22px !important;
  font-size: 15px !important;
}

.ffe-freebie__microcopy {
  margin: 6px 0 0;
  font-size: 12.5px;
  color: var(--ff-stone);
  line-height: 1.5;
}

/* Right column: a fake "cover page" of the checklist so the reader sees
   what they're getting before opting in. Not a real PDF preview, a
   styled card that hints at the content shape. */
.ffe-freebie__art {
  display: flex;
  align-items: center;
  justify-content: center;
}

.ffe-freebie__card {
  width: 100%;
  max-width: 320px;
  padding: 28px 26px 32px;
  background: var(--ff-white);
  border: 1px solid var(--ff-border);
  border-radius: var(--ff-radius);
  box-shadow: 0 18px 36px rgba(15, 41, 66, 0.14);
  transform: rotate(1.5deg);
  transition: transform 400ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.ffe-freebie:hover .ffe-freebie__card {
  transform: rotate(0deg);
}

@media (prefers-reduced-motion: reduce) {
  .ffe-freebie__card,
  .ffe-freebie:hover .ffe-freebie__card {
    transform: none;
    transition: none;
  }
}

.ffe-freebie__card-ribbon {
  display: inline-block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.4px;
  color: var(--ff-coral);
  background: #ffe9e4;
  padding: 4px 10px;
  border-radius: var(--ff-radius-pill);
  margin-bottom: 14px;
}

.ffe-freebie__card-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 14px;
  color: var(--ff-navy);
  line-height: 1.4;
}

.ffe-freebie__card-list li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.ffe-freebie__check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 4px;
  background: var(--ff-teal);
  color: var(--ff-teal-dark);
  font-size: 12px;
  font-weight: 800;
  flex-shrink: 0;
  margin-top: 2px;
}


/* ── Essentials: TOOLS SUITE STRIP ──────────────────────
   Three tools in a hand-off row: Ship Guides → Calculator → Checklists.
   Middle card is accented because Calculator is the fulcrum, it's the
   tool users actually come back to. */

.ffe-tools-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 32px;
}

/* 4-tile variant, drops to 2×2 sooner than the 3-tile variant so each
   card keeps enough breathing room for the step label + heading + body. */
.ffe-tools-strip--4 {
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 1100px) {
  .ffe-tools-strip--4 { grid-template-columns: repeat(2, 1fr); }
}

.ffe-tool {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 32px 28px;
  background: var(--ff-white);
  border: 1px solid var(--ff-border);
  border-radius: var(--ff-radius);
  box-shadow: var(--ff-shadow-card);
  text-decoration: none;
  color: inherit;
  transition: transform var(--ff-ease-normal), box-shadow var(--ff-ease-normal);
}

.ffe-tool:hover {
  transform: translateY(-3px);
  box-shadow: var(--ff-shadow-card-hover);
  color: inherit;
}

.ffe-tool--accent {
  background: linear-gradient(180deg, var(--ff-ocean) 0%, #0a4d66 100%);
  color: var(--ff-white);
  border-color: var(--ff-ocean);
}

.ffe-tool--accent:hover {
  color: var(--ff-white);
}

.ffe-tool__step {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.16em;
  color: var(--ff-coral);
}

.ffe-tool--accent .ffe-tool__step {
  color: var(--ff-teal);
}

.ffe-tool h3 {
  font-size: 22px;
  line-height: 1.2;
  color: var(--ff-ocean);
  margin: 0;
}

.ffe-tool--accent h3 {
  color: #fff;
}

.ffe-tool p {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ff-muted);
  margin: 0;
}

.ffe-tool--accent p {
  color: rgba(190, 233, 255, 0.92);
}

.ffe-tool .ffp-card__arrow {
  margin-top: auto;
  padding-top: 8px;
  color: var(--ff-ocean);
}

.ffe-tool--accent .ffp-card__arrow {
  color: var(--ff-teal);
}


/* ── Essentials: FOOD HONESTY ─────────────────────────── */

.ffe-truth-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  margin-top: 32px;
}

.ffe-truth {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 26px 24px;
  background: var(--ff-white);
  border: 1px solid var(--ff-border);
  border-radius: var(--ff-radius);
  box-shadow: var(--ff-shadow-card);
  border-left: 4px solid var(--ff-coral);
}

.ffe-truth__num {
  font-size: 32px;
  font-weight: 800;
  color: var(--ff-ocean);
  letter-spacing: -0.02em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.ffe-truth__lbl {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--ff-muted);
  line-height: 1.4;
  margin-bottom: 4px;
}

.ffe-truth p {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ff-muted);
  margin: 0;
}

.ffe-truth-foot {
  margin-top: 24px;
  text-align: center;
  font-size: 14px;
  color: var(--ff-muted);
}

.ffe-truth-foot a {
  color: var(--ff-ocean);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(16, 125, 160, 0.3);
  text-underline-offset: 2px;
}

.ffe-truth-foot a:hover {
  color: var(--ff-coral);
  text-decoration-color: var(--ff-coral);
}


/* ── Essentials closer reassurance list ──────────────── */

.ffe-closer__reassurance {
  list-style: none;
  padding: 0;
  margin: 24px 0 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  /* 14px / 0.96 white on ocean = ~4.8:1, clears AA for normal body. Previous
     0.92 opacity measured 4.2:1, below AA. Reassurance copy is load-bearing
     trust signal; must read cleanly. */
  font-size: 14px;
  color: rgba(255, 255, 255, 0.96);
  line-height: 1.55;
  max-width: 520px;
  margin-inline: auto;
}

.ffe-closer__reassurance li {
  position: relative;
  padding-left: 20px;
}

.ffe-closer__reassurance li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--ff-teal);
  font-weight: 700;
}


/* Numbered section anchor. Places a big, editorial ordinal above
   the eyebrow so each section reads as a chapter, not a card block. */
.ffe-section-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.ffe-ordinal {
  font-family: var(--wp--preset--font-family--primary);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.2em;
  color: var(--ff-coral);
  margin-bottom: 4px;
  position: relative;
  padding-bottom: 10px;
}

.ffe-ordinal::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 32px;
  height: 2px;
  background: var(--ff-coral);
  transform: translateX(-50%);
  opacity: 0.55;
}

/* Slightly tighter vertical rhythm between grouped sections on Essentials, 
   the sand-alt band next to the white band already creates visual contrast. */
.ffe-group {
  padding-top: 72px;
  padding-bottom: 72px;
}


/* Closing CTA, richer stack than the shared .ffp-section--cta.
   Adds eyebrow, secondary button, and a micro-reassurance line
   so the bottom of the page feels like a closing chapter. */
.ffe-closer__eyebrow {
  /* Pure white. At 13px 700 weight (eyebrow sizing), AA requires 4.5:1; 0.9
   * white on ocean measured below that. Full white gives ~5.8:1 with zero
   * ambiguity across screens and dim-light reading.
   * 2026 readability pass: 12 → 13 px so the closer eyebrow on About,
   * Cruise Essentials, and Ship Guides ocean CTAs reads cleanly for 50+
   * visitors. Inherits letter-spacing from .ffp-eyebrow. */
  font-size: 13px;
  color: #ffffff;
  margin-bottom: 14px;
}

.ffe-closer__buttons {
  display: flex;
  flex-wrap: wrap;
  /* 2026-04-23 layout pass: tightened the button row vertical rhythm.
   * Gap 12 → 16 and margin-top 8 → 32 so the buttons read as a
   * deliberate closing call-to-action rather than tightly stacked
   * against the paragraph above. */
  gap: 16px;
  justify-content: center;
  margin-top: 32px;
}

.ffe-closer__micro {
  margin-top: 24px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.75);
  letter-spacing: 0.2px;
}


@media (max-width: 900px) {
  .ffe-asymmetric-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .ffe-card-primary {
    padding: 32px;
  }
  .ffe-card-primary h3 {
    font-size: 22px;
  }
  .ffe-featured__checklist {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .ffe-featured__art {
    /* Stack the tiles as a strip on tablet so the featured card still
       reads as a hero on narrow viewports. */
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: 72px;
    gap: 10px;
    max-width: 420px;
  }
  .ffe-featured__art-tile { font-size: 26px; }
  .ffe-featured__facts {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .ffe-featured__fact {
    border-right: none;
    border-bottom: 1px solid rgba(16, 125, 160, 0.12);
    padding-bottom: 14px;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
  .ffe-featured__fact:last-child { border-bottom: none; padding-bottom: 0; }
  .ffe-featured__fact-lbl { text-align: left; }
  .ffe-group { padding-top: 48px; padding-bottom: 48px; }
  .ffe-featured-section { padding-top: 48px; padding-bottom: 48px; }
  .ffp-card__featured-kicker { font-size: 16px; }
}

@media (max-width: 900px) {
  .ffe-freebie {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 36px 32px;
  }
  .ffe-freebie__title { font-size: 28px; }
  .ffe-freebie__kicker { font-size: 16px; }
  .ffe-freebie__card { max-width: 100%; transform: none; }
  .ffe-tools-strip {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

@media (max-width: 768px) {
  .ffe-freebie__row { flex-direction: column; gap: 10px; }
  .ffe-freebie__submit { width: 100%; }
}

@media (max-width: 480px) {
  /* 2026 readability: keep ffe-jump readable on phones, was 12 px which
   * matched the desktop pre-bump value; now 14 keeps the older-reader
   * floor while letting the row wrap to 2 lines if needed. */
  .ffe-jump { gap: 8px 14px; font-size: 14px; }
  .ffe-featured__art-tile { font-size: 22px; }
  .ffe-closer__buttons { flex-direction: column; align-items: stretch; }
  .ffe-card-primary { padding: 24px; }
  .ffe-freebie { padding: 28px 22px; }
  .ffe-freebie__title { font-size: 24px; }
  .ffe-truth { padding: 22px 20px; }
  .ffe-truth__num { font-size: 28px; }
}


/* ── Avatar placeholder (About page) ──────────── */

.ffp-card__avatar-placeholder {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--ff-sand-alt);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 700;
  color: var(--ff-ocean);
  margin-bottom: 8px;
}


/* ═══════════════════════════════════════════════
   VALUES LIST (About page)
   ═══════════════════════════════════════════════ */

.ffp-values {
  display: flex;
  flex-direction: column;
  /* 28-px flex gap is the single source of row-to-row rhythm.
     Combined with `align-items: center` below, this makes the vertical
     rhythm feel optically equal regardless of whether body text wraps
     to 1, 2, or 3 lines, the icon and the text block share a common
     vertical center per row, and each row contributes identical gap. */
  gap: 28px;
  margin-top: 40px;
}

.ffp-value {
  display: grid;
  /* Fixed-width icon column so all three rows align vertically regardless
     of emoji metrics. */
  grid-template-columns: 56px 1fr;
  gap: 20px;
  /* Optical alignment fix: center-aligning the text block against the
     56-px icon puts the visual centers of icon and copy on the same
     horizontal line in every row, the "top-align with padding-top
     hack" of the previous iteration drifted when body copy wrapped. */
  align-items: center;
  /* No border + no row-padding, the parent's gap is the single source
     of vertical rhythm. */
}

.ffp-value__icon {
  width: 56px;
  height: 56px;
  border-radius: var(--ff-radius);
  background: var(--ff-sand-alt);
  display: flex;
  align-items: center;
  justify-content: center;
  /* Reset inherited line-height so inline SVGs center perfectly inside
     their 56-px tile. The emoji-era padding hack is obsolete now that
     value icons are SVGs (2026-04-23 premium-polish pass). */
  line-height: 1;
  /* Default stroke color, variants below override per-value. */
  color: var(--ff-ocean);
}

/* Value-icon color variants, mirrors the homepage Command Center tile
 * palette (.ffh-tool-card__icon--blue/teal/coral) so the About page
 * "What We Believe" icons and the Homepage "Cruise Command Center"
 * icons share one visual vocabulary. Custom-property tokens drive the
 * background; `color` drives the SVG stroke via `currentColor`. */
.ffp-value__icon--ocean {
  background: var(--ff-icon-bg-blue);
  color: var(--ff-ocean);
}
.ffp-value__icon--teal {
  background: var(--ff-icon-bg-teal);
  color: var(--ff-teal-dark);
}
.ffp-value__icon--coral {
  background: var(--ff-icon-bg-coral);
  color: var(--ff-coral);
}

.ffp-value > div {
  /* Text column. With `align-items: center` on the parent row, the whole
     text block centers against the icon, no padding-top hack needed. */
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 0;
}

.ffp-value h3 {
  font-size: 19px;
  color: var(--ff-navy);
  margin: 0;
  /* Tighter h3 line-height pulls the body paragraph closer to the heading
     so each row reads as a compact unit with clear internal rhythm. */
  line-height: 1.25;
}

.ffp-value p {
  font-size: 15px;
  /* Slightly tighter body line-height (was 1.6) helps each row's text
     block fit vertically within the icon's 56 px height for most body
     copy, keeping the optical centering crisp. */
  line-height: 1.55;
  color: var(--ff-muted);
  margin: 0;
}


/* ═══════════════════════════════════════════════
   CONTACT GRID
   ═══════════════════════════════════════════════ */

.ffp-contact-grid {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 48px;
  align-items: start;
}

.ffp-contact-main h2 {
  margin-bottom: 20px;
}

.ffp-contact-main a {
  color: var(--ff-ocean);
  text-decoration: none;
}

.ffp-contact-main a:hover {
  color: var(--ff-coral);
}

.ffp-info-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 0;
  border-bottom: 1px solid var(--ff-border);
  font-size: 15px;
  color: var(--ff-muted);
}

.ffp-info-row:last-child {
  border-bottom: none;
}

.ffp-info-row a {
  color: var(--ff-ocean);
  text-decoration: none;
  font-weight: 600;
}

.ffp-info-row a:hover {
  color: var(--ff-coral);
}

.ffp-info-label {
  /* 2026-04-23 accessibility pass: 12 → 13 px. Uppercase + letter-spaced
   * labels read harder than mixed-case at the same size; a 1 px lift
   * preserves the label tier below body copy while staying readable for
   * older users scanning the sidecard. */
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--ff-ocean);
}


/* ═══════════════════════════════════════════════
   CONTACT, audience chooser + form
   `.ffc-*` is scoped to the contact page.
   ═══════════════════════════════════════════════ */

.ffc-audiences {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
  margin-top: 16px;
}

.ffc-audience {
  display: flex;
  flex-direction: column;
  padding: 40px;
  background: var(--ff-white);
  border: 1px solid var(--ff-border);
  border-radius: var(--ff-radius);
  box-shadow: var(--ff-shadow-card);
  text-decoration: none;
  color: inherit;
  transition: transform var(--ff-ease-normal), box-shadow var(--ff-ease-normal), border-color var(--ff-ease-normal);
  position: relative;
  overflow: hidden;
}

.ffc-audience:hover {
  transform: translateY(-3px);
  box-shadow: var(--ff-shadow-card-hover);
  color: inherit;
}

.ffc-audience--readers:hover { border-color: var(--ff-teal-dark); }
.ffc-audience--brands:hover  { border-color: var(--ff-coral); }

/* Decorative corner tint so the two cards read as a pair without being
   identical, readers get a warm teal glow, brands get a coral glow. */
.ffc-audience::after {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  filter: blur(30px);
  opacity: 0.3;
  pointer-events: none;
  z-index: 0;
}
.ffc-audience--readers::after { background: var(--ff-teal); }
.ffc-audience--brands::after  { background: #ffd7cf; }

.ffc-audience > * {
  position: relative;
  z-index: 1;
}

.ffc-audience__icon {
  font-size: 36px;
  line-height: 1;
  margin-bottom: 14px;
}

.ffc-audience__eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: var(--ff-coral);
  margin-bottom: 10px;
}

.ffc-audience--readers .ffc-audience__eyebrow {
  color: var(--ff-teal-dark);
}

.ffc-audience__title {
  font-size: 24px;
  line-height: 1.25;
  color: var(--ff-ocean);
  margin: 0 0 12px;
}

.ffc-audience > p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ff-muted);
  margin: 0 0 16px;
}

.ffc-audience__list {
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 14px;
  color: var(--ff-muted);
}

.ffc-audience__list li {
  position: relative;
  padding-left: 18px;
}

.ffc-audience__list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--ff-teal-dark);
  font-weight: 700;
}

.ffc-audience--brands .ffc-audience__list li::before {
  color: var(--ff-coral);
}

.ffc-audience__cta {
  margin-top: auto;
  padding-top: 8px;
  font-size: 14px;
  font-weight: 700;
  color: var(--ff-ocean);
  letter-spacing: 0.1px;
}

.ffc-audience__email {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  color: var(--ff-muted);
}


/* ── Form ─────────────────────────────────────── */

.ffc-form-head {
  margin-bottom: 24px;
}

.ffc-form-head h2 {
  font-size: 28px;
  margin: 4px 0 6px;
}

.ffc-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
  background: var(--ff-white);
  border: 1px solid var(--ff-border);
  border-radius: var(--ff-radius);
  box-shadow: var(--ff-shadow-card);
  padding: 32px;
}

/* Launch-offline notice inside the contact form. Prominent top-of-form banner
 * flagging that delivery isn't wired yet so users don't silently submit into
 * the void. Warm-sand background + coral left-border so it reads as "heads up"
 * without the alarm tone of a red-error block. Remove when delivery backend
 * lands (along with onsubmit="return false" and the mailto button override
 * in page-contact.php). */
.ffc-form-notice {
  background: #fdf4e6;
  border-left: 4px solid var(--ff-coral);
  border-radius: 6px;
  padding: 14px 18px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ff-navy);
}

.ffc-form-notice strong {
  color: var(--ff-coral-dark);
  font-weight: 700;
}

.ffc-form-notice a {
  color: var(--ff-ocean);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.ffc-form-notice a:hover {
  color: var(--ff-coral);
}

.ffc-form__row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.ffc-form__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ffc-form__label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.2px;
  color: var(--ff-ocean);
}

.ffc-form input[type="text"],
.ffc-form input[type="email"],
.ffc-form select,
.ffc-form textarea {
  font-family: var(--wp--preset--font-family--primary);
  font-size: 15px;
  line-height: 1.5;
  padding: 12px 14px;
  /* Fixed min-height so inputs and the native <select> render at identical
     height, previously the select picked up its own OS-default height
     which was taller than the 11 px + 22 px line-height budget of the
     other fields and clipped the option text on Chrome + Safari. */
  min-height: 48px;
  box-sizing: border-box;
  border: 1px solid var(--ff-border);
  border-radius: var(--ff-radius-sm);
  background: var(--ff-white);
  color: var(--ff-navy);
  transition: border-color var(--ff-ease-fast), box-shadow var(--ff-ease-fast);
}

/* Select normalization, native <select> paints its option text with the
   browser's internal renderer which ignores our CSS padding and line-height;
   the visible text clips from the bottom on Chrome + Safari. Resetting
   appearance lets our padding + line-height take full effect, and an inline
   SVG caret replaces the native dropdown arrow we just suppressed. */
.ffc-form select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 40px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none'><path d='M1 1l5 5 5-5' stroke='%23006380' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px 8px;
  cursor: pointer;
}

.ffc-form input:focus,
.ffc-form select:focus,
.ffc-form textarea:focus {
  outline: none;
  border-color: var(--ff-ocean);
  box-shadow: 0 0 0 3px rgba(16, 125, 160, 0.15);
}

.ffc-form textarea {
  /* Textareas need vertical breathing; the 48 px min-height from the shared
     rule applies as a floor but the textarea-specific min-height wins. */
  min-height: 160px;
  line-height: 1.55;
  resize: vertical;
  padding: 14px 14px;
}

.ffc-form__consent {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ff-muted);
}

.ffc-form__consent input[type="checkbox"] {
  margin-top: 3px;
  accent-color: var(--ff-ocean);
  flex-shrink: 0;
}

.ffc-form__actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
}

.ffc-form__hint {
  /* Bumped 12.5→13, tone stone→muted. The hint includes the important
     "form is frontend-only today" disclosure, readers should clock that
     immediately, not squint at it. */
  font-size: 13px;
  color: var(--ff-muted);
  margin: 0;
  line-height: 1.6;
}


/* ── Sidecard ─────────────────────────────────── */

.ffc-sidecard {
  background: var(--ff-white);
  border: 1px solid var(--ff-border);
  border-radius: var(--ff-radius);
  box-shadow: var(--ff-shadow-card);
  /* Padding matched to the form card's 32-px-horizontal breathing room so
     the two cards read as the same visual system side-by-side. Previous
     24/28 gave a subtly tighter sidecard that looked under-weighted next
     to the form. */
  padding: 28px 32px;
}

.ffc-sidecard h3 {
  font-size: 16px;
  color: var(--ff-ocean);
  margin: 0 0 10px;
  letter-spacing: 0.2px;
  text-transform: uppercase;
}


/* ── Responsive ────────────────────────────────── */

@media (max-width: 900px) {
  .ffc-audiences {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .ffc-audience {
    padding: 32px;
  }
  .ffc-form__row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .ffc-audience { padding: 24px; }
  .ffc-form { padding: 22px; }
  .ffc-form-head h2 { font-size: 24px; }
}


/* ═══════════════════════════════════════════════
   BUTTONS (reuse homepage system)
   ═══════════════════════════════════════════════ */

.ffp-buttons {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}


/* ═══════════════════════════════════════════════
   RESPONSIVE, 768px
   ═══════════════════════════════════════════════ */

@media (max-width: 768px) {
  .ffp-section {
    padding: 64px 0;
  }

  .ffp-narrow,
  .ffp-wide {
    padding: 0 24px;
  }

  .ffp-card-grid--2,
  .ffp-card-grid--3 {
    grid-template-columns: 1fr;
  }

  .ffp-contact-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .ffp-section h2 {
    font-size: 28px;
  }

  .ffp-section--cta {
    padding: 64px 24px;
  }

  .ffh-btn {
    width: 100%;
    text-align: center;
  }

  /* Essentials featured card, stack icon above text on tablets. */
  .ffp-card--featured {
    padding: 40px;
  }

  .ffp-card__featured-inner {
    grid-template-columns: 1fr;
    gap: 24px;
    text-align: left;
  }

  .ffp-card__featured-title {
    font-size: 26px;
    line-height: 34px;
  }
}


/* ═══════════════════════════════════════════════
   RESPONSIVE, 480px
   ═══════════════════════════════════════════════ */

@media (max-width: 480px) {
  .ffp-section {
    padding: 48px 0;
  }

  .ffp-narrow,
  .ffp-wide {
    padding: 0 16px;
  }

  .ffp-card {
    padding: 24px;
  }

  .ffp-section--cta {
    padding: 48px 16px;
  }

  .ffp-buttons {
    flex-direction: column;
  }

  /* Essentials featured card, tighter on small phones. */
  .ffp-card--featured {
    padding: 28px;
  }

  .ffp-card__featured-title {
    font-size: 22px;
    line-height: 30px;
  }

  .ffp-card__icon-circle--lg {
    width: 64px;
    height: 64px;
    font-size: 1.75rem;
  }
}


/* ═══════════════════════════════════════════════
   ARTICLE FOOTER
   Shared module on single.php (journal) and
   page-essentials-article.php. Replaces the old
   "Open the Calculator" universal hard-sell with
   a content-aware closer: keep-reading list + two
   relevance cards (free checklist or channel).
   ═══════════════════════════════════════════════ */

.ff-article-footer {
  padding: 72px 0 96px;
  background: var(--ff-sand-alt);
}

.ff-article-footer__inner {
  max-width: var(--ff-wide-width);
  margin: 0 auto;
  padding: 0 var(--ff-page-padding, 48px);
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 48px;
  align-items: start;
}

.ff-article-footer__block--keep-reading {
  padding-right: 8px;
}

.ff-article-footer__heading {
  font-size: 24px;
  line-height: 1.2;
  color: var(--ff-ocean);
  letter-spacing: -0.02em;
  margin: 0 0 18px;
}

.ff-article-footer__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ff-article-footer__list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
  background: #fff;
  border: 1px solid var(--ff-border);
  border-radius: var(--ff-radius-sm);
  text-decoration: none;
  color: var(--ff-navy);
  font-size: 16px;
  line-height: 1.4;
  font-weight: 600;
  transition: border-color var(--ff-ease-fast), transform var(--ff-ease-fast), box-shadow var(--ff-ease-fast);
}

.ff-article-footer__list a:hover {
  border-color: var(--ff-ocean);
  transform: translateX(2px);
  box-shadow: var(--ff-shadow-card);
  color: var(--ff-ocean);
}

.ff-article-footer__item-arrow {
  color: var(--ff-ocean);
  font-weight: 800;
  flex-shrink: 0;
}

.ff-article-footer__block--promo {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.ff-article-footer__card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 24px 26px;
  background: #fff;
  border: 1px solid var(--ff-border);
  border-radius: var(--ff-radius);
  box-shadow: var(--ff-shadow-card);
  text-decoration: none;
  color: var(--ff-navy);
  transition: transform var(--ff-ease-normal), box-shadow var(--ff-ease-normal), border-color var(--ff-ease-fast);
}

.ff-article-footer__card:hover {
  transform: translateY(-2px);
  box-shadow: var(--ff-shadow-card-hover);
  border-color: var(--ff-ocean);
}

.ff-article-footer__card--freebie {
  background: var(--ff-teal);
  border-color: var(--ff-teal);
  color: var(--ff-teal-dark);
}

.ff-article-footer__card--freebie .ff-article-footer__card-title,
.ff-article-footer__card--freebie .ff-article-footer__card-body,
.ff-article-footer__card--freebie .ff-article-footer__card-eyebrow,
.ff-article-footer__card--freebie .ff-article-footer__card-cta {
  color: var(--ff-teal-dark);
}

.ff-article-footer__card--freebie:hover {
  border-color: var(--ff-teal-dark);
}

.ff-article-footer__card-eyebrow {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.18em;
  color: var(--ff-coral);
}

.ff-article-footer__card-title {
  font-size: 20px;
  line-height: 1.25;
  color: var(--ff-ocean);
  letter-spacing: -0.01em;
  margin: 2px 0 4px;
}

.ff-article-footer__card-body {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ff-muted);
  margin: 0;
}

.ff-article-footer__card-cta {
  margin-top: 8px;
  font-size: 14px;
  font-weight: 700;
  color: var(--ff-ocean);
}

@media (max-width: 900px) {
  .ff-article-footer__inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .ff-article-footer {
    padding: 56px 0 72px;
  }
}


/* ═══════════════════════════════════════════════
   CHECKLISTS PAGE (ff-checklists)
   Lead-magnet landing for the Cruise Essentials
   Checklist PDF. Freebie block + 8-section grid +
   "what's next" teaser. No competing freebies.
   ═══════════════════════════════════════════════ */

.ff-checklists .ff-page-hero {
  padding-bottom: 32px;
}

.ffc-freebie {
  padding-top: 32px;
  padding-bottom: 72px;
}

.ffc-freebie__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 48px;
  align-items: center;
}

.ffc-freebie__heading {
  font-size: 32px;
  line-height: 1.15;
  color: var(--ff-ocean);
  letter-spacing: -0.02em;
  margin: 0 0 12px;
}

.ffc-freebie__lede {
  font-size: 17px;
  line-height: 1.6;
  color: var(--ff-muted);
  margin: 0 0 20px;
}

.ffc-freebie__bullets {
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 16px;
  line-height: 1.55;
  color: var(--ff-navy);
}

.ffc-freebie__bullets li {
  padding-left: 22px;
  position: relative;
}

.ffc-freebie__bullets li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--ff-teal-dark);
  font-weight: 800;
}

.ffc-freebie__form {
  margin-top: 4px;
}

.ffc-freebie__label {
  display: block;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--ff-coral);
  text-transform: uppercase;
  margin-bottom: 8px;
}

.ffc-freebie__row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.ffc-freebie__input {
  flex: 1 1 240px;
  padding: 14px 16px;
  font-size: 16px;
  border: 1px solid var(--ff-border);
  border-radius: var(--ff-radius-sm);
  background: #fff;
  color: var(--ff-navy);
  transition: border-color var(--ff-ease-fast), box-shadow var(--ff-ease-fast);
}

.ffc-freebie__input:focus {
  outline: none;
  border-color: var(--ff-ocean);
  box-shadow: 0 0 0 3px rgba(0, 99, 128, 0.15);
}

.ffc-freebie__submit {
  flex: 0 0 auto;
}

.ffc-freebie__microcopy {
  margin: 10px 0 0;
  font-size: 13px;
  color: var(--ff-stone);
}

.ffc-freebie__card {
  background: #fff;
  border: 1px solid var(--ff-border);
  border-radius: var(--ff-radius);
  box-shadow: var(--ff-shadow-card);
  padding: 24px 24px 20px;
  position: relative;
}

.ffc-freebie__card-ribbon {
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.22em;
  color: var(--ff-coral);
  background: #ffe9e4;
  padding: 6px 12px;
  border-radius: var(--ff-radius-pill);
  margin-bottom: 16px;
}

.ffc-freebie__card-list {
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  counter-reset: none;
}

.ffc-freebie__card-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  line-height: 1.4;
  color: var(--ff-navy);
  font-weight: 600;
}

.ffc-freebie__card-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--ff-teal);
  color: var(--ff-teal-dark);
  font-size: 12px;
  font-weight: 800;
  flex-shrink: 0;
}

.ffc-freebie__card-foot {
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--ff-stone);
  text-transform: uppercase;
  margin: 0;
  text-align: center;
}

/* Full checklist grid, 8 sections, 2-up on desktop, 1-up on mobile */
.ffc-sections {
  padding-top: 72px;
  padding-bottom: 72px;
}

.ffc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 20px;
  margin-top: 36px;
}

.ffc-section {
  background: #fff;
  border: 1px solid var(--ff-border);
  border-radius: var(--ff-radius);
  box-shadow: var(--ff-shadow-card);
  padding: 24px 26px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ffc-section__head {
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.ffc-section__ord {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--ff-coral);
  flex-shrink: 0;
}

.ffc-section__title {
  font-size: 22px;
  line-height: 1.2;
  color: var(--ff-ocean);
  letter-spacing: -0.02em;
  margin: 0;
}

.ffc-section__blurb {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ff-muted);
  margin: 2px 0 10px;
}

.ffc-section__items {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ffc-section__items li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 16px;
  line-height: 1.55;
  color: var(--ff-navy);
}

.ffc-section__check {
  color: var(--ff-teal-dark);
  font-size: 16px;
  line-height: 1.55;
  flex-shrink: 0;
  margin-top: 1px;
}

/* What's next teaser */
.ffc-next {
  padding-top: 72px;
  padding-bottom: 96px;
}

.ffc-next__links {
  margin-top: 16px;
  font-size: 15px;
  color: var(--ff-muted);
}

.ffc-next__links a {
  color: var(--ff-ocean);
  text-decoration: none;
  font-weight: 700;
}

.ffc-next__links a:hover {
  color: var(--ff-coral);
}

@media (max-width: 900px) {
  .ffc-freebie__inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .ffc-freebie__heading {
    font-size: 26px;
  }
}


/* ═══════════════════════════════════════════════
   ABOUT PAGE, CREATOR PORTRAITS (.ffp-card--person)
   Hover-swap: professional → silly/fun on mouse-enter,
   reverts on mouse-leave.

   Implementation:
   - Two absolutely-positioned <img> tags inside an aspect-
     ratio-locked container. Opacity crossfade between them.
   - Container dimensions never change → zero CLS.
   - Fine-pointer + hover-capable devices only (guards
     against touch "sticky hover").
   - Template-side file_exists() gates three modes: dual,
     single (no hover), empty (initial-letter placeholder).
   - prefers-reduced-motion: transition is removed, but the
     hover still changes which image is visible.

   Because the portrait spans the card's full width, the
   card itself gets padding:0 + overflow:hidden so the
   photo's top corners clip cleanly to the card's 24px
   radius. Name + bio get their own horizontal padding so
   body copy still sits inside the card grid rhythm.
   ═══════════════════════════════════════════════ */

.ffp-card--person {
  /* Proper profile-card layout: the card is a padded container, and
     the portrait is a self-contained rounded rectangle *inside* that
     padding. Name sits beneath the portrait, bio beneath the name.
     The base .ffp-card's border, radius, shadow, and hover-lift all
     carry over, only the inner layout changes for person cards. */
  padding: 24px;
}

.ffp-card--person h3 {
  margin: 20px 0 4px;
  padding: 0;
}

.ffp-card--person p {
  margin: 0;
  padding: 0;
}

.ffp-portrait {
  position: relative;
  width: 100%;
  /* Square portraits, 1:1 on every breakpoint. Card width drives
     height, so Oleg's card and Zhanna's card always stay identical
     heights regardless of bio-copy length. */
  aspect-ratio: 1 / 1;
  margin: 0;
  background: var(--ff-sand-alt);
  /* Self-contained rounded rectangle. 24 px radius on all four
     corners matches the outer card's radius rhythm. overflow:hidden
     clips the absolutely-positioned img tags AND the empty-state
     dashed border to the radius. */
  border-radius: var(--ff-radius);
  overflow: hidden;
}

.ffp-portrait__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* 320ms crossfade, slightly slower than the homepage tilt animations (450ms)
     because a photo-to-photo swap reads harsh if rushed. */
  transition: opacity 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.ffp-portrait__img--hover {
  opacity: 0;
}

/* Fine-pointer + hover-capable devices only. Touch devices never fire the
   hover state, so they keep the professional portrait as the default. */
@media (hover: hover) and (pointer: fine) {
  .ffp-card--person:hover .ffp-portrait__img--default {
    opacity: 0;
  }
  .ffp-card--person:hover .ffp-portrait__img--hover {
    opacity: 1;
  }
}

/* Single-variant mode: template omits the hover <img>, but this is a
   defensive catch if something renders it anyway. */
.ffp-portrait--single .ffp-portrait__img--hover {
  display: none;
}

/* Empty-state: neither variant uploaded yet.
 * Renders a deliberate, full-size placeholder at the final 1:1 portrait
 * dimensions (320 × 320 px on desktop, constrained by the max-width
 * rule on .ffp-card--person .ffp-portrait added further down) so
 * layout can be reviewed before any photos exist. Dashed ocean border
 * reads as "reserved slot, not finished content"; the filename pill
 * tells whoever's making the photos what to save and where. Once a
 * real photo lands, the parent switches to .ffp-portrait--dual or
 * --single and this chrome disappears. */
.ffp-portrait--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #fdf9f1 0%, #efe5cf 100%);
  border: 2px dashed rgba(0, 99, 128, 0.28);
  /* border-box so the dashed frame sits INSIDE the aspect-ratio-locked
     576 × 720 slot instead of pushing it out by 4 px. */
  box-sizing: border-box;
}

.ffp-portrait__placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: center;
  padding: 24px;
  width: 100%;
  height: 100%;
}

.ffp-portrait__placeholder-initial {
  font-size: 140px;
  font-weight: 800;
  color: var(--ff-ocean);
  opacity: 0.22;
  letter-spacing: -0.04em;
  line-height: 0.9;
}

.ffp-portrait__placeholder-name {
  font-size: 22px;
  font-weight: 700;
  color: var(--ff-ocean);
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.ffp-portrait__placeholder-spec {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--ff-muted);
  line-height: 1;
}

.ffp-portrait__placeholder-file {
  display: inline-block;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 12px;
  color: var(--ff-stone);
  background: rgba(255, 255, 255, 0.7);
  padding: 5px 10px;
  border-radius: var(--ff-radius-sm);
  border: 1px solid rgba(16, 125, 160, 0.15);
  margin-top: 2px;
}

@media (max-width: 480px) {
  .ffp-portrait__placeholder-initial { font-size: 100px; }
  .ffp-portrait__placeholder-name    { font-size: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .ffp-portrait__img {
    transition: none;
  }
}


/* ═══════════════════════════════════════════════
   ABOUT PAGE, MAIN PHOTO SIZE CONSTRAINT + CAT MINI-PROFILE
   Shrinks the main creator photo to ~60% of the card content width
   (320 of 528) so the card reads as a personal profile rather than
   a photo-dominated banner. Under each bio, a compact "cat" sub-row
   (small square photo + short blurb) adds a secondary mini-identity
   without cluttering the card.
   ═══════════════════════════════════════════════ */

/* Constrain main photo width inside person cards only, base
   .ffp-portrait (used elsewhere potentially) stays full-width. */
.ffp-card--person .ffp-portrait {
  max-width: 320px;
  margin-left: auto;
  margin-right: auto;
}

/* ── Cat mini-profile row ────────────────────── */

.ffp-cat {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--ff-border);
}

.ffp-cat__photo {
  position: relative;
  flex: 0 0 auto;
  /* Exactly half the main creator photo slot (320 / 2 = 160). Keeps
     the cat clearly secondary to the creator but no longer postage-
     stamp-small. */
  width: 160px;
  height: 160px;
  margin: 0;
  background: var(--ff-sand-alt);
  /* Smaller radius than the main portrait (8 px vs 24 px), the cat
     is visually secondary, so the corner softness should be gentler. */
  border-radius: var(--ff-radius-sm);
  overflow: hidden;
}

.ffp-cat__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ffp-cat__photo--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #fdf9f1 0%, #efe5cf 100%);
  border: 1.5px dashed rgba(0, 99, 128, 0.28);
  box-sizing: border-box;
}

.ffp-cat__placeholder {
  /* Scaled proportionally with the 96→160 box resize (32 × 160/96 ≈ 53,
     rounded to 52 for a clean monotonic step). */
  font-size: 52px;
  font-weight: 800;
  color: var(--ff-ocean);
  opacity: 0.35;
  line-height: 1;
  letter-spacing: -0.02em;
}

/* Blurb sits to the right of the photo. Scoped under .ffp-card--person
   so the 0,2,0 specificity beats the base .ffp-card--person p reset
   (0,1,1) on font-size and color, while margin:0 / padding:0 from the
   reset still apply. */
.ffp-card--person .ffp-cat__blurb {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ff-muted);
  flex: 1;
  min-width: 0;
}

.ffp-card--person .ffp-cat__blurb strong {
  color: var(--ff-navy);
  font-weight: 700;
}

/* Narrow-viewport fallback: stack the cat row vertically so a 96 px
   photo next to a blurb doesn't crush the text to an unreadable width. */
@media (max-width: 400px) {
  .ffp-cat {
    flex-direction: column;
    gap: 10px;
  }
}


/* ═══════════════════════════════════════════════
   CONTACT PAGE, SIDECARD PHOTO (.ffc-sidecard__photo)
   Optional landscape photo at the top of the Quick Info
   sidecard. Negative margins pull the figure flush to the
   sidecard's outer edges; top corners match the sidecard's
   24px radius, bottom is flat so the photo reads as part
   of the same card as the "Quick info" heading below it.
   Figure is only rendered server-side when the file exists
, no broken-image fallback needed in CSS.
   ═══════════════════════════════════════════════ */

.ffc-sidecard__photo {
  /* Margins track the sidecard's 28/32 padding so the photo still sits
     flush with the sidecard's outer edges. */
  margin: -28px -32px 22px;
  /* 1:1 square. Was 3:2 landscape until 2026-04-22, but the 3:2 center-crop
     chopped subject heads out of the 1:1 source. Square uses the full
     original composition and extends the sidecard vertically so it reads
     as better aligned with the (typically taller) form card beside it. */
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--ff-radius) var(--ff-radius) 0 0;
  background: var(--ff-sand-alt);
}

.ffc-sidecard__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* ═══════════════════════════════════════════════
   SHOP OUR FULL KIT (/shop/), page-shop.php
   Amazon-affiliate-ready product grid. Each category renders as a
   full-width band (alternating sand-alt backgrounds) with a
   product grid of small horizontal cards (icon left, copy right,
   CTA inline). Affiliate links use href="#" + data-todo-affiliate
   placeholder, replace via single grep in page-shop.php.
   ═══════════════════════════════════════════════ */

.ff-shop-category__head {
  max-width: 720px;
  margin: 0 auto 32px;
  text-align: center;
}

.ff-shop-category__head h2 {
  margin-bottom: 12px;
}

.ff-shop-category__desc {
  font-size: 17px;
  line-height: 1.55;
  color: var(--ff-muted);
  margin: 0;
}

.ff-shop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
  margin-top: 32px;
}

.ff-shop-card {
  display: flex;
  gap: 16px;
  padding: 20px 22px;
  background: var(--ff-white);
  border: 1px solid var(--ff-border);
  border-radius: var(--ff-radius);
  box-shadow: var(--ff-shadow-card);
  transition: box-shadow var(--ff-ease-normal), transform var(--ff-ease-normal);
}

.ff-shop-card:hover {
  box-shadow: var(--ff-shadow-card-hover);
  transform: translateY(-2px);
}

.ff-shop-card__icon {
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  background: var(--ff-sand-alt);
  border-radius: var(--ff-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  line-height: 1;
}

.ff-shop-card__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  flex: 1;
}

.ff-shop-card__name {
  font-size: 17px;
  font-weight: 700;
  color: var(--ff-ocean);
  margin: 0;
  line-height: 1.25;
}

.ff-shop-card__why {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ff-muted);
  margin: 0;
}

.ff-shop-card__meta {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 4px 0 0;
  font-size: 14px;
  flex-wrap: wrap;
}

.ff-shop-card__price {
  font-weight: 700;
  color: var(--ff-navy);
}

.ff-shop-card__cta {
  color: var(--ff-ocean);
  font-weight: 600;
  text-decoration: none;
  margin-left: auto;
  transition: color var(--ff-ease-fast);
}

.ff-shop-card__cta:hover {
  color: var(--ff-coral);
}

.ffp-section--disclosure {
  background: rgba(247, 243, 235, 0.4);
}

@media (max-width: 640px) {
  .ff-shop-grid { grid-template-columns: 1fr; }
  .ff-shop-card { padding: 16px 18px; gap: 14px; }
  .ff-shop-card__icon { width: 56px; height: 56px; font-size: 28px; }
}


/* ── Shop: affiliate disclosure banner ────────────────
 * Sits between the shop hero and the first product category, so it
 * is "conspicuous and close to" the first affiliate link per FTC
 * 16 CFR § 255. Uses the teal accent band + deeper border so it
 * clearly reads as an advisory, not an ad. */

.ff-shop-disclosure {
  max-width: var(--ff-wide-width);
  margin: 0 auto;
  padding: 20px var(--ff-page-padding, 48px) 0;
}

.ff-shop-disclosure > p {
  background: rgba(152, 240, 218, 0.18);
  border-left: 4px solid var(--ff-teal-dark);
  border-radius: var(--ff-radius);
  padding: 16px 22px;
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ff-navy);
}

.ff-shop-disclosure strong {
  color: var(--ff-teal-dark);
  font-weight: 700;
}

/* ── Shop: per-product affiliate tag ──────────────────
 * Small "affiliate" label next to each CTA so the paid-relationship
 * signal is always visible, not just in the section-level banner.
 * Reads as a quiet typographic cue, not a flag. */

.ff-shop-card__affiliate-tag {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ff-stone);
  background: var(--ff-sand-alt);
  padding: 3px 8px;
  border-radius: var(--ff-radius-pill);
  margin-left: 6px;
}


/* ── Legal pages (/privacy-policy/, /terms/) ──────────
 * Uses the standard .ffp-section + .ffp-narrow container and picks up
 * .ffp-section p / h2 / ul body text styles. These rules just add the
 * effective-date helper + a tighter rhythm for long-form legal copy. */

.ff-legal__body h2 {
  font-size: 22px;
  line-height: 1.3;
  color: var(--ff-ocean);
  margin: 36px 0 12px;
}

.ff-legal__body h2:first-of-type {
  margin-top: 0;
}

.ff-legal__body ul {
  padding-left: 22px;
  margin: 0 0 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ff-legal__body ul li {
  font-size: 17px;
  line-height: 1.65;
  color: var(--ff-navy);
}

.ff-legal__effective {
  font-size: 14px;
  color: var(--ff-stone);
  font-style: italic;
  margin: 0 0 28px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--ff-border);
}