html,
body {
    min-height: 100%;
}

body {
    margin: 0;
    background: var(--mud-palette-background);
    color: var(--mud-palette-text-primary);
    font-family: var(--mud-typography-default-family);
}

h1:focus {
    outline: none;
}

.football-shell.rtl {
    direction: rtl;
}

.football-appbar {
    border-bottom: 1px solid var(--mud-palette-divider);
    background: var(--mud-palette-surface);
}

.football-brand {
    min-width: 0;
    text-transform: none;
}

.football-brand-text {
    font-weight: 700;
    letter-spacing: 0;
    white-space: nowrap;
}

.football-topnav {
    gap: 0.25rem;
}

.football-topnav-link {
    text-transform: none;
    font-weight: 600;
}

.football-culture-select {
    width: 150px;
    margin-inline-end: 0.75rem;
}

.culture-option {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-width: 0;
}

.culture-option img {
    width: 22px;
    height: 15px;
    object-fit: cover;
    border-radius: 2px;
    box-shadow: 0 0 0 1px var(--mud-palette-divider);
    flex: 0 0 auto;
}

.football-drawer {
    border-inline-end: 1px solid var(--mud-palette-divider);
}

.football-main {
    min-height: calc(100vh - 64px);
    background: var(--mud-palette-background);
}

.football-content {
    padding: 88px 24px 32px;
}

.football-nav-shell {
    min-height: 100%;
    background: var(--mud-palette-background);
}

.football-nav-header,
.football-nav-footer,
.section-panel,
.metric-card,
.persona-card,
.user-chip {
    border: 1px solid var(--mud-palette-divider);
    border-radius: 8px;
    background: var(--mud-palette-surface);
}

.football-nav-menu .mud-nav-link {
    border-radius: 6px;
    margin-inline: 0.5rem;
}

.page-heading {
    gap: 1rem;
}

.football-hero {
    align-items: center;
    border: 1px solid var(--mud-palette-divider);
    border-radius: 8px;
    display: grid;
    gap: 1.5rem;
    grid-template-columns: minmax(0, 1fr) 148px;
    overflow: hidden;
    padding: 1.5rem;
}

.football-hero-copy {
    min-width: 0;
}

.football-hero-image {
    height: 132px;
    justify-self: end;
    max-width: 100%;
    object-fit: contain;
}

.metric-card,
.persona-card,
.section-panel {
    padding: 1rem;
}

.metric-card {
    align-items: center;
    display: flex;
    gap: 0.85rem;
    min-height: 112px;
}

.metric-icon {
    height: 48px;
    width: 48px;
    object-fit: contain;
    flex: 0 0 auto;
}

.persona-card {
    min-height: 150px;
}

.persona-card-header {
    align-items: center;
    display: flex;
    gap: 0.75rem;
    min-width: 0;
}

.persona-icon {
    height: 40px;
    width: 40px;
    object-fit: contain;
    flex: 0 0 auto;
}

.danger-panel {
    border-color: var(--mud-palette-error);
}

.football-footer {
    border-top: 1px solid var(--mud-palette-divider);
    padding: 2rem 0;
    background: var(--mud-palette-surface);
}

.football-footer-grid {
    display: grid;
    grid-template-columns: 2fr repeat(3, 1fr);
    gap: 1.5rem;
}

.footer-link {
    display: block;
    margin-top: 0.4rem;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--mud-palette-success);
}

.invalid {
    outline: 1px solid var(--mud-palette-error);
}

.validation-message {
    color: var(--mud-palette-error);
}

#blazor-error-ui {
    background: var(--mud-palette-error);
    bottom: 0;
    color: white;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

@media (max-width: 959px) {
    .football-desktop-only {
        display: none !important;
    }

    .football-content {
        padding: 80px 14px 24px;
    }

    .football-hero {
        grid-template-columns: 1fr;
    }

    .football-hero-image {
        justify-self: start;
    }

    .football-footer-grid {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 960px) {
    .football-mobile-only {
        display: none !important;
    }
}

/* ==========================================================================
   The pitch panel
   --------------------------------------------------------------------------
   The visual language of the player card (art/Sample/playercard.png), lifted
   out of that one component so every knowledge-bank detail page shares it.
   Deep navy ground, lime marks, hairline rules.

   These are deliberately not the MudBlazor palette. A club page and a player
   card sitting side by side in two different visual worlds reads as two
   products; the list pages stay on the app theme because a dense data grid is
   a different kind of surface from a card.
   ========================================================================== */

/* Derived from the MudBlazor palette, never pinned.
   ---------------------------------------------------------------------------
   These used to be seven hardcoded hex values — a dark navy panel with a lime
   accent — which meant the shell ignored the branding entirely: switching theme
   or turning on dark mode changed MudBlazor's own components and left every
   panel, table and chip in this file exactly as it was.

   Reading them from --mud-palette-* instead is how the other TheTechIdea apps
   do it, and it is why this one now follows the shared Ocean branding. It also
   makes dark mode work for free: MudBlazor rewrites those variables, and
   everything built on them follows.

   color-mix rather than fixed tints, so a tint stays correct against whatever
   surface the theme puts behind it. */
:root {
    /* The panel gradient: the theme's surface, lifted very slightly toward the
       brand at the top so a panel still reads as raised rather than flat. */
    --pitch-navy-top: color-mix(in srgb, var(--mud-palette-primary) 7%, var(--mud-palette-surface));
    --pitch-navy-bottom: var(--mud-palette-surface);

    /* The accent. Named for the lime it used to be; it is the brand colour now,
       and the two names below stay because every component already uses them. */
    --pitch-lime: var(--mud-palette-primary);
    --pitch-lime-bright: var(--mud-palette-primary-darken);

    --pitch-line: var(--mud-palette-lines-default);
    --pitch-ink: var(--mud-palette-text-primary);
    --pitch-ink-dim: var(--mud-palette-text-secondary);
}

.pitch-panel {
    padding: 1.25rem 1.4rem;
    border-radius: var(--mud-default-borderradius, 12px);
    background: linear-gradient(160deg, var(--pitch-navy-top), var(--pitch-navy-bottom));
    border: 1px solid var(--pitch-line);
    /* Softer than the old dark-panel shadow, because the panel no longer floats
       on near-black. */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.04);
    color: var(--pitch-ink);
}

/* MudBlazor writes its own text colours; inside a pitch panel they would be
   near-black on navy. Scoped to this container so the rest of the app keeps
   the app theme. */
.pitch-panel .mud-typography,
.pitch-panel .mud-input-label,
.pitch-panel .mud-select-input .mud-input-slot {
    color: var(--pitch-ink);
}

.pitch-panel .mud-typography.mud-secondary-text,
.pitch-panel .mud-text-secondary {
    color: var(--pitch-ink-dim);
}

.pitch-panel__title {
    margin: 0 0 0.75rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--pitch-ink-dim);
}

.pitch-panel__heading {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
}

.pitch-panel a,
.pitch-panel .mud-link {
    color: var(--pitch-lime-bright);
    text-decoration: none;
}

.pitch-panel a:hover,
.pitch-panel .mud-link:hover {
    text-decoration: underline;
}

.pitch-panel a:focus-visible {
    outline: 2px solid var(--pitch-lime-bright);
    outline-offset: 2px;
}

/* -- Tables -------------------------------------------------------------- */

.pitch-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.pitch-table th {
    padding: 0.35rem 0.5rem;
    border-bottom: 1px solid var(--pitch-line);
    text-align: start;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--pitch-ink-dim);
    white-space: nowrap;
}

.pitch-table td {
    padding: 0.45rem 0.5rem;
    border-bottom: 1px solid var(--pitch-line);
}

.pitch-table tbody tr:hover td {
    background: color-mix(in srgb, var(--mud-palette-primary) 6%, var(--mud-palette-surface));
}

.pitch-table .num {
    font-variant-numeric: tabular-nums;
}

/* Wide tables scroll in their own box; the page never scrolls sideways. */
.pitch-scroll {
    overflow-x: auto;
}

/* -- Chips and stated absences ------------------------------------------- */

.pitch-chip {
    display: inline-block;
    padding: 0.08rem 0.5rem;
    border: 1px solid var(--pitch-line);
    border-radius: 999px;
    font-size: 0.72rem;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

.pitch-chip--live {
    border-color: var(--pitch-lime);
    color: var(--pitch-lime-bright);
}

.pitch-chip--warn {
    border-color: var(--mud-palette-warning);
    color: var(--mud-palette-warning);
}

/* The dashed box that says what is not being shown, and why. It is quieter
   than an error and louder than nothing, which is exactly the register an
   absence needs. */
.pitch-absence {
    padding: 0.65rem 0.8rem;
    border: 1px dashed var(--pitch-line);
    border-radius: 10px;
    font-size: 0.82rem;
    line-height: 1.45;
    color: var(--pitch-ink-dim);
}

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

.pitch-note {
    margin: 0.6rem 0 0;
    font-size: 0.75rem;
    color: var(--pitch-ink-dim);
}

.pitch-muted {
    color: var(--pitch-ink-dim);
}

.pitch-empty {
    font-size: 0.88rem;
    color: var(--pitch-ink-dim);
}

/* -- The list grids ------------------------------------------------------
   A MudDataGrid dressed in the pitch language, so the four list pages match
   the four detail pages they lead to.

   Scoped under .pitch-grid so nothing here reaches the admin screens or the
   dashboards, which stay on the app theme. The class list below is what
   MudBlazor 9.7 actually renders — read off the page rather than guessed, since
   these are internal names and a wrong guess fails silently by simply not
   applying.
   ------------------------------------------------------------------------ */

.pitch-grid.mud-data-grid,
.pitch-grid .mud-table,
.pitch-grid .mud-table-container,
.pitch-grid .mud-toolbar,
.pitch-grid .mud-table-pagination {
    background: transparent;
    color: var(--pitch-ink);
}

.pitch-grid .mud-table-head .mud-table-cell {
    border-bottom: 1px solid var(--pitch-line);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--pitch-ink-dim);
}

.pitch-grid .mud-table-body .mud-table-cell {
    border-bottom: 1px solid var(--pitch-line);
    color: var(--pitch-ink);
}

.pitch-grid .mud-table-hover .mud-table-body .mud-table-row:hover {
    background: color-mix(in srgb, var(--mud-palette-primary) 6%, var(--mud-palette-surface));
}

.pitch-grid .mud-typography,
.pitch-grid .mud-table-pagination-caption,
.pitch-grid .mud-input-label {
    color: var(--pitch-ink);
}

.pitch-grid .mud-typography.mud-secondary-text,
.pitch-grid .mud-secondary-text {
    color: var(--pitch-ink-dim);
}

/* Links in a row take the lime, like every other link on a pitch panel. */
.pitch-grid .mud-link {
    color: var(--pitch-lime-bright);
}

/* The search box and the rows-per-page select. */
.pitch-grid .mud-input-slot,
.pitch-grid .mud-input-root {
    color: var(--pitch-ink);
}

.pitch-grid .mud-input-outlined-border {
    border-color: var(--pitch-line);
}

.pitch-grid .mud-input-root:hover .mud-input-outlined-border {
    border-color: var(--pitch-ink-dim);
}

.pitch-grid .mud-input-adornment-icon,
.pitch-grid .mud-table-pagination-actions .mud-icon-root {
    color: var(--pitch-ink-dim);
}

/* Sort arrows and the column-options button. */
.pitch-grid .mud-table-head .mud-button-root,
.pitch-grid .mud-table-head .mud-icon-root {
    color: var(--pitch-ink-dim);
}

.pitch-grid .mud-table-head .mud-button-root:hover {
    color: var(--pitch-ink);
}

/* A disabled pager arrow must still read as disabled, whatever surface the
   theme puts behind it. */
.pitch-grid .mud-icon-button.mud-disabled .mud-icon-root {
    color: var(--mud-palette-action-disabled);
}

/* -- Settings ------------------------------------------------------------ */

/* A configuration key is an identifier, not prose: it is copied into a file or
   an environment variable, so it is set in the face that shows where one
   character ends and the next begins. */
.settings-key {
    display: block;
    font-family: ui-monospace, "Cascadia Code", "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.78rem;
    color: var(--pitch-ink);
    word-break: break-all;
}

.settings-note {
    display: block;
    margin-top: 0.2rem;
    max-width: 46ch;
    font-size: 0.72rem;
    line-height: 1.4;
    color: var(--pitch-ink-dim);
}

.settings-value {
    font-family: ui-monospace, "Cascadia Code", "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.8rem;
    word-break: break-word;
}

/* Unset reads as unset. Rendered in the same dim register as a stated absence
   elsewhere, so an empty setting cannot be mistaken for a value that happens to
   be short. */
.settings-unset {
    font-size: 0.8rem;
    font-style: italic;
    color: var(--pitch-ink-dim);
}

/* The provider, quieter than the value it explains. */
.settings-source {
    font-size: 0.72rem;
    line-height: 1.4;
    color: var(--pitch-ink-dim);
    word-break: break-word;
}

/* The preview is the one place on this screen showing the setting rather than
   naming it, so it gets the lime the rest of the shell reserves for a live
   figure. */
.settings-preview {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.75rem;
    padding: 0.7rem 0.9rem;
    border: 1px solid var(--pitch-line);
    border-radius: 10px;
    background: color-mix(in srgb, var(--mud-palette-primary) 4%, var(--mud-palette-surface));
}

.settings-preview__label {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--pitch-ink-dim);
}

.settings-preview__value {
    font-size: 1.05rem;
    font-variant-numeric: tabular-nums;
    color: var(--pitch-lime-bright);
}

/* -- Players index ------------------------------------------------------- */

/* The shirt number, beside the name rather than in a column of its own: it is
   an attribute of the registration, not a fact worth sorting a career-scale
   list by. */
.players-shirt {
    display: inline-block;
    margin-inline-start: 0.4rem;
    padding: 0 0.35rem;
    border: 1px solid var(--pitch-line);
    border-radius: 4px;
    font-size: 0.68rem;
    font-variant-numeric: tabular-nums;
    color: var(--pitch-ink-dim);
}

.players-since {
    display: inline-block;
    margin-inline-start: 0.4rem;
    font-size: 0.72rem;
    color: var(--pitch-ink-dim);
    white-space: nowrap;
}

/* The separator between the two sides of a fixture. Quiet, because the club
   names are the content and this is punctuation. */
.matches-versus {
    margin: 0 0.4rem;
    font-size: 0.78rem;
    color: var(--pitch-ink-dim);
}

.matches-season {
    margin-inline-start: 0.4rem;
    font-size: 0.72rem;
    color: var(--pitch-ink-dim);
    white-space: nowrap;
}

/* -- Operations ---------------------------------------------------------- */

/* The one-time token. Loud, because it cannot be recovered: this is the only
   moment it exists anywhere outside the operator's clipboard. */
.token-issued {
    border: 1px solid var(--pitch-lime);
}

.token-value {
    padding: 0.7rem 0.9rem;
    border: 1px solid var(--pitch-line);
    border-radius: 8px;
    background: color-mix(in srgb, var(--mud-palette-text-primary) 6%, var(--mud-palette-surface));
    font-family: ui-monospace, "Cascadia Code", "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.9rem;
    color: var(--pitch-lime-bright);
    word-break: break-all;
    user-select: all;
}

/* Settled rather than live — a decided request, or a disabled account. Dimmed
   rather than hidden: it is still part of the record of what happened. */
.token-inert td {
    opacity: 0.55;
}

.token-inert {
    opacity: 0.62;
}

/* -- Access administration ----------------------------------------------- */

/* The roles a person may hold, as a grid rather than a list.

   Every role is shown for every account, held or not, because the question an
   administrator is answering is "what should this person have" — and a list of
   only what they already have cannot be used to answer it. The grid keeps the
   same roles in the same place down the page, so scanning a column reads as
   "who is a scout" without opening anything. */
.access-roles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: 0.1rem 1rem;
}

.access-role-name {
    font-weight: 500;
    margin-inline-end: 0.4rem;
}

/* -- Landing page -------------------------------------------------------- */

/* The front door. Shares the pitch palette with the rest of the shell, so
   arriving signed-in does not feel like a different product. */
.landing {
    display: flex;
    flex-direction: column;
    gap: 3.5rem;
    padding-bottom: 2rem;
}

.landing-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 2rem;
    align-items: center;
    padding: 2.5rem 2rem;
    border: 1px solid var(--pitch-line);
    border-radius: 18px;
    background:
        radial-gradient(120% 140% at 85% 15%,
            color-mix(in srgb, var(--mud-palette-primary) 14%, transparent), transparent 60%),
        linear-gradient(160deg,
            color-mix(in srgb, var(--mud-palette-primary) 6%, var(--mud-palette-surface)),
            var(--mud-palette-surface));
}

.landing-eyebrow {
    margin: 0 0 0.6rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--pitch-lime-bright);
}

.landing-title {
    margin: 0;
    font-size: clamp(1.9rem, 4vw, 3rem);
    line-height: 1.1;
    text-wrap: balance;
    color: var(--pitch-ink);
}

.landing-lede {
    margin: 1rem 0 0;
    max-width: 56ch;
    font-size: 1.05rem;
    line-height: 1.6;
    color: var(--pitch-ink-dim);
}

.landing-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.75rem;
}

.landing-hero__art img {
    display: block;
    width: 100%;
    max-width: 260px;
    margin-inline-start: auto;
}

.landing-h2 {
    margin: 0 0 0.5rem;
    font-size: 1.35rem;
    color: var(--pitch-ink);
}

.landing-sub {
    margin: 0 0 1.5rem;
    max-width: 62ch;
    color: var(--pitch-ink-dim);
}

.landing-steps,
.landing-personas {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

.landing-step,
.landing-persona {
    padding: 1.25rem;
    border: 1px solid var(--pitch-line);
    border-radius: 14px;
    background: color-mix(in srgb, var(--mud-palette-primary) 4%, var(--mud-palette-surface));
}

.landing-persona {
    display: flex;
    gap: 0.9rem;
    align-items: flex-start;
}

.landing-step img,
.landing-persona img {
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
}

.landing-step img {
    margin-bottom: 0.75rem;
}

.landing-step h3,
.landing-persona h3 {
    margin: 0 0 0.35rem;
    font-size: 0.98rem;
    color: var(--pitch-ink);
}

.landing-step p,
.landing-persona p {
    margin: 0;
    font-size: 0.86rem;
    line-height: 1.5;
    color: var(--pitch-ink-dim);
}

.landing-rules {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.85rem;
    grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
}

.landing-rules li {
    padding-inline-start: 0.9rem;
    /* A rule, marked by a rule. Border-inline-start so it stays on the reading
       side in Arabic. */
    border-inline-start: 2px solid var(--pitch-lime);
}

.landing-rules strong {
    display: block;
    color: var(--pitch-ink);
}

.landing-rules span {
    font-size: 0.86rem;
    line-height: 1.5;
    color: var(--pitch-ink-dim);
}

/* The connection fact, stated quietly at the foot. */
.landing-status {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.55rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--pitch-line);
    font-size: 0.78rem;
    color: var(--pitch-ink-dim);
}

.landing-status__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--pitch-lime);
}

.landing-status__dot--down {
    background: var(--mud-palette-warning);
}

.landing-status__detail {
    font-family: ui-monospace, "Cascadia Code", "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.72rem;
    opacity: 0.75;
}

@media (max-width: 800px) {
    .landing-hero {
        grid-template-columns: 1fr;
    }

    .landing-hero__art {
        display: none;
    }
}

/* -- Landing shell ------------------------------------------------------- */

/* The front door's own chrome. No navigation menu, no app bar, no footer links
   — those all ask the API who you are, and this page asks nothing. */
.landing-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--mud-palette-background);
    color: var(--pitch-ink);
}

.landing-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--pitch-line);
}

.landing-bar__brand {
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--pitch-ink);
    text-decoration: none;
}

.landing-bar__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem;
    margin-inline-start: auto;
}

.landing-bar__lang {
    font-size: 0.82rem;
    color: var(--pitch-ink-dim);
    text-decoration: none;
}

.landing-bar__lang:hover,
.landing-bar__lang:focus-visible {
    color: var(--pitch-ink);
}

.landing-bar__lang.is-current {
    color: var(--pitch-lime-bright);
}

.landing-main {
    flex: 1;
    width: 100%;
    max-width: 1120px;
    margin: 0 auto;
    padding: 2rem 1.5rem 0;
}

.landing-foot {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.5rem;
    max-width: 1120px;
    width: 100%;
    margin: 0 auto;
    padding: 1.5rem;
    font-size: 0.75rem;
    color: var(--pitch-ink-dim);
}


/* -- Landing chrome ------------------------------------------------------ */

/* Visible only when focused, so a keyboard user can jump the header. */
.landing-skip {
    position: absolute;
    inset-inline-start: -9999px;
    top: 0.5rem;
    z-index: 10;
    padding: 0.5rem 0.9rem;
    border-radius: var(--mud-default-borderradius, 8px);
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
}

.landing-skip:focus {
    inset-inline-start: 0.5rem;
}

.landing-bar__brand {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-weight: 700;
    color: var(--pitch-ink);
    text-decoration: none;
}

/* The short name as a mark, so the header has an anchor point at small widths
   where the full name is hidden. */
.landing-bar__mark {
    display: inline-grid;
    place-items: center;
    padding: 0.2rem 0.5rem;
    border-radius: var(--mud-default-borderradius, 8px);
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    font-size: 0.7rem;
    letter-spacing: 0.06em;
}

.landing-bar__nav {
    display: flex;
    gap: 1.25rem;
    margin-inline-start: 1.5rem;
}

.landing-bar__nav a {
    font-size: 0.85rem;
    color: var(--pitch-ink-dim);
    text-decoration: none;
}

.landing-bar__nav a:hover,
.landing-bar__nav a:focus-visible {
    color: var(--pitch-ink);
}

.landing-bar__cta {
    padding: 0.4rem 0.9rem;
    border-radius: 999px;
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.landing-bar__cta:hover,
.landing-bar__cta:focus-visible {
    background: var(--mud-palette-primary-darken);
}

/* The second half of the headline, quieter than the first — the two-tone
   treatment the reference comps use to break a long line. */
.landing-title__rest {
    display: block;
    color: var(--mud-palette-text-secondary);
}

/* -- Closing call to action ---------------------------------------------- */

.landing-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    align-items: center;
    justify-content: space-between;
    padding: 2rem;
    border-radius: 18px;
    background: linear-gradient(120deg,
        color-mix(in srgb, var(--mud-palette-primary) 16%, var(--mud-palette-surface)),
        color-mix(in srgb, var(--mud-palette-tertiary) 12%, var(--mud-palette-surface)));
    border: 1px solid var(--pitch-line);
}

.landing-cta__title {
    margin: 0;
    font-size: 1.4rem;
    color: var(--pitch-ink);
}

.landing-cta__body {
    margin: 0.5rem 0 0;
    max-width: 52ch;
    color: var(--pitch-ink-dim);
}

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

.landing-foot__grid {
    display: grid;
    gap: 2rem;
    grid-template-columns: minmax(0, 1.6fr) repeat(auto-fit, minmax(9rem, 1fr));
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--pitch-line);
}

.landing-foot__brand {
    margin: 0;
    font-weight: 700;
    color: var(--pitch-ink);
}

.landing-foot__tag {
    margin: 0.35rem 0 0;
    max-width: 40ch;
}

.landing-foot__heading {
    margin: 0 0 0.6rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--pitch-ink-dim);
}

.landing-foot__grid a {
    display: block;
    margin-bottom: 0.35rem;
    color: var(--pitch-ink-dim);
    text-decoration: none;
}

.landing-foot__grid a:hover,
.landing-foot__grid a:focus-visible {
    color: var(--mud-palette-primary);
}

.landing-foot__legal {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.5rem;
    padding-top: 1.25rem;
}

.landing-foot__version {
    margin-inline-start: auto;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 720px) {
    .landing-bar__nav,
    .landing-bar__name {
        display: none;
    }
}