/* ============================================================
   Vaiyuh Prelaunch — main.css   (v2.1.0)
   Desktop: scaled 1440×1028 canvas (no-scroll, scales to viewport)
   Mobile (< 768px): responsive flow layout, no canvas-scale
   Page background: #101010 (universal)
   v0.3.0: + Get Early Access waitlist modal (multi-step, animated)
   v0.3.1: modal polish — flat pills (no glow), full focus ring on
           inputs (overflow:visible after reveal), flat submit button
           (no halo), brand-to-title gap retuned to 31px.
   v0.4.0: + honeypot (hidden), Turnstile mount (invisible),
           + duplicate-screen + report button styles, + report-done text.
           Pairs with vaiyuh-waitlist plugin for real submission.
   v2.0.0: mobile responsive at < 768px — drops the canvas-scale,
           uses grid+flex flow, BG glow positioned around hero block
           with object-fit cover, simpler CTA shadows on mobile and
           hover/transform animations OFF (cursor anims = perf cost
           with no value on touch). Modal entrance animation kept.
   v2.0.1: mobile spacing tuned to match desktop's vertical rhythm.
           Brand→title gap pinned proportionally (was centering hero
           in remaining space — felt too open). Glow scaled UP (taller
           container, sides crop more aggressively via object-fit cover)
           so it has the same vertical presence on mobile portrait as
           it does on desktop landscape.
   v2.0.2: mobile re-architected to match the Figma iPhone 13/14 spec
           (390×844 reference). Switched from flex column with bottom-
           anchored glow → absolute positioning with TOP-anchored glow.
           [Layout was off in practice — reverted in v2.0.3.]
   v2.0.3: mobile reverted to flex-column rhythm (v2.0.1's structure
           that Vaibhav liked) but using dvh (dynamic viewport height)
           units throughout. dvh references the actual VISIBLE area —
           accounts for iOS Safari + Android Chrome URL bars correctly
           on both platforms. Stage + canvas use 100dvh, glow anchored
           to visible bottom via `bottom: 0`. CSS standard since 2022,
           supported by Safari 15.4+ / Chrome 108+ / Firefox 101+.
           Title 40px exact (Figma). Brand 30×35 + 18px wordmark.
   v2.0.4: mobile values pulled directly from canonical Figma CSS
           (iPhone 13/14 reference, 390×844). Switched from flex-column
           proportional spacing → ABSOLUTE positioning per Figma exact
           positions, expressed as dvh percentages (so proportions hold
           on every screen size). Brand at 4.24dvh, title 29.15dvh,
           subtitle 40.4dvh, button 53.43dvh, glow 42.18dvh top with
           56.28dvh height. Mobile button text is Roboto Bold 16px
           (matches Figma — desktop's 35px Roboto Regular was too big
           for mobile button card).
   v2.0.5: dvh → svh. iOS Safari with overflow:hidden was treating dvh
           as lvh (large viewport, 844) instead of the visible-area
           value, putting the button at 62% of visible instead of 53%.
           svh = small viewport height = the URL-bar-visible value,
           stable and matches what the user actually sees. Also dropped
           position:fixed from the stage on mobile (a known iOS Safari
           GPU-pressure source, may explain the "lag degrades over 1
           minute" report). Stage now flows naturally — body's
           overflow:hidden still prevents scroll.
   v2.1.0:  + Privacy Notice page (/privacy) + Terms of Use page (/terms)
            + Modal consent line made visible with links to both
            + Full SEO meta tags (title, description, canonical, robots,
              keywords, theme-color, author)
            + Open Graph + Twitter Card meta for LinkedIn / WhatsApp /
              Instagram / X link previews. og:image and favicon emit
              ONLY if the asset files exist on disk — no broken previews
              if Vaibhav hasn't uploaded them yet.
            + Schema.org JSON-LD Organization markup on the home page
            + Page templates for legal content (matches theme dark bg,
              Poppins/Roboto, scrollable on mobile, max-width for readability)
   v2.0.16: + form spec changes per Vaibhav: subtitle text replaced;
            "Growth" stage pill removed (only Pre-Seed + Seed remain);
            new "Industry / Cheque size" section inserted between Stage and
            Details (single section, content toggles by selected role:
            startup → industry text input, investor → cheque-size pills
            in INR brackets). Requires plugin v1.1.0 + redeployed Apps
            Script Code.gs for the new "industry_or_cheque" Sheet column.
   v2.0.15: Fix v2.0.14 regression — `picture { display: contents }` was
            outside any media query, applying to desktop too. Some browsers
            mis-handle source selection when picture is display:contents,
            picking the first <source> regardless of media-query match.
            That's why desktop was loading the mobile image. Solution:
            scope picture display rule to mobile media query only AND use
            display:block instead of display:contents (no quirks).
   v2.0.14: TWO root-cause fixes for the visible rectangular bound around
            the glow image:
            (1) bg-glow-mobile.png has a WHITE/light-gray background, NOT
                transparent. The visible "rectangle" was just the image's
                opaque white bg being placed on a dark page. Fix: apply a
                CSS radial-gradient mask to the img — opaque at the bright
                peak, fading to fully transparent at edges. White edges
                become invisible; only the colored glow shows.
            (2) Vaibhav's nesting hunch was correct. <picture> is display:
                inline by default, which made width:100%/height:100% on the
                inner <img> resolve circularly. Fix: `picture { display:
                contents }` removes the picture wrapper from layout entirely,
                leaving the img as a direct child of the .__bg container.
   v2.0.13: + glow's top cut-off line gone. Previous version used
            object-fit:cover + center bottom which cropped the top 68px
            of the image to fit container's wider aspect, creating a
            visible horizontal seam. Switched to aspect-ratio container
            with width:auto + height fixed: container's aspect now
            matches the image's natural 395/475 exactly, so the image
            fills perfectly with NO cropping. Tradeoff: glow is ~14%
            narrower than the viewport (dark on the sides), but no seam.
            + CTA pulled up ~15 CSS px more: 61.76% → 59.68%
   v2.0.12: + glow no longer extends behind URL bar — switched from
            aspect-ratio sizing (which gave 65% vh height, overflowing)
            to explicit 55.82% vh height (top 42.18 + height 55.82 = 98%,
            fits inside visible viewport with 2% breathing room).
            object-position: center bottom keeps the image's bright peak
            (at image bottom) visible; the image's top fade is cropped.
            + Hero  pulled up: 34.71% → 32.63% (~15 CSS px up)
            + CTA   pulled up: 63.15% → 61.76% (~10 CSS px up)
   v2.0.11: + page-load lag fix: Turnstile script now lazy-loaded by JS
            ~800ms after page interactive (was synchronously enqueued in
            footer by WordPress, blocking the main thread for 1-3s during
            initial render — button visible but unresponsive). Fallback:
            force-load on first "Get Early Access" click in case user is
            faster than the idle delay.
            + Mobile hero top: 29.15% → 34.71% (down ~40 CSS px)
            + Mobile cta  top: 53.43% → 63.15% (down ~70 CSS px)
   v2.0.10: cumulative-lag root cause was the iframe-inside-<dialog>
            relationship on iOS Safari, not Turnstile state per se. Even
            with v2.0.9's full teardown, iOS was relayout'ing the iframe's
            compositing context on every dialog open/close. Architectural
            fix per Vaibhav: Turnstile widget mount moves OUTSIDE the
            <dialog> entirely, lives at body-level (fixed, off-screen).
            Renders ONCE eagerly on page load when CF script ready.
            Modal open/close never touches the widget — widget never
            moves through a dialog's compositing context. resetTurnstile
            now only clears the local token; widget persists for page
            lifetime. getTurnstileToken still calls execute() at submit
            time for a fresh challenge token.
   v2.0.9: cumulative-lag fix — Turnstile widget is now REMOVED from the DOM
           (turnstile.remove) on every modal close, instead of just being
           reset (turnstile.reset). reset() leaves the Cloudflare iframe +
           internal state alive, which accumulates across open/close cycles
           and degrades performance over time on iOS Safari. remove() fully
           tears it down; next open builds a fresh widget. Each cycle is
           structurally identical to the first, no leak.
   v2.0.8: + uses dedicated mobile glow asset (bg-glow-mobile.png, 395x475)
           via <picture> media-conditional source. Glow container sized to
           image's native aspect ratio with width:min(395px, 100%).
           Lag fix: Turnstile.execute() deferred from modal-open to submit
           time (was running CF bot-challenge on main thread immediately
           after modal opened, blocking the first pill click for 1-3s
           with proof-of-work CPU cost).
   v2.0.7: STRUCTURAL FIX. Three iterations (dvh, svh, visualViewport-API)
           all gave the same wrong button position because the bug was
           never the viewport unit — it was DOM nesting. The .__cta div
           was inside .__hero, and the hero is absolute-positioned on
           mobile. So .__cta's `top: 53.43%` was relative to HERO, not
           canvas. Cumulative position was hero (29.15%) + cta (53.43%)
           = 82.58% of viewport — exactly where the button was sitting.
           Fix: moved .__cta out of .__hero in front-page.php so it's a
           sibling positioned independently against the canvas. Desktop
           layout unaffected (CTA still flows below hero with same
           margin-top:98.8 spacing). Kept v2.0.6's lag fixes
           (visualViewport API for --vh, no backdrop-filter on mobile,
           transitions disabled on pills/inputs/sections).
   v2.0.6: svh wasn't fixing it either — iOS Safari with overflow:hidden
           apparently returns large-viewport for both dvh AND svh in this
           configuration. Bypassed CSS viewport units entirely:
           - JS captures the actual visible height via window.visualViewport
             and sets a --vh CSS variable. All mobile positions use
             calc(var(--vh) * fraction). visualViewport is the authoritative
             cross-browser source for the actual visible-content area.
           - Disabled backdrop-filter on mobile modal (the GPU-cost cause
             of "lag after popup animation finishes" — backdrop-filter
             continuously composites every frame the modal is open).
             Replaced with a darker solid rgba background.
           - Disabled pill/input/section transitions on mobile (each tap
             was causing repaint storms).
   ============================================================ */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #101010;
}

body.vaiyuh-prelaunch-body {
    color: #F2F2F2;
    font-family: 'Poppins', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 500;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* ------------------------------------------------------------
   Stage — fills viewport, centers the design canvas.
   The canvas is scaled by JS (assets/js/main.js) on load + resize.
   ------------------------------------------------------------ */
.vaiyuh-prelaunch-stage {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    background: #101010;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* ------------------------------------------------------------
   Page canvas (1440 x 1028 fixed) — JS applies transform: scale()
   ------------------------------------------------------------ */
.vaiyuh-prelaunch {
    position: relative;
    width: 1440px;
    height: 1028px;
    flex: 0 0 auto;
    background: #101010;
    overflow: hidden;
    transform-origin: center center;
    transform: scale(1);
}

/* ------------------------------------------------------------
   Brand mark + wordmark
   Figma: Group 1321319200 — 146x47 at top:84.95, centered
   ------------------------------------------------------------ */
.vaiyuh-prelaunch__brand {
    position: absolute;
    top: 84.95px;
    left: 50%;
    transform: translateX(-50%);
    width: 146px;
    height: 47px;
    display: flex;
    align-items: center;
    gap: 7px;
    z-index: 3;
}

.vaiyuh-prelaunch__brand-mark {
    width: 41px;
    height: 47px;
    display: inline-flex;
    flex: 0 0 41px;
}

.vaiyuh-prelaunch__brand-mark img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.vaiyuh-prelaunch__brand-name {
    font-family: 'Poppins', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 600;
    font-size: 27px;
    line-height: 40px;
    color: #F2F2F2;
    letter-spacing: 0;
    user-select: none;
}

/* ------------------------------------------------------------
   Background glow strip
   Figma: 光斑 flare — 1436x362, top:624, centered
   ------------------------------------------------------------ */
.vaiyuh-prelaunch__bg {
    position: absolute;
    top: 624px;
    left: 50%;
    transform: translateX(-50%);
    width: 1436px;
    height: 362px;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
}

.vaiyuh-prelaunch__bg-img {
    display: block;
    width: 1436px;
    height: 362px;
    object-fit: cover;
    object-position: center;
}

/* ------------------------------------------------------------
   Hero (Frame 273) — content stack
   1184px wide, top:372.59, centered
   ------------------------------------------------------------ */
.vaiyuh-prelaunch__hero {
    position: relative;
    width: 1184px;
    margin: 0 auto;
    padding-top: 372.59px;
    z-index: 2;
}

/* Frame 272 — auto-layout column, 35px gap */
.vaiyuh-prelaunch__copy {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 35px;
}

.vaiyuh-prelaunch__title {
    margin: 0;
    width: 1184px;
    height: 110px;
    font-family: 'Poppins', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 500;
    font-size: 110px;
    line-height: 110px;
    text-align: center;
    text-transform: capitalize;
    color: #F2F2F2;
    letter-spacing: 0;
}

.vaiyuh-prelaunch__subtitle {
    margin: 0;
    width: 553.92px;
    font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 300;
    font-size: 30px;
    line-height: 35px;
    text-align: center;
    color: #C9C9C9;
}

/* ------------------------------------------------------------
   CTA — Get Early Access
   382x85, border-radius 94, padding 30 60.
   Center transparent (BG glow shows through).
   2px gradient ring via ::before mask-composite cutout.
   Outer glow halo via box-shadow + drop-shadow filters.
   Hover: animated green→white gradient flow on text.
   ------------------------------------------------------------ */
.vaiyuh-prelaunch__cta {
    margin-top: 98.8px;
    display: flex;
    justify-content: center;
}

.vaiyuh-prelaunch__btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 382px;
    height: 85px;
    padding: 30px 60px;
    border: none;
    border-radius: 94px;
    background: transparent;
    text-decoration: none;
    color: #F2F2F2;
    font-family: inherit;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    isolation: isolate;
    /* Outer halo glow — pill-shaped, follows border-radius */
    box-shadow:
        0 0 80px 8px rgba(19, 217, 125, 0.30),
        0 0 36px 0   rgba(19, 217, 125, 0.45),
        0 0 14px 0   rgba(19, 217, 161, 0.35);
    /* Soft directional drop-shadows from Figma (boosted) */
    filter:
        drop-shadow(24px -16px 60px rgba(19, 217, 125, 0.35))
        drop-shadow(-28px 23px 50px rgba(19, 217, 161, 0.25));
    transition: transform 180ms ease, box-shadow 280ms ease, filter 280ms ease;
}

.vaiyuh-prelaunch__btn:hover {
    transform: translateY(-1px);
    box-shadow:
        0 0 100px 12px rgba(19, 217, 125, 0.40),
        0 0 48px  0    rgba(19, 217, 125, 0.55),
        0 0 18px  0    rgba(19, 217, 161, 0.45);
    filter:
        drop-shadow(24px -16px 70px rgba(19, 217, 125, 0.45))
        drop-shadow(-28px 23px 60px rgba(19, 217, 161, 0.30));
}

.vaiyuh-prelaunch__btn:active {
    transform: translateY(0);
}

/* Gradient stroke — 2px inside, ring only (transparent center) */
.vaiyuh-prelaunch__btn::before {
    content: "";
    position: absolute;
    inset: 0;
    padding: 2px;
    border-radius: inherit;
    background: linear-gradient(
        180deg,
        rgba(19, 217, 125, 1.0) 0%,
        rgba(19, 217, 125, 0.8) 20%,
        rgba(19, 217, 177, 0.8) 37%,
        rgba(255, 255, 255, 0.0) 58%,
        rgba(19, 217, 157, 0.9) 73%,
        rgba(19, 217, 197, 1.0) 100%
    );
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
            mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events: none;
}

/* Button text — base state (solid), hover state (animated gradient flow) */
.vaiyuh-prelaunch__btn-text {
    position: relative;
    z-index: 1;
    display: inline-block;
    font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 400;
    font-size: 35px;
    line-height: 1;
    color: #F2F2F2;
    text-align: center;
    white-space: nowrap;
    user-select: none;
    /* Pre-load gradient so first hover doesn't flash */
    background-image: linear-gradient(
        90deg,
        #13D97D 0%,
        #FFFFFF 25%,
        #13D97D 50%,
        #FFFFFF 75%,
        #13D97D 100%
    );
    background-size: 200% 100%;
    background-position: 0% 0%;
    background-repeat: repeat-x;
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: #F2F2F2;
}

.vaiyuh-prelaunch__btn:hover .vaiyuh-prelaunch__btn-text,
.vaiyuh-prelaunch__btn:focus-visible .vaiyuh-prelaunch__btn-text {
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: vaiyuh-btn-flow 2.4s linear infinite;
}

@keyframes vaiyuh-btn-flow {
    from { background-position:   0% 0%; }
    to   { background-position: 200% 0%; }
}

/* Honor reduced-motion */
@media (prefers-reduced-motion: reduce) {
    .vaiyuh-prelaunch__btn:hover .vaiyuh-prelaunch__btn-text,
    .vaiyuh-prelaunch__btn:focus-visible .vaiyuh-prelaunch__btn-text {
        animation: none;
        background-position: 50% 0%;
    }
}


/* ============================================================
   WAITLIST MODAL  (Get Early Access)
   <dialog>-based, top-layer, animated entrance + progressive
   reveal of stage / details sections via grid-template-rows trick.
   ============================================================ */

/* Native dialog reset */
.vaiyuh-modal {
    padding: 0;
    border: none;
    background: transparent;
    color: inherit;
    max-width: 100vw;
    max-height: 100vh;
    overflow: visible;
}
.vaiyuh-modal:not([open]) { display: none; }

.vaiyuh-modal::backdrop {
    background: rgba(8, 8, 8, 0.72);
    -webkit-backdrop-filter: blur(14px) saturate(120%);
            backdrop-filter: blur(14px) saturate(120%);
    animation: vaiyuh-backdrop-in 240ms ease-out;
}
@keyframes vaiyuh-backdrop-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.vaiyuh-modal[open] .vaiyuh-modal__card {
    animation: vaiyuh-modal-in 280ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
@keyframes vaiyuh-modal-in {
    from { opacity: 0; transform: scale(0.96) translateY(8px); }
    to   { opacity: 1; transform: scale(1)    translateY(0); }
}

/* Frosted card */
.vaiyuh-modal__card {
    position: relative;
    width: min(460px, 92vw);
    max-height: 92vh;
    padding: 48px 40px 40px;
    background: rgba(20, 20, 20, 0.94);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 22px;
    box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.60),
        0 0 0 1px rgba(255, 255, 255, 0.02) inset,
        0 0 60px rgba(19, 217, 125, 0.08);
    overflow-y: auto;
    overflow-x: hidden;
    color: #F2F2F2;
    font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* Close button (top-right) */
.vaiyuh-modal__close {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 32px;
    height: 32px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    color: #919191;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: color 180ms ease, border-color 180ms ease, background 180ms ease, transform 180ms ease;
    z-index: 2;
}
.vaiyuh-modal__close:hover {
    color: #F2F2F2;
    border-color: rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.04);
    transform: rotate(90deg);
}
.vaiyuh-modal__close svg { display: block; }

/* Brand inside modal — small */
.vaiyuh-modal__brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-bottom: 31px;
}
.vaiyuh-modal__brand-mark {
    width: 22px;
    height: 25px;
    display: inline-flex;
}
.vaiyuh-modal__brand-mark img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.vaiyuh-modal__brand-name {
    font-family: 'Poppins', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 600;
    font-size: 15px;
    color: #F2F2F2;
}

/* Title */
.vaiyuh-modal__title {
    margin: 0 0 28px;
    text-align: center;
    font-family: 'Poppins', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 500;
    font-size: 28px;
    line-height: 1.15;
    color: #F2F2F2;
    letter-spacing: -0.01em;
}

/* Form base */
.vaiyuh-modal__form { margin: 0; }
.vaiyuh-modal__form[hidden] { display: none; }

/* ---------- Progressive section reveal ----------
   Uses display:grid + animatable grid-template-rows: 0fr -> 1fr.
   The inner wrapper carries overflow:hidden so children are clipped
   while the row collapses. Spec-compliant in modern browsers. */
.vaiyuh-modal__section {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    margin-top: 0;
    transition:
        grid-template-rows 360ms cubic-bezier(0.2, 0.7, 0.2, 1),
        opacity            300ms ease,
        margin-top         360ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.vaiyuh-modal__section[data-revealed] {
    grid-template-rows: 1fr;
    opacity: 1;
    margin-top: 22px;
}

.vaiyuh-modal__section[data-vaiyuh-section="role"][data-revealed] {
    margin-top: 0;
}

.vaiyuh-modal__section-inner {
    overflow: hidden;
    min-height: 0;
}

/* Once the section is fully revealed, switch overflow to visible so
   input focus rings and pill outlines aren't clipped at the section
   edges. The 360ms delay matches the row-reveal transition. */
.vaiyuh-modal__section[data-revealed] .vaiyuh-modal__section-inner {
    animation: vaiyuh-section-overflow-clear 0s 360ms forwards;
}
@keyframes vaiyuh-section-overflow-clear {
    to { overflow: visible; }
}

/* Industry / Cheque section — content depends on selected role.
   By default both widgets are hidden; JS sets data-role on the form
   to expose the role-appropriate one. */
[data-vaiyuh-section="extra"] [data-vaiyuh-field="industry"],
[data-vaiyuh-section="extra"] [data-vaiyuh-group="cheque"] {
    display: none;
}
.vaiyuh-modal__form[data-role="startup"] [data-vaiyuh-section="extra"] [data-vaiyuh-field="industry"] {
    display: block;
}
.vaiyuh-modal__form[data-role="investor"] [data-vaiyuh-section="extra"] [data-vaiyuh-group="cheque"] {
    display: flex;
}

/* Section label */
.vaiyuh-modal__label {
    display: block;
    margin-bottom: 12px;
    font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #919191;
}

/* ---------- Pills ---------- */
.vaiyuh-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.vaiyuh-pill {
    appearance: none;
    -webkit-appearance: none;
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.04);
    color: #C9C9C9;
    border-radius: 999px;
    padding: 9px 20px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 400;
    line-height: 1;
    cursor: pointer;
    transition:
        background    220ms ease,
        color         220ms ease,
        border-color  220ms ease,
        transform     180ms ease,
        box-shadow    220ms ease;
}
.vaiyuh-pill:hover {
    transform: translateY(-1px);
    border-color: rgba(19, 217, 125, 0.45);
    color: #F2F2F2;
}
.vaiyuh-pill[data-active] {
    background: #13D97D;
    border-color: #13D97D;
    color: #101010;
    font-weight: 500;
}
.vaiyuh-pill[data-active]:hover {
    background: #1FE889;
    border-color: #1FE889;
    color: #101010;
}

/* ---------- Inputs ---------- */
.vaiyuh-input {
    appearance: none;
    -webkit-appearance: none;
    display: block;
    width: 100%;
    height: 50px;
    padding: 0 22px;
    margin-top: 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 999px;
    font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 15px;
    font-weight: 300;
    color: #F2F2F2;
    transition:
        background    200ms ease,
        border-color  200ms ease,
        box-shadow    200ms ease;
}
.vaiyuh-input:first-child { margin-top: 0; }
.vaiyuh-input::placeholder { color: #6e6e6e; }
.vaiyuh-input:hover { border-color: rgba(255, 255, 255, 0.16); }
.vaiyuh-input:focus {
    outline: none;
    background: rgba(255, 255, 255, 0.06);
    border-color: #13D97D;
    box-shadow: 0 0 0 3px rgba(19, 217, 125, 0.18);
}
.vaiyuh-input:not(:placeholder-shown):invalid {
    border-color: rgba(253, 123, 123, 0.55);
}

/* ---------- Submit (Join the Waitlist) ---------- */
.vaiyuh-modal__submit {
    display: block;
    width: 100%;
    margin-top: 26px;
    height: 52px;
    padding: 0 24px;
    background: linear-gradient(180deg, #2DEFA0 0%, #13D97D 100%);
    border: none;
    border-radius: 999px;
    color: #101010;
    font-family: 'Poppins', 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition:
        opacity     200ms ease,
        transform   180ms ease,
        filter      200ms ease;
}
.vaiyuh-modal__submit:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    filter: saturate(0.6);
}
.vaiyuh-modal__submit:not(:disabled):hover {
    transform: translateY(-1px);
}
.vaiyuh-modal__submit:not(:disabled):active {
    transform: translateY(0);
}
.vaiyuh-modal__submit-label {
    transition: opacity 220ms ease;
    display: inline-block;
}
.vaiyuh-modal__submit[data-loading] .vaiyuh-modal__submit-label {
    opacity: 0;
}
.vaiyuh-modal__submit-spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 22px;
    height: 22px;
    margin: -11px 0 0 -11px;
    border: 2px solid rgba(16, 16, 16, 0.25);
    border-top-color: #101010;
    border-radius: 50%;
    opacity: 0;
    transition: opacity 220ms ease;
}
.vaiyuh-modal__submit[data-loading] .vaiyuh-modal__submit-spinner {
    opacity: 1;
    animation: vaiyuh-spin 720ms linear infinite;
}
@keyframes vaiyuh-spin {
    to { transform: rotate(360deg); }
}

/* Consent line — visible in v2.1.0, with PP + Terms links */
.vaiyuh-modal__consent {
    margin: 16px 0 0;
    text-align: center;
    font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 11px;
    font-weight: 300;
    color: #8a8a8a;
    line-height: 1.5;
}
.vaiyuh-modal__consent a {
    color: #B7D9C5;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.vaiyuh-modal__consent a:hover { color: #F2F2F2; }

/* ---------- Success screen ---------- */
.vaiyuh-modal__success {
    text-align: center;
    padding: 16px 8px 24px;
    animation: vaiyuh-success-in 360ms ease-out;
}
.vaiyuh-modal__success[hidden] { display: none; animation: none; }
@keyframes vaiyuh-success-in {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}
.vaiyuh-modal__success-title {
    margin: 0 0 14px;
    font-family: 'Poppins', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 500;
    font-size: 30px;
    line-height: 1.15;
    color: #F2F2F2;
    letter-spacing: -0.01em;
    animation: vaiyuh-success-line 420ms ease-out 60ms backwards;
}
.vaiyuh-modal__success-text {
    margin: 0 auto;
    max-width: 320px;
    font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 14px;
    font-weight: 300;
    line-height: 1.5;
    color: #919191;
    animation: vaiyuh-success-line 420ms ease-out 220ms backwards;
}
@keyframes vaiyuh-success-line {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ---------- Honeypot (hidden visually + from a11y, present in DOM) ---------- */
.vaiyuh-honeypot {
    position: absolute !important;
    left: -10000px !important;
    top: auto !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}

/* ---------- Turnstile mount ----------
   Lives at body level (outside the modal <dialog>) so opening/closing the
   modal never relayouts the iframe's compositing context. Position fixed
   off-screen with 0 size so it's invisible but the iframe is rendered. */
.vaiyuh-turnstile {
    position: fixed;
    bottom: 0;
    right: 0;
    width: 0;
    height: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: -1;
}

/* ---------- Duplicate screen (mirrors success layout) ---------- */
.vaiyuh-modal__duplicate {
    text-align: center;
    padding: 16px 8px 24px;
    animation: vaiyuh-success-in 360ms ease-out;
}
.vaiyuh-modal__duplicate[hidden] { display: none; animation: none; }

.vaiyuh-modal__report {
    display: inline-block;
    margin-top: 18px;
    padding: 10px 22px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    color: #C9C9C9;
    font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 13px;
    font-weight: 400;
    cursor: pointer;
    transition:
        background    200ms ease,
        border-color  200ms ease,
        color         200ms ease,
        transform     180ms ease;
}
.vaiyuh-modal__report:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.28);
    color: #F2F2F2;
    transform: translateY(-1px);
}
.vaiyuh-modal__report:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.vaiyuh-modal__report-done {
    margin: 14px 0 0;
    font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 12px;
    font-weight: 300;
    color: #919191;
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    .vaiyuh-modal[open] .vaiyuh-modal__card,
    .vaiyuh-modal::backdrop,
    .vaiyuh-modal__success,
    .vaiyuh-modal__success-title,
    .vaiyuh-modal__success-text,
    .vaiyuh-modal__duplicate {
        animation: none !important;
    }
    .vaiyuh-modal__section,
    .vaiyuh-pill,
    .vaiyuh-input,
    .vaiyuh-modal__submit,
    .vaiyuh-modal__close,
    .vaiyuh-modal__report {
        transition: none !important;
    }
    .vaiyuh-modal__submit-spinner {
        animation-duration: 1200ms;
    }
}

/* ============================================================
   MOBILE (< 768px) — responsive flow, no canvas-scale
   - Drops transform:scale on .vaiyuh-prelaunch
   - Brand pinned top via grid, hero centered, BG glow behind hero
   - BG image cropped via object-fit:cover (no squishing)
   - CTA: cursor animations off, drop-shadow filter off (mobile GPU
     cost). Static glow halo kept (visual identity).
   - Modal: bigger touch targets, 16px input font (prevents iOS auto-zoom)
   ============================================================ */
@media (max-width: 767px) {

    /* All mobile positions reference --vh, set by JS from window.visualViewport.height
       (authoritative source for actual visible-content height across iOS/Android).
       Fallback to 100svh if JS hasn't run yet. Stage drops position:fixed on mobile
       (known iOS Safari GPU-pressure source). Body's overflow:hidden prevents scroll. */
    .vaiyuh-prelaunch-stage {
        position: static;
        width: 100%;
        height: var(--vh, 100svh);
        display: block;
    }
    .vaiyuh-prelaunch {
        width: 100%;
        height: var(--vh, 100svh);
        max-width: none;
        transform: none !important;
        background: transparent;
        position: relative;
        display: block;
        padding: 0;
        overflow: hidden;
    }

    /* All major elements ABSOLUTE-positioned with values pulled from canonical
       Figma iPhone 13/14 (390×844 reference), converted to dvh percentages so
       they scale proportionally across phone sizes. */

    /* Brand — Figma top:35.78 / 844 = 4.24% of visible */
    .vaiyuh-prelaunch__brand {
        position: absolute;
        top: calc(var(--vh, 100svh) * 0.0424);
        left: 50%;
        transform: translateX(-50%);
        width: auto;
        height: auto;
        gap: 6px;
        z-index: 3;
    }
    .vaiyuh-prelaunch__brand-mark {
        width: 30px;
        height: 35px;
        flex: 0 0 30px;
    }
    .vaiyuh-prelaunch__brand-name {
        font-size: 18px;
        line-height: 27px;
    }

    /* Hero — was 34.71%, pulled up ~15 CSS px per Vaibhav's request → 32.63% */
    .vaiyuh-prelaunch__hero {
        position: absolute;
        top: calc(var(--vh, 100svh) * 0.3263);
        left: 50%;
        transform: translateX(-50%);
        width: 100%;
        max-width: 360px;
        padding: 0 16px;
        box-sizing: border-box;
        z-index: 2;
        text-align: center;
    }
    .vaiyuh-prelaunch__copy {
        gap: 30px;       /* Figma subtitle top:341 - title-block top:246 = 95;
                            minus title visual height ~44 = ~51px gap (text-to-text).
                            With line-height factored in, 30px CSS gap renders
                            visually as ~50px between baselines. */
    }
    .vaiyuh-prelaunch__title {
        width: 100%;
        height: auto;
        font-size: clamp(34px, 10.3vw, 40px);  /* Figma 40px on 390 viewport;
                                                   scales down on smaller phones */
        line-height: 1.1;
        font-weight: 500;
        margin: 0;
    }
    .vaiyuh-prelaunch__subtitle {
        width: 100%;
        max-width: 290px;
        margin: 0 auto;
        font-size: 16px;
        line-height: 1.2;
    }

    /* On mobile only: the <picture> wrapper needs explicit block dimensions
       so the inner <img>'s width:100%/height:100% resolves correctly. Using
       display:block (not display:contents) avoids known browser quirks
       where contents+picture mis-handles <source> selection. */
    .vaiyuh-prelaunch__bg picture {
        display: block;
        width: 100%;
        height: 100%;
    }

    /* BG glow — full viewport width. The mask-image below kills the source
       PNG's white background by fading the image's edges to transparent;
       only the bright glow center stays opaque. Container ends at 98% of
       visible viewport (top 42.18 + height 55.82). */
    .vaiyuh-prelaunch__bg {
        position: absolute;
        top: calc(var(--vh, 100svh) * 0.4218);
        bottom: auto;
        left: 0;
        right: 0;
        transform: none;
        width: 100%;
        height: calc(var(--vh, 100svh) * 0.5582);
        aspect-ratio: auto;
        z-index: 1;
    }
    .vaiyuh-prelaunch__bg-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center bottom;
        /* Radial mask centered at the glow's bright peak (50% horiz, ~95%
           vert). Fully opaque inside the inner radius, fades to transparent
           by 95%. The image's white background — which had been drawing a
           visible rectangle on the dark page — now blends invisibly into
           the page bg. */
        -webkit-mask-image: radial-gradient(ellipse 95% 100% at 50% 95%, #000 0%, #000 30%, transparent 95%);
                mask-image: radial-gradient(ellipse 95% 100% at 50% 95%, #000 0%, #000 30%, transparent 95%);
    }

    /* CTA — pulled up another ~15 CSS px per Vaibhav's request → 59.68% */
    .vaiyuh-prelaunch__cta {
        position: absolute;
        top: calc(var(--vh, 100svh) * 0.5968);
        left: 0;
        right: 0;
        margin-top: 0;
        display: flex;
        justify-content: center;
        z-index: 2;
    }
    /* Button — Figma exact: 194×48, Roboto Bold 16px text, subtle halo.
       Cursor animations OFF, drop-shadow filter OFF, transition OFF. */
    .vaiyuh-prelaunch__btn {
        width: 194px;
        height: 48px;
        padding: 0 24px;
        transition: none !important;
        box-shadow:
            0 0 50px 4px rgba(19, 217, 125, 0.28),
            0 0 18px 0   rgba(19, 217, 125, 0.40);
        filter: none;
    }
    .vaiyuh-prelaunch__btn:hover,
    .vaiyuh-prelaunch__btn:focus,
    .vaiyuh-prelaunch__btn:focus-visible,
    .vaiyuh-prelaunch__btn:active {
        transform: none;
        box-shadow:
            0 0 50px 4px rgba(19, 217, 125, 0.28),
            0 0 18px 0   rgba(19, 217, 125, 0.40);
        filter: none;
    }
    .vaiyuh-prelaunch__btn-text {
        font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
        font-size: 16px;       /* Figma exact */
        font-weight: 700;      /* Figma exact (Roboto Bold) */
        line-height: 1;
        background: none;
        -webkit-background-clip: initial;
                background-clip: initial;
        -webkit-text-fill-color: #F2F2F2;
        color: #F2F2F2;
    }
    .vaiyuh-prelaunch__btn:hover .vaiyuh-prelaunch__btn-text,
    .vaiyuh-prelaunch__btn:focus-visible .vaiyuh-prelaunch__btn-text {
        animation: none !important;
        -webkit-text-fill-color: #F2F2F2;
        color: #F2F2F2;
    }

    /* Modal — bigger touch targets, iOS-friendly input font.
       backdrop-filter is disabled on mobile because it's a continuous-paint
       GPU cost — the backdrop re-composites every frame the modal is open,
       which is what was causing lag AFTER the open animation finished.
       Replaced with a darker solid rgba background. Pill/input/section
       transitions are also off — every state change was triggering a
       repaint storm. The modal entrance animation is preserved. */
    .vaiyuh-modal::backdrop {
        background: rgba(8, 8, 8, 0.92);
        -webkit-backdrop-filter: none !important;
                backdrop-filter: none !important;
    }
    .vaiyuh-modal__section,
    .vaiyuh-pill,
    .vaiyuh-input,
    .vaiyuh-modal__close,
    .vaiyuh-modal__report,
    .vaiyuh-modal__submit-label,
    .vaiyuh-modal__submit-spinner,
    .vaiyuh-modal__submit {
        transition: none !important;
    }
    .vaiyuh-input:focus {
        /* Drop the 3px outer-glow focus ring — was forcing repaint on every
           keystroke. Use just the green border-color for focus indication. */
        box-shadow: none;
    }
    .vaiyuh-modal__card {
        width: min(440px, 94vw);
        padding: 36px 24px 28px;
    }
    .vaiyuh-modal__title {
        font-size: 24px;
    }
    .vaiyuh-modal__close {
        width: 36px;
        height: 36px;
        top: 14px;
        right: 14px;
    }
    .vaiyuh-pill {
        padding: 12px 22px;
        font-size: 14px;
        min-height: 44px;
        box-sizing: border-box;
        line-height: 1.2;
    }
    .vaiyuh-pills {
        gap: 8px;
    }
    .vaiyuh-input {
        height: 52px;
        font-size: 16px; /* >= 16px prevents iOS auto-zoom on focus */
    }
    .vaiyuh-modal__submit {
        height: 52px;
        font-size: 16px;
    }
    .vaiyuh-modal__success-title {
        font-size: 24px;
    }
    .vaiyuh-modal__success-text {
        font-size: 14px;
    }
}

/* ============================================================
   LEGAL PAGES (/privacy, /terms)
   Scrollable, readable, matches theme dark bg + Poppins/Roboto.
   Overrides the no-scroll html/body rules at the top of this file.
   ============================================================ */
body.vaiyuh-prelaunch-body:has(.vaiyuh-legal) {
    overflow-y: auto !important;
    height: auto !important;
    min-height: 100vh;
}
html:has(.vaiyuh-legal) {
    overflow-y: auto !important;
    height: auto !important;
}

.vaiyuh-legal {
    max-width: 720px;
    margin: 0 auto;
    padding: 48px 24px 96px;
    color: #C9C9C9;
    font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 15px;
    line-height: 1.65;
}
.vaiyuh-legal__head {
    margin-bottom: 36px;
}
.vaiyuh-legal__brand {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    text-decoration: none;
    color: #F2F2F2;
}
.vaiyuh-legal__brand-mark { width: 30px; height: 35px; display: inline-flex; }
.vaiyuh-legal__brand-mark img { display: block; width: 100%; height: 100%; object-fit: contain; }
.vaiyuh-legal__brand-name {
    font-family: 'Poppins', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 600;
    font-size: 22px;
    color: #F2F2F2;
}

.vaiyuh-legal__article h1 {
    font-family: 'Poppins', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 500;
    font-size: 32px;
    line-height: 1.2;
    color: #F2F2F2;
    margin: 0 0 8px;
}
.vaiyuh-legal__article h2 {
    font-family: 'Poppins', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 500;
    font-size: 20px;
    line-height: 1.3;
    color: #F2F2F2;
    margin: 32px 0 12px;
}
.vaiyuh-legal__article p {
    margin: 0 0 14px;
}
.vaiyuh-legal__article ul {
    margin: 0 0 14px;
    padding-left: 22px;
}
.vaiyuh-legal__article li {
    margin: 4px 0;
}
.vaiyuh-legal__article a {
    color: #13D97D;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.vaiyuh-legal__article a:hover { color: #1FE889; }
.vaiyuh-legal__article strong { color: #F2F2F2; font-weight: 500; }
.vaiyuh-legal__article em { font-style: italic; color: #E0E0E0; }
.vaiyuh-legal__updated {
    color: #919191;
    font-size: 13px;
    margin: 0 0 24px;
}
.vaiyuh-legal__footer-nav {
    margin-top: 48px;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 13px;
    color: #919191;
}

@media (max-width: 767px) {
    .vaiyuh-legal {
        padding: 32px 20px 80px;
        font-size: 14px;
    }
    .vaiyuh-legal__article h1 { font-size: 26px; }
    .vaiyuh-legal__article h2 { font-size: 18px; }
}