/* Shared layout for the static guide / alternatives pages. Loaded after styles.css.
   Redesign 2026-09-06: editorial reading column + labelled "On this page" rail,
   numbered section eyebrows, ranked-source timeline, checklist ticks, Q/A FAQ. */

:root {
    --guide-text: #b7c6bd;          /* body copy: brighter than --text-dim for long reads */
    --guide-muted: #7f978a;
    --guide-rule: rgba(255, 255, 255, 0.07);
    --guide-accent-soft: rgba(61, 255, 153, 0.08);
    --guide-accent-line: rgba(61, 255, 153, 0.22);
    --guide-measure: 66ch;
}

/* ─── Page frame ───────────────────────────────────────────────────────── */

.guide-layout {
    /* a guide page must never scroll sideways, whatever content lands in it
       later. The clip sits here rather than on html/body: on those it makes the
       root a scroll container and the sticky sidebar stops sticking. clip (not
       hidden) leaves the vertical axis visible, so the sticky sidebar and the
       title glow still overflow upward as intended. Anything genuinely too wide
       (a comparison table) scrolls inside its own wrapper. */
    overflow-x: clip;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 248px;
    column-gap: 5rem;
    align-items: start;
    width: 100%;
    max-width: 1140px;
    margin: 7.5rem auto 5rem;
    padding: 0 2rem;
    position: relative;
    box-sizing: border-box;
}

/* soft glow behind the title, echoing the home hero */
.guide-layout::before {
    content: "";
    position: absolute;
    top: -6rem;
    left: 0;
    width: 620px;
    height: 360px;
    background: radial-gradient(ellipse at 20% 30%, rgba(61, 255, 153, 0.10), transparent 65%);
    filter: blur(20px);
    pointer-events: none;
    z-index: -1;
}

/* the aside comes first in the DOM (it used to be flex row-reverse); place it explicitly */
.guide-content {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
}

/* ─── Sidebar rail ─────────────────────────────────────────────────────── */

.guide-sidebar {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    position: sticky;
    top: 96px;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    padding-top: 3.6rem;   /* line up with the H1, below the breadcrumb */
    scrollbar-width: thin;
}

.guide-toc {
    display: flex;
    flex-direction: column;
    border-left: 1px solid var(--guide-rule);
}

.guide-toc-title,
.guide-more-title {
    margin: 0 0 0.6rem;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--guide-muted);
}

.guide-toc .guide-toc-title {
    padding-left: 1rem;
    margin-bottom: 0.75rem;
}

.guide-toc-link,
.guide-toc .sidebar-link {   /* About page keeps its historical link class */
    position: relative;
    display: block;
    padding: 0.42rem 1rem;
    margin-left: -1px;
    border-left: 2px solid transparent;
    color: var(--guide-muted);
    font-size: 0.92rem;
    line-height: 1.4;
    text-decoration: none;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.guide-toc-link:hover,
.guide-toc .sidebar-link:hover {
    color: var(--text-main);
}

.guide-toc-link.is-active,
.guide-toc .sidebar-link.is-active {
    color: #fff;
    border-left-color: var(--accent-color);
}

.guide-more {
    margin-top: 2rem;
    padding: 1.1rem 1.15rem 0.9rem;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid var(--guide-rule);
}

.guide-more a {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.45rem 0;
    color: var(--guide-text);
    font-size: 0.9rem;
    line-height: 1.4;
    text-decoration: none;
    border-top: 1px solid var(--guide-rule);
    transition: color 0.2s ease;
}

.guide-more a:first-of-type {
    border-top: none;
}

.guide-more a::after {
    content: "\2192";
    flex-shrink: 0;
    color: var(--guide-muted);
    transition: transform 0.2s ease, color 0.2s ease;
}

.guide-more a:hover {
    color: #fff;
}

.guide-more a:hover::after {
    color: var(--accent-color);
    transform: translateX(3px);
}

/* ─── Article head ─────────────────────────────────────────────────────── */

.guide-crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
    color: var(--guide-muted);
    font-size: 0.85rem;
    margin-bottom: 1.4rem;
}

.guide-crumbs a {
    color: var(--guide-muted);
    text-decoration: none;
}

.guide-crumbs a:hover {
    color: var(--accent-color);
}

.guide-crumbs span {
    color: var(--guide-text);
}

.guide-head {
    padding-bottom: 2.25rem;
    margin-bottom: 2.5rem;
    border-bottom: 1px solid var(--guide-rule);
}

.guide-content h1 {
    font-family: 'Lexend', system-ui, sans-serif;
    font-size: clamp(2.1rem, 3.6vw, 3rem);
    font-weight: 600;
    line-height: 1.12;
    letter-spacing: -0.022em;
    margin: 0 0 1.25rem;
    color: #fff;
    text-wrap: balance;
}

.guide-lede {
    font-size: 1.18rem;
    line-height: 1.7;
    color: var(--guide-text);
    margin: 0 0 1.6rem;
    max-width: var(--guide-measure);
}

.guide-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.55rem 1.1rem;
    font-size: 0.85rem;
    color: var(--guide-muted);
}

.guide-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.28rem 0.7rem;
    border-radius: 999px;
    background: var(--guide-accent-soft);
    border: 1px solid var(--guide-accent-line);
    color: var(--accent-color);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.guide-meta-item:empty {
    display: none;
}

.guide-meta-item + .guide-meta-item::before {
    content: "\00b7";
    margin-right: 1.1rem;
    color: var(--text-dark);
}

/* ─── Body typography ──────────────────────────────────────────────────── */

.guide-content article {
    counter-reset: guide-section;
}

.guide-content section {
    scroll-margin-top: 110px;
}

.guide-content h2 {
    position: relative;
    font-family: 'Lexend', system-ui, sans-serif;
    font-size: 1.6rem;
    font-weight: 600;
    letter-spacing: -0.015em;
    line-height: 1.25;
    margin: 3.4rem 0 1.1rem;
    color: #fff;
}

.guide-content section > h2::before {
    counter-increment: guide-section;
    content: counter(guide-section, decimal-leading-zero);
    display: block;
    margin-bottom: 0.55rem;
    font-family: 'Outfit', 'Lexend', system-ui, sans-serif;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    color: var(--accent-color);
}

.guide-content h3 {
    font-size: 1.18rem;
    font-weight: 600;
    line-height: 1.35;
    margin: 2rem 0 0.7rem;
    color: #fff;
}

/* a bigger h3 for when a subhead needs more weight than the default,
   without promoting it to h2 and picking up the numbered-section counter. */
.guide-content h3.guide-h3-lg {
    font-size: 1.42rem;
}

.guide-content p {
    color: var(--guide-text);
    font-size: 1.06rem;
    line-height: 1.8;
    margin: 0 0 1.35rem;
    max-width: var(--guide-measure);
}

.guide-content p strong,
.guide-content li strong {
    color: #fff;
    font-weight: 600;
}

.guide-content em {
    color: #dfeee6;
}

.guide-content a {
    color: var(--accent-color);
    text-decoration: underline;
    text-decoration-color: rgba(61, 255, 153, 0.35);
    text-underline-offset: 3px;
    transition: text-decoration-color 0.2s ease;
    /* bare URLs are single unbreakable tokens: without this one long link
       sets the min-content width of its whole section and the page scrolls
       sideways on phones. */
    overflow-wrap: anywhere;
}

.guide-content a:hover {
    text-decoration-color: var(--accent-color);
}

/* ─── Ranked sources (timeline) ────────────────────────────────────────── */

.guide-ranked {
    counter-reset: guide-rank;
}

.guide-ranked h3 {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 2.4rem;
}

.guide-ranked h3::before {
    counter-increment: guide-rank;
    content: counter(guide-rank);
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: var(--guide-accent-soft);
    border: 1px solid var(--guide-accent-line);
    color: var(--accent-color);
    font-family: 'Outfit', 'Lexend', system-ui, sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    box-shadow: 0 0 18px rgba(61, 255, 153, 0.12);
}

.guide-ranked h3 + p {
    margin-left: 17px;
    padding-left: calc(19px + 1rem);
    border-left: 1px solid var(--guide-accent-line);
    padding-bottom: 0.4rem;
}

.guide-ranked h3:last-of-type + p {
    border-left-color: transparent;
}

/* ─── Lists ────────────────────────────────────────────────────────────── */

.guide-content ul,
.guide-content ol {
    list-style: none;
    padding: 0;
    margin: 0 0 1.75rem;
    max-width: var(--guide-measure);
}

.guide-content li {
    position: relative;
    padding-left: 2rem;
    margin-bottom: 0.85rem;
    color: var(--guide-text);
    font-size: 1.02rem;
    line-height: 1.7;
}

.guide-content ul li::before {
    content: "";
    position: absolute;
    left: 0.35rem;
    top: 0.72rem;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent-color);
    box-shadow: 0 0 10px var(--accent-glow);
}

/* checklist sections get a tick instead of a dot */
.guide-content .guide-checklist li::before {
    left: 0;
    top: 0.32rem;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--guide-accent-soft) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233dff99' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center / 10px no-repeat;
    border: 1px solid var(--guide-accent-line);
    box-shadow: none;
}

/* the mirror of the checklist: what something is not */
.guide-content .guide-crosslist li::before {
    left: 0;
    top: 0.32rem;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: rgba(255, 92, 114, .10) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff5c72' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><line x1='18' y1='6' x2='6' y2='18'/><line x1='6' y1='6' x2='18' y2='18'/></svg>") center / 10px no-repeat;
    border: 1px solid rgba(255, 92, 114, .28);
    box-shadow: none;
}

/* "Who this guide is for" asks for the plain emoji marks rather than the
   drawn circles. Scoped to that block so the other guides keep the tick. */
#who-for .guide-checklist li::before,
#who-for .guide-crosslist li::before {
    content: "✅";
    left: 0;
    top: 0.18rem;
    width: auto;
    height: auto;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    font-size: 0.95rem;
    line-height: 1.4;
}

#who-for .guide-crosslist li::before {
    content: "❌";
    font-size: 0.82rem;
    top: 0.26rem;
}

/* a list of server "cards": bold name with a left accent bar, dash
   sub-bullets, a divider between entries. Built on tokens already
   theme-aware, so no light-mode twin is needed. */
.guide-content .guide-server-list {
    list-style: none;
    margin: 1.3rem 0 1.8rem;
    padding: 0;
}

.guide-content .guide-server-list > li {
    padding: 1.15rem 0;
    border-top: 1px solid var(--guide-rule);
}

.guide-content .guide-server-list > li::before {
    content: none;
}

.guide-content .guide-server-list > li:first-child {
    padding-top: 0;
    border-top: none;
}

.guide-content .guide-server-name {
    position: relative;
    padding-left: 0.85rem;
    margin: 0 0 0.65rem;
    font-size: 1.08rem;
    font-weight: 700;
    color: var(--text-main);
    border-left: 3px solid var(--accent-color);
}

.guide-content .guide-server-list > li > ul > li {
    padding-left: 1.3rem;
}

.guide-content .guide-server-list > li > ul > li::before {
    content: "";
    left: 0.15rem;
    top: 0.85rem;
    width: 12px;
    height: 1.5px;
    border-radius: 0;
    background: var(--guide-muted);
    box-shadow: none;
}

.guide-content .guide-server-list > li > ul {
    margin: 0;
}

.guide-content .guide-server-list > li > ul > li {
    margin-bottom: 0.5rem;
}

.guide-content .guide-server-list > li > ul > li:last-child {
    margin-bottom: 0;
}

/* an unnumbered intro block: a section that must not take a counter */
.guide-content .guide-block {
    scroll-margin-top: 110px;
}

.guide-content ol {
    counter-reset: guide-step;
}

.guide-content ol li {
    padding-left: 2.6rem;
    margin-bottom: 1rem;
}

.guide-content ol li::before {
    counter-increment: guide-step;
    content: counter(guide-step);
    position: absolute;
    left: 0;
    top: 0.1rem;
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--accent-color);
    color: var(--accent-ink);
    font-family: 'Outfit', 'Lexend', system-ui, sans-serif;
    font-size: 0.82rem;
    font-weight: 700;
}

/* ─── Tables ───────────────────────────────────────────────────────────── */

.guide-table-wrap {
    overflow-x: auto;
    margin: 0.5rem 0 1.25rem;
    border-radius: 14px;
    border: 1px solid var(--guide-rule);
    background: rgba(255, 255, 255, 0.015);
}

.guide-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.93rem;
}

/* wide comparison tables (6+ columns) keep a readable width and scroll inside the wrapper */
.guide-table:has(th:nth-child(6)) {
    min-width: 820px;
}

.guide-table th,
.guide-table td {
    text-align: left;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--guide-rule);
    color: var(--guide-text);
    vertical-align: top;
    line-height: 1.5;
}

.guide-table th {
    color: var(--guide-muted);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    background: rgba(255, 255, 255, 0.03);
    white-space: nowrap;
}

.guide-table tbody tr:nth-child(even) td {
    background: rgba(255, 255, 255, 0.015);
}

.guide-table tr:last-child td {
    border-bottom: none;
}

.guide-table td:first-child {
    color: #fff;
    font-weight: 600;
    white-space: nowrap;
}

/* a one-line highlight: no panel, just the line said louder.
   --text-main is theme-aware, so this needs no light-mode twin. */
.guide-content .guide-highlight {
    margin: 1.6rem 0;
    color: var(--text-main);
    font-size: 1.72rem;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -0.01em;
}

/* the same emphasis, sized down for a note inside a compact server card
   rather than a standalone statement in the flow of body copy. */
.guide-content .guide-server-list .guide-highlight {
    margin: 0.9rem 0 0;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: normal;
}

.guide-note {
    font-size: 0.88rem;
    color: var(--guide-muted);
}

/* ─── FAQ ──────────────────────────────────────────────────────────────── */

#faq h3 {
    margin: 0;
    padding: 1.35rem 0 0.5rem;
    border-top: 1px solid var(--guide-rule);
    font-size: 1.08rem;
}

#faq h3:first-of-type {
    border-top: none;
    padding-top: 0.25rem;
}

#faq h3 + p {
    font-size: 1rem;
    line-height: 1.75;
    padding-bottom: 0.9rem;
    margin-bottom: 0;
}

/* ─── Inline search panel ──────────────────────────────────────────────── */

.guide-search {
    position: relative;
    overflow: hidden;
    margin: 2.25rem 0 1.5rem;
    padding: 1.6rem 1.75rem 1.75rem;
    border-radius: 18px;
    background:
        linear-gradient(135deg, rgba(61, 255, 153, 0.11), rgba(61, 255, 153, 0.03) 60%, rgba(255, 255, 255, 0.015));
    border: 1px solid var(--guide-accent-line);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 20px 50px -30px rgba(61, 255, 153, 0.35);
}

.guide-search::before {
    content: "";
    position: absolute;
    right: -60px;
    top: -80px;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(61, 255, 153, 0.18), transparent 70%);
    pointer-events: none;
}

.guide-search-label {
    position: relative;
    display: block;
    color: #fff;
    font-family: 'Lexend', system-ui, sans-serif;
    font-size: 1.05rem;
    font-weight: 600;
    margin-bottom: 0.9rem;
}

.guide-search-row {
    position: relative;
    display: flex;
    gap: 0.6rem;
}

.guide-search-row input {
    flex: 1;
    min-width: 0;
    padding: 0.9rem 1.1rem;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(5, 8, 10, 0.6);
    color: #fff;
    font-size: 1rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.guide-search-row input::placeholder {
    color: var(--guide-muted);
}

.guide-search-row input:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px rgba(61, 255, 153, 0.15);
}

.guide-search-row button,
.guide-cta .cta-button,
.cta-box .cta-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    background: var(--accent-color);
    color: var(--accent-ink);
    padding: 0.9rem 1.5rem;
    border-radius: 12px;
    border: none;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.98rem;
    white-space: nowrap;
    cursor: pointer;
    transition: var(--transition-smooth);
}

.guide-search-row button:hover,
.guide-cta .cta-button:hover,
.cta-box .cta-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px var(--accent-glow);
}

/* .cta-box is the About page's name for the same panel; it also appears inside the
   translated long-form HTML (locales/longform.json), so both names must keep working. */
.guide-cta,
.cta-box {
    margin: 1.5rem 0 2rem;
    padding: 1.6rem 1.75rem 1.75rem;
    border-radius: 18px;
    background:
        linear-gradient(135deg, rgba(61, 255, 153, 0.11), rgba(61, 255, 153, 0.03) 60%, rgba(255, 255, 255, 0.015));
    border: 1px solid var(--guide-accent-line);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 20px 50px -30px rgba(61, 255, 153, 0.35);
}

.guide-cta p,
.cta-box p {
    color: #e6f2eb;
    font-size: 1.02rem;
    margin-bottom: 1.1rem;
}

.cta-box .cta-button {
    margin-top: 0;
}

.cta-box .cta-button svg {
    width: 18px;
    height: 18px;
}

/* ─── About page (guide-about) ─────────────────────────────────────────── */
/* Multi-chapter document: each <section> is a chapter with an h2.section-title.
   Sections carry data-i18n-html, so their inner markup is left untouched. */

.guide-about .guide-sidebar {
    padding-top: 0.6rem;     /* no breadcrumb above the title on this page */
}

.guide-about section {
    margin-bottom: 4rem;
    padding-bottom: 3.5rem;
    border-bottom: 1px solid var(--guide-rule);
}

.guide-about section:last-of-type {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.guide-about h1 + p {
    font-size: 1.15rem;
    line-height: 1.7;
    color: #cfe0d6;
}

.guide-about h2.section-title {
    font-size: clamp(1.7rem, 2.6vw, 2.15rem);
    letter-spacing: -0.02em;
    margin-top: 0;
}

/* only chapter titles get the numbered eyebrow; inner h2s stay plain */
.guide-about section > h2:not(.section-title)::before {
    content: none;
    counter-increment: none;
}

.guide-about section > h2:not(.section-title) {
    font-size: 1.4rem;
    margin-top: 2.75rem;
}

.guide-about h3 {
    margin-top: 2.25rem;
}

/* Guides list as a two-up card grid */
.guide-about #resources ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.9rem;
    max-width: none;
}

.guide-about #resources li {
    margin: 0;
    padding: 1.1rem 1.2rem 1.15rem;
    border-radius: 14px;
    border: 1px solid var(--guide-rule);
    background: rgba(255, 255, 255, 0.02);
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--guide-muted);
    transition: border-color 0.2s ease, background 0.2s ease;
}

.guide-about #resources li:hover {
    border-color: var(--guide-accent-line);
    background: var(--guide-accent-soft);
}

.guide-about #resources li::before {
    content: none;
}

.guide-about #resources li a {
    display: block;
    margin-bottom: 0.35rem;
    color: #fff;
    font-family: 'Lexend', system-ui, sans-serif;
    font-weight: 600;
    font-size: 1.02rem;
    line-height: 1.4;
    text-decoration: none;
}

.guide-about #resources li:hover a {
    color: var(--accent-color);
}

/* Legal page: three policies, each with its own <h1> (the translated long-form HTML
   is built that way), so the h1s are the numbered chapter titles here. */
.guide-legal section > h1 {
    font-size: clamp(1.7rem, 2.6vw, 2.15rem);
    letter-spacing: -0.02em;
    margin: 0 0 1rem;
}

.guide-legal section > h1::before {
    counter-increment: guide-section;
    content: counter(guide-section, decimal-leading-zero);
    display: block;
    margin-bottom: 0.55rem;
    font-family: 'Outfit', 'Lexend', system-ui, sans-serif;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    color: var(--accent-color);
}

.guide-legal h1 + p {
    font-size: 0.95rem;      /* the "Effective date" line */
    color: var(--guide-muted);
}

.guide-legal h1 + p + p {
    font-size: 1.12rem;
    color: #cfe0d6;
}

.guide-legal .cta-box {
    margin-top: 2rem;
}

@media (max-width: 968px) {
    .guide-about #resources ul {
        grid-template-columns: 1fr;
    }
    .guide-about section {
        margin-bottom: 3rem;
        padding-bottom: 2.5rem;
    }
}

/* ─── Responsive ───────────────────────────────────────────────────────── */

@media (max-width: 1080px) {
    .guide-layout {
        column-gap: 3rem;
        grid-template-columns: minmax(0, 1fr) 220px;
    }
}

@media (max-width: 968px) {
    .guide-layout {
        display: flex;
        flex-direction: column;
        gap: 1.75rem;
        margin-top: 5.75rem;
        padding: 0 1.25rem;
        /* the grid above sets align-items:start for the sticky sidebar; carried
           into this column flex it stops children stretching, so each one sizes
           to fit-content and a wide .guide-table drags the whole page sideways
           instead of scrolling inside .guide-table-wrap. */
        align-items: stretch;
    }

    .guide-layout::before {
        display: none;
    }

    .guide-sidebar {
        /* the box itself goes away so its two children become flex items of
           .guide-layout and can be ordered apart: the toc up under the title,
           the "more guides" card down after the article. */
        display: contents;
    }

    .guide-content {
        order: 1;
        display: contents;         /* let the head and the article body be ordered separately */
    }

    .guide-content article {
        display: contents;
    }

    .guide-head {
        order: 1;
        margin-bottom: 0;
        padding-bottom: 1.75rem;
    }

    .guide-content section,
    .guide-content .guide-block {
        order: 3;
    }

    .guide-toc {
        order: 2;                 /* TOC sits under the title block on small screens */
        min-width: 0;             /* let the scrolling toc shrink instead of widening the page */
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 0.5rem;
        overflow-x: auto;
        padding: 0.25rem 0 0.6rem;
        border-left: none;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .guide-toc::-webkit-scrollbar {
        display: none;
    }

    .guide-toc .guide-toc-title {
        display: none;
    }

    .guide-toc-link,
    .guide-toc .sidebar-link {
        flex-shrink: 0;
        margin: 0;
        padding: 0.45rem 0.9rem;
        border: 1px solid var(--guide-rule);
        border-radius: 999px;
        font-size: 0.85rem;
        white-space: nowrap;
        background: rgba(255, 255, 255, 0.02);
    }

    .guide-toc-link.is-active,
    .guide-toc .sidebar-link.is-active {
        color: var(--accent-color);
        border-color: var(--guide-accent-line);
        background: var(--guide-accent-soft);
    }

    .guide-more {
        order: 4;                 /* after the article body rather than hidden */
        margin-top: 0;            /* the layout's row gap already spaces it */
    }

    .guide-content h1 {
        font-size: 2rem;
    }

    .guide-lede {
        font-size: 1.08rem;
    }

    .guide-content h2 {
        font-size: 1.4rem;
        margin-top: 2.75rem;
    }

    .guide-content p {
        font-size: 1.02rem;
    }

    .guide-ranked h3::before {
        width: 32px;
        height: 32px;
        font-size: 0.88rem;
    }

    .guide-ranked h3 + p {
        margin-left: 15px;
        padding-left: calc(17px + 0.9rem);
    }

    .guide-search {
        padding: 1.3rem 1.2rem 1.4rem;
    }

    .guide-search-row {
        flex-direction: column;
    }

    /* a comparison table is the one thing here too wide to ever fit a phone.
       Scaled to ~0.6 of its desktop footprint (measured: 0.62 wide, 0.60 tall)
       so far less of it hides behind the wrapper's scroll — the sideways drag
       over a big table is what reads as "the page itself moves". */
    .guide-table {
        font-size: 0.64rem;
    }

    .guide-table:has(th:nth-child(6)) {
        min-width: 492px;
    }

    .guide-table th,
    .guide-table td {
        padding: 0.4rem 0.45rem;
        line-height: 1.4;
    }

    .guide-table th {
        font-size: 0.52rem;
        letter-spacing: 0.05em;
    }
}