/* ============================================================
   regna-hero-layout.css — 2026-10-26: the FIRST homepage hero is a normal, wide, in-flow block
   (autoplay + tap/pause live in regna-hero.js); the page after it is a white, wider canvas.

   Before: the hero was Framer's immersive layout — position:sticky; top:0; height:100vh, followed by two empty
   spacers ([Contet] 50vh + [Scroll] 450vh = the scroll-to-play runway) over which [Main] slid; [Main] itself is a
   fixed 1200px column on a #f7f7f7 body, so the dark video showed on both sides of the content.

   Scope — ONLY these nodes (direct children of the Framer root), nothing inside other sections:
     [data-framer-root] > [data-framer-name="Hero"]        the first hero (NOT the globe "Hero" inside [Counter])
     [data-framer-root] > [data-framer-name="Contet"/"Scroll"]   the dead spacers
     [data-framer-root] > [data-framer-name="Main"]        the post-hero wrapper (width + white)
     [Main] > [Features] > [Container]                     "Built for Your Body / Performance": 2 cards use the full width
   Loaded AFTER regna-responsive.css and framer-inline.css; !important only where those two set the same property.
   To go back to the immersive hero: remove this file's <link> (template + index.html) and regna-hero.js observes the
   hero node either way.
   ============================================================ */
:root{
  --rn-page-max: 1440px;      /* content column (hero + Main) */
  --rn-page-pad: 40px;        /* side gutters of that column */
  --rn-hero-radius: 24px;
  --rn-hero-top: 130px;       /* full black nav (38 red strip + 76 bar = 114) + 16 */
}
@media (max-width: 1199px){ :root{ --rn-page-pad: 32px; --rn-hero-radius: 20px; } }
@media (max-width: 1099px){ :root{ --rn-hero-top: 12px; } }   /* pill-only header floats over the hero (regna-nav.css) */
@media (max-width: 809px){  :root{ --rn-page-pad: 20px; --rn-hero-radius: 16px; } }

/* ---- 1. the first hero: in flow, 16:9, same column as the content ------------------------------------------- */
[data-framer-root] > [data-framer-name="Hero"]{
  position: relative !important; top: auto !important;
  box-sizing: border-box;
  width: min(var(--rn-page-max), calc(100% - 2 * var(--rn-page-pad))) !important; max-width: 100% !important;
  height: auto !important; min-height: 0 !important;
  aspect-ratio: 16 / 9;
  max-height: min(820px, 86svh);          /* short desktop viewports (1366x768): keep the next section reachable */
  margin: var(--rn-hero-top) auto 0 !important;
  padding: 24px !important;
  border-radius: var(--rn-hero-radius); overflow: hidden !important; isolation: isolate;
  background: #0b0b0d;                     /* behind the poster while the video loads */
}
/* the Framer video slot is absolute inset:0 inside the hero (framer-inline); the <video> gets object-fit:cover from
   regna-hero.js. The subject is centred in the source (1280x720), so the centre crop holds on every ratio. */
[data-framer-root] > [data-framer-name="Hero"] video{ object-position: 50% 50% !important; }
@media (max-width: 1199px){
  [data-framer-root] > [data-framer-name="Hero"]{ aspect-ratio: 4 / 3; max-height: min(760px, 80svh); }
}
@media (max-width: 809px){
  [data-framer-root] > [data-framer-name="Hero"]{ aspect-ratio: 4 / 5; max-height: min(620px, 78svh); padding: 20px !important; }
}
@media (max-height: 480px) and (orientation: landscape){
  [data-framer-root] > [data-framer-name="Hero"]{ aspect-ratio: 16 / 9; max-height: 88svh; padding: 16px !important; }
  [data-framer-root] > [data-framer-name="Hero"] h1, [data-framer-root] > [data-framer-name="Hero"] h1 *{ font-size: clamp(26px, 5vw, 40px) !important; }
}

/* Framer's own overlay (h1 "START PHOTOtoFIT TODAY", sub line, App Store / Google Play badges) is replaced by the
   editorial copy block below (.rn-hero-copy, injected by regna-hero.js from <template id="rn-hero-copy-tpl">, also
   server-rendered inside the hero). The Framer node stays in the DOM (hydration re-creates it anyway), just hidden. */
[data-framer-root] > [data-framer-name="Hero"] > [data-framer-name="Content"]{ display: none !important; }

/* ---- 1b. the copy block: badge top-left, headline + sub + 2 CTAs bottom-left, step status + pause bottom-right ---- */
.rn-hero-copy{
  position: absolute; inset: 0; z-index: 4; box-sizing: border-box;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto 1fr auto; min-width: 0;
  grid-template-areas: "badge top" "text text" "ctas status"; align-items: end;
  padding: 28px 32px 30px; color: #fff; text-align: left;
  font-family: Inter, "Inter Placeholder", system-ui, sans-serif;
  pointer-events: none;                      /* taps fall through to the hero (pause/resume); controls opt back in */
}
.rn-hero-copy::before{                       /* legibility: soft dark wash bottom + left, like the reference */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.5) 100%), linear-gradient(90deg, rgba(0,0,0,.38) 0%, rgba(0,0,0,0) 55%);
}
.rn-hero-copy > *{ position: relative; }
.rn-hero-badge{
  grid-area: badge; align-self: start; justify-self: start; pointer-events: auto;
  display: inline-block; background: #b90a2e; color: #fff; font-weight: 600; font-size: 12px; line-height: 1;
  letter-spacing: .02em; padding: 8px 14px; border-radius: 999px; text-decoration: none;
}
.rn-hero-text{ grid-area: text; align-self: end; max-width: min(620px, 100%); }
/* !important on the type: below 1200px regna-responsive.css sizes every h1/p inside [Hero] (clamp(32px, 7.4vw, 64px))
   and the Codazon theme restyles h1 — this block is a design of its own. */
.rn-hero-copy, .rn-hero-copy .rn-hero-title, .rn-hero-copy .rn-hero-sub, .rn-hero-copy .rn-btn, .rn-hero-copy .rn-hero-step, .rn-hero-copy .rn-hero-badge{
  font-family: Inter, "Inter Placeholder", system-ui, sans-serif !important;
}
.rn-hero-title{
  margin: 0 !important; font-weight: 700 !important; font-size: clamp(34px, 4.6vw, 70px) !important; line-height: 1.02 !important;
  letter-spacing: -.035em !important; color: #fff !important; text-transform: none !important; white-space: normal !important;
}
.rn-hero-sub{ margin: 14px 0 0 !important; font-weight: 400; font-size: clamp(13px, 1.05vw, 16px) !important; line-height: 1.5 !important; max-width: 48ch; color: rgba(255,255,255,.92) !important; }
.rn-hero-ctas{ grid-area: ctas; display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; pointer-events: auto; }
.rn-btn{
  display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 20px; border-radius: 999px;
  font-family: inherit; font-weight: 600; font-size: 14px; line-height: 1; color: #fff !important; text-decoration: none !important;
  background: rgba(14,14,16,.82); border: 1px solid rgba(255,255,255,.14);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: background .2s ease, transform .2s ease;
}
.rn-btn:hover{ background: rgba(14,14,16,.95); }
.rn-btn--ghost{ background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.24); }
.rn-btn--ghost:hover{ background: rgba(255,255,255,.26); }
.rn-btn:focus-visible{ outline: 2px solid #fff; outline-offset: 3px; }
.rn-btn svg{ width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; }
.rn-hero-status{ grid-area: status; justify-self: end; align-self: end; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; pointer-events: auto; }
.rn-hero-status-row{ display: flex; align-items: center; gap: 14px; }
.rn-hero-step{ font-weight: 500; font-size: 12px; line-height: 1; letter-spacing: .01em; color: rgba(255,255,255,.92); white-space: nowrap; }
.rn-hero-bars{ display: flex; gap: 6px; }
.rn-hero-bars i{ display: block; width: 48px; height: 3px; border-radius: 2px; background: rgba(255,255,255,.28); overflow: hidden; position: relative; }
.rn-hero-bars i::after{ content: ""; position: absolute; inset: 0; background: #fff; transform: scaleX(var(--p, 0)); transform-origin: left center; }
/* the pause/play control (regna-hero.js): compact circle in the status row, state always visible (reference) */
.rn-hero-toggle{
  position: static; width: 36px; height: 36px; margin: 0; border: 1px solid rgba(255,255,255,.18); border-radius: 50%; padding: 0;
  background: rgba(255,255,255,.18); color: #fff; display: grid; place-items: center; cursor: pointer;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 1; pointer-events: auto; transition: background .2s ease;
}
.rn-hero-toggle:hover{ background: rgba(255,255,255,.3); }
.rn-hero-toggle:focus-visible{ outline: 2px solid #fff; outline-offset: 3px; }
.rn-hero-toggle svg{ width: 16px; height: 16px; fill: currentColor; display: block; }
@media (max-width: 1199px){
  .rn-hero-copy{ padding: 24px 24px 26px; }
  .rn-hero-title{ font-size: clamp(32px, 5.6vw, 56px) !important; }
  .rn-hero-bars i{ width: 36px; }
}
@media (max-width: 1099px){
  /* pill-only header (regna-nav.css): the REGNA + Menu pill floats centred over the top ~80px of the hero → start the
     badge / status row below it */
  .rn-hero-copy{ padding-top: 92px; }
}
@media (max-width: 809px){
  .rn-hero-copy{ grid-template-areas: "badge status" "text text" "ctas ctas"; padding: 92px 18px 20px; }
  .rn-hero-status{ align-self: start; }
  .rn-hero-bars, .rn-hero-step{ display: none; }  /* phones: the pause control only — label + 4 bars need ~250px the 320–390px hero has not got */
  .rn-hero-title{ font-size: clamp(30px, 9.4vw, 38px) !important; }
  .rn-hero-sub{ font-size: 13px !important; margin-top: 10px !important; }
  .rn-hero-ctas{ margin-top: 16px; gap: 8px; }
  .rn-btn{ height: 40px; padding: 0 16px; font-size: 13px; }
}
@media (max-height: 480px) and (orientation: landscape){
  .rn-hero-copy{ padding: 88px 20px 16px; }
  .rn-hero-title{ font-size: clamp(24px, 4.2vw, 34px) !important; }
  .rn-hero-sub{ font-size: 12px !important; margin-top: 8px !important; max-width: 52ch; }
  .rn-hero-ctas{ margin-top: 12px; }
  .rn-btn{ height: 36px; padding: 0 14px; font-size: 13px; }
  .rn-hero-toggle{ width: 32px; height: 32px; }
}
@media (prefers-reduced-motion: reduce){ .rn-btn, .rn-hero-toggle{ transition: none; } }

/* ---- 2. the scroll-to-play runway: two empty spacers (50vh + 450vh) that only existed to scroll the sticky hero --- */
[data-framer-root] > [data-framer-name="Contet"],
[data-framer-root] > [data-framer-name="Scroll"]{ display: none !important; }

/* ---- 3. post-hero canvas: white page, content column as wide as the hero ------------------------------------- */
body.regna-landing-page{ background: #fff !important; }
[data-framer-root] > [data-framer-name="Main"]{ background: #fff; }
@media (min-width: 1200px){
  [data-framer-root] > [data-framer-name="Main"]{
    width: min(var(--rn-page-max), calc(100% - 2 * var(--rn-page-pad))) !important; max-width: 100% !important;
    margin-left: auto; margin-right: auto;
  }
  /* "Built for Your Body. Built for Performance." — the 2 cards span the column (Framer capped the container at 1260) */
  [data-framer-name="Main"] > [data-framer-name="Features"] > [data-framer-name="Container"]{ max-width: 100% !important; }
  /* two balanced cards: Framer fixes the left card ("03") at 554px and lets the right one grow — share the row instead
     (same rule regna-responsive.css already applies below 1200px); heights stay Framer's 590/591. */
  [data-framer-name="Main"] > [data-framer-name="Features"] [data-framer-name="Grid"] > *{ flex: 1 1 0 !important; width: auto !important; min-width: 0 !important; }
}

/* ---- 4. page root + footer -------------------------------------------------------------------------------- */
/* After hydration Framer's layout-template root (#main > div, flex column, align-items:center) paints #f7f7f7 behind
   the whole page (the body only shows through below it). White, like the body. */
.regna-landing-page #main > div{ background: #fff !important; }
/* The footer is NOT inside [Main]: it is a sibling of the page root inside that layout root, in a 1200px-wide Framer
   container (div.framer-…-container > footer[data-framer-name="Desktop"], overflow:hidden) — so it sat as a 1200px
   block on the page. Full-bleed background; the inner [Container] keeps the page column (same max + gutters as the hero). */
.regna-landing-page #main > div > div:has(> footer),
.regna-landing-page #main > div > div:has(> footer) > footer{ width: 100% !important; max-width: none !important; }
.regna-landing-page #main > div > div:has(> footer) > footer > [data-framer-name="Main"]{
  width: 100% !important; max-width: none !important; padding-left: var(--rn-page-pad) !important; padding-right: var(--rn-page-pad) !important;
}
.regna-landing-page #main > div > div:has(> footer) > footer > [data-framer-name="Main"] > [data-framer-name="Container"]{
  max-width: var(--rn-page-max) !important;
}