/* ============================================================
   Home — every element placed at its exact Figma coordinate
   inside the fixed 1440 canvas. (x,y,w,h taken from "Home - Desktop".)
   Mobile overrides at the bottom reflow to a single column.
   ============================================================ */

/* ============== HERO (frame 530, region y144–674) ============== */
.hero { --band: #d8e8db; }
.hero .frame { height: 530px; }
.hero__wave-m { display: none; }   /* mobile-only wave piece (desktop uses the page overlay) */

/* Hero stripe rebuilt as inline SVG: #d8e8db pill above the curve (hero --band),
   white below-left, layered green/olive/dark band riding the curve, sweeping up
   to the header on the left and running flat off the right edge (full-bleed). */
/* Wave = a PAGE-LEVEL overlay (child of #stage-wrap, the full-viewport-width
   container — see partials/hero-wave.php), so it anchors to the SCREEN, not the
   centred 1440 stage: left:0 is the screen's left edge. It scales to match the design
   via --stage-scale (set by main.js) and sits on top of the stage.
     left  -> screen X (negative pulls the ramp off-screen, 0 = screen edge)
     top   -> header(144) + wave offset(66) = 210, scaled to track the hero */
.hero__wave {
    position: absolute;
    left: -10%;                                   /* off the screen's left edge; negative pulls the ramp further off */
    top: calc(66px * var(--stage-scale, 1));      /* wave offset into the hero (header is now lifted out of #stage-wrap) */
    width: 300vw;                                 /* room for the flat band to bleed right at any left offset */
    height: calc(490px * var(--stage-scale, 1));  /* clip just past the band so this on-top layer covers the hero only */
    overflow: hidden;
    z-index: 5;
    pointer-events: none;
}
/* The ramp AND the flat band are one SVG now (the stripe paths run right to x6000), so
   overflow:visible lets the band bleed past the viewBox — the .hero__wave overlay clips it.
   Drawing the band as the same layered stripe paths (not a separate CSS gradient) removes
   the join that hairlined between the two children under the fractional #stage scale. */
.hero__wave__ramp {
    position: absolute;
    left: 0;
    top: 0;
    width: calc(463px * var(--stage-scale, 1));
    height: calc(600px * var(--stage-scale, 1));
    display: block;
    overflow: visible;
}

.hero__title {
    position: absolute; left: 210px; top: 40px; width: 500px;   /* clear of the hero panels (start at x744) */
    z-index: 1;
    font-size: 56px; font-weight: 700; line-height: 1;
    letter-spacing: -2.8px; color: #231f20;
}
.hero__lead {
    position: absolute; left: 210px; top: 116px; width: 500px;   /* clear of the hero panels (start at x744) */
    z-index: 1;
    font-size: 22px; font-weight: 300; line-height: 1.3; color: #231f20;
}
.hero__col {
    position: absolute; top: 194px; z-index: 1;
    display: grid; gap: 6px; font-size: 18px; font-weight: 300;
}
.hero__col li { line-height: 1.2; }
.hero__col--1 { left: 215px; width: 240px; }
.hero__col--2 { left: 468px; width: 211px; }

.hero__cta {
    position: absolute; left: 275px; top: 320px;
    width: auto; height: 54px; min-height: 0; padding: 0 24px;   /* shrink-to-fit so longer (e.g. ES) copy widens the button instead of wrapping */
    z-index: 1; font-size: 18px;
}

.hero__panels {
    position: absolute; right: 0; top: 0;
    width: 696px; height: 424px; z-index: 1;
    display: grid; grid-template-columns: repeat(3, 232px);
}
.hero__panel { display: grid; place-items: center; }
.hero__panel--dark  { background: #231f20; }
.hero__panel--green { background: var(--green); }
.hero__panel--olive { background: var(--olive); }
.hero__panel .mask-icon { color: #fff; }
.hero__panel--dark  .mask-icon { width: 60px;  height: 184px; }
.hero__panel--green .mask-icon { width: 149px; height: 153px; }
.hero__panel--olive .mask-icon { width: 115px; height: 138px; }

/* Spanish: the hero title "Cualquier high es un DWI." wraps to 2 lines (vs 1 in EN),
   so nudge the lead / substance list / CTA down to clear it — while keeping the CTA
   above the wave band (~563). Scoped to .lang-es so English + mobile are untouched
   (on mobile these are static, so `top` is a no-op). */
.lang-es .hero__title { font-size: 45px; }
.lang-es .hero__lead { top: 120px; }
.lang-es .hero__col  { top: 200px; }
.lang-es .hero__cta  { left: 215px; top: 330px; }

/* ============== RISK (frame 361, region y674–1035) ============== */
.risk { --band: var(--white); }
.risk .frame { height: 361px; }
.risk__title { position: absolute; left: 206px; top: 90px; width: 508px; z-index: 1; font-size: 32px; font-weight: 700; line-height: 1; letter-spacing: -1.28px; color: #231f20; }
.risk__body  { position: absolute; left: 206px; top: 171px; width: 486px; z-index: 1; font-size: 18px; font-weight: 400; line-height: 24px; color: #080e10; }
.risk__crash { position: absolute; left: 885px; top: 57px; width: 208px; height: 94px; z-index: 1; }
.risk__stat  { position: absolute; left: 758px; top: 169px; width: 473px; z-index: 1; font-size: 32px; font-weight: 700; line-height: 32px; letter-spacing: -1.28px; color: #231f20; }
/* EN runs a touch wider at this size; ES stays at 470 desktop. Both reset to full width on mobile (below). */
.lang-es .risk__stat { width: 470px; }
.risk__stat .em { color: var(--green); font-weight: 700; }
/* superscript raised visually but NOT via vertical-align:super (which inflates
   the line box and shoves the line down) — position:relative keeps every line
   at the exact 32px line-height from Figma */
.risk__stat sup { font-size: .645em; vertical-align: baseline; position: relative; top: -.42em; line-height: 0; }
/* the superscript marker is underlined at rest (under the number, via the sup) so the
   citation link isn't distinguished by colour alone — WCAG 1.4.1 */
.risk__stat .stat__ref { color: var(--green-rich); text-decoration: none; }
.risk__stat .stat__ref sup { text-decoration: underline; text-underline-offset: 2px; margin-left: 5px; }   /* nudge off the period so the underline doesn't touch it */

/* ============== TAKE A SPIN (frame 320, region y1035–1355) ============== */
.spin { --band: var(--dark); color: var(--cream); }
.spin .frame { height: 320px; }
/* title + body + CTA flow in one block so the button always sits below the body
   with consistent spacing, whatever the copy length (EN short / ES longer). */
.spin__copy  { position: absolute; left: 628px; top: 71px; width: 660px; z-index: 1; }
.spin__title { margin: 0; font-size: 32px; font-weight: 700; line-height: 32px; letter-spacing: -1.28px; color: #fff; }
.spin__body  { margin: 18px 0 0; max-width: 601px; font-size: 18px; font-weight: 400; line-height: 24px; color: #fff; }
.spin__cta   { margin-top: 28px; width: 179px; height: 54px; min-height: 0; padding: 0; font-size: 18px; }
/* Flat grey placeholder = the spinner image area: a full-height square
   (top edge to bottom edge). A flat square image drops in here later. */
.spin__visual { position: absolute; left: 242px; top: 0; width: 320px; height: 320px; z-index: 1; background: #231f20 url('../img/spin-cta.webp') center center / cover no-repeat; }
body.lang-es .spin__visual { background-image: url('../img/spin-cta-es.webp'); }   /* Spanish spinner CTA composite */

/* ============== COST (frame 331, region y1355–1686) ============== */
.cost { --band: var(--white); color: var(--ink); }
.cost .frame { height: 331px; }
.cost__stripe { position: absolute; left: 50%; transform: translateX(-50%); width: max(100%, 100vw); height: 103px; z-index: 0; }
.cost__stripe--1 { top: 25px;  background: var(--olive); }
.cost__stripe--2 { top: 128px; background: var(--green); }
.cost__stripe--3 { top: 228px; background: var(--dark); }
.cost__dwi { position: absolute; left: 282px; width: 173px; z-index: 1; }
.cost__dwi--1 { top: 36px;  height: 79px; }   /* DWI + bottle  (viewBox 173x79)  */
.cost__dwi--2 { top: 139px; height: 76px; }   /* DWI + leaf    (viewBox 173x75.6) */
.cost__dwi--3 { top: 237px; height: 79px; }   /* DWI + pills   (viewBox 173x78.8) */

.cost__card {
    position: absolute; left: 568px; top: 25px; width: 662px; min-height: 290px; z-index: 2;
    box-sizing: border-box;
    background: #e6f1e8; color: var(--ink);
    border-radius: 0 0 12px 12px;   /* square top (cut off at bars), rounded bottom */
    overflow: hidden;
    /* title + CTA flow as a centred column (not absolute) so applied text-spacing pushes the CTA
       down instead of overlapping it (WCAG 1.4.12); min-height lets the card grow. Mirrors mobile. */
    display: flex; flex-direction: column; justify-content: center; gap: 17px; padding: 24px 60px;
}
/* handcuffs watermark — sized + placed to the Figma (node 234:22: 349×307 at card x273/y16,
   bleeding off the bottom-right) and flipped horizontally per request */
.cost__cuffs { position: absolute; right: 20px; top: -6px; width: 349px; height: 307px; color: rgba(50,135,63,.12); z-index: 0; transform: scaleX(-1); }
.cost__card .cost__title { position: static; width: 500px; max-width: 100%; z-index: 1; font-size: 32px; font-weight: 700; line-height: 32px; letter-spacing: -1.28px; color: #231f20; }
.cost__cta { position: static; align-self: flex-start; width: auto; height: 54px; min-height: 0; padding: 0 24px; z-index: 1; font-size: 18px; }   /* shrink-to-fit so longer (e.g. ES) copy widens the button */

/* ============== TESTIMONIALS (frame 731, region y1686–2417) ============== */
.stories { --band: #e6f1e8; }
.stories .frame { height: 731px; }
.stories__title { position: absolute; left: 0; top: 34px; width: 100%; text-align: center; z-index: 1; font-size: 32px; font-weight: 700; letter-spacing: -1.28px; color: #505444; }
.stories__body  { position: absolute; left: 0; top: 73px; width: 100%; text-align: center; z-index: 1; font-size: 18px; font-weight: 400; line-height: 22px; color: #505444; }
.stories__video { position: absolute; left: 281px; top: 125px; width: 877px; height: 495px; z-index: 1; border-radius: var(--r-lg); overflow: hidden; background: var(--dark); box-shadow: var(--shadow-soft); }
.stories__video iframe { width: 100%; height: 100%; border: 0; display: block; }
/* thumbnail has baked-in text, so the play button sits bottom-left (matches testimonials) */
.stories__video .yt-facade__play { left: 16px; top: auto; right: auto; bottom: 16px; transform: none; }
.stories__video .yt-facade:hover .yt-facade__play,
.stories__video .yt-facade:focus-visible .yt-facade__play { transform: scale(1.08); }
.stories__cta { position: absolute; left: 614px; top: 653px; width: 211px; height: 54px; min-height: 0; padding: 0; z-index: 1; font-size: 18px; }

/* ============== REFERENCES (dark band above footer, region y2417–2545) ============== */
.refs { --band: #231f20; }
/* fluid: the band hugs the citation with the SAME top/bottom padding in any language
   (was a fixed 128px height that left a big gap under the shorter English copy) */
.refs .frame { height: auto; padding: 34px 0; }
/* match the testimonials video column above (left 281, width 877) */
.refs__item { width: 877px; max-width: 100%; margin: 0 auto; z-index: 1; font-size: 16px; line-height: 22px; color: rgba(244, 247, 238, .7); }
.refs__item a { color: #fff; word-break: break-word; text-decoration: underline; text-decoration-color: rgba(255,255,255,.4); transition: color var(--dur) var(--ease), text-decoration-color var(--dur) var(--ease); }
.refs__item a:hover, .refs__item a:focus-visible { color: var(--green-light); text-decoration-color: currentColor; }
.refs__item a:focus-visible { outline: 2px solid var(--green-light); outline-offset: 2px; border-radius: 2px; }

/* ============================================================
   MOBILE (< 760px) — flatten the fixed canvas, single column.
   (Mobile will get its own pixel pass against the iPhone frames.)
   ============================================================ */
@media (max-width: 759px) {
    /* the desktop page-overlay wave is hidden; mobile gets its own piece (below) */
    .hero__wave { display: none; }

    /* HERO — single column: title, lead, the 7-item list, button, 3 panels */
    .hero .frame { display: flex; flex-direction: column; gap: 16px; padding-block: 30px 0; }
    .hero__title { font-size: 40px; line-height: 1.05; letter-spacing: -1.6px; }
    .hero__lead  { font-size: 18px; }
    .hero__col   { display: grid; }
    .hero__col--2 { margin-top: -8px; }                 /* the two columns read as one list */
    .hero__cta   { width: 100%; height: 54px; margin-top: 8px; }
    /* panels span edge-to-edge (Figma mobile); the wave piece peeks out below them.
       The `.hero .frame …` selector beats the base reset's max-width:100%, which
       otherwise caps these at the gutter so they never reach the right edge. */
    .hero .frame .hero__panels { max-width: none; width: calc(100% + 2 * clamp(20px, 7.5vw, 30px)); height: 190px; grid-template-columns: repeat(3, 1fr); margin: 6px calc(-1 * clamp(20px, 7.5vw, 30px)) 0; z-index: 1; }
    .hero__panel .mask-icon { width: 44%; height: 44%; }
    /* the wave sits IN FRONT of the panels (z-index 2 > 1). The element is the full Figma
       wave height (275); the big negative margin seats it so its band lands at the panels'
       bottom and the ramp rises over their left. pointer-events:none so it can't block the CTA. */
    .hero .frame .hero__wave-m { display: block; max-width: none; width: calc(100% + 2 * clamp(20px, 7.5vw, 30px)); height: 274px; margin: -227px calc(-1 * clamp(20px, 7.5vw, 30px)) 0; z-index: 2; pointer-events: none; }

    /* RISK / TESTIMONIALS — single column */
    .risk .frame, .stories .frame { display: flex; flex-direction: column; gap: 16px; padding-block: 40px; }
    .risk__crash { width: 200px; height: auto; aspect-ratio: 208 / 94; }   /* keep the car-crash ratio */
    .risk__stat, .lang-es .risk__stat { width: 100%; }   /* both langs full-width on mobile (resets the .lang-es desktop override too) */

    /* references — give the citation breathing room (was flush to the band) */
    .refs .frame { display: block; padding: 28px clamp(20px, 7.5vw, 30px); }   /* gutter sides (Figma 371:67 sits at the 30px margin) */
    .refs__item  { width: 100%; }
    .stories__title { font-size: 30px; }
    .stories__video { width: 100%; height: auto; aspect-ratio: 16 / 9; }
    .stories__cta   { width: 100%; }

    /* TAKE A SPIN — visual on top, copy below */
    .spin .frame  { display: flex; flex-direction: column; gap: 20px; padding-block: 40px; }
    .spin__visual { order: -1; width: 100%; height: 296px; }
    .spin__cta    { width: 100%; }

    /* COST — stacked olive/green/dark stripes, each overlaid with its DWI lockup,
       then the card. Grid lets the stripe + lockup share one cell with no markup
       change (desktop keeps its absolute layout untouched). */
    .cost { --band: var(--dark); }
    .cost .frame {
        display: grid;
        grid-template-rows: repeat(3, 104px) auto;
        padding-inline: 0;                 /* stripes go edge-to-edge */
        padding-block: 0 44px;
    }
    .cost__stripe { display: block; position: static; width: auto; height: auto; align-self: stretch; }
    .cost__stripe--1 { grid-area: 1 / 1; }
    .cost__stripe--2 { grid-area: 2 / 1; }
    .cost__stripe--3 { grid-area: 3 / 1; }
    /* explicit aspect (the exported SVGs report a bogus intrinsic, so height:auto distorts) */
    .cost__dwi { justify-self: center; align-self: center; width: 168px; height: auto; }
    .cost__dwi--1 { grid-area: 1 / 1; aspect-ratio: 173 / 79; }
    .cost__dwi--2 { grid-area: 2 / 1; aspect-ratio: 173 / 76; }
    .cost__dwi--3 { grid-area: 3 / 1; aspect-ratio: 173 / 79; }
    .cost .frame .cost__card {             /* extra specificity to beat the base mobile static-reset */
        grid-area: 4 / 1;
        position: relative !important;     /* so the cuffs anchor to the card, not escape upward */
        width: auto; min-height: 344px; height: auto;
        margin: 28px clamp(20px, 7.5vw, 30px) 0;
        padding: 120px 26px 30px;          /* top room for the centred cuffs */
        border-radius: 12px;               /* fully rounded on mobile (not cut off at the bars) */
        display: flex; flex-direction: column; gap: 22px;
        text-align: center; overflow: hidden;
    }
    /* icon is ~square (115×106); a ~square box + the default contain fills it like Figma */
    .cost__cuffs { display: block; left: 50%; right: auto; margin-left: -94px; top: 14px; width: 188px; height: 166px; color: rgba(50, 135, 63, .18); transform: scaleX(-1); }
    .cost__card .cost__title { position: relative; left: auto; top: auto; z-index: 1; width: auto; margin: 0; }
    .cost__cta { position: relative; left: auto; top: auto; z-index: 1; width: auto; align-self: center; margin-top: 0; }
}

/* Take a Spin mini CTA spinner — component styles live in spin-mini.css (shared with tips).
   This stays here because it's home-specific: keep .spin__visual a positioned containing block
   for the absolute .spin-mini overlay on mobile, where base.css resets .frame children to
   position:static!important (.spin__visual stays an in-flow flex item, so order:-1 is unaffected). */
@media (max-width: 759px) { .spin .frame .spin__visual { position: relative !important; } }