/* fudge3d marketing.css - design doc section 9.1. Light theme only.
   Token references only; the few literal px values below (10px radius,
   96/56px section rhythm) are transcribed verbatim from section 9.1's
   own table, which is more specific than the general radius/spacing
   scale in 5.1 for this one context.

   Content width widened from section 9.1's original 1200px to 1440px
   (user request, comparing against claude.com's measured content
   column at desktop widths) -- deliberately diverges from the doc here,
   not an oversight. Mirrored in components.css's .f3-header__inner,
   .f3-footer__top and .f3-footer__bar, and onboarding.css's
   .f3-dash-topbar__inner, so header/body/footer keep landing at the
   same inset on every page family. Keep all of those in sync by hand if
   this ever changes again -- there's no shared token for it. */

body { background: var(--f3-cream-50); }

.f3-section-inner { max-width: 1440px; margin: 0 auto; padding: 0 var(--f3-space-5); }

.f3-section { padding: 56px 0; }
@media (min-width: 768px) { .f3-section { padding: 96px 0; } }
.f3-section--alt { background: var(--f3-cream-100); }

/* Marketing headline / body colour overrides (9.1, and 3.3's footnote
   permitting Chocolate 800 in place of text.primary on Cream 50 sections
   - applies to every heading level, not just the hero display size). */
.f3-hero .web-display,
.f3-section .web-h1,
.f3-section .web-h2,
.f3-section .web-h3 { color: var(--f3-chocolate-800); }
.f3-hero .web-lead,
.f3-section .web-body { color: var(--f3-chocolate-600); }
.f3-accent-line { color: var(--f3-caramel-800); }

/* Marketing buttons: radius 10px, 44px high (9.1); secondary uses
   Chocolate 600 border / Chocolate 800 label rather than the generic
   application secondary-button tokens. */
.f3-btn { border-radius: 10px; }
.f3-section .f3-btn--secondary,
.f3-hero .f3-btn--secondary {
  border-color: var(--f3-chocolate-600);
  color: var(--f3-chocolate-800);
}

/* .f3-cta-band is always Chocolate 800 (a fixed brand colour, not a
   theme token - see tokens.css), so its secondary button needs the
   opposite treatment from every other section: cream border/label to
   stay readable against a dark background, and a light translucent
   hover instead of .f3-btn--secondary's default near-white fill, which
   combined with cream text was rendering as an invisible white-on-white
   button on hover. Every page previously reproduced the cream colours
   with an inline style="" on each individual button, which covered the
   resting state but not :hover - hence the bug. Centralising both states
   here means a page can go back to a plain, un-styled f3-btn--secondary. */
.f3-cta-band .f3-btn--secondary {
  border-color: var(--f3-cream-100);
  color: var(--f3-cream-50);
}
.f3-cta-band .f3-btn--secondary:hover:not(:disabled) { background: rgba(255, 255, 255, 0.08); }
.f3-cta-band .f3-btn--secondary:active:not(:disabled) { background: rgba(255, 255, 255, 0.14); }

/* Hero */
.f3-hero { padding: 140px 0 56px; min-height: 85vh; display: flex; align-items: center; }
@media (min-width: 768px) { .f3-hero { padding: 160px 0 96px; } }
.f3-hero__grid { display: grid; grid-template-columns: 1fr; gap: var(--f3-space-6); align-items: center; width: 100%; }
/* The home hero gives its visual column the larger share: the production
   artwork is the proof the page is selling, so it gets the room. Other
   heroes keep the even split. */
@media (min-width: 1024px) { .f3-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); } }
.f3-hero__grid--copy-only { grid-template-columns: minmax(0, 760px); justify-content: center; text-align: center; }
@media (min-width: 1024px) { .f3-hero__grid--copy-only { grid-template-columns: minmax(0, 760px); } }
.f3-hero__actions { display: flex; gap: var(--f3-space-3); margin: var(--f3-space-5) 0; flex-wrap: wrap; }
.f3-hero__grid--copy-only .f3-hero__actions { justify-content: center; }
.f3-hero__visual { position: relative; }

/* Proof strip */
.f3-proof-strip { padding: var(--f3-space-6) 0; }
.f3-proof-strip__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--f3-space-6);
}
.f3-proof-strip__item { display: flex; align-items: center; gap: var(--f3-space-2); }
.f3-proof-strip__item svg { width: 20px; height: 20px; color: var(--f3-caramel-800); flex-shrink: 0; }
.f3-proof-strip__item span { font-family: var(--f3-font-interface); font-weight: 600; font-size: 14px; color: var(--f3-chocolate-800); }

/* Scroll reveal (R2 item 9): default visible, JS only adds the entrance -
   content must never depend on JS to be visible. Disabled entirely under
   reduced motion via the global rule in base.css (durations -> 0). */
.f3-reveal { opacity: 1; transform: none; }
.f3-reveal.f3-reveal--pending { opacity: 0; transform: translateY(12px); }
.f3-reveal.f3-reveal--in {
  opacity: 1;
  transform: none;
  transition: opacity var(--f3-dur-base) var(--f3-ease), transform var(--f3-dur-base) var(--f3-ease);
}

/* Feature sections (viewer / generation) */
.f3-feature-grid { display: grid; grid-template-columns: 1fr; gap: var(--f3-space-6); align-items: center; }
@media (min-width: 1024px) { .f3-feature-grid { grid-template-columns: 1fr 1fr; } }
/* Trust block */
.f3-trust { max-width: 760px; }

/* Founding-users credit band (Plan 7 §8): deliberately quiet - names
   only, text.secondary weight, no photos or logo wall. Section itself
   starts `hidden` in the HTML; credit-band-init.js is the only thing
   that ever reveals it, and only once it has at least one name. */
.f3-credit-band { max-width: 800px; margin: 0 auto; text-align: center; }
.f3-credit-band__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--f3-space-3) var(--f3-space-5);
  margin-top: var(--f3-space-5);
}
.f3-credit-band__list li { font-family: var(--f3-font-interface); font-size: 15px; color: var(--f3-chocolate-600); }
.f3-credit-band__list a { color: var(--f3-chocolate-600); text-decoration: underline; text-decoration-color: var(--f3-border-strong); }
.f3-credit-band__list a:hover { color: var(--f3-caramel-800); }
.f3-credit-band__list a:focus-visible { outline: 2px solid var(--f3-focus-ring); outline-offset: 2px; }

/* Final CTA band */
.f3-cta-band { background: var(--f3-chocolate-800); padding: 64px 0; text-align: center; }
.f3-cta-band .f3-section-inner { display: flex; flex-direction: column; align-items: center; gap: var(--f3-space-3); }

/* Hardware-table placeholder note */
.f3-placeholder-note {
  background: var(--f3-warning-tint);
  border: 1px solid var(--f3-caramel-300);
  border-radius: var(--f3-radius-md);
  padding: var(--f3-space-3) var(--f3-space-4);
  color: var(--f3-warning);
}

/* Pricing page */
.f3-pricing-toggle { display: flex; justify-content: center; margin-bottom: var(--f3-space-6); }

/* Segmented control (design doc 7.8 pattern, applied to the billing
   toggle per R4): selected state is accent.tint, not accent.fill, so it
   never competes with the one caramel-filled action in the view. */
.f3-segmented { display: inline-flex; background: var(--f3-surface-sunken); border-radius: var(--f3-radius-pill); padding: 4px; gap: 4px; }
.f3-segmented__btn {
  font-family: var(--f3-font-interface);
  font-weight: 600;
  font-size: 14px;
  color: var(--f3-chocolate-600);
  padding: var(--f3-space-2) var(--f3-space-5);
  border-radius: var(--f3-radius-pill);
  transition: background-color var(--f3-dur-fast) var(--f3-ease), color var(--f3-dur-fast) var(--f3-ease);
}
.f3-segmented__btn[aria-pressed="true"] { background: var(--f3-accent-tint); color: var(--f3-accent-text); }
.f3-segmented__btn:focus-visible { outline: 2px solid var(--f3-focus-ring); outline-offset: 2px; }

.f3-pricing-grid { display: grid; grid-template-columns: 1fr; gap: var(--f3-space-5); max-width: 780px; margin: 0 auto; }
@media (min-width: 768px) { .f3-pricing-grid { grid-template-columns: 1fr 1fr; align-items: stretch; } }
/* Pro first on mobile (design doc order requirement), Free-then-Pro on
   desktop via source order + explicit order on the grid children. */
.f3-pricing-grid .f3-card { display: flex; flex-direction: column; }
.f3-pricing-grid .f3-card[data-plan-card="free"] { order: 2; }
.f3-pricing-grid .f3-card[data-plan-card="pro"] { order: 1; }
@media (min-width: 768px) {
  .f3-pricing-grid .f3-card[data-plan-card="free"] { order: 1; }
  .f3-pricing-grid .f3-card[data-plan-card="pro"] { order: 2; }
}
.f3-pricing-grid .f3-card__cta { margin-top: auto; padding-top: var(--f3-space-4); }
.f3-price { margin: var(--f3-space-3) 0; }
.f3-price__row { display: flex; align-items: baseline; gap: 4px; }
.f3-price__amount { font-family: var(--f3-font-brand); font-weight: 800; font-size: 40px; color: var(--f3-chocolate-800); }
.f3-price__period { color: var(--f3-chocolate-600); }
.f3-price__variant { display: none; }
.f3-price__variant.is-active { display: block; }
.f3-price__was { color: var(--f3-text-muted); text-decoration: line-through; }
.f3-price__sub { color: var(--f3-text-muted); margin-top: 2px; }
.f3-price__renewal { color: var(--f3-text-secondary); font-size: 13px; font-weight: 600; margin-top: var(--f3-space-2); }
.f3-price__tax-note { color: var(--f3-text-muted); margin-top: var(--f3-space-2); }
.f3-price__status { color: var(--f3-text-muted); margin-top: var(--f3-space-2); min-height: 20px; }
.f3-price__retry { margin-top: var(--f3-space-2); }
.f3-price__amount--loading {
  display: inline-block;
  min-width: 132px;
  color: transparent;
  border-radius: var(--f3-radius-sm);
  background: linear-gradient(90deg, var(--f3-cream-200), var(--f3-cream-100), var(--f3-cream-200));
  background-size: 200% 100%;
  animation: f3-price-loading 1.2s ease-in-out infinite;
}
@keyframes f3-price-loading { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .f3-price__amount--loading { animation: none; } }
.f3-plan-features { display: flex; flex-direction: column; gap: var(--f3-space-2); margin: var(--f3-space-4) 0; }
.f3-plan-features li { display: flex; gap: var(--f3-space-2); color: var(--f3-chocolate-600); }
.f3-plan-features svg { width: 16px; height: 16px; color: var(--f3-success); flex-shrink: 0; }

/* Founder's offer banner (Plan 6 §3.2): a single strip gated entirely by
   OFFER.active/endsOn in config.js.

   The strip is FIXED rather than in normal flow, because .f3-header is
   itself `position: fixed` - a banner in the flow renders underneath the
   header and its text collides with the nav links. So the banner takes
   the top of the viewport, the header is pushed down below it (its `top`
   reads the same custom property), and the body is padded by the same
   amount so no page content ends up behind either.

   --f3-offer-banner-h is published by pricing-init.js from the banner's
   measured height: the text wraps at narrow widths, so the value cannot
   be a constant here. It stays 0px everywhere else - every other page,
   and this one whenever the offer is off or JavaScript never runs (the
   banner ships `hidden` and is only ever revealed by that script), which
   leaves the pre-offer layout exactly as it was.

   z-index sits between .f3-header (60) and .f3-mobile-nav (70): above
   the header it is offsetting, below the full-screen mobile menu, which
   should cover the strip when open rather than have it float on top. */
.f3-offer-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 65;
  background: var(--f3-accent-tint);
  border-top: 1px solid var(--f3-caramel-300);
  border-bottom: 1px solid var(--f3-caramel-300);
  padding: var(--f3-space-3) var(--f3-space-4);
  text-align: center;
}
/* Reserves the flow space the fixed strip above occupies. */
body { padding-top: var(--f3-offer-banner-h, 0px); }

.f3-offer-banner__text { color: var(--f3-accent-text); font-size: 13px; line-height: 20px; }
.f3-offer-banner code { font-family: var(--f3-font-mono); font-size: 12px; background: rgba(255,255,255,0.5); padding: 2px 6px; border-radius: var(--f3-radius-xs); }
.f3-offer-banner__copy {
  border: none; background: transparent; color: var(--f3-accent-text); font-weight: 600;
  text-decoration: none; cursor: pointer; font-size: 13px; padding: 0 2px;
}
.f3-offer-banner__copy:focus-visible { outline: 2px solid var(--f3-focus-ring); outline-offset: 2px; }

/* Billing toggle "Save 17%" badge riding on the Annual segment. */
.f3-segmented__btn { position: relative; }
.f3-segmented__save-badge {
  display: inline-block; margin-left: 6px; font-size: 11px; font-weight: 700;
  color: var(--f3-accent-text); background: var(--f3-accent-tint); border-radius: var(--f3-radius-pill);
  padding: 1px 6px; vertical-align: middle;
}

/* Trial band (§3.5): full-width Cream 100 strip restating the trial. */
.f3-trial-band { background: var(--f3-cream-100); padding: var(--f3-space-6) var(--f3-space-4); text-align: center; }
.f3-trial-band__inner { max-width: 640px; margin: 0 auto; }
.f3-trial-band .f3-btn { margin-top: var(--f3-space-4); }

/* Trust row (§3.7): four short items with icon + text. */
.f3-trust-row { display: grid; grid-template-columns: 1fr; gap: var(--f3-space-4); max-width: 900px; margin: 0 auto; }
@media (min-width: 640px) { .f3-trust-row { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .f3-trust-row { grid-template-columns: repeat(4, 1fr); } }
.f3-trust-row__item { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--f3-space-2); }
.f3-trust-row__item svg { width: 24px; height: 24px; color: var(--f3-caramel-800); }
.f3-trust-row__item span { color: var(--f3-chocolate-600); font-size: 14px; }

/* FAQ group headings (§6). */
.f3-faq-group + .f3-faq-group { margin-top: var(--f3-space-6); }
/* Centred to sit over the FAQ column rather than out at the section's
   left edge: .f3-faq below is a 720px column with `margin: 0 auto`, so a
   left-aligned heading on this full-width <p> strands the label far to
   the left of the questions it introduces, with nothing beneath it. */
.f3-faq-group__heading { font-family: var(--f3-font-brand); font-weight: 700; font-size: 13px; letter-spacing: 0.02em; text-transform: uppercase; color: var(--f3-accent-text); margin-bottom: var(--f3-space-3); text-align: center; }

/* Download page */
.f3-download-card { max-width: 480px; margin: 0 auto; text-align: center; }
.f3-btn svg.f3-os-icon { width: 24px; height: 24px; }
.f3-checksum-row { display: flex; align-items: center; gap: var(--f3-space-2); }
.f3-checksum { flex: 1; font-family: var(--f3-font-mono); font-size: 12px; word-break: break-all; background: var(--f3-surface-sunken); padding: var(--f3-space-3); border-radius: var(--f3-radius-sm); color: var(--f3-text-secondary); }
.f3-includes-list { display: flex; flex-direction: column; gap: var(--f3-space-2); text-align: left; margin: var(--f3-space-5) 0; }
.f3-includes-list li { display: flex; gap: var(--f3-space-2); color: var(--f3-chocolate-600); }
.f3-includes-list svg { width: 16px; height: 16px; color: var(--f3-success); flex-shrink: 0; }

.f3-related-usecase-card,
.f3-usecase-link-card { overflow: hidden; }
.f3-usecase-card__media {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: var(--f3-radius-sm);
  background: var(--f3-surface-sunken);
  margin-bottom: var(--f3-space-4);
}
.f3-usecase-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: var(--f3-space-2);
}
.f3-usecase-link-card .web-small { color: var(--f3-text-primary); font-weight: 700; }

.f3-home-gallery {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--f3-space-3);
}
.f3-gallery-card {
  position: relative;
  overflow: hidden;
  min-height: 240px;
  margin: 0;
  border: 1px solid var(--f3-border-default);
  border-radius: var(--f3-radius-lg);
  background: var(--f3-surface-raised);
  box-shadow: var(--f3-shadow-sm);
  transition: box-shadow var(--f3-dur-base) var(--f3-ease), transform var(--f3-dur-base) var(--f3-ease);
}
.f3-gallery-card img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: inherit;
  object-fit: cover;
}
.f3-gallery-card figcaption {
  position: absolute;
  left: var(--f3-space-3);
  bottom: var(--f3-space-3);
  padding: 6px 10px;
  border-radius: var(--f3-radius-pill);
  background: rgba(26, 21, 19, 0.82);
  color: var(--f3-cream-50);
  font-family: var(--f3-font-interface);
  font-size: 12px;
  font-weight: 700;
  backdrop-filter: blur(8px);
}
.f3-gallery-card:hover { box-shadow: var(--f3-shadow-md); transform: translateY(-2px); }

.f3-download-gallery {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--f3-space-3);
}
.f3-download-gallery .f3-gallery-card { aspect-ratio: 4 / 3; min-height: 0; }

.f3-supporting-split { display: grid; grid-template-columns: 1fr; gap: var(--f3-space-6); align-items: center; }
.f3-supporting-visual { margin: 0; overflow: hidden; border-radius: var(--f3-radius-lg); background: var(--f3-cream-100); }
.f3-supporting-visual img { display: block; width: 100%; height: auto; }

@media (min-width: 640px) {
  .f3-home-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .f3-download-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .f3-home-gallery {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: repeat(3, 210px);
  }
  .f3-home-gallery__anchor { grid-column: span 2; grid-row: span 2; }
  .f3-home-gallery__chair,
  .f3-home-gallery__shrine { grid-column: span 2; }
  .f3-home-gallery__chair img,
  .f3-home-gallery__shrine img {
    object-fit: contain;
    padding: var(--f3-space-2);
  }
  .f3-home-gallery .f3-gallery-card { min-height: 0; }
  .f3-download-gallery { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .f3-supporting-split { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .f3-gallery-card { transition-duration: 1ms !important; }
  .f3-gallery-card:hover { transform: none; }
}

/* Error pages (404/500, R5): static isometric cube, no idle spin, no JS -
   same face colours as the hero cube (design doc 2.2), just a fixed
   composition rather than an interactive one. */
.f3-error-cube-stage { width: 96px; height: 96px; margin: 0 auto var(--f3-space-5); perspective: 700px; }
.f3-error-cube { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transform: rotateX(-35deg) rotateY(45deg); }
.f3-error-cube__face { position: absolute; width: 96px; height: 96px; }
.f3-error-cube__face--top    { background: var(--f3-fudge-300);     transform: rotateX(90deg) translateZ(48px); }
.f3-error-cube__face--bottom { background: var(--f3-fudge-300);     transform: rotateX(-90deg) translateZ(48px); }
.f3-error-cube__face--front  { background: var(--f3-chocolate-600); transform: translateZ(48px); }
.f3-error-cube__face--back   { background: var(--f3-chocolate-600); transform: rotateY(180deg) translateZ(48px); }
.f3-error-cube__face--right  { background: var(--f3-caramel-800);   transform: rotateY(90deg) translateZ(48px); }
.f3-error-cube__face--left   { background: var(--f3-caramel-800);   transform: rotateY(-90deg) translateZ(48px); }

/* Showcase band (design doc v1.1 addendum, Plan 8 §2 - signed off).
   Full-width dark section for 3D-imagery content only (galleries, demos,
   wireframe comparisons). The class alone only supplies layout - the
   dark colours come from tokens.css's [data-theme="dark"] block, which
   is scoped to the data-theme ATTRIBUTE, not this class. Every element
   using .f3-showcase-band MUST also carry data-theme="dark" in the HTML
   (e.g. <section class="f3-showcase-band" data-theme="dark">), or it
   silently inherits the ambient light theme instead. Rhythm rule: never
   stack two showcase bands back to back - always cream -> dark -> cream. */
.f3-showcase-band {
  background: var(--f3-surface-canvas);
  padding: 56px 0;
}
@media (min-width: 768px) { .f3-showcase-band { padding: 96px 0; } }
.f3-showcase-band .web-h1,
.f3-showcase-band .web-h2,
.f3-showcase-band .web-h3 { color: var(--f3-text-primary); }
.f3-showcase-band .web-body,
.f3-showcase-band .web-lead { color: var(--f3-text-secondary); }
.f3-showcase-band .f3-card {
  background: var(--f3-surface-raised);
  border-color: var(--f3-border-default);
  border-radius: var(--f3-radius-lg);
}
.f3-showcase-band .f3-btn--secondary {
  border-color: var(--f3-border-strong);
  color: var(--f3-text-primary);
}
.f3-showcase-band .f3-accent-line { color: var(--f3-accent-text); }

/* Transparent production hero assets sit directly on the page surface. */
.f3-feature-hero__visual { position: relative; display: flex; align-items: center; justify-content: center; margin: 0; }
.f3-feature-hero__visual img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 560px;
  object-fit: contain;
  max-width: 100%;
  animation: f3-hero-bob 6s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .f3-feature-hero__visual img { animation: none; }
}
@keyframes f3-hero-bob {
  0%, 100% { transform: translateY(-6px); }
  50% { transform: translateY(6px); }
}
@media (max-width: 767px) {
  .f3-feature-hero__visual img { max-height: 360px; }
}

/* Feature-page template (Plan 8 §5.0) - reused across all six feature
   pages, the six use-case pages and the compare page. */
.f3-breadcrumb { display: flex; align-items: center; gap: var(--f3-space-2); font-family: var(--f3-font-interface); font-size: 13px; color: var(--f3-chocolate-600); flex-wrap: wrap; }
.f3-breadcrumb a { color: var(--f3-chocolate-600); text-decoration: none; }
.f3-breadcrumb a:hover { color: var(--f3-caramel-800); text-decoration: underline; }
.f3-breadcrumb span[aria-current="page"] { color: var(--f3-chocolate-800); font-weight: 600; }
.f3-breadcrumb__sep { color: var(--f3-text-muted); }

/* Generic responsive card grid: auto-fits 2-6 cards per row depending on
   viewport, used for "why different", use-case, "explore more" and
   compare-table-adjacent card sections. */
.f3-card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--f3-space-5); margin-top: var(--f3-space-6); }
.f3-card-grid--narrow { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.f3-card-grid .f3-card > .f3-icon { width: 24px; height: 24px; color: var(--f3-caramel-800); margin-bottom: var(--f3-space-3); }

.f3-tool-section {
  background:
    radial-gradient(circle at 12% 18%, var(--f3-caramel-100), transparent 24%),
    radial-gradient(circle at 88% 82%, var(--f3-cream-100), transparent 26%),
    var(--f3-cream-50);
}
.f3-tool-grid { grid-template-columns: 1fr; }
.f3-tool-card {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(112px, 0.85fr);
  grid-template-rows: auto 1fr;
  column-gap: var(--f3-space-4);
  align-items: center;
  min-height: 228px;
  overflow: hidden;
}
.f3-tool-card > .f3-feature-card__media {
  grid-column: 2;
  grid-row: 1 / 3;
  width: 100%;
  max-width: none;
  aspect-ratio: 1;
  margin: 0;
  padding: var(--f3-space-2);
  background: linear-gradient(145deg, var(--f3-caramel-50), var(--f3-surface-sunken));
  border: 1px solid var(--f3-border-default);
  border-radius: var(--f3-radius-lg);
}
.f3-tool-card > .web-h3 { grid-column: 1; grid-row: 1; align-self: end; margin-bottom: var(--f3-space-3); }
.f3-tool-card > .web-body { grid-column: 1; grid-row: 2; align-self: start; }
.f3-tool-card:nth-child(even) { grid-template-columns: minmax(112px, 0.85fr) minmax(0, 1.15fr); }
.f3-tool-card:nth-child(even) > .f3-feature-card__media { grid-column: 1; }
.f3-tool-card:nth-child(even) > .web-h3,
.f3-tool-card:nth-child(even) > .web-body { grid-column: 2; }
.f3-tool-card .f3-icon-plate { width: 40px; height: 40px; }
.f3-tool-card:hover > .f3-feature-card__media img,
.f3-tool-card:focus-within > .f3-feature-card__media img { transform: scale(1.04); }
@media (min-width: 768px) { .f3-tool-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .f3-tool-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 639px) {
  .f3-tool-card,
  .f3-tool-card:nth-child(even) { display: block; min-height: 0; }
  .f3-tool-card > .f3-feature-card__media,
  .f3-tool-card:nth-child(even) > .f3-feature-card__media {
    width: 100%;
    max-width: 220px;
    aspect-ratio: 4 / 3;
    margin: 0 auto var(--f3-space-4);
  }
}
@media (prefers-reduced-motion: reduce) {
  .f3-tool-card:hover > .f3-feature-card__media img,
  .f3-tool-card:focus-within > .f3-feature-card__media img { transform: none; }
}

.f3-feature-card__media {
  display: block;
  width: 100%;
  max-width: 280px;
  aspect-ratio: 4 / 3;
  margin: 0 auto var(--f3-space-4);
  overflow: hidden;
  border-radius: var(--f3-radius-sm);
  pointer-events: none;
}
.f3-feature-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform var(--f3-dur-base) var(--f3-ease);
}
.f3-card--web:hover > .f3-feature-card__media img,
.f3-card--web:focus-within > .f3-feature-card__media img { transform: translateY(-2px); }
.f3-step > .f3-feature-card__media { max-width: 260px; }

.f3-card--media-horizontal:not(.f3-tool-card) {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(112px, 0.85fr);
  grid-template-rows: auto 1fr;
  column-gap: var(--f3-space-4);
  align-items: center;
  min-height: 200px;
  overflow: hidden;
}
.f3-card--media-horizontal:not(.f3-tool-card) > .f3-feature-card__media {
  grid-column: 2;
  grid-row: 1 / 3;
  width: 100%;
  max-width: none;
  aspect-ratio: 1;
  margin: 0;
}
.f3-card--media-horizontal:not(.f3-tool-card) > .web-h2,
.f3-card--media-horizontal:not(.f3-tool-card) > .web-h3,
.f3-card--media-horizontal:not(.f3-tool-card) > .web-h4 {
  grid-column: 1;
  grid-row: 1;
  align-self: end;
  margin-bottom: var(--f3-space-3);
}
.f3-card--media-horizontal:not(.f3-tool-card) > .web-body,
.f3-card--media-horizontal:not(.f3-tool-card) > .web-lead,
.f3-card--media-horizontal:not(.f3-tool-card) > .web-small {
  grid-column: 1;
  grid-row: 2;
  align-self: start;
}
@media (min-width: 640px) {
  .f3-card-grid.f3-card-grid--media-horizontal { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  .f3-card-grid.f3-card-grid--media-horizontal { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.f3-card-grid.f3-card-grid--max-three,
.f3-uc-grid.f3-card-grid--max-three { grid-template-columns: 1fr; }
@media (min-width: 640px) {
  .f3-card-grid.f3-card-grid--max-three,
  .f3-uc-grid.f3-card-grid--max-three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .f3-card-grid.f3-card-grid--max-three,
  .f3-uc-grid.f3-card-grid--max-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 639px) {
  .f3-card--media-horizontal:not(.f3-tool-card) { display: block; min-height: 0; }
  .f3-card--media-horizontal:not(.f3-tool-card) > .f3-feature-card__media {
    width: 100%;
    max-width: 260px;
    aspect-ratio: 4 / 3;
    margin: 0 auto var(--f3-space-4);
  }
}
@media (max-width: 767px) {
  .f3-feature-card__media,
  .f3-step > .f3-feature-card__media { max-width: 260px; }
}
.f3-card-grid.f3-card-grid--eight { grid-template-columns: 1fr; }
.f3-card-grid--eight > .f3-card--media-horizontal:not(.f3-tool-card) {
  display: block;
  min-height: 0;
}
.f3-card-grid--eight > .f3-card--media-horizontal:not(.f3-tool-card) > .f3-feature-card__media {
  width: 100%;
  max-width: 240px;
  aspect-ratio: 4 / 3;
  margin: 0 auto var(--f3-space-4);
}
@media (min-width: 640px) {
  .f3-card-grid.f3-card-grid--eight { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .f3-card-grid.f3-card-grid--eight { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .f3-feature-card__media img { transition: none; }
  .f3-card--web:hover > .f3-feature-card__media img,
  .f3-card--web:focus-within > .f3-feature-card__media img { transform: none; }
}

/* Numbered "how it works" steps. */
.f3-steps { display: grid; grid-template-columns: 1fr; gap: var(--f3-space-6); counter-reset: f3-step; }
@media (min-width: 768px) { .f3-steps { grid-template-columns: repeat(3, 1fr); } }
.f3-step { display: flex; flex-direction: column; gap: var(--f3-space-3); }
.f3-step__num {
  counter-increment: f3-step;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--f3-accent-tint);
  color: var(--f3-accent-text);
  font-family: var(--f3-font-brand);
  font-weight: 800;
  font-size: 16px;
  display: flex; align-items: center; justify-content: center;
}
.f3-step__num::before { content: counter(f3-step); }
/* Section eyebrow used above H2s on feature/use-case pages. */
.f3-eyebrow { font-family: var(--f3-font-brand); font-weight: 700; font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--f3-caramel-800); }
.f3-eyebrow + .web-h1,
.f3-eyebrow + .web-h2,
.f3-eyebrow + .web-h3 { margin-top: var(--f3-space-3); }

/* Standalone section headers - centred.
   When an eyebrow + heading (+ optional sub-title paragraph) open a
   section on their own, they are centred over the centred content below
   them (FAQ accordion, galleries, card grids). When a heading instead
   sits beside content in a two-column layout, it lives nested inside a
   column <div>, so the direct-child selectors here leave it untouched -
   that split is what keeps this rule from needing a class on every
   section. Both eyebrow spellings are matched: `web-eyebrow` on the
   earlier pages (about, pricing), `f3-eyebrow` on the Plan 8 pages.
   `.f3-about-intro` is excluded because it is a page lead (h1), not a
   section header, and stays left-aligned. */
.f3-section-inner:not(.f3-about-intro) > .f3-eyebrow,
.f3-section-inner:not(.f3-about-intro) > .web-eyebrow {
  display: block;
  text-align: center;
}
.f3-section-inner:not(.f3-about-intro) > .web-h2,
.f3-section-inner:not(.f3-about-intro) > .web-h3 { text-align: center; }

/* The paragraph immediately under such a heading is the section's
   sub-title: centre it too, held to a readable measure so centred prose
   never sprawls the full 1440px. `.f3-placeholder-note` is a callout
   box, not a sub-title, so it keeps its own left-aligned block layout. */
.f3-section-inner:not(.f3-about-intro) > .web-h2 + .web-body:not(.f3-placeholder-note),
.f3-section-inner:not(.f3-about-intro) > .web-h3 + .web-body:not(.f3-placeholder-note),
.f3-section-inner:not(.f3-about-intro) > .web-h2 + .web-lead,
.f3-section-inner:not(.f3-about-intro) > .web-h3 + .web-lead {
  text-align: center;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

/* Legal pages */
.f3-legal-layout { display: grid; grid-template-columns: 1fr; gap: var(--f3-space-6); max-width: 960px; margin: 0 auto; }
@media (min-width: 1024px) { .f3-legal-layout { grid-template-columns: 200px 1fr; align-items: start; } }
.f3-legal-toc { display: none; }
@media (min-width: 1024px) {
  .f3-legal-toc {
    display: block;
    position: sticky;
    top: 96px;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
  }
  .f3-legal-toc__list { display: flex; flex-direction: column; gap: var(--f3-space-3); }
  .f3-legal-toc a { font-family: var(--f3-font-interface); font-size: 13px; font-weight: 500; color: var(--f3-chocolate-600); text-decoration: none; }
  .f3-legal-toc a:hover { color: var(--f3-caramel-800); }
  .f3-legal-toc a:focus-visible { outline: 2px solid var(--f3-focus-ring); outline-offset: 2px; }
}
.f3-legal { max-width: 720px; min-width: 0; }
.f3-legal p.web-body,
.f3-legal li { word-break: break-word; overflow-wrap: break-word; }
.f3-legal h2.web-h3 { margin-top: var(--f3-space-6); scroll-margin-top: 96px; }
.f3-legal p.web-body { margin-top: var(--f3-space-3); }
.f3-legal p.web-body strong,
.f3-legal li strong { color: var(--f3-chocolate-800); }

/* Real legal prose needs visible list markers and data tables - the
   sitewide reset (base.css) strips list-style by default since every
   other list on the site is a custom-styled component. Scoped to
   .f3-legal only, matching web-body's own size/colour so it reads as
   part of the same paragraph flow. */
.f3-legal ul,
.f3-legal ol {
  margin: var(--f3-space-3) 0;
  padding-left: 24px;
}
.f3-legal ul { list-style: disc; }
.f3-legal ol { list-style: decimal; }
.f3-legal li {
  font-family: var(--f3-font-interface);
  font-size: 16px;
  line-height: 27px;
  color: var(--f3-chocolate-600);
  margin-bottom: var(--f3-space-2);
}
.f3-legal li:last-child { margin-bottom: 0; }
.f3-legal li > ul,
.f3-legal li > ol { margin: var(--f3-space-2) 0 0; }

.f3-legal .f3-table-wrap { margin: var(--f3-space-4) 0; }
.f3-legal .f3-table td,
.f3-legal .f3-table th { font-size: 14px; }

/* About page */
.f3-about-hero {
  padding: calc(var(--f3-space-8) * 2 + var(--f3-space-4)) 0 var(--f3-space-8);
  background: var(--f3-cream-50);
}
.f3-about-hero__content { max-width: 880px; text-align: center; }
.f3-about-hero__content .web-lead { max-width: 760px; margin-right: auto; margin-left: auto; }
.f3-about-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--f3-space-3); margin-top: var(--f3-space-5); }
.f3-about-platforms { margin-top: var(--f3-space-4); color: var(--f3-text-muted); }
.f3-about-copy { max-width: 760px; margin-right: auto; margin-left: auto; }
.f3-about-copy > .web-body { text-align: left; }
.f3-about-copy > .web-body + .web-body { margin-top: var(--f3-space-4); }
.f3-about-card-grid { display: grid; grid-template-columns: 1fr; gap: var(--f3-space-5); margin-top: var(--f3-space-6); }
.f3-about-link-card { display: flex; flex-direction: column; min-width: 0; }
.f3-about-link-card > .f3-icon,
.f3-about-use-card > .f3-icon,
.f3-about-social-card > .f3-icon { color: var(--f3-caramel-800); margin-bottom: var(--f3-space-3); }
.f3-about-card-link { display: inline-flex; align-items: center; gap: var(--f3-space-2); margin-top: auto; padding-top: var(--f3-space-4); }
.f3-about-use-card,
.f3-about-social-card { display: flex; flex-direction: column; color: inherit; text-decoration: none; min-width: 0; }
.f3-about-use-card > .f3-link,
.f3-about-social-card > .f3-link { margin-top: auto; padding-top: var(--f3-space-4); }
.f3-about-use-card:focus-visible,
.f3-about-social-card:focus-visible { outline: 2px solid var(--f3-focus-ring); outline-offset: 2px; }
.f3-about-steps { margin-top: var(--f3-space-6); }
.f3-about-note {
  display: flex;
  align-items: flex-start;
  gap: var(--f3-space-2);
  max-width: 760px;
  margin: var(--f3-space-5) auto 0;
  padding: var(--f3-space-4);
  background: var(--f3-accent-tint);
  border: 1px solid var(--f3-caramel-300);
  border-radius: var(--f3-radius-lg);
  color: var(--f3-text-secondary);
}
.f3-about-note .f3-icon { flex: 0 0 auto; color: var(--f3-accent-text); }
.f3-principles-grid { display: grid; grid-template-columns: 1fr; gap: var(--f3-space-5); margin-top: var(--f3-space-6); }
.f3-principles-grid .f3-card > .f3-icon { width: 24px; height: 24px; color: var(--f3-caramel-800); margin-bottom: var(--f3-space-3); }
.f3-about-facts { display: grid; grid-template-columns: 1fr; gap: var(--f3-space-3); margin-top: var(--f3-space-6); }
.f3-about-facts > div { padding: var(--f3-space-4); background: var(--f3-surface-raised); border: 1px solid var(--f3-border-default); border-radius: var(--f3-radius-lg); }
.f3-about-facts dt { font-size: 13px; line-height: 18px; font-weight: 600; color: var(--f3-text-muted); }
.f3-about-facts dd { margin: var(--f3-space-1) 0 0; color: var(--f3-text-primary); font-weight: 600; overflow-wrap: anywhere; }
.f3-about-community-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--f3-space-4);
  align-items: start;
  margin-top: var(--f3-space-6);
  padding: var(--f3-space-5);
  background: var(--f3-chocolate-800);
  border-radius: var(--f3-radius-lg);
  color: var(--f3-cream-50);
}
.f3-about-community-card > .f3-icon { color: var(--f3-caramel-300); }
.f3-about-community-card .web-h3 { color: var(--f3-cream-50); }
.f3-about-community-card .web-body { color: var(--f3-cream-100); }
.f3-about-community-card .f3-btn { grid-column: 1 / -1; justify-self: start; }
.f3-about-social-grid,
.f3-about-contact-grid { display: grid; grid-template-columns: 1fr; gap: var(--f3-space-5); margin-top: var(--f3-space-6); }
.f3-about-cta .web-h2 { color: var(--f3-cream-50); }
.f3-about-cta .web-body { color: var(--f3-cream-100); }
.f3-about-cta .f3-about-actions { margin-top: var(--f3-space-3); }
@media (min-width: 640px) {
  .f3-about-card-grid,
  .f3-about-social-grid,
  .f3-about-contact-grid,
  .f3-about-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 768px) {
  .f3-principles-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .f3-about-community-card { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; padding: var(--f3-space-6); }
  .f3-about-community-card .f3-btn { grid-column: auto; justify-self: end; }
}
@media (min-width: 1024px) {
  .f3-about-card-grid--three,
  .f3-about-contact-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .f3-principles-grid--four,
  .f3-about-social-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .f3-about-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 479px) {
  .f3-about-actions { flex-direction: column; align-items: stretch; }
  .f3-about-actions .f3-btn { width: 100%; }
}

/* Contact page */
.f3-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.f3-contact-hero {
  padding: calc(var(--f3-space-8) * 2 + var(--f3-space-4)) 0 var(--f3-space-8);
  background: var(--f3-cream-50);
}
.f3-contact-hero__content { max-width: 880px; text-align: center; }
.f3-contact-hero__content .web-lead { max-width: 760px; margin-right: auto; margin-left: auto; }
.f3-contact-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--f3-space-3); margin-top: var(--f3-space-5); }
.f3-contact-routes { margin-top: var(--f3-space-4); color: var(--f3-text-muted); }
.f3-contact-options-grid,
.f3-contact-social-grid,
.f3-contact-help-grid { display: grid; grid-template-columns: 1fr; gap: var(--f3-space-5); margin-top: var(--f3-space-6); }
.f3-contact-option { display: flex; flex-direction: column; min-width: 0; }
.f3-contact-option > .f3-icon,
.f3-contact-social-card > .f3-icon,
.f3-contact-help-card > .f3-icon { color: var(--f3-caramel-800); margin-bottom: var(--f3-space-3); }
.f3-contact-option > .f3-btn { align-self: flex-start; margin-top: auto; }
.f3-contact-option__email { margin: var(--f3-space-2) 0 var(--f3-space-4); overflow-wrap: anywhere; }
.f3-contact-option__link { margin-top: var(--f3-space-3); }
.f3-contact-option__links { display: flex; flex-wrap: wrap; gap: var(--f3-space-3); margin-top: var(--f3-space-3); }
.f3-contact-card__email {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--f3-space-3);
  margin: var(--f3-space-4) 0;
  flex-wrap: wrap;
}
.f3-contact-card__email [data-support-email] { font-family: var(--f3-font-mono); font-size: 16px; color: var(--f3-text-primary); overflow-wrap: anywhere; }
.f3-contact-copy { min-width: 138px; }
.f3-contact-community {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--f3-space-5);
  margin-top: var(--f3-space-6);
  padding: var(--f3-space-5);
  background: var(--f3-chocolate-800);
  border-radius: var(--f3-radius-lg);
  color: var(--f3-cream-50);
}
.f3-contact-community__copy > .f3-icon { color: var(--f3-caramel-300); margin-bottom: var(--f3-space-3); }
.f3-contact-community .web-body { color: var(--f3-cream-100); }
.f3-contact-community .f3-contact-actions { justify-content: flex-start; }
.f3-contact-benefits { display: grid; grid-template-columns: 1fr; gap: var(--f3-space-3); align-content: center; padding: 0; margin: 0; list-style: none; }
.f3-contact-benefits li { display: flex; align-items: center; gap: var(--f3-space-2); color: var(--f3-cream-50); font-weight: 600; }
.f3-contact-benefits li::before { content: ""; width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; background: var(--f3-caramel-300); }
.f3-contact-social-card,
.f3-contact-help-card { display: flex; flex-direction: column; color: inherit; text-decoration: none; min-width: 0; }
.f3-contact-social-card > .f3-link,
.f3-contact-help-card > .f3-link { margin-top: auto; padding-top: var(--f3-space-4); }
.f3-contact-social-card:focus-visible,
.f3-contact-help-card:focus-visible { outline: 2px solid var(--f3-focus-ring); outline-offset: 2px; }
.f3-contact-cta { background: var(--f3-chocolate-800); text-align: center; }
.f3-contact-cta .web-eyebrow { color: var(--f3-caramel-300); }
.f3-contact-cta .web-h2 { color: var(--f3-cream-50); }
.f3-contact-cta .web-body { color: var(--f3-cream-100); }
@media (min-width: 640px) {
  .f3-contact-options-grid,
  .f3-contact-social-grid,
  .f3-contact-help-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .f3-contact-benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  .f3-contact-community { grid-template-columns: minmax(0, 1.5fr) minmax(280px, 1fr); padding: var(--f3-space-6); }
}
@media (min-width: 1024px) {
  .f3-contact-social-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 479px) {
  .f3-contact-actions { flex-direction: column; align-items: stretch; }
  .f3-contact-actions .f3-btn { width: 100%; }
  .f3-contact-card__email { align-items: stretch; }
  .f3-contact-copy { width: 100%; }
}

.f3-faq { max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--f3-space-3); }
.f3-faq__item {
  background: var(--f3-surface-raised);
  border: 1px solid var(--f3-border-default);
  border-radius: var(--f3-radius-lg);
  padding: var(--f3-space-4) var(--f3-space-5);
}
.f3-faq__item summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--f3-space-3);
  font-family: var(--f3-font-brand);
  font-weight: 600;
  font-size: 16px;
  color: var(--f3-chocolate-800);
}
.f3-faq__item summary::-webkit-details-marker { display: none; }
.f3-faq__item summary:focus-visible { outline: 2px solid var(--f3-focus-ring); outline-offset: 2px; }
.f3-faq__item summary svg { width: 20px; height: 20px; color: var(--f3-text-muted); flex-shrink: 0; transition: transform var(--f3-dur-fast) var(--f3-ease); }
.f3-faq__item[open] summary svg { transform: rotate(180deg); }
.f3-faq__item p { color: var(--f3-chocolate-600); margin-top: var(--f3-space-3); }

/* ===================================================================
   Features index page (PLAN-10). Everything below is scoped to
   /features/index.html - the reveal card is written generically enough
   to be lifted onto other pages later, but nothing else currently uses it.
   =================================================================== */

/* Hero chip row: anchor-jump to each block below. Deliberately not
   caramel-filled - the page's one accent budget above the fold is the
   primary CTA button; a filled/caramel chip row would spend it twice. */
.f3-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--f3-space-3);
  margin: var(--f3-space-5) 0;
}
.f3-chip-row__link {
  display: inline-flex;
  align-items: center;
  gap: var(--f3-space-2);
  padding: var(--f3-space-2) var(--f3-space-4);
  border: 1px solid var(--f3-border-default);
  border-radius: var(--f3-radius-pill);
  background: var(--f3-surface-raised);
  color: var(--f3-chocolate-800);
  font-family: var(--f3-font-interface);
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  transition: border-color var(--f3-dur-base) var(--f3-ease), background-color var(--f3-dur-base) var(--f3-ease);
}
.f3-chip-row__link svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--f3-chocolate-600); }
.f3-chip-row__link:hover,
.f3-chip-row__link[aria-current="true"] { border-color: var(--f3-border-strong); background: var(--f3-surface-sunken); }
.f3-chip-row__link:focus-visible { outline: 2px solid var(--f3-focus-ring); outline-offset: 2px; }
@media (max-width: 767px) {
  .f3-chip-row {
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: var(--f3-space-2);
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .f3-chip-row::-webkit-scrollbar { display: none; }
  .f3-chip-row__link { scroll-snap-align: start; white-space: nowrap; }
}
@media (max-width: 479px) {
  .f3-chip-row { flex-wrap: wrap; overflow-x: visible; scroll-snap-type: none; }
  .f3-chip-row__link {
    flex: 0 0 calc(50% - var(--f3-space-3) / 2);
    justify-content: center;
    white-space: normal;
    text-align: center;
    min-width: 0;
  }
}

/* "The local difference" - three columns, no card chrome (text.secondary
   icons only, per PLAN-10 §3.2: this band argues, it doesn't decorate). */
.f3-local-diff {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--f3-space-6);
  margin-top: var(--f3-space-6);
}
@media (min-width: 768px) { .f3-local-diff { grid-template-columns: repeat(3, 1fr); } }
.f3-local-diff__item { text-align: center; }
.f3-local-diff__item svg { width: 32px; height: 32px; color: var(--f3-text-secondary); margin-bottom: var(--f3-space-3); }
.f3-local-diff__item h3 { margin-bottom: var(--f3-space-2); }

.f3-card-grid--icon-featured > .f3-card,
.f3-local-diff.f3-card-grid--icon-featured > .f3-local-diff__item,
.f3-principles-grid.f3-card-grid--icon-featured > .f3-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.f3-card-grid--icon-featured .f3-icon-heading {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--f3-space-3);
  text-align: center;
}
.f3-card-grid--icon-featured .f3-icon-heading > .f3-icon {
  width: 128px;
  height: 128px;
}
.f3-card-grid--icon-featured .f3-icon-heading > .f3-icon-plate {
  width: 192px;
  height: 192px;
  flex-basis: 192px;
}
.f3-card-grid--icon-featured .f3-icon-heading > .f3-icon-plate > .f3-icon {
  width: 128px;
  height: 128px;
}
.f3-card-grid--icon-featured > .f3-card > .web-body,
.f3-local-diff.f3-card-grid--icon-featured > .f3-local-diff__item > .web-body,
.f3-principles-grid.f3-card-grid--icon-featured > .f3-card > .web-body {
  margin-right: auto;
  margin-left: auto;
  text-align: center;
}

/* Alternating feature blocks. DOM order is always media-then-body; the
   `--reverse` modifier flips the visual side with the `direction` trick
   so screen-reader/tab order never has to be unwound at the breakpoint
   where the grid collapses to one column (PLAN-10 §3.3/§6.1). */
.f3-feature-block { padding: clamp(4rem, 8vw, 7rem) 0; }
.f3-feature-block__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 4vw, 4.5rem);
  align-items: center;
}
@media (min-width: 900px) {
  .f3-feature-block__inner { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
  .f3-feature-block--reverse .f3-feature-block__inner { direction: rtl; }
  .f3-feature-block--reverse .f3-feature-block__media,
  .f3-feature-block--reverse .f3-feature-block__body { direction: ltr; }
}
.f3-feature-block__body { max-width: 52ch; }
@media (min-width: 768px) and (max-width: 1023px) { .f3-feature-block__body { max-width: 44ch; } }
.f3-feature-block__body h2 { margin-bottom: var(--f3-space-3); }
.f3-feature-block__body p { margin-bottom: var(--f3-space-4); }
.f3-feature-block__pill {
  display: inline-block;
  margin-top: var(--f3-space-3);
  padding: 3px var(--f3-space-3);
  border-radius: var(--f3-radius-pill);
  background: var(--f3-surface-sunken);
  color: var(--f3-text-secondary);
  font-family: var(--f3-font-interface);
  font-size: 13px;
  font-weight: 600;
}

/* Explore link - underline, never a filled button (PLAN-10 §3.5: the one
   filled caramel button above the fold is the hero CTA; the CTA band gets
   the second, distinct-region exception). */
.f3-link-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--f3-font-interface);
  font-weight: 600;
  font-size: 16px;
  color: var(--f3-caramel-800);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
  transition: text-decoration-color var(--f3-dur-base) var(--f3-ease);
}
.f3-link-cta:hover { text-decoration-color: currentColor; }
.f3-link-cta:focus-visible { outline: 2px solid var(--f3-caramel-700); outline-offset: 3px; border-radius: 4px; }
.f3-link-cta__arrow { width: 16px; height: 16px; transition: transform 200ms var(--f3-ease); }
.f3-link-cta:hover .f3-link-cta__arrow { transform: translateX(4px); }
/* Dark-band variant: caramel-800 is unreadable on the dark canvas token (PLAN-10 §3.6). */
[data-theme="dark"] .f3-link-cta { color: var(--f3-caramel-500); }

/* Reveal card - the media half of each feature block. Three nested
   wrappers on purpose: __glow is the static ambient radial, __lift carries
   the hover scale(), __media carries the independent 6s bob. Putting scale
   and bob on the same element makes the hover transform fight the
   animation and the model visibly snaps - keep them separate. */
.f3-reveal-card { display: block; text-decoration: none; }
.f3-reveal-card__frame {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border-radius: var(--f3-radius-lg);
  background: var(--f3-surface-sunken);
  border: 1px solid var(--f3-border-default);
  box-shadow: var(--f3-shadow-sm);
  isolation: isolate;
  transition: box-shadow var(--f3-dur-base) var(--f3-ease), border-color var(--f3-dur-base) var(--f3-ease);
}
@media (max-width: 767px) { .f3-reveal-card__frame { aspect-ratio: 16 / 10; } }
.f3-reveal-card__glow {
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--f3-caramel-300) 14%, transparent) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.f3-reveal-card__lift {
  position: absolute;
  inset: 0;
  transform: scale(1);
  transition: transform 520ms cubic-bezier(.2,.6,.2,1);
  z-index: 1;
}
.f3-reveal-card__media {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  animation: f3-bob 6s ease-in-out infinite alternate;
  animation-delay: var(--bob-delay, 0s);
}
/* The viewer composition stays still while the generated-object cards float. */
.f3-reveal-card--no-bob .f3-reveal-card__media { animation: none; object-fit: contain; }
@keyframes f3-bob { from { transform: translateY(0); } to { transform: translateY(-8px); } }
.f3-reveal-card__scrim {
  position: absolute;
  inset: auto 0 0 0;
  height: 45%;
  background: linear-gradient(to top, color-mix(in srgb, var(--f3-chocolate-900) 38%, transparent), transparent);
  transition: height 220ms ease-out, background 220ms ease-out;
  z-index: 2;
  pointer-events: none;
}
.f3-reveal-card__caption {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 3;
  padding: var(--f3-space-4) var(--f3-space-5);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.f3-reveal-card__eyebrow {
  display: none;
}
.f3-reveal-card__headline {
  font-family: var(--f3-font-brand);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--f3-cream-50);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 200ms ease-out, transform 260ms cubic-bezier(.2,.6,.2,1);
}
.f3-reveal-card__sub {
  font-family: var(--f3-font-interface);
  font-size: 13px;
  color: var(--f3-cream-100);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 200ms ease-out 50ms, transform 260ms cubic-bezier(.2,.6,.2,1) 50ms;
}
@media (hover: hover) and (pointer: fine) {
  .f3-reveal-card:hover .f3-reveal-card__lift,
  .f3-reveal-card:focus-within .f3-reveal-card__lift { transform: scale(1.04); }
  .f3-reveal-card:hover .f3-reveal-card__frame,
  .f3-reveal-card:focus-within .f3-reveal-card__frame { box-shadow: var(--f3-shadow-lg); border-color: var(--f3-border-strong); }
  .f3-reveal-card:hover .f3-reveal-card__scrim,
  .f3-reveal-card:focus-within .f3-reveal-card__scrim { height: 70%; background: linear-gradient(to top, color-mix(in srgb, var(--f3-chocolate-900) 72%, transparent), transparent); }
  .f3-reveal-card:hover .f3-reveal-card__headline,
  .f3-reveal-card:hover .f3-reveal-card__sub,
  .f3-reveal-card:focus-within .f3-reveal-card__headline,
  .f3-reveal-card:focus-within .f3-reveal-card__sub { opacity: 1; transform: translateY(0); }
  .f3-reveal-card:active .f3-reveal-card__lift { transform: scale(1.02); }
}
/* Touch: caption is permanently visible at the deeper, hover-level scrim -
   a first tap that only reveals text is the worst pattern here (PLAN-10 §6.4). */
@media (hover: none) {
  .f3-reveal-card__scrim { height: 70%; background: linear-gradient(to top, color-mix(in srgb, var(--f3-chocolate-900) 72%, transparent), transparent); }
  .f3-reveal-card__headline,
  .f3-reveal-card__sub { opacity: 1; transform: none; }
}
.f3-reveal-card:focus-visible { outline: none; }
.f3-reveal-card:focus-visible .f3-reveal-card__frame { outline: 2px solid var(--f3-focus-ring); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .f3-reveal-card * { transition-duration: 120ms !important; }
  .f3-reveal-card__media { animation: none !important; }
  .f3-reveal-card__lift { transform: none !important; }
  .f3-reveal-card__headline,
  .f3-reveal-card__sub { transform: none !important; }
  .f3-faq__item summary svg { transition: none; }
  .f3-link-cta__arrow { transition: none; transform: none !important; }
}

/* "Under NDA?" band (PLAN-11 §3.7) - two columns, plain text, no icon. */
.f3-nda-band {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--f3-space-6);
  align-items: start;
}
@media (min-width: 768px) { .f3-nda-band { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); } }
.f3-nda-band__note { margin-top: var(--f3-space-4); }