/* JIFU site stylesheet
   Drop this file and the fonts folder beside it into your project and link it.
   Everything below is taken from the live site: the colours, the type scale and
   the recurring pieces. Nothing here depends on the tool the site was designed in. */

/* ---------------------------------------------------------------- fonts
   F-CSS: the @font-face rules live in base.html, NOT here - jifu.css is
   linked on every page, and a re-introduced @font-face that ever named a
   missing file would 404 site-wide (guarded by test_no_font_face_rule).
   base.html self-hosts Montserrat (body, variable 100-900) AND, since the
   redesign BRIEF landed 07_fonts, Heuvel Grotesk (display, Regular/Medium/
   Bold). The --jifu-font-display/body tokens below name those families with
   a Helvetica/Arial fallback; display type now renders in real Heuvel
   Grotesk rather than the Montserrat fallback the first build shipped. */

/* --------------------------------------------------------------- colour */
:root {
  --jifu-white: rgb(255, 255, 255);
  --jifu-parchment: rgb(244, 241, 234);
  --jifu-midnight: rgb(25, 25, 25);
  --jifu-midnight-deep: rgb(15, 15, 15);
  --jifu-midnight-well: rgb(8, 8, 8);
  --jifu-gold: rgb(139, 109, 85);
  --jifu-gold-lift: rgb(169, 138, 110);
  --jifu-gold-deep: rgb(117, 89, 63);
  --jifu-meridian: rgb(0, 229, 199);
  --jifu-pillar-green: rgb(139, 197, 61);
  --jifu-signal: rgb(74, 144, 226);
  --jifu-signal-deep: rgb(22, 43, 67);
  --jifu-signal-sky: rgb(108, 172, 246);
  --jifu-papaya: rgb(255, 122, 69);
  --jifu-accent-travel: rgb(0, 229, 199);
  --jifu-accent-health: rgb(139, 197, 61);
  --jifu-accent-education: rgb(74, 144, 226);
  --jifu-accent-community: rgb(255, 122, 69);
  --jifu-accent-stm3d: rgb(111, 201, 198);
  /* The health green at 60% for TEXT on a light ground: the accent itself is
     2.07:1 on white (AA fails); this is 5.27:1 (ASANA:1219425657189006). */
  --jifu-accent-health-deep: rgb(83, 118, 37);
  --jifu-ground: rgb(255, 255, 255);
  --jifu-ground-raised: rgb(244, 241, 234);
  --jifu-ground-well: rgb(238, 234, 225);
  --jifu-ink: rgb(25, 25, 25);
  --jifu-ink-muted: rgba(25, 25, 25, 0.66);
  --jifu-ink-faint: rgba(25, 25, 25, 0.62);
  --jifu-ink-ghost: rgba(25, 25, 25, 0.18);
  --jifu-rule: rgba(25, 25, 25, 0.16);
  --jifu-rule-soft: rgba(25, 25, 25, 0.1);
  --jifu-accent: rgb(139, 109, 85);
  --jifu-accent-text: rgb(139, 109, 85);
  --jifu-accent-ghost: rgba(139, 109, 85, 0.14);
  --jifu-btn-bg: rgb(25, 25, 25);
  --jifu-btn-fg: rgb(244, 241, 234);
  --jifu-header-glass: rgb(255, 255, 255);
  --jifu-inverse-ground: rgb(15, 15, 15);
  --jifu-inverse-ground-raised: rgb(25, 25, 25);
  --jifu-inverse-ground-well: rgb(8, 8, 8);
  --jifu-inverse-ink: rgb(244, 241, 234);
  --jifu-inverse-ink-muted: rgba(244, 241, 234, 0.66);
  --jifu-inverse-ink-faint: rgba(244, 241, 234, 0.56);
  --jifu-inverse-ink-ghost: rgba(244, 241, 234, 0.16);
  --jifu-inverse-rule: rgba(244, 241, 234, 0.14);
  --jifu-inverse-rule-soft: rgba(244, 241, 234, 0.08);
  --jifu-inverse-accent-text: rgb(169, 138, 110);
  --jifu-inverse-accent-ghost: rgba(139, 109, 85, 0.24);
  --jifu-inverse-btn-bg: rgb(244, 241, 234);
  --jifu-inverse-btn-fg: rgb(15, 15, 15);
  --jifu-inverse-header-glass: rgba(15, 15, 15, 0.78);

  /* type */
  --jifu-font-display: "Heuvel Grotesk", "Helvetica Neue", Arial, sans-serif;
  --jifu-font-body: "Montserrat", "Helvetica Neue", Arial, sans-serif;

  /* the page gutter, which is 6.5vw between a floor and a ceiling */
  --jifu-gutter: clamp(20px, 6.5vw, 94px);
  --jifu-measure: 1440px;
}

/* ----------------------------------------------------------------- base
   F-CSS: this reset is CONFINED to the .cine wrapper the redesigned page
   bodies opt into. jifu.css is loaded on every page (base.html), so an
   unscoped `body`/`a`/`h1-h6`/`p`/`img` reset here would restyle every
   existing page - links losing their underline, headings losing margins -
   which the foundation PR must NOT do. Existing pages never carry .cine, so
   they are untouched; the redesign gets the full reset inside .cine. The
   body-level `margin:0` is dropped: it is a document concern already true
   site-wide, and .cine is a div, not <body>. */
/* Scoped resets use :where(.cine) (T8): :where() has ZERO specificity, so each
   rule keeps the element-level (0,0,1) of the mockup's original bare-element
   reset. Without it, .cine a at (0,1,1) beat .jifu-btn--primary-inverse (0,1,0)
   and every primary-inverse button rendered its text parchment-on-parchment.
   :where(.cine) keeps the scope (still only inside .cine) while letting every
   component class win again. */
:where(.cine), :where(.cine) *, :where(.cine) *::before, :where(.cine) *::after { box-sizing: border-box; }

.cine {
  /* --accent is the per-page accent the design system reads. A per-vertical
     page opts into its brand accent with a cine--<vertical> modifier below -
     those are declared LATER in this file at the same specificity, so they
     still win over the default set here (T8 checked this could flatten them;
     it does not). No page needs an inline style="--accent:rgb(...)", which
     would trip the raw-colour guard. */
  /* The .cine ground is midnight-well (site-extra.css), so the DEFAULT accent
     here is the INVERSE gold, not the light-ground gold. Measured on
     /distributors at 1440: the light gold gave 4.03:1 on a 10px card kicker
     and 3.70:1 on a 13.5px link, both under the 4.5:1 AA floor for normal
     text, while the 66px hero headline passed at 4.42:1 against its 3:1 large
     -text floor - which is exactly why eyeballing missed it. The inverse token
     the design system already ships gives 5.98:1 and 5.48:1.
     Per-pillar modifiers below still override --accent with their own bright
     tokens, and a light band restores the light gold (see --parchment below). */
  --accent: var(--jifu-inverse-accent-text, rgb(169, 138, 110));
  /* NO ground here. .cine's ground is declared ONCE, in site-extra.css, and it
     is DARK (midnight-well / parchment). This file used to declare a LIGHT
     pair that site-extra.css then overrode, so the two sheets contradicted
     each other and only source order decided - T3's item (c). The dead pair is
     removed rather than reconciled to dark, so there is exactly one place to
     read and one place to change. Guarded by
     test_cine_ground_is_declared_exactly_once. */
  font-family: var(--jifu-font-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  /* Full-bleed the WHOLE redesigned body (T10 measured on #618): the .cine
     wrapper sits inside base.html's boxed <main> (max-w-7xl + px gutters +
     py-4/sm:py-8), so without this every dark section shows parchment gutters
     above 1280px and a strip above the hero. width:100vw + margin-inline
     escapes the horizontal box; the negative margin-block cancels main's
     vertical padding so the page is edge to edge. .cine only exists on
     redesigned pages, so no existing page is affected. */
  width: 100vw;
  max-width: 100vw;
  margin-inline: calc(50% - 50vw);
  margin-top: -1rem;     /* swallow main's py-4 top padding */
  margin-bottom: -3rem;  /* swallow main's py-4 bottom + the footer's mt-8 gap */
}

/* ---- .jifu-bleed: the LAYOUT half of .cine, for pages that must not be dark.
   ASANA:1218722685938220 (T2, 2026-09-22).

   base.html's <main> is boxed (max-w-7xl + px gutters + py-4/sm:py-8), so a
   full-width band needs to escape it. That escape currently lives INSIDE the
   .cine rule above, welded to the dark theme - the accent token, the type
   stack and the midnight ground. The money-path pages (shop, product detail,
   cart, checkout, confirmation) need the escape and must NOT take the theme:
   T3 ruled .cine off them after a light commerce page wrapped in it painted
   roughly 1.1:1 ink on ink with every test green.

   So the escape is available on its own here. .cine is left EXACTLY as it was
   rather than refactored to compose this - the duplication is deliberate.
   Rewriting .cine to use this class would reorder its declarations and put
   every redesigned page's layout at risk to save four lines, and the redesign
   is mid-merge-train.

   This rule is ADDITIVE and has no users on main, so it cannot move a pixel on
   any existing page. That is checkable rather than asserted: regenerate all 87
   baselines with this rule present and none moves.

   The vertical margins are NOT included. .cine swallows main's py-4/sm:py-8
   because a .cine page is bands from the header to the footer. A money-path
   page keeps normal page padding around its boxed content and opts individual
   bands out horizontally, so a page that wants the vertical swallow too asks
   for it on the element that needs it. */
/* T5 sign of PR 677 (2026-09-22), measured in the browser: .film-hero sets
   width:100% in site-extra.css, which loads after this sheet and ties on
   specificity, so a film-hero carrying .jifu-bleed kept the 100vw margins but
   lost the 100vw width - 1232px wide at 1440 and 366 at 390, a 208px / 24px
   gap on the inline-end side. The compound selector wins on specificity
   without touching .film-hero itself. */
.jifu-bleed,
.film-hero.jifu-bleed {
  width: 100vw;
  max-width: 100vw;
  margin-inline: calc(50% - 50vw);
}

@media (min-width: 640px) {
  .cine {
    margin-top: -2rem;     /* main's sm:py-8 top */
    margin-bottom: -4rem;  /* main's sm:py-8 bottom + footer gap */
  }
}

/* NO overflow rule on html or body here - deliberately. An earlier revision of
   this file carried `html { overflow-x: clip }` to contain the 100vw full-bleed.
   The slot-1 gate caught what it actually did, and the measurements are on PR
   618:

   1. It broke the sticky header SITE-WIDE, not just on redesign pages, because
      jifu.css is linked from base.html on every page. base.html:94 sets
      `body.drawer-open { overflow: hidden }` to lock scroll while the mobile
      drawer is open. With html at `visible`, that body overflow PROPAGATES to
      the viewport and body itself is not a scroll container, so the sticky
      header keeps sticking. The moment html carries any non-visible overflow
      the propagation stops, body becomes the scroll container, and the header
      scrolls away - measured at 390px scrolled 400px with the drawer open:
      header bottom -288 with the rule, +75 without it.
   2. It did not even do its job: with 200vw of content forced onto the page,
      window.scrollX reached 390 identically with the rule, with it moved to
      body, and with it absent. It clipped nothing in this app.

   So it was pure cost. If a real horizontal-scroll problem ever appears on a
   classic-scrollbar platform, fix the bleed WIDTH math; do not put overflow on
   html or body, or you silently unstick the header on every page. Guarded by
   test_no_overflow_rule_on_html_or_body below and by the existing browser
   regression tests/browser/test_ticket_regressions.py::
   test_mobile_drawer_opens_flush_under_the_header. */

/* Per-vertical accent modifiers (T10): set --accent from the brand accent
   tokens so a page carries a class, not an inline colour. */
.cine--travel { --accent: var(--jifu-accent-travel); }
.cine--health { --accent: var(--jifu-accent-health); }
.cine--education { --accent: var(--jifu-accent-education); }
.cine--community { --accent: var(--jifu-accent-community); }

/* Accent utilities (T10): pages apply the accent by class, not by
   style="color:var(--accent)" / style="background:var(--accent)". Defined
   AFTER the .jifu-section--dark flip block (T6) so a kicker/rule carrying the
   helper wins - see .cine .cine-accent below. */

:where(.cine) img, :where(.cine) video { max-width: 100%; display: block; }
:where(.cine) h1, :where(.cine) h2, :where(.cine) h3, :where(.cine) h4, :where(.cine) h5, :where(.cine) h6 { margin: 0; font-weight: 700; }
:where(.cine) p { margin: 0; }
:where(.cine) a { color: inherit; text-decoration: none; }
:where(.cine) button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

/* --------------------------------------------------------------- layout */

/* The centred column every section sits in. The gutter is the same at every
   width, so sections line up down the page. */
.jifu-shell {
  width: 100%;
  max-width: var(--jifu-measure);
  margin-inline: auto;
  padding-inline: var(--jifu-gutter);
}

/* Vertical rhythm. Sections carry their own top and bottom padding. */
.jifu-section { padding-block: clamp(56px, 7vw, 101px); }
.jifu-section--tight { padding-block: clamp(40px, 4.5vw, 64px); }

/* A section on the dark ground. */
.jifu-section--dark {
  background: var(--jifu-midnight, rgb(25, 25, 25));
  color: var(--jifu-parchment, rgb(244, 241, 234));
}
.jifu-section--parchment { background: var(--jifu-parchment, rgb(244, 241, 234)); }
/* ASANA:1219413299038519: an explicit WHITE ground for a light commerce
   section (the cart) now that the commerce page ground is white. Explicit,
   never bare - see the ground note in cart.html. */
.jifu-section--white { background: var(--jifu-white, rgb(255, 255, 255)); }

.jifu-stack { display: flex; flex-direction: column; }
.jifu-row { display: flex; flex-direction: row; align-items: center; }
.jifu-grid { display: grid; gap: 24px; }
/* F-CSS (T9 measured at 390px): a bare minmax(Npx,1fr) track cannot shrink
   below Npx, so on a phone narrower than the track + gutters the columns
   overflow and copy is cut off (scrollWidth 405 vs 390 on --2). min(Npx,100%)
   lets the track collapse to the viewport on small screens while keeping the
   Npx floor everywhere it fits. */
.jifu-grid--4 { grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); }
.jifu-grid--3 { grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); }
.jifu-grid--2 { grid-template-columns: repeat(auto-fill, minmax(min(380px, 100%), 1fr)); }

/* ----------------------------------------------------------------- type */
/* One class per named style. Sizes step down at the two breakpoints. */

.jifu-display-mega {
  font-family: var(--jifu-font-display);
  font-weight: 700;
  font-size: 111.46px;
  line-height: 0.94em;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  color: var(--jifu-ink, rgb(25, 25, 25));
}
.jifu-display-hero {
  font-family: var(--jifu-font-display);
  font-weight: 700;
  font-size: 66.24px;
  line-height: 0.98em;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  color: var(--jifu-ink, rgb(25, 25, 25));
}
.jifu-display-section {
  font-family: var(--jifu-font-display);
  font-weight: 700;
  font-size: 55.73px;
  line-height: 1.04em;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  color: var(--jifu-ink, rgb(25, 25, 25));
}
.jifu-display-xl {
  font-family: var(--jifu-font-display);
  font-weight: 700;
  font-size: 41.76px;
  line-height: 1.1em;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  color: var(--jifu-ink, rgb(25, 25, 25));
}
.jifu-display-lg {
  font-family: var(--jifu-font-display);
  font-weight: 700;
  font-size: 25.2px;
  line-height: 1.15em;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  color: var(--jifu-ink, rgb(25, 25, 25));
}
.jifu-body-lede {
  font-family: var(--jifu-font-body);
  font-weight: 400;
  font-size: 17.5px;
  line-height: 1.5em;
  letter-spacing: -0.02em;
  color: var(--jifu-ink-muted, rgba(25, 25, 25, 0.66));
}
.jifu-body-base {
  font-family: var(--jifu-font-body);
  font-weight: 400;
  font-size: 15.3px;
  line-height: 1.6em;
  letter-spacing: -0.02em;
  color: var(--jifu-ink, rgb(25, 25, 25));
}
.jifu-body-small {
  font-family: var(--jifu-font-body);
  font-weight: 400;
  font-size: 13.5px;
  line-height: 1.6em;
  letter-spacing: -0.02em;
  color: var(--jifu-ink-muted, rgba(25, 25, 25, 0.66));
}
.jifu-kicker {
  font-family: var(--jifu-font-body);
  font-weight: 700;
  font-size: 10.8px;
  line-height: 1.2em;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--jifu-ink-faint, rgba(25, 25, 25, 0.62));
}
.jifu-quote {
  font-family: var(--jifu-font-body);
  font-weight: 400;
  font-size: 14.5px;
  line-height: 1.6em;
  letter-spacing: -0.01em;
  color: var(--jifu-ink-muted, rgba(25, 25, 25, 0.66));
}

@media (max-width: 1439.98px) {
  .jifu-display-mega { font-size: 62.69px; }
  .jifu-display-hero { font-size: 39.37px; }
  .jifu-display-section { font-size: 31.35px; }
  .jifu-display-xl { font-size: 24.79px; }
  .jifu-display-lg { font-size: 18.72px; }
  .jifu-body-lede { font-size: 15.3px; }
  .jifu-body-base { font-size: 15.3px; }
  .jifu-body-small { font-size: 13.5px; }
  .jifu-kicker { font-size: 10.8px; }
  .jifu-quote { font-size: 14px; }
}

@media (max-width: 809.98px) {
  .jifu-display-mega { font-size: 30px; }
  .jifu-display-hero { font-size: 24.5px; }
  .jifu-display-section { font-size: 21px; }
  .jifu-display-xl { font-size: 19.5px; }
  .jifu-display-lg { font-size: 16px; }
  .jifu-body-lede { font-size: 13.5px; }
  .jifu-body-base { font-size: 13.2px; }
  .jifu-body-small { font-size: 12px; }
  .jifu-kicker { font-size: 10.2px; }
  .jifu-quote { font-size: 12.8px; }
}

/* On a dark ground the type flips without touching the markup. Put
   .jifu-section--dark on the section and everything inside reads correctly. */
.jifu-section--dark h1, .jifu-section--dark h2,
.jifu-section--dark h3, .jifu-section--dark h4,
.jifu-section--dark .jifu-display-mega, .jifu-section--dark .jifu-display-hero,
.jifu-section--dark .jifu-display-section, .jifu-section--dark .jifu-display-xl,
.jifu-section--dark .jifu-display-lg { color: var(--jifu-parchment, rgb(244, 241, 234)); }

.jifu-section--dark .jifu-kicker { color: var(--jifu-gold-lift, rgb(169, 138, 110)); }

.jifu-section--dark .jifu-body-lede,
.jifu-section--dark .jifu-body-base,
.jifu-section--dark .jifu-body-small,
.jifu-section--dark .jifu-quote { color: rgba(244, 241, 234, .72); }

/* Accent helpers (T6): placed AFTER the dark-flip block and scoped with .cine
   (0,2,0) so a .jifu-kicker or .jifu-rule carrying .cine-accent renders the
   page accent, not the dark-section gold-lift / gold default. */
/* ---- Type on the .cine ground (T9's measurement, ASANA:1218722963690030) ----
   .cine's ground is midnight-well, but every base type class hard-sets an INK
   colour, and the flip above is scoped to .jifu-section--dark only. So a page
   that ports a plain <section class="jifu-section"> straight from a mockup -
   where the mockup's own ground is white - renders ink on near-black. T9
   measured 1.09:1 to 1.14:1 across twelve sections on /terms-conditions and I
   reproduced 1.14:1 on /distributors. Nothing caught it: the palette guard, the
   rendered raw-colour scan and all six PNG baselines were green on an
   unreadable page.

   The flip therefore follows .cine, at the same (0,2,0) as the --dark block, so
   a bare section is readable by default. Bands that deliberately want a LIGHT
   ground restore ink at (0,3,0) below, which is the half that makes this safe:
   flipping without it would turn a parchment band parchment-on-parchment. */
.cine .jifu-display-mega, .cine .jifu-display-hero,
.cine .jifu-display-section, .cine .jifu-display-xl,
.cine .jifu-display-lg { color: var(--jifu-parchment, rgb(244, 241, 234)); }

.cine .jifu-kicker { color: var(--jifu-gold-lift, rgb(169, 138, 110)); }

.cine .jifu-body-lede,
.cine .jifu-body-base,
.cine .jifu-body-small,
.cine .jifu-quote { color: var(--jifu-inverse-ink-muted, rgba(244, 241, 234, .66)); }

/* Light bands inside .cine keep INK, and take the DEEP gold.

   Measured contrast of the three golds the system already ships, against the
   two grounds .cine actually uses (normal-text AA floor is 4.5:1):

                         on parchment   on midnight-well
     --jifu-accent            4.22 X         4.21 X
     --jifu-gold-deep         5.72 OK        3.11 X
     --jifu-gold-lift         2.84 X         6.24 OK

   So the DEFAULT accent fails AA on BOTH of its own grounds at normal size,
   and each ground has exactly one gold that works. Dark takes gold-lift (set
   as the .cine default above), light takes gold-deep. Large type is unaffected
   either way - its floor is 3:1, which is why the 66px hero headline passed
   while a 10px kicker did not. */
.cine .jifu-section--parchment { --accent: var(--jifu-gold-deep, rgb(117, 89, 63)); }
.cine .jifu-section--parchment h1, .cine .jifu-section--parchment h2,
.cine .jifu-section--parchment h3, .cine .jifu-section--parchment h4,
.cine .jifu-section--parchment .jifu-display-mega,
.cine .jifu-section--parchment .jifu-display-hero,
.cine .jifu-section--parchment .jifu-display-section,
.cine .jifu-section--parchment .jifu-display-xl,
.cine .jifu-section--parchment .jifu-display-lg,
.cine .jifu-section--parchment .jifu-body-base { color: var(--jifu-ink, rgb(25, 25, 25)); }
.cine .jifu-section--parchment .jifu-kicker { color: var(--jifu-ink-faint, rgba(25, 25, 25, .62)); }
.cine .jifu-section--parchment .jifu-body-lede,
.cine .jifu-section--parchment .jifu-body-small,
.cine .jifu-section--parchment .jifu-quote { color: var(--jifu-ink-muted, rgba(25, 25, 25, .66)); }

/* The accent helpers are an EXPLICIT author instruction - "this text is the
   accent" - so they must outrank the ground-guessing defaults above, which are
   heuristics. Listed at (0,3,0) for the light band too, because a rule keyed on
   a class CANNOT know the real ground when a template sets one inline: measured
   on /distributors, whose cards carry style="background:var(--jifu-midnight-
   deep)" over .jifu-card's white default, a (0,3,0) card rule beat the (0,2,0)
   helper and painted ink-faint on near-black at 1.05:1 - worse than the 4.03:1
   it was meant to fix. Cards themselves are NOT handled here: that pair is
   T2's F-CSS2 item 1, and two fixes for one invariant is what T3 ruled against. */
.cine .cine-accent,
.cine .jifu-card .cine-accent,
.cine .jifu-section--parchment .cine-accent { color: var(--accent); }
.cine .cine-accent-bg,
.cine .jifu-card .cine-accent-bg,
.cine .jifu-section--parchment .cine-accent-bg { background: var(--accent); }

/* ----------------------------------------------------------- components */

/* Button. Four looks, one shape. */
.jifu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 32px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-family: var(--jifu-font-body);
  font-weight: 700;
  font-size: 10.8px;
  letter-spacing: 1.92px;
  text-transform: uppercase;
  transition: background-color .22s cubic-bezier(.16,1,.3,1),
              border-color .22s cubic-bezier(.16,1,.3,1),
              color .22s cubic-bezier(.16,1,.3,1);
}
.jifu-btn--primary {
  background: var(--jifu-btn-bg, rgb(25, 25, 25));
  color: var(--jifu-btn-fg, rgb(244, 241, 234));
}
.jifu-btn--ghost {
  border-color: rgba(25, 25, 25, .34);
  color: var(--jifu-ink, rgb(25, 25, 25));
}
.jifu-btn--primary-inverse {
  background: var(--jifu-parchment, rgb(244, 241, 234));
  color: var(--jifu-midnight-deep, rgb(15, 15, 15));
}
.jifu-btn--ghost-inverse {
  border-color: rgba(244, 241, 234, .38);
  color: var(--jifu-parchment, rgb(244, 241, 234));
}
@media (hover: hover) {
  .jifu-btn--primary:hover { background: var(--jifu-gold, rgb(139, 109, 85)); }
  .jifu-btn--ghost:hover { border-color: var(--jifu-gold, rgb(139, 109, 85)); color: var(--jifu-gold, rgb(139, 109, 85)); }
  .jifu-btn--primary-inverse:hover { background: var(--jifu-gold-lift, rgb(169, 138, 110)); color: var(--jifu-parchment, rgb(244, 241, 234)); }
  .jifu-btn--ghost-inverse:hover { border-color: var(--jifu-gold-lift, rgb(169, 138, 110)); color: var(--jifu-gold-lift, rgb(169, 138, 110)); }
}
.jifu-btn:focus-visible { outline: 2px solid var(--jifu-gold, rgb(139, 109, 85)); outline-offset: 3px; }

/* Filter chip. The label under the active pill is what gives the chip its
   width, so keep it in the markup and let the pill cover it. */
.jifu-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 11px 18px;
  border-radius: 999px;
  border: 1px solid rgba(25, 25, 25, .18);
  font-family: var(--jifu-font-body);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--jifu-ink, rgb(25, 25, 25));
  background: transparent;
}
.jifu-chip__active {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--jifu-btn-bg, rgb(25, 25, 25));
  color: var(--jifu-btn-fg, rgb(244, 241, 234));
  pointer-events: none;
}
.jifu-chip[aria-pressed="true"] .jifu-chip__active { display: flex; }

/* Product card. */
.jifu-card {
  display: flex;
  flex-direction: column;
  border-radius: 8px;
  border: 1px solid rgba(25, 25, 25, .12);
  background: var(--jifu-white, rgb(255, 255, 255));
  overflow: hidden;
}
.jifu-card__media {
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  background: var(--jifu-white, rgb(255, 255, 255));
}
.jifu-card__media img { width: 92%; height: 92%; object-fit: contain; }
.jifu-card__body { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px 20px; }
.jifu-card__kicker {
  font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--jifu-gold, rgb(139, 109, 85));
}
.jifu-card__price { margin-top: 10px; font-weight: 700; }

/* A LIGHT card on a DARK band (T2, 2026-09-21, ASANA:1218722646768048), and
   its inverted twin. The home page's shop grid is the mockup's white
   .jifu-card on a midnight section: the .jifu-section--dark flip block above
   paints .jifu-display-lg / .jifu-body-* parchment, so the product name and
   price rendered parchment-on-white - the same invisible-type defect as the
   primary-inverse button (T3's #618 bounce), one band lower. A card that
   brings its own ground brings its own ink, at (0,3,0) so it wins the flip.

   .jifu-card--inverse is the other half: the mockup's testimonial cards sit
   on the dark ground and each overrode .jifu-card's white background inline.
   Naming the variant keeps that out of twenty page templates AND keeps the
   rule above from re-inking the very cards that must stay parchment. */
.jifu-section--dark .jifu-card,
.jifu-section--dark .jifu-card .jifu-display-lg,
.jifu-section--dark .jifu-card .jifu-body-lede,
.jifu-section--dark .jifu-card .jifu-body-base,
.jifu-section--dark .jifu-card .jifu-body-small,
.jifu-section--dark .jifu-card .jifu-card__price { color: var(--jifu-ink, rgb(25, 25, 25)); }

.jifu-card--inverse {
  background: var(--jifu-midnight-well, rgb(8, 8, 8));
  border-color: var(--jifu-inverse-rule-soft, rgba(244, 241, 234, .08));
}
.jifu-section--dark .jifu-card--inverse,
.jifu-section--dark .jifu-card--inverse .jifu-display-lg,
.jifu-section--dark .jifu-card--inverse .jifu-body-lede,
.jifu-section--dark .jifu-card--inverse .jifu-body-base,
.jifu-section--dark .jifu-card--inverse .jifu-body-small { color: var(--jifu-parchment, rgb(244, 241, 234)); }
.jifu-section--dark .jifu-card--inverse .jifu-body-small { color: var(--jifu-inverse-ink-muted, rgba(244, 241, 234, .66)); }

/* Pillar card: a photograph on the dark ground with copy beneath. */
.jifu-pillar {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: 6px;
  overflow: hidden;
  background: var(--jifu-midnight, rgb(25, 25, 25));
  color: var(--jifu-parchment, rgb(244, 241, 234));
}
.jifu-pillar__media { position: relative; aspect-ratio: 290 / 363; }
.jifu-pillar__media img { width: 100%; height: 100%; object-fit: cover; }
.jifu-pillar__scrim {
  position: absolute; inset: auto 0 0 0; height: 72%;
  background: linear-gradient(0deg, rgba(8, 8, 8, .92) 0%, rgba(8, 8, 8, 0) 100%);
}
.jifu-pillar__body { display: flex; flex-direction: column; gap: 7.2px; padding: 19.2px 21.6px 22.4px; }

/* The small pill in the header. */
.jifu-pill {
  display: inline-flex; align-items: center; gap: 6px;
  height: 38px; padding: 0 17px; border-radius: 999px;
  border: 1px solid currentColor;
  font-family: var(--jifu-font-body); font-weight: 700;
  font-size: 10.37px; letter-spacing: 1.152px; text-transform: uppercase;
}

/* A rule with a short accent, used above section titles. */
.jifu-rule { width: 32px; height: 2px; background: var(--jifu-gold, rgb(139, 109, 85)); }

/* ================================================================ day pages
   Shared page components for the Framer redo (BRIEF 1218803133929418, order of
   work item 1): the light page wrapper, Page Hero, Poster (+ Pillar List grid)
   and the Footer CTA band. Measured against the approved renders
   (02_page renders/42 about-us at 1440/810/390) and the Framer design
   components (01_framer project/design components.json). Breakpoints are
   Framer's: desktop >=1440, tablet 810-1439.98, phone <=809.98 - the same
   steps the named type styles above use. */

/* Pillar accent for a day page (Framer's Page Hero "Pillar" and Poster
   "Accent" props). Set ONCE on the wrapper - <div class="jifu-page
   jifu-page--health"> - and the hero rule and the poster "Explore" links
   follow. No modifier = the neutral day page (gold-lift), as /about-us renders.
   Tokens only; never an inline --jifu-page-accent. */
.jifu-page--travel { --jifu-page-accent: var(--jifu-accent-travel); }
.jifu-page--health { --jifu-page-accent: var(--jifu-accent-health); }
.jifu-page--education { --jifu-page-accent: var(--jifu-accent-education); }
.jifu-page--community { --jifu-page-accent: var(--jifu-accent-community); }
/* The Footer CTA's own "Accent" / "Button Fill" props are set PER PAGE, not
   per pillar (T2 measured /distributors: papaya hero rule + Explore, but a
   parchment CTA button and gold eyebrow; /health paints its CTA green). So
   painting the CTA eyebrow + primary fill with the page accent is a separate
   opt-in: add jifu-page--cta-accent to the wrapper where the render shows it. */
.jifu-page--cta-accent { --jifu-page-cta-accent: var(--jifu-page-accent); --jifu-page-cta-fill: var(--jifu-page-accent); }

/* .jifu-page: the LIGHT counterpart of .cine for day pages. It carries only
   the layout half (full bleed out of base.html's boxed <main>, swallowing
   main's vertical padding and the footer gap, exactly as .cine does) plus
   the white ground and the body type stack. No accent, no dark ground: a day
   page opts a band into dark with .jifu-section--dark, never the wrapper. */
.jifu-page {
  width: 100vw;
  max-width: 100vw;
  margin-inline: calc(50% - 50vw);
  margin-top: -1rem;
  margin-bottom: -3rem;
  background: var(--jifu-ground, rgb(255, 255, 255));
  color: var(--jifu-ink, rgb(25, 25, 25));
  font-family: var(--jifu-font-body);
  -webkit-font-smoothing: antialiased;
}
@media (min-width: 640px) {
  .jifu-page { margin-top: -2rem; margin-bottom: -4rem; }
}
/* Zero-specificity resets inside the wrapper only (same reason as the
   :where(.cine) block above: a component class must always win). */
:where(.jifu-page) h1, :where(.jifu-page) h2, :where(.jifu-page) h3, :where(.jifu-page) h4 { margin: 0; }
:where(.jifu-page) p { margin: 0; }
:where(.jifu-page) a { color: inherit; text-decoration: none; }
:where(.jifu-page) img { max-width: 100%; display: block; }

/* ---- Page Hero: photo ground, display title, pillar rule + line, one pill.
   Framer: min-height 702/760/560, padding 112/112/96 top, 72/86/52 bottom,
   content bottom-aligned. Framer's 64px header floats OVER the hero; shop2's
   header is solid and sits above it (header stays as built), so 64px comes off
   the min-height and the top padding and the copy lands where the render has
   it. The hero is a dark band: it also carries .jifu-section--dark, which is
   what flips the display title to parchment. */
.jifu-page-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 638px;
  padding-block: 48px 72px;
  overflow: hidden;
  isolation: isolate;
  background: var(--jifu-midnight-well, rgb(8, 8, 8));
}
.jifu-page-hero__media { position: absolute; inset: 0; z-index: -2; }
.jifu-page-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.jifu-page-hero__scrim {
  position: absolute; inset: 0; z-index: -1;
  /* Four stops, fitted to the /about-us and /health renders at 1440 (quarter
     luminance, render vs capture; T6 measured the same on /education). */
  background: linear-gradient(180deg, rgba(8, 8, 8, .45) 0%, rgba(8, 8, 8, .22) 35%, rgba(8, 8, 8, .58) 70%, rgba(8, 8, 8, .78) 100%);
}
/* Deep scrim, OPT-IN per page (page_hero scrim="deep"): for a photograph that
   is bright where the title sits (sky, glass towers), where the shared scrim
   above - fitted to the renders - leaves the title under WCAG 3.0 in the pixels
   (test_photo_contrast). The shared scrim is unchanged; only pages that pass
   scrim="deep" get this. First measured on the travel family, 2026-09-24. */
.jifu-page-hero--scrim-deep .jifu-page-hero__scrim {
  background: linear-gradient(180deg, rgba(8, 8, 8, .5) 0%, rgba(8, 8, 8, .5) 35%, rgba(8, 8, 8, .66) 70%, rgba(8, 8, 8, .8) 100%);
}
/* Focus: which part of the photo stays in view when the PHONE box crops it
   (page_hero focus="left" | "right"; default centre). Phones only: T6
   measured on /education (mean abs pixel diff vs the render) that "left"
   helps 390 (55.4 -> 47.0) but hurts 810 (38.8 -> 43.7), where the wide box
   already frames the subject. */
@media (max-width: 809.98px) {
  .jifu-page-hero--focus-left .jifu-page-hero__media img { object-position: 30% 50%; }
  .jifu-page-hero--focus-right .jifu-page-hero__media img { object-position: 70% 50%; }
}
.jifu-page-hero__line { display: flex; align-items: center; gap: 13px; margin-top: 18px; }
/* 32 x 3 and a white SemiBold line: measured on the /about-us and /health
   renders at 1440 (rule rows 498-500, x 95-126; line pixels 255,255,255). */
.jifu-page-hero__rule { flex: none; width: 32px; height: 3px; background: var(--jifu-page-accent, var(--jifu-gold-lift, rgb(169, 138, 110))); }
.jifu-page-hero .jifu-page-hero__text { color: var(--jifu-white, rgb(255, 255, 255)); font-weight: 600; }
.jifu-page-hero__cta {
  align-self: flex-start;
  margin-top: 64px;
  min-height: 52px;
  padding: 0 26px;
  background: var(--jifu-white, rgb(255, 255, 255));
  color: var(--jifu-ink, rgb(25, 25, 25));
}
@media (hover: hover) {
  .jifu-page-hero__cta:hover { background: var(--jifu-gold-lift, rgb(169, 138, 110)); color: var(--jifu-parchment, rgb(244, 241, 234)); }
}
@media (max-width: 1439.98px) {
  .jifu-page-hero { min-height: 696px; padding-block: 48px 86px; }
  .jifu-page-hero__line { margin-top: 12px; }
  .jifu-page-hero__cta { margin-top: 77px; }
}
@media (max-width: 809.98px) {
  .jifu-page-hero { min-height: 496px; padding-block: 32px 52px; }
  .jifu-page-hero__line { margin-top: 10px; }
  .jifu-page-hero__cta { margin-top: 51px; min-height: 46px; }
}

/* ---- Page Hero, FILM ground (rd.page_hero_film; house film-hero rules,
   Clark 2026-09-23). The band IS the film's 16:9 box, capped at 836px tall
   (the product film hero's height) so a very wide screen crops a little top
   and bottom rather than running past the fold. The film (T4's Film port)
   fills the media layer; the copy sits bottom-left at the film controls'
   inset, so the CTA and the play / sound buttons share one baseline.
   --typographic: the film carries its own words, so only the CTA is drawn
   over it (the H1 is .sr-only) and there is no scrim to dim the film's type.
   Phones (<= 809.98): no tall crop - the film keeps its own 16:9 box and the
   copy drops BELOW it onto the dark band, clear of the film's controls. */
.jifu-page-hero.jifu-page-hero--film {
  display: block;
  width: 100%;   /* explicit, so max-height clamps the HEIGHT, not the width */
  min-height: 0;
  max-height: 836px;
  aspect-ratio: 16 / 9;
  padding: 0;
  --jifu-page-hero-film-inset: clamp(0.9rem, 2.4vw, 1.6rem);
}
.jifu-page-hero--film .jifu-page-hero__media .fr-film {
  position: absolute; inset: 0; height: 100%; aspect-ratio: auto !important;
  --fr-film-inset: var(--jifu-page-hero-film-inset);
  --fr-film-accent: var(--jifu-page-accent, var(--jifu-gold-lift, rgb(169, 138, 110)));
}
.jifu-page-hero--film .jifu-page-hero__film-copy {
  position: absolute; left: 0; bottom: 0; z-index: 1;
  display: flex; flex-direction: column; align-items: flex-start;
  max-width: min(760px, 100%);
  padding: var(--jifu-page-hero-film-inset);
}
.jifu-page-hero--film .jifu-page-hero__film-copy .jifu-page-hero__cta { margin-top: 32px; }
.jifu-page-hero--film-typographic .jifu-page-hero__film-copy .jifu-page-hero__cta { margin-top: 0; }
@media (max-width: 809.98px) {
  .jifu-page-hero.jifu-page-hero--film { aspect-ratio: auto; max-height: none; }
  .jifu-page-hero--film .jifu-page-hero__media { position: relative; inset: auto; z-index: 0; }
  .jifu-page-hero--film .jifu-page-hero__media .fr-film { position: relative; inset: auto; height: auto; aspect-ratio: 16 / 9 !important; }
  .jifu-page-hero--film .jifu-page-hero__scrim { display: none; }
  .jifu-page-hero--film .jifu-page-hero__film-copy { position: static; max-width: none; padding: 20px 16px 28px; }
}

/* ---- Pillar List: the white band of Poster cards. Framer: fill ground,
   padding 129.6 / 72.9 / 56 top and bottom, the page gutter at the sides
   (.jifu-shell), a 4-up grid at desktop (290px tracks at 1440, 31px gap) and
   2-up below. */
.jifu-pillar-list { background: var(--jifu-ground, rgb(255, 255, 255)); padding-block: 129.6px; }
.jifu-poster-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 31px; }
@media (max-width: 1439.98px) {
  .jifu-pillar-list { padding-block: 72.9px; }
  .jifu-poster-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
}
@media (max-width: 809.98px) {
  .jifu-pillar-list { padding-block: 56px; }
  .jifu-poster-grid { gap: 10px; }
}
/* ASANA:1218997112580954 (prod 390 crawl): an odd card count in the 2-up grid
   (/about-us and /distributors have 3, /distributors/events 5) left the last
   poster alone at the left of its row beside an empty cell. The orphan now
   takes the whole row and centres itself at one column's width, so every card
   keeps its size. Width = one track: (100% - gap) / 2 at each gap. */
@media (max-width: 1439.98px) {
  .jifu-poster-grid > :last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc((100% - 18px) / 2); }
}
@media (max-width: 809.98px) {
  .jifu-poster-grid > :last-child:nth-child(odd) { width: calc((100% - 10px) / 2); }
}
/* Pillar List "head" (optional, /incentive-trips): a gold 52/36/32 x 2 rule
   in a 22.8/18.2/15.6px frame over a Display/Section title (max 832px), then
   72/40.5/40px down to the cards. Measured from 13_element breakdown. The rule
   is Framer's gold, not the pillar accent. */
.jifu-pillar-list__head { display: flex; flex-direction: column; align-items: flex-start; padding-bottom: 72px; }
.jifu-pillar-list__head .jifu-display-section { max-width: 832px; }
.jifu-pillar-list__rule { height: 22.8px; }
.jifu-pillar-list__rule::before { content: ""; display: block; width: 52px; height: 2px; background: var(--jifu-gold, rgb(139, 109, 85)); }
@media (max-width: 1439.98px) {
  .jifu-pillar-list__head { padding-bottom: 40.5px; }
  .jifu-pillar-list__rule { height: 18.2px; }
  .jifu-pillar-list__rule::before { width: 36px; }
}
@media (max-width: 809.98px) {
  .jifu-pillar-list__head { padding-bottom: 40px; }
  .jifu-pillar-list__rule { height: 15.6px; }
  .jifu-pillar-list__rule::before { width: 32px; }
}

/* ---- Incentive Trips index (ASANA:1219473003564939): two groups inside
   the Pillar List, Upcoming above Previous, each a Poster grid. A trip card
   is the Poster plus a meta row under it (the date, the qualification
   window, How to qualify / FAQ). Ink on the white ground, no buy control. */
.jifu-trip-index { display: flex; flex-direction: column; gap: 72px; }
.jifu-trip-index__label { margin-bottom: 24px; }
.jifu-trip-index__empty { color: var(--jifu-ink-muted, rgba(25, 25, 25, .66)); }
.jifu-trip-card { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.jifu-trip-card__meta { display: flex; flex-direction: column; gap: 4px; font-family: var(--jifu-font-body); font-size: 13.5px; line-height: 1.5; color: var(--jifu-ink, rgb(25, 25, 25)); }
.jifu-trip-card__when { font-weight: 700; letter-spacing: .04em; }
.jifu-trip-card__window { color: var(--jifu-ink-muted, rgba(25, 25, 25, .66)); }
.jifu-trip-card__links { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.jifu-trip-card__link { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; color: var(--jifu-ink, rgb(25, 25, 25)); }
.jifu-trip-card__link:focus-visible { outline: 2px solid var(--jifu-gold, rgb(139, 109, 85)); outline-offset: 2px; }
@media (max-width: 1439.98px) {
  .jifu-trip-index { gap: 48px; }
}
@media (max-width: 809.98px) {
  .jifu-trip-index { gap: 40px; }
  .jifu-trip-index__label { margin-bottom: 16px; }
  .jifu-trip-card__meta { font-size: 12.5px; }
}

/* ---- Poster: a photo card with the copy laid OVER a bottom scrim (unlike
   .jifu-pillar, whose body sits below the photo). Fixed 290:363 at every
   width, so tiles in a row share one size and treatment. Framer's Compact
   variant (phone) drops the line of copy. */
.jifu-poster {
  position: relative;
  display: block;
  aspect-ratio: 290 / 363;
  border-radius: 6px;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgba(255, 255, 255, .07);
  /* No drop shadow: Framer's component carries one, but no approved render
     shows it (checked on /about-us, /health; T6 on /education). */
  background: var(--jifu-midnight, rgb(25, 25, 25));
  color: var(--jifu-parchment, rgb(244, 241, 234));
}
.jifu-poster__media { position: absolute; inset: 0; z-index: -2; }
.jifu-poster__media img { width: 100%; height: 100%; object-fit: cover; }
.jifu-poster__scrim {
  position: absolute; inset: auto 0 0 0; height: 72%; z-index: -1;
  /* Framer's own Pillar Card scrim (13_element breakdown/components/Pillar
     Card): .96 at the foot, .84 at 30%, .52 at 62%, clear at the top. The
     first cut (.92 -> 0 linear) was lighter at the foot than the source and
     left Explore labels short of AA on bright photos (T6, /education). */
  background: linear-gradient(0deg, rgba(8, 8, 8, .96) 0%, rgba(8, 8, 8, .84) 30%, rgba(8, 8, 8, .52) 62%, rgba(8, 8, 8, 0) 100%);
}
/* Deep poster scrim, OPT-IN (poster(..., scrim="deep")): a taller, darker
   foot for a photograph whose lower half is bright under the title and copy.
   The shared poster scrim is unchanged. */
.jifu-poster--scrim-deep .jifu-poster__scrim {
  height: 82%;
  background: linear-gradient(0deg, rgba(8, 8, 8, .94) 0%, rgba(8, 8, 8, .72) 50%, rgba(8, 8, 8, 0) 100%);
}
.jifu-poster__body {
  position: absolute; inset: auto 0 0 0;
  display: flex; flex-direction: column; gap: 7.2px;
  padding: 19.2px 21.6px 22.4px;
}
.jifu-poster__title {
  font-family: var(--jifu-font-display);
  font-weight: 700;
  font-size: 18.72px;
  line-height: 1.15;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  color: var(--jifu-parchment, rgb(244, 241, 234));
}
.jifu-poster__copy {
  font-family: var(--jifu-font-body);
  font-size: 13.5px;
  line-height: 1.6;
  letter-spacing: -0.02em;
  color: rgba(244, 241, 234, .72);
}
.jifu-poster__more {
  margin-top: 20px;
  font-family: var(--jifu-font-body);
  font-weight: 700;
  font-size: 10.8px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--jifu-page-accent, var(--jifu-gold-lift, rgb(169, 138, 110)));
}
/* The forward arrow on the hero pill and the poster "Explore" points the
   reading direction: mirrored under dir=rtl (Arabic pages), as shop2's own
   chrome does. */
.jifu-arrow { display: inline-block; }
[dir="rtl"] .jifu-arrow { transform: scaleX(-1); }
.jifu-poster:focus-visible { outline: 2px solid var(--jifu-gold, rgb(139, 109, 85)); outline-offset: 3px; }
/* LIGHT poster, OPT-IN (poster(..., light=True); ASANA:1219425657189006,
   /health): marketing removed the black product renders. Same 290:363 box,
   radius and hairline as the dark card so the grid does not move, but a
   white ground, the product cut-out CONTAINED in the upper part with air
   around it, no scrim, and ink type below it. The Explore label takes the
   page accent's DEEP shade where one exists (the health green is 2.07:1 on
   white; --jifu-accent-health-deep is 5.27:1); other pillars keep the ink. */
.jifu-poster--light {
  display: flex; flex-direction: column;
  background: var(--jifu-ground, rgb(255, 255, 255));
  color: var(--jifu-ink, rgb(25, 25, 25));
  border-color: var(--jifu-rule, rgba(25, 25, 25, .16));
}
.jifu-poster--light .jifu-poster__media {
  position: relative; inset: auto; z-index: auto;
  flex: 0 0 54%; min-height: 0;
  padding: 24px 24px 4px;
}
.jifu-poster--light .jifu-poster__media img { object-fit: contain; }
/* A fixed media share keeps every title on one line across the row, and the
   Explore label rides the foot of the card whatever the copy length. */
.jifu-poster--light .jifu-poster__body { position: relative; inset: auto; flex: 1 1 auto; min-height: 0; padding-top: 12px; }
.jifu-poster--light .jifu-poster__more { margin-top: auto; }
.jifu-poster--light .jifu-poster__title { color: var(--jifu-ink, rgb(25, 25, 25)); }
.jifu-poster--light .jifu-poster__copy { color: var(--jifu-ink-muted, rgba(25, 25, 25, .66)); }
.jifu-poster--light .jifu-poster__more { color: var(--jifu-ink, rgb(25, 25, 25)); }
.jifu-page--health .jifu-poster--light .jifu-poster__more { color: var(--jifu-accent-health-deep, rgb(83, 118, 37)); }
@media (max-width: 1439.98px) {
  .jifu-poster__title { font-size: 15.6px; }
}
@media (max-width: 809.98px) {
  .jifu-poster__title { font-size: 14px; }
  .jifu-poster__copy { display: none; }
  .jifu-poster__body { padding: 14px 14px 16px; }
  .jifu-poster__more { margin-top: 12px; font-size: 10.2px; }
  /* Phone drops the copy, so the cut-out takes the room it leaves. */
  .jifu-poster--light .jifu-poster__media { flex: 1 1 auto; padding: 14px 14px 0; }
  .jifu-poster--light .jifu-poster__body { flex: none; }
  .jifu-poster--light .jifu-poster__more { margin-top: 12px; }
  .jifu-poster--light .jifu-poster__body { padding-top: 8px; }
}

/* ---- Prose band: Framer's white "story" band holding ONE centred rich-text
   column ("prose": max 765.5px, 16px between blocks). Framer: padding
   129.6 / 72.9 / 56 top and bottom, the page gutter at the sides; headings
   Heuvel 700 uppercase 25.2 / 18.72 / 15.5px at 1.62em, body Montserrat
   15.3px/1.66em in ink-muted (13.5px on phones, except a Q&A block:
   .jifu-prose__q question lines, SemiBold in ink, and .jifu-prose__a answers). Measured on
   02_page renders/39 travel-by-jifu_how-it-works (column at x=337 of 1440). */
.jifu-prose-band { background: var(--jifu-ground, rgb(255, 255, 255)); padding-block: 129.6px; }
.jifu-prose { display: flex; flex-direction: column; gap: 16px; max-width: 765.5px; margin-inline: auto; }
.jifu-prose h2 {
  font-family: var(--jifu-font-display);
  font-weight: 700;
  font-size: 25.2px;
  line-height: 1.62em;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  color: var(--jifu-ink, rgb(25, 25, 25));
}
.jifu-prose p {
  font-family: var(--jifu-font-body);
  font-size: 15.3px;
  line-height: 1.66em;
  color: var(--jifu-ink-muted, rgba(25, 25, 25, .66));
}
.jifu-prose .jifu-prose__q { font-weight: 600; color: var(--jifu-ink, rgb(25, 25, 25)); }
@media (max-width: 1439.98px) {
  .jifu-prose-band { padding-block: 72.9px; }
  .jifu-prose { margin-inline: 0; }
  .jifu-prose h2 { font-size: 18.72px; }
}
@media (max-width: 809.98px) {
  .jifu-prose-band { padding-block: 56px; }
  .jifu-prose h2 { font-size: 15.5px; }
  /* Framer drops body copy to 13.5px on phones but keeps a Q&A block (the
     question line and its answer, .jifu-prose__a) at 15.3px. */
  .jifu-prose p { font-size: 13.5px; }
  .jifu-prose .jifu-prose__q, .jifu-prose .jifu-prose__a { font-size: 15.3px; }
}

/* ---- Film band: Framer's "recapfilm" - T4's Film port full bleed at 16:9
   on the inverse ground (1440x810 / 810x456 / 390x219), its own play and
   sound controls over it. .jifu-film-pair holds a story + film pair whose
   order flips: the DOM carries the desktop order (story, then film) and the
   film moves above the story below 1440, as the tablet and phone renders
   show it. */
.jifu-film-band { background: var(--jifu-inverse-ground, rgb(15, 15, 15)); }
.jifu-film-pair { display: flex; flex-direction: column; }
@media (max-width: 1439.98px) {
  .jifu-film-pair > .jifu-film-band { order: -1; }
}

/* ---- Footer CTA band: "Ready to make moves?" + its buttons, on the inverse
   ground, directly above shop2's footer. Clark 2026-09-23: from Global HQ
   down nothing is built; the KEEP MAKING MOVES ticker (T4's Ticker port) is
   the band's last child when present. Desktop is one row (copy left, buttons
   right); tablet and phone stack, phone buttons go full width. It is a dark
   band (.jifu-section--dark) so the kicker and title flip by themselves. */
.jifu-cta-band { background: var(--jifu-inverse-ground, rgb(15, 15, 15)); padding-block: 128px; }
.jifu-cta-band__row { display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.jifu-cta-band__copy { display: flex; flex-direction: column; gap: 12px; }
.jifu-cta-band__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.jifu-cta-band__ticker { margin-top: 150px; }
/* The pillar accent (above) on the band: eyebrow and primary fill. Both are
   (0,2,0) and later than the dark-section flip / button look, so they win;
   the hover restates the button's own hover so the fill never blocks it. */
.jifu-cta-band .jifu-kicker { color: var(--jifu-page-cta-accent, var(--jifu-gold-lift, rgb(169, 138, 110))); }
.jifu-cta-band .jifu-btn--primary-inverse { background: var(--jifu-page-cta-fill, var(--jifu-parchment, rgb(244, 241, 234))); }
/* Framer's Footer "Ticker" colour follows the same per-page opt-in (the
   /health/stm render paints KEEP MAKING MOVES green, #8BC53D = the health
   token). Without the opt-in the ticker keeps its own default. */
.jifu-page--cta-accent .fr-ticker { --fr-tick-accent: var(--jifu-page-cta-accent); }
@media (hover: hover) {
  .jifu-cta-band .jifu-btn--primary-inverse:hover { background: var(--jifu-gold-lift, rgb(169, 138, 110)); color: var(--jifu-parchment, rgb(244, 241, 234)); }
}
/* With the ticker the band ends ON the ticker (its own rule is the band's
   last line in the render); the bottom padding only applies without it.
   Measured on /about-us at 1440: 547px vs the render's 392 before this. */
.jifu-cta-band:has(.jifu-cta-band__ticker) { padding-bottom: 0; }
@media (max-width: 1439.98px) {
  .jifu-cta-band { padding-block: 108px; }
  .jifu-cta-band__row { flex-direction: column; align-items: flex-start; gap: 36px; }
  .jifu-cta-band__ticker { margin-top: 120px; }
}
@media (max-width: 809.98px) {
  .jifu-cta-band { padding-block: 85px; }
  .jifu-cta-band__row { align-items: stretch; }
  .jifu-cta-band__actions { flex-direction: column; }
  .jifu-cta-band__actions .jifu-btn { width: 100%; }
}

/* ---- Buy strip: Framer's white "Buy strip" band holding one "Commerce
   Strip" (Light variant; Light Phone below 810). Framer: band padding
   0 64 64 (0 20 40 on phones), card max 1312, 1px rule, radius 8, padding
   24/28 (20 on phones). Desktop is one row - identity left, then price,
   qty stepper, Add to cart, Buy now, View details; tablet puts the price
   beside the identity and the controls on their own row; phones stack.
   Measured against 02_page renders/38 travel-by-jifu at 1440/810/390. */
.jifu-buy-strip { background: var(--jifu-ground, rgb(255, 255, 255)); padding: 0 64px 64px; }
.jifu-buy-strip__card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  grid-template-areas: "id price controls";
  align-items: center;
  column-gap: 28px;
  row-gap: 24px;
  max-width: 1312px;
  margin-inline: auto;
  padding: 24px 28px;
  border: 1px solid var(--jifu-rule-soft, rgba(25, 25, 25, .1));
  border-radius: 8px;
  background: var(--jifu-ground, rgb(255, 255, 255));
  color: var(--jifu-ink, rgb(25, 25, 25));
}
/* The form is only a submission scope; its children sit in the card grid. */
.jifu-buy-strip__form { display: contents; }
.jifu-buy-strip__id { grid-area: id; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.jifu-buy-strip__sku {
  font-family: var(--jifu-font-body); font-weight: 700;
  font-size: 10.8px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--jifu-ink-muted, rgba(25, 25, 25, .66));
}
.jifu-buy-strip__name {
  font-family: var(--jifu-font-display); font-weight: 700;
  font-size: 20.8px; line-height: 1.15; letter-spacing: -0.015em;
  text-transform: uppercase;
}
.jifu-buy-strip__line { font-size: 13.5px; line-height: 1.6; color: var(--jifu-ink-muted, rgba(25, 25, 25, .66)); }
.jifu-buy-strip__price {
  font-family: var(--jifu-font-body); font-weight: 700;
  font-size: 26px; line-height: 1; letter-spacing: -0.01em;
  white-space: nowrap;
}
/* The price and, under it, the shared retail-savings line (member / preferred
   price below retail: "Retail: <struck> You save <diff>", as on the PDP). */
.jifu-buy-strip__pricing { grid-area: price; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.jifu-buy-strip__retail {
  font-family: var(--jifu-font-body); font-size: 12px; line-height: 1.4;
  white-space: nowrap; color: var(--jifu-ink-muted, rgba(25, 25, 25, .66));
}
.jifu-buy-strip__save { margin-left: 4px; font-weight: 600; color: var(--jifu-ink, rgb(25, 25, 25)); }
.jifu-buy-strip__controls { grid-area: controls; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.jifu-buy-strip__qty {
  display: inline-flex; align-items: center;
  height: 44px; padding: 0 6px;
  border: 1px solid var(--jifu-rule, rgba(25, 25, 25, .16));
  border-radius: 999px;
}
.jifu-buy-strip__step {
  width: 34px; height: 34px; border: 0; background: none; cursor: pointer;
  font-family: var(--jifu-font-body); font-weight: 700; font-size: 15px;
  color: var(--jifu-ink, rgb(25, 25, 25));
}
.jifu-buy-strip__qty input {
  width: 36px; border: 0; background: none; text-align: center;
  font-family: var(--jifu-font-body); font-weight: 600; font-size: 15px;
  color: var(--jifu-ink, rgb(25, 25, 25));
  -moz-appearance: textfield; appearance: textfield;
}
.jifu-buy-strip__qty input::-webkit-inner-spin-button,
.jifu-buy-strip__qty input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.jifu-buy-strip__btn { min-height: 44px; padding: 0 32px; cursor: pointer; }
.jifu-buy-strip__details {
  font-family: var(--jifu-font-body); font-weight: 700;
  font-size: 10.8px; letter-spacing: .16em; text-transform: uppercase;
  white-space: nowrap;
}
.jifu-buy-strip__step:focus-visible,
.jifu-buy-strip__details:focus-visible { outline: 2px solid var(--jifu-gold, rgb(139, 109, 85)); outline-offset: 3px; }
@media (max-width: 1439.98px) {
  .jifu-buy-strip__card {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "id price" "controls controls";
  }
  .jifu-buy-strip__pricing { align-self: start; margin-top: 18px; }
}
@media (max-width: 809.98px) {
  .jifu-buy-strip { padding: 0 20px 40px; }
  .jifu-buy-strip__card {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "id" "price" "controls";
    row-gap: 16px;
    padding: 20px;
  }
  .jifu-buy-strip__line { font-size: 12.6px; }
  .jifu-buy-strip__pricing { margin-top: 4px; align-items: flex-start; }
  .jifu-buy-strip__price { font-size: 26px; }
}

/* ---- Detail band: the white body band of a day page (Framer "detail" /
   "story" / "channels"): the Pillar List rhythm (129.6 / 72.9 / 56) with an
   intro - a Display/Section title and a muted Body/Base lede - above whatever
   the page lays out. Measured on /about-us/the-jifu-opportunity at 1440/810/390:
   the title's cap sits ~15px below the band padding, the lede is capped at
   640px and sits 91 / 51 / 59px under the title. */
.jifu-detail { background: var(--jifu-ground, rgb(255, 255, 255)); padding-block: 129.6px; }
.jifu-detail__title { margin-top: 15px; }
.jifu-detail__lede { max-width: 640px; margin-top: 91px; color: var(--jifu-ink-muted, rgba(25, 25, 25, .66)); }
@media (max-width: 1439.98px) {
  .jifu-detail { padding-block: 72.9px; }
  .jifu-detail__lede { margin-top: 51px; }
}
@media (max-width: 809.98px) {
  .jifu-detail { padding-block: 56px; }
  .jifu-detail__lede { margin-top: 59px; }
}

/* ---- Reviews: the member-quote grid of /travel-by-jifu/travel-testimonials
   (Framer "detail" band, "rev rev--grid" cards). Parchment cards with a soft
   rule, 28px padding; the quote at the top, the ruled "by" line (name, role)
   pinned to the foot, so the cards in a row share one height. The quote-to-
   byline gap (56 / 37 / 44px) is solved from Framer's band heights (1588 /
   2097 / 3236px) with the quotes set at Framer's own measured heights. Three up at
   1440 (404px tracks, 20px gaps), two at 810 (13px), one on phones (12px).
   Framer's band: 170 / 97 / 80px above the first row, the Pillar List
   rhythm (129.6 / 72.9 / 56) below the last. Measured on 02_page renders/40
   and 13_element breakdown/pages/49 at 1440/810/390. */
.jifu-reviews-band { background: var(--jifu-ground, rgb(255, 255, 255)); padding-block: 170px 129.6px; }
.jifu-reviews { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.jifu-review {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 56px;
  padding: 28px;
  border: 1px solid var(--jifu-rule-soft, rgba(25, 25, 25, .1));
  background: var(--jifu-ground-raised, rgb(244, 241, 234));
  color: var(--jifu-ink, rgb(25, 25, 25));
}
.jifu-review, .jifu-review__quote { margin: 0; }
.jifu-review__quote { font-family: var(--jifu-font-body); font-size: 13.5px; line-height: 1.55em; }
.jifu-review__by {
  display: flex; flex-direction: column; gap: 4px;
  padding-top: 14.4px;
  border-top: 1px solid var(--jifu-rule-soft, rgba(25, 25, 25, .1));
}
.jifu-review__name { font-family: var(--jifu-font-body); font-weight: 700; font-size: 13.5px; line-height: 1.62em; }
.jifu-review__role {
  font-family: var(--jifu-font-body); font-size: 10.8px; line-height: 1.62em;
  letter-spacing: .96px; text-transform: uppercase;
  color: var(--jifu-ink-faint, rgba(25, 25, 25, .62));
}
@media (max-width: 1439.98px) {
  .jifu-reviews-band { padding-block: 97px 72.9px; }
  .jifu-reviews { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }
  .jifu-review { gap: 37px; }
}
@media (max-width: 809.98px) {
  .jifu-reviews-band { padding-block: 80px 56px; }
  .jifu-reviews { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .jifu-review { gap: 44px; }
  .jifu-review__quote, .jifu-review__name { font-size: 12.6px; }
}

/* Statement variant (Framer "channels" on /follow-us): one short statement
   and a single lede line in a fixed-height band - 461.4 / 302px, content-sized
   on phones, whose bottom padding the render trims to 57 / 16px on tablet /
   phone. Its title steps 55.73 / 41.76 / 30px (measured caps 41 / 31 / 23,
   pitch 57 / 43 / 30), a larger middle step than Display/Section's. */
.jifu-detail--statement { min-height: 461.4px; }
.jifu-detail--statement .jifu-detail__lede { margin-top: 30px; }
.jifu-detail__lede a { text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 1439.98px) {
  .jifu-detail--statement { min-height: 302px; padding-bottom: 57px; }
  .jifu-detail--statement .jifu-detail__title { font-size: 41.76px; }
  .jifu-detail--statement .jifu-detail__lede { margin-top: 45px; }
}
@media (max-width: 809.98px) {
  .jifu-detail--statement { min-height: 0; padding-bottom: 16px; }
  .jifu-detail--statement .jifu-detail__title { font-size: 30px; }
  .jifu-detail--statement .jifu-detail__lede { margin-top: 56px; }
}

/* Document list (Framer "story" on /terms-conditions): a semibold muted
   intro, then one full-width row per document - the name left, a "PDF" tag
   right - under a rule, 56.5px rows (53.5 on phones) split by soft rules.
   Each row is ONE link (name + tag), so the whole row is the target. */
.jifu-detail__intro { max-width: 780px; font-weight: 600; color: var(--jifu-ink-muted, rgba(25, 25, 25, .66)); }
.jifu-doc-list { margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--jifu-rule, rgba(25, 25, 25, .16)); list-style: none; padding-left: 0; }
.jifu-doc { border-bottom: 1px solid var(--jifu-rule-soft, rgba(25, 25, 25, .1)); }
.jifu-doc a {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 56.5px;
  font-family: var(--jifu-font-body); font-weight: 600; font-size: 15.3px;
  color: var(--jifu-ink, rgb(25, 25, 25));
}
.jifu-doc__tag {
  font-weight: 500; font-size: 10.8px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--jifu-ink-faint, rgba(25, 25, 25, .62));
}
@media (hover: hover) {
  .jifu-doc a:hover { color: var(--jifu-gold-deep, rgb(117, 89, 63)); }
}
.jifu-doc a:focus-visible { outline: 2px solid var(--jifu-gold, rgb(139, 109, 85)); outline-offset: 3px; }
@media (max-width: 809.98px) {
  .jifu-doc a { min-height: 53.5px; font-size: 14px; }
  .jifu-doc-list { margin-top: 28px; }
}

/* FAQ column (Framer "story" on /vacation-voucher): a Display/LG subhead
   under the story title, then T4's Disclosure rows in a 655px column. The
   revealed text holds a 28px line at every width (measured). */
.jifu-faq { max-width: 655px; }
.jifu-faq__subhead { margin-top: 80px; margin-bottom: 24px; }
.jifu-faq-text { font-family: var(--jifu-font-body); font-size: 16.8px; line-height: 28px; color: var(--jifu-ink-muted, rgba(25, 25, 25, .66)); }
.jifu-faq-text p + p { margin-top: 16px; }
/* The section rows' titles step with Display/LG (25.2 / 18.72, measured caps
   19 / 14). T4's Disclosure macro writes ONE fixed inline font-size, so the
   responsive steps have to override it: !important, scoped to the FAQ's own
   section rows only (question rows keep their inline size). */
.jifu-faq > .fr-disc > .fr-disc__hit { font-size: 25.2px !important; line-height: 1.3 !important; }
@media (max-width: 1439.98px) {
  .jifu-faq__subhead { margin-top: 50px; }
  .jifu-faq > .fr-disc > .fr-disc__hit { font-size: 18.72px !important; }
  .jifu-faq-text { font-size: 15.3px; }
}
@media (max-width: 809.98px) {
  .jifu-faq__subhead { margin-top: 48px; }
  .jifu-faq-text { font-size: 15.3px; }
}

/* Press cards (/about/media - CMS "media-cards", no Framer render): a white
   3 / 2 / 1-column grid in a .jifu-detail band. Built from the family's own
   parts - the ink rule and gold-deep kicker of the office grid, a Heuvel
   title at the poster size, a muted Body/Small blurb, a gold-deep link. */
.jifu-press__heading { margin-top: 12px; }
.jifu-press-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 31px; margin-top: 56px; }
.jifu-press-card { display: flex; flex-direction: column; border-top: 2px solid var(--jifu-ink, rgb(25, 25, 25)); }
.jifu-press-card__media { aspect-ratio: 16 / 9; overflow: hidden; margin-top: 19px; }
.jifu-press-card__media img { width: 100%; height: 100%; object-fit: cover; }
.jifu-press-card__body { display: flex; flex-direction: column; gap: 10px; flex: 1; padding-top: 19px; }
.jifu-press-card__meta { font-family: var(--jifu-font-body); font-weight: 700; font-size: 10.8px; letter-spacing: .22em; text-transform: uppercase; color: var(--jifu-gold-deep, rgb(117, 89, 63)); }
.jifu-press-card__title { font-family: var(--jifu-font-display); font-weight: 700; font-size: 18.72px; line-height: 1.15; letter-spacing: -0.015em; text-transform: uppercase; color: var(--jifu-ink, rgb(25, 25, 25)); }
.jifu-press-card__blurb { font-family: var(--jifu-font-body); font-size: 13.5px; line-height: 1.6; color: var(--jifu-ink-muted, rgba(25, 25, 25, .66)); }
.jifu-press-card__link { margin-top: auto; padding-top: 6px; font-family: var(--jifu-font-body); font-weight: 700; font-size: 10.8px; letter-spacing: .22em; text-transform: uppercase; color: var(--jifu-gold-deep, rgb(117, 89, 63)); }
@media (max-width: 1439.98px) {
  .jifu-press-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 40px; }
  .jifu-press-card__title { font-size: 15.6px; }
}
@media (max-width: 809.98px) {
  .jifu-press-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .jifu-press-card__title { font-size: 14px; }
}

/* ---- Path card: a photo over a midnight panel - number kicker, Display/LG
   title, copy, one button (Framer "detail" cards on the opportunity page).
   Two up at desktop/tablet (24 / 16px gap), stacked on phones. The panel is a
   dark band by class (.jifu-section--dark), which flips its type. The number
   kicker takes gold-lift, not the render's plain gold: plain gold is 4.2:1 on
   midnight, under AA for 10.8px text; gold-lift is the AA-safe gold. */
.jifu-path-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 50px; }
.jifu-path-card { display: flex; flex-direction: column; }
.jifu-path-card__media { aspect-ratio: 614 / 331; overflow: hidden; }
.jifu-path-card__media img { width: 100%; height: 100%; object-fit: cover; }
.jifu-path-card__body { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 38px 35px 48px; }
.jifu-path-card .jifu-path-card__copy { color: rgba(244, 241, 234, .8); }
.jifu-path-card__cta { margin-top: 6px; }
@media (max-width: 1439.98px) {
  .jifu-path-grid { gap: 16px; margin-top: 34px; }
  .jifu-path-card__media { aspect-ratio: 344 / 192; }
  .jifu-path-card__body { padding: 24px 22px 55px; }
}
@media (max-width: 809.98px) {
  .jifu-path-grid { grid-template-columns: minmax(0, 1fr); gap: 17px; margin-top: 64px; }
  .jifu-path-card__media { aspect-ratio: 339 / 202; }
  .jifu-path-card__body { padding: 24px 22px 80px; }
}

/* ---- Story band parts (Framer "story", measured on /about-us/where-we-work
   at 1440/810/390). Sits in a .jifu-detail band.
   Intro: a 52 x 2 gold rule at the band padding, the Display/Section title
   12px under it, a Body/Base ink paragraph right under the title (max 830). */
.jifu-story__rule { width: 52px; height: 2px; background: var(--jifu-gold, rgb(139, 109, 85)); }
.jifu-story__title { margin-top: 12px; }
.jifu-story__text { margin-top: 6px; max-width: 830px; }

/* Split: media beside text at desktop (the text column vertically centred),
   stacked below 1440. Its media box holds a component that fills it - for
   the WorldMapPulse map the box is the art's own 2.72:1, and the city stems
   overflow upward into the space above. */
.jifu-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 58px; align-items: center; margin-top: 182px; }
.jifu-split__media { aspect-ratio: 2.72 / 1; }
.jifu-split__title { margin-top: 12px; }
.jifu-split__lede { margin-top: 28px; max-width: 470px; color: var(--jifu-ink-muted, rgba(25, 25, 25, .66)); }
@media (max-width: 1439.98px) {
  .jifu-split { grid-template-columns: minmax(0, 1fr); gap: 160px; margin-top: 169px; }
}
@media (max-width: 809.98px) {
  .jifu-split { gap: 130px; margin-top: 151px; }
}

/* Office grid: 3 / 2 / 1 columns (390px tracks + 40px gutter at 1440). Each
   entry hangs under a 2px ink rule and keeps a min height, so rows keep one
   pitch (209 / 194 / 184) whatever the address length. Links are gold-deep,
   the AA gold on white. */
.jifu-office-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; margin-top: 182px; }
.jifu-office { border-top: 2px solid var(--jifu-ink, rgb(25, 25, 25)); padding-top: 19px; min-height: 169px; }
.jifu-office__title {
  font-family: var(--jifu-font-display);
  font-weight: 700;
  font-size: 14px;
  line-height: 1.15;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  color: var(--jifu-ink, rgb(25, 25, 25));
}
.jifu-office__lines {
  margin-top: 18px;
  font-family: var(--jifu-font-body);
  font-size: 13.5px;
  line-height: 1.56;
  color: var(--jifu-ink-muted, rgba(25, 25, 25, .66));
}
.jifu-office__lines + .jifu-office__lines { margin-top: 8px; }
.jifu-office a { color: var(--jifu-gold-deep, rgb(117, 89, 63)); text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 1439.98px) {
  .jifu-office-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 39px; }
  .jifu-office { min-height: 154px; }
}
@media (max-width: 809.98px) {
  .jifu-office-grid { grid-template-columns: minmax(0, 1fr); margin-top: 40px; }
  .jifu-office { min-height: 144px; }
}

/* ---- Film band (Framer "recapfilm"): a full-bleed film on the inverse
   ground, the page's T4 Film port filling the width. .jifu-page--film-first
   (opt-in on the wrapper) moves the film band up under the hero below 1440,
   as the renders order it there, without rendering the film twice. */
.jifu-film-band { background: var(--jifu-inverse-ground, rgb(15, 15, 15)); }
.jifu-film-band .fr-film { width: 100%; }
@media (max-width: 1439.98px) {
  .jifu-page--film-first { display: flex; flex-direction: column; }
  .jifu-page--film-first > .jifu-page-hero { order: -2; }
  .jifu-page--film-first > .jifu-film-band { order: -1; }
}

@media (prefers-reduced-motion: reduce) {
  :where(.cine) * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---- Trip detail bands (redesign/_trip.html): what the trip / event detail
   pages (/incentive-trips/punta-cana-2026, /distributors/bali-2026,
   berlin-2024, ...) add to the shared bands. The recapfilm is .jifu-film-band;
   the facts story sits on .jifu-prose-band / .jifu-prose and the gallery on
   .jifu-detail, so only the deltas live here. Measured from 13_element
   breakdown for punta-cana-2026, bali-2026 and berlin-2024 at 1440/810/390. */
/* The story title is Display/Section size at the prose line height (55.73 /
   31.35 / 20.99 @1.62), not the prose band's 25.2px h2; the optional lead
   above it scales with it on tablet and phone. The column ends in Framer's
   empty trailing List frame (100px after a 16px gap), kept as padding so the
   band height matches the render. */
.jifu-trip-story__prose { padding-bottom: 116px; }
.jifu-prose .jifu-trip-story__lead { text-transform: uppercase; }
.jifu-prose .jifu-trip-story__title { font-size: 55.73px; }
/* Closing headings after the body (trip.story closing=[...]): the title's size,
   set tight under the last paragraph as the costa-rica-2026 render has them. */
.jifu-prose .jifu-trip-story__closing { margin-top: 0; line-height: 1.04; }
/* facts: three equal columns, 40px apart, each under a half-gold hairline;
   an item is 111 / 96 / 74px tall in Framer whatever its text (Bali's
   two-line "Distributors and guests" sits in the same 111px). */
.jifu-trip-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; padding-block: 6.4px 12.8px; margin: 0; }
.jifu-trip-facts__item { display: flex; flex-direction: column; gap: 7px; min-height: 111px; padding-top: 18px; border-top: 1px solid color-mix(in srgb, var(--jifu-gold, rgb(139, 109, 85)) 50%, transparent); }
.jifu-trip-facts .jifu-kicker { color: var(--jifu-gold, rgb(139, 109, 85)); }
/* Chips variant (the /distributors/rise-lisbon render): each fact a parchment
   chip, 2px gold left rule, a gold line icon beside a label/value stack.
   Measured at 1440: 110px tall, 237px wide, 24px apart, a 24px gold-deep
   icon, the label and value in ink-muted, text ~55px in. The icon is a masked ::before (a dl item may hold only
   dt/dd), a pin for the destination, people for the audience. */
.jifu-trip-facts--chips { display: flex; flex-wrap: wrap; gap: 24px; }
.jifu-trip-facts--chips .jifu-trip-facts__item {
  position: relative; justify-content: center; min-height: 110px; flex: 0 0 237px; max-width: 100%;
  padding: 18px 24px 18px 55px; border-top: 0;
  border-left: 2px solid var(--jifu-gold, rgb(139, 109, 85));
  background: var(--jifu-parchment, rgb(244, 241, 234));
}
.jifu-trip-facts--chips .jifu-trip-facts__item::before {
  content: ""; position: absolute; left: 18px; top: 50%; width: 24px; height: 24px; margin-top: -12px;
  background: var(--jifu-gold-deep, rgb(117, 89, 63));
  -webkit-mask: var(--jifu-fact-icon) center / contain no-repeat; mask: var(--jifu-fact-icon) center / contain no-repeat;
}
.jifu-trip-facts--chips .jifu-kicker,
.jifu-trip-facts--chips .jifu-trip-facts__value { color: var(--jifu-ink-muted, rgba(25, 25, 25, .66)); }
/* Phones (the render at 390): full-width chips ~72px tall, the value in
   Montserrat Regular sentence case rather than the display face. */
@media (max-width: 809.98px) {
  .jifu-trip-facts--chips { flex-direction: column; gap: 17px; }
  .jifu-trip-facts--chips .jifu-trip-facts__item { flex-basis: auto; min-height: 72px; padding-block: 12px; }
  .jifu-trip-facts--chips .jifu-trip-facts__value {
    font-family: var(--jifu-font-body); font-weight: 400; font-size: 14.5px;
    text-transform: none; letter-spacing: 0;
  }
}
.jifu-trip-facts__item--place { --jifu-fact-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 4l6 0M10 4v5l-3 4h10l-3-4V4M12 13v7'/%3E%3C/svg%3E"); }
.jifu-trip-facts__item--people { --jifu-fact-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.2'/%3E%3Cpath d='M3.5 19c.6-3 2.8-4.6 5.5-4.6s4.9 1.6 5.5 4.6M16 5.2a3 3 0 010 5.6M17.5 14.6c1.8.5 2.9 2 3.3 4.4'/%3E%3C/svg%3E"); }
.jifu-trip-facts__value {
  margin: 0;
  font-family: var(--jifu-font-display);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.05em;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--jifu-ink, rgb(25, 25, 25));
}
/* gallery head: a gold 52/36/32 x 2 rule in a 22/17/15px frame over
   Display/Section, 54/23/22px down to the Gallery Rail (the where-we-work
   .jifu-story__rule is a fixed 52px with other spacing). */
.jifu-trip-gallery__head { display: flex; flex-direction: column; gap: 1px; max-width: 832px; padding-bottom: 54px; }
.jifu-trip-gallery__rule { height: 22px; }
.jifu-trip-gallery__rule::before { content: ""; display: block; width: 52px; height: 2px; background: var(--jifu-gold, rgb(139, 109, 85)); }
@media (max-width: 1439.98px) {
  .jifu-prose .jifu-trip-story__lead, .jifu-prose .jifu-trip-story__title { font-size: 31.35px; }
  .jifu-trip-facts__item { min-height: 96px; }
  .jifu-trip-gallery__head { padding-bottom: 23px; }
  .jifu-trip-gallery__rule { height: 17px; }
  .jifu-trip-gallery__rule::before { width: 36px; }
}
@media (max-width: 809.98px) {
  .jifu-prose .jifu-trip-story__lead, .jifu-prose .jifu-trip-story__title { font-size: 20.99px; }
  .jifu-trip-facts { grid-template-columns: minmax(0, 1fr); }
  .jifu-trip-facts__value { font-size: 19.36px; }
  .jifu-trip-facts__item { min-height: 74px; }
  /* Phone dead space (T5 mobile review 2026-09-25, Clark): Framer's empty
     trailing List frame (116px) and the desktop fact rhythm left ~200px of
     blank between the last fact and "View more photos" on every trip page.
     On a phone the band's own 56px padding is the gap; facts size to their
     content (the chips variant keeps its own rules below). */
  .jifu-trip-story__prose { padding-bottom: 0; }
  .jifu-trip-facts:not(.jifu-trip-facts--chips) { row-gap: 20px; }
  .jifu-trip-facts:not(.jifu-trip-facts--chips) .jifu-trip-facts__item { min-height: 0; }
  .jifu-trip-gallery__head { padding-bottom: 22px; }
  .jifu-trip-gallery__rule { height: 15px; }
  .jifu-trip-gallery__rule::before { width: 32px; }
}
/* Trip documents (trip.story / trip.countdown docs=[...]): the shared
   .jifu-doc-list rows, set a little further off the prose above them. */
.jifu-trip-story__prose .jifu-doc-list { margin-top: 20px; }
/* Hero badge (page_hero badge=...): a transparent event lockup above the
   title, the Directors Retreat "logo over the building" brief. */
.jifu-page-hero__badge { display: block; width: min(360px, 70%); height: auto; margin-bottom: 28px; }
@media (max-width: 809.98px) {
  .jifu-page-hero__badge { width: min(220px, 60%); margin-bottom: 18px; }
}

/* ---- Qualification countdown (trip.countdown, /incentive-trips/
   directors-retreat-2027): four cells under the facts' half-gold hairline,
   the number at the facts' Display weight, a gold kicker under it. The cells
   read "--" until static/js/trip-countdown.js ticks them; past the deadline
   the script hides every [data-countdown-open] node and shows the closed
   heading, so [hidden] must beat the grid display below. */
.jifu-trip-countdown [hidden] { display: none; }
/* It continues the story above it: no second band top, so the gap is the
   story's own trailing frame (116px; none on phones), not two paddings. */
.jifu-prose-band + .jifu-trip-countdown { padding-top: 0; }
.jifu-trip-countdown__cells { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.jifu-trip-countdown__cell { display: flex; flex-direction: column; gap: 7px; padding-top: 18px; border-top: 1px solid color-mix(in srgb, var(--jifu-gold, rgb(139, 109, 85)) 50%, transparent); }
.jifu-trip-countdown__cell .jifu-kicker { color: var(--jifu-gold, rgb(139, 109, 85)); }
.jifu-trip-countdown__num {
  font-family: var(--jifu-font-display);
  font-weight: 700;
  font-size: 55.73px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--jifu-ink, rgb(25, 25, 25));
}
.jifu-prose .jifu-trip-countdown__tail { color: var(--jifu-ink, rgb(25, 25, 25)); font-weight: 700; }
.jifu-prose .jifu-trip-countdown__date { font-weight: 600; }
@media (max-width: 1439.98px) {
  .jifu-trip-countdown__num { font-size: 42px; }
}
@media (max-width: 809.98px) {
  .jifu-trip-countdown__cells { gap: 12px; }
  .jifu-trip-countdown__cell { padding-top: 12px; }
  .jifu-trip-countdown__num { font-size: 28px; }
}

/* ---- Statement and callout (Framer "story" on /distributors/compliance,
   measured at 1440/810/390 from 13_element breakdown). Sits in a .jifu-detail
   band under a .jifu-pillar-list__head, above the shared .jifu-doc-list.
   Statement: Kicker, then Body/Lede (max 653px), 14.4px apart.
   Callout ("cbox"): ground-raised with a gold-deep rule along its top,
   35.2 / 22.4px padding, 40 / 24.3 / 24px above it; Display/LG title,
   Body/Base muted text, one button 8px lower. The document list follows the
   callout directly (its own 24px rule padding, no extra margin). */
.jifu-compliance__prose { display: flex; flex-direction: column; gap: 14.4px; }
.jifu-compliance__prose .jifu-body-lede { max-width: 653px; }
.jifu-callout {
  display: flex; flex-direction: column; align-items: flex-start; gap: 9.6px;
  margin-top: 40px; padding: 35.2px;
  background: var(--jifu-ground-raised, rgb(244, 241, 234));
  border-top: 1px solid var(--jifu-gold-deep, rgb(117, 89, 63));
}
.jifu-callout__text { color: var(--jifu-ink-muted, rgba(25, 25, 25, .66)); }
.jifu-callout__cta { margin-top: 8px; }
.jifu-callout__phones { color: var(--jifu-ink-muted, rgba(25, 25, 25, .66)); }
.jifu-callout + .jifu-doc-list { margin-top: 0; }
@media (max-width: 1439.98px) {
  .jifu-callout { margin-top: 24.3px; padding: 22.4px; }
}
@media (max-width: 809.98px) {
  .jifu-callout { margin-top: 24px; }
  .jifu-callout + .jifu-doc-list { margin-top: 0; }
}

/* ======================================================= night product pages
   The product pages under /health/* (BRIEF 1218803133929418: "Night pages").
   The page wrapper is .cine (the night ground) plus a pillar modifier
   (.jifu-page--health) that feeds --jifu-page-accent. Measured against the
   /health/stm renders (02_page renders/34 at 1440/810/390) and 13_element
   breakdown/pages/36 health_stm (positions per breakpoint). Framer's 64px
   header floats over the film; shop2's header is solid above it, so 64px comes
   off the desktop hero and off the dark tail under the tablet/phone film. */

.jifu-prod { --jifu-prod-accent: var(--jifu-page-accent, var(--jifu-accent-health, rgb(139, 197, 61))); }

/* ---- Film hero: the film and its own controls, nothing laid over the film
   but Framer's small caption at the foot of the band. */
.jifu-prod-hero { position: relative; height: 836px; overflow: hidden; background: var(--jifu-midnight-well, rgb(8, 8, 8)); }
.jifu-prod-hero .fr-film {
  position: absolute; inset: 0; height: 100%;
  --fr-film-control-size: 44px;
  --fr-film-inset: 52px;
  --fr-film-accent: var(--jifu-prod-accent);
}
.jifu-prod-hero__scrim {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(11, 11, 11, .72) 0%, rgba(11, 11, 11, .1) 32%, rgba(11, 11, 11, .3) 52%, rgba(11, 11, 11, .82) 80%, rgb(11, 11, 11) 96%);
}
.jifu-prod-hero__caption {
  position: absolute; left: 0; right: 0; bottom: 86px; text-align: center;
  font-family: var(--jifu-font-body); font-size: 10.37px; line-height: 1.6;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--jifu-inverse-ink-muted, rgba(244, 241, 234, .66));
}

/* ---- Intro: the lede, then packshot left / copy right. */
.jifu-prod-intro { padding-block: 145px 57.6px; }
.jifu-prod-intro__inner { max-width: 1440px; margin-inline: auto; padding-inline: 116.8px; }
.jifu-prod-lede, .jifu-prod-title, .jifu-prod-closing__accent {
  font-family: var(--jifu-font-display); font-weight: 700; font-size: 60.48px;
  line-height: .98; letter-spacing: -0.015em; text-transform: uppercase;
  color: var(--jifu-parchment, rgb(244, 241, 234));
}
.jifu-prod-lede { max-width: 925.3px; }
.jifu-prod-intro__grid { display: grid; grid-template-columns: 521.2px minmax(0, 613.2px); column-gap: 72px; margin-top: 59.5px; }
.jifu-prod-intro__media img { width: 100%; aspect-ratio: 521.2 / 651.2; object-fit: cover; }
.jifu-prod-intro__copy { display: flex; flex-direction: column; align-items: flex-start; padding-top: 38.7px; }
.jifu-prod-pill {
  display: inline-flex; align-items: center; gap: 8px; padding: 5.44px 13.6px;
  border: 1px solid var(--jifu-prod-accent); border-radius: 999px;
  font-family: var(--jifu-font-body); font-weight: 600; font-size: 9.79px; line-height: 1.6;
  letter-spacing: .2em; text-transform: uppercase; color: var(--jifu-prod-accent);
}
.jifu-prod-pill__dot { width: 6px; height: 6px; border-radius: 999px; background: var(--jifu-prod-accent); }
.jifu-prod-title { max-width: 588.8px; margin-top: 20.8px; line-height: .92; }
.jifu-prod-title__accent, .jifu-prod-closing__accent { color: var(--jifu-prod-accent); }
.jifu-prod-dim {
  font-family: var(--jifu-font-body); font-size: 16.13px; line-height: 1.6;
  color: var(--jifu-inverse-ink-muted, rgba(244, 241, 234, .66));
}
.jifu-prod-intro__copy .jifu-prod-dim { max-width: 613.2px; margin-top: 53px; }
.jifu-prod-textlink {
  margin-top: 35.3px; padding-bottom: 2px;
  font-family: var(--jifu-font-body); font-weight: 600; font-size: 11.52px; line-height: 1.6;
  letter-spacing: .2em; text-transform: uppercase; color: var(--jifu-prod-accent);
}
.jifu-prod-btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 54.8px;
  padding: 15.2px 41.6px; border-radius: 999px; border: 1.5px solid var(--jifu-prod-accent);
  background: var(--jifu-midnight, rgb(25, 25, 25)); color: var(--jifu-prod-accent);
  font-family: var(--jifu-font-body); font-weight: 700; font-size: 11.52px; line-height: 1.6;
  letter-spacing: .2em; text-transform: uppercase;
  transition: background-color .22s cubic-bezier(.16,1,.3,1), color .22s cubic-bezier(.16,1,.3,1);
}
.jifu-prod-intro__copy .jifu-prod-btn { margin-top: 32px; }
@media (hover: hover) {
  .jifu-prod-btn:hover { background: var(--jifu-prod-accent); color: var(--jifu-midnight-deep, rgb(15, 15, 15)); }
  .jifu-prod-textlink:hover { text-decoration: underline; }
}

/* ---- Buy strip, Dark variant (rd.buy_strip(..., dark=True)): Framer's
   Commerce Strip "Dark" / "Dark Phone" on the night ground - band on the page
   ground, card on inverse/ground-raised, parchment name and price, muted SKU
   and line. Layout is the shared Light strip's, untouched. */
.jifu-buy-strip--dark { background: transparent; }
.jifu-buy-strip--dark .jifu-buy-strip__card {
  background: var(--jifu-inverse-ground-raised, rgb(25, 25, 25));
  border-color: var(--jifu-inverse-rule, rgba(244, 241, 234, .14));
  color: var(--jifu-inverse-ink, rgb(244, 241, 234));
}
.jifu-buy-strip--dark .jifu-buy-strip__name { color: var(--jifu-inverse-ink, rgb(244, 241, 234)); }
.jifu-buy-strip--dark .jifu-buy-strip__sku,
.jifu-buy-strip--dark .jifu-buy-strip__line,
.jifu-buy-strip--dark .jifu-buy-strip__retail { color: var(--jifu-inverse-ink-muted, rgba(244, 241, 234, .66)); }
.jifu-buy-strip--dark .jifu-buy-strip__save { color: var(--jifu-inverse-ink, rgb(244, 241, 234)); }
.jifu-buy-strip--dark .jifu-buy-strip__qty { border-color: var(--jifu-inverse-rule, rgba(244, 241, 234, .14)); }
.jifu-buy-strip--dark .jifu-buy-strip__step,
.jifu-buy-strip--dark .jifu-buy-strip__qty input { color: var(--jifu-inverse-ink, rgb(244, 241, 234)); }

/* ---- Rail band: tabs over a half-opacity cell ground, then benefit cards. */
.jifu-prod-rail { position: relative; isolation: isolate; background: var(--jifu-midnight, rgb(25, 25, 25)); padding-block: 145px; }
.jifu-prod-rail__ground { position: absolute; top: 1px; left: 0; width: 100%; height: 611.3px; object-fit: cover; opacity: .5; z-index: -1; }
.jifu-prod-rail__inner { max-width: 1440px; margin-inline: auto; padding-inline: 112.8px; }
.jifu-prod-tabs { display: flex; flex-wrap: wrap; gap: 6.4px; border-bottom: 1px solid var(--jifu-inverse-rule, rgba(244, 241, 234, .14)); }
.jifu-prod-tab {
  padding: 12.8px 17.6px; margin-bottom: -1px; border-bottom: 2px solid transparent;
  font-family: var(--jifu-font-body); font-weight: 600; font-size: 10.94px; line-height: 1.6;
  letter-spacing: .2em; text-transform: uppercase; color: var(--jifu-inverse-ink-muted, rgba(244, 241, 234, .66));
}
.jifu-prod-tab[aria-current="true"] { color: var(--jifu-prod-accent); border-bottom-color: var(--jifu-prod-accent); }
@media (hover: hover) { a.jifu-prod-tab:hover { color: var(--jifu-inverse-ink, rgb(244, 241, 234)); } }
.jifu-prod-cards { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 22.4px; margin-top: 56px; list-style: none; padding: 0; }
.jifu-prod-card {
  display: flex; flex-direction: column; min-height: 222.4px; padding: 33px 33px 28px;
  border-radius: 14px; border: 1px solid var(--jifu-inverse-rule, rgba(244, 241, 234, .14));
  background: linear-gradient(0deg, rgba(244, 241, 234, .05) 0%, rgba(244, 241, 234, .016) 100%);
}
.jifu-prod-card__icon { width: 42px; height: 42px; }
.jifu-prod-card__title {
  margin-top: 14.4px; font-family: var(--jifu-font-display); font-weight: 700; font-size: 13.68px;
  line-height: 1.3; color: var(--jifu-parchment, rgb(244, 241, 234));
}
.jifu-prod-card__stars { display: flex; gap: 4px; margin-top: auto; padding-top: 16px; }
.jifu-prod-card__stars img { width: 12px; height: 12px; }

/* ---- Stack: centred heading + copy, the pair render, one button. */
.jifu-prod-stack { padding-block: 144px 144.1px; text-align: center; }
.jifu-prod-stack__inner { max-width: 1440px; margin-inline: auto; padding-inline: 112.8px; display: flex; flex-direction: column; align-items: center; }
.jifu-prod-stack__title {
  font-family: var(--jifu-font-display); font-weight: 700; font-size: 41.76px; line-height: 1.02;
  letter-spacing: -0.015em; text-transform: uppercase; color: var(--jifu-parchment, rgb(244, 241, 234));
}
.jifu-prod-stack .jifu-prod-dim { max-width: 735.7px; margin-top: 23.5px; }
.jifu-prod-stack__media { width: 760px; max-width: 100%; margin-top: 92px; }
.jifu-prod-stack__media img { width: 100%; aspect-ratio: 760 / 533.4; object-fit: cover; }
.jifu-prod-stack .jifu-prod-btn { margin-top: 32px; }

/* ---- Closing: photo band, accent headline, mega pairing, the disclaimer. */
.jifu-prod-closing { position: relative; isolation: isolate; min-height: 731.6px; padding-block: 112px 120px; }
.jifu-prod-closing__media { position: absolute; inset: 0; z-index: -2; }
.jifu-prod-closing__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
/* The scrim is tuned to the sheet's sunlit-group photo (ASANA:1219472105694272):
   a bright sky and a low sun sit behind the copy column, so the column is
   washed down to AA (the photo-contrast probe) while the group's right edge
   keeps the light; top and bottom still melt into the night ground. */
.jifu-prod-closing__scrim {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgb(11, 11, 11) 0%, rgba(11, 11, 11, 0) 22%, rgba(11, 11, 11, 0) 62%, rgb(11, 11, 11) 92%),
    linear-gradient(90deg, rgba(11, 11, 11, .8) 0%, rgba(11, 11, 11, .74) 62%, rgba(11, 11, 11, .45) 80%, rgba(11, 11, 11, .2) 100%);
}
.jifu-prod-closing__inner { max-width: 808.5px; margin-inline: auto; }
.jifu-prod-closing__accent { max-width: 546.8px; }
.jifu-prod-closing__mega {
  margin-top: 95.4px; font-family: var(--jifu-font-display); font-weight: 700; font-size: 99.36px;
  line-height: .95; letter-spacing: -0.015em; text-transform: uppercase; color: var(--jifu-parchment, rgb(244, 241, 234));
}
.jifu-prod-closing__disclaimer {
  max-width: 387.1px; margin-top: 61.7px; font-family: var(--jifu-font-body); font-size: 9.07px;
  line-height: 1.55; color: var(--jifu-inverse-ink-muted, rgba(244, 241, 234, .66));
}

/* ---- Tablet (810-1439.98): single column, 3-up cards, centred closing. */
@media (max-width: 1439.98px) {
  .jifu-prod-hero { height: auto; padding-bottom: 73px; }
  .jifu-prod-hero .fr-film { position: relative; inset: auto; height: auto; --fr-film-inset: 49px; }
  .jifu-prod-hero__scrim {
    bottom: auto; aspect-ratio: 1.7647;
    background: linear-gradient(180deg, rgba(11, 11, 11, .72) 0%, rgba(11, 11, 11, .16) 30%, rgba(11, 11, 11, .42) 50%, rgba(11, 11, 11, .86) 78%, rgb(11, 11, 11) 96%);
  }
  .jifu-prod-hero__caption { bottom: 50px; }
  .jifu-prod-intro { padding-block: 105.9px 32.5px; }
  .jifu-prod-intro__inner { padding-inline: 67.8px; }
  .jifu-prod-lede, .jifu-prod-title, .jifu-prod-closing__accent { font-size: 44.96px; }
  .jifu-prod-lede { max-width: 674.4px; }
  .jifu-prod-intro__grid { grid-template-columns: minmax(0, 1fr); margin-top: 39.1px; }
  .jifu-prod-intro__media { width: 472.1px; max-width: 100%; margin-inline: auto; }
  .jifu-prod-intro__copy { padding-top: 41.4px; }
  .jifu-prod-title { max-width: 437.8px; }
  .jifu-prod-intro__copy .jifu-prod-dim { max-width: 674.4px; margin-top: 47.6px; }
  .jifu-prod-textlink { margin-top: 26.4px; }
  .jifu-prod-rail { padding-block: 105.9px 106px; }
  .jifu-prod-rail__ground { height: 343.8px; }
  .jifu-prod-rail__inner, .jifu-prod-stack__inner { padding-inline: 33.9px; }
  .jifu-prod-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14.4px; margin-top: 32.4px; }
  .jifu-prod-card { min-height: 203.2px; padding: 23.4px 23.4px 22px; }
  .jifu-prod-stack { padding-block: 104.9px; }
  .jifu-prod-stack__title { font-size: 32.61px; }
  .jifu-prod-stack .jifu-prod-dim { max-width: 691px; margin-top: 23.1px; }
  .jifu-prod-stack__media { width: 100%; margin-top: 63.1px; }
  .jifu-prod-closing { min-height: 666px; padding: 331.9px 33.9px 71.2px; text-align: center; }
  .jifu-prod-closing__media img { object-position: 50% 0%; }
  .jifu-prod-closing__scrim {
    background: linear-gradient(180deg, rgb(11, 11, 11) 0%, rgba(11, 11, 11, .1) 14%, rgba(11, 11, 11, .2) 34%, rgba(11, 11, 11, .86) 50%, rgba(11, 11, 11, .9) 80%, rgb(11, 11, 11) 96%);
  }
  .jifu-prod-closing__inner { max-width: 742.2px; }
  .jifu-prod-closing__accent { max-width: none; }
  .jifu-prod-closing__mega { margin-top: 17.4px; font-size: 65.43px; }
  .jifu-prod-closing__disclaimer { max-width: 520.6px; margin: 39.5px auto 0; }
}

/* ---- Phone (<=809.98): the Dark Phone strip, 1-up cards. */
@media (max-width: 809.98px) {
  .jifu-prod-hero { padding-bottom: 77px; }
  .jifu-prod-hero .fr-film { --fr-film-inset: 40px; }
  .jifu-prod-hero__scrim {
    background: linear-gradient(180deg, rgba(11, 11, 11, .76) 0%, rgba(11, 11, 11, .24) 28%, rgba(11, 11, 11, .55) 48%, rgba(11, 11, 11, .9) 74%, rgb(11, 11, 11) 94%);
  }
  .jifu-prod-hero__caption { bottom: 34px; right: 120px; max-width: 230px; margin-inline: auto; }
  .jifu-prod-intro { padding-block: 68.1px 32px; }
  .jifu-prod-intro__inner { padding-inline: 42.6px; }
  .jifu-prod-lede, .jifu-prod-title, .jifu-prod-closing__accent { font-size: 25.39px; }
  .jifu-prod-intro__grid { margin-top: 85.6px; }
  .jifu-prod-intro__media { width: 213.4px; }
  .jifu-prod-intro__copy { padding-top: 31.9px; }
  .jifu-prod-title { max-width: none; }
  .jifu-prod-dim { font-size: 13px; }
  .jifu-prod-intro__copy .jifu-prod-dim { margin-top: 87px; }
  .jifu-prod-textlink { margin-top: 69.8px; }
  .jifu-prod-rail { padding-block: 68.1px 85.7px; }
  /* The tabs wrap to two rows on a phone, so "Supplement facts" lands on the
     ground's green glow: at .5 it read 4.34:1 (55% of glyph pixels under AA,
     photo-contrast probe; .4 still left 17%). .3 keeps the cells and clears the floor. */
  .jifu-prod-rail__ground { height: 165.5px; opacity: .3; }
  .jifu-prod-rail__inner, .jifu-prod-stack__inner { padding-inline: 21.3px; }
  .jifu-prod-cards { grid-template-columns: minmax(0, 1fr); max-width: 288.6px; margin: 49.5px auto 0; }
  .jifu-prod-card { min-height: 183.5px; }
  .jifu-prod-card__title { font-size: 12.6px; }
  .jifu-prod-stack { padding-block: 67.1px 67.2px; }
  .jifu-prod-stack__title { font-size: 19.36px; }
  .jifu-prod-stack .jifu-prod-dim { margin-top: 33.4px; }
  .jifu-prod-stack__media { margin-top: 77.3px; }
  .jifu-prod-closing { padding: 343.5px 21.3px 71.7px; }
  .jifu-prod-closing__mega { margin-top: 57.7px; font-size: 30.47px; }
  .jifu-prod-closing__disclaimer { max-width: none; margin-top: 44.1px; }
}

/* ===================================================== education night pages
   The education product pages (BRIEF 1218803133929418: "Night pages") -
   /education/jifu-live first; Connect and Scanners reuse the same pieces. The
   wrapper is .cine (the night ground) + .jifu-page--education (the accent) +
   .jifu-edu (the values below). Measured against 02_page renders/21 at
   1440/810/390 and 13_element breakdown/pages/28 education_jifu-live. Framer's
   64px header floats over the hero; shop2's header is solid above it, so 64px
   comes off the hero's height and top padding at every width. */

.jifu-edu {
  --jifu-edu-accent: var(--jifu-page-accent, var(--jifu-accent-education, rgb(74, 144, 226)));
  --jifu-edu-lift: rgb(108, 172, 246);          /* Framer's Education Blue on dark */
  --jifu-edu-navy: rgb(8, 19, 30);               /* ink on the blue button, scrim tint */
  --jifu-edu-panel: rgb(10, 27, 39);             /* dialog ground */
  --jifu-edu-rule: rgba(107, 172, 246, .2);
  --jifu-edu-copy: rgb(216, 222, 230);
  --jifu-edu-dim: rgb(195, 206, 218);
  --jifu-edu-faint: rgb(147, 163, 180);
  --jifu-edu-ground: var(--jifu-midnight-deep, rgb(15, 15, 15));
  background: var(--jifu-edu-ground);
}
/* site-extra.css loads after this file with .cine { background: midnight-well };
   the compound selector outranks it, so the education ground actually paints
   (#0F0F0F, or Connect's navy) instead of #080808. */
.cine.jifu-edu { background: var(--jifu-edu-ground); }

/* ---- Hero ("eb"): full-bleed photo, a left and a bottom scrim, the copy
   column on the left: pill, Display title, lead. */
.jifu-edu-hero {
  position: relative; overflow: hidden; height: 728px; padding-block: 80px 64px;
  display: flex; flex-direction: column; justify-content: center;   /* Framer centres the copy between the paddings */
  background: var(--jifu-edu-ground);
}
/* Framer's photo starts under its floating 64px header; shop2's header is
   solid, so the photo keeps Framer's height and moves up 64px behind it. */
.jifu-edu-hero__media { position: absolute; top: -64px; left: 0; right: 0; height: 804px; }
.jifu-edu-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.jifu-edu-hero__scrim { position: absolute; inset: 0; pointer-events: none; }
.jifu-edu-hero__scrim--side { background: linear-gradient(80deg, rgba(15, 15, 15, .8) 0%, rgba(15, 15, 15, .5) 44%, rgba(0, 0, 0, 0) 78%); }
.jifu-edu-hero__scrim--foot { background: linear-gradient(180deg, rgba(0, 0, 0, 0) 70%, rgba(15, 15, 15, .55) 90%, rgb(15, 15, 15) 100%); }
.jifu-edu-shell { position: relative; max-width: 1440px; margin-inline: auto; padding-inline: 158px; }
.jifu-edu-hero .jifu-edu-shell { width: 100%; }
.jifu-edu-hero__copy { max-width: 534px; padding-bottom: 35px; }   /* Framer's trailing Gap, part of the centred block */
.jifu-edu-pill {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 16px; border-radius: 999px;
  background: rgba(15, 15, 15, .34);
  font-family: var(--jifu-font-body); font-weight: 700; font-size: 10.8px; line-height: 1.62;
  letter-spacing: 2.64px; text-transform: uppercase; color: var(--jifu-inverse-ink, rgb(244, 241, 234));
}
.jifu-edu-pill__brand { color: var(--jifu-edu-lift); }
.jifu-edu-title {
  margin-top: 22px;
  font-family: var(--jifu-font-display); font-weight: 700; font-size: 74.88px; line-height: .92;
  letter-spacing: -1.25px; text-transform: uppercase; color: rgb(255, 255, 255);
}
.jifu-edu-lead {
  margin-top: 18px;
  font-family: var(--jifu-font-body); font-size: 17.5px; line-height: 1.5; color: rgb(255, 255, 255);
}

/* ---- Academies ("eac"): a Statement h2, then the tile grid - 5 across on
   desktop, 3 on tablet, 2 on phone; each tile opens its academy dialog. */
.jifu-edu-academies { padding-block: 130px; }
.jifu-edu-academies .jifu-edu-shell { max-width: 1312px; padding-inline: 94px; }   /* a 1124px grid, centred: 158px gutters at 1440 */
.jifu-edu-subhead {
  font-family: var(--jifu-font-display); font-weight: 700; font-size: 25.2px; line-height: 1.35;
  letter-spacing: -0.28px; color: rgb(255, 255, 255); max-width: 560px;
}
.jifu-edu-tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; margin-top: 42px; }
.jifu-edu-tile {
  position: relative; display: block; width: 100%; height: 410px; padding: 0; overflow: hidden;
  border: 0; border-radius: 2px; background: rgb(0, 0, 0); cursor: pointer; text-align: start;
}
.jifu-edu-tile__media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.jifu-edu-tile__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(0, 0, 0, .94) 0%, rgba(0, 0, 0, .86) 12%, rgba(0, 0, 0, .58) 28%, rgba(0, 0, 0, .24) 44%, rgba(0, 0, 0, 0) 62%);
}
.jifu-edu-tile__foot { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; gap: 8.8px; padding: 0 16px 18px; }
.jifu-edu-tile__row { display: flex; align-items: center; gap: 8.8px; }
.jifu-edu-tile__glyph { width: 20px; height: 20px; flex: none; }
.jifu-edu-tile__name {
  font-family: var(--jifu-font-display); font-weight: 700; font-size: 13.5px; line-height: 1.1;
  letter-spacing: .3px; text-transform: uppercase; color: rgb(255, 255, 255);
}
.jifu-edu-tile__tag {
  padding: 4.48px 8.8px; border: 1px solid rgba(244, 241, 234, .16); border-radius: 2px;
  background: rgba(244, 241, 234, .06);
  font-family: var(--jifu-font-body); font-weight: 600; font-size: 8.1px; line-height: 1.62;
  letter-spacing: 1.8px; text-transform: uppercase; color: rgba(244, 241, 234, .82);
}
.jifu-edu-tile:focus-visible { outline: 2px solid var(--jifu-edu-lift); outline-offset: 3px; }

/* ---- Academy dialog: Framer's overlay on each tile - cover with a fade,
   title, description, four figures over a rule, a round close. Native
   <dialog>, opened by js/redesign/academy-dialog.js. */
.jifu-edu-dialog {
  width: min(860px, calc(100vw - 32px)); max-height: calc(100vh - 32px); padding: 0; overflow: auto;
  border: 1px solid var(--jifu-edu-rule); border-radius: 4px;
  background: var(--jifu-edu-panel); color: rgb(255, 255, 255);
}
.jifu-edu-dialog::backdrop { background: rgba(0, 0, 0, .72); }
.jifu-edu-dialog__cover { position: relative; height: 368px; }
.jifu-edu-dialog__cover img { width: 100%; height: 100%; object-fit: cover; }
.jifu-edu-dialog__fade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 27, 39, 0) 42%, rgba(10, 27, 39, .96) 100%); }
.jifu-edu-dialog__body { display: flex; flex-direction: column; gap: 14px; padding: 0 38px 38px; }
.jifu-edu-dialog__title {
  font-family: var(--jifu-font-display); font-weight: 700; font-size: 27.36px; line-height: 1.12;
  letter-spacing: -0.3px; color: rgb(255, 255, 255);
}
.jifu-edu-dialog__desc { font-family: var(--jifu-font-body); font-size: 13.5px; line-height: 1.62; color: var(--jifu-edu-dim); }
.jifu-edu-dialog__figures {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px;
  padding-top: 21px; border-top: 1px solid var(--jifu-edu-rule);
}
.jifu-edu-dialog__figure { display: flex; flex-direction: column; gap: 2px; }
.jifu-edu-dialog__number { font-family: var(--jifu-font-display); font-weight: 700; font-size: 20.16px; line-height: 1; color: var(--jifu-edu-lift); }
.jifu-edu-dialog__label { font-family: var(--jifu-font-body); font-size: 10.8px; line-height: 1.3; color: var(--jifu-edu-faint); }
.jifu-edu-dialog__close {
  position: absolute; top: 16px; right: 16px; width: 36px; height: 36px; border-radius: 999px;
  border: 1px solid rgba(244, 241, 234, .26); background: rgba(15, 15, 15, .6);
  font-family: var(--jifu-font-body); font-size: 18px; line-height: 1; color: rgb(255, 255, 255); cursor: pointer;
}

/* ---- Leaders band ("eb", second): photo ground with a navy scrim from the
   left, Statement title with its gradient second line, lead, two buttons. */
/* The copy sits on the band's foot (129.6px padding); the band is at least
   the photo's 611.3px and grows with the copy, the photo staying 611.3px. */
.jifu-edu-leaders { position: relative; overflow: hidden; display: flex; align-items: flex-end; min-height: 611.3px; padding-block: 129.6px; }
.jifu-edu-leaders__media { position: absolute; inset: 0 0 auto; width: 100%; height: 611.3px; object-fit: cover; }
.jifu-edu-leaders__scrim { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8, 19, 30, .9) 0%, rgba(8, 19, 30, .55) 42%, rgba(8, 19, 30, .1) 76%, rgba(8, 19, 30, 0) 88%); }
.jifu-edu-leaders .jifu-edu-shell { width: 100%; padding-inline: 157.6px; }
/* RTL: the copy column mirrors to the right, so the two directional scrims
   mirror with it - the dark side always sits under the copy. */
[dir="rtl"] .jifu-edu-hero__scrim--side { background: linear-gradient(-80deg, rgba(15, 15, 15, .8) 0%, rgba(15, 15, 15, .5) 44%, rgba(0, 0, 0, 0) 78%); }
[dir="rtl"] .jifu-edu-leaders__scrim { background: linear-gradient(-90deg, rgba(8, 19, 30, .9) 0%, rgba(8, 19, 30, .55) 42%, rgba(8, 19, 30, .1) 76%, rgba(8, 19, 30, 0) 88%); }
.jifu-edu-leaders__copy { max-width: 544px; }
.jifu-edu-statement {
  font-family: var(--jifu-font-display); font-weight: 700; font-size: 43.2px; line-height: 1.08;
  letter-spacing: -0.48px; color: var(--jifu-parchment, rgb(244, 241, 234));
}
.jifu-edu-statement__grad {
  display: block;
  background: linear-gradient(90deg, rgb(244, 241, 234) 0%, rgb(183, 206, 252) 28%, rgb(74, 144, 226) 62%, rgb(108, 172, 246) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.jifu-edu-leaders__lead { font-family: var(--jifu-font-body); font-size: 17.5px; line-height: 1.5; letter-spacing: -0.02em; color: var(--jifu-edu-copy); }
.jifu-edu-actions { display: flex; flex-wrap: wrap; gap: 13.6px; padding-top: 35.2px; }
.jifu-edu-btn {
  display: inline-flex; align-items: center; justify-content: center; padding: 15.2px 30.4px; border-radius: 999px;
  border: 1px solid rgba(244, 241, 234, .34); background: transparent;
  font-family: var(--jifu-font-body); font-weight: 600; font-size: 13.5px; line-height: 1.62; letter-spacing: .15px;
  color: var(--jifu-parchment, rgb(244, 241, 234));
}
.jifu-edu-btn--primary { border-color: var(--jifu-edu-accent); background: var(--jifu-edu-accent); color: var(--jifu-edu-navy); }
@media (hover: hover) {
  .jifu-edu-btn:hover { border-color: var(--jifu-parchment, rgb(244, 241, 234)); }
  .jifu-edu-btn--primary:hover { background: var(--jifu-edu-lift); border-color: var(--jifu-edu-lift); }
}

@media (max-width: 1439.98px) {
  .jifu-edu-hero__media { height: 1013px; }
  .jifu-edu-shell, .jifu-edu-academies .jifu-edu-shell { padding-inline: 53px; }
  .jifu-edu-hero__copy { max-width: 467px; }
  .jifu-edu-lead { font-size: 15.3px; }
  .jifu-edu-academies { padding-block: 73px; }
  .jifu-edu-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .jifu-edu-leaders .jifu-edu-shell { padding-inline: 53px; }
}
@media (max-width: 809.98px) {
  .jifu-edu-hero { height: 576px; padding-top: 56px; }
  .jifu-edu-hero__media { height: 218px; }
  .jifu-edu-shell, .jifu-edu-academies .jifu-edu-shell, .jifu-edu-leaders .jifu-edu-shell { padding-inline: 25px; }
  .jifu-edu-hero__copy { max-width: none; }
  .jifu-edu-title { font-size: 56.49px; }
  .jifu-edu-lead { font-size: 13.5px; }
  .jifu-edu-academies { padding-block: 56px; }
  .jifu-edu-subhead { font-size: 20.4px; }
  .jifu-edu-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .jifu-edu-tile { height: 210px; }
  .jifu-edu-dialog__cover { height: 200px; }
  .jifu-edu-dialog__body { padding: 0 22px 26px; }
  .jifu-edu-dialog__figures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .jifu-edu-leaders__copy { max-width: none; }
  .jifu-edu-statement { font-size: 33.78px; }
  .jifu-edu-leaders__lead { font-size: 14.49px; }
}

/* ---- JIFU 360 (/education/jifu-connect): the education night pieces on
   Framer's "education navy" ground (BRIEF: Connect #03131F), measured against
   02_page renders/20 and 13_element breakdown/pages/27. The hero copy sits on
   the RIGHT, under a scrim that darkens toward it. Component colours (store
   badges, feature grid, phone reel) are set here from the instance props, so
   no colour is written inline on the page. */
.jifu-edu--connect {
  --jifu-edu-ground: rgb(3, 19, 31);             /* education navy #03131F */
  --jifu-edu-grad: linear-gradient(90deg, rgb(74, 249, 255) 0%, rgb(74, 158, 255) 52%, rgb(74, 219, 255) 100%);
}
.jifu-edu--connect .fr-badge {
  --fr-badge-border: rgba(244, 241, 234, .24); --fr-badge-border-hover: var(--jifu-edu-accent);
  --fr-badge-fill: rgba(244, 241, 234, .05); --fr-badge-fill-hover: rgba(74, 144, 226, .12);
  --fr-badge-ink: rgb(255, 255, 255); --fr-badge-small: var(--jifu-edu-faint); --fr-badge-focus: var(--jifu-edu-lift);
}
.jifu-edu--connect .fr-feat {
  --fr-feat-line: rgba(107, 172, 246, .16); --fr-feat-ground: var(--jifu-edu-ground); --fr-feat-ground-hover: rgb(8, 32, 47);
  --fr-feat-accent: var(--jifu-edu-accent); --fr-feat-icon: var(--jifu-edu-lift); --fr-feat-icon-hover: var(--jifu-edu-lift);
  --fr-feat-title: rgb(255, 255, 255); --fr-feat-body: var(--jifu-edu-faint); --fr-feat-body-hover: rgb(184, 196, 208);
}
.jifu-edu--connect .fr-phonereel {
  --fr-phonereel-label: var(--jifu-edu-lift); --fr-phonereel-tick: rgba(108, 172, 246, .22); --fr-phonereel-tick-live: rgb(74, 158, 255);
}
.jifu-edu-grad { background: var(--jifu-edu-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

.jifu-edu-hero--right { height: 728px; }
.jifu-edu-hero--right .jifu-edu-hero__copy { max-width: 544px; margin-inline-start: auto; }
.jifu-edu-hero__scrim--toward-right { background: linear-gradient(100deg, rgba(0, 0, 0, 0) 34%, rgba(3, 19, 31, .44) 56%, rgba(3, 19, 31, .66) 100%); }
[dir="rtl"] .jifu-edu-hero__scrim--toward-right { background: linear-gradient(-100deg, rgba(0, 0, 0, 0) 34%, rgba(3, 19, 31, .44) 56%, rgba(3, 19, 31, .66) 100%); }
/* /education/jifu-live hero framing (Weston, ASANA 1218831776129103): the
   photo (2400x1340) was anchored at its centre, so any viewport wider than
   1440 cropped the top of the frame - 1920 and 2560 showed her from the chin
   down - and on phones the box started 64px behind the solid header, hiding
   the top 29% of a 218px image: no head at all. Anchor near the top (her head
   is ~15% down the photo) so wide screens lose legs instead; on phones start
   the box at the band's top and give it room, centred on her. */
.jifu-edu--live .jifu-edu-hero__media img { object-position: 50% 12%; }
@media (max-width: 809.98px) {
  .jifu-edu--live .jifu-edu-hero__media { top: 0; height: 300px; }
  .jifu-edu--live .jifu-edu-hero__media img { object-position: 72% 10%; }
  /* The copy starts below her head, where a foot scrim fades the photo into
     the ground - over the photo it measured 5.7-7.1% of glyph pixels under AA
     (test_photo_contrast). The band grows past Framer's 576 to hold it. */
  .jifu-edu--live .jifu-edu-hero { height: auto; min-height: 576px; padding-top: 196px; }
  .jifu-edu--live .jifu-edu-hero__scrim--foot {
    background: linear-gradient(180deg, rgba(15, 15, 15, 0) 0, rgba(15, 15, 15, 0) 140px, rgba(15, 15, 15, .82) 230px, rgb(15, 15, 15) 300px);
  }
}
.jifu-edu--connect .jifu-edu-hero__scrim--foot { background: linear-gradient(180deg, rgba(0, 0, 0, 0) 70%, rgba(3, 19, 31, .55) 90%, rgb(3, 19, 31) 100%); }
.jifu-edu-badges { display: flex; flex-wrap: wrap; gap: 17.6px; padding-top: 32px; }
.jifu-edu-disclaimer {
  max-width: 476px; margin-top: 36px; padding-top: 22px; border-top: 1px solid rgba(244, 241, 234, .16);
  font-family: var(--jifu-font-body); font-size: 13.5px; line-height: 1.6; color: var(--jifu-edu-faint);
}

/* "eapp": the photo washed to navy, a centred Statement pair, the PhoneReel,
   80px, then the FeatureGrid. */
/* overflow: CLIP, not hidden (stage review 2026-09-24): hidden makes the band
   a scroll container, so the PhoneReel's sticky stage pinned to THIS box, not
   the viewport - on /education/jifu-connect at 1440 the phone scrolled off at
   once and its captions advanced through ~4000px of empty band. clip trims the
   same bleed without being a scroll container, so the stage pins. */
.jifu-edu-app { position: relative; overflow: clip; padding-block: 129.6px; }
.jifu-edu-app__media { position: absolute; top: 0; left: 0; right: 0; height: 804px; width: 100%; object-fit: cover; }
.jifu-edu-app__scrim { position: absolute; inset: 0 0 auto; height: 804px; background: linear-gradient(180deg, rgb(3, 19, 31) 0%, rgba(3, 19, 31, .55) 22%, rgba(3, 19, 31, .4) 55%, rgba(3, 19, 31, .9) 100%); }
.jifu-edu-app .jifu-edu-shell { max-width: 1312px; padding-inline: 93.6px; }
.jifu-edu-app__title { text-align: center; font-family: var(--jifu-font-display); font-weight: 700; font-size: 43.2px; line-height: 1.08; letter-spacing: -0.012em; color: rgb(255, 255, 255); }
.jifu-edu-app__title .jifu-edu-grad { display: block; }
.jifu-edu-app .fr-feat { margin-top: 80px; }

/* The closing band ("eb"): photo ground, navy scrim from the copy side,
   Statement "Learn. Connect. / Analyze. Grow.", lead, badges, a ruled note. */
/* Rendered 738px tall at 1440 and 810 (652px on phones) with the copy centred;
   the paddings are the floor when the copy is taller. */
.jifu-edu-close { position: relative; overflow: hidden; display: flex; align-items: center; min-height: 738px; padding-block: 129.6px; }
.jifu-edu-close .jifu-edu-shell { width: 100%; }
.jifu-edu-statement__l1, .jifu-edu-statement__l2 { display: block; }
.jifu-edu-close__media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.jifu-edu-close__scrim { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(3, 19, 31, .9) 0%, rgba(3, 19, 31, .55) 42%, rgba(3, 19, 31, .1) 76%, rgba(3, 19, 31, 0) 88%); }
[dir="rtl"] .jifu-edu-close__scrim { background: linear-gradient(-90deg, rgba(3, 19, 31, .9) 0%, rgba(3, 19, 31, .55) 42%, rgba(3, 19, 31, .1) 76%, rgba(3, 19, 31, 0) 88%); }
.jifu-edu-close .jifu-edu-shell { padding-inline: 93.6px; }
.jifu-edu-close__copy { max-width: 544px; }
.jifu-edu-close .jifu-edu-leaders__lead { margin-top: 17.5px; }
.jifu-edu-close .jifu-edu-badges { padding-top: 41.6px; }
.jifu-edu-note {
  max-width: 476.8px; margin-top: 48px; padding-top: 16px; border-top: 1px solid rgba(124, 139, 156, .3);
  font-family: var(--jifu-font-body); font-size: 15.3px; line-height: 1.5; color: var(--jifu-parchment, rgb(244, 241, 234));
}

@media (max-width: 1439.98px) {
  .jifu-edu-hero--right { height: 756px; }
  .jifu-edu-app { padding-block: 72.9px; }
  .jifu-edu-app__media, .jifu-edu-app__scrim { height: 452.5px; }
  .jifu-edu-app .jifu-edu-shell, .jifu-edu-close .jifu-edu-shell { padding-inline: 52.65px; }
  .jifu-edu-close { padding-block: 72.9px; }
  .jifu-edu-close .jifu-edu-statement__l1 { font-size: 26.24px; }
}
@media (max-width: 809.98px) {
  .jifu-edu-hero--right { height: auto; min-height: 0; }
  .jifu-edu-hero--right .jifu-edu-hero__media { top: 0; height: 100%; }
  .jifu-edu-hero--right .jifu-edu-hero__copy { max-width: none; }
  .jifu-edu-badges { flex-direction: column; align-items: flex-start; }
  /* The 390 render drops the hero disclaimer's text and keeps its rule. It
     stays readable here: a legal disclaimer is not hidden (and zero-size text
     is unmeasurable by the photo probe). */
  .jifu-edu-app { padding-block: 56px; }
  .jifu-edu-app__media, .jifu-edu-app__scrim { height: 217.8px; }
  .jifu-edu-app .jifu-edu-shell, .jifu-edu-close .jifu-edu-shell { padding-inline: 25.35px; }
  .jifu-edu-app__title { font-size: 33.78px; }
  .jifu-edu-close { min-height: 652px; padding-block: 56px; }
  .jifu-edu-close .jifu-edu-statement__l1 { font-size: 19.82px; }
  .jifu-edu-close .jifu-edu-statement__l2 { font-size: 33.78px; }
  .jifu-edu-close .jifu-edu-leaders__lead { font-size: 14.49px; }
  .jifu-edu-note { font-size: 13.5px; }
  /* Mobile review 2026-09-25: a 390 cover crop keeps about a third of these
     wide photos, and centred it cut the subject at the right edge (the
     educator's face on jifu-live, half of the DAX user on jifu-connect).
     Aim the crop at the people instead. */
  .jifu-edu-leaders__media { object-position: 70% 50%; }
  .jifu-edu-close__media { object-position: 75% 50%; }
}
/* PhoneReel still while its frames are not on Cloudinary yet: the four
   captions, stacked, as the component's own below-810px still shows them. */
.jifu-edu-reel-still { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 64px; }
.jifu-edu-reel-still li {
  font-family: var(--jifu-font-body); font-weight: 700; font-size: 10.8px; line-height: 1.62;
  letter-spacing: .24em; text-transform: uppercase; color: var(--jifu-edu-lift);
}

/* ---- JIFU Scanners (/education/jifu-scanners): the education night pieces
   on #0F0F0F, measured against 02_page renders/22 and 13_element breakdown/
   pages/29. Framer lays the three body bands out on absolute "stage"
   coordinates; the offsets reduce to a plain flow with fixed gaps, which is
   what is built here (the numbers are the breakdown's). */
.jifu-edu-stage { position: relative; overflow: hidden; padding-block: 88px 115px; }
.jifu-edu-stage__media { position: absolute; top: -64px; left: 0; right: 0; height: 617px; width: 100%; object-fit: cover; }
.jifu-edu-stage__scrim { position: absolute; top: -64px; left: 0; right: 0; height: 617px; background: linear-gradient(180deg, rgba(8, 8, 8, .58) 0%, rgba(8, 8, 8, .74) 46%, rgba(12, 12, 12, .96) 100%); }
.jifu-edu-stage .jifu-edu-shell { padding-inline: 158px; }
.jifu-edu-stage__head { max-width: 608px; }
.jifu-edu-stage .jifu-edu-pill { color: var(--jifu-edu-lift); }
.jifu-edu-stage .jifu-edu-title { color: var(--jifu-parchment, rgb(244, 241, 234)); }
.jifu-edu-stage .jifu-edu-lead { max-width: 669px; color: rgba(255, 255, 255, .84); }
.jifu-edu-console { max-width: 1124px; margin-top: 48px; }
.jifu-edu-console img { display: block; width: 100%; height: 453px; object-fit: cover; border: 1px solid rgba(255, 255, 255, .09); border-radius: 10px; }
.jifu-edu-caption {
  margin-top: 14px; font-family: var(--jifu-font-body); font-size: 10.37px; line-height: 1.62;
  letter-spacing: .1em; text-transform: uppercase; color: rgb(124, 139, 156);
}

.jifu-edu-band { position: relative; overflow: hidden; padding-block: 129.6px; }
.jifu-edu-band .jifu-edu-shell { max-width: 1440px; padding-inline: 157.6px; }
.jifu-edu-band__media { position: absolute; top: 0; left: 0; right: 0; width: 100%; object-fit: cover; }
.jifu-edu-band__scrim { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10, 10, 10, .93) 0%, rgba(10, 10, 10, .72) 52%, rgba(10, 10, 10, .55) 100%); }
[dir="rtl"] .jifu-edu-band__scrim { background: linear-gradient(-90deg, rgba(10, 10, 10, .93) 0%, rgba(10, 10, 10, .72) 52%, rgba(10, 10, 10, .55) 100%); }
.jifu-edu-band .jifu-edu-statement { max-width: 672px; }
.jifu-edu-band .jifu-edu-leaders__lead { max-width: 669.4px; margin-top: 28px; }
.jifu-edu-band .jifu-edu-leaders__lead strong { font-weight: 700; }
.jifu-edu-fine { max-width: 736px; font-family: var(--jifu-font-body); font-size: 11.23px; line-height: 1.6; color: rgb(124, 139, 156); }

/* access: the 4 x 2 scanner grid on hairlines, the laptop figure, caption, note */
.jifu-edu-scanners {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; max-width: 1124.8px; margin-top: 60px;
  padding: 1px; border-radius: 12px; overflow: hidden; background: rgba(244, 241, 234, .1);
}
.jifu-edu-scanner { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 20px 18.4px 30.6px; background: var(--jifu-edu-ground); }   /* 149px cards as rendered */
.jifu-edu-scanner::before { content: ""; position: absolute; top: 0; left: 0; width: 38px; height: 2px; background: var(--jifu-edu-accent); }
[dir="rtl"] .jifu-edu-scanner::before { left: auto; right: 0; }
.jifu-edu-scanner__icon { width: 26px; height: 26px; }
.jifu-edu-scanner__name { font-family: var(--jifu-font-body); font-weight: 700; font-size: 12.1px; line-height: 1.62; letter-spacing: .94px; text-transform: uppercase; color: var(--jifu-parchment, rgb(244, 241, 234)); }
.jifu-edu-scanner__line { font-family: var(--jifu-font-body); font-size: 12.38px; line-height: 1.5; color: var(--jifu-edu-faint); }
.jifu-edu-figure { max-width: 1124.8px; margin-top: 51px; }
.jifu-edu-figure img { display: block; width: 100%; aspect-ratio: 1124.8 / 632.7; object-fit: cover; border-radius: 12px; }
.jifu-edu-figure figcaption { display: flex; align-items: center; gap: 12px; margin-top: 16px; }
.jifu-edu-figure figcaption::before { content: ""; flex: none; width: 26px; height: 1px; background: rgb(124, 139, 156); }
.jifu-edu-figure .jifu-edu-caption { margin-top: 0; }
.jifu-edu-band--access .jifu-edu-fine { margin-top: 40px; }
.jifu-edu-fine--closing { margin-top: 40px; }

/* panel + get: photo on the band's head, scrim over the whole band */
.jifu-edu-band--panel { min-height: 555.4px; }
.jifu-edu-band--panel .jifu-edu-band__media { height: 804px; }
.jifu-edu-band--panel .jifu-edu-statement, .jifu-edu-band--panel .jifu-edu-leaders__lead { max-width: 613.6px; }
.jifu-edu-band--panel .jifu-edu-fine { margin-top: 48px; }
.jifu-edu-band--get .jifu-edu-band__media { height: 611.3px; }
.jifu-edu-band--get .jifu-edu-statement { max-width: none; }
.jifu-edu-band--get .jifu-edu-actions { padding-top: 40px; gap: 13.2px; }
.jifu-edu-shot { max-width: 1124.8px; margin-top: 56px; }
.jifu-edu-shot img { display: block; width: 100%; aspect-ratio: 1124.8 / 534.2; object-fit: cover; border-radius: 10px; }
/* background-IMAGE, not the shorthand: the shorthand would reset the
   background-clip: text set by .jifu-edu-grad and paint a solid bar. */
.jifu-edu-grad--live { background-image: linear-gradient(90deg, rgb(244, 241, 234) 0%, rgb(183, 206, 252) 28%, rgb(74, 144, 226) 62%, rgb(108, 172, 246) 100%); }

@media (max-width: 1439.98px) {
  .jifu-edu-stage .jifu-edu-shell, .jifu-edu-band .jifu-edu-shell { padding-inline: 52.6px; }
  .jifu-edu-stage__media, .jifu-edu-stage__scrim { height: 347px; }
  .jifu-edu-console { margin-top: 42px; }
  .jifu-edu-console img { height: 284px; }
  .jifu-edu-stage .jifu-edu-lead { font-size: 15.3px; max-width: 585px; }
  .jifu-edu-figure figcaption::before { display: none; }   /* Framer puts the tablet rule out in the gutter */
  .jifu-edu-band--access .jifu-edu-fine { margin-top: 58.7px; }
  .jifu-edu-band { padding-block: 72.9px; }
  .jifu-edu-band .jifu-edu-statement { font-size: 26.24px; }
  .jifu-edu-band .jifu-edu-leaders__lead { max-width: 585px; margin-top: 23.6px; font-size: 15.3px; }
  .jifu-edu-scanners { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 58px; }
  .jifu-edu-band--panel { min-height: 361px; }
  .jifu-edu-band--panel .jifu-edu-band__media { height: 452px; }
  .jifu-edu-band--panel .jifu-edu-fine { margin-top: 45px; }
  .jifu-edu-band--get .jifu-edu-band__media { height: 344px; }
  .jifu-edu-band--get .jifu-edu-actions { padding-top: 40px; }
  .jifu-edu-shot { margin-top: 40px; }
}
@media (max-width: 809.98px) {
  .jifu-edu-stage { padding-block: 88px 115px; }
  .jifu-edu-stage .jifu-edu-shell, .jifu-edu-band .jifu-edu-shell { padding-inline: 25.3px; }
  .jifu-edu-stage__media, .jifu-edu-stage__scrim { height: 167px; }
  .jifu-edu-console { margin-top: 41px; }
  .jifu-edu-console img { height: 137px; }
  .jifu-edu-stage .jifu-edu-title { font-size: 33.78px; }
  .jifu-edu-stage .jifu-edu-lead { font-size: 13.5px; }
  .jifu-edu-band { padding-block: 56px; }
  .jifu-edu-band--access { padding-bottom: 64px; }
  .jifu-edu-band--access .jifu-edu-fine { margin-top: 44px; }
  .jifu-edu-figure img { aspect-ratio: 339.3 / 271.4; }
  .jifu-edu-band .jifu-edu-statement { font-size: 19.82px; }
  .jifu-edu-band .jifu-edu-leaders__lead { margin-top: 33px; font-size: 13.5px; }
  .jifu-edu-scanners { grid-template-columns: minmax(0, 1fr); margin-top: 99px; }
  .jifu-edu-figure figcaption::before { display: none; }
  .jifu-edu-band--panel { min-height: 400px; }
  .jifu-edu-band--panel .jifu-edu-band__media { height: 218px; }
  .jifu-edu-band--panel .jifu-edu-fine { margin-top: 90px; }
  .jifu-edu-band--get .jifu-edu-band__media { height: 166px; }
  .jifu-edu-band--get .jifu-edu-actions { flex-direction: column; align-items: flex-start; padding-top: 50px; }
  .jifu-edu-shot { margin-top: 38px; }
}

/* ---- Education night pages: photo contrast (T3/T4 fix-forward, 2026-09-24).
   With the bands classified as image-bearing (T4 1b9c21f7) the photo probe
   reads these copy nodes by pixel, and the render-parity values put them under
   WCAG AA over the photographs. Each rule below departs from the render for
   contrast and says why; measured values are in the commit. */
/* "JIFU" pill label: Framer's .34 fill lets the photo through under 10.8px text. */
.jifu-edu-pill { background: rgba(15, 15, 15, .72); }
.jifu-edu--connect .jifu-edu-pill { background: rgba(3, 19, 31, .72); }
/* Store badges over photographs: a dark fill under the pill and a brighter
   small line (Framer's .05 fill + #93A3B4 read 1.0-3.9:1 over the photos). */
.jifu-edu--connect .fr-badge { --fr-badge-fill: rgba(3, 19, 31, .74); --fr-badge-small: var(--jifu-edu-dim); }
/* 360 hero: the scrim darkens further toward the copy side. */
.jifu-edu-hero__scrim--toward-right { background: linear-gradient(100deg, rgba(0, 0, 0, 0) 28%, rgba(3, 19, 31, .5) 48%, rgba(3, 19, 31, .8) 68%, rgba(3, 19, 31, .84) 100%); }
[dir="rtl"] .jifu-edu-hero__scrim--toward-right { background: linear-gradient(-100deg, rgba(0, 0, 0, 0) 28%, rgba(3, 19, 31, .5) 48%, rgba(3, 19, 31, .8) 68%, rgba(3, 19, 31, .84) 100%); }
/* Academy tiles: a deeper foot so the name clears on the brightest photo. */
.jifu-edu-tile__scrim { background: linear-gradient(0deg, rgba(0, 0, 0, .96) 0%, rgba(0, 0, 0, .9) 18%, rgba(0, 0, 0, .66) 34%, rgba(0, 0, 0, .28) 50%, rgba(0, 0, 0, 0) 66%); }
/* Ghost buttons over a photograph get a translucent ground of their own. */
.jifu-edu-leaders .jifu-edu-btn:not(.jifu-edu-btn--primary) { background: rgba(8, 19, 30, .6); }
/* The 360 hero disclaimer sits on the photograph: the brighter dim ink. */
.jifu-edu-hero .jifu-edu-disclaimer { color: var(--jifu-edu-dim); }
/* Fine print: the faint ink, not the dimmer caption grey. */
.jifu-edu-fine { color: var(--jifu-edu-faint); }
@media (max-width: 809.98px) {
  /* Phones: the copy runs full width over the photo, where a side-to-side
     scrim cannot sit under it - a vertical veil does. */
  .jifu-edu-hero--right .jifu-edu-hero__scrim--toward-right { background: linear-gradient(180deg, rgba(3, 19, 31, .55) 0%, rgba(3, 19, 31, .8) 30%, rgba(3, 19, 31, .86) 100%); }
  .jifu-edu-leaders__scrim, [dir="rtl"] .jifu-edu-leaders__scrim { background: linear-gradient(180deg, rgba(8, 19, 30, .2) 0%, rgba(8, 19, 30, .78) 40%, rgba(8, 19, 30, .9) 100%); }
  .jifu-edu-close__scrim, [dir="rtl"] .jifu-edu-close__scrim { background: rgba(3, 19, 31, .8); }
  /* Scanners body bands: the same phone veil ("the moment it forms." gradient
     line went 1.2% under 3.0 over the panel photo on a side-to-side scrim). */
  .jifu-edu-band__scrim, [dir="rtl"] .jifu-edu-band__scrim { background: linear-gradient(180deg, rgba(10, 10, 10, .72) 0%, rgba(10, 10, 10, .86) 45%, rgba(10, 10, 10, .9) 100%); }
}

/* ======================================================= /health/stm-3d
   STM 3D+ (night product page). Its own layout, measured against 02_page
   renders/29 health_stm-3d and 13_element breakdown (positions per
   breakpoint), plus the "stm3d" layouts in Framer's Deck.tsx DECKS table for
   the three panels. The product accent is its own teal (--jifu-accent-stm3d,
   rgb(111, 201, 198) - 32k px in the render; the health green is not used).
   Grounds and body inks are page variables, set once on the wrapper. */
.jifu-page--stm3d {
  --jifu-page-accent: var(--jifu-accent-stm3d, rgb(111, 201, 198));
  --jifu-s3d-ground: rgb(5, 9, 10);
  --jifu-s3d-ink: rgb(255, 255, 254);
  --jifu-s3d-body: rgb(227, 231, 234);
  --jifu-s3d-soft: rgb(167, 184, 186);
  --jifu-s3d-dim: rgb(109, 125, 126);
}
.jifu-page--stm3d .jifu-buy-strip--dark { background: var(--jifu-s3d-ground); }

/* ---- Hero: the shared FILM Page Hero (rd.page_hero_film, above; ticket
   1219472280640546) playing the STM 3D Promo film, as /health/liv. The film
   carries its own words, so only the CTA sits over it. Desktop caps the band
   at 674px (as liv) so the CTA stays above a 900px fold; the film covers it,
   a ~8% crop top and bottom at 1440 that keeps the film's benefits card and
   pack labels whole. Phones collapse to 16:9 with the CTA below. */
.jifu-page--stm3d .jifu-page-hero--film { max-height: 674px; }
.jifu-s3d-eyebrow {
  font-family: var(--jifu-font-display); font-weight: 700; font-size: 11.7px; line-height: 1;
  letter-spacing: .2em; text-transform: uppercase; color: var(--jifu-page-accent);
}

/* ---- Intro: packshot left (584x327, radius 14), copy right. */
.jifu-s3d-intro { background: var(--jifu-s3d-ground); padding: 110px 104px; }
.jifu-s3d-intro__grid { display: grid; grid-template-columns: 584px 584px; column-gap: 64px; align-items: center; }
.jifu-s3d-intro__media img { width: 100%; aspect-ratio: 584 / 327; object-fit: contain; border-radius: 14px; }
.jifu-s3d-intro__copy { display: flex; flex-direction: column; align-items: flex-start; }
.jifu-s3d-intro__h2 {
  margin-top: 19px; font-family: var(--jifu-font-display); font-weight: 700; font-size: 68.49px;
  line-height: 1; letter-spacing: -0.02em; text-transform: uppercase; color: var(--jifu-page-accent);
}
.jifu-s3d-intro__h3 {
  margin-top: 21px; font-family: var(--jifu-font-display); font-weight: 700; font-size: 49.38px;
  line-height: 1.02; letter-spacing: -0.01em; text-transform: uppercase; color: var(--jifu-s3d-ink);
}
.jifu-s3d-intro__lede {
  margin-top: 93px; font-family: var(--jifu-font-display); font-weight: 700; font-size: 18.9px;
  line-height: 1.5; color: var(--jifu-s3d-body);
}
.jifu-s3d-jump {
  margin-top: 73px; display: inline-flex; gap: 6px; padding-bottom: 5px;
  border-bottom: 1px solid var(--jifu-page-accent);
  font-family: var(--jifu-font-body); font-size: 13.5px; line-height: 1.55; letter-spacing: .06em;
  text-transform: uppercase; color: var(--jifu-s3d-body);
}
.jifu-s3d-btn {
  margin-top: 34px; display: inline-flex; padding: 17px 38px; border-radius: 6px;
  background: var(--jifu-s3d-ink); color: var(--jifu-midnight-deep, rgb(15, 15, 15));
  font-family: var(--jifu-font-body); font-weight: 700; font-size: 13.5px; line-height: 1;
  letter-spacing: .06em; text-transform: uppercase;
}

/* ---- Panels: the smoke ground (opacity .85), the ported Deck with the
   three panels (tabs; dots + arrows on phones - two Deck instances, one per
   breakpoint set, as Framer's variants), then "Double down" + STM pair. */
.jifu-s3d-panels { position: relative; isolation: isolate; background: var(--jifu-s3d-ground); padding: 110px 104px 120px; text-align: center; }
.jifu-s3d-panels__ground { position: absolute; inset: 0; z-index: -1; opacity: .85; }
.jifu-s3d-panels__ground img { width: 100%; height: 100%; object-fit: cover; }
.jifu-s3d-panels { --jifu-s3d-deck-h: 513px; }
.jifu-s3d-deck--phone { display: none; }
.jifu-s3d-panels .fr-deck { text-align: left; }
.jifu-s3d-panel { position: relative; isolation: isolate; flex: 1 1 100%; width: 100%; height: 100%; display: flex; align-items: center; }
.jifu-s3d-panel__card { position: relative; isolation: isolate; width: 100%; overflow: hidden; padding: 53px 57px 57px; }
.jifu-s3d-panel__bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.jifu-s3d-panel__card::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(2, 6, 7, .93) 0%, rgba(2, 6, 7, .8) 46%, rgba(2, 6, 7, .28) 100%);
}
.jifu-s3d-panel__title {
  font-family: var(--jifu-font-display); font-weight: 700; font-size: 35.3px; line-height: 36.3px;
  letter-spacing: -0.5px; text-transform: uppercase; color: var(--jifu-s3d-ink);
}
.jifu-s3d-facts { display: grid; grid-template-columns: 202px 416px; column-gap: 22px; row-gap: 7px; margin-top: 12px; }
.jifu-s3d-facts dt { font-family: var(--jifu-font-body); font-weight: 600; font-size: 13.5px; line-height: 20.9px; color: var(--jifu-page-accent); }
.jifu-s3d-facts dd { margin: 0; font-family: var(--jifu-font-body); font-size: 13.5px; line-height: 20.9px; color: var(--jifu-s3d-body); }
.jifu-s3d-ingredients { max-width: 575px; margin-top: 22px; font-family: var(--jifu-font-body); font-size: 12.6px; line-height: 20.2px; color: var(--jifu-s3d-soft); }
.jifu-s3d-ingredients strong { font-weight: 600; color: var(--jifu-s3d-body); }
.jifu-s3d-benefits { display: grid; grid-template-columns: repeat(5, 195px); gap: 16px; margin-top: 12px; }
.jifu-s3d-benefit {
  display: flex; align-items: flex-end; min-height: 175px; padding: 21px; border-radius: 12px;
  background: rgba(111, 201, 198, .05);
  font-family: var(--jifu-font-body); font-weight: 500; font-size: 13.5px; line-height: 18.2px; color: var(--jifu-s3d-ink);
}
.jifu-s3d-nutr__intro { max-width: 585px; margin-top: 12px; font-family: var(--jifu-font-body); font-size: 15.3px; line-height: 23.7px; color: rgb(185, 200, 202); }
.jifu-s3d-nutrients { display: grid; grid-template-columns: 289px 471px; row-gap: 25px; margin-top: 46px; }
.jifu-s3d-nutrients dt { font-family: var(--jifu-font-body); font-weight: 600; font-size: 13.5px; line-height: 20.9px; color: var(--jifu-s3d-ink); }
.jifu-s3d-nutrients dt sup { font-size: 11.2px; }
.jifu-s3d-nutrients dd { margin: 0; font-family: var(--jifu-font-body); font-size: 13.5px; line-height: 20.9px; color: var(--jifu-s3d-soft); }
.jifu-s3d-nutrients dd::before { content: "\2192\00a0"; color: var(--jifu-page-accent); }
.jifu-s3d-pair__title {
  margin-top: 80px; font-family: var(--jifu-font-display); font-weight: 700; font-size: 37.15px;
  line-height: 1.06; letter-spacing: -0.015em; text-transform: uppercase; color: var(--jifu-s3d-ink);
}
.jifu-s3d-pair__lede { max-width: 698px; margin: 23px auto 0; font-family: var(--jifu-font-body); font-size: 15.3px; line-height: 1.55; color: var(--jifu-s3d-body); }
.jifu-s3d-pair__media { width: 474px; margin: 44px auto 0; }
.jifu-s3d-pair__media img { width: 100%; aspect-ratio: 474 / 333; object-fit: contain; }
.jifu-s3d-ghost {
  display: inline-flex; margin-top: 29px; padding: 8px 2px; border-bottom: 1px solid var(--jifu-s3d-ink);
  font-family: var(--jifu-font-body); font-weight: 700; font-size: 13.5px; line-height: 1;
  letter-spacing: .06em; text-transform: uppercase; color: var(--jifu-s3d-ink);
}

/* ---- Closing: the runner, the bottom scrim, centred copy. */
.jifu-s3d-closing {
  position: relative; isolation: isolate; min-height: 840px; display: flex; flex-direction: column;
  justify-content: flex-end; align-items: center; padding: 0 104px 60px; text-align: center; background: var(--jifu-s3d-ground);
}
.jifu-s3d-closing__media { position: absolute; inset: 0; z-index: -2; }
.jifu-s3d-closing__media img { width: 100%; height: 100%; object-fit: cover; }
.jifu-s3d-closing__scrim { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 54%, rgb(0, 0, 0) 73%); }
.jifu-s3d-closing__accent { max-width: 653px; font-family: var(--jifu-font-display); font-weight: 700; font-size: 29.23px; line-height: 1.15; color: var(--jifu-page-accent); overflow-wrap: break-word; }
.jifu-s3d-closing__lede { max-width: 653px; margin-top: 18px; font-family: var(--jifu-font-body); font-size: 15.3px; line-height: 1.55; color: var(--jifu-s3d-body); }
.jifu-s3d-closing__mega {
  margin-top: 58px; font-family: var(--jifu-font-display); font-weight: 700; font-size: 63.94px;
  line-height: 1; letter-spacing: -0.02em; text-transform: uppercase; color: var(--jifu-s3d-ink);
}
.jifu-s3d-closing__disc { max-width: 699px; margin-top: 41px; font-family: var(--jifu-font-body); font-size: 9.9px; line-height: 1.5; color: var(--jifu-s3d-dim); }

/* ---- Tablet (810-1439.98). */
@media (max-width: 1439.98px) {
  .jifu-s3d-intro { padding: 110px 24px; }
  .jifu-s3d-intro__grid { grid-template-columns: minmax(0, 1fr); }
  .jifu-s3d-intro__media img { aspect-ratio: 762 / 426; }
  .jifu-s3d-intro__copy { margin-top: 40px; }
  .jifu-s3d-intro__h2 { font-size: 53.34px; }
  .jifu-s3d-intro__h3 { margin-top: 12px; font-size: 39.42px; }
  .jifu-s3d-intro__lede { max-width: 598px; margin-top: 76px; }
  .jifu-s3d-jump { margin-top: 41px; }
  .jifu-s3d-btn { margin-top: 35px; }
  .jifu-s3d-panels { padding: 110px 24px 120px; --jifu-s3d-deck-h: 498px; }
  .jifu-s3d-panel__card { padding: 35px 27px 40px; }
  .jifu-s3d-panel__title { font-size: 26.8px; line-height: 1.05; }
  .jifu-s3d-facts { grid-template-columns: minmax(0, 1fr); row-gap: 4px; }
  .jifu-s3d-facts dd + dt { margin-top: 10px; }
  .jifu-s3d-benefits { grid-template-columns: repeat(3, minmax(0, 225px)); }
  .jifu-s3d-nutrients { grid-template-columns: 200px minmax(0, 1fr); margin-top: 30px; }
  .jifu-s3d-pair__title { font-size: 29.21px; }
  .jifu-s3d-pair__lede { margin-top: 21px; }
  .jifu-s3d-pair__media { margin-top: 43px; }
  .jifu-s3d-closing { min-height: 640px; padding: 0 24px 60px; }
  .jifu-s3d-closing__accent { font-size: 24.13px; }
  .jifu-s3d-closing__lede { margin-top: 17px; }
  .jifu-s3d-closing__mega { font-size: 45.79px; }
  .jifu-s3d-closing__disc { margin-top: 39px; }
}

/* ---- Phone (<= 809.98). */
@media (max-width: 809.98px) {
  .jifu-s3d-intro__media img { aspect-ratio: 342 / 192; }
  .jifu-s3d-intro__h2 { font-size: 33.81px; }
  .jifu-s3d-intro__h3 { margin-top: 34px; font-size: 25.64px; }
  .jifu-s3d-intro__lede { margin-top: 85px; font-size: 15.65px; }
  .jifu-s3d-jump { margin-top: 127px; font-size: 12.6px; }
  .jifu-s3d-btn { font-size: 12.6px; }
  .jifu-s3d-panels { --jifu-s3d-deck-h: 841px; }
  .jifu-s3d-deck--wide { display: none; }
  .jifu-s3d-deck--phone { display: block; }
  .jifu-s3d-panel { align-items: flex-start; }
  .jifu-s3d-panel__title { font-size: 18.9px; }
  .jifu-s3d-facts dt, .jifu-s3d-facts dd, .jifu-s3d-nutrients dt, .jifu-s3d-nutrients dd { font-size: 12.6px; }
  .jifu-s3d-ingredients { font-size: 11.8px; }
  .jifu-s3d-benefits { grid-template-columns: minmax(0, 1fr); gap: 15px; }
  .jifu-s3d-benefit { min-height: 135px; font-size: 12.6px; }
  .jifu-s3d-nutr__intro { font-size: 13.5px; }
  .jifu-s3d-nutrients { grid-template-columns: 109px minmax(0, 1fr); column-gap: 0; }
  .jifu-s3d-pair__title { margin-top: 96px; font-size: 20.4px; }
  .jifu-s3d-pair__lede { margin-top: 34px; }
  .jifu-s3d-pair__media { width: 100%; margin-top: 73px; }
  .jifu-s3d-pair__media img { aspect-ratio: 342 / 240; }
  .jifu-s3d-ghost { margin-top: 30px; font-size: 12.6px; }
  .jifu-s3d-closing { padding-bottom: 82px; }
  /* The runner's face sits at ~36% of the photo; the centred phone crop
     (37-63%) cut it at the left edge (mobile review 2026-09-25). */
  .jifu-s3d-closing__media img { object-position: 30% 50%; }
  .jifu-s3d-closing__accent { font-size: 17.88px; }
  .jifu-s3d-closing__lede { margin-top: 28px; font-size: 13.5px; }
  .jifu-s3d-closing__mega { margin-top: 74px; font-size: 26.74px; }
  .jifu-s3d-closing__disc { margin-top: 83px; }
}

/* ---- Contact (ASANA:1218941418355164, /contact-us): the Framer Footer
   component's "Contact" block as a page. Measured from 13_element
   breakdown/components/Footer - layers.txt: inverse ground (midnight-deep),
   a 416px intro column beside the form (64px row / 72px column gap, 64px
   band padding), the Display "Contact" heading 55.73px/1, a 13.5px/1.62
   muted note, 10.8px 700 faint labels, and 17px fields padded 13.6/16 with
   a 10px radius on a clear fill; Name + Email share a row, 18.4px apart. */
.jifu-contact { background: var(--jifu-midnight-deep, rgb(15, 15, 15)); padding-block: 64px; }
.jifu-contact__grid { display: grid; grid-template-columns: 416px minmax(0, 1fr); gap: 64px 72px; align-items: start; }
.jifu-contact__intro { display: flex; flex-direction: column; gap: 16px; }
.jifu-section--dark .jifu-contact__title {
  font-family: var(--jifu-font-display); font-weight: 700; font-size: 55.73px; line-height: 1;
  text-transform: uppercase; letter-spacing: -0.01em; color: var(--jifu-parchment, rgb(244, 241, 234));
}
.jifu-contact__note { font-size: 13.5px; line-height: 1.62; color: rgba(244, 241, 234, .66); }
.jifu-contact__points { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; line-height: 1.5; }
.jifu-contact__points a { color: var(--jifu-parchment, rgb(244, 241, 234)); text-decoration: underline; text-underline-offset: 3px; }
.jifu-contact__form { display: flex; flex-direction: column; gap: 18.4px; }
.jifu-contact__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18.4px; }
.jifu-contact__field { display: flex; flex-direction: column; gap: 7.2px; }
.jifu-contact__label {
  font-family: var(--jifu-font-body); font-weight: 700; font-size: 10.8px; line-height: 1.62;
  letter-spacing: .14em; text-transform: uppercase; color: rgba(244, 241, 234, .7);
}
.jifu-contact__input {
  width: 100%; padding: 13.6px 16px; border-radius: 10px;
  border: 1px solid rgba(244, 241, 234, .22); background: transparent;
  font-family: var(--jifu-font-body); font-size: 17px; line-height: 1.2;
  color: var(--jifu-parchment, rgb(244, 241, 234));
}
.jifu-contact__input::placeholder { color: rgba(244, 241, 234, .6); }
.jifu-contact__input:focus-visible { outline: 2px solid var(--jifu-gold-lift, rgb(169, 138, 110)); outline-offset: 2px; }
.jifu-contact__input[aria-invalid="true"] { border-color: var(--jifu-gold-lift, rgb(169, 138, 110)); }
/* The native select arrow is dark on some platforms; draw one in parchment. */
.jifu-contact__select {
  appearance: none; padding-right: 44px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F4F1EA' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center; background-size: 16px;
}
.jifu-contact__select option { color: var(--jifu-ink, rgb(25, 25, 25)); background: var(--jifu-white, rgb(255, 255, 255)); }
.jifu-contact__textarea { min-height: 112px; resize: vertical; }
.jifu-contact__error, .jifu-contact__form-error { font-size: 13.5px; line-height: 1.5; color: var(--jifu-gold-lift, rgb(169, 138, 110)); }
.jifu-contact__form-error { font-weight: 600; }
.jifu-contact__send { align-self: flex-start; margin-top: 4px; min-height: 44px; }
.jifu-contact__done { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.jifu-section--dark .jifu-contact__done-title { font-family: var(--jifu-font-display); font-weight: 700; font-size: 25.2px; line-height: 1.2; }
/* Honeypot: off-screen, never displayed to a person. */
.jifu-contact__trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 1439.98px) {
  .jifu-contact__grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .jifu-section--dark .jifu-contact__title { font-size: 42px; }
}
@media (max-width: 809.98px) {
  .jifu-contact { padding-block: 48px; }
  .jifu-contact__row { grid-template-columns: minmax(0, 1fr); }
  .jifu-section--dark .jifu-contact__title { font-size: 31.35px; }
  .jifu-contact__input { font-size: 16px; }
}