/* ==========================================================================
   BeforeYouTravel design system.

   Foundations, shell overrides and page components for the BeforeYouTravel
   visual language. Platform.Shell owns the header and footer markup; the
   rules under "Shared header" and "Shared footer" restyle that shared markup
   for this host only.
   ========================================================================== */

:root {
    /* Ink and surfaces */
    --byt-ink: #16323A;
    --byt-ink-strong: #111D1F;
    --byt-muted: rgba(22, 50, 58, 0.68);
    --byt-muted-strong: rgba(22, 50, 58, 0.78);
    --byt-canvas: #F1F4F2;
    --byt-canvas-warm: #FAFAF9;
    --byt-surface: #FFFFFF;
    --byt-mint: #EAF1ED;
    --byt-chip-surface: #EDF1EF;
    --byt-chip-ink: #54666A;
    --byt-card-border: rgba(22, 50, 58, 0.06);
    --byt-rule: rgba(22, 50, 58, 0.1);
    --byt-hairline: rgba(22, 50, 58, 0.06);
    --byt-field-border: rgba(22, 50, 58, 0.18);

    /* Brand */
    --byt-teal: #0F5C67;
    --byt-link: #0E6570;
    --byt-link-hover: #111D1F;
    --byt-deep: #0A2A2E;
    --byt-on-deep: #FAFAF9;
    --byt-on-deep-muted: rgba(250, 250, 249, 0.58);
    --byt-on-deep-faint: rgba(250, 250, 249, 0.55);
    --byt-gold: #D9A441;
    /* Gold on the light canvas. The design's #C77E28 measures 3.12:1 there, below AA for
       the small mono labels it is used on; this is the same hue darkened to 5.5:1. */
    --byt-gold-ink: #8A5D0D;
    --byt-sky: #86BEC4;
    --byt-tray-badge: #B3591B;
    --byt-secondary-surface: #E7F0EB;
    --byt-secondary-ink: #123F47;

    /* Nav ink (measured against the warm nav bar, not the page canvas) */
    --byt-nav-ink: #0A2A2E;
    --byt-nav-muted: rgba(10, 42, 46, 0.66);
    --byt-nav-item: rgba(10, 42, 46, 0.66);
    --byt-nav-label: rgba(10, 42, 46, 0.66);
    --byt-nav-border: rgba(10, 42, 46, 0.16);
    --byt-nav-rule: rgba(10, 42, 46, 0.07);
    --byt-footer-rule: rgba(10, 42, 46, 0.08);
    --byt-footer-link: rgba(10, 42, 46, 0.66);

    /* Status pill palette */
    --byt-pill-amber-bg: #F9EDD6;
    --byt-pill-amber-ink: #8A5D0D;
    --byt-pill-green-bg: #DCF1E3;
    --byt-pill-green-ink: #1E7A4B;
    --byt-pill-red-bg: #F9E0DC;
    --byt-pill-red-ink: #B0432E;
    --byt-pill-grey-bg: #E9EEEC;
    --byt-pill-grey-ink: #5A6B6E;
    --byt-pill-mint-bg: #DFEEE8;
    --byt-pill-mint-ink: #1E5F52;

    /* Shape and motion */
    --byt-radius-card: 16px;
    --byt-radius-rail: 14px;
    --byt-radius-box: 12px;
    --byt-radius-field: 10px;
    --byt-radius-chip: 8px;
    --byt-radius-pill: 99px;
    --byt-card-shadow: 0 1px 3px rgba(22, 50, 58, 0.06);
    --byt-panel-shadow: 0 30px 70px -30px rgba(10, 42, 46, 0.5);
    --byt-motion-fast: 160ms ease;
    --byt-motion-menu: 180ms ease;
    --byt-font: "Schibsted Grotesk", -apple-system, "Helvetica Neue", sans-serif;
    --byt-font-mono: "Fragment Mono", ui-monospace, SFMono-Regular, monospace;
    --byt-focus-ring: #0F5C67;

    /* Platform token bridge */
    --surface: var(--byt-surface);
    --surface_alt: var(--byt-canvas);
    --text: var(--byt-ink);
    --text_muted: var(--byt-muted);
    --accent: var(--byt-link);
    --border: var(--byt-card-border);
    --site-shell-max-width: 1240px;
    --page-max-width: var(--site-shell-max-width);
    --page-gutter-x: 28px;
    --pui-color-text-primary: var(--byt-ink);
    --pui-color-text-secondary: var(--byt-muted);
    --pui-color-text-muted: var(--byt-muted);
    --pui-color-text-accent: var(--byt-link);
    --pui-color-link: var(--byt-link);
    --pui-color-link-hover: var(--byt-link-hover);
    --pui-color-action-primary: var(--byt-teal);
    --pui-color-action-primary-hover: var(--byt-ink-strong);
    --pui-color-surface-page: var(--byt-canvas);
    --pui-color-surface-card: var(--byt-surface);
    --pui-color-surface-muted: var(--byt-mint);
    --pui-color-surface-selected: var(--byt-mint);
    --pui-color-surface-hover: var(--byt-mint);
    --pui-color-surface-control: var(--byt-surface);
    --pui-color-border-default: var(--byt-card-border);
    --pui-color-border-strong: var(--byt-rule);
    --pui-color-border-focus: var(--byt-focus-ring);
    --pui-focus-color: var(--byt-focus-ring);
    --pui-color-nav-background: rgba(250, 250, 249, 0.85);
    --pui-color-nav-border: var(--byt-nav-rule);
    --pui-color-nav-text: var(--byt-nav-muted);
    --pui-color-nav-text-active: var(--byt-ink-strong);
}

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

html {
    scroll-behavior: smooth;
}

html,
body {
    min-height: 100vh;
    margin: 0;
    background: var(--byt-canvas);
    color: var(--byt-ink);
    font-family: var(--byt-font);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4 {
    margin: 0;
    color: var(--byt-ink);
    font-family: var(--byt-font);
    font-weight: 700;
    line-height: 1.15;
}

p {
    margin: 0;
}

a {
    color: var(--byt-link);
    font-weight: 700;
    text-decoration: none;
    transition: color var(--byt-motion-fast);
}

a:hover {
    color: var(--byt-link-hover);
}

::selection {
    background: rgba(14, 101, 112, 0.15);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
summary:focus-visible,
.byt-button:focus-visible,
.byt-tray-launcher:focus-visible {
    outline: 3px solid var(--byt-focus-ring);
    outline-offset: 3px;
}

button,
input,
select {
    font: inherit;
    font-family: inherit;
}

input:focus,
select:focus {
    outline: none;
}

input::placeholder {
    color: rgba(10, 42, 46, 0.66);
}

button:disabled,
input:disabled,
select:disabled {
    cursor: not-allowed;
    opacity: 0.65;
}

table {
    border-collapse: collapse;
}

.mud-button-label {
    text-transform: none;
    letter-spacing: 0;
    font-weight: 600;
}

#blazor-error-ui {
    display: none;
}

/* --------------------------------------------------------------------------
   Shell frame and page shell
   -------------------------------------------------------------------------- */

.byt-shell-frame {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
    background: var(--byt-canvas);
}

/* Home and guides sit on the warm canvas; interior pages on the mint grey. */
.byt-shell-frame:has(.byt-home),
.byt-shell-frame:has(.byt-guides-hero),
.byt-shell-frame:has(.byt-guide-reader) {
    background: var(--byt-canvas-warm);
}

.byt-shell-content {
    flex: 1 0 auto;
}

.byt-page-shell {
    box-sizing: border-box;
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
    padding: 28px 28px 72px;
}

.byt-page-stack {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* --------------------------------------------------------------------------
   Shared header (Platform.Shell markup, BeforeYouTravel skin)
   -------------------------------------------------------------------------- */

.nav-shell {
    position: sticky;
    top: 0;
    z-index: 60;
    padding: 0;
    background: rgba(250, 250, 249, 0.85);
    -webkit-backdrop-filter: blur(20px) saturate(1.5);
    backdrop-filter: blur(20px) saturate(1.5);
    border-bottom: 1px solid var(--byt-nav-rule);
}

.nav-shell .nav-container {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 16px;
    max-width: 1140px;
    padding: 0 28px;
    height: 60px;
}

.nav-shell .nav-brand {
    justify-self: start;
    gap: 10px;
    min-height: 0;
    white-space: nowrap;
}

.nav-shell .nav-brand img,
.nav-shell .nav-brand__mark {
    width: 27px;
    height: 27px;
    flex: 0 0 27px;
    display: block;
}

.nav-shell .nav-brand__lockup {
    gap: 10px;
}

.nav-shell .nav-brand__wordmark {
    flex-direction: row;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.015em;
}

.nav-shell .nav-brand__line {
    gap: 0;
}

.nav-shell .nav-brand__primary {
    color: var(--byt-nav-ink);
    font-size: 15px;
    font-weight: 700;
}

.nav-shell .nav-brand__accent {
    color: var(--byt-link);
    font-size: 15px;
    font-weight: 700;
}

.nav-shell .nav-links {
    display: contents;
}

.nav-shell .nav-list {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    white-space: nowrap;
}

.nav-shell .nav-list a,
.nav-shell .nav-dropdown-button,
.nav-shell .products-button {
    font-size: 13.5px;
    font-weight: 500;
    letter-spacing: 0;
    color: var(--byt-nav-muted);
}

.nav-shell .products-button {
    font-weight: 600;
}

.nav-shell .nav-list a:hover,
.nav-shell .nav-dropdown-button:hover,
.nav-shell .nav-list a[aria-current="page"],
.nav-shell .nav-dropdown-button--active {
    color: var(--byt-ink-strong);
}

.nav-shell .nav-list a[aria-current="page"] {
    color: var(--byt-nav-ink);
}

.nav-shell .nav-dropdown-button {
    gap: 6px;
}

.nav-shell .nav-caret {
    width: 0;
    height: 0;
    border-left: 3.5px solid transparent;
    border-right: 3.5px solid transparent;
    border-top: 4.5px solid currentColor;
}

.nav-shell .nav-dropdown:hover .nav-caret,
.nav-shell .nav-dropdown-button[aria-expanded="true"] .nav-caret {
    transform: none;
}

/* Mega panel: three titled columns that fade and rise on hover or focus. */
.nav-shell .nav-sublist {
    padding: 22px 30px 20px;
    border: 1px solid rgba(10, 42, 46, 0.08);
    border-radius: var(--byt-radius-card);
    box-shadow: var(--byt-panel-shadow);
    text-align: left;
}

.nav-shell .nav-sublist--groups {
    gap: 56px;
}

.nav-shell .nav-sublist-group__title {
    display: block;
    padding: 2px 0 8px;
    color: var(--byt-nav-label);
    font-family: var(--byt-font-mono);
    font-size: 9px;
    font-weight: 400;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.nav-shell .nav-sublist-group__links {
    gap: 0;
    margin: 0;
}

.nav-shell .nav-sublist a {
    display: block;
    /* The negative inline margin lets the hover chip breathe around the label
       while the text stays aligned with its column title. */
    margin: 0 -10px;
    padding: 6px 10px;
    border-radius: var(--byt-radius-chip);
    font-size: 13.5px;
    font-weight: 500;
    color: var(--byt-nav-item);
    white-space: nowrap;
    transition:
        background var(--byt-motion-fast),
        color var(--byt-motion-fast);
}

.nav-shell .nav-sublist a:hover,
.nav-shell .nav-sublist a:focus-visible {
    background: var(--byt-chip-surface);
    color: var(--byt-link);
}

@media (min-width: 901px) {
    .nav-shell .nav-sublist {
        display: flex;
        margin-top: 6px;
        visibility: hidden;
        opacity: 0;
        pointer-events: none;
        animation: none;
        transition:
            opacity var(--byt-motion-menu),
            margin-top var(--byt-motion-menu);
    }

    /* Keyboard focus holds the panel open. Pointer focus must not: the router
       navigates these links client side, so a clicked item keeps focus and
       :focus-within would leave the panel stuck open after the pointer moves
       away. A mouse click does not match :focus-visible, so pointer-out closes. */
    .nav-shell .nav-dropdown:hover .nav-sublist,
    .nav-shell .nav-dropdown:has(:focus-visible) .nav-sublist,
    .nav-shell .nav-sublist.open {
        visibility: visible;
        opacity: 1;
        margin-top: 0;
        pointer-events: auto;
        animation: none;
    }
}

/* Header actions: solid "Check my trip" pill and the outlined trip tray. */
.nav-shell .nav-actions {
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 12px;
    white-space: nowrap;
}

.nav-shell .nav-actions .mud-button-root {
    min-width: 0;
    min-height: 0;
    border-radius: var(--byt-radius-pill);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.45;
    letter-spacing: 0;
    text-transform: none;
}

.nav-shell .nav-actions .mud-button-root.mud-button-filled {
    padding: 9px 16px;
    box-shadow: none;
}

.nav-shell .nav-actions .mud-button-root.mud-button-filled.mud-button-filled-primary {
    background: var(--byt-link);
    color: var(--byt-on-deep);
}

.nav-shell .nav-actions .mud-button-root.mud-button-filled.mud-button-filled-primary:hover,
.nav-shell .nav-actions .mud-button-root.mud-button-filled.mud-button-filled-primary:focus-visible {
    background: var(--byt-ink-strong);
    color: var(--byt-on-deep);
}

.byt-tray-launcher {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 0;
    padding: 7px 9px 7px 15px;
    color: var(--byt-nav-ink);
    background: transparent;
    border: 1px solid var(--byt-nav-border);
    border-radius: var(--byt-radius-pill);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition:
        border-color var(--byt-motion-fast),
        color var(--byt-motion-fast);
}

.byt-tray-launcher:hover {
    border-color: var(--byt-ink-strong);
    color: var(--byt-ink-strong);
    background: transparent;
    box-shadow: none;
}

.byt-tray-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 19px;
    height: 19px;
    padding: 0 5px;
    box-sizing: border-box;
    color: var(--byt-on-deep);
    background: var(--byt-tray-badge);
    border-radius: var(--byt-radius-pill);
    font-family: var(--byt-font-mono);
    font-size: 10px;
    font-weight: 400;
}

/* --------------------------------------------------------------------------
   Shared footer (Platform.Shell markup, BeforeYouTravel skin)
   -------------------------------------------------------------------------- */

.footer-shell {
    margin-top: 0;
    padding-bottom: 0;
    color: var(--byt-footer-link);
}

.footer-shell__divider {
    max-width: none;
    margin: 0;
    border-top: 1px solid var(--byt-footer-rule);
}

.footer-shell .footer-top,
.footer-shell .footer-legal {
    max-width: 1140px;
    margin-inline: auto;
}

.footer-shell--wrapped .footer-top {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 48px;
    padding: 64px 44px 48px;
}

.footer-shell--wrapped .footer-column {
    gap: 0;
}

.footer-shell--wrapped .footer-column h4 {
    margin: 0 0 14px;
    color: var(--byt-nav-label);
    font-family: var(--byt-font-mono);
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.footer-shell--wrapped .footer-links {
    flex-direction: column;
    gap: 9px;
}

.footer-shell--wrapped .footer-links li {
    display: block;
}

.footer-shell .footer-links a {
    font-size: 13px;
    font-weight: 400;
    color: var(--byt-footer-link);
}

.footer-shell .footer-links a:hover {
    color: var(--byt-ink-strong);
}

.byt-footer-brand {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--byt-nav-ink);
}

.byt-footer-brand span {
    color: var(--byt-link);
}

.byt-footer-tagline {
    margin: 12px 0 0;
    max-width: 240px;
    font-size: 13px;
    line-height: 1.6;
    color: rgba(10, 42, 46, 0.66);
}

/* Spacing and colour only. The arrangement is Platform.Shell's — copyright left, estate line
   centred, links and provenance right, the same on every app. This used to set flex and
   space-between, which replaced that grid outright. */
.footer-shell .footer-legal {
    gap: 20px;
    padding: 0 44px 40px;
    font-size: 12px;
    color: var(--byt-nav-label);
}

.byt-footer-data {
    font-family: var(--byt-font-mono);
    font-size: 10px;
    letter-spacing: 0.1em;
    color: rgba(10, 42, 46, 0.66);
}

/* --------------------------------------------------------------------------
   Home: dark hero
   -------------------------------------------------------------------------- */

.byt-hero {
    position: relative;
    overflow: hidden;
    color: var(--byt-on-deep);
    background: var(--byt-deep);
}

.byt-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(1000px 560px at 80% 0%, rgba(15, 92, 103, 0.55), transparent 65%);
}

.byt-hero-inner {
    position: relative;
    display: grid;
    box-sizing: border-box;
    max-width: 1320px;
    margin: 0 auto;
    padding: 84px 44px 92px;
    gap: 64px;
    /* The checker card carries two field columns and a three-column checkbox
       group, so it takes the larger share. Anything narrower truncates the
       destination placeholder and wraps the longest checkbox label. */
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
    align-items: center;
}

.byt-hero-copy .byt-eyebrow {
    color: var(--byt-gold);
    font-family: var(--byt-font-mono);
    font-size: 10.5px;
    font-weight: 400;
    letter-spacing: 0.2em;
}

.byt-hero-copy h1 {
    margin: 24px 0 0;
    font-size: 62px;
    font-weight: 500;
    letter-spacing: -0.033em;
    line-height: 1.04;
    color: var(--byt-on-deep);
    text-wrap: balance;
}

.byt-hero-copy p:not(.byt-eyebrow) {
    margin: 24px 0 0;
    max-width: 460px;
    font-size: 17px;
    line-height: 1.65;
    color: var(--byt-on-deep-muted);
    text-wrap: pretty;
}

.byt-hero-stats {
    display: flex;
    margin-top: 44px;
    gap: 40px;
    flex-wrap: wrap;
}

.byt-hero-stat-value {
    display: block;
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--byt-on-deep);
}

.byt-hero-stat-label {
    display: block;
    margin-top: 4px;
    font-family: var(--byt-font-mono);
    font-size: 9.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--byt-on-deep-faint);
}

/* Trip checker card */
.byt-trip-form {
    box-sizing: border-box;
    color: var(--byt-deep);
    background: var(--byt-surface);
    border: 0;
    border-radius: 20px;
    box-shadow: 0 60px 120px -45px rgba(0, 0, 0, 0.6);
    padding: 28px 28px 24px;
}

.byt-form-grid {
    display: grid;
    gap: 16px 14px;
    grid-template-columns: 1fr 1fr;
}

.byt-form-grid label {
    display: block;
}

.byt-form-grid label > span:first-child {
    display: block;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: -0.005em;
    color: var(--byt-deep);
}

.byt-form-grid input,
.byt-form-grid select {
    margin-top: 7px;
    width: 100%;
    box-sizing: border-box;
    padding: 12px 14px;
    color: var(--byt-deep);
    background: transparent;
    border: 1px solid var(--byt-nav-border);
    border-radius: 12px;
    font-size: 15px;
    font-weight: 500;
    transition: border-color var(--byt-motion-fast);
}

.byt-form-grid select {
    cursor: pointer;
}

.byt-form-grid input:hover,
.byt-form-grid select:hover {
    border-color: var(--byt-link);
}

.byt-field-help {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    font-weight: 400;
    color: rgba(10, 42, 46, 0.66);
}

.byt-toggle-grid {
    margin: 18px 0 0;
    padding: 14px 16px 12px;
    border: 1px solid rgba(10, 42, 46, 0.1);
    border-radius: var(--byt-radius-rail);
}

.byt-toggle-grid legend {
    padding: 0;
    color: rgba(10, 42, 46, 0.66);
    font-family: var(--byt-font-mono);
    font-size: 9px;
    font-weight: 400;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.byt-toggle-fields {
    display: grid;
    margin-top: 10px;
    gap: 10px 14px;
    grid-template-columns: repeat(3, 1fr);
}

.byt-toggle-grid label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    font-weight: 400;
    color: rgba(10, 42, 46, 0.7);
    cursor: pointer;
}

.byt-toggle-grid input[type="checkbox"] {
    accent-color: var(--byt-link);
    margin: 0;
}

.byt-trip-form .byt-button-primary {
    display: flex;
    width: 100%;
    margin-top: 18px;
    padding: 15px 0;
    background: var(--byt-link);
    color: var(--byt-on-deep);
    font-size: 15px;
    font-weight: 600;
    text-align: center;
}

.byt-trip-form .byt-button-primary:hover {
    background: #0A5560;
    color: var(--byt-on-deep);
}

.byt-trip-form .byt-form-note {
    margin: 14px 0 0;
    text-align: center;
    font-size: 12px;
    color: rgba(10, 42, 46, 0.66);
}

/* --------------------------------------------------------------------------
   Progressive trip completion

   The trip checker's completion states and the compact trip summary. The
   summary carries its own surface when it stands alone in the page stack and
   drops it inside the completion card, so a region never stacks two surfaces.
   -------------------------------------------------------------------------- */

.byt-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.byt-trip-summary {
    /* Contains the visually hidden text above, which must not escape the region. */
    position: relative;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 24px 32px;
    background: var(--byt-surface);
    border: 1px solid var(--byt-card-border);
    border-radius: var(--byt-radius-card);
    box-shadow: var(--byt-card-shadow);
}

/* Specificity note: the summary also renders inside a card, so these selectors
   have to outrank the generic .byt-card h2 and .byt-card p rules. */
.byt-trip-summary .byt-eyebrow {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
}

.byt-trip-summary .byt-trip-summary-route {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 10px;
    margin: 0;
    color: var(--byt-ink);
    font-size: 24px;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.015em;
}

.byt-trip-summary-arrow {
    color: var(--byt-muted);
    font-weight: 400;
}

.byt-trip-summary-pending {
    color: var(--byt-muted);
    font-weight: 500;
}

.byt-trip-summary .byt-trip-summary-meta {
    margin: 0;
    color: var(--byt-muted-strong);
    font-size: 14px;
}

.byt-trip-completion > * + * {
    margin-top: 0;
}

.byt-trip-completion .byt-trip-summary {
    padding: 0 0 20px;
    background: none;
    border: 0;
    border-bottom: 1px solid var(--byt-rule);
    border-radius: 0;
    box-shadow: none;
}

.byt-trip-completion {
    gap: 24px;
}

/* The completion card spans the content column, but trip inputs read badly at that width.
   Holding the field grid to a comfortable measure keeps the controls the size of the values
   they take. */
.byt-trip-completion-fields,
.byt-trip-completion-form .byt-form-grid,
.byt-trip-completion-form .byt-toggle-grid,
.byt-trip-completion-form .byt-form-note,
.byt-trip-edit-form .byt-form-grid,
.byt-trip-edit-form .byt-toggle-grid,
.byt-trip-edit-form .byt-form-note {
    max-width: 720px;
}

.byt-trip-completion-fields {
    display: grid;
    gap: 16px 14px;
    grid-template-columns: 1fr 1fr;
}

.byt-trip-completion-fields > label {
    display: block;
}

.byt-trip-completion-fields label > span:first-child,
.byt-trip-edit-form .byt-form-grid label > span:first-child {
    display: block;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: -0.005em;
    color: var(--byt-ink);
}

.byt-trip-completion-fields input,
.byt-trip-completion-fields select {
    margin-top: 7px;
    width: 100%;
    box-sizing: border-box;
    min-height: 44px;
    padding: 12px 14px;
    color: var(--byt-ink);
    background: var(--byt-surface);
    border: 1px solid var(--byt-field-border);
    border-radius: var(--byt-radius-box);
    font-family: var(--byt-font);
    font-size: 15px;
    font-weight: 500;
    transition: border-color var(--byt-motion-fast);
}

.byt-trip-completion-fields input:hover,
.byt-trip-completion-fields select:hover {
    border-color: var(--byt-link);
}

.byt-trip-completion-form .byt-button-primary,
.byt-trip-edit-form .byt-button-primary {
    display: inline-flex;
    align-self: flex-start;
    margin-top: 20px;
    padding: 14px 28px;
    background: var(--byt-teal);
    color: var(--byt-on-deep);
    font-size: 15px;
    font-weight: 600;
}

.byt-trip-completion-form .byt-button-primary:hover,
.byt-trip-edit-form .byt-button-primary:hover {
    background: var(--byt-ink-strong);
    color: var(--byt-on-deep);
}

.byt-field-error {
    display: block;
    margin-top: 6px;
    color: var(--byt-pill-red-ink);
    font-size: 12.5px;
    font-weight: 500;
}

/* Edit trip: a native disclosure so the report is not discarded to change the trip. */
.byt-trip-edit {
    width: 100%;
}

.byt-trip-edit > summary {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--byt-link);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.byt-trip-edit > summary:hover {
    color: var(--byt-link-hover);
}

.byt-trip-edit-form {
    margin-top: 12px;
    padding-top: 20px;
    border-top: 1px solid var(--byt-rule);
}

@media (max-width: 767px) {
    .byt-trip-summary {
        padding: 20px;
    }

    .byt-trip-summary-route {
        font-size: 20px;
    }

    .byt-trip-completion-fields {
        grid-template-columns: minmax(0, 1fr);
    }

    .byt-trip-completion-form .byt-button-primary,
    .byt-trip-edit-form .byt-button-primary {
        display: flex;
        width: 100%;
        align-self: stretch;
        justify-content: center;
    }
}

/* --------------------------------------------------------------------------
   Trip preparation checklist

   The checklist is a tool, so it reads as one: a plain count, quiet completed
   rows that stay in place, and an official route on every source backed task.
   -------------------------------------------------------------------------- */

.byt-prep {
    gap: 20px;
}

.byt-prep > * + * {
    margin-top: 0;
}

.byt-prep-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px 24px;
}

.byt-prep .byt-prep-lede {
    margin: 6px 0 0;
    max-width: 560px;
    font-size: 13.5px;
    color: var(--byt-muted);
}

.byt-prep .byt-prep-progress {
    margin: 0;
    font-family: var(--byt-font-mono);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--byt-muted-strong);
    white-space: nowrap;
}

.byt-prep .byt-prep-next {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 10px;
    margin: 0;
    padding: 12px 16px;
    background: var(--byt-mint);
    border-radius: var(--byt-radius-box);
    font-size: 14px;
    font-weight: 600;
    color: var(--byt-ink);
}

.byt-prep-group + .byt-prep-group {
    margin-top: 20px;
}

.byt-prep-list {
    margin: 10px 0 0;
    padding: 0;
    list-style: none;
}

.byt-prep-item {
    padding: 14px 0;
    border-top: 1px solid var(--byt-hairline);
}

.byt-prep-list > li:first-child {
    border-top: 0;
    padding-top: 4px;
}

.byt-prep-task {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

/* A comfortable target that still lines up with the first line of the title. */
.byt-prep-check {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin: 2px 0 0;
    accent-color: var(--byt-teal);
    cursor: pointer;
}

.byt-prep-body {
    min-width: 0;
}

.byt-prep .byt-prep-title {
    display: block;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--byt-ink);
    cursor: pointer;
}

.byt-prep .byt-prep-action {
    margin: 4px 0 0;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--byt-muted);
}

.byt-prep .byt-prep-done,
.byt-prep .byt-prep-recheck,
.byt-prep .byt-prep-unconfirmed {
    margin: 8px 0 0;
    font-size: 12.5px;
    font-weight: 500;
}

.byt-prep .byt-prep-done {
    color: var(--byt-pill-green-ink);
}

/* State is never carried by colour alone: each of these rows also states what it means. */
.byt-prep .byt-prep-recheck {
    color: var(--byt-pill-amber-ink);
}

.byt-prep .byt-prep-unconfirmed {
    color: var(--byt-muted-strong);
}

.byt-prep .byt-prep-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    margin: 10px 0 0;
    font-size: 12.5px;
}

.byt-prep-item-done .byt-prep-title {
    color: var(--byt-muted-strong);
}

.byt-prep-item-done .byt-prep-action {
    display: none;
}

.byt-prep-item-recheck {
    padding-left: 14px;
    border-left: 3px solid var(--byt-pill-amber-ink);
}

.byt-prep .byt-prep-warning,
.byt-prep .byt-prep-empty,
.byt-prep .byt-prep-note {
    margin: 0;
    font-size: 13px;
    color: var(--byt-muted);
}

.byt-prep .byt-prep-note {
    padding-top: 16px;
    border-top: 1px solid var(--byt-hairline);
    font-size: 12.5px;
}

@media (max-width: 767px) {
    .byt-prep-head {
        flex-direction: column;
        align-items: flex-start;
    }

    .byt-prep-check {
        width: 24px;
        height: 24px;
    }
}

/* Entrance motion */
@keyframes byt-rise {
    from {
        opacity: 0;
        transform: translateY(18px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.byt-rise {
    animation: byt-rise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.byt-rise-1 {
    animation-delay: 0.06s;
}

.byt-rise-2 {
    animation-delay: 0.12s;
}

.byt-rise-3 {
    animation-delay: 0.18s;
}

.byt-trip-form.byt-rise {
    animation-duration: 0.8s;
    animation-delay: 0.15s;
}

/* --------------------------------------------------------------------------
   Home: light and dark bands below the hero
   -------------------------------------------------------------------------- */

.byt-home-section {
    box-sizing: border-box;
    max-width: 1140px;
    margin: 0 auto;
    padding: 112px 44px 104px;
}

.byt-home-band {
    background: var(--byt-deep);
    color: var(--byt-on-deep);
}

.byt-home-band-inner {
    box-sizing: border-box;
    max-width: 1140px;
    margin: 0 auto;
    padding: 104px 44px;
}

.byt-home-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}

.byt-home-heading .byt-eyebrow {
    font-family: var(--byt-font-mono);
    font-size: 10.5px;
    font-weight: 400;
    letter-spacing: 0.18em;
    color: var(--byt-link);
}

.byt-home-heading h2 {
    margin: 14px 0 0;
    font-size: 40px;
    font-weight: 500;
    letter-spacing: -0.028em;
    line-height: 1.08;
}

.byt-home-heading-link {
    font-size: 14px;
    font-weight: 500;
}

.byt-popular-trip-grid {
    display: grid;
    margin-top: 44px;
    grid-template-columns: 1fr 1fr;
    column-gap: 64px;
}

.byt-popular-trip {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 18px;
    padding: 20px 4px;
    border-top: 1px solid var(--byt-footer-rule);
    color: var(--byt-deep);
    font-weight: 400;
    transition:
        background var(--byt-motion-fast),
        color var(--byt-motion-fast);
}

.byt-popular-trip:hover {
    background: rgba(10, 42, 46, 0.025);
    color: var(--byt-ink-strong);
}

.byt-popular-trip strong {
    display: block;
    font-size: 16.5px;
    font-weight: 500;
    letter-spacing: -0.01em;
}

.byt-popular-trip-sub {
    display: block;
    margin-top: 3px;
    font-size: 13px;
    color: rgba(10, 42, 46, 0.66);
}

.byt-popular-trip .byt-mini-label {
    font-family: var(--byt-font-mono);
    font-size: 9px;
    font-weight: 400;
    letter-spacing: 0.14em;
    text-transform: none;
    color: rgba(10, 42, 46, 0.66);
}

.byt-popular-trip-arrow {
    color: var(--byt-link);
    font-size: 17px;
}

.byt-home-band .byt-eyebrow {
    font-family: var(--byt-font-mono);
    font-size: 10.5px;
    font-weight: 400;
    letter-spacing: 0.18em;
    color: var(--byt-sky);
}

.byt-home-band h2 {
    margin: 14px 0 0;
    max-width: 560px;
    font-size: 40px;
    font-weight: 500;
    letter-spacing: -0.028em;
    line-height: 1.1;
    color: var(--byt-on-deep);
}

.byt-home-band-lede {
    margin: 18px 0 0;
    max-width: 520px;
    font-size: 15.5px;
    line-height: 1.6;
    color: rgba(250, 250, 249, 0.55);
}

.byt-coverage-grid {
    display: grid;
    margin-top: 52px;
    grid-template-columns: 1fr 1fr;
    column-gap: 64px;
}

.byt-coverage-link {
    display: block;
    padding: 26px 4px;
    border-top: 1px solid rgba(250, 250, 249, 0.16);
    color: var(--byt-on-deep);
    font-weight: 400;
}

.byt-coverage-link:hover {
    color: var(--byt-sky);
}

.byt-coverage-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
}

.byt-coverage-title {
    font-size: 20px;
    font-weight: 500;
    letter-spacing: -0.015em;
}

.byt-coverage-count {
    font-family: var(--byt-font-mono);
    font-size: 10px;
    letter-spacing: 0.12em;
    color: var(--byt-gold);
}

.byt-coverage-sub {
    display: block;
    margin-top: 6px;
    font-size: 13.5px;
    line-height: 1.55;
    color: rgba(250, 250, 249, 0.55);
}

.byt-coverage-also {
    margin: 44px 0 0;
    font-family: var(--byt-font-mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    color: rgba(250, 250, 249, 0.55);
}

.byt-coverage-also a {
    color: rgba(250, 250, 249, 0.55);
    font-weight: 400;
}

.byt-coverage-also a:hover {
    color: var(--byt-sky);
}

.byt-home-cta {
    box-sizing: border-box;
    max-width: 1140px;
    margin: 0 auto;
    padding: 128px 44px;
    text-align: center;
}

.byt-home-cta h2 {
    margin: 0;
    font-size: 48px;
    font-weight: 500;
    letter-spacing: -0.032em;
    line-height: 1.05;
}

.byt-home-cta p {
    margin: 18px auto 0;
    max-width: 440px;
    font-size: 16px;
    line-height: 1.6;
    color: rgba(10, 42, 46, 0.66);
}

.byt-home-cta-actions {
    display: flex;
    margin-top: 32px;
    justify-content: center;
    gap: 12px;
}

.byt-home-cta-actions .byt-button {
    padding: 13px 28px;
    font-size: 14px;
    font-weight: 600;
}

.byt-home-cta-actions .byt-button-primary {
    background: var(--byt-link);
    color: var(--byt-on-deep);
}

.byt-home-cta-actions .byt-button-outline {
    color: var(--byt-deep);
    background: transparent;
    border: 1px solid rgba(10, 42, 46, 0.2);
}

.byt-home-cta-actions .byt-button-outline:hover {
    color: var(--byt-ink-strong);
    border-color: var(--byt-ink-strong);
    background: transparent;
}

/* --------------------------------------------------------------------------
   Interior pages: cards, heroes and section headings
   -------------------------------------------------------------------------- */

.byt-card,
.byt-report-section,
.byt-status-panel,
.byt-page-hero,
.byt-report-hero,
.byt-module-card,
.byt-action-card {
    box-sizing: border-box;
    background: var(--byt-surface);
    border: 1px solid var(--byt-card-border);
    border-radius: var(--byt-radius-card);
    box-shadow: var(--byt-card-shadow);
}

.byt-card,
.byt-report-section {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 28px 32px;
}

.byt-page-hero,
.byt-report-hero {
    padding: 44px 48px;
}

.byt-report-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 48px;
    align-items: start;
}

.byt-eyebrow {
    margin: 0;
    color: var(--byt-teal);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.byt-mini-label {
    color: var(--byt-muted);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.byt-page-hero h1,
.byt-report-hero h1 {
    margin: 14px 0 0;
    max-width: 760px;
    font-size: 44px;
    font-weight: 700;
    letter-spacing: -0.022em;
    line-height: 1.12;
}

.byt-page-hero p:not(.byt-eyebrow),
.byt-report-hero > div > p:not(.byt-eyebrow) {
    margin: 14px 0 0;
    max-width: 620px;
    font-size: 15px;
    line-height: 1.65;
    color: var(--byt-muted);
}

.byt-report-hero > div > p:not(.byt-eyebrow) {
    max-width: 560px;
}

.byt-page-hero .byt-button {
    margin-top: 24px;
}

/* Report hero right rail */
.byt-status-panel {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 22px 24px;
    border: 1px solid var(--byt-rule);
    border-radius: var(--byt-radius-rail);
    box-shadow: none;
}

.byt-status-panel p {
    margin: 12px 0 0;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--byt-muted);
}

.byt-status-panel-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    margin-top: 14px;
}

.byt-section-heading {
    display: flex;
    flex-direction: column;
    padding: 16px 4px 0;
}

.byt-section-heading h2 {
    margin: 12px 0 0;
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.byt-section-heading p:not(.byt-eyebrow) {
    margin: 10px 0 0;
    max-width: 560px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--byt-muted);
}

.byt-card h2,
.byt-report-section h2 {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.015em;
}

.byt-card h3,
.byt-report-section h3 {
    margin: 0;
    font-size: 16.5px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.byt-card > * + *,
.byt-report-section > * + * {
    margin-top: 12px;
}

.byt-card p,
.byt-report-section p {
    font-size: 14px;
    line-height: 1.65;
    color: var(--byt-muted);
}

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

.byt-card ul,
.byt-card ol,
.byt-report-section ul,
.byt-report-section ol,
.byt-top-action-list {
    margin: 14px 0 0;
    padding-left: 20px;
}

.byt-card li + li,
.byt-report-section li + li,
.byt-top-action-list li + li {
    margin-top: 8px;
}

.byt-card li,
.byt-report-section li {
    font-size: 14px;
    line-height: 1.6;
    color: var(--byt-muted-strong);
}

/* Legal pages: one card of heading and paragraph pairs. */
.byt-legal-card > * + * {
    margin-top: 0;
}

.byt-legal-card h2 {
    margin: 0 0 8px;
    font-size: 17px;
}

.byt-legal-card p {
    margin: 0 0 20px;
    font-size: 14.5px;
    line-height: 1.7;
    color: rgba(22, 50, 58, 0.72);
}

.byt-legal-card p:last-child {
    margin: 4px 0 0;
    font-size: 13.5px;
    color: var(--byt-muted);
}

/* --------------------------------------------------------------------------
   Status pills, buttons and chips
   -------------------------------------------------------------------------- */

.byt-status {
    display: inline-block;
    width: fit-content;
    min-height: 0;
    padding: 4px 12px;
    border: 0;
    border-radius: var(--byt-radius-pill);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1.5;
    white-space: nowrap;
}

.byt-status-live {
    color: var(--byt-pill-green-ink);
    background: var(--byt-pill-green-bg);
}

.byt-status-partial {
    color: var(--byt-pill-amber-ink);
    background: var(--byt-pill-amber-bg);
}

.byt-status-risk,
.byt-status-unavailable,
.byt-status-not-live {
    color: var(--byt-pill-red-ink);
    background: var(--byt-pill-red-bg);
}

.byt-status-neutral {
    color: var(--byt-pill-grey-ink);
    background: var(--byt-pill-grey-bg);
}

/* Key report sections route to the official source: mint, not amber. */
.byt-destination-section-list .byt-status {
    color: var(--byt-pill-mint-ink);
    background: var(--byt-pill-mint-bg);
}

a.byt-status-link:hover {
    color: var(--byt-pill-mint-ink);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.byt-button,
.byt-trip-form button,
.byt-card button,
.byt-status-panel button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    min-height: 44px;
    box-sizing: border-box;
    padding: 11px 22px;
    border: 0;
    border-radius: var(--byt-radius-pill);
    font-size: 13.5px;
    font-weight: 700;
    text-align: center;
    cursor: pointer;
    transition:
        background var(--byt-motion-fast),
        color var(--byt-motion-fast),
        border-color var(--byt-motion-fast);
}

.byt-button-primary {
    color: #FFFFFF;
    background: var(--byt-teal);
}

.byt-button-primary:hover {
    color: #FFFFFF;
    background: var(--byt-ink-strong);
}

.byt-button-secondary,
.byt-card button,
.byt-status-panel button {
    color: var(--byt-secondary-ink);
    background: var(--byt-secondary-surface);
}

.byt-button-secondary:hover,
.byt-card button:hover,
.byt-status-panel button:hover {
    color: #FFFFFF;
    background: var(--byt-ink-strong);
}

.byt-button:disabled,
.byt-card button:disabled,
.byt-status-panel button:disabled {
    color: var(--byt-muted);
    background: var(--byt-hairline);
    cursor: not-allowed;
}

.byt-source-chip {
    display: inline-block;
    width: fit-content;
    padding: 5px 10px;
    color: var(--byt-chip-ink);
    background: var(--byt-chip-surface);
    border: 0;
    border-radius: var(--byt-radius-chip);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.5;
}

.byt-source-chip a {
    font-size: 13.5px;
    font-weight: 700;
}

/* --------------------------------------------------------------------------
   Grids, module cards and mint boxes
   -------------------------------------------------------------------------- */

.byt-card-grid {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.byt-report-grid,
.byt-module-grid,
.byt-action-card-grid {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.byt-card-grid > .byt-card {
    padding: 22px 24px;
}

.byt-card-grid > .byt-card h2 {
    font-size: 18px;
    letter-spacing: -0.012em;
}

/* Data index cards pair a shorter title with a status pill on one line. */
.byt-card-grid > .byt-card > .byt-report-section-heading h2 {
    font-size: 16px;
    letter-spacing: -0.01em;
}

.byt-module-card,
.byt-action-card {
    display: flex;
    flex-direction: column;
    padding: 22px 24px;
}

.byt-module-card > * + *,
.byt-action-card > * + * {
    margin-top: 12px;
}

.byt-module-card p,
.byt-action-card p {
    margin: 10px 0 0;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--byt-muted);
}

.byt-module-card h3,
.byt-action-card h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.byt-module-card a,
.byt-action-card a {
    font-size: 13.5px;
    font-weight: 700;
}

.byt-report-section-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
}

.byt-decision-modules {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.byt-destination-sections {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.byt-destination-section-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.byt-report-section-readable {
    padding: 24px 28px;
}

.byt-report-section-body {
    display: flex;
    flex-direction: column;
    max-width: 900px;
    gap: 12px;
    margin-top: 12px;
}

.byt-report-section-body p {
    margin: 0;
    font-size: 14px;
    line-height: 1.7;
    color: var(--byt-muted-strong);
}

.byt-report-more {
    font-size: 13px;
    font-weight: 700;
    color: var(--byt-ink);
}

.byt-report-more-link {
    color: inherit;
}

/* Mint information boxes: official links, source freshness, feature rows. */
.byt-source-list,
.byt-status-list,
.byt-link-list {
    display: grid;
    margin-top: 16px;
    gap: 14px;
}

.byt-source-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.byt-status-list {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
}

.byt-link-list {
    grid-template-columns: minmax(0, 1fr);
}

.byt-source-list article,
.byt-status-list article,
.byt-link-list a {
    display: block;
    padding: 18px 22px;
    background: var(--byt-mint);
    border: 0;
    border-radius: var(--byt-radius-box);
}

.byt-source-list h3,
.byt-status-list h3 {
    margin: 0;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--byt-ink);
}

.byt-source-list p,
.byt-status-list p {
    margin: 8px 0 0;
    font-size: 13px;
    line-height: 1.7;
    color: var(--byt-muted);
}

.byt-source-list a,
.byt-status-list a {
    display: inline-block;
    margin-top: 10px;
    font-size: 13.5px;
    font-weight: 700;
}

.byt-link-list a {
    color: var(--byt-ink);
    font-weight: 400;
}

.byt-link-list a:hover {
    background: #E2ECE6;
    color: var(--byt-ink);
}

.byt-link-list strong {
    display: block;
    font-size: 15px;
    font-weight: 700;
    color: var(--byt-link);
}

.byt-link-list span {
    display: block;
    margin-top: 6px;
    font-size: 13.5px;
    color: rgba(22, 50, 58, 0.72);
}

.byt-link-list .byt-link-url {
    margin-top: 6px;
    overflow-wrap: anywhere;
    font-size: 12.5px;
    color: var(--byt-muted);
}

/* Trip check input strip */
.byt-definition-grid {
    display: grid;
    margin-top: 16px;
    gap: 14px;
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.byt-definition-grid div {
    padding: 14px 18px;
    background: var(--byt-mint);
    border-radius: var(--byt-radius-field);
}

.byt-definition-grid dt {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--byt-muted);
}

.byt-definition-grid dd {
    margin: 5px 0 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--byt-ink);
}

/* --------------------------------------------------------------------------
   Data: tables, delay bars and stat blocks
   -------------------------------------------------------------------------- */

.byt-table-scroll {
    overflow-x: auto;
    margin-top: 14px;
}

.byt-data-table {
    width: 100%;
    border-collapse: collapse;
}

.byt-data-table thead th {
    padding: 10px 0 10px 18px;
    color: var(--byt-muted);
    font-size: 12px;
    font-weight: 600;
    text-align: right;
    border-bottom: 1px solid var(--byt-rule);
}

.byt-data-table thead th:first-child {
    padding-left: 0;
    text-align: left;
}

.byt-data-table td,
.byt-data-table tbody th {
    padding: 13px 0 13px 18px;
    color: var(--byt-ink);
    font-size: 14px;
    font-weight: 400;
    text-align: right;
    font-variant-numeric: tabular-nums;
    border-bottom: 1px solid var(--byt-hairline);
}

.byt-data-table tbody th[scope="row"],
.byt-data-table td:first-child {
    padding-left: 0;
    text-align: left;
    font-weight: 600;
}

.byt-data-table a {
    font-size: 13.5px;
    font-weight: 700;
}

.byt-band-list {
    display: flex;
    flex-direction: column;
    list-style: none;
    margin: 16px 0 0;
    padding: 0;
    gap: 0;
}

.byt-band-list li {
    display: grid;
    grid-template-columns: 190px 1fr 70px;
    align-items: center;
    gap: 18px;
    padding: 7px 0;
}

.byt-band-label {
    font-size: 13px;
    color: var(--byt-muted);
}

.byt-band-track {
    display: block;
    height: 8px;
    border-radius: var(--byt-radius-pill);
    background: #E8EEEB;
    overflow: hidden;
}

.byt-band-fill {
    display: block;
    height: 100%;
    border-radius: var(--byt-radius-pill);
    background: var(--byt-teal);
}

.byt-band-value {
    font-size: 13px;
    font-weight: 700;
    text-align: right;
    color: var(--byt-ink);
    font-variant-numeric: tabular-nums;
}

.byt-metric-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 24px;
    margin: 20px 0 0;
}

.byt-metric-list div {
    display: flex;
    flex-direction: column;
}

.byt-metric-list dt {
    font-size: 12.5px;
    color: var(--byt-muted);
}

.byt-metric-list dd {
    margin: 6px 0 0;
    font-size: 21px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--byt-ink);
    font-variant-numeric: tabular-nums;
}

/* Compact metric pairs inside index cards. */
.byt-card-grid .byt-metric-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 16px;
    margin-top: 14px;
}

.byt-card-grid .byt-metric-list dt {
    font-size: 11.5px;
}

.byt-card-grid .byt-metric-list dd {
    margin-top: 4px;
    font-size: 14.5px;
}

.byt-caveat-list {
    margin: 14px 0 0;
    padding-left: 20px;
    color: var(--byt-muted);
    font-size: 12.5px;
}

.byt-caveat-list li + li {
    margin-top: 8px;
}

.byt-method-disclosure {
    margin-top: 12px;
    font-size: 12.5px;
}

.byt-method-disclosure summary {
    cursor: pointer;
    font-size: 13px;
    font-weight: 700;
    color: var(--byt-ink);
}

.byt-method-disclosure p {
    margin: 8px 0 0;
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--byt-muted);
}

.byt-route-link-list {
    display: flex;
    flex-direction: column;
    list-style: none;
    margin: 12px 0 0;
    padding: 0;
    gap: 8px;
}

.byt-route-link-list li {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: baseline;
    font-size: 14px;
    color: var(--byt-muted);
}

/* --------------------------------------------------------------------------
   Tool forms and inline search
   -------------------------------------------------------------------------- */

.byt-tool-form {
    display: grid;
    margin-top: 18px;
    gap: 18px 24px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.byt-tool-form label,
.byt-inline-search label {
    display: flex;
    flex-direction: column;
}

.byt-tool-form label > span:first-child,
.byt-inline-search label > span:first-child {
    margin-bottom: 8px;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--byt-ink);
}

.byt-tool-form input,
.byt-tool-form select,
.byt-inline-search input,
.byt-inline-search select {
    width: 100%;
    min-height: 44px;
    box-sizing: border-box;
    padding: 12px 14px;
    color: var(--byt-ink);
    background: var(--byt-surface);
    border: 1px solid var(--byt-field-border);
    border-radius: var(--byt-radius-field);
    font-size: 14.5px;
    transition: border-color var(--byt-motion-fast);
}

.byt-tool-form input:hover,
.byt-tool-form select:hover,
.byt-inline-search input:hover {
    border-color: var(--byt-teal);
}

.byt-tool-actions {
    margin-top: 18px;
}

.byt-inline-search {
    display: grid;
    margin-top: 8px;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: end;
}

.byt-form-note {
    margin-top: 14px;
    font-size: 12.5px;
    color: var(--byt-muted);
}

/* --------------------------------------------------------------------------
   Trip tray
   -------------------------------------------------------------------------- */

.byt-trip-tray {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 80;
    display: none;
    width: min(24rem, calc(100vw - 2rem));
    max-height: calc(100vh - 2rem);
    overflow: auto;
    padding: 22px 24px;
    background: var(--byt-surface);
    border: 1px solid var(--byt-card-border);
    border-radius: var(--byt-radius-card);
    box-shadow: 0 30px 70px -30px rgba(10, 42, 46, 0.5);
}

.byt-trip-tray-open {
    display: block;
}

.byt-trip-tray-header {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}

.byt-trip-tray-header h2 {
    font-size: 16.5px;
}

.byt-icon-button {
    min-width: 32px;
    min-height: 32px;
    color: var(--byt-chip-ink);
    background: var(--byt-chip-surface);
    border: 0;
    border-radius: var(--byt-radius-pill);
    cursor: pointer;
    transition: background var(--byt-motion-fast), color var(--byt-motion-fast);
}

.byt-icon-button:hover {
    color: #FFFFFF;
    background: var(--byt-ink-strong);
}

.byt-trip-tray-list {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    gap: 12px;
    list-style: none;
}

.byt-trip-tray-list li,
.byt-alert-interest {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 18px;
    background: var(--byt-mint);
    border: 0;
    border-radius: var(--byt-radius-box);
}

.byt-trip-tray-list p,
.byt-alert-interest p {
    font-size: 13.5px;
    color: var(--byt-muted);
}

/* Preparation progress on a saved trip check. The count is the headline of the row, so it reads
   at the tray's own weight rather than as another line of supporting copy. */
.byt-trip-tray-list p.byt-tray-progress {
    font-family: var(--byt-font-mono);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--byt-ink);
}

.byt-trip-tray-list p.byt-tray-recheck {
    color: var(--byt-pill-amber-ink);
    font-weight: 500;
}

.byt-trip-tray-list button,
.byt-alert-interest button {
    padding: 8px 16px;
    color: var(--byt-secondary-ink);
    background: var(--byt-secondary-surface);
    border: 0;
    border-radius: var(--byt-radius-pill);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: background var(--byt-motion-fast), color var(--byt-motion-fast);
}

.byt-trip-tray-list button:hover,
.byt-alert-interest button:hover {
    color: #FFFFFF;
    background: var(--byt-ink-strong);
}

/* --------------------------------------------------------------------------
   Guides index
   -------------------------------------------------------------------------- */

.byt-guides-hero {
    box-sizing: border-box;
    max-width: 1140px;
    margin: 0 auto;
    padding: 92px 44px 0;
}

.byt-guides-hero__top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}

.byt-guides-hero .byt-eyebrow {
    font-family: var(--byt-font-mono);
    font-size: 10.5px;
    font-weight: 400;
    letter-spacing: 0.18em;
    color: var(--byt-link);
}

.byt-guides-stamp {
    margin: 0;
    font-family: var(--byt-font-mono);
    font-weight: 400;
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--byt-muted);
}

.byt-guides-hero h1 {
    margin: 16px 0 0;
    max-width: 760px;
    font-size: 64px;
    font-weight: 500;
    letter-spacing: -0.034em;
    line-height: 1.02;
}

.byt-guides-hero__lede {
    margin: 20px 0 0;
    max-width: 560px;
    font-size: 17px;
    line-height: 1.6;
    color: var(--byt-muted);
    text-wrap: pretty;
}

.byt-guides-body {
    box-sizing: border-box;
    max-width: 1140px;
    margin: 0 auto;
    padding: 44px 44px 112px;
}

.byt-guides-empty {
    margin: 0;
    padding: 26px 4px;
    border-top: 1px solid rgba(17, 29, 31, 0.08);
    border-bottom: 1px solid rgba(17, 29, 31, 0.08);
    font-size: 17px;
    line-height: 1.6;
    color: var(--byt-muted);
}

/* Topic chips ------------------------------------------------------------- */

.byt-guides-chips {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 36px;
}

.byt-guides-chip {
    border: 1px solid rgba(17, 29, 31, 0.18);
    border-radius: var(--byt-radius-pill);
    padding: 9px 18px;
    font-size: 13px;
    font-weight: 600;
    color: var(--byt-muted);
    text-decoration: none;
    transition: border-color var(--byt-motion-fast), background var(--byt-motion-fast), color var(--byt-motion-fast);
}

.byt-guides-chip:hover,
.byt-guides-chip:focus-visible {
    border-color: rgba(17, 29, 31, 0.5);
    color: var(--byt-ink-strong);
}

.byt-guides-chip--active,
.byt-guides-chip--active:hover,
.byt-guides-chip--active:focus-visible {
    background: var(--byt-link);
    border-color: var(--byt-link);
    color: var(--byt-on-deep);
}

/* Featured guide ---------------------------------------------------------- */

.byt-guide-feature {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    align-items: stretch;
    margin-bottom: 44px;
    background: var(--byt-surface);
    border: 1px solid rgba(17, 29, 31, 0.09);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 40px 90px -55px rgba(10, 42, 46, 0.5);
    color: var(--byt-ink-strong);
    text-decoration: none;
    transition: border-color var(--byt-motion-fast);
}

.byt-guide-feature:hover,
.byt-guide-feature:focus-visible {
    border-color: rgba(17, 29, 31, 0.35);
    color: var(--byt-ink-strong);
}

.byt-guide-feature__body {
    display: block;
    padding: 40px 44px 34px;
}

.byt-guide-feature__kicker {
    display: block;
    font-family: var(--byt-font-mono);
    font-weight: 400;
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--byt-gold-ink);
}

.byt-guide-feature__title {
    display: block;
    margin-top: 16px;
    font-size: 34px;
    font-weight: 500;
    letter-spacing: -0.025em;
    line-height: 1.08;
    text-wrap: balance;
}

.byt-guide-feature__summary {
    display: block;
    font-weight: 400;
    margin-top: 16px;
    max-width: 400px;
    font-size: 15px;
    line-height: 1.65;
    color: var(--byt-muted);
    text-wrap: pretty;
}

.byt-guide-feature__cta {
    display: inline-flex;
    margin-top: 22px;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--byt-link);
}

.byt-guide-feature__meta {
    display: block;
    margin-top: 26px;
    font-family: var(--byt-font-mono);
    font-weight: 400;
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--byt-muted);
}

.byt-guide-feature__panel {
    display: block;
    position: relative;
    background: var(--byt-deep);
    padding: 34px 36px;
}

.byt-guide-feature__panel::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(560px 320px at 85% 0%, rgba(15, 92, 103, 0.55), transparent 65%);
}

.byt-guide-feature__panel-inner {
    position: relative;
    display: block;
}

.byt-guide-feature__panel-kicker {
    display: block;
    font-family: var(--byt-font-mono);
    font-weight: 400;
    font-size: 9.5px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--byt-gold);
}

.byt-guide-feature__tiles {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 16px;
}

.byt-guide-feature__tile {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border: 1px solid rgba(250, 250, 249, 0.18);
    border-radius: 10px;
    padding: 13px 10px;
    font-size: 13px;
    font-weight: 500;
    color: var(--byt-on-deep);
}

/* Grid and rail ----------------------------------------------------------- */

.byt-guides-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 56px;
    align-items: start;
}

.byt-guides-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.byt-guide-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: var(--byt-surface);
    border: 1px solid rgba(17, 29, 31, 0.09);
    border-radius: var(--byt-radius-card);
    padding: 24px 26px 20px;
    color: var(--byt-ink-strong);
    text-decoration: none;
    transition: border-color var(--byt-motion-fast);
}

.byt-guide-card:hover,
.byt-guide-card:focus-visible {
    border-color: rgba(17, 29, 31, 0.45);
    color: var(--byt-ink-strong);
}

.byt-guide-card__top {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
}

.byt-guide-card__number {
    font-family: var(--byt-font-mono);
    font-weight: 400;
    font-size: 9px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--byt-muted);
}

.byt-guide-card__topic {
    font-family: var(--byt-font-mono);
    font-weight: 400;
    font-size: 9px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-align: right;
    color: var(--byt-link);
}

.byt-guide-card__title {
    font-size: 18.5px;
    font-weight: 600;
    letter-spacing: -0.012em;
    line-height: 1.25;
    text-wrap: balance;
}

.byt-guide-card__summary {
    font-weight: 400;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--byt-muted);
    text-wrap: pretty;
}

.byt-guide-card__meta {
    margin-top: auto;
    padding-top: 8px;
    font-family: var(--byt-font-mono);
    font-weight: 400;
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--byt-muted);
}

.byt-guides-rail {
    position: sticky;
    top: 84px;
}

.byt-guides-rail__kicker {
    margin: 0;
    font-family: var(--byt-font-mono);
    font-size: 9.5px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--byt-gold-ink);
}

.byt-guides-rail h2 {
    margin: 12px 0 0;
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.016em;
    line-height: 1.2;
}

.byt-guides-rail__copy {
    margin: 10px 0 18px;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--byt-muted);
}

.byt-guides-rail__link {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    padding: 13px 2px;
    border-top: 1px solid rgba(17, 29, 31, 0.08);
    font-size: 14px;
    font-weight: 600;
    color: var(--byt-ink-strong);
    text-decoration: none;
}

.byt-guides-rail__link span {
    color: var(--byt-link);
}

.byt-guides-rail__link:hover,
.byt-guides-rail__link:focus-visible {
    color: var(--byt-link);
}

.byt-guides-rail__note {
    margin-top: 24px;
    background: var(--byt-canvas);
    border: 1px solid rgba(17, 29, 31, 0.06);
    border-radius: 14px;
    padding: 18px 20px;
}

.byt-guides-rail__note p {
    margin: 8px 0 0;
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--byt-muted);
}

.byt-guides-rail__note-kicker {
    margin: 0;
    font-family: var(--byt-font-mono);
    font-size: 9px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--byt-muted);
}

/* --------------------------------------------------------------------------
   Guide reader

   The body is rendered by Platform.Ui.Components' ArticleRenderer, which owns
   its own typography. Only the column and the host header are styled here.
   -------------------------------------------------------------------------- */

.byt-guide-reader {
    box-sizing: border-box;
    display: block;
    max-width: 1140px;
    margin: 0 auto;
    /* The breadcrumb is the first thing under the header and is the route back, so it sits close
       to it. A tall opening band pushed it and the title below the fold for no gain. */
    padding: 40px 44px 112px;
}

/* Header and footer rules stop at the reading measure so every hairline on the
   page lines up with the body column instead of running past it. */
.byt-guide-reader__header,
.byt-guide-reader__footer,
.byt-guide-reader__body {
    max-width: 760px;
}

.byt-guide-reader__header {
    padding-bottom: 36px;
    border-bottom: 1px solid rgba(17, 29, 31, 0.08);
}

/* The shared breadcrumb sits where the eyebrow used to, so it inherits the header's rhythm: the
   h1's own top margin supplies the gap. These selectors carry an extra class on purpose, because
   the Platform component's scoped stylesheet loads after this file. */
.byt-guide-reader__header .byt-guide-breadcrumb.pui-breadcrumbs {
    margin-top: 0;
    margin-bottom: 0;
}

.byt-guide-reader__header .byt-guide-breadcrumb .pui-breadcrumbs__list {
    font-size: 13.5px;
}

/* Record facts strip, above the title: type, reading time and publication date. The shared
   template markup is reused; only the scale is brought down to this host's micro-label size. */
.byt-guide-reader__header .pui-page-template__meta {
    margin-top: 18px;
    gap: 6px 22px;
}

.byt-guide-reader__header .pui-page-template__meta dt {
    font-family: var(--byt-font-mono);
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 0.14em;
    color: var(--byt-muted);
}

.byt-guide-reader__header .pui-page-template__meta dd {
    font-size: 13px;
    font-weight: 600;
    color: var(--byt-ink);
}

/* Tags, below the summary. Chips follow the source-chip treatment already used across the host. */
.byt-guide-reader__header .pui-page-template__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 22px 0 0;
    padding: 0;
    list-style: none;
}

.byt-guide-reader__header .pui-page-template__tags span,
.byt-guide-reader__header .pui-page-template__tags a {
    min-height: 0;
    padding: 5px 12px;
    color: var(--byt-chip-ink);
    background: var(--byt-chip-surface);
    border: 0;
    border-radius: var(--byt-radius-pill);
    font-size: 12.5px;
    font-weight: 500;
    text-decoration: none;
}

.byt-guide-reader__header .byt-eyebrow {
    font-family: var(--byt-font-mono);
    font-size: 10.5px;
    font-weight: 400;
    letter-spacing: 0.18em;
    color: var(--byt-link);
}

.byt-guide-reader h1 {
    margin: 16px 0 0;
    max-width: 760px;
    font-size: 48px;
    font-weight: 500;
    letter-spacing: -0.028em;
    line-height: 1.06;
}

.byt-guide-reader__summary {
    margin: 20px 0 0;
    max-width: 620px;
    font-size: 17px;
    line-height: 1.6;
    color: var(--byt-muted);
    text-wrap: pretty;
}

.byt-guide-reader__meta {
    margin: 20px 0 0;
    font-family: var(--byt-font-mono);
    font-size: 10px;
    letter-spacing: 0.12em;
    color: var(--byt-muted);
}

.byt-guide-reader__meta:empty {
    display: none;
}

.byt-guide-reader__body {
    margin: 40px 0 0;
}

.byt-guide-reader__notice-copy {
    margin: 20px 0 0;
    max-width: 620px;
    font-size: 17px;
    line-height: 1.6;
    color: var(--byt-muted);
}

.byt-guide-reader__footer {
    margin: 56px 0 0;
    padding-top: 28px;
    border-top: 1px solid rgba(17, 29, 31, 0.08);
}

.byt-guide-reader__back {
    font-size: 15px;
    color: var(--byt-link);
}

.byt-guide-reader--notice h1 {
    font-size: 40px;
}

/* --------------------------------------------------------------------------
   Standalone auth cards (no header or footer)
   -------------------------------------------------------------------------- */

.magic-login-page {
    display: flex;
    min-height: 100vh;
    align-items: center;
    justify-content: center;
    padding: 44px;
    background: var(--byt-canvas);
}

.magic-login {
    display: block;
    box-sizing: border-box;
    width: 440px;
    max-width: 100%;
    padding: 34px 32px 36px;
    background: var(--byt-surface);
    border: 0;
    border-radius: 20px;
    box-shadow: 0 30px 60px -20px rgba(22, 50, 58, 0.18);
}

.magic-login__brand {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--byt-teal);
}

.magic-login__brand:hover {
    color: var(--byt-ink-strong);
}

.magic-login h1 {
    margin: 20px 0 0;
    font-size: 27px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.15;
    color: var(--byt-ink);
}

.magic-login__copy {
    margin: 10px 0 0;
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--byt-muted);
}

.magic-login__error {
    margin: 10px 0 0;
    font-size: 14.5px;
    color: var(--byt-pill-red-ink);
}

.magic-login__form {
    display: block;
    margin-top: 20px;
}

.magic-login__form label {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: var(--byt-ink);
}

.magic-login__form input {
    margin-top: 10px;
    width: 100%;
    box-sizing: border-box;
    padding: 13px 14px;
    color: var(--byt-ink);
    background: transparent;
    border: 1px solid rgba(22, 50, 58, 0.22);
    border-radius: var(--byt-radius-field);
    font-size: 15px;
}

.magic-login__form input:focus {
    border-color: var(--byt-teal);
}

.magic-login__form button,
.magic-login__link {
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin-top: 14px;
    padding: 14px 0;
    color: #FFFFFF;
    background: var(--byt-teal);
    border: 0;
    border-radius: var(--byt-radius-pill);
    font-size: 14.5px;
    font-weight: 700;
    text-align: center;
    cursor: pointer;
    transition: background var(--byt-motion-fast);
}

.magic-login__form button:hover,
.magic-login__link:hover {
    color: #FFFFFF;
    background: var(--byt-ink-strong);
}

.magic-login__link--quiet {
    display: inline-block;
    width: auto;
    margin-top: 16px;
    padding: 0;
    color: var(--byt-teal);
    background: transparent;
    font-size: 14.5px;
    font-weight: 700;
    text-align: left;
}

.magic-login__link--quiet:hover {
    color: var(--byt-ink-strong);
    background: transparent;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1023px) {
    .byt-hero-inner {
        grid-template-columns: minmax(0, 1fr);
        gap: 48px;
        padding: 64px 28px 72px;
    }

    .byt-hero-copy h1 {
        font-size: clamp(38px, 6vw, 62px);
    }

    .byt-report-hero {
        grid-template-columns: minmax(0, 1fr);
        gap: 28px;
    }

    .byt-card-grid,
    .byt-definition-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .byt-popular-trip-grid,
    .byt-coverage-grid {
        grid-template-columns: minmax(0, 1fr);
        column-gap: 0;
    }

    .footer-shell--wrapped .footer-top {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 32px;
        padding: 48px 28px 32px;
    }

    .footer-shell .footer-legal {
        padding: 0 28px 32px;
    }

    .byt-home-section,
    .byt-home-band-inner,
    .byt-home-cta,
    .byt-guides-hero,
    .byt-guides-body,
    .byt-guide-reader {
        padding-left: 28px;
        padding-right: 28px;
    }

    /* The rail drops below the grid before the grid itself collapses. */
    .byt-guides-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 44px;
    }

    .byt-guides-rail {
        position: static;
    }
}

@media (max-width: 900px) {
    /* backdrop-filter makes .nav-shell a containing block for fixed children,
       which would anchor the shared off-canvas drawer to the header instead of
       the viewport and push the page sideways. The bar goes opaque instead.
       The sticky z-index also has to clear the shared scrim (1000), because the
       drawer is a child of this header and cannot escape its stacking context. */
    .nav-shell {
        z-index: 1002;
        background: var(--byt-canvas-warm);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

    .nav-shell .nav-container {
        display: flex;
        flex-wrap: wrap;
        height: auto;
        padding: 12px 20px;
    }

    /* The drawer is an opaque panel: the desktop bar's translucency would leave
       page content showing through the links. */
    .nav-shell .nav-links {
        display: flex;
        background: var(--byt-canvas-warm);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

    .nav-shell .nav-list {
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        width: 100%;
        gap: 4px;
        white-space: normal;
    }

    .nav-shell .nav-list a,
    .nav-shell .nav-dropdown-button {
        padding: 10px 0;
        font-size: 15px;
    }

    .nav-shell .nav-dropdown {
        width: 100%;
    }

    .nav-shell .nav-sublist {
        padding: 12px 0 0;
        border: 0;
        box-shadow: none;
    }

    /* The drawer has no panel padding to bleed into, so the links sit flush. */
    .nav-shell .nav-sublist a {
        margin: 0;
        padding: 8px 10px 8px 0;
    }

    .nav-shell .nav-actions {
        justify-self: stretch;
    }
}

@media (max-width: 767px) {
    .byt-page-shell {
        padding: 20px 16px 56px;
    }

    .byt-page-hero,
    .byt-report-hero {
        padding: 28px 22px;
    }

    .byt-page-hero h1,
    .byt-report-hero h1 {
        font-size: clamp(30px, 8vw, 44px);
    }

    .byt-card,
    .byt-report-section {
        padding: 22px 20px;
    }

    .byt-form-grid,
    .byt-toggle-fields,
    .byt-card-grid,
    .byt-report-grid,
    .byt-module-grid,
    .byt-action-card-grid,
    .byt-source-list,
    .byt-definition-grid,
    .byt-tool-form,
    .byt-inline-search {
        grid-template-columns: minmax(0, 1fr);
    }

    .byt-metric-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px;
    }

    .byt-band-list li {
        grid-template-columns: 1fr 70px;
    }

    .byt-band-list .byt-band-track {
        grid-column: 1 / -1;
    }

    .byt-home-section,
    .byt-home-cta {
        padding-top: 64px;
        padding-bottom: 64px;
    }

    .byt-home-band-inner {
        padding-top: 64px;
        padding-bottom: 64px;
    }

    .byt-home-heading h2,
    .byt-home-band h2 {
        font-size: clamp(28px, 8vw, 40px);
    }

    .byt-home-cta h2 {
        font-size: clamp(32px, 9vw, 48px);
    }

    .byt-guides-hero {
        padding-top: 56px;
    }

    .byt-guides-hero h1 {
        font-size: clamp(36px, 10vw, 64px);
    }

    .byt-guides-grid,
    .byt-guide-feature {
        grid-template-columns: minmax(0, 1fr);
    }

    .byt-guide-feature__body {
        padding: 28px 26px 24px;
    }

    .byt-guide-feature__title {
        font-size: clamp(26px, 7.5vw, 34px);
    }

    .byt-guide-feature__panel {
        padding: 26px;
    }

    .byt-guide-reader {
        padding-top: 56px;
    }

    .byt-guide-reader h1 {
        font-size: clamp(30px, 8.5vw, 48px);
    }

    .byt-guide-reader--notice h1 {
        font-size: clamp(28px, 8vw, 40px);
    }

    .byt-status-panel-actions,
    .byt-status-panel-actions .byt-button {
        width: 100%;
    }

    .byt-trip-tray {
        right: 0.75rem;
        bottom: 0.75rem;
        width: calc(100vw - 1.5rem);
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .byt-rise,
    .byt-trip-form.byt-rise {
        animation: none;
    }

    .nav-shell .nav-sublist {
        transition: none;
    }
}