/* ==========================================================================
   LinkTwin Guides / Knowledgebase (/guides, /guides/{slug}), the home-6 look.

   Markup: guides/index.php, guides/article.php, partials/guides_sidebar.php,
   partials/guides_cta.php and the article bodies in articles/[lang/]*.php.
   Loaded by layouts/guides.php after the Landing 6 kit (the25-landing6.css),
   which supplies the tokens (--l6-*), .l6-wrap and the final CTA panel.
   Every rule is scoped under .l6-page--guides (the layout's <main>), so the
   kit's element rules (.l6-page h1, .l6-page p, ...) never win over ours.
   Behaviour: js/the25-guides.js.

   Article bodies are styled generically (.g6-prose h2/h3/p/ul/ol/code/pre/
   table/blockquote/img/figure + .guides-callout + .guides-cta), so a new
   article needs no CSS of its own.
   ========================================================================== */

.l6-page--guides {
    /* Same faces the site header uses (declared in the25-site6.css) */
    --l6-display: "Nunito Sans S6", "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --l6-text: "DM Sans S6", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --g6-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    --g6-blue-soft: #e6f0ff;
    --g6-amber-soft: #fff4e0;
    --g6-header: 72px;          /* sticky site header height (the25-site6.css) */
}

@media (max-width: 1079.98px) {
    .l6-page--guides {
        --g6-header: 64px;
    }
}

.l6-page--guides .g6-sr {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.l6-page--guides .g6-stretch::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
}

/* ---------- Buttons ---------- */
.l6-page--guides .g6-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    padding: 0 22px;
    border: 0;
    border-radius: 12px;
    background: var(--l6-blue);
    color: #fff;
    font-family: var(--l6-text);
    font-size: 0.98rem;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.18s ease;
}

.l6-page--guides .g6-btn:hover {
    background: var(--l6-blue-deep);
    color: #fff;
}

.l6-page--guides .g6-btn--light {
    background: #fff;
    color: var(--l6-ink);
}

.l6-page--guides .g6-btn--light:hover {
    background: var(--g6-blue-soft);
    color: var(--l6-ink);
}

.l6-page--guides .g6-btn--sm {
    min-height: 44px;
    padding: 0 16px;
    font-size: 0.9rem;
}

/* ==========================================================================
   Navy band (page header of both pages)
   ========================================================================== */

.l6-page--guides .g6-band {
    position: relative;
    overflow: hidden;
    padding: clamp(40px, 5vw, 72px) 0 clamp(48px, 5.5vw, 80px);
    background:
        radial-gradient(50% 70% at 88% 18%, rgba(9, 103, 242, 0.42), transparent 65%),
        radial-gradient(36% 50% at 0% 100%, rgba(225, 48, 108, 0.16), transparent 70%),
        linear-gradient(180deg, #0b1838 0%, #07102a 100%);
    color: rgba(255, 255, 255, 0.78);
}

.l6-page--guides .g6-band-grid {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: clamp(32px, 5vw, 80px);
    align-items: center;
}

.l6-page--guides .g6-band-grid--solo {
    grid-template-columns: minmax(0, 1fr);
    max-width: 780px;
}

.l6-page--guides .g6-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 20px;
    padding: 6px 14px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    font-size: 0.88rem;
    font-weight: 700;
}

.l6-page--guides .g6-kicker .s6-ico {
    width: 18px;
    height: 18px;
    color: var(--l6-sky);
}

.l6-page--guides .g6-display {
    margin: 0;
    color: #fff;
    font-family: var(--l6-display);
    font-size: clamp(2.5rem, 4.6vw, 4.2rem);
    font-weight: 900;
    letter-spacing: -0.03em;
    line-height: 1.02;
    text-wrap: balance;
}

.l6-page--guides .g6-display--article {
    max-width: 20ch;
    font-size: clamp(2.1rem, 3.6vw, 3.3rem);
    line-height: 1.06;
}

.l6-page--guides .g6-lead {
    max-width: 36em;
    margin: 18px 0 0;
    color: rgba(255, 255, 255, 0.78);
    font-size: clamp(1.05rem, 1.3vw, 1.18rem);
    line-height: 1.6;
}

.l6-page--guides .g6-band-note {
    margin: 14px 0 0;
    color: rgba(255, 255, 255, 0.62);
    font-size: 0.9rem;
}

.l6-page--guides .g6-band-note:empty {
    display: none;
}

/* ---------- Search (band + sidebar) ---------- */
.l6-page--guides .g6-search {
    position: relative;
    max-width: 580px;
    margin-top: 30px;
}

.l6-page--guides .g6-search .guides-search-input {
    width: 100%;
    height: 60px;
    padding: 0 56px 0 52px;
    border: 1.5px solid transparent;
    border-radius: 14px;
    background: #fff;
    color: var(--l6-ink);
    font-family: var(--l6-text);
    font-size: 1.02rem;
    box-shadow: 0 14px 36px rgba(3, 10, 30, 0.35);
    -webkit-appearance: none;
    appearance: none;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.l6-page--guides .g6-search .guides-search-input::placeholder {
    color: #7d8799;
}

.l6-page--guides .g6-search .guides-search-input::-webkit-search-cancel-button {
    -webkit-appearance: none;
}

.l6-page--guides .g6-search .guides-search-input:focus {
    outline: none;
    border-color: var(--l6-blue);
    box-shadow: 0 0 0 4px rgba(94, 168, 255, 0.45), 0 14px 36px rgba(3, 10, 30, 0.35);
}

.l6-page--guides .g6-search .guides-search-icon {
    position: absolute;
    top: 30px;
    left: 20px;
    transform: translateY(-50%);
    color: var(--l6-blue);
    font-size: 1.05rem;
    pointer-events: none;
}

.l6-page--guides .g6-search .guides-search-icon .s6-ico {
    width: 20px;
    height: 20px;
    stroke-width: 2.25;
}

.l6-page--guides .g6-kbd {
    position: absolute;
    top: 30px;
    right: 16px;
    display: grid;
    place-items: center;
    min-width: 26px;
    height: 26px;
    transform: translateY(-50%);
    border: 1px solid var(--l6-line);
    border-bottom-width: 2px;
    border-radius: 7px;
    background: var(--l6-haze);
    color: var(--l6-muted);
    font-family: var(--l6-text);
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1;
    box-shadow: none;
    pointer-events: none;
    transition: opacity 0.15s ease;
}

.l6-page--guides .g6-search:focus-within .g6-kbd {
    opacity: 0;
}

@media (hover: none), (max-width: 640px) {
    .l6-page--guides .g6-kbd {
        display: none;
    }

    .l6-page--guides .g6-search .guides-search-input {
        padding-right: 16px;
    }
}

/* Results dropdown (built by the25-guides.js) */
.l6-page--guides .guides-search-results {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    left: 0;
    z-index: 40;
    display: none;
    max-height: min(420px, 60vh);
    overflow-y: auto;
    padding: 6px;
    border: 1px solid var(--l6-line);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 24px 60px rgba(13, 27, 46, 0.22);
    text-align: left;
}

.l6-page--guides .guides-search-results.active {
    display: block;
}

.l6-page--guides .guides-search-result {
    display: block;
    padding: 12px 14px;
    border-radius: 12px;
    color: var(--l6-body);
    text-decoration: none;
}

.l6-page--guides .guides-search-result + .guides-search-result {
    margin-top: 2px;
}

.l6-page--guides .guides-search-result:hover,
.l6-page--guides .guides-search-result.is-active {
    background: var(--l6-haze);
}

.l6-page--guides .guides-search-result.is-active {
    box-shadow: inset 3px 0 0 var(--l6-blue);
}

.l6-page--guides .guides-search-result-category {
    display: inline-block;
    margin-bottom: 4px;
    padding: 2px 9px;
    border-radius: 999px;
    background: var(--g6-blue-soft);
    color: var(--l6-blue-deep);
    font-size: 0.74rem;
    font-weight: 700;
}

.l6-page--guides .guides-search-result-title {
    color: var(--l6-ink);
    font-size: 0.98rem;
    font-weight: 700;
    line-height: 1.35;
}

.l6-page--guides .guides-search-result-title mark {
    padding: 0 1px;
    border-radius: 3px;
    background: #fff1c2;
    color: inherit;
}

.l6-page--guides .guides-search-result-desc {
    display: -webkit-box;
    margin-top: 2px;
    overflow: hidden;
    color: var(--l6-muted);
    font-size: 0.86rem;
    line-height: 1.45;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.l6-page--guides .guides-search-no-results {
    padding: 14px;
    color: var(--l6-muted);
    font-size: 0.92rem;
}

/* ---------- Topic links under the search (index band) ----------
   One pill per topic that has guides: its token, its name, how many guides.
   On a phone the pills sit on one line that scrolls sideways. */
.l6-page--guides .g6-topicnav {
    margin-top: 14px;
}

.l6-page--guides .g6-topicnav ul {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.l6-page--guides .g6-topicnav a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 14px 0 9px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    font-size: 0.88rem;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.18s ease, border-color 0.18s ease;
}

.l6-page--guides .g6-topicnav a:hover {
    border-color: rgba(255, 255, 255, 0.36);
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
}

.l6-page--guides .g6-topicnav a:focus-visible {
    outline: 2px solid var(--l6-sky);
    outline-offset: 2px;
}

.l6-page--guides .g6-topicnav img {
    width: 22px;
    height: 22px;
    object-fit: contain;
}

.l6-page--guides .g6-topicnav b {
    color: rgba(255, 255, 255, 0.62);
    font-size: 0.8rem;
    font-weight: 700;
}

/* ---------- "Start here" card (index band) ---------- */
.l6-page--guides .g6-start-label {
    margin: 0 0 12px;
    color: rgba(255, 255, 255, 0.66);
    font-family: var(--l6-text);
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.3;
}

.l6-page--guides .g6-start-card {
    position: relative;
    padding: 26px 26px 22px;
    border-radius: 22px;
    background: #fff;
    color: var(--l6-body);
    box-shadow: 0 30px 70px rgba(3, 10, 30, 0.45);
    transition: transform 0.2s ease;
}

.l6-page--guides .g6-start-card:hover {
    transform: translateY(-3px);
}

/* The featured guide's cover across the top of the card */
.l6-page--guides .g6-start-cover {
    display: block;
    width: calc(100% + 52px);
    max-width: none;
    height: auto;
    aspect-ratio: 1200 / 630;
    object-fit: cover;
    margin: -26px -26px 18px;
    border-radius: 22px 22px 0 0;
}

.l6-page--guides .g6-start-card:focus-within {
    outline: 3px solid var(--l6-sky);
    outline-offset: 4px;
}

.l6-page--guides .g6-start-card a:focus-visible {
    outline: none;
}

.l6-page--guides .g6-start-cat {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 4px 12px 4px 6px;
    border-radius: 999px;
    background: var(--l6-haze);
    color: var(--l6-ink);
    font-size: 0.84rem;
    font-weight: 700;
}

.l6-page--guides .g6-start-cat img {
    width: 28px;
    height: 28px;
    object-fit: contain;
}

.l6-page--guides .g6-start-title {
    margin: 16px 0 8px;
    font-family: var(--l6-display);
    font-size: 1.55rem;
    font-weight: 900;
    letter-spacing: -0.02em;
    line-height: 1.12;
}

.l6-page--guides .g6-start-title a {
    color: var(--l6-ink);
    text-decoration: none;
}

.l6-page--guides .g6-start-desc {
    margin: 0;
    font-size: 0.96rem;
    line-height: 1.55;
}

.l6-page--guides .g6-start-learn {
    margin: 18px 0 10px;
    color: var(--l6-muted);
    font-size: 0.86rem;
    font-weight: 700;
}

.l6-page--guides .g6-start-list {
    display: grid;
    gap: 9px;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: g6start;
}

.l6-page--guides .g6-start-list li {
    display: flex;
    align-items: baseline;
    gap: 10px;
    color: var(--l6-ink);
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.35;
    counter-increment: g6start;
}

.l6-page--guides .g6-start-list li::before {
    content: counter(g6start);
    display: inline-grid;
    flex: none;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--g6-blue-soft);
    color: var(--l6-blue-deep);
    font-size: 0.74rem;
    transform: translateY(-1px);
}

.l6-page--guides .g6-start-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 12px;
    margin: 20px 0 0;
    padding-top: 16px;
    border-top: 1px solid var(--l6-line);
    color: var(--l6-muted);
    font-size: 0.9rem;
}

.l6-page--guides .g6-start-foot span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.l6-page--guides .g6-start-foot .s6-ico {
    width: 16px;
    height: 16px;
}

.l6-page--guides .g6-start-go {
    color: var(--l6-blue-deep);
    font-weight: 700;
}

.l6-page--guides .g6-start-go .s6-ico {
    stroke-width: 2.25;
    transition: transform 0.2s ease;
}

.l6-page--guides .g6-start-card:hover .g6-start-go .s6-ico {
    transform: translateX(3px);
}

/* ==========================================================================
   Sections (index + "Keep reading")
   ========================================================================== */

.l6-page--guides .g6-section {
    padding: clamp(64px, 8vw, 104px) 0;
}

.l6-page--guides .g6-section--haze {
    background: var(--l6-haze);
}

.l6-page--guides .g6-head {
    max-width: 44rem;
    margin-bottom: clamp(28px, 3.5vw, 44px);
}

.l6-page--guides .g6-head p {
    margin: 0;
    font-size: 1.06rem;
}

.l6-page--guides .g6-head--row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px 24px;
    max-width: none;
}

.l6-page--guides .g6-h2 {
    margin: 0 0 14px;
    color: var(--l6-ink);
    font-family: var(--l6-display);
    font-size: clamp(1.9rem, 3vw, 2.6rem);
    font-weight: 900;
    letter-spacing: -0.03em;
    line-height: 1.08;
    text-wrap: balance;
}

.l6-page--guides .g6-head--row .g6-h2 {
    margin: 0;
}

.l6-page--guides .g6-more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    font-weight: 700;
    text-decoration: none;
}

.l6-page--guides .g6-more i,
.l6-page--guides .g6-more .s6-ico {
    transition: transform 0.2s ease;
}

.l6-page--guides .g6-more:hover i,
.l6-page--guides .g6-more:hover .s6-ico {
    transform: translateX(3px);
}

/* ---------- Topic shelves (index) ----------
   One shelf per topic that has guides: the topic on the left, where it stays in view
   while a long shelf scrolls past, and its guides as cards on the right. Under 1180px
   the topic sits above its cards (see Responsive). */
.l6-page--guides .g6-shelf {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
    gap: 24px clamp(28px, 3vw, 44px);
    align-items: start;
    padding: clamp(32px, 4vw, 48px) 0;
    border-top: 1px solid var(--l6-line);
    scroll-margin-top: var(--g6-header);
}

.l6-page--guides .g6-shelf:last-child {
    padding-bottom: 0;
}

.l6-page--guides .g6-shelf-head {
    position: sticky;
    top: calc(var(--g6-header) + 24px);
}

.l6-page--guides .g6-shelf-main {
    min-width: 0;
}

.l6-page--guides .g6-topic-token {
    display: grid;
    place-items: center;
    width: 60px;
    height: 60px;
    border-radius: 16px;
    background: var(--l6-haze);
    transition: box-shadow 0.2s ease;
}

.l6-page--guides .g6-topic-token img {
    width: 46px;
    height: 46px;
    object-fit: contain;
}

.l6-page--guides .g6-topic-token i {
    color: var(--l6-blue);
    font-size: 1.3rem;
}

/* Arriving from a topic link: the token says which shelf this is */
.l6-page--guides .g6-shelf:target .g6-topic-token {
    box-shadow: 0 0 0 3px rgba(9, 103, 242, 0.3);
}

.l6-page--guides .g6-shelf-head h3 {
    margin: 18px 0 8px;
    font-family: var(--l6-display);
    font-size: 1.5rem;
    font-weight: 900;
    letter-spacing: -0.02em;
    line-height: 1.12;
    text-wrap: balance;
}

.l6-page--guides .g6-shelf-desc {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.55;
}

.l6-page--guides .g6-shelf-count {
    margin: 14px 0 0;
    line-height: 1;
}

.l6-page--guides .g6-count {
    display: inline-block;
    padding: 5px 11px;
    border-radius: 999px;
    background: var(--g6-blue-soft);
    color: var(--l6-blue-deep);
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
}

.l6-page--guides .g6-count--soon {
    border: 1px solid var(--l6-line);
    background: transparent;
    color: var(--l6-muted);
}

/* Under a shelf's cards: "Show more" on the left, the topic's product pages on the
   right. An open "Show more" takes the whole line, so the pages follow the cards. */
.l6-page--guides .g6-shelf-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px 28px;
    margin-top: 16px;
}

.l6-page--guides .g6-topic-related {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 18px;
    min-height: 40px;
}

.l6-page--guides .g6-topic-related p,
.l6-page--guides .g6-topic-empty p {
    margin: 0;
    color: var(--l6-muted);
    font-size: 0.84rem;
    font-weight: 700;
}

.l6-page--guides .g6-topic-related ul,
.l6-page--guides .g6-topic-empty ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.l6-page--guides .g6-topic-related ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0 18px;
}

.l6-page--guides .g6-topic-related a,
.l6-page--guides .g6-topic-empty a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    font-size: 0.9rem;
    font-weight: 700;
    text-decoration: none;
}

.l6-page--guides .g6-topic-related a:hover,
.l6-page--guides .g6-topic-empty a:hover {
    text-decoration: underline;
}

.l6-page--guides .g6-topic-related a .s6-ico,
.l6-page--guides .g6-topic-empty a .s6-ico {
    width: 13px;
    height: 13px;
    stroke-width: 2.5;
}

/* ---------- Guide cards (index) ----------
   A guide: its cover picture (1200 x 630, made by tools/guide-art), its title and how
   long it takes to read. The whole card is the link (.g6-stretch on the title). */
.l6-page--guides .g6-guides {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* A topic with one or two guides so far: the cards share the whole row */
.l6-page--guides .g6-shelf--n2 .g6-guides {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.l6-page--guides .g6-shelf--n1 .g6-guides {
    grid-template-columns: minmax(0, 1fr);
}

.l6-page--guides .g6-guide {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--l6-line);
    border-radius: 18px;
    background: #fff;
    transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.l6-page--guides .g6-guide:hover {
    border-color: var(--l6-blue);
    box-shadow: 0 18px 40px rgba(13, 27, 46, 0.08);
    transform: translateY(-2px);
}

.l6-page--guides .g6-guide:focus-within {
    outline: 3px solid rgba(9, 103, 242, 0.45);
    outline-offset: 3px;
}

.l6-page--guides .g6-guide a:focus-visible {
    outline: none;
}

/* The ::before holds the picture's shape, so a card on its side can stretch the
   picture to the height of its text */
.l6-page--guides .g6-guide-cover {
    position: relative;
    display: block;
    flex: none;
    background: var(--l6-haze);
}

.l6-page--guides .g6-guide-cover::before {
    content: "";
    display: block;
    padding-top: 52.5%;
}

.l6-page--guides .g6-guide-cover img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* No cover yet: the topic's token in the picture's place */
.l6-page--guides .g6-guide-cover--none img,
.l6-page--guides .g6-guide-cover--none i {
    inset: 50% auto auto 50%;
    width: 64px;
    height: 64px;
    object-fit: contain;
    transform: translate(-50%, -50%);
}

.l6-page--guides .g6-guide-cover--none i {
    position: absolute;
    display: grid;
    place-items: center;
    color: var(--l6-blue);
    font-size: 1.6rem;
}

.l6-page--guides .g6-guide-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
    padding: 16px 18px;
}

.l6-page--guides .g6-guide-title {
    margin: 0;
    font-family: var(--l6-display);
    font-size: 1.08rem;
    font-weight: 900;
    letter-spacing: -0.01em;
    line-height: 1.25;
}

.l6-page--guides .g6-guide-title a {
    color: var(--l6-ink);
    text-decoration: none;
}

.l6-page--guides .g6-guide:hover .g6-guide-title a {
    color: var(--l6-blue-deep);
}

/* Only the first guide of a topic has a description, and only a card on its side shows it */
.l6-page--guides .g6-guide-desc {
    display: none;
    margin: 10px 0 0;
    font-size: 0.95rem;
    line-height: 1.55;
}

.l6-page--guides .g6-guide-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: auto 0 0;
    padding-top: 12px;
    color: var(--l6-muted);
    font-size: 0.82rem;
    line-height: 1.2;
}

.l6-page--guides .g6-guide-meta .s6-ico {
    width: 15px;
    height: 15px;
}

/* A topic's only guide lies on its side: picture left, title and description right.
   The picture is set into the card and keeps its shape, so it is never cropped when
   the text runs taller than it. */
@media (min-width: 640.02px) {
    .l6-page--guides .g6-shelf--n1 .g6-guide--lead {
        flex-direction: row;
        align-items: center;
        padding: 14px;
    }

    .l6-page--guides .g6-shelf--n1 .g6-guide--lead .g6-guide-cover {
        flex: 0 0 46%;
        overflow: hidden;
        border-radius: 12px;
    }

    .l6-page--guides .g6-shelf--n1 .g6-guide--lead .g6-guide-body {
        justify-content: center;
        padding: 8px 14px 8px 26px;
    }

    .l6-page--guides .g6-shelf--n1 .g6-guide--lead .g6-guide-title {
        font-size: 1.4rem;
        letter-spacing: -0.02em;
        line-height: 1.15;
    }

    .l6-page--guides .g6-shelf--n1 .g6-guide--lead .g6-guide-desc {
        display: block;
    }

    .l6-page--guides .g6-shelf--n1 .g6-guide--lead .g6-guide-meta {
        margin-top: 0;
        padding-top: 14px;
    }
}

/* The rest of a topic's guides, behind "Show more +N" */
.l6-page--guides .g6-topic-more[open] {
    flex: 0 0 100%;
}

.l6-page--guides .g6-topic-more > summary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border: 1px solid var(--l6-line);
    border-radius: 999px;
    color: var(--l6-blue-deep);
    font-size: 0.9rem;
    font-weight: 700;
    list-style: none;
    cursor: pointer;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.l6-page--guides .g6-topic-more > summary::-webkit-details-marker {
    display: none;
}

.l6-page--guides .g6-topic-more > summary:hover {
    border-color: var(--l6-blue);
    background: var(--g6-blue-soft);
}

.l6-page--guides .g6-topic-more > summary:focus-visible {
    outline: 2px solid var(--l6-blue);
    outline-offset: 2px;
}

.l6-page--guides .g6-topic-more > summary .s6-ico {
    width: 14px;
    height: 14px;
    stroke-width: 2.5;
    transition: transform 0.2s ease;
}

.l6-page--guides .g6-topic-more[open] > summary .s6-ico {
    transform: rotate(180deg);
}

.l6-page--guides .g6-topic-more-close,
.l6-page--guides .g6-topic-more[open] .g6-topic-more-open {
    display: none;
}

.l6-page--guides .g6-topic-more[open] .g6-topic-more-close {
    display: inline;
}

.l6-page--guides .g6-topic-more > .g6-guides {
    margin-top: 16px;
}

/* ---------- Topics still waiting for their first guide (index) ---------- */
.l6-page--guides .g6-topics {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 20px;
}

.l6-page--guides .g6-shelves + .g6-topics {
    margin-top: clamp(32px, 4vw, 48px);
    padding-top: clamp(32px, 4vw, 48px);
    border-top: 1px solid var(--l6-line);
}

.l6-page--guides .g6-topic {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 24px;
    border: 1px solid var(--l6-line);
    border-radius: 22px;
    background: #fff;
    scroll-margin-top: calc(var(--g6-header) + 24px);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.l6-page--guides .g6-topic:target {
    border-color: var(--l6-blue);
    box-shadow: 0 0 0 3px rgba(9, 103, 242, 0.18);
}

.l6-page--guides .g6-topic-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
}

.l6-page--guides .g6-topic h3 {
    margin: 0 0 6px;
    font-family: var(--l6-display);
    font-size: 1.3rem;
    font-weight: 900;
    letter-spacing: -0.02em;
    line-height: 1.15;
}

.l6-page--guides .g6-topic-desc {
    margin: 0 0 18px;
    font-size: 0.95rem;
    line-height: 1.55;
}

.l6-page--guides .g6-topic-empty {
    margin-top: auto;
    padding: 14px 16px;
    border: 1.5px dashed var(--l6-line);
    border-radius: 14px;
    font-size: 0.88rem;
    line-height: 1.45;
}

.l6-page--guides .g6-topic-empty p {
    font-weight: 400;
}

/* ---------- Help + resources (index) ---------- */
.l6-page--guides .g6-help {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 24px;
    align-items: stretch;
}

.l6-page--guides .g6-help-panel {
    position: relative;
    overflow: hidden;
    padding: clamp(28px, 3.5vw, 44px);
    border-radius: 28px;
    background:
        radial-gradient(60% 80% at 100% 0%, rgba(9, 103, 242, 0.45), transparent 70%),
        #0b1734;
    color: rgba(255, 255, 255, 0.78);
}

.l6-page--guides .g6-help-token {
    display: block;
    width: 72px;
    height: 72px;
}

.l6-page--guides .g6-help-panel .g6-h2 {
    margin-top: 18px;
    color: #fff;
}

.l6-page--guides .g6-help-panel p {
    max-width: 30em;
    margin: 0 0 26px;
    font-size: 1.04rem;
}

.l6-page--guides .g6-help-links {
    padding: clamp(24px, 3vw, 36px);
    border: 1px solid var(--l6-line);
    border-radius: 28px;
    background: #fff;
}

.l6-page--guides .g6-help-links-title {
    margin: 0 0 6px;
    font-family: var(--l6-display);
    font-size: 1.3rem;
    font-weight: 900;
    letter-spacing: -0.02em;
}

.l6-page--guides .g6-help-links ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.l6-page--guides .g6-help-links li + li {
    border-top: 1px solid var(--l6-line);
}

.l6-page--guides .g6-help-links a {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
    padding: 16px 4px;
    color: var(--l6-body);
    text-decoration: none;
}

.l6-page--guides .g6-help-icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--l6-haze);
    color: var(--l6-ink);
}

.l6-page--guides .g6-help-panel .g6-btn .s6-ico {
    width: 20px;
    height: 20px;
}

.l6-page--guides .g6-help-links b {
    display: block;
    color: var(--l6-ink);
    font-size: 1rem;
}

.l6-page--guides .g6-help-links small {
    display: block;
    margin-top: 2px;
    color: var(--l6-muted);
    font-size: 0.88rem;
    line-height: 1.45;
}

.l6-page--guides .g6-help-go {
    display: inline-flex;
    color: var(--l6-blue);
    transition: transform 0.2s ease;
}

.l6-page--guides .g6-help-go .s6-ico {
    width: 18px;
    height: 18px;
    stroke-width: 2.25;
}

.l6-page--guides .g6-help-links a:hover b {
    color: var(--l6-blue-deep);
}

.l6-page--guides .g6-help-links a:hover .g6-help-go {
    transform: translateX(3px);
}

/* ---------- Keep reading cards (article) ---------- */
.l6-page--guides .g6-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.l6-page--guides .g6-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 24px;
    border: 1px solid var(--l6-line);
    border-radius: 22px;
    background: #fff;
    transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.l6-page--guides .g6-card:hover {
    border-color: var(--l6-blue);
    box-shadow: 0 18px 40px rgba(13, 27, 46, 0.08);
    transform: translateY(-2px);
}

.l6-page--guides .g6-card:focus-within {
    outline: 3px solid rgba(9, 103, 242, 0.45);
    outline-offset: 3px;
}

.l6-page--guides .g6-card a:focus-visible {
    outline: none;
}

.l6-page--guides .g6-card-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 14px;
    color: var(--l6-muted);
    font-size: 0.82rem;
    font-weight: 700;
}

.l6-page--guides .g6-card h3 {
    margin: 0 0 8px;
    font-family: var(--l6-display);
    font-size: 1.25rem;
    font-weight: 900;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.l6-page--guides .g6-card h3 a {
    color: var(--l6-ink);
    text-decoration: none;
}

.l6-page--guides .g6-card p {
    margin: 0 0 18px;
    font-size: 0.95rem;
    line-height: 1.55;
}

.l6-page--guides .g6-card-go {
    margin-top: auto;
    color: var(--l6-blue-deep);
    font-size: 0.92rem;
    font-weight: 700;
}

.l6-page--guides .g6-card-go i,
.l6-page--guides .g6-card-go .s6-ico {
    margin-left: 4px;
    transition: transform 0.2s ease;
}

.l6-page--guides .g6-card:hover .g6-card-go i,
.l6-page--guides .g6-card:hover .g6-card-go .s6-ico {
    transform: translateX(3px);
}

/* ==========================================================================
   Article page: band details
   ========================================================================== */

.l6-page--guides .g6-band--article {
    padding: clamp(28px, 3.5vw, 48px) 0 clamp(36px, 4vw, 56px);
}

.l6-page--guides .g6-band--article .l6-wrap {
    position: relative;
}

/* The topic's brand token, large, on the band's empty right side */
.l6-page--guides .g6-band-token {
    position: absolute;
    top: 50%;
    right: clamp(0px, 5vw, 96px);
    width: clamp(132px, 13vw, 184px);
    height: auto;
    transform: translateY(-46%) rotate(-8deg);
    pointer-events: none;
}

@media (max-width: 1023.98px) {
    .l6-page--guides .g6-band-token {
        display: none;
    }
}

/* A guide with a cover: copy on the left, the cover picture on the right. Below 1024px
   the cover follows the meta line, full width up to 640px. Covers carry no text. */
@media (min-width: 1024px) {
    .l6-page--guides .g6-band--cover .l6-wrap {
        display: grid;
        grid-template-columns: minmax(0, 1fr) clamp(280px, 34vw, 460px);
        gap: clamp(28px, 4vw, 64px);
        align-items: center;
    }
}

.l6-page--guides .g6-band-main {
    min-width: 0;
}

.l6-page--guides .g6-band-cover {
    margin: 0;
}

.l6-page--guides .g6-band-cover img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1200 / 630;
    object-fit: cover;
    border-radius: 20px;
    border: 3px solid #fff;
    box-shadow: 0 26px 60px rgba(3, 10, 30, 0.45);
}

@media (max-width: 1023.98px) {
    .l6-page--guides .g6-band-cover {
        max-width: 640px;
        margin-top: 26px;
    }
}

.l6-page--guides .g6-crumbs ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 0;
    margin: 0 0 22px;
    padding: 0;
    list-style: none;
    font-size: 0.88rem;
}

.l6-page--guides .g6-crumbs li {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    color: rgba(255, 255, 255, 0.62);
}

.l6-page--guides .g6-crumbs li + li::before {
    content: "";
    flex: none;
    width: 6px;
    height: 6px;
    margin: 0 12px 0 8px;
    border-top: 1.5px solid rgba(255, 255, 255, 0.4);
    border-right: 1.5px solid rgba(255, 255, 255, 0.4);
    transform: rotate(45deg);
}

.l6-page--guides .g6-crumbs a {
    color: var(--l6-link-on-dark);
    font-weight: 700;
    text-decoration: none;
}

.l6-page--guides .g6-crumbs a:hover {
    color: #fff;
    text-decoration: underline;
}

.l6-page--guides .g6-crumbs li span {
    max-width: 44ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.l6-page--guides .g6-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 26px 0 0;
    padding: 0;
    list-style: none;
}

.l6-page--guides .g6-meta li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 36px;
    padding: 0 14px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.86);
    font-size: 0.88rem;
}

.l6-page--guides .g6-meta li i,
.l6-page--guides .g6-meta li .s6-ico {
    color: var(--l6-sky);
}

.l6-page--guides .g6-meta .g6-meta-cat {
    padding-left: 6px;
    color: #fff;
    font-weight: 700;
}

.l6-page--guides .g6-meta-cat img {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

/* ==========================================================================
   Article page: three-column reading layout
   ========================================================================== */

.l6-page--guides .g6-docwrap {
    position: relative;
}

.l6-page--guides .g6-doc {
    display: grid;
    grid-template-columns: 248px minmax(0, 1fr) 216px;
    gap: clamp(32px, 3.6vw, 56px);
    align-items: start;
    padding: 16px 0 clamp(64px, 7vw, 96px);
}

.l6-page--guides .g6-doc--notoc {
    grid-template-columns: 248px minmax(0, 1fr);
}

/* ---------- Navigation column (partials/guides_sidebar.php) ----------
   the25-site6.css pins .guides-sidebar to top: 72px (64px under 1080px)
   with !important so it clears the sticky header; padding gives air. */
.l6-page--guides .g6-nav {
    position: sticky;
    max-height: calc(100vh - var(--g6-header));
    overflow-y: auto;
    padding: 24px 6px 24px 0;
    scrollbar-width: thin;
    scrollbar-color: var(--l6-line) transparent;
}

.l6-page--guides .g6-nav-head {
    display: none;
}

.l6-page--guides .g6-search--nav {
    max-width: none;
    margin: 0 0 14px;
}

.l6-page--guides .g6-search--nav .guides-search-input {
    height: 44px;
    padding: 0 12px 0 38px;
    border: 1px solid var(--l6-line);
    border-radius: 12px;
    background: var(--l6-haze);
    font-size: 0.92rem;
    box-shadow: none;
}

.l6-page--guides .g6-search--nav .guides-search-input:focus {
    border-color: var(--l6-blue);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(9, 103, 242, 0.18);
}

.l6-page--guides .g6-search--nav .guides-search-icon {
    top: 22px;
    left: 14px;
    color: var(--l6-muted);
    font-size: 0.9rem;
}

/* In the narrow column the results push the nav down instead of floating */
.l6-page--guides .g6-search--nav .guides-search-results {
    position: static;
    max-height: none;
    margin-top: 8px;
    box-shadow: 0 10px 24px rgba(13, 27, 46, 0.08);
}

.l6-page--guides .g6-nav-home,
.l6-page--guides .g6-nav-cat summary,
.l6-page--guides .g6-nav-links a {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 40px;
    padding: 0 10px;
    border-radius: 10px;
    font-size: 0.92rem;
    text-decoration: none;
}

.l6-page--guides .g6-nav-home,
.l6-page--guides .g6-nav-cat summary {
    color: var(--l6-ink);
    font-weight: 700;
}

.l6-page--guides .g6-nav-home:hover,
.l6-page--guides .g6-nav-cat summary:hover,
.l6-page--guides .g6-nav-links a:hover {
    background: var(--l6-haze);
    color: var(--l6-ink);
}

.l6-page--guides .g6-nav-home i,
.l6-page--guides .g6-nav-links i,
.l6-page--guides .g6-nav-home .s6-ico,
.l6-page--guides .g6-nav-links .s6-ico {
    width: 22px;
    color: var(--l6-muted);
    text-align: center;
}

.l6-page--guides .g6-nav-label {
    margin: 22px 0 6px;
    padding: 0 10px;
    color: var(--l6-muted);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.l6-page--guides .g6-nav-cat summary {
    cursor: pointer;
    list-style: none;
}

.l6-page--guides .g6-nav-cat summary::-webkit-details-marker {
    display: none;
}

.l6-page--guides .g6-nav-cat summary img {
    width: 22px;
    height: 22px;
    object-fit: contain;
}

.l6-page--guides .g6-nav-chevron {
    margin-left: auto;
    color: var(--l6-muted);
    font-size: 0.7rem;
    transition: transform 0.2s ease;
}

.l6-page--guides .g6-nav-cat[open] .g6-nav-chevron {
    transform: rotate(90deg);
}

.l6-page--guides .g6-nav-cat ul {
    margin: 2px 0 8px 21px;
    padding: 0;
    border-left: 1px solid var(--l6-line);
    list-style: none;
}

.l6-page--guides .g6-nav-cat a {
    display: block;
    margin-left: -1px;
    padding: 8px 10px 8px 14px;
    border-left: 2px solid transparent;
    border-radius: 0 10px 10px 0;
    color: var(--l6-body);
    font-size: 0.9rem;
    line-height: 1.4;
    text-decoration: none;
}

.l6-page--guides .g6-nav-cat a:hover {
    background: var(--l6-haze);
    color: var(--l6-ink);
}

.l6-page--guides .g6-nav-cat a.is-active {
    border-left-color: var(--l6-blue);
    background: var(--g6-blue-soft);
    color: var(--l6-blue-deep);
    font-weight: 700;
}

.l6-page--guides .g6-nav-links {
    margin: 0;
    padding: 0;
    list-style: none;
}

.l6-page--guides .g6-nav-links a {
    color: var(--l6-body);
    font-size: 0.9rem;
}

.l6-page--guides .g6-nav-help {
    margin-top: 22px;
    padding: 18px;
    border-radius: 18px;
    background: var(--l6-haze);
}

.l6-page--guides .g6-nav-help p {
    margin: 0 0 14px;
    font-size: 0.86rem;
    line-height: 1.5;
}

.l6-page--guides .g6-nav-help .g6-nav-help-title {
    margin-bottom: 6px;
    color: var(--l6-ink);
    font-size: 0.95rem;
    font-weight: 700;
}

.l6-page--guides .g6-nav-help-title i,
.l6-page--guides .g6-nav-help-title .s6-ico {
    margin-right: 8px;
    color: var(--l6-blue);
}

/* ---------- "On this page" column ---------- */
.l6-page--guides .g6-toc {
    position: sticky;
    top: var(--g6-header);
    max-height: calc(100vh - var(--g6-header));
    overflow-y: auto;
    padding: 24px 0;
    scrollbar-width: thin;
}

.l6-page--guides .g6-toc-title {
    margin: 0 0 10px;
    color: var(--l6-ink);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.l6-page--guides .g6-toc-list {
    margin: 0;
    padding: 0;
    border-left: 1px solid var(--l6-line);
    list-style: none;
}

.l6-page--guides .g6-toc-list a {
    display: block;
    margin-left: -1px;
    padding: 6px 0 6px 14px;
    border-left: 2px solid transparent;
    color: var(--l6-muted);
    font-size: 0.88rem;
    line-height: 1.4;
    text-decoration: none;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.l6-page--guides .g6-toc-list a:hover {
    color: var(--l6-ink);
}

.l6-page--guides .g6-toc-list a.is-active {
    border-left-color: var(--l6-blue);
    color: var(--l6-blue-deep);
    font-weight: 700;
}

.l6-page--guides .g6-toc-top {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    margin-top: 12px;
    color: var(--l6-muted);
    font-size: 0.85rem;
    font-weight: 700;
    text-decoration: none;
}

.l6-page--guides .g6-toc-top:hover {
    color: var(--l6-ink);
}

/* ---------- Sticky bar under the header (below 1180px) ---------- */
.l6-page--guides .g6-docbar {
    position: sticky;
    top: var(--g6-header);
    z-index: 30;
    display: none;
    border-bottom: 1px solid var(--l6-line);
    background: rgba(255, 255, 255, 0.96);
    -webkit-backdrop-filter: saturate(1.6) blur(12px);
    backdrop-filter: saturate(1.6) blur(12px);
}

.l6-page--guides .g6-docbar-inner {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 60px;
}

.l6-page--guides .g6-docbar-btn {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 14px;
    border: 1px solid var(--l6-line);
    border-radius: 12px;
    background: #fff;
    color: var(--l6-ink);
    font-family: var(--l6-text);
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
}

.l6-page--guides .g6-docbar-btn:hover {
    border-color: var(--l6-ink);
}

.l6-page--guides .g6-toc-m {
    display: none;
    flex: 1;
    min-width: 0;
}

.l6-page--guides .g6-toc-m summary {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 14px;
    border-radius: 12px;
    background: var(--l6-haze);
    font-size: 0.88rem;
    cursor: pointer;
    list-style: none;
}

.l6-page--guides .g6-toc-m summary::-webkit-details-marker {
    display: none;
}

.l6-page--guides .g6-toc-m-label {
    flex: none;
    color: var(--l6-muted);
    font-weight: 700;
}

.l6-page--guides .g6-toc-m-current {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    color: var(--l6-ink);
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.l6-page--guides .g6-toc-m summary i,
.l6-page--guides .g6-toc-m summary .s6-ico {
    color: var(--l6-muted);
    font-size: 0.75rem;
    transition: transform 0.2s ease;
}

.l6-page--guides .g6-toc-m[open] summary i,
.l6-page--guides .g6-toc-m[open] summary .s6-ico {
    transform: rotate(180deg);
}

.l6-page--guides .g6-toc-m-panel {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    left: 0;
    max-height: 62vh;
    overflow-y: auto;
    padding: 8px;
    border: 1px solid var(--l6-line);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 24px 60px rgba(13, 27, 46, 0.2);
}

.l6-page--guides .g6-toc-m-panel .g6-toc-list {
    border-left: 0;
}

.l6-page--guides .g6-toc-m-panel .g6-toc-list a {
    display: flex;
    align-items: center;
    min-height: 44px;
    margin: 0;
    padding: 8px 12px;
    border-left: 0;
    border-radius: 10px;
    color: var(--l6-body);
    font-size: 0.95rem;
}

.l6-page--guides .g6-toc-m-panel .g6-toc-list a.is-active {
    background: var(--g6-blue-soft);
}

/* ==========================================================================
   Article body (generic: any article file gets this look)
   ========================================================================== */

/* The reading measure (~70 characters) is set on the article, in the body
   font size, so the footer and pager line up with the text. */
.l6-page--guides .g6-article {
    min-width: 0;
    max-width: 70ch;
    padding-top: 24px;
    font-size: 1.0625rem;
}

.l6-page--guides .g6-prose {
    color: var(--l6-body);
    font-size: 1em;
    line-height: 1.75;
}

.l6-page--guides .g6-prose > :first-child {
    margin-top: 0;
}

.l6-page--guides .g6-prose h2 {
    margin: 2.4em 0 0.6em;
    color: var(--l6-ink);
    font-family: var(--l6-display);
    font-size: clamp(1.55rem, 2.2vw, 1.9rem);
    font-weight: 900;
    letter-spacing: -0.02em;
    line-height: 1.15;
    scroll-margin-top: calc(var(--g6-header) + 24px);
}

.l6-page--guides .g6-prose h3 {
    margin: 1.9em 0 0.45em;
    color: var(--l6-ink);
    font-family: var(--l6-text);
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.35;
    scroll-margin-top: calc(var(--g6-header) + 24px);
}

.l6-page--guides .g6-prose h2 + h3 {
    margin-top: 1em;
}

.l6-page--guides .g6-prose p {
    margin: 0 0 1.15em;
}

.l6-page--guides .g6-prose a {
    color: var(--l6-blue-deep);
    text-decoration: underline;
    text-decoration-color: rgba(6, 72, 181, 0.35);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.l6-page--guides .g6-prose a:hover {
    color: var(--l6-blue);
    text-decoration-color: currentColor;
}

.l6-page--guides .g6-prose strong,
.l6-page--guides .g6-prose b {
    color: var(--l6-ink);
    font-weight: 700;
}

/* Lists: blue dots; numbered lists read as steps (numbered discs + a rail) */
.l6-page--guides .g6-prose ul,
.l6-page--guides .g6-prose ol {
    margin: 0 0 1.4em;
    padding: 0;
    list-style: none;
}

.l6-page--guides .g6-prose li {
    position: relative;
    margin-bottom: 0.55em;
    padding-left: 26px;
}

.l6-page--guides .g6-prose ul > li::before {
    content: "";
    position: absolute;
    top: 0.72em;
    left: 6px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--l6-blue);
}

.l6-page--guides .g6-prose ol {
    counter-reset: g6ol;
}

.l6-page--guides .g6-prose ol > li {
    min-height: 30px;
    margin-bottom: 0.9em;
    padding-left: 46px;
    counter-increment: g6ol;
}

.l6-page--guides .g6-prose ol > li::before {
    content: counter(g6ol);
    position: absolute;
    top: 0;
    left: 0;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--g6-blue-soft);
    color: var(--l6-blue-deep);
    font-family: var(--l6-display);
    font-size: 14px;
    font-weight: 900;
    line-height: 1;
}

.l6-page--guides .g6-prose ol > li:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 34px;
    bottom: calc(-0.9em + 4px);
    left: 14px;
    width: 2px;
    border-radius: 2px;
    background: var(--l6-line);
}

.l6-page--guides .g6-prose li > ul,
.l6-page--guides .g6-prose li > ol {
    margin: 0.5em 0 0;
}

/* Code */
.l6-page--guides .g6-prose code {
    padding: 0.12em 0.42em;
    border: 1px solid var(--l6-line);
    border-radius: 6px;
    background: var(--l6-haze);
    color: var(--l6-ink);
    font-family: var(--g6-mono);
    font-size: 0.86em;
    overflow-wrap: anywhere;
}

.l6-page--guides .g6-prose pre {
    margin: 1.6em 0;
    padding: 20px 22px;
    overflow-x: auto;
    border-radius: 16px;
    background: #0b1734;
    color: #dbe7ff;
    font-family: var(--g6-mono);
    font-size: 0.9rem;
    line-height: 1.65;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.l6-page--guides .g6-prose pre code {
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font-size: inherit;
    overflow-wrap: normal;
    white-space: pre;
}

/* Tables (the controller wraps each one in .g6-table so it scrolls sideways) */
/* Scroll shadows: the white "local" layers travel with the content and hide
   the dark "scroll" layers at whichever end has nothing more to show. */
.l6-page--guides .g6-prose .g6-table {
    margin: 1.6em 0;
    overflow-x: auto;
    border: 1px solid var(--l6-line);
    border-radius: 16px;
    background:
        linear-gradient(to right, #fff 30%, rgba(255, 255, 255, 0)) left center / 40px 100% no-repeat local,
        linear-gradient(to left, #fff 30%, rgba(255, 255, 255, 0)) right center / 40px 100% no-repeat local,
        radial-gradient(farthest-side at 0 50%, rgba(13, 27, 46, 0.18), transparent) left center / 14px 100% no-repeat scroll,
        radial-gradient(farthest-side at 100% 50%, rgba(13, 27, 46, 0.18), transparent) right center / 14px 100% no-repeat scroll;
    -webkit-overflow-scrolling: touch;
}

.l6-page--guides .g6-prose table {
    width: 100%;
    min-width: 480px;
    margin: 0;
    border-collapse: collapse;
    font-size: 0.95rem;
    line-height: 1.5;
}

.l6-page--guides .g6-prose th,
.l6-page--guides .g6-prose td {
    padding: 13px 16px;
    border-bottom: 1px solid var(--l6-line);
    text-align: left;
    vertical-align: top;
}

.l6-page--guides .g6-prose thead th {
    background: var(--l6-haze);
    color: var(--l6-ink);
    font-size: 0.88rem;
    font-weight: 700;
}

.l6-page--guides .g6-prose tbody tr:last-child td {
    border-bottom: 0;
}

.l6-page--guides .g6-prose tbody td:first-child {
    color: var(--l6-ink);
    font-weight: 700;
}

/* Quotes, images, rules */
.l6-page--guides .g6-prose blockquote {
    margin: 1.6em 0;
    padding: 18px 22px;
    border-left: 3px solid var(--l6-blue);
    border-radius: 0 16px 16px 0;
    background: var(--l6-haze);
    color: var(--l6-ink);
    font-size: 1.06rem;
}

.l6-page--guides .g6-prose blockquote p:last-child {
    margin-bottom: 0;
}

.l6-page--guides .g6-prose img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 1.6em 0;
    border: 1px solid var(--l6-line);
    border-radius: 16px;
    box-shadow: 0 18px 40px rgba(13, 27, 46, 0.1);
}

.l6-page--guides .g6-prose figure {
    margin: 1.8em 0;
}

.l6-page--guides .g6-prose figure img {
    margin: 0 auto;
}

.l6-page--guides .g6-prose figcaption {
    margin-top: 12px;
    color: var(--l6-muted);
    font-size: 0.88rem;
    line-height: 1.5;
    text-align: center;
}

.l6-page--guides .g6-prose hr {
    margin: 2.4em 0;
    border: 0;
    border-top: 1px solid var(--l6-line);
    opacity: 1;
}

/* Callouts: <div class="guides-callout tip|warning|info"> */
.l6-page--guides .g6-prose .guides-callout {
    display: flex;
    gap: 14px;
    margin: 1.6em 0;
    padding: 18px 20px;
    border-radius: 16px;
    background: var(--g6-blue-soft);
    color: var(--l6-ink);
    font-size: 1rem;
    line-height: 1.6;
}

.l6-page--guides .g6-prose .guides-callout > div:last-child {
    min-width: 0;
    padding-top: 4px;
}

.l6-page--guides .g6-prose .guides-callout-icon {
    display: grid;
    flex: none;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #fff;
    color: var(--l6-blue);
    font-size: 0.95rem;
}

.l6-page--guides .g6-prose .guides-callout.tip {
    background: var(--l6-go-soft);
}

.l6-page--guides .g6-prose .guides-callout.tip .guides-callout-icon {
    color: var(--l6-go);
}

.l6-page--guides .g6-prose .guides-callout.warning {
    background: var(--g6-amber-soft);
}

.l6-page--guides .g6-prose .guides-callout.warning .guides-callout-icon {
    color: var(--l6-amber-deep);
}

/* Mini hero (partials/guides_cta.php): the sign-up panel inside a guide. Navy like the
   share cards, a big headline, ticks, and the homepage's paste-a-link form (or, on the bio
   host, the claim-your-page form). Every guide ends with one; one more may sit mid-article. */
.l6-page--guides .g6-prose .guides-cta {
    position: relative;
    margin: 2.6em 0;
    padding: clamp(26px, 4vw, 40px);
    overflow: hidden;
    border-radius: 24px;
    background:
        radial-gradient(55% 80% at 0% 0%, rgba(9, 103, 242, 0.55), transparent 72%),
        radial-gradient(45% 60% at 100% 100%, rgba(120, 60, 200, 0.28), transparent 70%),
        #0b1734;
    box-shadow: 0 18px 44px rgba(11, 23, 52, 0.22);
    color: rgba(255, 255, 255, 0.82);
}

.l6-page--guides .g6-prose .guides-cta-copy {
    max-width: 34em;
}

.l6-page--guides .g6-prose .guides-cta-logo {
    display: block;
    width: auto;
    height: 26px;
    margin: 0 0 18px;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.l6-page--guides .g6-prose .guides-cta .guides-cta-title {
    margin: 0 0 10px;
    color: #fff;
    font-family: var(--l6-display);
    font-size: clamp(1.55rem, 1.1rem + 1.5vw, 2.15rem);
    font-weight: 900;
    letter-spacing: -0.025em;
    line-height: 1.1;
    text-wrap: balance;
}

.l6-page--guides .g6-prose .guides-cta .guides-cta-text {
    margin: 0;
    font-size: 1.06rem;
    line-height: 1.55;
}

.l6-page--guides .g6-prose .guides-cta-points {
    display: grid;
    gap: 8px;
    margin: 16px 0 0;
    padding: 0;
}

.l6-page--guides .g6-prose .guides-cta-points li {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    color: #fff;
    font-size: 0.97rem;
    font-weight: 600;
    line-height: 1.35;
}

.l6-page--guides .g6-prose .guides-cta-points li::before {
    content: none;
}

.l6-page--guides .g6-prose .guides-cta-points .s6-ico {
    flex: none;
    width: 22px;
    height: 22px;
    color: #5be3a0;
}

.l6-page--guides .g6-prose .guides-cta-points .s6-ico .s6-ico-a {
    fill: rgba(91, 227, 160, 0.18);
}

.l6-page--guides .g6-prose .guides-cta-act {
    margin-top: 24px;
}

.l6-page--guides .g6-prose .guides-cta-form {
    max-width: 560px;
    margin: 0;
}

.l6-page--guides .g6-prose .guides-cta .lp3-url-input-group {
    border-color: #fff;
}

.l6-page--guides .g6-prose .guides-cta .lp3-url-input-group:focus-within {
    box-shadow: 0 0 0 4px rgba(9, 103, 242, 0.45);
}

.l6-page--guides .g6-prose .guides-cta .lp3-url-error {
    color: #fff;
}

.l6-page--guides .g6-prose .guides-cta .b6-claim {
    margin: 0;
}

.l6-page--guides .g6-prose a.g6-btn {
    color: #fff;
    text-decoration: none;
}

.l6-page--guides .g6-prose .guides-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.l6-page--guides .g6-prose .guides-cta-btn .s6-ico {
    width: 20px;
    height: 20px;
}

.l6-page--guides .g6-prose .guides-cta .guides-cta-free {
    margin: 12px 0 0;
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.88rem;
}

/* Key takeaways: <div class="guides-takeaways"><p class="guides-takeaways-title">…</p><ul>…</ul></div>
   The short answer, straight after the introduction. */
.l6-page--guides .g6-prose .guides-takeaways {
    margin: 1.8em 0;
    padding: 22px 24px;
    border: 1px solid var(--l6-line);
    border-left: 4px solid var(--l6-blue);
    border-radius: 4px 16px 16px 4px;
    background: var(--l6-haze);
}

.l6-page--guides .g6-prose .guides-takeaways-title {
    margin: 0 0 10px;
    color: var(--l6-ink);
    font-family: var(--l6-display);
    font-size: 1.05rem;
    font-weight: 800;
}

.l6-page--guides .g6-prose .guides-takeaways ul {
    margin: 0;
}

.l6-page--guides .g6-prose .guides-takeaways li:last-child {
    margin-bottom: 0;
}

/* Sources: <ol class="guides-sources"> under <h2 id="sources">. Small print, long links wrap. */
.l6-page--guides .g6-prose ol.guides-sources {
    color: var(--l6-muted);
    font-size: 0.92rem;
    line-height: 1.55;
}

.l6-page--guides .g6-prose ol.guides-sources a {
    overflow-wrap: anywhere;
}

/* Admin preview of the schedule (Helpers\Guides): the note in a band, the date mark in lists */
.l6-page--guides .g6-preview {
    display: inline-block;
    max-width: 64ch;
    margin: 18px 0 0;
    padding: 10px 14px;
    border-radius: 12px;
    background: var(--g6-amber-soft);
    color: var(--l6-amber-deep);
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.45;
}

.l6-page--guides .g6-scheduled {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--g6-amber-soft);
    color: var(--l6-amber-deep);
    font-family: var(--l6-ui);
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.6;
    white-space: nowrap;
    vertical-align: middle;
}

/* ---------- Under the article ---------- */
.l6-page--guides .g6-article-foot {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px 24px;
    margin-top: 48px;
    padding-top: 20px;
    border-top: 1px solid var(--l6-line);
    color: var(--l6-muted);
    font-size: 0.92rem;
}

.l6-page--guides .g6-article-foot p {
    margin: 0;
}

.l6-page--guides .g6-article-foot i,
.l6-page--guides .g6-article-foot .s6-ico {
    margin-right: 8px;
}

.l6-page--guides .g6-article-foot a {
    font-weight: 700;
}

.l6-page--guides .g6-pager {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 28px;
}

.l6-page--guides .g6-pager-link {
    display: block;
    padding: 16px 18px;
    border: 1px solid var(--l6-line);
    border-radius: 16px;
    text-decoration: none;
    transition: border-color 0.2s ease;
}

.l6-page--guides .g6-pager-link:hover {
    border-color: var(--l6-blue);
}

.l6-page--guides .g6-pager-link--next {
    grid-column: 2;
    text-align: right;
}

.l6-page--guides .g6-pager-link small {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--l6-muted);
    font-size: 0.82rem;
    font-weight: 700;
}

.l6-page--guides .g6-pager-link--next small {
    justify-content: flex-end;
}

.l6-page--guides .g6-pager-link b {
    display: block;
    margin-top: 4px;
    color: var(--l6-ink);
    line-height: 1.35;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1179.98px) {
    /* A shelf stacks: the topic above its cards */
    .l6-page--guides .g6-shelf {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
    }

    .l6-page--guides .g6-shelf-head {
        position: static;
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        gap: 4px 18px;
        align-items: center;
    }

    .l6-page--guides .g6-shelf-head .g6-topic-token {
        grid-row: 1 / span 2;
        grid-column: 1;
        align-self: start;
    }

    .l6-page--guides .g6-shelf-head h3 {
        grid-row: 1;
        grid-column: 2;
        margin: 0;
    }

    .l6-page--guides .g6-shelf-count {
        grid-row: 1;
        grid-column: 3;
        margin: 0;
    }

    .l6-page--guides .g6-shelf-desc {
        grid-row: 2;
        grid-column: 2 / -1;
        max-width: 62ch;
    }

    .l6-page--guides .g6-doc {
        grid-template-columns: minmax(0, 1fr) 208px;
    }

    .l6-page--guides .g6-doc--notoc {
        grid-template-columns: minmax(0, 1fr);
    }

    .l6-page--guides .g6-docbar {
        display: block;
    }

    /* Anchor jumps clear the header plus the 60px docbar */
    .l6-page--guides .g6-prose h2,
    .l6-page--guides .g6-prose h3 {
        scroll-margin-top: calc(var(--g6-header) + 84px);
    }

    /* The guides navigation becomes a drawer under the site header. Its top
       comes from the25-site6.css (72px / 64px, !important). */
    .l6-page--guides .g6-nav {
        position: fixed;
        bottom: 0;
        left: 0;
        z-index: 1025;
        width: min(340px, 88vw);
        max-height: none;
        padding: 0 20px 28px;
        overflow-y: auto;
        overscroll-behavior: contain;
        background: #fff;
        box-shadow: 0 0 0 1px var(--l6-line), 24px 0 60px rgba(13, 27, 46, 0.18);
        transform: translateX(-104%);
        visibility: hidden;
        transition: transform 0.25s ease, visibility 0s linear 0.25s;
    }

    .l6-page--guides .g6-nav.is-open {
        transform: none;
        visibility: visible;
        transition: transform 0.25s ease;
    }

    .l6-page--guides .g6-nav-head {
        position: sticky;
        top: 0;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 0 -20px 16px;
        padding: 10px 12px 10px 20px;
        border-bottom: 1px solid var(--l6-line);
        background: #fff;
        color: var(--l6-ink);
        font-family: var(--l6-display);
        font-size: 1.15rem;
        font-weight: 900;
    }

    .l6-page--guides .g6-nav-close {
        display: grid;
        place-items: center;
        width: 44px;
        height: 44px;
        border: 0;
        border-radius: 50%;
        background: var(--l6-haze);
        color: var(--l6-ink);
        cursor: pointer;
    }

    .l6-page--guides .g6-nav-overlay {
        position: fixed;
        inset: 0;
        z-index: 1024;
        background: rgba(11, 23, 52, 0.45);
    }
}

@media (min-width: 1180px) {
    .l6-page--guides .g6-nav-overlay {
        display: none !important;
    }
}

@media (max-width: 1060px) {
    .l6-page--guides .g6-cards {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 859.98px) {
    .l6-page--guides .g6-guides,
    .l6-page--guides .g6-shelf--n2 .g6-guides {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }
}

/* Two columns: the first guide of a full shelf lies on its side across both
   (the same card as a topic's only guide, see "Guide cards") */
@media (min-width: 640.02px) and (max-width: 859.98px) {
    .l6-page--guides .g6-shelf--n3 .g6-guide--lead {
        flex-direction: row;
        grid-column: 1 / -1;
        align-items: center;
        padding: 14px;
    }

    .l6-page--guides .g6-shelf--n3 .g6-guide--lead .g6-guide-cover {
        flex: 0 0 46%;
        overflow: hidden;
        border-radius: 12px;
    }

    .l6-page--guides .g6-shelf--n3 .g6-guide--lead .g6-guide-body {
        justify-content: center;
        padding: 8px 14px 8px 24px;
    }

    .l6-page--guides .g6-shelf--n3 .g6-guide--lead .g6-guide-title {
        font-size: 1.25rem;
        letter-spacing: -0.02em;
        line-height: 1.18;
    }

    .l6-page--guides .g6-shelf--n3 .g6-guide--lead .g6-guide-desc {
        display: block;
    }

    .l6-page--guides .g6-shelf--n3 .g6-guide--lead .g6-guide-meta {
        margin-top: 0;
        padding-top: 14px;
    }
}

@media (max-width: 899.98px) {
    .l6-page--guides .g6-band-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .l6-page--guides .g6-start {
        max-width: 580px;
    }

    .l6-page--guides .g6-help {
        grid-template-columns: minmax(0, 1fr);
    }

    .l6-page--guides .g6-doc,
    .l6-page--guides .g6-doc--notoc {
        grid-template-columns: minmax(0, 1fr);
    }

    .l6-page--guides .g6-toc {
        display: none;
    }

    .l6-page--guides .g6-toc-m {
        display: block;
    }
}

@media (max-width: 640px) {
    .l6-page--guides .g6-display {
        font-size: 2.4rem;
    }

    .l6-page--guides .g6-display--article {
        font-size: 2rem;
    }

    .l6-page--guides .g6-crumbs li[aria-current] {
        display: none;
    }

    .l6-page--guides .g6-topic,
    .l6-page--guides .g6-card {
        padding: 20px;
    }

    /* The topic links sit on one line that scrolls sideways, edge to edge */
    .l6-page--guides .g6-topicnav {
        margin-inline: -16px;
    }

    .l6-page--guides .g6-topicnav ul {
        flex-wrap: nowrap;
        padding: 5px 16px;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
    }

    .l6-page--guides .g6-topicnav ul::-webkit-scrollbar {
        display: none;
    }

    .l6-page--guides .g6-topicnav a {
        min-height: 44px;
    }

    /* A topic: token and name on one line, then the description and the count */
    .l6-page--guides .g6-shelf-head {
        grid-template-columns: auto minmax(0, 1fr);
        gap: 10px 14px;
    }

    .l6-page--guides .g6-shelf-head .g6-topic-token {
        grid-row: 1;
        align-self: center;
        width: 48px;
        height: 48px;
        border-radius: 14px;
    }

    .l6-page--guides .g6-shelf-head .g6-topic-token img {
        width: 36px;
        height: 36px;
    }

    .l6-page--guides .g6-shelf-head h3 {
        font-size: 1.3rem;
    }

    .l6-page--guides .g6-shelf-desc {
        grid-column: 1 / -1;
    }

    .l6-page--guides .g6-shelf-count {
        grid-row: 3;
        grid-column: 1 / -1;
    }

    /* One column. After the first guide of a topic, a guide is a row: small picture, title */
    .l6-page--guides .g6-guides,
    .l6-page--guides .g6-shelf--n2 .g6-guides {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }

    .l6-page--guides .g6-guide:not(.g6-guide--lead) {
        flex-direction: row;
        align-items: center;
        gap: 12px;
        padding: 10px 14px 10px 10px;
        border-radius: 16px;
    }

    .l6-page--guides .g6-guide:not(.g6-guide--lead) .g6-guide-cover {
        flex: 0 0 116px;
        overflow: hidden;
        border-radius: 9px;
    }

    .l6-page--guides .g6-guide:not(.g6-guide--lead) .g6-guide-body {
        padding: 0;
    }

    .l6-page--guides .g6-guide:not(.g6-guide--lead) .g6-guide-title {
        font-size: 0.98rem;
    }

    .l6-page--guides .g6-guide:not(.g6-guide--lead) .g6-guide-meta {
        padding-top: 6px;
    }

    .l6-page--guides .g6-start-card {
        padding: 22px 20px 18px;
    }

    .l6-page--guides .g6-start-cover {
        width: calc(100% + 40px);
        margin: -22px -20px 16px;
    }

    .l6-page--guides .g6-start-title {
        font-size: 1.35rem;
    }

    .l6-page--guides .g6-article {
        font-size: 1rem;
    }

    .l6-page--guides .g6-pager {
        grid-template-columns: minmax(0, 1fr);
    }

    .l6-page--guides .g6-pager-link--next {
        grid-column: auto;
    }
}

@media (max-width: 520px) {
    .l6-page--guides .g6-toc-m-label {
        display: none;
    }

    .l6-page--guides .g6-docbar-btn {
        padding: 0 12px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .l6-page--guides *,
    .l6-page--guides *::before,
    .l6-page--guides *::after {
        transition: none !important;
    }
}

/* ---------------------------------------------------------------------------
   iOS focus-zoom guard — keep last in this file.

   Safari on iOS zooms the whole page in whenever the user taps a field that
   renders below 16px, and it does not zoom back out. The viewport directives
   that look like they prevent this (maximum-scale=1, user-scalable=no) have
   been ignored by iOS since iOS 10, so sizing the field at 16px is the only
   thing that works. 15px is not close enough — the threshold is exactly 16.

   This has to be !important and last because the rules it overrides are
   themselves !important and live inside mobile media queries (e.g. the 15px
   .form-control rule in this file, and per-widget class rules down to 12px).
   The :not() chain both skips controls that never receive text (checkboxes,
   buttons, sliders) and lifts specificity above the id-scoped one-offs.
--------------------------------------------------------------------------- */
@media (max-width: 900px) {
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):not([type="submit"]):not([type="button"]):not([type="image"]),
    textarea,
    select,
    .form-control,
    .form-select,
    [contenteditable="true"],
    .select2-container .select2-search__field { font-size: 16px !important; }
}

/* Byline in the article band (registry 'author'), and the author page (guides/author.php) */
.l6-page--guides .g6-meta .g6-meta-author a {
    color: inherit;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.l6-page--guides .g6-band--author .g6-band-copy {
    max-width: 720px;
}

.l6-page--guides .g6-author-head {
    display: flex;
    align-items: center;
    gap: 20px;
}

.l6-page--guides .g6-author-photo {
    flex: none;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    object-fit: cover;
}

.l6-page--guides .g6-author-bio {
    margin-top: 16px;
    font-size: 1.05rem;
    line-height: 1.6;
}

.l6-page--guides .g6-author-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 18px;
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
}

.l6-page--guides .g6-author-links a {
    color: inherit;
    font-weight: 700;
}