/* ============================================================================
   Film Backpack — landing hero: footage + the "Skapa video" demo (filmbackpack_hero.css)
   ----------------------------------------------------------------------------
   Layers, bottom → top: video → poster → legibility shade → focus dim → demo
   window → tiles → cursor, ripple → pills. The text column sits beside (desktop)
   or above (stacked) the stage and nothing that moves ever crosses it.
   Default styles = the STATIC COMPOSED state (no JS, reduced motion): window
   visible, slots filled, button + caption shown, no cursor, no payoff pill.
   .fbp-hero--js (set before first paint by the inline init script) switches to
   the t = 0 state; from then on filmbackpack_hero.js writes only transform and
   opacity per frame. The replica copies the real editor (docs/briefs/hero/ref).
   ============================================================================ */

.hero.fbp-hero{
  --fbp-navy:#0F1D3D; --fbp-cream:#F5F1EA; --fbp-forest:#2D6B4F;
  --fbp-pad:48px;
  --fbp-win:clamp(360px, 32vw, 500px);
  --fbp-band:clamp(96px, 10vw, 150px);
  position:relative; isolation:isolate; overflow:hidden;
  min-height:clamp(600px, 88svh, 860px);
  padding:0; display:flex; flex-direction:column; justify-content:center;
  text-align:left; background:var(--fbp-navy); color:var(--fbp-cream);
}

/* ── Footage, poster, legibility shade, focus dim ────────────────────────── */
.fbp-hero__media{position:absolute;left:0;right:0;top:0;bottom:0;z-index:0;pointer-events:none;overflow:hidden;}
.fbp-hero__video,.fbp-hero__poster,.fbp-hero__poster img{
  position:absolute;inset:0;width:100%;height:100%;display:block;
  object-fit:cover;object-position:var(--fbp-pos, 50% 35%);}
.fbp-hero__video{background:var(--fbp-navy);}
.fbp-hero__shade,.fbp-hero__dim{position:absolute;inset:0;}
.fbp-hero__dim{background:var(--fbp-navy);opacity:0;}
/* Desktop shade: strong behind the text column, light over the free band and the window.
   --e is the text column's right edge, from the same numbers the grid uses. */
.fbp-hero__shade{
  --e:calc(50% + min(50%, 720px) - var(--fbp-pad) - var(--fbp-win) - var(--fbp-band));
  background:
    linear-gradient(180deg, rgba(15,29,61,.76) 0, rgba(15,29,61,.40) 72px, rgba(15,29,61,0) 170px),
    linear-gradient(90deg, rgba(15,29,61,.88) 0, rgba(15,29,61,.84) calc(var(--e) - 60px),
      rgba(15,29,61,.36) calc(var(--e) + 36px), rgba(15,29,61,.16) calc(var(--e) + var(--fbp-band)),
      rgba(15,29,61,.10) 100%);}

/* ── Layout: text column | free band | window ────────────────────────────── */
.hero.fbp-hero .wrap.fbp-hero__grid{
  position:relative;z-index:2;box-sizing:border-box;width:100%;max-width:1440px;margin:0 auto;
  padding:84px var(--fbp-pad) 84px;
  display:grid;grid-template-columns:minmax(0,1fr) var(--fbp-band) var(--fbp-win);align-items:center;}
.fbp-hero .hero-in{grid-column:1;position:relative;z-index:2;min-width:0;align-self:start;}
/* Beside the window the column is narrower: the headline scales with the width AND the height, so on a short
   laptop screen (1366×640) it keeps to two lines and the primary CTA stays above the fold. */
@media (min-width:1024px){ .fbp-hero .h1{font-size:clamp(44px, min(6.6vw, 10.5vh), 96px);} }
/* The window sits LOWER than the copy: bottom-aligned 56 px below the text column, so its red demo button is
   always under the real CTA's row, never beside it (one primary action per screen, also in the still frame). */
.fbp-hero__stage{grid-column:3;position:relative;z-index:3;display:grid;align-items:center;pointer-events:none;
  align-self:end;margin-bottom:-56px;
  padding-top:64px; /* room for the caption above the card: on short screens it can never ride up under the nav */}
.fbp-hero__win,.fbp-hero__done{grid-area:1/1;}

/* ── The hero copy on footage: same strings, same order — light colours ──── */
.fbp-hero .h1{color:var(--fbp-cream);}
.hero.fbp-hero .h1 .grad{
  background:linear-gradient(92deg,#FFE0E3 0%,#FFC0C6 55%,#FFA6AF 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  color:#FFA6AF; /* the darkest stop — what a contrast check should measure */}
.fbp-hero .eyebrow{color:#FFB8BF;}
.fbp-hero .sub{color:#EDE7DC;margin-left:0;margin-right:0;max-width:600px;}
.fbp-hero .more{color:#FFD0D5;}
.fbp-hero .hero-ctas,.fbp-hero .hbadges{justify-content:flex-start;}
.fbp-hero .hbadge{color:#F1ECE3;background:rgba(245,241,234,.09);border-color:rgba(245,241,234,.24);}

/* The nav floats over the footage at scroll 0: light text until it turns into its glass bar. */
.nav:not(.scrolled) .brand,.nav:not(.scrolled) a.nl,.nav:not(.scrolled) button.nl{color:var(--fbp-cream, #F5F1EA);}
.nav:not(.scrolled) a.nl:hover,.nav:not(.scrolled) button.nl:hover{color:#fff;background:rgba(245,241,234,.14);}

/* ── The demo window (a replica of the editor's sequence, not a screenshot) ─ */
.fbp-hero__win{
  position:relative;box-sizing:border-box;width:100%;padding:16px;border-radius:16px;
  border:1px solid #E5E5EA;background:linear-gradient(180deg,#FBF2E3 0%,#FCF7EF 46%,#FDFCFA 100%);
  box-shadow:0 34px 90px rgba(5,10,25,.48),0 2px 8px rgba(5,10,25,.20);
  color:#0F1D3D;font-family:var(--fb-font);text-align:left;
  pointer-events:none;-webkit-tap-highlight-color:transparent;
  transform-origin:50% 55%;will-change:transform,opacity;}
/* Clickable (→ the primary CTA) only once the engine runs; without it the card is an inert picture. */
.fbp-hero--run .fbp-hero__win{pointer-events:var(--fbp-hit, auto);cursor:pointer;}
.fbp-hero__head{display:flex;align-items:center;gap:9px;margin:0 0 12px;white-space:nowrap;min-width:0;}
.fbp-hero__tplic{flex:0 0 auto;width:24px;height:24px;display:block;}
.fbp-hero__tpl{font:700 18px/1.2 var(--fb-font);letter-spacing:-.3px;overflow:hidden;text-overflow:ellipsis;}
.fbp-hero__count{font:500 13px/1 var(--fb-font);color:#6B6B70;}
.fbp-hero__rows{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px;}
.fbp-hero__row{display:flex;align-items:center;gap:11px;padding:6px 10px;border-radius:14px;
  background:#fff;border:1px solid #E5E5EA;}
.fbp-hero__num{position:relative;flex:0 0 24px;width:24px;height:24px;}
.fbp-hero__num i{position:absolute;inset:0;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font:700 11px/1 var(--fb-font);font-style:normal;background:#C8CAD2;color:#33363F;}
.fbp-hero__num i.on{background:var(--fbp-forest);color:#fff;}
.fbp-hero__slot{position:relative;display:block;flex:0 0 auto;width:calc(var(--fbp-win) * .21);aspect-ratio:92/54;
  border-radius:9px;background:#e7e8ee;}
.fbp-hero__slot::before{content:"";position:absolute;left:50%;top:50%;width:13px;height:1.5px;margin:-.75px 0 0 -6.5px;
  border-radius:1px;background:#9A9AA0;}
.fbp-hero__bars{position:relative;flex:1 1 auto;min-width:0;height:7px;}
.fbp-hero__bars i{position:absolute;left:0;top:0;display:block;width:58%;height:7px;border-radius:4px;background:#F0F1F5;}
.fbp-hero__bars i.on{background:#D6DAE3;} /* the row's line when its clip is in: the row reads as done */

/* A clip: the thumbnail and its type chip. At rest it sits exactly in its slot. */
.fbp-hero__tile{position:absolute;inset:0;display:block;z-index:4;border-radius:9px;overflow:hidden;background:#cfd2db;
  box-shadow:0 1px 2px rgba(15,29,61,.18);transform-origin:50% 50%;will-change:transform,opacity;}
.fbp-hero__tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
.fbp-hero__chip{position:absolute;top:4px;left:4px;padding:1px 3px;border-radius:5px;line-height:0;background:rgba(0,0,0,.55);}
.fbp-hero__chip svg{width:13px;height:13px;display:block;}

/* Centred under the rows (the app right-aligns it beside a summary line the replica leaves out): that keeps it
   clear of the site's fixed chat pill (bottom right) and of the first-visit cookie banner (bottom centre). */
.fbp-hero__foot{position:relative;display:flex;justify-content:center;margin-top:14px;}
/* Phones: where the button will arrive, a quiet skeleton bar (the card must not look cut off before B6). */
.fbp-hero__btnph{display:none;}
.fbp-hero__btn{position:relative;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;
  height:44px;padding:0 26px;border-radius:8px;overflow:hidden;
  background:linear-gradient(180deg,#e14655 0%,#be2636 100%);border:1px solid rgba(255,255,255,.16);
  box-shadow:0 12px 28px rgba(217,54,70,.24);color:#fff;font:700 15px/1 var(--fb-font);white-space:nowrap;
  transform-origin:50% 50%;will-change:transform,opacity;}
.fbp-hero__btnlabel{position:relative;z-index:2;}
/* The app's real hover: a 1 px lift (engine) and the gold edge luxury.css paints on every hovered button. */
.fbp-hero__hover{position:absolute;inset:-1px;border-radius:8px;border:1px solid rgba(201,162,74,.42);opacity:0;}
/* "Working": a light fill sweeping left → right inside the button (scaleX by the engine). */
.fbp-hero__fill{position:absolute;inset:0;z-index:1;background:rgba(255,255,255,.26);
  transform-origin:0 50%;transform:scaleX(0);opacity:0;}

/* ── Cursor, ripple, pills ───────────────────────────────────────────────── */
.fbp-hero__cursor{position:absolute;left:0;top:0;z-index:8;width:24px;height:24px;pointer-events:none;
  opacity:0;transform-origin:2px 2px;will-change:transform,opacity;
  filter:drop-shadow(0 2px 3px rgba(5,10,25,.35));}
.fbp-hero__cursor svg{display:block;width:100%;height:100%;overflow:visible;}
.fbp-hero__ripple{position:absolute;left:0;top:0;z-index:7;width:56px;height:56px;margin:-28px 0 0 -28px;
  border-radius:50%;border:2px solid rgba(255,255,255,.95);box-shadow:0 0 0 1px rgba(15,29,61,.25);
  pointer-events:none;opacity:0;}
.fbp-hero__pill{display:inline-flex;align-items:center;gap:8px;box-sizing:border-box;margin:0;
  padding:9px 16px;border-radius:999px;background:var(--fbp-cream);color:var(--fbp-navy);
  font:600 15.5px/1.2 var(--fb-font);white-space:nowrap;box-shadow:0 10px 30px rgba(5,10,25,.35),0 1px 3px rgba(5,10,25,.2);
  pointer-events:none;will-change:transform,opacity;}
/* The window's own label: anchored to its top-left edge, so it reads as the card's caption. */
.fbp-hero__caption{position:absolute;left:0;bottom:calc(100% + 10px);z-index:9;}
.fbp-hero__done{justify-self:center;align-self:center;z-index:9;opacity:0;}
.fbp-hero__pill.fbp-hero__done{pointer-events:var(--fbp-pay-hit, none);cursor:pointer;}
.fbp-hero__done svg{width:20px;height:20px;flex:0 0 auto;display:block;}

/* ── Pause control ───────────────────────────────────────────────────────── */
.fbp-hero__pause{position:absolute;left:16px;bottom:16px;z-index:6;display:none;width:44px;height:44px;
  align-items:center;justify-content:center;padding:0;border-radius:50%;cursor:pointer;
  background:rgba(15,29,61,.62);border:1px solid rgba(245,241,234,.30);color:var(--fbp-cream);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:background .2s ease;}
.fbp-hero__pause:hover{background:rgba(15,29,61,.82);}
.fbp-hero__pause:focus-visible{outline:3px solid var(--fbp-cream);outline-offset:2px;}
.fbp-hero__pause svg{width:18px;height:18px;display:block;}
.fbp-hero__pause svg[hidden]{display:none;}
.fbp-hero--run .fbp-hero__pause{display:flex;}

/* ── t = 0 state once JS runs (set before first paint; the engine owns it from there) ── */
.fbp-hero--js .fbp-hero__win,.fbp-hero--js .fbp-hero__tile,.fbp-hero--js .fbp-hero__btn,
.fbp-hero--js .fbp-hero__caption,.fbp-hero--js .fbp-hero__num i.on,.fbp-hero--js .fbp-hero__bars i.on{opacity:0;}

/* ── Tablet 768–1023: stacked — text, a band of footage, the window (max 480) ── */
@media (max-width:1023px){
  .hero.fbp-hero{--fbp-win:min(480px, 100%);min-height:0;justify-content:flex-start;}
  .hero.fbp-hero .wrap.fbp-hero__grid{display:flex;flex-direction:column;align-items:center;
    padding:112px 32px 112px;} /* bottom: the caption under the card clears the pause control */
  .fbp-hero .hero-in{text-align:center;}
  .fbp-hero .sub{margin-left:auto;margin-right:auto;}
  .fbp-hero .hero-ctas,.fbp-hero .hbadges{justify-content:center;}
  .fbp-hero__stage{width:100%;max-width:480px;margin-top:var(--fbp-gap, 170px);align-self:center;margin-bottom:0;padding-top:0;}
  /* Stacked: the band above the card is where the footage's people are — the caption hangs UNDER the card
     (right-aligned, clear of the pause control), so no text sits beside a face (Pexels rule). */
  .fbp-hero__caption{top:calc(100% + 10px);bottom:auto;left:auto;right:0;}
  .fbp-hero__slot{width:108px;}
  /* The footage box keeps the variant's own shape; measure() lines the phone up with the band. */
  .fbp-hero__media{top:var(--fbp-media-top, auto);bottom:var(--fbp-media-bottom, 0);height:auto;aspect-ratio:16/9;}
  .fbp-hero[data-variant="mobile"] .fbp-hero__media{aspect-ratio:4/5;}
  /* --fbp-text-end = where the text column ends, inside this box (measure()); the copy stays on navy,
     the band below it is clear footage, the lower edge melts into the navy under the window. */
  .fbp-hero__shade{background:
    linear-gradient(180deg, rgba(15,29,61,1) 0, rgba(15,29,61,.9) calc(var(--fbp-text-end, 30%) - 50px),
      rgba(15,29,61,.9) calc(var(--fbp-text-end, 30%) + 4px), rgba(15,29,61,.14) calc(var(--fbp-text-end, 30%) + 46px),
      rgba(15,29,61,.10) 68%, rgba(15,29,61,.55) 88%, rgba(15,29,61,1) 100%);}
}

/* ── Phone < 768: compact window — no header, 2 × 3 slots, 40 px button ──── */
@media (max-width:767px){
  .hero.fbp-hero .wrap.fbp-hero__grid{padding:96px 24px 112px;}
  .fbp-hero__stage{max-width:none;margin-top:var(--fbp-gap, 132px);}
  .fbp-hero__win{padding:12px;border-radius:14px;}
  .fbp-hero__head,.fbp-hero__num,.fbp-hero__bars{display:none;}
  .fbp-hero__rows{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;
    padding:10px;border-radius:14px;background:#fff;border:1px solid #E5E5EA;}
  .fbp-hero__row{display:block;padding:0;border:0;border-radius:0;background:none;}
  .fbp-hero__slot{width:100%;}
  .fbp-hero__chip{top:3px;left:3px;}
  .fbp-hero__chip svg{width:11px;height:11px;}
  .fbp-hero__foot{margin-top:12px;}
  .fbp-hero__btn{width:100%;height:40px;font-size:15px;}
  .fbp-hero__btnph{display:block;position:absolute;inset:0;border-radius:8px;background:#EEF0F4;}
  .fbp-hero__cursor{width:20px;height:20px;}
  .fbp-hero__pill{font-size:13.5px;padding:8px 13px;}

}

/* Reduced motion: the static composed frame — nothing moves, no pause control needed. */
@media (prefers-reduced-motion: reduce){
  .fbp-hero__pause{display:none !important;}
}