/* ================================================================
   Qlynic · DoctorServices.aspx
   doctor-services-s1.css — Design tokens + Section 1
   Append s2, s3… as separate files below this one.
   ================================================================ */

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

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

/* ── Design tokens ── */
:root {
    /* Neutrals */
    --ds-white: #ffffff;
    --ds-snow: #f8f9fc;
    --ds-mist: #f0f2f8;
    --ds-fog: #e4e7ef;
    --ds-bone: #d0d5e2;
    --ds-ink: #09090b;
    --ds-slate: #3f3f46;
    --ds-stone: #71717a;
    --ds-pebble: #a1a1aa;
    --ds-dust: #d4d4d8;
    /* Blue */
    --ds-blue: #2563eb;
    --ds-blue-2: #3b82f6;
    --ds-blue-3: #60a5fa;
    --ds-blue-bg: rgba(37,99,235,.07);
    --ds-blue-bdr: rgba(37,99,235,.20);
    /* Violet */
    --ds-violet: #7c3aed;
    --ds-violet-2: #8b5cf6;
    --ds-violet-bg: rgba(124,58,237,.07);
    --ds-violet-bdr: rgba(124,58,237,.20);
    /* Emerald */
    --ds-emerald: #059669;
    --ds-emerald-2: #10b981;
    --ds-emerald-bg: rgba(5,150,105,.08);
    --ds-emerald-bdr: rgba(5,150,105,.22);
    /* Amber */
    --ds-amber: #d97706;
    --ds-amber-2: #f59e0b;
    --ds-amber-bg: rgba(217,119,6,.08);
    --ds-amber-bdr: rgba(217,119,6,.22);
    /* Rose */
    --ds-rose: #e11d48;
    --ds-rose-bg: rgba(225,29,72,.07);
    --ds-rose-bdr: rgba(225,29,72,.20);
    /* Borders & shadows */
    --ds-border: rgba(0,0,0,.07);
    --ds-border-2: rgba(0,0,0,.10);
    --ds-border-3: rgba(0,0,0,.16);
    --ds-shadow-sm: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
    --ds-shadow: 0 4px 16px rgba(0,0,0,.07), 0 2px 6px rgba(0,0,0,.04);
    --ds-shadow-lg: 0 16px 48px rgba(0,0,0,.09), 0 6px 16px rgba(0,0,0,.05);
    --ds-shadow-card: 0 20px 60px rgba(37,99,235,.09), 0 6px 20px rgba(0,0,0,.07);
    /* Brand gradients */
    --ds-grad: linear-gradient(135deg,#2563eb 0%,#7c3aed 100%);
    --ds-grad-text: linear-gradient(135deg,#2563eb 0%,#7c3aed 100%);
    /* Radii */
    --ds-r-sm: 6px;
    --ds-r-md: 10px;
    --ds-r-lg: 16px;
    --ds-r-xl: 22px;
    --ds-r-2xl: 30px;
    --ds-r-pill: 999px;
    /* Fonts */
    --ds-font: 'Plus Jakarta Sans','DM Sans',system-ui,sans-serif;
    --ds-mono: 'JetBrains Mono','Fira Code',ui-monospace,monospace;
}

/* ── Page bg ── */
#gc-main {
    background: var(--ds-white);
}

/* ────────────────────────────────────────────────
   SHARED UTILITIES
──────────────────────────────────────────────── */

/* Eyebrow pill */
.ds-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: var(--ds-mono);
    font-size: clamp(9px,.85vw,10.5px);
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--ds-blue);
    background: var(--ds-blue-bg);
    border: 1px solid var(--ds-blue-bdr);
    border-radius: var(--ds-r-pill);
    padding: 5px 14px;
    width: fit-content;
}

.ds-eyebrow-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--ds-blue);
    animation: ds-dot-pulse 2s ease-in-out infinite;
}

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

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

/* Gradient text */
.ds-grad-text {
    background: var(--ds-grad-text);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Typing cursor */
@keyframes ds-caret {
    0%,45% {
        opacity: 1;
    }

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


/* ================================================================
   SECTION 1 — "The menu patients never see — but always feel."
   ================================================================ */

/* ── Section shell ── */
.ds-s1 {
    position: relative;
    background: var(--ds-white);
    overflow: hidden;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
}

/* Dot grid — left half only */
.ds-s1-bg {
    position: absolute;
    inset: 0 52% 0 0;
    pointer-events: none;
    z-index: 0;
    background-image: radial-gradient(circle,rgba(37,99,235,.07) 1.2px,transparent 1.2px);
    background-size: 26px 26px;
    mask-image: linear-gradient(to right,rgba(0,0,0,.5),transparent 100%);
    -webkit-mask-image: linear-gradient(to right,rgba(0,0,0,.5),transparent 100%);
}

/* Ambient wash */
.ds-s1-wash {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background: radial-gradient(ellipse 55% 55% at 18% 45%, rgba(37,99,235,.035) 0%, transparent 70%), radial-gradient(ellipse 45% 50% at 35% 82%, rgba(124,58,237,.025) 0%, transparent 70%);
}

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

/* ════════════════════════════════════════
   LEFT — Copy
════════════════════════════════════════ */
.ds-s1-copy {
    flex: 0 0 46%;
    max-width: 46%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(104px,12vh,144px) clamp(28px,4.5vw,80px) clamp(40px,5vh,64px);
}

/* Entry transitions */
.ds-s1-ey-wrap {
    margin-bottom: 24px;
    opacity: 0;
    transition: opacity .5s ease;
}

.ds-s1-on .ds-s1-ey-wrap {
    opacity: 1;
}

.ds-s1-kicker {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--ds-mono);
    font-size: clamp(11px,1.05vw,13px);
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--ds-violet);
    margin-bottom: 14px;
    opacity: 0;
    transition: opacity .5s ease .10s;
}

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

.ds-s1-kicker-ico {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--ds-violet-bg);
    border: 1.5px solid var(--ds-violet-bdr);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ds-violet);
    flex-shrink: 0;
}

/* H1 */
.ds-s1-h1 {
    font-family: var(--ds-font);
    font-size: clamp(30px,3.8vw,64px);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.044em;
    color: var(--ds-ink);
    margin-bottom: 20px;
}

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

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

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

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

/* Accent word */
.ds-s1-accent {
    position: relative;
    display: inline;
    background: var(--ds-grad-text);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

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

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

/* Sub text */
.ds-s1-sub {
    font-size: clamp(14px,1.38vw,16.5px);
    color: var(--ds-stone);
    line-height: 1.82;
    max-width: 440px;
    margin-bottom: 32px;
    opacity: 0;
    filter: blur(5px);
    transition: opacity .65s ease .48s, filter .65s ease .48s;
}

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

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

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

.ds-s1-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: var(--ds-r-pill);
    font-family: var(--ds-mono);
    font-size: clamp(9px,.85vw,10.5px);
    font-weight: 700;
    letter-spacing: .06em;
    border: 1px solid;
}

.ds-s1-chip--blue {
    color: var(--ds-blue);
    background: var(--ds-blue-bg);
    border-color: var(--ds-blue-bdr);
}

.ds-s1-chip--violet {
    color: var(--ds-violet);
    background: var(--ds-violet-bg);
    border-color: var(--ds-violet-bdr);
}

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

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

/* Stat tiles */
.ds-s1-stats {
    display: flex;
    gap: clamp(6px,1.2vw,14px);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .55s ease .78s, transform .55s ease .78s;
}

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

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

    .ds-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);
    }

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

.ds-s1-stat:nth-child(1)::before {
    background: var(--ds-blue);
    --sb: 820ms;
}

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

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

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

.ds-s1-stat:nth-child(1) .ds-s1-stat-num {
    color: var(--ds-blue);
}

.ds-s1-stat:nth-child(2) .ds-s1-stat-num {
    color: var(--ds-violet);
}

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

.ds-s1-stat-lbl {
    font-size: clamp(10px,.95vw,12px);
    font-weight: 700;
    color: var(--ds-ink);
}

.ds-s1-stat-sub {
    font-size: clamp(9px,.85vw,10.5px);
    color: var(--ds-pebble);
}


/* ════════════════════════════════════════
   RIGHT — AI Match Terminal
════════════════════════════════════════ */
.ds-s1-visual {
    flex: 1 1 54%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(60px,8vh,100px) clamp(20px,3vw,52px) clamp(40px,5vh,72px);
    position: relative;
}

/* Terminal card */
.ds-terminal {
    width: clamp(340px,46vw,560px);
    background: #06070b;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: var(--ds-r-2xl);
    overflow: visible;
    box-shadow: 0 0 0 1px rgba(37,99,235,.06), 0 32px 80px rgba(0,0,0,.22), 0 8px 24px rgba(0,0,0,.14);
    position: relative;
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .7s ease .32s, transform .7s cubic-bezier(.22,1,.36,1) .32s;
}

.ds-s1-on .ds-terminal {
    opacity: 1;
    transform: translateY(0);
}

/* Mac chrome */
.ds-term-chrome {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 18px;
    border-bottom: 1px solid rgba(255,255,255,.06);
    background: rgba(255,255,255,.018);
}

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

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

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

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

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

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

.ds-term-ai-badge {
    display: flex;
    align-items: center;
    gap: 5px;
    font-family: var(--ds-mono);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    padding: 2px 9px;
    border-radius: var(--ds-r-pill);
    background: rgba(37,99,235,.18);
    border: 1px solid rgba(37,99,235,.32);
    color: var(--ds-blue-3);
}

.ds-term-ai-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--ds-blue-3);
    box-shadow: 0 0 7px rgba(96,165,250,.8);
    animation: ds-dot-pulse 1.8s ease-in-out infinite;
}

/* ── 2×2 Service card grid ── */
.ds-svc-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 14px 14px 0;
    position: relative;
}

/* Service card */
.ds-svc-card {
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: var(--ds-r-md);
    padding: clamp(10px,1.4vw,14px);
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: relative;
    overflow: hidden;
    transition: opacity .4s ease, transform .4s cubic-bezier(.22,1,.36,1), border-color .35s ease, box-shadow .35s ease, background .35s ease;
    cursor: default;
}

    /* Shimmer sweep on match */
    .ds-svc-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 55%;
        height: 100%;
        background: linear-gradient(90deg,transparent,rgba(255,255,255,.06),transparent);
        opacity: 0;
        pointer-events: none;
    }

    .ds-svc-card.matched::before {
        animation: ds-shimmer 1s ease forwards;
        opacity: 1;
    }

@keyframes ds-shimmer {
    0% {
        left: -60%;
    }

    100% {
        left: 130%;
    }
}

/* Matched state */
.ds-svc-card.matched {
    border-color: var(--ds-blue-bdr);
    box-shadow: 0 0 0 1px rgba(37,99,235,.18), 0 8px 28px rgba(37,99,235,.18), inset 0 0 16px rgba(37,99,235,.06);
    background: rgba(37,99,235,.07);
    transform: scale(1.025);
}

/* Dimmed state */
.ds-svc-card.dimmed {
    opacity: .42;
    transform: scale(.975);
}

/* Card top row */
.ds-svc-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.ds-svc-cat-ico {
    width: 30px;
    height: 30px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ds-svc-card:nth-child(1) .ds-svc-cat-ico {
    background: rgba(37,99,235,.12);
    border: 1px solid rgba(37,99,235,.22);
    color: var(--ds-blue-3);
}

.ds-svc-card:nth-child(2) .ds-svc-cat-ico {
    background: rgba(16,185,129,.10);
    border: 1px solid rgba(16,185,129,.22);
    color: #34d399;
}

.ds-svc-card:nth-child(3) .ds-svc-cat-ico {
    background: rgba(245,158,11,.10);
    border: 1px solid rgba(245,158,11,.22);
    color: #fbbf24;
}

.ds-svc-card:nth-child(4) .ds-svc-cat-ico {
    background: rgba(139,92,246,.10);
    border: 1px solid rgba(139,92,246,.22);
    color: #a78bfa;
}

/* Match badge */
.ds-match-badge {
    font-family: var(--ds-mono);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 4px;
    background: rgba(37,99,235,.18);
    color: var(--ds-blue-3);
    border: 1px solid rgba(37,99,235,.28);
    opacity: 0;
    transform: scale(.7);
    transition: opacity .3s ease, transform .3s cubic-bezier(.22,1,.36,1);
    white-space: nowrap;
}

.ds-svc-card.matched .ds-match-badge {
    opacity: 1;
    transform: scale(1);
}

/* Service name */
.ds-svc-name {
    font-family: var(--ds-font);
    font-size: clamp(11.5px,1.1vw,13px);
    font-weight: 800;
    color: rgba(255,255,255,.82);
    letter-spacing: -0.015em;
    line-height: 1.25;
    transition: color .35s ease;
}

.ds-svc-card.matched .ds-svc-name {
    color: rgba(255,255,255,.96);
}

/* Meta row */
.ds-svc-meta {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
}

.ds-svc-price {
    font-family: var(--ds-mono);
    font-size: clamp(10px,.95vw,12px);
    font-weight: 800;
    color: rgba(255,255,255,.70);
    letter-spacing: .02em;
}

.ds-svc-chip {
    font-family: var(--ds-mono);
    font-size: clamp(7.5px,.72vw,9px);
    font-weight: 700;
    letter-spacing: .06em;
    padding: 1.5px 6px;
    border-radius: 4px;
    border: 1px solid;
    white-space: nowrap;
}

.ds-svc-chip--dur {
    color: rgba(255,255,255,.45);
    background: rgba(255,255,255,.06);
    border-color: rgba(255,255,255,.10);
}

.ds-svc-chip--ai {
    color: #a78bfa;
    background: rgba(139,92,246,.12);
    border-color: rgba(139,92,246,.25);
}

.ds-svc-chip--free {
    color: #34d399;
    background: rgba(16,185,129,.10);
    border-color: rgba(16,185,129,.22);
}

.ds-svc-doc {
    font-family: var(--ds-mono);
    font-size: clamp(7.5px,.72vw,9px);
    font-weight: 600;
    color: rgba(255,255,255,.28);
    letter-spacing: .06em;
    text-transform: uppercase;
    margin-top: -2px;
}

/* ── SVG arc overlay ── */
.ds-arc-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    pointer-events: none;
    z-index: 10;
    overflow: visible;
}

.ds-arc-path {
    fill: none;
    stroke: url(#dsArcGrad);
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-dasharray: var(--arc-len,300);
    stroke-dashoffset: var(--arc-len,300);
    opacity: 0;
    transition: stroke-dashoffset .7s cubic-bezier(.22,1,.36,1), opacity .2s ease;
    filter: drop-shadow(0 0 4px rgba(37,99,235,.45));
}

    .ds-arc-path.drawing {
        opacity: 1;
        stroke-dashoffset: 0;
    }

.ds-arc-origin {
    r: 4;
    fill: var(--ds-blue-3);
    opacity: 0;
    transition: opacity .2s ease;
    filter: drop-shadow(0 0 5px rgba(96,165,250,.7));
}

    .ds-arc-origin.show {
        opacity: 1;
    }

.ds-arc-dest {
    r: 4;
    fill: var(--ds-blue-2);
    opacity: 0;
    transition: opacity .2s ease .6s;
    filter: drop-shadow(0 0 6px rgba(37,99,235,.8));
}

    .ds-arc-dest.show {
        opacity: 1;
    }

/* ── Chat input row ── */
.ds-chat-row {
    padding: 10px 14px 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.ds-chat-field {
    flex: 1;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.10);
    border-radius: var(--ds-r-pill);
    padding: 9px 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: border-color .3s ease, box-shadow .3s ease;
}

    .ds-chat-field.active {
        border-color: rgba(37,99,235,.35);
        box-shadow: 0 0 0 3px rgba(37,99,235,.12);
    }

.ds-chat-avatar {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    flex-shrink: 0;
    background: linear-gradient(135deg,#3b82f6,#8b5cf6);
    display: flex;
    align-items: center;
    justify-content: center;
}

.ds-chat-text {
    font-family: var(--ds-mono);
    font-size: clamp(10px,.95vw,12px);
    font-weight: 500;
    color: rgba(255,255,255,.75);
    flex: 1;
    min-width: 0;
}

    .ds-chat-text.typing::after {
        content: '';
        display: inline-block;
        width: 1.5px;
        height: 12px;
        border-radius: 1px;
        background: rgba(255,255,255,.65);
        margin-left: 2px;
        vertical-align: middle;
        animation: ds-caret .8s ease-in-out infinite;
    }

.ds-chat-send {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--ds-grad);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    box-shadow: 0 4px 12px rgba(37,99,235,.35);
    transition: transform .2s ease, box-shadow .2s ease;
}

    .ds-chat-send.pulse {
        animation: ds-send-pulse .4s cubic-bezier(.22,1,.36,1);
    }

@keyframes ds-send-pulse {
    0% {
        transform: scale(1);
    }

    40% {
        transform: scale(1.18);
    }

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

.ds-chat-hint {
    text-align: center;
    padding: 0 14px 14px;
    font-family: var(--ds-mono);
    font-size: clamp(8px,.76vw,9.5px);
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: rgba(255,255,255,.22);
    opacity: 0;
    transition: opacity .4s ease;
}

.ds-s1-on .ds-chat-hint {
    opacity: 1;
}


/* ════════════════════════════════════════
   TICKER BAR
════════════════════════════════════════ */
.ds-s1-ticker-bar {
    position: relative;
    z-index: 10;
    border-top: 1px solid var(--ds-border);
    background: rgba(255,255,255,.96);
    backdrop-filter: blur(12px);
    overflow: hidden;
    height: 46px;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    opacity: 0;
    transition: opacity .5s ease 1.4s;
}

.ds-s1-on .ds-s1-ticker-bar {
    opacity: 1;
}

.ds-s1-ticker-bar::before,
.ds-s1-ticker-bar::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 80px;
    z-index: 2;
    pointer-events: none;
}

.ds-s1-ticker-bar::before {
    left: 0;
    background: linear-gradient(to right, rgba(255,255,255,.96), transparent);
}

.ds-s1-ticker-bar::after {
    right: 0;
    background: linear-gradient(to left, rgba(255,255,255,.96), transparent);
}

.ds-s1-ticker {
    display: flex;
    align-items: center;
    white-space: nowrap;
    animation: ds-tick 44s linear infinite;
    will-change: transform;
}

@keyframes ds-tick {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

.ds-s1-ticker-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 26px;
    font-family: var(--ds-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .05em;
    color: var(--ds-stone);
}

    .ds-s1-ticker-item svg {
        color: var(--ds-blue);
        flex-shrink: 0;
    }

.ds-s1-ticker-sep {
    color: var(--ds-bone);
    font-size: 18px;
    padding: 0 2px;
}


/* ════════════════════════════════════════
   RESPONSIVE
   ① 1060px — wide tablet: nudge left column
   ② 820px  — tablet: stack columns
   ③ 640px  — mobile: Apple-level premium treatment
   ④ 380px  — very small: SE / small Android
════════════════════════════════════════ */

/* ① Wide tablet */
@media (max-width: 1060px) {
    .ds-s1-copy {
        flex: 0 0 48%;
        max-width: 48%;
    }
}

/* ② Tablet — stack copy above, terminal below */
@media (max-width: 820px) {
    .ds-s1 {
        min-height: auto;
    }

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

    .ds-s1-copy {
        flex: none;
        max-width: 100%;
        padding: 88px 28px 28px;
    }

    .ds-s1-visual {
        flex: none;
        width: 100%;
        padding: 16px 28px 48px;
    }
}

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

    .ds-s1-copy {
        padding: 80px 20px 28px;
    }

    .ds-s1-visual {
        padding: 12px 20px 44px;
    }

    /* Eyebrow pill — hard px, vw collapses dangerously at 390px */
    .ds-eyebrow {
        font-size: 11px;
        padding: 5px 13px;
    }

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

    /* ── Headline — the critical fix ──
       line-height 1.05 crushes 3-line wraps on mobile.
       1.14 gives each line room to breathe. */
    .ds-s1-h1 {
        font-size: clamp(32px, 9vw, 46px);
        line-height: 1.14;
        letter-spacing: -0.038em;
        margin-bottom: 16px;
    }

    /* Sub — on white bg stone is readable, but tighten max-width */
    .ds-s1-sub {
        font-size: 16px;
        line-height: 1.75;
        max-width: 100%;
        margin-bottom: 26px;
    }

    /* Chips */
    .ds-s1-chips {
        gap: 7px;
        margin-bottom: 26px;
    }

    .ds-s1-chip {
        font-size: 11px;
        padding: 5px 12px;
    }

    /* Stats — 3-col grid, fixed pixel sizes */
    .ds-s1-stats {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
    }

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

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

    .ds-s1-stat-lbl {
        font-size: 11px;
        line-height: 1.3;
    }

    .ds-s1-stat-sub {
        font-size: 10px;
    }

    /* Terminal — full bleed, no overflow issues */
    .ds-terminal {
        width: 100%;
        border-radius: var(--ds-r-xl);
    }

    /* Service cards — slightly tighter internal padding */
    .ds-svc-grid {
        gap: 7px;
        padding: 12px 12px 0;
    }

    /* Service name — clamp resolves to ~11.5px at 390px, bump to readable */
    .ds-svc-name {
        font-size: 13px;
        line-height: 1.28;
    }

    /* Price */
    .ds-svc-price {
        font-size: 11px;
    }

    /* Chips inside cards */
    .ds-svc-chip {
        font-size: 9px;
        padding: 2px 7px;
    }

    /* Doctor name line */
    .ds-svc-doc {
        font-size: 9px;
    }

    /* Chat input */
    .ds-chat-text {
        font-size: 12px;
    }

    /* Chat hint — was .22 opacity = invisible on dark card surface */
    .ds-chat-hint {
        font-size: 9px;
        color: rgba(255,255,255,.38);
        letter-spacing: .05em;
    }

    /* Ticker — slightly slower on mobile for readability */
    .ds-s1-ticker-item {
        font-size: 10.5px;
        padding: 0 20px;
    }
}

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

    .ds-s1-copy {
        padding: 72px 16px 24px;
    }

    .ds-s1-visual {
        padding: 10px 16px 36px;
    }

    .ds-s1-h1 {
        font-size: 30px;
        line-height: 1.16;
    }

    .ds-s1-sub {
        font-size: 15px;
    }

    .ds-s1-stats {
        gap: 8px;
    }

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

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

    .ds-svc-grid {
        gap: 6px;
        padding: 10px 10px 0;
    }

    .ds-svc-name {
        font-size: 12px;
    }

    .ds-svc-price {
        font-size: 10.5px;
    }

    .ds-chat-text {
        font-size: 11.5px;
    }
}

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















































/* ================================================================
   Qlynic · DoctorServices.aspx
   SECTION 2 — "Four payment shapes"
   Strict sizing: every text, padding and margin is correct
   at every viewport from 320px to 2560px.
   ================================================================ */

.ds-s2 {
    position: relative;
    background: #06070b;
    overflow: hidden;
    padding: clamp(72px,10vh,140px) 0 clamp(64px,9vh,120px);
}

    /* Ambient aurora */
    .ds-s2::before {
        content: '';
        position: absolute;
        inset: 0;
        pointer-events: none;
        z-index: 0;
        background: radial-gradient(ellipse 60% 55% at 20% 40%, rgba(124,58,237,.10) 0%, transparent 65%), radial-gradient(ellipse 55% 50% at 80% 65%, rgba(37,99,235,.08) 0%, transparent 60%), radial-gradient(ellipse 40% 40% at 50% 10%, rgba(37,99,235,.05) 0%, transparent 60%);
        animation: ds-s2-aurora 18s ease-in-out infinite alternate;
    }

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

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

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

/* Dot grain */
.ds-s2::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background-image: radial-gradient(rgba(255,255,255,.028) 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%);
}

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

/* ─────────────────────────────────────────────
   HEADER
───────────────────────────────────────────── */
.ds-s2-head {
    text-align: center;
    max-width: 680px;
    margin: 0 auto clamp(48px,6.5vw,88px);
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .7s ease, transform .7s cubic-bezier(.22,1,.36,1);
}

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

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

.ds-s2-eyebrow-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #a78bfa;
    box-shadow: 0 0 8px rgba(167,139,250,.7);
    animation: ds-dot-pulse 2s ease-in-out infinite;
}

/* H2: line-height 1.06 crushes wrapped lines on any viewport < 900px.
   1.12 gives each line comfortable room without losing tightness. */
.ds-s2-h2 {
    font-family: var(--ds-font);
    font-size: clamp(26px,3.8vw,62px);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -0.042em;
    color: rgba(255,255,255,.95);
    margin-bottom: 18px;
}

    .ds-s2-h2 em {
        font-style: normal;
        background: linear-gradient(135deg,#8b5cf6,#60a5fa);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
    }

/* Sub: .38 opacity is near-invisible on any dark bg at arm's length */
.ds-s2-sub {
    font-size: clamp(14px,1.38vw,16.5px);
    color: rgba(255,255,255,.52);
    line-height: 1.80;
    max-width: 540px;
    margin: 0 auto;
}

/* ─────────────────────────────────────────────
   PAYMENT CARDS — 4-col desktop
   Fixed-height philosophy: cards cross-fade via
   CSS only. Zero reflow on any interaction.
───────────────────────────────────────────── */
.ds-s2-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(10px,1.2vw,16px);
    margin-bottom: clamp(32px,4.5vw,72px);
}

.ds-s2-card {
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: var(--ds-r-xl);
    padding: clamp(18px,2.4vw,28px);
    display: flex;
    flex-direction: column;
    gap: clamp(12px,1.6vw,20px);
    position: relative;
    overflow: hidden;
    cursor: pointer;
    user-select: none;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .6s ease var(--ce,0ms), transform .6s cubic-bezier(.22,1,.36,1) var(--ce,0ms), background .35s ease, border-color .35s ease, box-shadow .35s ease;
}

    .ds-s2-card:nth-child(1) {
        --ce: 0ms;
    }

    .ds-s2-card:nth-child(2) {
        --ce: 80ms;
    }

    .ds-s2-card:nth-child(3) {
        --ce: 160ms;
    }

    .ds-s2-card:nth-child(4) {
        --ce: 240ms;
    }

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

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

    .ds-s2-card.active::before {
        transform: scaleX(1);
    }

    /* Inner glow */
    .ds-s2-card::after {
        content: '';
        position: absolute;
        inset: 0;
        pointer-events: none;
        opacity: 0;
        transition: opacity .4s ease;
        border-radius: var(--ds-r-xl);
    }

    .ds-s2-card.active::after {
        opacity: 1;
    }

    /* Per-mode active states */
    .ds-s2-card[data-mode="free"].active {
        background: rgba(5,150,105,.06);
        border-color: rgba(5,150,105,.30);
        box-shadow: 0 0 0 1px rgba(5,150,105,.08), 0 20px 50px rgba(5,150,105,.08);
    }

    .ds-s2-card[data-mode="deposit"].active {
        background: rgba(217,119,6,.06);
        border-color: rgba(217,119,6,.30);
        box-shadow: 0 0 0 1px rgba(217,119,6,.08), 0 20px 50px rgba(217,119,6,.08);
    }

    .ds-s2-card[data-mode="full"].active {
        background: rgba(139,92,246,.07);
        border-color: rgba(139,92,246,.32);
        box-shadow: 0 0 0 1px rgba(139,92,246,.10), 0 20px 50px rgba(139,92,246,.10);
    }

    .ds-s2-card[data-mode="optional"].active {
        background: rgba(37,99,235,.06);
        border-color: rgba(37,99,235,.30);
        box-shadow: 0 0 0 1px rgba(37,99,235,.08), 0 20px 50px rgba(37,99,235,.08);
    }

    /* Accent bar colours */
    .ds-s2-card[data-mode="free"]::before {
        background: linear-gradient(90deg,#10b981,#34d399);
    }

    .ds-s2-card[data-mode="deposit"]::before {
        background: linear-gradient(90deg,#d97706,#f59e0b);
    }

    .ds-s2-card[data-mode="full"]::before {
        background: linear-gradient(90deg,#7c3aed,#8b5cf6);
    }

    .ds-s2-card[data-mode="optional"]::before {
        background: linear-gradient(90deg,#2563eb,#3b82f6);
    }

    /* Inner glow colours */
    .ds-s2-card[data-mode="free"]::after {
        background: radial-gradient(ellipse 80% 60% at 50% 0%,rgba(16,185,129,.06) 0%,transparent 70%);
    }

    .ds-s2-card[data-mode="deposit"]::after {
        background: radial-gradient(ellipse 80% 60% at 50% 0%,rgba(245,158,11,.06) 0%,transparent 70%);
    }

    .ds-s2-card[data-mode="full"]::after {
        background: radial-gradient(ellipse 80% 60% at 50% 0%,rgba(139,92,246,.07) 0%,transparent 70%);
    }

    .ds-s2-card[data-mode="optional"]::after {
        background: radial-gradient(ellipse 80% 60% at 50% 0%,rgba(37,99,235,.06) 0%,transparent 70%);
    }

/* Card icon */
.ds-s2-card-ico {
    width: clamp(38px,4.5vw,52px);
    height: clamp(38px,4.5vw,52px);
    border-radius: var(--ds-r-lg);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid;
    position: relative;
    z-index: 1;
    transition: background .35s ease, border-color .35s ease, box-shadow .35s ease;
}

.ds-s2-card[data-mode="free"] .ds-s2-card-ico {
    background: rgba(16,185,129,.10);
    border-color: rgba(16,185,129,.20);
    color: #34d399;
}

.ds-s2-card[data-mode="deposit"] .ds-s2-card-ico {
    background: rgba(245,158,11,.10);
    border-color: rgba(245,158,11,.20);
    color: #fbbf24;
}

.ds-s2-card[data-mode="full"] .ds-s2-card-ico {
    background: rgba(139,92,246,.12);
    border-color: rgba(139,92,246,.22);
    color: #a78bfa;
}

.ds-s2-card[data-mode="optional"] .ds-s2-card-ico {
    background: rgba(59,130,246,.10);
    border-color: rgba(59,130,246,.20);
    color: #60a5fa;
}

.ds-s2-card.active[data-mode="free"] .ds-s2-card-ico {
    box-shadow: 0 0 14px rgba(16,185,129,.22);
}

.ds-s2-card.active[data-mode="deposit"] .ds-s2-card-ico {
    box-shadow: 0 0 14px rgba(245,158,11,.22);
}

.ds-s2-card.active[data-mode="full"] .ds-s2-card-ico {
    box-shadow: 0 0 14px rgba(139,92,246,.25);
}

.ds-s2-card.active[data-mode="optional"] .ds-s2-card-ico {
    box-shadow: 0 0 14px rgba(59,130,246,.22);
}

/* Card mode label — .28 is ghost text; lifted to .48 inactive, .68 active */
.ds-s2-card-mode {
    font-family: var(--ds-mono);
    font-size: clamp(8.5px,.82vw,10px);
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(255,255,255,.48);
    position: relative;
    z-index: 1;
    transition: color .3s ease;
}

.ds-s2-card.active .ds-s2-card-mode {
    color: rgba(255,255,255,.68);
}

/* Card title — .55 inactive is readable; keep, brighten on active */
.ds-s2-card-title {
    font-family: var(--ds-font);
    font-size: clamp(15px,1.9vw,22px);
    font-weight: 800;
    line-height: 1.22;
    letter-spacing: -0.026em;
    color: rgba(255,255,255,.58);
    position: relative;
    z-index: 1;
    transition: color .3s ease;
}

.ds-s2-card.active .ds-s2-card-title {
    color: rgba(255,255,255,.92);
}

.ds-s2-card[data-mode="free"].active .ds-s2-card-title {
    color: #4ade80;
}

.ds-s2-card[data-mode="deposit"].active .ds-s2-card-title {
    color: #fbbf24;
}

.ds-s2-card[data-mode="full"].active .ds-s2-card-title {
    color: #c084fc;
}

.ds-s2-card[data-mode="optional"].active .ds-s2-card-title {
    color: #7dd3fc;
}

/* Card body — .30 opacity is too low; lifted to .46 inactive, .58 active */
.ds-s2-card-body {
    font-size: clamp(12px,1.12vw,13.5px);
    color: rgba(255,255,255,.46);
    line-height: 1.72;
    position: relative;
    z-index: 1;
    transition: color .3s ease;
}

.ds-s2-card.active .ds-s2-card-body {
    color: rgba(255,255,255,.62);
}

/* Progress drain */
.ds-s2-card-prog {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 2px;
    width: 0%;
    opacity: 0;
    transition: opacity .2s ease;
}

.ds-s2-card.active .ds-s2-card-prog {
    opacity: .6;
}

.ds-s2-card.active.cycling .ds-s2-card-prog {
    transition: width 4s linear, opacity .2s ease;
    width: 100%;
}

.ds-s2-card[data-mode="free"].active .ds-s2-card-prog {
    background: #10b981;
}

.ds-s2-card[data-mode="deposit"].active .ds-s2-card-prog {
    background: #d97706;
}

.ds-s2-card[data-mode="full"].active .ds-s2-card-prog {
    background: #7c3aed;
}

.ds-s2-card[data-mode="optional"].active .ds-s2-card-prog {
    background: #2563eb;
}

/* ─────────────────────────────────────────────
   DETAIL PANEL — fixed height, cross-fade only.
   All four panels in DOM; opacity toggles. ZERO reflow.
───────────────────────────────────────────── */
.ds-s2-detail-wrap {
    position: relative;
    height: clamp(220px,26vw,320px);
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .65s ease .2s, transform .65s cubic-bezier(.22,1,.36,1) .2s;
}

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

.ds-s2-detail {
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.07);
    border-radius: var(--ds-r-2xl);
    padding: clamp(20px,2.8vw,36px) clamp(24px,3.5vw,44px);
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: clamp(20px,3vw,40px);
    align-items: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity .45s ease;
    overflow: hidden;
}

    .ds-s2-detail.active {
        opacity: 1;
        pointer-events: auto;
    }

/* Left: big price */
.ds-s2-detail-price {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Large price numeral — clamp is fine, just needs floor check */
.ds-s2-detail-price-num {
    font-family: var(--ds-font);
    font-size: clamp(48px,7vw,88px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.06em;
}

.ds-s2-detail[data-mode="free"] .ds-s2-detail-price-num {
    color: #34d399;
}

.ds-s2-detail[data-mode="deposit"] .ds-s2-detail-price-num {
    color: #fbbf24;
}

.ds-s2-detail[data-mode="full"] .ds-s2-detail-price-num {
    color: #c084fc;
}

.ds-s2-detail[data-mode="optional"] .ds-s2-detail-price-num {
    color: #93c5fd;
}

/* Price label — .28 is invisible on dark; lifted to .48 */
.ds-s2-detail-price-label {
    font-family: var(--ds-mono);
    font-size: clamp(8.5px,.82vw,10px);
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(255,255,255,.48);
}

/* Middle: description */
.ds-s2-detail-text {
    display: flex;
    flex-direction: column;
    gap: 10px;
    border-left: 1px solid rgba(255,255,255,.07);
    padding-left: clamp(20px,3vw,40px);
}

.ds-s2-detail-headline {
    font-family: var(--ds-font);
    font-size: clamp(15px,1.8vw,22px);
    font-weight: 800;
    letter-spacing: -0.024em;
    line-height: 1.28;
    color: rgba(255,255,255,.88);
}

/* Detail copy — .38 lifted to .56 */
.ds-s2-detail-copy {
    font-size: clamp(12.5px,1.2vw,14px);
    color: rgba(255,255,255,.56);
    line-height: 1.74;
}

/* Right: property chips */
.ds-s2-detail-chips {
    display: flex;
    flex-direction: column;
    gap: 8px;
    border-left: 1px solid rgba(255,255,255,.07);
    padding-left: clamp(20px,3vw,40px);
}

.ds-s2-detail-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    border-radius: var(--ds-r-md);
    border: 1px solid;
    font-family: var(--ds-mono);
    font-size: clamp(9px,.88vw,11px);
    font-weight: 700;
    letter-spacing: .05em;
}

.ds-s2-detail[data-mode="free"] .ds-s2-detail-chip {
    color: rgba(52,211,153,.90);
    background: rgba(16,185,129,.07);
    border-color: rgba(16,185,129,.18);
}

.ds-s2-detail[data-mode="deposit"] .ds-s2-detail-chip {
    color: rgba(251,191,36,.90);
    background: rgba(217,119,6,.07);
    border-color: rgba(217,119,6,.18);
}

.ds-s2-detail[data-mode="full"] .ds-s2-detail-chip {
    color: rgba(192,132,252,.90);
    background: rgba(139,92,246,.08);
    border-color: rgba(139,92,246,.20);
}

.ds-s2-detail[data-mode="optional"] .ds-s2-detail-chip {
    color: rgba(147,197,253,.90);
    background: rgba(37,99,235,.07);
    border-color: rgba(37,99,235,.18);
}

.ds-s2-detail-chip-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
    background: currentColor;
}

/* ══════════════════════════════════════════════════
   RESPONSIVE — strict, covering every viewport range
   ① 1080px — wide tablet: card content starts to feel tight
   ② 900px  — tablet: 2×2 cards, detail panel stacks
   ③ 640px  — mobile: premium treatment throughout
   ④ 400px  — small phone: single-column cards
   ⑤ 320px  — minimum: absolute floor sizes
══════════════════════════════════════════════════ */

/* ① Wide tablet — tighten card text gently */
@media (max-width: 1080px) {
    .ds-s2-card-body {
        font-size: 12.5px;
    }
}

/* ② Tablet — 2×2 cards, detail stacks vertically */
@media (max-width: 900px) {

    .ds-s2-cards {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    /* Detail panel: stop being fixed-height, let content dictate */
    .ds-s2-detail-wrap {
        height: auto;
        min-height: 0;
    }

    .ds-s2-detail {
        position: static;
        display: none; /* JS shows only the active one */
        grid-template-columns: 1fr;
        gap: 20px;
        height: auto;
        padding: clamp(20px,3vw,30px) clamp(20px,3vw,32px);
        border-radius: var(--ds-r-xl);
    }

        .ds-s2-detail.active {
            display: flex;
            flex-direction: column;
        }

    .ds-s2-detail-text,
    .ds-s2-detail-chips {
        border-left: none;
        padding-left: 0;
        border-top: 1px solid rgba(255,255,255,.07);
        padding-top: 18px;
    }

    .ds-s2-detail-price-num {
        font-size: clamp(44px,10vw,72px);
    }

    .ds-s2-detail-chips {
        flex-direction: row;
        flex-wrap: wrap;
    }
}

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

    /* Section vertical breathing room */
    .ds-s2 {
        padding: 60px 0 52px;
    }

    .ds-s2-inner {
        padding: 0 18px;
    }

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

    /* Eyebrow — hard px, vw collapses below legibility at 390px */
    .ds-s2-eyebrow {
        font-size: 11px;
        padding: 5px 13px;
        margin-bottom: 16px;
    }

    /* H2 — reduce letter-spacing slightly, line-height already 1.12 */
    .ds-s2-h2 {
        font-size: clamp(28px, 8.5vw, 40px);
        line-height: 1.14;
        letter-spacing: -0.036em;
        margin-bottom: 14px;
    }

    /* Sub — left-align, full width */
    .ds-s2-sub {
        font-size: 15px;
        line-height: 1.72;
        color: rgba(255,255,255,.60);
        max-width: 100%;
        text-align: left;
        margin: 0;
    }

    /* Cards — stay 2×2, tighten padding and gap */
    .ds-s2-cards {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        margin-bottom: 16px;
    }

    .ds-s2-card {
        padding: 16px 14px;
        gap: 10px;
        border-radius: var(--ds-r-lg);
    }

    /* Card icon — fixed 36px on mobile, no vw shrinking */
    .ds-s2-card-ico {
        width: 36px;
        height: 36px;
        border-radius: 10px;
    }

    /* Mode label */
    .ds-s2-card-mode {
        font-size: 9.5px;
        letter-spacing: .12em;
        color: rgba(255,255,255,.55);
    }

    /* Card title */
    .ds-s2-card-title {
        font-size: 15px;
        line-height: 1.24;
        letter-spacing: -0.022em;
    }

    /* Card body — 12px is the absolute floor for readable body copy */
    .ds-s2-card-body {
        font-size: 13px;
        line-height: 1.65;
        color: rgba(255,255,255,.52);
    }

    .ds-s2-card.active .ds-s2-card-body {
        color: rgba(255,255,255,.68);
    }

    /* Detail panel */
    .ds-s2-detail {
        padding: 18px 16px;
        gap: 16px;
        border-radius: var(--ds-r-lg);
    }

    /* Price numeral — prominent on mobile */
    .ds-s2-detail-price-num {
        font-size: clamp(40px, 11vw, 60px);
    }

    /* Price label */
    .ds-s2-detail-price-label {
        font-size: 10px;
        color: rgba(255,255,255,.55);
        letter-spacing: .12em;
    }

    /* Headline */
    .ds-s2-detail-headline {
        font-size: 17px;
        line-height: 1.30;
    }

    /* Copy text */
    .ds-s2-detail-copy {
        font-size: 14px;
        line-height: 1.68;
        color: rgba(255,255,255,.62);
    }

    /* Chips inside detail */
    .ds-s2-detail-chips {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 8px;
        padding-top: 14px;
    }

    .ds-s2-detail-chip {
        font-size: 10px;
        padding: 6px 11px;
        border-radius: 8px;
    }
}

/* ④ Small phone — 360px–400px */
@media (max-width: 400px) {

    .ds-s2-inner {
        padding: 0 14px;
    }

    .ds-s2 {
        padding: 52px 0 44px;
    }

    /* H2 */
    .ds-s2-h2 {
        font-size: 26px;
        line-height: 1.16;
        letter-spacing: -0.030em;
    }

    /* Sub */
    .ds-s2-sub {
        font-size: 14px;
    }

    /* Cards — single column so each card has full breathing room */
    .ds-s2-cards {
        grid-template-columns: 1fr;
        gap: 10px;
        margin-bottom: 14px;
    }

    .ds-s2-card {
        padding: 16px;
        flex-direction: row;
        align-items: flex-start;
        gap: 14px;
    }

    /* Icon anchors left, text group fills remaining space */
    .ds-s2-card-ico {
        flex-shrink: 0;
        margin-top: 2px;
    }

    /* Text group wraps icon */
    .ds-s2-card-content {
        display: flex;
        flex-direction: column;
        gap: 6px;
        flex: 1;
        min-width: 0;
    }

    .ds-s2-card-title {
        font-size: 15px;
    }

    .ds-s2-card-body {
        font-size: 13px;
    }

    /* Detail panel */
    .ds-s2-detail-price-num {
        font-size: 38px;
    }

    .ds-s2-detail-headline {
        font-size: 16px;
    }

    .ds-s2-detail-copy {
        font-size: 13.5px;
    }

    .ds-s2-detail-chip {
        font-size: 10px;
        padding: 5px 10px;
    }
}

/* ⑤ Absolute minimum — 320px (old iPhones, some Android) */
@media (max-width: 320px) {

    .ds-s2-inner {
        padding: 0 12px;
    }

    .ds-s2-h2 {
        font-size: 24px;
    }

    .ds-s2-sub {
        font-size: 13.5px;
    }

    .ds-s2-card-title {
        font-size: 14px;
    }

    .ds-s2-card-body {
        font-size: 12.5px;
    }

    .ds-s2-detail-price-num {
        font-size: 34px;
        letter-spacing: -0.05em;
    }

    .ds-s2-detail-headline {
        font-size: 15px;
    }

    .ds-s2-detail-copy {
        font-size: 13px;
    }
}


















































/* ================================================================
   Qlynic · DoctorServices.aspx
   SECTION 5 — "A promo that starts, runs, and expires — without you."
   Strict sizing: every text, padding and margin correct
   at every viewport from 320px to 2560px.
   ================================================================ */

/* ── Section shell — white bg, warm subtle wash ── */
.ds-s5 {
    position: relative;
    background: var(--ds-white);
    border-top: 1px solid var(--ds-border);
    overflow: hidden;
    padding: clamp(72px,10vh,140px) 0 0;
}

    .ds-s5::before {
        content: '';
        position: absolute;
        inset: 0;
        pointer-events: none;
        z-index: 0;
        background: radial-gradient(ellipse 55% 45% at 75% 40%, rgba(217,119,6,.04) 0%, transparent 65%), radial-gradient(ellipse 45% 40% at 20% 70%, rgba(37,99,235,.025) 0%, transparent 60%);
        animation: ds-s5-wash 16s ease-in-out infinite alternate;
    }

@keyframes ds-s5-wash {
    0% {
        opacity: .5;
        transform: scale(1);
    }

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

    100% {
        opacity: .6;
        transform: scale(.98) translate(6px,-5px);
    }
}

/* ── Inner — two-column split ── */
.ds-s5-inner {
    position: relative;
    z-index: 1;
    max-width: 1380px;
    margin: 0 auto;
    padding: 0 clamp(20px,4.5vw,60px) clamp(72px,10vh,120px);
    display: grid;
    grid-template-columns: 42% 58%;
    gap: clamp(40px,5vw,80px);
    align-items: center;
}

/* ─────────────────────────────────────────────
   LEFT — Copy + truth rows
───────────────────────────────────────────── */
.ds-s5-copy {
    opacity: 0;
    transform: translateX(-20px);
    transition: opacity .65s ease, transform .65s cubic-bezier(.22,1,.36,1);
}

    .ds-s5-copy.is-vis {
        opacity: 1;
        transform: translateX(0);
    }

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

.ds-s5-eyebrow-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--ds-amber);
    box-shadow: 0 0 8px rgba(217,119,6,.6);
    animation: ds-dot-pulse 2s ease-in-out infinite;
}

/* H2 — 1.08 crushes wrapped lines on mid viewports; fixed to 1.14 */
.ds-s5-h2 {
    font-family: var(--ds-font);
    font-size: clamp(24px,3.4vw,54px);
    font-weight: 800;
    line-height: 1.14;
    letter-spacing: -0.042em;
    color: var(--ds-ink);
    margin-bottom: 18px;
}

    .ds-s5-h2 em {
        font-style: normal;
        background: linear-gradient(135deg,#d97706,#f59e0b);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
    }

.ds-s5-lead {
    font-size: clamp(14px,1.35vw,16px);
    color: var(--ds-stone);
    line-height: 1.80;
    max-width: 420px;
    margin-bottom: 30px;
    opacity: 0;
    filter: blur(4px);
    transition: opacity .6s ease .2s, filter .6s ease .2s;
}

    .ds-s5-lead.is-vis {
        opacity: 1;
        filter: blur(0);
    }

/* Truth rows */
.ds-s5-truths {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.ds-s5-truth {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: clamp(11px,1.5vw,16px) 0;
    border-bottom: 1px solid var(--ds-border);
    opacity: 0;
    transform: translateY(10px);
    transition: opacity .5s ease var(--tv,0ms), transform .5s cubic-bezier(.22,1,.36,1) var(--tv,0ms);
}

    .ds-s5-truth:last-child {
        border-bottom: none;
    }

    .ds-s5-truth:nth-child(1) {
        --tv: 0ms;
    }

    .ds-s5-truth:nth-child(2) {
        --tv: 90ms;
    }

    .ds-s5-truth:nth-child(3) {
        --tv: 180ms;
    }

    .ds-s5-truth.is-vis {
        opacity: 1;
        transform: translateY(0);
    }

.ds-s5-truth-ico {
    width: 30px;
    height: 30px;
    border-radius: 7px;
    flex-shrink: 0;
    margin-top: 1px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ds-s5-truth:nth-child(1) .ds-s5-truth-ico {
    background: var(--ds-amber-bg);
    border: 1px solid var(--ds-amber-bdr);
    color: var(--ds-amber);
}

.ds-s5-truth:nth-child(2) .ds-s5-truth-ico {
    background: var(--ds-emerald-bg);
    border: 1px solid var(--ds-emerald-bdr);
    color: var(--ds-emerald);
}

.ds-s5-truth:nth-child(3) .ds-s5-truth-ico {
    background: var(--ds-rose-bg);
    border: 1px solid var(--ds-rose-bdr);
    color: var(--ds-rose);
}

/* Truth heading — hard 13px was too small; set to responsive clamp */
.ds-s5-truth-h {
    font-size: clamp(13px,1.2vw,14.5px);
    font-weight: 800;
    color: var(--ds-ink);
    letter-spacing: -0.015em;
    margin-bottom: 3px;
    line-height: 1.28;
}

/* Truth body — 11.5px is the smallest readable body on a white bg */
.ds-s5-truth-p {
    font-size: clamp(12px,1.08vw,13px);
    color: var(--ds-stone);
    line-height: 1.65;
}

/* ─────────────────────────────────────────────
   RIGHT — 3D Flip Card Theatre
   Two faces. Fixed height. Zero layout shift.
───────────────────────────────────────────── */
.ds-s5-stage {
    opacity: 0;
    transform: translateX(20px);
    transition: opacity .65s ease .15s, transform .65s cubic-bezier(.22,1,.36,1) .15s;
    display: flex;
    flex-direction: column;
    gap: clamp(12px,1.8vw,22px);
}

    .ds-s5-stage.is-vis {
        opacity: 1;
        transform: translateX(0);
    }

/* Act indicator */
.ds-s5-act {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--ds-mono);
    font-size: clamp(8.5px,.82vw,10px);
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    /* ds-pebble (#a1a1aa) is fine on white bg */
    color: var(--ds-pebble);
}

.ds-s5-act-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ds-amber);
    box-shadow: 0 0 8px rgba(217,119,6,.6);
    animation: ds-dot-pulse 1.8s ease-in-out infinite;
}

/* Flip scene */
.ds-s5-scene {
    perspective: 1200px;
}

.ds-s5-card {
    position: relative;
    transform-style: preserve-3d;
    transition: transform .65s cubic-bezier(.4,0,.2,1);
    height: clamp(240px,30vw,340px);
}

    .ds-s5-card.flipped {
        transform: rotateY(-180deg);
    }

.ds-s5-face {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    border-radius: var(--ds-r-xl);
    border: 1.5px solid var(--ds-border-2);
    box-shadow: var(--ds-shadow-card);
    overflow: hidden;
    background: var(--ds-white);
}

.ds-s5-face--back {
    transform: rotateY(180deg);
}

/* ── Admin face ── */
.ds-s5-admin {
    padding: clamp(14px,2.2vw,24px);
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 11px;
}

.ds-s5-admin-head {
    display: flex;
    align-items: center;
    gap: 9px;
    padding-bottom: 11px;
    border-bottom: 1px solid var(--ds-border);
}

.ds-s5-admin-ico {
    width: 30px;
    height: 30px;
    border-radius: 7px;
    background: var(--ds-amber-bg);
    border: 1px solid var(--ds-amber-bdr);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ds-amber);
    flex-shrink: 0;
}

.ds-s5-admin-title {
    font-size: clamp(12px,1.2vw,13.5px);
    font-weight: 800;
    color: var(--ds-ink);
    letter-spacing: -0.015em;
    line-height: 1.25;
}

.ds-s5-admin-sub {
    font-family: var(--ds-mono);
    font-size: clamp(8px,.76vw,9px);
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ds-pebble);
    margin-top: 2px;
}

.ds-s5-fields {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

.ds-s5-field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.ds-s5-field {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.ds-s5-field-lbl {
    font-family: var(--ds-mono);
    font-size: clamp(7.5px,.72vw,8px);
    font-weight: 700;
    letter-spacing: .10em;
    text-transform: uppercase;
    color: var(--ds-pebble);
}

.ds-s5-field-val {
    height: 33px;
    padding: 0 10px;
    background: var(--ds-mist);
    border: 1.5px solid var(--ds-border-2);
    border-radius: var(--ds-r-md);
    font-family: var(--ds-mono);
    font-size: clamp(10.5px,1vw,11.5px);
    font-weight: 700;
    color: var(--ds-ink);
    display: flex;
    align-items: center;
    overflow: hidden;
    transition: border-color .25s ease, box-shadow .25s ease, background .25s ease;
}

    .ds-s5-field-val.active {
        border-color: var(--ds-amber-bdr);
        box-shadow: 0 0 0 3px rgba(217,119,6,.10);
        background: rgba(217,119,6,.025);
    }

    .ds-s5-field-val.done {
        border-color: var(--ds-emerald-bdr);
        background: var(--ds-emerald-bg);
        color: var(--ds-emerald);
    }

.ds-s5-cursor {
    display: inline-block;
    width: 1.5px;
    height: 13px;
    border-radius: 1px;
    background: var(--ds-amber);
    margin-left: 1px;
    vertical-align: middle;
    animation: ds-caret .8s ease-in-out infinite;
}

.ds-s5-save {
    height: 37px;
    border-radius: var(--ds-r-pill);
    background: var(--ds-grad);
    border: none;
    cursor: pointer;
    font-family: var(--ds-mono);
    font-size: clamp(8.5px,.82vw,9.5px);
    font-weight: 700;
    letter-spacing: .10em;
    text-transform: uppercase;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    box-shadow: 0 4px 14px rgba(37,99,235,.22);
    position: relative;
    overflow: hidden;
    transition: transform .2s ease;
}

    .ds-s5-save.rippling::after {
        content: '';
        position: absolute;
        inset: 0;
        background: rgba(255,255,255,.22);
        animation: ds-s5-ripple .5s ease forwards;
    }

@keyframes ds-s5-ripple {
    from {
        opacity: 1;
        transform: scale(.5);
    }

    to {
        opacity: 0;
        transform: scale(2);
    }
}

/* ── Booking face ── */
.ds-s5-booking {
    padding: clamp(14px,2.2vw,24px);
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 11px;
}

.ds-s5-promo-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 13px;
    border-radius: var(--ds-r-pill);
    font-family: var(--ds-mono);
    font-size: clamp(9px,.88vw,9.5px);
    font-weight: 800;
    letter-spacing: .10em;
    text-transform: uppercase;
    width: fit-content;
    position: relative;
    overflow: hidden;
    opacity: 0;
    transform: scale(0) rotate(-4deg);
    transform-origin: left center;
    transition: opacity .35s ease, transform .42s cubic-bezier(.34,1.56,.64,1);
}

    .ds-s5-promo-badge.pop {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }

.ds-s5-promo-badge--live {
    color: var(--ds-amber);
    background: var(--ds-amber-bg);
    border: 1.5px solid var(--ds-amber-bdr);
}

.ds-s5-promo-badge--expired {
    color: var(--ds-rose);
    background: var(--ds-rose-bg);
    border: 1.5px solid var(--ds-rose-bdr);
    animation: none !important;
}

/* Shimmer sweep on live badge */
.ds-s5-promo-badge--live::before {
    content: '';
    position: absolute;
    top: 0;
    left: -70%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);
    animation: ds-s5-shimmer 2.6s ease-in-out infinite 1s;
}

@keyframes ds-s5-shimmer {
    0% {
        left: -70%;
    }

    100% {
        left: 130%;
    }
}

.ds-s5-svc-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.ds-s5-svc-name {
    font-size: clamp(13px,1.6vw,17px);
    font-weight: 800;
    color: var(--ds-ink);
    letter-spacing: -0.022em;
    line-height: 1.25;
}

.ds-s5-svc-doc {
    font-family: var(--ds-mono);
    font-size: clamp(8px,.76vw,9px);
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ds-pebble);
    margin-top: 4px;
}

.ds-s5-price-pair {
    text-align: right;
    flex-shrink: 0;
}

.ds-s5-orig {
    font-family: var(--ds-mono);
    font-size: clamp(11px,1.1vw,13px);
    font-weight: 600;
    color: var(--ds-pebble);
    position: relative;
    display: inline-block;
    line-height: 1;
}

    .ds-s5-orig::after {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        height: 2px;
        background: var(--ds-rose);
        border-radius: 1px;
        width: 0%;
        transform: translateY(-50%);
        transition: width .4s cubic-bezier(.22,1,.36,1);
    }

    .ds-s5-orig.strike::after {
        width: 100%;
    }

.ds-s5-disc {
    font-family: var(--ds-font);
    font-size: clamp(24px,3.2vw,40px);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.048em;
    color: var(--ds-emerald);
    display: block;
    margin-top: 2px;
}

/* ── Countdown clock ── */
.ds-s5-clock {
    display: flex;
    align-items: center;
    gap: clamp(8px,1.2vw,14px);
    padding: clamp(10px,1.4vw,14px);
    background: var(--ds-mist);
    border: 1px solid var(--ds-border-2);
    border-radius: var(--ds-r-lg);
    justify-content: center;
    flex: 1;
}

.ds-s5-unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
}

.ds-s5-digit {
    font-family: var(--ds-mono);
    font-size: clamp(18px,2.6vw,34px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.04em;
    color: var(--ds-ink);
    min-width: 2ch;
    text-align: center;
}

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

@keyframes ds-s5-roll {
    0% {
        opacity: 0;
        transform: translateY(-50%);
    }

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

.ds-s5-unit-lbl {
    font-family: var(--ds-mono);
    font-size: clamp(7px,.68vw,8.5px);
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ds-pebble);
}

.ds-s5-sep {
    font-family: var(--ds-mono);
    font-size: clamp(14px,2vw,26px);
    font-weight: 800;
    color: var(--ds-dust);
    margin-bottom: 14px;
    animation: ds-s5-blink 1s ease-in-out infinite;
}

@keyframes ds-s5-blink {
    0%,49% {
        opacity: 1;
    }

    50%,100% {
        opacity: .2;
    }
}

/* FF / expired indicators */
.ds-s5-ff {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    font-family: var(--ds-mono);
    font-size: clamp(8.5px,.82vw,9px);
    font-weight: 700;
    letter-spacing: .10em;
    text-transform: uppercase;
    color: var(--ds-rose);
    opacity: 0;
    transform: translateY(5px);
    transition: opacity .3s ease, transform .3s ease;
}

    .ds-s5-ff.show {
        opacity: 1;
        transform: translateY(0);
    }

.ds-s5-expired-msg {
    text-align: center;
    font-family: var(--ds-mono);
    font-size: clamp(8.5px,.82vw,9px);
    font-weight: 700;
    letter-spacing: .10em;
    text-transform: uppercase;
    color: var(--ds-pebble);
    opacity: 0;
    transition: opacity .4s ease;
}

    .ds-s5-expired-msg.show {
        opacity: 1;
    }

/* ─────────────────────────────────────────────
   TIMELINE STRIP — full-width below the two columns
───────────────────────────────────────────── */
.ds-s5-timeline-wrap {
    background: var(--ds-snow);
    border-top: 1px solid var(--ds-border);
    padding: clamp(22px,3vw,40px) clamp(20px,4.5vw,60px);
    position: relative;
    z-index: 1;
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .6s ease, transform .6s ease;
}

    .ds-s5-timeline-wrap.is-vis {
        opacity: 1;
        transform: translateY(0);
    }

.ds-s5-tl-inner {
    max-width: 1380px;
    margin: 0 auto;
}

/* Timeline section label */
.ds-s5-tl-label {
    font-family: var(--ds-mono);
    font-size: clamp(9px,.88vw,9.5px);
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ds-pebble);
    text-align: center;
    margin-bottom: clamp(16px,2vw,24px);
}

.ds-s5-track-wrap {
    position: relative;
    padding: 0 0 34px;
}

.ds-s5-track {
    height: 3px;
    background: var(--ds-fog);
    border-radius: 2px;
    position: relative;
    overflow: visible;
}

.ds-s5-track-fill {
    height: 100%;
    border-radius: 2px;
    background: linear-gradient(90deg,var(--ds-emerald),var(--ds-amber),var(--ds-rose));
    width: 0%;
    transition: width 1.8s cubic-bezier(.22,1,.36,1);
}

/* Animated cursor dot on the track */
.ds-s5-cursor-dot {
    position: absolute;
    top: 50%;
    transform: translate(-50%,-50%);
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--ds-amber);
    box-shadow: 0 0 0 4px rgba(217,119,6,.18), 0 0 14px rgba(217,119,6,.45);
    left: 0%;
    transition: left 1.8s cubic-bezier(.22,1,.36,1);
    animation: ds-s5-dot-pulse 2s ease-in-out infinite;
}

@keyframes ds-s5-dot-pulse {
    0%,100% {
        box-shadow: 0 0 0 4px rgba(217,119,6,.18), 0 0 14px rgba(217,119,6,.45);
    }

    50% {
        box-shadow: 0 0 0 7px rgba(217,119,6,.10), 0 0 24px rgba(217,119,6,.65);
    }
}

.ds-s5-nodes {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
}

.ds-s5-node {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.ds-s5-node-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid var(--ds-fog);
    background: var(--ds-white);
    margin-top: -3.5px;
    transition: border-color .5s ease, background .5s ease, box-shadow .5s ease;
}

.ds-s5-node.passed .ds-s5-node-dot {
    border-color: var(--ds-emerald);
    background: var(--ds-emerald);
    box-shadow: 0 0 8px rgba(5,150,105,.3);
}

.ds-s5-node.current .ds-s5-node-dot {
    border-color: var(--ds-amber);
    background: var(--ds-amber);
    box-shadow: 0 0 12px rgba(217,119,6,.45);
    animation: ds-s5-dot-pulse 2s ease-in-out infinite;
}

/* Node labels — clamp(8px,.78vw,10px) collapses to ~3px at 390px */
.ds-s5-node-lbl {
    font-family: var(--ds-mono);
    font-size: clamp(8px,.78vw,10px);
    font-weight: 700;
    letter-spacing: .10em;
    text-transform: uppercase;
    color: var(--ds-pebble);
    margin-top: 14px;
    transition: color .5s ease;
    white-space: nowrap;
}

.ds-s5-node.passed .ds-s5-node-lbl {
    color: var(--ds-emerald);
}

.ds-s5-node.current .ds-s5-node-lbl {
    color: var(--ds-amber);
}

.ds-s5-node-sub {
    font-size: clamp(10px,.95vw,11.5px);
    color: var(--ds-stone);
    text-align: center;
    margin-top: 2px;
    transition: color .5s ease;
}

.ds-s5-node.passed .ds-s5-node-sub {
    color: var(--ds-emerald);
}

/* ══════════════════════════════════════════════════
   RESPONSIVE — 5 breakpoints, no gap in coverage
   ① 1100px — wide tablet: type starts squeezing
   ② 900px  — tablet: single column, card stays full
   ③ 640px  — mobile: full premium treatment
   ④ 400px  — small phone: floor sizes
   ⑤ 320px  — absolute minimum
══════════════════════════════════════════════════ */

/* ① Wide tablet */
@media (max-width: 1100px) {
    .ds-s5-inner {
        grid-template-columns: 45% 55%;
        gap: clamp(32px,4vw,56px);
    }
}

/* ② Tablet — single column, copy above stage */
@media (max-width: 900px) {
    .ds-s5-inner {
        grid-template-columns: 1fr;
        gap: 36px;
        padding-bottom: clamp(52px,8vw,72px);
    }

    .ds-s5-lead {
        max-width: 100%;
    }

    /* Card taller when full-width */
    .ds-s5-card {
        height: clamp(260px,48vw,340px);
    }

    .ds-s5-timeline-wrap {
        padding: 24px 20px 32px;
    }
}

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

    .ds-s5 {
        padding-top: 60px;
    }

    .ds-s5-inner {
        padding-left: 18px;
        padding-right: 18px;
        padding-bottom: 48px;
        gap: 32px;
    }

    /* Eyebrow — hard px on mobile */
    .ds-s5-eyebrow {
        font-size: 11px;
        padding: 5px 13px;
        margin-bottom: 16px;
    }

    /* H2 */
    .ds-s5-h2 {
        font-size: clamp(26px, 8vw, 38px);
        line-height: 1.15;
        letter-spacing: -0.036em;
        margin-bottom: 14px;
    }

    .ds-s5-lead {
        font-size: 15px;
        line-height: 1.72;
        margin-bottom: 24px;
    }

    /* Truth rows tighter */
    .ds-s5-truth {
        padding: 12px 0;
        gap: 10px;
    }

    .ds-s5-truth-ico {
        width: 28px;
        height: 28px;
        border-radius: 6px;
    }

    .ds-s5-truth-h {
        font-size: 14px;
    }

    .ds-s5-truth-p {
        font-size: 13px;
        line-height: 1.60;
    }

    /* Stage */
    .ds-s5-act {
        font-size: 10px;
        letter-spacing: .10em;
    }

    /* Flip card — full width, natural height */
    .ds-s5-card {
        height: clamp(230px,62vw,300px);
    }

    /* Admin face */
    .ds-s5-admin,
    .ds-s5-booking {
        padding: 14px 14px;
        gap: 10px;
    }

    .ds-s5-admin-head {
        padding-bottom: 10px;
    }

    .ds-s5-admin-title {
        font-size: 13px;
    }

    .ds-s5-admin-sub {
        font-size: 8px;
    }

    .ds-s5-field-row {
        gap: 7px;
    }

    .ds-s5-field-lbl {
        font-size: 7.5px;
    }

    .ds-s5-field-val {
        height: 30px;
        font-size: 11px;
        padding: 0 9px;
    }

    .ds-s5-save {
        height: 34px;
        font-size: 9px;
    }

    /* Booking face */
    .ds-s5-svc-name {
        font-size: 14px;
    }

    .ds-s5-svc-doc {
        font-size: 8.5px;
    }

    .ds-s5-orig {
        font-size: 11px;
    }

    .ds-s5-disc {
        font-size: clamp(22px, 7vw, 32px);
    }

    /* Countdown clock */
    .ds-s5-clock {
        gap: 10px;
        padding: 10px 8px;
    }

    .ds-s5-digit {
        font-size: clamp(18px, 6vw, 26px);
    }

    .ds-s5-unit-lbl {
        font-size: 7px;
        letter-spacing: .10em;
    }

    .ds-s5-sep {
        font-size: clamp(12px, 4vw, 20px);
    }

    /* Timeline */
    .ds-s5-timeline-wrap {
        padding: 20px 18px 28px;
    }

    .ds-s5-tl-label {
        font-size: 9px;
    }

    /* Node labels — hard px to prevent vw collapse */
    .ds-s5-node-lbl {
        font-size: 8.5px;
        letter-spacing: .07em;
    }

    /* Sub text hides on mobile — too cramped */
    .ds-s5-node-sub {
        display: none;
    }
}

/* ④ Small phone — 360px–400px */
@media (max-width: 400px) {

    .ds-s5-inner {
        padding-left: 14px;
        padding-right: 14px;
        padding-bottom: 40px;
    }

    .ds-s5-h2 {
        font-size: 24px;
        line-height: 1.17;
    }

    .ds-s5-lead {
        font-size: 14px;
    }

    .ds-s5-truth-h {
        font-size: 13.5px;
    }

    .ds-s5-truth-p {
        font-size: 12.5px;
    }

    .ds-s5-card {
        height: clamp(210px,60vw,270px);
    }

    .ds-s5-admin-title {
        font-size: 12.5px;
    }

    .ds-s5-field-val {
        height: 28px;
        font-size: 10.5px;
    }

    .ds-s5-digit {
        font-size: 18px;
    }

    .ds-s5-disc {
        font-size: 22px;
    }

    .ds-s5-node-lbl {
        font-size: 7.5px;
    }

    .ds-s5-timeline-wrap {
        padding: 16px 14px 24px;
    }
}

/* ⑤ Absolute minimum — 320px */
@media (max-width: 320px) {

    .ds-s5-inner {
        padding-left: 12px;
        padding-right: 12px;
    }

    .ds-s5-h2 {
        font-size: 22px;
    }

    .ds-s5-lead {
        font-size: 13.5px;
    }

    .ds-s5-truth-h {
        font-size: 13px;
    }

    .ds-s5-truth-p {
        font-size: 12px;
    }

    .ds-s5-card {
        height: 200px;
    }

    .ds-s5-admin,
    .ds-s5-booking {
        padding: 12px;
        gap: 8px;
    }

    .ds-s5-field-val {
        height: 26px;
        font-size: 10px;
    }

    .ds-s5-digit {
        font-size: 16px;
    }

    .ds-s5-disc {
        font-size: 20px;
    }

    .ds-s5-svc-name {
        font-size: 13px;
    }

    .ds-s5-node-lbl {
        font-size: 7px;
    }
}



































/* ================================================================
   Qlynic · DoctorServices.aspx
   SECTION 3 — "The minute your service takes is the slot your patient gets."
   Strict sizing: every text, padding and margin correct
   at every viewport from 320px to 2560px.
   ================================================================ */

/* ── Purple palette tokens (local to S3) ── */
:root {
    --s3-bg: #0d0a1a;
    --s3-bg-2: #130f24;
    --s3-purple: #7c3aed;
    --s3-purple-2: #8b5cf6;
    --s3-purple-3: #a78bfa;
    --s3-purple-4: #c4b5fd;
    --s3-violet: #6d28d9;
    --s3-faint: rgba(139,92,246,.08);
    --s3-faint-bdr: rgba(139,92,246,.18);
    --s3-faint-2: rgba(139,92,246,.14);
}

/* ── Section shell ── */
.ds-s3 {
    position: relative;
    background: var(--s3-bg);
    overflow: hidden;
    padding: clamp(72px,10vh,140px) 0 clamp(64px,9vh,120px);
}

    /* Aurora — violet/indigo */
    .ds-s3::before {
        content: '';
        position: absolute;
        inset: 0;
        pointer-events: none;
        z-index: 0;
        background: radial-gradient(ellipse 70% 60% at 15% 50%, rgba(109,40,217,.14) 0%, transparent 65%), radial-gradient(ellipse 60% 55% at 85% 30%, rgba(124,58,237,.10) 0%, transparent 60%), radial-gradient(ellipse 45% 45% at 50% 100%,rgba(139,92,246,.07) 0%, transparent 60%);
        animation: ds-s3-aurora 20s ease-in-out infinite alternate;
    }

@keyframes ds-s3-aurora {
    0% {
        opacity: .6;
        transform: scale(1) translate(0,0);
    }

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

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

/* Dot grain */
.ds-s3::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background-image: radial-gradient(rgba(167,139,250,.025) 1px, transparent 1px);
    background-size: 28px 28px;
    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%);
}

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

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

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

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

.ds-s3-eyebrow-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--s3-purple-3);
    box-shadow: 0 0 8px rgba(167,139,250,.8);
    animation: ds-dot-pulse 2s ease-in-out infinite;
}

/* H2 — original 1.06 crushed wrapped lines on viewports < 960px */
.ds-s3-h2 {
    font-family: var(--ds-font);
    font-size: clamp(26px,3.8vw,62px);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -0.042em;
    color: rgba(255,255,255,.95);
    margin-bottom: 18px;
}

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

/* Sub — original .35 near-invisible on dark; lifted to .56 */
.ds-s3-sub {
    font-size: clamp(14px,1.38vw,16.5px);
    color: rgba(255,255,255,.56);
    line-height: 1.80;
    max-width: 540px;
    margin: 0 auto;
}

/* ─────────────────────────────────────────────
   FULL-BLEED SPLIT CARD
   Left 50%: photo    Right 50%: tab interface
───────────────────────────────────────────── */
.ds-s3-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    background: var(--s3-bg-2);
    border: 1px solid rgba(139,92,246,.14);
    border-radius: var(--ds-r-2xl);
    overflow: hidden;
    box-shadow: 0 0 0 1px rgba(139,92,246,.06), 0 40px 100px rgba(0,0,0,.5);
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .7s ease .1s, transform .7s cubic-bezier(.22,1,.36,1) .1s;
}

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

/* ── Image column ── */
.ds-s3-img-col {
    position: relative;
    overflow: hidden;
    min-height: clamp(300px,42vw,580px);
}

.ds-s3-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 15%;
    display: block;
    transform: scale(1.06);
    opacity: 0;
    transition: transform 2.2s cubic-bezier(.22,1,.36,1), opacity 1s ease;
    will-change: transform, opacity;
}

    .ds-s3-img.is-vis {
        transform: scale(1);
        opacity: 1;
    }

/* Gradient — right side fades into card bg */
.ds-s3-img-col::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
    background: linear-gradient(to right, transparent 55%, var(--s3-bg-2) 100%), linear-gradient(to top, rgba(13,10,26,.6) 0%, transparent 35%);
}

/* Floating label on image */
.ds-s3-img-tag {
    position: absolute;
    bottom: clamp(14px,2.5vw,28px);
    left: clamp(14px,2.5vw,28px);
    z-index: 3;
    pointer-events: none;
    background: rgba(13,10,26,.80);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(139,92,246,.28);
    border-radius: var(--ds-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;
}

.ds-s3-split.is-vis .ds-s3-img-tag {
    opacity: 1;
    transform: translateY(0);
}

.ds-s3-img-tag-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--s3-purple-3);
    box-shadow: 0 0 10px rgba(167,139,250,.8);
    animation: ds-dot-pulse 1.8s ease-in-out infinite;
}

.ds-s3-img-tag-text {
    font-family: var(--ds-mono);
    font-size: clamp(9px,.88vw,11px);
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: rgba(196,181,253,.90);
}

/* ── Content column ── */
.ds-s3-content {
    display: flex;
    flex-direction: column;
    padding: clamp(24px,3.5vw,44px) clamp(20px,3vw,40px);
    gap: 0;
}

/* ── Tab row ── */
.ds-s3-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid rgba(139,92,246,.12);
    margin-bottom: clamp(18px,2.5vw,30px);
    flex-shrink: 0;
}

.ds-s3-tab {
    flex: 1;
    padding: clamp(10px,1.5vw,16px) clamp(8px,1.2vw,14px);
    border: none;
    background: transparent;
    cursor: pointer;
    font-family: inherit;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    position: relative;
    transition: background .2s ease;
}

    .ds-s3-tab:hover {
        background: rgba(139,92,246,.04);
    }

    .ds-s3-tab::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 2px;
        border-radius: 1px;
        background: var(--s3-purple-2);
        transform: scaleX(0);
        transition: transform .38s cubic-bezier(.22,1,.36,1);
        box-shadow: 0 0 8px rgba(139,92,246,.6);
    }

    .ds-s3-tab.active::after {
        transform: scaleX(1);
    }

/* Duration numeral — original .28 too dim; lifted to .46 */
.ds-s3-tab-dur {
    font-family: var(--ds-mono);
    font-size: clamp(14px,1.8vw,22px);
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1;
    color: rgba(255,255,255,.46);
    transition: color .3s ease;
}

.ds-s3-tab.active .ds-s3-tab-dur {
    color: var(--s3-purple-3);
}

/* Slots sub-label — original .20 invisible; lifted to .44 / .64 active */
.ds-s3-tab-slots {
    font-family: var(--ds-mono);
    font-size: clamp(8px,.78vw,9.5px);
    font-weight: 700;
    letter-spacing: .10em;
    text-transform: uppercase;
    color: rgba(255,255,255,.44);
    transition: color .3s ease;
}

.ds-s3-tab.active .ds-s3-tab-slots {
    color: rgba(196,181,253,.64);
}

/* ─────────────────────────────────────────────
   PANELS
   Desktop: fixed-height absolute, opacity switch.
   Mobile: natural height, display:none toggle.
   (Fixed-height resolves to ~120px at 390px — unusable.)
───────────────────────────────────────────── */
.ds-s3-panels {
    position: relative;
    flex: 1;
    height: clamp(240px,32vw,380px);
    overflow: hidden;
}

.ds-s3-panel {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: clamp(90px,22%,160px) 1fr;
    gap: clamp(14px,2.2vw,28px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .38s ease;
}

    .ds-s3-panel.active {
        opacity: 1;
        pointer-events: auto;
    }

/* ── Left stat ── */
.ds-s3-stat {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
}

.ds-s3-big {
    font-family: var(--ds-font);
    font-size: clamp(52px,8vw,100px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.065em;
    color: var(--s3-purple-3);
}

/* Big label — original .25 invisible; lifted to .50 */
.ds-s3-big-label {
    font-family: var(--ds-mono);
    font-size: clamp(8px,.78vw,9.5px);
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(255,255,255,.50);
}

/* Formula — original .45 lifted to .62; em at .84 */
.ds-s3-formula {
    font-family: var(--ds-mono);
    font-size: clamp(9.5px,.92vw,11.5px);
    font-weight: 600;
    color: rgba(196,181,253,.62);
    letter-spacing: .02em;
    margin-top: 4px;
}

    .ds-s3-formula em {
        font-style: normal;
        color: rgba(196,181,253,.84);
    }

/* ── Right: chip grid ── */
.ds-s3-chips-col {
    display: flex;
    flex-direction: column;
    gap: clamp(8px,1.1vw,12px);
    overflow: hidden;
}

/* Chips label — original .20 invisible; lifted to .48 */
.ds-s3-chips-label {
    font-family: var(--ds-mono);
    font-size: clamp(8px,.78vw,9.5px);
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(255,255,255,.48);
    flex-shrink: 0;
}

.ds-s3-chip-grid {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(4px,.55vw,6px);
    align-content: flex-start;
    flex: 1;
    overflow: hidden;
}

.ds-s3-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: clamp(4px,.6vw,7px) clamp(7px,1vw,11px);
    background: var(--s3-faint);
    border: 1px solid var(--s3-faint-bdr);
    border-radius: 7px;
    opacity: 0;
    transform: translateY(5px) scale(.96);
    transition: opacity .32s ease var(--cs,0ms), transform .32s cubic-bezier(.22,1,.36,1) var(--cs,0ms);
}

.ds-s3-panel.active .ds-s3-chip {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.ds-s3-chip-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--s3-purple-3);
    flex-shrink: 0;
    box-shadow: 0 0 5px rgba(167,139,250,.5);
}

.ds-s3-chip-time {
    font-family: var(--ds-mono);
    font-size: clamp(8.5px,.82vw,10.5px);
    font-weight: 700;
    letter-spacing: .03em;
    color: rgba(196,181,253,.82);
}

/* ─────────────────────────────────────────────
   PROOF STRIP
───────────────────────────────────────────── */
.ds-s3-proof {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 0;
    border-top: 1px solid rgba(139,92,246,.10);
    margin-top: clamp(14px,2vw,24px);
    flex-shrink: 0;
}

.ds-s3-proof-cell {
    padding: clamp(12px,1.8vw,20px) clamp(10px,1.4vw,16px);
    border-right: 1px solid rgba(139,92,246,.10);
    display: flex;
    flex-direction: column;
    gap: 5px;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity .5s ease var(--pd,0ms), transform .5s cubic-bezier(.22,1,.36,1) var(--pd,0ms);
}

    .ds-s3-proof-cell:last-child {
        border-right: none;
    }

    .ds-s3-proof-cell:nth-child(1) {
        --pd: 0ms;
    }

    .ds-s3-proof-cell:nth-child(2) {
        --pd: 80ms;
    }

    .ds-s3-proof-cell:nth-child(3) {
        --pd: 160ms;
    }

    .ds-s3-proof-cell.is-vis {
        opacity: 1;
        transform: translateY(0);
    }

.ds-s3-proof-num {
    font-family: var(--ds-font);
    font-size: clamp(24px,3.2vw,44px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.05em;
    color: var(--s3-purple-3);
}

.ds-s3-proof-cell:nth-child(2) .ds-s3-proof-num {
    color: #818cf8;
}

.ds-s3-proof-cell:nth-child(3) .ds-s3-proof-num {
    color: #67e8f9;
}

/* Equation — original .22 invisible; lifted to .46, .d at .62 */
.ds-s3-proof-eq {
    font-family: var(--ds-mono);
    font-size: clamp(8px,.76vw,9.5px);
    font-weight: 600;
    color: rgba(255,255,255,.46);
    letter-spacing: .04em;
}

    .ds-s3-proof-eq .d {
        color: rgba(255,255,255,.62);
    }

/* Proof label — original .18 invisible; lifted to .42 */
.ds-s3-proof-label {
    font-family: var(--ds-mono);
    font-size: clamp(7.5px,.72vw,9px);
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(255,255,255,.42);
}

/* ══════════════════════════════════════════════════
   RESPONSIVE — 5 breakpoints, 320px to 2560px
   ① 1100px — wide tablet
   ② 860px  — tablet: stack image above content
   ③ 640px  — mobile: full premium treatment
   ④ 400px  — small phone: floor sizes
   ⑤ 320px  — absolute minimum
══════════════════════════════════════════════════ */

/* ① Wide tablet */
@media (max-width: 1100px) {
    .ds-s3-tab-dur {
        font-size: clamp(13px,1.6vw,18px);
    }
}

/* ② Tablet — stack, image on top */
@media (max-width: 860px) {

    .ds-s3-split {
        grid-template-columns: 1fr;
        border-radius: var(--ds-r-xl);
    }

    .ds-s3-img-col {
        min-height: clamp(220px,52vw,340px);
    }

        .ds-s3-img-col::after {
            background: linear-gradient(to top, var(--s3-bg-2) 0%, transparent 50%), linear-gradient(to bottom, transparent 50%, var(--s3-bg-2) 100%);
        }

    .ds-s3-panels {
        height: clamp(260px,60vw,360px);
    }
}

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

    .ds-s3 {
        padding: 60px 0 52px;
    }

    .ds-s3-inner {
        padding: 0 18px;
    }

    .ds-s3-head {
        max-width: 100%;
        text-align: left;
        margin-bottom: 32px;
    }

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

    .ds-s3-h2 {
        font-size: clamp(26px, 8vw, 38px);
        line-height: 1.15;
        letter-spacing: -0.036em;
        margin-bottom: 14px;
    }

    .ds-s3-sub {
        font-size: 15px;
        line-height: 1.72;
        color: rgba(255,255,255,.62);
        max-width: 100%;
        text-align: left;
        margin: 0;
    }

    .ds-s3-split {
        border-radius: var(--ds-r-lg);
    }

    .ds-s3-img-col {
        min-height: clamp(200px,58vw,300px);
    }

    .ds-s3-img-tag {
        padding: 8px 13px;
        gap: 7px;
    }

    .ds-s3-img-tag-text {
        font-size: 10px;
    }

    .ds-s3-content {
        padding: 20px 16px 18px;
    }

    .ds-s3-tabs {
        margin-bottom: 16px;
    }

    .ds-s3-tab {
        padding: 10px 6px;
    }

    .ds-s3-tab-dur {
        font-size: 16px;
    }

    .ds-s3-tab-slots {
        font-size: 9px;
        letter-spacing: .08em;
        color: rgba(255,255,255,.52);
    }

    .ds-s3-tab.active .ds-s3-tab-slots {
        color: rgba(196,181,253,.72);
    }

    /* ── Mobile panel fix: switch from fixed-height absolute to display:none toggle ── */
    .ds-s3-panels {
        position: static;
        height: auto;
        overflow: visible;
    }

    .ds-s3-panel {
        position: static;
        display: none;
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
        gap: 16px;
        opacity: 1;
        pointer-events: auto;
    }

        .ds-s3-panel.active {
            display: grid;
        }

    /* Stat: horizontal layout — number left, text right */
    .ds-s3-stat {
        flex-direction: row;
        align-items: center;
        gap: 16px;
    }

    .ds-s3-big {
        font-size: 52px;
        letter-spacing: -0.055em;
        flex-shrink: 0;
    }

    .ds-s3-big-label {
        font-size: 9px;
        letter-spacing: .12em;
        color: rgba(255,255,255,.56);
    }

    .ds-s3-formula {
        font-size: 11px;
        line-height: 1.6;
    }

    .ds-s3-chips-col {
        gap: 8px;
    }

    .ds-s3-chips-label {
        font-size: 9px;
        letter-spacing: .12em;
        color: rgba(255,255,255,.54);
    }

    .ds-s3-chip {
        padding: 5px 10px;
    }

    .ds-s3-chip-time {
        font-size: 10px;
    }

    .ds-s3-proof {
        margin-top: 16px;
    }

    .ds-s3-proof-cell {
        padding: 12px 10px;
    }

    .ds-s3-proof-num {
        font-size: clamp(20px, 6vw, 30px);
        letter-spacing: -0.04em;
    }

    .ds-s3-proof-eq {
        font-size: 9px;
        color: rgba(255,255,255,.52);
    }

    .ds-s3-proof-label {
        font-size: 8.5px;
        color: rgba(255,255,255,.46);
        letter-spacing: .10em;
    }
}

/* ④ Small phone — 360px–400px */
@media (max-width: 400px) {

    .ds-s3-inner {
        padding: 0 14px;
    }

    .ds-s3 {
        padding: 52px 0 44px;
    }

    .ds-s3-h2 {
        font-size: 24px;
        line-height: 1.17;
    }

    .ds-s3-sub {
        font-size: 14px;
    }

    .ds-s3-img-col {
        min-height: 180px;
    }

    .ds-s3-content {
        padding: 16px 14px 14px;
    }

    .ds-s3-tab-dur {
        font-size: 15px;
    }

    .ds-s3-tab-slots {
        font-size: 8.5px;
    }

    .ds-s3-big {
        font-size: 44px;
    }

    .ds-s3-formula {
        font-size: 10.5px;
    }

    .ds-s3-proof-num {
        font-size: 19px;
    }

    .ds-s3-proof-eq {
        font-size: 8.5px;
    }

    .ds-s3-proof-label {
        font-size: 8px;
    }
}

/* ⑤ Absolute minimum — 320px */
@media (max-width: 320px) {

    .ds-s3-inner {
        padding: 0 12px;
    }

    .ds-s3-h2 {
        font-size: 22px;
    }

    .ds-s3-sub {
        font-size: 13.5px;
    }

    .ds-s3-content {
        padding: 14px 12px;
    }

    .ds-s3-tab-dur {
        font-size: 14px;
    }

    .ds-s3-tab-slots {
        font-size: 8px;
    }

    .ds-s3-big {
        font-size: 38px;
        letter-spacing: -0.05em;
    }

    .ds-s3-formula {
        font-size: 10px;
    }

    .ds-s3-chip-time {
        font-size: 9.5px;
    }

    .ds-s3-proof-num {
        font-size: 17px;
    }

    .ds-s3-proof-eq {
        font-size: 8px;
    }

    .ds-s3-proof-label {
        font-size: 7.5px;
    }
}



































/* ================================================================
   Qlynic · DoctorServices.aspx
   SECTION 4 — "The same doctor. A different price at a different branch."
   Strict sizing: every text, padding and margin correct
   at every viewport from 320px to 2560px.
   ================================================================ */

/* ── Section shell ── */
.ds-s4 {
    position: relative;
    background: #06070b;
    overflow: hidden;
    padding: clamp(72px,10vh,140px) 0 clamp(64px,9vh,120px);
}

    /* Ambient — emerald/blue */
    .ds-s4::before {
        content: '';
        position: absolute;
        inset: 0;
        pointer-events: none;
        z-index: 0;
        background: radial-gradient(ellipse 55% 50% at 10% 60%, rgba(5,150,105,.09) 0%, transparent 60%), radial-gradient(ellipse 50% 45% at 90% 30%, rgba(37,99,235,.07) 0%, transparent 60%), radial-gradient(ellipse 40% 40% at 50% 0%, rgba(16,185,129,.04) 0%, transparent 55%);
        animation: ds-s4-aurora 16s ease-in-out infinite alternate;
    }

@keyframes ds-s4-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);
    }
}

/* Dot grain */
.ds-s4::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background-image: radial-gradient(rgba(255,255,255,.022) 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%);
}

/* ── Inner wrapper ── */
.ds-s4-inner {
    position: relative;
    z-index: 1;
    max-width: 1380px;
    margin: 0 auto;
    padding: 0 clamp(20px,4.5vw,60px);
}

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

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

.ds-s4-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: var(--ds-mono);
    font-size: clamp(9px,.85vw,10.5px);
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(52,211,153,.90);
    background: rgba(16,185,129,.08);
    border: 1px solid rgba(16,185,129,.20);
    border-radius: var(--ds-r-pill);
    padding: 5px 14px;
    margin-bottom: 22px;
}

.ds-s4-eyebrow-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #34d399;
    box-shadow: 0 0 8px rgba(52,211,153,.7);
    animation: ds-dot-pulse 2s ease-in-out infinite;
}

/* H2 — 1.06 crushes wrapped lines on viewports < 900px */
.ds-s4-h2 {
    font-family: var(--ds-font);
    font-size: clamp(26px,3.8vw,62px);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -0.042em;
    color: rgba(255,255,255,.95);
    margin-bottom: 18px;
}

    .ds-s4-h2 em {
        font-style: normal;
        background: linear-gradient(135deg,#34d399,#60a5fa);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
    }

/* Sub — .32 near-invisible on dark; lifted to .54 */
.ds-s4-sub {
    font-size: clamp(14px,1.38vw,16.5px);
    color: rgba(255,255,255,.54);
    line-height: 1.80;
    max-width: 540px;
    margin: 0 auto;
}

/* ─────────────────────────────────────────────
   MATRIX PANEL WRAPPER
   On mobile the table scrolls horizontally —
   the cleanest solution for a 4-column data grid.
───────────────────────────────────────────── */
.ds-s4-matrix-wrap {
    background: rgba(255,255,255,.025);
    border: 1px solid rgba(255,255,255,.07);
    border-radius: var(--ds-r-2xl);
    overflow: hidden;
    box-shadow: 0 0 0 1px rgba(16,185,129,.04), 0 40px 100px rgba(0,0,0,.45);
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .7s ease .1s, transform .7s cubic-bezier(.22,1,.36,1) .1s;
    margin-bottom: clamp(20px,3vw,36px);
}

    .ds-s4-matrix-wrap.is-vis {
        opacity: 1;
        transform: translateY(0);
    }

/* ── Chrome bar ── */
.ds-s4-chrome {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 11px 20px;
    border-bottom: 1px solid rgba(255,255,255,.055);
    background: rgba(255,255,255,.014);
    /* Never scroll with the table */
    position: sticky;
    top: 0;
    z-index: 2;
}

.ds-s4-chrome-dots {
    display: flex;
    gap: 5px;
}

    .ds-s4-chrome-dots span {
        width: 9px;
        height: 9px;
        border-radius: 50%;
    }

        .ds-s4-chrome-dots span:nth-child(1) {
            background: rgba(239,68,68,.4);
        }

        .ds-s4-chrome-dots span:nth-child(2) {
            background: rgba(234,179,8,.4);
        }

        .ds-s4-chrome-dots span:nth-child(3) {
            background: rgba(34,197,94,.4);
        }

/* Chrome title — .22 ghost; lifted to .46 */
.ds-s4-chrome-title {
    font-family: var(--ds-mono);
    font-size: 10px;
    font-weight: 600;
    color: rgba(255,255,255,.46);
    flex: 1;
    letter-spacing: .04em;
}

/* Live badge — .6 borderline; lifted to .78 */
.ds-s4-chrome-live {
    display: flex;
    align-items: center;
    gap: 5px;
    font-family: var(--ds-mono);
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(52,211,153,.78);
}

.ds-s4-chrome-live-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #34d399;
    box-shadow: 0 0 8px rgba(52,211,153,.7);
    animation: ds-dot-pulse 1.6s ease-in-out infinite;
}

/* ── Scrollable table container ──
   Wraps only the grid; chrome stays pinned above. */
.ds-s4-table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* Subtle scroll hint shadow on right edge */
    background: linear-gradient(to right, transparent calc(100% - 32px), rgba(0,0,0,.18)), linear-gradient(to left, transparent calc(100% - 32px), rgba(0,0,0,.18));
    background-attachment: local, local;
}

/* ── Matrix table — CSS grid ── */
.ds-s4-table {
    display: grid;
    /* Row label + 3 data columns */
    grid-template-columns: clamp(130px,18vw,210px) repeat(3,1fr);
    /* Minimum width ensures the table never squashes below legibility */
    min-width: 520px;
}

/* ── Column headers ── */
.ds-s4-col-spacer {
    padding: clamp(11px,1.6vw,18px) clamp(12px,2vw,24px);
    border-bottom: 1px solid rgba(255,255,255,.06);
    border-right: 1px solid rgba(255,255,255,.06);
    background: rgba(255,255,255,.010);
}

.ds-s4-col-hd {
    padding: clamp(11px,1.6vw,18px) clamp(10px,1.4vw,18px);
    border-bottom: 1px solid rgba(255,255,255,.06);
    border-right: 1px solid rgba(255,255,255,.06);
    background: rgba(255,255,255,.010);
    display: flex;
    flex-direction: column;
    gap: 5px;
    position: relative;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-12px);
    transition: opacity .45s ease var(--ch,0ms), transform .45s cubic-bezier(.22,1,.36,1) var(--ch,0ms);
}

    .ds-s4-col-hd:last-child {
        border-right: none;
    }

    .ds-s4-col-hd.is-vis {
        opacity: 1;
        transform: translateY(0);
    }

    .ds-s4-col-hd:nth-child(2) {
        --ch: 0ms;
    }

    .ds-s4-col-hd:nth-child(3) {
        --ch: 70ms;
    }

    .ds-s4-col-hd:nth-child(4) {
        --ch: 140ms;
    }

    /* Top accent line per column */
    .ds-s4-col-hd[data-col="base"]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 2px;
        background: rgba(255,255,255,.14);
    }

    .ds-s4-col-hd[data-col="branch-a"]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 2px;
        background: linear-gradient(90deg,#3b82f6,#8b5cf6);
    }

    .ds-s4-col-hd[data-col="branch-b"]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 2px;
        background: linear-gradient(90deg,#10b981,#3b82f6);
    }

/* Column type label — .28 base ghost; all lifted */
.ds-s4-col-type {
    font-family: var(--ds-mono);
    font-size: clamp(7.5px,.72vw,9px);
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.ds-s4-col-hd[data-col="base"] .ds-s4-col-type {
    color: rgba(255,255,255,.48);
}

.ds-s4-col-hd[data-col="branch-a"] .ds-s4-col-type {
    color: rgba(96,165,250,.88);
}

.ds-s4-col-hd[data-col="branch-b"] .ds-s4-col-type {
    color: rgba(52,211,153,.88);
}

/* Column name */
.ds-s4-col-name {
    font-family: var(--ds-font);
    font-size: clamp(11px,1.25vw,15px);
    font-weight: 800;
    letter-spacing: -0.018em;
    color: rgba(255,255,255,.84);
    line-height: 1.25;
}

/* Column meta — .26 ghost; lifted to .50 */
.ds-s4-col-meta {
    font-family: var(--ds-mono);
    font-size: clamp(8px,.76vw,9.5px);
    font-weight: 600;
    color: rgba(255,255,255,.50);
    letter-spacing: .04em;
}

/* ── Row label ── */
.ds-s4-row-lbl {
    padding: clamp(12px,1.8vw,20px) clamp(12px,2vw,24px);
    border-bottom: 1px solid rgba(255,255,255,.05);
    border-right: 1px solid rgba(255,255,255,.06);
    display: flex;
    align-items: center;
    gap: 10px;
    opacity: 0;
    transform: translateX(-10px);
    transition: opacity .45s ease var(--rl,0ms), transform .45s cubic-bezier(.22,1,.36,1) var(--rl,0ms), background .2s ease;
    position: relative;
}

    .ds-s4-row-lbl.is-vis {
        opacity: 1;
        transform: translateX(0);
    }

    /* Active row indicator bar */
    .ds-s4-row-lbl::before {
        content: '';
        position: absolute;
        left: 0;
        top: 15%;
        bottom: 15%;
        width: 3px;
        border-radius: 2px;
        background: linear-gradient(to bottom,#3b82f6,#10b981);
        opacity: 0;
        transform: scaleY(0);
        transform-origin: top;
        transition: opacity .25s ease, transform .3s cubic-bezier(.22,1,.36,1);
    }

    .ds-s4-row-lbl.active-row {
        background: rgba(255,255,255,.022);
    }

        .ds-s4-row-lbl.active-row::before {
            opacity: 1;
            transform: scaleY(1);
        }

.ds-s4-row-ico {
    width: 28px;
    height: 28px;
    border-radius: 7px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.055);
    border: 1px solid rgba(255,255,255,.08);
    color: rgba(255,255,255,.52);
}

/* Row service name */
.ds-s4-row-name {
    font-family: var(--ds-font);
    font-size: clamp(11px,1.15vw,13.5px);
    font-weight: 700;
    color: rgba(255,255,255,.72);
    letter-spacing: -0.014em;
    line-height: 1.25;
}

/* Row duration — .28 ghost; lifted to .50 */
.ds-s4-row-dur {
    font-family: var(--ds-mono);
    font-size: clamp(8px,.76vw,9.5px);
    font-weight: 600;
    color: rgba(255,255,255,.50);
    margin-top: 2px;
}

/* ── Price cell ── */
.ds-s4-cell {
    padding: clamp(12px,1.8vw,20px) clamp(10px,1.4vw,18px);
    border-bottom: 1px solid rgba(255,255,255,.05);
    border-right: 1px solid rgba(255,255,255,.05);
    display: flex;
    flex-direction: column;
    gap: 6px;
    opacity: 0;
    transform: scale(.94);
    transition: opacity .4s ease var(--cd,0ms), transform .4s cubic-bezier(.22,1,.36,1) var(--cd,0ms), background .2s ease;
    position: relative;
    overflow: hidden;
}

    .ds-s4-cell:last-child {
        border-right: none;
    }

    .ds-s4-cell.is-vis {
        opacity: 1;
        transform: scale(1);
    }

    .ds-s4-cell.active-row {
        background: rgba(255,255,255,.018);
    }

    .ds-s4-cell.override {
        background: rgba(245,158,11,.04);
    }

        .ds-s4-cell.override.active-row {
            background: rgba(245,158,11,.07);
        }

        .ds-s4-cell.override.pulse-on {
            animation: ds-s4-override-pulse 2s ease-in-out;
        }

@keyframes ds-s4-override-pulse {
    0%,100% {
        background: rgba(245,158,11,.04);
    }

    40% {
        background: rgba(245,158,11,.13);
        box-shadow: inset 0 0 0 1px rgba(245,158,11,.25);
    }
}

/* Price number */
.ds-s4-price {
    font-family: var(--ds-font);
    font-size: clamp(18px,2.4vw,32px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.044em;
    display: flex;
    align-items: flex-start;
    gap: 2px;
}

.ds-s4-cur {
    font-size: clamp(10px,1.15vw,15px);
    font-weight: 700;
    padding-top: clamp(3px,.5vw,6px);
    opacity: .70;
}

.ds-s4-cell[data-col="base"] .ds-s4-price {
    color: rgba(255,255,255,.58);
}

.ds-s4-cell[data-col="branch-a"] .ds-s4-price {
    color: rgba(96,165,250,.92);
}

.ds-s4-cell[data-col="branch-b"] .ds-s4-price {
    color: rgba(52,211,153,.92);
}

.ds-s4-cell.free .ds-s4-price {
    color: rgba(52,211,153,.78);
}

/* Badge */
.ds-s4-badge {
    font-family: var(--ds-mono);
    font-size: clamp(7px,.68vw,8.5px);
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 2px 7px;
    border-radius: 4px;
    width: fit-content;
    opacity: 0;
    transform: scale(.7);
    transition: opacity .35s ease var(--bg,300ms), transform .35s cubic-bezier(.34,1.56,.64,1) var(--bg,300ms);
}

.ds-s4-cell.is-vis .ds-s4-badge {
    opacity: 1;
    transform: scale(1);
}

.ds-s4-badge--override {
    background: rgba(245,158,11,.12);
    color: #fbbf24;
    border: 1px solid rgba(245,158,11,.28);
}

/* Inherited/base badges were .28/.22 opacity — essentially invisible */
.ds-s4-badge--inherited {
    background: rgba(255,255,255,.05);
    color: rgba(255,255,255,.48);
    border: 1px solid rgba(255,255,255,.10);
}

.ds-s4-badge--base {
    background: rgba(255,255,255,.04);
    color: rgba(255,255,255,.40);
    border: 1px solid rgba(255,255,255,.08);
}

/* Last row — no bottom border */
.ds-s4-row-last .ds-s4-row-lbl,
.ds-s4-row-last .ds-s4-cell {
    border-bottom: none;
}

/* ─────────────────────────────────────────────
   INSIGHT STRIP
───────────────────────────────────────────── */
.ds-s4-insights {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 0;
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .6s ease .2s, transform .6s cubic-bezier(.22,1,.36,1) .2s;
}

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

.ds-s4-insight {
    padding: clamp(18px,2.8vw,28px) clamp(14px,2.2vw,24px);
    border-right: 1px solid rgba(255,255,255,.07);
    display: flex;
    align-items: flex-start;
    gap: 12px;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity .5s ease var(--id,0ms), transform .5s cubic-bezier(.22,1,.36,1) var(--id,0ms);
}

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

    .ds-s4-insight:last-child {
        border-right: none;
    }

    .ds-s4-insight:nth-child(1) {
        --id: 0ms;
    }

    .ds-s4-insight:nth-child(2) {
        --id: 90ms;
    }

    .ds-s4-insight:nth-child(3) {
        --id: 180ms;
    }

.ds-s4-insight-ico {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ds-s4-insight:nth-child(1) .ds-s4-insight-ico {
    background: rgba(245,158,11,.10);
    border: 1px solid rgba(245,158,11,.22);
    color: #fbbf24;
}

.ds-s4-insight:nth-child(2) .ds-s4-insight-ico {
    background: rgba(59,130,246,.10);
    border: 1px solid rgba(59,130,246,.22);
    color: rgba(96,165,250,.92);
}

.ds-s4-insight:nth-child(3) .ds-s4-insight-ico {
    background: rgba(16,185,129,.10);
    border: 1px solid rgba(16,185,129,.22);
    color: #34d399;
}

.ds-s4-insight-h {
    font-size: clamp(12px,1.2vw,14px);
    font-weight: 800;
    color: rgba(255,255,255,.82);
    letter-spacing: -0.018em;
    margin-bottom: 4px;
    line-height: 1.28;
}

/* Insight copy — .32 near-invisible; lifted to .56 */
.ds-s4-insight-p {
    font-size: clamp(11.5px,1.05vw,13px);
    color: rgba(255,255,255,.56);
    line-height: 1.68;
}

/* ══════════════════════════════════════════════════
   RESPONSIVE — 5 breakpoints, no gap
   ① 1100px — wide tablet: label column tightens
   ② 860px  — tablet: insights stack, table narrower
   ③ 640px  — mobile: full premium treatment + scroll table
   ④ 400px  — small phone: absolute floor sizes
   ⑤ 320px  — minimum possible
══════════════════════════════════════════════════ */

/* ① Wide tablet */
@media (max-width: 1100px) {
    .ds-s4-table {
        grid-template-columns: clamp(120px,16vw,160px) repeat(3,1fr);
    }

    .ds-s4-col-name {
        font-size: clamp(11px,1.1vw,13px);
    }
}

/* ② Tablet — insights stack, table stays scrollable */
@media (max-width: 860px) {

    .ds-s4-table {
        grid-template-columns: clamp(110px,22vw,140px) repeat(3,1fr);
    }

    .ds-s4-insights {
        grid-template-columns: 1fr;
    }

    .ds-s4-insight {
        border-right: none;
        border-bottom: 1px solid rgba(255,255,255,.07);
    }

        .ds-s4-insight:last-child {
            border-bottom: none;
        }
}

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

    .ds-s4 {
        padding: 60px 0 52px;
    }

    .ds-s4-inner {
        padding: 0 18px;
    }

    /* Header — left-align */
    .ds-s4-head {
        max-width: 100%;
        text-align: left;
        margin-bottom: 32px;
    }

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

    .ds-s4-h2 {
        font-size: clamp(26px, 8vw, 38px);
        line-height: 1.14;
        letter-spacing: -0.036em;
        margin-bottom: 14px;
    }

    .ds-s4-sub {
        font-size: 15px;
        line-height: 1.72;
        color: rgba(255,255,255,.60);
        max-width: 100%;
        text-align: left;
        margin: 0;
    }

    /* Matrix wrap */
    .ds-s4-matrix-wrap {
        border-radius: var(--ds-r-xl);
        margin-bottom: 18px;
    }

    /* Chrome stays readable */
    .ds-s4-chrome {
        padding: 10px 16px;
    }

    .ds-s4-chrome-title {
        font-size: 10px;
    }

    /* Table scrolls horizontally — cleanest for a 4-col data grid */
    .ds-s4-table-scroll {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .ds-s4-table {
        /* Lock label column, let data columns breathe */
        grid-template-columns: 110px repeat(3,minmax(90px,1fr));
        min-width: 460px;
    }

    /* Column header text */
    .ds-s4-col-name {
        font-size: 11px;
        letter-spacing: -0.014em;
    }

    .ds-s4-col-type {
        font-size: 8px;
        letter-spacing: .10em;
    }

    .ds-s4-col-meta {
        font-size: 8.5px;
    }

    /* Row label */
    .ds-s4-row-lbl {
        padding: 12px 10px;
        gap: 8px;
    }

    .ds-s4-row-ico {
        width: 24px;
        height: 24px;
        border-radius: 6px;
    }

    .ds-s4-row-name {
        font-size: 11.5px;
        letter-spacing: -0.012em;
    }

    .ds-s4-row-dur {
        font-size: 8.5px;
    }

    /* Price cells */
    .ds-s4-cell {
        padding: 12px 10px;
        gap: 5px;
    }

    .ds-s4-price {
        font-size: 18px;
        letter-spacing: -0.040em;
    }

    .ds-s4-cur {
        font-size: 10px;
        padding-top: 3px;
    }

    .ds-s4-badge {
        font-size: 7.5px;
        padding: 2px 6px;
    }

    /* Insights */
    .ds-s4-insight {
        padding: 16px 14px;
        gap: 10px;
    }

    .ds-s4-insight-ico {
        width: 28px;
        height: 28px;
        border-radius: 7px;
    }

    .ds-s4-insight-h {
        font-size: 14px;
        margin-bottom: 3px;
    }

    .ds-s4-insight-p {
        font-size: 13.5px;
        line-height: 1.65;
        color: rgba(255,255,255,.62);
    }
}

/* ④ Small phone — 360px–400px */
@media (max-width: 400px) {

    .ds-s4-inner {
        padding: 0 14px;
    }

    .ds-s4 {
        padding: 52px 0 44px;
    }

    .ds-s4-h2 {
        font-size: 24px;
        line-height: 1.16;
    }

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

    /* Tighter table on very narrow screens */
    .ds-s4-table {
        grid-template-columns: 95px repeat(3,minmax(80px,1fr));
        min-width: 415px;
    }

    .ds-s4-col-name {
        font-size: 10.5px;
    }

    .ds-s4-row-name {
        font-size: 10.5px;
    }

    .ds-s4-price {
        font-size: 16px;
    }

    .ds-s4-cur {
        font-size: 9.5px;
    }

    .ds-s4-insight-h {
        font-size: 13.5px;
    }

    .ds-s4-insight-p {
        font-size: 13px;
    }
}

/* ⑤ Absolute minimum — 320px */
@media (max-width: 320px) {

    .ds-s4-inner {
        padding: 0 12px;
    }

    .ds-s4-h2 {
        font-size: 22px;
    }

    .ds-s4-sub {
        font-size: 13.5px;
    }

    .ds-s4-table {
        grid-template-columns: 88px repeat(3,minmax(74px,1fr));
        min-width: 310px;
    }

    .ds-s4-col-name {
        font-size: 10px;
    }

    .ds-s4-row-name {
        font-size: 10px;
    }

    .ds-s4-row-dur {
        font-size: 8px;
    }

    .ds-s4-price {
        font-size: 15px;
    }

    .ds-s4-cur {
        font-size: 9px;
    }

    .ds-s4-insight-h {
        font-size: 13px;
    }

    .ds-s4-insight-p {
        font-size: 12.5px;
    }
}


















































/* ================================================================
   Qlynic · DoctorServices.aspx · Section 5
   "A promo that starts, runs, and expires — without you."

   WHITE premium section between dark S4 and dark S6.
   Two-column on desktop (left: copy, right: flip card).
   Single column on tablet/mobile.

   ARCHITECTURE RULES (why previous versions broke):
   ▸ ZERO opacity:0 on anything that contributes to document height.
   ▸ The flip card has a FIXED CSS height — never auto, never shrinks.
   ▸ align-items: start on the grid (not center) — prevents dead air.
   ▸ JS only animates things INSIDE the fixed-height card.
   ▸ 5 breakpoints: 1100 / 900 / 640 / 400 / 320
   ================================================================ */

/* ────────────────────────────────────────────────
   1. SECTION SHELL
──────────────────────────────────────────────── */
.ds-s5 {
    position: relative;
    background: #ffffff;
    border-top: 1px solid rgba(0,0,0,.07);
    overflow: hidden;
    padding: clamp(72px,10vh,128px) 0 0;
}

    /* Ambient warm wash — very subtle, doesn't affect layout */
    .ds-s5::before {
        content: '';
        position: absolute;
        inset: 0;
        pointer-events: none;
        z-index: 0;
        background: radial-gradient(ellipse 60% 50% at 80% 35%, rgba(217,119,6,.035) 0%, transparent 65%), radial-gradient(ellipse 50% 55% at 15% 70%, rgba(37,99,235,.022) 0%, transparent 65%);
    }

/* ────────────────────────────────────────────────
   2. INNER GRID — two-column on desktop
──────────────────────────────────────────────── */
.ds-s5-inner {
    position: relative;
    z-index: 1;
    max-width: 1380px;
    margin: 0 auto;
    padding: 0 clamp(20px,4.5vw,64px) clamp(64px,9vh,112px);
    display: grid;
    grid-template-columns: 44% 56%;
    gap: clamp(40px,5vw,80px);
    align-items: start; /* start, NOT center — avoids mysterious vertical gaps */
}

/* ────────────────────────────────────────────────
   3. LEFT — Copy
   ALWAYS VISIBLE. No JS gate. No opacity:0.
   This column defines the left height.
──────────────────────────────────────────────── */
.ds-s5-copy {
    opacity: 1;
    transform: none;
}

/* Eyebrow pill */
.ds-s5-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: var(--ds-mono);
    font-size: clamp(9px,.85vw,10.5px);
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ds-amber);
    background: var(--ds-amber-bg);
    border: 1px solid var(--ds-amber-bdr);
    border-radius: var(--ds-r-pill);
    padding: 5px 14px;
    margin-bottom: 20px;
    width: fit-content;
}

.ds-s5-eyebrow-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--ds-amber);
    box-shadow: 0 0 8px rgba(217,119,6,.55);
    animation: ds-dot-pulse 2s ease-in-out infinite;
}

/* H2 */
.ds-s5-h2 {
    font-family: var(--ds-font);
    font-size: clamp(26px,3.5vw,56px);
    font-weight: 800;
    line-height: 1.13;
    letter-spacing: -0.044em;
    color: var(--ds-ink);
    margin-bottom: 18px;
}

    .ds-s5-h2 em {
        font-style: normal;
        background: linear-gradient(135deg, #d97706, #f59e0b);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
    }

/* Lead paragraph — ALWAYS VISIBLE */
.ds-s5-lead {
    font-size: clamp(14px,1.35vw,16.5px);
    color: var(--ds-stone);
    line-height: 1.80;
    max-width: 440px;
    margin-bottom: 32px;
    opacity: 1; /* never 0 — was the dead space culprit */
    filter: none;
}

/* Truth rows — ALWAYS VISIBLE */
.ds-s5-truths {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.ds-s5-truth {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    padding: clamp(13px,1.6vw,18px) 0;
    border-bottom: 1px solid rgba(0,0,0,.07);
    opacity: 1; /* never 0 */
    transform: none; /* never translateY */
}

    .ds-s5-truth:last-child {
        border-bottom: none;
    }

.ds-s5-truth-ico {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    flex-shrink: 0;
    margin-top: 1px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ds-s5-truth:nth-child(1) .ds-s5-truth-ico {
    background: var(--ds-amber-bg);
    border: 1px solid var(--ds-amber-bdr);
    color: var(--ds-amber);
}

.ds-s5-truth:nth-child(2) .ds-s5-truth-ico {
    background: var(--ds-emerald-bg);
    border: 1px solid var(--ds-emerald-bdr);
    color: var(--ds-emerald);
}

.ds-s5-truth:nth-child(3) .ds-s5-truth-ico {
    background: var(--ds-blue-bg);
    border: 1px solid var(--ds-blue-bdr);
    color: var(--ds-blue);
}

.ds-s5-truth-h {
    font-size: clamp(13px,1.2vw,14.5px);
    font-weight: 800;
    color: var(--ds-ink);
    letter-spacing: -0.016em;
    margin-bottom: 3px;
    line-height: 1.28;
}

.ds-s5-truth-p {
    font-size: clamp(12px,1.08vw,13px);
    color: var(--ds-stone);
    line-height: 1.65;
}

/* ────────────────────────────────────────────────
   4. RIGHT — Stage (always visible)
──────────────────────────────────────────────── */
.ds-s5-stage {
    opacity: 1; /* never 0 */
    transform: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Act label row */
.ds-s5-act-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--ds-mono);
    font-size: clamp(8px,.78vw,9.5px);
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ds-pebble);
    min-height: 18px; /* stable height so no layout jump */
}

.ds-s5-act-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ds-amber);
    box-shadow: 0 0 8px rgba(217,119,6,.6);
    animation: ds-dot-pulse 1.8s ease-in-out infinite;
    flex-shrink: 0;
}

/* ────────────────────────────────────────────────
   5. FLIP CARD
   Fixed height — NEVER auto, NEVER shrinks.
   This is the most critical rule: the height of the
   card is set in CSS and does not depend on content.
──────────────────────────────────────────────── */
.ds-s5-scene {
    perspective: 1200px;
}

.ds-s5-card {
    position: relative;
    transform-style: preserve-3d;
    transition: transform .7s cubic-bezier(.4,0,.2,1);
    /* Fixed height — tall enough for the admin form at all widths */
    height: clamp(320px,38vw,400px);
}

    .ds-s5-card.flipped {
        transform: rotateY(-180deg);
    }

.ds-s5-face {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    border-radius: var(--ds-r-xl);
    border: 1.5px solid rgba(0,0,0,.09);
    box-shadow: 0 4px 6px rgba(0,0,0,.03), 0 20px 60px rgba(37,99,235,.08), 0 8px 24px rgba(0,0,0,.05);
    overflow: hidden;
    background: #ffffff;
}

.ds-s5-face--back {
    transform: rotateY(180deg);
}

/* ── Admin face (front) ── */
.ds-s5-admin {
    padding: clamp(18px,2.4vw,28px);
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ds-s5-admin-hd {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(0,0,0,.07);
    flex-shrink: 0;
}

.ds-s5-admin-ico {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--ds-amber-bg);
    border: 1px solid var(--ds-amber-bdr);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ds-amber);
    flex-shrink: 0;
}

.ds-s5-admin-title {
    font-size: clamp(12px,1.2vw,14px);
    font-weight: 800;
    color: var(--ds-ink);
    letter-spacing: -0.016em;
    line-height: 1.25;
}

.ds-s5-admin-sub {
    font-family: var(--ds-mono);
    font-size: clamp(7.5px,.72vw,9px);
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--ds-pebble);
    margin-top: 1px;
}

.ds-s5-form {
    display: flex;
    flex-direction: column;
    gap: 9px;
    flex: 1;
    min-height: 0;
}

.ds-s5-field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px;
}

.ds-s5-field {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.ds-s5-field-lbl {
    font-family: var(--ds-mono);
    font-size: clamp(7.5px,.72vw,8.5px);
    font-weight: 700;
    letter-spacing: .10em;
    text-transform: uppercase;
    color: var(--ds-pebble);
}

.ds-s5-field-val {
    height: 34px;
    padding: 0 11px;
    background: #f8f9fc;
    border: 1.5px solid rgba(0,0,0,.09);
    border-radius: var(--ds-r-md);
    font-family: var(--ds-mono);
    font-size: clamp(10.5px,.95vw,12px);
    font-weight: 700;
    color: var(--ds-ink);
    display: flex;
    align-items: center;
    overflow: hidden;
    transition: border-color .22s ease, box-shadow .22s ease, background .22s ease;
}

    .ds-s5-field-val.active {
        border-color: var(--ds-amber-bdr);
        box-shadow: 0 0 0 3px rgba(217,119,6,.10);
        background: rgba(217,119,6,.025);
    }

    .ds-s5-field-val.done {
        border-color: var(--ds-emerald-bdr);
        background: var(--ds-emerald-bg);
        color: var(--ds-emerald);
    }

/* Typewriter cursor */
.ds-s5-cursor {
    display: inline-block;
    width: 1.5px;
    height: 13px;
    border-radius: 1px;
    background: var(--ds-amber);
    margin-left: 2px;
    vertical-align: middle;
    animation: ds-caret .8s ease-in-out infinite;
}

/* Save button */
.ds-s5-save {
    height: 38px;
    flex-shrink: 0;
    border-radius: var(--ds-r-pill);
    background: var(--ds-grad);
    border: none;
    cursor: pointer;
    font-family: var(--ds-mono);
    font-size: clamp(8.5px,.82vw,9.5px);
    font-weight: 700;
    letter-spacing: .10em;
    text-transform: uppercase;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    box-shadow: 0 4px 14px rgba(37,99,235,.28);
    position: relative;
    overflow: hidden;
    transition: transform .2s ease, box-shadow .2s ease;
}

    .ds-s5-save:hover {
        transform: translateY(-1px);
        box-shadow: 0 6px 22px rgba(37,99,235,.38);
    }

    .ds-s5-save.rippling::after {
        content: '';
        position: absolute;
        inset: 0;
        background: rgba(255,255,255,.22);
        animation: s5-ripple .5s ease forwards;
    }

@keyframes s5-ripple {
    from {
        opacity: 1;
        transform: scale(.4);
    }

    to {
        opacity: 0;
        transform: scale(2.2);
    }
}

/* ── Booking face (back) ── */
.ds-s5-booking {
    padding: clamp(18px,2.4vw,28px);
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Promo badge — opacity:0 is SAFE here (inside fixed-height card) */
.ds-s5-promo-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 13px;
    border-radius: var(--ds-r-pill);
    font-family: var(--ds-mono);
    font-size: clamp(9px,.88vw,9.5px);
    font-weight: 800;
    letter-spacing: .10em;
    text-transform: uppercase;
    width: fit-content;
    position: relative;
    overflow: hidden;
    opacity: 0;
    transform: scale(0) rotate(-4deg);
    transform-origin: left center;
    transition: opacity .35s ease, transform .42s cubic-bezier(.34,1.56,.64,1);
}

    .ds-s5-promo-badge.pop {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }

.ds-s5-promo-badge--live {
    color: var(--ds-amber);
    background: var(--ds-amber-bg);
    border: 1.5px solid var(--ds-amber-bdr);
}

.ds-s5-promo-badge--expired {
    color: var(--ds-rose);
    background: var(--ds-rose-bg);
    border: 1.5px solid var(--ds-rose-bdr);
}

/* Shimmer sweep */
.ds-s5-promo-badge--live::before {
    content: '';
    position: absolute;
    top: 0;
    left: -70%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg,transparent,rgba(255,255,255,.48),transparent);
    animation: s5-badge-shimmer 2.6s ease-in-out infinite 1s;
}

@keyframes s5-badge-shimmer {
    0% {
        left: -70%;
    }

    100% {
        left: 130%;
    }
}

/* Service row */
.ds-s5-svc-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.ds-s5-svc-name {
    font-size: clamp(14px,1.55vw,17px);
    font-weight: 800;
    color: var(--ds-ink);
    letter-spacing: -0.022em;
    line-height: 1.25;
}

.ds-s5-svc-doc {
    font-family: var(--ds-mono);
    font-size: clamp(7.5px,.72vw,9px);
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--ds-pebble);
    margin-top: 3px;
}

.ds-s5-price-pair {
    text-align: right;
    flex-shrink: 0;
}

.ds-s5-orig {
    font-family: var(--ds-mono);
    font-size: clamp(11px,1.1vw,13px);
    font-weight: 600;
    color: var(--ds-pebble);
    position: relative;
    display: inline-block;
    line-height: 1;
}

    .ds-s5-orig::after {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        height: 2px;
        background: var(--ds-rose);
        border-radius: 1px;
        width: 0%;
        transform: translateY(-50%);
        transition: width .4s cubic-bezier(.22,1,.36,1);
    }

    .ds-s5-orig.strike::after {
        width: 100%;
    }

.ds-s5-disc {
    font-family: var(--ds-font);
    font-size: clamp(30px,3.8vw,46px);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.050em;
    color: var(--ds-emerald);
    display: block;
    margin-top: 2px;
}

/* Countdown clock */
.ds-s5-clock {
    display: flex;
    align-items: center;
    gap: clamp(8px,1.3vw,16px);
    padding: clamp(11px,1.4vw,16px);
    background: #f8f9fc;
    border: 1px solid rgba(0,0,0,.08);
    border-radius: var(--ds-r-lg);
    justify-content: center;
    flex: 1;
}

.ds-s5-unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
}

.ds-s5-digit {
    font-family: var(--ds-mono);
    font-size: clamp(22px,3vw,38px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.04em;
    color: var(--ds-ink);
    min-width: 2ch;
    text-align: center;
}

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

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

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

.ds-s5-unit-lbl {
    font-family: var(--ds-mono);
    font-size: clamp(7px,.65vw,8.5px);
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ds-pebble);
}

.ds-s5-sep {
    font-family: var(--ds-mono);
    font-size: clamp(16px,2.2vw,28px);
    font-weight: 800;
    color: var(--ds-dust);
    margin-bottom: 16px;
    animation: s5-blink 1s ease-in-out infinite;
}

@keyframes s5-blink {
    0%,49% {
        opacity: 1;
    }

    50%,100% {
        opacity: .2;
    }
}

/* FF + expired — inside fixed card, opacity:0 is safe */
.ds-s5-ff {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    font-family: var(--ds-mono);
    font-size: clamp(8px,.76vw,9px);
    font-weight: 700;
    letter-spacing: .10em;
    text-transform: uppercase;
    color: var(--ds-rose);
    opacity: 0;
    transform: translateY(5px);
    transition: opacity .3s ease, transform .3s ease;
}

    .ds-s5-ff.show {
        opacity: 1;
        transform: translateY(0);
    }

.ds-s5-expired-msg {
    text-align: center;
    font-family: var(--ds-mono);
    font-size: clamp(8.5px,.82vw,9px);
    font-weight: 700;
    letter-spacing: .10em;
    text-transform: uppercase;
    color: var(--ds-pebble);
    opacity: 0;
    transition: opacity .4s ease;
}

    .ds-s5-expired-msg.show {
        opacity: 1;
    }

/* ────────────────────────────────────────────────
   6. TIMELINE STRIP — always visible, full-width
──────────────────────────────────────────────── */
.ds-s5-timeline-wrap {
    background: #f8f9fc;
    border-top: 1px solid rgba(0,0,0,.07);
    padding: clamp(24px,3.2vw,44px) clamp(20px,4.5vw,64px);
    position: relative;
    z-index: 1;
    opacity: 1; /* always visible */
    transform: none;
}

.ds-s5-tl-inner {
    max-width: 1380px;
    margin: 0 auto;
}

.ds-s5-tl-label {
    font-family: var(--ds-mono);
    font-size: clamp(9px,.88vw,10px);
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ds-pebble);
    text-align: center;
    margin-bottom: clamp(16px,2.2vw,26px);
}

.ds-s5-track-wrap {
    position: relative;
    padding-bottom: 36px;
}

.ds-s5-track {
    height: 3px;
    background: rgba(0,0,0,.08);
    border-radius: 2px;
    position: relative;
    overflow: visible;
}

.ds-s5-track-fill {
    height: 100%;
    border-radius: 2px;
    background: linear-gradient(90deg,var(--ds-emerald),var(--ds-amber),var(--ds-rose));
    width: 0%;
    transition: width 1.8s cubic-bezier(.22,1,.36,1);
}

.ds-s5-cursor-dot {
    position: absolute;
    top: 50%;
    transform: translate(-50%,-50%);
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--ds-amber);
    box-shadow: 0 0 0 4px rgba(217,119,6,.18), 0 0 14px rgba(217,119,6,.45);
    left: 0%;
    transition: left 1.8s cubic-bezier(.22,1,.36,1);
}

.ds-s5-nodes {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
}

.ds-s5-node {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.ds-s5-node-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid rgba(0,0,0,.14);
    background: #fff;
    margin-top: -3.5px;
    transition: border-color .5s ease, background .5s ease, box-shadow .5s ease;
}

.ds-s5-node.passed .ds-s5-node-dot {
    border-color: var(--ds-emerald);
    background: var(--ds-emerald);
    box-shadow: 0 0 8px rgba(5,150,105,.35);
}

.ds-s5-node.current .ds-s5-node-dot {
    border-color: var(--ds-amber);
    background: var(--ds-amber);
    box-shadow: 0 0 12px rgba(217,119,6,.50);
}

.ds-s5-node-lbl {
    font-family: var(--ds-mono);
    font-size: clamp(8px,.78vw,9.5px);
    font-weight: 700;
    letter-spacing: .10em;
    text-transform: uppercase;
    color: var(--ds-pebble);
    margin-top: 14px;
    transition: color .5s ease;
    white-space: nowrap;
}

.ds-s5-node.passed .ds-s5-node-lbl {
    color: var(--ds-emerald);
}

.ds-s5-node.current .ds-s5-node-lbl {
    color: var(--ds-amber);
}

.ds-s5-node-sub {
    font-size: clamp(9.5px,.9vw,11px);
    color: var(--ds-stone);
    text-align: center;
    margin-top: 1px;
    transition: color .5s ease;
}

.ds-s5-node.passed .ds-s5-node-sub {
    color: var(--ds-emerald);
}

/* ────────────────────────────────────────────────
   7. RESPONSIVE
   ① 1100px — wide tablet: columns tighten
   ② 900px  — tablet: stack to single column
   ③ 640px  — mobile
   ④ 400px  — small phone
   ⑤ 320px  — minimum
──────────────────────────────────────────────── */

/* ① Wide tablet */
@media (max-width: 1100px) {
    .ds-s5-inner {
        grid-template-columns: 46% 54%;
        gap: clamp(32px,4vw,60px);
    }

    .ds-s5-disc {
        font-size: clamp(26px,4.2vw,38px);
    }
}

/* ② Tablet — single column */
@media (max-width: 900px) {

    .ds-s5-inner {
        grid-template-columns: 1fr;
        gap: 36px;
        padding-bottom: clamp(52px,8vw,80px);
    }

    .ds-s5-lead {
        max-width: 100%;
    }

    /* Card taller when full-width */
    .ds-s5-card {
        height: clamp(320px,54vw,400px);
    }

    .ds-s5-timeline-wrap {
        padding: 24px 22px 32px;
    }
}

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

    .ds-s5 {
        padding-top: 60px;
    }

    .ds-s5-inner {
        padding-left: 18px;
        padding-right: 18px;
        padding-bottom: 48px;
        gap: 32px;
    }

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

    .ds-s5-h2 {
        font-size: clamp(26px,8vw,38px);
        line-height: 1.15;
        letter-spacing: -0.036em;
        margin-bottom: 14px;
    }

    .ds-s5-lead {
        font-size: 15px;
        line-height: 1.72;
        margin-bottom: 24px;
    }

    .ds-s5-truth {
        padding: 12px 0;
        gap: 10px;
    }

    .ds-s5-truth-ico {
        width: 28px;
        height: 28px;
        border-radius: 7px;
    }

    .ds-s5-truth-h {
        font-size: 14px;
    }

    .ds-s5-truth-p {
        font-size: 13px;
        line-height: 1.60;
    }

    .ds-s5-act-bar {
        font-size: 10px;
        letter-spacing: .10em;
    }

    .ds-s5-card {
        height: clamp(290px,74vw,350px);
    }

    .ds-s5-admin,
    .ds-s5-booking {
        padding: 15px;
        gap: 10px;
    }

    .ds-s5-admin-hd {
        padding-bottom: 10px;
    }

    .ds-s5-admin-title {
        font-size: 13px;
    }

    .ds-s5-admin-sub {
        font-size: 8px;
    }

    .ds-s5-field-row {
        gap: 7px;
    }

    .ds-s5-field-lbl {
        font-size: 7.5px;
    }

    .ds-s5-field-val {
        height: 30px;
        font-size: 11px;
        padding: 0 9px;
    }

    .ds-s5-save {
        height: 36px;
        font-size: 9px;
    }

    .ds-s5-svc-name {
        font-size: 14px;
    }

    .ds-s5-svc-doc {
        font-size: 8.5px;
    }

    .ds-s5-orig {
        font-size: 11px;
    }

    .ds-s5-disc {
        font-size: clamp(26px,8vw,34px);
    }

    .ds-s5-clock {
        gap: 10px;
        padding: 10px 8px;
    }

    .ds-s5-digit {
        font-size: clamp(20px,6.5vw,28px);
    }

    .ds-s5-unit-lbl {
        font-size: 7px;
        letter-spacing: .10em;
    }

    .ds-s5-sep {
        font-size: clamp(14px,4.5vw,22px);
    }

    .ds-s5-timeline-wrap {
        padding: 20px 18px 28px;
    }

    .ds-s5-tl-label {
        font-size: 9px;
    }

    .ds-s5-node-lbl {
        font-size: 8.5px;
        letter-spacing: .07em;
    }

    .ds-s5-node-sub {
        display: none;
    }
}

/* ④ Small phone */
@media (max-width: 400px) {

    .ds-s5-inner {
        padding-left: 14px;
        padding-right: 14px;
        padding-bottom: 40px;
    }

    .ds-s5-h2 {
        font-size: 24px;
        line-height: 1.17;
    }

    .ds-s5-lead {
        font-size: 14px;
    }

    .ds-s5-truth-h {
        font-size: 13.5px;
    }

    .ds-s5-truth-p {
        font-size: 12.5px;
    }

    .ds-s5-card {
        height: clamp(270px,72vw,320px);
    }

    .ds-s5-admin-title {
        font-size: 12.5px;
    }

    .ds-s5-field-val {
        height: 28px;
        font-size: 10.5px;
    }

    .ds-s5-disc {
        font-size: 24px;
    }

    .ds-s5-digit {
        font-size: 19px;
    }

    .ds-s5-node-lbl {
        font-size: 7.5px;
    }

    .ds-s5-timeline-wrap {
        padding: 16px 14px 24px;
    }
}

/* ⑤ Minimum — 320px */
@media (max-width: 320px) {

    .ds-s5-inner {
        padding-left: 12px;
        padding-right: 12px;
    }

    .ds-s5-h2 {
        font-size: 22px;
    }

    .ds-s5-lead {
        font-size: 13.5px;
    }

    .ds-s5-truth-h {
        font-size: 13px;
    }

    .ds-s5-truth-p {
        font-size: 12px;
    }

    .ds-s5-card {
        height: 260px;
    }

    .ds-s5-admin,
    .ds-s5-booking {
        padding: 12px;
        gap: 8px;
    }

    .ds-s5-field-val {
        height: 26px;
        font-size: 10px;
    }

    .ds-s5-disc {
        font-size: 22px;
    }

    .ds-s5-digit {
        font-size: 17px;
    }

    .ds-s5-svc-name {
        font-size: 13px;
    }

    .ds-s5-node-lbl {
        font-size: 7px;
    }
}














































/* ================================================================
   Qlynic · DoctorServices.aspx
   SECTION 6 — "TRANSMISSION"

   Design language:
   · Pure obsidian (#03040a). One focused blue radial. That's it.
   · Words reveal via clip-path curtain wipe — left → right.
     Never done at this scale. No opacity fade anywhere.
   · Each sentence wipes from its own direction for visual rhythm.
   · Primary CTA: three concentric sonar rings expand outward
     on staggered delays — organic, not perfectly circular.
   · Proof strip: monospace uppercase, slash separators.
   · Footer: barely there, just marks the end.

   Pixel-perfect from 320px to 2560px.
   ================================================================ */

/* ── Section ── */
.ds-s6 {
    position: relative;
    background: #03040a;
    overflow: hidden;
    padding: clamp(100px,14vh,180px) 0 0;
}

/* ─────────────────────────────────────────────
   BACKGROUND LAYERS — restraint is power
───────────────────────────────────────────── */

/* One deep radial — cobalt rising from bottom-center */
.ds-s6-field {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background: radial-gradient(ellipse 80% 55% at 50% 100%, rgba(37,99,235,.14) 0%, rgba(37,99,235,.06) 35%, rgba(17,24,39,.04) 60%, transparent 80%), radial-gradient(ellipse 60% 40% at 50% 110%, rgba(124,58,237,.08) 0%, transparent 60%);
    animation: s6-field-breathe 14s ease-in-out infinite alternate;
}

@keyframes s6-field-breathe {
    0% {
        opacity: .7;
        transform: scaleX(1);
    }

    50% {
        opacity: 1;
        transform: scaleX(1.06);
    }

    100% {
        opacity: .75;
        transform: scaleX(.95);
    }
}

/* Noise grain — SVG data URI, perfectly tiled, ultra-subtle */
.ds-s6-grain {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    opacity: .032;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 200px 200px;
}

/* Horizontal scan line — sweeps top-to-bottom once on section entry */
.ds-s6-scan {
    position: absolute;
    top: -4px;
    left: 0;
    right: 0;
    height: 4px;
    pointer-events: none;
    z-index: 3;
    background: linear-gradient(180deg, transparent 0%, rgba(37,99,235,.40) 40%, rgba(99,102,241,.60) 50%, rgba(37,99,235,.40) 60%, transparent 100%);
    opacity: 0;
    will-change: transform;
}

    .ds-s6-scan.fire {
        animation: s6-scan-sweep 1.4s cubic-bezier(.4,0,.2,1) forwards;
    }

@keyframes s6-scan-sweep {
    0% {
        opacity: 0;
        transform: translateY(0);
    }

    8% {
        opacity: 1;
    }

    92% {
        opacity: .6;
    }

    100% {
        opacity: 0;
        transform: translateY(var(--s6-h, 600px));
    }
}

/* Fine star field — only near the top half */
.ds-s6-stars {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background-image: radial-gradient(circle, rgba(255,255,255,.50) 1px, transparent 1px), radial-gradient(circle, rgba(255,255,255,.28) 1px, transparent 1px), radial-gradient(circle, rgba(255,255,255,.15) 1px, transparent 1px);
    background-size: 220px 220px, 140px 140px, 90px 90px;
    background-position: 0 0, 55px 75px, 25px 30px;
    mask-image: linear-gradient(to bottom, rgba(0,0,0,.7) 0%, rgba(0,0,0,.3) 40%, transparent 70%);
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.7) 0%, rgba(0,0,0,.3) 40%, transparent 70%);
}

/* Thin bottom line — barely visible, marks section end */
.ds-s6-line {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    pointer-events: none;
    z-index: 2;
    background: linear-gradient(90deg, transparent 0%, rgba(37,99,235,.35) 30%, rgba(99,102,241,.50) 50%, rgba(37,99,235,.35) 70%, transparent 100%);
}

/* ─────────────────────────────────────────────
   INNER
───────────────────────────────────────────── */
.ds-s6-inner {
    position: relative;
    z-index: 2;
    max-width: 900px;
    margin: 0 auto;
    padding: 0 clamp(24px,5vw,60px) clamp(80px,12vh,130px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(40px,5.5vw,68px);
}

/* ─────────────────────────────────────────────
   TERMINAL EYEBROW
   Appears with a clip-path wipe (left → right)
───────────────────────────────────────────── */
.ds-s6-eyebrow-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--ds-mono);
    font-size: clamp(10px,.95vw,12px);
    font-weight: 600;
    letter-spacing: .06em;
    color: rgba(255,255,255,.30);
    clip-path: inset(0 100% 0 0);
    transition: clip-path .7s cubic-bezier(.22,1,.36,1);
}

    .ds-s6-eyebrow-wrap.show {
        clip-path: inset(0 0% 0 0);
    }

.ds-s6-prompt {
    font-family: var(--ds-mono);
    font-size: clamp(11px,1.05vw,13px);
    font-weight: 800;
    color: rgba(37,99,235,.80);
    letter-spacing: .02em;
    flex-shrink: 0;
    user-select: none;
}

.ds-s6-eyebrow-text {
    color: rgba(255,255,255,.32);
}

/* Blinking cursor after eyebrow */
.ds-s6-blink-cur {
    display: inline-block;
    width: 7px;
    height: clamp(11px,1.05vw,13px);
    background: rgba(37,99,235,.70);
    border-radius: 1px;
    flex-shrink: 0;
    animation: s6-caret-blink .9s step-end infinite;
    opacity: 0;
    transition: opacity .3s ease .7s;
}

.ds-s6-eyebrow-wrap.show .ds-s6-blink-cur {
    opacity: 1;
}

@keyframes s6-caret-blink {
    0%,100% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }
}

/* ─────────────────────────────────────────────
   SENTENCES
───────────────────────────────────────────── */
.ds-s6-sentences {
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: clamp(10px,1.6vw,18px);
    width: 100%;
}

.ds-s6-sentence {
    display: block;
    overflow: visible;
}

/* Sentence 1 — small mono preamble */
.ds-s6-sentence--1 {
    font-size: clamp(12px,1.2vw,14px);
    font-weight: 600;
    font-family: var(--ds-mono);
    letter-spacing: .06em;
    color: rgba(255,255,255,.36);
    line-height: 1.6;
}

/* Sentence 2 — the big claim */
.ds-s6-sentence--2 {
    font-family: var(--ds-font);
    font-size: clamp(32px,5vw,80px);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.048em;
    color: rgba(255,255,255,.95);
}

/* Sentence 3 — gradient accent */
.ds-s6-sentence--3 {
    font-family: var(--ds-font);
    font-size: clamp(24px,3.6vw,58px);
    font-weight: 800;
    line-height: 1.10;
    letter-spacing: -0.042em;
}

/* Sentence 4 — mono footnote close */
.ds-s6-sentence--4 {
    font-size: clamp(12px,1.1vw,14px);
    font-weight: 600;
    font-family: var(--ds-mono);
    letter-spacing: .06em;
    color: rgba(255,255,255,.36);
    line-height: 1.6;
}

/* Flowing gradient on sentence 3 */
.ds-s6-sentence--3 .ds-s6-grad {
    background: linear-gradient(115deg, #60a5fa 0%, #818cf8 30%, #a78bfa 55%, #60a5fa 80%, #93c5fd 100%);
    background-size: 220% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: s6-grad-flow 5s linear infinite;
}

@keyframes s6-grad-flow {
    to {
        background-position: 220% center;
    }
}

/* ─────────────────────────────────────────────
   THE WORD WIPE REVEAL
   *** THE INNOVATION ***
   Each word is wrapped in .ds-s6-word-wrap (display:inline-block,
   overflow:hidden) and the inner .ds-s6-word uses clip-path to wipe
   in from left. This is a hard curtain reveal — no opacity fade.
   Sentence 1 & 4 (mono): wipe left → right (standard)
   Sentence 2 (big):       wipe bottom → top (rises from floor)
   Sentence 3 (gradient):  wipe right → left (opposite direction)
───────────────────────────────────────────── */

/* The outer wrapper clips the overflow so the wipe is crisp */
.ds-s6-word-wrap {
    display: inline;
    white-space: pre;
}

/* The inner span — starts clipped, wipes in when .show fires */
.ds-s6-word {
    display: inline-block;
    clip-path: inset(0 100% 0 0);
    transition: clip-path .55s cubic-bezier(.22,1,.36,1) var(--wd,0ms);
    will-change: clip-path;
}

    .ds-s6-word.show {
        clip-path: inset(0 0% 0 0);
    }

/* Sentence 2 — big words rise from floor */
.ds-s6-sentence--2 .ds-s6-word {
    clip-path: inset(110% 0 0 0); /* starts below */
    transition: clip-path .65s cubic-bezier(.22,1,.36,1) var(--wd,0ms);
}

    .ds-s6-sentence--2 .ds-s6-word.show {
        clip-path: inset(0% 0 0 0); /* rises into view */
    }

/* Sentence 3 — gradient words wipe right → left (inverted) */
.ds-s6-sentence--3 .ds-s6-word {
    clip-path: inset(0 0 0 100%); /* starts right-clipped */
    transition: clip-path .58s cubic-bezier(.22,1,.36,1) var(--wd,0ms);
}

    .ds-s6-sentence--3 .ds-s6-word.show {
        clip-path: inset(0 0 0 0%); /* wipes left */
    }

/* Sentence 4 — tiny mono fades slightly later */
.ds-s6-sentence--4 .ds-s6-word {
    clip-path: inset(0 100% 0 0);
    transition: clip-path .45s cubic-bezier(.22,1,.36,1) var(--wd,0ms);
}

    .ds-s6-sentence--4 .ds-s6-word.show {
        clip-path: inset(0 0% 0 0);
    }

/* ─────────────────────────────────────────────
   CTA PAIR
───────────────────────────────────────────── */
.ds-s6-ctas {
    display: flex;
    align-items: center;
    gap: clamp(14px,2vw,22px);
    flex-wrap: wrap;
    justify-content: center;
    /* Wipes in from bottom */
    clip-path: inset(100% 0 0 0);
    transition: clip-path .7s cubic-bezier(.22,1,.36,1);
}

    .ds-s6-ctas.show {
        clip-path: inset(0% 0 0 0);
    }

/* Primary CTA container — needed for sonar rings */
.ds-s6-primary-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ── Sonar rings ──
   Three concentric rings that expand from the button center
   on a staggered loop. Not perfect circles — slight oval gives
   organic depth. They're visible only after .show fires on .ds-s6-ctas.
─────────────────────────────────────────── */
.ds-s6-ring {
    position: absolute;
    inset: -1px;
    border-radius: var(--ds-r-pill);
    pointer-events: none;
    opacity: 0;
    border: 1px solid rgba(37,99,235,.50);
}

.ds-s6-ctas.show .ds-s6-ring--1 {
    animation: s6-sonar 3.2s ease-out 0.4s infinite;
}

.ds-s6-ctas.show .ds-s6-ring--2 {
    animation: s6-sonar 3.2s ease-out 1.4s infinite;
}

.ds-s6-ctas.show .ds-s6-ring--3 {
    animation: s6-sonar 3.2s ease-out 2.4s infinite;
}

@keyframes s6-sonar {
    0% {
        opacity: .70;
        transform: scale(1);
        border-color: rgba(37,99,235,.50);
    }

    60% {
        opacity: .20;
        border-color: rgba(99,102,241,.25);
    }

    100% {
        opacity: 0;
        transform: scale(2.8);
        border-color: transparent;
    }
}

/* Primary CTA */
.ds-s6-cta-primary {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: clamp(15px,2vw,20px) clamp(30px,4vw,52px);
    border-radius: var(--ds-r-pill);
    /* One clean gradient — no colour overload */
    background: linear-gradient(135deg, #1d4ed8, #2563eb, #3b82f6);
    color: #fff;
    font-family: var(--ds-font);
    font-size: clamp(14px,1.3vw,16px);
    font-weight: 800;
    letter-spacing: -0.016em;
    text-decoration: none;
    border: none;
    cursor: pointer;
    box-shadow: 0 0 0 1px rgba(59,130,246,.35), 0 8px 32px rgba(29,78,216,.45), 0 0 60px rgba(37,99,235,.12);
    transition: transform .2s ease, box-shadow .2s ease;
}

    .ds-s6-cta-primary::before {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: inherit;
        background: linear-gradient(135deg, rgba(255,255,255,.14), transparent 60%);
        opacity: 0;
        transition: opacity .2s ease;
    }

    .ds-s6-cta-primary:hover {
        transform: translateY(-2px);
        box-shadow: 0 0 0 1px rgba(59,130,246,.50), 0 14px 44px rgba(29,78,216,.60), 0 0 80px rgba(37,99,235,.20);
    }

        .ds-s6-cta-primary:hover::before {
            opacity: 1;
        }

    .ds-s6-cta-primary:active {
        transform: translateY(0);
    }

.ds-s6-cta-ico {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(255,255,255,.15);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform .2s ease;
}

.ds-s6-cta-primary:hover .ds-s6-cta-ico {
    transform: translateX(4px);
}

/* Secondary CTA — ghost, minimal */
.ds-s6-cta-secondary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: clamp(14px,1.9vw,19px) clamp(26px,3.4vw,40px);
    border-radius: var(--ds-r-pill);
    background: transparent;
    border: 1px solid rgba(255,255,255,.12);
    color: rgba(255,255,255,.56);
    font-family: var(--ds-font);
    font-size: clamp(14px,1.3vw,16px);
    font-weight: 700;
    letter-spacing: -0.012em;
    text-decoration: none;
    cursor: pointer;
    transition: border-color .2s ease, color .2s ease, background .2s ease, transform .2s ease;
}

    .ds-s6-cta-secondary:hover {
        border-color: rgba(255,255,255,.26);
        color: rgba(255,255,255,.88);
        background: rgba(255,255,255,.04);
        transform: translateY(-2px);
    }

/* ─────────────────────────────────────────────
   PROOF STRIP
   Monospace. Slash separators. Minimal.
───────────────────────────────────────────── */
.ds-s6-proof {
    display: flex;
    align-items: center;
    gap: clamp(12px,2vw,24px);
    flex-wrap: wrap;
    justify-content: center;
    /* clip-path wipe from bottom */
    clip-path: inset(100% 0 0 0);
    transition: clip-path .6s cubic-bezier(.22,1,.36,1) .1s;
}

    .ds-s6-proof.show {
        clip-path: inset(0% 0 0 0);
    }

.ds-s6-proof-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--ds-mono);
    font-size: clamp(9px,.88vw,10.5px);
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: rgba(255,255,255,.38);
}

    .ds-s6-proof-item svg {
        color: rgba(37,99,235,.70);
        flex-shrink: 0;
    }

.ds-s6-proof-sep {
    font-family: var(--ds-mono);
    font-size: 14px;
    color: rgba(255,255,255,.12);
    line-height: 1;
    user-select: none;
}

/* ─────────────────────────────────────────────
   FOOTER
   Barely there. Marks the end. Nothing more.
───────────────────────────────────────────── */
.ds-s6-footer {
    width: 100%;
    border-top: 1px solid rgba(255,255,255,.045);
    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: 2;
    clip-path: inset(100% 0 0 0);
    transition: clip-path .6s cubic-bezier(.22,1,.36,1) .2s;
}

    .ds-s6-footer.show {
        clip-path: inset(0% 0 0 0);
    }

.ds-s6-footer-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--ds-font);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: -0.018em;
    color: rgba(255,255,255,.50);
}

.ds-s6-footer-logo {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    background: linear-gradient(135deg,#1d4ed8,#2563eb);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

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

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

    .ds-s6-footer-link:hover {
        color: rgba(255,255,255,.60);
    }

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

/* ══════════════════════════════════════════════════
   RESPONSIVE — 5 breakpoints
   ① 860px — wide tablet
   ② 640px — mobile
   ③ 480px — mid phone
   ④ 400px — small phone
   ⑤ 320px — minimum
══════════════════════════════════════════════════ */

/* ① Wide tablet */
@media (max-width: 860px) {
    .ds-s6-sentence--2 {
        font-size: clamp(30px,5.5vw,60px);
        line-height: 1.10;
    }

    .ds-s6-sentence--3 {
        font-size: clamp(22px,4vw,44px);
        line-height: 1.12;
    }
}

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

    .ds-s6 {
        padding-top: 72px;
    }

    .ds-s6-inner {
        padding-left: 22px;
        padding-right: 22px;
        padding-bottom: 60px;
        gap: 36px;
    }

    /* Eyebrow — left-align on mobile */
    .ds-s6-eyebrow-wrap {
        font-size: 10px;
        gap: 6px;
        align-self: flex-start;
    }

    .ds-s6-eyebrow-text {
        /* Hide the long path on small screens */
        display: none;
    }

    /* Show a shorter version */
    .ds-s6-eyebrow-wrap::after {
        content: 'configuration complete';
        font-family: var(--ds-mono);
        font-size: 10px;
        color: rgba(255,255,255,.32);
        letter-spacing: .04em;
    }

    /* Sentences — left-align */
    .ds-s6-sentences {
        text-align: left;
        align-self: flex-start;
        gap: 10px;
    }

    .ds-s6-sentence--1 {
        font-size: 12px;
        color: rgba(255,255,255,.40);
    }

    .ds-s6-sentence--2 {
        font-size: clamp(32px, 9.5vw, 46px);
        line-height: 1.12;
        letter-spacing: -0.040em;
    }

    .ds-s6-sentence--3 {
        font-size: clamp(24px, 7.5vw, 36px);
        line-height: 1.14;
        letter-spacing: -0.034em;
    }

    .ds-s6-sentence--4 {
        font-size: 13px;
        color: rgba(255,255,255,.40);
        margin-top: 4px;
    }

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

    .ds-s6-primary-wrap,
    .ds-s6-cta-secondary {
        width: 100%;
    }

    .ds-s6-cta-primary {
        width: 100%;
        justify-content: center;
        padding: 18px 24px;
        font-size: 16px;
    }

    .ds-s6-cta-secondary {
        width: 100%;
        justify-content: center;
        padding: 16px 24px;
        font-size: 16px;
        /* Slightly more visible border on mobile */
        border-color: rgba(255,255,255,.18);
        color: rgba(255,255,255,.64);
    }

    /* Proof — left-align, wrap naturally */
    .ds-s6-proof {
        justify-content: flex-start;
        gap: 10px;
    }

    .ds-s6-proof-item {
        font-size: 10px;
    }

    .ds-s6-proof-sep {
        font-size: 12px;
    }

    /* Footer — stack */
    .ds-s6-footer {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        padding: 22px 22px;
    }

    .ds-s6-footer-brand {
        font-size: 14px;
    }

    .ds-s6-footer-link {
        font-size: 11px;
        color: rgba(255,255,255,.36);
    }

    .ds-s6-footer-copy {
        font-size: 11px;
    }
}

/* ③ Mid phone */
@media (max-width: 480px) {
    .ds-s6-sentence--2 {
        font-size: clamp(28px, 8.5vw, 38px);
    }

    .ds-s6-sentence--3 {
        font-size: clamp(22px, 7vw, 30px);
    }
}

/* ④ Small phone */
@media (max-width: 400px) {

    .ds-s6 {
        padding-top: 60px;
    }

    .ds-s6-inner {
        padding-left: 18px;
        padding-right: 18px;
        padding-bottom: 52px;
        gap: 30px;
    }

    .ds-s6-sentence--1 {
        font-size: 11.5px;
    }

    .ds-s6-sentence--2 {
        font-size: 26px;
        line-height: 1.16;
        letter-spacing: -0.034em;
    }

    .ds-s6-sentence--3 {
        font-size: 20px;
        line-height: 1.17;
        letter-spacing: -0.028em;
    }

    .ds-s6-sentence--4 {
        font-size: 12.5px;
    }

    .ds-s6-cta-primary {
        font-size: 15px;
        padding: 17px 22px;
    }

    .ds-s6-cta-secondary {
        font-size: 15px;
        padding: 15px 22px;
    }

    .ds-s6-proof-item {
        font-size: 9.5px;
    }

    .ds-s6-footer {
        padding: 18px 18px;
    }

    .ds-s6-footer-link {
        font-size: 10.5px;
    }

    .ds-s6-footer-copy {
        font-size: 10.5px;
    }
}

/* ⑤ Minimum */
@media (max-width: 320px) {
    .ds-s6-inner {
        padding-left: 14px;
        padding-right: 14px;
        padding-bottom: 44px;
    }

    .ds-s6-sentence--2 {
        font-size: 23px;
        line-height: 1.18;
    }

    .ds-s6-sentence--3 {
        font-size: 18px;
        line-height: 1.19;
    }

    .ds-s6-sentence--4 {
        font-size: 12px;
    }

    .ds-s6-cta-primary {
        font-size: 14px;
        padding: 16px 18px;
    }

    .ds-s6-cta-secondary {
        font-size: 14px;
        padding: 14px 18px;
    }

    .ds-s6-proof-item {
        font-size: 9px;
    }

    .ds-s6-footer {
        padding: 16px 14px;
        gap: 12px;
    }
}