/* ==========================================================================
   Get Started — page stylesheet
   Phase 1: static, message-first skeleton. No JS dependencies.
   All rules scoped under .gs-page so they never leak into the global system.
   ========================================================================== */

.gs-page {
    /* ---- Surfaces ---- */
    --gs-bg:          #0a0a0f;
    --gs-bg-alt:      #101019;
    --gs-surface:     #16161f;
    --gs-surface-2:   #1c1c27;
    --gs-border:      rgba(255, 255, 255, 0.08);
    --gs-border-strong: rgba(255, 255, 255, 0.16);

    /* ---- Text ---- */
    --gs-text:        #f4f4f6;
    --gs-text-dim:    #a6a6b3;
    --gs-text-faint:  #6c6c7a;

    /* ---- Brand / paths ---- */
    --gs-accent:      #7c6cf5;
    --gs-accent-dark: #6354e0;
    --gs-c-training:  #38bdf8;
    --gs-c-marketing: #fbbf24;
    --gs-c-workflow:  #34d399;
    --gs-c-full:      #a78bfa;

    /* ---- Spacing scale ---- */
    --gs-1: 0.5rem;
    --gs-2: 1rem;
    --gs-3: 1.5rem;
    --gs-4: 2rem;
    --gs-5: 3rem;
    --gs-6: 5rem;
    --gs-7: 8rem;

    /* ---- Layout ---- */
    --gs-maxw:        1180px;
    --gs-maxw-narrow: 760px;
    --gs-pad:         clamp(1.25rem, 4vw, 3rem);
    --gs-radius:      18px;
    --gs-radius-sm:   12px;
    --gs-radius-pill: 999px;

    background: var(--gs-bg);
    color: var(--gs-text);
    font-family: 'Outfit', sans-serif;
    -webkit-font-smoothing: antialiased;
    line-height: 1.6;
    overflow-x: hidden;
    position: relative; /* anchors the .gs-lines SVG overlay */
}

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

/* Match the MAI / AI pages: Outfit everywhere, overriding the global
   heading font (--font-heading / Grift) that style.css applies to h1–h6. */
.gs-page h1,
.gs-page h2,
.gs-page h3,
.gs-page h4,
.gs-page p,
.gs-page a,
.gs-page li,
.gs-page span,
.gs-page label,
.gs-page legend,
.gs-page button,
.gs-page input { font-family: 'Outfit', sans-serif; }

/* --------------------------------------------------------------------------
   Layout primitives
   -------------------------------------------------------------------------- */
.gs-container {
    width: 100%;
    max-width: var(--gs-maxw);
    margin-inline: auto;
    padding-inline: var(--gs-pad);
}
.gs-container--narrow { max-width: var(--gs-maxw-narrow); }

.gs-section {
    padding-block: clamp(3.5rem, 9vw, var(--gs-7));
    position: relative;
}

.gs-section__head { margin-bottom: clamp(2rem, 5vw, var(--gs-5)); }

.gs-section__title {
    font-size: clamp(1.9rem, 4.4vw, 3rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin: 0.4rem 0 0;
}

.gs-section__lede {
    font-size: clamp(1.05rem, 1.6vw, 1.3rem);
    color: var(--gs-text-dim);
    max-width: 60ch;
    margin: var(--gs-3) 0 0;
}

/* --------------------------------------------------------------------------
   Eyebrow
   -------------------------------------------------------------------------- */
.gs-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--gs-text-faint);
}
.gs-eyebrow::before {
    content: "";
    width: 22px;
    height: 2px;
    background: var(--gs-accent);
    border-radius: 2px;
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.gs-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.8rem 1.5rem;
    border-radius: var(--gs-radius-pill);
    font-weight: 600;
    font-size: 0.98rem;
    text-decoration: none;
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.gs-btn--lg { padding: 0.95rem 1.85rem; font-size: 1.05rem; }

.gs-btn--primary {
    background: var(--gs-accent);
    color: #fff;
}
/* Coloured buttons: on hover the label darkens to a deep shade of the
   button colour (≈ two shades darker than the background), per the
   active accent — so it adapts on every Get Started / course page. */
.gs-btn--primary:hover {
    background: var(--gs-accent-dark);
    color: color-mix(in srgb, var(--gs-accent) 38%, #000);
    transform: translateY(-2px);
}

.gs-btn--ghost {
    background: transparent;
    color: var(--gs-text);
    border-color: var(--gs-border-strong);
}
/* Transparent buttons: on hover the label (and border) take the page's
   accent colour, matching the path-button hover. */
.gs-btn--ghost:hover { border-color: var(--gs-accent); color: var(--gs-accent); transform: translateY(-2px); }

.gs-btn--path {
    background: transparent;
    color: var(--gs-text);
    border-color: var(--gs-border-strong);
    align-self: flex-start;
    margin-top: auto;
}
.gs-btn--path:hover {
    border-color: var(--gs-path-color, var(--gs-accent));
    color: var(--gs-path-color, var(--gs-accent));
    transform: translateY(-2px);
}

/* --------------------------------------------------------------------------
   Stage 0 — Hero
   -------------------------------------------------------------------------- */
.gs-hero {
    /* These shift toward purple on scroll (see the tint module in get-started.js). */
    --gs-hero-base: var(--gs-bg);
    --gs-ridge-fill: var(--gs-bg);
    --gs-ridge-stroke: rgba(255, 255, 255, 0.5);
    --gs-scrim-rgb: 5, 5, 9;

    position: relative;
    overflow: hidden;
    min-height: 92vh;
    display: flex;
    align-items: center;
    padding-block: clamp(7rem, 14vw, 11rem) clamp(3rem, 8vw, 6rem);
    background:
        radial-gradient(900px 520px at 50% -10%, rgba(124, 108, 245, 0.16), transparent 60%),
        var(--gs-hero-base);
}
/* Two columns — copy on the left, cubed mosaic on the right, 50px apart,
   both vertically centred. Anchored ~100px from the screen edge. */
.gs-hero__inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: var(--gs-maxw);
    margin-inline: auto;
    padding-inline: var(--gs-pad);
}
/* Centred content. Wide enough for the four pills on one row. */
.gs-hero__copy { max-width: 760px; margin-inline: auto; text-align: center; }
.gs-hero__sub { margin-inline: auto; }
.gs-hero__actions { justify-content: center; }
.gs-hero__chips { justify-content: center; }

/* ---- AI-cycle axis — ruler + sweeping marker + stage labels, pinned bottom ---- */
.gs-hero__axis { display: none; }   /* hidden for now (markup kept) */
.gs-hero__axis {
    position: absolute;
    left: 0;
    right: 0;
    bottom: clamp(14px, 3vh, 30px);
    z-index: 1;
    pointer-events: none;
    padding-inline: var(--gs-pad);
}
.gs-axis__track { position: relative; max-width: var(--gs-maxw); margin-inline: auto; height: 58px; }
.gs-axis__base { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--gs-border-strong); }
.gs-axis__ruler {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 6px;
    background: repeating-linear-gradient(to right, var(--gs-border) 0 1px, transparent 1px 16px);
}
.gs-axis__stages {
    position: absolute;
    inset: 0;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    list-style: none;
    margin: 0;
    padding: 0;
}
.gs-axis__stage { display: flex; flex-direction: column; align-items: center; gap: 10px; color: var(--gs-text-faint); }
.gs-axis__label { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: currentColor; white-space: nowrap; }
.gs-axis__tick { width: 1px; height: 14px; background: currentColor; }
.gs-axis__marker {
    position: absolute;
    bottom: -3px;
    left: 0;
    margin-left: -4px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--gs-accent);
    box-shadow: 0 0 12px 2px rgba(124, 108, 245, 0.6);
}
@media (prefers-reduced-motion: no-preference) {
    .gs-axis__marker { animation: gs-axis-sweep 14s linear infinite; }
    .gs-axis__stage { animation: gs-axis-glow 14s ease-in-out infinite; }
    .gs-axis__stage:nth-child(1) { animation-delay: 0s; }
    .gs-axis__stage:nth-child(2) { animation-delay: 3.5s; }
    .gs-axis__stage:nth-child(3) { animation-delay: 7s; }
    .gs-axis__stage:nth-child(4) { animation-delay: 10.5s; }
    .gs-axis__stage:nth-child(5) { animation-delay: 14s; }
}
@keyframes gs-axis-sweep { 0% { left: 0; } 100% { left: 100%; } }
@keyframes gs-axis-glow {
    0%  { color: var(--gs-accent); }
    7%  { color: var(--gs-accent); }
    18% { color: var(--gs-text-faint); }
    100% { color: var(--gs-text-faint); }
}

@media (max-width: 991px) {
    .gs-hero__copy { max-width: none; }
    .gs-axis__label { font-size: 0.6rem; letter-spacing: 0.08em; }
}

/* Animated ridgeline background — <path>s are drawn and animated by JS. */
.gs-ridges {
    display: none;   /* animated ridgeline hidden for now (markup + JS kept) */
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}
.gs-ridge {
    fill: var(--gs-ridge-fill, var(--gs-bg));
    stroke: var(--gs-ridge-stroke, rgba(255, 255, 255, 0.5));
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}
/* One accent ridgeline in the lower quarter — theme yellow. */
.gs-ridge--accent { stroke: var(--gs-c-marketing); stroke-width: 1.4; }

/* Reverse vignette — a dark, soft "hole" behind the text that runs down to the
   bottom of the hero (so the pills sit on darkness, not on the bright lines).
   Paints above the ridges (DOM order) but below the hero content (z-index:1).
   Colour comes from --gs-scrim-rgb so it can shift purple on scroll. */
.gs-hero__scrim {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(58% 112% at 50% 50%,
            rgba(0, 0, 0, 0.95) 0%,
            rgba(0, 0, 0, 0.88) 40%,
            rgba(0, 0, 0, 0.5) 66%,
            transparent 88%);
    filter: blur(16px);
}

/* Cubed mosaic — one cover-fit image split by gap lines + solid colour blocks.
   Gaps show the dark background (the "cubed" look). Solid blocks pulse. */
.gs-hero__mosaic {
    --cubegap: clamp(6px, 0.8vw, 12px);
    flex: 0 0 auto;
    width: clamp(280px, 32vw, 460px);
    aspect-ratio: 1 / 1;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(4, 1fr);
    grid-template-areas:
        "a  i  i  ."
        "b  i  i  ."
        ".  i  i  c"
        "d  e  .  .";
    gap: var(--cubegap);
    pointer-events: none;
}
/* Hidden for now — moving toward an "artifact + connector + callout" system.
   Delete this rule to bring the mosaic back. */
.gs-hero__mosaic { display: none; }
.gs-cube { border-radius: 4px; }

/* Image: a 2x3 grid of slices (gaps = cube separation). The 2:3 area matches
   the photo's aspect, so the slices show it undistorted. Opacity varies per cube. */
.gs-cube--img {
    grid-area: i;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: var(--cubegap);
}
.gs-slice {
    background-image: url("/static/images/section images/ai hosting - profress and results.jpg");
    background-size: 200% 300%;
    background-repeat: no-repeat;
    border-radius: 4px;
}
.gs-slice--00 { background-position: 0% 0%; }
.gs-slice--10 { background-position: 100% 0%; }
.gs-slice--01 { background-position: 0% 50%; }
.gs-slice--11 { background-position: 100% 50%; }
.gs-slice--02 { background-position: 0% 100%; }
.gs-slice--12 { background-position: 100% 100%; }
/* slight per-cube opacity variation */
.gs-slice--00 { opacity: 1; }
.gs-slice--10 { opacity: 0.86; }
.gs-slice--01 { opacity: 0.94; }
.gs-slice--11 { opacity: 0.80; }
.gs-slice--02 { opacity: 0.90; }
.gs-slice--12 { opacity: 0.83; }

/* Yellow squares — 1px outline only, smaller than their cell, varied size + position. */
.gs-cube--block { background: transparent; border: 1px solid var(--gs-c-marketing); }
.gs-block-1 { grid-area: a; width: 68%; height: 68%; justify-self: start;  align-self: start; }
.gs-block-2 { grid-area: b; width: 50%; height: 50%; justify-self: end;    align-self: center; }
.gs-block-3 { grid-area: c; width: 78%; height: 78%; justify-self: start;  align-self: center; }
.gs-block-4 { grid-area: d; width: 46%; height: 46%; justify-self: start;  align-self: end; }
.gs-block-5 { grid-area: e; width: 60%; height: 60%; justify-self: center; align-self: start; }

.gs-hero__title {
    font-size: clamp(2.18rem, 5.46vw, 4.2rem);
    font-weight: 800;
    line-height: 1.04;
    letter-spacing: -0.03em;
    margin: var(--gs-3) 0 0;
}

/* Hero title colour-block fill — flat purple fields with clean hard edges;
   boundaries glide with the cursor while it's inside the hero. Scoped to
   [data-text] so heroes without the mirror attribute are unaffected. */
.gs-hero__title[data-text] { position: relative; }
.gs-hero__title[data-text]::after {
    content: attr(data-text);
    position: absolute;
    inset: 0;
    background:
        /* theme purple (the darkest shade) — small diagonal block, lower left */
        linear-gradient(115deg,
            #7c6cf5 0%, #7c6cf5 var(--b1, 22%), rgba(124, 108, 245, 0) var(--b1, 22%)),
        /* lavender arc dipping in from the top */
        radial-gradient(circle 300px at var(--c1, 30%) -180px,
            #a78bfa 0% 62%, rgba(167, 139, 250, 0) 62%),
        /* light purple blob rising from the bottom right */
        radial-gradient(circle 260px at var(--c2, 78%) 130%,
            #c4b5fd 0% 58%, rgba(196, 181, 253, 0) 58%),
        /* lavender slice on the far right edge */
        linear-gradient(-65deg,
            #a78bfa 0% 12%, rgba(167, 139, 250, 0) 12%),
        /* palest purple base */
        linear-gradient(#ddd6fe, #ddd6fe);
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}
.gs-hero.is-spot .gs-hero__title[data-text]::after { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
    .gs-hero__title[data-text]::after { display: none; }
}
.gs-hero__sub {
    font-size: clamp(0.77rem, 1.33vw, 1.02rem);
    color: var(--gs-text-dim);
    max-width: 56ch;
    margin: var(--gs-3) auto 0;   /* auto sides keep the description centred under the (centred) hero copy */
}
.gs-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gs-2);
    margin-top: var(--gs-4);
}
.gs-hero__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    list-style: none;
    margin: var(--gs-5) 0 0;
    padding: 0;
}
.gs-hero__chip {
    display: inline-flex;
    align-items: center;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--gs-text-dim);
    text-decoration: none;
    cursor: pointer;
    padding: 0.4rem 0.9rem;
    border: 1px solid var(--gs-border);
    border-radius: var(--gs-radius-pill);
    position: relative;
    padding-left: 1.6rem;
}
.gs-hero__chip::before {
    content: "";
    position: absolute;
    left: 0.8rem;
    top: 50%;
    transform: translateY(-50%);
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--gs-chip-color, var(--gs-accent));
}
.gs-hero__chip--training  { --gs-chip-color: var(--gs-c-training); }
.gs-hero__chip--marketing { --gs-chip-color: var(--gs-c-marketing); }
.gs-hero__chip--workflow  { --gs-chip-color: var(--gs-c-workflow); }
.gs-hero__chip--full      { --gs-chip-color: var(--gs-c-full); }

/* --------------------------------------------------------------------------
   Stage 1+2 — The Shift  (merged problem + opportunity)
   Centred copy. Title reveals line-by-line from the left; the word "start"
   links to the paths, with a sweeping blob that tints it purple.
   -------------------------------------------------------------------------- */
.gs-shift { background: var(--gs-bg-alt); }
.gs-shift__inner {
    max-width: 820px;
    margin-inline: auto;
    padding-inline: var(--gs-pad);
    text-align: center;
}
.gs-shift__title {
    font-size: clamp(2.66rem, 6.16vw, 4.2rem);   /* 40% larger than the section title */
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.02em;
    margin: 0;
}
.gs-shift__lede {
    font-size: clamp(1.05rem, 1.6vw, 1.3rem);
    color: var(--gs-text-dim);
    max-width: 60ch;
    margin: var(--gs-4) auto 0;
}

/* Each line is revealed by a hard-edged box that slides away on scroll. */
.gs-line-reveal {
    display: block;
    position: relative;
    width: fit-content;
    max-width: 100%;
    margin-inline: auto;
    padding-block: 0.08em;
    overflow: hidden;
}
.gs-line-reveal__box {
    position: absolute;
    inset: 0;
    background: var(--gs-accent);
    transform: translateX(101%);   /* off by default (reduced motion / no-JS) */
}
@media (prefers-reduced-motion: no-preference) {
    .gs-line-reveal__box { transform: translateX(0); }  /* covers the line until revealed */
    .gs-shift__lede { opacity: 0; transform: translateY(16px); }
}

/* "start" — links to the paths; an invisible blob sweeps across, tinting purple. */
.gs-spark { position: relative; display: inline-block; text-decoration: none; color: inherit; }
.gs-spark__txt { color: var(--gs-text); }
.gs-spark__glow {
    position: absolute;
    left: 0;
    top: 0;
    color: var(--gs-accent);
    pointer-events: none;
    /* hard-edged angular shape (off to the left until it sweeps in) */
    clip-path: polygon(-45% 0, -22% 0, -34% 100%, -57% 100%);
}
.gs-spark:hover .gs-spark__txt { text-decoration: underline; text-underline-offset: 0.18em; }
@media (prefers-reduced-motion: no-preference) {
    .gs-spark__glow { animation: gs-spark-shape 3.6s ease-in-out infinite; }
}
@keyframes gs-spark-shape {
    0%   { clip-path: polygon(-45% 0, -22% 0, -34% 100%, -57% 100%); }
    50%  { clip-path: polygon(40% 0, 80% 0, 70% 100%, 30% 100%); }
    100% { clip-path: polygon(108% 0, 130% 0, 120% 100%, 98% 100%); }
}

/* --------------------------------------------------------------------------
   Stage 3 — The starting points
   -------------------------------------------------------------------------- */
.gs-paths {
    background:
        radial-gradient(130% 80% at 50% -10%, var(--gs-bg-alt), transparent 55%),
        var(--gs-bg);
}

/* ---- Vertical tabs --------------------------------------------------- */
.gs-tabs {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--gs-4);
    align-items: start;
}
@media (min-width: 900px) {
    .gs-tabs { grid-template-columns: minmax(250px, 32%) 1fr; gap: var(--gs-6); }
}

.gs-tabs__list { display: flex; flex-direction: column; gap: 0.5rem; }

.gs-tab {
    --gs-path-color: var(--gs-accent);
    --gs-path-rgb: 124, 108, 245;
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
    width: 100%;
    text-align: left;
    padding: 0.85rem 1.15rem;
    background: var(--gs-surface);
    border: 1px solid var(--gs-border);
    border-left: 3px solid transparent;
    border-radius: var(--gs-radius-sm);
    color: var(--gs-text-dim);
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: border-color 0.25s ease, background 0.2s ease, color 0.2s ease, box-shadow 0.3s ease;
}
.gs-tab:hover { color: var(--gs-text); border-color: var(--gs-border-strong); }
.gs-tab__num { flex: none; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.08em; color: var(--gs-text-faint); line-height: 1.5; }
.gs-tab__body { display: flex; flex-direction: column; gap: 0.15rem; }
.gs-tab__name { line-height: 1.2; }
.gs-tab__desc {
    font-size: 0.78rem;
    font-weight: 400;
    line-height: 1.25;
    color: var(--gs-text-faint);
}
.gs-tab[aria-selected="true"] .gs-tab__desc { color: var(--gs-text-dim); }
.gs-tab--describe {
    border-style: dashed;
    background: rgba(var(--gs-path-rgb), 0.08);   /* faint accent highlight */
    border-color: rgba(var(--gs-path-rgb), 0.35);
}

.gs-tab[aria-selected="true"] {
    background: var(--gs-surface-2);
    color: var(--gs-text);
    border-left-color: var(--gs-path-color);
    box-shadow: 0 18px 40px -26px rgba(var(--gs-path-rgb), 0.5);
}
.gs-tab[aria-selected="true"] .gs-tab__num { color: var(--gs-path-color); }
.gs-tab.is-connected { border-left-color: var(--gs-path-color); }  /* line lands on the tab */

.gs-tab--training  { --gs-path-color: var(--gs-c-training);  --gs-path-rgb: 56, 189, 248; }
.gs-tab--marketing { --gs-path-color: var(--gs-c-marketing); --gs-path-rgb: 251, 191, 36; }
.gs-tab--workflow  { --gs-path-color: var(--gs-c-workflow);  --gs-path-rgb: 52, 211, 153; }
.gs-tab--full      { --gs-path-color: var(--gs-c-full);      --gs-path-rgb: 167, 139, 250; }

/* ---- Panels (colour-coordinated to the active path) ------------------ */
.gs-panel {
    --gs-path-color: var(--gs-accent);
    --gs-path-rgb: 124, 108, 245;
    background: linear-gradient(180deg, var(--gs-surface-2) 0%, var(--gs-surface) 62%);
    border: 1px solid var(--gs-border);
    border-top: 3px solid var(--gs-path-color);
    border-radius: var(--gs-radius);
    padding: clamp(1.5rem, 3vw, 2.5rem);
    box-shadow:
        0 30px 64px -34px rgba(0, 0, 0, 0.8),
        0 26px 90px -36px rgba(var(--gs-path-rgb), 0.30),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.gs-panel--training  { --gs-path-color: var(--gs-c-training);  --gs-path-rgb: 56, 189, 248; }
.gs-panel--marketing { --gs-path-color: var(--gs-c-marketing); --gs-path-rgb: 251, 191, 36; }
.gs-panel--workflow  { --gs-path-color: var(--gs-c-workflow);  --gs-path-rgb: 52, 211, 153; }
.gs-panel--full      { --gs-path-color: var(--gs-c-full);      --gs-path-rgb: 167, 139, 250; }

/* Only stack-space panels in the no-JS fallback (both visible); with JS the
   single active panel must sit flush at the top. */
.gs-panel:not([hidden]) + .gs-panel:not([hidden]) { margin-top: var(--gs-3); }
.gs-panel[hidden] { display: none; }
.gs-panel__tagline {
    font-size: clamp(1.2rem, 2vw, 1.5rem);
    font-weight: 600;
    color: var(--gs-text);
    margin: 0 0 var(--gs-3);
}
.gs-panel .gs-btn--path { margin-top: var(--gs-3); }

/* ---- Describe / recommender panel ------------------------------------ */
.gs-describe__label { display: block; font-weight: 600; margin-bottom: var(--gs-2); }
.gs-describe__input {
    width: 100%;
    resize: vertical;
    min-height: 110px;
    padding: 0.9rem 1rem;
    background: var(--gs-bg-alt);
    color: var(--gs-text);
    border: 1px solid var(--gs-border);
    border-radius: var(--gs-radius-sm);
    font-family: 'Outfit', sans-serif;
    font-size: 1rem;
    margin-bottom: var(--gs-3);
}
.gs-describe__input:focus { outline: none; border-color: var(--gs-accent); }
.gs-describe__result {
    margin-top: var(--gs-3);
    padding: var(--gs-3);
    border: 1px solid var(--gs-accent);
    border-radius: var(--gs-radius-sm);
    background: rgba(124, 108, 245, 0.08);
}
.gs-describe__result[hidden] { display: none; }
.gs-describe__rec { margin: 0 0 var(--gs-2); font-size: 1.05rem; }

.gs-paths__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--gs-3);
}

.gs-path {
    --gs-path-color: var(--gs-accent);
    --gs-path-rgb: 124, 108, 245;
    position: relative;
    z-index: 3; /* sits above the .gs-lines overlay so lines tuck behind */
    display: flex;
    flex-direction: column;
    gap: var(--gs-3);
    padding: clamp(1.5rem, 3vw, 2.25rem);
    /* lit-from-above surface so the card doesn't read flat */
    background: linear-gradient(180deg, var(--gs-surface-2) 0%, var(--gs-surface) 62%);
    border: 1px solid var(--gs-border);
    border-top: 3px solid var(--gs-path-color);
    border-radius: var(--gs-radius);
    /* elevation (neutral) + an ambient pool of the card's colour + top highlight */
    box-shadow:
        0 30px 64px -34px rgba(0, 0, 0, 0.80),
        0 10px 24px -16px rgba(0, 0, 0, 0.55),
        0 26px 90px -36px rgba(var(--gs-path-rgb), 0.32),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    transition: transform 0.25s ease, border-color 0.3s ease, box-shadow 0.45s ease;
}

.gs-path:hover,
.gs-page .gs-path[data-reveal].is-revealed:hover {
    transform: translateY(-6px);
    box-shadow:
        0 46px 90px -34px rgba(0, 0, 0, 0.85),
        0 14px 30px -16px rgba(0, 0, 0, 0.6),
        0 36px 120px -36px rgba(var(--gs-path-rgb), 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.10);
}

/* "Ignite" when its connecting line reaches the card */
.gs-path.is-connected {
    border-color: var(--gs-path-color);
    box-shadow:
        0 30px 64px -34px rgba(0, 0, 0, 0.80),
        0 10px 24px -16px rgba(0, 0, 0, 0.55),
        0 30px 110px -34px rgba(var(--gs-path-rgb), 0.6),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.gs-path--training  { --gs-path-color: var(--gs-c-training);  --gs-path-rgb: 56, 189, 248; }
.gs-path--marketing { --gs-path-color: var(--gs-c-marketing); --gs-path-rgb: 251, 191, 36; }
.gs-path--workflow  { --gs-path-color: var(--gs-c-workflow);  --gs-path-rgb: 52, 211, 153; }
.gs-path--full      { --gs-path-color: var(--gs-c-full);      --gs-path-rgb: 167, 139, 250; }

.gs-path__head { position: relative; }
.gs-path__num {
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--gs-path-color);
}
.gs-path__name {
    font-size: clamp(1.4rem, 2.4vw, 1.75rem);
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: 0.35rem 0 0;
}
.gs-path__tagline {
    color: var(--gs-text-dim);
    font-size: 1.02rem;
    margin: 0.35rem 0 0;
}

.gs-path__plain { margin: 0; font-size: 1.02rem; }
.gs-path__plain-label {
    display: block;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gs-text-faint);
    margin-bottom: 0.3rem;
}

.gs-path__you-label {
    display: block;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gs-text-faint);
    margin-bottom: 0.5rem;
}
.gs-path__you-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}
.gs-path__you-list li {
    position: relative;
    padding-left: 1.5rem;
    color: var(--gs-text-dim);
    font-size: 0.96rem;
}
.gs-path__you-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--gs-path-color);
    opacity: 0.7;
}

.gs-path__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.gs-chip {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--gs-text-dim);
    padding: 0.35rem 0.8rem;
    background: var(--gs-bg-alt);
    border: 1px solid var(--gs-border);
    border-radius: var(--gs-radius-pill);
}

.gs-path__proof {
    margin: 0;
    padding: var(--gs-2) var(--gs-3);
    border-left: 2px solid var(--gs-path-color);
    background: var(--gs-bg-alt);
    border-radius: 0 var(--gs-radius-sm) var(--gs-radius-sm) 0;
    color: var(--gs-text-dim);
    font-size: 0.92rem;
    font-style: italic;
}

/* --------------------------------------------------------------------------
   Stage 4 — Quiz / recommender
   -------------------------------------------------------------------------- */
.gs-quiz { background: var(--gs-bg-alt); }
.gs-quiz__form {
    display: flex;
    flex-direction: column;
    gap: var(--gs-4);
}
.gs-quiz__q {
    border: 1px solid var(--gs-border);
    border-radius: var(--gs-radius);
    padding: clamp(1.25rem, 3vw, 2rem);
    background: var(--gs-surface);
    margin: 0;
}
.gs-quiz__legend {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    font-size: clamp(1.1rem, 2vw, 1.35rem);
    font-weight: 600;
    padding: 0;
    margin-bottom: var(--gs-3);
}
.gs-quiz__qnum {
    flex: none;
    width: 1.9rem;
    height: 1.9rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--gs-accent);
    border: 1px solid var(--gs-border-strong);
    border-radius: 50%;
    align-self: center;
}
.gs-quiz__options {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.6rem;
}
.gs-quiz__option {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1.1rem;
    border: 1px solid var(--gs-border);
    border-radius: var(--gs-radius-sm);
    background: var(--gs-bg-alt);
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.gs-quiz__option:hover { border-color: var(--gs-border-strong); }
.gs-quiz__option input {
    accent-color: var(--gs-accent);
    width: 1.1rem;
    height: 1.1rem;
    flex: none;
}
.gs-quiz__option:has(input:checked) {
    border-color: var(--gs-accent);
    background: rgba(124, 108, 245, 0.10);
}
.gs-quiz__option-text { font-size: 0.98rem; color: var(--gs-text); }

.gs-quiz__foot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    text-align: center;
}
.gs-quiz__hint { color: var(--gs-text-faint); font-size: 0.88rem; margin: 0; }
.gs-quiz__result {
    border: 1px solid var(--gs-accent);
    border-radius: var(--gs-radius);
    padding: var(--gs-4);
    background: rgba(124, 108, 245, 0.08);
}

/* --------------------------------------------------------------------------
   Hero artifact — "company brain" mock (MAI-style chrome card)
   -------------------------------------------------------------------------- */
/* Sits as the hero's right column. */
.gs-hero__mock { flex: 0 0 auto; width: clamp(320px, 38vw, 460px); }

/* Artifact mock — dark "chrome" card, like the MAI UI mockups. */
.gs-mock {
    position: relative;
    background: linear-gradient(180deg, var(--gs-surface-2) 0%, var(--gs-surface) 70%);
    border: 1px solid var(--gs-border);
    border-radius: var(--gs-radius);
    box-shadow: 0 40px 80px -42px rgba(0, 0, 0, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    overflow: hidden;
}
.gs-mock__chrome {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.8rem 1.1rem;
    border-bottom: 1px solid var(--gs-border);
    background: rgba(255, 255, 255, 0.02);
}
.gs-mock__dots { display: inline-flex; gap: 5px; }
.gs-mock__dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--gs-border-strong); }
.gs-mock__title { font-weight: 600; font-size: 0.85rem; color: var(--gs-text-dim); }
.gs-mock__status {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.72rem;
    color: var(--gs-c-workflow);
}
.gs-mock__status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--gs-c-workflow); }
.gs-mock__body { display: flex; flex-direction: column; gap: var(--gs-2); padding: clamp(1.1rem, 2.5vw, 1.6rem); }
.gs-msg { max-width: 82%; margin: 0; padding: 0.7rem 0.95rem; border-radius: 14px; font-size: 0.92rem; line-height: 1.45; }
.gs-msg--user { align-self: flex-end; background: var(--gs-accent); color: #fff; border-bottom-right-radius: 4px; }
.gs-msg--ai { align-self: flex-start; background: var(--gs-bg-alt); border: 1px solid var(--gs-border); color: var(--gs-text); border-bottom-left-radius: 4px; }
.gs-mock__input {
    margin: 0 clamp(1.1rem, 2.5vw, 1.6rem) clamp(1.1rem, 2.5vw, 1.6rem);
    padding: 0.7rem 1rem;
    border: 1px solid var(--gs-border);
    border-radius: var(--gs-radius-pill);
    background: var(--gs-bg-alt);
    color: var(--gs-text-faint);
    font-size: 0.85rem;
}

/* Connector line from the callout to the artifact (desktop). */
@media (min-width: 900px) {
    .gs-mock::before {
        content: "";
        position: absolute;
        top: 34px;
        right: 100%;
        width: 44px;        /* bridges the 50px hero gap to the copy */
        height: 1px;
        background: var(--gs-border-strong);
    }
    .gs-mock::after {
        content: "";
        position: absolute;
        top: 31px;
        right: calc(100% - 3px);
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: var(--gs-accent);
    }
}

/* --------------------------------------------------------------------------
   Stage 5 — CTA
   -------------------------------------------------------------------------- */
.gs-cta {
    background:
        radial-gradient(700px 400px at 50% 0%, rgba(124, 108, 245, 0.18), transparent 60%),
        var(--gs-bg);
    text-align: center;
}
.gs-cta__inner { display: flex; flex-direction: column; align-items: center; }
.gs-cta .gs-eyebrow::before { display: none; }
.gs-cta .gs-eyebrow { letter-spacing: 0.2em; }
.gs-cta__title {
    font-size: clamp(2.2rem, 5vw, 3.4rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.05;
    margin: var(--gs-2) 0 0;
}
.gs-cta .gs-section__lede { margin-inline: auto; }
.gs-cta .gs-btn { margin-top: var(--gs-4); }
.gs-cta__trust {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--gs-2) var(--gs-4);
    list-style: none;
    margin: var(--gs-4) 0 0;
    padding: 0;
    color: var(--gs-text-faint);
    font-size: 0.9rem;
}
.gs-cta__trust li {
    position: relative;
    padding-left: 1.3rem;
}
.gs-cta__trust li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--gs-accent);
    font-weight: 700;
}

/* ==========================================================================
   PHASE 2 — Motion
   ========================================================================== */

/* --------------------------------------------------------------------------
   Scroll reveal — driven by the global [data-reveal] observer in site.js
   (adds .is-revealed on enter; instant-reveals under reduced motion).
   Hidden state only applies when motion is allowed, so a JS failure or
   reduced-motion never leaves content stuck invisible.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
    .gs-page [data-reveal] {
        opacity: 0;
        transform: translateY(24px);
        transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
                    transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
        will-change: opacity, transform;
    }
    .gs-page [data-reveal].is-revealed {
        opacity: 1;
        transform: none;
    }
}

/* --------------------------------------------------------------------------
   Quiz — enhanced step mode (added by get-started.js).
   Without JS the form shows all questions (progressive enhancement);
   .gs-quiz--enhanced switches to one-question-at-a-time.
   -------------------------------------------------------------------------- */
.gs-quiz__progress { display: none; }

.gs-quiz--enhanced .gs-quiz__progress {
    display: block;
    margin-bottom: var(--gs-3);
}
.gs-quiz__progress-bar {
    height: 4px;
    border-radius: 4px;
    background: var(--gs-border);
    overflow: hidden;
}
.gs-quiz__progress-fill {
    display: block;
    height: 100%;
    width: 0;
    background: var(--gs-accent);
    border-radius: 4px;
    transition: width 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.gs-quiz__progress-label {
    display: block;
    margin-top: 0.6rem;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gs-text-faint);
}

.gs-quiz--enhanced .gs-quiz__q { display: none; }
.gs-quiz--enhanced .gs-quiz__q.is-current { display: block; }

.gs-quiz--enhanced .gs-quiz__foot { display: none; }

/* Once answered: clear the questionnaire, leave only the result. */
.gs-quiz--complete .gs-quiz__q,
.gs-quiz--complete .gs-quiz__progress,
.gs-quiz--complete .gs-quiz__controls { display: none; }

.gs-quiz__controls { display: none; }
.gs-quiz--enhanced .gs-quiz__controls {
    display: flex;
    align-items: center;
    gap: var(--gs-2);
    margin-top: var(--gs-3);
}
.gs-quiz__back {
    background: none;
    border: none;
    color: var(--gs-text-faint);
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    padding: 0.4rem 0.2rem;
}
.gs-quiz__back:hover { color: var(--gs-text); }
.gs-quiz__back[hidden] { display: none; }

/* --------------------------------------------------------------------------
   Quiz — result reveal
   -------------------------------------------------------------------------- */
.gs-quiz__result {
    --gs-result-color: var(--gs-accent);
    border: 1px solid var(--gs-result-color);
    border-radius: var(--gs-radius);
    padding: clamp(1.5rem, 4vw, 2.5rem);
    background: var(--gs-surface);
    text-align: center;
}
.gs-quiz__result[hidden] { display: none; }
.gs-quiz__result--training  { --gs-result-color: var(--gs-c-training); }
.gs-quiz__result--marketing { --gs-result-color: var(--gs-c-marketing); }
.gs-quiz__result--workflow  { --gs-result-color: var(--gs-c-workflow); }
.gs-quiz__result--full      { --gs-result-color: var(--gs-c-full); }

.gs-result__label {
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--gs-text-faint);
}
.gs-result__name {
    font-size: clamp(1.6rem, 3.5vw, 2.4rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    margin: 0.4rem 0 0;
    color: var(--gs-result-color);
}
.gs-result__why {
    color: var(--gs-text-dim);
    font-size: 1.05rem;
    max-width: 46ch;
    margin: var(--gs-2) auto 0;
}
.gs-result__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--gs-2);
    margin-top: var(--gs-4);
}
.gs-result__runner {
    margin: var(--gs-3) 0 0;
    font-size: 0.9rem;
    color: var(--gs-text-faint);
}
.gs-result__runner button {
    background: none;
    border: none;
    color: var(--gs-text-dim);
    font: inherit;
    text-decoration: underline;
    cursor: pointer;
}
.gs-result__runner button:hover { color: var(--gs-text); }

/* ==========================================================================
   PHASE 3 — Connective tissue & dimensional reveals
   ========================================================================== */

/* --------------------------------------------------------------------------
   Connecting lines — SVG overlay, paths injected + sized by get-started.js.
   Sits above section backgrounds but below the path cards (z-index:3).
   Hidden on small screens (no gutter room) and under reduced motion.
   -------------------------------------------------------------------------- */
.gs-lines {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    pointer-events: none;
    overflow: visible;
}
.gs-line {
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    opacity: 0.5;
    transition: opacity 0.3s ease;
}
.gs-line--training  { stroke: var(--gs-c-training); }
.gs-line--marketing { stroke: var(--gs-c-marketing); }
.gs-line--workflow  { stroke: var(--gs-c-workflow); }
.gs-line--full      { stroke: var(--gs-c-full); }
.gs-line.is-lit { opacity: 0.95; }

/* End node — coloured circle + pill's first letter at the line's drawing tip. */
.gs-line-end { --line-color: var(--gs-accent); }
.gs-line-end circle { fill: var(--line-color); transition: fill 0.2s ease; }
.gs-line-end text {
    fill: #12121a;
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 13px;
    text-anchor: middle;
    dominant-baseline: central;
    transition: fill 0.2s ease;
}
.gs-line-end--training  { --line-color: var(--gs-c-training); }
.gs-line-end--marketing { --line-color: var(--gs-c-marketing); }
.gs-line-end--workflow  { --line-color: var(--gs-c-workflow); }
.gs-line-end--full      { --line-color: var(--gs-c-full); }

/* Over the bars: circle goes white, letter takes the line colour. */
.gs-line-end.is-over-bars circle { fill: #fff; }
.gs-line-end.is-over-bars text { fill: var(--line-color); }

@media (max-width: 1023px) {
    .gs-lines { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .gs-lines { display: none; }
}

/* --------------------------------------------------------------------------
   Dimensional reveal — path cards rotate in as they enter.
   Overrides the generic [data-reveal] transform with a 3D tilt.
   -------------------------------------------------------------------------- */
.gs-paths__grid { perspective: 1400px; }

@media (prefers-reduced-motion: no-preference) {
    .gs-page .gs-path[data-reveal] {
        opacity: 0;
        transform: translateY(32px) rotateX(12deg);
        transform-origin: top center;
    }
    .gs-page .gs-path[data-reveal].is-revealed {
        opacity: 1;
        transform: none;
    }
}

/* --------------------------------------------------------------------------
   Hero pill — pulse the dot on hover, tint the border in its path colour.
   -------------------------------------------------------------------------- */
.gs-hero__chip { transition: border-color 0.2s ease, color 0.2s ease; }
.gs-hero__chip:hover {
    border-color: var(--gs-chip-color, var(--gs-accent));
    color: var(--gs-text);
}
@media (prefers-reduced-motion: no-preference) {
    .gs-hero__chip:hover::before {
        animation: gs-pulse 1.3s ease-out infinite;
    }
    @keyframes gs-pulse {
        0%   { box-shadow: 0 0 0 0 var(--gs-chip-color, var(--gs-accent)); }
        70%  { box-shadow: 0 0 0 7px transparent; }
        100% { box-shadow: 0 0 0 0 transparent; }
    }
}

/* --------------------------------------------------------------------------
   Responsive — tablet & up
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
    .gs-paths__grid { grid-template-columns: repeat(2, 1fr); gap: var(--gs-4); }
    .gs-quiz__options { grid-template-columns: 1fr 1fr; }
    .gs-quiz__foot { flex-direction: row; justify-content: center; gap: var(--gs-3); }
}

/* --------------------------------------------------------------------------
   Reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .gs-page *,
    .gs-page *::before,
    .gs-page *::after {
        transition: none !important;
        animation: none !important;
    }
    .gs-btn:hover,
    .gs-path:hover { transform: none; }
}

/* --------------------------------------------------------------------------
   Stage 4 — Just talk to a human (informal options)
   -------------------------------------------------------------------------- */
.gs-talk {
    position: relative;
    overflow: hidden;
    background: var(--gs-bg-alt);
}
/* Faint full-bleed office photo behind the section. */
.gs-talk__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.12;
    filter: grayscale(0.25);
    z-index: 0;
    pointer-events: none;
}
.gs-talk::after {                /* vignette so the photo dissolves into the bg */
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: radial-gradient(120% 100% at 50% 45%, transparent 0%, var(--gs-bg-alt) 88%);
}
.gs-talk > .gs-container { position: relative; z-index: 1; }

.gs-section__head--center { text-align: center; }
.gs-section__head--center .gs-eyebrow::before { display: none; }
.gs-section__head--center .gs-section__lede { margin-inline: auto; }

.gs-talk__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--gs-3);
    /* Big gap on desktop so the office photo (faces) shows between text and cards. */
    margin-top: clamp(2.5rem, 14vh, 10rem);
}
@media (min-width: 768px) {
    .gs-talk__grid { grid-template-columns: repeat(3, 1fr); }
}

.gs-talk__card {
    display: flex;
    flex-direction: column;
    gap: var(--gs-2);
    background: var(--gs-surface);
    border: 1px solid var(--gs-border);
    border-top: 3px solid var(--gs-tc, var(--gs-accent));
    border-radius: var(--gs-radius);
    padding: clamp(1.5rem, 3vw, 2.2rem);
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.gs-talk__card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 50px -24px rgba(0, 0, 0, 0.7);
}
.gs-talk__card--donuts { --gs-tc: var(--gs-c-marketing); }
.gs-talk__card--ask    { --gs-tc: var(--gs-c-training); }
.gs-talk__card--audit  { --gs-tc: var(--gs-c-workflow); }

.gs-talk__tag {
    align-self: flex-start;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gs-tc, var(--gs-accent));
}
.gs-talk__name {
    font-size: clamp(1.2rem, 2vw, 1.55rem);
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: 0;
}
.gs-talk__desc {
    color: var(--gs-text-dim);
    line-height: 1.6;
    margin: 0;
}
.gs-talk__cta {
    margin-top: var(--gs-5);
    text-align: center;
}
.gs-talk__link {
    margin-top: auto;            /* pin to the card bottom so links align */
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 600;
    font-size: 0.92rem;
    text-decoration: none;
    color: var(--gs-tc, var(--gs-accent));
}
.gs-talk__link span { transition: transform 0.2s ease; }
.gs-talk__link:hover span { transform: translateX(4px); }

/* Subtle inline "just chat" links sprinkled through the page. */
.gs-aside {
    margin: var(--gs-3) 0 0;
    font-size: 0.92rem;
    color: var(--gs-text-faint);
}
.gs-aside a {
    color: var(--gs-text-dim);
    text-decoration: none;
    border-bottom: 1px solid var(--gs-border-strong);
    padding-bottom: 1px;
    transition: color 0.2s ease, border-color 0.2s ease;
}
.gs-aside a:hover {
    color: var(--gs-accent);
    border-color: var(--gs-accent);
}

/* Decorative hero cutout — right side, centred at the hero's halfway point. */
.gs-hero__img {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 0;                  /* behind the centred copy, above the background */
    width: clamp(220px, 32vw, 480px);
    height: auto;
    pointer-events: none;
}
@media (max-width: 640px) {
    .gs-hero__img { display: none; }   /* avoid clutter on small screens */
}

/* In the hero, pin the aside to the baseline so the connecting lines
   (which route through the mid-hero) don't overlap it on scroll. */
.gs-hero .gs-aside {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 25px;                /* ~25px above the hero's bottom edge */
    z-index: 3;                  /* above the connecting lines (z-index 2) */
    margin: 0;
    text-align: center;
}