/* ══════════════════════════════════════════════════════════════════════════
   EVOASTRA — SITE-WIDE DESIGN SYSTEM
   ══════════════════════════════════════════════════════════════════════════

   Modelled on the conventions shared by Linear, Vercel and the AI-infra set
   (Modal / Groq / CoreWeave). Four rules define that look:

     1. Elevation comes from LIGHTER SURFACES over a darker canvas, never from
        drop shadows — shadows go muddy on near-black and destroy contrast.
     2. Structure comes from 1px hairlines at 6–8% white. Borders delimit
        regions; they are never themselves a decorative element.
     3. Display type carries aggressive negative tracking (~-0.04em, i.e. ~4%
        of the type size). Untracked large type is the giveaway of a template.
     4. Monospace carries every label, metric and tag. It is the single
        strongest signal of technical credibility and costs nothing.

   Radii stay 4–10px, not 24–40px. One accent colour, used sparingly.

   LOAD ORDER: enqueued last (see eip_enqueue_design_system in inc/setup.php)
   so these win the cascade without needing !important everywhere.

   SCOPE: typography and .ei-* components. The React dashboard uses its own
   Tailwind classes and is deliberately left alone apart from the font.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
    --h-bg:          #08090A;
    --h-surface:     #0F1011;
    --h-surface-hi:  #16181A;
    --h-line:        rgba(255,255,255,.07);
    --h-line-hi:     rgba(255,255,255,.15);
    --h-text:        #F7F8F8;
    --h-dim:         rgba(247,248,248,.56);
    --h-mute:        rgba(247,248,248,.34);
    --h-accent:      #6366F1;
    --h-accent-soft: #A5B4FC;
    --h-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, 'Cascadia Mono', Menlo, monospace;
}

/* ── Typography ─────────────────────────────────────────────────────────────
   The body font itself is set site-wide from the branding option (Settings →
   Branding → Font). This only handles tracking and weight.                   */
.eip-ds h1, .eip-ds h2 { letter-spacing:-.04em; font-weight:680; }
.eip-ds h3, .eip-ds h4 { letter-spacing:-.02em; font-weight:620; }

.eip-ds .ei-section-header h2 { font-size:clamp(28px,3.4vw,42px); line-height:1.1; letter-spacing:-.04em; }
.eip-ds .ei-section-header p { color:var(--h-dim); font-size:15px; }
.eip-ds .ei-section-header { margin-bottom:48px; }

/* Eyebrow labels — mono, uppercase, wide tracking. */
.eip-ds .ei-label {
    font-family:var(--h-mono); font-size:11px; font-weight:500;
    text-transform:uppercase; letter-spacing:.18em;
    color:var(--h-mute); margin-bottom:14px;
}

/* ── Surfaces: flat panels, hairline borders, no blur, no shadow ─────────── */
.eip-ds .ei-glass-card {
    background:var(--h-surface); border:1px solid var(--h-line); border-radius:10px;
    backdrop-filter:none; -webkit-backdrop-filter:none;
    transition:background .18s ease, border-color .18s ease;
}
.eip-ds .ei-glass-card::before { display:none; }        /* kills the shine sweep */
.eip-ds .ei-glass-card {
    transition:background .2s ease, border-color .2s ease,
               transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s ease;
}
.eip-ds .ei-glass-card:hover {
    background:var(--h-surface-hi); border-color:var(--h-line-hi);
    transform:translateY(-4px);
    box-shadow:0 14px 34px -18px rgba(0,0,0,.9), 0 0 0 1px rgba(129,140,248,.18);
}
/* Program card artwork drifts in slightly on hover — the card feels alive
   without anything moving while you are trying to read it. */
.eip-ds .ei-intern-card .ei-card-banner { overflow:hidden; }
.eip-ds .ei-intern-card .ei-card-banner img { transition:transform .5s cubic-bezier(.2,.7,.2,1); }
.eip-ds .ei-intern-card:hover .ei-card-banner img { transform:scale(1.05); }

/* Program cards arrive in sequence. internship.css ships ei-reveal-delay-1..4
   on the cards already, so this only needs the travel distance widened enough
   to actually register. */
.eip-ds .ei-reveal { transition:opacity .65s ease, transform .65s cubic-bezier(.2,.7,.2,1); }

/* Stat cells count up (JS) and slide in together with the panel. */
.eip-ds .ei-stats-grid > div { transition:background .2s ease; }
.eip-ds .ei-stats-grid > div:hover { background:var(--h-surface-hi); }

/* Section headings lift in rather than appearing fully formed. */
.eip-ds .ei-section-header { transition:opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1); }

/* Marquee logos brighten under the cursor. */
.eip-ds .ei-marquee-item { transition:opacity .2s ease, transform .2s ease; }
.eip-ds .ei-marquee-item:hover { opacity:1; transform:scale(1.12); }

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.eip-ds .ei-btn { border-radius:8px; font-weight:560; letter-spacing:-.01em; }
.eip-ds .ei-btn-lg { border-radius:9px; }
.eip-ds .ei-btn-sm { border-radius:7px; font-size:12px; }
.eip-ds .ei-btn-primary { background:var(--h-accent); box-shadow:none; }
.eip-ds .ei-btn-primary:hover { background:#5457E5; transform:none; box-shadow:none; }
.eip-ds .ei-btn-outline { background:transparent; border:1px solid var(--h-line); }
.eip-ds .ei-btn-outline:hover { background:var(--h-surface-hi); border-color:var(--h-line-hi); transform:none; }

/* ── Metrics ─────────────────────────────────────────────────────────────── */
.eip-ds .ei-stats-grid { gap:0; border:1px solid var(--h-line); border-radius:10px; overflow:hidden; background:var(--h-surface); }
.eip-ds .ei-stats-grid > div { padding:30px 20px; border-left:1px solid var(--h-line); }
.eip-ds .ei-stats-grid > div:first-child { border-left:0; }
.eip-ds .ei-stat-num {
    font-family:var(--h-mono); font-weight:500; font-size:clamp(26px,2.6vw,34px);
    letter-spacing:-.03em; color:var(--h-text); font-variant-numeric:tabular-nums;
    background:none; -webkit-text-fill-color:currentColor;
}
.eip-ds .ei-stat-label {
    font-family:var(--h-mono); font-size:10px; font-weight:400; text-transform:uppercase;
    letter-spacing:.14em; color:var(--h-mute); margin-top:10px;
}

/* ── Program cards ───────────────────────────────────────────────────────── */
.eip-ds .ei-cards-grid { grid-template-columns:repeat(auto-fit,minmax(252px,1fr)); gap:16px; }
.eip-ds .ei-intern-card { padding:18px; }
/* Banner and icon carry hardcoded inline sizes in the card loops. */
.eip-ds .ei-card-banner { width:calc(100% + 36px) !important; height:112px !important; margin:-18px -18px 14px -18px !important; border-radius:10px 10px 0 0 !important; }
.eip-ds .ei-intern-card .ei-card-icon {
    width:34px; height:34px; border-radius:8px; font-size:16px;
    margin-top:-26px !important; margin-bottom:14px;
    background:var(--h-surface-hi) !important; border:1px solid var(--h-line-hi) !important;
}
.eip-ds .ei-intern-card h3 { font-size:15px; line-height:1.32; margin-bottom:7px; }
.eip-ds .ei-intern-card .ei-card-pitch { font-size:12.5px; line-height:1.6; color:var(--h-dim); margin-bottom:14px; }
.eip-ds .ei-intern-card .ei-card-meta { gap:5px; margin-bottom:14px; }
.eip-ds .ei-intern-card .ei-card-meta span {
    font-family:var(--h-mono); font-size:10px; font-weight:400;
    letter-spacing:.04em; padding:3px 7px; border-radius:4px;
    background:transparent; border:1px solid var(--h-line); color:var(--h-mute);
}
.eip-ds .ei-intern-card .ei-card-start {
    font-family:var(--h-mono); font-size:10.5px; letter-spacing:.05em;
    text-transform:uppercase; color:var(--h-mute); gap:6px; margin-bottom:16px;
}
.eip-ds .ei-intern-card .ei-card-start svg { width:12px; height:12px; flex-shrink:0; }
.eip-ds .ei-intern-card .ei-card-actions { gap:8px; }
.eip-ds .ei-intern-card .ei-card-actions .ei-btn-sm { flex:1; padding:9px 12px; }
.eip-ds .ei-category-group > h3 {
    font-family:var(--h-mono); font-size:11px; font-weight:500;
    text-transform:uppercase; letter-spacing:.16em; color:var(--h-mute);
    margin-bottom:16px; padding-bottom:14px; border-bottom:1px solid var(--h-line);
}

/* ── Process steps ───────────────────────────────────────────────────────────
   Rebuilt as a timeline rather than four floating boxes. Equal-height cards
   with unequal copy left a large dead area under the shorter ones; columns
   hung off a shared rail size to their own content, so that cannot happen.
   The rail draws in on scroll, then the nodes and columns stagger after it. */
.eip-ds .ei-process-grid {
    grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
    gap:0; text-align:left; margin-top:8px; position:relative;
}
/* Parent stays put — the rail and the columns carry the motion instead. */
.eip-ds .ei-process-grid.ei-reveal { opacity:1; transform:none; }

.eip-ds .ei-process-grid::before {
    content:''; position:absolute; top:0; left:0; width:100%; height:1px;
    background:var(--h-line-hi);
    transform:scaleX(0); transform-origin:left;
    transition:transform 1s cubic-bezier(.2,.7,.2,1);
}
.eip-ds .ei-process-grid.visible::before { transform:scaleX(1); }

.eip-ds .ei-process-step {
    background:transparent; border:0; border-radius:0;
    padding:30px 30px 0 0; position:relative;
    opacity:0; transform:translateY(12px);
    transition:opacity .55s ease, transform .55s cubic-bezier(.2,.7,.2,1);
}
.eip-ds .ei-process-grid.visible .ei-process-step { opacity:1; transform:none; }
.eip-ds .ei-process-grid.visible .ei-process-step:nth-child(1) { transition-delay:.18s; }
.eip-ds .ei-process-grid.visible .ei-process-step:nth-child(2) { transition-delay:.30s; }
.eip-ds .ei-process-grid.visible .ei-process-step:nth-child(3) { transition-delay:.42s; }
.eip-ds .ei-process-grid.visible .ei-process-step:nth-child(4) { transition-delay:.54s; }
.eip-ds .ei-process-step:hover { background:transparent; transform:none; border-color:transparent; }

/* Node sitting on the rail above each column. */
.eip-ds .ei-process-step::before {
    content:''; position:absolute; top:-3px; left:0; width:7px; height:7px;
    border-radius:50%; background:var(--h-accent-soft);
    opacity:0; transform:scale(.4);
    transition:opacity .4s ease .5s, transform .4s cubic-bezier(.2,.7,.2,1) .5s, box-shadow .25s ease;
}
.eip-ds .ei-process-grid.visible .ei-process-step::before { opacity:1; transform:scale(1); }
.eip-ds .ei-process-step:hover::before { box-shadow:0 0 0 5px rgba(165,180,252,.14); }

.eip-ds .ei-step-num {
    width:auto; height:auto; margin:0 0 12px; display:block; text-align:left;
    background:transparent; border:0; border-radius:0; box-shadow:none;
    font-family:var(--h-mono); font-size:11px; font-weight:500;
    letter-spacing:.14em; color:var(--h-mute);
    transition:color .2s ease;
}
.eip-ds .ei-step-num::before { content:'0'; }        /* 1 → 01 */
.eip-ds .ei-process-step:hover .ei-step-num { color:var(--h-accent-soft); }
.eip-ds .ei-process-step h4 { font-size:16px; margin-bottom:10px; letter-spacing:-.02em; }
.eip-ds .ei-process-step p  { font-size:13.5px; line-height:1.65; color:var(--h-dim); }

@media (max-width:640px) {
    .eip-ds .ei-process-grid::before { display:none; }
    .eip-ds .ei-process-step { padding:22px 0 0; border-top:1px solid var(--h-line); }
    .eip-ds .ei-process-step::before { display:none; }
}

/* ── Trust badges ────────────────────────────────────────────────────────────
   A light divided row, not boxes — the stats block above already uses the
   bordered-strip treatment and repeating it here read as filler. The emoji
   are hidden: they clash with the monospace/hairline language.              */
.eip-ds .ei-trust-grid {
    display:flex; flex-wrap:wrap; justify-content:center; align-items:stretch;
    gap:0; max-width:920px; border:0;
}
.eip-ds .ei-trust-icon { display:none; }
.eip-ds .ei-trust-badge {
    background:transparent; border:0; border-left:1px solid var(--h-line);
    border-radius:0; padding:8px 38px; text-align:center;
    opacity:0; transform:translateY(10px);
    transition:opacity .5s ease, transform .5s cubic-bezier(.2,.7,.2,1);
}
.eip-ds .ei-trust-badge:first-child { border-left:0; }
.eip-ds .ei-trust-badge:hover { background:transparent; border-color:var(--h-line); }
.eip-ds .ei-reveal.visible .ei-trust-badge,
.eip-ds .ei-trust-grid.visible .ei-trust-badge { opacity:1; transform:none; }
.eip-ds .ei-reveal.visible .ei-trust-badge:nth-child(1) { transition-delay:.10s; }
.eip-ds .ei-reveal.visible .ei-trust-badge:nth-child(2) { transition-delay:.20s; }
.eip-ds .ei-reveal.visible .ei-trust-badge:nth-child(3) { transition-delay:.30s; }
.eip-ds .ei-reveal.visible .ei-trust-badge:nth-child(4) { transition-delay:.40s; }
.eip-ds .ei-reveal.visible .ei-trust-badge:nth-child(5) { transition-delay:.50s; }
.eip-ds .ei-trust-value {
    font-family:var(--h-mono); font-weight:500; font-size:15px;
    letter-spacing:-.02em; color:var(--h-text);
}
.eip-ds .ei-trust-label {
    font-family:var(--h-mono); font-size:10px; text-transform:uppercase;
    letter-spacing:.12em; color:var(--h-mute); margin-top:5px;
}
@media (max-width:640px) {
    .eip-ds .ei-trust-badge { padding:8px 20px; }
    .eip-ds .ei-trust-badge:nth-child(odd) { border-left:0; }
}

/* Motion is decoration here — everything must still be readable without it. */
@media (prefers-reduced-motion: reduce) {
    .eip-ds .ei-process-grid::before { transform:scaleX(1); transition:none; }
    .eip-ds .ei-process-step,
    .eip-ds .ei-process-step::before,
    .eip-ds .ei-trust-badge { opacity:1; transform:none; transition:none; }
    .eip-ds .ei-glass-card:hover { transform:none; }
    .eip-ds .ei-intern-card:hover .ei-card-banner img { transform:none; }
    .eip-ds .ei-marquee-track, .eip-ds .ei-reviews-track { animation:none; }
    .eip-ds .ei-stats-grid > div,
    .eip-ds .ei-reveal > .ei-glass-card { opacity:1; transform:none; transition:none; }
    .eip-ds .ei-glass-card:not(.ei-price-card)::after, .eip-ds .ei-review-card::after { display:none; }
    .eip-progress { display:none; }
}

/* ── Reviews ─────────────────────────────────────────────────────────────── */
.eip-ds .ei-review-card { background:var(--h-surface); border:1px solid var(--h-line); border-radius:10px; box-shadow:none; }
.eip-ds .ei-review-time { font-family:var(--h-mono); font-size:10.5px; letter-spacing:.06em; color:var(--h-mute); }

/* ── Form controls ───────────────────────────────────────────────────────── */
.eip-ds .ei-modal { border-radius:12px; }
.eip-ds .ei-modal input, .eip-ds .ei-modal select {
    border-radius:8px; background:var(--h-surface); border:1px solid var(--h-line);
}
.eip-ds .ei-modal input:focus, .eip-ds .ei-modal select:focus { border-color:var(--h-line-hi); }
.eip-ds .ei-modal label {
    font-family:var(--h-mono); font-size:10.5px; text-transform:uppercase;
    letter-spacing:.12em; color:var(--h-mute);
}

/* ── Nav ─────────────────────────────────────────────────────────────────── */
.eip-ds .ei-nav-link { font-size:13.5px; letter-spacing:-.01em; border-radius:6px; }

/* ── Modal scroll containment ────────────────────────────────────────────────
   Pairs with the scroll lock in design-system.js. overscroll-behavior stops a
   wheel gesture inside the dialog from chaining to the page once the dialog
   has hit its own scroll end — the lock handles the area outside it.        */
.eip-ds .ei-modal-overlay { overscroll-behavior: contain; }
.eip-ds .ei-modal { overscroll-behavior: contain; }
body.eip-modal-open { overflow: hidden; }

/* ── Motion layer ────────────────────────────────────────────────────────── */

/* Scroll progress. scaleX on a fixed bar — no layout work per frame. */
.eip-progress {
    position:fixed; top:0; left:0; right:0; height:2px; z-index:60;
    background:linear-gradient(90deg,var(--h-accent),#67E8F9);
    transform:scaleX(0); transform-origin:left;
    will-change:transform; pointer-events:none;
}

/* Nav tightens once you leave the hero. */
.eip-ds header.fixed, .eip-ds .ei-nav { transition:height .25s ease, background-color .25s ease, border-color .25s ease; }
.eip-ds .eip-nav-scrolled { background:rgba(8,9,10,.92) !important; border-bottom-color:var(--h-line-hi) !important; }
.eip-ds .eip-nav-scrolled > div { height:56px; transition:height .25s ease; }

/* Cursor spotlight. JS feeds --mx/--my; the highlight only paints on hover so
   idle cards cost nothing. */
.eip-ds .ei-glass-card, .eip-ds .ei-process-step, .eip-ds .ei-review-card { position:relative; }
/* .ei-price-card.popular renders its "BEST VALUE" badge through ::after (see
   internship.css). Claiming the same pseudo-element here at equal specificity
   merged the two: opacity:0 hid the badge, inset:0 stretched it to full card
   height, and the hover state then painted it as a solid indigo slab over the
   content. Price cards are excluded so the badge keeps its own ::after. */
.eip-ds .ei-glass-card:not(.ei-price-card)::after,
.eip-ds .ei-review-card::after {
    content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
    background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%),
               rgba(129,140,248,.10), transparent 42%);
    opacity:0; transition:opacity .3s ease;
}
.eip-ds .ei-glass-card:not(.ei-price-card):hover::after,
.eip-ds .ei-review-card:hover::after { opacity:1; }

/* Stats cells arrive one after another instead of the panel appearing whole. */
.eip-ds .ei-stats-grid > div {
    opacity:0; transform:translateY(12px);
    transition:opacity .5s ease, transform .5s cubic-bezier(.2,.7,.2,1), background .2s ease;
}
.eip-ds .ei-stats-grid.visible > div { opacity:1; transform:none; }
.eip-ds .ei-stats-grid.visible > div:nth-child(1) { transition-delay:.06s; }
.eip-ds .ei-stats-grid.visible > div:nth-child(2) { transition-delay:.16s; }
.eip-ds .ei-stats-grid.visible > div:nth-child(3) { transition-delay:.26s; }
.eip-ds .ei-stats-grid.visible > div:nth-child(4) { transition-delay:.36s; }

/* Same for any grid of cards revealed as one block (the ecosystem row). */
.eip-ds .ei-reveal > .ei-glass-card {
    opacity:0; transform:translateY(16px);
    transition:opacity .55s ease, transform .55s cubic-bezier(.2,.7,.2,1),
               border-color .2s ease, background .2s ease, box-shadow .25s ease;
}
.eip-ds .ei-reveal.visible > .ei-glass-card { opacity:1; transform:none; }
.eip-ds .ei-reveal.visible > .ei-glass-card:nth-child(1) { transition-delay:.08s; }
.eip-ds .ei-reveal.visible > .ei-glass-card:nth-child(2) { transition-delay:.20s; }
.eip-ds .ei-reveal.visible > .ei-glass-card:nth-child(3) { transition-delay:.32s; }
.eip-ds .ei-reveal.visible > .ei-glass-card:hover { transform:translateY(-4px); }

/* Icon tiles inside those cards react to the card, not just themselves. */
.eip-ds .ei-glass-card > div:first-child > svg { transition:transform .3s cubic-bezier(.2,.7,.2,1); }
.eip-ds .ei-glass-card:hover > div:first-child > svg { transform:scale(1.12) rotate(-4deg); }

/* Footer links slide toward the cursor. */
.eip-ds .ei-footer-links a, .eip-ds .ei-footer-contact a {
    display:inline-block; transition:color .18s ease, transform .18s ease;
}
.eip-ds .ei-footer-links a:hover, .eip-ds .ei-footer-contact a:hover {
    color:var(--h-text); transform:translateX(3px);
}
.eip-ds .ei-social-icon { transition:transform .22s cubic-bezier(.2,.7,.2,1), opacity .2s ease; }
.eip-ds .ei-social-icon:hover { transform:translateY(-3px) scale(1.1); opacity:1; }

/* Trust values count up via [data-to]; hold space so nothing jumps. */
.eip-ds .ei-trust-value { font-variant-numeric:tabular-nums; }

/* ── Pricing ─────────────────────────────────────────────────────────────── */
.eip-ds .eip-price-card { padding:26px 22px; display:flex; flex-direction:column; }
.eip-ds .eip-price-pop { border-color:rgba(99,102,241,.42) !important; }
.eip-ds .eip-price-badge {
    position:absolute; top:14px; right:14px;
    font-family:var(--h-mono); font-size:9px; font-weight:500; letter-spacing:.12em;
    padding:3px 8px; border-radius:4px; background:rgba(99,102,241,.16);
    border:1px solid rgba(99,102,241,.4); color:var(--h-accent-soft);
}
.eip-ds .eip-price-term { font-family:var(--h-mono); font-size:10px; text-transform:uppercase; letter-spacing:.16em; color:var(--h-mute); }
.eip-ds .eip-price-card h3 { font-size:17px; margin:8px 0 12px; }
.eip-ds .eip-price-amt { font-family:var(--h-mono); font-size:32px; font-weight:500; letter-spacing:-.03em; color:var(--h-text); line-height:1; }
.eip-ds .eip-price-from { font-family:var(--h-mono); font-size:10px; text-transform:uppercase; letter-spacing:.14em; color:var(--h-mute); display:block; margin-bottom:5px; }
.eip-ds .eip-price-blurb { font-size:12.5px; line-height:1.6; color:var(--h-dim); margin:14px 0 16px; }
.eip-ds .eip-price-list { list-style:none; margin:0 0 20px; padding:0; display:flex; flex-direction:column; gap:9px; flex:1; }
.eip-ds .eip-price-list li { display:flex; align-items:flex-start; gap:9px; font-size:12.5px; color:var(--h-dim); line-height:1.5; }
.eip-ds .eip-price-list svg { width:13px; height:13px; flex-shrink:0; margin-top:3px; color:#34D399; }
.eip-ds .eip-price-note { max-width:660px; margin:34px auto 0; text-align:center; font-size:11.5px; line-height:1.7; color:var(--h-mute); }

/* ── FAQ ─────────────────────────────────────────────────────────────────── */
.eip-ds .eip-faq-wrap { max-width:780px; margin:0 auto; border-top:1px solid var(--h-line); }
.eip-ds .ei-faq-item { border-bottom:1px solid var(--h-line); }
.eip-ds .ei-faq-q {
    width:100%; display:flex; align-items:center; justify-content:space-between; gap:18px;
    background:none; border:0; cursor:pointer; text-align:left;
    padding:19px 2px; font-size:14.5px; font-weight:560; letter-spacing:-.01em;
    color:var(--h-text); font-family:inherit; transition:color .18s ease;
}
.eip-ds .ei-faq-q:hover { color:var(--h-accent-soft); }
.eip-ds .ei-faq-q svg { width:16px; height:16px; flex-shrink:0; color:var(--h-mute); transition:transform .28s cubic-bezier(.2,.7,.2,1), color .18s ease; }
.eip-ds .ei-faq-item.open .ei-faq-q svg { transform:rotate(135deg); color:var(--h-accent-soft); }
/* Collapse via max-height so it can animate — auto height cannot. */
.eip-ds .ei-faq-a { max-height:0; overflow:hidden; opacity:0; transition:max-height .35s cubic-bezier(.2,.7,.2,1), opacity .28s ease; }
.eip-ds .ei-faq-item.open .ei-faq-a { max-height:360px; opacity:1; }
.eip-ds .ei-faq-a p { margin:0 0 20px; font-size:13.5px; line-height:1.7; color:var(--h-dim); max-width:64ch; }

/* ── Closing CTA ─────────────────────────────────────────────────────────── */
.eip-ds .eip-final { position:relative; padding:104px 24px; text-align:center; overflow:hidden; border-top:1px solid var(--h-line); }
.eip-ds .eip-final::before {
    content:''; position:absolute; inset:0; pointer-events:none;
    background:radial-gradient(640px 300px at 50% 100%, rgba(99,102,241,.16), transparent 70%);
    animation:eip-breathe 9s ease-in-out infinite;
}
.eip-ds .eip-final-inner { position:relative; }
.eip-ds .eip-final h2 { font-size:clamp(30px,3.8vw,48px); line-height:1.08; margin:0 0 18px; }
.eip-ds .eip-final h2 em {
    font-style:normal;
    background:linear-gradient(100deg,#818CF8,#C7D2FE 40%,#67E8F9 70%,#818CF8);
    background-size:220% 100%; -webkit-background-clip:text; background-clip:text;
    color:transparent; -webkit-text-fill-color:transparent;
    filter:drop-shadow(0 0 24px rgba(129,140,248,.32));
    animation:eip-sheen 7s ease-in-out infinite;
}
.eip-ds .eip-final p { font-size:15px; line-height:1.65; color:var(--h-dim); max-width:520px; margin:0 auto 30px; }
.eip-ds .eip-final .eip-status { margin-bottom:24px; }

/* ── Price on programme cards ────────────────────────────────────────────────
   Cards previously showed no price at all, so browsing 20 programmes revealed
   nothing until you clicked into one. The figure is the cheapest active plan
   for that programme, read from the same rows the checkout uses.            */
.eip-ds .eip-card-price {
    display:flex; align-items:baseline; gap:6px; flex-wrap:wrap;
    font-family:var(--h-mono); font-size:17px; font-weight:500;
    letter-spacing:-.02em; color:var(--h-text);
    padding-top:12px; margin-bottom:14px; border-top:1px solid var(--h-line);
}
.eip-ds .eip-card-price span {
    font-size:9.5px; text-transform:uppercase; letter-spacing:.14em;
    color:var(--h-mute); font-weight:400;
}
.eip-ds .eip-card-price em {
    font-style:normal; font-size:9.5px; text-transform:uppercase;
    letter-spacing:.1em; color:#34D399; font-weight:400;
}

/* ── Detail-page pricing cards ───────────────────────────────────────────────
   The programme pages use .ei-price-* while the homepage block uses
   .eip-price-*, so the detail cards were still rendering with the old
   internship.css treatment — same page, two visual languages.              */
.eip-ds .ei-pricing-grid { grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:16px; max-width:1020px; margin:0 auto; }
.eip-ds .ei-price-card { padding:26px 22px; border-radius:10px; display:flex; flex-direction:column; }
.eip-ds .ei-price-duration {
    font-family:var(--h-mono); font-size:10px; text-transform:uppercase;
    letter-spacing:.16em; color:var(--h-mute);
}
.eip-ds .ei-price-amount {
    font-family:var(--h-mono); font-size:32px; font-weight:500;
    letter-spacing:-.03em; color:var(--h-text); line-height:1; margin:10px 0 6px;
    background:none; -webkit-text-fill-color:currentColor;
}
.eip-ds .ei-price-save { font-family:var(--h-mono); font-size:10.5px; letter-spacing:.06em; color:#34D399; min-height:15px; }
.eip-ds .ei-price-features { list-style:none; margin:18px 0 20px; padding:0; display:flex; flex-direction:column; gap:9px; flex:1; }
.eip-ds .ei-price-features li { display:flex; align-items:flex-start; gap:9px; font-size:12.5px; line-height:1.5; color:var(--h-dim); }
.eip-ds .ei-price-features svg { width:13px; height:13px; flex-shrink:0; margin-top:3px; color:#34D399; }

/* ── Programme detail page ───────────────────────────────────────────────────
   These pages predate the design system and still carry hardcoded 20–28px radii
   and heavy drop shadows inline. Normalised here rather than by editing 20
   inline style attributes.                                                   */
.eip-ds .ei-hero-image-wrapper img,
.eip-ds .ei-floating-img { border-radius:12px !important; box-shadow:0 24px 60px -30px rgba(0,0,0,.9) !important; }

.eip-ds .ei-back-btn {
    font-family:var(--h-mono); font-size:10.5px; text-transform:uppercase;
    letter-spacing:.12em; padding:8px 14px; border-radius:6px;
    background:var(--h-surface); border:1px solid var(--h-line); color:var(--h-dim);
    text-decoration:none; transition:color .18s ease, border-color .18s ease;
}
.eip-ds .ei-back-btn:hover { color:var(--h-text); border-color:var(--h-line-hi); }

/* Batch badge: hairline panel with a real icon instead of an emoji. */
.eip-ds .ei-batch-badge {
    background:var(--h-surface); border:1px solid var(--h-line); border-radius:10px;
    padding:14px 18px; gap:14px;
}
.eip-ds .ei-batch-icon {
    width:34px; height:34px; border-radius:8px; font-size:0;
    background:var(--h-surface-hi); border:1px solid var(--h-line-hi);
    display:flex; align-items:center; justify-content:center; color:var(--h-accent-soft);
    flex-shrink:0;
}
.eip-ds .ei-batch-icon svg { width:17px; height:17px; }
.eip-ds .ei-batch-text strong { font-size:14px; letter-spacing:-.01em; }
.eip-ds .ei-batch-text span {
    font-family:var(--h-mono); font-size:10.5px; text-transform:uppercase;
    letter-spacing:.1em; color:#F5A623;
}

/* Hero social proof — links down to the reviews strip. */
.eip-ds .eip-hero-proof { margin-top:16px; }
.eip-ds .eip-hero-proof a {
    display:inline-flex; align-items:center; gap:8px; text-decoration:none;
    font-family:var(--h-mono); font-size:11px; letter-spacing:.08em;
    text-transform:uppercase; color:var(--h-mute);
    transition:color .18s ease;
}
.eip-ds .eip-hero-proof a:hover { color:var(--h-text); }
.eip-ds .eip-hero-proof strong { color:var(--h-text); font-weight:500; }
.eip-ds .eip-proof-stars { color:#F5A623; letter-spacing:.06em; font-size:12px; }

/* ── Section rhythm ──────────────────────────────────────────────────────── */
.eip-ds .ei-section { padding:104px 0; }
@media (max-width:768px) {
    .ei-section { padding:72px 0; }
    .ei-stats-grid > div:nth-child(odd) { border-left:0; }
    .ei-stats-grid > div { border-top:1px solid var(--h-line); }
    .ei-stats-grid > div:nth-child(-n+2) { border-top:0; }
}