/*
 * CabRoyal — the shared visual language (Constitution 7).
 *
 * "Türkiye taksi sarısı, düzgün yapılmış": an ink ground, taxi yellow as the
 * one accent (fills with ink type on them, never white), paper for headline
 * text, mute for the rest, generous whitespace and a 16px radius throughout.
 * No gradients, no glows. Playfair Display carries the headings, Inter the rest.
 *
 * Loaded by both the landing page and the admin panel, so the two never drift
 * apart. Bootstrap 5.3.8 comes from a CDN (Section C); this only sets the
 * variables it reads and adds what it does not have.
 */

:root {
    /* Constitution 7 — the tokens. Nothing below this block names a hex. */
    --cr-taxi: #F7D117;
    --cr-taxi-bright: #FFE14D;
    --cr-taxi-deep: #D9B400;
    --cr-ink: #111111;
    --cr-ink-soft: #1C1C1A;
    --cr-paper: #FFFFFF;
    --cr-mute: #9A9A93;
    --cr-success: #2E9E5B;
    --cr-danger: #D63B2F;

    /* Derived: lifts off the ink ground without introducing a new hue. */
    --cr-surface: var(--cr-ink-soft);
    --cr-surface-2: #262624;
    --cr-line: rgba(247, 209, 23, 0.24);
    --cr-line-soft: rgba(255, 255, 255, 0.10);
    --cr-muted: var(--cr-mute);
    --cr-taxi-soft: rgba(247, 209, 23, 0.12);

    /* The chequer, drawn once (see .cr-checker). Ink on taxi, 8px cells. */
    --cr-checker-cell: 8px;

    --cr-radius: 16px;
    --cr-radius-sm: 10px;

    /* Bootstrap reads these. */
    --bs-primary: var(--cr-taxi);
    --bs-body-font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --bs-border-radius: var(--cr-radius);
}

body {
    background: var(--cr-ink);
    color: var(--cr-paper);
    font-family: var(--bs-body-font-family);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, .cr-display {
    font-family: 'Playfair Display', Georgia, serif;
    letter-spacing: -0.01em;
}

/* --- the gold hairline that ties the identity together ------------------- */

.cr-rule {
    height: 1px;
    background: var(--cr-taxi);
    border: 0;
    opacity: 0.55;
}

.cr-rule-left {
    width: 64px;
    height: 2px;
    background: var(--cr-taxi);
    border: 0;
    opacity: 1;
}

/* --- buttons ------------------------------------------------------------- */

.btn-taxi {
    background: var(--cr-taxi);
    border: 1px solid var(--cr-taxi);
    color: var(--cr-ink);
    font-weight: 600;
    border-radius: var(--cr-radius);
    padding: 0.7rem 1.6rem;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.btn-taxi:hover,
.btn-taxi:focus {
    background: #d8b13a;
    color: var(--cr-ink);
    transform: translateY(-1px);
    box-shadow: 0 8px 24px rgba(201, 162, 39, 0.28);
}

.btn-taxi:disabled {
    opacity: 0.55;
    transform: none;
    box-shadow: none;
}

.btn-outline-taxi {
    background: transparent;
    border: 1px solid var(--cr-taxi);
    color: var(--cr-taxi);
    font-weight: 600;
    border-radius: var(--cr-radius);
    padding: 0.7rem 1.6rem;
}

.btn-outline-taxi:hover,
.btn-outline-taxi:focus {
    background: var(--cr-taxi-soft);
    color: var(--cr-taxi);
}

/* --- surfaces ------------------------------------------------------------ */

.cr-card {
    background: var(--cr-surface);
    border: 1px solid var(--cr-line-soft);
    border-radius: var(--cr-radius);
}

.cr-card-accent {
    border-color: var(--cr-line);
}

/* --- forms --------------------------------------------------------------- */

.form-control,
.form-select {
    background: var(--cr-surface-2);
    border: 1px solid var(--cr-line-soft);
    color: var(--cr-paper);
    border-radius: var(--cr-radius-sm);
    padding: 0.7rem 0.95rem;
}

.form-control:focus,
.form-select:focus {
    background: var(--cr-surface-2);
    border-color: var(--cr-taxi);
    color: var(--cr-paper);
    box-shadow: 0 0 0 3px var(--cr-taxi-soft);
}

.form-control::placeholder {
    color: rgba(245, 241, 232, 0.35);
}

.form-label {
    color: var(--cr-muted);
    font-size: 0.86rem;
    font-weight: 500;
    margin-bottom: 0.4rem;
}

/* Laravel's 422 field errors land here, wired up by ajax-helper.js. */
.form-control.is-invalid,
.form-select.is-invalid {
    border-color: var(--cr-danger);
}

.invalid-feedback {
    color: #e08a83;
    font-size: 0.82rem;
}

/* --- text ---------------------------------------------------------------- */

.text-taxi { color: var(--cr-taxi) !important; }
.text-muted-paper { color: var(--cr-muted) !important; }
.bg-royal { background: var(--cr-ink) !important; }
.bg-surface { background: var(--cr-surface) !important; }

/* --- badges -------------------------------------------------------------- */

.text-bg-royal {
    background: var(--cr-success) !important;
    color: var(--cr-paper) !important;
}

.badge {
    font-weight: 500;
    border-radius: 999px;
    padding: 0.35em 0.75em;
}

/* Telsiz connection pill: lives in the page-header action row next to a
   full-height button, so it centres itself instead of stretching. */
.cr-telsiz-status {
    display: inline-flex;
    align-items: center;
    align-self: center;
    white-space: nowrap;
    line-height: 1;
}

/* Connection pill.
   Bootstrap's `text-bg-success` is a flat mid-green that belongs to no part
   of this palette, and at the size of a badge beside a gold button it read as
   a second button rather than as a state. This is a state: a hairline, the
   page's own ink, and one small dot carrying the colour. */
.cr-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.45em;
    align-self: center;
    white-space: nowrap;
    line-height: 1;
    padding: 0.5em 0.85em;
    border-radius: 999px;
    border: 1px solid var(--cr-line-soft);
    background: transparent;
    color: var(--cr-muted);
    font-size: 0.78rem;
    font-weight: 500;
}

.cr-status-pill::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    flex: 0 0 auto;
}

.cr-status-pill.is-live {
    color: #6FCF8E;
    border-color: rgba(111, 207, 142, 0.35);
}

/* The dot breathes only while the socket is up, so "live" is legible from
   across a room without reading the word. */
.cr-status-pill.is-live::before {
    animation: cr-status-pulse 2s ease-in-out infinite;
}

.cr-status-pill.is-waiting {
    color: var(--cr-taxi);
    border-color: var(--cr-line);
}

@keyframes cr-status-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.35; }
}

@media (prefers-reduced-motion: reduce) {
    .cr-status-pill.is-live::before { animation: none; }
}

/* --- toastr, restyled to match rather than shouting in default blue ------ */

#toast-container > div {
    border-radius: var(--cr-radius-sm);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
    opacity: 1;
    font-family: var(--bs-body-font-family);
    border: 1px solid rgba(245, 241, 232, 0.10);

    /* toastr puts its icon on as a background-image with !important and
       positions it with two separate properties. Those two are not important,
       so the `background` shorthand below used to wipe them — the icon
       survived, lost its `no-repeat`, and tiled across the whole toast. Every
       colour here is `background-color` for that reason. Restated anyway, so
       the next person to reach for the shorthand does not undo it. */
    background-position: 15px center;
    background-repeat: no-repeat;
}

#toast-container > .toast-success { background-color: var(--cr-success); }
#toast-container > .toast-error   { background-color: var(--cr-danger); }
#toast-container > .toast-info    { background-color: var(--cr-surface-2); }
#toast-container > .toast-warning { background-color: #8a6d1f; }

/* The default is a black bar at 40% on what is already a dark toast, which is
   four pixels of nothing. */
#toast-container > div > .toast-progress {
    background-color: var(--cr-taxi);
    opacity: 0.85;
    height: 3px;
}

/* Default: white with a white text-shadow, turning black on hover — a halo on
   a light theme, and invisible against ours the moment you point at it. */
#toast-container .toast-close-button {
    color: var(--cr-paper);
    text-shadow: none;
    opacity: 0.6;
    font-weight: 500;
}

#toast-container .toast-close-button:hover,
#toast-container .toast-close-button:focus {
    color: var(--cr-taxi);
    opacity: 1;
}

#toast-container > div:hover {
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.6);
}

.toast-title { letter-spacing: 0.01em; }
.toast-message { line-height: 1.45; }

/* A toast is 300px wide by default and does not shrink until 480px, so on a
   narrow phone it sits half off the screen. */
@media (max-width: 575.98px) {
    #toast-container > div {
        width: calc(100vw - 24px);
        max-width: 22rem;
    }
}

/* --- SweetAlert2, likewise ---------------------------------------------- */

.swal2-popup.cr-swal {
    background: var(--cr-surface);
    color: var(--cr-paper);
    border: 1px solid var(--cr-line);
    border-radius: var(--cr-radius);
}

.swal2-popup.cr-swal .swal2-title {
    font-family: 'Playfair Display', Georgia, serif;
    color: var(--cr-paper);
}

.swal2-popup.cr-swal .swal2-html-container {
    color: var(--cr-muted);
}

/* --- accessibility ------------------------------------------------------- */

:focus-visible {
    outline: 2px solid var(--cr-taxi);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* ==========================================================================
   cabroyal.com — the public site (Constitution 7, 2026-09-05 revision)
   ==========================================================================

   One system, kept small. Paper ground, ink type, one grey for alternate
   sections and chips, and taxi yellow spent in exactly four places: the
   primary button, the hero's underline, the chequer strips, and the active
   nav mark. Nothing else is yellow, nothing is dark, nothing glows or moves
   on scroll. The admin panel keeps the dark tokens from :root; this scope
   swaps them for the site only.
*/

.cr-public {
    --cr-ink: #FFFFFF;
    --cr-ink-soft: #F4F4F1;
    --cr-paper: #111111;
    --cr-mute: #6B6B66;
    --cr-surface: #FFFFFF;
    --cr-surface-2: #F4F4F1;
    --cr-line: rgba(17, 17, 17, 0.12);
    --cr-line-soft: rgba(17, 17, 17, 0.08);
    --cr-taxi-soft: rgba(247, 209, 23, 0.22);

    /* Site-local names, so the rules below read as what they are. */
    --site-paper: #FFFFFF;
    --site-grey: #F4F4F1;
    --site-ink: #111111;
    --site-mute: #6B6B66;
    --site-line: rgba(17, 17, 17, 0.12);
    --site-max: 72rem;

    background: var(--site-paper);
    color: var(--site-ink);
    overflow-x: hidden;
}

.cr-public ::selection { background: var(--cr-taxi); color: var(--site-ink); }

.cr-public h1, .cr-public h2, .cr-public h3 { color: var(--site-ink); }
.cr-public p { color: var(--site-mute); }
.cr-public a { color: var(--site-ink); }

/* Yellow type on paper is forbidden (1.5:1). Anything tagged as accent text
   is ink here; the yellow stays where it is a fill. */
.cr-public .text-taxi { color: var(--site-ink) !important; }
.cr-public .text-muted-paper { color: var(--site-mute) !important; }

/* --- chequer: the identity, used three times ------------------------------- */

.cr-checker {
    height: 12px;
    background-color: var(--cr-taxi);
    background-image:
        linear-gradient(45deg, var(--site-ink) 25%, transparent 25%, transparent 75%, var(--site-ink) 75%),
        linear-gradient(45deg, var(--site-ink) 25%, transparent 25%, transparent 75%, var(--site-ink) 75%);
    background-size: 12px 12px;
    background-position: 0 0, 6px 6px;
}

/* --- navigation -------------------------------------------------------------- */

/* Fixed to the top of the viewport for the whole page, mounted outside the
   story's pinned stage and above it. No backdrop-filter: that would make the
   nav the containing block of the fixed offcanvas menu inside it. The layout
   script measures the real height into --cr-nav-h. */
.cr-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.96);
    border-bottom: 1px solid transparent;
    padding-block: 0.7rem;
    padding-top: calc(0.7rem + env(safe-area-inset-top, 0px));
    min-height: var(--cr-nav-h);
    z-index: 1030;
    transition: border-color 0.2s ease;
}

/* Every page starts below the header; the story alone slides under it. */
.cr-public main { padding-top: var(--cr-nav-h); }
.cr-story.is-motion { margin-top: calc(-1 * var(--cr-nav-h)); }

/* The fixed header must not cover a section heading that a link jumps to. */
.cr-public section[id] { scroll-margin-top: calc(var(--cr-nav-h) + 1rem); }

.cr-nav.is-scrolled { border-bottom-color: var(--site-line); }

.cr-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    text-decoration: none;
}

.cr-mark {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: block;
}

.cr-wordmark {
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 700;
    font-size: 1.3rem;
    color: var(--site-ink);
    letter-spacing: -0.01em;
}

.cr-nav .navbar-toggler {
    border: 0;
    color: var(--site-ink);
    font-size: 1.75rem;
    padding: 0;
    min-width: 44px;
    min-height: 44px;
    place-items: center;
}

@media (max-width: 991.98px) {
    .cr-nav .navbar-toggler { display: inline-grid; }
}

.cr-nav .navbar-toggler:focus { box-shadow: 0 0 0 3px var(--cr-taxi-soft); }

.cr-nav .nav-link {
    position: relative;
    color: var(--site-mute);
    font-weight: 500;
    font-size: 0.95rem;
    padding: 0.5rem 0.9rem;
}

.cr-nav .nav-link::after {
    content: '';
    position: absolute;
    left: 0.9rem;
    right: 0.9rem;
    bottom: 0.15rem;
    height: 3px;
    background: var(--cr-taxi);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.2s ease;
}

.cr-nav .nav-link:hover,
.cr-nav .nav-link:focus-visible { color: var(--site-ink); }

.cr-nav .nav-link:hover::after,
.cr-nav .nav-link:focus-visible::after { transform: scaleX(1); }

.cr-nav-end {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.cr-lang {
    display: inline-flex;
    gap: 0.15rem;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.04em;
}

.cr-lang a {
    padding: 0.3rem 0.5rem;
    border-radius: 8px;
    color: var(--site-mute);
    text-decoration: none;
}

.cr-lang a.is-active {
    color: var(--site-ink);
    background: var(--site-grey);
}

/* The phone menu: Bootstrap's offcanvas, which brings the focus trap, Escape
   and the backdrop; it lays out inline again from lg up. The dark theme on
   <html> would paint it ink and hide the close button — every colour is set
   here so the panel is the site's own paper. */
.cr-public .cr-offcanvas {
    --bs-offcanvas-bg: var(--site-paper);
    --bs-offcanvas-color: var(--site-ink);
    --bs-offcanvas-width: min(22rem, 88vw);
    --bs-offcanvas-border-color: var(--site-line);
}

.cr-public .btn-close {
    filter: none;
    opacity: 0.7;
    width: 44px;
    height: 44px;
    padding: 0;
    background-size: 1em;
}

.cr-public .btn-close:hover,
.cr-public .btn-close:focus-visible { opacity: 1; }

.cr-offcanvas .offcanvas-header {
    padding: calc(0.6rem + env(safe-area-inset-top, 0px)) 1.25rem 0.6rem;
    border-bottom: 1px solid var(--site-line);
}

.cr-offcanvas .offcanvas-title {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--site-mute);
}

@media (min-width: 992px) {
    .cr-nav .offcanvas-body { flex-grow: 1; align-items: center; }
}

@media (max-width: 991.98px) {
    .cr-offcanvas .offcanvas-body {
        display: flex;
        flex-direction: column;
        padding: 0.75rem 1.25rem calc(1.25rem + env(safe-area-inset-bottom, 0px));
    }
    .cr-offcanvas .navbar-nav { margin-inline: 0 !important; }
    .cr-nav .nav-link { padding: 0.7rem 0; font-size: 1.1rem; min-height: 44px; color: var(--site-ink); }
    .cr-nav .nav-link::after { left: 0; right: auto; width: 2.5rem; bottom: 0.45rem; }
    .cr-nav-end {
        flex-direction: column;
        align-items: stretch;
        gap: 0.9rem;
        margin-top: auto;
        padding-top: 1rem;
        border-top: 1px solid var(--site-line);
    }
    .cr-nav-end .btn-taxi { text-align: center; min-height: 48px; }
}

/* --- buttons and links -------------------------------------------------------- */

.cr-public .btn-taxi {
    background: var(--cr-taxi);
    border: 1px solid var(--cr-taxi);
    color: var(--site-ink);
    font-weight: 600;
    border-radius: 14px;
    padding: 0.7rem 1.35rem;
}

.cr-public .btn-taxi.btn-lg { padding: 0.9rem 1.6rem; font-size: 1.02rem; }

.cr-public .btn-taxi:hover,
.cr-public .btn-taxi:focus {
    background: var(--cr-taxi-bright);
    border-color: var(--cr-taxi-bright);
    color: var(--site-ink);
    box-shadow: 0 0 0 3px var(--cr-taxi-soft);
}

.cr-arrow-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 600;
    color: var(--site-ink);
    text-decoration: none;
    border-bottom: 2px solid var(--cr-taxi);
    padding-bottom: 0.1rem;
}

.cr-arrow-link:hover,
.cr-arrow-link:focus-visible { color: var(--site-ink); border-bottom-color: var(--site-ink); }

.cr-arrow-link i { transition: transform 0.2s ease; }
.cr-arrow-link:hover i { transform: translateX(3px); }

/* --- type -------------------------------------------------------------------- */

.cr-public h1 {
    font-size: clamp(2.6rem, 6vw, 4.4rem);
    line-height: 1.02;
    letter-spacing: -0.02em;
    margin-bottom: 1.25rem;
    text-wrap: balance;
}

.cr-public h1 em {
    font-style: italic;
    background: linear-gradient(transparent 64%, var(--cr-taxi) 64%);
    padding-inline: 0.05em;
}

.cr-public h2 {
    font-size: clamp(1.8rem, 3.6vw, 2.6rem);
    line-height: 1.1;
    margin-bottom: 0.75rem;
    text-wrap: balance;
}

.cr-public h3 { font-size: 1.15rem; margin-bottom: 0.5rem; }

.cr-lead {
    font-size: clamp(1.02rem, 1.5vw, 1.15rem);
    max-width: 34rem;
    text-wrap: pretty;
}

.cr-kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--site-ink);
    margin-bottom: 1rem;
}

.cr-kicker::before {
    content: '';
    width: 1.5rem;
    height: 4px;
    background: var(--cr-taxi);
}

.cr-fineprint {
    font-size: 0.86rem;
    text-align: center;
    margin: 2rem auto 0;
    max-width: 40rem;
}

/* Kept for the support page header. */
.cr-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--site-ink);
    padding: 0.4rem 0.9rem;
    border-radius: 999px;
    background: var(--site-grey);
}

/* --- the story ---------------------------------------------------------------
   The hero is a pinned stage: a frame sequence scrubbed by the page's own
   scroll, with the copy as HTML timed over it (js/story.js, public/story).
   Without the script, with reduced motion, or on a constrained connection,
   the same markup lays out as a plain hero — the copy, then the poster — and
   no frame is ever fetched. `is-motion` is the switch.
*/

.cr-public { --cr-nav-h: 73px; }

.cr-story { position: relative; --cr-story-travel: 0; }

/* static: copy first, the poster after it, the chequer beneath */
.cr-story-stage {
    position: relative;
    display: flex;
    flex-direction: column;
    padding-top: clamp(2.5rem, 6vw, 5rem);
}

.cr-story-art { order: 2; margin-top: 2.5rem; }

.cr-story-poster {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 28px 28px 0 0;
    background: var(--site-grey);
}

.cr-story-canvas { display: none; }

.cr-story-chapter:not([data-chapter="open"]),
.cr-story-skip,
.cr-story-cue { display: none; }

.cr-story-copy { max-width: 36rem; }

@media (min-width: 992px) {
    .cr-story:not(.is-motion) .cr-story-stage {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        align-items: center;
        column-gap: 2rem;
        max-width: var(--bs-container-max, 1320px);
        margin-inline: auto;
        padding-inline: 0.75rem;
    }
    .cr-story:not(.is-motion) .cr-story-art { order: 0; margin-top: 0; }
    .cr-story:not(.is-motion) .cr-story-chapter > .container,
    .cr-story:not(.is-motion) .cr-story-art.container { max-width: none; padding: 0; }
    .cr-story:not(.is-motion) .cr-story-poster { border-radius: 28px 28px 0 0; }
}

.cr-hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.25rem;
    margin: 1.75rem 0 1.5rem;
}

.cr-hero-note {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    font-size: 0.92rem;
    max-width: 30rem;
    margin: 0;
}

.cr-hero-note i { color: var(--site-ink); margin-top: 0.15rem; }

/* motion: the stage sticks for the length of the travel */
.cr-story.is-motion {
    height: calc((1 + var(--cr-story-travel)) * 100vh);
    height: calc((1 + var(--cr-story-travel)) * 100svh);
}

.cr-story.is-motion .cr-story-stage {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100svh;
    display: block;
    padding: 0;
    overflow: hidden;
    background: var(--site-paper);
}

.cr-story.is-motion .cr-story-art {
    position: absolute;
    inset: 0;
    margin: 0;
    padding: 0;
    max-width: none;
}

.cr-story.is-motion .cr-story-poster {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center bottom;
    border-radius: 0;
}

.cr-story.is-playing .cr-story-poster { visibility: hidden; }

.cr-story.is-motion .cr-story-canvas {
    display: block;
    position: absolute;
    inset: 0;
}

.cr-story.is-motion .cr-story-checker {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
}

/* the chapters: HTML over the stage, timed by the script */
.cr-story.is-motion .cr-story-chapter {
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    top: calc(var(--cr-nav-h) + clamp(1.5rem, 7vh, 5rem));
    bottom: calc(env(safe-area-inset-bottom, 0px) + 4.75rem);
    z-index: 3;
    pointer-events: none;
    will-change: opacity, transform;
}

.cr-story.is-motion .cr-story-chapter > .container { height: 100%; }

.cr-story.is-motion .cr-story-copy {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.cr-story.is-motion .cr-story-chapter a,
.cr-story.is-motion .cr-story-chapter button { pointer-events: auto; }

/* Off means off: not painted, not clickable, not in the tab order. */
.cr-story-chapter.is-off,
.cr-story-cue.is-off,
.cr-story-skip.is-off { visibility: hidden; }

.cr-story.is-motion .cr-story-chapter h2 {
    font-size: clamp(1.7rem, 3.2vw, 2.4rem);
}

.cr-story-steps {
    list-style: none;
    margin: 1rem 0 0;
    padding: 0;
    display: grid;
    gap: 0.5rem;
}

.cr-story-steps li {
    display: flex;
    gap: 0.8rem;
    align-items: flex-start;
    padding: 0.55rem 0.8rem;
    border-radius: 16px;
    transition: background 0.25s ease;
}

.cr-story-steps li.is-active { background: var(--site-grey); }

.cr-story-steps .cr-step-number {
    width: 36px;
    height: 36px;
    font-size: 1rem;
    margin: 0;
    flex: 0 0 auto;
    background: var(--site-grey);
    color: var(--site-ink);
    transition: background 0.25s ease, color 0.25s ease;
}

.cr-story-steps li.is-active .cr-step-number {
    background: var(--site-ink);
    color: var(--cr-taxi);
}

.cr-story-steps h3 { font-size: 1rem; margin: 0.2rem 0 0.1rem; }
.cr-story-steps p { margin: 0; font-size: 0.88rem; line-height: 1.45; }

.cr-story-ways {
    list-style: none;
    padding: 0;
    margin: 0.25rem 0 0.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.cr-story-ways li {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.45rem 0.85rem;
    border-radius: 999px;
    background: var(--site-grey);
    color: var(--site-ink);
    font-weight: 600;
    font-size: 0.92rem;
}

.cr-story-ways i { color: var(--site-ink); }

/* skip and the scroll cue, along the bottom edge above the chequer */
.cr-story.is-motion .cr-story-skip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    position: absolute;
    right: 1rem;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 1.6rem);
    z-index: 4;
    min-height: 44px;
    padding: 0.5rem 0.95rem;
    border-radius: 999px;
    border: 1px solid var(--site-line);
    background: rgba(255, 255, 255, 0.9);
    color: var(--site-ink);
    font-size: 0.86rem;
    font-weight: 600;
    text-decoration: none;
}

.cr-story.is-motion .cr-story-skip:hover,
.cr-story.is-motion .cr-story-skip:focus-visible { border-color: var(--site-ink); }

.cr-story.is-motion .cr-story-cue {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.1rem;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: calc(env(safe-area-inset-bottom, 0px) + 1.6rem);
    z-index: 4;
    color: var(--site-mute);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    transition: opacity 0.3s ease;
}

.cr-story.is-motion .cr-story-cue i {
    font-size: 1.1rem;
    color: var(--site-ink);
    animation: cr-cue 1.6s ease-in-out infinite;
}

@keyframes cr-cue {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(5px); }
}

/* phones: one headline, one action; the rest of each chapter sits at the
   bottom, below the taxi, where the portrait frames leave room for it */
@media (max-width: 767.98px), ((orientation: portrait) and (max-width: 991.98px)) {
    .cr-story.is-motion .cr-story-chapter { top: calc(var(--cr-nav-h) + 1rem); }
    .cr-story.is-motion h1 { font-size: clamp(2rem, 9vw, 2.7rem); }
    .cr-story.is-motion .cr-story-chapter h2 { font-size: clamp(1.5rem, 6.5vw, 2rem); }
    .cr-story.is-motion [data-chapter="open"] .cr-lead,
    .cr-story.is-motion [data-chapter="open"] .cr-hero-note,
    .cr-story.is-motion [data-chapter="open"] .cr-arrow-link { display: none; }
    .cr-story.is-motion .cr-hero-actions { margin: 1rem 0 0; }
    .cr-story.is-motion .cr-story-steps {
        margin-top: auto;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.4rem;
    }
    .cr-story.is-motion .cr-story-steps li { flex-direction: column; gap: 0.4rem; padding: 0.6rem; }
    .cr-story.is-motion .cr-story-steps p { display: none; }
    .cr-story.is-motion .cr-story-steps h3 { font-size: 0.86rem; margin: 0; }
    .cr-story.is-motion [data-chapter="arrive"] .cr-hero-actions { margin-top: auto; }
    .cr-story.is-motion [data-chapter="arrive"] .cr-arrow-link { display: none; }
    .cr-story.is-motion .cr-story-ways li { font-size: 0.82rem; padding: 0.35rem 0.7rem; }
    .cr-story.is-motion .cr-story-cue { display: none; }
}

/* short landscape viewports: keep the headline clear of the taxi */
@media (max-height: 700px) and (orientation: landscape) {
    .cr-story.is-motion .cr-story-chapter { top: calc(var(--cr-nav-h) + 1rem); }
    .cr-story.is-motion h1 { font-size: clamp(1.8rem, 5.5vh, 2.6rem); margin-bottom: 0.75rem; }
    .cr-story.is-motion .cr-story-chapter h2 { font-size: clamp(1.4rem, 4vh, 2rem); }
    .cr-story.is-motion .cr-lead,
    .cr-story.is-motion .cr-hero-note,
    .cr-story.is-motion .cr-story-steps p { display: none; }
    .cr-story.is-motion .cr-hero-actions { margin: 0.75rem 0 0; }
    .cr-story.is-motion .cr-story-copy { max-width: 44rem; }
    .cr-story.is-motion .cr-story-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.4rem; }
    .cr-story.is-motion .cr-story-steps li { padding: 0.45rem 0.6rem; }
    .cr-story.is-motion .btn-taxi.btn-lg { padding: 0.7rem 1.35rem; font-size: 1rem; }
}

/* --- sections ---------------------------------------------------------------- */

.cr-section { padding-block: clamp(3.5rem, 7vw, 6rem); }
.cr-section-alt { background: var(--site-grey); }

.cr-section-head {
    max-width: 40rem;
    margin: 0 auto 3rem;
    text-align: center;
}

.cr-section-head .cr-kicker { justify-content: center; }
.cr-section-head p { margin: 0; font-size: 1.05rem; }

/* --- cards and chips --------------------------------------------------------- */

.cr-public .cr-card {
    background: var(--site-paper);
    border: 1px solid var(--site-line);
    border-radius: 20px;
    padding: 1.75rem;
    box-shadow: none;
}

.cr-section-alt .cr-card { border-color: transparent; }

.cr-chip {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: inline-grid;
    place-items: center;
    background: var(--site-grey);
    color: var(--site-ink);
    font-size: 1.3rem;
    flex: 0 0 auto;
}

.cr-section-alt .cr-chip { background: var(--site-paper); }

.cr-way { height: 100%; }
.cr-way .cr-chip { margin-bottom: 1.1rem; }
.cr-way p { margin: 0; }

.cr-note {
    display: flex;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    border-radius: 20px;
    background: var(--site-grey);
    height: 100%;
}

.cr-note > i { font-size: 1.4rem; color: var(--site-ink); margin-top: 0.1rem; }
.cr-note h3 { font-size: 1.05rem; }
.cr-note p { margin: 0; font-size: 0.95rem; }

/* --- steps ------------------------------------------------------------------- */

.cr-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 2rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 767.98px) { .cr-steps { grid-template-columns: 1fr; } }

.cr-step {
    background: var(--site-paper);
    border-radius: 20px;
    padding: 1.75rem;
}

.cr-step-number {
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--site-ink);
    color: var(--cr-taxi);
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 700;
    font-size: 1.25rem;
    margin-bottom: 1.1rem;
}

.cr-step p { margin: 0; }

/* --- classes ----------------------------------------------------------------- */

.cr-class {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    background: var(--site-paper);
    border-radius: 20px;
    padding: 1.5rem;
    height: 100%;
}

.cr-class p { margin: 0; font-size: 0.95rem; }

/* --- drivers ----------------------------------------------------------------- */

.cr-check-list {
    list-style: none;
    padding: 0;
    margin: 1.5rem 0 2rem;
}

.cr-check-list li {
    display: flex;
    gap: 0.8rem;
    align-items: flex-start;
    padding-block: 0.6rem;
    border-bottom: 1px solid var(--site-line);
    color: var(--site-ink);
}

.cr-check-list li:last-child { border-bottom: 0; }

.cr-check-list i {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: inline-grid;
    place-items: center;
    background: var(--cr-taxi);
    color: var(--site-ink);
    font-size: 0.9rem;
    margin-top: 0.05rem;
}

.cr-docs { background: var(--site-grey); border-color: transparent; }
.cr-docs h3 { font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 1rem; }
.cr-docs ul { list-style: none; margin: 0; padding: 0; }
.cr-docs li {
    display: flex;
    gap: 0.8rem;
    align-items: center;
    padding-block: 0.7rem;
    border-bottom: 1px solid var(--site-line);
    color: var(--site-ink);
}
.cr-docs li:last-child { border-bottom: 0; }
.cr-docs i { color: var(--site-ink); }

/* --- download ---------------------------------------------------------------- */

.cr-app { height: 100%; }

.cr-app-head {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.cr-app-icon { width: 64px; height: 64px; border-radius: 16px; display: block; }

.cr-app-tag {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--site-mute);
}

.cr-app h3 { margin: 0; font-size: 1.35rem; }
.cr-app p { min-height: 3rem; }

.cr-app-stores { display: flex; flex-wrap: wrap; gap: 0.6rem; }

.cr-public .cr-store {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.55rem 1rem;
    border-radius: 12px;
    border: 1px solid var(--site-ink);
    background: var(--site-ink);
    color: var(--site-paper);
    text-decoration: none;
    line-height: 1.15;
}

.cr-store i { font-size: 1.4rem; }
.cr-store small { display: block; font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.75; }
.cr-store strong { font-size: 0.95rem; }

.cr-public a.cr-store:hover,
.cr-public a.cr-store:focus-visible { background: var(--cr-taxi); border-color: var(--cr-taxi); color: var(--site-ink); }

/* Google Play until the listing exists: present, honest, not clickable. */
.cr-public .cr-store.is-soon {
    background: transparent;
    border-color: var(--site-line);
    color: var(--site-mute);
    cursor: default;
}

/* --- faq --------------------------------------------------------------------- */

.cr-faq .accordion-item {
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--site-line);
    border-radius: 0;
}

.cr-faq .accordion-button {
    background: transparent;
    color: var(--site-ink);
    font-weight: 600;
    padding: 1.1rem 0;
    box-shadow: none;
}

.cr-faq .accordion-button:not(.collapsed) { color: var(--site-ink); }
.cr-faq .accordion-button:focus { box-shadow: none; }
.cr-faq .accordion-button::after { filter: grayscale(1) brightness(0); }
.cr-faq .accordion-body { padding: 0 0 1.25rem; color: var(--site-mute); line-height: 1.7; }

/* --- forms ------------------------------------------------------------------- */

.cr-form { padding: 2rem; }

.cr-public .form-label { color: var(--site-ink); font-weight: 500; font-size: 0.92rem; }

.cr-public .form-control,
.cr-public .form-select {
    background: var(--site-paper);
    color: var(--site-ink);
    border: 1px solid var(--site-line);
    border-radius: 12px;
    padding: 0.75rem 0.95rem;
}

.cr-public .form-control::placeholder { color: var(--site-mute); }

.cr-public .form-control:focus,
.cr-public .form-select:focus {
    background: var(--site-paper);
    color: var(--site-ink);
    border-color: var(--site-ink);
    box-shadow: 0 0 0 3px var(--cr-taxi-soft);
}

/* --- footer ------------------------------------------------------------------ */

.cr-footer { background: var(--site-grey); padding-bottom: 2rem; }
.cr-footer > .container { padding-top: 3.5rem; }
.cr-footer h2 { font-family: 'Inter', system-ui, sans-serif; font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 1rem; }
.cr-footer-tagline { margin: 1rem 0 0.75rem; color: var(--site-ink); }
.cr-footer-note { font-size: 0.86rem; max-width: 28rem; margin: 0; }
.cr-footer-brand { font-size: 0.86rem; margin: 0.75rem 0 0; color: var(--site-ink); font-weight: 500; }
.cr-footer-links { list-style: none; padding: 0; margin: 0; }
.cr-footer-links a { color: var(--site-mute); text-decoration: none; display: inline-block; padding-block: 0.3rem; }
.cr-footer-links a:hover,
.cr-footer-links a:focus-visible { color: var(--site-ink); }
.cr-footer-bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: 2.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--site-line);
    font-size: 0.86rem;
    color: var(--site-mute);
}

/* --- legal and support pages -------------------------------------------------- */

.cr-legal { max-width: 46rem; }
.cr-legal h2 { font-size: 1.35rem; margin-top: 2.4rem; margin-bottom: 0.8rem; }
.cr-legal p, .cr-legal li { color: var(--site-mute); line-height: 1.75; }
.cr-legal ul { padding-left: 1.1rem; }
.cr-legal li { margin-bottom: 0.5rem; }

/* Reduced motion: js/story.js never starts, so the story stays the static
   hero above, and the scroll cue's bounce is stopped by the global rule. */

/* --- checkboxes, radios and switches ------------------------------------- */

/*
 * Bootstrap compiles its blue into the checked state rather than reading
 * --bs-primary, so setting that variable leaves switches and checkboxes blue
 * on a gold panel. These are the four rules that actually change it.
 */
.form-check-input {
    background-color: var(--cr-surface-2);
    border-color: var(--cr-line-soft);
}

.form-check-input:checked {
    background-color: var(--cr-taxi);
    border-color: var(--cr-taxi);
}

.form-check-input:focus {
    border-color: var(--cr-taxi);
    box-shadow: 0 0 0 3px var(--cr-taxi-soft);
}

/* The knob is a background image whose colour is baked in, so the unchecked
   one has to be redrawn to be visible on a dark ground. */
.form-switch .form-check-input {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%28245,241,232,0.45%29'/%3e%3c/svg%3e");
}

.form-switch .form-check-input:checked {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23111111'/%3e%3c/svg%3e");
}

/* A field that just saved, in the inline tariff table. */
.form-control.is-valid {
    border-color: var(--cr-taxi);
    background-image: none;
}

/* --- form validation --------------------------------------------------------- */

.cr-public .form-control.is-invalid,
.cr-public .form-select.is-invalid {
    border-color: var(--cr-danger);
    background-image: none;
}

.cr-public .form-control.is-invalid:focus,
.cr-public .form-select.is-invalid:focus {
    border-color: var(--cr-danger);
    box-shadow: 0 0 0 3px rgba(214, 59, 47, 0.15);
}

.cr-public .invalid-feedback {
    display: block;
    color: var(--cr-danger);
    font-size: 0.84rem;
    margin-top: 0.35rem;
}

.cr-public .form-control.is-valid,
.cr-public .form-select.is-valid {
    border-color: var(--cr-success);
    background-image: none;
}

.cr-form-count {
    font-size: 0.8rem;
    color: var(--site-mute);
    text-align: right;
    margin-top: 0.3rem;
}