/* ─── page-level: pages/site-home.html (sha=ace0fdd) ─── */
/* Wide-screen knob (#20) — single source for the outer-frame cap on
   this composed page. Every section frame uses max-width:
   var(--tenki-max, 1400px); change this one value to re-cap the whole
   page. Long reading columns stay narrow (they don't use this token). */
:root { --tenki-max: 1400px; }

/* 2026-06-06: fixed the hero "Tenki for born" card clipping its heading on
   short / browser-zoomed viewports — the cap (78vh) could fall below the card
   stack. Real fix is a min-height floor in hero/hero.html (NOT the wide-screen
   token above, which wasn't the cause). This note also advances the homepage
   shell SHA so the ?v= cache-bust picks up the rebuilt bundle. */

/* ────────────────────────────────────────────────────────────────────
   Page-level styles for #tenki-page-homepage.

   This block ONLY contains rules that need to be at the PAGE level —
   i.e. the page wrapper, the page-level build chip, and inter-section
   spacing.  Section-specific styles live in each section's own file
   and get concatenated into dist/homepage.css after this block.

   The cascade therefore looks like:
     1. these page-level rules
     2. hero's CSS  (from hero/hero.html)
     3. meaning's CSS
     4. pillars's CSS
     5. timeline's CSS
     6. social's CSS
   Sections style their own scope with prefixed class names
   (.tenki-hero-*, .tenki-meaning-*, .dashboard-*, .tenki-social-*, etc.)
   so concatenation doesn't leak between them. */

#tenki-page-homepage {
  position: relative;
  /* We control the entire vertical rhythm now — no SQS section padding
     to fight.  The single Code Block that holds this composed shell
     should still respect the SQS page's outer margins, but we own
     everything inside. */

  /* Reveal-on-CSS-loaded.  The inline <style> at the top of the shell
     starts the wrapper at opacity:0 so the wall-of-text flash never
     happens before the CDN bundle lands.  Because this CDN bundle is
     loaded AFTER that inline style, the cascade picks this rule by
     source order + the same selector wins — flipping opacity to 1 and
     fading the page in over the inline transition (0.35 s). */
  opacity: 1;
}
/* Dismiss the boot splash the instant this bundle's CSS applies — pairs with the
   inline .tenki-boot-loader in the shell <head>, so the success path needs no JS.
   (The 10 s inline failsafe also clears it if the CDN never responds.) */
.tenki-boot-loader { display: none !important; }
/* Don't animate the section reveals individually until the page
   wrapper itself has finished fading in — otherwise the first
   section "races" the wrapper and looks jittery on slow connections.
   The reveal IntersectionObserver still fires, but the transition
   inherits the wrapper's eased ramp. */

/* Page-level build chip — same look as the per-section chips so it's
   visually consistent. */
#tenki-page-homepage .tenki-page-build-chip {
  position: absolute; top: 8px; right: 12px;
  font: 600 10px/1 monospace; padding: 3px 8px; border-radius: 4px;
  background: #1A1A1A; color: #fff; opacity: .85;
  display: none; pointer-events: none; z-index: 10000;
}
#tenki-page-homepage[data-debug="1"] .tenki-page-build-chip { display: block; }

/* Inter-section vertical rhythm.  We're free to pick whatever spacing
   reads best now that SQS isn't padding between us. */
#tenki-page-homepage > * + * { margin-top: 0; }
/* Specific overrides if a particular section needs more / less air: */
/* Meaning section keeps its OWN margin-top — its CSS pulls it UP via
   negative margin (~ -240 px) so the glass card overlays the bottom-
   right of the hero photo.  Don't override that here. */
/* #tenki-page-homepage .tenki-meaning-container { ... } */
#tenki-page-homepage .tenki-pillars-container         { margin-top: 32px; }
#tenki-page-homepage .dashboard-container             { margin-top: 32px; }
/* The social photo is DESIGNED to bleed UP behind the section above: its own
   CSS pairs a negative margin-top with a matching padding-top so the quote
   stays put while the photo extends higher, and its top 18 % mask-fades in.
   A blanket `margin-top: 24px` here used to neutralise that at EVERY
   breakpoint (this selector's id+class specificity beats the section's own
   rule regardless of order), leaving a hard-edged photo slab under the
   donate band — exactly the trap the meaning-section comment above warns
   about. Restored 2026-07-21, retuned for the post-pillar-merge neighbour
   (the funnel section it originally overlapped is gone), padding bumped in
   lockstep so the quote + feeds land where they did. */
#tenki-page-homepage .tenki-social-parallax-section {
  margin-top: -420px;    /* was -260 — bleeds the photo further up into the pillars (Matthew 2026-07-22) */
  padding-top: 950px;    /* +160 in lockstep so the quote + feeds stay put */
}
@media (max-width: 900px) {
  #tenki-page-homepage .tenki-social-parallax-section {
    margin-top: -180px;
    padding-top: 280px;
  }
}
#tenki-page-homepage .tenki-newsletter-section        { margin-top: 0; }
/* The social photo is a LATER sibling (z:1, isolate); its masked-fading top
   was painting a haze OVER the pillars section's funding boxes ("today/
   tomorrow" washed out). Lift the whole pillars section above the photo and
   drop its near-white background so the photo still bleeds through the
   section's GAPS while the opaque content stays crisp; give the funding
   boxes a card shadow so they read as cards floating on the photo. */
#tenki-page-homepage .infographic-container { position: relative; z-index: 2; background: transparent; }
#tenki-page-homepage .funding-box { box-shadow: 0 6px 22px rgba(0,0,0,.10); }

/* ── Homepage pillar merge (2026-07-13) ───────────────────────────────────
   Four pillars ACROSS on wide screens. The cards now carry the funnel
   one-liner summary + the Challenge/Mission language on their face, so the
   standalone funnel section was dropped in favor of these + a slim donate
   band. #tenki-page-homepage specificity beats the section's own auto-fit
   `.pillars-wrapper` rule regardless of concatenation order. */
/* Two pillars across on tablet/desktop (Matthew 2026-07-13), 1-up on phone. */
@media (min-width: 700px) {
  #tenki-page-homepage .pillars-wrapper { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* When a card is EXPANDED it GROWS wider than its column to cover part of the
     neighbouring pillar and FLOATS above it (z-index + big shadow) — a card
     popping forward, not a full-width new screen. No internal scroll: the drawer
     lays out in two columns (media beside prose) so it reads at a natural height.
     Only one card is open at a time (JS collapses the previous). (Matthew
     2026-07-14 — "expand more to cover the neighbour, no scrolling".) */
  #tenki-page-homepage .pillar-card.is-expanded {
    position: relative; z-index: 30;
    box-shadow: 0 44px 96px rgba(0, 36, 63, .34), 0 16px 34px rgba(0, 0, 0, .16);
    transition: box-shadow .3s ease, width .35s cubic-bezier(0.22,0.61,0.36,1);
  }
  /* Left-column card spills RIGHT over its neighbour; right-column spills LEFT
     (justify-self anchors the side that stays put while width overflows). */
  #tenki-page-homepage .pillars-wrapper > .pillar-card:nth-child(odd).is-expanded  { width: 142%; justify-self: start; }
  #tenki-page-homepage .pillars-wrapper > .pillar-card:nth-child(even).is-expanded { width: 142%; justify-self: end; }
  /* Wider card → two-column drawer (media beside prose), NO scroll. */
  #tenki-page-homepage .pillar-card.is-expanded .drawer-inner {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 28px; align-items: start;
  }
  /* Dim + gently recede the covered neighbour so the open card clearly floats
     above it (progressive: browsers without :has() simply skip this). */
  #tenki-page-homepage .pillars-wrapper:has(.pillar-card.is-expanded) .pillar-card:not(.is-expanded) {
    opacity: .35; transform: scale(.98); transition: opacity .3s ease, transform .3s ease;
  }
}
/* Cards keep NATURAL heights (aligned tops, ragged bottoms) rather than
   stretching to equal height — the two "future" pillars (SOS, Classes) carry
   much less copy, so forcing equal height would leave large empty voids. The
   full-width funding boxes directly below give the row a clean base line. */

/* Slim donate band (replaces the funnel section). Green CTA per the money=green
   button rule. Dark navy panel so it reads as a distinct "ask" beat. */
#tenki-page-homepage .tenki-home-donateband {
  margin-top: 40px; background: #00243f; border-radius: 16px;
  padding: clamp(22px, 3vw, 30px) clamp(20px, 4vw, 40px);
}
#tenki-page-homepage .tenki-home-donateband-inner {
  max-width: var(--tenki-max, 1400px); margin: 0 auto;
  display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
  justify-content: center; text-align: center;
}
#tenki-page-homepage .tenki-home-donateband-copy {
  color: #dbe7f0; font-size: 1.02rem; margin: 0; flex: 1; min-width: 260px; line-height: 1.5;
}
#tenki-page-homepage .tenki-home-donateband-copy strong { color: #fff; }
#tenki-page-homepage .tenki-home-donateband-cta {
  background: #008C45; color: #fff; font-weight: 800; font-size: 1rem;
  padding: 14px 30px; border-radius: 10px; text-decoration: none; white-space: nowrap;
  box-shadow: 0 4px 16px rgba(0, 140, 69, .3);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
#tenki-page-homepage .tenki-home-donateband-cta:hover {
  transform: translateY(-1px); filter: brightness(1.06);
  box-shadow: 0 7px 22px rgba(0, 140, 69, .4);
}
/* Footer is NOT composed into this shell — it lives in the global
   SQS footer (one paste, every page).  See footer/footer.html for
   the source + dist/footer.shell.html for the paste payload. */

/* ── Section reveal animation ─────────────────────────────────────
   Every major composed section starts invisible + translated down
   8 px; when it scrolls into view, IntersectionObserver flips a
   `.is-revealed` class which slides + fades it into place.  This
   masks the staggered shell-then-CDN-then-API content cascade so
   the page reads as a deliberate sequence rather than a clunky
   pop-in flurry.

   .respect-motion exempts users with prefers-reduced-motion. */
#tenki-page-homepage .tenki-pillars-container,
#tenki-page-homepage .dashboard-container,
#tenki-page-homepage .tenki-funnel-container,
#tenki-page-homepage .tenki-social-parallax-section,
#tenki-page-homepage .tenki-newsletter-section,
#tenki-page-homepage .tenki-meaning-container {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: opacity, transform;
}
#tenki-page-homepage .tenki-pillars-container.is-revealed,
#tenki-page-homepage .dashboard-container.is-revealed,
#tenki-page-homepage .tenki-funnel-container.is-revealed,
#tenki-page-homepage .tenki-social-parallax-section.is-revealed,
#tenki-page-homepage .tenki-newsletter-section.is-revealed,
#tenki-page-homepage .tenki-meaning-container.is-revealed {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  #tenki-page-homepage .tenki-pillars-container,
  #tenki-page-homepage .dashboard-container,
  #tenki-page-homepage .tenki-funnel-container,
  #tenki-page-homepage .tenki-social-parallax-section,
  #tenki-page-homepage .tenki-newsletter-section,
  #tenki-page-homepage .tenki-meaning-container {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Hide the per-section build chips when composed — only the page-level
   chip should be visible to avoid stacking ~5 chips in the same spot.
   Per-section chips can still be inspected by removing `display: none`
   from devtools. */
#tenki-page-homepage .tenki-hero-build-chip,
#tenki-page-homepage .tenki-meaning-build-chip,
#tenki-page-homepage .tenki-pillars-build-chip,
#tenki-page-homepage .tenki-build-chip,
#tenki-page-homepage .tenki-funnel-build-chip,
#tenki-page-homepage .tenki-social-build-chip,
#tenki-page-homepage .tenki-newsletter-build-chip {
  display: none !important;
}

/* ─── hero: hero/hero.html (sha=a049df7) ─── */
/* Tenki Hero Section
     Full-bleed (escapes Squarespace's container max-width via 100vw +
     margin-left:-50vw trick) photo with an overlay card on the right.
     CSS scoped via the .tenki-hero class prefix; no globals affected. */
  .tenki-hero {
    --hero-text:  #ffffff;
    --hero-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
    --hero-cta-bg:    #ffffff;
    --hero-cta-text:  #1A1A1A;
    --hero-cta-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);

    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    position: relative;
    width: 100vw;
    /* Full-bleed horizontal + flush against the nav bar above.
       Squarespace section wrappers add their own vertical padding
       (typically 17 px top / 17 px bottom).  We compensate by
       PULLING UP with a negative top margin equal to that padding
       so the hero sits visually right against the nav.  Some SQS
       templates use a larger top pad; if there's still a gap on
       your specific page, either bump this -68px to -90px / -110px
       OR enable the .sqs-block-code:has() override below. */
    /* Full-bleed via calc margins — robust to SQS's padded content column.
       The old left:50%/right:50% relative offset miscalculated there and
       clipped content on the right on mobile. */
    margin: -68px 0 0;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    /* Aspect ratio matched to the source SQS hero: roughly 16:7 on
       desktop, taller on mobile so the photo doesn't compress.  The
       photo is set as a background-image inside `.tenki-hero-image` so
       background-position can be tuned without changing the markup. */
    aspect-ratio: 16 / 7;
    min-height: 320px;
    max-height: 78vh;
    overflow: hidden;
    isolation: isolate;
    z-index: 1;
    box-sizing: border-box;
  }
  /* Floor the hero height so the meaning-card stack (shown ≥641px) is never
     clipped by the 78vh / 70vh max-height cap on short or zoomed-in viewports.
     min-height wins over max-height when they conflict, so on a short window
     the hero grows to fit the card instead of cropping its heading. Only binds
     when the aspect-driven height would fall below the content — wide screens
     keep their taller aspect height. (<641px the card hides → mobile uses the
     standalone meaning section, so no floor needed there.) */
  @media (min-width: 641px) {
    .tenki-hero { min-height: 640px; }
  }
  .tenki-hero *,
  .tenki-hero *::before,
  .tenki-hero *::after { box-sizing: border-box; }

  /* The photo layer — fills the entire hero, behind the overlay card */
  .tenki-hero-image {
    position: absolute;
    inset: 0;
    z-index: 1;
    background-position: center 32%;   /* bias slightly UP so faces stay in frame on wide viewports */
    background-size: cover;
    background-repeat: no-repeat;
    /* Fallback colour while the photo is loading — deep Tenki blue so
       an unloaded hero reads as a deliberate dark panel rather than
       blank whitespace under floating headline text.  Replaced by the
       photo as soon as it arrives. */
    background-color: #00243f;
  }

  /* Hide the headline + meaning card until the hero photo has loaded
     (JS adds .is-hero-loaded on the hero root when the Image() preloader
     fires onload).  Until then the deep-blue fallback shows alone — no
     orphan text on a blank panel.  3-second failsafe in the JS guarantees
     the overlay reveals even if the photo can't load (offline / CDN
     hiccup) so we never trap the visitor on a faceless hero. */
  .tenki-hero .tenki-hero-overlay {
    opacity: 0;
    transition: opacity 0.45s ease-out;
  }
  .tenki-hero.is-hero-loaded .tenki-hero-overlay { opacity: 1; }
  @media (prefers-reduced-motion: reduce) {
    .tenki-hero .tenki-hero-overlay { transition: none; }
  }
  /* Soft right-side vignette that boosts headline contrast without
     darkening the whole image.  Adjusts per .data-align variant below. */
  .tenki-hero[data-align="right"] .tenki-hero-image::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to left,
                rgba(0, 0, 0, 0.45) 0%,
                rgba(0, 0, 0, 0.30) 25%,
                rgba(0, 0, 0, 0.08) 55%,
                rgba(0, 0, 0, 0)    80%);
    pointer-events: none;
  }
  .tenki-hero[data-align="center"] .tenki-hero-image::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom,
                rgba(0, 0, 0, 0)    0%,
                rgba(0, 0, 0, 0.18) 50%,
                rgba(0, 0, 0, 0.55) 100%);
    pointer-events: none;
  }
  .tenki-hero[data-align="left"] .tenki-hero-image::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to right,
                rgba(0, 0, 0, 0.45) 0%,
                rgba(0, 0, 0, 0.30) 25%,
                rgba(0, 0, 0, 0.08) 55%,
                rgba(0, 0, 0, 0)    80%);
    pointer-events: none;
  }

  /* Overlay container — positions the card per data-align */
  .tenki-hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    padding: 5%;
    pointer-events: none;
  }
  .tenki-hero[data-align="right"]  .tenki-hero-overlay { justify-content: flex-end; }
  .tenki-hero[data-align="center"] .tenki-hero-overlay { justify-content: center; align-items: flex-end; padding-bottom: 9%; }
  .tenki-hero[data-align="left"]   .tenki-hero-overlay { justify-content: flex-start; }

  /* Stack wrapper — meaning card sits ABOVE the headline+CTA on the
     right side.  align-items: flex-end keeps both children right-
     aligned (matches the data-align="right" pattern). */
  .tenki-hero-stack {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 24px;
    pointer-events: auto;
    max-width: 560px;
  }

  /* The "Tenki for born" glass card overlay.  Translucent white +
     backdrop-filter blur reads as layered over the photo without
     obscuring it.  Higher opacity (0.92 vs prev 0.84) so the body
     text is comfortably readable against the busy photo behind.
     Hover lift + soft shadow growth matches the bounce animation
     the rest of the site's cards use (pillars, deep-dive, etc.),
     inviting desktop users to engage with it. */
  .tenki-hero-meaning {
    width: 100%;
    max-width: 500px;
    padding: 26px 32px;
    background-color: rgba(255, 255, 255, 0.96);   /* nearly opaque — body text fully legible */
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    border-radius: 14px;
    border-left: 5px solid #005A9C;
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.32),
                0 0 0 1px rgba(255, 255, 255, 0.6) inset;
    text-align: left;
    color: #111;
    transition: transform 0.28s ease, box-shadow 0.28s ease;
    cursor: default;
    animation: tenkiHeroMeaningIn 0.7s ease-out 0.15s both;
  }
  .tenki-hero-meaning:hover {
    transform: translateY(-4px);
    box-shadow: 0 22px 48px rgba(0, 0, 0, 0.36),
                0 0 0 1px rgba(255, 255, 255, 0.65) inset;
  }
  @keyframes tenkiHeroMeaningIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .tenki-hero-meaning-title {
    margin: 0 0 6px 0;
    color: #005A9C;
    font-size: 1.6rem;          /* was 1.4 — bigger, more confident */
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.2px;
  }
  .tenki-hero-meaning-subtitle {
    margin: 0 0 14px 0;
    color: #111;
    font-size: 1.1rem;          /* was 1.0 — more readable italic */
    font-weight: 500;
    font-style: italic;
  }
  .tenki-hero-meaning-divider {
    width: 48px;
    height: 3px;
    background-color: #005A9C;
    border-radius: 2px;
    margin-bottom: 14px;
  }
  .tenki-hero-meaning-text {
    margin: 0;
    color: #1a1a1a;             /* darker for higher contrast */
    font-size: 1.02rem;         /* was 0.92 — comfortable reading */
    line-height: 1.6;
    font-weight: 500;
  }
  .tenki-hero-meaning-text strong { color: #000; font-weight: 800; }

  /* The card — headline + CTA stacked.  Transparent background to keep
     the photo behind it visible; text + shadow do the lift.
     Gentle fade-in so it appears in sync with the meaning card above
     (reduces the staggered "stuff popping in" load feel). */
  .tenki-hero-card {
    max-width: 560px;
    color: var(--hero-text);
    text-align: right;
    pointer-events: auto;
    animation: tenkiHeroCardIn 0.8s ease-out 0.35s both;
  }
  @keyframes tenkiHeroCardIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .tenki-hero[data-align="center"] .tenki-hero-card { text-align: center; }
  .tenki-hero[data-align="left"]   .tenki-hero-card { text-align: left;  }

  .tenki-hero-headline {
    margin: 0 0 28px 0;
    font-size: clamp(1.6rem, 3.6vw, 3rem);
    font-weight: 400;
    line-height: 1.18;
    letter-spacing: 0.2px;
    color: var(--hero-text);
    text-shadow: var(--hero-shadow);
    /* Allow the headline to wrap naturally to 2-3 lines on most viewports */
    text-wrap: balance;
  }
  .tenki-hero-headline strong,
  .tenki-hero-headline em {
    font-weight: 700;
    font-style: normal;
  }

  .tenki-hero-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 32px;
    background: var(--hero-cta-bg);
    color: var(--hero-cta-text);
    text-decoration: none;
    border-radius: 4px;
    font-weight: 600;
    font-size: clamp(0.92rem, 1.4vw, 1.05rem);
    letter-spacing: 0.4px;
    box-shadow: var(--hero-cta-shadow);
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    -webkit-tap-highlight-color: transparent;
  }
  .tenki-hero-cta:hover,
  .tenki-hero-cta:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.26);
    background: #f8fafc;
    outline: none;
  }
  .tenki-hero-cta:active {
    transform: translateY(0);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.20);
  }

  /* Build chip — only visible with ?debug=1 (toggled via .show-build) */
  .tenki-hero-build-chip {
    position: absolute;
    top: 10px;
    right: 12px;
    z-index: 5;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 10px;
    color: #fff;
    background: rgba(0, 90, 156, 0.85);
    padding: 3px 8px;
    border-radius: 10px;
    letter-spacing: 0.3px;
    display: none;
  }
  .tenki-hero.show-build .tenki-hero-build-chip { display: inline-block; }

  /* Responsive — narrower viewports get a taller hero + overlay shifts
     to bottom for thumb-friendly button placement.  Below 640 px the
     headline gets a darker bottom gradient so it stays legible against
     the body of the photo. */
  @media (max-width: 960px) {
    .tenki-hero {
      aspect-ratio: 4 / 3;
      max-height: 70vh;
    }
    .tenki-hero[data-align="right"] .tenki-hero-overlay,
    .tenki-hero[data-align="left"]  .tenki-hero-overlay {
      align-items: flex-end;
      padding-bottom: 8%;
    }
    .tenki-hero-card { text-align: right; }
  }
  @media (max-width: 640px) {
    .tenki-hero {
      aspect-ratio: 3 / 4;     /* tall portrait on phone */
      max-height: 80vh;
    }
    /* Phone-portrait hero is too tall + narrow to host both the
       meaning card AND the headline overlay — hide the meaning card
       (it still renders below via the standalone meaning section in
       the page composer, which mobile shows in-flow). */
    .tenki-hero-meaning { display: none; }
    .tenki-hero-stack { gap: 0; }
    .tenki-hero-image::after,
    .tenki-hero[data-align="right"] .tenki-hero-image::after,
    .tenki-hero[data-align="left"]  .tenki-hero-image::after {
      background: linear-gradient(to bottom,
                  rgba(0, 0, 0, 0)    35%,
                  rgba(0, 0, 0, 0.35) 65%,
                  rgba(0, 0, 0, 0.70) 100%) !important;
    }
    .tenki-hero-overlay {
      padding: 6%;
      align-items: flex-end;
      justify-content: center !important;
    }
    .tenki-hero-card {
      text-align: center !important;
      max-width: 100%;
    }
    .tenki-hero-cta { padding: 12px 28px; }
  }

/* ─── meaning: meaning/meaning.html (sha=a8b6b2b) ─── */
.tenki-meaning-container {
    --tenki-blue:  #005A9C;
    --tenki-black: #1A1A1A;
    --tenki-white: #FFFFFF;
    --text-light:  #333333;

    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    /* This standalone .tenki-meaning-container is now MOBILE-ONLY for
       the homepage — desktop carries the meaning card inline INSIDE
       the hero (see hero/hero.html, .tenki-hero-meaning).  This
       version still ships in the page composer so phones (where the
       hero is portrait + can't host an overlay card) see the
       meaning content as a normal in-flow card below the hero. */
    max-width: 800px;
    margin: 16px auto 24px;
    background-color: var(--tenki-white);
    border-radius: 16px;
    padding: 34px 28px;
    box-shadow: 0 10px 40px rgba(0, 90, 156, 0.08);
    border-left: 8px solid var(--tenki-blue);
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
  }
  /* Desktop: hide the standalone in-flow meaning card — its content
     now lives INSIDE the hero (see .tenki-hero-meaning in hero.html).
     Showing both would be duplicate content. */
  @media (min-width: 769px) {
    .tenki-meaning-container { display: none; }
  }
  .tenki-meaning-container *,
  .tenki-meaning-container *::before,
  .tenki-meaning-container *::after { box-sizing: border-box; }

  /* Decorative oversized quote mark behind the content */
  .tenki-meaning-container::before {
    content: '"';
    position: absolute;
    top: -20px;
    left: 30px;
    font-size: 150px;
    color: rgba(0, 90, 156, 0.05);
    font-family: Georgia, serif;
    line-height: 1;
    z-index: 0;
  }

  .tenki-meaning-content {
    position: relative;
    z-index: 1;
  }

  .tenki-meaning-title {
    color: var(--tenki-blue);
    font-size: 1.55rem;
    font-weight: 800;
    margin: 0 0 4px 0;
    text-transform: uppercase;
    letter-spacing: 1px;
  }
  .tenki-meaning-subtitle {
    color: var(--tenki-black);
    font-size: 1rem;
    font-weight: 400;
    font-style: italic;
    margin: 0 0 14px 0;
  }
  .tenki-meaning-divider {
    width: 48px;
    height: 3px;
    background-color: var(--tenki-blue);
    border-radius: 2px;
    margin-bottom: 14px;
  }
  .tenki-meaning-text {
    color: var(--text-light);
    font-size: 0.92rem;
    line-height: 1.55;
    margin: 0;
  }
  .tenki-meaning-text strong {
    color: var(--tenki-black);
    font-weight: 700;
  }
  .tenki-meaning-text em {
    font-style: italic;
  }

  /* Build chip — visible only with ?debug=1 */
  .tenki-meaning-build-chip {
    position: absolute;
    top: 10px;
    right: 12px;
    z-index: 5;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 10px;
    color: #fff;
    background: rgba(0, 90, 156, 0.85);
    padding: 3px 8px;
    border-radius: 10px;
    letter-spacing: 0.3px;
    display: none;
  }
  .tenki-meaning-container.show-build .tenki-meaning-build-chip { display: inline-block; }

  @media (max-width: 768px) {
    /* Mobile: revert to a normal in-flow card BELOW the hero — the
       floating-glass overlay pattern doesn't make sense on a 390 px
       phone screen.  No backdrop-filter (perf hit on mobile + the
       card no longer floats over a photo).  Restore generous
       in-flow margin. */
    .tenki-meaning-container {
      max-width: 100%;
      padding: 28px 22px;
      margin: 16px 16px 24px;
      background-color: var(--tenki-white);
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
      box-shadow: 0 8px 24px rgba(0, 90, 156, 0.10);
    }
    .tenki-meaning-title    { font-size: 1.55rem; }
    .tenki-meaning-subtitle { font-size: 1rem; }
    .tenki-meaning-text     { font-size: 0.95rem; line-height: 1.6; }
    .tenki-meaning-container::before {
      left: 15px;
      font-size: 120px;
    }
  }

/* ─── pillars: pillars/pillars.html (sha=d49fc61) ─── */
:root {
    --tenki-blue:  #005A9C;
    --tenki-green: #008C45;
    --tenki-black: #1A1A1A;
    --tenki-white: #FFFFFF;
    /* White-theme accents — matches deepdive-page.html's theme-white palette
       so the SOS pillar card on the homepage visually rhymes with the
       deep-dive page it links to.  Dark glyph + dashed cream-stroke accents
       (white-on-white would be invisible). */
    --tenki-white-dark:   #2A2A2A;
    --tenki-white-cream:  #FAF6EE;
    --tenki-white-stroke: #C0C5CC;
    --bg-light:    #F8F9FA;
    --text-dark:   #222222;
    --text-light:  #555555;
  }

  body { font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
         background-color: var(--tenki-white); margin: 0; padding: 20px; box-sizing: border-box; }
  *, *::before, *::after { box-sizing: inherit; }

  .infographic-container { max-width: var(--tenki-max, 1400px); margin: 0 auto;
                           background-color: var(--bg-light); border-radius: 16px;
                           padding: 40px; box-shadow: 0 10px 30px rgba(0,0,0,.05); }

  .infographic-header { text-align: center; margin-bottom: 50px; }
  .infographic-header h2 { color: var(--tenki-black); font-size: 2.5rem;
                           margin: 0 0 15px; text-transform: uppercase;
                           letter-spacing: 1px; line-height: 1.2; }
  .infographic-header p { color: var(--text-light); font-size: 1.2rem;
                          max-width: 800px; margin: 0 auto; line-height: 1.6; }

  /* Loader / error */
  #loading-spinner { text-align: center; padding: 50px;
                     color: var(--tenki-blue); font-weight: bold; font-size: 1.2rem; }
  #loading-spinner.error { color: #b91c1c; }

  .pillars-wrapper { display: none;
                     grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
                     gap: 30px; align-items: start; }

  .pillar-card { background-color: var(--tenki-white); border-radius: 12px;
                 padding: 30px; border-top: 6px solid;
                 display: flex; flex-direction: column;
                 position: relative; cursor: pointer;  /* whole card is clickable */
                 transition: transform .4s cubic-bezier(0.175, 0.885, 0.32, 1.275),
                             box-shadow .4s ease, outline-color .2s ease; }
  .pillar-card:hover { transform: translateY(-4px);
                       box-shadow: 0 12px 30px rgba(0,0,0,.08); }
  .pillar-card:focus-visible { outline: 3px solid var(--tenki-blue); outline-offset: 4px; }
  /* Subtle chevron in the top-right indicates the card expands */
  .pillar-chevron { position: absolute; top: 18px; right: 18px;
                    width: 28px; height: 28px; border-radius: 50%;
                    display: flex; align-items: center; justify-content: center;
                    font-size: 14px; color: #888; background: rgba(0,0,0,.04);
                    transition: transform .35s ease, background .2s ease, color .2s ease;
                    pointer-events: none; /* clicks pass through to the card */ }
  .pillar-card:hover .pillar-chevron { background: rgba(0,0,0,.08); color: #444; }
  .pillar-card.is-expanded .pillar-chevron { transform: rotate(180deg); color: #444; }
  /* Subtle "click to expand" hint that fades out on hover */
  .pillar-click-hint { font-size: 10px; color: #999; text-align: center;
                       margin: 10px 0 -6px; letter-spacing: .5px;
                       text-transform: uppercase; font-weight: 600;
                       transition: opacity .2s ease; }
  .pillar-card.is-expanded .pillar-click-hint { opacity: 0; }
  .pillar-card:hover .pillar-click-hint { color: #555; }

  /* ── Smooth drawer using grid-template-rows: 0fr→1fr (no display:none hacks) ── */
  .pillar-expanded-drawer { display: grid; grid-template-rows: 0fr;
                            transition: grid-template-rows .4s ease, opacity .35s ease;
                            opacity: 0; margin-top: 0; }
  .pillar-expanded-drawer > .drawer-inner { overflow: hidden; min-height: 0; }
  .pillar-card.is-expanded .pillar-expanded-drawer {
    grid-template-rows: 1fr; opacity: 1;
    margin-top: 15px; border-top: 1px dashed #EAEAEA; padding-top: 20px;
  }

  /* Pillar themes */
  .card-blue  { border-top-color: var(--tenki-blue);
                background: linear-gradient(180deg, rgba(0,90,156,.04) 0%, rgba(255,255,255,1) 220px); }
  .card-blue .icon-wrapper       { background-color: var(--tenki-blue); }
  .card-blue .section-title      { color: var(--tenki-blue); }
  .card-blue .program-list li::before { color: var(--tenki-blue); }
  .card-blue .learn-more-btn     { background-color: var(--tenki-blue); color: var(--tenki-white); }
  .card-blue .learn-more-btn:hover { background-color: #004578; }
  .card-blue .explore-toggle-btn { background-color: #F0F4F8; color: var(--tenki-blue); }
  .card-blue .explore-toggle-btn:hover { background-color: #E1EBF5; }

  .card-green { border-top-color: var(--tenki-green);
                background: linear-gradient(180deg, rgba(0,140,69,.04) 0%, rgba(255,255,255,1) 220px); }
  .card-green .icon-wrapper       { background-color: var(--tenki-green); }
  .card-green .section-title      { color: var(--tenki-green); }
  .card-green .program-list li::before { color: var(--tenki-green); }
  .card-green .learn-more-btn     { background-color: var(--tenki-green); color: var(--tenki-white); }
  .card-green .learn-more-btn:hover { background-color: #006B34; }
  .card-green .explore-toggle-btn { background-color: #E8F5E9; color: var(--tenki-green); }
  .card-green .explore-toggle-btn:hover { background-color: #C8E6C9; }

  /* White theme — mirrors deepdive-page.html's theme-white palette so
     the SOS pillar card visually rhymes with its deep-dive landing page.
     Dashed cream-stroke top border, dark glyph on dark icon-wrapper
     (white-on-white would be invisible), dark button bg with white text. */
  .card-white { border-top: 6px dashed var(--tenki-white-stroke);
                background-color: #FDFCF8; }
  .card-white .icon-wrapper       { background-color: var(--tenki-white-dark); }
  .card-white .section-title      { color: var(--tenki-white-dark); }
  .card-white .program-list li::before { color: var(--tenki-white-dark); }
  .card-white .learn-more-btn     { background-color: var(--tenki-white-dark); color: var(--tenki-white); }
  .card-white .learn-more-btn:hover { background-color: #111; }
  .card-white .explore-toggle-btn { background-color: var(--tenki-white-cream); color: var(--tenki-white-dark); }
  .card-white .explore-toggle-btn:hover { background-color: #EFEAD8; }

  .card-black { border-top: 6px dashed var(--tenki-black);
                background: linear-gradient(180deg, rgba(26,26,26,.03) 0%, rgba(255,255,255,1) 220px); }
  .card-black .icon-wrapper       { background-color: var(--tenki-black); }
  .card-black .section-title      { color: var(--tenki-black); }
  .card-black .program-list li::before { color: var(--tenki-black); }
  .card-black .learn-more-btn     { background-color: var(--tenki-black); color: var(--tenki-white); }
  .card-black .learn-more-btn:hover { background-color: #333; }
  .card-black .explore-toggle-btn { background-color: #EEEEEE; color: var(--tenki-black); }
  .card-black .explore-toggle-btn:hover { background-color: #DDDDDD; }

  .card-header-flex { display: flex; justify-content: space-between;
                      align-items: center; min-height: 80px;
                      margin-bottom: 25px; gap: 15px; }
  .icon-wrapper { width: 80px; height: 80px; border-radius: 50%;
                  display: flex; align-items: center; justify-content: center;
                  font-size: 38px; color: var(--tenki-white); flex-shrink: 0;
                  box-shadow: 0 4px 10px rgba(0,0,0,.1);
                  transition: transform .4s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
  .pillar-card:hover .icon-wrapper { transform: scale(1.08); }

  .status-badge { padding: 6px 12px; border-radius: 20px;
                  font-size: .72rem; font-weight: 700; text-transform: uppercase;
                  letter-spacing: .5px; text-align: center; display: inline-block;
                  max-width: 65%; line-height: 1.3; }
  .badge-active { background-color: #e8f5e9; color: var(--tenki-green); border: 1px solid #c8e6c9; }
  .badge-future { background-color: #eeeeee; color: var(--tenki-black); border: 1px solid #ccc; }

  /* One-line "what this pillar does" summary (2026-07-13) — the funnel
     one-liner, surfaced ABOVE the Challenge/Mission language so a scanning
     visitor gets the plain-English gist before the deeper copy. Themed
     left-border accent per pillar. */
  .pillar-summary {
    margin: 4px 0 14px; padding: 10px 13px; border-radius: 9px;
    background: rgba(0, 0, 0, .035); border-left: 3px solid var(--tenki-blue);
    font-size: .95rem; line-height: 1.5; color: var(--text-dark);
  }
  .pillar-card.card-green .pillar-summary { border-left-color: var(--tenki-green); }
  .pillar-card.card-black .pillar-summary { border-left-color: var(--tenki-black); }
  .pillar-card.card-white .pillar-summary { border-left-color: #b30000; }

  .pillar-title { font-size: 1.4rem; color: var(--tenki-black);
                  margin: 0 0 15px; font-weight: 700; line-height: 1.3; }
  .pillar-subtitle { margin: -10px 0 15px; font-style: italic;
                     font-size: .95rem; color: var(--text-light); }

  .pillar-section { margin-bottom: 20px; width: 100%; }
  .section-title { font-weight: 700; text-transform: uppercase;
                   font-size: .9rem; letter-spacing: .5px; margin-bottom: 8px; }
  .pillar-text { font-size: .95rem; color: var(--text-light);
                 line-height: 1.6; margin: 0 0 10px; }

  .media-wrapper { width: 100%; height: 180px; margin: 10px 0 15px;
                   border-radius: 8px; overflow: hidden;
                   box-shadow: 0 2px 8px rgba(0,0,0,.05); background-color: #eaeaea; }
  .pillar-image, .pillar-video { width: 100%; height: 100%; object-fit: cover; }
  .pillar-embed { width: 100%; height: 100%; border: 0; display: block; }

  .program-list { list-style: none; padding: 0; margin: 0 0 15px; width: 100%; }
  .program-list li { font-size: .95rem; color: var(--text-light); line-height: 1.5;
                     margin-bottom: 12px; padding-left: 20px; position: relative; }
  .program-list li::before { content: '•'; position: absolute; left: 0;
                             font-size: 1.2rem; font-weight: bold; }
  .split-list { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin-bottom: 15px; }

  .learn-more-btn { align-self: center; display: flex;
                    justify-content: center; align-items: center; gap: 8px;
                    margin: 25px auto 15px; padding: 14px 28px;
                    border-radius: 8px; text-decoration: none;
                    font-weight: 700; text-transform: uppercase;
                    font-size: .85rem; letter-spacing: .5px;
                    width: auto; min-width: 200px; max-width: 100%;
                    transition: background-color .2s ease, transform .2s ease; }
  .learn-more-btn::after { content: '→'; font-size: 1.1rem;
                           transition: transform .2s ease; margin-left: 4px; }
  .learn-more-btn:hover { transform: translateY(-2px); }
  .learn-more-btn:hover::after { transform: translateX(4px); }

  .explore-toggle-btn { align-self: center; width: auto;
                        min-width: 200px; max-width: 100%;
                        display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 3px;
                        margin-top: auto; padding: 12px 24px;
                        border-radius: 8px; border: none;
                        font-weight: 700; text-transform: uppercase;
                        font-size: .85rem; letter-spacing: .5px;
                        cursor: pointer;
                        transition: background-color .2s ease, transform .2s ease; }
  .explore-toggle-btn:hover { transform: translateY(-1px); }
  /* Reading-time hint riding on the Explore button — secondary to the action label,
     so it clearly describes the content revealed on expand (not the card copy).
     Hidden once expanded (the content is then visible). */
  .explore-toggle-readtime { text-transform: none; font-size: .68rem; font-weight: 600;
                             letter-spacing: .1px; opacity: .72; }
  .pillar-card.is-expanded .explore-toggle-readtime { display: none; }

  /* Funding boxes */
  .funding-container { display: none; gap: 20px; margin-top: 40px; }
  .funding-box { flex: 1; padding: 25px; border-radius: 12px;
                 display: flex; align-items: center; gap: 20px;
                 box-shadow: 0 4px 10px rgba(0,0,0,.03);
                 transition: transform .3s ease, box-shadow .3s ease;
                 text-decoration: none; }
  .funding-box:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0,0,0,.06); }
  .funding-icon { font-size: 2.5rem; flex-shrink: 0; transition: transform .3s ease; }
  .funding-box:hover .funding-icon { transform: scale(1.1); }
  .funding-text h4 { margin: 0 0 5px; font-size: 1.1rem;
                     text-transform: uppercase; letter-spacing: .5px; }
  .funding-text p { margin: 0; font-size: .95rem; line-height: 1.5; }
  .funding-current { background-color: #eef5fb; border: 2px solid #b3d4f0; }
  .funding-current h4 { color: var(--tenki-blue); }
  .funding-current p { color: #2C4A68; }
  .funding-future  { background-color: #f5f5f5; border: 2px dashed #ccc; }
  .funding-future h4 { color: var(--tenki-black); }
  .funding-future p { color: var(--text-light); }

  /* ── Card extras ────────────────────────────────────────────────────────── */
  /* Subtle "recent activity" tag — same gentle styling for any pillar that has it. */
  .recent-activity-tag { display: inline-flex; align-items: center; gap: 4px;
                         font-size: .65rem; font-weight: 700; text-transform: uppercase;
                         letter-spacing: .5px; color: #166534;
                         background: #f0fdf4; border: 1px solid #bbf7d0;
                         padding: 2px 8px; border-radius: 10px;
                         margin: 4px 0 0; align-self: flex-start; }
  .recent-activity-dot { width: 6px; height: 6px; border-radius: 50%;
                         background: var(--tenki-green); animation: gentlePulse 2s ease-in-out infinite; }
  @keyframes gentlePulse { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }

  /* Closed-card teaser (Task 5): stat = bold in the card's theme color; note = muted.
     (Reading-time moved onto the Explore button — see .explore-toggle-readtime.) */
  .pillar-teaser { margin: 2px 0 12px; font-size: .82rem; line-height: 1.3; }
  .pillar-teaser-stat { font-weight: 700; color: var(--tenki-black); }
  .card-blue  .pillar-teaser-stat { color: var(--tenki-blue); }
  .card-green .pillar-teaser-stat { color: var(--tenki-green); }
  .pillar-teaser-note { color: var(--text-light); font-weight: 600; }
  /* Single-sourced deep-dive impact stat (Task 6): a deliberate key-stat block —
     a big brand-color number with a concise uppercase caption, set off from the
     body copy by a hairline + spacing so it reads as a metric, not a sentence. */
  .pillar-teaser-metric { margin: 16px 0 6px; padding-top: 13px; border-top: 1px solid rgba(0, 0, 0, .07); }
  .pillar-teaser-metric .pillar-teaser-big { display: block; font-size: 1.85rem; font-weight: 800;
                                             line-height: 1.05; letter-spacing: -.02em; color: var(--tenki-black); }
  .card-blue  .pillar-teaser-metric .pillar-teaser-big { color: var(--tenki-blue); }
  .card-green .pillar-teaser-metric .pillar-teaser-big { color: var(--tenki-green); }
  .pillar-teaser-metric .pillar-teaser-cap { display: block; margin-top: 4px; font-size: .67rem; font-weight: 700;
                                             letter-spacing: .06em; line-height: 1.4; text-transform: uppercase;
                                             color: var(--text-light); }
  /* Future-pillar clarifier (Task 8) — quiet, supportive, not a hard sell. */
  .pillar-future-note { margin: 2px 0 12px; font-size: .76rem; line-height: 1.35;
                        color: var(--text-light); font-style: italic; }

  /* ── Optional element-level links (Icon, Title, Section Title, Media …) ──
     When an editor sets an "X Link URL" field on the sheet, the matching
     element wraps in an <a>.  These styles keep the visual exactly the same
     as the non-linked version — no default underline, native colors — but
     reveal a small ↗ glyph on hover so users know it leads somewhere. */
  .pillar-elem-link { display: inline-block; color: inherit; text-decoration: none;
                      position: relative; transition: opacity .15s; }
  .pillar-elem-link:hover { opacity: .85; }
  .pillar-elem-link.link-heading::after,
  .pillar-elem-link.link-title::after { content: ' ↗'; font-size: .7em;
                                        opacity: 0; transition: opacity .15s;
                                        color: var(--tenki-blue); }
  .pillar-elem-link.link-heading:hover::after,
  .pillar-elem-link.link-title:hover::after { opacity: 1; }
  .pillar-elem-link.link-media { display: block; position: relative; cursor: pointer; }
  .pillar-elem-link.link-media::after {
    content: '↗'; position: absolute; top: 12px; right: 12px;
    width: 26px; height: 26px; border-radius: 50%;
    background: rgba(0,0,0,.55); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; opacity: 0; transition: opacity .2s;
  }
  .pillar-elem-link.link-media:hover::after { opacity: 1; }
  .pillar-elem-link.link-icon { display: inline-block; border-radius: 50%; }
  .pillar-elem-link.link-icon:hover .icon-wrapper { transform: scale(1.12); }

  /* Share button in the top-right of each card (next to the chevron) */
  .share-btn { position: absolute; top: 18px; right: 54px;
               width: 28px; height: 28px; border-radius: 50%;
               background: rgba(0,0,0,.04); color: #666;
               border: none; cursor: pointer; padding: 0;
               display: flex; align-items: center; justify-content: center;
               transition: background .2s, color .2s, opacity .2s;
               opacity: .35; /* always faintly visible; brightens on hover */ }
  .pillar-card:hover .share-btn,
  .share-btn:focus-visible { opacity: 1; }
  .share-btn:hover { background: rgba(0,0,0,.08); color: var(--tenki-blue); }
  .share-btn.copied { background: var(--tenki-green); color: #fff; }
  .share-btn.copied svg { display: none; }
  .share-btn.copied::after { content: '✓'; font-size: 14px; font-weight: bold; }

  /* First-visit chevron pulse — auto-disables after first interaction */
  @keyframes chevronAttention {
    0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(0,90,156,0); }
    50%      { transform: scale(1.18); box-shadow: 0 0 0 6px rgba(0,90,156,.15); }
  }
  .pillar-card.first-visit-pulse .pillar-chevron { animation: chevronAttention 1.5s ease-in-out 2; }

  /* ── Image skeleton placeholder ─────────────────────────────────────────── */
  .pillar-image, .pillar-video { transition: opacity .4s ease; }
  .pillar-image:not(.loaded), .pillar-video:not(.loaded) { opacity: 0; }
  .media-wrapper { position: relative; }
  .media-wrapper.loading::before {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(90deg, #eaeaea 0%, #f3f4f6 50%, #eaeaea 100%);
    background-size: 200% 100%; animation: skeleton 1.4s ease-in-out infinite;
  }
  @keyframes skeleton { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

  /* ── Funding progress bar ───────────────────────────────────────────────── */
  .funding-progress { width: 100%; margin-top: 10px; }
  .funding-progress-bar { width: 100%; height: 8px; background: rgba(0,0,0,.06);
                          border-radius: 4px; overflow: hidden; }
  .funding-progress-fill { height: 100%; border-radius: 4px;
                           transition: width .6s ease; }
  .funding-current .funding-progress-fill { background: var(--tenki-blue); }
  .funding-future  .funding-progress-fill { background: #999; }
  .funding-progress-labels { display: flex; justify-content: space-between;
                             font-size: .7rem; margin-top: 4px;
                             font-weight: 600; }
  .funding-current .funding-progress-labels { color: #2C4A68; }
  .funding-future  .funding-progress-labels { color: var(--text-light); }

  /* ── Inline donation/embed iframe ───────────────────────────────────────── */
  .funding-embed { width: 100%; margin-top: 14px; border: none;
                   border-radius: 8px; background: #fff;
                   min-height: 240px; }

  /* ── Newsletter banner (after engagement threshold) ─────────────────────── */
  #newsletter-banner { display: none; max-width: var(--tenki-max, 1400px); margin: 30px auto 0;
                       background: #fff; border-radius: 12px; padding: 28px;
                       box-shadow: 0 4px 20px rgba(0,0,0,.08);
                       border-top: 4px solid var(--tenki-blue);
                       position: relative; }
  #newsletter-banner.show { display: block; animation: bannerSlide .5s ease-out; }
  @keyframes bannerSlide { from { opacity: 0; transform: translateY(20px); }
                            to   { opacity: 1; transform: translateY(0); } }
  #newsletter-banner h3 { margin: 0 0 8px; font-size: 1.2rem; color: var(--tenki-black);
                          text-transform: uppercase; letter-spacing: .5px; }
  #newsletter-banner p { margin: 0 0 14px; color: var(--text-light);
                         font-size: .95rem; line-height: 1.5; }
  #newsletter-close { position: absolute; top: 10px; right: 14px;
                      background: none; border: none; cursor: pointer;
                      font-size: 18px; color: #999; line-height: 1; padding: 4px 8px; }
  #newsletter-close:hover { color: var(--tenki-black); }

  /* Honor user system setting — turn off the bouncy/parallax transitions */
  @media (prefers-reduced-motion: reduce) {
    .pillar-card, .pillar-card:hover, .icon-wrapper, .funding-box,
    .pillar-chevron, .pillar-expanded-drawer, .funding-icon {
      transition: none !important; transform: none !important; animation: none !important;
    }
    html { scroll-behavior: auto !important; }
  }
  html { scroll-behavior: smooth; } /* used by deep-link + scroll-into-view */

  @media (max-width: 900px) { .funding-container { flex-direction: column; } }
  @media (max-width: 768px) {
    body { padding: 10px; }
    .infographic-container { padding: 25px 15px; }
    .infographic-header { margin-bottom: 35px; }
    .infographic-header h2 { font-size: 1.8rem; }
    .infographic-header p  { font-size: 1rem; }
    .pillar-card  { padding: 20px; }
    .pillar-title { font-size: 1.25rem; }
    .card-header-flex { height: auto; flex-direction: row;
                        justify-content: space-between; margin-bottom: 15px; }
    .status-badge { max-width: 100%; }
    .icon-wrapper { width: 65px; height: 65px; font-size: 30px; }
    .funding-box  { flex-direction: column; text-align: center; padding: 20px; gap: 10px; }
    .split-list   { grid-template-columns: 1fr; }
  }

/* ─── social: social/social.html (sha=1450d7e) ─── */
/* Tenki — Social & Feeds section
     Lives below the timeline embed on the homepage.  Self-contained
     scoped styles (prefix `tenki-social-` and `fb-`) so it can't bleed
     into other Code Blocks. */
  .tenki-social-parallax-section {
    --tenki-blue: #005A9C;
    --tenki-green: #008C45;
    --tenki-black: #1A1A1A;
    --tenki-white: #FFFFFF;
    --text-light: #555555;

    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    position: relative;
    /* Tight internal padding so the section visually butts up against
       the timeline above without a chasm.  Top padding minimal (20 px)
       so the photographer's "pointing into the sky" composition lands
       right under the timeline; bottom padding slightly larger so the
       fade-out doesn't crash into whatever comes next.

       NO negative top margin.  We had `margin: -16px -50vw 0` for a
       while to close a perceived gap between this section and the
       timeline above, but because this section has
       `isolation: isolate; z-index: 1` (creating its own stacking
       context) AND the masked background image fills the section
       absolutely from top:0, the 16-pixel pull-up caused the bg image
       to *paint over* the bottom of the timeline.  The Squarespace
       section above already provides comfortable padding; if a gap
       reappears it's better solved via the `docs/squarespace-page-
       overrides.md` PHCI snippet (zero out section padding for the
       timeline + social block-IDs) than by overlapping siblings here.

       `overflow: hidden` is belt-and-suspenders: even if a child ever
       tries to extend past the top edge (e.g. an absolutely-positioned
       decoration), it gets clipped at the section bounds. */
    /* Padding-top + negative margin-top combo extends the section
       upward so the photo background bleeds UP behind the bottom of
       the funnel section above.  Pulled WAY up so a substantial
       portion of the photo sits behind the funnel's whole bottom
       half — the funnel's ::before backdrop fades to reveal the
       photo through the gaps between content elements, while the
       donate CTA + pillar chips stay sharp on top.
       Padding-top bumped in lockstep so the inner content (Maya
       quote + feeds) lands at the same screen position. */
    /* 2026-05-29: pulled UP further (-400 → -520) so the photo
       overlaps a larger portion of the funnel section above.  The
       18 % top-mask fade dissolves into the funnel as a soft
       transition; without enough overlap the fade only reaches the
       very bottom of the funnel and the photo still reads as a
       separate slab.  Padding-top bumped in lockstep so the inner
       content (Maya quote + feeds) lands at the same screen
       position as before. */
    padding: 530px 20px 40px;
    /* Full-bleed via calc margins — robust to SQS's padded content column
       (old left:50%/right:50% offset clipped content right on mobile). */
    margin: -520px 0 0;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    box-sizing: border-box;
    width: 100vw;
    overflow: hidden;
    /* Isolate stacking context so the next section below can't paint
       into ours (same defensive pattern as .dashboard-container). */
    isolation: isolate;
    z-index: 1;
  }

  .tenki-social-masked-bg {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    z-index: 1;
    /* Critical for the top overlap with the funnel section: even
       though the mask makes the top 15 % transparent, the div is
       still a hit target.  Without this the masked-out region
       would intercept clicks on whatever funnel content sits in
       the same coordinate space (donate CTA, pillar chips). */
    pointer-events: none;
    /* 2026-05-29: ADDED a top-edge fade.  Previously the mask was
       `black 0%, black 95%, transparent 100%` — solid top edge,
       which painted a HARD horizontal line where the photo met the
       funnel's donate CTA above.  User-reported: "top of social
       picture is still not visible and does not blend into the
       funnel."  New gradient runs:
         0%  → transparent  (top edge fully invisible)
         18% → black        (photo fully visible from here down)
         95% → black
         100% → transparent (existing bottom soften into newsletter)
       Now the photo materialises softly into whatever sits above
       (the funnel's donate CTA + bottom of its gray backdrop) and
       the join with the funnel reads as a continuous transition,
       not a cut. */
    -webkit-mask-image: linear-gradient(to bottom,
                          transparent 0%, black 18%, black 95%, transparent 100%);
            mask-image: linear-gradient(to bottom,
                          transparent 0%, black 18%, black 95%, transparent 100%);
  }

  .tenki-social-inner-content {
    position: relative;
    z-index: 2;
    max-width: var(--tenki-max, 1400px);
    margin: 0 auto;
  }

  /* Inline mini-Tenki-logo inside the FB/IG card subtitles.
     Replaces the old large logo banner that used to sit at the top
     of the section — that banner was redundant against the footer
     logo on the same page and competed with the photo background
     for attention.  The inline placement brands the feed cards as
     specifically Tenki's (vs. generic Facebook / Instagram) while
     taking up only ~22 px of vertical space and letting the photo
     above breathe.

     The drop-shadow gives the logo a little lift off the white
     card surface — same "depth" treatment we used to apply to the
     banner version, just scaled down. */
  .fb-inline-tenki {
    display: inline-block;
    height: 22px;
    width: auto;
    vertical-align: -6px;        /* baseline tweak — matches the cap height of the subtitle */
    margin: 0 4px;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.22))
            drop-shadow(0 1px 1px rgba(0, 0, 0, 0.14));
    /* PNG is already RGBA with transparent corners post-crop, so no
       background / border-radius needed — the alpha channel handles
       the rounded look against the card's white surface. */
  }
  @media (max-width: 768px) {
    .fb-inline-tenki { height: 18px; vertical-align: -5px; }
  }

  /* Quote card */
  .tenki-social-quote-container {
    background-color: var(--tenki-white);
    border-radius: 16px;
    padding: 32px 40px;
    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.06);
    text-align: center;
    position: relative;
    margin-bottom: 30px;
    border-top: 5px solid var(--tenki-blue);
  }
  .tenki-social-quote-container::before {
    content: '"';
    position: absolute;
    top: -15px; left: 40px;
    font-size: 140px;
    color: rgba(0, 90, 156, 0.04);
    font-family: Georgia, serif;
    line-height: 1;
  }
  .tenki-social-quote-text {
    font-size: 1.6rem;
    line-height: 1.5;
    color: var(--tenki-black);
    font-weight: 600;
    font-style: italic;
    margin: 0 0 10px 0;
  }
  .tenki-social-quote-author {
    font-size: 1.1rem;
    color: var(--tenki-blue);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0;
  }

  /* Feed columns */
  .tenki-feeds-grid-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: start;
  }
  .tenki-feed-column-card {
    background-color: var(--tenki-white);
    border-radius: 16px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.05);
    box-sizing: border-box;
    width: 100%;
    border-top: 6px solid var(--tenki-blue);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }
  .tenki-feed-column-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.08);
  }
  .tenki-feed-column-card.ig-card { border-top-color: var(--tenki-green); }

  .fb-card-header-trigger {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 25px;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.2s ease;
    min-height: 48px;  /* touch target */
  }
  .fb-card-header-trigger:hover { background-color: #FAFAFA; }
  .fb-icon-circle {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background-color: #eef5fb;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
  }
  /* Platform icons rendered via CSS `content:` instead of literal
     emoji characters in the HTML markup.  Lives in the CDN-served
     CSS (correct UTF-8 headers always) so Squarespace's Code Block
     paste can't mojibake the icons even when it mangles inline
     unicode in the shell.  \1F4F1 = 📱, \1F4F8 = 📸. */
  .fb-icon-circle[data-platform-icon="facebook"]::before  { content: '\1F4F1'; }
  .fb-icon-circle[data-platform-icon="instagram"]::before { content: '\1F4F8'; }
  .tenki-feed-column-card.ig-card .fb-icon-circle { background-color: #eefbf3; }
  .fb-header-text { flex-grow: 1; }
  .fb-header-text h3 {
    margin: 0;
    color: var(--tenki-black);
    font-size: 1.15rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }
  .fb-header-text p {
    margin: 2px 0 0 0;
    color: var(--text-light);
    font-size: 0.85rem;
    font-weight: 600;
    transition: color 0.2s ease;
  }
  .tenki-feed-column-card:hover .fb-header-text p { color: var(--tenki-blue); }
  .tenki-feed-column-card.ig-card:hover .fb-header-text p { color: var(--tenki-green); }

  /* Expandable drawer */
  .fb-iframe-container-drawer {
    display: none;
    opacity: 0;
    width: 100%;
    justify-content: center;
    overflow-y: auto;
    border-top: 1px dashed #EAEAEA;
    height: 550px;
    padding: 15px 10px;
    position: relative;
    background-color: #FAFAFA;
    box-sizing: border-box;
    transition: opacity 0.35s ease;
  }
  .tenki-feed-column-card.active .fb-iframe-container-drawer {
    display: flex;
    opacity: 1;
  }
  .fb-iframe-container-drawer iframe {
    /* Fill the whole drawer (desktop column + full-width mobile) instead of a
       fixed 340px centered pillar. FB's page plugin caps at 500px, so the URL
       requests 500 + adapt_container_width; the iframe flexes to the container
       up to that cap. (Matthew 2026-07-22.) */
    width: 100%;
    max-width: 500px;
    height: 560px;
    border: none;
    overflow: hidden;
    pointer-events: auto;
  }
  .fb-iframe-container-drawer .elfsight-app-a618fcce-28d6-49e5-87f9-efbfd761ba01 {
    width: 100%;
    height: auto;
  }

  /* Build chip — visible only with ?debug=1 (toggled via .show-build) */
  .tenki-social-build-chip {
    position: absolute;
    top: 8px;
    right: 12px;
    z-index: 5;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 10px;
    color: #fff;
    background: rgba(0, 90, 156, 0.85);
    padding: 3px 8px;
    border-radius: 10px;
    letter-spacing: 0.3px;
    display: none;
  }
  .tenki-social-parallax-section.show-build .tenki-social-build-chip { display: inline-block; }

  @media (max-width: 900px) {
    .tenki-feeds-grid-wrapper {
      grid-template-columns: 1fr;
      gap: 30px;
    }
    .tenki-social-parallax-section {
      /* Mobile keeps the same blend pattern as desktop (funnel bottom
         fades into photo) but at smaller scale.  Top padding still
         leaves ~80 px of photo above the quote card so the lush-jungle
         backdrop reads as the visual lead-in. */
      padding: 100px 15px 30px;
      margin-top: -80px;
    }
    .tenki-social-quote-container {
      padding: 30px 20px;
    }
    .tenki-social-quote-text {
      font-size: 1.3rem;
    }
  }

/* ─── newsletter: newsletter/newsletter.html (sha=ace0fdd) ─── */
/* Tenki newsletter section — full-bleed below the social section.
     The visual goal: airy white space, oversized brand statement on
     the left, focused signup card on the right.  No competing photo
     background — leaves the social section above as the visual
     bookend so this reads as the "next step" rather than another
     decorative photo block. */
  .tenki-newsletter-section {
    --tn-blue:    #005A9C;
    --tn-blue-deep: #003a66;
    --tn-black:   #1A1A1A;
    --tn-ink:     #222;
    --tn-muted:   #6b7280;
    --tn-line:    #e2e8f0;

    font-family: 'proxima-nova', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    position: relative;
    /* NOT full-bleed (intentionally — do NOT reintroduce width:100vw).
       iOS Safari/WebKit mis-PAINTS text inside a `width:100vw` section that
       rides Squarespace's scroll-reveal compositing layer: the headline GLYPHS
       render shifted left and clip at the viewport edge, even though layout
       coordinates report the box correctly (so it's invisible to JS measurement
       and unaffected by the earlier 100vw+calc-margin and text-wrap fixes).
       Reproduced in a real WebKit engine; only dropping the 100vw clears it.
       The section background is white and the page background is also white, so
       a normal-width section is visually seamless and keeps the headline inside
       the column. */
    width: auto;
    padding: 80px 24px 96px;
    background: #fff;
    box-sizing: border-box;
    /* Same defensive pattern as the social section: own stacking
       context so the next sibling can't paint into ours, and so we
       don't paint into the timeline above us. */
    isolation: isolate;
    z-index: 1;
  }

  .tenki-newsletter-build-chip {
    position: absolute; top: 8px; right: 12px;
    font: 600 10px/1 monospace; padding: 3px 8px; border-radius: 4px;
    background: var(--tn-black); color: #fff; opacity: .55;
    display: none; pointer-events: none; z-index: 2;
  }
  [data-debug="1"] .tenki-newsletter-build-chip,
  body.tenki-debug .tenki-newsletter-build-chip { display: block; }

  .tenki-newsletter-inner {
    max-width: var(--tenki-max, 1400px);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 64px;
    align-items: center;
  }

  .tenki-newsletter-headline {
    margin: 0 0 12px;
    /* Softer than the original 800-weight tightly-tracked treatment —
       this is an inspirational statement, not a battle cry.  Serif
       face + medium weight + relaxed line-height gives it the warmth
       of a hand-written letter rather than an enterprise call-out. */
    font-family: Georgia, 'Iowan Old Style', 'Palatino Linotype', serif;
    font-size: clamp(1.55rem, 2.8vw, 2.35rem);
    line-height: 1.35;
    font-weight: 500;
    color: #2a2a2a;
    letter-spacing: 0.005em;
    text-wrap: balance;
  }
  .tenki-newsletter-attribution {
    margin: 0;
    font-size: 0.95rem;
    color: var(--tn-muted);
    font-style: italic;
  }
  .tenki-newsletter-attribution:empty { display: none; }

  .tenki-newsletter-right {
    background: #fafbfc;
    border: 1px solid var(--tn-line);
    border-radius: 16px;
    padding: 28px 28px 24px;
    box-shadow: 0 1px 3px rgba(0,0,0,.04), 0 6px 18px rgba(0,0,0,.04);
  }
  .tenki-newsletter-signup-title {
    margin: 0 0 8px;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--tn-blue);
  }
  .tenki-newsletter-signup-title:empty { display: none; }
  .tenki-newsletter-signup-body {
    margin: 0 0 18px;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--tn-ink);
  }

  .tenki-newsletter-form { display: flex; flex-direction: column; gap: 10px; }
  .tenki-newsletter-label {
    /* Visually hidden — kept for screen readers */
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0,0,0,0); border: 0;
  }
  .tenki-newsletter-form input[type="email"] {
    padding: 13px 16px;
    border: 1.5px solid var(--tn-line);
    border-radius: 10px;
    font-size: 15px;
    font-family: inherit;
    outline: none;
    background: #fff;
    color: var(--tn-ink);
    transition: border-color .15s, box-shadow .15s;
    min-height: 44px;
  }
  .tenki-newsletter-form input[type="email"]:focus {
    border-color: var(--tn-blue);
    box-shadow: 0 0 0 3px rgba(0, 90, 156, .12);
  }
  .tenki-newsletter-form input[type="email"].is-invalid {
    border-color: #dc2626;
  }
  .tenki-newsletter-btn {
    padding: 13px 22px;
    border: 0;
    border-radius: 10px;
    background: var(--tn-blue-deep);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: background .15s, transform .12s;
    min-height: 44px;
    letter-spacing: .01em;
  }
  .tenki-newsletter-btn:hover { background: var(--tn-blue); transform: translateY(-1px); }
  .tenki-newsletter-btn:active { transform: translateY(0); }
  .tenki-newsletter-btn:disabled { opacity: .6; cursor: not-allowed; transform: none; }
  .tenki-newsletter-btn.is-success { background: #16a34a; }

  .tenki-newsletter-status {
    margin-top: 4px;
    font-size: 0.9rem;
    line-height: 1.4;
    min-height: 1.2em;
  }
  .tenki-newsletter-status.is-ok  { color: #16a34a; font-weight: 600; }
  .tenki-newsletter-status.is-err { color: #dc2626; }

  /* Mobile — stack into a single column, tighten the vertical rhythm */
  @media (max-width: 768px) {
    .tenki-newsletter-section {
      padding: 48px 16px 64px;
    }
    .tenki-newsletter-inner {
      grid-template-columns: 1fr;
      gap: 32px;
    }
    .tenki-newsletter-headline {
      font-size: clamp(1.4rem, 6vw, 1.85rem);
    }
  }

/* ─── funnel/funnel-slim.html: funnel/funnel-slim.html (sha=d49fc61) ─── */
/* Wide-screen knob (#20): outer frames use var(--tenki-max, 1400px). */
  :root { --tenki-max: 1400px; }
  .tenki-mini-funnel-container {
    max-width: var(--tenki-max, 1400px);
    margin: 30px auto;
    padding: 24px 30px;
    background-color: #F8F9FA;
    border-radius: 10px;
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    box-sizing: border-box;
    box-shadow: 0 4px 15px rgba(0,0,0,0.02);
    border-left: 5px solid #008C45;
    position: relative;
  }

  .tenki-mini-funnel-container *,
  .tenki-mini-funnel-container *::before,
  .tenki-mini-funnel-container *::after {
    box-sizing: inherit;
  }

  /* Build chip — hidden by default, shown only on ?debug=1 */
  .tenki-mini-funnel-build-chip {
    position: absolute; top: 6px; right: 10px;
    font-size: 10px; font-family: ui-monospace, SFMono-Regular, monospace;
    color: #6b7280; background: #fff; padding: 2px 6px; border-radius: 4px;
    border: 1px solid #e5e7eb; display: none;
  }
  .tenki-mini-funnel-container.show-build .tenki-mini-funnel-build-chip { display: inline-block; }

  .mini-funnel-layout {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
  }

  .mini-funnel-text { flex: 1; }

  .mini-funnel-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
  }

  /* Logo banner — respects the Tenki mark's natural 3:1 aspect ratio
     (1536 × 512 source).  The new mark has its own black bg + green
     border baked in, so no inner padding needed.  See funnel.html for
     the full design rationale. */
  .mini-funnel-logo-box {
    position: relative;
    width: 108px;
    aspect-ratio: 3 / 1;
    border-radius: 6px;
    overflow: hidden;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    isolation: isolate;
  }
  .mini-funnel-logo {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
  }
  /* Faint SL-flag hint layer — see funnel.html for the rationale on
     keeping this at low opacity once the SL colors are baked into the
     logo itself. */
  .mini-funnel-flag-bg {
    position: absolute;
    inset: -10%;
    z-index: 1;
    background: linear-gradient(
      to bottom,
      #1eb53a 0%,    #1eb53a 33.3%,
      #ffffff 33.3%, #ffffff 66.6%,
      #0072c6 66.6%, #0072c6 100%
    );
    opacity: 0.08;
    filter: blur(0.8px);
    transform-origin: center;
    animation: tenkiFlagFlutterSlim 7s ease-in-out infinite;
    pointer-events: none;
  }
  @keyframes tenkiFlagFlutterSlim {
    0%   { transform: skewX(-1.2deg) skewY(0.3deg) scale(1.012); }
    25%  { transform: skewX( 0.8deg) skewY(-0.4deg) scale(1.006); }
    50%  { transform: skewX( 1.4deg) skewY(0.5deg) scale(1.016); }
    75%  { transform: skewX(-0.4deg) skewY(-0.3deg) scale(1.008); }
    100% { transform: skewX(-1.2deg) skewY(0.3deg) scale(1.012); }
  }
  @media (prefers-reduced-motion: reduce) {
    .mini-funnel-flag-bg { animation: none; }
  }

  .mini-funnel-brand h4 {
    margin: 0;
    font-size: 1.05rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #1A1A1A;
    font-weight: 800;
    line-height: 1.3;
  }

  .mini-funnel-text p {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.5;
    color: #555555;
  }

  .mini-funnel-methods {
    margin-top: 4px !important;
    font-size: 0.78rem !important;
    color: #8a93a3 !important;
    letter-spacing: 0.3px;
  }

  .mini-funnel-inline-link {
    color: #005A9C;
    text-decoration: underline;
    font-weight: 700;
    transition: color 0.2s ease;
  }

  .mini-funnel-inline-link:hover {
    color: #008C45;
  }

  .mini-funnel-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
    flex-shrink: 0;
  }

  .mini-funnel-chips {
    display: flex;
    gap: 8px;
  }

  .mini-chip {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    padding: 4px 10px;
    border-radius: 4px;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }

  .mini-chip:hover { transform: translateY(-1px); }

  .chip-blue  { background-color: #EEF5FB; color: #005A9C; border: 1px solid #b3d4f0; }
  .chip-blue:hover  { box-shadow: 0 3px 8px rgba(0, 90, 156, 0.12); }
  .chip-green { background-color: #E8F5E9; color: #008C45; border: 1px solid #c8e6c9; }
  .chip-green:hover { box-shadow: 0 3px 8px rgba(0, 140, 69, 0.12); }
  .chip-black { background-color: #F4F4F4; color: #1A1A1A; border: 1px solid #cccccc; }
  .chip-black:hover { box-shadow: 0 3px 8px rgba(26, 26, 26, 0.08); }

  .mini-master-btn {
    display: inline-block;
    padding: 10px 24px;
    background-color: #008C45;
    color: #FFFFFF;
    text-decoration: none;
    border-radius: 20px;
    font-weight: 800;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-align: center;
    white-space: nowrap;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
    border: 2px solid #008C45;
    width: 100%;
  }

  .mini-master-btn:hover {
    transform: translateY(-1px);
    background-color: transparent;
    color: #008C45;
    box-shadow: 0 4px 10px rgba(0, 140, 69, 0.2);
  }

  /* Mobile breakpoints */
  @media (max-width: 850px) {
    .mini-funnel-layout {
      flex-direction: column;
      gap: 20px;
      text-align: center;
    }
    .mini-funnel-brand    { justify-content: center; }
    .mini-funnel-actions  { align-items: center; width: 100%; }
    .mini-funnel-chips    { width: 100%; justify-content: center; }
    .mini-chip {
      flex: 1;
      text-align: center;
      max-width: 120px;
      padding: 8px 10px;        /* bigger touch target on phones */
      min-height: 36px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }
    .mini-master-btn      { padding: 12px 24px; }
  }

  @media (max-width: 480px) {
    .tenki-mini-funnel-container { padding: 20px 15px; }
    .mini-funnel-chips {
      flex-direction: column;
      width: 100%;
      gap: 6px;
    }
    .mini-chip { max-width: 100%; min-height: 44px; }
    .mini-funnel-methods { font-size: 0.72rem !important; }
  }
