/* ============================================================
   Digital Sovereignty LP — dark, on-brand section components.
   Reuses adgrant.css primitives (.ag-hero, .ag-btn-primary, .sec-dark-*,
   .ag-sec-head, .ag-fade-up, .section-padding). Custom pieces = .sv-*.
   ============================================================ */

/* --- Section head extras --- */
.sv-label {
    display: inline-block;
    font-size: 13px;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 16px;
}
.sv-lead {
    max-width: 720px;
    margin: 18px auto 0;
    font-size: 17px;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.6);
}

/* --- Generic responsive grid --- */
.sv-grid { display: grid; gap: 24px; margin-top: 56px; }
.sv-grid--2 { grid-template-columns: repeat(2, 1fr); }
.sv-grid--3 { grid-template-columns: repeat(3, 1fr); }
.sv-grid--4 { grid-template-columns: repeat(4, 1fr); }
.sv-grid--5 { grid-template-columns: repeat(5, 1fr); }

/* --- Card --- */
.sv-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 34px 30px;
    background: #191919;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    overflow: hidden;
    transition: transform .5s cubic-bezier(.16, .84, .44, 1), border-color .5s ease, box-shadow .5s ease;
}
.sv-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, hsl(240 100% 50%), hsl(290 100% 55%), hsl(330 100% 55%));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .55s cubic-bezier(.16, .84, .44, 1);
}
.sv-card:hover { transform: translateY(-6px); border-color: rgba(255, 255, 255, 0.18); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45); }
.sv-card:hover::before { transform: scaleX(1); }

.sv-card__num {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: hsl(292 100% 74%);
    margin-bottom: 14px;
}
.sv-card__icon {
    width: 52px; height: 52px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 14px;
    margin-bottom: 20px;
    color: #fff;
    background: linear-gradient(145deg, rgba(0, 0, 255, 0.22), rgba(204, 0, 204, 0.12));
    border: 1px solid rgba(255, 255, 255, 0.1);
}
.sv-card__icon svg { width: 24px; height: 24px; }
.sv-card__title { font-size: 19px; line-height: 1.3; letter-spacing: 0; color: #fff; margin: 0 0 12px; }
.sv-card__desc { font-size: 15px; line-height: 1.62; color: rgba(255, 255, 255, 0.58); margin: 0; }
.sv-card__tag {
    align-self: flex-start;
    margin-bottom: 18px;
    font-size: 12px; font-weight: 600; letter-spacing: .5px;
    color: #fff;
    padding: 6px 12px; border-radius: 8px;
    background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12);
}

/* --- Feature list (icon left) --- */
.sv-features { margin-top: 46px; }
.sv-feature { display: flex; gap: 18px; align-items: flex-start; padding: 24px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.07); }
.sv-feature:first-child { padding-top: 0; }
.sv-feature:last-child { border-bottom: none; }
.sv-feature__icon {
    flex: 0 0 auto;
    width: 48px; height: 48px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 12px;
    color: #fff;
    background: linear-gradient(145deg, rgba(0, 0, 255, 0.22), rgba(204, 0, 204, 0.12));
    border: 1px solid rgba(255, 255, 255, 0.1);
}
.sv-feature__icon svg { width: 22px; height: 22px; }
.sv-feature__title { font-size: 18px; color: #fff; margin: 2px 0 6px; letter-spacing: 0; }
.sv-feature__desc { font-size: 15px; line-height: 1.62; color: rgba(255, 255, 255, 0.58); margin: 0; }

/* --- Use-case card --- */
.sv-case__region {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 12px; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase;
    color: hsl(292 100% 76%);
    margin-bottom: 14px;
}
.sv-case__region::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: hsl(292 100% 66%); box-shadow: 0 0 8px hsla(292, 100%, 60%, .7); }
.sv-case__client { font-size: 20px; color: #fff; margin: 0 0 12px; }

/* --- Steps (numbered, horizontal) --- */
.sv-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 52px; }
.sv-step {
    position: relative;
    padding: 30px 28px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 18px;
}
.sv-step__num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: 50%;
    font-size: 16px; font-weight: 700; color: #fff;
    background: linear-gradient(145deg, hsl(240 100% 55%), hsl(300 100% 55%));
    margin-bottom: 18px;
}
.sv-step__title { font-size: 18px; color: #fff; margin: 0 0 8px; letter-spacing: 0; }
.sv-step__desc { font-size: 14.5px; line-height: 1.55; color: rgba(255, 255, 255, 0.58); margin: 0; }

/* --- Trust / hosting badges --- */
.sv-badges { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 40px; }
.sv-badge {
    display: inline-flex; align-items: center; gap: 9px;
    padding: 11px 18px; border-radius: 100px;
    background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.12);
    font-size: 13.5px; font-weight: 500; color: rgba(255, 255, 255, 0.82);
}
.sv-badge svg { width: 16px; height: 16px; color: hsl(150 70% 55%); }

/* --- Contact line --- */
.sv-contact {
    display: flex; flex-wrap: wrap; gap: 8px 28px; justify-content: center;
    margin-top: 34px; font-size: 15px; color: rgba(255, 255, 255, 0.65);
}
.sv-contact span { color: #fff; font-weight: 600; }
.sv-contact a { color: rgba(255, 255, 255, 0.85); }
.sv-contact a:hover { color: #fff; }

/* --- Hero highlight --- */
.sv-hero-badges { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.sv-pill {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 15px; border-radius: 100px;
    background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.14);
    font-size: 13px; color: rgba(255, 255, 255, 0.82);
}
.sv-pill i { width: 6px; height: 6px; border-radius: 50%; background: hsl(292 100% 66%); box-shadow: 0 0 8px hsla(292, 100%, 60%, .7); font-style: normal; }

/* --- Responsive --- */
@media (max-width: 1199px) {
    .sv-grid--5 { grid-template-columns: repeat(3, 1fr); }
    .sv-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 991px) {
    .sv-grid--2, .sv-grid--3, .sv-grid--4, .sv-grid--5, .sv-steps { grid-template-columns: 1fr; max-width: 560px; margin-left: auto; margin-right: auto; }
    .sv-grid { margin-top: 40px; }
}

/* --- Respect reduced motion --- */
@media (prefers-reduced-motion: reduce) {
    .sv-card, .sv-card::before { transition: none; }
    .sv-card:hover { transform: none; }
    .sv-card:hover::before { transform: scaleX(1); }
}

/* ═══════════════════════════════════════════════════════════
   The Challenge — Penguin-style pinned deck (Your Independence)
   Fallback = clean stacked list; .pk--live (JS, desktop) = pinned deck
   ═══════════════════════════════════════════════════════════ */
.pk { position: relative; }
/* --- fallback (no JS / mobile): simple stacked list --- */
.pk__eyebrow, .pk__progress, .pk__cards { display: none; }
.pk__chapter { margin: 0 0 48px; }
.pk__chapter:last-child { margin-bottom: 0; }
.pk__meta { display: flex; align-items: baseline; gap: 12px; margin-bottom: 14px; }
.pk__num { font-family: "Playfair Display", serif; font-size: 22px; color: #fff; line-height: 1; }
.pk__cat { font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: rgba(255, 255, 255, .5); }
.pk__title { font-family: "Playfair Display", serif; font-weight: 500; font-size: clamp(32px, 3.6vw, 60px); line-height: 1.05; color: #fff; margin: 0 0 20px; }
.pk__rule { width: 120px; height: 1px; background: rgba(255, 255, 255, .35); margin: 0 0 22px; }
.pk__desc { font-size: 16px; line-height: 1.7; color: rgba(255, 255, 255, .6); max-width: 440px; margin: 0; }

/* --- live (desktop, JS): pinned rotating deck --- */
.pk--live { min-height: 100vh; display: flex; align-items: center; overflow: hidden; }
.pk--live .pk__inner { display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: 48px; width: 100%; }
.pk--live .pk__eyebrow { display: block; font-family: "Playfair Display", serif; font-style: italic; font-size: 20px; color: rgba(255, 255, 255, .7); margin: 0 0 44px; }
.pk--live .pk__stage { position: relative; min-height: 340px; }
.pk--live .pk__chapter { position: absolute; inset: 0; margin: 0; opacity: 0; transform: translateY(30px); transition: opacity .55s ease, transform .6s cubic-bezier(.16, .84, .44, 1); pointer-events: none; }
.pk--live .pk__chapter.is-active { opacity: 1; transform: none; pointer-events: auto; }
.pk--live .pk__progress { display: block; position: relative; width: 100%; max-width: 460px; height: 2px; margin-top: 8px; background: rgba(255, 255, 255, .14); border-radius: 2px; overflow: hidden; }
.pk--live .pk__bar { position: absolute; inset: 0; transform-origin: left center; transform: scaleX(0); background: linear-gradient(90deg, hsl(240 100% 60%), hsl(300 100% 60%), hsl(0 100% 60%)); }

.pk--live .pk__cards { display: block; position: relative; height: 400px; }
.pk__card { position: absolute; left: 50%; top: 50%; width: 300px; height: 340px; margin: -170px 0 0 -150px; padding: 22px; border-radius: 20px; background: linear-gradient(160deg, #17171a 0%, #0c0c0f 100%); border: 1px solid rgba(255, 255, 255, .1); box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .75); overflow: hidden; display: flex; flex-direction: column; transform-origin: center; will-change: transform, opacity; }
.pk__card-head { font-family: "Playfair Display", serif; font-size: 17px; color: rgba(255, 255, 255, .9); }
.pk__card-glyph { flex: 1; display: flex; align-items: center; justify-content: center; }
.pk__card-glyph svg { width: 92px; height: 92px; color: rgba(255, 255, 255, .82); }
.pk__card-num { align-self: flex-end; font-family: "Playfair Display", serif; font-size: 54px; line-height: 1; color: rgba(255, 255, 255, .92); }

@media (prefers-reduced-motion: reduce) {
    .pk--live .pk__chapter { transition: none; }
}

/* ═══════════════════════════════════════════════════════════
   The Tools — sovereign suite "replaces X" value cards
   ═══════════════════════════════════════════════════════════ */
.sv-tools { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.sv-tool {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 32px 28px 28px;
    background: #191919;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 20px;
    overflow: hidden;
    transition: transform .5s cubic-bezier(.16, .84, .44, 1), border-color .5s ease, box-shadow .5s ease;
}
.sv-tool::before {
    content: "";
    position: absolute;
    left: 0; top: 0;
    width: 100%; height: 3px;
    background: linear-gradient(90deg, hsl(240 100% 60%), hsl(290 100% 60%), hsl(330 100% 60%));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .45s cubic-bezier(.16, .84, .44, 1);
}
.sv-tool:hover { transform: translateY(-6px); border-color: rgba(255, 255, 255, .18); box-shadow: 0 24px 60px rgba(0, 0, 0, .45); }
.sv-tool:hover::before { transform: scaleX(1); }
.sv-tool:hover .sv-tool__icon { transform: translateY(-2px) scale(1.05); }
.sv-tool__icon {
    width: 52px; height: 52px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 14px; margin-bottom: 20px;
    color: #fff;
    background: linear-gradient(145deg, rgba(0, 0, 255, .22), rgba(204, 0, 204, .12));
    border: 1px solid rgba(255, 255, 255, .1);
    transition: transform .45s cubic-bezier(.16, .84, .44, 1);
}
.sv-tool__icon svg { width: 24px; height: 24px; }
.sv-tool__name { font-size: 19px; font-weight: 700; color: #fff; letter-spacing: -.2px; margin: 0 0 12px; }
.sv-tool__caps {
    display: flex; flex-wrap: wrap; gap: 7px;
    margin: 0 0 18px;
}
.sv-tool__caps span {
    font-size: 11.5px; font-weight: 500;
    padding: 3px 11px; border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, .13);
    background: rgba(255, 255, 255, .025);
    color: rgba(255, 255, 255, .6);
}
.sv-tool__desc { font-size: 14.5px; line-height: 1.6; color: rgba(255, 255, 255, .58); margin: 0; }
@media (max-width: 991px) { .sv-tools { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .sv-tools { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) {
    .sv-tool, .sv-tool::before, .sv-tool__icon { transition: none; }
}

/* ═══════════════════════════════════════════════════════════
   Methodology — "UX First / ROI First" editorial principles
   ═══════════════════════════════════════════════════════════ */
.method { max-width: 940px; margin: 0 auto; }
.method__row {
    display: grid;
    grid-template-columns: 84px 1fr;
    gap: clamp(24px, 4vw, 54px);
    align-items: start;
    padding: clamp(38px, 5vw, 60px) 0;
    border-top: 1px solid rgba(255, 255, 255, .1);
}
.method__row:last-child { border-bottom: 1px solid rgba(255, 255, 255, .1); }
.method__mark {
    width: 72px; height: 72px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 18px; color: #fff;
    background: linear-gradient(145deg, rgba(0, 0, 255, .28), rgba(204, 0, 204, .16));
    border: 1px solid rgba(255, 255, 255, .12);
}
.method__mark svg { width: 34px; height: 34px; }
.method__title {
    font-family: "Playfair Display", serif; font-weight: 500;
    font-size: clamp(30px, 3.6vw, 48px); line-height: 1.05;
    color: #fff; margin: 0 0 8px;
}
.method__title em {
    padding: 0px 9px 0px 0px;
    font-style: italic;
    background: linear-gradient(100deg, hsl(240 100% 72%), hsl(300 100% 72%), hsl(0 100% 70%));
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.method__sub { font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: rgba(255, 255, 255, .45); margin: 0 0 18px; }
.method__desc { font-size: 16px; line-height: 1.7; color: rgba(255, 255, 255, .62); margin: 0; max-width: 640px; }
.method__desc strong { color: #fff; font-weight: 600; }
@media (max-width: 767px) {
    .method__row { grid-template-columns: 1fr; gap: 18px; }
    .method__mark { width: 60px; height: 60px; }
    .method__mark svg { width: 28px; height: 28px; }
}

/* ═══════════════════════════════════════════════════════════
   Credibility strip — early proof after The Challenge
   ═══════════════════════════════════════════════════════════ */

.sv-proof {    margin-top: -80px; background: #0d0d0d; border-top: 1px solid rgba(255, 255, 255, .06); border-bottom: 1px solid rgba(255, 255, 255, .06); padding: 36px 0; }
.sv-proof__inner { display: flex; flex-direction: column; align-items: center; gap: 22px; text-align: center; }
.sv-proof__lead { font-size: clamp(16px, 1.7vw, 19px); letter-spacing: .01em; color: rgba(255, 255, 255, .72); margin: 0 0 6px; }
.sv-proof__lead strong { color: #fff; font-weight: 600; }
.sv-proof__geo { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 30px; }
.sv-proof__geo span { position: relative; font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .72); }
.sv-proof__geo span:not(:last-child)::after { content: "·"; position: absolute; right: -16px; color: rgba(255, 255, 255, .28); }
section#challenge {
    margin-bottom: 80px;
}
@media (max-width: 600px) { .sv-proof__geo { gap: 8px 24px; } .sv-proof__geo span:not(:last-child)::after { right: -13px; } }

/* ─ Case result metric (in The Experience slides) ─ */
.sv-exp__metric { display: flex; align-items: baseline; gap: 11px; margin-top: 20px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .1); }
.sv-exp__stat { font-size: 34px; font-weight: 800; line-height: 1; letter-spacing: -.02em; color: #fff; }
.sv-exp__metric--blue .sv-exp__stat { color: hsl(224 100% 73%); }
.sv-exp__metric--violet .sv-exp__stat { color: hsl(288 100% 75%); }
.sv-exp__metric--pink .sv-exp__stat { color: hsl(336 100% 72%); }
.sv-exp__stat-cap { font-size: 12.5px; font-weight: 500; letter-spacing: .05em; text-transform: uppercase; color: rgba(255, 255, 255, .55); }

/* ─ Mid-page CTA — captures the proof peak ─ */
.sv-midcta { padding: 58px 0; background: #0f0f0f; }
.sv-midcta__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 20px 32px; text-align: center; }
.sv-midcta__text { font-size: 21px; font-weight: 600; letter-spacing: -.01em; color: #fff; margin: 0; }
.sv-midcta .crv-butn { flex: 0 0 auto; }
@media (max-width: 600px) { .sv-midcta { padding: 42px 0; } .sv-midcta__text { font-size: 18px; } }

/* ─ Funding reassurance at the final CTA ─ */
.sv-fund { margin: 20px auto 0; max-width: 440px; font-size: 13.5px; line-height: 1.55; color: rgba(255, 255, 255, .5); }
.sv-fund strong { color: rgba(255, 255, 255, .82); font-weight: 600; }

/* ─ Final CTA — Ad-Grants-inspired layout (.ag-final-cta: eyebrow, Playfair-gradient keyword,
   reassurance pills, radial ornaments) kept on the page's DARK theme.
   A lone light section read as inconsistent on an all-dark vault LP, so we re-tint for dark. */
#start.ag-final-cta { background: linear-gradient(180deg, #141414 0%, #0f0f0f 100%); }
.ag-final-cta .crv-butn { display: inline-flex; margin-top: 4px; }
#start h2, #start .ag-reveal { color: #fff; }
#start .final-cta__eyebrow { color: rgba(255, 255, 255, .5); font-size: 18px; }
#start .urgency-text { color: rgba(255, 255, 255, .62); }
#start .urgency-text strong { color: #fff; }
#start .final-cta__pill { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .14); color: rgba(255, 255, 255, .72); }
#start .final-cta__pill svg { color: hsl(276 100% 74%); }
.ag-final-cta .sv-contact { margin-top: 34px; }

/* ═══════════════════════════════════════════════════════════
   The Tools — cards that OPEN as they pass viewport centre (faithful to sui.io)
   Normal scroll (NOT pinned); sticky rail + node stays centred; each card's body
   collapses (height 0) and expands when it reaches the centre. Mobile = static.
   ═══════════════════════════════════════════════════════════ */
.sv-tl { position: relative; background: var(--ag-dark-a, #151515); padding: 40px 0 80px; }
.sv-tl .ag-sec-head { margin-bottom: 10px; }
.sv-tl__flow { position: relative; display: grid; grid-template-columns: 1fr; max-width: 1040px; margin: 0 auto; }
.sv-tl__rail, .sv-tl__list { grid-area: 1 / 1; }

/* sticky central rail — stays centred in the viewport while cards scroll past */
.sv-tl__rail { position: sticky; top: 0; height: 100vh; width: 4px; justify-self: center; align-self: start; z-index: 0; pointer-events: none; }
.sv-tl__rail::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle at center, rgba(255,255,255,.32) 1.1px, transparent 1.6px); background-size: 4px 13px; background-repeat: repeat-y; background-position: center; -webkit-mask-image: linear-gradient(to bottom, transparent 28%, #000 44%, #000 56%, transparent 72%); mask-image: linear-gradient(to bottom, transparent 28%, #000 44%, #000 56%, transparent 72%); }
.sv-tl__rail-fill { display: none; }
.sv-tl__rail-node { position: absolute; left: 50%; top: 50%; width: 20px; height: 17px; transform: translate(-50%, -50%); background: linear-gradient(140deg, #0000FF, #7300FF, #AA00FF, #FF00E1, #FF0073, #FF0000); clip-path: polygon(50% 0%, 100% 100%, 0% 100%); filter: drop-shadow(0 0 7px rgba(160,70,255,.6)); z-index: 2; }

/* card slots — each fills ~a screen so one reaches centre at a time; alternating sides */
.sv-tl__list { position: relative; z-index: 1; }
.sv-tl__slide { min-height: 82vh; display: flex; align-items: center; }
.sv-tl__slide[data-align="right"] { justify-content: flex-end; }
.sv-tl__slide[data-align="left"] { justify-content: flex-start; }
.sv-tl__frame { width: 47%; border: 1px solid rgba(255,255,255,.16); border-radius: 5px; background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01)); overflow: hidden; transition: border-color .45s ease, box-shadow .45s ease; }
.sv-tl__slide.is-active .sv-tl__frame { border-color: color-mix(in srgb, var(--accent) 46%, rgba(255,255,255,.16)); box-shadow: 0 30px 80px -40px rgba(0,0,0,.85); }
.sv-tl__bar { display: flex; align-items: stretch; }
.sv-tl__idx { display: flex; align-items: center; padding: 0 16px; border-right: 1px solid rgba(255,255,255,.14); font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: 15px; color: var(--accent, #fff); }
.sv-tl__cat { padding: 15px 18px; font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: 13.5px; letter-spacing: 1.5px; text-transform: uppercase; color: #fff; line-height: 1.2; }
.sv-tl__ltr { display: inline-block; will-change: transform, opacity; }
.sv-tl__body { height: 0; overflow: hidden; border-top: 1px solid rgba(255,255,255,.14); }
.sv-tl__viz { padding: 22px 24px 12px; display: flex; justify-content: center; }
.sv-tl__viz .iso { width: 100%; max-width: 300px; height: auto; color: var(--accent, #fff); opacity: 0; }
.iso-grid { stroke: rgba(255,255,255,.12); stroke-width: 1; }
.iso-cube { stroke: rgba(255,255,255,.42); stroke-width: 1.2; }
.iso-link { stroke: var(--accent, #fff); stroke-width: 1.4; opacity: .85; }
.iso-node { fill: #0f0f0f; stroke: rgba(255,255,255,.5); stroke-width: 1.4; }
.iso-node--hot { fill: var(--accent, #fff); stroke: var(--accent, #fff); }
.sv-tl__foot { padding: 4px 18px 18px; }
.sv-tl__caps { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.sv-tl__caps span { font-size: 11px; font-weight: 500; padding: 2px 10px; border-radius: 20px; border: 1px solid rgba(255,255,255,.13); background: rgba(255,255,255,.025); color: rgba(255,255,255,.6); }
.sv-tl__desc { font-size: 13.5px; line-height: 1.55; color: rgba(255,255,255,.56); margin: 0; }

/* tablet/mobile — static stacked list, all open, no sticky rail */
@media (max-width: 991px) {
    .sv-proof {    margin-top: 80px; }
    .sv-tl__rail { display: none; }
    .sv-tl__slide { min-height: 0; margin-bottom: 22px; }
    .sv-tl__slide[data-align="left"], .sv-tl__slide[data-align="right"] { justify-content: stretch; }
    .sv-tl__frame { width: 100%; max-width: 520px; margin: 0 auto; }
    .sv-tl__body { height: auto !important; }
    .sv-tl__viz .iso { opacity: 1 !important; }
}
@media (max-width: 480px) {
    .ag-hero .caption h1 {
        font-size: 40px;
    }
    /* Section headings a touch larger on phones (was 24px) so the hierarchy holds under the 40px hero.
       #start h2 included so the final CTA heading matches the other sections on mobile (was 24px). */
    .ag-sec-head h2, #start h2 {
        font-size: 28px;
    }
}

/* ─ Animated per-tool illustrations (CSS keyframes; disabled under reduced motion) ─ */
.iso .v-line { stroke: rgba(255,255,255,.42); stroke-width: 1.4; fill: none; }
.iso .v-dim { stroke: rgba(255,255,255,.15); stroke-width: 1.2; fill: none; }
.iso .v-dim2 { stroke: rgba(255,255,255,.22); stroke-width: 1.3; fill: none; }
.iso .v-dim-fill { fill: rgba(255,255,255,.3); }
.iso .v-card { fill: rgba(255,255,255,.035); stroke: rgba(255,255,255,.38); stroke-width: 1.4; }
.iso .v-accent { stroke: currentColor; stroke-width: 1.7; fill: none; }
.iso .v-accent-fill { fill: currentColor; stroke: none; }
.iso .v-barhot { fill: color-mix(in srgb, currentColor 22%, transparent); stroke: currentColor; stroke-width: 1.3; }
.iso .v-node { fill: #0f0f0f; stroke: rgba(255,255,255,.55); stroke-width: 1.4; }
.iso .v-float { animation: vFloat 3.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.iso .v-spin { animation: vSpin 15s linear infinite; transform-box: view-box; transform-origin: 150px 100px; }
.iso .v-spin-slow { animation: vSpin 10s linear infinite; transform-box: view-box; transform-origin: 150px 100px; }
.iso .v-spin-rev { animation: vSpin 15s linear infinite reverse; transform-box: view-box; transform-origin: 150px 100px; }
.iso .v-pulse { animation: vPulse 2.8s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.iso .v-pulse2 { animation: vPulse 2.8s ease-in-out infinite .35s; transform-box: fill-box; transform-origin: center; }
.iso .v-type { animation: vType 1.3s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.iso .v-bar { animation: vBar 2.6s ease-in-out infinite; transform-box: fill-box; transform-origin: bottom; }
.iso .v-flow { animation: vFlow 2.4s ease-in infinite; }
.iso .v-draw { animation: vDraw 4.2s ease-in-out infinite; transform-box: fill-box; transform-origin: left center; }
@keyframes vFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes vSpin { to { transform: rotate(360deg); } }
@keyframes vPulse { 0%, 100% { transform: scale(1); opacity: .85; } 50% { transform: scale(1.13); opacity: 1; } }
@keyframes vType { 0%, 72%, 100% { transform: translateY(0); opacity: .5; } 34% { transform: translateY(-5px); opacity: 1; } }
@keyframes vBar { 0%, 100% { transform: scaleY(.45); } 50% { transform: scaleY(1); } }
@keyframes vFlow { 0% { transform: translateY(0); opacity: 0; } 16% { opacity: 1; } 84% { opacity: 1; } 100% { transform: translateY(62px); opacity: 0; } }
@keyframes vDraw { 0% { transform: scaleX(0); } 32% { transform: scaleX(1); } 90% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
@media (prefers-reduced-motion: reduce) {
    .iso .v-float, .iso .v-spin, .iso .v-spin-slow, .iso .v-spin-rev, .iso .v-pulse, .iso .v-pulse2, .iso .v-type, .iso .v-bar, .iso .v-flow, .iso .v-draw { animation: none !important; }
}


/* ─ Animated proof stats (credibility strip) — restored ─ */
.sv-proof__stats { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: center; gap: 26px 56px; }
.sv-stat { display: flex; flex-direction: column; align-items: center; gap: 7px; min-width: 96px; }
.sv-stat__num { font-size: clamp(32px, 4vw, 42px); font-weight: 800; letter-spacing: -1px; line-height: 1; background: linear-gradient(180deg, #fff, rgba(255, 255, 255, .55)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sv-stat__label { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: rgba(255, 255, 255, .5); text-align: center; }
@media (max-width: 600px) { .sv-proof__stats { gap: 22px 30px; } }


/* ─ Final CTA as a Sui-style "start" step list (methodology folded in) ─ */
.sv-start { max-width: 1000px; margin: 40px auto 8px; text-align: left; }
.sv-start__row { position: relative; display: grid; grid-template-columns: 1fr minmax(0, 300px); align-items: center; gap: 14px 48px; padding: 30px 26px; border-top: 1px dotted rgba(255, 255, 255, .18); text-decoration: none; }
.sv-start__title::before { content: ""; display: inline-block; width: 0.44em; height: 0.4em; margin-right: 0.32em; vertical-align: 0.08em; background: linear-gradient(140deg, #0000FF, #7300FF, #AA00FF, #FF00E1, #FF0073, #FF0000); clip-path: polygon(50% 0%, 100% 100%, 0% 100%); filter: drop-shadow(0 0 0.12em rgba(160,70,255,.5)); }
.sv-start__title { font-size: clamp(28px, 4.4vw, 52px); font-weight: 600; letter-spacing: -1.5px; line-height: 1.02; color: #fff; margin: 0; }
.sv-start__desc { font-size: 15px; line-height: 1.55; color: rgba(255, 255, 255, .58); margin: 0; }
.sv-start__row--cta { margin-top: 16px; padding-right: 66px; border: 1px solid rgba(0, 0, 255, .45); border-radius: 6px; background: rgba(0, 0, 255, .1); transition: background .35s ease; }
.sv-start__row--cta .sv-start__title::before { background: #fff; filter: none; }
.sv-start__row--cta:hover { background: #0000FF; border-color: #0000FF; }
.sv-start__row--cta .sv-start__title { font-size: clamp(26px, 3.4vw, 40px); }
.sv-start__row--cta:hover .sv-start__desc { color: rgba(255, 255, 255, .88); }
.sv-start__arrow { position: absolute; right: 28px; top: 50%; transform: translateY(-50%); font-size: 30px; line-height: 1; color: #fff; transition: transform .35s ease; }
.sv-start__row--cta:hover .sv-start__arrow { transform: translate(6px, -50%); }
@media (max-width: 700px) {
    .sv-start__row { grid-template-columns: 1fr; gap: 8px; padding: 22px 18px; }
    .sv-start__row::before { left: 18px; }
    .sv-start__row--cta { padding-right: 48px; }
    .sv-start__arrow { right: 18px; font-size: 24px; }
}

/* ─ Persistent (sticky) "Book a UX workshop" CTA ─ */
.sv-sticky-cta { position: fixed; right: 22px; bottom: 22px; z-index: 90; display: inline-flex; align-items: center; gap: 10px; padding: 13px 22px; border-radius: 100px; background: #0000FF; color: #fff; font-size: 14px; font-weight: 600; text-decoration: none; box-shadow: 0 14px 40px -12px rgba(0, 0, 255, .7); opacity: 0; transform: translateY(18px); pointer-events: none; transition: opacity .4s ease, transform .4s ease; }
.sv-sticky-cta.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.sv-sticky-cta:hover { color: #fff; background: #0033cc; }
.sv-sticky-cta__arw { font-size: 16px; }
@media (max-width: 600px) { .sv-sticky-cta { right: 14px; bottom: 14px; padding: 11px 18px; font-size: 13px; } }


/* ─ Problem — tighten the trimmed hook + subtle depth (no longer has 3 cards) ─ */
#problem { position: relative; overflow: hidden; }
#problem.section-padding { padding-top: clamp(90px, 12vh, 148px); padding-bottom: clamp(90px, 12vh, 148px); }
#problem::before { content: ""; position: absolute; left: 50%; top: 44%; width: min(880px, 92vw); height: 520px; transform: translate(-50%, -50%); background: radial-gradient(50% 50% at 50% 50%, rgba(110, 60, 255, .12), transparent 70%); pointer-events: none; z-index: 0; }
#problem .container { position: relative; z-index: 1; }
#problem .ag-sec-head { margin-bottom: 0; }


/* ─ Problem — readability: lighter gradient question + higher-contrast lead (scoped, does not touch the homepage .gradient_color) ─ */
#problem .sv-punch .gradient_color { background: linear-gradient(90deg, hsl(240 100% 66%), hsl(290 100% 70%), hsl(330 100% 68%), hsl(0 100% 64%)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
#problem .sv-lead { color: rgba(255, 255, 255, .76); }


/* ─ Use-case client logos (medallions replaced — option B) ─ */
.sv-exp__logo { position: relative; z-index: 2; width: 62%; height: 62%; display: flex; align-items: center; justify-content: center; }
.sv-exp__logo img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.sv-exp__logo--invert img { filter: brightness(0) invert(1); }
.sv-exp__logo--conf { flex-direction: column; gap: 14px; }
.sv-exp__logo--conf svg { width: 46px; height: 46px; color: rgba(255, 255, 255, .72); }
.sv-exp__logo--conf span { font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .5); text-align: center; }


/* ─ Omni teaser link in the Tools timeline (jumps to the Omni deep-dive) ─ */
.sv-tl__more { display: inline-flex; align-items: center; gap: 7px; margin-top: 13px; font-size: 13px; font-weight: 600; letter-spacing: .01em; color: var(--accent, #fff); text-decoration: none; transition: opacity .3s ease; }
.sv-tl__more:hover { color: var(--accent, #fff); opacity: .82; }
.sv-tl__more span { font-size: 15px; transition: transform .3s ease; }
.sv-tl__more:hover span { transform: translateY(3px); }


/* ─ Hero — highlight "Digital Sovereignty" in a soft brand-violet (Playfair italic kept, NO gradient) + instant fade-in so the hero never waits on the JS reveal ─ */
.ag-hero .caption h1 .highlight { color: hsl(270 100% 78%); -webkit-text-fill-color: hsl(270 100% 78%); }
/* Hero eyebrow was the lone Inter usage among the small labels — align it to the body font (Nunito Sans) for a coherent type system */
.ag-hero .gag-anti-title-text { font-family: "Nunito Sans", sans-serif; }
/* Hero content renders INSTANTLY. The real culprit for the "late hero" was the SHARED theme
   preloader in common_scripts.js: `gsap.from("header .container",{opacity:0,y:100,delay:.8})`.
   Our hero is <header class="ag-hero"> so its .container matched, got opacity:0 for ~1s, and its
   whole subtree (title, subtext, CTA) went invisible. We can't edit the shared JS, so we override
   gsap's inline opacity/transform on the hero container with !important (CSS !important beats inline
   non-important, so gsap's tween is neutralised and the hero paints with the page). */
.ag-hero, .ag-hero .container, .ag-hero .caption, .ag-hero .caption > * { opacity: 1 !important; visibility: visible !important; animation: none !important; }
.ag-hero .container { transform: none !important; }


/* ─ Reveal: lift the `.ag-reveal { visibility:hidden }` trap on this LP (headings never wait on JS; the JS fade-up drives the entrance via opacity) ─ */
.ag-reveal { visibility: visible; }


/* ─ Problem → next-section continuity cue (answers the punch question, links to Your Independence) ─ */
.sv-cue { display: flex; flex-direction: column; align-items: center; gap: 12px; width: fit-content; margin: 30px auto 0; color: rgba(255, 255, 255, .46); text-decoration: none; transition: color .35s ease; }
.sv-cue:hover { color: rgba(255, 255, 255, .85); }
.sv-cue__text { font-size: 12px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; }
.sv-cue__arrow { display: inline-flex; animation: sv-cue-bob 1.9s ease-in-out infinite; }
.sv-cue__arrow svg { width: 22px; height: 22px; }
@keyframes sv-cue-bob { 0%, 100% { transform: translateY(0); opacity: .7; } 50% { transform: translateY(7px); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .sv-cue__arrow { animation: none; } }


/* ═══════════ Boss review · pass 1 ═══════════ */

/* ─ Footer: the shared --ag-dark-footer (#212121) was LIGHTER than the page body (#151515) and
     than the final CTA's #0f0f0f tail, so the footer read as a pale band at the bottom.
     Scoped here (sovereignty.css only loads on this LP) so the Ad-Grants LP is untouched. ─ */
.ag-footer.sec-dark-footer { background: #0a0a0a; }
.ag-footer .ag-footer__divider { background: rgba(255, 255, 255, .07); }

/* ─ Use cases: give the last panel (GWM) trailing room so the pinned horizontal scroll keeps it
     on screen instead of whipping it past. Extra padding grows scrollWidth → longer pin → more
     reading time on the final card. ─ */
.sv-exp__row > .sv-exp__panel:last-child { padding-right: clamp(140px, 20vw, 420px); }
@media (max-width: 991px) {
    .sv-exp__row > .sv-exp__panel:last-child,
    .sv-exp.is-pinned .sv-exp__row > .sv-exp__panel:last-child { padding-right: clamp(26px, 5vw, 80px); }
}

/* ─ Credibility strip: the lead line above the stats was removed (USPs now stand alone) ─ */
.sv-proof__inner > .sv-proof__stats:first-child { margin-top: 0; }


/* ═══════════ THE EVIDENCE — case-file dossier (v2) ═══════════
   v1 put the three cases in a LEFT-COLUMN tablist. Two things broke:
   on mobile the column became a horizontal scroller and only 1 of 3 tabs was visible — so the whole
   premise ("the three vendors you already run on") was invisible; and on desktop the column left
   ~340px of dead space while the text ran to 107 characters per line.
   v2: the selector is a full-width row of three cards ABOVE the file (all three always visible,
   stacked on mobile), and the file itself splits into an animated .iso illustration + a body capped
   at 62ch. The illustrations reuse the page's existing line-art vocabulary (.iso / .v-*), so this
   section finally speaks the same visual language as the Vault, Omni and the Tools timeline. */

.sv-ev { position: relative; background: #0d0d0d; overflow: hidden; }
.sv-ev::before {
    content: ""; position: absolute; left: 50%; top: 0;
    width: min(1100px, 96vw); height: 620px; transform: translateX(-50%);
    background: radial-gradient(60% 60% at 50% 0%, rgba(110, 60, 255, .13), transparent 72%);
    pointer-events: none; z-index: 0;
}
.sv-ev .container { position: relative; z-index: 1; }
.sv-ev .sv-lead { color: rgba(255, 255, 255, .72); }
.sv-ev__dossier { max-width: 1120px; margin: clamp(34px, 4.6vw, 54px) auto 0; }

/* ─ Selector: three cards, never hidden, never scrolled ─ */
.sv-ev__picker { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 1.2vw, 16px); }
.sv-ev__pick {
    position: relative; display: flex; flex-direction: column; align-items: flex-start;
    gap: 6px; width: 100%; margin: 0; padding: 20px 20px 20px;
    text-align: left; font: inherit; color: #fff; cursor: pointer;
    background: rgba(255, 255, 255, .022);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 14px;
    /* tapability: kill the 300ms click delay and the grey iOS flash — we draw our own :active */
    touch-action: manipulation; -webkit-tap-highlight-color: transparent;
    transition: background .18s ease, border-color .3s ease, transform .18s ease, box-shadow .3s ease;
}
/* The top accent line moved to an inset shadow so ::before is free for the notch and ::after for
   the action pill — the card needs BOTH a connector and an affordance, and there are only two. */
.sv-ev__pick.is-active { background: rgba(255, 255, 255, .055); border-color: var(--ev-accent, #fff); transform: translateY(-2px); box-shadow: inset 0 2px 0 var(--ev-accent, #fff); }
/* the notch ties the active card to the file below it */
.sv-ev__pick::before {
    content: ""; position: absolute; left: 50%; bottom: -8px; width: 14px; height: 14px;
    transform: translateX(-50%) rotate(45deg);
    background: #0d0d0d; border-right: 1px solid var(--ev-accent, #fff); border-bottom: 1px solid var(--ev-accent, #fff);
    opacity: 0; transition: opacity .3s ease;
}
.sv-ev__pick.is-active::before { opacity: 1; }

/* AFFORDANCE, third pass. A labelled pill on every card printed "Open file" three times and
   duplicated the panel's own "On record" stamp — repetition reads as wireframe annotation, not
   design. A selector should show which one is chosen, not spell it out. So the state does the work:
   closed cards sit at lower contrast with a dimmed accent spine, the chosen one is full contrast
   with an accent border, an inset top line and a notch pointing at its file. The only glyph is an
   arrow that fades in UNDER THE POINTER — never more than one on screen, so it cannot repeat. */
.sv-ev__pick-name { color: rgba(255, 255, 255, .74); transition: color .3s ease; }
.sv-ev__pick.is-active .sv-ev__pick-name { color: #fff; }
.sv-ev__pick::after {
    content: "\2192";
    position: absolute; right: 20px; bottom: 16px;
    font-size: 17px; line-height: 1; color: var(--ev-accent, #fff);
    opacity: 0; transform: translateX(-7px);
    transition: opacity .25s ease, transform .25s ease;
}
.sv-ev__pick.is-active::after { content: none; }
/* :hover only where a real pointer exists — on touch it sticks after the tap and lies */
@media (hover: hover) {
    .sv-ev__pick:hover { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .17); }
    .sv-ev__pick:hover::after { opacity: 1; transform: translateX(0); }
    .sv-ev__pick:hover .sv-ev__pick-name { color: #fff; }
}
/* press feedback — the tap must be acknowledged instantly, before the panel finishes opening */
.sv-ev__pick:active { transform: scale(.985); background: rgba(255, 255, 255, .08); }
.sv-ev__pick.is-active:active { transform: translateY(-2px) scale(.985); }
.sv-ev__pick:focus-visible { outline: 2px solid var(--ev-accent, #fff); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .sv-ev__pick:active { transform: none; } }
.sv-ev__pick-num { font-family: "Poppins", sans-serif; font-size: 11.5px; font-weight: 700; letter-spacing: .18em; color: rgba(255, 255, 255, .55); transition: color .3s ease; }
.sv-ev__pick.is-active .sv-ev__pick-num { color: var(--ev-accent, #fff); }
.sv-ev__pick-name { font-family: "Poppins", sans-serif; font-size: clamp(21px, 2.1vw, 27px); font-weight: 700; letter-spacing: -.03em; line-height: 1.1; }
.sv-ev__pick-kicker { font-size: 13px; line-height: 1.45; color: rgba(255, 255, 255, .5); transition: color .3s ease; }
.sv-ev__pick.is-active .sv-ev__pick-kicker { color: rgba(255, 255, 255, .74); }

/* ─ File: illustration + body. All three share one grid cell so nothing jumps. ─ */
.sv-ev__files { display: grid; margin-top: clamp(26px, 3.2vw, 40px); }
.sv-ev__file {
    grid-area: 1 / 1;
    /* The file shares the PICKER's grid — same 3 columns, same gap. The illustration sits under
       card 01 and the copy starts under card 02, so the block reads as one system instead of a
       centred slab floating inside it. */
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(10px, 1.2vw, 16px); align-items: center;
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .4s ease;
}
.sv-ev__file.is-active { opacity: 1; visibility: visible; pointer-events: auto; z-index: 2; }
/* With JS the wrapper animates to the ACTIVE file's height so a short case leaves no dead space.
   Without JS the grid stack above still renders correctly. */
.sv-ev.is-js .sv-ev__files { display: block; position: relative; overflow: hidden; transition: height .42s cubic-bezier(.4, 0, .2, 1); }
.sv-ev.is-js .sv-ev__file { position: absolute; top: 0; left: 0; width: 100%; }

/* No panel around the art. A bordered box makes leftover height read as an empty container;
   loose editorial art centred in its column does not. */
.sv-ev__file-viz { grid-column: 1; position: relative; display: flex; flex-direction: column; justify-content: center; }
.sv-ev__file-viz .iso { display: block; width: 100%; max-width: 300px; height: auto; margin: 0 auto; color: var(--ev-accent, #fff); opacity: 1; }
.sv-ev__file-viz-cap { display: block; margin-top: 18px; text-align: center; font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .55); }

/* Capping the measure is the whole point of the two-column split — v1 ran to 107 characters at
   1920px. NB: `ch` is the width of "0", much wider than an average glyph, so 62ch still measured
   92 real characters. A px cap is the honest way to hit the 65-75 character band. */
.sv-ev__file-body { grid-column: 2 / -1; max-width: 545px; }
.sv-ev__file-head { padding-bottom: 13px; border-bottom: 1px solid rgba(255, 255, 255, .09); }
.sv-ev__case { font-family: "Poppins", sans-serif; font-size: 11.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--ev-accent, #fff); }
.sv-ev__file-title { font-size: clamp(22px, 2.5vw, 32px); font-weight: 600; letter-spacing: -.02em; line-height: 1.18; color: #fff; margin: clamp(16px, 2vw, 22px) 0 clamp(18px, 2.2vw, 24px); }

.sv-ev__exhibits { list-style: none; margin: 0; padding: 0; }
.sv-ev__exhibit { padding: 18px 0; border-top: 1px dotted rgba(255, 255, 255, .16); }
.sv-ev__exhibit:first-child { border-top: 0; padding-top: 0; }
.sv-ev__exhibit:last-child { padding-bottom: 0; }
.sv-ev__exhibit-tag { display: inline-block; font-size: 11.5px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: #fff; margin-bottom: 8px; }
.sv-ev__exhibit-tag::before { content: ""; display: inline-block; width: .44em; height: .4em; margin-right: .55em; vertical-align: .02em; background: var(--ev-accent, #fff); clip-path: polygon(50% 0%, 100% 100%, 0% 100%); }
/* Two typographic levels: the LEAD is the claim that has to survive being skimmed, the TEXT is the
   corroboration for whoever leans in. Same content, two reading speeds. */
.sv-ev__exhibit-lead { position: relative; font-size: clamp(15.5px, 1.4vw, 17.5px); font-weight: 600; line-height: 1.42; letter-spacing: -.011em; color: #fff; margin: 0 0 8px; }
.sv-ev__exhibit-text { font-size: 14.5px; line-height: 1.6; color: rgba(255, 255, 255, .5); margin: 0; }
/* The "so what" — converts the anecdote into the reader's own risk. */
.sv-ev__closing { margin: 22px 0 0; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .1); font-size: 15px; font-style: italic; line-height: 1.5; color: var(--ev-accent, #fff); }

/* ─ The redaction wipe. Default state is REVEALED, so if the JS or the observer never fires the
     copy is simply readable — the animation is decoration, never a gate on content. ─ */
.sv-ev__exhibit-lead::after {
    content: ""; position: absolute; inset: -3px -5px; border-radius: 3px;
    background: #101010; border-right: 2px solid var(--ev-accent, #fff);
    transform: scaleX(0); transform-origin: right center;
    pointer-events: none;
}
.sv-ev.is-seen .sv-ev__file.is-active .sv-ev__exhibit-lead::after {
    animation: sv-ev-unredact .62s cubic-bezier(.66, 0, .24, 1) both;
    animation-delay: calc(var(--d, 0) * .11s);
}
@keyframes sv-ev-unredact { from { transform: scaleX(1); } to { transform: scaleX(0); } }

/* ─ Verdict ─ */
.sv-ev__verdict {
    max-width: 1120px; margin: clamp(46px, 6vw, 76px) auto 0;
    padding: clamp(26px, 3.4vw, 42px);
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, .1);
    background: linear-gradient(150deg, rgba(96, 40, 210, .17), rgba(255, 255, 255, .02) 58%);
}
.sv-ev__verdict-lead { text-align: center; font-size: clamp(18px, 2.1vw, 26px); line-height: 1.42; color: rgba(255, 255, 255, .7); margin: 0 0 clamp(24px, 3vw, 34px); }
.sv-ev__verdict-lead strong { color: #fff; font-weight: 600; }
.sv-ev__verdict-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.sv-ev__vitem { padding: 18px 18px 20px; border-radius: 12px; background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .07); }
.sv-ev__vitem h4 { font-size: 15.5px; font-weight: 600; line-height: 1.3; letter-spacing: -.01em; color: #fff; margin: 0 0 8px; }  /* the theme sets h4 { letter-spacing:-2px }, which at 15.5px swallows the word spaces */
.sv-ev__vitem p { font-size: 13.5px; line-height: 1.55; color: rgba(255, 255, 255, .55); margin: 0; }

/* ─ 5 · The mobile disclosure: hidden by default (desktop shows every exhibit already), turned
     into a real button inside the ≤860px block below. Declared HERE, before that media query —
     media queries add no specificity, so a later base rule would silently win. ─ */
.sv-ev__more, .sv-ev__more-open, .sv-ev__more-close { display: none; }

/* ─ Responsive ─ */
@media (max-width: 860px) {
    /* MOBILE IS A DIFFERENT ARGUMENT, NOT A NARROWER ONE.
       Measured on the tab version: the open panel ate 1216px — 42% of the section, 1.4 screens —
       to deliver 145 of 364 words, i.e. ONE case. But this section does not persuade through the
       depth of any single scandal; it persuades through the REPETITION across three vendors
       ("structural, not accidental"). Side by side on desktop that breadth is free. Stacked on a
       phone it costs a tap most visitors never make, so 2 of 3 proofs were never read.
       So the model inverts: all three claims are always on screen — vendor + its sharpest line +
       its conclusion — and the card discloses only the supporting exhibits. Breadth by default,
       depth on demand. */
    .sv-ev__dossier { display: flex; flex-direction: column; gap: 0; }
    .sv-ev__picker, .sv-ev__files,
    .sv-ev.is-js .sv-ev__files { display: contents; }
    .sv-ev__pick:nth-child(1) { order: 1; } .sv-ev__file:nth-child(1) { order: 2; }
    .sv-ev__pick:nth-child(2) { order: 3; } .sv-ev__file:nth-child(2) { order: 4; }
    .sv-ev__pick:nth-child(3) { order: 5; } .sv-ev__file:nth-child(3) { order: 6; }

    /* card + claim read as ONE block: the card loses its bottom edge, the panel continues it */
    .sv-ev__picker { grid-template-columns: 1fr; }
    .sv-ev__pick {
        flex-direction: row; align-items: baseline; flex-wrap: wrap; gap: 4px 12px;
        padding: 16px 18px 14px 22px; border-bottom: 0;
        border-radius: 14px 14px 0 0; box-shadow: none;
    }
    .sv-ev__pick.is-active { transform: none; box-shadow: none; }
    .sv-ev__pick:active, .sv-ev__pick.is-active:active { transform: none; background: rgba(255, 255, 255, .08); }
    .sv-ev__pick-name { font-size: 20px; }
    .sv-ev__pick-kicker { flex: 1 0 100%; font-size: 12.5px; }
    .sv-ev__pick-num { color: var(--ev-accent, #fff); }
    /* ::before stops being the desktop notch and becomes the accent spine, continued by the panel */
    .sv-ev__pick::before {
        left: 0; right: auto; top: 13px; bottom: 0; width: 3px; height: auto;
        transform: none; border: 0; border-radius: 0 3px 0 0;
        background: var(--ev-accent, #fff); opacity: .55;
    }
    .sv-ev__pick.is-active::before { opacity: 1; }
    /* the corner label is gone — the real button inside the panel is the affordance now */
    .sv-ev__pick::after { content: none; }

    .sv-ev__more {
        display: inline-flex; align-items: center; gap: 9px;
        margin-top: 16px; padding: 11px 16px;
        background: rgba(255, 255, 255, .05);
        border: 1px solid rgba(255, 255, 255, .18); border-radius: 9px;
        font: inherit; font-size: 13.5px; font-weight: 600; color: #fff;
        cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
        transition: background .2s ease, border-color .2s ease, transform .15s ease;
    }
    .sv-ev__more:active { transform: scale(.97); background: rgba(255, 255, 255, .09); }
    .sv-ev__file.is-active .sv-ev__more { border-color: var(--ev-accent, #fff); }
    .sv-ev__more-open { display: inline; }
    .sv-ev__file.is-active .sv-ev__more-open { display: none; }
    .sv-ev__file.is-active .sv-ev__more-close { display: inline; }
    .sv-ev__more-chev {
        width: 8px; height: 8px; margin-top: -3px;
        border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
        transform: rotate(45deg); transition: transform .25s ease;
    }
    .sv-ev__file.is-active .sv-ev__more-chev { transform: rotate(-135deg); margin-top: 2px; }

    /* every panel is present — only the DETAIL is disclosed */
    .sv-ev__file,
    .sv-ev.is-js .sv-ev__file {
        display: block; position: static; opacity: 1; visibility: visible; pointer-events: auto;
        margin: 0 0 26px; padding: 0 18px 18px 22px;
        background: rgba(255, 255, 255, .022);
        border: 1px solid rgba(255, 255, 255, .08); border-top: 0; border-radius: 0 0 14px 14px;
    }
    .sv-ev__file::before {
        content: ""; position: absolute; left: -1px; top: 0; bottom: 13px; width: 3px;
        border-radius: 0 0 3px 0; background: var(--ev-accent, #fff); opacity: .55;
    }
    .sv-ev__file { position: relative; }
    .sv-ev__file.is-active::before { opacity: 1; }
    .sv-ev__file.is-active { background: rgba(255, 255, 255, .045); border-color: var(--ev-accent, #fff); }

    /* the phone gets the evidence, not the editorial layer: no art (385px each), no case label
       (the card already names the vendor), no headline (the lead IS the claim) */
    .sv-ev__file-viz, .sv-ev__file-head, .sv-ev__file-title { display: none; }
    /* still cap the measure: dropping it ran the claim to 97 characters on a 768px tablet */
    .sv-ev__file-body { max-width: 545px; margin: 0; }
    .sv-ev__exhibits { margin: 0; }
    .sv-ev__exhibit { display: none; padding: 0; border-top: 0; }
    .sv-ev__exhibit:first-child { display: block; }
    .sv-ev__exhibit:first-child .sv-ev__exhibit-tag,
    .sv-ev__exhibit:first-child .sv-ev__exhibit-text { display: none; }
    .sv-ev__exhibit-lead { font-size: 16.5px; }
    .sv-ev__closing { margin-top: 14px; padding-top: 13px; }

    /* disclosed */
    .sv-ev__file.is-active .sv-ev__exhibit { display: block; padding: 16px 0; border-top: 1px dotted rgba(255, 255, 255, .16); }
    .sv-ev__file.is-active .sv-ev__exhibit:first-child { padding-top: 0; border-top: 0; }
    .sv-ev__file.is-active .sv-ev__exhibit:first-child .sv-ev__exhibit-tag { display: inline-block; }
    .sv-ev__file.is-active .sv-ev__exhibit:first-child .sv-ev__exhibit-text { display: block; }

    .sv-ev__verdict-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
    .sv-ev__verdict-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
    .sv-ev__exhibit-lead::after { display: none; }
    .sv-ev__file { transition: none; }
    .sv-ev.is-js .sv-ev__files { transition: none; }
    .sv-ev__pick { transition: none; }
}


/* ═══════════ Boss review · pass 2 ═══════════ */

/* ─ 1 · Mobile hero was reading as a dense slab: at 320px it was 856px tall against an 844px
     viewport, i.e. it did not even fit. Smaller display size (fewer lines = less mass) plus
     rebalanced rhythm, rather than just padding. ─ */
@media (max-width: 600px) {
    /* The navbar wraps to two lines (90px tall, bottom at y120) as soon as its contents overflow —
       and the wrap point MOVES WITH THE COPY: the FR CTA is longer, so FR wrapped at 390px where EN
       still fit, putting the eyebrow 6px behind the bar. Rather than pad for the worst case, drop
       the navbar CTA on phones exactly as the Ad Grants LP does: the sticky bottom-right CTA
       already carries the action there, and the bar stays one line whatever the language. */
    .navbar .crv-butn { display: none; }
    .ag-hero { padding-top: 108px; padding-bottom: 48px; min-height: 0; }
    .ag-hero .caption .gag-anti-title { margin-bottom: 14px; }
    .ag-hero .caption h1 { font-size: 34px; line-height: 1.2; letter-spacing: -1.1px; margin-bottom: 20px; }
    .ag-hero .caption .sub-text { font-size: 15.5px; line-height: 1.62; margin-bottom: 26px; }
    .ag-hero .caption .btn-sub-text { font-size: 12.5px; line-height: 1.5; }
}
@media (max-width: 380px) {
    .ag-hero { padding-top: 112px; }
    .ag-hero .caption h1 { font-size: 30px; }
}

/* ─ 2 · The Playfair italic fragments now carry the hero's own violet instead of the flat grey,
     so the second typeface reads as one accent across the whole page. ─ */
.sv-ev .italic.sub-color.inline,
#problem .italic.sub-color.inline,
#vault .italic.sub-color.inline,
#ecosystem .italic.sub-color.inline,
#omni .italic.sub-color.inline,
#support .italic.sub-color.inline { color: hsl(270 100% 78%) !important; }

/* ─ 3 · The Evidence lost its section header — the "Three documented cases" cue above IS the
     title now. For the cue to actually read as that title the gap has to close: the two section
     paddings plus the cue's own margin left ~230px of nothing between them. ─ */
#problem.section-padding { padding-bottom: clamp(44px, 5.5vh, 72px); }
.sv-ev.section-padding { padding-top: clamp(38px, 4.6vw, 60px); }
.sv-ev__dossier { margin-top: 0; }
.sv-cue { margin-bottom: 4px; }



/* ═══════════ Language switcher (EN ⇄ FR) ═══════════
   Same component as the Ad Grants LP, restyled for this page's dark ground. */
.lang-switch { position: relative; display: flex; align-items: center; margin-right: 16px; }
.lang-select {
    -webkit-appearance: none; -moz-appearance: none; appearance: none;
    background: transparent; color: rgba(255, 255, 255, .6);
    border: 1px solid rgba(255, 255, 255, .22); border-radius: 100px;
    padding: 7px 30px 7px 14px; font: inherit; font-size: 13px; font-weight: 600;
    line-height: 1; cursor: pointer;
    transition: border-color .3s ease, color .3s ease;
}
.lang-select:hover { color: #fff; border-color: rgba(255, 255, 255, .5); }
.lang-select:focus-visible { outline: 2px solid hsl(270 100% 78%); outline-offset: 2px; }
.lang-select option { color: #1A1F2E; background: #fff; }
.lang-switch::after {
    content: ""; position: absolute; right: 13px; top: 50%; width: 6px; height: 6px;
    border-right: 1.5px solid rgba(255, 255, 255, .6); border-bottom: 1.5px solid rgba(255, 255, 255, .6);
    transform: translateY(-70%) rotate(45deg); pointer-events: none; transition: border-color .3s ease;
}
.lang-switch:hover::after { border-right-color: #fff; border-bottom-color: #fff; }
@media (max-width: 991px) {
    .lp-adgrant .navbar .container { flex-wrap: nowrap; gap: 10px; }
    .lp-adgrant .topnav { margin-left: auto; gap: 12px; }
    .lang-switch { margin-right: 0; }
    .lang-select { font-size: 12.5px; padding: 6px 26px 6px 11px; }
    .lang-switch::after { right: 11px; }
}