/* ==========================================================
   CoregenX: Startup Consultancy & MVP Development
   File: css/startup-consultancy.css (?v=20261020r)
   Theme Palette:
   - Lead colour: teal-green gradient #359fad -> #4cdaa0 (accents, highlights, icons, ticks)
   - Main CTA: pink #f9758f -> #d9265f ONLY for primary CTA buttons
   - Navy: #1c1446 / #0f1a3c for dark text and dark sections
   - Violet: #432d92 ONLY for one coloured band (Why section)
   - Backgrounds: white #ffffff / soft #f8f6ff alternating
   - No blue, no orange/magenta mixes, no dot-grid decorations.
   - Reduced-motion safe: all transforms & animations disabled under prefers-reduced-motion.
   ========================================================== */

.su-page {
    --su-ink: #1c1446;
    --su-body: #4a5168;
    --su-muted: #7e859b;
    --su-line: #e4e2f0;
    --su-soft: #f8f6ff;

    /* Lead colour: logo teal-green palette */
    --su-teal: #359fad;
    --su-mint: #4cdaa0;
    --su-teal-ink: #197886;
    --su-teal-dark: #125762;
    --su-logo: linear-gradient(135deg, #359fad 0%, #4cdaa0 100%);
    --su-logo-rev: linear-gradient(to left, #4cdaa0 0%, #359fad 100%);
    --su-logo-soft: rgba(53, 159, 173, 0.1);
    --su-mint-soft: rgba(76, 218, 160, 0.14);

    /* Primary CTA buttons: pink ONLY */
    --su-pink: #d9265f;
    --su-pink-2: #f9758f;
    --su-pinkg: linear-gradient(135deg, #f9758f 0%, #d9265f 100%);
    --su-pink-shadow: rgba(217, 38, 95, 0.45);

    /* Dark text & sections */
    --su-navy: #1c1446;
    --su-navy-2: #0f1a3c;

    /* Violet band ONLY for Why section */
    --su-violet: #432d92;
    --su-violet-soft: rgba(67, 45, 146, 0.08);

    --su-head: 'Jost', sans-serif;
    --su-text: 'Open Sans', sans-serif;
    --su-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --su-shadow: 0 20px 48px -22px rgba(28, 20, 70, 0.22);
    --su-shadow-sm: 0 10px 24px -14px rgba(28, 20, 70, 0.18);
    --su-shadow-lg: 0 32px 64px -24px rgba(28, 20, 70, 0.35);

    display: block;
    font-family: var(--su-text);
    font-size: 16px;
    line-height: 26px;
    color: var(--su-body);
    background: #ffffff;
    overflow-x: clip;
}

.su-page *,
.su-page *::before,
.su-page *::after {
    box-sizing: border-box;
}

.su-page h1,
.su-page h2,
.su-page h3,
.su-page h4 {
    font-family: var(--su-head);
    color: var(--su-ink);
}

.su-page p { margin: 0; }
.su-page ul,
.su-page ol { margin: 0; padding: 0; list-style: none; }
.su-page figure { margin: 0; }
.su-page img { max-width: 100%; height: auto; }

/* SVG Sprite hidden container */
.su-sprite {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

.su-ico {
    display: inline-block;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    vertical-align: middle;
}

.su-ico--fill {
    fill: currentColor;
    stroke: none;
}

.su-wrap {
    position: relative;
    z-index: 1;
    width: min(1240px, calc(100% - 40px));
    margin-inline: auto;
}

/* ─── Section Shells & Backgrounds ─── */
.su-sec {
    position: relative;
    padding: 92px 0;
}

.su-sec--soft {
    background: var(--su-soft);
    border-top: 1px solid var(--su-line);
    border-bottom: 1px solid var(--su-line);
}

.su-head {
    max-width: 820px;
    margin: 0 auto 52px;
    text-align: center;
}

.su-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 14px !important;
    font-family: var(--su-head);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    text-transform: uppercase;
    letter-spacing: 3.5px;
    color: var(--su-teal-ink);
}

.su-eyebrow__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--su-logo);
    box-shadow: 0 0 0 4px rgba(76, 218, 160, 0.25);
    flex-shrink: 0;
}

.su-eyebrow--light {
    color: #4cdaa0;
}

.su-eyebrow--light .su-eyebrow__dot {
    background: #4cdaa0;
    box-shadow: 0 0 0 4px rgba(76, 218, 160, 0.35);
}

.su-title {
    margin: 0 0 14px;
    font-size: 40px;
    font-weight: 600;
    line-height: 1.25;
    color: var(--su-ink);
    letter-spacing: -0.3px;
}

.su-title--light {
    color: #ffffff !important;
}

/* Single line supporting text on desktop (owner rule) */
.su-text {
    font-size: 16.5px;
    line-height: 27px;
    color: var(--su-body);
    max-width: 780px;
    margin: 0 auto;
}

.su-text--light {
    color: rgba(255, 255, 255, 0.84);
}

/* Heading Accent Gradient: Logo theme #359fad -> #4cdaa0 */
.su-grad {
    background: linear-gradient(95deg, #359fad 0%, #4cdaa0 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    display: inline-block;
}

/* ─── Buttons ─── */
.su-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 50px;
    padding: 13px 26px;
    border: 1.5px solid transparent;
    border-radius: 999px;
    font-family: var(--su-head);
    font-size: 15.5px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none !important;
    white-space: nowrap;
    overflow: hidden;
    isolation: isolate;
    transition: transform 0.3s var(--su-ease), box-shadow 0.3s var(--su-ease), background-color 0.3s, color 0.3s, border-color 0.3s;
}

.su-btn .su-ico {
    width: 18px;
    height: 18px;
    transition: transform 0.3s var(--su-ease);
}

.su-btn:hover .su-ico:last-child {
    transform: translateX(4px);
}

/* Primary pink CTA buttons */
.su-btn--pink {
    background: var(--su-pinkg);
    color: #ffffff !important;
    box-shadow: 0 10px 24px -8px var(--su-pink-shadow);
}

.su-btn--pink:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 28px -6px var(--su-pink-shadow);
}

/* Secondary green CTA buttons */
.su-btn--green {
    background: var(--su-logo-rev);
    color: #ffffff !important;
    box-shadow: 0 10px 24px -10px rgba(53, 159, 173, 0.65);
}

.su-btn--green:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 28px -8px rgba(53, 159, 173, 0.8);
}
.su-btn--green:hover .su-ico {
    transform: none;
}

.su-btn--ghost {
    padding-inline: 18px;
    background: transparent;
    border-color: var(--su-line);
    color: var(--su-ink) !important;
}

.su-btn--ghost:hover {
    border-color: var(--su-teal);
    color: var(--su-teal-ink) !important;
    background: var(--su-logo-soft);
    transform: translateY(-2px);
}

.su-btn--ghost .su-ico {
    color: var(--su-teal);
}

/* Shine / glint effect for high-conversion buttons */
.su-btn--shine::after {
    content: '';
    position: absolute;
    top: 0;
    left: -60%;
    width: 40%;
    height: 100%;
    background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, 0.55) 50%, transparent 100%);
    transform: skewX(-20deg);
    animation: su-glint 6s ease-in-out 2s infinite;
    z-index: -1;
    pointer-events: none;
}

@keyframes su-glint {
    0%, 78% { left: -60%; }
    92%, 100% { left: 130%; }
}

.su-ctas {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

/* ─── Scroll Reveal ─── */
.su-js [data-su-rv] {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.7s var(--su-ease), transform 0.7s var(--su-ease);
    transition-delay: calc(var(--d, 0) * 80ms);
}

.su-js [data-su-rv].is-in {
    opacity: 1;
    transform: none;
}

/* ==========================================================
   1. HERO: Centred copy + Fanned Launch Kit
   ========================================================== */
.su-hero {
    position: relative;
    padding: 56px 0 68px;
    background:
        radial-gradient(760px 420px at 50% 100%, rgba(76, 218, 160, 0.12), transparent 65%),
        radial-gradient(600px 380px at 0% 0%, rgba(53, 159, 173, 0.08), transparent 60%),
        linear-gradient(180deg, #ffffff 0%, #fbfaff 100%);
    overflow: hidden;
}

/* Clean circular geometric outlines (NO dot grids) */
.su-hero__orb {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(53, 159, 173, 0.12);
    pointer-events: none;
}

.su-hero__orb--a {
    width: 580px;
    height: 580px;
    right: -220px;
    top: -240px;
}

.su-hero__orb--b {
    width: 320px;
    height: 320px;
    left: -140px;
    top: 100px;
    border-style: dashed;
    border-color: rgba(76, 218, 160, 0.22);
}

.su-hero__copy {
    max-width: 1080px;
    margin: 0 auto;
    text-align: center;
}

.su-hero__h1 {
    margin: 0 0 12px;
    font-size: 52px;
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.6px;
    color: var(--su-ink);
}

.su-hero__quote {
    margin: 0 0 14px !important;
    font-family: var(--su-head);
    font-size: 21px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--su-teal-ink);
}

.su-hero__lead {
    max-width: 760px;
    margin: 0 auto 24px !important;
    font-size: 17px;
    line-height: 28px;
    color: var(--su-body);
}

.su-hero__lead strong {
    color: var(--su-ink);
    font-weight: 600;
}

/* Proof points row - aligned per owner feedback */
.su-hero__proofs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin: 0 0 28px !important;
}

.su-hero__proofs li {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 7px 18px 7px 8px;
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid var(--su-line);
    box-shadow: 0 8px 18px -14px rgba(28, 20, 70, 0.35);
    font-family: var(--su-head);
    font-size: 15px;
    font-weight: 500;
    color: var(--su-ink);
}

.su-tick {
    display: inline-grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--su-mint-soft);
    color: var(--su-teal-ink);
    flex-shrink: 0;
}

.su-tick .su-ico {
    width: 15px;
    height: 15px;
    stroke-width: 2.5;
}

.su-hero .su-ctas {
    justify-content: center;
}

/* ─── Hero Launch Kit (Fanned Visual) ─── */
.su-kit {
    position: relative;
    max-width: 1060px;
    height: 430px;
    margin: 50px auto 0;
}

.su-kit::before {
    content: '';
    position: absolute;
    left: 8%;
    right: 8%;
    bottom: 26px;
    height: 70px;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(28, 20, 70, 0.16), transparent);
    filter: blur(6px);
}

/* Centre: Browser mockup with business website */
.su-kit__browser {
    position: absolute !important;
    left: 50%;
    top: 0;
    z-index: 2;
    width: 560px;
    margin-left: -280px !important;
    border-radius: 18px;
    background: #ffffff;
    border: 1px solid var(--su-line);
    box-shadow: 0 34px 60px -30px rgba(28, 20, 70, 0.45);
    overflow: hidden;
}

.su-kit__bar {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 14px;
    background: var(--su-soft);
    border-bottom: 1px solid var(--su-line);
}

.su-kit__url {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 1;
    max-width: 260px;
    padding: 4px 12px;
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid var(--su-line);
    font-size: 12.5px;
    line-height: 1.3;
    color: var(--su-muted);
}

.su-kit__url .su-ico {
    width: 13px;
    height: 13px;
    color: var(--su-teal);
}

.su-kit__browser img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
}

.su-kit__tag {
    position: absolute;
    left: 14px;
    bottom: 14px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    border-radius: 999px;
    background: rgba(28, 20, 70, 0.88);
    font-family: var(--su-head);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
    color: #ffffff;
    backdrop-filter: blur(4px);
}

.su-kit__tag .su-ico {
    width: 15px;
    height: 15px;
    color: #4cdaa0;
}

/* Left: Brand Guide sheet */
.su-kit__sheet {
    position: absolute;
    left: 3%;
    top: 64px;
    z-index: 1;
    width: 260px;
    padding: 18px;
    border-radius: 18px;
    background: #ffffff;
    border: 1px solid var(--su-line);
    box-shadow: 0 26px 50px -28px rgba(28, 20, 70, 0.45);
    transform: rotate(-7deg);
    animation: su-bob 7s ease-in-out infinite;
}

.su-kit__label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    font-family: var(--su-head);
    font-size: 14px;
    font-weight: 600;
    color: var(--su-ink);
}

.su-kit__label .su-ico {
    width: 26px;
    height: 26px;
    padding: 5px;
    border-radius: 8px;
    background: var(--su-mint-soft);
    color: var(--su-teal-ink);
}

.su-sheet__logo {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    margin-bottom: 12px;
    border-radius: 12px;
    background: var(--su-soft);
}

.su-sheet__logo span {
    width: 30px;
    height: 30px;
    border-radius: 9px 50% 50% 50%;
    background: var(--su-logo);
}

.su-sheet__logo b {
    font-family: var(--su-head);
    font-size: 17px;
    font-weight: 600;
    color: var(--su-navy);
}

.su-sheet__swatches {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-bottom: 12px;
}

.su-sheet__swatches i {
    height: 30px;
    border-radius: 8px;
}

.su-sheet__swatches i:nth-child(1) { background: #359fad; }
.su-sheet__swatches i:nth-child(2) { background: #4cdaa0; }
.su-sheet__swatches i:nth-child(3) { background: #1c1446; }
.su-sheet__swatches i:nth-child(4) { background: #f8f6ff; border: 1px solid var(--su-line); }

.su-sheet__type {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.su-sheet__type b {
    font-family: var(--su-head);
    font-size: 34px;
    font-weight: 600;
    line-height: 1;
    color: var(--su-ink);
}

.su-sheet__type span {
    font-family: var(--su-head);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.3;
    color: var(--su-ink);
}

.su-sheet__type small {
    display: block;
    font-family: var(--su-text);
    font-size: 12px;
    font-weight: 400;
    color: var(--su-muted);
}

.su-sheet__lines {
    display: grid;
    gap: 6px;
}

.su-sheet__lines i {
    height: 6px;
    border-radius: 4px;
    background: #efedf7;
}

.su-sheet__lines i:nth-child(2) { width: 82%; }
.su-sheet__lines i:nth-child(3) { width: 58%; }

/* Right: Payments Phone */
.su-kit__phone {
    position: absolute;
    right: 4%;
    top: 34px;
    z-index: 3;
    width: 214px;
    padding: 30px 12px 16px;
    border-radius: 32px;
    background: linear-gradient(160deg, #1c1446 0%, #0f1a3c 100%);
    box-shadow: 0 34px 60px -26px rgba(15, 26, 60, 0.75);
    transform: rotate(6deg);
    animation: su-bob 7s ease-in-out -3.5s infinite;
}

.su-phone__notch {
    position: absolute;
    left: 50%;
    top: 11px;
    width: 58px;
    height: 7px;
    margin-left: -29px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.16);
}

.su-phone__mail {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.su-phone__mail img {
    width: 28px;
    height: 28px;
    padding: 5px;
    border-radius: 8px;
    background: #ffffff;
}

.su-phone__mail b {
    display: block;
    font-size: 12.5px;
    line-height: 1.3;
    color: #ffffff;
}

.su-phone__mail small {
    display: block;
    font-size: 11px;
    line-height: 1.35;
    color: rgba(255, 255, 255, 0.7);
}

.su-phone__pay {
    display: grid;
    gap: 7px;
    padding: 12px;
    border-radius: 16px;
    background: #ffffff;
}

.su-phone__pay > b {
    font-family: var(--su-head);
    font-size: 14.5px;
    font-weight: 600;
    color: var(--su-ink);
    margin-bottom: 2px;
}

.su-phone__opt {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 10px;
    border: 1px solid var(--su-line);
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--su-ink);
}

.su-phone__opt .su-ico {
    width: 14px;
    height: 14px;
    color: var(--su-teal);
}

.su-phone__opt.is-on {
    border-color: var(--su-teal);
    background: rgba(76, 218, 160, 0.12);
}

.su-phone__opt.is-on .su-ico {
    color: var(--su-teal-ink);
}

.su-phone__logos {
    display: flex;
    justify-content: center;
    gap: 12px;
    padding-top: 4px;
}

.su-phone__logos img {
    width: 20px;
    height: 20px;
}

.su-phone__ok {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin-top: 10px;
    padding: 9px;
    border-radius: 12px;
    background: var(--su-logo);
    font-family: var(--su-head);
    font-size: 13.5px;
    font-weight: 600;
    color: #ffffff;
}

.su-phone__ok .su-ico {
    width: 15px;
    height: 15px;
    stroke-width: 3;
}

.su-kit__cap {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    text-align: center;
    font-size: 13px;
    color: var(--su-muted);
}

@keyframes su-bob {
    0%, 100% { translate: 0 0; }
    50% { translate: 0 -10px; }
}

/* ─── Startup Tools & Partner Platforms Strip ─── */
.su-tools {
    position: relative;
    padding: 30px 0 40px;
    background: #ffffff;
    border-bottom: 1px solid var(--su-line);
}

.su-tools__label {
    text-align: center;
    font-family: var(--su-head);
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--su-muted);
    margin-bottom: 20px !important;
}

.su-tools__strip {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 14px;
}

.su-tool-chip {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 9px 18px 9px 12px;
    border-radius: 999px;
    background: var(--su-soft);
    border: 1px solid var(--su-line);
    box-shadow: 0 4px 12px -8px rgba(28, 20, 70, 0.2);
    transition: transform 0.3s var(--su-ease), border-color 0.3s, box-shadow 0.3s;
}

.su-tool-chip:hover {
    transform: translateY(-2px);
    border-color: var(--su-teal);
    box-shadow: 0 8px 18px -10px rgba(53, 159, 173, 0.4);
    background: #ffffff;
}

.su-tool-chip img {
    width: 22px;
    height: 22px;
    object-fit: contain;
    flex-shrink: 0;
}

.su-tool-chip span {
    font-family: var(--su-head);
    font-size: 14.5px;
    font-weight: 600;
    color: var(--su-ink);
}

.su-tool-chip small {
    display: inline-block;
    padding: 2px 7px;
    border-radius: 999px;
    background: rgba(76, 218, 160, 0.2);
    font-size: 11px;
    font-weight: 600;
    color: var(--su-teal-ink);
    margin-left: 2px;
}

/* ==========================================================
   2. EARLY DECISIONS: Shuffling Photo Deck + 5 Hard Questions
   ========================================================== */
.su-decide__grid {
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    gap: 64px;
    align-items: center;
}

.su-deck { position: relative; }

.su-deck__stack {
    position: relative;
    aspect-ratio: 846 / 672;
    margin: 0 18px 0 6px;
}

.su-deck__card {
    position: absolute !important;
    inset: 0;
    border-radius: 22px;
    overflow: hidden;
    background: #ffffff;
    border: 6px solid #ffffff;
    box-shadow: 0 20px 40px -22px rgba(28, 20, 70, 0.35);
    transition: transform 0.9s var(--su-ease), opacity 0.9s var(--su-ease), z-index 0s 0.45s;
}

.su-deck__card img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 16px;
}

.su-deck__card[data-pos="0"] { z-index: 4; transform: rotate(0deg); }
.su-deck__card[data-pos="1"] { z-index: 3; transform: translate(14px, -14px) rotate(3.5deg); }
.su-deck__card[data-pos="2"] { z-index: 2; transform: translate(26px, -26px) rotate(7deg); opacity: 0.9; }
.su-deck__card[data-pos="3"] { z-index: 1; transform: translate(34px, -34px) rotate(10deg); opacity: 0.7; }

.su-deck__quote {
    position: relative;
    z-index: 5;
    width: min(88%, 420px);
    margin: -42px 0 0 auto;
    padding: 20px 22px 20px 70px;
    border-radius: 18px;
    background: linear-gradient(135deg, #1c1446 0%, #0f1a3c 100%);
    box-shadow: var(--su-shadow);
}

.su-deck__quote .su-ico {
    position: absolute;
    left: 20px;
    top: 22px;
    width: 34px;
    height: 34px;
    padding: 7px;
    border-radius: 10px;
    background: var(--su-logo);
    color: #ffffff;
}

.su-deck__quote p {
    font-family: var(--su-head);
    font-size: 19px;
    font-weight: 600;
    line-height: 1.35;
    color: #ffffff;
}

.su-deck__quote small {
    display: block;
    margin-top: 6px;
    font-size: 13.5px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.75);
}

.su-decide__copy .su-text {
    margin: 0 0 26px !important;
}

.su-qs li {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 16px;
    padding: 15px 16px;
    margin: 0 -16px;
    border-radius: 16px;
    transition: background 0.3s, transform 0.3s var(--su-ease), box-shadow 0.3s;
}

.su-qs li + li {
    border-top: 1px dashed #dcd8ec;
}

.su-qs li:hover {
    background: #ffffff;
    box-shadow: var(--su-shadow-sm);
    transform: translateX(4px);
    border-top-color: transparent;
}

.su-qs li:hover + li {
    border-top-color: transparent;
}

.su-qs__ico {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: #ffffff;
    border: 1px solid var(--su-line);
    color: var(--su-teal);
    box-shadow: 0 6px 14px -10px rgba(28, 20, 70, 0.25);
    transition: background 0.3s, color 0.3s;
}

.su-qs li:hover .su-qs__ico {
    background: var(--su-logo);
    color: #ffffff;
    border-color: transparent;
}

.su-qs h3 {
    margin: 0 0 4px;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--su-ink);
}

.su-qs p {
    font-size: 15px;
    line-height: 24px;
    color: var(--su-body);
}

/* ==========================================================
   3. JOURNEY: Vertical Milestone Path
   ========================================================== */
.su-journey {
    background:
        radial-gradient(600px 300px at 100% 0%, rgba(76, 218, 160, 0.08), transparent 70%),
        #ffffff;
}

.su-path {
    position: relative;
    max-width: 1120px;
    margin: 0 auto !important;
}

.su-path__rail {
    position: absolute;
    left: 50%;
    top: 30px;
    bottom: 30px;
    width: 4px;
    margin-left: -2px;
    border-radius: 4px;
    background: repeating-linear-gradient(180deg, #e2def0 0 10px, transparent 10px 18px);
}

.su-path__fill {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border-radius: 4px;
    background: linear-gradient(180deg, #359fad 0%, #4cdaa0 70%, #1c1446 100%);
    transform-origin: top;
    transform: scaleY(var(--p, 0));
}

.su-stop {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 88px minmax(0, 1fr);
    align-items: center;
    padding: 20px 0;
}

.su-stop__node {
    grid-column: 2;
    grid-row: 1;
    justify-self: center;
    position: relative;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #ffffff;
    border: 2px solid #e2def0;
    color: var(--su-teal);
    box-shadow: 0 0 0 8px #ffffff;
    transition: background 0.5s, color 0.5s, border-color 0.5s, transform 0.5s var(--su-ease);
}

.su-stop__node .su-ico {
    width: 26px;
    height: 26px;
}

.su-stop.is-on .su-stop__node {
    background: var(--su-logo);
    border-color: transparent;
    color: #ffffff;
    transform: scale(1.08);
}

.su-stop.is-on .su-stop__node::after {
    content: '';
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    border: 2px solid rgba(76, 218, 160, 0.45);
    animation: su-ping 2.4s ease-out infinite;
}

@keyframes su-ping {
    0% { transform: scale(0.9); opacity: 1; }
    100% { transform: scale(1.35); opacity: 0; }
}

.su-stop__card {
    grid-column: 1;
    grid-row: 1;
    position: relative;
    padding: 28px 30px;
    border-radius: 22px;
    background: #ffffff;
    border: 1px solid var(--su-line);
    box-shadow: 0 18px 40px -30px rgba(28, 20, 70, 0.35);
    transition: transform 0.6s var(--su-ease), opacity 0.6s var(--su-ease), box-shadow 0.4s;
}

.su-stop__card::after {
    content: '';
    position: absolute;
    top: 50%;
    right: -9px;
    width: 16px;
    height: 16px;
    margin-top: -8px;
    background: #ffffff;
    border-right: 1px solid var(--su-line);
    border-top: 1px solid var(--su-line);
    transform: rotate(45deg);
}

.su-stop__ui {
    grid-column: 3;
    grid-row: 1;
    transition: transform 0.6s var(--su-ease), opacity 0.6s var(--su-ease);
}

.su-stop:nth-child(odd) .su-stop__card { grid-column: 3; }
.su-stop:nth-child(odd) .su-stop__ui { grid-column: 1; }
.su-stop:nth-child(odd) .su-stop__card::after {
    right: auto;
    left: -9px;
    transform: rotate(-135deg);
}

.su-stop__num {
    display: inline-block;
    margin-bottom: 8px;
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--su-mint-soft);
    font-family: var(--su-head);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--su-teal-ink);
}

.su-stop__card h3 {
    margin: 0 0 8px;
    font-size: 26px;
    font-weight: 600;
    line-height: 1.25;
    color: var(--su-ink);
}

.su-stop__card p {
    font-size: 15.5px;
    line-height: 25px;
    color: var(--su-body);
}

.su-stop__card a {
    color: var(--su-teal-ink);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.su-stop__meta {
    display: flex;
    gap: 10px;
    margin-top: 14px !important;
    padding: 10px 14px;
    border-radius: 12px;
    background: var(--su-soft);
    font-size: 13.5px !important;
    line-height: 21px !important;
    color: var(--su-ink);
}

.su-stop__meta .su-ico {
    width: 17px;
    height: 17px;
    margin-top: 2px;
    color: var(--su-teal);
}

.su-js .su-stop:not(.is-seen) .su-stop__card { opacity: 0; transform: translateX(-26px); }
.su-js .su-stop:not(.is-seen) .su-stop__ui { opacity: 0; transform: translateX(26px) scale(0.97); }
.su-js .su-stop:nth-child(odd):not(.is-seen) .su-stop__card { transform: translateX(26px); }
.su-js .su-stop:nth-child(odd):not(.is-seen) .su-stop__ui { transform: translateX(-26px) scale(0.97); }

/* Journey Step UI Panels */
.su-ui {
    position: relative;
    padding: 0 0 18px;
    border-radius: 18px;
    background: #ffffff;
    border: 1px solid var(--su-line);
    box-shadow: var(--su-shadow);
    overflow: hidden;
}

.su-ui__bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 16px;
    margin-bottom: 16px;
    background: var(--su-soft);
    border-bottom: 1px solid var(--su-line);
    font-family: var(--su-head);
    font-size: 14px;
    font-weight: 600;
    color: var(--su-ink);
}

.su-ui__dots { display: inline-flex; gap: 5px; }
.su-ui__dots i { width: 8px; height: 8px; border-radius: 50%; background: #d9d5ea; }
.su-ui__dots i:first-child { background: #359fad; }
.su-ui__dots i:nth-child(2) { background: #4cdaa0; }

.su-ui__chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 14px 16px 0;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
}

.su-ui__chip .su-ico { width: 15px; height: 15px; }
.su-ui__chip--teal { background: var(--su-mint-soft); color: var(--su-teal-ink); }
.su-ui__chip--navy { background: rgba(28, 20, 70, 0.08); color: var(--su-navy); }

.su-brief { padding: 0 16px; display: grid; gap: 12px; }
.su-brief__row span { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 13.5px; color: var(--su-ink); }
.su-brief__row .su-ico { width: 15px; height: 15px; color: var(--su-teal); }

.su-brief__row i,
.su-market i {
    position: relative;
    display: block;
    height: 8px;
    border-radius: 6px;
    background: #f0eef8;
    overflow: hidden;
}

.su-brief__row i::after,
.su-market i::after {
    content: '';
    position: absolute;
    inset: 0;
    width: var(--w);
    border-radius: 6px;
    background: linear-gradient(90deg, #359fad, #4cdaa0);
    transform-origin: left;
    transform: scaleX(0);
    transition: transform 1.1s var(--su-ease) 0.3s;
}

.su-brief__row:nth-child(2) i::after { background: linear-gradient(90deg, #359fad, #197886); }
.su-brief__row:nth-child(3) i::after { background: linear-gradient(90deg, #1c1446, #359fad); }

.su-stop.is-seen .su-brief__row i::after,
.su-stop.is-seen .su-market i::after { transform: scaleX(1); }

.su-page .su-market { padding: 0 16px; display: grid; gap: 14px; }

.su-market li {
    display: grid;
    grid-template-columns: 32px 120px minmax(0, 1fr) 20px;
    align-items: center;
    gap: 10px;
}

.su-market b { font-size: 13.5px; font-weight: 600; color: var(--su-ink); line-height: 1.25; }

.su-market__ico { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; }
.su-market__ico .su-ico { width: 16px; height: 16px; }
.su-market__ico--teal { background: var(--su-mint-soft); color: var(--su-teal-ink); }
.su-market__ico--navy { background: rgba(28, 20, 70, 0.08); color: var(--su-navy); }
.su-market li:nth-child(2) i::after { background: linear-gradient(90deg, #359fad, #4cdaa0); }
.su-market li:nth-child(3) i::after { background: linear-gradient(90deg, #1c1446, #359fad); }
.su-market__ok { width: 18px; height: 18px; color: var(--su-teal); stroke-width: 3; }

.su-scope { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 0 16px; }
.su-scope__col { padding: 12px; border-radius: 14px; display: flex; flex-direction: column; gap: 7px; }
.su-scope__col b { font-family: var(--su-head); font-size: 12px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; margin-bottom: 2px; }
.su-scope__col span { padding: 7px 10px; border-radius: 9px; background: #ffffff; font-size: 13px; line-height: 1.2; color: var(--su-ink); box-shadow: 0 3px 8px -6px rgba(28, 20, 70, 0.4); }
.su-scope__col--in { background: var(--su-mint-soft); }
.su-scope__col--in b { color: var(--su-teal-ink); }
.su-scope__col--later { background: #f3f1fa; }
.su-scope__col--later b { color: var(--su-muted); }
.su-scope__col--later span { color: var(--su-muted); border: 1px dashed #d9d5ea; box-shadow: none; background: transparent; }

.su-scope__stack { display: flex; align-items: center; gap: 8px; padding: 14px 16px 0; }
.su-scope__stack img { width: 28px; height: 28px; padding: 5px; border-radius: 8px; background: #ffffff; border: 1px solid var(--su-line); }
.su-scope__stack small { margin-left: 4px; font-size: 12.5px; color: var(--su-muted); line-height: 1.3; }

.su-page .su-golive { padding: 0 16px; display: grid; gap: 8px; }

.su-golive li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 11px;
    background: var(--su-soft);
    font-size: 14px;
    color: var(--su-ink);
    line-height: 1.3;
}

.su-golive li > .su-ico { width: 16px; height: 16px; color: var(--su-teal); }
.su-golive img { width: 16px; height: 16px; }
.su-golive__duo { display: inline-flex; gap: 4px; }

.su-golive__ok {
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    margin-left: auto;
    border-radius: 50%;
    background: var(--su-logo);
    color: #ffffff;
    transform: scale(0);
    transition: transform 0.45s var(--su-ease);
}

.su-golive__ok .su-ico { width: 12px; height: 12px; stroke-width: 3; }
.su-stop.is-seen .su-golive__ok { transform: scale(1); }
.su-stop.is-seen .su-golive li:nth-child(1) .su-golive__ok { transition-delay: 0.3s; }
.su-stop.is-seen .su-golive li:nth-child(2) .su-golive__ok { transition-delay: 0.55s; }
.su-stop.is-seen .su-golive li:nth-child(3) .su-golive__ok { transition-delay: 0.8s; }
.su-stop.is-seen .su-golive li:nth-child(4) .su-golive__ok { transition-delay: 1.05s; }

.su-spark { display: block; width: calc(100% - 32px); height: 92px; margin: 0 16px; }
.su-spark__line {
    fill: none;
    stroke: #359fad;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
    stroke-dasharray: 400;
    stroke-dashoffset: 400;
    transition: stroke-dashoffset 1.6s var(--su-ease) 0.3s;
}

.su-stop.is-seen .su-spark__line { stroke-dashoffset: 0; }

.su-grow__tags { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 16px 0; }
.su-grow__tags span { padding: 5px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 600; background: var(--su-logo-soft); color: var(--su-teal-ink); }
.su-grow__tags span:nth-child(2) { background: rgba(28, 20, 70, 0.08); color: var(--su-navy); }
.su-grow__tags span:nth-child(3) { background: var(--su-mint-soft); color: var(--su-teal-dark); }
.su-grow__tags span:nth-child(4) { background: rgba(53, 159, 173, 0.14); color: var(--su-teal-ink); }

.su-grow__ads { display: flex; align-items: center; gap: 8px; padding: 12px 16px 0; }
.su-grow__ads img { width: 26px; height: 26px; padding: 5px; border-radius: 8px; border: 1px solid var(--su-line); }
.su-grow__ads small { font-size: 12.5px; color: var(--su-muted); line-height: 1.3; }

/* ==========================================================
   4. FOUNDATION: Launch Board (Kanban Tickets)
   ========================================================== */
.su-kb {
    border-radius: 26px;
    background: #ffffff;
    border: 1px solid var(--su-line);
    box-shadow: var(--su-shadow);
    overflow: hidden;
}

.su-kb__top {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 22px;
    border-bottom: 1px solid var(--su-line);
}

.su-kb__top > b {
    font-family: var(--su-head);
    font-size: 17px;
    font-weight: 600;
    color: var(--su-ink);
}

.su-kb__team {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    padding: 5px 14px 5px 6px;
    border-radius: 999px;
    background: var(--su-soft);
    font-family: var(--su-head);
    font-size: 14px;
    font-weight: 600;
    color: var(--su-teal-ink);
}

.su-kb__team img {
    width: 24px;
    height: 24px;
    padding: 3px;
    border-radius: 50%;
    background: #ffffff;
}

.su-kb__wrap { padding: 22px; }

.su-kb__cols {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    align-items: start;
}

.su-kb__col {
    --c: var(--su-teal);
    --cbg: rgba(53, 159, 173, 0.12);
    padding: 16px 14px 14px;
    border-radius: 18px;
    background: var(--su-soft);
    border-top: 3px solid var(--c);
}

/* Batch 5: icons in theme green on every column (was navy) */
.su-kb__col--navy { --c: var(--su-teal-ink); --cbg: rgba(53, 159, 173, 0.12); }

.su-kb__head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 4px 14px !important;
    font-size: 17.5px !important;
    font-weight: 600;
    line-height: 1.25;
}

.su-kb__ico {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: var(--cbg);
    color: var(--c);
    flex-shrink: 0;
}

.su-kb__ico .su-ico { width: 17px; height: 17px; }

.su-kb__head em {
    display: grid;
    place-items: center;
    min-width: 26px;
    height: 26px;
    margin-left: auto;
    padding: 0 6px;
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid var(--su-line);
    font-family: var(--su-text);
    font-size: 12.5px;
    font-style: normal;
    font-weight: 600;
    color: var(--su-muted);
}

.su-kb__col ul { display: grid; gap: 10px; }

.su-tk {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    column-gap: 10px;
    align-items: center;
    padding: 14px;
    border-radius: 14px;
    background: #ffffff;
    border: 1px solid var(--su-line);
    box-shadow: 0 6px 14px -12px rgba(28, 20, 70, 0.35);
    transition: transform 0.35s var(--su-ease), box-shadow 0.35s, border-color 0.35s;
}

.su-tk:hover {
    transform: translateY(-3px);
    border-color: var(--c);
    box-shadow: 0 16px 26px -18px rgba(28, 20, 70, 0.45);
}

.su-tk > .su-tk__ico {
    grid-column: 1;
    grid-row: 1;
    margin: 0;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--cbg);
    color: var(--c);
}

.su-tk__ico .su-ico { width: 17px; height: 17px; }
.su-tk__ico--logo { background: #ffffff; border: 1px solid var(--su-line); }
.su-tk__ico img { width: 18px; height: 18px; }

.su-tk > b {
    grid-column: 2;
    grid-row: 1;
    font-family: var(--su-head);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--su-ink);
}

.su-tk > b a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: rgba(53, 159, 173, 0.35);
}

.su-tk > b a:hover {
    color: var(--su-teal-ink);
}

.su-tk > span {
    grid-column: 1 / -1;
    grid-row: 2;
    margin-top: 8px;
    font-size: 13.5px;
    line-height: 21px;
    color: var(--su-body);
}

.su-dots { display: none; }

/* ==========================================================
   5. ENGAGEMENT: Coverage Chart
   ========================================================== */
.su-gantt {
    max-width: 1120px;
    margin: 0 auto;
    padding: 10px 32px 26px;
    border-radius: 26px;
    background: #ffffff;
    border: 1px solid var(--su-line);
    box-shadow: var(--su-shadow);
}

.su-gantt__row {
    display: grid;
    grid-template-columns: 330px minmax(0, 1fr);
    gap: 28px;
    align-items: center;
    padding: 24px 0;
    border-top: 1px dashed #dcd8ec;
}

.su-gantt__row--head {
    padding: 14px 0;
    border-top: 0;
}

.su-gantt__corner {
    font-family: var(--su-head);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--su-muted);
}

.su-gantt__track {
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-items: center;
    min-height: 56px;
    background-image: linear-gradient(90deg, #ebe8f5 1px, transparent 1px);
    background-size: 20% 100%;
}

.su-gantt__row--head .su-gantt__track {
    min-height: 0;
    background: none;
}

.su-gantt__ms {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    font-family: var(--su-head);
    font-size: 14.5px;
    font-weight: 600;
    color: var(--su-ink);
}

.su-gantt__ms .su-ico {
    width: 40px;
    height: 40px;
    padding: 10px;
    border-radius: 12px;
    background: var(--su-soft);
    border: 1px solid var(--su-line);
    color: var(--su-teal);
}

.su-gantt__ms:hover .su-ico {
    background: var(--su-logo);
    color: #ffffff;
    border-color: transparent;
}

.su-gantt__who {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.su-gantt__ico {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    color: #ffffff;
    flex-shrink: 0;
}

.su-gantt__ico--teal {
    background: var(--su-logo);
    box-shadow: 0 10px 20px -10px rgba(53, 159, 173, 0.75);
}

.su-gantt__ico--navy {
    background: linear-gradient(135deg, #1c1446 0%, #0f1a3c 100%);
    box-shadow: 0 10px 20px -10px rgba(28, 20, 70, 0.6);
}

.su-gantt__who h3 {
    margin: 0 0 4px;
    font-size: 21px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--su-ink);
}

.su-gantt__who p {
    font-size: 14.5px;
    line-height: 23px;
    color: var(--su-body);
}

.su-gantt__bar {
    position: relative;
    display: flex;
    align-items: center;
    height: 48px;
    margin: 0 8px;
    padding: 0 18px;
    border-radius: 999px;
    font-family: var(--su-head);
    font-size: 14.5px;
    font-weight: 600;
    color: #ffffff;
    white-space: nowrap;
    transform-origin: left center;
    transition: transform 1s var(--su-ease), opacity 0.6s;
}

.su-gantt__bar span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.su-gantt__bar .su-ico {
    width: 18px;
    height: 18px;
}

.su-gantt__bar--a {
    grid-column: 1 / 4;
    background: var(--su-logo);
    box-shadow: 0 12px 22px -14px rgba(53, 159, 173, 0.85);
}

.su-gantt__bar--b {
    grid-column: 1 / 5;
    margin-right: 4px;
    background: linear-gradient(90deg, #1c1446 0%, #359fad 70%, #4cdaa0 100%);
    box-shadow: 0 12px 22px -14px rgba(28, 20, 70, 0.7);
}

.su-gantt__bar--opt {
    grid-column: 5 / 6;
    justify-content: center;
    margin-left: 4px;
    padding: 0 10px;
    background: rgba(53, 159, 173, 0.08);
    border: 1.5px dashed rgba(53, 159, 173, 0.6);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--su-teal-ink);
}

.su-gantt__bar::after {
    content: '';
    position: absolute;
    right: 6px;
    top: 50%;
    width: 36px;
    height: 36px;
    margin-top: -18px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.22);
}

.su-gantt__bar--opt::after { display: none; }

.su-js .su-gantt:not(.is-run) .su-gantt__bar {
    transform: scaleX(0.06);
    opacity: 0.4;
}

.su-gantt.is-run .su-gantt__bar--b { transition-delay: 0.25s; }
.su-gantt.is-run .su-gantt__bar--opt { transition-delay: 0.9s; }

.su-gantt__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-top: 22px;
    border-top: 1px dashed #dcd8ec;
}

.su-gantt__foot p {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15.5px;
    color: var(--su-ink);
}

.su-gantt__foot p .su-ico {
    color: var(--su-teal);
}

/* ==========================================================
   6. WHY: Theme Violet Band (#432d92) with Circles and Lines
   ========================================================== */
.su-why {
    background-color: #432d92;
    color: rgba(255, 255, 255, 0.88);
    overflow: hidden;
    border: 0;
}

/* Geometric Circles & Lines (NO dot-grid decorations per owner feedback) */
.su-why__circle {
    position: absolute;
    border-radius: 50%;
    border: 1.5px solid rgba(255, 255, 255, 0.14);
    pointer-events: none;
}

.su-why__circle--a {
    width: 480px;
    height: 480px;
    right: -140px;
    top: -160px;
}

.su-why__circle--a::after {
    content: '';
    position: absolute;
    inset: 60px;
    border-radius: 50%;
    border: 1px dashed rgba(76, 218, 160, 0.25);
}

.su-why__circle--b {
    width: 320px;
    height: 320px;
    left: -120px;
    bottom: -130px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.su-why__lines {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 60%;
    pointer-events: none;
}

.su-why__lines path {
    fill: none;
    stroke: rgba(76, 218, 160, 0.18);
    stroke-width: 1.5;
    vector-effect: non-scaling-stroke;
}

.su-head--light { max-width: 820px; }

.su-why__row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.su-reason {
    padding: 8px 28px 6px;
    text-align: center;
}

.su-reason + .su-reason {
    border-left: 1px solid rgba(255, 255, 255, 0.16);
}

.su-reason__ico {
    position: relative;
    display: grid;
    place-items: center;
    width: 76px;
    height: 76px;
    margin: 0 auto 20px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
}

.su-reason__ico::before {
    content: '';
    position: absolute;
    inset: -7px;
    border-radius: 50%;
    border: 1.5px dashed rgba(76, 218, 160, 0.55);
    transition: transform 1.2s var(--su-ease);
}

.su-reason__ico::after {
    content: '';
    position: absolute;
    inset: 10px;
    border-radius: 50%;
    background: var(--su-logo);
    box-shadow: 0 10px 22px -8px rgba(76, 218, 160, 0.7);
}

.su-reason__ico .su-ico {
    position: relative;
    z-index: 1;
    width: 24px;
    height: 24px;
}

.su-reason:hover .su-reason__ico::before {
    transform: rotate(120deg);
}

.su-reason h3 {
    margin: 0 0 10px;
    font-size: 19px;
    font-weight: 600;
    line-height: 1.35;
    color: #ffffff !important;
}

.su-reason p {
    font-size: 14.5px;
    line-height: 23px;
    color: rgba(255, 255, 255, 0.8);
}

.su-reason__logos {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 14px;
}

.su-reason__logos span {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: #ffffff;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.su-reason__logos img {
    width: 20px;
    height: 20px;
}

/* Proof points bar in the Why section */
.su-why__bar {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr);
    align-items: center;
    margin-top: 56px;
    padding: 16px 20px;
    border-radius: 22px;
    background: rgba(15, 26, 60, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.16);
    backdrop-filter: blur(8px);
}

.su-stat {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 4px 26px;
    border-right: 1px solid rgba(255, 255, 255, 0.16);
}

.su-stat b {
    font-family: var(--su-head);
    font-size: 38px;
    font-weight: 700;
    line-height: 1;
    color: #ffffff;
}

.su-stat__icon {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(76, 218, 160, 0.2);
    color: #4cdaa0;
}

.su-stat__icon .su-ico {
    width: 20px;
    height: 20px;
}

.su-stat__text b {
    display: block;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.2;
    color: #ffffff;
}

.su-stat__text small {
    display: block;
    margin-top: 4px;
    font-size: 13px;
    line-height: 1.3;
    color: rgba(255, 255, 255, 0.75);
}

.su-stat__label {
    font-size: 13.5px;
    line-height: 1.35;
    color: rgba(255, 255, 255, 0.8);
    max-width: 90px;
}

.su-why__call {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding-left: 26px;
}

.su-why__call > span {
    font-size: 14.5px;
    line-height: 23px;
    color: rgba(255, 255, 255, 0.85);
}

.su-why__call > span b {
    font-family: var(--su-head);
    font-weight: 600;
    color: #ffffff;
}

/* Desktop CTA: Talk to Us (never "Call now" on desktop per owner feedback) */
.su-why__talk {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    padding: 12px 22px;
    border-radius: 999px;
    background: #ffffff;
    font-family: var(--su-head);
    font-size: 15.5px;
    font-weight: 600;
    color: var(--su-ink) !important;
    text-decoration: none !important;
    transition: transform 0.3s var(--su-ease), background 0.3s, color 0.3s;
}

.su-why__talk .su-ico {
    color: var(--su-teal);
}

.su-why__talk:hover {
    transform: translateY(-2px);
    background: var(--su-logo-rev);
    color: #ffffff !important;
}

.su-why__talk:hover .su-ico {
    color: #ffffff;
}

.su-why__tel {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    padding: 12px 20px;
    border-radius: 999px;
    background: #ffffff;
    font-family: var(--su-head);
    font-size: 16px;
    font-weight: 600;
    color: var(--su-ink) !important;
    text-decoration: none !important;
}

.su-mobile-only { display: none !important; }

/* ==========================================================
   7. CTA: Navy Card with Clean Trajectory
   ========================================================== */
.su-cta { padding: 88px 0; }

.su-cta__card {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 40px;
    align-items: center;
    padding: 56px 60px;
    border-radius: 30px;
    /* Batch 5: homepage Let's Talk look (violet + dots + soft circles) */
    background:
        radial-gradient(rgba(255, 255, 255, 0.09) 1.3px, transparent 1.6px) 0 0 / 18px 18px,
        #432d92;
    overflow: hidden;
    isolation: isolate;
    box-shadow: 0 34px 70px -40px rgba(67, 45, 146, 0.8);
}

.su-cta__card::before {
    content: '';
    position: absolute;
    right: -110px;
    top: -150px;
    width: 340px;
    height: 340px;
    border-radius: 50%;
    background: #4cdaa0;
    opacity: 0.16;
    z-index: -1;
    pointer-events: none;
}

.su-cta__card::after {
    content: '';
    position: absolute;
    left: -90px;
    bottom: -120px;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    background: #f9758f;
    opacity: 0.2;
    z-index: -1;
    pointer-events: none;
}

.su-cta__path {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.su-cta__path path {
    fill: none;
    stroke: rgba(76, 218, 160, 0.4);
    stroke-width: 2;
    stroke-dasharray: 6 8;
    vector-effect: non-scaling-stroke;
    animation: su-dash 30s linear infinite;
}

@keyframes su-dash { to { stroke-dashoffset: -400; } }

.su-cta__rocket {
    position: absolute;
    right: 18px;
    top: 16px;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--su-logo);
    color: #ffffff;
    box-shadow: 0 8px 20px -6px rgba(76, 218, 160, 0.8);
    animation: su-float 5s ease-in-out infinite;
}

@keyframes su-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

.su-cta__copy,
.su-cta__btns { position: relative; z-index: 1; }

.su-cta__title {
    margin: 0 0 10px;
    font-size: 38px;
    font-weight: 600;
    line-height: 1.25;
    color: #ffffff !important;
}

.su-cta__copy > p:last-child {
    font-size: 17px;
    line-height: 27px;
    color: rgba(255, 255, 255, 0.82);
}

.su-cta__btns {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 250px;
}

/* ==========================================================
   8. FAQ: Two Equal Columns on Desktop, Single Column on Mobile
   ========================================================== */
.su-faq {
    background: var(--su-soft);
    border-top: 1px solid var(--su-line);
    border-bottom: 1px solid var(--su-line);
}

.su-faq__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    max-width: 1160px;
    margin: 0 auto 40px;
    align-items: start;
}

.su-faq__col {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.su-q {
    border-radius: 18px;
    background: #ffffff;
    border: 1px solid var(--su-line);
    box-shadow: 0 10px 24px -18px rgba(28, 20, 70, 0.25);
    overflow: hidden;
    transition: border-color 0.3s, box-shadow 0.3s;
}

.su-q[open] {
    border-color: var(--su-teal);
    box-shadow: 0 16px 32px -16px rgba(53, 159, 173, 0.3);
}

.su-q summary {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) 28px;
    gap: 12px;
    align-items: center;
    padding: 20px 22px;
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.su-q summary::-webkit-details-marker { display: none; }
.su-q summary:focus-visible { outline: 2px solid var(--su-teal); outline-offset: 2px; border-radius: 8px; }

.su-q__no {
    font-family: var(--su-head);
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
    color: var(--su-teal);
}

.su-q h3 {
    margin: 0;
    font-size: 17.5px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--su-ink);
    transition: color 0.3s;
}

.su-q[open] h3 {
    color: var(--su-teal-ink);
}

.su-q__pm {
    position: relative;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1.5px solid var(--su-line);
    transition: background 0.3s, border-color 0.3s;
}

.su-q[open] .su-q__pm {
    background: var(--su-teal);
    border-color: var(--su-teal);
}

.su-q__pm::before,
.su-q__pm::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 12px;
    height: 2px;
    margin: -1px 0 0 -6px;
    border-radius: 2px;
    background: var(--su-teal);
    transition: transform 0.3s var(--su-ease), background 0.3s;
}

.su-q__pm::after { transform: rotate(90deg); }
.su-q[open] .su-q__pm::before,
.su-q[open] .su-q__pm::after { background: #ffffff; }
.su-q[open] .su-q__pm::after { transform: rotate(0deg); }

.su-q__a {
    padding: 0 22px 20px 70px;
}

.su-q__a p {
    font-size: 15px;
    line-height: 25px;
    color: var(--su-body);
}

.su-q__a a {
    color: var(--su-teal-ink);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ─── Still have a question? box (clean card, no dark background per owner feedback) ─── */
.su-ask {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    max-width: 1160px;
    margin: 0 auto 36px;
    padding: 30px 36px;
    border-radius: 22px;
    background: #ffffff;
    border: 1px solid var(--su-line);
    box-shadow: var(--su-shadow);
}

.su-ask__copy h3 {
    margin: 0 0 6px;
    font-size: 22px;
    font-weight: 600;
    color: var(--su-ink);
}

.su-ask__copy p {
    font-size: 15.5px;
    color: var(--su-body);
}

.su-ask__ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.su-related {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 24px;
}

.su-related > span {
    font-family: var(--su-head);
    font-size: 14.5px;
    font-weight: 600;
    color: var(--su-ink);
    margin-right: 4px;
}

.su-related a {
    padding: 8px 16px;
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid var(--su-line);
    font-size: 14px;
    color: var(--su-body);
    text-decoration: none;
    transition: border-color 0.3s, color 0.3s, transform 0.3s var(--su-ease);
}

.su-related a:hover {
    border-color: var(--su-teal);
    color: var(--su-teal-ink);
    transform: translateY(-2px);
}

/* ==========================================================
   Responsive Breakpoints: 1199, 991, 767, 390, 360
   ========================================================== */
@media (max-width: 1199px) {
    .su-hero__h1 { font-size: 46px; }
    .su-kit__sheet { left: 0; width: 230px; }
    .su-kit__phone { right: 0; }
    .su-kit__browser { width: 520px; margin-left: -260px !important; }
    .su-kb__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .su-gantt__row { grid-template-columns: 260px minmax(0, 1fr); gap: 20px; }
    .su-reason { padding-inline: 18px; }
    .su-why__bar { grid-template-columns: auto auto; row-gap: 14px; }
    .su-why__call { grid-column: 1 / -1; padding: 14px 16px 2px; border-top: 1px solid rgba(255, 255, 255, 0.14); }
    .su-stat:nth-child(2) { border-right: 0; }
}

@media (max-width: 991px) {
    .su-sec { padding: 72px 0; }
    .su-title { font-size: 34px; }
    .su-hero { padding: 48px 0 52px; }
    .su-hero__h1 { font-size: 40px; }
    .su-kit { height: 400px; }
    .su-kit__browser { width: 460px; margin-left: -230px !important; }
    .su-kit__sheet { top: 110px; width: 210px; padding: 14px; }
    .su-kit__phone { top: 80px; width: 190px; }
    .su-decide__grid { grid-template-columns: 1fr; gap: 44px; }
    .su-deck { max-width: 600px; width: 100%; margin: 0 auto; }

    .su-path__rail { left: 31px; }
    .su-stop { grid-template-columns: 64px minmax(0, 1fr); column-gap: 20px; row-gap: 16px; align-items: start; padding: 14px 0; }
    .su-stop__node,
    .su-stop:nth-child(odd) .su-stop__node { grid-column: 1; grid-row: 1 / span 2; align-self: start; }
    .su-stop__card,
    .su-stop:nth-child(odd) .su-stop__card { grid-column: 2; grid-row: 1; }
    .su-stop__ui,
    .su-stop:nth-child(odd) .su-stop__ui { grid-column: 2; grid-row: 2; }
    .su-stop__card::after,
    .su-stop:nth-child(odd) .su-stop__card::after { left: -9px; right: auto; top: 32px; transform: rotate(-135deg); }
    .su-js .su-stop:not(.is-seen) .su-stop__card,
    .su-js .su-stop:nth-child(odd):not(.is-seen) .su-stop__card { transform: translateY(20px); }
    .su-js .su-stop:not(.is-seen) .su-stop__ui,
    .su-js .su-stop:nth-child(odd):not(.is-seen) .su-stop__ui { transform: translateY(20px); }

    .su-gantt { padding: 6px 22px 22px; }
    .su-gantt__row { grid-template-columns: 1fr; gap: 16px; }
    .su-gantt__row--head .su-gantt__corner { display: none; }
    .su-why__row { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 34px; }
    .su-reason:nth-child(3) { border-left: 0; }
    .su-cta__card { grid-template-columns: 1fr; padding: 44px 36px; gap: 26px; }
    .su-cta__btns { flex-direction: row; flex-wrap: wrap; min-width: 0; }

    /* FAQ becomes 1 column on mobile / tablet */
    .su-faq__grid { grid-template-columns: 1fr; gap: 16px; }
    .su-ask { padding: 24px; }
}

@media (max-width: 767px) {
    .su-wrap { width: calc(100% - 32px); }
    .su-sec { padding: 56px 0; }
    .su-head { margin-bottom: 32px; text-align: left; }
    .su-title { font-size: 28px; line-height: 1.3; }
    .su-text { font-size: 15.5px; line-height: 25px; }
    .su-eyebrow { font-size: 13px; letter-spacing: 2.5px; }

    .su-hero { padding: 32px 0 40px; }
    .su-hero__copy { text-align: left; }
    .su-hero__h1 { font-size: 32px; line-height: 1.2; letter-spacing: 0; }
    .su-hero__quote { font-size: 18px; }
    .su-hero__lead { font-size: 15.5px; line-height: 25px; margin-left: 0 !important; }
    .su-hero__proofs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
    .su-hero__proofs li { padding: 6px 12px 6px 6px; gap: 8px; font-size: 13.5px; line-height: 1.25; border-radius: 14px; }
    .su-tick { width: 28px; height: 28px; }
    .su-ctas .su-btn { flex: 1 1 100%; }

    .su-kit { height: auto; margin-top: 34px; padding-bottom: 176px; }
    .su-kit::before { bottom: 30px; }
    .su-kit__browser { position: relative !important; left: 0; width: 100%; margin-left: 0 !important; border-radius: 16px; }
    .su-kit__bar { padding: 8px 12px; }
    .su-kit__url { font-size: 11.5px; padding: 3px 10px; }
    .su-kit__tag { left: 10px; top: 46px; bottom: auto; font-size: 12.5px; padding: 6px 11px; }
    .su-kit__sheet { left: 4px; top: auto; bottom: 26px; width: 210px; padding: 14px; transform-origin: left bottom; transform: rotate(-5deg) scale(0.62); }
    .su-kit__phone { right: 10px; top: auto; bottom: 22px; width: 200px; transform-origin: right bottom; transform: rotate(4deg) scale(0.62); }
    .su-kit__cap { bottom: -4px; text-align: right; font-size: 12px; }

    .su-decide__grid { gap: 36px; }
    .su-deck__stack { margin: 22px 26px 0 4px; }
    .su-deck__card[data-pos="1"] { transform: translate(8px, -8px) rotate(3deg); }
    .su-deck__card[data-pos="2"] { transform: translate(15px, -15px) rotate(6deg); }
    .su-deck__card[data-pos="3"] { transform: translate(20px, -20px) rotate(8deg); }
    .su-deck__card { border-width: 4px; border-radius: 16px; }
    .su-deck__quote { width: 92%; margin-top: -30px; padding: 16px 16px 16px 60px; }
    .su-deck__quote .su-ico { left: 16px; top: 18px; width: 30px; height: 30px; padding: 6px; }
    .su-deck__quote p { font-size: 17px; }
    .su-qs li { grid-template-columns: 40px minmax(0, 1fr); gap: 12px; padding: 13px 12px; margin: 0 -12px; }
    .su-qs__ico { width: 40px; height: 40px; border-radius: 12px; }
    .su-qs h3 { font-size: 17px; }
    .su-qs p { font-size: 14px; line-height: 22px; }
    .su-decide__copy { order: -1; }

    .su-path__rail { left: 21px; top: 22px; }
    .su-stop { grid-template-columns: 44px minmax(0, 1fr); column-gap: 14px; row-gap: 12px; }
    .su-stop__node { width: 44px; height: 44px; box-shadow: 0 0 0 5px #ffffff; }
    .su-stop__node .su-ico { width: 20px; height: 20px; }
    .su-stop__card { padding: 20px 18px; border-radius: 18px; }
    .su-stop__card::after,
    .su-stop:nth-child(odd) .su-stop__card::after { top: 18px; }
    .su-stop__card h3 { font-size: 22px; }
    .su-stop__card p { font-size: 14.5px; line-height: 23px; }
    .su-stop__num { font-size: 12px; }
    .su-ui { border-radius: 16px; padding-bottom: 14px; }
    .su-ui__bar { margin-bottom: 12px; padding: 9px 14px; }
    .su-market li { grid-template-columns: 30px 96px minmax(0, 1fr) 18px; gap: 8px; }
    .su-market b { font-size: 12.5px; }
    .su-ui__chip, .su-scope__stack, .su-grow__ads { display: none !important; }
    .su-spark { height: 70px; }

    .su-kb { border-radius: 20px; }
    .su-kb__top { padding: 12px 16px; gap: 10px; }
    .su-kb__top > b { font-size: 15.5px; }
    .su-kb__team { font-size: 12.5px; padding-right: 10px; }
    .su-kb__wrap { padding: 14px 0 16px; }
    .su-kb__cols {
        display: flex;
        gap: 12px;
        padding: 0 16px 4px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-padding: 0 16px;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .su-kb__cols::-webkit-scrollbar { display: none; }
    .su-kb__col { flex: 0 0 86%; align-self: flex-start; scroll-snap-align: start; }
    .su-tk { padding: 12px; }
    .su-tk > b { font-size: 15px; }
    .su-tk > span { font-size: 13px; line-height: 20px; }
    .su-tk:hover { transform: none; }
    .su-dots { display: flex; justify-content: center; gap: 8px; margin-top: 14px; }
    .su-dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 8px; background: #d9d5ea; transition: width 0.3s, background 0.3s; cursor: pointer; }
    .su-dots button.is-on { width: 22px; background: var(--su-teal); }
    .su-dots button::before { content: ''; display: block; width: 44px; height: 44px; margin: -18px 0 0 -18px; }

    .su-gantt { padding: 4px 16px 18px; border-radius: 20px; }
    .su-gantt__row { padding: 18px 0; gap: 14px; }
    .su-gantt__row--head { padding: 12px 0 8px; }
    .su-gantt__ms { font-size: 12px; gap: 4px; }
    .su-gantt__ms .su-ico { width: 34px; height: 34px; padding: 8px; border-radius: 10px; }
    .su-gantt__who { gap: 12px; }
    .su-gantt__ico { width: 42px; height: 42px; border-radius: 12px; }
    .su-gantt__who h3 { font-size: 19px; }
    .su-gantt__who p { font-size: 14px; line-height: 21px; }
    .su-gantt__track { min-height: 44px; }
    .su-gantt__bar { height: 40px; margin: 0 3px; padding: 0 12px; font-size: 13px; }
    .su-gantt__bar .su-ico { width: 15px; height: 15px; }
    .su-gantt__bar::after { display: none; }
    .su-gantt__bar--opt { padding: 0 2px; font-size: 11px; margin-left: 3px; }
    .su-gantt__bar--opt span { overflow: visible; }
    .su-gantt__foot { padding-top: 18px; }
    .su-gantt__foot p { font-size: 14px; line-height: 21px; align-items: flex-start; }
    .su-gantt__foot .su-btn { flex: 1 1 100%; }

    .su-why__row { grid-template-columns: 1fr; row-gap: 0; }
    .su-reason { display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 16px; padding: 18px 0; text-align: left; }
    .su-reason + .su-reason { border-left: 0; border-top: 1px solid rgba(255, 255, 255, 0.14); }
    .su-reason__ico { width: 52px; height: 52px; margin: 6px 0 0; grid-row: 1 / span 3; }
    .su-reason__ico::before { inset: -5px; }
    .su-reason__ico::after { inset: 6px; }
    .su-reason__ico .su-ico { width: 20px; height: 20px; }
    .su-reason h3 { font-size: 17.5px; margin-bottom: 6px; }
    .su-reason p { font-size: 14px; line-height: 21px; }
    .su-reason__logos { justify-content: flex-start; }
    .su-why__bar { margin-top: 30px; padding: 14px; grid-template-columns: 1fr 1fr; }
    .su-stat { padding: 2px 10px; gap: 8px; }
    .su-stat__icon { flex: none; }
    .su-stat b { font-size: 30px; }
    .su-stat__icon { width: 32px; height: 32px; }
    .su-stat__icon .su-ico { width: 16px; height: 16px; }
    .su-stat__text b { font-size: 15px; }
    .su-stat__text small { font-size: 12px; }
    .su-why__call { flex-direction: column; align-items: stretch; padding: 14px 2px 0; gap: 12px; }
    .su-why__call > span { font-size: 14px; line-height: 21px; }
    .su-why__talk { display: none !important; }
    .su-mobile-only { display: inline-flex !important; }
    .su-why__tel { justify-content: center; font-size: 16px; }

    .su-cta { padding: 56px 0; }
    .su-cta__card { padding: 34px 20px 24px; border-radius: 22px; }
    .su-cta__title { font-size: 26px; padding-right: 40px; }
    .su-cta__copy > p:last-child { font-size: 15.5px; line-height: 24px; }
    .su-cta__btns .su-btn { flex: 1 1 100%; }
    .su-cta__rocket { width: 38px; height: 38px; right: 16px; top: 16px; }
    .su-cta__rocket .su-ico { width: 18px; height: 18px; }

    .su-q summary { grid-template-columns: 30px minmax(0, 1fr) 26px; gap: 10px; padding: 16px 18px; }
    .su-q__no { font-size: 16px; }
    .su-q h3 { font-size: 16px; }
    .su-q__pm { width: 26px; height: 26px; }
    .su-q__a { padding: 0 18px 16px 58px; }
    .su-q__a p { font-size: 14.5px; line-height: 23px; }

    .su-ask { flex-direction: column; align-items: stretch; padding: 22px 18px; gap: 18px; }
    .su-ask__copy h3 { font-size: 20px; }
    .su-ask__copy p { font-size: 14.5px; }
    .su-ask__ctas .su-btn { flex: 1 1 100%; }

    .su-related { justify-content: flex-start; }
    .su-related > span { flex-basis: 100%; }
    .su-related a { font-size: 13.5px; padding: 8px 14px; min-height: 40px; display: inline-flex; align-items: center; }
}

@media (max-width: 380px) {
    .su-hero__h1 { font-size: 29px; }
    .su-eyebrow { letter-spacing: 2px; font-size: 12.5px; }
    .su-hero__proofs li { font-size: 13px; }
    .su-title { font-size: 25px; }
    .su-kit { padding-bottom: 156px; }
    .su-kit__sheet { transform: rotate(-5deg) scale(0.56); }
    .su-kit__phone { transform: rotate(4deg) scale(0.56); }
    .su-market li { grid-template-columns: 28px 84px minmax(0, 1fr) 16px; }
    .su-gantt__ms { font-size: 11px; }
    .su-gantt__bar { font-size: 12px; padding: 0 10px; }
    .su-gantt { padding-inline: 12px; }
    .su-gantt__bar--opt { margin: 0 0 0 2px; padding: 0; font-size: 10px; }
    .su-stat b { font-size: 26px; }
    .su-stat__text b { font-size: 14px; }
    /* Mobile QA: keep "Launch board" and the team chip on one line each */
    .su-kb__top { padding-inline: 14px; gap: 8px; }
    .su-kb__top > b { font-size: 14.5px; white-space: nowrap; }
    .su-kb__team { gap: 6px; padding: 4px 9px 4px 4px; font-size: 12px; white-space: nowrap; }
    .su-kb__team img { width: 20px; height: 20px; padding: 2px; }
}

@media (max-width: 340px) {
    .su-kb__top .su-ui__dots { display: none; }
}

/* ─── Reduced Motion Support ─── */
@media (prefers-reduced-motion: reduce) {
    .su-page *,
    .su-page *::before,
    .su-page *::after {
        animation: none !important;
        transition: none !important;
    }

    .su-js [data-su-rv],
    .su-js .su-stop .su-stop__card,
    .su-js .su-stop .su-stop__ui,
    .su-js .su-gantt .su-gantt__bar {
        opacity: 1 !important;
        transform: none !important;
    }

    .su-brief__row i::after,
    .su-market i::after,
    .su-golive__ok { transform: none !important; }
    .su-spark__line { stroke-dashoffset: 0 !important; }
    .su-path__fill { transform: none !important; }
}