/* ============================================================================
   Get started: /book-a-demo and /start-for-free.
   Tokens only, so the light theme derives itself. No coloured bloom.
   ========================================================================== */

.gs-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--background, #0e0e0e);
    color: var(--text-primary, #fff);
    font-family: 'Hanken Grotesk', 'Inter', sans-serif;
}

/* ---------------- shared pieces ---------------- */

.gs-kicker {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-muted, #71717a);
    margin: 0 0 10px;
}
.gs-h1 {
    font-size: clamp(28px, 3.4vw, 40px);
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 1.05;
    margin: 0 0 8px;
}
.gs-lede {
    font-size: 15.5px;
    line-height: 1.6;
    color: var(--text-secondary, #a1a1aa);
    margin: 0 0 26px;
    max-width: 34em;
}

/* the form */
.gs-form { display: grid; gap: 16px; }
.gs-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.gs-field { display: grid; gap: 6px; }
.gs-field label {
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--text-secondary, #a1a1aa);
}
.gs-field input,
.gs-field select,
.gs-field textarea {
    width: 100%;
    background: var(--surface, #0d0d0d);
    border: 1px solid var(--border, rgba(255, 255, 255, 0.1));
    border-radius: 10px;
    color: var(--text-primary, #fff);
    font: inherit;
    font-size: 15px;
    padding: 12px 14px;
    outline: none;
    transition: border-color 0.15s;
}
.gs-field input::placeholder,
.gs-field textarea::placeholder { color: var(--text-subtle, #52525b); }
.gs-field input:focus,
.gs-field select:focus,
.gs-field textarea:focus {
    border-color: rgba(126, 167, 186, 0.55);
    box-shadow: 0 0 0 3px rgba(126, 167, 186, 0.10);   /* focus ring, functional */
}
.gs-field select {
    appearance: none;
    -webkit-appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--text-muted, #71717a) 50%),
                      linear-gradient(135deg, var(--text-muted, #71717a) 50%, transparent 50%);
    background-position: calc(100% - 20px) 55%, calc(100% - 15px) 55%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    padding-right: 38px;
}
.gs-field textarea { min-height: 64px; resize: vertical; }
.gs-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 13px 20px;
    border: 0;
    border-radius: 10px;
    background: var(--accent, #fff);
    color: var(--background, #0e0e0e);
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}
.gs-submit:hover { background: var(--accent-hover, #e4e4e7); }
.gs-fine {
    font-size: 12px;
    color: var(--text-muted, #71717a);
    text-align: center;
    margin: 4px 0 0;
}
.gs-sent {
    border: 1px solid var(--border, rgba(255, 255, 255, 0.1));
    border-radius: 10px;
    padding: 14px 16px;
    font-size: 14px;
    color: var(--text-secondary, #a1a1aa);
    margin-bottom: 18px;
}
.gs-sent b { color: var(--text-primary, #fff); font-weight: 600; }

/* the outcome, rendered in the form's place; nothing redirects */
.gs-error {
    border: 1px solid rgba(220, 80, 80, 0.45);
    border-radius: 10px;
    padding: 12px 14px;
    font-size: 14px;
    color: var(--text-primary, #fff);
    margin: 0 0 16px;
}
.gs-done {
    border: 1px solid var(--border, rgba(255, 255, 255, 0.1));
    border-radius: 12px;
    padding: 28px 26px 26px;
    text-align: left;
}
.gs-done-mark {
    display: block;
    width: 34px; height: 34px;
    border-radius: 50%;
    border: 1.5px solid var(--text-primary, #fff);
    position: relative;
    margin-bottom: 18px;
}
.gs-done-mark::after {
    content: "";
    position: absolute;
    left: 11px; top: 7px;
    width: 8px; height: 14px;
    border: solid var(--text-primary, #fff);
    border-width: 0 1.5px 1.5px 0;
    transform: rotate(45deg);
}
.gs-done-title {
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -0.02em;
    margin: 0 0 10px;
}
.gs-done-text {
    font-size: 15px;
    line-height: 1.55;
    color: var(--text-secondary, #a1a1aa);
    margin: 0 0 12px;
}
.gs-done-email { font-size: 14px; color: var(--text-secondary, #a1a1aa); margin: 0; }
.gs-done-email b { color: var(--text-primary, #fff); font-weight: 600; }

/* the proof column: figures, communities, the film */
.gs-proof-title {
    font-size: 17px;
    font-weight: 500;
    color: var(--text-primary, #fff);
    margin: 0 0 22px;
}
.gs-figures {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin-bottom: 30px;
}
.gs-figure {
    border-top: 1px solid var(--border, rgba(255, 255, 255, 0.1));
    padding-top: 14px;
}
.gs-figure b {
    display: block;
    font-size: clamp(26px, 2.6vw, 34px);
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 1;
    margin-bottom: 8px;
}
.gs-figure span {
    display: block;
    font-size: 13px;
    line-height: 1.4;
    color: var(--text-secondary, #a1a1aa);
}
.gs-figure small {
    display: block;
    font-size: 11.5px;
    line-height: 1.45;
    color: var(--text-muted, #71717a);
    margin-top: 6px;
}
.gs-communities {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 22px;
    margin-bottom: 34px;
}
.gs-communities img {
    height: 28px;
    width: auto;
    opacity: 0.85;
    transition: opacity 0.2s;
}
.gs-communities img:hover { opacity: 1; }
.gs-communities-label {
    width: 100%;
    font-size: 11.5px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted, #71717a);
    margin-bottom: -6px;
}

/* The film: a black figure on white. On the dark theme it is inverted and
   screened onto its plate, so the white becomes the page and the figure
   becomes light. On the light theme it is multiplied instead (see
   light_theme_manual.css). The plate is the isolated group, painted with the
   page's own ground, so the blend has a backdrop whatever sits above it. */
.gs-film-row {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 26px;
    align-items: center;
}
.gs-film {
    position: relative;
    isolation: isolate;
    background: var(--background, #0e0e0e);
    border-radius: 14px;
    overflow: hidden;
    aspect-ratio: 1 / 1;
}
.gs-film video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* The black figure on white is turned into ink by assets/js/ink-video.js
       and painted in this grey; no blend, so it holds on iOS too. */
    --ink-rgb: 173, 173, 173;
}
.gs-quote {
    font-size: clamp(18px, 1.8vw, 22px);
    font-weight: 500;
    letter-spacing: -0.02em;
    line-height: 1.3;
    margin: 0 0 14px;
}
.gs-quote-by {
    font-size: 13px;
    color: var(--text-secondary, #a1a1aa);
    line-height: 1.5;
}
.gs-quote-by b { display: block; color: var(--text-primary, #fff); font-weight: 500; font-size: 14px; }

/* ---------------- /book-a-demo: split ---------------- */

/* One screen, no scrolling, but only where the two columns sit side by side.
   Stacked on a narrow window they are taller than a screen, and locking the
   page there clipped the second column and put scrollbars on the first. */
@media (min-width: 1001px) {
    .gs-page--fixed {
        height: 100dvh;
        min-height: 0;
        overflow: hidden;
    }
}
.bd-split {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
}
.bd-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: safe center;
    padding: 92px 40px 28px;
    overflow: hidden;            /* clips the rings; never a scrollbar */
    background: var(--surface, #0d0d0d);
    border-right: 1px solid var(--border, rgba(255, 255, 255, 0.1));
    isolation: isolate;
}
/* rings behind the card, the same family as the hero's */
.bd-rings { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.bd-ring {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.10);
}
.bd-ring-1 { width: 360px; height: 360px; }
.bd-ring-2 { width: 620px; height: 620px; }
.bd-ring-3 { width: 900px; height: 900px; }
.bd-ring-4 { width: 1200px; height: 1200px; }
.bd-card {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 460px;
    background: var(--surface-elevated, #141414);
    border: 1px solid var(--border, rgba(255, 255, 255, 0.1));
    border-radius: 18px;
    padding: 28px 30px 24px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 40px 90px -40px rgba(0, 0, 0, 0.75);
}
.bd-card .gs-form { gap: 12px; }
.bd-card .gs-lede { margin-bottom: 18px; }
.bd-card .bd-brand { margin-bottom: 14px; }
.bd-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 22px;
}
.bd-brand img { height: 30px; width: auto; }
.bd-brand span { font-size: 14px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.bd-proof {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 96px 56px 36px;
}
.bd-proof-inner { width: 100%; max-width: 620px; }

/* ---------------- /start-for-free: card over the console ---------------- */

.sf-stage {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 110px 24px 60px;
    isolation: isolate;
}
.gs-page--console { background: transparent; }
.sf-backdrop {
    position: fixed;
    inset: 0;
    z-index: 0;
    background: var(--background, #0e0e0e) url('../images/bg/dashboard-blur-dark.webp') center / cover no-repeat;
}
/* a wash so the card's edges are always readable against whatever the
   blurred console is doing behind it */
.sf-backdrop::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(14, 14, 14, 0.22);
}
.sf-card {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1080px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    background: var(--surface-elevated, #141414);
    border: 1px solid var(--border, rgba(255, 255, 255, 0.12));
    border-radius: 20px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 60px 120px -50px rgba(0, 0, 0, 0.85);
    overflow: hidden;
}
.sf-left {
    padding: 44px 44px 40px;
    border-right: 1px solid var(--border, rgba(255, 255, 255, 0.1));
}
.sf-right { padding: 44px 44px 40px; }
.sf-left .gs-figures { grid-template-columns: 1fr; gap: 12px; margin-bottom: 26px; }
.sf-left .gs-figure { display: grid; grid-template-columns: 5.2em minmax(0, 1fr); column-gap: 14px; align-items: baseline; padding-top: 12px; }
.sf-left .gs-figure b { font-size: 26px; margin: 0; }
.sf-left .gs-figure small { grid-column: 2; margin-top: 2px; }
.sf-left .gs-film-row { grid-template-columns: 150px minmax(0, 1fr); gap: 20px; }
.sf-left .gs-quote { font-size: 17px; }
.sf-right .gs-h1 { text-align: center; font-size: clamp(26px, 2.6vw, 32px); margin-bottom: 24px; }

/* ---------------- responsive ---------------- */
@media (max-width: 1000px) {
    .bd-split { grid-template-columns: 1fr; }
    .bd-panel { padding: 110px 24px 40px; border-right: 0; border-bottom: 1px solid var(--border, rgba(255,255,255,.1)); }
    .bd-proof { padding: 50px 24px 60px; }
    .sf-card { grid-template-columns: 1fr; }
    .sf-left { border-right: 0; border-bottom: 1px solid var(--border, rgba(255,255,255,.1)); }
    .gs-figures { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
    .gs-row { grid-template-columns: 1fr; }
    .gs-film-row, .sf-left .gs-film-row { grid-template-columns: 1fr; }
    .gs-film { max-width: 220px; }
    .bd-card, .sf-left, .sf-right { padding: 28px 22px 26px; }
}