/* ================================================================
   Qlynic · IntakeForms.aspx
   intakeforms-s1.css — Design tokens + Section 1
   Append s2, s3… as separate files below.
   ================================================================ */

/* ── Reset ── */
*, ::before, ::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

img, svg {
    display: block;
    flex-shrink: 0;
}

/* ── Design tokens ── */
:root {
    /* Palette */
    --if-white: #ffffff;
    --if-snow: #f8f9fc;
    --if-mist: #f0f2f8;
    --if-ink: #09090b;
    --if-slate: #3f3f46;
    --if-stone: #71717a;
    --if-pebble: #a1a1aa;
    --if-dust: #d4d4d8;
    /* Cyan-teal — the neural colour, unique to this page */
    --if-cyan: #0891b2;
    --if-cyan-2: #06b6d4;
    --if-cyan-3: #22d3ee;
    --if-cyan-4: #67e8f9;
    --if-cyan-bg: rgba(8,145,178,.08);
    --if-cyan-bdr: rgba(8,145,178,.22);
    /* Blue */
    --if-blue: #2563eb;
    --if-blue-2: #3b82f6;
    --if-blue-bg: rgba(37,99,235,.08);
    --if-blue-bdr: rgba(37,99,235,.22);
    /* Violet */
    --if-violet: #7c3aed;
    --if-violet-2: #8b5cf6;
    --if-violet-bg: rgba(124,58,237,.08);
    --if-violet-bdr: rgba(124,58,237,.22);
    /* Emerald */
    --if-emerald: #059669;
    --if-emerald-2: #10b981;
    --if-emerald-bg: rgba(5,150,105,.08);
    --if-emerald-bdr: rgba(5,150,105,.22);
    /* Amber */
    --if-amber: #d97706;
    --if-amber-2: #f59e0b;
    --if-amber-bg: rgba(217,119,6,.08);
    --if-amber-bdr: rgba(217,119,6,.22);
    /* Rose */
    --if-rose: #e11d48;
    --if-rose-bg: rgba(225,29,72,.07);
    --if-rose-bdr: rgba(225,29,72,.20);
    /* Borders & shadows */
    --if-border: rgba(0,0,0,.07);
    --if-border-2: rgba(0,0,0,.10);
    --if-shadow-sm: 0 1px 3px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.04);
    --if-shadow: 0 4px 16px rgba(0,0,0,.07),0 2px 6px rgba(0,0,0,.04);
    --if-shadow-lg: 0 16px 48px rgba(0,0,0,.09),0 6px 16px rgba(0,0,0,.05);
    --if-grad: linear-gradient(135deg,#0891b2,#7c3aed);
    --if-grad-text: linear-gradient(135deg,#22d3ee,#818cf8);
    /* Radii */
    --if-r-sm: 6px;
    --if-r-md: 10px;
    --if-r-lg: 16px;
    --if-r-xl: 22px;
    --if-r-2xl: 30px;
    --if-r-pill: 999px;
    /* Fonts */
    --if-font: 'Plus Jakarta Sans','DM Sans',system-ui,sans-serif;
    --if-mono: 'JetBrains Mono','Fira Code',ui-monospace,monospace;
}

/* ── Page bg ── */
#gc-main {
    background: #07080f;
}

/* ── Shared eyebrow ── */
.if-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: var(--if-mono);
    font-size: clamp(9px,.85vw,10.5px);
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    padding: 5px 14px;
    border-radius: var(--if-r-pill);
    width: fit-content;
    margin-bottom: 22px;
    color: var(--if-cyan-3);
    background: rgba(8,145,178,.10);
    border: 1px solid rgba(8,145,178,.25);
}

.if-eyebrow-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--if-cyan-3);
    box-shadow: 0 0 8px rgba(34,211,238,.7);
    animation: if-dot-pulse 2s ease-in-out infinite;
}

@keyframes if-dot-pulse {
    0%,100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: .35;
        transform: scale(.7);
    }
}

@keyframes if-caret {
    0%,45% {
        opacity: 1;
    }

    55%,100% {
        opacity: 0;
    }
}


/* ================================================================
   SECTION 1 — "The question the AI asked before the doctor walked in."
   ================================================================
   Midnight #07080f. Full viewport height. Two halves.

   LEFT 48% — Copy + animated AI Question Generator terminal
              (dark glassmorphism card, GPT-style stream)
   RIGHT 52% — Hero image with cyan neural overlay + floating badges

   NEVER-DONE: Neural stream terminal
     - Admin types a single phrase: "knee injury assessment"
     - Three ellipsis "thinking" dots pulse
     - Questions appear one by one, streamed character by character
       (like GPT output) into the terminal
     - Each question gets a field-type chip (text/radio/scale/yes-no)
     - After all questions land, a "Saved to form · 7 questions"
       confirmation line glows emerald
     - Loop: terminal clears, new phrase, new questions
   ================================================================ */

.if-s1 {
    position: relative;
    background: #07080f;
    overflow: hidden;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
}

/* Deep neural aurora */
.if-s1-aurora {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background: radial-gradient(ellipse 60% 55% at 5% 40%, rgba(8,145,178,.10) 0%, transparent 60%), radial-gradient(ellipse 50% 50% at 95% 65%, rgba(124,58,237,.08) 0%, transparent 60%), radial-gradient(ellipse 40% 40% at 55% 10%, rgba(8,145,178,.05) 0%, transparent 55%);
    animation: if-s1-aurora 18s ease-in-out infinite alternate;
}

@keyframes if-s1-aurora {
    0% {
        opacity: .5;
        transform: scale(1) translate(0,0);
    }

    50% {
        opacity: 1;
        transform: scale(1.06) translate(-12px,10px);
    }

    100% {
        opacity: .65;
        transform: scale(.97) translate(10px,-7px);
    }
}

/* Fine dot grid */
.if-s1-grid {
    position: absolute;
    inset: 0 50% 0 0;
    pointer-events: none;
    z-index: 0;
    background-image: radial-gradient(circle,rgba(34,211,238,.06) 1px,transparent 1px);
    background-size: 26px 26px;
    mask-image: linear-gradient(to right,rgba(0,0,0,.4),transparent);
    -webkit-mask-image: linear-gradient(to right,rgba(0,0,0,.4),transparent);
}

/* Body */
.if-s1-body {
    position: relative;
    z-index: 1;
    flex: 1;
    display: flex;
    max-width: 1600px;
    width: 100%;
    margin: 0 auto;
}

/* ════════════════════════
   LEFT — copy
════════════════════════ */
.if-s1-copy {
    flex: 0 0 48%;
    max-width: 48%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(100px,12vh,140px) clamp(28px,4.5vw,72px) clamp(40px,5vh,64px);
}

/* Entry animations */
.if-s1-kicker {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--if-mono);
    font-size: clamp(10px,.95vw,12px);
    font-weight: 700;
    letter-spacing: .05em;
    color: var(--if-cyan-3);
    margin-bottom: 14px;
    opacity: 0;
    transition: opacity .5s ease .1s;
}

.if-s1-on .if-s1-kicker {
    opacity: 1;
}

.if-s1-kicker-ico {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(8,145,178,.12);
    border: 1.5px solid rgba(8,145,178,.28);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--if-cyan-3);
}

.if-s1-h1 {
    font-family: var(--if-font);
    font-size: clamp(28px,3.6vw,60px);
    font-weight: 800;
    line-height: 1.06;
    letter-spacing: -0.044em;
    color: rgba(255,255,255,.95);
    margin-bottom: 20px;
}

.if-s1-h1-l1 {
    display: block;
    opacity: 0;
    clip-path: inset(0 100% 0 0);
    transition: clip-path .7s cubic-bezier(.22,1,.36,1) .18s, opacity .4s ease .18s;
}

.if-s1-on .if-s1-h1-l1 {
    clip-path: inset(0 0% 0 0);
    opacity: 1;
}

.if-s1-h1-l2 {
    display: block;
    opacity: 0;
    clip-path: inset(0 100% 0 0);
    transition: clip-path .74s cubic-bezier(.22,1,.36,1) .34s, opacity .4s ease .34s;
}

.if-s1-on .if-s1-h1-l2 {
    clip-path: inset(0 0% 0 0);
    opacity: 1;
}

.if-s1-accent {
    position: relative;
    display: inline;
    background: var(--if-grad-text);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

    .if-s1-accent::after {
        content: '';
        position: absolute;
        bottom: 2px;
        left: 0;
        right: 0;
        height: 3px;
        background: var(--if-grad);
        border-radius: 2px;
        transform: scaleX(0);
        transform-origin: left;
        transition: transform .6s cubic-bezier(.22,1,.36,1) .82s;
    }

.if-s1-on .if-s1-accent::after {
    transform: scaleX(1);
}

.if-s1-sub {
    font-size: clamp(13.5px,1.35vw,16px);
    color: rgba(255,255,255,.35);
    line-height: 1.82;
    max-width: 430px;
    margin-bottom: 30px;
    opacity: 0;
    filter: blur(4px);
    transition: opacity .65s ease .48s, filter .65s ease .48s;
}

.if-s1-on .if-s1-sub {
    opacity: 1;
    filter: blur(0);
}

/* Feature chips */
.if-s1-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-bottom: 28px;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .5s ease .62s, transform .5s ease .62s;
}

.if-s1-on .if-s1-chips {
    opacity: 1;
    transform: translateY(0);
}

.if-s1-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border-radius: var(--if-r-pill);
    font-family: var(--if-mono);
    font-size: clamp(8.5px,.82vw,10px);
    font-weight: 700;
    letter-spacing: .06em;
    border: 1px solid;
}

.if-s1-chip--cyan {
    color: var(--if-cyan-3);
    background: rgba(8,145,178,.08);
    border-color: rgba(8,145,178,.22);
}

.if-s1-chip--violet {
    color: #a78bfa;
    background: rgba(124,58,237,.08);
    border-color: rgba(124,58,237,.22);
}

.if-s1-chip--emerald {
    color: var(--if-emerald-2);
    background: var(--if-emerald-bg);
    border-color: var(--if-emerald-bdr);
}

.if-s1-chip--amber {
    color: var(--if-amber-2);
    background: var(--if-amber-bg);
    border-color: var(--if-amber-bdr);
}

/* Stat row */
.if-s1-stats {
    display: flex;
    gap: clamp(6px,1.2vw,14px);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .5s ease .76s, transform .5s ease .76s;
}

.if-s1-on .if-s1-stats {
    opacity: 1;
    transform: translateY(0);
}

.if-s1-stat {
    flex: 1;
    padding: clamp(12px,1.4vw,16px) clamp(10px,1.2vw,16px);
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.07);
    border-radius: var(--if-r-lg);
    display: flex;
    flex-direction: column;
    gap: 4px;
    position: relative;
    overflow: hidden;
}

    .if-s1-stat::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 2px;
        transform: scaleX(0);
        transform-origin: left;
        transition: transform .5s cubic-bezier(.22,1,.36,1) var(--sb,0ms);
    }

.if-s1-on .if-s1-stat::before {
    transform: scaleX(1);
}

.if-s1-stat:nth-child(1)::before {
    background: var(--if-cyan-2);
    --sb: 820ms;
}

.if-s1-stat:nth-child(2)::before {
    background: var(--if-violet-2);
    --sb: 900ms;
}

.if-s1-stat:nth-child(3)::before {
    background: var(--if-emerald-2);
    --sb: 980ms;
}

.if-s1-stat-num {
    font-family: var(--if-font);
    font-size: clamp(22px,2.8vw,36px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.045em;
}

.if-s1-stat:nth-child(1) .if-s1-stat-num {
    color: var(--if-cyan-3);
}

.if-s1-stat:nth-child(2) .if-s1-stat-num {
    color: #a78bfa;
}

.if-s1-stat:nth-child(3) .if-s1-stat-num {
    color: var(--if-emerald-2);
}

.if-s1-stat-lbl {
    font-size: clamp(9.5px,.92vw,11px);
    font-weight: 700;
    color: rgba(255,255,255,.55);
}

.if-s1-stat-sub {
    font-size: clamp(8.5px,.82vw,10px);
    color: rgba(255,255,255,.25);
    font-family: var(--if-mono);
}

/* ════════════════════════
   RIGHT — image + terminal
════════════════════════ */
.if-s1-visual {
    flex: 1 1 52%;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(60px,8vh,100px) clamp(20px,3vw,48px) clamp(40px,5vh,72px);
}

/* Hero image */
.if-s1-photo-wrap {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    opacity: 0;
    transition: opacity 1.1s ease .32s;
}

.if-s1-on .if-s1-photo-wrap {
    opacity: 1;
}

.if-s1-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 20%;
    transform: scale(1.06);
    transition: transform 2.4s cubic-bezier(.22,1,.36,1) .32s;
    will-change: transform;
}

.if-s1-on .if-s1-photo {
    transform: scale(1);
}

/* Dark gradient overlay over image */
.if-s1-photo-mask {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(to right, #07080f 0%, rgba(7,8,15,.72) 35%, rgba(7,8,15,.28) 65%, rgba(7,8,15,.55) 100%), linear-gradient(to bottom, rgba(7,8,15,.5) 0%, transparent 25%, transparent 75%, rgba(7,8,15,.6) 100%);
}

/* Cyan neural scan lines over image */
.if-s1-scan {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background-image: repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(34,211,238,.018) 3px, rgba(34,211,238,.018) 4px);
    animation: if-s1-scan 4s linear infinite;
    opacity: .6;
}

@keyframes if-s1-scan {
    from {
        background-position: 0 0;
    }

    to {
        background-position: 0 -60px;
    }
}

/* Floating "AI · Neural" tag top-right */
.if-s1-photo-tag {
    position: absolute;
    top: clamp(20px,3vh,36px);
    right: clamp(16px,2.5vw,28px);
    z-index: 4;
    pointer-events: none;
    background: rgba(7,8,15,.75);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(34,211,238,.25);
    border-radius: var(--if-r-lg);
    padding: 10px 16px;
    display: flex;
    align-items: center;
    gap: 9px;
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity .6s ease .9s, transform .6s cubic-bezier(.22,1,.36,1) .9s;
}

.if-s1-on .if-s1-photo-tag {
    opacity: 1;
    transform: translateY(0);
}

.if-s1-photo-tag-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--if-cyan-3);
    box-shadow: 0 0 10px rgba(34,211,238,.8);
    animation: if-dot-pulse 1.8s ease-in-out infinite;
}

.if-s1-photo-tag-text {
    font-family: var(--if-mono);
    font-size: clamp(8.5px,.82vw,10.5px);
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: rgba(103,232,249,.80);
}

/* ══════════════════════════════════════════
   AI QUESTION GENERATOR TERMINAL
   True glassmorphism — see-through so the face
   is visible through the panel.
   3D perspective tilt on the visual container.
══════════════════════════════════════════ */

/* Perspective wrapper — gives the 3D standing angle */
.if-s1-visual {
    perspective: 1200px;
    perspective-origin: 40% 50%;
}

.if-terminal {
    position: relative;
    z-index: 3;
    width: clamp(360px,46vw,560px); /* bigger */
    /* TRUE glass — enough transparency to see the face through */
    background: rgba(7,8,15,.52);
    backdrop-filter: blur(18px) saturate(160%) brightness(1.08);
    -webkit-backdrop-filter: blur(18px) saturate(160%) brightness(1.08);
    border: 1px solid rgba(34,211,238,.22);
    border-top-color: rgba(34,211,238,.38); /* brighter top edge = light source */
    border-radius: var(--if-r-2xl);
    box-shadow: 0 0 0 1px rgba(34,211,238,.07), 0 2px 0 rgba(255,255,255,.04) inset, /* glass top sheen */
    0 40px 100px rgba(0,0,0,.55), 0 12px 32px rgba(8,145,178,.10);
    /* 3D standing tilt — rotates around Y axis toward viewer */
    opacity: 0;
    transform: perspective(900px) rotateY(-4deg) rotateX(2deg) translateY(20px);
    transition: opacity .7s ease .4s, transform .7s cubic-bezier(.22,1,.36,1) .4s;
    will-change: transform;
}

.if-s1-on .if-terminal {
    opacity: 1;
    transform: perspective(900px) rotateY(-4deg) rotateX(2deg) translateY(0);
}

/* Subtle glass inner highlight — top half lighter */
.if-terminal::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    border-radius: var(--if-r-2xl) var(--if-r-2xl) 0 0;
    background: linear-gradient(to bottom, rgba(255,255,255,.04), transparent);
    pointer-events: none;
    z-index: 0;
}

/* Cyan edge glow — left side only, as if catching light */
.if-terminal::after {
    content: '';
    position: absolute;
    top: 10%;
    bottom: 10%;
    left: -1px;
    width: 1px;
    border-radius: 1px;
    background: linear-gradient(to bottom, transparent, rgba(34,211,238,.7), transparent);
    pointer-events: none;
    z-index: 0;
}

/* ══════════════════════════════════════════
   NEURAL NECK STREAM
   Animated data-stream flowing downward from
   the terminal into the neck area.
   Covers the neck elegantly on all viewports.
══════════════════════════════════════════ */
.if-s1-neck {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 55%;
    height: clamp(140px,22vw,240px);
    pointer-events: none;
    z-index: 2;
    overflow: hidden;
}

    /* Base dark fade — blends image bottom into page */
    .if-s1-neck::before {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(to top, #07080f 0%, rgba(7,8,15,.85) 40%, transparent 100%), linear-gradient(to right, transparent 10%, rgba(7,8,15,.4) 100%);
    }

/* SVG neural lines canvas */
.if-s1-neck-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

/* Flowing data particles — CSS animated, no JS */
.if-neck-line {
    stroke: rgba(34,211,238,.35);
    stroke-width: 1;
    fill: none;
    stroke-dasharray: 6 14;
    stroke-dashoffset: 0;
    animation: if-neck-flow var(--nd,3s) linear infinite var(--no,0s);
}

@keyframes if-neck-flow {
    to {
        stroke-dashoffset: -80;
    }
}

.if-neck-node {
    fill: rgba(34,211,238,.6);
    filter: drop-shadow(0 0 3px rgba(34,211,238,.7));
    opacity: 0;
    animation: if-neck-node-pulse var(--np,2.4s) ease-in-out infinite var(--npo,0s);
}

@keyframes if-neck-node-pulse {
    0%,100% {
        opacity: 0;
        r: 2;
    }

    40%,60% {
        opacity: .8;
        r: 3;
    }
}

/* Scan line sweep across neck area */
.if-s1-neck-scan {
    position: absolute;
    inset: 0;
    background: linear-gradient( to bottom, transparent 0%, rgba(34,211,238,.025) 48%, rgba(34,211,238,.05) 50%, rgba(34,211,238,.025) 52%, transparent 100% );
    background-size: 100% 60px;
    animation: if-neck-scan 2.8s linear infinite;
}

@keyframes if-neck-scan {
    from {
        background-position: 0 -60px;
    }

    to {
        background-position: 0 200px;
    }
}

/* Chrome */
.if-term-chrome {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 18px;
    border-bottom: 1px solid rgba(255,255,255,.055);
}

.if-term-dots {
    display: flex;
    gap: 5px;
}

    .if-term-dots span {
        width: 9px;
        height: 9px;
        border-radius: 50%;
    }

        .if-term-dots span:nth-child(1) {
            background: rgba(239,68,68,.5);
        }

        .if-term-dots span:nth-child(2) {
            background: rgba(234,179,8,.5);
        }

        .if-term-dots span:nth-child(3) {
            background: rgba(34,197,94,.5);
        }

.if-term-title {
    font-family: var(--if-mono);
    font-size: 10px;
    font-weight: 600;
    color: rgba(255,255,255,.22);
    flex: 1;
    letter-spacing: .04em;
}

.if-term-badge {
    display: flex;
    align-items: center;
    gap: 5px;
    font-family: var(--if-mono);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    padding: 2px 9px;
    border-radius: var(--if-r-pill);
    background: rgba(8,145,178,.15);
    border: 1px solid rgba(8,145,178,.30);
    color: var(--if-cyan-3);
}

.if-term-badge-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--if-cyan-3);
    box-shadow: 0 0 7px rgba(34,211,238,.8);
    animation: if-dot-pulse 1.8s ease-in-out infinite;
}

/* Prompt row */
.if-term-prompt {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px 16px;
    border-bottom: 1px solid rgba(255,255,255,.045);
}

.if-term-prompt-ico {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    flex-shrink: 0;
    background: linear-gradient(135deg, var(--if-cyan), var(--if-violet));
    display: flex;
    align-items: center;
    justify-content: center;
}

.if-term-prompt-field {
    flex: 1;
    font-family: var(--if-mono);
    font-size: clamp(10px,.95vw,12px);
    font-weight: 500;
    color: rgba(255,255,255,.75);
}

    .if-term-prompt-field.typing::after {
        content: '';
        display: inline-block;
        width: 1.5px;
        height: 12px;
        border-radius: 1px;
        background: var(--if-cyan-3);
        margin-left: 2px;
        vertical-align: middle;
        animation: if-caret .8s ease-in-out infinite;
    }

.if-term-send {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--if-grad);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    box-shadow: 0 3px 10px rgba(8,145,178,.4);
    transition: transform .2s ease;
}

    .if-term-send.pulse {
        animation: if-send-spring .38s cubic-bezier(.22,1,.36,1);
    }

@keyframes if-send-spring {
    0% {
        transform: scale(1);
    }

    40% {
        transform: scale(1.2);
    }

    100% {
        transform: scale(1);
    }
}

/* Thinking dots */
.if-term-thinking {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    font-family: var(--if-mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: rgba(255,255,255,.25);
    opacity: 0;
    transition: opacity .25s ease;
}

    .if-term-thinking.show {
        opacity: 1;
    }

.if-term-think-dots {
    display: flex;
    gap: 4px;
}

.if-term-think-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--if-cyan);
    opacity: .3;
    animation: if-think 1.4s ease-in-out infinite var(--dd,0ms);
}

@keyframes if-think {
    0%,80%,100% {
        opacity: .3;
        transform: scale(.8);
    }

    40% {
        opacity: 1;
        transform: scale(1);
    }
}

/* Questions stream */
.if-term-questions {
    padding: 6px 16px 4px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: clamp(160px,18vw,210px);
    overflow: hidden;
}

.if-term-q {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    opacity: 0;
    transform: translateY(5px);
    transition: opacity .3s ease, transform .3s cubic-bezier(.22,1,.36,1);
}

    .if-term-q.show {
        opacity: 1;
        transform: translateY(0);
    }

.if-term-q-num {
    font-family: var(--if-mono);
    font-size: 9px;
    font-weight: 700;
    color: rgba(34,211,238,.5);
    flex-shrink: 0;
    padding-top: 2px;
    min-width: 16px;
}

.if-term-q-text {
    font-size: clamp(10.5px,1.02vw,12.5px);
    color: rgba(255,255,255,.72);
    line-height: 1.55;
    flex: 1;
}

.if-term-q-chip {
    font-family: var(--if-mono);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 2px 7px;
    border-radius: 4px;
    flex-shrink: 0;
    margin-top: 2px;
}

.if-term-q-chip--text {
    color: rgba(103,232,249,.8);
    background: rgba(8,145,178,.10);
    border: 1px solid rgba(8,145,178,.22);
}

.if-term-q-chip--radio {
    color: #a78bfa;
    background: rgba(124,58,237,.10);
    border: 1px solid rgba(124,58,237,.22);
}

.if-term-q-chip--scale {
    color: rgba(251,191,36,.8);
    background: rgba(217,119,6,.10);
    border: 1px solid rgba(217,119,6,.22);
}

.if-term-q-chip--yesno {
    color: rgba(52,211,153,.8);
    background: rgba(5,150,105,.10);
    border: 1px solid rgba(5,150,105,.22);
}

/* Confirm bar */
.if-term-confirm {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 6px 16px 14px;
    padding: 8px 12px;
    background: rgba(5,150,105,.07);
    border: 1px solid rgba(5,150,105,.20);
    border-radius: var(--if-r-md);
    opacity: 0;
    transform: translateY(4px);
    transition: opacity .4s ease, transform .4s ease;
}

    .if-term-confirm.show {
        opacity: 1;
        transform: translateY(0);
    }

.if-term-confirm-text {
    font-family: var(--if-mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--if-emerald-2);
}

/* ─────────────────────────────────────────────────────────────
   S1 RESPONSIVE
   Three breakpoints:
   ① 920px  — tablet: side-by-side starts to break, stack it
   ② 640px  — mobile: full Apple-style treatment
   ③ 380px  — very small iPhone SE / small Android
   ───────────────────────────────────────────────────────────── */

/* ① Tablet — stack copy above, image below */
@media(max-width:920px) {
    .if-s1 {
        min-height: auto;
    }

    .if-s1-body {
        flex-direction: column;
        min-height: auto;
    }

    .if-s1-copy {
        flex: none;
        max-width: 100%;
        padding: 88px 32px 36px;
        order: 1;
    }

    .if-s1-visual {
        flex: none;
        width: 100%;
        order: 2;
        min-height: clamp(440px,65vw,600px);
        padding: 20px 24px 64px;
        perspective: none;
    }

    /* Flatten 3D tilt — looks broken when stacked */
    .if-terminal,
    .if-s1-on .if-terminal {
        transform: none !important;
        width: clamp(300px,80vw,460px);
    }

    .if-s1-neck {
        width: 100%;
    }
}

/* ② Mobile — Apple-style generous layout */
@media(max-width:640px) {

    /* ── Section ── */
    .if-s1 {
        min-height: auto;
    }

    /* ── Image banner — FIRST, full bleed, cinematic fixed height ── */
    .if-s1-body {
        flex-direction: column;
    }

    .if-s1-visual {
        order: 1; /* image on top */
        width: 100%;
        /* Fixed height — just enough to see the AI face portrait */
        height: 62vw;
        min-height: 240px;
        max-height: 340px;
        padding: 0; /* no padding — image bleeds edge to edge */
        perspective: none;
        align-items: flex-end; /* terminal anchored to bottom */
        justify-content: center;
    }

    /* Image fills the banner */
    .if-s1-photo {
        object-position: center 15%;
    }

    /* Stronger bottom fade so copy reads clean below the image */
    .if-s1-photo-mask {
        background: linear-gradient(to bottom, rgba(7,8,15,.3) 0%, transparent 30%, transparent 55%, rgba(7,8,15,.95) 100%), linear-gradient(to right, rgba(7,8,15,.4) 0%, transparent 40%, transparent 60%, rgba(7,8,15,.4) 100%);
    }

    /* Terminal — hidden on mobile. Too much for a 390px screen.
       The image alone is the visual. */
    .if-terminal {
        display: none !important;
    }

    /* Floating AI tag — hide on mobile, adds clutter */
    .if-s1-photo-tag {
        display: none;
    }

    /* Neck stream — covers bottom of the image naturally */
    .if-s1-neck {
        width: 100%;
        height: clamp(80px,20vw,140px);
    }

    /* ── Copy — SECOND, below image ── */
    .if-s1-copy {
        order: 2;
        flex: none;
        max-width: 100%;
        /* Apple-level breathing room */
        padding: 32px 24px 48px;
        /* Left-aligned on mobile — centered feels corporate */
        align-items: flex-start;
    }

    /* Eyebrow pill */
    .if-eyebrow {
        font-size: 11px;
        margin-bottom: 16px;
    }

    /* Kicker line */
    .if-s1-kicker {
        font-size: 12px;
        margin-bottom: 10px;
    }

    /* ── Headline — the most critical fix ──
       line-height 1.06 is fine on desktop where lines are long.
       On mobile where the title wraps to 3 lines it feels crushed.
       1.14 gives each line room to breathe. ── */
    .if-s1-h1 {
        font-size: clamp(34px, 9vw, 46px);
        line-height: 1.14;
        letter-spacing: -0.038em;
        margin-bottom: 18px;
    }

    /* Subtitle — larger, more readable, less transparent */
    .if-s1-sub {
        font-size: 16px;
        line-height: 1.75;
        color: rgba(255,255,255,.60);
        max-width: 100%;
        margin-bottom: 28px;
    }

    /* Feature chips — keep them, they're scannable */
    .if-s1-chips {
        gap: 8px;
        margin-bottom: 28px;
    }

    .if-s1-chip {
        font-size: 12px;
        padding: 6px 13px;
    }

    /* Stat tiles — 3 across still, but with fixed pixel sizes */
    .if-s1-stats {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
    }

    .if-s1-stat {
        padding: 14px 12px;
    }

    .if-s1-stat-num {
        font-size: 26px;
        letter-spacing: -0.04em;
    }

    .if-s1-stat-lbl {
        font-size: 11px;
        color: rgba(255,255,255,.65);
        line-height: 1.3;
    }

    .if-s1-stat-sub {
        font-size: 10px;
        color: rgba(255,255,255,.40);
    }
}

/* ③ Very small screens — iPhone SE (375px), older Android (360px) */
@media(max-width:380px) {
    .if-s1-copy {
        padding: 28px 18px 40px;
    }

    .if-s1-h1 {
        font-size: 32px;
        line-height: 1.15;
    }

    .if-s1-stats {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
    }

    .if-s1-stat-num {
        font-size: 22px;
    }

    .if-s1-stat-lbl {
        font-size: 10px;
    }

    .if-s1-stat-sub {
        display: none;
    }
    /* too tight at 360px */
}

@media(prefers-reduced-motion:reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}






































/* S2 — Describe what you need. The AI writes the questions. */

.if-s2 {
    position: relative;
    background: #06070b;
    overflow: hidden;
    padding: clamp(96px,12vh,140px) 0 clamp(80px,10vh,120px);
}

    /* Ambient — cyan/violet, distinct from S1 */
    .if-s2::before {
        content: '';
        position: absolute;
        inset: 0;
        pointer-events: none;
        z-index: 0;
        background: radial-gradient(ellipse 60% 50% at 80% 30%, rgba(8,145,178,.09) 0%, transparent 60%), radial-gradient(ellipse 50% 45% at 15% 70%, rgba(124,58,237,.07) 0%, transparent 60%), radial-gradient(ellipse 40% 40% at 50% 5%, rgba(8,145,178,.05) 0%, transparent 55%);
        animation: if-s2-aurora 20s ease-in-out infinite alternate;
    }

@keyframes if-s2-aurora {
    0% {
        opacity: .5;
        transform: scale(1) translate(0,0);
    }

    50% {
        opacity: 1;
        transform: scale(1.06) translate(-14px,10px);
    }

    100% {
        opacity: .65;
        transform: scale(.97) translate(12px,-8px);
    }
}

/* Fine dot grain */
.if-s2::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background-image: radial-gradient(rgba(34,211,238,.020) 1px, transparent 1px);
    background-size: 30px 30px;
    mask-image: radial-gradient(ellipse 85% 85% at 50% 50%, black 40%, transparent 100%);
    -webkit-mask-image: radial-gradient(ellipse 85% 85% at 50% 50%, black 40%, transparent 100%);
}

.if-s2-inner {
    position: relative;
    z-index: 1;
    max-width: 1380px;
    margin: 0 auto;
    padding: 0 clamp(20px,4.5vw,60px);
}

/* ── Header ── */
.if-s2-head {
    text-align: center;
    max-width: 700px;
    margin: 0 auto clamp(56px,6.5vw,80px);
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .7s ease, transform .7s cubic-bezier(.22,1,.36,1);
}

    .if-s2-head.is-vis {
        opacity: 1;
        transform: translateY(0);
    }

.if-s2-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: var(--if-mono);
    font-size: clamp(9px,.85vw,10.5px);
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--if-cyan-3);
    background: rgba(8,145,178,.10);
    border: 1px solid rgba(8,145,178,.25);
    border-radius: var(--if-r-pill);
    padding: 5px 14px;
    margin-bottom: 22px;
}

.if-s2-eyebrow-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--if-cyan-3);
    box-shadow: 0 0 8px rgba(34,211,238,.7);
    animation: if-dot-pulse 2s ease-in-out infinite;
}

.if-s2-h2 {
    font-family: var(--if-font);
    font-size: clamp(28px,3.8vw,62px);
    font-weight: 800;
    line-height: 1.06;
    letter-spacing: -0.044em;
    color: rgba(255,255,255,.95);
    margin-bottom: 20px;
}

    .if-s2-h2 em {
        font-style: normal;
        background: linear-gradient(135deg,#22d3ee,#818cf8);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
    }

.if-s2-sub {
    font-size: clamp(14px,1.38vw,16.5px);
    color: rgba(255,255,255,.32);
    line-height: 1.82;
    max-width: 540px;
    margin: 0 auto;
}

/* ══════════════════════════════════════════════════
   MAIN DEMO — two columns
   LEFT  48%: The generation theatre (step cards)
   RIGHT 52%: The live form preview card (fixed height, opacity switch)
══════════════════════════════════════════════════ */
.if-s2-demo {
    display: grid;
    grid-template-columns: 48% 52%;
    gap: clamp(20px,3vw,40px);
    align-items: start;
    margin-bottom: clamp(48px,6vw,72px);
}

/* ────────────────────────────
   LEFT: Step cards
──────────────────────────── */
.if-s2-steps {
    display: flex;
    flex-direction: column;
    gap: clamp(10px,1.4vw,14px);
    opacity: 0;
    transform: translateX(-22px);
    transition: opacity .65s ease .1s, transform .65s cubic-bezier(.22,1,.36,1) .1s;
}

    .if-s2-steps.is-vis {
        opacity: 1;
        transform: translateX(0);
    }

.if-s2-step {
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.07);
    border-radius: var(--if-r-xl);
    padding: clamp(16px,2vw,22px) clamp(16px,2vw,22px);
    display: grid;
    grid-template-columns: 36px 1fr;
    gap: 12px;
    align-items: start;
    position: relative;
    overflow: hidden;
    transition: background .35s ease, border-color .35s ease, box-shadow .35s ease;
    cursor: default;
}

    /* Top accent line */
    .if-s2-step::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 2px;
        transform: scaleX(0);
        transform-origin: left;
        transition: transform .4s cubic-bezier(.22,1,.36,1);
    }

    .if-s2-step.active::before {
        transform: scaleX(1);
    }

    .if-s2-step[data-step="1"]::before {
        background: linear-gradient(90deg,var(--if-cyan),var(--if-violet));
    }

    .if-s2-step[data-step="2"]::before {
        background: linear-gradient(90deg,var(--if-violet),#a78bfa);
    }

    .if-s2-step[data-step="3"]::before {
        background: linear-gradient(90deg,#10b981,var(--if-cyan));
    }

    .if-s2-step[data-step="4"]::before {
        background: linear-gradient(90deg,var(--if-cyan-2),var(--if-emerald-2));
    }

    .if-s2-step.active {
        background: rgba(8,145,178,.05);
        border-color: rgba(8,145,178,.22);
        box-shadow: 0 0 0 1px rgba(8,145,178,.06), 0 8px 28px rgba(0,0,0,.18);
    }

    .if-s2-step.done {
        background: rgba(16,185,129,.04);
        border-color: rgba(16,185,129,.18);
    }

/* Step number bubble */
.if-s2-step-num {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--if-mono);
    font-size: 11px;
    font-weight: 800;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.10);
    color: rgba(255,255,255,.30);
    transition: background .3s ease, border-color .3s ease, color .3s ease, box-shadow .3s ease;
    position: relative;
}

.if-s2-step.active .if-s2-step-num {
    background: rgba(8,145,178,.15);
    border-color: rgba(8,145,178,.35);
    color: var(--if-cyan-3);
    box-shadow: 0 0 12px rgba(8,145,178,.25);
}

.if-s2-step.done .if-s2-step-num {
    background: rgba(16,185,129,.15);
    border-color: rgba(16,185,129,.30);
    color: var(--if-emerald-2);
}

/* Pulse ring on active */
.if-s2-step.active .if-s2-step-num::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 1.5px solid rgba(8,145,178,.30);
    animation: if-s2-ring 2s ease-in-out infinite;
}

@keyframes if-s2-ring {
    0%,100% {
        transform: scale(1);
        opacity: .4;
    }

    50% {
        transform: scale(1.15);
        opacity: .1;
    }
}

.if-s2-step-body {
    flex: 1;
}

.if-s2-step-title {
    font-size: clamp(13px,1.3vw,15.5px);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.3;
    color: rgba(255,255,255,.40);
    transition: color .3s ease;
}

.if-s2-step.active .if-s2-step-title {
    color: rgba(255,255,255,.88);
}

.if-s2-step.done .if-s2-step-title {
    color: rgba(255,255,255,.55);
}

.if-s2-step-sub {
    font-size: clamp(11px,1.05vw,12.5px);
    color: rgba(255,255,255,.22);
    line-height: 1.6;
    margin-top: 4px;
    transition: color .3s ease;
}

.if-s2-step.active .if-s2-step-sub {
    color: rgba(255,255,255,.42);
}

.if-s2-step.done .if-s2-step-sub {
    color: rgba(255,255,255,.30);
}

/* Inline input field inside step 1 */
.if-s2-input-row {
    grid-column: 2;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    height: 0;
    overflow: hidden;
    opacity: 0;
    transition: height .35s ease, opacity .3s ease;
}

.if-s2-step.active .if-s2-input-row {
    height: 38px;
    opacity: 1;
}

.if-s2-field {
    flex: 1;
    height: 36px;
    padding: 0 12px;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(8,145,178,.25);
    border-radius: var(--if-r-pill);
    font-family: var(--if-mono);
    font-size: 11.5px;
    font-weight: 600;
    color: rgba(255,255,255,.75);
    display: flex;
    align-items: center;
    transition: border-color .25s ease, box-shadow .25s ease;
}

    .if-s2-field.active-field {
        border-color: rgba(8,145,178,.55);
        box-shadow: 0 0 0 3px rgba(8,145,178,.10);
    }

.if-s2-field-cursor {
    display: inline-block;
    width: 1.5px;
    height: 12px;
    border-radius: 1px;
    background: var(--if-cyan-3);
    margin-left: 1px;
    vertical-align: middle;
    animation: if-caret .75s ease-in-out infinite;
}

/* Progress drain strip on active step */
.if-s2-step-prog {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 2px;
    width: 0%;
    background: linear-gradient(90deg,var(--if-cyan),var(--if-violet));
    opacity: 0;
    transition: opacity .2s ease;
    border-radius: 0 0 0 var(--if-r-xl);
}

.if-s2-step.active .if-s2-step-prog {
    opacity: .5;
}

.if-s2-step.active.cycling .if-s2-step-prog {
    transition: width var(--step-dur,3s) linear, opacity .2s ease;
    width: 100%;
}

/* ────────────────────────────
   RIGHT: Live form preview
──────────────────────────── */
.if-s2-preview-wrap {
    opacity: 0;
    transform: translateX(22px);
    transition: opacity .65s ease .2s, transform .65s cubic-bezier(.22,1,.36,1) .2s;
    position: sticky;
    top: clamp(80px,10vh,100px);
}

    .if-s2-preview-wrap.is-vis {
        opacity: 1;
        transform: translateX(0);
    }

.if-s2-preview-card {
    background: rgba(255,255,255,.025);
    border: 1px solid rgba(255,255,255,.07);
    border-radius: var(--if-r-2xl);
    overflow: hidden;
    box-shadow: 0 0 0 1px rgba(8,145,178,.04), 0 32px 80px rgba(0,0,0,.4);
}

/* Chrome bar */
.if-s2-pv-chrome {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 18px;
    border-bottom: 1px solid rgba(255,255,255,.055);
    background: rgba(255,255,255,.014);
}

.if-s2-pv-dots {
    display: flex;
    gap: 5px;
}

    .if-s2-pv-dots span {
        width: 9px;
        height: 9px;
        border-radius: 50%;
    }

        .if-s2-pv-dots span:nth-child(1) {
            background: rgba(239,68,68,.4);
        }

        .if-s2-pv-dots span:nth-child(2) {
            background: rgba(234,179,8,.4);
        }

        .if-s2-pv-dots span:nth-child(3) {
            background: rgba(34,197,94,.4);
        }

.if-s2-pv-title {
    font-family: var(--if-mono);
    font-size: 10px;
    font-weight: 600;
    color: rgba(255,255,255,.22);
    flex: 1;
    letter-spacing: .04em;
}

.if-s2-pv-badge {
    font-family: var(--if-mono);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 2px 9px;
    border-radius: var(--if-r-pill);
    background: rgba(8,145,178,.12);
    border: 1px solid rgba(8,145,178,.25);
    color: var(--if-cyan-3);
    transition: background .3s ease, border-color .3s ease, color .3s ease;
}

    .if-s2-pv-badge.generating {
        background: rgba(124,58,237,.12);
        border-color: rgba(124,58,237,.28);
        color: #a78bfa;
    }

    .if-s2-pv-badge.done-badge {
        background: rgba(16,185,129,.12);
        border-color: rgba(16,185,129,.25);
        color: var(--if-emerald-2);
    }

.if-s2-pv-badge-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 6px currentColor;
    animation: if-dot-pulse 1.8s ease-in-out infinite;
}

/* FIXED HEIGHT panel container */
.if-s2-pv-panels {
    position: relative;
    height: clamp(360px,42vw,480px);
}

.if-s2-pv-panel {
    position: absolute;
    inset: 0;
    padding: clamp(16px,2vw,22px);
    display: flex;
    flex-direction: column;
    gap: 10px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .4s ease;
    overflow: hidden;
}

    .if-s2-pv-panel.active {
        opacity: 1;
        pointer-events: auto;
    }

/* Panel: empty state */
.if-s2-pv-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.if-s2-pv-empty-ico {
    width: 48px;
    height: 48px;
    border-radius: var(--if-r-lg);
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.07);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,.20);
}

.if-s2-pv-empty-t {
    font-size: 13px;
    font-weight: 700;
    color: rgba(255,255,255,.25);
    letter-spacing: -0.01em;
}

.if-s2-pv-empty-s {
    font-family: var(--if-mono);
    font-size: 10px;
    color: rgba(255,255,255,.14);
    letter-spacing: .04em;
    text-align: center;
}

/* Panel: generating */
.if-s2-pv-gen {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 22px;
}

.if-s2-pv-gen-ring {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    position: relative;
}

    .if-s2-pv-gen-ring::before,
    .if-s2-pv-gen-ring::after {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: 50%;
        border: 2px solid transparent;
    }

    .if-s2-pv-gen-ring::before {
        border-top-color: var(--if-cyan-3);
        border-right-color: var(--if-cyan);
        animation: if-s2-spin 1s linear infinite;
    }

    .if-s2-pv-gen-ring::after {
        inset: 6px;
        border-top-color: rgba(139,92,246,.7);
        border-left-color: rgba(139,92,246,.5);
        animation: if-s2-spin .7s linear infinite reverse;
    }

@keyframes if-s2-spin {
    to {
        transform: rotate(360deg);
    }
}

.if-s2-pv-gen-label {
    font-family: var(--if-mono);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .10em;
    text-transform: uppercase;
    color: rgba(255,255,255,.28);
    text-align: center;
}

.if-s2-pv-gen-sub {
    font-family: var(--if-mono);
    font-size: 9px;
    color: rgba(255,255,255,.16);
    margin-top: -14px;
    text-align: center;
}

/* Panel: questions list */
.if-s2-pv-form-title {
    font-size: clamp(12px,1.2vw,14px);
    font-weight: 800;
    color: rgba(255,255,255,.65);
    letter-spacing: -0.018em;
    flex-shrink: 0;
}

.if-s2-pv-qs {
    display: flex;
    flex-direction: column;
    gap: 7px;
    flex: 1;
    overflow: hidden;
}

.if-s2-pv-q {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 9px 11px;
    background: rgba(255,255,255,.035);
    border: 1px solid rgba(255,255,255,.06);
    border-radius: var(--if-r-md);
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .3s ease var(--qd,0ms), transform .3s cubic-bezier(.22,1,.36,1) var(--qd,0ms);
}

    .if-s2-pv-q.show {
        opacity: 1;
        transform: translateY(0);
    }

.if-s2-pv-q-num {
    font-family: var(--if-mono);
    font-size: 8.5px;
    font-weight: 700;
    color: rgba(34,211,238,.45);
    min-width: 14px;
    flex-shrink: 0;
    padding-top: 2px;
}

.if-s2-pv-q-text {
    font-size: clamp(10.5px,1vw,12px);
    color: rgba(255,255,255,.65);
    line-height: 1.5;
    flex: 1;
}

.if-s2-pv-q-chip {
    font-family: var(--if-mono);
    font-size: 7.5px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 2px 6px;
    border-radius: 4px;
    flex-shrink: 0;
    margin-top: 2px;
}

.if-s2-pv-q-chip--text {
    color: rgba(103,232,249,.8);
    background: rgba(8,145,178,.10);
    border: 1px solid rgba(8,145,178,.20);
}

.if-s2-pv-q-chip--radio {
    color: #a78bfa;
    background: rgba(124,58,237,.10);
    border: 1px solid rgba(124,58,237,.20);
}

.if-s2-pv-q-chip--scale {
    color: rgba(251,191,36,.8);
    background: rgba(217,119,6,.10);
    border: 1px solid rgba(217,119,6,.20);
}

.if-s2-pv-q-chip--yesno {
    color: rgba(52,211,153,.8);
    background: rgba(5,150,105,.10);
    border: 1px solid rgba(5,150,105,.20);
}

/* Save bar */
.if-s2-pv-savebar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 14px;
    background: rgba(16,185,129,.06);
    border: 1px solid rgba(16,185,129,.18);
    border-radius: var(--if-r-md);
    flex-shrink: 0;
    opacity: 0;
    transform: translateY(5px);
    transition: opacity .4s ease, transform .4s ease;
}

    .if-s2-pv-savebar.show {
        opacity: 1;
        transform: translateY(0);
    }

.if-s2-pv-save-text {
    font-family: var(--if-mono);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--if-emerald-2);
}

.if-s2-pv-save-btn {
    font-family: var(--if-mono);
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 4px 12px;
    border-radius: var(--if-r-pill);
    background: var(--if-emerald-2);
    color: #fff;
    border: none;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(16,185,129,.3);
    animation: if-s2-savebtn-pop .4s cubic-bezier(.34,1.56,.64,1);
}

@keyframes if-s2-savebtn-pop {
    from {
        transform: scale(.7);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

/* ── Truth row ── */
.if-s2-truths {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: clamp(10px,1.8vw,18px);
}

.if-s2-truth {
    background: rgba(255,255,255,.025);
    border: 1px solid rgba(255,255,255,.065);
    border-radius: var(--if-r-xl);
    padding: clamp(18px,2.2vw,26px);
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: relative;
    overflow: hidden;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .55s ease var(--td,0ms), transform .55s cubic-bezier(.22,1,.36,1) var(--td,0ms);
}

.if-s2-truths.is-vis .if-s2-truth {
    opacity: 1;
    transform: translateY(0);
}

.if-s2-truth:nth-child(1) {
    --td: 0ms;
}

.if-s2-truth:nth-child(2) {
    --td: 80ms;
}

.if-s2-truth:nth-child(3) {
    --td: 160ms;
}

/* Colour top bar */
.if-s2-truth::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    border-radius: var(--if-r-xl) var(--if-r-xl) 0 0;
}

.if-s2-truth:nth-child(1)::before {
    background: linear-gradient(90deg,var(--if-cyan),var(--if-violet));
}

.if-s2-truth:nth-child(2)::before {
    background: linear-gradient(90deg,var(--if-violet),#a78bfa);
}

.if-s2-truth:nth-child(3)::before {
    background: linear-gradient(90deg,var(--if-cyan-2),var(--if-emerald-2));
}

/* Ink blob */
.if-s2-truth-blob {
    position: absolute;
    top: -44px;
    left: -44px;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
    transform: scale(0);
    transform-origin: top left;
    transition: transform .85s cubic-bezier(.22,1,.36,1) var(--tb,500ms);
    filter: blur(28px);
    opacity: .35;
}

.if-s2-truths.is-vis .if-s2-truth-blob {
    transform: scale(1);
}

.if-s2-truth:nth-child(1) .if-s2-truth-blob {
    background: var(--if-cyan);
    --tb: 500ms;
}

.if-s2-truth:nth-child(2) .if-s2-truth-blob {
    background: var(--if-violet);
    --tb: 600ms;
}

.if-s2-truth:nth-child(3) .if-s2-truth-blob {
    background: var(--if-emerald-2);
    --tb: 700ms;
}

.if-s2-truth-ico {
    width: 38px;
    height: 38px;
    border-radius: var(--if-r-md);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
}

.if-s2-truth:nth-child(1) .if-s2-truth-ico {
    background: rgba(8,145,178,.10);
    color: var(--if-cyan-3);
    border: 1px solid rgba(8,145,178,.22);
}

.if-s2-truth:nth-child(2) .if-s2-truth-ico {
    background: rgba(124,58,237,.10);
    color: #a78bfa;
    border: 1px solid rgba(124,58,237,.22);
}

.if-s2-truth:nth-child(3) .if-s2-truth-ico {
    background: rgba(16,185,129,.10);
    color: var(--if-emerald-2);
    border: 1px solid rgba(16,185,129,.22);
}

.if-s2-truth-h {
    font-size: clamp(13px,1.28vw,15.5px);
    font-weight: 800;
    letter-spacing: -0.018em;
    color: rgba(255,255,255,.80);
    line-height: 1.28;
    position: relative;
    z-index: 1;
}

.if-s2-truth-p {
    font-size: clamp(11px,1.05vw,12.5px);
    color: rgba(255,255,255,.32);
    line-height: 1.70;
    position: relative;
    z-index: 1;
}

/* ══════════════════════════════════════════════════
   RESPONSIVE
   ① 960px  — tablet: single column, static preview
   ② 640px  — mobile: Apple-level premium treatment
   ③ 380px  — very small: SE / small Android
══════════════════════════════════════════════════ */

/* ① Tablet */
@media (max-width: 960px) {
    .if-s2-demo {
        grid-template-columns: 1fr;
    }

    .if-s2-preview-wrap {
        position: static;
    }

    .if-s2-pv-panels {
        height: clamp(340px,75vw,440px);
    }

    .if-s2-truths {
        grid-template-columns: 1fr 1fr;
    }
}

/* ② Mobile — ultra-premium treatment */
@media (max-width: 640px) {

    /* Section breathing room */
    .if-s2 {
        padding: 64px 0 56px;
    }

    .if-s2-inner {
        padding: 0 20px;
    }

    /* Header block */
    .if-s2-head {
        max-width: 100%;
        text-align: left;
        margin-bottom: 36px;
    }

    /* Eyebrow pill — hard px, vw is dangerously small at 390px */
    .if-s2-eyebrow {
        font-size: 11px;
        padding: 5px 13px;
        margin-bottom: 18px;
    }

    /* ── Headline — the critical fix ──
       line-height 1.06 crushes 3-line wraps on mobile.
       1.14 lets every line breathe like the section heading deserves. */
    .if-s2-h2 {
        font-size: clamp(32px, 9vw, 44px);
        line-height: 1.14;
        letter-spacing: -0.038em;
        margin-bottom: 16px;
    }

    /* Subtitle — was 32% opacity which is invisible on OLED dark panels */
    .if-s2-sub {
        font-size: 16px;
        line-height: 1.75;
        color: rgba(255,255,255,.55);
        max-width: 100%;
        text-align: left;
    }

    /* Demo block — generous vertical gap */
    .if-s2-demo {
        gap: 20px;
        margin-bottom: 36px;
    }

    /* Step cards */
    .if-s2-step {
        padding: 16px 14px;
        grid-template-columns: 32px 1fr;
        gap: 10px;
        border-radius: var(--if-r-lg);
    }

    .if-s2-step-title {
        font-size: 15px;
        line-height: 1.3;
    }

    /* Was 22% — invisible on mobile screens in bright light */
    .if-s2-step-sub {
        font-size: 13px;
        color: rgba(255,255,255,.35);
        line-height: 1.55;
    }

    .if-s2-step.active .if-s2-step-sub {
        color: rgba(255,255,255,.58);
    }

    .if-s2-step.done .if-s2-step-sub {
        color: rgba(255,255,255,.40);
    }

    /* Preview card */
    .if-s2-preview-card {
        border-radius: var(--if-r-xl);
    }

    .if-s2-pv-panels {
        height: clamp(300px, 92vw, 400px);
    }

    .if-s2-pv-form-title {
        font-size: 14px;
    }

    .if-s2-pv-q {
        padding: 9px 10px;
        gap: 8px;
    }

    /* Question text — was clamp to ~10.5px on mobile, bumped to legible 13px */
    .if-s2-pv-q-text {
        font-size: 13px;
        line-height: 1.55;
        color: rgba(255,255,255,.72);
    }

    /* Question num — bump for mobile readability */
    .if-s2-pv-q-num {
        font-size: 10px;
        color: rgba(34,211,238,.55);
    }

    /* Save bar text */
    .if-s2-pv-save-text {
        font-size: 11px;
    }

    .if-s2-pv-save-btn {
        font-size: 10px;
        padding: 6px 14px;
    }

    /* Truth cards — single column, full bleed */
    .if-s2-truths {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .if-s2-truth {
        padding: 20px 18px;
        border-radius: var(--if-r-lg);
        gap: 12px;
    }

    .if-s2-truth-h {
        font-size: 16px;
        line-height: 1.3;
        color: rgba(255,255,255,.88);
    }

    /* Was 32% opacity — critical readability fail on mobile dark bg */
    .if-s2-truth-p {
        font-size: 14px;
        line-height: 1.72;
        color: rgba(255,255,255,.52);
    }

    .if-s2-truth-ico {
        width: 40px;
        height: 40px;
    }

    /* Input row tighter on small viewport */
    .if-s2-step.active .if-s2-input-row {
        height: 42px;
    }

    .if-s2-field {
        height: 38px;
        font-size: 13px;
    }
}

/* ③ Very small — iPhone SE (375px), small Android (360px) */
@media (max-width: 380px) {

    .if-s2 {
        padding: 52px 0 48px;
    }

    .if-s2-inner {
        padding: 0 16px;
    }

    .if-s2-h2 {
        font-size: 30px;
        line-height: 1.15;
    }

    .if-s2-sub {
        font-size: 15px;
    }

    .if-s2-step-title {
        font-size: 14px;
    }

    .if-s2-step-sub {
        font-size: 12.5px;
    }

    .if-s2-truth-h {
        font-size: 15px;
    }

    .if-s2-truth-p {
        font-size: 13.5px;
    }

    .if-s2-pv-panels {
        height: clamp(280px, 95vw, 360px);
    }

    .if-s2-pv-q-text {
        font-size: 12.5px;
    }
}




























/* ================================================================
   Qlynic · IntakeForms.aspx
   SECTION 3 — "The right form, triggered at the right moment."
   Enhanced: ultra-premium mobile treatment, matching S1/S2 standard.
   ================================================================ */

/* ──────────────────────────────────────────────
   S3 SECTION SHELL
────────────────────────────────────────────── */
.if-s3 {
    position: relative;
    background: #050810;
    overflow: hidden;
    padding: clamp(96px,12vh,140px) 0 clamp(80px,10vh,120px);
}

    /* Cyan-indigo aurora — deeper than S1, more indigo */
    .if-s3::before {
        content: '';
        position: absolute;
        inset: 0;
        pointer-events: none;
        z-index: 0;
        background: radial-gradient(ellipse 65% 55% at 50% 0%, rgba(8,145,178,.13) 0%, transparent 60%), radial-gradient(ellipse 55% 50% at 10% 80%, rgba(99,102,241,.10) 0%, transparent 60%), radial-gradient(ellipse 50% 45% at 90% 50%, rgba(8,145,178,.08) 0%, transparent 55%), radial-gradient(ellipse 40% 35% at 50% 100%, rgba(124,58,237,.07) 0%, transparent 55%);
        animation: if-s3-aurora 22s ease-in-out infinite alternate;
    }

@keyframes if-s3-aurora {
    0% {
        opacity: .5;
        transform: scale(1);
    }

    50% {
        opacity: 1;
        transform: scale(1.05) translate(-10px, 8px);
    }

    100% {
        opacity: .65;
        transform: scale(.97) translate( 8px, -6px);
    }
}

/* Hex / dot grid pattern */
.if-s3-hexgrid {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background-image: radial-gradient(rgba(34,211,238,.032) 1px, transparent 1px), radial-gradient(rgba(99,102,241,.024) 1px, transparent 1px);
    background-size: 36px 36px, 60px 60px;
    background-position: 0 0, 18px 18px;
    mask-image: radial-gradient(ellipse 90% 90% at 50% 50%, black 30%, transparent 100%);
    -webkit-mask-image: radial-gradient(ellipse 90% 90% at 50% 50%, black 30%, transparent 100%);
}

.if-s3-inner {
    position: relative;
    z-index: 1;
    max-width: 1380px;
    margin: 0 auto;
    padding: 0 clamp(20px,4.5vw,60px);
}

/* ──────────────────────────────────────────────
   HEADER
────────────────────────────────────────────── */
.if-s3-head {
    text-align: center;
    max-width: 700px;
    margin: 0 auto clamp(56px,7vw,84px);
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .7s ease, transform .7s cubic-bezier(.22,1,.36,1);
}

    .if-s3-head.is-vis {
        opacity: 1;
        transform: translateY(0);
    }

.if-s3-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: var(--if-mono);
    font-size: clamp(9px,.85vw,10.5px);
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--if-cyan-3);
    background: rgba(8,145,178,.10);
    border: 1px solid rgba(8,145,178,.25);
    border-radius: var(--if-r-pill);
    padding: 5px 14px;
    margin-bottom: 22px;
}

.if-s3-eyebrow-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--if-cyan-3);
    box-shadow: 0 0 8px rgba(34,211,238,.7);
    animation: if-dot-pulse 2s ease-in-out infinite;
}

.if-s3-h2 {
    font-family: var(--if-font);
    font-size: clamp(28px,3.8vw,62px);
    font-weight: 800;
    line-height: 1.06;
    letter-spacing: -0.044em;
    color: rgba(255,255,255,.95);
    margin-bottom: 20px;
}

    .if-s3-h2 em {
        font-style: normal;
        background: linear-gradient(135deg,#22d3ee,#6366f1);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
    }

.if-s3-sub {
    font-size: clamp(14px,1.38vw,16.5px);
    color: rgba(255,255,255,.32);
    line-height: 1.82;
    max-width: 560px;
    margin: 0 auto;
}

/* ══════════════════════════════════════════════════
   TRIGGER MODE CARDS — 3-column desktop
   Active card highlights + expands detail panel below.
   Auto-cycling with progress bar drain.
══════════════════════════════════════════════════ */
.if-s3-modes {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: clamp(10px,1.5vw,16px);
    margin-bottom: clamp(12px,1.4vw,16px);
}

.if-s3-mode {
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.07);
    border-radius: var(--if-r-xl);
    padding: clamp(20px,2.5vw,28px);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 12px;
    user-select: none;
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .55s ease var(--md,0ms), transform .55s cubic-bezier(.22,1,.36,1) var(--md,0ms), background .35s ease, border-color .35s ease, box-shadow .35s ease;
}

    .if-s3-mode:nth-child(1) {
        --md: 0ms;
    }

    .if-s3-mode:nth-child(2) {
        --md: 80ms;
    }

    .if-s3-mode:nth-child(3) {
        --md: 160ms;
    }

    .if-s3-mode.is-vis {
        opacity: 1;
        transform: translateY(0);
    }

    /* Active state */
    .if-s3-mode.active {
        border-color: var(--mc-bdr, rgba(8,145,178,.35));
        background: var(--mc-bg, rgba(8,145,178,.06));
        box-shadow: 0 0 0 1px var(--mc-ring, rgba(8,145,178,.08)), 0 12px 36px rgba(0,0,0,.28);
    }

    /* Per-mode colour tokens */
    .if-s3-mode[data-mode="always"] {
        --mc-bdr: rgba(8,145,178,.38);
        --mc-bg: rgba(8,145,178,.07);
        --mc-ring: rgba(8,145,178,.10);
    }

    .if-s3-mode[data-mode="keyword"] {
        --mc-bdr: rgba(99,102,241,.38);
        --mc-bg: rgba(99,102,241,.07);
        --mc-ring: rgba(99,102,241,.10);
    }

    .if-s3-mode[data-mode="appttype"] {
        --mc-bdr: rgba(16,185,129,.35);
        --mc-bg: rgba(16,185,129,.06);
        --mc-ring: rgba(16,185,129,.08);
    }

    /* Top accent bar */
    .if-s3-mode::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 2px;
        transform: scaleX(0);
        transform-origin: left;
        transition: transform .4s cubic-bezier(.22,1,.36,1);
        border-radius: var(--if-r-xl) var(--if-r-xl) 0 0;
    }

    .if-s3-mode.active::before {
        transform: scaleX(1);
    }

    .if-s3-mode[data-mode="always"]::before {
        background: linear-gradient(90deg,var(--if-cyan),var(--if-cyan-2));
    }

    .if-s3-mode[data-mode="keyword"]::before {
        background: linear-gradient(90deg,#6366f1,#818cf8);
    }

    .if-s3-mode[data-mode="appttype"]::before {
        background: linear-gradient(90deg,var(--if-emerald-2),var(--if-cyan));
    }

/* Mode icon */
.if-s3-mode-ico {
    width: 44px;
    height: 44px;
    border-radius: var(--if-r-lg);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid;
    transition: box-shadow .35s ease;
}

.if-s3-mode[data-mode="always"] .if-s3-mode-ico {
    background: rgba(8,145,178,.10);
    border-color: rgba(8,145,178,.22);
    color: var(--if-cyan-3);
}

.if-s3-mode[data-mode="keyword"] .if-s3-mode-ico {
    background: rgba(99,102,241,.10);
    border-color: rgba(99,102,241,.22);
    color: #818cf8;
}

.if-s3-mode[data-mode="appttype"] .if-s3-mode-ico {
    background: rgba(16,185,129,.10);
    border-color: rgba(16,185,129,.22);
    color: var(--if-emerald-2);
}

.if-s3-mode.active[data-mode="always"] .if-s3-mode-ico {
    box-shadow: 0 0 16px rgba(8,145,178,.25);
}

.if-s3-mode.active[data-mode="keyword"] .if-s3-mode-ico {
    box-shadow: 0 0 16px rgba(99,102,241,.25);
}

.if-s3-mode.active[data-mode="appttype"] .if-s3-mode-ico {
    box-shadow: 0 0 16px rgba(16,185,129,.22);
}

/* Mode tag (mono label above title) */
.if-s3-mode-tag {
    font-family: var(--if-mono);
    font-size: clamp(8px,.78vw,9.5px);
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    transition: color .3s ease;
}

.if-s3-mode[data-mode="always"] .if-s3-mode-tag {
    color: rgba(34,211,238,.55);
}

.if-s3-mode[data-mode="keyword"] .if-s3-mode-tag {
    color: rgba(129,140,248,.55);
}

.if-s3-mode[data-mode="appttype"] .if-s3-mode-tag {
    color: rgba(52,211,153,.55);
}

.if-s3-mode.active .if-s3-mode-tag {
    opacity: 1;
    filter: brightness(1.4);
}

/* Mode title */
.if-s3-mode-title {
    font-size: clamp(15px,1.6vw,19px);
    font-weight: 800;
    letter-spacing: -0.026em;
    line-height: 1.25;
    color: rgba(255,255,255,.48);
    transition: color .3s ease;
}

.if-s3-mode.active .if-s3-mode-title {
    color: rgba(255,255,255,.90);
}

/* Mode description */
.if-s3-mode-desc {
    font-size: clamp(11.5px,1.1vw,13px);
    color: rgba(255,255,255,.22);
    line-height: 1.68;
    transition: color .3s ease;
}

.if-s3-mode.active .if-s3-mode-desc {
    color: rgba(255,255,255,.42);
}

/* Progress drain — auto-cycle timer bar */
.if-s3-mode-prog {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 2px;
    width: 0%;
    border-radius: 0 0 0 var(--if-r-xl);
    opacity: 0;
    transition: opacity .2s ease;
}

.if-s3-mode[data-mode="always"] .if-s3-mode-prog {
    background: var(--if-cyan-2);
}

.if-s3-mode[data-mode="keyword"] .if-s3-mode-prog {
    background: #818cf8;
}

.if-s3-mode[data-mode="appttype"] .if-s3-mode-prog {
    background: var(--if-emerald-2);
}

.if-s3-mode.active .if-s3-mode-prog {
    opacity: .55;
}

.if-s3-mode.active.cycling .if-s3-mode-prog {
    transition: width 4.2s linear, opacity .2s ease;
    width: 100%;
}

/* ══════════════════════════════════════════════════
   DETAIL PANELS — fixed height, opacity-only swap, ZERO reflow.
   Desktop: 3-column grid inside a fixed-height absolute container.
══════════════════════════════════════════════════ */
.if-s3-detail-wrap {
    position: relative;
    height: clamp(260px,30vw,340px);
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .6s ease .2s, transform .6s cubic-bezier(.22,1,.36,1) .2s;
    margin-bottom: clamp(48px,6vw,72px);
}

    .if-s3-detail-wrap.is-vis {
        opacity: 1;
        transform: translateY(0);
    }

.if-s3-detail {
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,.025);
    border: 1px solid rgba(255,255,255,.065);
    border-radius: var(--if-r-2xl);
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0;
    opacity: 0;
    pointer-events: none;
    overflow: hidden;
    transition: opacity .38s ease;
}

    .if-s3-detail.active {
        opacity: 1;
        pointer-events: auto;
    }

/* ─── Each column panel ─── */
.if-s3-dp {
    padding: clamp(22px,2.8vw,32px) clamp(20px,2.5vw,30px);
    border-right: 1px solid rgba(255,255,255,.055);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 14px;
    position: relative;
    overflow: hidden;
}

    .if-s3-dp:last-child {
        border-right: none;
    }

    /* Column corner glow */
    .if-s3-dp::before {
        content: '';
        position: absolute;
        top: -60px;
        left: -60px;
        width: 160px;
        height: 160px;
        border-radius: 50%;
        pointer-events: none;
        opacity: .15;
        filter: blur(32px);
    }

.if-s3-detail[data-mode="always"] .if-s3-dp::before {
    background: var(--if-cyan);
}

.if-s3-detail[data-mode="keyword"] .if-s3-dp::before {
    background: #6366f1;
}

.if-s3-detail[data-mode="appttype"] .if-s3-dp::before {
    background: var(--if-emerald-2);
}

/* Detail labels */
.if-s3-dp-label {
    font-family: var(--if-mono);
    font-size: clamp(8px,.78vw,9.5px);
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    margin-bottom: 2px;
}

.if-s3-detail[data-mode="always"] .if-s3-dp-label {
    color: rgba(34,211,238,.6);
}

.if-s3-detail[data-mode="keyword"] .if-s3-dp-label {
    color: rgba(129,140,248,.6);
}

.if-s3-detail[data-mode="appttype"] .if-s3-dp-label {
    color: rgba(52,211,153,.6);
}

.if-s3-dp-title {
    font-size: clamp(15px,1.6vw,20px);
    font-weight: 800;
    letter-spacing: -0.028em;
    line-height: 1.25;
    color: rgba(255,255,255,.85);
}

.if-s3-dp-body {
    font-size: clamp(11.5px,1.08vw,13px);
    color: rgba(255,255,255,.36);
    line-height: 1.72;
}

/* Pill tags */
.if-s3-dp-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.if-s3-dp-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: var(--if-r-pill);
    font-family: var(--if-mono);
    font-size: clamp(8.5px,.82vw,10px);
    font-weight: 700;
    letter-spacing: .05em;
    border: 1px solid;
}

.if-s3-detail[data-mode="always"] .if-s3-dp-pill {
    color: var(--if-cyan-3);
    background: rgba(8,145,178,.08);
    border-color: rgba(8,145,178,.22);
}

.if-s3-detail[data-mode="keyword"] .if-s3-dp-pill {
    color: #a5b4fc;
    background: rgba(99,102,241,.09);
    border-color: rgba(99,102,241,.22);
}

.if-s3-detail[data-mode="appttype"] .if-s3-dp-pill {
    color: var(--if-emerald-2);
    background: rgba(16,185,129,.08);
    border-color: rgba(16,185,129,.22);
}

.if-s3-dp-pill-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}

/* Flow arrow between columns */
.if-s3-dp-arrow {
    position: absolute;
    right: -9px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.10);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,.25);
    z-index: 2;
    flex-shrink: 0;
}

/* ══════════════════════════════════════════════════
   STAT STRIP — 4 columns
══════════════════════════════════════════════════ */
.if-s3-stats {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: clamp(10px,1.4vw,16px);
}

.if-s3-stat {
    padding: clamp(18px,2.2vw,24px) clamp(14px,1.8vw,20px);
    background: rgba(255,255,255,.025);
    border: 1px solid rgba(255,255,255,.065);
    border-radius: var(--if-r-xl);
    display: flex;
    flex-direction: column;
    gap: 5px;
    position: relative;
    overflow: hidden;
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .5s ease var(--sd,0ms), transform .5s cubic-bezier(.22,1,.36,1) var(--sd,0ms);
}

.if-s3-stats.is-vis .if-s3-stat {
    opacity: 1;
    transform: translateY(0);
}

.if-s3-stat:nth-child(1) {
    --sd: 0ms;
}

.if-s3-stat:nth-child(2) {
    --sd: 70ms;
}

.if-s3-stat:nth-child(3) {
    --sd: 140ms;
}

.if-s3-stat:nth-child(4) {
    --sd: 210ms;
}

/* Coloured top bar on each stat */
.if-s3-stat::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .5s cubic-bezier(.22,1,.36,1) var(--sl,600ms);
}

.if-s3-stats.is-vis .if-s3-stat::before {
    transform: scaleX(1);
}

.if-s3-stat:nth-child(1)::before {
    background: var(--if-cyan-2);
    --sl: 600ms;
}

.if-s3-stat:nth-child(2)::before {
    background: #818cf8;
    --sl: 680ms;
}

.if-s3-stat:nth-child(3)::before {
    background: var(--if-emerald-2);
    --sl: 760ms;
}

.if-s3-stat:nth-child(4)::before {
    background: var(--if-cyan-3);
    --sl: 840ms;
}

.if-s3-stat-num {
    font-family: var(--if-font);
    font-size: clamp(32px,4vw,56px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.055em;
}

.if-s3-stat:nth-child(1) .if-s3-stat-num {
    color: var(--if-cyan-3);
}

.if-s3-stat:nth-child(2) .if-s3-stat-num {
    color: #a5b4fc;
}

.if-s3-stat:nth-child(3) .if-s3-stat-num {
    color: var(--if-emerald-2);
}

.if-s3-stat:nth-child(4) .if-s3-stat-num {
    color: var(--if-cyan-3);
}

.if-s3-stat-lbl {
    font-size: clamp(11px,1.05vw,13px);
    font-weight: 700;
    color: rgba(255,255,255,.55);
}

.if-s3-stat-sub {
    font-family: var(--if-mono);
    font-size: clamp(8.5px,.82vw,10px);
    color: rgba(255,255,255,.22);
}

/* ══════════════════════════════════════════════════
   RESPONSIVE
   ① 860px  — tablet: single column, vertical panels
   ② 640px  — mobile: ultra-premium treatment
   ③ 380px  — very small: SE / small Android
══════════════════════════════════════════════════ */

/* ══════════════════════
   ① Tablet (≤860px)
══════════════════════ */
@media (max-width: 860px) {

    /* Mode cards stack to 1 column */
    .if-s3-modes {
        grid-template-columns: 1fr;
    }

    /* Detail panels stack vertically inside the wrap */
    .if-s3-detail {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(3, auto);
    }

    /* Taller wrap to hold 3 stacked panels */
    .if-s3-detail-wrap {
        height: clamp(520px,120vw,660px);
    }

    .if-s3-dp {
        border-right: none;
        border-bottom: 1px solid rgba(255,255,255,.055);
    }

        .if-s3-dp:last-child {
            border-bottom: none;
        }

    /* Hide the horizontal flow arrows at tablet */
    .if-s3-dp-arrow {
        display: none;
    }

    /* Stats collapse to 2×2 */
    .if-s3-stats {
        grid-template-columns: 1fr 1fr;
    }
}

/* ══════════════════════
   ② Mobile (≤640px)
   Ultra-premium treatment
══════════════════════ */
@media (max-width: 640px) {

    /* ── Shell ── */
    .if-s3 {
        padding: 72px 0 60px;
    }

    .if-s3-inner {
        padding: 0 20px;
    }

    /* ── Header — left-align for warmth ── */
    .if-s3-head {
        max-width: 100%;
        text-align: left;
        margin-bottom: 32px;
    }

    .if-s3-eyebrow {
        font-size: 11px;
        padding: 5px 13px;
        margin-bottom: 16px;
    }

    /* Headline — line-height 1.06 crushes 3-line wraps on mobile */
    .if-s3-h2 {
        font-size: clamp(30px, 8.5vw, 42px);
        line-height: 1.14;
        letter-spacing: -0.038em;
        margin-bottom: 14px;
    }

    /* Subtitle — boosted from .32 to .58 for OLED readability */
    .if-s3-sub {
        font-size: 15px;
        line-height: 1.76;
        color: rgba(255,255,255,.58);
        max-width: 100%;
        text-align: left;
        margin: 0;
    }

    /* ────────────────────────────────────────
       MODE CARDS — horizontal grid layout
       Icon stays left, tag/title/desc right.
       Much more space-efficient on narrow screens
       and gives a premium app-settings feel.
    ──────────────────────────────────────── */
    .if-s3-modes {
        gap: 10px;
    }

    .if-s3-mode {
        /* Switch to a 2-column grid: [icon] [text content] */
        display: grid;
        grid-template-columns: 42px 1fr;
        grid-template-rows: auto auto auto;
        column-gap: 14px;
        row-gap: 3px;
        align-items: start;
        padding: 16px;
        border-radius: var(--if-r-lg);
    }

    /* Icon spans all 3 text rows, anchored top */
    .if-s3-mode-ico {
        grid-column: 1;
        grid-row: 1 / 4;
        align-self: start;
        margin-top: 2px;
        width: 40px;
        height: 40px;
    }

    /* Tag sits in row 1 of the text column */
    .if-s3-mode-tag {
        grid-column: 2;
        grid-row: 1;
        font-size: 10px;
        letter-spacing: .13em;
    }

    /* Boost colour contrast on inactive tags */
    .if-s3-mode[data-mode="always"] .if-s3-mode-tag {
        color: rgba(34,211,238,.72);
    }

    .if-s3-mode[data-mode="keyword"] .if-s3-mode-tag {
        color: rgba(129,140,248,.72);
    }

    .if-s3-mode[data-mode="appttype"] .if-s3-mode-tag {
        color: rgba(52,211,153,.72);
    }

    /* Title sits in row 2 */
    .if-s3-mode-title {
        grid-column: 2;
        grid-row: 2;
        font-size: 16px;
        line-height: 1.28;
        margin-top: 2px;
    }

    /* Description sits in row 3 */
    .if-s3-mode-desc {
        grid-column: 2;
        grid-row: 3;
        font-size: 13px;
        line-height: 1.62;
        color: rgba(255,255,255,.38);
        margin-top: 4px;
    }

    .if-s3-mode.active .if-s3-mode-desc {
        color: rgba(255,255,255,.60);
    }

    /* Progress bar spans full card width */
    .if-s3-mode-prog {
        grid-column: 1 / 3;
        position: absolute; /* stays absolute — no layout impact */
    }

    /* ────────────────────────────────────────
       DETAIL PANELS
       ─────────────────────────────────────────
       THE CORE FIX: swap from fixed-height
       absolute container to a CSS Grid overlay
       that is content-driven.

       • All 3 panels share grid-area 1/1 so they
         stack in the same cell (like absolute).
       • The wrap height = tallest panel — auto.
       • Opacity crossfade still works perfectly.
       • Zero clipping, zero layout shift.
    ──────────────────────────────────────── */

    /* Wrap becomes a grid container, height is auto */
    .if-s3-detail-wrap {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        height: auto;
        overflow: visible;
        margin-bottom: 32px;
    }

    /* All panels sit in the same grid cell — they overlap */
    .if-s3-detail {
        /* Place every detail in row 1 col 1 so they overlap */
        grid-row: 1;
        grid-column: 1;
        /* Switch from absolute to in-flow */
        position: relative;
        inset: auto;
        /* Vertical stack of dp columns */
        display: flex;
        flex-direction: column;
        border-radius: var(--if-r-xl);
        overflow: visible;
    }

        /* Invisible/inactive panels are still in the grid
       but opacity:0 means they take up the same space
       without showing — the grid row auto-sizes to the
       tallest panel (tallest = active one). */
        .if-s3-detail:not(.active) {
            /* Pointer events already none on non-active.
           Position in same grid cell keeps height consistent. */
            pointer-events: none;
        }

    /* Each dp section */
    .if-s3-dp {
        padding: 18px 16px;
        gap: 10px;
        border-right: none;
        border-bottom: 1px solid rgba(255,255,255,.06);
        /* Remove the overflow: hidden that was set on desktop */
        overflow: visible;
    }

        .if-s3-dp:last-child {
            border-bottom: none;
        }

    /* Detail label — boosted from .6 to .78 for OLED */
    .if-s3-dp-label {
        font-size: 10px;
        letter-spacing: .12em;
    }

    .if-s3-detail[data-mode="always"] .if-s3-dp-label {
        color: rgba(34,211,238,.78);
    }

    .if-s3-detail[data-mode="keyword"] .if-s3-dp-label {
        color: rgba(129,140,248,.78);
    }

    .if-s3-detail[data-mode="appttype"] .if-s3-dp-label {
        color: rgba(52,211,153,.78);
    }

    .if-s3-dp-title {
        font-size: 18px;
        line-height: 1.26;
        letter-spacing: -0.022em;
    }

    /* Body — boosted from .36 to .55 for mobile readability */
    .if-s3-dp-body {
        font-size: 14px;
        line-height: 1.68;
        color: rgba(255,255,255,.55);
    }

    /* Pills — larger tap targets */
    .if-s3-dp-pill {
        font-size: 10px;
        padding: 5px 11px;
    }

    /* ── Stats — 2×2 grid ── */
    .if-s3-stats {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .if-s3-stat {
        padding: 18px 16px;
        border-radius: var(--if-r-lg);
    }

    .if-s3-stat-num {
        font-size: 36px;
        letter-spacing: -0.05em;
    }

    /* Was .55 opacity — boost label contrast on dark mobile screens */
    .if-s3-stat-lbl {
        font-size: 12.5px;
        line-height: 1.3;
        color: rgba(255,255,255,.68);
    }

    /* Was .22 opacity — barely visible on OLED dark panels */
    .if-s3-stat-sub {
        font-size: 11px;
        color: rgba(255,255,255,.40);
        line-height: 1.4;
    }
}

/* ══════════════════════
   ③ Very small (≤380px)
   iPhone SE · small Android
══════════════════════ */
@media (max-width: 380px) {

    .if-s3 {
        padding: 56px 0 52px;
    }

    .if-s3-inner {
        padding: 0 16px;
    }

    .if-s3-h2 {
        font-size: 28px;
        line-height: 1.16;
    }

    .if-s3-sub {
        font-size: 14px;
        line-height: 1.72;
    }

    .if-s3-mode {
        grid-template-columns: 38px 1fr;
        column-gap: 12px;
        padding: 14px;
    }

    .if-s3-mode-ico {
        width: 36px;
        height: 36px;
    }

    .if-s3-mode-title {
        font-size: 15px;
    }

    .if-s3-mode-desc {
        font-size: 12.5px;
    }

    .if-s3-dp {
        padding: 16px 14px;
        gap: 9px;
    }

    .if-s3-dp-title {
        font-size: 16px;
    }

    .if-s3-dp-body {
        font-size: 13px;
        line-height: 1.66;
    }

    .if-s3-dp-pill {
        font-size: 9.5px;
        padding: 4px 10px;
    }

    .if-s3-stats {
        gap: 8px;
    }

    .if-s3-stat {
        padding: 14px 12px;
    }

    .if-s3-stat-num {
        font-size: 30px;
    }

    .if-s3-stat-lbl {
        font-size: 11.5px;
    }

    .if-s3-stat-sub {
        font-size: 10px;
    }
}





































/* ================================================================
   Qlynic · IntakeForms.aspx
   SECTION 4 — "Every answer becomes part of the patient record."
   Updated: ultra-premium mobile treatment, matching S1/S2/S3 standard.
   ================================================================ */

/* ══════════════════════════════════════════════════
   CINEMATIC BANNER — full-bleed 21:9 image + canvas

   SCALING FIX:
   Use padding-bottom % trick as the aspect-ratio engine.
   padding-bottom: calc(9/21 * 100%) = 42.857%
   This is the most reliable cross-browser, cross-zoom
   method. aspect-ratio is kept as modern override.
   No min-height fighting it.

   TEXT FIX:
   Text is moved to the LEFT third of the banner —
   away from the bright neon centre explosion.
   A dark scrim covers only the left zone, not the image.
══════════════════════════════════════════════════ */
.if-s4-banner {
    position: relative;
    width: 100%;
    padding-bottom: calc(9 / 21 * 100%);
    aspect-ratio: 21 / 9;
    overflow: hidden;
    z-index: 0;
    max-height: 520px;
}

@supports (aspect-ratio: 21/9) {
    .if-s4-banner {
        padding-bottom: 0;
        height: auto;
    }
}

.if-s4-banner-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
    transform: scale(1.04);
    opacity: 0;
    transition: transform 2.4s cubic-bezier(.22,1,.36,1) .2s, opacity 1.2s ease .2s;
    will-change: transform, opacity;
}

.if-s4-on .if-s4-banner-img {
    transform: scale(1);
    opacity: 1;
}

/* Particle canvas */
.if-s4-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2;
    opacity: 0;
    transition: opacity 1s ease 1s;
}

.if-s4-on .if-s4-canvas {
    opacity: 1;
}

/* Top + bottom edge fades */
.if-s4-banner-fade {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    background: linear-gradient(to bottom, #ffffff 0%, transparent 14%, transparent 86%, #ffffff 100%);
}

/* Left scrim — dark zone for text readability */
.if-s4-banner-scrim {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 48%;
    z-index: 3;
    pointer-events: none;
    background: linear-gradient(to right, rgba(4,5,14,.88) 0%, rgba(4,5,14,.72) 55%, transparent 100%);
}

/* Text — LEFT aligned, inside the scrim zone */
.if-s4-banner-text {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 46%;
    z-index: 4;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: clamp(6px,1vw,12px);
    padding: clamp(16px,4vw,60px) clamp(20px,5vw,72px);
}

.if-s4-banner-kicker {
    font-family: var(--if-mono);
    font-size: clamp(8.5px,.82vw,10.5px);
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: rgba(167,139,250,.80);
    opacity: 0;
    transform: translateY(10px);
    transition: opacity .6s ease .6s, transform .6s cubic-bezier(.22,1,.36,1) .6s;
}

.if-s4-on .if-s4-banner-kicker {
    opacity: 1;
    transform: translateY(0);
}

.if-s4-banner-hl {
    font-family: var(--if-font);
    font-size: clamp(16px,2.4vw,46px);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.04em;
    color: rgba(255,255,255,.96);
    text-shadow: 0 2px 20px rgba(0,0,0,.6);
    opacity: 0;
    clip-path: inset(0 100% 0 0);
    transition: clip-path .8s cubic-bezier(.22,1,.36,1) .8s, opacity .4s ease .8s;
}

.if-s4-on .if-s4-banner-hl {
    opacity: 1;
    clip-path: inset(0 0% 0 0);
}

.if-s4-banner-hl em {
    font-style: normal;
    background: linear-gradient(135deg,#c4b5fd,#67e8f9);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 12px rgba(167,139,250,.5));
}

.if-s4-banner-sub {
    font-size: clamp(10.5px,1.05vw,13.5px);
    color: rgba(255,255,255,.55);
    line-height: 1.72;
    max-width: clamp(240px,32vw,420px);
    opacity: 0;
    filter: blur(4px);
    transition: opacity .6s ease 1.2s, filter .6s ease 1.2s;
}

.if-s4-on .if-s4-banner-sub {
    opacity: 1;
    filter: blur(0);
}

/* ══════════════════════════════════════════════════
   S4 SECTION WRAPPER — white
══════════════════════════════════════════════════ */
.if-s4 {
    --if-s4-page-bg: #ffffff;
    position: relative;
    background: var(--if-s4-page-bg);
    overflow: hidden;
}

    .if-s4::before {
        content: '';
        position: absolute;
        inset: 0;
        pointer-events: none;
        z-index: 0;
        background: radial-gradient(ellipse 55% 45% at 15% 20%, rgba(8,145,178,.04) 0%, transparent 65%), radial-gradient(ellipse 45% 40% at 85% 80%, rgba(124,58,237,.03) 0%, transparent 60%);
    }

.if-s4-inner {
    position: relative;
    z-index: 1;
    max-width: 1380px;
    margin: 0 auto;
    padding: clamp(80px,10vh,120px) clamp(20px,4.5vw,60px) clamp(80px,10vh,120px);
}

/* ── Header ── */
.if-s4-head {
    text-align: center;
    max-width: 680px;
    margin: 0 auto clamp(56px,6.5vw,80px);
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .7s ease, transform .7s cubic-bezier(.22,1,.36,1);
}

    .if-s4-head.is-vis {
        opacity: 1;
        transform: translateY(0);
    }

.if-s4-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: var(--if-mono);
    font-size: clamp(9px,.85vw,10.5px);
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--if-cyan);
    background: var(--if-cyan-bg);
    border: 1px solid var(--if-cyan-bdr);
    border-radius: var(--if-r-pill);
    padding: 5px 14px;
    margin-bottom: 22px;
}

.if-s4-eyebrow-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--if-cyan);
    box-shadow: 0 0 8px rgba(8,145,178,.6);
    animation: if-dot-pulse 2s ease-in-out infinite;
}

.if-s4-h2 {
    font-family: var(--if-font);
    font-size: clamp(26px,3.4vw,56px);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.044em;
    color: var(--if-ink);
    margin-bottom: 18px;
}

    .if-s4-h2 em {
        font-style: normal;
        background: linear-gradient(135deg,var(--if-cyan),var(--if-violet));
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
    }

.if-s4-sub {
    font-size: clamp(14px,1.35vw,16px);
    color: var(--if-stone);
    line-height: 1.82;
    max-width: 520px;
    margin: 0 auto;
}

/* ══════════════════════════════════════════════════
   THREE PATH CARDS
══════════════════════════════════════════════════ */
.if-s4-paths {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: clamp(14px,2vw,22px);
    margin-bottom: clamp(56px,7vw,80px);
}

.if-s4-path {
    background: var(--if-white);
    border: 1px solid var(--if-border-2);
    border-radius: var(--if-r-2xl);
    overflow: hidden;
    box-shadow: var(--if-shadow);
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .58s ease var(--pd,0ms), transform .58s cubic-bezier(.22,1,.36,1) var(--pd,0ms);
    position: relative;
}

.if-s4-paths.is-vis .if-s4-path {
    opacity: 1;
    transform: translateY(0);
}

.if-s4-path:nth-child(1) {
    --pd: 0ms;
}

.if-s4-path:nth-child(2) {
    --pd: 80ms;
}

.if-s4-path:nth-child(3) {
    --pd: 160ms;
}

/* Colour top bar */
.if-s4-path::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
}

.if-s4-path:nth-child(1)::before {
    background: linear-gradient(90deg,var(--if-cyan),var(--if-cyan-2));
}

.if-s4-path:nth-child(2)::before {
    background: linear-gradient(90deg,var(--if-rose),#f87171);
}

.if-s4-path:nth-child(3)::before {
    background: linear-gradient(90deg,var(--if-violet),var(--if-violet-2));
}

/* Ink blob */
.if-s4-path-blob {
    position: absolute;
    top: -50px;
    left: -50px;
    width: 160px;
    height: 160px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
    transform: scale(0);
    transform-origin: top left;
    transition: transform .8s cubic-bezier(.22,1,.36,1) var(--pb,0ms);
    filter: blur(30px);
    opacity: .28;
}

.if-s4-paths.is-vis .if-s4-path-blob {
    transform: scale(1);
}

.if-s4-path:nth-child(1) .if-s4-path-blob {
    background: var(--if-cyan);
    --pb: 200ms;
}

.if-s4-path:nth-child(2) .if-s4-path-blob {
    background: var(--if-rose);
    --pb: 300ms;
}

.if-s4-path:nth-child(3) .if-s4-path-blob {
    background: var(--if-violet);
    --pb: 400ms;
}

/* Card header zone */
.if-s4-path-head {
    padding: clamp(20px,2.6vw,28px) clamp(18px,2.3vw,26px) 0;
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.if-s4-path-ico {
    width: 46px;
    height: 46px;
    border-radius: var(--if-r-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid;
}

.if-s4-path:nth-child(1) .if-s4-path-ico {
    background: var(--if-cyan-bg);
    border-color: var(--if-cyan-bdr);
    color: var(--if-cyan);
}

.if-s4-path:nth-child(2) .if-s4-path-ico {
    background: var(--if-rose-bg);
    border-color: var(--if-rose-bdr);
    color: var(--if-rose);
}

.if-s4-path:nth-child(3) .if-s4-path-ico {
    background: var(--if-violet-bg);
    border-color: var(--if-violet-bdr);
    color: var(--if-violet);
}

.if-s4-path-tag {
    font-family: var(--if-mono);
    font-size: clamp(8px,.78vw,9.5px);
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.if-s4-path:nth-child(1) .if-s4-path-tag {
    color: var(--if-cyan);
}

.if-s4-path:nth-child(2) .if-s4-path-tag {
    color: var(--if-rose);
}

.if-s4-path:nth-child(3) .if-s4-path-tag {
    color: var(--if-violet);
}

.if-s4-path-title {
    font-size: clamp(16px,1.8vw,22px);
    font-weight: 800;
    letter-spacing: -0.028em;
    line-height: 1.25;
    color: var(--if-ink);
}

.if-s4-path-body {
    font-size: clamp(12px,1.12vw,13.5px);
    color: var(--if-stone);
    line-height: 1.72;
}

/* Divider */
.if-s4-path-divider {
    height: 1px;
    background: var(--if-border);
    margin: 0 clamp(18px,2.3vw,26px);
    position: relative;
    z-index: 1;
}

/* Detail rows */
.if-s4-path-details {
    padding: clamp(14px,1.8vw,20px) clamp(18px,2.3vw,26px) clamp(18px,2.3vw,26px);
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: relative;
    z-index: 1;
}

.if-s4-path-row {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    opacity: 0;
    transform: translateX(8px);
    transition: opacity .4s ease var(--rv,0ms), transform .4s cubic-bezier(.22,1,.36,1) var(--rv,0ms);
}

.if-s4-paths.is-vis .if-s4-path-row {
    opacity: 1;
    transform: translateX(0);
}

.if-s4-path-row-ico {
    width: 18px;
    height: 18px;
    border-radius: 5px;
    flex-shrink: 0;
    margin-top: 1px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.if-s4-path:nth-child(1) .if-s4-path-row-ico {
    background: var(--if-cyan-bg);
    color: var(--if-cyan);
}

.if-s4-path:nth-child(2) .if-s4-path-row-ico {
    background: var(--if-rose-bg);
    color: var(--if-rose);
}

.if-s4-path:nth-child(3) .if-s4-path-row-ico {
    background: var(--if-violet-bg);
    color: var(--if-violet);
}

.if-s4-path-row-text {
    font-size: clamp(11px,1.05vw,12.5px);
    color: var(--if-slate);
    line-height: 1.55;
}

/* ── Downstream flow diagram ── */
.if-s4-flow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(8px,1.2vw,16px);
    flex-wrap: wrap;
    padding: clamp(24px,3vw,36px) clamp(20px,4vw,40px);
    background: var(--if-snow);
    border-radius: var(--if-r-2xl);
    border: 1px solid var(--if-border-2);
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .6s ease, transform .6s cubic-bezier(.22,1,.36,1);
}

    .if-s4-flow.is-vis {
        opacity: 1;
        transform: translateY(0);
    }

.if-s4-flow-node {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: clamp(10px,1.3vw,14px) clamp(14px,1.8vw,20px);
    border-radius: var(--if-r-pill);
    border: 1px solid;
    font-size: clamp(11px,1.05vw,13px);
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--if-ink);
    background: var(--if-white);
    white-space: nowrap;
    box-shadow: var(--if-shadow-sm);
}

    .if-s4-flow-node svg {
        flex-shrink: 0;
    }

.if-s4-flow-node--source {
    border-color: var(--if-cyan-bdr);
    background: var(--if-cyan-bg);
    color: var(--if-cyan);
    font-weight: 800;
}

.if-s4-flow-node--emr {
    border-color: var(--if-cyan-bdr);
}

.if-s4-flow-node--allergy {
    border-color: var(--if-rose-bdr);
}

.if-s4-flow-node--brief {
    border-color: var(--if-violet-bdr);
}

.if-s4-flow-arrow {
    color: var(--if-dust);
    font-size: 18px;
    font-weight: 300;
    flex-shrink: 0;
}

/* ══════════════════════════════════════════════════
   RESPONSIVE
   ① 860px  — tablet: single column paths, vertical flow
   ② 640px  — mobile: Apple-level premium treatment
   ③ 380px  — very small: SE / small Android
══════════════════════════════════════════════════ */

/* ① Tablet */
@media (max-width: 860px) {
    .if-s4-paths {
        grid-template-columns: 1fr;
    }

    .if-s4-flow {
        flex-direction: column;
        align-items: flex-start;
    }

    .if-s4-flow-arrow {
        transform: rotate(90deg);
    }
}

/* ② Mobile — ultra-premium treatment */
@media (max-width: 640px) {

    /* ─── Banner ─── */

    /* Taller on mobile — show more of the image */
    .if-s4-banner {
        aspect-ratio: 4 / 3;
        padding-bottom: calc(3/4 * 100%);
        max-height: 400px;
    }

    @supports (aspect-ratio: 4/3) {
        .if-s4-banner {
            padding-bottom: 0;
            height: auto;
        }
    }

    /* Full-width bottom scrim — text anchors to bottom of banner */
    .if-s4-banner-scrim {
        width: 100%;
        background: linear-gradient(to top, rgba(4,5,14,.94) 0%, rgba(4,5,14,.72) 48%, transparent 100% );
    }

    .if-s4-banner-text {
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        padding: 24px 20px;
        justify-content: flex-end;
        gap: 8px;
    }

    /* Kicker — hard px, vw collapses to ~3px at 390px */
    .if-s4-banner-kicker {
        font-size: 11px;
        letter-spacing: .14em;
        color: rgba(167,139,250,.90);
    }

    /* ── Banner headline fix ──
       line-height 1.1 still crushes 3-line wraps.
       1.18 gives generous breathing room for dark overlays. */
    .if-s4-banner-hl {
        font-size: clamp(26px, 7vw, 36px);
        line-height: 1.18;
        letter-spacing: -0.036em;
    }

    .if-s4-banner-sub {
        font-size: 15px;
        line-height: 1.68;
        color: rgba(255,255,255,.65);
        max-width: 100%;
    }

    /* ─── White section ─── */

    .if-s4-inner {
        padding: 56px 20px 56px;
    }

    .if-s4-head {
        max-width: 100%;
        text-align: left;
        margin-bottom: 36px;
    }

    /* Eyebrow — hard px */
    .if-s4-eyebrow {
        font-size: 11px;
        padding: 5px 13px;
        margin-bottom: 18px;
    }

    /* ── Section headline fix ──
       1.08 crushes wrapped lines on mobile.
       1.16 matches the breathing room Apple uses on white bgs. */
    .if-s4-h2 {
        font-size: clamp(30px, 8.5vw, 42px);
        line-height: 1.16;
        letter-spacing: -0.038em;
        margin-bottom: 14px;
    }

    .if-s4-sub {
        font-size: 16px;
        line-height: 1.75;
        text-align: left;
        max-width: 100%;
        margin: 0;
    }

    /* Path cards */
    .if-s4-paths {
        gap: 14px;
        margin-bottom: 32px;
    }

    .if-s4-path {
        border-radius: var(--if-r-xl);
    }

    .if-s4-path-head {
        padding: 20px 18px 0;
        gap: 10px;
    }

    /* Path tag — was vw-clamped, collapses dangerously on mobile */
    .if-s4-path-tag {
        font-size: 10px;
        letter-spacing: .12em;
    }

    .if-s4-path-title {
        font-size: 19px;
        line-height: 1.28;
    }

    .if-s4-path-body {
        font-size: 14px;
        line-height: 1.7;
    }

    .if-s4-path-divider {
        margin: 0 18px;
    }

    .if-s4-path-details {
        padding: 14px 18px 18px;
        gap: 10px;
    }

    .if-s4-path-row-text {
        font-size: 13px;
        line-height: 1.58;
    }

    /* Flow diagram — vertical, left-aligned, generous internal padding */
    .if-s4-flow {
        padding: 20px 18px;
        gap: 10px;
        border-radius: var(--if-r-xl);
    }

    .if-s4-flow-node {
        font-size: 13px;
        padding: 10px 16px;
        width: 100%;
        justify-content: flex-start;
    }

    .if-s4-flow-arrow {
        transform: rotate(90deg);
        font-size: 16px;
        align-self: flex-start;
        padding-left: 20px;
    }
}

/* ③ Very small — iPhone SE (375px), small Android (360px) */
@media (max-width: 380px) {

    .if-s4-banner {
        max-height: 340px;
    }

    .if-s4-banner-text {
        padding: 20px 16px;
    }

    .if-s4-banner-hl {
        font-size: 24px;
        line-height: 1.2;
    }

    .if-s4-banner-sub {
        font-size: 14px;
    }

    .if-s4-inner {
        padding: 48px 16px 48px;
    }

    .if-s4-h2 {
        font-size: 28px;
        line-height: 1.18;
    }

    .if-s4-sub {
        font-size: 15px;
    }

    .if-s4-path-title {
        font-size: 18px;
    }

    .if-s4-path-body {
        font-size: 13.5px;
    }

    .if-s4-path-row-text {
        font-size: 12.5px;
    }

    .if-s4-flow-node {
        font-size: 12.5px;
        padding: 9px 14px;
    }
}






































/* ================================================================
   Qlynic · IntakeForms.aspx
   SECTION 5 — "One form. Enforced. Never missed." — FINAL CLOSE
   Updated: ultra-premium mobile treatment, matching S1–S4 standard.
   ================================================================ */

.if-s5 {
    position: relative;
    background: #03040c;
    overflow: hidden;
    padding: 0;
}

/* ═══════════════════════════════════════════════
   STAR FIELD — upper 60%, fades into horizon glow
═══════════════════════════════════════════════ */
.if-s5-stars {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background-image: radial-gradient(circle, rgba(255,255,255,.60) 1px, transparent 1px), radial-gradient(circle, rgba(255,255,255,.40) 1px, transparent 1px), radial-gradient(circle, rgba(34,211,238,.35) 1px, transparent 1px), radial-gradient(circle, rgba(255,255,255,.22) 1px, transparent 1px);
    background-size: 200px 200px, 130px 130px, 90px 90px, 60px 60px;
    background-position: 0 0, 50px 70px, 22px 18px, 80px 40px;
    mask-image: linear-gradient(to bottom, black 0%, black 38%, rgba(0,0,0,.4) 60%, transparent 78%);
    -webkit-mask-image: linear-gradient(to bottom, black 0%, black 38%, rgba(0,0,0,.4) 60%, transparent 78%);
    animation: if-s5-stars-drift 90s linear infinite;
}

@keyframes if-s5-stars-drift {
    from {
        background-position: 0 0, 50px 70px, 22px 18px, 80px 40px;
    }

    to {
        background-position: 200px 200px, 230px 200px, 112px 108px, 140px 100px;
    }
}

/* ═══════════════════════════════════════════════
   HORIZON SUNRISE — layered glows rising from bottom
═══════════════════════════════════════════════ */
.if-s5-horizon {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: clamp(340px,55vw,640px);
    pointer-events: none;
    z-index: 0;
}

    /* Primary sun — cyan core */
    .if-s5-horizon::before {
        content: '';
        position: absolute;
        bottom: -80px;
        left: 50%;
        transform: translateX(-50%);
        width: clamp(600px,90vw,1400px);
        height: clamp(320px,44vw,580px);
        border-radius: 50% 50% 0 0 / 60% 60% 0 0;
        background: radial-gradient(ellipse 100% 100% at 50% 100%, rgba(34,211,238,.24) 0%, rgba(8,145,178,.18) 20%, rgba(99,102,241,.13) 42%, rgba(124,58,237,.09) 60%, transparent 100%);
        animation: if-s5-sun 10s ease-in-out infinite alternate;
    }

@keyframes if-s5-sun {
    0% {
        opacity: .7;
        transform: translateX(-50%) scaleX(1);
    }

    50% {
        opacity: 1;
        transform: translateX(-50%) scaleX(1.08);
    }

    100% {
        opacity: .82;
        transform: translateX(-50%) scaleX(.96);
    }
}

/* Secondary halo — violet outer ring */
.if-s5-horizon::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 80% 50% at 25% 100%, rgba(124,58,237,.13) 0%, transparent 65%), radial-gradient(ellipse 75% 45% at 75% 100%, rgba(8,145,178,.10) 0%, transparent 60%), radial-gradient(ellipse 60% 35% at 50% 90%, rgba(34,211,238,.08) 0%, transparent 55%);
    animation: if-s5-halo 14s ease-in-out infinite alternate;
}

@keyframes if-s5-halo {
    0% {
        opacity: .6;
        transform: scale(1);
    }

    50% {
        opacity: 1;
        transform: scale(1.05) translateY(-6px);
    }

    100% {
        opacity: .75;
        transform: scale(.98);
    }
}

/* Horizon line — the magical glowing seam */
.if-s5-horizon-line {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1.5px;
    pointer-events: none;
    z-index: 2;
    background: linear-gradient(90deg, transparent 0%, rgba(34,211,238,.5) 15%, rgba(8,145,178,.8) 30%, rgba(99,102,241,.9) 50%, rgba(8,145,178,.8) 70%, rgba(34,211,238,.5) 85%, transparent 100%);
    box-shadow: 0 0 12px rgba(34,211,238,.4), 0 0 40px rgba(99,102,241,.2);
    animation: if-s5-line 6s ease-in-out infinite alternate;
}

@keyframes if-s5-line {
    0% {
        opacity: .6;
        box-shadow: 0 0 12px rgba(34,211,238,.4), 0 0 40px rgba(99,102,241,.2);
    }

    100% {
        opacity: 1;
        box-shadow: 0 0 20px rgba(34,211,238,.7), 0 0 70px rgba(99,102,241,.35);
    }
}

/* ═══════════════════════════════════════════════
   NEBULA CANVAS
═══════════════════════════════════════════════ */
.if-s5-nebula {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}

/* ═══════════════════════════════════════════════
   INNER — all content
═══════════════════════════════════════════════ */
.if-s5-inner {
    position: relative;
    z-index: 3;
    max-width: 1000px;
    margin: 0 auto;
    padding: clamp(100px,14vh,160px) clamp(24px,5vw,60px) 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(44px,5.5vw,68px);
}

/* ═══════════════════════════════════════════════
   SENTENCES — word-by-word staggered drops
═══════════════════════════════════════════════ */
.if-s5-sentences {
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: clamp(10px,1.6vw,18px);
    width: 100%;
}

/* Eyebrow line with decorators */
.if-s5-ey-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
    justify-content: center;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .5s ease .2s, transform .5s ease .2s;
}

    .if-s5-ey-wrap.show {
        opacity: 1;
        transform: translateY(0);
    }

.if-s5-ey-line {
    flex: 1;
    max-width: 72px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(34,211,238,.25));
}

    .if-s5-ey-line:last-child {
        background: linear-gradient(90deg, rgba(34,211,238,.25), transparent);
    }

.if-s5-ey-text {
    font-family: var(--if-mono);
    font-size: clamp(8.5px,.82vw,10px);
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: rgba(34,211,238,.35);
}

/* Sentence lines */
.if-s5-line {
    display: block;
    overflow: visible;
}

.if-s5-line--1 {
    font-family: var(--if-mono);
    font-size: clamp(10px,.95vw,12px);
    font-weight: 700;
    letter-spacing: .06em;
    color: rgba(255,255,255,.28);
}

.if-s5-line--2 {
    font-family: var(--if-font);
    font-size: clamp(30px,4.4vw,76px);
    font-weight: 800;
    line-height: 1.06;
    letter-spacing: -0.048em;
    color: rgba(255,255,255,.94);
}

.if-s5-line--3 {
    font-family: var(--if-font);
    font-size: clamp(24px,3.4vw,58px);
    font-weight: 800;
    line-height: 1.06;
    letter-spacing: -0.044em;
}

.if-s5-line--4 {
    font-family: var(--if-mono);
    font-size: clamp(11px,1.05vw,13.5px);
    font-weight: 600;
    letter-spacing: .02em;
    color: rgba(255,255,255,.28);
    line-height: 1.7;
    max-width: 520px;
    margin: 4px auto 0;
}

/* Animated gradient on line 3 */
.if-s5-grad {
    background: linear-gradient(135deg,#22d3ee 0%,#818cf8 30%,#c084fc 55%,#22d3ee 80%,#67e8f9 100%);
    background-size: 250% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: if-s5-gradflow 5s linear infinite;
}

@keyframes if-s5-gradflow {
    to {
        background-position: 250% center;
    }
}

/* Individual words */
.if-s5-word {
    display: inline-block;
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .5s ease var(--wd,0ms), transform .5s cubic-bezier(.22,1,.36,1) var(--wd,0ms);
}

    .if-s5-word.show {
        opacity: 1;
        transform: translateY(0);
    }

/* ═══════════════════════════════════════════════
   ENFORCEMENT COUNTER
═══════════════════════════════════════════════ */
.if-s5-counter-wrap {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(10px,1.8vw,20px);
    width: 100%;
    max-width: 860px;
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .65s ease, transform .65s ease;
}

    .if-s5-counter-wrap.show {
        opacity: 1;
        transform: translateY(0);
    }

.if-s5-counter-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: clamp(16px,2.2vw,24px) clamp(10px,1.5vw,20px);
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.07);
    border-radius: var(--if-r-xl);
    position: relative;
    overflow: hidden;
    min-width: 0;
}

    .if-s5-counter-item::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 2px;
        transform: scaleX(0);
        transform-origin: left;
        transition: transform .55s cubic-bezier(.22,1,.36,1) var(--ct,0ms);
    }

.if-s5-counter-wrap.show .if-s5-counter-item::before {
    transform: scaleX(1);
}

.if-s5-counter-item:nth-child(1)::before {
    background: linear-gradient(90deg,var(--if-cyan),var(--if-cyan-2));
    --ct: 0ms;
}

.if-s5-counter-item:nth-child(2)::before {
    background: linear-gradient(90deg,#818cf8,#a78bfa);
    --ct: 80ms;
}

.if-s5-counter-item:nth-child(3)::before {
    background: linear-gradient(90deg,var(--if-emerald-2),var(--if-cyan-2));
    --ct: 160ms;
}

.if-s5-count-num {
    font-family: var(--if-font);
    font-size: clamp(22px,3.4vw,52px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.04em;
    font-variant-numeric: tabular-nums;
    overflow: hidden;
    height: 1.1em;
    display: flex;
    align-items: flex-end;
    white-space: nowrap;
}

.if-s5-count-digit {
    display: inline-block;
    animation: none;
}

    .if-s5-count-digit.rolling {
        animation: if-s5-digit-roll .22s cubic-bezier(.22,1,.36,1) forwards;
    }

@keyframes if-s5-digit-roll {
    0% {
        opacity: 0;
        transform: translateY(-60%);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.if-s5-count-num:nth-child(1) .if-s5-count-digit,
.if-s5-counter-item:nth-child(1) .if-s5-count-num {
    color: var(--if-cyan-3);
}

.if-s5-counter-item:nth-child(2) .if-s5-count-num {
    color: #a5b4fc;
}

.if-s5-counter-item:nth-child(3) .if-s5-count-num {
    color: var(--if-emerald-2);
}

.if-s5-count-lbl {
    font-family: var(--if-mono);
    font-size: clamp(8px,.78vw,9.5px);
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(255,255,255,.30);
    text-align: center;
}

.if-s5-count-sub {
    font-size: clamp(9px,.88vw,11px);
    color: rgba(255,255,255,.18);
    font-family: var(--if-mono);
    letter-spacing: .04em;
    text-align: center;
}

/* ═══════════════════════════════════════════════
   CTA PAIR
═══════════════════════════════════════════════ */
.if-s5-ctas {
    display: flex;
    align-items: center;
    gap: clamp(12px,1.8vw,18px);
    flex-wrap: wrap;
    justify-content: center;
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .6s ease, transform .6s cubic-bezier(.22,1,.36,1);
}

    .if-s5-ctas.show {
        opacity: 1;
        transform: translateY(0);
    }

.if-s5-cta-primary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: clamp(14px,1.8vw,18px) clamp(28px,3.5vw,48px);
    border-radius: var(--if-r-pill);
    background: linear-gradient(135deg,#0891b2,#7c3aed);
    color: #fff;
    font-family: var(--if-font);
    font-size: clamp(13px,1.25vw,15px);
    font-weight: 800;
    letter-spacing: -0.015em;
    text-decoration: none;
    border: none;
    cursor: pointer;
    box-shadow: 0 8px 32px rgba(8,145,178,.35), 0 0 0 1px rgba(34,211,238,.18);
    position: relative;
    overflow: hidden;
    transition: transform .22s ease, box-shadow .22s ease;
}

    .if-s5-cta-primary::before {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(135deg,rgba(255,255,255,.14),transparent);
        opacity: 0;
        transition: opacity .2s ease;
    }

    .if-s5-cta-primary:hover {
        transform: translateY(-2px);
        box-shadow: 0 14px 44px rgba(8,145,178,.50), 0 0 0 1px rgba(34,211,238,.30);
    }

        .if-s5-cta-primary:hover::before {
            opacity: 1;
        }

    .if-s5-cta-primary:active {
        transform: translateY(0);
    }

.if-s5-cta-arr {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    flex-shrink: 0;
    background: rgba(255,255,255,.18);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .2s ease;
}

.if-s5-cta-primary:hover .if-s5-cta-arr {
    transform: translateX(3px);
}

.if-s5-cta-secondary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: clamp(13px,1.7vw,17px) clamp(24px,3vw,36px);
    border-radius: var(--if-r-pill);
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.12);
    color: rgba(255,255,255,.65);
    font-family: var(--if-font);
    font-size: clamp(13px,1.25vw,15px);
    font-weight: 700;
    letter-spacing: -0.012em;
    text-decoration: none;
    cursor: pointer;
    backdrop-filter: blur(8px);
    transition: background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}

    .if-s5-cta-secondary:hover {
        background: rgba(255,255,255,.09);
        border-color: rgba(255,255,255,.22);
        color: rgba(255,255,255,.90);
        transform: translateY(-2px);
    }

/* ═══════════════════════════════════════════════
   PROOF STRIP
═══════════════════════════════════════════════ */
.if-s5-proof {
    display: flex;
    align-items: center;
    gap: clamp(14px,2vw,24px);
    flex-wrap: wrap;
    justify-content: center;
    opacity: 0;
    transition: opacity .6s ease .4s;
}

    .if-s5-proof.show {
        opacity: 1;
    }

.if-s5-proof-item {
    display: flex;
    align-items: center;
    gap: 7px;
    font-family: var(--if-mono);
    font-size: clamp(8.5px,.82vw,10px);
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: rgba(255,255,255,.22);
}

.if-s5-proof-sep {
    color: rgba(255,255,255,.08);
    font-size: 18px;
}

/* ═══════════════════════════════════════════════
   FOOTER BAR
═══════════════════════════════════════════════ */
.if-s5-footer {
    width: 100%;
    border-top: 1px solid rgba(255,255,255,.055);
    padding: clamp(18px,2.5vw,24px) clamp(24px,5vw,60px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    position: relative;
    z-index: 3;
    opacity: 0;
    transition: opacity .6s ease .6s;
    margin-top: clamp(48px,6vw,72px);
}

    .if-s5-footer.show {
        opacity: 1;
    }

.if-s5-footer-brand {
    display: flex;
    align-items: center;
    gap: 9px;
    font-family: var(--if-font);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: rgba(255,255,255,.45);
}

.if-s5-footer-logo {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    background: var(--if-grad);
    display: flex;
    align-items: center;
    justify-content: center;
}

.if-s5-footer-links {
    display: flex;
    gap: clamp(14px,2vw,24px);
    flex-wrap: wrap;
}

.if-s5-footer-link {
    font-family: var(--if-mono);
    font-size: clamp(8.5px,.82vw,10px);
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(255,255,255,.20);
    text-decoration: none;
    transition: color .2s ease;
}

    .if-s5-footer-link:hover {
        color: rgba(255,255,255,.55);
    }

.if-s5-footer-copy {
    font-family: var(--if-mono);
    font-size: clamp(8px,.78vw,9.5px);
    font-weight: 600;
    letter-spacing: .05em;
    color: rgba(255,255,255,.14);
}

/* ══════════════════════════════════════════════════
   RESPONSIVE
   ① 640px  — mobile: Apple-level premium treatment
   ② 380px  — very small: SE / small Android
══════════════════════════════════════════════════ */

/* ① Mobile */
@media (max-width: 640px) {

    /* Top padding — 100px min is too tall above the fold on phone */
    .if-s5-inner {
        padding-top: 72px;
        padding-left: 20px;
        padding-right: 20px;
        gap: 40px;
    }

    /* ── Eyebrow ── */

    /* Was .35 opacity on a near-black background — invisible on OLED */
    .if-s5-ey-text {
        font-size: 10px;
        color: rgba(34,211,238,.62);
        letter-spacing: .14em;
    }

    .if-s5-ey-line {
        max-width: 40px;
    }

    /* ── Sentence lines ── */

    /* Was .28 opacity — ghost text on dark backgrounds */
    .if-s5-line--1 {
        font-size: 12px;
        color: rgba(255,255,255,.50);
        letter-spacing: .05em;
    }

    /* ── Headline fix ──
       line-height 1.06 crushes 2–3 line wraps on mobile.
       1.13 gives the large display type room to breathe,
       consistent with the S1–S4 treatment throughout the page. */
    .if-s5-line--2 {
        font-size: clamp(34px, 10vw, 52px);
        line-height: 1.13;
        letter-spacing: -0.042em;
    }

    .if-s5-line--3 {
        font-size: clamp(26px, 8vw, 40px);
        line-height: 1.14;
        letter-spacing: -0.038em;
    }

    /* Was .28 opacity — sub-caption barely existed on mobile */
    .if-s5-line--4 {
        font-size: 14px;
        line-height: 1.72;
        color: rgba(255,255,255,.50);
        max-width: 100%;
        margin-top: 6px;
    }

    /* ── Counter ──
       Stay 3-column — the numbers are short and this
       preserves the visual weight of the finale. Reduce
       internal padding and bump label/sub opacity. */
    .if-s5-counter-wrap {
        gap: 10px;
        max-width: 100%;
    }

    .if-s5-counter-item {
        padding: 16px 10px 14px;
        border-radius: var(--if-r-lg);
    }

    /* Numerals — clamp resolves to ~22px at 390px, push it up */
    .if-s5-count-num {
        font-size: clamp(26px, 7vw, 40px);
        height: 1.12em;
    }

    /* Was .30 opacity — the label beneath the number was invisible */
    .if-s5-count-lbl {
        font-size: 9px;
        color: rgba(255,255,255,.52);
        letter-spacing: .10em;
    }

    /* Was .18 opacity — completely disappeared on dark mobile bg */
    .if-s5-count-sub {
        font-size: 9px;
        color: rgba(255,255,255,.36);
        letter-spacing: .03em;
    }

    /* ── CTAs — full-width stack ── */
    .if-s5-ctas {
        flex-direction: column;
        width: 100%;
        gap: 12px;
    }

    .if-s5-cta-primary {
        width: 100%;
        justify-content: center;
        padding: 17px 28px;
        font-size: 15px;
    }

    .if-s5-cta-secondary {
        width: 100%;
        justify-content: center;
        padding: 15px 28px;
        font-size: 15px;
        /* Slightly more visible border on dark mobile screens */
        border-color: rgba(255,255,255,.18);
        color: rgba(255,255,255,.75);
    }

    /* ── Proof strip ──
       Was .22 opacity — badges were ghosts at arm's length */
    .if-s5-proof {
        gap: 12px;
    }

    .if-s5-proof-item {
        font-size: 10px;
        color: rgba(255,255,255,.42);
        letter-spacing: .05em;
    }

    /* Separator dot — was .08 = invisible */
    .if-s5-proof-sep {
        color: rgba(255,255,255,.18);
        font-size: 16px;
    }

    /* ── Footer ── */
    .if-s5-footer {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        padding: 20px 20px;
        margin-top: 48px;
    }

    /* Brand — was .45 opacity, bump to clearly readable */
    .if-s5-footer-brand {
        font-size: 14px;
        color: rgba(255,255,255,.62);
    }

    .if-s5-footer-links {
        gap: 16px;
    }

    /* Footer links — was vw-clamped AND .20 opacity — invisible */
    .if-s5-footer-link {
        font-size: 11px;
        color: rgba(255,255,255,.38);
        letter-spacing: .07em;
    }

    /* Copyright — was .14 opacity = unreadable */
    .if-s5-footer-copy {
        font-size: 11px;
        color: rgba(255,255,255,.28);
        letter-spacing: .04em;
    }
}

/* ② Very small — iPhone SE (375px), small Android (360px) */
@media (max-width: 380px) {

    .if-s5-inner {
        padding-top: 60px;
        padding-left: 16px;
        padding-right: 16px;
        gap: 34px;
    }

    .if-s5-line--2 {
        font-size: 32px;
        line-height: 1.15;
    }

    .if-s5-line--3 {
        font-size: 25px;
        line-height: 1.16;
    }

    .if-s5-line--4 {
        font-size: 13.5px;
    }

    .if-s5-count-num {
        font-size: 24px;
    }

    .if-s5-count-lbl {
        font-size: 8.5px;
    }

    .if-s5-count-sub {
        font-size: 8.5px;
    }

    .if-s5-cta-primary,
    .if-s5-cta-secondary {
        font-size: 14px;
        padding: 15px 20px;
    }

    .if-s5-proof-item {
        font-size: 9.5px;
    }

    .if-s5-footer {
        padding: 18px 16px;
        gap: 14px;
    }

    .if-s5-footer-brand {
        font-size: 13px;
    }

    .if-s5-footer-link {
        font-size: 10.5px;
    }

    .if-s5-footer-copy {
        font-size: 10.5px;
    }
}