/*
 * TukHop: the public website.
 *
 * One stylesheet with no build step, so the pages work wherever the
 * application is deployed. The values follow docs/TukHop Site.html. Phone
 * first; the layout widens at 768px, and the facts row of a route goes to
 * one line at 1080px.
 *
 * Nothing here is set from the page: the pages send a policy that refuses
 * inline styles, so anything that varies (a bar's length, a marker's place)
 * is an SVG attribute, not a style.
 */

/* ---------------------------------------------------------------- Fonts */

@font-face {
    font-family: "Bricolage Grotesque";
    font-style: normal;
    font-weight: 600 800;
    font-stretch: 100%;
    font-display: swap;
    src: url("fonts/bricolage-grotesque-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Bricolage Grotesque";
    font-style: normal;
    font-weight: 600 800;
    font-stretch: 100%;
    font-display: swap;
    src: url("fonts/bricolage-grotesque-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: Figtree;
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url("fonts/figtree-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: Figtree;
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url("fonts/figtree-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: Figtree;
    font-style: italic;
    font-weight: 400 500;
    font-display: swap;
    src: url("fonts/figtree-italic-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: Figtree;
    font-style: italic;
    font-weight: 400 500;
    font-display: swap;
    src: url("fonts/figtree-italic-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --------------------------------------------------------------- Tokens */

:root {
    --ink: #101828;
    --ink-2: #344054;
    --muted: #475467;
    --faint: #7D8799;
    --navy: #183349;
    --navy-2: #42586A;
    --deep: #122637;
    --on-navy: #CCD2D7;
    --gold: #F8895F;
    --gold-2: #F99E7C;
    --green: #087443;
    --green-2: #1E6B48;
    --teal: #0B6273;
    --amber: #B54708;
    --red: #B42318;
    --line: #DDE2EA;
    --line-2: #E4E7EC;
    --line-3: #D0D5DD;
    --tint-green: #E5F1E8;
    --tint-teal: #E0F0F2;
    --tint-gold: #FCF1D6;
    --tint-blue: #EAF0FB;

    --display: "Bricolage Grotesque", system-ui, sans-serif;
    --text: Figtree, system-ui, sans-serif;

    /* The page's side margin, a panel's inset from the edge, its corners,
       and the space above and below a section. */
    --gutter: clamp(20px, 5vw, 64px);
    --inset: clamp(8px, 1.2vw, 16px);
    --round: clamp(22px, 2.6vw, 36px);
    --band: clamp(56px, 8vw, 112px);

    --navy-fill: linear-gradient(135deg, var(--navy-2) 0%, var(--deep) 100%);
    --navy-shadow: 0 30px 60px -28px rgba(15, 36, 99, .55);
    --card-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 18px 40px -20px rgba(16, 24, 40, .25);
}

/* ----------------------------------------------------------------- Base */

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

html {
    scroll-behavior: smooth;
    /* A heading jumped to must clear the header that stays put. */
    scroll-padding-top: 88px;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background: #fff;
    color: var(--ink);
    font: 400 17px/1.6 var(--text);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, figure, ul, ol, dl, dd {
    margin: 0;
}

ul[role="list"],
ol[role="list"] {
    padding: 0;
    list-style: none;
}

img,
svg {
    max-width: 100%;
}

a {
    color: var(--navy);
}

a:hover {
    color: var(--ink);
}

:focus:not(:focus-visible) {
    outline: none;
}

:focus-visible {
    outline: 3px solid var(--navy);
    outline-offset: 3px;
}

.on-dark :focus-visible {
    outline-color: var(--gold);
}

details > summary {
    list-style: none;
    cursor: pointer;
}

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

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

/* Hidden means hidden, whatever a rule further down says about display. */
[hidden] {
    display: none !important;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.skip {
    position: absolute;
    left: 12px;
    top: -80px;
    z-index: 50;
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 0 18px;
    border-radius: 999px;
    background: var(--ink);
    color: #fff;
    font: 700 16px var(--text);
    text-decoration: none;
}

.skip:focus {
    top: 12px;
    outline: 3px solid var(--gold);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    * {
        transition: none !important;
        scroll-behavior: auto !important;
    }
}

/* One page fades into the next, with the header staying where it is, so
   moving between the site's pages feels like moving between the app's tabs.
   A browser without view transitions just loads the next page as before. */
@view-transition {
    navigation: auto;
}

.site-header {
    view-transition-name: site-header;
}

::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: .22s;
}

@media (prefers-reduced-motion: reduce) {
    ::view-transition-group(*),
    ::view-transition-old(*),
    ::view-transition-new(*) {
        animation: none !important;
    }
}

/* ----------------------------------------------------------------- Type */

.h1 {
    font: 700 clamp(42px, 6.8vw, 92px)/.95 var(--display);
    letter-spacing: -.022em;
    text-wrap: balance;
}

.h2 {
    max-width: 18ch;
    margin-bottom: 16px;
    font: 700 clamp(32px, 4.8vw, 58px)/1 var(--display);
    letter-spacing: -.025em;
    text-wrap: balance;
}

.h3 {
    font: 700 22px/1.2 var(--display);
}

.lede {
    max-width: 46ch;
    color: var(--ink-2);
    font: 400 clamp(17px, 1.5vw, 19px)/1.6 var(--text);
    text-wrap: pretty;
}

/* Small capitals: the label over a list, a fact, a form. */
.label {
    font: 700 13px/1.2 var(--text);
    letter-spacing: .08em;
    text-transform: uppercase;
}

.label--muted {
    color: var(--muted);
}

.label--navy {
    color: var(--navy);
}

.label--green {
    color: var(--green);
}

.small {
    color: var(--muted);
    font: 400 15px/1.5 var(--text);
}

/* The label over a section of the home page, with its square. */
.kicker {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    color: var(--navy);
    font: 700 14px/1 var(--text);
    letter-spacing: .08em;
    text-transform: uppercase;
}

.kicker__mark {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 10px;
    background: currentColor;
}

.kicker__mark svg {
    color: #fff;
}

.kicker--green {
    color: var(--green-2);
}

.kicker--teal {
    color: var(--teal);
}

.kicker--done {
    margin-bottom: 14px;
    color: var(--green);
    font: 700 13px/1.2 var(--text);
}

.kicker--done svg {
    flex: none;
    margin-top: 2px;
}

/* ------------------------------------------------------------- Sections */

/* A section on the page's own white. */
.band {
    margin: 0 var(--gutter);
    padding: var(--band) 0;
}

.band--ruled {
    border-top: 1px solid var(--line);
}

/* A section on a tinted, rounded ground of its own. */
.panel {
    margin: 0 var(--inset) var(--inset);
    padding: var(--band) var(--gutter);
    border-radius: var(--round);
}

.panel--green {
    background: var(--tint-green);
}

.panel--teal {
    background: var(--tint-teal);
}

.panel--gold {
    background: var(--tint-gold);
}

.panel--blue {
    background: var(--tint-blue);
}

/* A page that is words: support, the legal pages, deleting an account. */
.page {
    padding: clamp(32px, 5vw, 72px) var(--gutter) var(--band);
}

.page__inner {
    max-width: 860px;
}

/* A page that is one thing to say stands further from the header and the footer. */
.page--message {
    padding: clamp(56px, 10vw, 140px) var(--gutter);
}

.page__inner--wide {
    max-width: 960px;
}

/* A list ruled off above and between: routes, prices, questions. */
.rows {
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--ink);
    list-style: none;
}

.rows > li,
.rows > details {
    border-bottom: 1px solid var(--line);
}

/* A white card on a tinted panel. */
.card {
    border: 1px solid var(--line-2);
    border-radius: 14px;
    background: #fff;
    box-shadow: var(--card-shadow);
}

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

.button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    min-height: 58px;
    padding: 0 20px;
    border: 0;
    border-radius: 999px;
    background: var(--gold);
    color: var(--ink);
    font: 700 19px var(--text);
    text-decoration: none;
    cursor: pointer;
}

.button:hover {
    background: var(--gold-2);
    color: var(--ink);
}

.button--danger,
.button--quiet {
    flex: 1 1 220px;
    width: auto;
    max-width: 320px;
    min-height: 56px;
    padding: 0 24px;
    font-size: 18px;
}

.button--danger {
    background: var(--red);
    color: #fff;
}

.button--danger:hover {
    background: #912018;
    color: #fff;
}

.button--quiet {
    border: 1.5px solid var(--line-3);
    background: #fff;
}

.button--quiet:hover {
    background: #F1F3F6;
}

.button--fit {
    flex: 0 1 340px;
    width: auto;
    max-width: 340px;
}

/* A link that is a step on, set as words with an arrow. */
.text-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    color: var(--navy);
    font: 700 17px var(--text);
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 5px;
}

.text-link:hover {
    color: var(--ink);
}

/* --------------------------------------------------------------- Header */

.site-header {
    position: sticky;
    top: 0;
    z-index: 40;
    border-bottom: 1px solid rgba(16, 24, 40, .08);
    background: rgba(255, 255, 255, .8);
    -webkit-backdrop-filter: saturate(1.8) blur(16px);
    backdrop-filter: saturate(1.8) blur(16px);
}

.site-header__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: clamp(64px, 5.6vw, 76px);
    padding: 0 var(--gutter);
}

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    color: var(--ink);
    text-decoration: none;
}

.brand svg,
.brand img {
    flex: none;
    border-radius: 22%;
}

.brand__name {
    font: 700 22px var(--display);
    letter-spacing: -.02em;
}

.site-nav {
    display: none;
    align-items: center;
    gap: 2px;
}

.site-nav__link {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 0 12px;
    color: var(--ink);
    font: 600 16px var(--text);
    text-decoration: none;
}

.site-nav__link:hover {
    color: var(--navy);
    text-decoration: underline;
    text-decoration-color: var(--gold);
    text-decoration-thickness: 3px;
    text-underline-offset: 9px;
}

.site-nav__link[aria-current] {
    color: var(--navy);
    font-weight: 800;
    text-decoration: underline;
    text-decoration-color: var(--gold);
    text-decoration-thickness: 3px;
    text-underline-offset: 9px;
}

.get-app {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    padding: 0 12px;
    border-radius: 999px;
    background: var(--gold);
    box-shadow: 0 10px 24px -10px rgba(190, 130, 20, .75);
    color: var(--ink);
    font: 700 15px var(--text);
    text-decoration: none;
    white-space: nowrap;
}

.get-app:hover {
    background: var(--gold-2);
    color: var(--ink);
}

.site-nav .get-app {
    gap: 10px;
    min-height: 46px;
    margin-left: 16px;
    padding: 0 18px 0 16px;
    font-size: 16px;
}

.site-header__phone {
    display: flex;
    align-items: center;
    gap: 8px;
}

.site-header__phone .get-app svg {
    display: none;
}

/* The phone's menu: a <details>, so it opens without script. Its panel hangs
   from the header across the whole width. */
.menu__toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    min-height: 44px;
    border: 1.5px solid var(--line-3);
    border-radius: 999px;
    background: #fff;
    color: var(--ink);
}

.menu__close,
.menu[open] .menu__open {
    display: none;
}

.menu[open] .menu__close {
    display: block;
}

.menu__panel {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    padding: 12px var(--gutter) 24px;
    border-bottom: 1px solid var(--line);
    background: #fff;
}

.menu__card {
    padding: 12px 22px 22px;
    border-radius: 26px;
    background: var(--navy-fill);
    box-shadow: var(--navy-shadow);
}

.menu__item {
    border-bottom: 1px solid rgba(255, 255, 255, .3);
}

.menu__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 64px;
    padding-top: 4px;
    color: #fff;
    font: 700 26px var(--display);
    letter-spacing: -.015em;
    text-decoration: none;
}

.menu__link:hover {
    color: var(--gold);
}

.menu__link[aria-current] {
    text-decoration: underline;
    text-decoration-color: var(--gold);
    text-decoration-thickness: 3px;
    text-underline-offset: 8px;
}

.menu__link svg {
    flex: none;
    color: var(--gold);
}

.menu__note {
    margin: 18px 0;
    color: var(--on-navy);
    font: 400 16px/1.5 var(--text);
}

@media (min-width: 768px) {
    .site-nav {
        display: flex;
    }

    .site-header__phone {
        display: none;
    }
}

/* ---------------------------------------------------------- Breadcrumbs */

.crumbs {
    padding: 8px var(--gutter) 0;
}

.crumbs ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 8px;
    margin: 0;
    padding: 0;
    color: var(--muted);
    font: 600 15px var(--text);
    list-style: none;
}

.crumbs a {
    display: flex;
    align-items: center;
    min-height: 44px;
    text-underline-offset: 4px;
}

.crumbs [aria-current] {
    color: var(--ink);
}

/* ----------------------------------------------------- Hero, on a photo */

.hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    margin: var(--inset);
    padding: clamp(56px, 9vw, 140px) 0 clamp(20px, 3.6vw, 52px);
    border-radius: var(--round);
    background: var(--deep);
}

.hero--home {
    padding-top: clamp(72px, 11vw, 170px);
}

.hero__copy {
    padding: 0 var(--gutter);
}

.hero__hello {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    margin-bottom: 20px;
    padding: 0 16px;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 999px;
    background: rgba(255, 255, 255, .16);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    color: rgba(255, 255, 255, .92);
    font: italic 500 16px var(--text);
}

.hero__title {
    max-width: 14ch;
    margin-bottom: 18px;
    color: #fff;
    font: 700 clamp(42px, 6.8vw, 92px)/.95 var(--display);
    letter-spacing: -.022em;
    text-wrap: balance;
}

.hero--home .hero__title {
    max-width: 9ch;
    margin-bottom: 20px;
    font-size: clamp(50px, 8.6vw, 116px);
    line-height: .92;
}

.hero__sub {
    max-width: 52ch;
    color: rgba(255, 255, 255, .92);
    font: 400 clamp(17px, 1.5vw, 19px)/1.6 var(--text);
    text-shadow: 0 1px 16px rgba(6, 14, 38, .35);
    text-wrap: pretty;
}

.hero--home .hero__sub {
    max-width: 36ch;
}

.hero__photos {
    position: absolute;
    inset: 0;
    z-index: -1;
}

.hero__photo {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
}

/* The home page's two: where the picker starts, and where it ends. */
.hero__photo--half {
    width: 50%;
}

.hero__photo--half + .hero__photo--half {
    left: 50%;
    border-left: 3px solid rgba(6, 14, 38, .55);
}

.hero__photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero__photo--low img {
    object-position: 50% 60%;
}

.hero__photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(6, 14, 38, .62) 0%, rgba(6, 14, 38, .18) 32%, rgba(6, 14, 38, .22) 55%, rgba(6, 14, 38, .86) 100%);
    pointer-events: none;
}

.hero__place {
    position: absolute;
    top: clamp(14px, 2vw, 24px);
    left: clamp(12px, 2vw, 24px);
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 34px;
    padding: 0 13px 0 10px;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 999px;
    background: rgba(6, 14, 38, .4);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    color: #fff;
    font: 600 14px var(--text);
}

.hero__place svg {
    flex: none;
    color: var(--gold);
}

/* The two change with the picker: one fades out while the next loads. */
.hero__photo img,
.hero__name {
    transition: opacity .28s ease;
}

.hero__photo.is-changing img,
.hero__photo.is-changing .hero__name {
    opacity: 0;
}

/* A town with no photo of its own yet: the brand's navy and its sun, and on
   a wide screen the town's name where a photo would have said it. */
.hero__photo--plain {
    --sun: clamp(22px, 4.4vw, 62px);
    --ring: clamp(34px, 6.6vw, 94px);
    /* Where the sun stands: beside the town's name, clear of the headline. */
    --at: 86% 4.4%;

    background:
        radial-gradient(circle at var(--at), var(--gold) 0 var(--sun), rgba(232, 176, 75, 0) calc(var(--sun) + 1px)),
        repeating-radial-gradient(circle at var(--at), rgba(255, 255, 255, 0) 0 var(--ring), rgba(255, 255, 255, .1) var(--ring) calc(var(--ring) + 1.5px)),
        var(--navy-fill);
}

.hero__name {
    display: none;
}

@media (min-width: 768px) {
    .hero__photo--plain {
        --at: 84% 13%;
    }

    /* Nothing lies over the far side but the town's name, low down. */
    .hero__photo--plain[data-hero-side="to"] {
        --at: 74% 32%;
    }

    .hero__photo--plain[data-hero-side="to"] .hero__name {
        position: absolute;
        right: clamp(20px, 4vw, 56px);
        bottom: clamp(24px, 5vw, 72px);
        left: clamp(20px, 4vw, 56px);
        z-index: 1;
        display: block;
        color: #fff;
        font: 700 clamp(44px, 6.4vw, 88px)/.95 var(--display);
        letter-spacing: -.022em;
        text-align: right;
        text-wrap: balance;
    }
}

/* --------------------------------------------------------------- Picker */

.picker {
    position: relative;
    max-width: 600px;
    margin: clamp(28px, 4vw, 48px) var(--gutter) 0;
}

.picker--solid {
    max-width: 580px;
    margin: 8px 0 0;
}

.picker__card {
    padding: calc(clamp(18px, 2.4vw, 26px) + 4px);
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 26px;
    background: rgba(12, 28, 80, .72);
    -webkit-backdrop-filter: blur(20px) saturate(1.5);
    backdrop-filter: blur(20px) saturate(1.5);
    box-shadow: 0 30px 70px -24px rgba(6, 14, 38, .6);
}

.picker--solid .picker__card {
    border: 0;
    background: var(--navy-fill);
    box-shadow: var(--navy-shadow);
}

.picker__title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
    color: #fff;
    font: 700 14px/1.2 var(--text);
    letter-spacing: .08em;
    text-transform: uppercase;
}

.picker__title svg {
    flex: none;
    color: var(--gold);
}

.picker__fields {
    position: relative;
    margin-top: 14px;
}

/* A field is a box, and all of the box is its dropdown: a tap anywhere on it
   opens the list of towns. The label lies on the box and lets the tap
   through. The swap button has the column to their right. */
.picker__field {
    position: relative;
    display: block;
    margin-right: 62px;
}

.picker__field + .picker__field {
    margin-top: 10px;
}

.picker__label {
    position: absolute;
    top: 13px;
    left: 18px;
    z-index: 1;
    color: var(--on-navy);
    font: 700 12px/1.2 var(--text);
    letter-spacing: .08em;
    text-transform: uppercase;
    pointer-events: none;
}

/* Not set large. On a Mac the list a dropdown opens is the system's own,
   at the size of the box's type: at 30 px a dozen towns covered the page. */
.picker__select {
    display: block;
    width: 100%;
    height: 66px;
    padding: 25px 58px 5px 17px;
    border: 1.5px solid rgba(255, 255, 255, .36);
    border-radius: 18px;
    /* The arrow, in a round button of its own at the end of the box. */
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F8895F' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right 19px top 50% / 20px no-repeat,
        radial-gradient(circle at calc(100% - 29px) 50%, rgba(255, 255, 255, .18) 0 17px, rgba(255, 255, 255, 0) 18px),
        rgba(255, 255, 255, .09);
    -webkit-appearance: none;
    appearance: none;
    color: #fff;
    font: 700 20px var(--display);
    letter-spacing: -.01em;
    text-overflow: ellipsis;
    cursor: pointer;
    transition: background-color .2s, border-color .2s;
}

.picker__select:hover {
    border-color: rgba(255, 255, 255, .75);
    background-color: rgba(255, 255, 255, .17);
}

.picker__select:active {
    background-color: rgba(255, 255, 255, .22);
}

.picker__select:focus-visible {
    outline: 3px solid var(--gold);
    outline-offset: 2px;
}

/* When the page opens the two arrows dip twice, to say the towns can be
   changed. Not for somebody who has asked for less movement. */
@media (prefers-reduced-motion: no-preference) {
    .picker__select {
        animation: picker-dip 1.1s ease-in-out 1.2s 2;
    }

    .picker__field + .picker__field .picker__select {
        animation-delay: 1.45s;
    }
}

@keyframes picker-dip {
    0%,
    100% {
        background-position: right 19px top 50%, 0 0;
    }

    50% {
        background-position: right 19px top calc(50% + 5px), 0 0;
    }
}

.picker__select option {
    background: #fff;
    color: var(--ink);
}

/* The list a dropdown opens is the browser's own, and on Windows and Linux
   each line of it takes the type of the box it belongs to. Set at the size
   of ordinary text, so that a dozen towns do not cover the page. A Mac
   takes no notice of this: its list follows the box's own type. */
.picker__select option,
.ask__select option {
    font: 500 17px var(--text);
    letter-spacing: 0;
}

/* The dropdown the page draws in place of the browser's own list. The real
   select stays in the form, out of sight. */
.picker__native {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    opacity: 0;
    pointer-events: none;
}

.picker__field.has-dropdown.is-open {
    z-index: 5;
}

.picker__field.has-dropdown .picker__select {
    text-align: left;
}

.picker__value {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.picker__field.is-open .picker__select {
    border-color: var(--gold);
    background-color: rgba(255, 255, 255, .17);
}

.picker__list {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    left: 0;
    z-index: 6;
    max-height: min(280px, 52vh);
    margin: 0;
    padding: 6px;
    overflow-y: auto;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 24px 50px -12px rgba(6, 14, 38, .55), 0 0 0 1px rgba(12, 28, 80, .08);
    list-style: none;
    overscroll-behavior: contain;
    animation: picker-list-in .14s ease-out;
}

.picker__field.is-up .picker__list {
    top: auto;
    bottom: calc(100% + 8px);
}

.picker__list[hidden] {
    display: none;
}

.picker__list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 12px;
    color: var(--ink);
    font: 600 17px/1.2 var(--text);
    cursor: pointer;
}

.picker__list li.is-active {
    background: rgba(248, 137, 95, .16);
}

.picker__list li[aria-selected="true"] {
    font-weight: 800;
}

.picker__list li[aria-selected="true"]::after {
    content: "";
    flex: none;
    width: 18px;
    height: 18px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F8895F' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") center / contain no-repeat;
}

@keyframes picker-list-in {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .picker__list {
        animation: none;
    }
}

.picker__swap {
    position: absolute;
    top: 50%;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    margin-top: -25px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: var(--navy);
    color: #fff;
    cursor: pointer;
}

.picker__swap:hover {
    background: var(--deep);
}

.picker__near {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 14px;
    margin-top: 12px;
}

.picker__locate {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 16px 0 12px;
    border: 1.5px solid rgba(255, 255, 255, .55);
    border-radius: 999px;
    background: transparent;
    color: #fff;
    font: 700 15px var(--text);
    cursor: pointer;
}

.picker__locate:hover {
    border-color: #fff;
    background: rgba(255, 255, 255, .12);
}

.picker__locate:disabled {
    opacity: .6;
    cursor: progress;
}

.picker__locate:focus-visible {
    outline-color: #fff;
}

.picker__locate svg {
    flex: none;
    color: var(--gold);
}

/* What the picker has to say: the town it found, or where To has moved. */
.picker__found {
    margin-top: 10px;
    color: var(--on-navy);
    font: 500 15px/1.4 var(--text);
}

.picker__found:empty {
    display: none;
}

.picker__error {
    margin-top: 10px;
    color: #FFD8D3;
    font: 600 16px var(--text);
}

.picker .button {
    margin-top: 16px;
}

.picker .button:focus-visible {
    outline-color: #fff;
}

/* ---------------------------------------------------------- Price Check */

.verdict-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 48px 80px;
    margin-top: clamp(36px, 5vw, 56px);
}

.verdict {
    flex: 1 1 420px;
    min-width: 0;
}

.verdict__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
}

.verdict__amount {
    font: 700 clamp(58px, 7.4vw, 96px)/.9 var(--display);
    font-variant-numeric: tabular-nums;
    letter-spacing: -.04em;
}

.verdict__chip {
    padding: 10px 12px 8px;
    border-radius: 8px;
    background: var(--green);
    color: #fff;
    font: 700 14px/1.2 var(--text);
    letter-spacing: .08em;
    text-transform: uppercase;
}

.verdict__about {
    max-width: 40ch;
    margin: 14px 0 26px;
    color: var(--ink-2);
    font: 400 17px/1.6 var(--text);
}

/* Fair, a bit high, too high: three equal lengths, and where the price sits. */
.bands__marker {
    display: block;
    width: 100%;
    height: 16px;
    overflow: visible;
    fill: var(--ink);
}

.bands__bar,
.bands__key {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 4px;
}

.bands__bar {
    height: 20px;
}

.bands__bar span:nth-child(1) {
    background: var(--green);
}

.bands__bar span:nth-child(2) {
    background: var(--amber);
}

.bands__bar span:nth-child(3) {
    background: var(--red);
}

.bands__key {
    margin-top: 10px;
    color: var(--ink-2);
    font: 400 15px/1.35 var(--text);
    font-variant-numeric: tabular-nums;
}

.bands__key strong {
    display: block;
    font: 700 14px var(--text);
    letter-spacing: .04em;
    text-transform: uppercase;
}

.bands__key span:nth-child(1) strong {
    color: var(--green);
}

.bands__key span:nth-child(2) strong {
    color: var(--amber);
}

.bands__key span:nth-child(3) strong {
    color: var(--red);
}

.taps {
    flex: 1 1 340px;
    min-width: 0;
}

.taps .h3 {
    margin-bottom: 6px;
}

/* A numbered-off list without the numbers: an arrow, a line, a sentence. */
.points > li {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 0 12px;
    padding: 14px 0;
}

.points svg {
    color: var(--navy);
}

.points__done svg {
    margin-top: 2px;
    color: var(--green);
}

.points__title {
    display: block;
    font: 700 18px/1.25 var(--text);
}

.points__text {
    display: block;
    margin-top: 3px;
    color: var(--ink-2);
    font: 400 16px/1.5 var(--text);
}

.prices {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
    column-gap: 56px;
    font-variant-numeric: tabular-nums;
}

.prices > li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 0;
}

.prices__name {
    display: block;
    font: 700 18px/1.25 var(--text);
}

.prices .small {
    display: block;
}

.prices__range {
    color: var(--green);
    font: 700 18px var(--text);
    white-space: nowrap;
}

.prices-note {
    margin-top: 12px;
}

/* The fair range, and what it usually costs under it. */
.prices__figures {
    display: flex;
    flex: none;
    flex-direction: column;
    align-items: flex-end;
}

/* ------------------------------------------ Know the price before you go */

/* Prices in three kinds, each behind a tab. The tabs are radio buttons:
   the one that is checked shows its panel. */
.tool {
    margin-top: clamp(28px, 4vw, 44px);
    padding: clamp(16px, 2.4vw, 28px);
    border: 1px solid var(--line-2);
    border-radius: clamp(18px, 2vw, 26px);
    background: #fff;
    box-shadow: var(--card-shadow);
}

.tool__tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding-bottom: clamp(16px, 2vw, 22px);
    border-bottom: 1px solid var(--line);
}

.tool__tab {
    display: flex;
    align-items: center;
    min-height: 46px;
    padding: 0 20px;
    border: 1.5px solid var(--line-3);
    border-radius: 999px;
    color: var(--ink-2);
    font: 700 16px var(--text);
    cursor: pointer;
    transition: background-color .2s, border-color .2s, color .2s;
}

.tool__tab:hover {
    border-color: var(--navy);
    color: var(--navy);
}

.tool__pick:nth-of-type(1):checked ~ .tool__tabs .tool__tab:nth-child(1),
.tool__pick:nth-of-type(2):checked ~ .tool__tabs .tool__tab:nth-child(2),
.tool__pick:nth-of-type(3):checked ~ .tool__tabs .tool__tab:nth-child(3) {
    border-color: var(--navy);
    background: var(--navy);
    color: #fff;
}

.tool__pick:nth-of-type(1):focus-visible ~ .tool__tabs .tool__tab:nth-child(1),
.tool__pick:nth-of-type(2):focus-visible ~ .tool__tabs .tool__tab:nth-child(2),
.tool__pick:nth-of-type(3):focus-visible ~ .tool__tabs .tool__tab:nth-child(3) {
    outline: 3px solid var(--navy);
    outline-offset: 3px;
}

.tool__panel {
    display: none;
    padding-top: clamp(18px, 2.2vw, 24px);
}

.tool__pick:nth-of-type(1):checked ~ .tool__panels .tool__panel:nth-child(1),
.tool__pick:nth-of-type(2):checked ~ .tool__panels .tool__panel:nth-child(2),
.tool__pick:nth-of-type(3):checked ~ .tool__panels .tool__panel:nth-child(3) {
    display: block;
}

.tool .prices {
    margin-top: 20px;
}

/* What is asked: the fields in a row, and under one another on a phone. */
.ask {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 14px;
}

.ask__field {
    display: block;
    /* On a phone, no wider than leaves the swap button room beside From. */
    flex: 1 1 min(220px, 100% - 72px);
    min-width: 0;
}

.ask__field--narrow {
    flex: 1 1 180px;
    max-width: 240px;
}

.ask__field--town {
    flex: 1 1 240px;
    max-width: 360px;
}

.ask__label {
    display: block;
    margin-bottom: 7px;
    color: var(--muted);
    font: 700 13px/1.2 var(--text);
    letter-spacing: .08em;
    text-transform: uppercase;
}

.ask__select {
    display: block;
    width: 100%;
    height: 56px;
    padding: 0 48px 0 16px;
    border: 1.5px solid var(--line-3);
    border-radius: 14px;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23183349' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right 16px top 50% / 18px no-repeat;
    -webkit-appearance: none;
    appearance: none;
    color: var(--ink);
    font: 700 18px var(--text);
    text-overflow: ellipsis;
    cursor: pointer;
    transition: border-color .2s;
}

.ask__select:hover {
    border-color: var(--navy);
}

.ask__select:focus-visible {
    outline: 3px solid var(--navy);
    outline-offset: 2px;
}

.ask__swap {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border: 1.5px solid var(--line-3);
    border-radius: 50%;
    background: #fff;
    color: var(--navy);
    cursor: pointer;
    transition: background-color .2s, border-color .2s;
}

.ask__swap:hover {
    border-color: var(--navy);
    background: var(--tint-blue);
}

.ask__go {
    flex: none;
    width: auto;
    max-width: none;
}

/* What the ride costs: by tuk-tuk, shared, and the whole car. Side by side
   with room, and where a row is one card short the last card takes the row. */
.fare-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 20px;
}

.fare-card {
    display: flex;
    flex: 1 1 min(100%, 280px);
    flex-direction: column;
    min-width: 0;
    padding: 20px clamp(18px, 2vw, 24px) 22px;
    border: 1px solid var(--line-2);
    border-radius: 18px;
    background: #F8FAFC;
}

.fare-card--private {
    border-color: #C9D6F2;
    background: var(--tint-blue);
}

.fare-card--none {
    border-style: dashed;
    border-color: var(--line-3);
    background: #fff;
}

/* Small enough that a range, "Rs 35,400 – 46,100", stays on a line with three cards to a row. */
.fare-card__amount {
    margin-top: 12px;
    font: 700 clamp(26px, 2.7vw, 34px)/1.1 var(--display);
    font-variant-numeric: tabular-nums;
    letter-spacing: -.025em;
}

.fare-card__unit {
    margin-top: 4px;
    color: var(--ink-2);
    font: 600 16px var(--text);
}

.fare-card__title {
    margin-top: 12px;
    font: 700 24px/1.15 var(--display);
}

.fare-card__note {
    max-width: 46ch;
    margin-top: 12px;
    color: var(--ink-2);
    font: 400 16px/1.5 var(--text);
    font-variant-numeric: tabular-nums;
}

.fare-card__group {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--line-3);
    font: 700 16px/1.4 var(--text);
    font-variant-numeric: tabular-nums;
}

.fare-about {
    max-width: 78ch;
    margin-top: 16px;
}

.fare-about strong {
    color: var(--ink);
}

.fare-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0 28px;
    margin-top: 2px;
}

/* How many each vehicle takes, over the cards. */
.fare-seats {
    margin-top: 18px;
}

.fare-seats + .fare-cards {
    margin-top: 12px;
}

/* How an estimate is made: shut until it is asked for. */
.fare-method {
    max-width: 78ch;
    margin-top: 6px;
}

.fare-method > summary {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    color: var(--navy);
    font: 700 16px var(--text);
}

.fare-method > summary .plus {
    width: 14px;
    height: 14px;
}

.fare-method > summary .plus::before {
    top: 5.5px;
}

.fare-method > summary .plus::after {
    left: 5.5px;
}

.fare-method > p {
    margin: 6px 0 10px;
    color: var(--ink-2);
    font: 400 16px/1.55 var(--text);
    font-variant-numeric: tabular-nums;
}

/* The same cards on a route's own page, under its heading. */
.ask--cost {
    margin-top: clamp(20px, 2.6vw, 28px);
}

#cost > .lede {
    max-width: 56ch;
}

/* It leads into "Shared taxi or private transfer", so one band's space parts the two. */
#cost {
    padding-bottom: 0;
}

/* ------------------------------------------------------- Plan a trip */

/* Four questions on one card, and the route they give on the other. Side
   by side with room, the route under the questions without. */
.planner {
    display: grid;
    align-items: start;
    gap: 16px;
    margin-top: clamp(28px, 4vw, 44px);
}

@media (min-width: 860px) {
    .planner {
        grid-template-columns: minmax(300px, 420px) minmax(0, 1fr);
    }
}

.planner__form,
.planner__result {
    min-width: 0;
    padding: clamp(18px, 2.4vw, 28px);
    border-radius: clamp(18px, 2vw, 26px);
}

.planner__form .small {
    margin-top: 4px;
}

/* One under another: the longest answer is not cut short, and the card
   stands as tall as the route beside it. */
.planner__fields {
    display: grid;
    gap: 14px;
    margin: 20px 0;
}

.planner__meta {
    margin-top: 10px;
    color: var(--ink-2);
    font: 600 16px/1.4 var(--text);
    font-variant-numeric: tabular-nums;
}

.planner__title {
    margin-top: 4px;
    font: 700 clamp(24px, 2.6vw, 30px)/1.15 var(--display);
    letter-spacing: -.02em;
}

.planner__terms {
    margin: 4px 0 6px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
}

/* The stops, numbered down a line. */
.outline {
    margin: 22px 0 0;
    padding: 0;
    list-style: none;
    counter-reset: stop;
}

.outline > li {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-height: 34px;
    padding: 0 0 22px 50px;
    counter-increment: stop;
}

.outline > li::before {
    content: counter(stop);
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--navy);
    color: #fff;
    font: 700 15px var(--text);
}

.outline > li:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 40px;
    bottom: 6px;
    left: 16px;
    width: 2px;
    background: var(--line-3);
}

.outline__days {
    color: var(--green-2);
    font: 700 13px/1.2 var(--text);
    letter-spacing: .08em;
    text-transform: uppercase;
}

.outline__name {
    font: 700 20px/1.2 var(--display);
}

.outline__why {
    color: var(--ink-2);
    font: 400 16px/1.5 var(--text);
}

.outline__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}

.outline__tags > span {
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--tint-green);
    color: var(--green-2);
    font: 600 13px/1.4 var(--text);
}

/* ---------------------------------------------------- A trip's stops */

.trip-card {
    margin-top: clamp(32px, 5vw, 48px);
    padding: 18px clamp(16px, 2.4vw, 28px) 22px;
}

.trip-card__head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 20px;
}

/* Down the page on a phone, along it on a wide screen. Either way a line
   runs from each stop to the next, and stops at the last. */
.stops {
    margin: 0;
    padding: 0;
    list-style: none;
}

.stop {
    position: relative;
    display: block;
    padding: 2px 0 22px 44px;
}

.stop::before {
    content: "";
    position: absolute;
    top: 26px;
    bottom: -2px;
    left: 10px;
    width: 8px;
    background: var(--navy);
}

.stop:last-child::before {
    display: none;
}

.stop::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 28px;
    height: 28px;
    border: 5px solid var(--navy);
    border-radius: 50%;
    background: #fff;
}

/* Where the journey starts and ends. */
.stop--end::after {
    background: var(--navy);
}

.stop__name {
    display: block;
    font: 700 20px/1.15 var(--display);
}

.stop__note {
    display: block;
    margin-top: 4px;
    color: var(--muted);
    font: 400 15.5px/1.5 var(--text);
    text-wrap: pretty;
}

.trip-card .stop:last-child {
    padding-bottom: 0;
}

@media (min-width: 768px) {
    .stops--along {
        display: grid;
        grid-auto-columns: minmax(0, 1fr);
        grid-auto-flow: column;
    }

    .stops--along .stop {
        padding: 48px 12px 0 0;
    }

    .stops--along .stop::before {
        top: 12px;
        right: 0;
        bottom: auto;
        left: 0;
        width: auto;
        height: 8px;
    }

    .stops--along .stop::after {
        top: 2px;
    }

    .stops--along .stop__name {
        font-size: 22px;
        line-height: 1.1;
    }

    .stops--along .stop__note {
        font-size: 15px;
        line-height: 1.4;
    }
}

.plan__vehicle {
    max-width: 560px;
    margin-top: 28px;
}

.plan__vehicle .h3 {
    margin-bottom: 8px;
}

/* ----------------------------------------- How a shared fare is shared */

.sharing {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 44px 80px;
    margin-top: clamp(32px, 5vw, 52px);
}

.sharing--how {
    margin-top: 8px;
}

.sharing__steps {
    flex: 1 1 340px;
    min-width: 0;
}

.sharing__pass {
    flex: 0 1 340px;
    min-width: 0;
}

.sharing__pass .lede {
    max-width: 30ch;
}

/* Tap 1 to 4 and the car fills. Radio buttons, so it works without script:
   which is checked decides the seats taken and the line shown. */
.share {
    flex: 1 1 440px;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.share legend {
    margin-bottom: 12px;
    padding: 0;
}

.share__steps {
    display: flex;
    gap: 8px;
}

.share__step {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border: 1.5px solid var(--line-3);
    border-radius: 999px;
    background: #fff;
    color: var(--ink);
    font: 700 22px var(--display);
    cursor: pointer;
}

.share__pick:nth-of-type(1):checked ~ .share__steps .share__step:nth-child(1),
.share__pick:nth-of-type(2):checked ~ .share__steps .share__step:nth-child(2),
.share__pick:nth-of-type(3):checked ~ .share__steps .share__step:nth-child(3),
.share__pick:nth-of-type(4):checked ~ .share__steps .share__step:nth-child(4) {
    border-color: var(--navy);
    background: var(--navy);
    color: #fff;
}

.share__pick:nth-of-type(1):focus-visible ~ .share__steps .share__step:nth-child(1),
.share__pick:nth-of-type(2):focus-visible ~ .share__steps .share__step:nth-child(2),
.share__pick:nth-of-type(3):focus-visible ~ .share__steps .share__step:nth-child(3),
.share__pick:nth-of-type(4):focus-visible ~ .share__steps .share__step:nth-child(4) {
    outline: 3px solid var(--navy);
    outline-offset: 3px;
}

.share__body {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 24px 36px;
    margin-top: 24px;
}

/* The car from above: a windscreen, the driver and one seat in front, three behind. */
.car {
    position: relative;
    flex: none;
    width: 136px;
    height: 224px;
    border: 3px solid var(--ink);
    border-radius: 54px 54px 28px 28px;
    background: #fff;
}

.car__screen {
    position: absolute;
    top: 28px;
    right: 20px;
    left: 20px;
    height: 14px;
    border: 2.5px solid var(--ink);
    border-bottom: 0;
    border-radius: 12px 12px 0 0;
}

.car__front,
.car__back {
    position: absolute;
    display: grid;
}

.car__front {
    top: 56px;
    right: 14px;
    left: 14px;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.car__back {
    top: 128px;
    right: 10px;
    left: 10px;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
}

.seat {
    height: 48px;
    border: 2.5px solid var(--faint);
    border-radius: 18px 18px 8px 8px;
    background: #fff;
}

.seat--driver {
    background: var(--line-2);
}

.share__pick:nth-of-type(1):checked ~ .share__body .seat--1,
.share__pick:nth-of-type(2):checked ~ .share__body :is(.seat--1, .seat--2),
.share__pick:nth-of-type(3):checked ~ .share__body :is(.seat--1, .seat--2, .seat--3),
.share__pick:nth-of-type(4):checked ~ .share__body :is(.seat--1, .seat--2, .seat--3, .seat--4) {
    border-color: var(--ink);
    background: var(--gold);
}

.share__states {
    flex: 1 1 200px;
    min-width: 0;
}

.share__lead {
    color: var(--ink-2);
    font: 400 17px var(--text);
}

.share__state {
    display: none;
}

.share__pick:nth-of-type(1):checked ~ .share__body .share__state:nth-of-type(1),
.share__pick:nth-of-type(2):checked ~ .share__body .share__state:nth-of-type(2),
.share__pick:nth-of-type(3):checked ~ .share__body .share__state:nth-of-type(3),
.share__pick:nth-of-type(4):checked ~ .share__body .share__state:nth-of-type(4) {
    display: block;
}

.share__words {
    margin: 4px 0 2px;
    font: 700 clamp(32px, 3.8vw, 44px)/1.05 var(--display);
    font-variant-numeric: tabular-nums;
    letter-spacing: -.02em;
}

/* The fare again, as a share of travelling alone. */
.share__said {
    margin-bottom: 14px;
    color: var(--ink-2);
    font: 600 17px var(--text);
}

.share__bar {
    display: block;
    width: 100%;
    height: 12px;
    background: var(--line-2);
    fill: var(--navy);
}

.share__about {
    margin-top: 12px;
}

.share__key {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin-top: 14px;
}

.share__key span {
    display: flex;
    align-items: center;
    gap: 6px;
}

.share__key i {
    width: 16px;
    height: 16px;
    border: 2px solid var(--faint);
    background: #fff;
}

.share__key span:nth-child(1) i {
    border-color: var(--ink);
    background: var(--gold);
}

.share__key span:nth-child(3) i {
    background: var(--line-2);
}

/* The pass a traveller shows the driver. */
.pass {
    max-width: 340px;
    margin-top: 18px;
    overflow: hidden;
    border: 2px solid var(--ink);
    border-radius: 12px;
    background: #fff;
}

.pass__head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 16px 9px;
    background: var(--navy);
    color: #fff;
}

.pass__head svg {
    flex: none;
    color: var(--gold);
}

.pass__body {
    padding: 16px 16px 14px;
    border-bottom: 2px dashed var(--faint);
}

.pass__route {
    display: block;
    font: 700 28px/1.05 var(--display);
    letter-spacing: -.02em;
}

.pass__when {
    display: block;
    margin-top: 6px;
    color: var(--ink-2);
    font: 400 16px var(--text);
}

.pass__foot {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    font: 700 16px/1.35 var(--text);
}

.pass__foot svg {
    flex: none;
}

.sharing__more {
    margin-top: 28px;
}

/* ----------------------------------------------------------------- News */

.news__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 4px 24px;
}

.news__head .text-link {
    margin-bottom: 12px;
}

.news__grid {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 28px 56px;
    margin-top: 20px;
}

.news__lead {
    flex: 2 1 440px;
    min-width: 0;
}

/* A photo that fades into the page above and below. */
.faded {
    position: relative;
    display: block;
}

.faded img {
    display: block;
    width: 100%;
    height: clamp(210px, 30vw, 380px);
    object-fit: cover;
}

.faded::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, #fff 0%, rgba(255, 255, 255, .55) 10%, rgba(255, 255, 255, 0) 22%, rgba(255, 255, 255, 0) 70%, rgba(255, 255, 255, .6) 88%, #fff 100%);
    pointer-events: none;
}

/* The photos are the news site's. One that will not load leaves no gap. */
.faded:has(.is-missing) {
    display: none;
}

.news__title {
    margin: 16px 0 6px;
    font: 700 clamp(24px, 2.6vw, 32px)/1.1 var(--display);
    letter-spacing: -.02em;
}

.news__title a {
    color: var(--ink);
    text-decoration: none;
}

.news__title a:hover {
    color: var(--navy);
    text-decoration: underline;
}

.news__list {
    flex: 1 1 280px;
    min-width: 0;
}

.news__item {
    display: block;
    padding: 16px 0;
    color: var(--ink);
    text-decoration: none;
}

.news__item:hover {
    color: var(--navy);
}

.news__item-title {
    display: block;
    font: 700 20px/1.2 var(--display);
}

.news__item .small {
    display: block;
    margin-top: 6px;
}

.news__empty {
    margin-top: 20px;
    color: var(--muted);
}

/* One sentence, said once: you only need an account to book or save. */
.note-band {
    padding-top: clamp(40px, 6vw, 72px);
    padding-bottom: clamp(40px, 6vw, 72px);
}

.note-band p {
    max-width: 30ch;
    font: italic 400 clamp(22px, 2.6vw, 30px)/1.35 var(--text);
    text-wrap: balance;
}

/* ------------------------------------------------- Continue in the app */

.app {
    padding: clamp(56px, 8vw, 104px) var(--gutter);
}

.app__card {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 28px 56px;
    overflow: hidden;
    padding: calc(clamp(22px, 4vw, 48px) + 4px);
    border-radius: 26px;
    background: var(--navy-fill);
    box-shadow: var(--navy-shadow);
}

.app__copy {
    flex: 1 1 360px;
    min-width: 0;
}

.app__title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 16px;
    margin-bottom: 16px;
    color: #fff;
    font: 700 clamp(34px, 4.8vw, 58px)/1 var(--display);
    letter-spacing: -.025em;
}

.app__title svg {
    flex: none;
    color: var(--gold);
}

.app__carry {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 22px;
    color: #fff;
    font: 700 18px/1.35 var(--text);
}

.app__carry svg {
    flex: none;
    margin-top: 3px;
    color: var(--gold);
}

.app__soon {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    color: var(--on-navy);
    font: 400 17px var(--text);
}

.app__chip {
    padding: 8px 10px 6px;
    border-radius: 10px;
    background: var(--gold);
    color: var(--ink);
}

.badges {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.badge {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 52px;
    padding: 0 16px 0 12px;
    color: #fff;
    text-decoration: none;
}

.badge--soon {
    height: 55px;
    border: 1.5px dashed rgba(255, 255, 255, .75);
    border-radius: 14px;
}

.badge--live {
    height: 54px;
    border: 1px solid rgba(255, 255, 255, .65);
    border-radius: 999px;
    background: #000;
}

.badge--live:hover {
    background: #1D2433;
    color: #fff;
}

.badge__text {
    display: flex;
    flex-direction: column;
    font-family: -apple-system, system-ui, sans-serif;
    line-height: 1.1;
}

.badge__small {
    font-size: 11px;
    font-weight: 500;
}

.badge__store {
    font-size: 18px;
    font-weight: 600;
}

/* For somebody reading on a laptop: this page, to open on their phone. */
.app__qr {
    display: none;
    align-items: center;
    gap: 18px;
    max-width: 416px;
    padding: 16px 20px 16px 16px;
    border-radius: 14px;
    background: #fff;
    color: var(--ink);
    font: 600 16px/1.45 var(--text);
}

.app__qr svg {
    flex: none;
}

.app__copy .app__qr {
    margin-top: 28px;
}

/* The phone rises from the foot of the card, as far as the card lets it. */
.app__phone {
    display: flex;
    flex: 1 1 280px;
    align-items: flex-start;
    align-self: flex-end;
    justify-content: center;
    min-width: 0;
    height: clamp(330px, 38vw, 480px);
    margin-bottom: calc((clamp(22px, 4vw, 48px) + 4px) * -1);
}

@media (min-width: 768px) {
    .app__qr {
        display: flex;
    }
}

/* ---------------------------------------------- The towns to start from */

.towns {
    padding: clamp(28px, 4vw, 52px) 0;
}

.towns__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 2px 24px;
    margin-bottom: 14px;
}

/* On a phone the cards are a row to swipe along, out to the screen's edges. */
.towns .towns__list {
    display: flex;
    gap: 10px;
    margin: 0 calc(var(--gutter) * -1);
    padding: 2px var(--gutter) 8px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scroll-padding: 0 var(--gutter);
    scrollbar-width: none;
}

.towns__list::-webkit-scrollbar {
    display: none;
}

.towns__list > li {
    flex: none;
    width: 132px;
    scroll-snap-align: start;
}

.town {
    position: relative;
    isolation: isolate;
    display: block;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    border-radius: 16px;
    background: var(--navy-fill);
    color: #fff;
    text-decoration: none;
}

.town:hover {
    color: #fff;
}

.town img {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}

.town:hover img {
    transform: scale(1.06);
}

/* The photo darkens to its foot, where the name is. */
.town::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: linear-gradient(180deg, rgba(6, 14, 38, 0) 38%, rgba(6, 14, 38, .84) 100%);
    transition: box-shadow .2s ease;
}

.town__name {
    position: absolute;
    right: 12px;
    bottom: 11px;
    left: 12px;
    font: 700 17px/1.15 var(--display);
    letter-spacing: -.01em;
    text-wrap: balance;
    /* A name with no space to wrap at ("Yala/Tissamaharama") would otherwise
       overflow the card instead of breaking, since a slash alone is not a
       wrap point under the default word-break rules. */
    overflow-wrap: break-word;
}

/* A town with no photo yet: the brand's navy and its sun. */
.town--plain {
    background: radial-gradient(circle at 76% 24%, var(--gold) 0 15px, rgba(232, 176, 75, 0) 16px), var(--navy-fill);
}

/* The town the picker is on. */
.town.is-on::after {
    box-shadow: inset 0 0 0 3px var(--gold);
}

.town.is-on::before {
    content: "";
    position: absolute;
    top: 10px;
    right: 10px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23101828' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5.5 5.5L20 7'/%3E%3C/svg%3E") center / 14px no-repeat;
}

/* With room, every town is in view at once. */
@media (min-width: 768px) {
    .towns .towns__list {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(136px, 1fr));
        gap: 12px;
        margin: 0;
        padding: 0;
        overflow: visible;
    }

    .towns__list > li {
        width: auto;
    }

    .town {
        aspect-ratio: 1 / 1.14;
    }
}

/* ---------------------------------------------------- The app, on a phone */

/* The frame. What is inside is sized from the screen's own width, so the
   picture keeps its proportions at any size. */
.phone {
    flex: none;
    width: clamp(232px, 22vw, 280px);
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: clamp(40px, 4vw, 48px);
    background: #0A0F1F;
    box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .6), inset 0 0 0 2px #1D2433;
}

.phone__screen {
    container-type: inline-size;
    /* The shape of the phone the app's screenshots are taken on. */
    aspect-ratio: 402 / 874;
    overflow: hidden;
    border-radius: clamp(31px, 3.2vw, 38px);
    /* The app's own paper. */
    background: #F7F5F0;
}

/* Everything on the screen is in ems of this, which is a share of the
   screen's width. */
.phone__ui {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    color: var(--ink);
    font: 400 11px/1.4 var(--text);
    text-align: left;
}

@supports (font-size: 1cqw) {
    .phone__ui {
        font-size: 4.8cqw;
    }
}

.phone__ui::before {
    content: "";
    position: absolute;
    top: .9em;
    left: 50%;
    z-index: 3;
    width: 7.4em;
    height: 2.1em;
    margin-left: -3.7em;
    border-radius: 999px;
    background: #0A0F1F;
}

.phone__status {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: space-between;
    height: 3.9em;
    padding: .5em 1.9em 0;
    font: 700 1em var(--text);
}

.phone__status svg {
    width: 3.1em;
    height: .92em;
}

.phone__app {
    position: relative;
    flex: 1;
    min-height: 0;
}

/* The app's floating tab bar, with its gold pill behind the tab that is open. */
.phone__tabs {
    position: absolute;
    right: .9em;
    bottom: .9em;
    left: .9em;
    z-index: 2;
    display: flex;
    gap: .2em;
    padding: .5em;
    border-radius: 1.9em;
    background: rgba(13, 16, 20, .94);
    box-shadow: 0 1em 2em -1em rgba(13, 16, 20, .7);
}

.phone__tab {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .2em;
    height: 4.9em;
    border-radius: 1.5em;
    color: rgba(255, 255, 255, .66);
    font: 600 .82em var(--text);
    transition: background-color .3s, color .3s;
}

.phone__tab svg {
    width: 1.7em;
    height: 1.7em;
}

/* The mark on the app's Prices tab: the two letters, as a picture. */
.rupees::before {
    content: "Rs";
}

.phone__rs {
    font: 700 1.5em/1.13 var(--display);
}

.phone__tab--on {
    background: var(--gold);
    color: var(--ink);
}

/* One of the app's screens. Several share a phone, and one shows. */
.screen {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    gap: .75em;
    padding: .9em 1.5em 7.4em;
    opacity: 0;
    visibility: hidden;
    transform: translateY(.7em);
    transition: opacity .35s ease, transform .35s ease, visibility 0s .35s;
}

.phone--one .screen {
    opacity: 1;
    visibility: visible;
    transform: none;
}

/* A screenshot of the app is the phone's whole screen. It brings its own
   status bar, cut-out and tabs, so it starts at the top of the screen and
   lies over the ones drawn here. */
.screen--shot {
    top: -3.9em;
    z-index: 4;
    padding: 0;
    background: #F7F5F0;
    transform: none;
}

.screen--shot picture,
.screen--shot img {
    display: block;
    width: 100%;
    height: 100%;
}

.screen--shot img {
    object-fit: cover;
    object-position: top;
}

.screen__kicker {
    color: #646C7A;
    font: italic 500 1.05em var(--text);
}

.screen__title {
    margin: -.35em 0 .15em;
    font: 700 1.95em/1.05 var(--display);
    letter-spacing: -.02em;
}

.screen__search {
    display: flex;
    align-items: center;
    gap: .6em;
    padding: .78em .9em;
    border: 1px solid #C9CFD8;
    border-radius: 1em;
    background: #fff;
    color: #7A838F;
    font-size: .96em;
}

.screen__search svg {
    flex: none;
    width: 1.15em;
    height: 1.15em;
}

.screen__rows {
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--ink);
    list-style: none;
}

.screen__rows li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .6em;
    padding: .62em 0;
    border-bottom: 1px solid #E2E7EF;
}

.screen__name {
    display: block;
    font: 700 1.05em/1.2 var(--text);
}

.screen__sub {
    display: block;
    color: #646C7A;
    font-size: .88em;
}

.screen__range {
    color: var(--green);
    font: 700 1em var(--text);
    white-space: nowrap;
}

.screen__chips {
    display: flex;
    flex-wrap: wrap;
    gap: .45em;
}

.screen__chips span {
    padding: .38em .85em;
    border-radius: 999px;
    background: var(--tint-blue);
    color: var(--navy);
    font: 600 .94em var(--text);
}

.screen__hint {
    color: #5A6472;
    font-size: .98em;
    line-height: 1.45;
}

.screen__card {
    display: flex;
    flex-direction: column;
    gap: .35em;
    padding: 1em 1.1em;
    border: 1px solid #E2E7EF;
    border-radius: 1.2em;
    background: #fff;
    box-shadow: 0 .6em 1.4em -.9em rgba(16, 24, 40, .35);
}

.screen__card--navy {
    border: 0;
    background: var(--navy-fill);
    color: var(--on-navy);
    font-size: .92em;
}

.screen__big {
    color: #fff;
    font: 700 1.9em/1.1 var(--display);
    letter-spacing: -.02em;
}

.screen__stops {
    margin: .2em 0 0 .45em;
    padding: 0;
    border-left: .22em solid var(--navy);
    list-style: none;
}

.screen__stops li {
    position: relative;
    padding: 0 0 .7em 1.15em;
}

.screen__stops li:last-child {
    padding-bottom: 0;
}

.screen__stops li::before {
    content: "";
    position: absolute;
    top: .12em;
    left: -.56em;
    width: .9em;
    height: .9em;
    border: .24em solid var(--navy);
    border-radius: 50%;
    background: #fff;
}

.screen__seats {
    display: flex;
    align-items: center;
    gap: .35em;
    margin-top: .35em;
}

.screen__seats i {
    width: 1.5em;
    height: 1.75em;
    border: .14em solid var(--faint);
    border-radius: .5em .5em .35em .35em;
    background: #fff;
}

.screen__seats i.is-taken {
    border-color: var(--ink);
    background: var(--gold);
}

.screen__seats .screen__sub {
    margin-left: .45em;
}

.screen__share {
    margin-top: .25em;
    font: 700 1.5em/1.15 var(--display);
    letter-spacing: -.02em;
}

.screen__button {
    margin-top: .55em;
    padding: .78em;
    border-radius: 999px;
    background: var(--gold);
    color: var(--ink);
    font: 700 1.05em var(--text);
    text-align: center;
}

.screen__photo {
    display: block;
    flex: none;
    overflow: hidden;
    border-radius: 1em;
}

.screen__photo img {
    display: block;
    width: 100%;
    height: 8.8em;
    object-fit: cover;
}

.screen__photo:has(.is-missing) {
    display: none;
}

.screen__story {
    padding-top: .65em;
    border-top: 1px solid #E2E7EF;
    font: 700 1em/1.25 var(--display);
}

.screen__story--lead {
    padding-top: 0;
    border-top: 0;
    font-size: 1.25em;
}

/* ------------------------------------------------ The app's four tabs */

/* On a phone: the words, a row of the four tabs, the phone, and a line about
   the tab that is picked. */
.tour {
    display: grid;
    grid-template-areas: "copy" "list" "stage" "notes" "more";
    row-gap: 22px;
}

.tour__more {
    grid-area: more;
    justify-self: center;
}

.tour__copy {
    grid-area: copy;
}

.tour__copy .lede {
    max-width: 44ch;
}

.tour__list {
    grid-area: list;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
    padding: 6px;
    border-radius: 18px;
    background: #fff;
    box-shadow: var(--card-shadow);
}

.tour__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 62px;
    border-radius: 13px;
    color: var(--ink-2);
    cursor: pointer;
    transition: background-color .25s, color .25s, box-shadow .25s;
}

.tour__glyph {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    font: 700 17px/1 var(--display);
}

.tour__tab {
    letter-spacing: .05em;
}

.tour__title,
.tour__text {
    display: none;
}

.tour__stage {
    grid-area: stage;
    display: flex;
    justify-content: center;
    padding: 10px 0 4px;
    /* The app's sun, behind the phone. */
    background: radial-gradient(closest-side, rgba(232, 176, 75, .5), rgba(232, 176, 75, 0)) center / min(100%, 560px) 86% no-repeat;
}

.tour__stage .phone {
    width: clamp(248px, 24vw, 300px);
}

/* The four lines lie one on another, so the room they take is the longest
   one's and the page below does not move as the tabs turn. */
.tour__notes {
    grid-area: notes;
    display: grid;
}

.tour__note {
    grid-area: 1 / 1;
    max-width: 44ch;
    margin: 0 auto;
    visibility: hidden;
    opacity: 0;
    color: var(--ink-2);
    font: 400 17px/1.55 var(--text);
    text-align: center;
    transition: opacity .3s ease, visibility 0s .3s;
}

.tour__note strong {
    color: var(--ink);
}

/* The tab that is picked: its row, its screen, its place on the app's own
   tab bar, and its line. */
.tour__pick:nth-of-type(1):checked ~ .tour__list .tour__item:nth-child(1),
.tour__pick:nth-of-type(2):checked ~ .tour__list .tour__item:nth-child(2),
.tour__pick:nth-of-type(3):checked ~ .tour__list .tour__item:nth-child(3),
.tour__pick:nth-of-type(4):checked ~ .tour__list .tour__item:nth-child(4) {
    background: var(--navy);
    color: #fff;
}

.tour__pick:nth-of-type(1):focus-visible ~ .tour__list .tour__item:nth-child(1),
.tour__pick:nth-of-type(2):focus-visible ~ .tour__list .tour__item:nth-child(2),
.tour__pick:nth-of-type(3):focus-visible ~ .tour__list .tour__item:nth-child(3),
.tour__pick:nth-of-type(4):focus-visible ~ .tour__list .tour__item:nth-child(4) {
    outline: 3px solid var(--navy);
    outline-offset: 3px;
}

.tour__pick:nth-of-type(1):checked ~ .tour__stage .screen:nth-child(1),
.tour__pick:nth-of-type(2):checked ~ .tour__stage .screen:nth-child(2),
.tour__pick:nth-of-type(3):checked ~ .tour__stage .screen:nth-child(3),
.tour__pick:nth-of-type(4):checked ~ .tour__stage .screen:nth-child(4) {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition-delay: 0s;
}

.tour__pick:nth-of-type(1):checked ~ .tour__stage .phone__tab:nth-child(1),
.tour__pick:nth-of-type(2):checked ~ .tour__stage .phone__tab:nth-child(2),
.tour__pick:nth-of-type(3):checked ~ .tour__stage .phone__tab:nth-child(3),
.tour__pick:nth-of-type(4):checked ~ .tour__stage .phone__tab:nth-child(4) {
    background: var(--gold);
    color: var(--ink);
}

.tour__pick:nth-of-type(1):checked ~ .tour__notes .tour__note:nth-child(1),
.tour__pick:nth-of-type(2):checked ~ .tour__notes .tour__note:nth-child(2),
.tour__pick:nth-of-type(3):checked ~ .tour__notes .tour__note:nth-child(3),
.tour__pick:nth-of-type(4):checked ~ .tour__notes .tour__note:nth-child(4) {
    visibility: visible;
    opacity: 1;
    transition-delay: 0s;
}

/* With room: the four are a list beside the phone, and the one picked opens. */
@media (min-width: 960px) {
    .tour {
        grid-template-columns: minmax(0, 1fr) minmax(300px, 460px);
        grid-template-rows: auto auto 1fr;
        grid-template-areas: "copy stage" "list stage" "more stage";
        column-gap: clamp(32px, 5vw, 88px);
        row-gap: 28px;
        align-items: start;
    }

    .tour__stage {
        align-self: center;
        padding: 16px 0;
    }

    .tour__notes {
        display: none;
    }

    .tour__more {
        justify-self: start;
    }

    .tour__list {
        display: block;
        max-width: 640px;
        padding: 0;
        border-top: 1px solid var(--ink);
        border-radius: 0;
        background: none;
        box-shadow: none;
    }

    .tour__item {
        flex-direction: row;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 16px;
        min-height: 0;
        padding: 16px 18px 16px 14px;
        border-bottom: 1px solid var(--line);
        border-left: 4px solid transparent;
        border-radius: 0;
        color: var(--ink);
    }

    .tour__item:hover {
        background: rgba(255, 255, 255, .55);
    }

    .tour__glyph {
        width: 44px;
        height: 44px;
        border-radius: 13px;
        background: #fff;
        box-shadow: inset 0 0 0 1px var(--line-3);
        color: var(--navy);
        font-size: 19px;
        transition: background-color .25s, color .25s;
    }

    .tour__tab {
        display: block;
        color: var(--muted);
    }

    .tour__title {
        display: block;
        margin-top: 3px;
        font: 700 22px/1.2 var(--display);
    }

    /* All four are said at once, so nothing below moves when one is picked. */
    .tour__text {
        display: block;
        margin-top: 5px;
        color: var(--ink-2);
        font: 400 17px/1.5 var(--text);
    }

    .tour__pick:nth-of-type(1):checked ~ .tour__list .tour__item:nth-child(1),
    .tour__pick:nth-of-type(2):checked ~ .tour__list .tour__item:nth-child(2),
    .tour__pick:nth-of-type(3):checked ~ .tour__list .tour__item:nth-child(3),
    .tour__pick:nth-of-type(4):checked ~ .tour__list .tour__item:nth-child(4) {
        border-left-color: var(--gold);
        background: #fff;
        box-shadow: var(--card-shadow);
        color: var(--ink);
    }

    .tour__pick:nth-of-type(1):checked ~ .tour__list .tour__item:nth-child(1) .tour__glyph,
    .tour__pick:nth-of-type(2):checked ~ .tour__list .tour__item:nth-child(2) .tour__glyph,
    .tour__pick:nth-of-type(3):checked ~ .tour__list .tour__item:nth-child(3) .tour__glyph,
    .tour__pick:nth-of-type(4):checked ~ .tour__list .tour__item:nth-child(4) .tour__glyph {
        background: var(--navy);
        box-shadow: none;
        color: #fff;
    }
}

/* --------------------------------------------------------------- Footer */

.site-footer {
    margin: var(--inset);
    padding: clamp(36px, 5vw, 56px) var(--gutter) 32px;
    border-radius: var(--round);
    background: var(--deep);
}

.site-footer__top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px 32px;
}

.site-footer .brand {
    color: #fff;
}

.site-footer .brand__name {
    font-size: 21px;
}

.site-footer__links {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -10px;
}

.site-footer__link {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 0 10px;
    color: #fff;
    font: 600 16px var(--text);
    text-underline-offset: 5px;
}

.site-footer__link:hover {
    color: var(--gold);
}

.site-footer__link[aria-current] {
    text-decoration-thickness: 3px;
}

.site-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 6px 24px;
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, .2);
    color: var(--on-navy);
    font: 400 15px/1.5 var(--text);
}

/* ------------------------------------------------- Rides: the hub's lists */

.routes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    align-items: start;
    gap: 44px 48px;
    margin-top: 12px;
}

.routes__group {
    min-width: 0;
}

.routes__kind {
    margin-bottom: 8px;
}

.routes__from {
    margin-bottom: 12px;
    font: 700 30px/1 var(--display);
    letter-spacing: -.02em;
}

.routes__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 56px;
    padding-top: 4px;
    color: var(--ink);
    text-decoration: none;
}

.routes__link:hover {
    color: var(--navy);
}

/* The name takes the room the facts leave, wrapping where it can, and is
   never narrower than its longest word. */
.routes__town {
    flex: 1 1 0;
    font: 700 18px/1.2 var(--text);
}

/* The facts give way only when a name's longest word needs the room: then
   what the fare buys goes onto a line of its own. */
.routes__time {
    display: flex;
    flex: 0 1 auto;
    align-items: center;
    gap: 10px;
    color: var(--ink-2);
    font: 600 16px var(--text);
    font-variant-numeric: tabular-nums;
}

.routes__time svg {
    flex: none;
    color: var(--navy);
}

/* The drive, and the least a traveller pays, one under the other. */
.routes__facts {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    padding: 6px 0;
}

.routes__fare {
    color: var(--green);
    font-weight: 700;
    text-align: right;
}

.routes__fare span {
    white-space: nowrap;
}

.routes__more > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 56px;
    border-bottom: 1px solid var(--line);
    color: var(--navy);
    font: 700 16px var(--text);
}

.routes__more .rows {
    border-top: 0;
}

/* A plus that turns to a cross when its <details> opens. */
.plus {
    position: relative;
    flex: none;
    width: 20px;
    height: 20px;
    transition: transform .2s;
}

.plus::before,
.plus::after {
    content: "";
    position: absolute;
    background: var(--navy);
}

.plus::before {
    top: 8.5px;
    right: 0;
    left: 0;
    height: 3px;
}

.plus::after {
    top: 0;
    bottom: 0;
    left: 8.5px;
    width: 3px;
}

details[open] > summary .plus {
    transform: rotate(45deg);
}

/* ------------------------------------------------------------ Questions */

.faq {
    max-width: 860px;
}

.faq__item > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 86px;
    padding: 12px 0;
}

.faq__question {
    font: 700 clamp(18px, 1.8vw, 20px)/1.25 var(--display);
    text-wrap: pretty;
}

.faq__answer {
    max-width: 62ch;
    margin-bottom: 18px;
    color: var(--ink-2);
    font: 400 17px/1.6 var(--text);
}

.faq__item .text-link {
    margin: -10px 0 14px;
}

/* ------------------------------------------------------- A route's page */

.sign-wrap {
    padding: clamp(12px, 2vw, 24px) var(--gutter) 0;
}

/* The route's name, set like the board on the front of a bus. */
.sign {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px 40px;
    padding: calc(clamp(18px, 3.4vw, 40px) + 4px);
    border-radius: 26px;
    background: var(--navy-fill);
    box-shadow: var(--navy-shadow);
    color: #fff;
}

.sign__title {
    flex: 1 1 360px;
    min-width: 0;
}

.sign__name {
    display: block;
    font: 700 clamp(42px, 6.8vw, 92px)/.95 var(--display);
    letter-spacing: -.022em;
}

.sign__kind {
    display: block;
    margin-top: 12px;
    color: var(--on-navy);
    font: 600 clamp(18px, 2.2vw, 26px)/1.2 var(--display);
}

.sign__km {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--gold);
    font: 700 clamp(44px, 5.4vw, 72px)/1 var(--display);
    font-variant-numeric: tabular-nums;
}

.sign__km small {
    font-size: .38em;
    letter-spacing: .06em;
}

.sign__km svg {
    flex: none;
}

.route-photo {
    margin-top: 8px;
}

.route-photo img {
    height: clamp(240px, 40vw, 540px);
}

/* A photo whose subject is at its head keeps it in the frame. */
.route-photo--high img {
    object-position: 50% 24%;
}

.route-photo::after {
    background: linear-gradient(to bottom, #fff 0%, rgba(255, 255, 255, .55) 10%, rgba(255, 255, 255, 0) 22%, rgba(255, 255, 255, 0) 60%, rgba(255, 255, 255, .6) 84%, #fff 100%);
}

.route-intro {
    max-width: 54ch;
    margin-top: clamp(28px, 4vw, 44px);
}

/* The facts, read like a line of a timetable: two to a row on a phone, all
   on one line when there is room. */
.facts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-top: 28px;
    border-top: 1px solid var(--ink);
    font-variant-numeric: tabular-nums;
}

.facts__item {
    padding: 12px 14px 14px 0;
    border-bottom: 1px solid var(--line);
}

.facts__item--right {
    padding-right: 0;
    padding-left: 14px;
    border-left: 1px solid var(--line);
}

.facts__item--wide {
    grid-column: span 2;
    padding-right: 0;
}

.facts dt {
    margin-bottom: 5px;
    color: var(--muted);
    font: 700 12px/1.2 var(--text);
    letter-spacing: .08em;
    text-transform: uppercase;
}

.facts dd {
    font: 700 19px/1.2 var(--text);
}

.facts dd + dd {
    margin-top: 3px;
    color: var(--muted);
    font: 400 14.5px/1.4 var(--text);
}

@media (min-width: 1080px) {
    .facts {
        grid-auto-columns: minmax(0, 1fr);
        grid-auto-flow: column;
        grid-template-columns: none;
        margin-top: clamp(28px, 4vw, 44px);
        border-bottom: 1px solid var(--line);
    }

    .facts__item,
    .facts__item--right,
    .facts__item--wide {
        grid-column: auto;
        padding: 12px 14px 16px;
        border-bottom: 0;
        border-left: 1px solid var(--line);
    }

    .facts__item:first-child {
        padding-left: 0;
        border-left: 0;
    }

    .facts dt {
        margin-bottom: 6px;
    }

    .facts dd + dd {
        margin-top: 4px;
        font-size: 14px;
    }
}

/* Share it, or keep it private: two columns that say what each means. */
.choices {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
    column-gap: 56px;
    border-top: 1px solid var(--ink);
}

.choice {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
    padding: 22px 0 26px;
}

.choice__title {
    font: 700 clamp(30px, 3.2vw, 40px)/1 var(--display);
    letter-spacing: -.025em;
}

.choice .lede {
    font-size: 17px;
}

.ticks {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0 0 8px;
    padding: 0;
    list-style: none;
}

.ticks > li {
    display: flex;
    gap: 12px;
    color: var(--ink-2);
    font: 400 17px/1.5 var(--text);
}

.ticks > li::before {
    content: "";
    flex: none;
    width: 7px;
    height: 7px;
    margin-top: 10px;
    background: var(--gold);
    outline: 1.5px solid var(--ink);
}

.ticks--large > li {
    color: var(--ink);
    font-size: 18px;
}

.ticks--large > li::before {
    margin-top: 11px;
}

/* What it costs: the amount, what it is for, and a sentence on how it moves. */
.fare {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 12px;
    font-variant-numeric: tabular-nums;
}

.fare__amount {
    font: 700 clamp(26px, 2.8vw, 34px)/1.1 var(--display);
    letter-spacing: -.02em;
}

.fare__unit {
    color: var(--ink-2);
    font: 600 17px var(--text);
}

.fare__note {
    max-width: 44ch;
    margin-top: -6px;
    color: var(--ink-2);
    font: 400 16px/1.5 var(--text);
    font-variant-numeric: tabular-nums;
}

.fare-terms {
    max-width: 62ch;
}

/* Under the fare: the way through to the app, to book it. */
.to-app {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 62px;
    margin-top: auto;
    padding: 0 16px;
    border: 2px dashed var(--faint);
    border-radius: 999px;
    color: var(--ink);
    font: 700 17px var(--text);
    text-decoration: none;
}

.to-app:hover {
    border-color: var(--navy);
    color: var(--navy);
}

/* A small navy tile with an arrow in it. */
.go {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 10px;
    background: var(--navy);
    color: #fff;
}

.go--round {
    width: 24px;
    height: 24px;
}

.go--small {
    width: 28px;
    height: 28px;
}

.to-shared {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 85px;
    margin-top: auto;
    padding: 10px 16px 8px;
    border: 1.5px solid var(--line-3);
    border-radius: 999px;
    color: var(--ink);
    text-decoration: none;
}

.to-shared:hover {
    border-color: var(--navy);
    color: var(--navy);
}

.to-shared__name {
    display: block;
    font: 700 18px/1.2 var(--text);
}

.to-shared .small {
    display: block;
    margin-top: 2px;
}

.fills .share {
    margin-top: 32px;
}

.road {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 32px 80px;
}

.road__text {
    flex: 1 1 380px;
    min-width: 0;
}

.road__text .lede {
    max-width: 48ch;
}

/* Its own 380 and its padding, so the stops get as much room as the words beside them. */
.road__way {
    flex: 1 1 422px;
    min-width: 0;
    padding: 18px 20px 4px;
}

.road__way figcaption {
    margin-bottom: 18px;
}

/* Cancelling beside the questions. */
.aside-pair {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 48px 80px;
}

.aside-pair__side {
    flex: 1 1 300px;
    min-width: 0;
    max-width: 440px;
}

.aside-pair__side p {
    margin-bottom: 4px;
    font: 400 18px/1.55 var(--text);
}

.aside-pair__side .text-link {
    margin-top: 2px;
}

.aside-pair__main {
    flex: 2 1 460px;
    min-width: 0;
}

/* Routes to go on to from where a route ends. */
.onward {
    max-width: 860px;
    font-variant-numeric: tabular-nums;
}

.onward__link {
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 96px;
    padding: 12px 0;
    color: var(--ink);
    text-decoration: none;
}

.onward__link:hover {
    color: var(--navy);
}

.onward__route {
    flex: 1;
    min-width: 0;
}

.onward__name {
    display: block;
    font: 700 21px/1.15 var(--display);
}

.onward__route .small {
    display: block;
    margin-top: 3px;
}

.onward__time {
    font: 700 18px var(--text);
    white-space: nowrap;
}

/* ---------------------------------------------------------- Legal pages */

.legal__updated {
    margin-top: 12px;
    color: var(--muted);
    font: 400 16px/1.5 var(--text);
}

.notice {
    display: flex;
    gap: 12px;
    max-width: 760px;
    margin-top: 24px;
    padding: 16px 18px;
    border-left: 6px solid var(--amber);
    background: #FDF0E1;
    color: #7A2E0E;
    font: 600 17px/1.5 var(--text);
}

.notice svg {
    flex: none;
    margin-top: 3px;
}

.notice--wide {
    display: block;
    max-width: none;
    margin: 0 0 28px;
}

.legal__short {
    max-width: 760px;
    margin: clamp(28px, 4vw, 40px) 0 clamp(36px, 5vw, 56px);
    padding-top: 14px;
    border-top: 1px solid var(--ink);
}

.legal__short .label {
    margin-bottom: 14px;
}

.legal__short .ticks {
    gap: 10px;
}

.legal__columns {
    display: flex;
    align-items: flex-start;
    gap: 72px;
}

.legal__aside {
    display: none;
    flex: 0 0 260px;
    position: sticky;
    top: 100px;
}

.legal__aside .label {
    margin-bottom: 8px;
}

.legal__body {
    flex: 1;
    min-width: 0;
    max-width: 700px;
}

.toc__link {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    color: var(--ink);
    font: 600 15.5px/1.25 var(--text);
    text-decoration: none;
}

.toc__link:hover {
    color: var(--navy);
}

.toc__number {
    min-width: 22px;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

.toc-fold {
    margin-bottom: 36px;
    border-top: 1px solid var(--ink);
}

.toc-fold > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 56px;
    border-bottom: 1px solid var(--line);
    font: 700 17px var(--text);
}

.toc-fold__count {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--muted);
    font: 600 15px var(--text);
}

.toc-fold .rows {
    border-top: 0;
}

.toc-fold .toc__link {
    min-height: 48px;
}

.legal__section {
    margin-bottom: 44px;
}

.legal__section h2 {
    display: flex;
    gap: 12px;
    margin-bottom: 14px;
    font: 700 clamp(24px, 2.4vw, 30px)/1.15 var(--display);
    letter-spacing: -.015em;
}

.legal__section h2 span {
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

.prose p,
.prose li {
    max-width: 64ch;
    color: var(--ink-2);
    font: 400 18px/1.7 var(--text);
    text-wrap: pretty;
}

.prose p,
.prose ul,
.prose ol {
    margin: 0 0 14px;
}

.prose ul,
.prose ol {
    padding-left: 22px;
}

@media (min-width: 960px) {
    .legal__aside {
        display: block;
    }

    .toc-fold {
        display: none;
    }
}

/* ------------------------------------------------- Deleting an account */

.delete__title {
    max-width: 14ch;
    margin-bottom: clamp(28px, 4vw, 44px);
}

.delete__title--tight {
    margin-bottom: 14px;
}

.delete__for {
    max-width: none;
    margin-bottom: clamp(24px, 4vw, 36px);
    overflow-wrap: anywhere;
}

.pair {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
    gap: 32px 56px;
}

.pair--ways {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
    gap: 40px 56px;
    margin-bottom: clamp(40px, 6vw, 64px);
}

.way__title {
    margin-bottom: 12px;
    font: 700 26px/1.2 var(--display);
}

.steps > li {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    padding: 14px 0;
    color: var(--ink-2);
    font: 400 17px/1.5 var(--text);
}

.steps__number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: var(--navy);
    color: #fff;
    font: 700 16px var(--text);
}

.field {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 16px;
    border-top: 1px solid var(--ink);
}

.field__label {
    font: 700 16px var(--text);
}

.field__input {
    height: 56px;
    padding: 0 16px;
    border: 2px solid var(--muted);
    border-radius: 14px;
    background: #fff;
    color: var(--ink);
    font: 400 18px var(--text);
}

.field__input[aria-invalid="true"] {
    border-color: var(--red);
}

.field__error {
    color: var(--red);
    font: 600 15px var(--text);
}

.field .button {
    margin-top: 6px;
}

.sent {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding-top: 16px;
    border-top: 3px solid var(--green);
}

.sent .way__title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 0;
}

.sent .way__title svg {
    flex: none;
    margin-top: 2px;
    color: var(--green);
}

.sent .lede {
    max-width: none;
}

.list-title {
    margin-bottom: 10px;
}

.outcome > li,
.outcome--one {
    display: flex;
    gap: 12px;
    padding: 14px 0;
    font: 400 17px/1.45 var(--text);
}

.outcome svg {
    flex: none;
    margin-top: 4px;
    color: var(--red);
}

.outcome--one {
    border-top: 1px solid var(--ink);
    border-bottom: 1px solid var(--line);
}

.delete__undone {
    max-width: none;
    margin-top: 20px;
}

.delete__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 32px;
}

.delete__actions form {
    display: flex;
    flex: 1 1 220px;
    max-width: 320px;
}

.delete__actions form .button {
    flex: 1;
    max-width: none;
}

/* ------------------------------------- A page that is one thing to say */

.message {
    max-width: 640px;
}

/* No page at this address, a form left open too long: nothing else is on the page. */
.message--plain {
    max-width: none;
}

.message--plain .lede {
    max-width: 40ch;
}

.message--done {
    padding: clamp(8px, 4vw, 40px) 0;
}

.message--form {
    max-width: 620px;
}

.message__label {
    margin-bottom: 16px;
}

.message__title {
    margin-bottom: 16px;
}

.message__title--short {
    max-width: 13ch;
    margin-bottom: 20px;
}

.message--form .message__title {
    margin-bottom: 14px;
}

.message__text {
    max-width: none;
    margin-bottom: 28px;
}

.message__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 28px;
    margin-top: 32px;
}

.message .field {
    margin-top: 28px;
}

/* -------------------------------------------------------------- Support */

.support__lede {
    margin-top: 16px;
}

.mail {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-height: 56px;
    margin: 18px 0 clamp(44px, 6vw, 64px);
    color: var(--navy);
    font: 700 clamp(20px, 2.6vw, 28px) var(--display);
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 6px;
    overflow-wrap: anywhere;
}

.mail:hover {
    color: var(--ink);
}

.mail svg {
    flex: none;
}

/* -------------------------------------------------------- A shared trip */

/* The name of the trip on the place it is about: the hero, lower than the
   home page's, with the dates and the car as chips under the name. */
.trip-hero {
    padding-top: clamp(96px, 16vw, 220px);
}

.trip-hero__kicker {
    margin-bottom: 16px;
    color: var(--gold);
}

.trip-hero .hero__title {
    max-width: 16ch;
    margin-bottom: 20px;
    font-size: clamp(38px, 6vw, 80px);
}

.trip-hero__facts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 26px;
    padding: 0;
    list-style: none;
}

.trip-hero__facts li {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 38px;
    padding: 0 15px;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 999px;
    background: rgba(255, 255, 255, .16);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    color: #fff;
    font: 600 15px var(--text);
}

.trip-hero__facts svg {
    flex: none;
    color: var(--gold);
}

/* "Save as a PDF": quiet on the photo, as the chips are. */
.trip-hero__pdf {
    width: auto;
    max-width: 240px;
    min-height: 52px;
    border: 1.5px solid rgba(255, 255, 255, .55);
    background: rgba(255, 255, 255, .12);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    color: #fff;
    font-size: 16px;
}

.trip-hero__pdf:hover {
    background: #fff;
    color: var(--ink);
}

.trip-body {
    padding-top: clamp(24px, 4vw, 56px);
}

.trip__columns {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 40px 72px;
}

.trip__route {
    flex: 1 1 300px;
    min-width: 0;
    max-width: 420px;
    padding: 18px 20px 22px;
}

/* A stop's own photo in the ring on the route, where the ring is empty
   for a town with none. */
.trip__route .stop--photo::after {
    display: none;
}

.stop__photo {
    position: absolute;
    top: -2px;
    left: -2px;
    width: 32px;
    height: 32px;
    border: 3px solid var(--navy);
    border-radius: 50%;
    object-fit: cover;
    background: var(--navy);
}

.trip__days {
    flex: 2 1 420px;
    min-width: 0;
    max-width: 720px;
}

.trip__days-title {
    margin-bottom: 14px;
    color: var(--muted);
}

/* One card a day, with the day's town in its corner. */
.plan-day {
    margin-bottom: 14px;
    padding: 16px clamp(16px, 2.2vw, 22px) 6px;
}

.plan-day__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding-bottom: 12px;
}

.plan-day__when {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 12px;
    min-width: 0;
}

.plan-day__number {
    font: 700 22px/1.2 var(--display);
}

.plan-day__date {
    color: var(--muted);
    font: 600 15px var(--text);
}

.plan-day__place {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px 3px 8px;
    border-radius: 999px;
    background: var(--tint-blue);
    color: var(--navy);
    font: 600 13.5px var(--text);
}

.plan-day__place svg {
    flex: none;
    color: var(--gold);
}

.plan-day__thumb {
    flex: none;
    width: 56px;
    height: 56px;
    border-radius: 14px;
    object-fit: cover;
    background: var(--line);
}

.plan-day__free {
    padding: 4px 0 12px;
    color: var(--muted);
}

.plan-day__lines {
    margin: 0;
    padding: 0;
    list-style: none;
}

.plan-day__line {
    display: grid;
    grid-template-columns: 36px 58px minmax(0, 1fr);
    align-items: start;
    gap: 10px;
    padding: 12px 0;
    border-top: 1px solid var(--line-2);
}

/* The sign of the kind of line: a tinted square, as the app draws them. */
.plan-day__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 11px;
    background: var(--tint-blue);
    color: var(--navy);
}

.plan-day__line--stay .plan-day__icon {
    background: var(--tint-gold);
    color: var(--amber);
}

.plan-day__line--activity .plan-day__icon,
.plan-day__line--attraction .plan-day__icon,
.plan-day__line--price .plan-day__icon {
    background: var(--tint-green);
    color: var(--green);
}

.plan-day__line--flight .plan-day__icon {
    background: var(--tint-teal);
    color: var(--teal);
}

.plan-day__time {
    padding-top: 8px;
    color: var(--muted);
    font: 600 14.5px/1.4 var(--text);
    font-variant-numeric: tabular-nums;
}

.plan-day__what {
    padding-top: 7px;
}

.plan-day__title {
    display: block;
    font: 700 16.5px/1.4 var(--text);
}

.plan-day__note {
    display: block;
    margin-top: 2px;
    color: var(--ink-2);
    font: 400 15px/1.5 var(--text);
}

.trip__small {
    margin-top: 18px;
}

/* On a phone the way into the app rides along the foot of the plan, and
   goes with the plan once the app block itself is in view. */
.trip__go {
    position: sticky;
    bottom: 14px;
    width: auto;
    margin: 28px auto 0;
    max-width: 360px;
    min-height: 54px;
    box-shadow: 0 14px 30px -12px rgba(16, 24, 40, .45);
    font-size: 17px;
}

@media (min-width: 768px) {
    .trip__go {
        display: none;
    }
}