/* Hallmark · genre: modern-minimal (custom) · macrostructure: existing (redesign, single-page x3)
 * theme: custom "Blueprint Industrial" · paper: oklch(99% 0.004 92) · ink: #1c1c1c · accent: #FFE35B (warm ~92°)
 * display: Big Shoulders 700/800 (condensed) · body: Inter · mono: IBM Plex Mono
 * shape language: chamfer (--chamfer-*, technical containers) vs pill (CTAs only) — no uniform border-radius
 * studied: no · tone: technical / engineering / CAD, not SaaS — brief explicitly rejects rounded-card dashboard look
 */

/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    /* Native smooth scrolling is intentionally left off: it fights with
       GSAP ScrollTrigger's pin/scrub calculations, causing the pinned
       frame-scroll section to lag and stutter. Anchor links get their
       smooth scroll from script.js (scrollIntoView) instead. */
}

body {
    opacity: 0;
    transition: opacity 0.5s ease;
    font-family: 'Inter', sans-serif;
    line-height: 1.6;
    color: var(--text-color);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}

body.loaded {
    opacity: 1;
}

.header-logo-de{
    max-width: 300px;
}

/* Site header/logo — kept up here, before every @media block, so the
   180px/220px mobile sizing further down in the file (inside old
   max-width:768px blocks) can actually win the cascade instead of being
   silently overridden by these same-specificity base rules appearing
   later in source order. */
.logo-container {
    /* Transparent and fixed so it floats over the hero instead of pushing
       it down in normal flow — that bar's height used to sit above the
       100vh hero, so the fold was never really "full screen". Floating it
       reclaims that space for the image. */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1.25rem 0;
    margin-bottom: 0;
    background-color: transparent;
    border-bottom: 1px solid transparent;
    transition: background-color 0.3s ease, border-color 0.3s ease, padding 0.3s ease;
}

/* Solidifies once the page scrolls past the hero, so the transparent
   navbar doesn't sit illegibly over busy content further down. Toggled
   by script.js. */
.logo-container.scrolled {
    background-color: rgba(236, 236, 234, 0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(28, 28, 28, 0.08);
    padding: 0.85rem 0;
}

.header-logo {
    max-width: 240px;
    height: auto;
    display: block;
    margin: 0 auto;
}

.loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--primary-yellow);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: var(--z-loader);
    opacity: 1;
    transition: opacity 0.5s ease;
}

.loader.hidden {
    opacity: 0;
    /* Otherwise this full-screen overlay keeps intercepting taps for the
       ~0.5s fade (plus the JS delay before it), swallowing the first
       touch on mobile right after the page becomes usable. */
    pointer-events: none;
}

.loader-icon {
    width: 80px;
    height: 80px;
    animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
    0% {
        transform: scale(0.8);
        opacity: 0.5;
    }
    50% {
        transform: scale(1.2);
        opacity: 1;
    }
    100% {
        transform: scale(0.8);
        opacity: 0.5;
    }
}

:root {
    --primary-yellow: #FFE35B;
    --primary-black: #1c1c1c;
    --text-color: #1c1c1c;
    --light-gray: #f5f5f5;
    --white: #ffffff;
    --dark-gray: #333333;
    --medium-gray: #666666;
    --hero-light-bg: #ececea;
    --transition-speed: 0.3s;

    /* Redesign tokens — no new colors: every shadow/tint below is one of
       the values above at reduced opacity, and the radius scale is just a
       shared set of numbers so cards/media/buttons read as one system. */
    --radius-lg: 24px;
    --radius-xl: 28px;
    --shadow-soft: 0 20px 50px rgba(28, 28, 28, 0.08);
    --shadow-soft-lg: 0 30px 70px rgba(28, 28, 28, 0.14);
    --hairline: 1px solid rgba(28, 28, 28, 0.1);
    --hairline-on-dark: 1px solid rgba(255, 255, 255, 0.14);

    /* Hallmark audit pass — token layer. Brand colours (yellow/black) are
       untouched hex, verbatim. The near-white surfaces were flat 0-chroma
       greys (oklch confirms it); this gives them a whisper of the brand's
       own warm hue (~92-97°, computed from #FFE35B) instead of a generic
       grey — same visual weight, no longer "pure white". */
    --color-paper: oklch(99% 0.004 92);      /* was var(--white) #fff */
    --color-paper-2: oklch(97% 0.005 92);    /* was var(--light-gray) #f5f5f5 */
    --color-paper-3: oklch(94% 0.005 95);    /* was var(--hero-light-bg) #ececea */

    /* Spacing — 4pt scale, named from values already in use across the
       site (not invented). */
    --space-2xs: 0.5rem;
    --space-xs: 0.75rem;
    --space-sm: 1rem;
    --space-md: 1.5rem;
    --space-lg: 2rem;
    --space-xl: 3rem;
    --space-2xl: 4rem;
    --space-3xl: 6rem;
    --space-4xl: 8rem;

    /* Radius scale — consolidates the site's scattered raw values
       (10px/18px/24px/28px/50px/50%) into named steps. */
    --radius-sm: 12px;
    --radius-md: 18px;
    --radius-pill: 999px;
    --radius-full: 50%;

    /* Z-index — six named levels, replaces ad-hoc numbers (incl. the
       loader's old z-index: 9999). */
    --z-base: 1;
    --z-raised: 10;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-modal: 400;
    --z-toast: 500;
    --z-loader: 1000;

    /* Blueprint Industrial system — condensed/mono type + a squared-off
       shape language, replacing the rounded-card "SaaS dashboard" look.
       No new brand colours: everything below is composed from the three
       above (ink/yellow/paper). */
    --font-condensed: "Big Shoulders", "Oswald", "Inter", sans-serif;
    --font-mono: "IBM Plex Mono", "Consolas", monospace;

    /* Chamfer — 45° cut corners for "technical" containers (product
       cards, data boxes, tables). Pill stays reserved for primary CTAs
       only (--radius-pill, already in use on buttons). */
    --chamfer-sm: 8px;
    --chamfer-md: 14px;

    /* box-shadow is clipped away by clip-path on the same element, so
       chamfered containers use these as `filter: drop-shadow(...)`
       instead — same values as --shadow-soft/-lg, filter syntax. */
    --shadow-soft-filter: drop-shadow(0 16px 30px rgba(28, 28, 28, 0.10));
    --shadow-soft-lg-filter: drop-shadow(0 22px 44px rgba(28, 28, 28, 0.16));

    /* Blueprint grid — thin hairlines on dark surfaces, the same
       light-on-dark grid language as a CAD tool's dark theme (not
       "blueprint blue": palette stays ink/yellow/paper only). */
    --blueprint-grid:
        linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    --blueprint-grid-size: 32px 32px;
}

/* Chamfered-corner utilities — the "technical container" half of the
   shape language. clip-path (not border-radius) cuts a true 45° corner;
   elevation moves to filter: drop-shadow() since box-shadow would get
   clipped by the same clip-path. Apply .chamfer-shadow only where the
   element previously had box-shadow: var(--shadow-soft*). */
.chamfer,
.chamfer-lg {
    clip-path: polygon(
        var(--chamfer-md) 0%, calc(100% - var(--chamfer-md)) 0%,
        100% var(--chamfer-md), 100% calc(100% - var(--chamfer-md)),
        calc(100% - var(--chamfer-md)) 100%, var(--chamfer-md) 100%,
        0% calc(100% - var(--chamfer-md)), 0% var(--chamfer-md)
    );
}

.chamfer-sm {
    clip-path: polygon(
        var(--chamfer-sm) 0%, calc(100% - var(--chamfer-sm)) 0%,
        100% var(--chamfer-sm), 100% calc(100% - var(--chamfer-sm)),
        calc(100% - var(--chamfer-sm)) 100%, var(--chamfer-sm) 100%,
        0% calc(100% - var(--chamfer-sm)), 0% var(--chamfer-sm)
    );
}

.blueprint-surface {
    background-image: var(--blueprint-grid);
    background-size: var(--blueprint-grid-size);
    background-position: center;
}

/* Language Switcher */
.language-switcher {
    position: fixed;
    top: 20px;
    left: 20px;
    z-index: 1000;
}

.language-button {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background-color: var(--white);
    border: 2px solid var(--primary-black);
    border-radius: 30px;
    cursor: pointer;
    transition: all var(--transition-speed) ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.language-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    background-color: var(--light-gray);
}

.flag-icon {
    width: 20px;
    height: 15px;
    border-radius: 2px;
}

.language-button span {
    font-weight: 600;
    color: var(--primary-black);
    font-size: 0.9rem;
}

.language-chevron {
    color: var(--primary-black);
    transition: transform var(--transition-speed) ease;
}

.language-switcher.active .language-chevron {
    transform: rotate(180deg);
}

.language-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    min-width: 100%;
    max-height: 0;
    overflow: hidden;
    background-color: var(--white);
    border-radius: 16px;
    box-shadow: var(--shadow-soft-lg, 0 8px 24px rgba(0, 0, 0, 0.15));
    opacity: 0;
    transition: max-height 0.3s ease, opacity 0.3s ease;
}

.language-switcher.active .language-dropdown {
    max-height: 200px;
    opacity: 1;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.language-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.language-option:hover {
    background-color: var(--light-gray);
}

.language-option span {
    font-weight: 600;
    color: var(--primary-black);
    font-size: 0.9rem;
}

/* Utility Classes */
.fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

.section-title {
    /* Big Shoulders — condensed, drawn from Chicago industrial signage
       lettering. Uppercase + open tracking reads as a nameplate/panel
       label, the "segnaletica industriale" the brief asked for, instead
       of the rounded geometric-sans-headline every SaaS template uses.
       Fluid clamp() scales smoothly instead of jumping at breakpoints. */
    font-family: var(--font-condensed);
    font-style: normal;
    text-transform: uppercase;
    font-size: clamp(1.9rem, 1.5rem + 1.6vw, 2.6rem);
    margin-bottom: 2rem;
    text-align: center;
    font-weight: 800;
    letter-spacing: 0.01em;
}

/* One-line section intro, same treatment as .frame-scroll-description —
   generalized so any section can pair it under .section-eyebrow +
   .section-title instead of one-off scoped copy. */
.section-subtitle {
    max-width: 640px;
    margin: 0 auto 2.5rem;
    text-align: center;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--medium-gray);
}

/* Small uppercase "kicker" label used above section titles — same
   language as .hero-eyebrow, reused site-wide for consistency. */
.section-eyebrow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    font-size: 0.8rem;
    font-weight: 700;
    font-family: 'Inter', sans-serif;
    color: var(--dark-gray);
    margin-bottom: 0.75rem;
}

.section-eyebrow::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--primary-yellow);
    flex-shrink: 0;
}

/* Ghost wordmark texture, reusable anywhere a section wants the same
   low-contrast "IFR57" backdrop the hero already uses. */
.section-bg-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: "Fugaz One", sans-serif;
    font-size: clamp(6rem, 18vw, 13rem);
    line-height: 1;
    white-space: nowrap;
    letter-spacing: -0.02em;
    z-index: 0;
    pointer-events: none;
    user-select: none;
}

/* Hero Section — full-screen, light premium B2B look */
.hero {
    height: 100vh;
    position: relative;
    overflow: hidden;
    background-color: var(--hero-light-bg);
}

.fugaz-one {
    font-weight: 400;
    font-family: "Fugaz One", sans-serif;
    color: var(--primary-black);
}

/* Giant background wordmark */
.hero-bg-text {
    position: absolute;
    top: 46%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: "Fugaz One", sans-serif;
    font-size: clamp(6rem, 20vw, 15rem);
    line-height: 1;
    color: rgba(28, 28, 28, 0.045);
    white-space: nowrap;
    letter-spacing: -0.02em;
    z-index: 0;
    pointer-events: none;
    user-select: none;
}

.hero-visual {
    /* Full-bleed background layer: the image owns the whole hero, and the
       text below sits on top of it (with a scrim to stay legible) instead
       of being pushed into its own separate zone — a tighter, more
       editorial composition than stacking them. Extra bottom padding (no
       top padding) shifts the centered image upward. The navbar is now
       transparent and floats over the hero (see .logo-container), so
       there's no bar to clear at the top any more. */
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 5% 14rem;
    z-index: 1;
}

.hero-product-image {
    /* Sized by width only — no max-height. A height cap here means the
       image gets squeezed down below full width the moment vertical space
       is tight, which is exactly the "not full screen" look we don't
       want. .hero-visual is position:absolute so it can't push .hero
       taller than 100vh even if the image ends up overflowing it; the
       excess just gets cropped by .hero's own overflow:hidden. Source
       photo is 4000px wide, so it stays sharp at this scale on typical
       4K/5K viewports.

       max-width scales fluidly with viewport width: 100% of the hero's
       90vw content box from ~1200px up (desktop, unchanged), growing
       smoothly on narrower screens up to a 140% bleed/zoom by ~400px and
       below (mobile) — the smaller the screen, the more the product fills
       it. Expressed in vw/px (not %) throughout: mixing a plain
       percentage with a px offset in the same calc() doesn't scale the
       way you'd expect, since the px part stays a flat pixel amount
       instead of growing into a proportional percentage — this version
       avoids that by keeping everything in comparable length units.

       The left/right edge fade (--hero-img-fade) shrinks over the same
       viewport range and hits exactly 0 at the same 400px breakpoint
       where the zoom maxes out: at that bled-in mobile scale there's no
       side padding seam left to hide, so the fade has nothing left to do.
       It's built as (8% * a 0→1 ratio) so it stays a true percentage of
       the image's own (now-larger) width at every size, rather than a
       fixed pixel band that would shrink to nothing on its own anyway. */
    --hero-img-fade: calc(8% * clamp(0, (100vw - 400px) / 800px, 1));
    max-width: clamp(90vw, calc(90vw + (1200px - 100vw) * 0.18), 126vw);
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 40px 45px rgba(28, 28, 28, 0.16)) drop-shadow(0 10px 15px rgba(28, 28, 28, 0.1));
    mask-image: linear-gradient(to right, transparent 0%, #000 var(--hero-img-fade), #000 calc(100% - var(--hero-img-fade)), transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 var(--hero-img-fade), #000 calc(100% - var(--hero-img-fade)), transparent 100%);
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-size: 100% 100%;
    -webkit-mask-size: 100% 100%;
}

/* Floating pill CTA — the primary action in the hero, so it needs to read
   as unmissable: brand yellow, sized above the section's other buttons,
   with a soft looping pulse ring so it draws the eye even before anyone
   scrolls or moves the mouse, plus an arrow that nudges forward on hover. */
.hero-pill-cta {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    background-color: var(--primary-yellow);
    color: var(--primary-black);
    padding: 1.05rem 2.25rem;
    border-radius: var(--radius-pill);
    font-weight: 700;
    font-size: 1.05rem;
    text-decoration: none;
    white-space: nowrap;
    margin-bottom: 1.75rem;
    transition: all var(--transition-speed) ease;
    box-shadow: 0 12px 28px rgba(28, 28, 28, 0.28);
    animation: heroPillPulse 2.4s ease-out infinite;
}

.hero-pill-cta:hover {
    transform: translateY(-3px);
    background-color: var(--primary-black);
    color: var(--primary-yellow);
    box-shadow: 0 16px 32px rgba(28, 28, 28, 0.35);
    animation-play-state: paused;
}

.hero-pill-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background-color: var(--primary-black);
    color: var(--primary-yellow);
    flex-shrink: 0;
    transition: transform 0.3s ease, background-color 0.3s ease, color 0.3s ease;
}

.hero-pill-cta:hover .hero-pill-arrow {
    background-color: var(--primary-yellow);
    color: var(--primary-black);
}

.hero-pill-cta:hover .hero-pill-arrow {
    transform: translateX(5px);
}

@keyframes heroPillPulse {
    0% {
        box-shadow: 0 12px 28px rgba(28, 28, 28, 0.28), 0 0 0 0 rgba(255, 227, 91, 0.55);
    }
    70% {
        box-shadow: 0 12px 28px rgba(28, 28, 28, 0.28), 0 0 0 16px rgba(255, 227, 91, 0);
    }
    100% {
        box-shadow: 0 12px 28px rgba(28, 28, 28, 0.28), 0 0 0 0 rgba(255, 227, 91, 0);
    }
}

@media (max-width: 768px) {
    .hero-pill-cta {
        gap: 0.5rem;
        padding: 0.8rem 1.6rem;
        font-size: 0.95rem;
        margin-bottom: 1.4rem;
    }

    .hero-pill-arrow {
        width: 22px;
        height: 22px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-pill-cta {
        animation: none;
    }
}

/* Floating "request a sample" CTA — recalls the hero's primary action once
   the visitor has scrolled past the first viewport (hero is 100vh), so the
   conversion path stays reachable without following them down as a full
   sticky bar. Hidden by default; script.js toggles .is-visible on scroll. */
.floating-cta {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: var(--z-sticky);
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    background-color: var(--primary-yellow);
    color: var(--primary-black);
    padding: 0.9rem 1.75rem;
    border-radius: var(--radius-pill);
    font-weight: 700;
    font-size: 0.95rem;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 12px 28px rgba(28, 28, 28, 0.28);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(16px);
    transition: opacity 0.35s ease, transform 0.35s ease, visibility 0.35s ease, background-color 0.3s ease, color 0.3s ease;
}

.floating-cta.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

.floating-cta:hover {
    background-color: var(--primary-black);
    color: var(--primary-yellow);
    box-shadow: 0 16px 32px rgba(28, 28, 28, 0.35);
}

.floating-cta-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background-color: var(--primary-black);
    color: var(--primary-yellow);
    flex-shrink: 0;
    transition: transform 0.3s ease, background-color 0.3s ease, color 0.3s ease;
}

.floating-cta:hover .floating-cta-arrow {
    background-color: var(--primary-yellow);
    color: var(--primary-black);
    transform: translateX(4px);
}

@media (prefers-reduced-motion: reduce) {
    .floating-cta {
        transition: opacity 0.2s ease, visibility 0.2s ease;
        transform: none;
    }
}

@media (max-width: 480px) {
    .floating-cta {
        right: 16px;
        bottom: 16px;
        padding: 0.75rem 1.35rem;
        font-size: 0.85rem;
    }
}

.hero-overlay {
    /* Sits over the lower part of the image on purpose. The gradient's
       fade is a fixed 160px band pinned to the top of the box (not a
       percentage of it), so however tall the text content ends up being,
       it always lands on the fully solid part of the backdrop — only the
       empty strip above the text fades into the photo. */
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 2.5rem;
    flex-wrap: wrap;
    padding: 14rem 5% 3rem;
    background: linear-gradient(to top, var(--hero-light-bg) 0, var(--hero-light-bg) calc(100% - 160px), rgba(236, 236, 234, 0) 100%);
}

.hero-headline-block {
    max-width: 480px;
}

.hero-eyebrow {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--dark-gray);
    margin-bottom: 0.75rem;
}

.hero-eyebrow::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--primary-yellow);
    flex-shrink: 0;
}

.hero-headline-block h1 {
    font-size: clamp(2.8rem, 6vw, 4.5rem);
    line-height: 1;
    letter-spacing: -0.01em;
    margin-bottom: 0.6rem;
}

.hero-headline-block h2 {
    font-family: 'Inter', sans-serif;
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1.35;
    color: var(--dark-gray);
    margin: 0;
}

@media (min-width: 901px) {
    .hero-headline-block h2 {
        font-size: 1.2rem;
    }
}

.hero-description {
    max-width: 300px;
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--medium-gray);
    margin: 0 1rem 0.5rem;
}

/* Hero stats — CAD reference dimensions, not dashboard KPI cards. A
   vertical spine (the "dimension line") with a tick/extension line
   running to each value, echoing a technical drawing's callout language
   instead of a floating stat widget. No card box, no shadow, no rounded
   corners, no arrow badge. */
.hero-stats {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    flex-shrink: 0;
    padding-left: 1.4rem;
    border-left: 2px solid var(--primary-black);
}

/* Solid arrowhead triangles, not a rotated border corner — a rotated
   shape's tip lands wherever the transform math says it does, which is
   easy to get subtly wrong (and was, twice). A clip-path triangle has
   no rotation to verify: it's centered on the spine by translateX(-50%)
   the same way anything gets centered, and its apex sits exactly at
   the box's own edge (0%/100%) by construction. */
.hero-stats::before,
.hero-stats::after {
    content: '';
    position: absolute;
    left: -1px;
    width: 9px;
    height: 6px;
    transform: translateX(-50%);
    background-color: var(--primary-black);
}

.hero-stats::before {
    top: 0;
    clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
}

.hero-stats::after {
    bottom: 0;
    clip-path: polygon(50% 100%, 100% 0%, 0% 0%);
}

.hero-stat-card {
    position: relative;
    min-width: 200px;
    max-width: 240px;
}

/* Tick sits on the number itself (top: 50% + translateY), not a fixed
   em offset on the whole card — that guessed at the number's vertical
   centre and landed high; this is exact regardless of font-size/
   line-height. */
.hero-stat-number {
    position: relative;
    display: block;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--primary-black);
    margin-bottom: 0.25rem;
}

.hero-stat-number::before {
    content: '';
    position: absolute;
    left: -1.4rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1rem;
    height: 1px;
    background-color: var(--primary-black);
}

.hero-stat-card p {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    line-height: 1.4;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--medium-gray);
    margin: 0;
}

.hero-stat-card p strong {
    font-weight: 700;
    color: var(--primary-black);
}

@media (max-width: 900px) {
    /* Mobile drops the overlap: not enough room for image + scrim + text
       to all stay legible at once, so it goes back to a plain stack
       (image, then text) in normal flow. Height relaxes to auto too —
       stacked text can legitimately need more than one screen and must
       never get clipped. */
    .hero {
        height: auto;
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        padding-top: 0;
        overflow-x: hidden;
        overflow-y: visible;
    }

    .hero-visual {
        position: relative;
        inset: auto;
        flex: 1;
        min-height: 40vh;
        padding: 4.5rem 5% 1rem;
    }

    .hero-product-image {
        max-height: 40vh;
    }

    .hero-overlay {
        position: relative;
        left: auto;
        right: auto;
        bottom: auto;
        background: none;
        flex-direction: column;
        align-items: flex-start;
        padding: 0 5% 2.5rem;
    }

    .hero-description {
        margin: 1rem 0 0;
        max-width: 100%;
    }

    .hero-stats {
        width: 100%;
    }

    .hero-stat-card {
        max-width: none;
    }
}

/* Frame Scroll Section — pinned GSAP ScrollTrigger image sequence */
.frame-scroll-section {
    position: relative;
    /* 300vh of scrub distance for the frame sequence + 100vh of held
       "freeze" scroll before it starts and 100vh after it finishes (see
       START_FREEZE_VH/END_FREEZE_VH in frame-scroll.js), on top of the
       100vh occupied by the pinned view itself. */
    height: 600vh;
    background-color: #ffffff;
}

.frame-scroll-pin {
    height: 100vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* flex-start (not center): with justify-content:center, on short
       viewports the whole group gets pulled up as it grows, which can
       shove the header back underneath the fixed navbar and let the
       canvas run past the bottom of the pin. Anchoring to the top keeps
       the header's position independent of the viewport's height. */
    justify-content: flex-start;
    gap: 1rem;
    overflow: hidden;
    /* Top padding clears the fixed, always-on-top transparent navbar
       (.logo-container). Trimmed to make more room for a bigger canvas. */
    padding: 6rem 5% 1.5rem;
}

.frame-scroll-header {
    max-width: 640px;
    flex-shrink: 0;
    text-align: center;
    margin-top: 20px;
}

.frame-scroll-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--dark-gray);
    margin-bottom: 0.75rem;
}

.frame-scroll-eyebrow::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--primary-yellow);
    flex-shrink: 0;
}

.frame-scroll-pin .section-title {
    color: var(--primary-black);
    text-align: center;
    margin: 0 0 0.5rem;
    flex-shrink: 0;
}

.frame-scroll-description {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--medium-gray);
    margin: 0;
}

.frame-scroll-canvas-wrap {
    width: 100%;
    max-width: 1500px;
    height: 60vh;
    position: relative;
}

.frame-scroll-canvas {
    display: block;
    width: 100%;
    height: 100%;
}

/* Circular progress readout, driven by frame-scroll.js as the sequence
   scrubs — a small "you are here" detail for the pinned section. */
.frame-scroll-progress {
    position: absolute;
    right: 1.25rem;
    bottom: 1.25rem;
    display: flex;
    align-items: baseline;
    gap: 2px;
    padding: 0.6rem 1rem;
    border-radius: 50px;
    background-color: rgba(28, 28, 28, 0.85);
    border: var(--hairline-on-dark);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    opacity: 1;
    transition: opacity 0.4s ease;
}

/* Hidden once the feature callouts take over the frame — the "77/77"
   counter has nothing left to say once the scrub is done and the labels
   are the focus. */
.frame-scroll-progress.is-hidden {
    opacity: 0;
}

.frame-scroll-progress-number {
    font-family: var(--font-mono);
    font-style: normal;
    font-variant-numeric: tabular-nums;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--primary-yellow);
    min-width: 1.4em;
    text-align: right;
}

.frame-scroll-progress-total {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.6);
}

/* Feature callouts — fade in once the scrub settles on the last frame.
   Positions/lines are computed in frame-scroll.js from each callout's
   data-x/data-y (pixel coordinates on the source frame image), using the
   exact same fit/centering math the canvas itself draws with, so the
   line always lands on the right spot regardless of viewport size.

   Styled after a patent technical drawing — a thin straight lead line to
   a small ring marker, a numbered reference tag — rather than a generic
   dark UI tooltip: "Brevetti" is literally Italian for "patents", so the
   annotation language doubles as a quiet brand nod instead of borrowed
   dashboard chrome. */
.frame-scroll-callouts {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.frame-scroll-callouts.is-visible {
    opacity: 1;
}

.frame-scroll-callouts.is-visible .frame-scroll-callout {
    opacity: 1;
    transform: translateY(0);
}

.frame-scroll-callouts-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.frame-scroll-callout-line {
    stroke: rgba(28, 28, 28, 0.4);
    stroke-width: 1;
}

/* Plain marker dot (drawn in JS, see frame-scroll.js): black fill,
   yellow ring. */
.frame-scroll-callout-dot {
    fill: var(--primary-black);
    stroke: var(--primary-yellow);
    stroke-width: 1.5;
}

.frame-scroll-callout {
    position: absolute;
    width: max-content;
    max-width: 190px;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.6rem 0.85rem;
    background-color: rgba(28, 28, 28, 0.92);
    border: 1px solid rgba(255, 227, 91, 0.3);
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.5s ease, transform 0.5s ease;
    transition-delay: var(--callout-delay, 0s);
}

.frame-scroll-callout--separator { --callout-delay: 0s; }
.frame-scroll-callout--frames { --callout-delay: 0.08s; }
.frame-scroll-callout--width { --callout-delay: 0.16s; }
.frame-scroll-callout--ir { --callout-delay: 0.24s; }
.frame-scroll-callout--brackets { --callout-delay: 0.32s; }

.frame-scroll-callout-num {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 0.3rem;
    background-color: var(--primary-yellow);
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 0.7rem;
    line-height: 1;
    color: var(--primary-black);
}

.frame-scroll-callout p {
    margin: 0;
    font-family: 'Inter', sans-serif;
    font-size: 0.72rem;
    letter-spacing: 0.005em;
    line-height: 1.45;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.72);
}

.frame-scroll-callout p strong {
    font-weight: 700;
    color: #ffffff;
}

/* Laid out around the product's own shape: the chain's C-bend sits on
   the left, so the three features anchored on that side (separator,
   frame bars, IR ring on the lower run) get the left column, while the
   two on the open right side (width marker on the lower run, mounting
   bracket at the end of the upper run) get the right column — each
   leader line stays short and none cross each other. */
.frame-scroll-callout--separator {
    top: 4%;
    left: 1%;
}

.frame-scroll-callout--frames {
    top: 42%;
    left: 0;
}

.frame-scroll-callout--ir {
    bottom: 12%;
    left: 2%;
}

.frame-scroll-callout--brackets {
    top: 2%;
    right: 2%;
    flex-direction: row-reverse;
    text-align: right;
}

.frame-scroll-callout--width {
    top: 46%;
    right: 0;
    flex-direction: row-reverse;
    text-align: right;
}

/* Screen-reader-only by default: the connecting lines have no meaning to
   assistive tech, so the accessible copy lives here instead, and only
   becomes the actual visible layout under the mobile breakpoint below. */
.frame-scroll-callouts-list {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (max-width: 768px) {
    .frame-scroll-section {
        /* 140vh scrub + 30vh freeze before + 30vh freeze after, on top of
           the 100vh pinned view (see MOBILE_* in frame-scroll.js). Kept
           much shorter than desktop: a touch flick with momentum covers
           several viewports at once, so the long desktop holds read as
           the page being "stuck" rather than as a deliberate pause. */
        height: 300vh;
    }

    .frame-scroll-pin {
        gap: 1rem;
        padding: 6rem 5% 1.5rem;
        /* Small-viewport height, so the pinned view never slides under
           the mobile browser's address bar as it shows/hides. */
        height: 100svh;
    }

    .frame-scroll-description {
        font-size: 0.9rem;
    }

    .frame-scroll-canvas-wrap {
        height: 46vh;
    }

    /* These callout annotations are desktop/tablet-only: leader
       lines don't survive a narrow, tall viewport, and a plain list
       version was tried and rejected (it pushed the scroll section's
       total height around and delayed the handoff to the next section).
       On mobile the scroll animation just ends and the next section
       follows immediately, with no callout content at all. */
    .frame-scroll-callouts,
    .frame-scroll-callouts-list {
        display: none;
    }
}

/* CTA Button */
.cta-button {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    background-color: var(--primary-black);
    color: var(--primary-yellow);
    border: 2px solid var(--color-paper);
    padding: 1rem 1.25rem 1rem 2rem;
    font-size: 1.2rem;
    border-radius: var(--radius-pill);
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
}

/* Circular icon integrated into the pill, echoing .hero-pill-arrow. */
.cta-button-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: var(--primary-yellow);
    color: var(--primary-black);
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

.cta-button:hover .cta-button-arrow {
    transform: translateX(3px);
}

.cta-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    background-color: var(--primary-black);
    border-color: var(--primary-yellow);
}

.cta-button:active {
    transform: translateY(1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: all 0.1s ease;
}

.cta-button::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 5px;
    height: 5px;
    background: rgba(255, 255, 255, 0.5);
    opacity: 0;
    border-radius: 100%;
    transform: scale(1, 1) translate(-50%);
    transform-origin: 50% 50%;
}

.cta-button:focus:not(:active)::after {
    animation: ripple 1s ease-out;
}

@keyframes ripple {
    0% {
        transform: scale(0, 0);
        opacity: 0.5;
    }
    100% {
        transform: scale(20, 20);
        opacity: 0;
    }
}

/* Features Section */
.features {
    padding: 7rem 5%;
    background-color: var(--color-paper);
}

.features .section-title,
.features h3 {
    color: var(--primary-black);
}

.features p {
    color: var(--medium-gray);
}

/* Feature callouts — full-bleed product photo with a compact row of
   bordered caption cards directly beneath it. Grid-based (not the
   absolute/percent positioning this used to have) so the cards stay
   tight to the image and to each other at every breakpoint instead of
   needing hand-tuned coordinates. */
.tech-callouts {
    position: relative;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-top: 3rem;
}

.tech-callouts-media {
    position: relative;
    width: 100%;
    /* Matches IFR57-3-section.png's own ~4.15:1 ratio (a wide banner
       crop), so a full-bleed viewport-width image needs no cropping. */
    aspect-ratio: 2500 / 603;
}

.tech-callouts-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tech-callouts-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.1rem;
    padding: 1.25rem 5% 0;
}

.tech-callout {
    padding: 1rem 1.15rem;
    background-color: var(--color-paper);
    border: var(--hairline);
    filter: var(--shadow-soft-filter);
}

.tech-callout-num {
    display: inline-block;
    padding: 0.2rem 0.55rem;
    margin-bottom: 0.5rem;
    background-color: var(--primary-yellow);
    color: var(--primary-black);
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 0.04em;
}

.tech-callout h3 {
    color: var(--primary-black);
    font-size: 1.05rem;
    font-weight: 600;
    margin: 0 0 0.35rem;
}

.tech-callout p {
    color: var(--medium-gray);
    font-size: 0.86rem;
    line-height: 1.5;
    margin: 0;
}

@media (max-width: 900px) {
    .tech-callouts-cards {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .tech-callouts-cards {
        grid-template-columns: 1fr;
        gap: 0.85rem;
        padding: 1rem 5% 0;
    }
}

/* Applications Section */
.applications {
    padding: 7rem 5%;
    background-color: var(--light-gray);
}

.applications .section-title,
.applications h3 {
    color: var(--primary-black);
}

.applications p {
    color: var(--medium-gray);
}

/* Applications split — two-panel layout for exactly two featured
   applications (RMGC / STS). A giant ghost acronym per panel (same
   language as .section-bg-text) replaces the 4-up icon grid so two
   items don't read as a sparse, unfinished grid. */
.applications-split {
    max-width: 1000px;
    margin: 3rem auto 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}

.application-panel {
    position: relative;
    overflow: hidden;
    padding: 3rem 2.5rem;
    clip-path: polygon(
        var(--chamfer-md) 0%, calc(100% - var(--chamfer-md)) 0%,
        100% var(--chamfer-md), 100% calc(100% - var(--chamfer-md)),
        calc(100% - var(--chamfer-md)) 100%, var(--chamfer-md) 100%,
        0% calc(100% - var(--chamfer-md)), 0% var(--chamfer-md)
    );
    background-color: var(--color-paper);
    border: var(--hairline);
    filter: var(--shadow-soft-filter);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), filter 0.3s ease;
}

.application-panel:hover {
    transform: translateY(-6px);
    filter: var(--shadow-soft-lg-filter);
}

.application-panel--dark {
    background-color: var(--primary-black);
    border-color: var(--primary-black);
    background-image: var(--blueprint-grid);
    background-size: var(--blueprint-grid-size);
}

.application-panel-bg {
    position: absolute;
    top: -0.35em;
    right: -0.05em;
    font-family: "Fugaz One", sans-serif;
    font-size: clamp(4rem, 9vw, 6.5rem);
    line-height: 1;
    letter-spacing: -0.02em;
    color: rgba(28, 28, 28, 0.05);
    pointer-events: none;
    user-select: none;
    z-index: 0;
}

.application-panel--dark .application-panel-bg {
    color: rgba(255, 255, 255, 0.06);
}

/* Nameplate tag, not a pill badge — pill shape is reserved for primary
   CTAs only. Monospace + brackets reads as an equipment ID plate. */
.application-panel-tag {
    position: relative;
    z-index: 1;
    display: inline-block;
    padding: 0.35rem 0.75rem;
    background-color: var(--primary-yellow);
    color: var(--primary-black);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    margin-bottom: 1.75rem;
}

.application-panel-tag::before {
    content: '[ ';
}

.application-panel-tag::after {
    content: ' ]';
}

i.application-panel-icon {
    position: relative;
    z-index: 1;
    display: block;
    font-size: 1.3rem;
    color: var(--primary-black);
    margin-bottom: 1.25rem;
}

.application-panel--dark .application-panel-icon {
    color: var(--primary-yellow);
}

.application-panel h3 {
    position: relative;
    z-index: 1;
    overflow-wrap: anywhere;
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--primary-black);
    margin-bottom: 0.85rem;
}

.application-panel--dark h3 {
    color: var(--white);
}

.application-panel p {
    position: relative;
    z-index: 1;
    color: var(--medium-gray);
    font-size: 1.02rem;
    line-height: 1.65;
    max-width: 90%;
}

.application-panel--dark p {
    color: rgba(255, 255, 255, 0.7);
}

@media (max-width: 768px) {
    .applications-split {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .application-panel {
        padding: 2.25rem 1.75rem;
    }

    .application-panel p {
        max-width: 100%;
    }
}

/* Carousel Section */
.carousel-section {
    padding: 6rem 5%;
    background-color: var(--primary-black);
    background-image: var(--blueprint-grid);
    background-size: var(--blueprint-grid-size);
    color: var(--white);
}

.carousel-section .section-eyebrow {
    color: var(--white);
    font-weight: 500;
}

.carousel-container {
    max-width: 600px;
    margin: 0 auto;
    position: relative;
    aspect-ratio: 2/3;
    overflow: hidden;
}

.carousel {
    display: flex;
    transition: transform 0.5s ease;
    height: 100%;
}

.carousel-slide {
    min-width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.carousel-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
}

.slide-description {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(28, 28, 28, 0.9), rgba(28, 28, 28, 0.7));
    color: var(--primary-yellow);
    padding: 1.5rem;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    transition: transform 0.3s ease;
}

.carousel-slide:hover .slide-description {
    transform: translateY(100%);
}

.slide-description h3 {
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
    font-weight: 600;
}

.slide-description p {
    font-size: 0.9rem;
    opacity: 0.9;
    margin: 0;
}

.carousel-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: var(--primary-yellow);
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-black);
    transition: all 0.3s ease;
    z-index: 2;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.carousel-button:hover {
    background: white;
    transform: translateY(-50%) scale(1.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.carousel-button i {
    font-size: 1.2rem;
}

.carousel-button.prev {
    left: 20px;
}

.carousel-button.next {
    right: 20px;
}

@media (max-width: 768px) {
    .carousel-container {
        max-width: 80%;
        aspect-ratio: 3/5;
    }
}

/* IFR57 vs 80R Comparison */
.comparison-specs {
    position: relative;
    padding: 7rem 5%;
    background-color: var(--light-gray);
    text-align: center;
}

.comparison-specs .section-title {
    color: var(--primary-black);
}

/* Performance data — proportional bars for the three metrics that carry
   real numbers (height/radius/pitch), a label/value spec-list for the
   rest (they're qualitative on the source data, so a bar would imply a
   precision the numbers don't have). */
.versus-chart {
    max-width: 820px;
    margin: 3rem auto 0;
    text-align: left;
}

.versus-chart-legend {
    display: flex;
    justify-content: center;
    gap: 2.25rem;
    margin-bottom: 2.5rem;
}

.versus-chart-legend-item {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--primary-black);
}

.versus-chart-legend-item::before {
    content: '';
    width: 12px;
    height: 12px;
    flex-shrink: 0;
}

.versus-chart-legend-item--a::before {
    background-color: var(--primary-black);
}

.versus-chart-legend-item--b::before {
    background-color: var(--primary-yellow);
}

.versus-chart-row {
    margin-bottom: 1.75rem;
}

.versus-chart-row-label {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    color: var(--medium-gray);
    margin-bottom: 0.5rem;
}

.versus-chart-bars {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.versus-chart-bar {
    height: 30px;
    display: flex;
    align-items: center;
    padding: 0 0.75rem;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 0.82rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.versus-chart-bar--a {
    background-color: var(--primary-black);
    color: var(--white);
}

.versus-chart-bar--b {
    background-color: var(--primary-yellow);
    color: var(--primary-black);
}

/* Qualitative rows — same label-left/value-right grammar as before, now
   with both machines on one line instead of split across two cards. */
.versus-spec-list {
    border-top: var(--hairline);
    padding-top: 0.5rem;
}

.versus-spec-row {
    display: grid;
    grid-template-columns: 1.3fr 0.85fr;
    align-items: baseline;
    gap: 1rem;
    padding: 0.85rem 0;
    border-bottom: 1px solid rgba(28, 28, 28, 0.08);
}

.versus-spec-row:last-child {
    border-bottom: none;
}

.versus-spec-label {
    font-family: 'Inter', sans-serif;
    font-size: 0.85rem;
    color: var(--medium-gray);
}

.versus-spec-value {
    font-family: 'Inter', sans-serif;
    font-size: 0.87rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--primary-black);
    text-align: right;
    white-space: nowrap;
}

.versus-spec-value--better {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    background-color: var(--primary-yellow);
    font-weight: 700;
}

.versus-spec-asterisk {
    color: #d4a017;
    font-weight: 800;
}

.versus-footnote {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-family: 'Inter', sans-serif;
    font-size: 0.6rem;
    font-weight: 400;
    color: var(--medium-gray);
    white-space: nowrap;
    letter-spacing: 0.02em;
}

.versus-footnote .versus-spec-asterisk {
    margin-right: 0.15rem;
    font-size: inherit;
    font-weight: 700;
}

.xlwheel-asterisk {
    color: #d32f2f;
    font-weight: 800;
}

.versus-footnote .xlwheel-asterisk {
    margin-right: 0.15rem;
    font-size: inherit;
    font-weight: 700;
}

/* CTA Section */
.cta-section {
    position: relative;
    overflow: hidden;
    padding: 8rem 5%;
    background-color: var(--primary-yellow);
    text-align: center;
}

.cta-section .section-bg-text {
    color: rgba(28, 28, 28, 0.05);
}

.cta-section h2 {
    margin-bottom: 2rem;
    position: relative;
}

/* Contact Form */
.contact-form {
    max-width: 500px;
    margin: 2rem auto;
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    position: relative;
}

/* Control-panel field group — a numbered mono label above each input
   instead of a placeholder-only field, like a labelled panel control
   rather than a plain web-form row. Real <label for>, not decoration:
   it's the accessible name too, not just the visual one. */
.form-field {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    text-align: left;
}

.form-field-label {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--dark-gray);
}

.form-field-num {
    color: var(--medium-gray);
}

.contact-form input,
.contact-form textarea {
    padding: 0.9rem 1.25rem;
    border: 1.5px solid rgba(28, 28, 28, 0.18);
    font-size: 1rem;
    background-color: var(--color-paper);
    color: var(--primary-black);
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.contact-form input:focus,
.contact-form textarea:focus {
    outline: none;
    border-color: var(--primary-black);
    box-shadow: 0 0 0 3px rgba(28, 28, 28, 0.1);
}

.contact-form textarea {
    height: 150px;
    resize: vertical;
}

.form-option {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin: 0.5rem 0;
}

/* Custom checkbox container */
.checkbox-container {
    position: relative;
    display: flex;
    align-items: center;
}

/* Hide the default checkbox */
.form-option input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

/* Create a custom checkbox */
.checkbox-custom {
    width: 20px;
    height: 20px;
    border: 2px solid var(--primary-black);
    display: inline-block;
    position: relative;
    background-color: white;
    transition: all 0.3s ease;
    cursor: pointer;
}

/* Create checkmark (hidden when not checked) */
.checkbox-custom:after {
    content: '';
    position: absolute;
    display: none;
    left: 5px;
    top: 1px;
    width: 5px;
    height: 9px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* Show the checkmark when checked */
.form-option input[type="checkbox"]:checked ~ .checkbox-custom {
    background-color: var(--primary-black);
    border-color: var(--primary-black);
}

.form-option input[type="checkbox"]:checked ~ .checkbox-custom:after {
    display: block;
}

.form-option input[type="checkbox"]:checked ~ .checkbox-custom:hover {
    background-color: #333;
}

.form-option label:not(.checkbox-container) {
    font-size: 0.95rem;
    color: var(--primary-black);
    cursor: pointer;
    user-select: none;
    font-weight: 500;
    flex: 1;
    text-align: left;
}

/* Footer */
footer {
    background-color: var(--primary-black);
    background-image: var(--blueprint-grid);
    background-size: var(--blueprint-grid-size);
    color: var(--white);
    padding: 5rem 5% 1.5rem;
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin-bottom: 2rem;
}

.footer-section h3 {
    margin-bottom: 1rem;
    color: var(--white);
    font-size: 1.3rem;
    font-weight: 600;
}

.footer-section p {
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.6;
}

.social-links {
    display: flex;
    gap: 1rem;
}

.social-links a {
    color: var(--white);
    text-decoration: none;
    font-size: 1.2rem;
    transition: color var(--transition-speed), transform var(--transition-speed), background-color var(--transition-speed);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    border: var(--hairline-on-dark);
    margin: 0 0.5rem;
}

.social-links a:hover {
    color: var(--primary-yellow);
    transform: translateY(-3px);
    background: rgba(255, 255, 255, 0.2);
}

.footer-bottom {
    text-align: center;
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 227, 91, 0.1);
}

.footer-bottom p {
    font-size: 0.9rem;
    font-weight: 400;
    letter-spacing: 0.3px;
}

/* Responsive Design */
@media (max-width: 768px) {
    .section-title {
        margin-bottom: 1.5rem;
    }

    .features,
    .applications {
        padding: 3rem 5%;
    }

    /* .whats-new-section / .popup-section / .xlwheel-section /
       .easy-cable-section mobile padding is set further down, right
       after their unqualified desktop rules — see the comment there for
       why it can't live in this block. */

    .comparison-specs {
        padding: 3rem 5% 5rem;
    }

    .versus-chart-legend {
        gap: 1.25rem;
    }

    .versus-spec-row {
        grid-template-columns: 1.1fr 0.8fr;
        gap: 0.5rem;
    }

    .versus-spec-label,
    .versus-spec-value {
        font-size: 0.78rem;
    }

    .versus-footnote {
        position: static;
        display: block;
        margin-top: 1.5rem;
        margin-bottom: 1rem;
        writing-mode: horizontal-tb;
        transform: none;
        text-align: center;
        white-space: normal;
    }

    .cta-section {
        padding: 3rem 5%;
    }

    .contact-form {
        max-width: 100%;
    }

    .form-option label:not(.checkbox-container) {
        font-size: 0.9rem;
    }

    .footer-content {
        grid-template-columns: 1fr;
    }

    .social-links {
        justify-content: center;
        margin-top: 1rem;
    }

    .footer-section {
        text-align: center;
    }

    .certification-details {
        flex-direction: column;
        gap: 2rem;
    }
    
    .certification-image {
        order: -1;
    }

    .language-switcher {
        top: 10px;
        left: 10px;
    }

    .language-button {
        padding: 6px 12px;
    }

    .carousel-section {
        padding: 2rem 1rem;
    }

    .logo-container {
        padding: 0.5rem 0;
    }

    /* The fixed language switcher sits top-left; a centered logo runs
       under it on narrow screens, so push the logo to the right edge. */
    .header-logo {
        max-width: 160px;
        margin: 0 1rem 0 auto;
    }

    .header-logo-de {
        max-width: 220px;
    }
}

/* Extra Small Devices - Smartphones */
@media (max-width: 480px) {
    .section-title {
        padding: 1em;
    }
    
    .cta-button {
        padding: 0.8rem 1.5rem;
        font-size: 1.2rem;
    }

    .features, 
    .applications,
    .specifications,
    .cta-section {
        padding: 2.5rem 1rem;
    }

    /* .prefix-dropdown / .selected-prefix / .phone-input-container /
       .phone-input mobile overrides now live right after the "Phone
       Input Styles" block further down — see the comment there. */

    .appointment-options {
        padding: 1rem;
    }

    .appointment-option {
        padding: 0.6rem;
    }
}

/* What's New — shared title sitting above the Pop Up System and
   XL-Wheel blocks, which stay full-bleed sections in their own right
   (own background/padding) so this wrapper only needs to hold the
   heading and match the first child's background to avoid a seam. */
.whats-new-section {
    padding-top: 6rem;
    background-color: var(--light-gray);
}

.whats-new-section > .section-subtitle {
    margin-bottom: 0;
}

/* Pop Up System */
.popup-section {
    padding: 7rem 5%;
    background-color: var(--light-gray);
}

.popup-media {
    position: relative;
}

/* XL-Wheel */
.xlwheel-section {
    position: relative;
    padding: 7rem 5%;
    background-color: var(--white);
}

/* Easy Cable Installation / Testati & Comprovati — same dark
   "blueprint" backdrop as .carousel-section/footer (black + faint
   grid hairlines, only legible on a dark surface) instead of the
   yellow block this used to be, so the section reads as one
   engineering-instrument theme with the dark test-lab panel on top. */
.easy-cable-section {
    padding: 7rem 5%;
    background-color: var(--primary-black);
    background-image: var(--blueprint-grid);
    background-size: var(--blueprint-grid-size);
    color: var(--white);
}

.easy-cable-section .section-subtitle {
    color: rgba(255, 255, 255, 0.65);
}

.easy-cable-section .section-eyebrow {
    color: var(--white);
}

/* Has to live here, right after the unqualified rules above: the old
   copies of these same overrides (further up, in the shared "Responsive
   Design" section) were silently dead — an unqualified declaration beats
   an equal-specificity one inside an earlier @media block regardless of
   how narrow that query is, and .whats-new-section/.popup-section/
   .xlwheel-section/.easy-cable-section are all declared unqualified up
   above. Left alone, every phone kept the desktop 6-7rem top/bottom
   padding here while every sibling section had already dropped to
   ~3rem, which is what made this stretch of the page feel far emptier
   on mobile than the rest. */
@media (max-width: 768px) {
    .whats-new-section {
        padding-top: 3rem;
    }

    .popup-section,
    .xlwheel-section,
    .easy-cable-section {
        padding: 3rem 5%;
    }
}

/* Test lab — fatigue-test footage on top, a full-width results strip
   docked directly beneath it instead of a panel overlaid on the
   footage itself (that overlay used to cover part of the video). One
   dark chamfered shell holds both, so it still reads as a single
   instrument panel rather than a video + a separate card. */
.test-videos {
    margin-top: 0;
}

/* A plain `border` on a clip-path'd box doesn't render along the
   diagonal chamfer cuts — the browser clips the rectangular border
   away at the corners instead of following the cut edge. Faked here
   with two nested boxes sharing the identical chamfer polygon instead:
   the outer one is solid white and only ever shows as a 2px ring
   (.test-lab-inner sits inset by that same 2px on every side), so the
   chamfer stays parallel all the way round, corners included. */
.test-lab {
    max-width: 1300px;
    margin: 0 auto;
    padding: 2px;
    clip-path: polygon(
        var(--chamfer-md) 0%, calc(100% - var(--chamfer-md)) 0%,
        100% var(--chamfer-md), 100% calc(100% - var(--chamfer-md)),
        calc(100% - var(--chamfer-md)) 100%, var(--chamfer-md) 100%,
        0% calc(100% - var(--chamfer-md)), 0% var(--chamfer-md)
    );
    background-color: #858484;
    filter: var(--shadow-soft-lg-filter);
}

.test-lab-inner {
    clip-path: polygon(
        var(--chamfer-md) 0%, calc(100% - var(--chamfer-md)) 0%,
        100% var(--chamfer-md), 100% calc(100% - var(--chamfer-md)),
        calc(100% - var(--chamfer-md)) 100%, var(--chamfer-md) 100%,
        0% calc(100% - var(--chamfer-md)), 0% var(--chamfer-md)
    );
    background-color: #141414;
}

.test-lab-video {
    position: relative;
    aspect-ratio: 21 / 9;
}

.live-test-dot {
    flex-shrink: 0;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: var(--primary-yellow);
    animation: endurance-pulse 1.8s ease-in-out infinite;
}

@keyframes endurance-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

.live-test-video {
    position: absolute;
    inset: 0;
}

/* Higher contrast + partial desaturation on the footage itself — the
   requested "colour correction", done as a filter since there's no
   encode step available to bake it into the file. Applies equally to
   the still poster and the <video> once initTestVideo() swaps it in,
   so the look never jumps mid-transition. */
.live-test-video-media,
.live-test-video video {
    filter: contrast(1.18) saturate(0.45) brightness(0.96);
}

.live-test-video-media {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: cover;
    background-position: center;
}

.live-test-video video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Telemetry caption, not a glass UI chip: a solid tag with a single
   accent-colored edge (like a broadcast lower-third), no blur, no
   pill radius — reads as instrumentation overlaid on footage rather
   than a floating app badge. */
.test-video-readout {
    position: absolute;
    top: 1rem;
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.5rem 0.85rem;
    background-color: rgba(18, 18, 18, 0.8);
    border-left: 2px solid var(--primary-yellow);
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em;
    color: var(--primary-yellow);
    white-space: nowrap;
}

.test-video-readout-metric:first-child {
    color: #ffffff;
}

.test-video-readout--left {
    left: 0.75rem;
}

.test-video-readout--right {
    right: 0.75rem;
    align-items: flex-end;
    border-left: none;
    border-right: 2px solid var(--primary-yellow);
}

/* Results strip — docked below the footage, full width, instead of a
   floating corner panel that used to overlap the video. Kicker line on
   top, then the hero figure and the secondary spec list in one row. */
.test-hud {
    width: 100%;
    padding: 1.5rem clamp(1.25rem, 4vw, 2.5rem);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* The section's one "this is happening right now" indicator — the
   video is a completed/passed test, so only the ongoing endurance
   test carries the pulsing-dot live marker. Set as a document-style
   status line (uppercase label + hairline rule) rather than a rounded
   pill badge. */
.endurance-test-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding-bottom: 0.65rem;
    margin-bottom: 1.25rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-family: 'Inter', sans-serif;
    font-size: 0.68rem;
    font-weight: 700;
    color: white;
}

.test-hud-body {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.75rem 2.5rem;
}

/* Hero stat set apart with its own divider so the headline figure
   actually dominates, with the four supporting figures demoted
   to a quiet label/value spec row beside it — instead of five
   equal-weight metric tiles competing for the same attention. */
.endurance-hero {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding-right: 2rem;
    border-right: 1px solid rgba(255, 255, 255, 0.14);
}

.endurance-hero-value {
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    font-size: clamp(2.1rem, 1.7rem + 1.4vw, 2.6rem);
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    color: var(--primary-yellow);
}

.endurance-hero-label {
    font-size: 0.78rem;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.65);
}

/* Spec-sheet items — label above value, laid out in a row beside the
   hero figure instead of a stacked list beneath it. */
.endurance-stat-list {
    display: flex;
    flex: 1;
    flex-wrap: wrap;
    gap: 1.5rem 2rem;
}

.endurance-stat-row {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.endurance-stat-row-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: rgba(255, 255, 255, 0.5);
}

.endurance-stat-row-value {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 1.05rem;
    font-variant-numeric: tabular-nums;
    color: #ffffff;
    white-space: nowrap;
}

.certification-content {
    max-width: 1200px;
    margin: 0 auto;
}

.certification-details {
    display: flex;
    align-items: center;
    gap: 4rem;
    margin-top: 2.5rem;
}

.certification-text {
    flex: 1;
}

.certification-text .section-title {
    display: inline-block;
    background-color: var(--primary-yellow);
    padding: 0.05em 0.5em;
    text-align: left;
}

.certification-text ul {
    list-style-type: none;
    padding: 0;
    margin-top: 1.75rem;
}

.certification-text li {
    margin-bottom: 1.1rem;
    padding-left: 2.75rem;
    position: relative;
    color: var(--primary-black);
    font-size: 1.1rem;
}

.certification-text li:before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 26px;
    height: 26px;
    background-color: var(--primary-black);
    color: var(--primary-yellow);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: bold;
}

.certification-image {
    position: relative;
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem;
    clip-path: polygon(
        var(--chamfer-md) 0%, calc(100% - var(--chamfer-md)) 0%,
        100% var(--chamfer-md), 100% calc(100% - var(--chamfer-md)),
        calc(100% - var(--chamfer-md)) 100%, var(--chamfer-md) 100%,
        0% calc(100% - var(--chamfer-md)), 0% var(--chamfer-md)
    );
    background-color: rgba(28, 28, 28, 0.06);
    min-height: 320px;
}

.certification-image img,
.certification-image video {
    width: 100%;
    max-width: 100%;
    height: auto;
    filter: var(--shadow-soft-lg-filter);
    object-fit: contain;
}

@media (max-width: 768px) {
    .certification-details {
        flex-direction: column;
        gap: 2.5rem;
    }

    .certification-text {
        /* No extra horizontal inset here: the parent section already
           supplies a 5% side gutter, so the old 1.5rem on top of that
           was double-compressing the text column on narrow screens. */
        padding: 0;
        margin-bottom: 1rem;
    }

    /* 0.9rem matches the other mobile body copy (.frame-scroll-description,
       .slide-description p); the check badge shrinks with it. */
    .certification-text li {
        font-size: 0.9rem;
        padding-left: 2.25rem;
        margin-bottom: 0.85rem;
    }

    .certification-text li:before {
        width: 22px;
        height: 22px;
        font-size: 12px;
    }

    .certification-image {
        margin-top: 0;
        width: 100%;
        min-height: 220px;
    }

    .certification-image video {
        width: 100%;
        height: auto;
    }

    /* The results strip already sits below the footage (not overlaid),
       so mobile just needs a friendlier video ratio and a stacked
       strip instead of the cinematic-wide desktop proportions. */
    .test-lab-video {
        aspect-ratio: 16 / 9;
    }

    .test-hud-body {
        flex-direction: column;
        align-items: stretch;
        gap: 1.25rem;
    }

    .endurance-hero {
        padding-right: 0;
        padding-bottom: 1.1rem;
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.14);
    }

    .endurance-stat-list {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem 1.5rem;
    }

    .test-video-readout {
        font-size: 0.65rem;
        padding: 0.4rem 0.6rem;
    }

    .endurance-hero-value {
        font-size: 1.9rem;
    }
}

/* Appointment Options Styles */
.appointment-options {
    background-color: white;
    padding: 1.5rem;
    border-radius: 8px;
    margin-top: 1rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    border-left: 4px solid var(--primary-yellow);
    animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

.appointment-header {
    margin-bottom: 1rem;
    font-weight: 600;
    color: var(--primary-black);
}

/* Custom radio buttons */
.appointment-option {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.8rem;
    background-color: var(--light-gray);
    border-radius: 6px;
    transition: all 0.3s ease;
    margin-bottom: 0.5rem;
    cursor: pointer;
}

.appointment-option:hover {
    background-color: var(--primary-yellow);
    transform: translateY(-2px);
}

.radio-container {
    position: relative;
    display: flex;
    align-items: center;
}

.appointment-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.radio-custom {
    width: 22px;
    height: 22px;
    border: 2px solid var(--primary-black);
    border-radius: 50%;
    display: inline-block;
    position: relative;
    background-color: white;
    transition: all 0.3s ease;
}

.radio-custom:after {
    content: '';
    position: absolute;
    display: none;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--primary-black);
    transform: translate(-50%, -50%);
}

.appointment-option input[type="radio"]:checked ~ .radio-custom:after {
    display: block;
}

.appointment-option.selected {
    background-color: var(--primary-yellow);
}

.appointment-option input[type="radio"]:checked ~ .radio-custom {
    border-color: var(--primary-black);
}

.appointment-option label {
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    user-select: none;
    flex: 1;
}

/* Phone Input Styles */
.phone-input-container {
    display: flex;
    position: relative;
    margin-bottom: 1.5rem;
    width: 100%;
}

.phone-prefix-selector {
    position: relative;
    z-index: 10;
}

.selected-prefix {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 15px;
    height: 50px;
    background-color: var(--white);
    border: 1.5px solid rgba(28, 28, 28, 0.18);
    border-right: none;
    cursor: pointer;
    width: 100px;
    transition: all 0.3s ease;
}

.selected-prefix:hover {
    background-color: var(--light-gray);
}

.prefix-flag {
    width: 20px;
    height: 15px;
    border-radius: 2px;
    object-fit: cover;
}

.selected-prefix span {
    font-weight: 500;
    font-size: 0.9rem;
}

.prefix-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    width: 300px;
    max-height: 0;
    overflow: hidden;
    background-color: white;
    box-shadow: var(--shadow-soft-lg);
    transition: max-height 0.3s ease, opacity 0.3s ease;
    opacity: 0;
    z-index: 1000;
}

.phone-prefix-selector.active .prefix-dropdown {
    max-height: 350px;
    opacity: 1;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.prefix-search {
    padding: 15px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.prefix-search input {
    width: 100%;
    padding: 10px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    font-size: 0.9rem;
}

.prefix-list {
    max-height: 250px;
    overflow-y: auto;
}

.prefix-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 15px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.prefix-item:hover {
    background-color: var(--light-gray);
}

.prefix-country {
    flex: 1;
    font-size: 0.9rem;
}

.prefix-code {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--dark-gray);
}

.phone-input {
    flex: 1;
    height: 50px;
    padding: 10px 20px;
    border: 1.5px solid rgba(28, 28, 28, 0.18);
    font-size: 1rem;
}

.phone-input:focus,
.prefix-search input:focus {
    outline: none;
    border-color: var(--primary-yellow);
    box-shadow: 0 0 0 2px rgba(255, 227, 91, 0.3);
}

/* Stacks the country selector on top of the number field below 480px.
   Has to live here, after the unqualified .phone-input-container/
   .selected-prefix rules above, for the same reason as the section
   paddings further up: an unqualified declaration wins the cascade over
   an equal-specificity one inside an earlier @media block no matter how
   narrow that query is. The old copy of this override (up in "Extra
   Small Devices") was dead for exactly that reason, so on phones the
   country-code pill stayed at its fixed 100px desktop width instead of
   spanning full width above the number field — a small disconnected
   button sitting over a full-width input, instead of one joined control. */
@media (max-width: 480px) {
    .prefix-dropdown {
        width: 250px;
    }

    .phone-input-container {
        flex-direction: column;
    }

    .selected-prefix {
        width: 100%;
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
        border-right: var(--hairline);
        border-bottom: none;
    }

    .phone-input {
        width: 100%;
        border-top: none;
    }
}

/* Comparison Section (replacing carousel) */
.comparison-container {
    display: flex;
    justify-content: space-between;
    gap: 2rem;
    flex-wrap: wrap;
    max-width: 1200px;
    margin: 0 auto;
}

.comparison-item {
    flex-basis: calc(33.333% - 1.334rem);
    clip-path: polygon(
        var(--chamfer-md) 0%, calc(100% - var(--chamfer-md)) 0%,
        100% var(--chamfer-md), 100% calc(100% - var(--chamfer-md)),
        calc(100% - var(--chamfer-md)) 100%, var(--chamfer-md) 100%,
        0% calc(100% - var(--chamfer-md)), 0% var(--chamfer-md)
    );
    overflow: hidden;
    border: var(--hairline-on-dark);
    filter: var(--shadow-soft-filter);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), filter 0.3s ease;
    display: flex;
    flex-direction: column;
    background-color: var(--color-paper);
}

.comparison-item:hover {
    transform: translateY(-6px);
    filter: var(--shadow-soft-lg-filter);
}

.comparison-img-container {
    height: 280px;
    flex-shrink: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-paper);
}

.comparison-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.comparison-description {
    flex: 1 1 auto;
    padding: 1.75rem;
    background-color: var(--white);
    z-index: 2;
    position: relative;
}

.comparison-description h3 {
    margin-top: 0;
    color: var(--primary-black);
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
    font-weight: 600;
}

.comparison-description p {
    color: var(--medium-gray);
    margin-bottom: 0;
}

/* These two breakpoints have to live down here, after the unqualified
   rules above: this whole "replacing carousel" block was appended late
   in the file, so an unqualified .comparison-item/-img-container rule up
   here beats an equal-specificity one inside a @media block that sits
   earlier in the source — regardless of which media query is narrower.
   The old copies of these overrides used to sit up in the "Responsive
   Design" / "Extra Small Devices" sections earlier in this file and were
   silently dead for exactly that reason (that's what forced 2-up,
   cramped cards on real phones instead of the single column below). */
@media (min-width: 481px) and (max-width: 768px) {
    .comparison-item {
        flex-basis: calc(50% - 1rem);
    }
}

@media (max-width: 480px) {
    .comparison-item {
        flex-basis: 100%;
        margin-bottom: 1.5rem;
    }

    .comparison-img-container {
        height: 250px;
    }

    .comparison-description {
        padding: 1.35rem;
    }

    .comparison-description h3 {
        font-size: 1.1rem;
    }

    .comparison-description p {
        font-size: 0.9rem;
    }
}

/* Mobile Optimization */
input, 
select, 
textarea, 
button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

body {
    opacity: 0;
    transition: opacity 0.5s ease;
    font-family: 'Inter', sans-serif;
    line-height: 1.6;
    color: var(--text-color);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}

img {
    max-width: 100%;
    height: auto;
}

/* Focus styles that work better on mobile */
a:focus,
button:focus,
input:focus,
textarea:focus,
select:focus {
    outline: 2px solid var(--primary-yellow);
    outline-offset: 2px;
}

/* Improve touch targets for mobile */
@media (max-width: 768px) {
    button,
    a,
    input[type="checkbox"],
    input[type="radio"],
    .prefix-item,
    .application-panel,
    .tech-callout {
        min-height: 44px;
        min-width: 44px;
    }
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Appointment grid layout */
.appointment-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

@media (max-width: 600px) {
    .appointment-grid {
        grid-template-columns: 1fr;
    }
}

/* Custom radio buttons */
.appointment-option {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.8rem;
    background-color: var(--light-gray);
    border-radius: 6px;
    transition: all 0.3s ease;
    margin-bottom: 0.5rem;
    cursor: pointer;
}