/* ========================================
   The web as a guide: the crossroads, the two guides (js/guide.js), the
   data cards, "Strom is empty?", the glossary and the import block.
   Loaded on /, /data/, /research/ and /research/help/ after style.css.
   ======================================== */

/* An old anchor kept as an empty span at its new target */
.anchor-alias {
    display: block;
    height: 0;
    scroll-margin-top: calc(var(--header-height) + 8px);
}

/* Texts that wait for a confirmed fact: dropped by the build, hidden here */
[data-fact][hidden] {
    display: none !important;
}

/* The steps for the page without JavaScript: hidden once guide.js runs */
html.js-guide .g-static {
    display: none;
}

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

/* A line for a computer or for a phone (guide.js marks a phone) */
.on-phone,
html.g-phone-env .on-pc {
    display: none;
}

html.g-phone-env .on-phone {
    display: inline;
}

/* ---------------------------------------------------------------- hero */

.hero.hero-about {
    min-height: 0;
    padding-bottom: var(--space-2xl);
}

.hero-about .hero-subtitle {
    max-width: 560px;
}

.hero-offline {
    margin-top: var(--space-md);
    font-size: 0.9375rem;
    color: var(--color-muted);
}

/* ---------------------------------------------------------- crossroads */

.crossroads {
    position: relative;
    z-index: 1;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--space-lg) var(--space-3xl);
    scroll-margin-top: var(--header-height);
}

.cr-title {
    font-family: var(--font-display);
    font-size: 1.75rem;
    color: var(--color-forest);
    margin-bottom: var(--space-lg);
}

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

.cr-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 24px;
    border: 2px solid var(--color-border);
    border-radius: 16px;
    background: var(--color-cream);
    color: var(--color-ink);
    transition: border-color var(--transition-fast), background var(--transition-fast);
}

.cr-tile:hover,
.cr-tile:focus-visible {
    border-color: var(--color-sage);
}

.cr-tile strong {
    font-size: 1.0625rem;
    color: var(--color-forest);
    line-height: 1.35;
}

.cr-tile > span:not(.cr-ico):not(.cr-mark) {
    font-size: 0.9375rem;
    color: var(--color-muted);
}

.cr-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin-bottom: 6px;
    border-radius: 12px;
    background: var(--color-paper);
    border: 1px solid var(--color-border);
    color: var(--color-sage);
    font-weight: 700;
    font-size: 0.8125rem;
}

.cr-ico svg {
    width: 28px;
    height: 28px;
}

.cr-mark {
    display: none;
    align-self: flex-start;
    padding: 2px 10px;
    border-radius: 100px;
    background: var(--color-mint);
    color: var(--color-forest);
    font-size: 0.75rem;
    font-weight: 600;
}

.cr-tile.is-device {
    background: #eef5ef;
    border-color: var(--color-mint);
}

.cr-tile.is-device .cr-mark {
    display: inline-block;
}

.cr-note {
    margin-top: var(--space-md);
    font-size: 0.875rem;
    color: var(--color-muted);
}

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

    .cr-tile {
        display: grid;
        grid-template-columns: 48px 1fr;
        column-gap: 16px;
        row-gap: 4px;
        padding: 18px;
    }

    .cr-ico {
        grid-row: span 3;
        margin: 0;
    }
}

/* -------------------------------------------------------------- guides */

.guide {
    position: relative;
    z-index: 1;
    padding: var(--space-3xl) var(--space-lg);
    scroll-margin-top: var(--header-height);
}

.guide + .guide {
    border-top: 1px solid var(--color-border);
}

.guide-inner {
    max-width: 1000px;
    margin: 0 auto;
}

.guide-title {
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 4vw, 2.25rem);
    color: var(--color-forest);
    margin-bottom: var(--space-lg);
}

.guide-foot {
    margin-top: var(--space-lg);
    font-size: 0.9375rem;
    color: var(--color-muted);
}

.guide-foot a {
    color: var(--color-forest);
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.g-row {
    margin-bottom: var(--space-lg);
}

.g-q {
    font-family: var(--font-body);
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--color-ink);
    margin-bottom: 10px;
}

.g-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
}

.g-tiles--mini {
    margin-top: 12px;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
}

.g-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    min-height: 112px;
    padding: 16px;
    border: 2px solid var(--color-border);
    border-radius: 14px;
    background: var(--color-paper);
    color: var(--color-ink);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color var(--transition-fast), background var(--transition-fast);
}

.g-tile:hover {
    border-color: var(--color-sage);
}

.g-tile:focus-visible {
    outline: 3px solid var(--color-mint);
    outline-offset: 2px;
}

.g-tile.is-pre {
    border-color: var(--color-mint);
}

.g-tile[aria-pressed="true"] {
    border-color: var(--color-forest);
    background: #eef5ef;
}

.g-tile.is-off {
    opacity: 0.55;
}

.g-tile[aria-disabled="true"] {
    cursor: not-allowed;
}

.g-tiles--mini .g-tile,
.g-tile--mini {
    min-height: 48px;
    padding: 10px 14px;
}

.g-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    color: var(--color-sage);
}

.g-ico svg {
    width: 30px;
    height: 30px;
}

.g-mono {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 32px;
    padding: 0 6px;
    border-radius: 8px;
    background: var(--color-cream);
    border: 1px solid var(--color-border);
    color: var(--color-forest);
    font-size: 0.8125rem;
    font-weight: 700;
}

.g-tname {
    font-size: 1rem;
    color: var(--color-forest);
    line-height: 1.3;
}

.g-tsub {
    font-size: 0.8125rem;
    color: var(--color-muted);
    line-height: 1.35;
}

.g-twhy {
    font-size: 0.8125rem;
    color: #7a5a1e;
    line-height: 1.35;
}

.g-badge,
.g-badge-pre {
    display: inline-block;
    margin-top: 4px;
    padding: 1px 8px;
    border-radius: 100px;
    background: var(--color-mint);
    color: var(--color-forest);
    font-size: 0.75rem;
    font-weight: 600;
}

.g-badge--muted {
    background: var(--color-cream);
    color: var(--color-muted);
    border: 1px solid var(--color-border);
}

.g-badge-pre {
    background: transparent;
    border: 1px solid var(--color-mint);
    font-weight: 500;
}

.g-check {
    position: absolute;
    top: 10px;
    right: 10px;
    display: none;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--color-forest);
    color: #fff;
    font-size: 0.8125rem;
    line-height: 24px;
    text-align: center;
}

.g-tile[aria-pressed="true"] .g-check {
    display: block;
}

.g-tiles--mini .g-check {
    top: 50%;
    transform: translateY(-50%);
}

.g-mini {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
}

.g-note,
.g-row > .g-note {
    font-size: 0.875rem;
    color: var(--color-muted);
}

.g-row > .g-note {
    margin-top: 8px;
}

.g-box {
    padding: 14px 16px;
    border-radius: 12px;
    background: #fbf3e2;
    border: 1px solid #ecd9b0;
    color: var(--color-ink);
    font-size: 0.9375rem;
}

.g-box--safari {
    margin-bottom: var(--space-lg);
}

.g-box--safari p + p {
    margin-top: 8px;
}

.g-summary {
    position: sticky;
    top: var(--header-height);
    z-index: 5;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
    margin-bottom: var(--space-lg);
    padding: 12px 16px;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    background: rgba(255, 253, 248, 0.96);
    box-shadow: var(--shadow-soft);
}

.g-sum-text {
    font-weight: 600;
    color: var(--color-forest);
}

.g-sum-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.g-change,
.g-share,
.g-mark {
    min-height: 40px;
    padding: 8px 14px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-paper);
    color: var(--color-forest);
    font: inherit;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
}

.g-change:hover,
.g-share:hover,
.g-mark:hover {
    border-color: var(--color-sage);
}

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

.g-steps {
    list-style: none;
    margin: 0;
    padding: 0;
}

.g-step {
    display: flex;
    gap: 16px;
    padding: var(--space-lg) 0;
    border-top: 1px solid var(--color-border);
}

.g-step:first-child {
    border-top: none;
}

.g-num {
    flex: 0 0 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 2px solid var(--color-sage);
    color: var(--color-forest);
    font-weight: 700;
}

.g-step.is-done .g-num {
    background: var(--color-sage);
    color: #fff;
    font-size: 0;
}

.g-step.is-done .g-num::after {
    content: '✓';
    font-size: 1.125rem;
}

.g-body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 20px 32px;
}

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

.g-main > * + * {
    margin-top: 10px;
}

.g-h {
    font-family: var(--font-body);
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--color-forest);
    line-height: 1.4;
}

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

.g-path {
    display: block;
    padding: 10px 14px;
    border-radius: 10px;
    background: var(--color-cream);
    border: 1px solid var(--color-border);
    font-size: 0.9375rem;
    overflow-wrap: anywhere;
}

.g-path strong {
    color: var(--color-forest);
}

.g-main kbd,
.g-path kbd {
    display: inline-block;
    padding: 1px 6px;
    border: 1px solid var(--color-border);
    border-bottom-width: 2px;
    border-radius: 5px;
    background: var(--color-paper);
    font-family: var(--font-body);
    font-size: 0.875em;
}

.g-main code,
.g-path code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.875em;
    overflow-wrap: anywhere;
}

.g-step--warn .g-num {
    border-color: #c79a3a;
}

.g-step--key .g-main {
    padding: 12px 16px;
    border-radius: 12px;
    background: #eef5ef;
}

.g-step--box {
    display: block;
}

.g-svc {
    display: block;
    padding: var(--space-lg) 0;
    border-top: 1px solid var(--color-border);
}

.g-cmd {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 8px;
    padding: 8px;
    border-radius: 10px;
    background: var(--color-forest);
    color: #fff;
    cursor: pointer;
}

.g-cmd code {
    flex: 1 1 260px;
    min-width: 0;
    padding: 8px 6px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.875rem;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-all;
}

.g-copy {
    flex: 1 0 132px;
    max-width: 180px;
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: var(--color-mint);
    color: var(--color-forest);
    font-weight: 600;
    font-size: 0.9375rem;
}

.g-cmd:focus-visible {
    outline: 3px solid var(--color-mint);
    outline-offset: 2px;
}

.g-cmd.is-copied .g-copy {
    background: #fff;
}

.g-cmd--static {
    cursor: auto;
}

@media (max-width: 420px) {
    .g-copy {
        flex-basis: 100%;
        max-width: none;
    }
}

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

.g-link a,
.g-card-links .text-link {
    font-weight: 500;
}

.g-done {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 0.9375rem;
    color: var(--color-moss);
}

.g-ok {
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--color-sage);
    color: #fff;
    font-size: 0.75rem;
    line-height: 22px;
    text-align: center;
}

.g-done--line {
    font-weight: 600;
}

.g-why,
.g-more {
    font-size: 0.9375rem;
}

.g-why summary,
.g-more summary {
    display: inline-block;
    min-height: 32px;
    color: var(--color-sage);
    font-weight: 500;
    cursor: pointer;
}

.g-why[open] > p,
.g-more-body {
    margin-top: 6px;
    color: var(--color-muted);
}

.g-more-body ol,
.g-more-body ul {
    padding-left: 1.25rem;
}

.g-shot {
    flex: 0 1 380px;
    min-width: 0;
    margin: 0;
}

.g-shot[hidden] {
    display: none;
}

.g-shot-btn {
    display: block;
    width: 100%;
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    overflow: hidden;
    background: var(--color-cream);
    cursor: zoom-in;
}

.g-shot img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 520px;
    object-fit: contain;
}

/* ---- the agent card (step V0 and /research/#agents) */

.g-card {
    padding: 16px;
    border: 1px solid var(--color-border);
    border-radius: 14px;
    background: var(--color-paper);
}

.g-card-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    margin-bottom: 10px;
}

.g-card-head strong {
    font-size: 1.0625rem;
    color: var(--color-forest);
}

.g-card-maker {
    font-size: 0.8125rem;
    color: var(--color-muted);
}

.g-card dl {
    display: grid;
    grid-template-columns: minmax(90px, max-content) 1fr;
    gap: 6px 14px;
    font-size: 0.9375rem;
}

.g-card dt {
    color: var(--color-muted);
}

.g-card dd {
    margin: 0;
    min-width: 0;
    overflow-wrap: anywhere;
}

.g-card > * + * {
    margin-top: 10px;
}

@media (max-width: 480px) {
    .g-card dl {
        grid-template-columns: 1fr;
    }

    .g-card dd + dt {
        margin-top: 6px;
    }
}

.g-phone {
    padding: 18px;
    border-radius: 14px;
    background: var(--color-cream);
    border: 1px solid var(--color-border);
}

.g-phone > * + * {
    margin-top: 12px;
}

/* ---- glossary bubble and lightbox */

.g-term {
    padding: 0;
    border: none;
    background: none;
    font: inherit;
    color: inherit;
    text-decoration: underline dotted var(--color-sage) 2px;
    text-underline-offset: 3px;
    cursor: help;
}

.g-tip {
    display: block;
    margin: 6px 0;
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--color-forest);
    color: #fff;
    font-size: 0.875rem;
    line-height: 1.5;
}

.g-lightbox {
    max-width: min(96vw, 1400px);
    max-height: 96vh;
    padding: 0;
    border: none;
    border-radius: 12px;
    background: var(--color-paper);
    cursor: zoom-out;
}

.g-lightbox::backdrop {
    background: rgba(26, 26, 24, 0.75);
}

.g-lightbox img {
    display: block;
    max-width: 100%;
    max-height: calc(96vh - 48px);
    margin: 0 auto;
}

.g-lb-close {
    display: block;
    width: 100%;
    min-height: 44px;
    border: none;
    background: var(--color-cream);
    color: var(--color-forest);
    font: inherit;
    font-weight: 500;
    cursor: pointer;
}

/* ---- without JavaScript: every combination folded */

.g-static .g-nojs {
    margin-bottom: 10px;
    color: var(--color-muted);
}

.g-combo {
    border: 1px solid var(--color-border);
    border-radius: 12px;
    background: var(--color-paper);
    margin-bottom: 10px;
}

.g-combo > summary {
    padding: 14px 16px;
    min-height: 48px;
    font-weight: 600;
    color: var(--color-forest);
    cursor: pointer;
}

.g-combo > .g-steps {
    padding: 0 16px 8px;
}

/* ------------------------------------------------------- data on / */

.data-guide {
    padding: var(--space-4xl) var(--space-lg);
    background: var(--color-cream);
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    position: relative;
    z-index: 1;
    scroll-margin-top: var(--header-height);
}

.data-guide-inner {
    max-width: 1100px;
    margin: 0 auto;
}

.data-guide h2 {
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    color: var(--color-forest);
    max-width: 760px;
}

.data-lead {
    margin-top: var(--space-md);
    max-width: 760px;
    font-size: 1.0625rem;
    color: var(--color-ink);
}

.data-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-top: var(--space-2xl);
}

.data-card {
    padding: 22px;
    border: 1px solid var(--color-border);
    border-radius: 16px;
    background: var(--color-paper);
}

.data-card h3 {
    font-family: var(--font-body);
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--color-forest);
    margin-bottom: 8px;
}

.data-card p {
    font-size: 0.9375rem;
    color: var(--color-muted);
}

.data-card p + p {
    margin-top: 8px;
}

.data-card--dark {
    background: var(--color-forest);
    border-color: var(--color-forest);
}

.data-card--dark h3 {
    color: #fff;
}

.data-card--dark p {
    color: rgba(255, 255, 255, 0.85);
}

.data-card .text-link {
    display: inline-block;
    margin-top: 10px;
}

.data-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 28px;
    margin-top: var(--space-lg);
}

.data-links a {
    color: var(--color-forest);
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 3px;
}

@media (max-width: 900px) {
    .data-cards {
        grid-template-columns: 1fr;
    }
}

/* ----------------------------------------------------- Strom is empty? */

.empty-block {
    position: relative;
    z-index: 1;
    padding: var(--space-3xl) var(--space-lg);
    scroll-margin-top: var(--header-height);
}

.empty-inner {
    max-width: 860px;
    margin: 0 auto;
}

.empty-block h2 {
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 4vw, 2.25rem);
    color: var(--color-forest);
}

.empty-intro {
    margin-top: var(--space-md);
    font-size: 1.0625rem;
}

.empty-sign {
    margin-top: 8px;
    font-size: 0.875rem;
    color: var(--color-muted);
}

.empty-list {
    list-style: none;
    margin: var(--space-xl) 0 0;
    padding: 0;
    counter-reset: empty;
}

.empty-row {
    border: 1px solid var(--color-border);
    border-radius: 14px;
    background: var(--color-paper);
    margin-bottom: 10px;
    counter-increment: empty;
}

.empty-row > summary {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 64px;
    padding: 12px 16px;
    font-weight: 600;
    color: var(--color-forest);
    cursor: pointer;
    list-style: none;
}

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

.empty-row > summary::before {
    content: counter(empty);
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2px solid var(--color-sage);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9375rem;
}

.empty-row > summary::after {
    content: '▾';
    margin-left: auto;
    color: var(--color-muted);
}

.empty-row[open] > summary::after {
    content: '▴';
}

.empty-row > p {
    padding: 0 16px 16px 66px;
    color: var(--color-ink);
}

.empty-row > p + p {
    margin-top: -8px;
}

.empty-next {
    margin-top: var(--space-lg);
    padding: 20px 22px;
    border-radius: 16px;
    background: var(--color-forest);
    color: #fff;
}

@media (max-width: 480px) {
    .empty-row > p {
        padding-left: 16px;
    }
}

/* ------------------------------------------------------------ glossary */

.terms {
    max-width: 860px;
    margin: 0 auto;
    border: 1px solid var(--color-border);
    border-radius: 14px;
    background: var(--color-paper);
}

.terms-wrap {
    position: relative;
    z-index: 1;
    padding: 0 var(--space-lg) var(--space-3xl);
}

.terms > summary {
    padding: 14px 18px;
    min-height: 48px;
    font-weight: 600;
    color: var(--color-forest);
    cursor: pointer;
    scroll-margin-top: var(--header-height);
}

.terms-list {
    list-style: none;
    margin: 0;
    padding: 0 18px 18px;
}

.terms-list li {
    padding: 8px 0;
    border-top: 1px solid var(--color-border);
    font-size: 0.9375rem;
}

/* -------------------------------------------------- import (#import) */

.import-wrap {
    position: relative;
    z-index: 1;
    padding: var(--space-2xl) var(--space-lg);
}

.import {
    max-width: 1000px;
    margin: 0 auto;
    border: 1px solid var(--color-border);
    border-radius: 16px;
    background: var(--color-paper);
    scroll-margin-top: var(--header-height);
}

.import > summary {
    padding: 18px 22px;
    min-height: 56px;
    cursor: pointer;
}

.import > summary strong {
    font-family: var(--font-display);
    font-size: 1.5rem;
    color: var(--color-forest);
}

.import > summary span {
    display: block;
    font-size: 0.9375rem;
    color: var(--color-muted);
}

.import-body {
    padding: 0 22px 22px;
}

.imp-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 14px;
}

.imp-card {
    padding: 16px;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    background: var(--color-cream);
    font-size: 0.9375rem;
    min-width: 0;
}

.imp-card h3,
.import-body h3 {
    font-family: var(--font-body);
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--color-forest);
    margin-bottom: 8px;
}

.imp-card ol {
    padding-left: 1.2rem;
}

.imp-card li + li {
    margin-top: 10px;
}

/* A step: its name on its own line, the description under it, then the
   path in the service as a block of its own (.g-path is a block) */
.imp-card li > strong:first-child {
    display: block;
}

.imp-card li > .g-path {
    margin-top: 6px;
    padding: 6px 10px;
    font-size: inherit;
}

.imp-card li > .g-note {
    display: block;
    margin-top: 4px;
}

.imp-card .g-note {
    margin-top: 8px;
}

.import-body > h3 {
    margin-top: var(--space-xl);
}

.import-body > ol {
    padding-left: 1.2rem;
}

.import-body > ol li + li {
    margin-top: 8px;
}

.import-body > p {
    margin-top: 8px;
}

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

/* The brand lines up with the column headings, not the middle of the row */
.footer .footer-content {
    align-items: start;
}

/* Name and tagline line up with each other beside the logo, also where
   the footer is centred (phones) */
.footer .footer-brand-text {
    text-align: left;
}

/* The language choice: plain words, the current one bold and underlined
   (a filled box under the copyright read as a stray grey rectangle) */
.footer-langs {
    display: flex;
    justify-content: center;
    gap: 4px;
    font-size: 0.875rem;
}

.footer-langs .lang-option {
    display: inline-block;
    width: auto;
    padding: 4px 8px;
    color: rgba(255, 255, 255, 0.75);
    background: none;
    border-radius: 0;
}

.footer-langs .lang-option:hover {
    color: #fff;
    background: none;
}

.footer-langs .lang-option.active {
    color: #fff;
    background: none;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* Desktop: the copyright left, the languages right, on one line */
@media (min-width: 1025px) {
    .footer .footer-bottom {
        flex-direction: row;
        justify-content: space-between;
        text-align: left;
    }

    .footer-langs {
        margin-right: -8px;
    }
}