/* ============================================================================
   GroomCaptain — public marketing layer
   ----------------------------------------------------------------------------
   Loaded after gc-tokens.css so it inherits the approved brand tokens, and
   scoped to `.gcp` / `.gcp-auth` so nothing here can reach the authenticated
   application.

   Same brand as the product, different job: the app is restrained and dense,
   this layer is larger, warmer and more spacious. Colour, radius and font all
   come from gc-tokens — only scale and expression change.
   ========================================================================== */

.gcp {
    --gcp-max: 1180px;
    --gcp-gutter: clamp(1.25rem, 4vw, 2.5rem);
    --gcp-section-y: clamp(3.5rem, 8vw, 6.5rem);

    /* Editorial type scale. The display size is deliberately large — the
       previous GroomCaptain homepage ran to 100px and that confidence is most
       of why it read as a better page. */
    --gcp-display: clamp(2.75rem, 1.1rem + 6.4vw, 5.5rem);
    --gcp-h2: clamp(2rem, 1.25rem + 2.9vw, 3.25rem);
    --gcp-h3: clamp(1.25rem, 1.05rem + 0.7vw, 1.625rem);
    --gcp-lede: clamp(1.0625rem, 0.98rem + 0.4vw, 1.3125rem);

    --gcp-ink-grad: linear-gradient(160deg, #0a1622 0%, #102033 45%, #123a3d 100%);

    /* Warm, light grounds. Dark is reserved for a single moment on the page. */
    --gcp-warm: linear-gradient(135deg, rgba(15, 95, 88, .10) 0%, rgba(242, 166, 90, .11) 100%), #ffffff;
    --gcp-warm-soft: linear-gradient(180deg, rgba(242, 166, 90, .06) 0%, rgba(242, 166, 90, 0) 60%), #fdfcfa;
    --gcp-shadow-card: 0 1px 2px rgba(10, 22, 34, .04), 0 8px 24px -12px rgba(10, 22, 34, .16);
    --gcp-shadow-float: 0 24px 60px -24px rgba(10, 22, 34, .45), 0 2px 8px rgba(10, 22, 34, .12);

    font-family: var(--gc-font);
    color: var(--gc-text);
    background: var(--gc-surface);
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;
}

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

.gcp img {
    max-width: 100%;
    height: auto;
}

.gcp__container {
    width: 100%;
    max-width: var(--gcp-max);
    margin-inline: auto;
    padding-inline: var(--gcp-gutter);
}

/* ---- Typography -------------------------------------------------------- */

.gcp h1, .gcp h2, .gcp h3, .gcp h4 {
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.12;
    margin: 0;
    color: var(--gc-ink-900);
}

.gcp h1 {
    font-size: var(--gcp-display);
    letter-spacing: -0.035em;
    line-height: .95;
    font-weight: 800;
}

.gcp h2 {
    font-size: var(--gcp-h2);
    line-height: 1.04;
    letter-spacing: -0.028em;
}

.gcp h3 {
    font-size: var(--gcp-h3);
    line-height: 1.25;
}

.gcp p {
    margin: 0;
    line-height: 1.6;
}

.gcp__lede {
    font-size: var(--gcp-lede);
    line-height: 1.6;
    color: var(--gc-text-secondary);
}

.gcp__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--gc-primary);
}

.gcp__eyebrow i {
    font-size: 1rem;
}

/* ---- Section rhythm ---------------------------------------------------- */

.gcp__section {
    padding-block: var(--gcp-section-y);
}

.gcp__section--tight {
    padding-block: clamp(2.5rem, 5vw, 4rem);
}

/* Warm grounds, not the application's cool greys. The alternation between
   white and warm is what separates chapters — no borders required. */
.gcp__section--subtle {
    background: var(--gcp-warm-soft);
}

.gcp__section--sunken {
    background: linear-gradient(135deg, rgba(15, 95, 88, .055) 0%, rgba(242, 166, 90, .07) 100%), #ffffff;
}

/* Generous section headers: the heading is the chapter marker. */
.gcp__section-head h2 {
    max-width: 17ch;
}

.gcp__section-head .gcp__lede {
    max-width: 46ch;
}

.gcp__section-head {
    max-width: 46rem;
    margin-bottom: clamp(2rem, 4vw, 3rem);
}

.gcp__section-head > * + * {
    margin-top: .875rem;
}

.gcp__section-head--center {
    margin-inline: auto;
    text-align: center;
}

/* ---- Buttons ----------------------------------------------------------- */

.gcp__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: var(--gc-touch-target);
    padding: .75rem 1.375rem;
    border: 1px solid transparent;
    border-radius: var(--gc-radius);
    font-family: inherit;
    font-size: .9375rem;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}

.gcp__btn:focus-visible {
    outline: 3px solid var(--gc-primary-bright);
    outline-offset: 2px;
}

.gcp__btn--primary {
    background: var(--gc-primary);
    border-color: var(--gc-primary);
    color: var(--gc-primary-on);
}

.gcp__btn--primary:hover {
    background: var(--gc-primary-hover);
    border-color: var(--gc-primary-hover);
    color: var(--gc-primary-on);
}

.gcp__btn--secondary {
    background: var(--gc-surface);
    border-color: var(--gc-border-strong);
    color: var(--gc-ink-800);
}

.gcp__btn--secondary:hover {
    border-color: var(--gc-primary);
    color: var(--gc-primary);
}

/* On the dark hero and CTA bands the secondary button inverts. */
.gcp__btn--ghost {
    background: transparent;
    border-color: rgba(255, 255, 255, .38);
    color: #ffffff;
}

.gcp__btn--ghost:hover {
    background: rgba(255, 255, 255, .1);
    border-color: rgba(255, 255, 255, .7);
    color: #ffffff;
}

.gcp__btn--lg {
    padding: .9375rem 1.75rem;
    font-size: 1rem;
}

.gcp__btn--xl {
    padding: 1.0625rem 2.25rem;
    font-size: 1.0625rem;
    border-radius: var(--gc-radius);
}

.gcp__btn--block {
    width: 100%;
}

.gcp__textlink {
    color: var(--gc-primary);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid transparent;
}

.gcp__textlink:hover {
    color: var(--gc-primary-hover);
    border-bottom-color: currentColor;
}

.gcp__textlink:focus-visible {
    outline: 3px solid var(--gc-primary-bright);
    outline-offset: 2px;
    border-radius: 2px;
}

/* ============================================================================
   Navigation
   ========================================================================== */

.gcp__nav {
    position: sticky;
    top: 0;
    z-index: 60;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: saturate(1.6) blur(10px);
    border-bottom: 1px solid var(--gc-border-subtle);
}

.gcp__nav-inner {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-height: 4.25rem;
}

.gcp__brand {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    text-decoration: none;
    color: var(--gc-ink-900);
    font-weight: 700;
    font-size: 1.0625rem;
    letter-spacing: -0.01em;
    flex: 0 0 auto;
}

.gcp__brand img {
    height: 2.25rem;
    width: auto;
    display: block;
}

.gcp__brand:focus-visible {
    outline: 3px solid var(--gc-primary-bright);
    outline-offset: 3px;
    border-radius: var(--gc-radius-sm);
}

.gcp__brand-mark {
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--gc-radius-sm);
    background: var(--gc-primary);
    color: var(--gc-primary-on);
    font-weight: 800;
}

.gcp__nav-links {
    display: none;
    align-items: center;
    gap: .25rem;
    margin-inline-start: 1rem;
    margin-inline-end: auto;
}

.gcp__nav-link {
    padding: .5rem .75rem;
    border-radius: var(--gc-radius-sm);
    color: var(--gc-ink-700);
    font-size: .9375rem;
    font-weight: 600;
    text-decoration: none;
}

.gcp__nav-link:hover {
    background: var(--gc-primary-surface);
    color: var(--gc-primary);
}

.gcp__nav-link:focus-visible {
    outline: 3px solid var(--gc-primary-bright);
    outline-offset: 2px;
}

.gcp__nav-actions {
    display: flex;
    align-items: center;
    gap: .625rem;
    margin-inline-start: auto;
    flex: 0 0 auto;
}

/* Sign in is a link, not a button — only one thing on this bar should look
   like the action to take. */
.gcp__nav-signin {
    display: none;
    padding: .5rem;
    color: var(--gc-ink-700);
    font-size: .9375rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: var(--gc-radius-sm);
}

.gcp__nav-signin:hover {
    color: var(--gc-primary);
}

.gcp__nav-signin:focus-visible {
    outline: 3px solid var(--gc-primary-bright);
    outline-offset: 2px;
}

@media (min-width: 62rem) {
    .gcp__nav-links {
        display: flex;
    }

    .gcp__nav-signin {
        display: inline-flex;
    }
}

/* Below the desktop breakpoint the section links collapse into a details
   disclosure so the bar keeps exactly one visible call to action. */
.gcp__nav-more {
    position: relative;
    margin-inline-end: auto;
    margin-inline-start: .25rem;
}

.gcp__nav-more > summary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .375rem;
    min-height: var(--gc-touch-target);
    min-width: var(--gc-touch-target);
    padding: .5rem .625rem;
    border-radius: var(--gc-radius-sm);
    color: var(--gc-ink-700);
    font-size: .9375rem;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
}

.gcp__nav-more > summary::-webkit-details-marker {
    display: none;
}

.gcp__nav-more > summary:hover,
.gcp__nav-more[open] > summary {
    background: var(--gc-surface-sunken);
}

.gcp__nav-more > summary:focus-visible {
    outline: 3px solid var(--gc-primary-bright);
    outline-offset: 2px;
}

.gcp__nav-more-panel {
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: calc(100% + .5rem);
    min-width: 14rem;
    padding: .5rem;
    background: var(--gc-surface);
    border: 1px solid var(--gc-border);
    border-radius: var(--gc-radius);
    box-shadow: var(--gcp-shadow-card);
    display: grid;
    gap: .125rem;
}

.gcp__nav-more-panel a {
    padding: .625rem .75rem;
    border-radius: var(--gc-radius-sm);
    color: var(--gc-ink-700);
    font-size: .9375rem;
    font-weight: 600;
    text-decoration: none;
}

.gcp__nav-more-panel a:hover {
    background: var(--gc-primary-surface);
    color: var(--gc-primary);
}

@media (min-width: 62rem) {
    .gcp__nav-more {
        display: none;
    }
}

/* ============================================================================
   Hero
   ========================================================================== */

/* Light and warm, not navy. A dark hero made the marketing site read as the
   front door of the authenticated dashboard — same brand, wrong job. */
.gcp__hero {
    position: relative;
    background: var(--gcp-warm);
    color: var(--gc-text);
    padding-block: clamp(3.5rem, 7vw, 7rem) clamp(3.5rem, 7vw, 6.5rem);
    overflow: hidden;
}

.gcp__hero > * {
    position: relative;
    z-index: 1;
}

/* A narrow measure is what forces the headline to stack into big confident
   lines instead of running thin across the column. */
.gcp__hero h1 {
    max-width: 13ch;
}

.gcp__hero-eyebrow {
    color: var(--gc-accent-strong);
    margin-bottom: 1.25rem;
}

/* `.gcp p { margin: 0 }` outranks a bare class, so the hero lede collided
   with the headline. Raised specificity rather than adding !important. */
.gcp p.gcp__hero-copy {
    margin-top: 2rem;
    max-width: 40ch;
    font-size: var(--gcp-lede);
    line-height: 1.6;
    color: var(--gc-text-secondary);
}

.gcp__hero-grid {
    display: grid;
    gap: clamp(3rem, 6vw, 4.5rem);
    align-items: center;
}

@media (min-width: 64rem) {
    /* The illustration takes the larger share — it is the visual event. */
    .gcp__hero-grid {
        grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    }
}

.gcp__hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.5rem;
    margin-top: 2.25rem;
}

/* The secondary action is a link, not a button, so one thing in the hero
   reads as the action. */
.gcp__hero-secondary {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    min-height: var(--gc-touch-target);
    color: var(--gc-ink-800);
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid var(--gc-border-strong);
}

.gcp__hero-secondary:hover {
    color: var(--gc-primary);
    border-bottom-color: var(--gc-primary);
}

.gcp__hero-secondary:focus-visible {
    outline: 3px solid var(--gc-primary-bright);
    outline-offset: 3px;
    border-radius: 2px;
}

/* Price transparency sits directly under the CTA: nobody should reach the
   plan picker surprised that GroomCaptain is paid after the trial. */
.gcp p.gcp__hero-note {
    margin-top: 1.25rem;
    font-size: .9375rem;
    line-height: 1.55;
    color: var(--gc-text-muted);
    max-width: 40ch;
}

.gcp__hero-highlights {
    display: flex;
    flex-wrap: wrap;
    gap: .625rem 2rem;
    margin-top: 2.25rem;
    padding-top: 1.75rem;
    border-top: 1px solid var(--gc-border);
    list-style: none;
    padding-inline-start: 0;
}

.gcp__hero-highlights li {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: .9375rem;
    font-weight: 600;
    color: var(--gc-ink-700);
}

.gcp__hero-highlights i {
    color: var(--gc-primary);
    font-size: 1.125rem;
}

/* ============================================================================
   Route illustration — the hero visual
   ----------------------------------------------------------------------------
   Carries the positioning in one look: service areas as soft circles, the
   drivable path threading between them, and three annotations naming what
   protects it. A shrunken app screenshot cannot say this at hero size.
   ========================================================================== */

.gcp__routeviz {
    position: relative;
    isolation: isolate;
    min-height: clamp(24rem, 46vw, 38rem);
    border-radius: var(--gc-radius-lg);
    overflow: hidden;
    background:
        linear-gradient(90deg, rgba(15, 95, 88, .07) 1px, transparent 1px),
        linear-gradient(0deg, rgba(15, 95, 88, .07) 1px, transparent 1px),
        #fdfefe;
    background-size: 4.5rem 4.5rem;
    border: 1px solid var(--gc-border);
    box-shadow: 0 1.25rem 4rem -1rem rgba(10, 22, 34, .18);
}

.gcp__routeviz-path {
    position: absolute;
    inset: 7% 5%;
    width: 90%;
    height: 86%;
}

.gcp__routeviz-note {
    position: absolute;
    width: min(13.5rem, 58%);
    padding: .75rem .875rem;
    border: 1px solid var(--gc-border);
    border-radius: var(--gc-radius);
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 .75rem 2rem -.5rem rgba(10, 22, 34, .18);
}

.gcp__routeviz-note strong {
    display: block;
    font-size: .9375rem;
    font-weight: 700;
    color: var(--gc-ink-900);
}

.gcp__routeviz-note > span:last-child {
    display: block;
    margin-top: .1875rem;
    font-size: .8125rem;
    line-height: 1.45;
    color: var(--gc-text-secondary);
}

.gcp__routeviz-pin {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.875rem;
    height: 1.875rem;
    margin-bottom: .5rem;
    border-radius: 50%;
    background: var(--gc-primary-surface);
    color: var(--gc-primary);
    font-size: 1rem;
}

/* Asymmetric placement is what gives the composition movement. */
.gcp__routeviz-note--1 { top: 5%; left: 4%; }
.gcp__routeviz-note--2 { top: 42%; right: 3%; }
.gcp__routeviz-note--3 { bottom: 6%; left: 8%; }

/* On phones the absolute placement would overlap; the notes become a plain
   list under a shorter illustration rather than a broken collage. */
@media (max-width: 47.99rem) {
    .gcp__routeviz {
        min-height: 0;
        display: grid;
        gap: .625rem;
        padding: 1rem;
        background-size: 3rem 3rem;
    }

    .gcp__routeviz-path {
        position: relative;
        inset: auto;
        width: 100%;
        height: auto;
        aspect-ratio: 4 / 3;
        margin-bottom: .25rem;
    }

    .gcp__routeviz-note {
        position: static;
        width: 100%;
        display: grid;
        grid-template-columns: 1.875rem 1fr;
        column-gap: .75rem;
        align-items: center;
        box-shadow: none;
    }

    .gcp__routeviz-pin {
        grid-row: 1 / span 2;
        margin-bottom: 0;
    }
}

    color: var(--gc-accent);
    font-size: 1.125rem;
}

/* ---- Product shots ------------------------------------------------------ */

.gcp__shot {
    border-radius: var(--gc-radius-lg);
    overflow: hidden;
    background: var(--gc-surface);
    border: 1px solid var(--gc-border);
    box-shadow: var(--gcp-shadow-card);
}

.gcp__shot--float {
    border-color: rgba(255, 255, 255, .18);
    box-shadow: var(--gcp-shadow-float);
}

.gcp__shot-bar {
    display: flex;
    align-items: center;
    gap: .375rem;
    padding: .625rem .875rem;
    background: var(--gc-surface-sunken);
    border-bottom: 1px solid var(--gc-border-subtle);
}

.gcp__shot-dot {
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    background: var(--gc-border-strong);
}

.gcp__shot-label {
    margin-inline-start: .5rem;
    font-size: .75rem;
    font-weight: 600;
    color: var(--gc-text-muted);
}

/* The captures are 1440-wide desktop screenshots. Rather than shrinking a
   whole app window into an unreadable thumbnail, each frame shows a crop at a
   readable scale and anchors the image to the region that matters. */
.gcp__shot-viewport {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 10;
    background: var(--gc-surface-page);
}

.gcp__shot-viewport img {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    width: 100%;
    height: auto;
    display: block;
}

/* Crop past the app's left navigation rail and scale up, so the working area
   of the screen is legible instead of being reduced to grey texture. */
.gcp__shot-viewport--zoom img {
    width: 178%;
    inset-inline-start: -16%;
}

/* For screens whose subject sits toward the middle or right of the window. */
.gcp__shot-viewport--zoom-right img {
    width: 178%;
    inset-inline-start: -46%;
}

/* Phone captures are portrait — show them whole, centred, on a tinted bed. */
.gcp__shot-viewport--phone {
    aspect-ratio: 16 / 10;
    display: grid;
    place-items: center;
    background: var(--gc-surface-sunken);
}

.gcp__shot-viewport--phone img {
    position: relative;
    width: auto;
    max-height: 100%;
}

.gcp__shot-caption {
    padding: .75rem 1rem;
    border-top: 1px solid var(--gc-border-subtle);
    background: var(--gc-surface-subtle);
    font-size: .8125rem;
    line-height: 1.45;
    color: var(--gc-text-muted);
}

/* ============================================================================
   Lifecycle strip — the connected-system story
   ========================================================================== */

/* Not a row of boxes. A sequence reads as a sequence: a single hairline runs
   behind the numbers, and the steps sit on the page rather than in cards. */
.gcp__lifecycle {
    position: relative;
    display: grid;
    gap: 2rem 1.75rem;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    padding-block-start: 2.25rem;
}

.gcp__lifecycle::before {
    content: "";
    position: absolute;
    inset-block-start: .8125rem;
    inset-inline: 0;
    block-size: 1px;
    background: var(--gc-border);
}

.gcp__lifecycle-step {
    display: grid;
    gap: .5rem;
    align-content: start;
}

.gcp__lifecycle-step > .gcp__lifecycle-index {
    margin-block-start: -3.0625rem;
}

.gcp__lifecycle-index {
    display: inline-grid;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: var(--gc-primary);
    color: var(--gc-primary-on);
    font-size: .8125rem;
    font-weight: 700;
    /* Sits on the hairline, so it needs its own ground. */
    box-shadow: 0 0 0 .3125rem var(--gc-surface-subtle);
}

.gcp__lifecycle-step strong {
    font-size: .9375rem;
    font-weight: 700;
    color: var(--gc-ink-800);
}

.gcp__lifecycle-step span {
    font-size: .8125rem;
    line-height: 1.45;
    color: var(--gc-text-secondary);
}

/* On a phone the six steps stack, and as equal full-width blocks they read as
   six separate things rather than one sequence. Below the tablet breakpoint
   they become a connected numbered list: the number moves inline, a rule joins
   consecutive steps, and the padding tightens. Same six steps, same words —
   it just reads as a flow again. */
@media (max-width: 47.99rem) {
    .gcp__lifecycle {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
        /* The container background exists only to paint the 1px grid gaps on
           wider screens; with gap: 0 it would show as a stray edge. */
        background: var(--gc-surface);
    }

    .gcp__lifecycle-step {
        position: relative;
        grid-template-columns: 1.75rem 1fr;
        column-gap: .75rem;
        padding: .875rem 1rem;
    }

    .gcp__lifecycle-step > .gcp__lifecycle-index {
        grid-row: 1 / span 2;
        align-self: start;
    }

    .gcp__lifecycle-step + .gcp__lifecycle-step::before {
        content: "";
        position: absolute;
        inset-block-start: 0;
        inset-inline-start: 1rem;
        inline-size: calc(100% - 2rem);
        block-size: 1px;
        background: var(--gc-border-subtle);
    }
}

/* ============================================================================
   Cards — problems, differentiators, audiences
   ========================================================================== */

.gcp__grid {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}

/* Not a card. A column of the page, separated by a rule and whitespace rather
   than a border and a shadow. Cards are reserved for discrete objects — plans
   and FAQ entries — not for every idea on the page. */
.gcp__card {
    display: grid;
    gap: .75rem;
    align-content: start;
    padding-block-start: 1.5rem;
    border-block-start: 2px solid var(--gc-ink-900);
}

.gcp__card p {
    color: var(--gc-text-secondary);
    font-size: 1rem;
    line-height: 1.6;
}

/* Wider gutters, since there is no card padding doing the separating. */
.gcp__grid {
    gap: clamp(1.75rem, 4vw, 3rem);
}

/* The icon is a mark, not a filled tile — one less box on the page. */
.gcp__card-icon {
    display: block;
    color: var(--gc-primary);
    font-size: 1.75rem;
    line-height: 1;
}

.gcp__card-icon--accent {
    background: var(--gc-accent-surface);
    color: var(--gc-accent-strong);
}

/* ---- Proof stories ------------------------------------------------------ */

.gcp__proof {
    display: grid;
    gap: clamp(3rem, 7vw, 5rem);
}

.gcp__proof-row {
    display: grid;
    gap: clamp(1.75rem, 4vw, 3.5rem);
    align-items: center;
}

/* The first story is a full-width statement over one large screenshot, so the
   section opens with a single confident image rather than starting straight
   into an alternating documentation sequence. */
.gcp__proof-row--lead {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(1.5rem, 3vw, 2.25rem);
}

.gcp__proof-row--lead .gcp__proof-copy {
    max-width: 34rem;
}

.gcp__proof-row--lead .gcp__proof-points {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 2rem;
    max-width: none;
}

@media (min-width: 64rem) {
    .gcp__proof-row {
        grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
    }

    /* Alternate sides so the page has rhythm rather than a stacked column.
       The column widths flip with the order, otherwise every second
       screenshot lands in the narrow column and renders smaller than its
       neighbours. */
    .gcp__proof-row:nth-child(even) {
        grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
    }

    .gcp__proof-row:nth-child(even) > .gcp__proof-copy {
        order: 2;
    }

    .gcp__proof-row--lead,
    .gcp__proof-row--lead:nth-child(even) {
        grid-template-columns: minmax(0, 1fr);
    }
}

.gcp__proof-copy {
    display: grid;
    gap: .875rem;
    align-content: start;
}

.gcp__proof-copy p {
    color: var(--gc-text-secondary);
    font-size: 1rem;
}

.gcp__proof-points {
    display: grid;
    gap: .5rem;
    margin: .25rem 0 0;
    padding-inline-start: 0;
    list-style: none;
}

.gcp__proof-points li {
    display: grid;
    grid-template-columns: 1.25rem 1fr;
    gap: .5rem;
    font-size: .9375rem;
    line-height: 1.5;
    color: var(--gc-text-secondary);
}

.gcp__proof-points i {
    color: var(--gc-primary);
    font-size: 1.125rem;
    line-height: 1.35;
}

/* ============================================================================
   Audience cards
   ========================================================================== */

/* Also not a card — three columns of a spread, divided by rules. */
.gcp__audience {
    display: grid;
    gap: .875rem;
    align-content: start;
    padding-block-start: 1.5rem;
    border-block-start: 2px solid var(--gc-ink-900);
}

.gcp__audience-plan {
    display: inline-flex;
    align-items: center;
    align-self: start;
    gap: .375rem;
    padding: .25rem .625rem;
    border-radius: var(--gc-radius-pill);
    background: var(--gc-primary-surface);
    border: 1px solid var(--gc-primary-border);
    color: var(--gc-primary);
    font-size: .75rem;
    font-weight: 700;
}

.gcp__audience ul {
    display: grid;
    gap: .4375rem;
    margin: 0;
    padding-inline-start: 0;
    list-style: none;
}

.gcp__audience li {
    display: grid;
    grid-template-columns: 1.125rem 1fr;
    gap: .5rem;
    font-size: .9375rem;
    line-height: 1.5;
    color: var(--gc-text-secondary);
}

.gcp__audience li i {
    color: var(--gc-primary);
    font-size: 1rem;
    line-height: 1.4;
}

/* ============================================================================
   Pricing
   ========================================================================== */

.gcp__pricing {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
    align-items: stretch;
}

.gcp__plan {
    position: relative;
    background: var(--gc-surface);
    border: 1px solid var(--gc-border);
    border-radius: var(--gc-radius-lg);
    padding: 1.75rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    height: 100%;
}

/* The recommended plan is marked with the warm accent, not by being bigger —
   uneven card heights make the row harder to compare. */
.gcp__plan--recommended {
    border-color: var(--gc-accent);
    box-shadow: 0 0 0 1px var(--gc-accent), var(--gcp-shadow-card);
}

.gcp__plan-flag {
    position: absolute;
    inset-block-start: -.6875rem;
    inset-inline-start: 1.5rem;
    padding: .1875rem .625rem;
    border-radius: var(--gc-radius-pill);
    background: var(--gc-accent);
    color: var(--gc-ink-900);
    font-size: .6875rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.gcp__plan-audience {
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--gc-text-muted);
}

.gcp__plan-price {
    display: flex;
    align-items: baseline;
    gap: .25rem;
    font-size: 2.5rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--gc-ink-900);
}

.gcp__plan-price small {
    font-size: .9375rem;
    font-weight: 600;
    color: var(--gc-text-muted);
}

.gcp__plan-note {
    font-size: .8125rem;
    color: var(--gc-text-muted);
}

.gcp__plan p {
    font-size: .9375rem;
    color: var(--gc-text-secondary);
}

.gcp__plan ul {
    display: grid;
    gap: .5rem;
    margin: 0;
    padding-inline-start: 0;
    list-style: none;
}

.gcp__plan li {
    display: grid;
    grid-template-columns: 1.125rem 1fr;
    gap: .5rem;
    font-size: .875rem;
    line-height: 1.5;
    color: var(--gc-text-secondary);
}

.gcp__plan li i {
    color: var(--gc-primary);
    font-size: 1rem;
    line-height: 1.4;
}

/* CTA pinned to the bottom of every card so the row of buttons lines up. */
.gcp__plan-cta {
    margin-top: auto;
    padding-top: .25rem;
}

.gcp__pricing-note {
    margin-top: 1.5rem;
    padding: 1rem 1.25rem;
    background: var(--gc-primary-surface);
    border: 1px solid var(--gc-primary-border);
    border-radius: var(--gc-radius);
    font-size: .9375rem;
    line-height: 1.55;
    color: var(--gc-ink-700);
}

/* Detailed comparison stays folded away — the cards answer "which one am I",
   the table answers "prove it", and only one of those belongs above the fold. */
.gcp__compare {
    margin-top: 1.5rem;
}

.gcp__compare > summary {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    min-height: var(--gc-touch-target);
    padding: .5rem .875rem;
    border: 1px solid var(--gc-border-strong);
    border-radius: var(--gc-radius);
    color: var(--gc-ink-800);
    font-size: .9375rem;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
}

.gcp__compare > summary::-webkit-details-marker {
    display: none;
}

.gcp__compare > summary::after {
    content: "\002B";
    font-weight: 700;
    color: var(--gc-text-muted);
}

.gcp__compare[open] > summary::after {
    content: "\2212";
}

.gcp__compare > summary:hover {
    border-color: var(--gc-primary);
    color: var(--gc-primary);
}

.gcp__compare > summary:focus-visible {
    outline: 3px solid var(--gc-primary-bright);
    outline-offset: 2px;
}

.gcp__compare-scroll {
    margin-top: 1rem;
    overflow-x: auto;
    border: 1px solid var(--gc-border);
    border-radius: var(--gc-radius);
}

.gcp__compare table {
    width: 100%;
    border-collapse: collapse;
    min-width: 34rem;
}

.gcp__compare th,
.gcp__compare td {
    padding: .75rem 1rem;
    text-align: start;
    font-size: .875rem;
    border-bottom: 1px solid var(--gc-border-subtle);
}

.gcp__compare thead th {
    background: var(--gc-surface-sunken);
    font-weight: 700;
    color: var(--gc-ink-800);
    white-space: nowrap;
}

.gcp__compare tbody th {
    font-weight: 600;
    color: var(--gc-ink-700);
}

.gcp__compare td {
    color: var(--gc-text-secondary);
}

.gcp__compare tbody tr:last-child th,
.gcp__compare tbody tr:last-child td {
    border-bottom: 0;
}

.gcp__compare .gcp__yes {
    color: var(--gc-success);
    font-size: 1.125rem;
}

.gcp__compare .gcp__no {
    color: var(--gc-text-muted);
}

/* ============================================================================
   FAQ — native details, no JavaScript
   ========================================================================== */

.gcp__faq {
    display: grid;
    gap: .75rem;
    max-width: 52rem;
}

.gcp__faq-item {
    background: var(--gc-surface);
    border: 1px solid var(--gc-border);
    border-radius: var(--gc-radius);
    overflow: hidden;
}

.gcp__faq-item > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: var(--gc-touch-target);
    padding: 1rem 1.25rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--gc-ink-800);
    cursor: pointer;
    list-style: none;
}

.gcp__faq-item > summary::-webkit-details-marker {
    display: none;
}

.gcp__faq-item > summary::after {
    content: "\002B";
    flex: 0 0 auto;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--gc-text-muted);
}

.gcp__faq-item[open] > summary::after {
    content: "\2212";
}

.gcp__faq-item > summary:hover {
    background: var(--gc-surface-subtle);
}

.gcp__faq-item > summary:focus-visible {
    outline: 3px solid var(--gc-primary-bright);
    outline-offset: -3px;
}

.gcp__faq-answer {
    padding: 0 1.25rem 1.25rem;
    font-size: .9375rem;
    line-height: 1.6;
    color: var(--gc-text-secondary);
}

.gcp__faq-answer a {
    color: var(--gc-primary);
    font-weight: 600;
}

/* ============================================================================
   Demo request
   ========================================================================== */

.gcp__demo {
    display: grid;
    gap: clamp(1.75rem, 4vw, 3rem);
    align-items: start;
}

@media (min-width: 64rem) {
    .gcp__demo {
        grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
    }
}

.gcp__form-card {
    background: var(--gc-surface);
    border: 1px solid var(--gc-border);
    border-radius: var(--gc-radius-lg);
    padding: clamp(1.5rem, 3vw, 2rem);
    box-shadow: var(--gcp-shadow-card);
}

.gcp__field-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}

.gcp__field {
    display: grid;
    gap: .375rem;
}

.gcp__field--wide {
    grid-column: 1 / -1;
}

.gcp__field label {
    font-size: .8125rem;
    font-weight: 600;
    color: var(--gc-ink-700);
}

.gcp .form-control,
.gcp .form-select {
    min-height: var(--gc-touch-target);
    padding: .5625rem .75rem;
    border: 1px solid var(--gc-border-strong);
    border-radius: var(--gc-radius-sm);
    font-family: inherit;
    font-size: .9375rem;
    color: var(--gc-text);
    background-color: var(--gc-surface);
    width: 100%;
}

.gcp textarea.form-control {
    min-height: 6rem;
}

.gcp .form-control:focus,
.gcp .form-select:focus {
    outline: 3px solid var(--gc-primary-bright);
    outline-offset: 0;
    border-color: var(--gc-primary);
    box-shadow: none;
}

.gcp__form-hint {
    margin-top: .25rem;
    font-size: .8125rem;
    color: var(--gc-text-muted);
}

.gcp__form-actions {
    margin-top: 1.25rem;
    display: flex;
    justify-content: flex-end;
}

.gcp__thanks {
    display: grid;
    gap: .625rem;
    justify-items: start;
}

.gcp__thanks-icon {
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: var(--gc-primary-surface);
    color: var(--gc-primary);
    font-size: 1.75rem;
}

.gcp .validation-message,
.gcp .text-danger {
    color: var(--gc-danger);
    font-size: .8125rem;
}

.gcp .alert {
    border-radius: var(--gc-radius);
    font-size: .9375rem;
}

/* ============================================================================
   Final CTA band + footer
   ========================================================================== */

.gcp__final {
    background: var(--gcp-ink-grad);
    color: #ffffff;
    padding-block: clamp(3rem, 6vw, 4.5rem);
}

.gcp__final-inner {
    display: grid;
    gap: 1.75rem;
    align-items: center;
}

@media (min-width: 56rem) {
    .gcp__final-inner {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 2.5rem;
    }
}

.gcp__final h2 {
    color: #ffffff;
    max-width: 22ch;
}

.gcp__final p {
    margin-top: .75rem;
    color: rgba(255, 255, 255, .78);
    font-size: var(--gcp-lede);
    max-width: 52ch;
}

.gcp__final-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
}

.gcp__footer {
    background: var(--gc-ink-900);
    color: rgba(255, 255, 255, .66);
    padding-block: 2.5rem;
    font-size: .875rem;
}

.gcp__footer-top {
    display: grid;
    gap: 2rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
}

@media (min-width: 48rem) {
    .gcp__footer-top {
        grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr));
    }
}

.gcp__footer h3 {
    color: rgba(255, 255, 255, .92);
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-bottom: .875rem;
}

.gcp__footer ul {
    display: grid;
    gap: .5rem;
    margin: 0;
    padding-inline-start: 0;
    list-style: none;
}

.gcp__footer a {
    color: rgba(255, 255, 255, .72);
    text-decoration: none;
}

.gcp__footer a:hover {
    color: #ffffff;
    text-decoration: underline;
}

.gcp__footer a:focus-visible {
    outline: 2px solid var(--gc-accent);
    outline-offset: 2px;
}

.gcp__footer-brand {
    display: grid;
    gap: .75rem;
    align-content: start;
}

.gcp__footer-brand img {
    height: 2.5rem;
    width: auto;
}

.gcp__footer-brand p {
    max-width: 32ch;
    line-height: 1.55;
}

.gcp__footer-bottom {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.5rem;
    justify-content: space-between;
    padding-top: 1.5rem;
    font-size: .8125rem;
    color: rgba(255, 255, 255, .5);
}

/* ============================================================================
   Auth surfaces — login, register, plan picker, handoff
   ----------------------------------------------------------------------------
   One shell for every step after the marketing site so the funnel does not
   change identity halfway through.
   ========================================================================== */

.gcp-auth {
    font-family: var(--gc-font);
    min-height: 100vh;
    min-height: 100dvh;
    display: grid;
    align-content: start;
    background: var(--gc-surface-page);
    color: var(--gc-text);
    padding: clamp(1.5rem, 5vw, 3rem) clamp(1rem, 4vw, 2rem) 3rem;
}

.gcp-auth *,
.gcp-auth *::before,
.gcp-auth *::after {
    box-sizing: border-box;
}

.gcp-auth__inner {
    width: 100%;
    max-width: 27rem;
    margin-inline: auto;
    display: grid;
    gap: 1.5rem;
}

.gcp-auth__inner--wide {
    max-width: 32rem;
}

.gcp-auth__brand {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .625rem;
    justify-self: center;
    text-decoration: none;
    color: var(--gc-ink-900);
    font-weight: 700;
    font-size: 1.125rem;
}

.gcp-auth__brand img {
    height: 3.25rem;
    width: auto;
    display: block;
}

.gcp-auth__brand:focus-visible {
    outline: 3px solid var(--gc-primary-bright);
    outline-offset: 4px;
    border-radius: var(--gc-radius-sm);
}

.gcp-auth__mark {
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--gc-radius-sm);
    background: var(--gc-primary);
    color: var(--gc-primary-on);
    font-weight: 800;
}

.gcp-auth__card {
    background: var(--gc-surface);
    border: 1px solid var(--gc-border);
    border-radius: var(--gc-radius-lg);
    box-shadow: var(--gcp-shadow-card);
    padding: clamp(1.5rem, 4vw, 2.25rem);
}

.gcp-auth__title {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--gc-ink-900);
    margin: 0;
}

.gcp-auth__lede {
    margin-top: .5rem;
    font-size: .9375rem;
    line-height: 1.55;
    color: var(--gc-text-secondary);
}

.gcp-auth__fields {
    display: grid;
    gap: 1rem;
    margin-top: 1.5rem;
}

.gcp-auth__field {
    display: grid;
    gap: .375rem;
}

.gcp-auth__field label {
    font-size: .8125rem;
    font-weight: 600;
    color: var(--gc-ink-700);
}

.gcp-auth .form-control,
.gcp-auth .form-select {
    min-height: var(--gc-touch-target);
    padding: .625rem .75rem;
    border: 1px solid var(--gc-border-strong);
    border-radius: var(--gc-radius-sm);
    font-family: inherit;
    font-size: 1rem;
    color: var(--gc-text);
    background-color: var(--gc-surface);
    width: 100%;
}

.gcp-auth .form-control:focus,
.gcp-auth .form-select:focus {
    outline: 3px solid var(--gc-primary-bright);
    outline-offset: 0;
    border-color: var(--gc-primary);
    box-shadow: none;
}

.gcp-auth .form-check {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: 0;
    margin: 0;
}

.gcp-auth .form-check-input {
    float: none;
    margin: 0;
    width: 1.0625rem;
    height: 1.0625rem;
}

.gcp-auth .form-check-label {
    font-size: .875rem;
    color: var(--gc-text-secondary);
}

.gcp-auth__hint {
    font-size: .8125rem;
    line-height: 1.5;
    color: var(--gc-text-muted);
}

.gcp-auth .validation-message,
.gcp-auth .text-danger {
    color: var(--gc-danger);
    font-size: .8125rem;
}

.gcp-auth .alert {
    border-radius: var(--gc-radius);
    font-size: .875rem;
    margin-top: 1rem;
}

.gcp-auth__submit {
    margin-top: 1.5rem;
}

.gcp-auth__alt {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--gc-border-subtle);
    text-align: center;
    font-size: .9375rem;
    color: var(--gc-text-secondary);
}

.gcp-auth__alt a {
    color: var(--gc-primary);
    font-weight: 600;
    text-decoration: none;
}

.gcp-auth__alt a:hover {
    text-decoration: underline;
}

.gcp-auth__alt a:focus-visible {
    outline: 3px solid var(--gc-primary-bright);
    outline-offset: 2px;
    border-radius: 2px;
}

.gcp-auth__back {
    justify-self: center;
    font-size: .875rem;
    color: var(--gc-text-muted);
    text-decoration: none;
}

.gcp-auth__back:hover {
    color: var(--gc-primary);
}

/* What happens next — so account creation does not feel like the end of the
   road, and so the plan step is never a surprise. */
.gcp-auth__next {
    display: grid;
    gap: .625rem;
    margin-top: 1.5rem;
    padding: 1rem 1.125rem;
    background: var(--gc-primary-surface);
    border: 1px solid var(--gc-primary-border);
    border-radius: var(--gc-radius);
}

.gcp-auth__next-title {
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--gc-primary);
}

.gcp-auth__steps {
    display: grid;
    gap: .5rem;
    margin: 0;
    padding-inline-start: 0;
    list-style: none;
    counter-reset: gcp-step;
}

.gcp-auth__steps li {
    display: grid;
    grid-template-columns: 1.375rem 1fr;
    gap: .625rem;
    font-size: .875rem;
    line-height: 1.5;
    color: var(--gc-ink-700);
    counter-increment: gcp-step;
}

.gcp-auth__steps li::before {
    content: counter(gcp-step);
    display: grid;
    place-items: center;
    width: 1.375rem;
    height: 1.375rem;
    border-radius: 50%;
    background: var(--gc-primary);
    color: var(--gc-primary-on);
    font-size: .6875rem;
    font-weight: 700;
}

.gcp-auth__steps li[data-state="todo"]::before {
    background: var(--gc-primary-border);
    color: var(--gc-primary);
}

/* ============================================================================
   Reduced motion, anchors, skip link
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .gcp *,
    .gcp-auth * {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Anchor navigation should not drop the heading under the sticky bar. */
.gcp [id] {
    scroll-margin-top: 5.5rem;
}

@media (prefers-reduced-motion: no-preference) {
    .gcp {
        scroll-behavior: smooth;
    }
}

/* Skip link — the nav has several stops before the hero. */
.gcp__skip {
    position: absolute;
    inset-inline-start: -9999px;
    z-index: 100;
    padding: .75rem 1.25rem;
    background: var(--gc-primary);
    color: var(--gc-primary-on);
    font-weight: 600;
    text-decoration: none;
    border-radius: 0 0 var(--gc-radius) 0;
}

.gcp__skip:focus {
    inset-inline-start: 0;
    inset-block-start: 0;
}