/* ============================================================================
   Sentra Landing — Mix overlay
   Components ported from the design prototype (attack-surface hero map,
   CardSwap benefits, CTA invite card), restyled to the live landing.css
   design tokens. Load AFTER landing.css.
   ============================================================================ */

/* ============ NAV ============
   Pill links at the original bar size. landing.js (initNavSpy) marks the
   link of the section in view with .active and tags the bar with
   .is-scrolled once the page moves, which adds the drop shadow. */
.nav { transition: box-shadow 220ms ease; }
.nav.is-scrolled { box-shadow: 0 10px 30px -18px rgba(15, 22, 32, 0.25); }
.nav-links { gap: 6px; }
.nav-links a {
    padding: 8px 14px;
    border-radius: 999px;
    font-weight: 500;
    transition: color 160ms ease, background-color 160ms ease;
}
.nav-links a:hover {
    color: var(--brand);
    background: rgba(13, 46, 54, 0.07);
}
.nav-links a.active,
.nav-links a.active:hover {
    color: #fff;
    background: var(--brand);
}
/* Anchor jumps land below the sticky bar. */
section[id] { scroll-margin-top: 80px; }

/* ============ DEMO PLAYER ============
   Cap the player so it reads as an embedded video, not a hero. */
.demo-frame { max-width: 680px; margin: 0 auto; }

/* ============ LABS WINDOW ============
   Both tab panes share one fixed height (the OSD mock's 360px) so
   switching Desktop/Terminal doesn't reflow the section below. */
.lab-body { height: 360px; min-height: 0; overflow: hidden; }
@media (max-width: 640px) {
    .lab-body { height: auto; overflow: visible; }
}

/* ============ BENEFITS / CARD SWAP ============
   Replaces the flat feature grid. Three stacked cards swap on a timer
   (CardSwap.js); clicking a card promotes it. */

/* Contain the swap animation: the front card drops ~430px during a
   swap, which would sail over the labs section below without clipping
   at the section boundary. */
#features { overflow: hidden; }

.benefits-layout {
    display: grid;
    grid-template-columns: minmax(300px, 0.95fr) minmax(420px, 1.05fr);
    gap: clamp(24px, 3.2vw, 44px);
    align-items: center;
}
.benefits-intro {
    max-width: 420px;
    margin-top: 18px;
    color: var(--muted);
    font-size: 16px;
    line-height: 1.6;
}

.card-swap-stage {
    position: relative;
    min-height: 410px;
    overflow: visible;
}
.card-swap-container {
    position: absolute;
    right: 48px;
    bottom: 30px;
    width: 380px;
    height: 310px;
    perspective: 900px;
    overflow: visible;
}
.card-swap-container .card {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 380px;
    height: 310px;
    transform-style: preserve-3d;
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}
.card-swap-container.is-swapping { pointer-events: none; }
.card-swap-container.is-swapping .card { cursor: default; }
.card-swap-container:not(.is-ready) .card { opacity: 0; }
.card-swap-container:not(.is-ready) .card:first-child {
    opacity: 1;
    transform: translate(-50%, -50%);
}

.benefit-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    color: var(--ink);
    border: 1px solid var(--line-2);
    border-radius: 14px;
    background: var(--bg-2);
    box-shadow: 0 22px 48px -20px rgba(15, 22, 32, 0.30);
    cursor: pointer;
}
.benefit-card.is-front { transition: box-shadow 260ms cubic-bezier(0.22, 1, 0.36, 1); }
.benefit-card.is-front:hover,
.benefit-card.is-front:focus-visible {
    box-shadow: 0 30px 60px -22px rgba(15, 22, 32, 0.38);
}
.benefit-card:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 4px;
}
.swap-card-copy { padding: 1px 20px 19px; }
.benefit-card h3 {
    margin: 0 0 8px;
    font-size: 19px;
    font-weight: 600;
    letter-spacing: -0.02em;
}
.benefit-card p {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.5;
}

.benefit-visual {
    position: relative;
    width: calc(100% - 32px);
    height: 138px;
    margin: 13px 16px 11px;
    overflow: hidden;
    border: 1px solid rgba(13, 46, 54, 0.14);
    border-radius: 8px;
    background-color: rgba(255, 255, 255, 0.5);
    background-image:
        linear-gradient(rgba(13, 46, 54, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(13, 46, 54, 0.05) 1px, transparent 1px);
    background-size: 18px 18px;
}

.benefit-flow-line {
    display: block;
    width: 100%;
    height: 12px;
    overflow: visible;
}
.benefit-flow-line path {
    fill: none;
    stroke: var(--ink-2);
    stroke-dasharray: 3 3;
    stroke-linecap: round;
    stroke-width: 1.25;
    transition: stroke 180ms ease;
}
.benefit-card.is-front:hover .benefit-flow-line path,
.benefit-card.is-front:focus-visible .benefit-flow-line path {
    stroke: var(--brand);
    animation: benefit-flow 620ms linear infinite;
}
@keyframes benefit-flow {
    to { stroke-dashoffset: -6; }
}
@keyframes benefit-status-pulse {
    from { transform: scale(1); opacity: 1; }
    to   { transform: scale(1.35); opacity: 0.55; }
}

/* --- visual 1: live session — your terminal, the instructor's fix --- */
.visual-teaching-loop { padding: 12px; }
.ts-terminal {
    height: 100%;
    overflow: hidden;
    border: 1px solid var(--dark-line);
    border-radius: 8px;
    background: var(--dark);
}
.ts-bar {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 6px 9px;
    border-bottom: 1px solid var(--dark-line);
    background: var(--dark-2);
}
.ts-dots { display: flex; gap: 4px; }
.ts-dots i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #2b3441;
}
.ts-title {
    margin-left: 3px;
    font-family: var(--mono);
    font-size: 7.5px;
    color: #6b7585;
}
.benefit-card.is-front:hover .live-target > div i,
.benefit-card.is-front:focus-visible .live-target > div i {
    animation: benefit-status-pulse 900ms ease-in-out infinite alternate;
}
.ts-body {
    display: grid;
    justify-items: start;
    gap: 4px;
    padding: 9px 10px;
    font-family: var(--mono);
    font-size: 8.5px;
    line-height: 1.5;
    color: #cfd5dd;
    white-space: nowrap;
}
.ts-line span { color: var(--emerald); }
.ts-out { color: #6b7585; }
.ts-fix {
    margin-left: 1px;
    padding: 1px 4px;
    border-radius: 4px;
    background: rgba(16, 185, 129, 0.18);
    color: #7ee0c0;
    font-style: normal;
    transition: background 220ms ease, color 220ms ease;
}
.ts-caret {
    display: inline-block;
    width: 4px;
    height: 8px;
    margin-left: 3px;
    background: #cfd5dd;
}
@keyframes ts-caret-blink {
    50% { opacity: 0; }
}
.coach-note {
    position: absolute;
    right: 22px;
    bottom: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 200px;
    padding: 7px 10px;
    border: 1px solid var(--line-2);
    border-radius: 10px 10px 3px 10px;
    background: var(--bg-2);
    box-shadow: 0 10px 22px rgba(5, 10, 16, 0.30);
    transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
}
.coach-avatar {
    display: grid;
    place-items: center;
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--brand);
    color: #fff;
    font-size: 7px;
    font-weight: 800;
}
.coach-note strong {
    display: block;
    font-size: 8.5px;
}
.coach-note small {
    display: block;
    margin-top: 2px;
    color: var(--muted);
    font-size: 7.5px;
    line-height: 1.4;
    white-space: nowrap;
}
.coach-note small em {
    font-family: var(--mono);
    font-style: normal;
    font-weight: 600;
    color: var(--brand);
}
.benefit-card.is-front:hover .coach-note,
.benefit-card.is-front:focus-visible .coach-note {
    transform: translateY(-3px);
}
.benefit-card.is-front:hover .ts-caret,
.benefit-card.is-front:focus-visible .ts-caret {
    animation: ts-caret-blink 850ms steps(1) infinite;
}
.benefit-card.is-front:hover .ts-fix,
.benefit-card.is-front:focus-visible .ts-fix {
    background: var(--emerald);
    color: #04231a;
}

/* --- visual 2: real lab Questions panel (mirrors the live lab UI) --- */
.visual-questions {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px;
    background-image: none;
    background-color: var(--bg-2);
}
.vq-head {
    display: flex;
    align-items: center;
    gap: 6px;
}
.vq-check {
    display: grid;
    place-items: center;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--brand);
    color: #fff;
}
.vq-check svg { width: 9px; height: 9px; }
.vq-num {
    font-family: var(--mono);
    font-size: 8px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--brand);
}
.vq-q {
    font-size: 10px;
    line-height: 1.4;
    color: var(--ink);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.vq-ans {
    padding: 5px 8px;
    border: 1px solid var(--line-2);
    border-radius: 5px;
    background: var(--bg);
    font-family: var(--mono);
    font-size: 9px;
    color: var(--brand);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.vq-submit {
    margin-top: auto;
    padding: 6px;
    border-radius: 5px;
    background: var(--brand);
    color: #fff;
    font-size: 9px;
    font-weight: 600;
    text-align: center;
    transition: background 200ms ease;
}
.benefit-card.is-front:hover .vq-submit,
.benefit-card.is-front:focus-visible .vq-submit {
    background: var(--brand-hover);
}

/* --- visual 3: cohort roster + compared solutions --- */
.visual-group {
    display: grid;
    grid-template-columns: 1.08fr 0.92fr;
    align-items: stretch;
    gap: 12px;
    padding: 12px;
}
.cohort-panel {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px 10px;
    border: 1px solid var(--line-2);
    border-radius: 8px;
    background: var(--bg);
    transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
}
.cohort-head {
    display: flex;
    align-items: center;
    gap: 6px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--line);
    font-size: 8.5px;
    font-weight: 700;
}
.cohort-head i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--brand);
}
.cohort-row {
    display: flex;
    align-items: center;
    gap: 7px;
}
.cr-avatar {
    display: grid;
    place-items: center;
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #5d6b7a;
    color: #fff;
}
.cr-avatar svg { width: 11px; height: 11px; }
.cohort-row.t2 .cr-avatar { background: #3a6b76; }
.cohort-row.is-you .cr-avatar { background: var(--brand); }
.cr-name {
    flex: 0 0 36px;
    font-size: 9px;
    font-weight: 600;
}
.cohort-row.is-you .cr-name { color: var(--brand); }
.cr-track {
    position: relative;
    flex: 1;
    height: 4px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(13, 46, 54, 0.12);
}
.cr-track i {
    position: absolute;
    inset: 0 auto 0 0;
    width: var(--p, 60%);
    border-radius: inherit;
    background: var(--muted-2);
    transition: width 420ms cubic-bezier(0.22, 1, 0.36, 1);
}
.cohort-row.is-you .cr-track i { background: var(--brand); }
.cohort-compare {
    display: grid;
    align-content: center;
    gap: 6px;
}
.cc-label {
    font-family: var(--mono);
    font-size: 8px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--brand);
}
.cc-bubble {
    justify-self: start;
    max-width: 94%;
    padding: 6px 9px;
    border: 1px solid var(--line-2);
    border-radius: 9px 9px 9px 3px;
    background: var(--bg);
    font-size: 8.5px;
    font-weight: 600;
    transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
}
.cc-bubble.own {
    justify-self: end;
    color: #fff;
    border-color: var(--brand);
    border-radius: 9px 9px 3px 9px;
    background: var(--brand);
}
.benefit-card.is-front:hover .cohort-head i,
.benefit-card.is-front:focus-visible .cohort-head i {
    animation: benefit-status-pulse 900ms ease-in-out infinite alternate;
}
.benefit-card.is-front:hover .cohort-panel,
.benefit-card.is-front:focus-visible .cohort-panel {
    transform: translateY(-2px);
}
.benefit-card.is-front:hover .cr-track i,
.benefit-card.is-front:focus-visible .cr-track i {
    width: calc(var(--p, 60%) + 7%);
}
.benefit-card.is-front:hover .cc-bubble,
.benefit-card.is-front:focus-visible .cc-bubble {
    transform: translateX(2px);
}
.benefit-card.is-front:hover .cc-bubble.own,
.benefit-card.is-front:focus-visible .cc-bubble.own {
    transform: translateX(-2px);
}

@media (max-width: 1050px) {
    .card-swap-container {
        right: 30px;
        transform: scale(0.88);
        transform-origin: bottom right;
    }
}
@media (max-width: 980px) {
    /* Single column: the desktop column gap would read as a void between
       the copy and the card stack. */
    .benefits-layout { grid-template-columns: 1fr; gap: 18px; }
}
@media (max-width: 760px) {
    /* Stage height = scaled card (310*0.82) + bottom offset + back-stack
       headroom (2*34px scaled); anything taller is dead space above. */
    .card-swap-stage { min-height: 330px; }
    .card-swap-container {
        right: 50%;
        bottom: 18px;
        transform: translateX(50%) scale(0.82);
        transform-origin: bottom center;
    }
}

/* ============ CTA INVITE CARD ============
   Replaces the plain key/value cta-side panel inside the dark cta-card.
   Scoped to wide screens so landing.css's <=980px single-column rule
   still wins on mobile. */
@media (min-width: 981px) {
    .cta-card { grid-template-columns: 1.05fr 1fr; }
}

/* Interaction model (inspired by 21st.dev "Magic Card" / Aceternity
   "Card Spotlight" + MagicUI "Border Beam"):
   - an emerald beam continuously travels the card border (idle life)
   - a cursor-tracked glow lights the border near the pointer
   - a soft spotlight follows the cursor across the surface
   - the card tilts toward the cursor with damped easing (invite-fx.js)
   --mx/--my are fed by invite-fx.js; everything degrades gracefully
   without JS (centered glow on hover, no tilt). */
@property --invite-beam {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
}
@property --invite-ring {
    syntax: '<number>';
    inherits: false;
    initial-value: 0;
}

.cta-invite {
    --mx: 50%;
    --my: 45%;
    --invite-ring: 0;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 390px;
    padding: 0;
    overflow: hidden;
    color: var(--ink);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 16px;
    outline: 0;
    background: var(--bg);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.05),
        0 24px 60px -24px rgba(0, 0, 0, 0.55);
    text-align: left;
    cursor: pointer;
    position: relative;
    font-family: var(--sans);
    will-change: transform;
    transition:
        box-shadow 350ms cubic-bezier(0.22, 1, 0.36, 1),
        --invite-ring 350ms ease;
}
.cta-invite:hover,
.cta-invite:focus-visible {
    --invite-ring: 1;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.07),
        0 12px 50px -12px rgba(16, 185, 129, 0.22),
        0 34px 80px -28px rgba(0, 0, 0, 0.65);
}
.cta-invite:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 6px;
}

/* Border layer: traveling beam + cursor-tracked ring glow, masked to a
   thin ring so only the card edge lights up. */
.cta-invite::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    border-radius: inherit;
    padding: 1.5px;
    background:
        radial-gradient(240px circle at var(--mx) var(--my),
            rgba(52, 211, 153, calc(var(--invite-ring) * 0.95)), transparent 60%),
        conic-gradient(from var(--invite-beam),
            transparent 0deg, transparent 290deg,
            rgba(16, 185, 129, 0.0) 300deg,
            rgba(16, 185, 129, 0.75) 330deg,
            rgba(110, 231, 183, 0.95) 344deg,
            transparent 360deg);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
            mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            mask-composite: exclude;
    animation: invite-beam-spin 6.5s linear infinite;
    pointer-events: none;
}
@keyframes invite-beam-spin {
    to { --invite-beam: 360deg; }
}

/* Surface layer: soft emerald spotlight following the cursor. */
.cta-invite::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    border-radius: inherit;
    background: radial-gradient(440px circle at var(--mx) var(--my),
        rgba(16, 185, 129, 0.09), transparent 55%);
    opacity: 0;
    transition: opacity 350ms ease;
    pointer-events: none;
}
.cta-invite:hover::after,
.cta-invite:focus-visible::after {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .cta-invite::before { animation: none; }
}

.cta-invite-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid var(--line-2);
    font-family: var(--mono);
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}
.cta-invite-status {
    padding: 5px 7px;
    color: #fff;
    border-radius: 5px;
    background: var(--emerald);
    letter-spacing: 0.04em;
}

.cta-invite-main {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: clamp(22px, 3vw, 32px);
}
.cta-audience small,
.cta-audience strong,
.cta-audience > span { display: block; }
.cta-audience small {
    color: var(--muted);
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.cta-audience strong {
    max-width: 470px;
    margin-top: 10px;
    font-size: clamp(24px, 2.6vw, 34px);
    font-weight: 500;
    letter-spacing: -0.025em;
    line-height: 1.02;
    text-wrap: balance;
}
.cta-audience > span {
    max-width: 440px;
    margin-top: 14px;
    color: var(--muted);
    font-size: 12.5px;
    line-height: 1.6;
}

/* Stage meter — Foundation → Beginner → Intermediate. Hover a segment
   and the meter fills exactly up to it (data-active is set by
   invite-fx.js; stage 0 / Foundation is the resting state). The copy
   line below the meter swaps to describe what we do at that stage. */
.cta-levels {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    margin-top: 26px;
}

.cta-level {
    display: grid;
    gap: 8px;
    padding-top: 6px;   /* slightly larger hover target */
}
.cta-level i {
    display: block;
    height: 7px;
    border: 1px solid var(--line-2);
    border-radius: 3px;
    background: var(--bg-2);
    transition: background-color 260ms cubic-bezier(0.22, 1, 0.36, 1),
                border-color 260ms cubic-bezier(0.22, 1, 0.36, 1);
}
.cta-level small {
    color: var(--muted);
    font-size: 9.5px;
    font-weight: 600;
    transition: color 200ms ease;
}

/* Fill up to the active stage; the first segment is always lit. */
.cta-level[data-stage="0"] i {
    border-color: var(--emerald);
    background: var(--emerald);
}
.cta-levels[data-active="1"] .cta-level[data-stage="1"] i,
.cta-levels[data-active="2"] .cta-level[data-stage="1"] i {
    border-color: var(--emerald);
    background: var(--emerald);
}
.cta-levels[data-active="2"] .cta-level[data-stage="2"] i {
    border-color: var(--emerald);
    background: var(--emerald);
    transition-delay: 60ms;
}

/* The active stage's label darkens. */
.cta-levels[data-active="0"] .cta-level[data-stage="0"] small,
.cta-levels[data-active="1"] .cta-level[data-stage="1"] small,
.cta-levels[data-active="2"] .cta-level[data-stage="2"] small {
    color: var(--ink);
}

/* Stage copy: one line per stage, stacked in the same grid cell and
   crossfaded by the meter's data-active state. */
.cta-stage-copy {
    display: grid;
    margin-top: auto;
    padding-top: 26px;
}
.cta-stage-line {
    grid-area: 1 / 1;
    color: var(--muted);
    font-size: 12.5px;
    line-height: 1.6;
    max-width: 430px;
    opacity: 0;
    transform: translateY(5px);
    transition: opacity 280ms ease, transform 280ms ease;
}
.cta-levels[data-active="0"] ~ .cta-stage-copy .cta-stage-line[data-stage-copy="0"],
.cta-levels[data-active="1"] ~ .cta-stage-copy .cta-stage-line[data-stage-copy="1"],
.cta-levels[data-active="2"] ~ .cta-stage-copy .cta-stage-line[data-stage-copy="2"] {
    opacity: 1;
    transform: translateY(0);
}

.cta-invite-action {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 15px 18px 16px;
    color: #fff;
    border-top: 1px solid rgba(13, 46, 54, 0.25);
    background: var(--brand);
}
.cta-invite-action small,
.cta-invite-action strong { display: block; }
.cta-invite-action small {
    color: #9fb6bc;
    font-size: 8.5px;
    font-weight: 600;
}
.cta-invite-action strong {
    margin-top: 3px;
    font-size: 12.5px;
    font-weight: 600;
}
.cta-invite-mark {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    height: 22px;
}
.cta-invite-mark i {
    display: block;
    width: 6px;
    height: 8px;
    border-radius: 1.5px;
    background: var(--emerald);
    transition: height 260ms cubic-bezier(0.22, 1, 0.36, 1);
}
.cta-invite-mark i:nth-child(2) { height: 14px; }
.cta-invite-mark i:nth-child(3) { height: 20px; }
.cta-invite:hover .cta-invite-mark i:first-child,
.cta-invite:focus-visible .cta-invite-mark i:first-child { height: 20px; }
.cta-invite:hover .cta-invite-mark i:nth-child(2),
.cta-invite:focus-visible .cta-invite-mark i:nth-child(2) { height: 8px; }
.cta-invite:hover .cta-invite-mark i:nth-child(3),
.cta-invite:focus-visible .cta-invite-mark i:nth-child(3) { height: 14px; }

@media (max-width: 980px) {
    .cta-invite { min-height: 0; }
}

/* Reduced motion: kill the ported animations too. */
@media (prefers-reduced-motion: reduce) {
    .benefit-card.is-front:hover .benefit-flow-line path,
    .benefit-card.is-front:focus-visible .benefit-flow-line path,
    .benefit-card.is-front:hover .ts-caret,
    .benefit-card.is-front:focus-visible .ts-caret,
    .benefit-card.is-front:hover .live-target > div i,
    .benefit-card.is-front:focus-visible .live-target > div i {
        animation: none !important;
    }
}

/* ============ LAB FEATURE ROWS ============
   Icon-tile rows (Linear-style) that drive the lab window: the Terminal
   and Desktop rows are buttons synced with the window tabs (osd.js);
   the active row carries the emerald accent. The labs section sits on a
   white band (the dark "pop" belongs to the Ready-to-train card alone),
   so the rows are light-themed; the lab window itself stays dark. */
#labs { background: var(--bg-2); }
#labs .lab-lead { color: var(--muted); }
#labs .lab-window { box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.35); }
.lab-feats2 {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 22px;
}
.lab-feat2 {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    width: 100%;
    padding: 14px 16px;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 12px;
    color: inherit;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: background 160ms ease, border-color 160ms ease;
}
.lab-feat2.is-static { cursor: default; }
.lab-feat2:hover:not(.is-static):not(.active) {
    background: var(--bg-soft);
    border-color: var(--line-2);
}
.lab-feat2.active {
    background: rgba(16, 185, 129, 0.07);
    border-color: rgba(16, 185, 129, 0.35);
}
.lab-feat2:focus-visible {
    outline: 2px solid var(--emerald);
    outline-offset: 2px;
}
.lab-feat2-icon {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    background: var(--bg-2);
    border: 1px solid var(--line-2);
    color: var(--muted);
    transition: color 160ms ease, background 160ms ease, border-color 160ms ease;
}
.lab-feat2.active .lab-feat2-icon {
    color: var(--emerald);
    background: rgba(16, 185, 129, 0.12);
    border-color: rgba(16, 185, 129, 0.40);
}
.lab-feat2-icon svg { width: 16px; height: 16px; }
.lab-feat2-text { flex: 1; min-width: 0; }
.lab-feat2-text strong {
    display: block;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--ink);
}
.lab-feat2-text span {
    display: block;
    margin-top: 3px;
    font-size: 13px;
    line-height: 1.55;
    color: var(--muted);
}
.lab-feat2-go {
    align-self: center;
    color: var(--muted-2);
    font-size: 18px;
    line-height: 1;
    transition: color 160ms ease, transform 160ms ease;
}
.lab-feat2:hover .lab-feat2-go,
.lab-feat2.active .lab-feat2-go {
    color: var(--emerald);
}
.lab-feat2:hover .lab-feat2-go { transform: translateX(2px); }

/* ============ LAB DESKTOP MOCK ============
   Replaces the old flat gui-* desktop with a realistic Linux desktop:
   Dolphin-style file manager (toolbar, breadcrumbs, places sidebar,
   status bar), an overlapping terminal, a connection toast, and a
   KDE-style taskbar with tray + clock. Sentra mark as the wallpaper. */
.osd {
    position: relative;
    width: 100%;
    height: 360px;
    overflow: hidden;
    font-family: var(--sans);
}
.osd-wallpaper {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 62% 30%, #15425f 0%, #0d2e44 40%, #081d30 75%, #051422 100%);
}
.osd-brandmark {
    position: absolute;
    top: 44%;
    left: 50%;
    width: 110px;
    transform: translate(-50%, -50%);
    color: rgba(255, 255, 255, 0.055);
}
.osd-wp-name {
    position: absolute;
    top: calc(44% + 82px);
    left: 50%;
    transform: translateX(-50%);
    font-size: 19px;
    letter-spacing: 0.02em;
    color: rgba(255, 255, 255, 0.06);
}

/* desktop icons */
.osd-icons {
    position: absolute;
    top: 14px;
    left: 14px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    z-index: 1;
}
.osd-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}
.osd-icon small {
    font-size: 10px;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
}
.osd-folder {
    display: block;
    width: 34px;
    height: 26px;
    position: relative;
    background: linear-gradient(180deg, #5a8fc8, #3a6da8);
    border-radius: 4px 4px 3px 3px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.osd-folder::before {
    content: "";
    position: absolute;
    top: -4px;
    left: 0;
    width: 15px;
    height: 6px;
    background: linear-gradient(180deg, #5a8fc8, #4a7eb8);
    border-radius: 3px 3px 0 0;
}
.osd-folder.sm { width: 28px; height: 21px; }
.osd-folder.sm::before { width: 12px; height: 5px; top: -3px; }

/* file manager window — anchored right so the desktop icon on the
   left stays visible */
.osd-files {
    position: absolute;
    top: 40px;
    right: 20px;
    bottom: 48px;
    width: 64%;
    z-index: 2;
    display: flex;
    flex-direction: column;
    background: #f4f4f2;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.5);
    color: var(--ink);
}
.osd-win-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: #e8e6e1;
    border-bottom: 1px solid #d8d6cf;
}
.osd-win-dots { display: flex; gap: 5px; }
.osd-win-dots i {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #c8c6bf;
}
.osd-win-title {
    font-size: 10.5px;
    color: #5a6373;
}
.osd-files-tools {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 6px 8px;
    background: #f0efeb;
    border-bottom: 1px solid #e2e0da;
}
.osd-nav {
    display: grid;
    place-items: center;
    width: 18px;
    height: 18px;
    border-radius: 5px;
    background: #e4e2dc;
    color: #5a6373;
    font-size: 13px;
    line-height: 1;
}
.osd-nav.is-off { opacity: 0.4; }
.osd-crumbs {
    flex: 1;
    margin-left: 4px;
    padding: 3px 8px;
    background: #fff;
    border: 1px solid #e2e0da;
    border-radius: 5px;
    font-family: var(--mono);
    font-size: 9.5px;
    color: #6b7585;
    white-space: nowrap;
    overflow: hidden;
}
.osd-crumbs b { color: var(--ink); font-weight: 600; }

.osd-files-main {
    flex: 1;
    display: flex;
    min-height: 0;
}
.osd-places {
    width: 88px;
    flex: 0 0 auto;
    padding: 8px 0;
    background: #f0efeb;
    border-right: 1px solid #e2e0da;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.osd-places span {
    padding: 4px 10px;
    font-size: 10.5px;
    color: #4a5260;
    border-left: 2px solid transparent;
}
.osd-places span.active {
    background: rgba(13, 46, 54, 0.08);
    border-left-color: var(--brand);
    color: var(--ink);
    font-weight: 600;
}
.osd-grid {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    align-content: start;
    padding: 10px;
    min-width: 0;
}
.osd-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 7px 2px 6px;
    border-radius: 6px;
    border: 1px solid transparent;
}
.osd-item small {
    font-family: var(--mono);
    font-size: 9px;
    color: #3c4554;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.osd-item.selected {
    background: rgba(13, 46, 54, 0.10);
    border-color: rgba(13, 46, 54, 0.22);
}
.osd-doc {
    display: grid;
    place-items: center;
    width: 24px;
    height: 28px;
    background: #fff;
    border: 1px solid #d8d6cf;
    border-radius: 4px;
    font-size: 12px;
    color: var(--brand);
}
/* taskbar */
.osd-bar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 34px;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 10px;
    background: rgba(8, 12, 18, 0.92);
    backdrop-filter: blur(6px);
    border-top: 1px solid rgba(255, 255, 255, 0.07);
}
.osd-start {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 4px 10px 4px 8px;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
}
.osd-start svg {
    width: 11px;
    height: 15px;
    color: #e6ebf1;
}
.osd-start .brand {
    font-size: 11px;
    color: #d6dce4;
    letter-spacing: 0.02em;
}
.osd-flex { flex: 1; }
.osd-tray {
    width: 13px;
    height: 13px;
    color: #93a0b0;
}
.osd-clock {
    margin-left: 2px;
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: 0.05em;
    color: #aeb6c2;
}

/* clickable bits — selection, sidebar, taskbar (wired in osd.js) */
.osd-item { cursor: pointer; transition: background 120ms ease, border-color 120ms ease; }
.osd-item:hover:not(.selected) { background: rgba(13, 46, 54, 0.05); }
.osd-places span { cursor: pointer; transition: background 120ms ease, color 120ms ease; }
.osd-places span:hover:not(.active) { background: rgba(13, 46, 54, 0.05); color: var(--ink); }
.osd-icon { cursor: pointer; }
.osd-icon small { padding: 1px 5px; border-radius: 3px; }
.osd-icon.selected small { background: rgba(90, 143, 200, 0.5); }
.osd-icon.selected .osd-folder { filter: brightness(1.15); }

/* narrow screens: drop the sidebar, tighten the window */
@media (max-width: 560px) {
    .osd { height: 340px; }
    .osd-places { display: none; }
    .osd-files { width: 72%; }
    .osd-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Touch devices: the meter is tap-to-explore (a tap selects a stage
   instead of opening the waitlist — see invite-fx.js). The strip gets
   generous padding in every direction — negative side margins pull it
   into the card's gutters — so the entire band around the bars is a
   safe zone: near-miss taps land on a stage, never on the modal. */
@media (hover: none) {
    .cta-levels {
        margin-top: 12px;
        margin-left: -14px;
        margin-right: -14px;
        padding: 14px 14px 12px;
    }
    .cta-level { padding: 12px 0 8px; }
    .cta-level i { height: 9px; }
}

/* ============ UPCOMING EVENTS ============
   The events section lists what's open now. Right now there's one event,
   "Inside a Cyber Attack" (Sentra Academy × AUK, five evenings, exclusive
   to AUK students): copy, dates and a live countdown on the left; the
   collab art and a hairline fact grid on the right; a five-day plan
   below. The certificate is a corner badge on the art. Kept compact so
   it reads as one item in a list, not a full hero. */
.section-events { padding-top: 56px; padding-bottom: 60px; }

.events-head { margin-bottom: 30px; }
.events-head .section-title { margin-bottom: 8px; }
.events-sub {
    color: var(--muted);
    font-size: 15px;
    line-height: 1.55;
}

/* One event item, set off from the heading by a hairline top rule. */
.event {
    display: block;
    padding-top: 34px;
    border-top: 1px solid var(--line);
}

.course {
    display: grid;
    grid-template-columns: 1.04fr 0.96fr;
    gap: clamp(36px, 4vw, 60px);
    align-items: start;
}

.course-eyebrow {
    font-family: var(--mono);
    font-size: 11.5px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 14px;
}
.course-title {
    font-size: clamp(27px, 3.2vw, 38px);
    font-weight: 500;
    letter-spacing: -0.022em;
    line-height: 1.06;
    color: var(--ink);
    margin-bottom: 14px;
}
.course-title em {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 400;
    color: var(--brand);
}
.course-excl {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border: 1px solid var(--line-2);
    border-radius: 999px;
    color: var(--muted);
    font-family: var(--mono);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 18px;
}
.course-sub {
    color: var(--muted);
    font-size: 15px;
    line-height: 1.58;
    max-width: 470px;
    margin-bottom: 22px;
}

/* Kickoff block: the date is the loudest element after the title. */
.course-kickoff { margin-bottom: 20px; }
.ck-k, .cc-k {
    display: block;
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 9px;
}
.ck-date {
    font-size: clamp(24px, 2.6vw, 30px);
    font-weight: 500;
    letter-spacing: -0.02em;
    color: var(--brand);
    margin-bottom: 5px;
}
.ck-meta {
    font-size: 14.5px;
    color: var(--ink);
    margin-bottom: 7px;
}
.ck-loc {
    font-size: 13.5px;
    color: var(--muted);
}

/* Countdown: mono digits in hairline cells. */
.course-count { margin-bottom: 22px; }
.cc-cells {
    display: flex;
    align-items: stretch;
    gap: 8px;
}
.cc-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    min-width: 64px;
    padding: 11px 8px 9px;
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: 10px;
}
.cc-cell b {
    font-family: var(--mono);
    font-weight: 500;
    font-size: 24px;
    line-height: 1;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}
.cc-cell small {
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted-2);
}
.course-count.is-live .cc-k,
.course-count.is-done .cc-k { color: var(--muted); }

.course-cta {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.course-note {
    font-size: 13px;
    color: var(--muted);
    max-width: 440px;
}

/* Right column: collab art + fact grid. */
.course-side {
    display: flex;
    flex-direction: column;
    gap: 16px;
    /* gives the floating art a vanishing point so its tilt reads as 3D */
    perspective: 900px;
}
.course-art {
    position: relative;
    margin: 0;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--line-2);
    background: var(--dark);
    box-shadow: 0 30px 70px -24px rgba(10, 14, 21, 0.45);
    animation: course-art-float 9s ease-in-out infinite;
    will-change: transform;
}
/* Slow drift: bob and tilt move out of phase so the loop never reads
   as a metronome. Tilt stays under 2deg — alive, not seasick. */
@keyframes course-art-float {
    0%   { transform: translate3d(0, 0, 0) rotateX(0deg) rotateY(0deg); }
    25%  { transform: translate3d(0, -9px, 0) rotateX(1.4deg) rotateY(-1.8deg); }
    50%  { transform: translate3d(0, -3px, 0) rotateX(-0.8deg) rotateY(1.4deg); }
    75%  { transform: translate3d(0, -11px, 0) rotateX(1deg) rotateY(1.8deg); }
    100% { transform: translate3d(0, 0, 0) rotateX(0deg) rotateY(0deg); }
}
@media (prefers-reduced-motion: reduce) {
    .course-art { animation: none; }
}
.course-art img {
    display: block;
    width: 100%;
    aspect-ratio: 5 / 4;
    object-fit: cover;
}
/* Corner badge over the art: top right, in the empty part of the photo,
   away from the laptop and the logos. Frosted so it sits on the dark
   image without shouting. */
.art-badge {
    position: absolute;
    top: 14px;
    right: 14px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 13px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.55);
    color: var(--brand);
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    box-shadow: 0 10px 24px -12px rgba(10, 14, 21, 0.55);
}
.art-badge svg { width: 13px; height: 13px; }
.course-facts {
    margin: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: 14px;
    overflow: hidden;
}
.cf {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 14px 16px;
    background: var(--bg-2);
}
.cf dt {
    font-family: var(--mono);
    font-size: 9.5px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
}
.cf dd {
    margin: 0;
    font-size: 13.5px;
    font-weight: 500;
    letter-spacing: -0.005em;
    color: var(--ink);
}

/* Five-day strip. */
.course-days {
    margin-top: 40px;
    scroll-margin-top: 90px;
}
.cd-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px 24px;
    flex-wrap: wrap;
    margin-bottom: 22px;
}
.cd-head h3 {
    font-size: clamp(22px, 2.6vw, 28px);
    font-weight: 500;
    letter-spacing: -0.02em;
    color: var(--ink);
}
.cd-head h3 em {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 400;
    color: var(--brand);
}
.cd-head p {
    color: var(--muted);
    font-size: 14.5px;
    max-width: 460px;
    margin: 0;
}
.cd-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: 14px;
    overflow: hidden;
}
.cd-day {
    padding: 20px 18px 22px;
    border-right: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: background 0.18s ease;
}
.cd-day:last-child { border-right: none; }
.cd-day:hover { background: #f7f7f4; }
.cd-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.cd-num {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--brand);
}
.cd-tag {
    font-family: var(--mono);
    font-size: 8.5px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
}
.cd-day h4 {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--ink);
}
.cd-day p {
    color: var(--muted);
    font-size: 12.5px;
    line-height: 1.55;
    margin: 0;
}

/* Labs section: heading lives in the left column and aligns to the top
   of the lab window, so the two columns start on the same line instead
   of the copy floating in a centred gap. */
#labs .lab-wrap { align-items: start; }
.lab-title { margin-bottom: 18px; }
#labs .lab-lead { margin-bottom: 24px; }

/* Waitlist modal: course-context banner + field hint. */
.waitlist-context {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 12px 14px;
    border: 1px solid rgba(13, 46, 54, 0.18);
    border-radius: 10px;
    background: rgba(13, 46, 54, 0.05);
    margin-bottom: 16px;
}
.waitlist-context strong {
    font-size: 13.5px;
    letter-spacing: -0.005em;
    color: var(--ink);
}
.waitlist-context span {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--muted);
}
.field-hint {
    margin-top: 2px;
    font-size: 12px;
    color: var(--muted-2);
    line-height: 1.5;
}
/* Links inside hints must read as clickable: base `a` is reset to plain
   inherited text, which buries the waitlist escape hatch. */
.field-hint a {
    color: var(--brand);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color 0.15s ease;
}
.field-hint a:hover { color: var(--brand-hover); }

/* Course responsive steps. */
@media (max-width: 980px) {
    .course { grid-template-columns: 1fr; }
    .course-side { max-width: 560px; }
    .cd-grid { grid-template-columns: 1fr; }
    .cd-day { border-right: none; border-bottom: 1px solid var(--line); }
    .cd-day:last-child { border-bottom: none; }
    .course-days { margin-top: 52px; }
}
@media (max-width: 640px) {
    .course-cta { flex-direction: column; align-items: stretch; }
    .course-cta .btn { width: 100%; justify-content: center; }
    .cc-cells { gap: 6px; }
    .cc-sep { display: none; }
    .cc-cell { min-width: 0; flex: 1; }
    .cc-cell b { font-size: 21px; }
    .course-title { font-size: 32px; }
    .ck-date { font-size: 23px; }
}

/* ============ CENTERED PAGE FRAME ============
   Vercel/Cloudflare-style centered column: every section sits inside one
   fixed-width frame with hairline rails down both sides, so the whole
   page reads as a single centered sheet. The drifting grid backdrop
   moves from <body> into the frame; outside it the page stays plain. */
:root { --frame-w: 1140px; }

/* Grid lives on the OUTER backdrop now: the body carries the drifting
   grid, and the opaque centered column (.page-frame) masks it, so the
   grid only shows in the side gutters. Content stays on clean white;
   the grid frames it. */
body {
    background-image:
        linear-gradient(to right, rgba(13, 46, 54, 0.05) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(13, 46, 54, 0.05) 1px, transparent 1px);
    background-size: 40px 40px, 40px 40px;
    background-position: 0 0, 0 0;
    background-attachment: fixed, fixed;
    animation: grid-drift-outer 12s linear infinite;
}
@keyframes grid-drift-outer {
    from { background-position: 0 0, 0 0; }
    to   { background-position: 40px 40px, 40px 40px; }
}
@media (prefers-reduced-motion: reduce) { body { animation: none; } }

/* Nav content lines up with the frame edges. */
.container { max-width: var(--frame-w); }

.page-frame {
    position: relative;
    max-width: var(--frame-w);
    margin: 0 auto;
    border-left: 1px dashed var(--line-2);
    border-right: 1px dashed var(--line-2);
    background-color: var(--bg);
}

/* Crosshair ticks where the frame meets the nav (the Vercel "+"). */
.page-frame::before,
.page-frame::after {
    position: absolute;
    top: -9px;
    z-index: 1;
    font: 400 16px/1 var(--mono);
    color: var(--muted-2);
    content: "+";
    pointer-events: none;
}
.page-frame::before { left: -6px; }
.page-frame::after { right: -6px; }

/* Hairline between sections so the column reads as one ruled sheet. */
.page-frame > section + section { border-top: 1px solid var(--line); }

/* The hero's bottom rule is special: it runs the full width of the
   screen, past the frame rails (the Vercel hero look). The body clips
   the 100vw overflow with `clip` — not `hidden`, which would break the
   sticky nav. */
body { overflow-x: clip; }
.page-frame > .hero + section {
    position: relative;
    border-top: none;
}
.page-frame > .hero + section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 100vw;
    height: 1px;
    transform: translateX(-50%);
    background: var(--line-2);
    pointer-events: none;
}

/* Once the frame spans the whole viewport there is nothing to center:
   drop the rails and ticks so the edges stay clean. */
@media (max-width: 1160px) {
    .page-frame { border-left: none; border-right: none; }
    .page-frame::before,
    .page-frame::after { content: none; }
}

/* ============ SMALL PHONES ============
   The stock landing.css already steps the layout down (single columns,
   tighter container padding at 640/420px); these rules size the ported
   components for narrow screens. Must come last so they win the cascade. */
@media (max-width: 480px) {
    .card-swap-stage { min-height: 290px; }
    .card-swap-container { transform: translateX(50%) scale(0.72); }
    .benefits-intro { font-size: 15px; }

    .cta-invite { min-height: 0; }
    .cta-invite-main { padding: 20px 18px 22px; }
    .cta-audience strong { font-size: 23px; }
    .cta-levels { margin-top: 22px; }
    .cta-level small { font-size: 9px; }
    .cta-stage-line { font-size: 12px; }
    .cta-invite-action { padding: 13px 16px 14px; }
}