/* tilspire.com — theme stylesheet, M4 Field Trail.
   Order: @font-face, tokens, base, parts, layouts, @supports, then every
   @media (breakpoints and the reduced-motion block) at the bottom, per the
   house style. Light only: the drawings have no dark palette. Ink and Action
   on Ground or Card meet 4.5:1 for text. */

@font-face {
    font-family:"Unbounded";
    src:url("fonts/unbounded-var.woff2") format("woff2-variations"),url("fonts/unbounded-var.woff2") format("woff2");
    font-weight:200 900;
    font-style:normal;
    font-display:swap;
}

@font-face {
    font-family:"DM Sans";
    src:url("fonts/dm-sans-var.woff2") format("woff2-variations"),url("fonts/dm-sans-var.woff2") format("woff2");
    font-weight:100 1000;
    font-style:normal;
    font-display:swap;
}

@font-face {
    font-family:"DM Sans";
    src:url("fonts/dm-sans-var-italic.woff2") format("woff2-variations"),url("fonts/dm-sans-var-italic.woff2") format("woff2");
    font-weight:100 1000;
    font-style:italic;
    font-display:swap;
}

@font-face {
    font-family:"JetBrains Mono";
    src:url("fonts/jetbrains-mono-var.woff2") format("woff2-variations"),url("fonts/jetbrains-mono-var.woff2") format("woff2");
    font-weight:100 800;
    font-style:normal;
    font-display:swap;
}

/* tokens */
:root{
    --ground:#EEF5EF;--card:#F9FBF8;--pill-bg:#F7FAF6;--side:#E4F0E7;
    --line:#D9E7DC;--line-strong:#B9D1C0;
    --leaf:#DDEFE2;--lime:#CBEBB4;--sprout:#2E9A62;
    --action:#21754A;--action-hover:#195C3A;--on-action:#F7FBF6;
    --ink:#1E3A2F;--deep:#2D4A3C;--muted:#4A6357;--faint:#8AA596;--on-ink:#F4F9F3;
    --note:#F7EED6;--gold:#F3E6C4;--gold-ink:#5C4510;--eyebrow:#2B6B49;--dash:#9FD0AE;
    --shadow:0 1px 0 var(--line);
    --shadow-lift:0 40px 80px -40px rgba(30,58,47,0.35);
    --r-sm:12px;--r:18px;--r-lg:22px;--r-card:28px;--pill:999px;
    --ease:cubic-bezier(0.2,0.7,0.25,1);--dur:0.2s;
    --font-display:"Unbounded","Segoe UI",system-ui,-apple-system,sans-serif;
    --font-body:"DM Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
    --font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,"Cascadia Mono",Consolas,monospace;
    --shell:1344px;--gutter:32px;--measure:720px;

    /* THE MODULE CONTRACT (site/themes/README.md section 6 in the product repo). Modules ship
       their own stylesheets and read these names to look like the site around them; a theme
       that defines none of them gets modules rendered in their own neutral greys instead.
       Until 1.5.0 forums.css read --color-primary and --glass-bg, which THIS theme never
       defined, so the board rendered in the old starter theme's blue and frosted glass for its
       whole life without anything reporting it.

       --cms-accent is Action, not Sprout: a module uses one accent for links AND for button
       fills, and Action is the one that is readable as text. */
    --cms-bg:var(--ground);--cms-sunk:var(--side);--cms-surface:var(--card);
    --cms-ink:var(--ink);--cms-text:var(--deep);
    --cms-muted:var(--muted);
    --cms-line:var(--line);--cms-line-strong:var(--line-strong);
    --cms-accent:var(--action);--cms-accent-contrast:var(--on-action);
    --cms-accent-wash:var(--leaf);
    --cms-radius:var(--r);--cms-radius-sm:var(--r-sm);--cms-shadow:var(--shadow);
    --cms-font:var(--font-body);--cms-font-display:var(--font-display);
    --cms-font-mono:var(--font-mono);
    --cms-content-width:var(--shell);--cms-content-gutter:var(--gutter);
}

/* base */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:1.5rem;}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--font-body);font-size:1.0625rem;line-height:1.6;}
img{max-width:100%;height:auto;display:block;}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;line-height:1.12;letter-spacing:-0.03em;}
a{color:var(--action);text-underline-offset:3px;}
a:hover{color:var(--action-hover);}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px;border-radius:var(--r-sm);}
code,kbd,samp{font-family:var(--font-mono);font-size:0.86em;}
::selection{background:var(--lime);color:var(--ink);}

/* utilities */
.shell{width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:var(--gutter);}
/* Every board but the home page's draws a 1280px frame, header and footer included. */
body:not(.is-home){--shell:1280px;--cms-content-width:1280px;}
.on-narrow{display:none;}
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;}
.skip-link{position:absolute;left:1rem;top:-5rem;z-index:100;padding:0.75rem 1.15rem;border-radius:var(--pill);background:var(--action);color:var(--on-action);font-weight:700;text-decoration:none;transition:top var(--dur) var(--ease);}
.skip-link:focus{top:1rem;color:var(--on-action);}

/* Module views (forums today, anything dropped in later) render straight into <main> with no
   wrapper of their own. This theme constrains per section inside its own views, because its
   heroes are deliberately full-bleed — so module content would arrive edge-to-edge with no
   gutter. Every view this theme ships opens with .hero, .section or .shell, so anything else
   under <main> belongs to a module and gets the same shell the docs and news pages use.
   Core's .auth-card is the exception: it is a narrow card that sizes itself (below). */
.site-main > *:not(.hero):not(.section):not(.shell):not(.auth-card){width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:var(--gutter);padding-block:clamp(2rem,5vw,3rem) 0;}
/* Forums up to 1.17.3 hardcode a blue tint on these six instead of reading their own tokens
   (fixed in the product for the next release). forums.css loads after this file, hence the
   .site-main prefix. Delete this block once the site runs that release. */
.site-main .forums-hero h1{font-family:var(--font-display);font-weight:600;font-size:clamp(2.375rem,5vw,4rem);letter-spacing:-0.04em;line-height:1.05;}
.site-main .forums-search__btn{background:var(--pill-bg);color:var(--ink);border:1px solid var(--line);font-size:1rem;font-weight:700;}
.site-main .forums-search__btn:hover{background:var(--pill-bg);color:var(--ink);}
/* As drawn, the search is a pill field with its button beside it, not inside one shared pill. */
.site-main .forums-search{gap:8px;width:420px;padding:0;border:0;background:none;box-shadow:none;}
.site-main .forums-search__icon{display:none;}
.site-main .forums-search__input{min-height:55px;padding:13px 20px;border:1.5px solid var(--line-strong);border-radius:var(--pill);background:#fff;color:var(--ink);font-size:1rem;}
.site-main .forums-search__btn{min-height:55px;padding:0 24px;border-radius:var(--pill);}
.site-main .forums-hero__badge,.site-main .forums-icon:not([class*="forums-icon--t"]):not(.forums-icon--category):not(.forums-icon--link){background:var(--cms-accent-wash);}
.site-main .forums-badge--staff{background:var(--cms-accent-wash);color:var(--cms-accent);border-color:var(--line-strong);}
.site-main .forums-row--pinned{background:color-mix(in oklab,var(--cms-accent) 5%,transparent);}
.site-main .forums-prose blockquote,.site-main .forums-editor .ql-editor blockquote{background:color-mix(in oklab,var(--cms-accent) 6%,transparent);}

/* Core's sign-in and account pages (core/assets/auth.css) are neutral greys that read no theme
   token, so their classes are coloured here; the markup stays core's. auth.css loads after this
   file, hence the .site-main prefix. Never touch .auth-trap: showing it marks a person a bot. */
.site-main .auth-card{width:calc(100% - 2*var(--gutter));max-width:30rem;margin:clamp(2rem,5vw,3.5rem) auto 0;padding:clamp(26px,4vw,40px);background:var(--card);border:1px solid var(--line);border-radius:32px;box-shadow:var(--shadow-lift);}
.site-main .auth-card-wide{max-width:40rem;}
.site-main .auth-card h1{margin:0 0 8px;font-size:clamp(1.75rem,3vw,2rem);letter-spacing:-0.035em;}
.site-main .auth-lead{color:var(--muted);opacity:1;font-size:1rem;}
.site-main .auth-field{margin-bottom:18px;}
.site-main .auth-field label{margin-bottom:6px;font-size:0.9375rem;font-weight:700;}
.site-main .auth-field input{padding:13px 18px;border:1.5px solid var(--line-strong);border-radius:16px;background:#FFFFFF;color:var(--ink);}
.site-main .auth-hint{color:var(--muted);opacity:1;font-size:0.875rem;}
.site-main .auth-check{gap:12px;font-size:0.9375rem;font-weight:500;}
.site-main .auth-check input{
    flex:none;position:relative;width:46px;height:26px;margin:0;border-radius:var(--pill);
    appearance:none;background:var(--line-strong);cursor:pointer;transition:background var(--dur) var(--ease);
}
.site-main .auth-check input::after{content:"";position:absolute;left:3px;top:3px;width:20px;height:20px;border-radius:50%;background:#FFFFFF;transition:transform var(--dur) var(--ease);}
.site-main .auth-check input:checked{background:var(--action);}
.site-main .auth-check input:checked::after{transform:translateX(20px);}
.site-main .auth-check input:focus-visible{outline:3px solid var(--ink);outline-offset:2px;}
.site-main .auth-submit,.site-main .auth-inline-submit{
    min-height:56px;padding:17px 30px;border-radius:var(--pill);background:var(--action);color:var(--on-action);
    font-family:var(--font-body);font-weight:700;font-size:1.0625rem;transition:background var(--dur) var(--ease);
}
.site-main .auth-inline-submit{min-height:44px;padding:10px 20px;font-size:0.9375rem;}
.site-main .auth-submit:hover,.site-main .auth-inline-submit:hover{background:var(--action-hover);}
.site-main .auth-submit:focus-visible,.site-main .auth-inline-submit:focus-visible{outline:3px solid var(--ink);outline-offset:3px;}
.site-main .auth-alt{color:var(--muted);font-size:0.9375rem;}
.site-main .auth-alt a{font-weight:700;}
.site-main .auth-error,.site-main .auth-notice,.site-main .auth-ok{padding:12px 16px;border-radius:var(--r-sm);color:var(--ink);}
.site-main .auth-notice{background:var(--note);border-color:var(--gold);}
.site-main .auth-ok{background:var(--leaf);border-color:var(--line-strong);}
.site-main .auth-section,.site-main .auth-signout{border-top-color:var(--line);}
.site-main .auth-section{font-family:var(--font-display);font-size:1.0625rem;letter-spacing:-0.02em;}
.site-main .auth-rows div{border-bottom-color:var(--line);}
.site-main .auth-rows dd{color:var(--deep);}
.site-main .auth-codes code{border-color:var(--line-strong);border-radius:var(--r-sm);background:#FFFFFF;}

/* brand — the mark and lockup are the core brand SVGs, tinted by the surface.
   These background rules are the no-mask fallback; the @supports block below
   swaps them for a mask so the ink takes the surface's colour. */
.brand-lockup{display:block;width:124px;aspect-ratio:96.94/23.76;background:url("img/lockup.svg") center/contain no-repeat;}
.brand-mark{display:block;width:24px;height:24px;color:var(--sprout);background:url("img/mark.svg") center/contain no-repeat;}
.brand{display:inline-flex;align-items:center;min-height:44px;color:var(--ink);text-decoration:none;}
.brand:hover{color:var(--ink);}

/* buttons */
.btn {
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    min-height:48px;padding:13px 24px;border:1px solid transparent;border-radius:var(--pill);
    font-family:var(--font-body);font-weight:700;font-size:1rem;line-height:1.2;text-decoration:none;cursor:pointer;
    transition:transform var(--dur) var(--ease),background var(--dur) var(--ease);
}
.btn:hover{transform:translateY(-2px);}
.btn-p,.btn-primary{background:var(--action);color:var(--on-action);}
.btn-p:hover,.btn-primary:hover{background:var(--action-hover);color:var(--on-action);}
.btn-g,.btn-secondary{background:var(--pill-bg);color:var(--ink);border-color:var(--line);}
.btn-g:hover,.btn-secondary:hover{color:var(--ink);}
.btn-d{background:var(--ink);color:var(--on-ink);}
.btn-d:hover{color:var(--on-ink);}
.btn-lg{min-height:56px;padding:17px 30px;font-size:1.0625rem;}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;}

/* chips, highlight, eyebrow */
.chip{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:var(--pill);background:var(--leaf);color:var(--ink);font-weight:700;font-size:0.8125rem;line-height:1.4;}
.chip-lime{background:var(--lime);}
.chip-gold{background:var(--gold);color:var(--gold-ink);}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none;}
.mark{display:inline-block;padding:0 0.18em;border-radius:0.3em;background:var(--lime);transform:rotate(-2deg);}
.eyebrow{margin:0;color:var(--eyebrow);font-weight:700;font-size:0.9375rem;}

/* cards, callouts */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);}
.card-pad{padding:28px;}
.lift{transition:transform var(--dur) var(--ease);}
.lift:hover{transform:translateY(-4px);}
.callout{display:block;margin:24px 0;padding:20px 24px;border-radius:var(--r-lg);background:var(--leaf);color:var(--ink);}
.callout-warn,.callout.warn{background:var(--note);}
.callout>:first-child{margin-top:0;}
.callout>:last-child{margin-bottom:0;}

/* code — inline on Leaf, blocks on Ink with a copy button main.js adds */
:not(pre)>code{padding:2px 6px;border-radius:6px;background:var(--leaf);}
pre{position:relative;margin:16px 0 0;padding:18px 22px;border-radius:var(--r);background:var(--ink);color:var(--on-ink);font-size:0.9375rem;line-height:1.55;white-space:pre-wrap;overflow-wrap:anywhere;}
pre code{padding:0;background:none;font-size:inherit;color:inherit;}
pre.has-copy{padding-right:5.5rem;}
.copy-btn{position:absolute;right:10px;top:10px;min-height:32px;padding:6px 12px;border:0;border-radius:var(--pill);background:var(--deep);color:var(--on-ink);font:700 0.75rem/1.2 var(--font-body);cursor:pointer;}
.copy-btn:hover{background:var(--action);}

/* tables */
table{width:100%;border-collapse:separate;border-spacing:0;font-size:0.9375rem;}
th{padding:10px 14px;background:var(--leaf);font-weight:700;text-align:left;}
th:first-child{border-radius:var(--r-sm) 0 0 var(--r-sm);}
th:last-child{border-radius:0 var(--r-sm) var(--r-sm) 0;}
th:only-child{border-radius:var(--r-sm);}
td{padding:12px 14px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top;}
tr:last-child td{border-bottom:0;}

/* forms — the default for bare fields. :where() keeps it at zero weight, because a component's own
   field rule (the forum search, core's sign-in) must win over it, not the other way round. */
:where(input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=hidden]),select,textarea){
    font:inherit;font-size:1.0625rem;padding:13px 18px;border:1.5px solid var(--line-strong);border-radius:16px;background:#FFFFFF;color:var(--ink);
}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--ink);outline-offset:2px;}
:where(input[type=search]){border-radius:var(--pill);}
label{font-weight:700;}
.field{display:flex;flex-direction:column;gap:6px;font-weight:700;font-size:0.9375rem;}

/* header — logo, the pill menu, Download; a menu button on phones */
.site-header{position:relative;z-index:50;}
.site-header-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-block:22px;}
.site-nav{display:flex;align-items:center;gap:8px;}
.site-nav-list{display:flex;align-items:center;gap:4px;margin:0;padding:5px;list-style:none;border:1px solid var(--line);border-radius:var(--pill);background:var(--pill-bg);}
.site-nav-link {
    display:inline-flex; align-items:center;
    min-height:44px;padding:0 16px;border-radius:var(--pill);
    color:var(--ink);font-size:0.9375rem;font-weight:500;text-decoration:none;
    transition:background var(--dur) var(--ease);
}
.site-nav-link:hover{color:var(--ink);background:var(--ground);}
.site-nav-link.is-current{background:var(--leaf);}
.site-nav-link.is-plain{color:var(--muted);}
.header-actions{display:flex;align-items:center;justify-content:flex-end;gap:10px;}
.header-account,.header-admin{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;flex:none;border:1px solid var(--line);border-radius:50%;background:var(--pill-bg);color:var(--ink);}
.header-account:hover,.header-admin:hover{background:var(--leaf);}
.header-account.is-current{background:var(--leaf);border-color:var(--leaf);}
.header-account-icon{width:20px;height:20px;background:currentColor;-webkit-mask:url("img/account.svg") center/contain no-repeat;mask:url("img/account.svg") center/contain no-repeat;}
.header-admin-icon{width:20px;height:20px;background:currentColor;-webkit-mask:url("img/admin.svg") center/contain no-repeat;mask:url("img/admin.svg") center/contain no-repeat;}
.nav-toggle {
    display:none;position:relative;flex:none;width:44px;height:44px;padding:0;
    background:var(--pill-bg);border:1px solid var(--line);border-radius:var(--pill);
    color:var(--ink);cursor:pointer;
}
.nav-toggle-bars{position:absolute;left:12px;top:21px;width:18px;height:2px;border-radius:2px;background:currentColor;}
.nav-toggle-bars::before,.nav-toggle-bars::after{content:"";position:absolute;left:0;width:18px;height:2px;border-radius:2px;background:currentColor;transition:top var(--dur) var(--ease),transform var(--dur) var(--ease);}
.nav-toggle-bars::before{top:-5px;}
.nav-toggle-bars::after{top:5px;}
.nav-open .nav-toggle-bars{background:transparent;}
.nav-open .nav-toggle-bars::before{top:0;transform:rotate(45deg);}
.nav-open .nav-toggle-bars::after{top:0;transform:rotate(-45deg);}

/* page heads, breadcrumbs, the plain article */
.article-layout{padding-block:clamp(1.75rem,4vw,2.75rem) 0;}
.article{max-width:var(--measure);margin-inline:auto;}
.page-head{margin-bottom:28px;}
.page-title{margin:0;font-size:clamp(2.125rem,4.4vw,3.5rem);letter-spacing:-0.035em;}
.page-lede{margin:16px 0 0;max-width:660px;color:var(--deep);font-size:1.25rem;line-height:1.5;}
.crumbs{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px;padding:0;list-style:none;font-size:0.875rem;color:var(--muted);}
.crumbs li+li::before{content:"›";margin-right:8px;color:var(--faint);}
.crumbs a{color:var(--action);}
.crumbs a:hover{color:var(--action-hover);}

/* prose — every tag the admin editor can produce */
.prose{max-width:var(--measure);}
.prose>*{margin:0 0 16px;}
.prose>:last-child{margin-bottom:0;}
.prose h2{margin:52px 0 12px;font-size:1.625rem;letter-spacing:-0.02em;line-height:1.2;scroll-margin-top:1.5rem;}
.prose h3{margin:32px 0 8px;font-size:1.1875rem;letter-spacing:-0.015em;line-height:1.3;scroll-margin-top:1.5rem;}
.prose>h2:first-child,.prose>h3:first-child{margin-top:0;}
.prose strong{font-weight:700;}
.prose ul,.prose ol{padding-left:22px;}
.prose li{margin:0 0 6px;}
.prose li::marker{color:var(--sprout);font-weight:700;}
.prose pre{margin:16px 0;}
.prose blockquote{margin-inline:0;padding:20px 24px;border-radius:var(--r-lg);background:var(--leaf);}
.prose blockquote>:first-child{margin-top:0;}
.prose blockquote>:last-child{margin-bottom:0;}
.prose table{margin:16px 0;}
.prose img{border-radius:var(--r-lg);}
.prose hr{margin:40px 0;border:0;border-top:1px solid var(--line);}
.heading-anchor{margin-left:0.4rem;color:var(--action);font-weight:600;text-decoration:none;opacity:0;transition:opacity var(--dur) var(--ease);}
.prose h2:hover .heading-anchor,.prose h3:hover .heading-anchor,.heading-anchor:focus-visible{opacity:1;}
/* Docs number their sections, as the drawings do. */
.prose-docs{counter-reset:docs-h2;}
.prose-docs>h2{display:flex;align-items:baseline;gap:12px;counter-increment:docs-h2;}
.prose-docs>h2::before {
    content:counter(docs-h2);flex:none;
    display:inline-flex; align-items:center; justify-content:center;
    width:36px;height:36px;border-radius:50%;background:var(--action);color:var(--on-action);
    font-size:0.9375rem;transform:translateY(-3px);
}

/* docs — menu, article, "On this page" */
.docs-layout{display:grid;grid-template-columns:240px minmax(0,1fr) 220px;gap:48px;align-items:start;padding-top:28px;}
.docs-nav{position:sticky;top:20px;max-height:calc(100vh - 40px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent;padding:18px 12px;border-radius:24px;background:var(--side);font-size:0.9375rem;}
.docs-nav-label,.docs-toc-label{margin:0 12px 8px;color:var(--muted);font-size:0.6875rem;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;}
.docs-nav-list{display:flex;flex-direction:column;gap:2px;margin:0;padding:0;list-style:none;}
.docs-nav-link{display:flex;align-items:center;min-height:40px;padding:8px 12px;border-radius:var(--r-sm);color:var(--ink);text-decoration:none;}
.docs-nav-link:hover{color:var(--ink);background:var(--card);}
.docs-nav-link.is-current{background:var(--card);font-weight:700;box-shadow:var(--shadow);}
.docs-nav-link.is-plain{color:var(--muted);}
.docs-nav-text{flex:1;min-width:0;}
.docs-nav-count{flex:none;margin-left:8px;padding:1px 8px;border-radius:var(--pill);background:var(--leaf);color:var(--deep);font-size:0.75rem;font-weight:700;}
.docs-nav-back{display:flex;align-items:center;gap:8px;min-height:40px;padding:8px 12px;border-radius:var(--r-sm);color:var(--action);font-size:0.875rem;font-weight:700;text-decoration:none;}
.docs-nav-back:hover{color:var(--action);background:var(--card);}
.docs-nav-section{margin:10px 12px 12px;padding-top:12px;border-top:1px solid var(--line-strong);}
.docs-nav-eyebrow{margin:0;color:var(--muted);font-size:0.6875rem;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;}
.docs-nav-section-title{margin:4px 0 0;font-family:var(--font-display);font-weight:600;font-size:1.1875rem;letter-spacing:-0.02em;line-height:1.2;}
.docs-nav-section-meta{margin:4px 0 0;color:var(--muted);font-size:0.8125rem;}
.docs-nav-list.is-numbered .docs-nav-link{align-items:baseline;gap:10px;}
.docs-nav-num{flex:none;display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:var(--leaf);color:var(--deep);font-size:0.75rem;font-weight:700;}
.docs-nav-link.is-current .docs-nav-num{background:var(--action);color:var(--on-action);}
.docs-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));gap:16px;max-width:var(--measure);margin-top:32px;}
.docs-card{display:block;padding:22px 24px;color:var(--ink);text-decoration:none;}
.docs-card:hover{color:var(--ink);}
.docs-card-title{display:block;margin-top:12px;font-family:var(--font-display);font-weight:600;font-size:1.125rem;letter-spacing:-0.02em;line-height:1.25;}
.docs-card-text{display:block;margin-top:4px;color:var(--muted);font-size:0.9375rem;}
.docs-article{min-width:0;}
.docs-fold{display:none;margin-bottom:22px;padding:14px 18px;border:1px solid var(--line);border-radius:20px;background:var(--card);}
.docs-fold summary{min-height:24px;font-weight:700;cursor:pointer;}
.docs-fold .docs-nav-list{margin-top:10px;}
.docs-toc{position:sticky;top:20px;max-height:calc(100vh - 40px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent;font-size:0.875rem;}
.docs-toc-label{margin:0 0 10px;color:var(--ink);font-size:0.875rem;letter-spacing:0;text-transform:none;}
.docs-toc-list{margin:0;padding:0;list-style:none;}
.docs-toc-list a{display:block;padding:5px 0 5px 14px;border-left:2px solid var(--line);color:var(--muted);text-decoration:none;}
.docs-toc-list a:hover{color:var(--ink);border-left-color:var(--sprout);}
.docs-pager{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;max-width:var(--measure);margin-top:56px;}
.docs-pager-link {
    display:flex; flex-direction:column; gap:2px;
    padding:20px 24px;border:1px solid var(--line);border-radius:var(--r-card);background:var(--card);
    color:var(--ink);text-decoration:none;transition:transform var(--dur) var(--ease);
}
.docs-pager-link:hover{color:var(--ink);transform:translateY(-4px);}
.docs-pager-link.is-next{align-items:flex-end;text-align:right;background:var(--lime);border-color:var(--lime);}
.docs-pager-dir{color:var(--muted);font-size:0.875rem;}
.docs-pager-link.is-next .docs-pager-dir{color:var(--deep);}
.docs-pager-title{font-family:var(--font-display);font-weight:600;font-size:1.125rem;letter-spacing:-0.02em;}

/* 404, maintenance, empty states */
.state-page{display:flex;flex-direction:column;align-items:center;padding-top:60px;text-align:center;}
.state-sprout{width:220px;max-width:70%;height:auto;}
.state-mark{width:44px;height:44px;margin-bottom:1.5rem;}
.state-code{margin:18px 0 0;font-family:var(--font-display);font-weight:600;font-size:1rem;color:var(--eyebrow);}
.state-title{margin:16px 0 0;font-size:clamp(2.375rem,5.4vw,4.5rem);letter-spacing:-0.045em;}
.state-text{max-width:560px;margin:20px auto 0;color:var(--muted);font-size:1.1875rem;}
.state-search{display:flex;flex-wrap:wrap;gap:10px;width:100%;max-width:560px;margin-top:32px;}
.state-search-input{flex:1 1 240px;min-height:52px;padding:13px 22px;border:1.5px solid var(--line-strong);border-radius:var(--pill);background:#fff;color:var(--ink);font:inherit;font-size:1.0625rem;}
.state-paths{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:16px;width:100%;max-width:960px;margin:56px 0 0;padding:0;list-style:none;text-align:left;}
.state-path{display:flex;flex-direction:column;gap:2px;height:100%;padding:24px;color:var(--ink);text-decoration:none;}
.state-path:hover{color:var(--ink);}
.state-path.is-lime{background:var(--lime);border-color:var(--lime);}
.state-path-title{font-family:var(--font-display);font-weight:600;font-size:1.1875rem;letter-spacing:-0.02em;}
.state-path-note{color:var(--muted);}
.state-path.is-lime .state-path-note{color:var(--deep);}
.state-panel{display:flex;flex-direction:column;align-items:center;gap:1.35rem;margin-top:44px;padding:clamp(2.5rem,7vw,4rem);text-align:center;background:var(--card);border:1px dashed var(--line-strong);border-radius:var(--r-card);}
.state-panel .state-text{margin:0;}

/* footer */
.site-footer{margin-top:110px;border-top:1px solid var(--line);}
.site-footer-inner{display:flex;flex-wrap:wrap;justify-content:space-between;gap:28px;padding-block:40px;font-size:0.9375rem;}
.footer-brand{max-width:360px;}
.footer-tagline{margin:12px 0 0;color:var(--muted);}
.footer-nav-list{display:flex;flex-wrap:wrap;gap:4px 8px;margin:0;padding:0;list-style:none;}
.footer-link{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;border-radius:var(--pill);color:var(--muted);}
.footer-link:hover{color:var(--ink);background:var(--pill-bg);}
.footer-link.is-current{color:var(--ink);font-weight:700;}
.footer-brand .brand{display:flex;width:max-content;min-height:32px;}

/* home — hero and panel preview */
.home-hero{padding-block:clamp(2.5rem,5vw,3.5rem) 0;text-align:center;}
.home-title{max-width:1100px;margin:20px auto 0;font-size:clamp(2.625rem,6vw,5.5rem);line-height:1.02;letter-spacing:-0.04em;}
.home-sub{max-width:680px;margin:26px auto 0;color:var(--muted);font-size:clamp(1.125rem,1.5vw,1.3125rem);line-height:1.55;}
.home-sub-phone{display:none;}
.home-ctas{justify-content:center;margin-top:32px;}
.home-panel{position:relative;max-width:940px;margin:64px auto 0;padding:26px 0 0 26px;text-align:left;}
.home-sticker{position:absolute;left:0;top:0;z-index:1;padding:10px 16px;border-radius:14px;background:var(--lime);font-family:var(--font-display);font-weight:600;font-size:0.875rem;transform:rotate(-3deg);}
.panel-shot{display:flex;overflow:hidden;line-height:1.3;background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--shadow-lift);}
.panel-side{display:flex;flex-direction:column;gap:6px;flex:none;width:180px;padding:22px 14px;background:var(--side);font-size:0.875rem;font-weight:700;}
.panel-side>span{padding:8px 10px;}
.panel-side .is-on{background:var(--card);border-radius:10px;}
.panel-side .panel-group{padding:0;color:var(--muted);font-size:0.6875rem;letter-spacing:0.08em;text-transform:uppercase;}
.panel-side .panel-group+span{margin-top:-2px;}
.panel-side span:nth-child(6){margin-top:8px;}
.panel-main{display:flex;flex-direction:column;gap:10px;flex:1;min-width:0;padding:24px;}
.panel-head{display:flex;justify-content:space-between;align-items:center;gap:12px;}
.panel-head strong{font-family:var(--font-display);font-weight:600;font-size:1.125rem;}
.panel-btn{padding:7px 14px;border-radius:var(--pill);background:var(--action);color:var(--on-action);font-size:0.8125rem;font-weight:700;}
.panel-row{display:flex;justify-content:space-between;gap:12px;padding:12px 14px;border-radius:var(--r-sm);background:var(--ground);font-size:0.875rem;line-height:1.5;}
.panel-row strong,.panel-meta{display:block;}
.panel-meta{color:var(--muted);}
.panel-flag{align-self:center;color:#7A5C17;font-weight:700;font-size:0.8125rem;text-align:right;}

/* home — sections */
.section{padding-block:110px 0;}
.home-h2{margin:0;font-size:clamp(1.75rem,3.2vw,2.75rem);line-height:1.1;}
.home-h2.is-center{text-align:center;font-size:clamp(2rem,4vw,3.375rem);letter-spacing:-0.04em;}
.home-text{margin:18px 0 0;color:var(--muted);font-size:1.125rem;line-height:1.55;}

/* 6 → 0: the plugins WordPress needs beside what this CMS ships */
.pairs-card{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:48px;align-items:center;padding:clamp(32px,4.5vw,56px);background:var(--card);border:1px solid var(--line);border-radius:40px;}
.pairs-count{display:flex;align-items:center;gap:20px;margin:30px 0 0;}
.pairs-from,.pairs-to{font-family:var(--font-display);font-weight:600;font-size:5.25rem;line-height:1;}
.pairs-from{color:#5E7568;}
.pairs-to{color:var(--sprout);}
.pairs-arrow{flex:none;width:36px;height:36px;}
.pairs-note{max-width:11em;color:var(--muted);font-size:1.0625rem;line-height:1.4;}
.pairs{width:100%;table-layout:fixed;border-collapse:separate;border-spacing:0 10px;font-size:1rem;}
.pairs th{padding:0;background:none;border:0;border-radius:0;text-align:left;font-weight:700;font-size:0.8125rem;letter-spacing:0.08em;text-transform:uppercase;color:var(--muted);}
.pairs th:last-child{color:var(--eyebrow);}
.pairs td{padding:0;border:0;}
.pairs .pairs-gap{width:40px;text-align:center;color:#5E7568;}
.pair-from,.pair-to{display:block;padding:10px 16px;line-height:1.3;border-radius:var(--pill);}
.pair-from{border:1.5px dashed var(--faint);color:var(--muted);}
.pair-to{background:var(--leaf);font-weight:700;}

/* the trail — three steps stepping down a path that draws itself once */
.trail{position:relative;margin-top:44px;}
.trail-line{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;}
.trail-steps{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;align-items:start;margin:0;padding:0;list-style:none;}
.trail-step{padding:30px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);}
.trail-step:nth-child(3n+2){margin-top:96px;background:var(--lime);border-color:var(--lime);}
.trail-step:nth-child(3n){margin-top:192px;}
.trail-badge{display:inline-flex;font-size:1rem;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;background:var(--action);color:var(--on-action);font-family:var(--font-display);font-weight:600;}
.trail-step:nth-child(3n+2) .trail-badge{background:var(--ink);color:var(--on-ink);}
.trail-title{margin:18px 0 8px;font-size:1.375rem;}
.trail-body{margin:0;font-size:1rem;color:var(--muted);line-height:1.5;}
.trail-step:nth-child(3n+2) .trail-body{color:var(--deep);}

/* module tiles: the first is the lead, the language card closes the field */
.tiles-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:24px;}
.tiles-head .home-h2{max-width:760px;font-size:clamp(2rem,4vw,3.375rem);letter-spacing:-0.04em;}
.tiles-head .home-text{max-width:380px;margin:0;}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:16px;margin-top:40px;}
.tile{display:flex;flex-direction:column;justify-content:flex-end;min-height:200px;padding:28px;background:var(--card);border:1px solid var(--line);border-radius:30px;transition:transform var(--dur) var(--ease);}
.tile:hover{transform:translateY(-4px);}
.tile:first-child{min-height:220px;padding:32px;background:var(--lime);border:0;}
.tile-title{margin:0 0 6px;font-size:1.375rem;}
.tile:first-child .tile-title{margin-bottom:8px;font-size:1.875rem;}
.tile-body{margin:0;font-size:1rem;color:var(--muted);line-height:1.5;}
.tile:first-child .tile-body,.tile-lang .tile-body{color:var(--deep);}
.tile-lang{justify-content:space-between;background:var(--leaf);border-color:var(--leaf);}
.tile-lang .tile-title{line-height:1.25;}
.tile-kicker,.tile-icon{margin-bottom:auto;}
.tile-kicker{padding-bottom:20px;font-family:var(--font-display);font-weight:600;font-size:0.8125rem;letter-spacing:0.06em;text-transform:uppercase;color:var(--eyebrow);}
.tile:first-child .tile-kicker{color:var(--ink);}
.tile-icon{display:block;width:40px;height:40px;}
.tile-icon + .tile-title{margin-top:20px;font-size:1.25rem;}
.site-header .header-download{min-height:46px;padding:13px 22px;font-size:0.9375rem;}

/* the importer band and the close */
.move-band{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:32px;padding:clamp(36px,5vw,64px);background:var(--leaf);border-radius:40px;}
.move-band>div{flex:1 1 520px;min-width:0;}
.move-text{margin:16px 0 0;color:var(--deep);font-size:1.1875rem;line-height:1.5;}
.home-closing{padding-bottom:0;text-align:center;}
.closing-title{margin:0;font-size:clamp(2.375rem,5.4vw,5rem);line-height:1.02;letter-spacing:-0.045em;}
.closing-accent{color:var(--sprout);}
.home-closing .home-text{max-width:560px;margin:22px auto 0;font-size:1.25rem;}
.closing-btn{margin-top:34px;}
.honesty{max-width:60ch;margin:40px auto 0;color:var(--muted);font-size:0.9375rem;}
.honesty>*{margin:0;}

/* news index */
.news-layout{padding-top:48px;}
.news-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:24px;}
.news-title{margin:18px 0 0;font-size:clamp(2.5rem,5.4vw,4.5rem);letter-spacing:-0.04em;}
.news-intro{max-width:380px;margin:0;color:var(--muted);font-size:1.125rem;}
.news-lead{position:relative;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));gap:32px;align-items:center;margin-top:44px;padding:clamp(28px,4.5vw,52px);background:var(--lime);border-radius:40px;}
.chip-card{background:var(--card);}
.news-lead-title{margin:20px 0 0;font-size:clamp(2rem,4vw,3.375rem);letter-spacing:-0.04em;}
.news-lead-link{color:var(--ink);text-decoration:none;}
/* The whole card is the link: the title's link stretches over it. */
.news-lead-link::after,.post-card-link::after{content:"";position:absolute;inset:0;border-radius:inherit;}
.news-lead-link:hover{color:var(--ink);}
.news-lead-link:focus-visible{outline:none;}
.news-lead-link:focus-visible::after,.post-card-link:focus-visible::after{outline:3px solid var(--ink);outline-offset:3px;}
.news-lead-excerpt{margin:16px 0 0;color:var(--deep);font-size:1.1875rem;}
.news-lead .btn{margin-top:26px;}
.news-lead-cover{overflow:hidden;border-radius:var(--r-card);transform:rotate(1.5deg);}
.news-lead-img{width:100%;aspect-ratio:4/3;object-fit:cover;}
.news-sub{margin:72px 0 0;font-size:1.5rem;}
.post-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:16px;margin-top:22px;}
.post-card{position:relative;display:flex;flex-direction:column;gap:10px;padding:26px;}
.post-card-meta{margin:0;color:var(--muted);font-size:0.875rem;}
.post-card-title{margin:0;font-size:1.375rem;}
.post-card-link{color:var(--ink);text-decoration:none;}
.post-card-link:hover{color:var(--ink);}
.post-card-link:focus-visible{outline:none;}
.post-card-excerpt{margin:0;color:var(--muted);}
.pager{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;margin-top:40px;}
.pager-num{min-width:48px;padding-inline:18px;}

/* a single post */
.post-head{max-width:900px;padding-top:44px;text-align:center;}
.post-back{font-weight:700;font-size:0.9375rem;text-decoration:none;}
.post-chips{justify-content:center;margin-top:22px;}
.post-title{margin:22px 0 0;font-size:clamp(2.5rem,5.6vw,4.75rem);letter-spacing:-0.045em;}
.post-lede{max-width:680px;margin:20px auto 0;color:var(--deep);font-size:clamp(1.1875rem,1.7vw,1.375rem);line-height:1.5;}
.post-author{margin:16px 0 0;color:var(--muted);font-size:0.9375rem;}
.post-shell{max-width:800px;padding-top:24px;}
.post-cover{margin:16px 0 8px;overflow:hidden;border-radius:var(--r-card);}
.post-cover-img{width:100%;object-fit:cover;}
.post-prose{max-width:none;font-size:1.125rem;}
.post-get{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:20px;margin-top:40px;padding:30px;background:var(--leaf);border-radius:32px;}
.post-get-title{margin:0;font-family:var(--font-display);font-weight:600;font-size:1.375rem;letter-spacing:-0.02em;}
.post-get-text{margin:6px 0 0;color:var(--deep);}
.post-pager{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:28px;}
.post-pager-link{display:flex;flex-direction:column;gap:2px;padding:20px 24px;color:var(--ink);text-decoration:none;}
.post-pager-link:hover{color:var(--ink);}
.post-pager-link.is-next{grid-column:2;align-items:flex-end;text-align:right;}
.post-pager-link.is-end{border:1px dashed var(--line-strong);border-radius:var(--r-card);color:var(--muted);}
.post-pager-dir{color:var(--muted);font-size:0.875rem;}
.post-pager-title{font-family:var(--font-display);font-weight:600;font-size:1.0625rem;letter-spacing:-0.02em;}
.post-pager-link.is-end .post-pager-title{font-family:var(--font-body);font-weight:700;font-size:1rem;letter-spacing:0;}

/* The mark and lockup are single-colour by brand rule, so they are painted
   with the surface's colour through a mask rather than recoloured by hand. */
@supports (mask-image:url("img/mark.svg")) or (-webkit-mask-image:url("img/mark.svg")){
    .brand-lockup{background:currentColor;-webkit-mask:url("img/lockup.svg") center/contain no-repeat;mask:url("img/lockup.svg") center/contain no-repeat;}
    .brand-mark{background:currentColor;-webkit-mask:url("img/mark.svg") center/contain no-repeat;mask:url("img/mark.svg") center/contain no-repeat;}
}

/* Download, About and Changelog, drawn on the M4 "other pages" boards. Their
   phone boards keep the desktop sizes (the clamps reach their floors), so these
   classes stay clear of the home page's phone overrides. */
.dl-hero,.cl-hero{padding-top:48px;}
.dl-hero{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:40px;align-items:center;}
.dl-title{margin:18px 0 0;font-size:clamp(2.5rem,5.4vw,4.75rem);letter-spacing:-0.04em;line-height:1.08;}
.cl-title{font-size:clamp(2.5rem,5.4vw,4.5rem);}
.dl-sub{margin:22px 0 0;max-width:560px;color:var(--muted);font-size:1.1875rem;line-height:1.55;}
.cl-hero .dl-sub{margin-top:20px;max-width:700px;}
.dl-release{position:relative;padding:22px 0 0 22px;}
.dl-sticker{position:absolute;left:0;top:0;z-index:2;padding:9px 15px;border-radius:14px;background:var(--lime);font-family:var(--font-display);font-weight:600;font-size:0.8125rem;line-height:1.08;transform:rotate(-3deg);}
.dl-card{padding:32px;border-radius:32px;box-shadow:var(--shadow-lift);}
.dl-card-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:12px;}
.dl-version{margin:0;font-family:var(--font-display);font-weight:600;font-size:3.25rem;letter-spacing:-0.04em;line-height:1.08;}
.dl-date{margin:8px 0 0;color:var(--muted);}
.dl-get{width:100%;margin-top:26px;}
.dl-get-icon{width:20px;height:20px;flex:none;background:currentColor;-webkit-mask:url("img/download.svg") center/contain no-repeat;mask:url("img/download.svg") center/contain no-repeat;}
.dl-facts{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:20px 0 0;padding:0;list-style:none;color:var(--deep);font-size:0.9375rem;}
.dl-steps-section{padding-top:100px;}
.dl-h2{margin:0;text-align:center;font-size:clamp(1.75rem,3.4vw,2.75rem);line-height:1.08;}
.dl-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:20px;margin:44px 0 0;padding:0;list-style:none;}
.dl-step{min-width:0;padding:28px;}
.dl-step.is-lime{background:var(--lime);border-color:var(--lime);}
.dl-badge{display:inline-flex;line-height:1.08;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;background:var(--action);color:var(--on-action);font-family:var(--font-display);font-weight:600;font-size:1rem;}
.dl-step.is-lime .dl-badge{background:var(--ink);color:var(--on-ink);}
.dl-step-title{margin:18px 0 8px;font-size:1.3125rem;line-height:1.08;}
.dl-step-text{margin:0;color:var(--muted);}
.dl-step.is-lime .dl-step-text{margin-bottom:4px;color:var(--deep);}
.dl-os{margin:14px 0 0;font-weight:700;font-size:0.875rem;}
/* A checksum command wraps inside its box rather than scrolling under the Copy button. */
.dl-step pre{margin:6px 0 0;font-size:0.80625rem;}
.os-tablist{display:flex;gap:4px;margin:16px 0 0;padding:4px;border-radius:var(--pill);background:color-mix(in srgb,var(--ink) 10%,transparent);}
/* display:flex would otherwise beat the hidden attribute the list carries until main.js runs. */
.os-tablist[hidden]{display:none;}
.os-tab{display:inline-flex;flex:1;align-items:center;justify-content:center;gap:6px;min-width:0;min-height:40px;padding:0 10px;border:0;border-radius:var(--pill);background:none;color:var(--ink);font:700 0.875rem/1.2 var(--font-body);cursor:pointer;}
.os-tab:hover{background:color-mix(in srgb,var(--ink) 10%,transparent);}
.os-tab[aria-selected="true"]{background:var(--ink);color:var(--on-ink);}
.os-icon{width:16px;height:16px;flex:none;background:currentColor;}
.os-icon-windows{-webkit-mask:url("img/os-windows.svg") center/contain no-repeat;mask:url("img/os-windows.svg") center/contain no-repeat;}
.os-icon-macos{-webkit-mask:url("img/os-macos.svg") center/contain no-repeat;mask:url("img/os-macos.svg") center/contain no-repeat;}
.os-icon-linux{-webkit-mask:url("img/os-linux.svg") center/contain no-repeat;mask:url("img/os-linux.svg") center/contain no-repeat;}
.os-tabs.is-tabbed .dl-os{display:none;}
.os-tabs.is-tabbed pre{margin-top:12px;}
.dl-card .chip{line-height:1.6;}
.dl-band-section{padding-top:90px;}
.dl-band{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:36px;align-items:center;padding:clamp(28px,5vw,56px);border-radius:40px;background:var(--leaf);}
.dl-band-icon{display:block;width:48px;height:48px;}
.dl-band-title{margin:16px 0 0;font-size:clamp(1.625rem,3vw,2.375rem);line-height:1.08;}
.dl-band-text{margin:0;color:var(--deep);font-size:1.125rem;line-height:1.55;}
.dl-notes-section{padding-top:64px;}
.dl-notes{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:16px;}
.dl-note{padding:26px;}
.dl-note-title{margin:0;font-family:var(--font-display);font-weight:600;font-size:1.125rem;letter-spacing:-0.03em;line-height:1.08;}
.dl-note-text{margin:8px 0 0;color:var(--muted);}

.ab-hero{padding-top:56px;text-align:center;}
.ab-word{margin:22px 0 0;font-size:clamp(2.75rem,7vw,6.5rem);letter-spacing:-0.05em;line-height:1;}
.ab-word span{display:inline-block;}
.ab-word-spire,.ab-accent{color:var(--sprout);}
.ab-parts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:16px;max-width:900px;margin:40px auto 0;text-align:left;}
.ab-part{padding:26px;}
.ab-part-title{margin:0;font-family:var(--font-display);font-weight:600;font-size:1.5rem;letter-spacing:-0.03em;line-height:1.08;}
.ab-part-text{margin:6px 0 0;color:var(--muted);}
.ab-part-text strong{color:var(--ink);}
.ab-part.is-lime{background:var(--lime);border-color:var(--lime);}
.ab-part.is-lime .ab-part-text{color:var(--deep);}
.ab-part.is-ink{background:var(--ink);border-color:var(--ink);color:var(--on-ink);}
.ab-part.is-ink .ab-part-text{color:#CFE3D5;}
.ab-part.is-ink .ab-part-text strong{color:#FFFFFF;}
.ab-what{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));gap:48px;align-items:start;padding-top:110px;}
.ab-what-title{margin:0;font-size:clamp(1.875rem,3.6vw,3rem);letter-spacing:-0.04em;line-height:1.08;}
.ab-what-text{color:var(--deep);font-size:1.1875rem;line-height:1.6;}
.ab-what-text p{margin:0 0 16px;}
.ab-what-text p:last-child{margin:0;}
.ab-stand-section{padding-top:96px;}
.ab-stand{padding:clamp(28px,4.5vw,52px);border-radius:40px;}
.ab-stand-title{margin:0;font-size:clamp(1.625rem,3vw,2.375rem);line-height:1.08;}
.ab-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:16px;margin-top:30px;}
.ab-fact{padding:22px;border-radius:var(--r-lg);background:var(--ground);}
.ab-fact.is-lime{background:var(--lime);}
.ab-fact-num{margin:0;font-family:var(--font-display);font-weight:600;font-size:2.125rem;letter-spacing:-0.03em;line-height:1.08;}
.ab-fact-text{margin:6px 0 0;color:var(--muted);}
.ab-fact.is-lime .ab-fact-text{color:var(--deep);}
.ab-stand-note{max-width:760px;margin:28px 0 0;color:var(--muted);}
.ab-closing{padding-top:96px;text-align:center;}
.ab-closing-title{margin:0;font-size:clamp(2rem,4.4vw,3.75rem);letter-spacing:-0.045em;line-height:1.08;}
.ab-ctas{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:30px;}

.cl-layout{display:grid;grid-template-columns:minmax(0,1fr) 180px;gap:56px;align-items:start;padding-top:48px;}
.cl-list{position:relative;margin:0 0 0 10px;padding:0;list-style:none;border-left:3px dashed var(--dash);}
.cl-item,.cl-more-item{position:relative;padding-left:44px;}
.cl-item{margin-bottom:22px;}
.cl-item::before{content:"";position:absolute;left:3px;top:30px;width:20px;height:20px;border:4px solid var(--ground);border-radius:50%;background:var(--dash);box-sizing:content-box;transform:translateX(-4px);}
.cl-item.is-latest::before{background:var(--action);}
.cl-more-item::before{content:"";position:absolute;left:-9px;top:14px;width:14px;height:14px;border-radius:50%;background:var(--line);}
.cl-card{padding:28px 30px;scroll-margin-top:1.5rem;}
.cl-item.is-latest .cl-card{box-shadow:0 30px 60px -36px rgba(30,58,47,0.35);}
.cl-head{display:flex;flex-wrap:wrap;align-items:center;gap:12px;}
.cl-version{margin:0;font-size:1.75rem;line-height:1.08;}
.cl-date{margin-left:auto;color:var(--muted);font-size:0.9375rem;}
.prose.cl-body{max-width:none;}
.cl-body>*{margin:14px 0 0;}
.cl-body ul{padding-left:20px;}
.cl-notes{margin-top:12px;}
.cl-notes>summary{display:inline-flex;align-items:center;min-height:44px;color:var(--action);font-weight:700;font-size:0.9375rem;cursor:pointer;}
.cl-notes[open]>summary{margin-bottom:-4px;}
.cl-hero .dl-sub{line-height:1.6;}
.cl-head .chip,.cl-note .chip{line-height:1.6;}
.cl-more>summary{list-style:none;}
.cl-more>summary::-webkit-details-marker{display:none;}
.cl-more[open]>summary{display:none;}
.cl-more-item:has(.cl-more[open]){padding-left:0;}
.cl-more-item:has(.cl-more[open])::before{display:none;}
.cl-list-more{margin:0;border:0;}
.cl-jump{position:sticky;top:20px;max-height:calc(100vh - 40px);overflow-y:auto;font-size:0.9375rem;}
.cl-jump-label{margin:0 0 8px;font-weight:700;}
.cl-jump-list{margin:0;padding:0;list-style:none;}
.cl-jump-link{display:block;padding:4px 0;color:var(--muted);text-decoration:none;}
.cl-jump-link.is-current{color:var(--ink);font-weight:700;}
.cl-jump-link:hover{color:var(--action);}
.cl-note-section{padding-top:56px;}
.callout.cl-note{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;margin:0;padding:24px 28px;border-radius:var(--r-card);}
.cl-note p{margin:0;font-size:1.0625rem;}
.cl-note .chip{margin-right:8px;}

@media (max-width:1100px){
    .docs-layout{grid-template-columns:220px minmax(0,1fr);gap:40px;}
    .docs-toc{display:none;}
}

@media (max-width:900px){
    :root{--gutter:20px;}
    .site-header-inner{padding-block:16px;}
    .header-download{display:none;}
    .nav-toggle{display:block;}
    .site-nav {
        position:absolute;left:var(--gutter);right:var(--gutter);top:calc(100% - 6px);display:none;
        flex-direction:column;align-items:stretch;gap:6px;padding:10px;
        background:var(--card);border:1px solid var(--line);border-radius:24px;box-shadow:var(--shadow-lift);
    }
    .nav-open .site-nav{display:flex;}
    .site-nav-list{flex-direction:column;align-items:stretch;gap:2px;padding:0;border:0;background:none;}
    .site-nav-link{padding:0 16px;font-size:1.0625rem;}
    .brand-lockup{width:112px;}
    .docs-layout{grid-template-columns:minmax(0,1fr);gap:0;padding-top:16px;}
    .docs-nav{display:none;}
    .docs-fold{display:block;}
    .prose h2{font-size:1.375rem;margin-top:40px;}
    pre{padding:16px 18px;border-radius:16px;font-size:0.8125rem;}
    .site-footer{margin-top:72px;}
    .site-footer-inner{flex-direction:column;padding-block:28px;}
    .section{padding-top:40px;}
    /* The phone board shortens the picture's rows and some lines; .on-wide/.on-narrow carry both. */
    .on-wide{display:none;}
    .on-narrow{display:inline;}
    .home-hero .eyebrow{font-size:0.875rem;}
    .home-ctas{flex-direction:column;gap:10px;margin-top:22px;}
    .home-ctas .btn,.closing-btn{display:flex;width:100%;}
    .home-h2,.home-h2.is-center,.tiles-head .home-h2{font-size:1.5rem;line-height:1.12;letter-spacing:-0.04em;text-align:left;}
    .pairs-card .home-h2{font-size:1.375rem;line-height:1.15;letter-spacing:-0.03em;}
    .move-band .home-h2{font-size:1.25rem;line-height:1.15;letter-spacing:0;}
    .pairs-card .home-text,.tiles-head .home-text{display:none;}
    .closing-title{font-size:1.75rem;line-height:1.06;}
    .home-closing .home-text{margin-top:12px;font-size:1rem;}
    .closing-btn{margin-top:18px;}
    .home-hero{padding-top:20px;}
    .home-title{margin-top:14px;font-size:clamp(2.25rem,9vw,3rem);line-height:1.06;}
    .home-sub{margin-top:16px;font-size:1.0625rem;line-height:1.5;}
    .home-panel{margin-top:30px;padding:16px 0 0 0;}
    .home-sticker{left:-10px;padding:7px 12px;border-radius:12px;font-size:0.75rem;}
    .panel-shot{border-radius:var(--r-lg);}
    .panel-side{display:none;}
    .panel-main{padding:18px;gap:8px;}
    .panel-head strong{font-size:0.9375rem;}
    .panel-btn{padding:6px 12px;font-size:0.75rem;}
    .panel-head{margin-bottom:4px;}
    .panel-row{display:block;padding:9px 12px;border-radius:10px;font-size:0.8125rem;line-height:1.3;}
    .panel-row strong,.panel-meta,.panel-flag{display:inline;}
    .panel-meta.on-wide{display:none;}
    .panel-meta::before,.panel-flag::before{content:" · ";color:var(--muted);font-weight:400;}
    .pairs-card{display:block;padding:0;background:none;border:0;border-radius:0;}
    .pairs{margin-top:8px;}
    .pairs th{font-size:0.6875rem;}
    .pairs-count{gap:12px;margin-top:14px;}
    .pairs-from,.pairs-to{font-size:3rem;}
    .pairs-arrow{width:26px;height:26px;}
    .pairs-note{font-size:0.9375rem;}
    .pairs{border-spacing:8px;margin-inline:-8px;width:calc(100% + 16px);font-size:0.875rem;}
    .pairs .pairs-gap{display:none;}
    .pair-from,.pair-to{padding:8px 12px;}
    .trail-line{display:none;}
    .trail-steps{grid-template-columns:minmax(0,1fr);gap:12px;margin-left:12px;padding-left:30px;border-left:3px dashed var(--dash);}
    .trail-step{position:relative;padding:18px;border-radius:var(--r-lg);}
    .trail-step:nth-child(n){margin-top:0;}
    .trail-steps{margin-top:20px;}
    .trail-badge{position:absolute;left:-46px;top:18px;width:28px;height:28px;font-family:var(--font-body);font-weight:700;font-size:0.8125rem;}
    .trail-title{margin:0 0 6px;font-size:1rem;}
    .tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:16px;}
    .tile,.tile:first-child{min-height:0;padding:16px;border-radius:var(--r-lg);}
    .tile:first-child,.tile-lang{grid-column:span 2;padding:18px;}
    .tile:nth-last-child(2):nth-child(even){grid-column:span 2;}
    .tile-kicker,.tile-icon{display:none;}
    .tile-title,.tile-icon + .tile-title{margin:0 0 4px;font-size:0.9375rem;}
    .tile:first-child .tile-title{margin-bottom:6px;font-size:1.125rem;}
    .tile-lang .tile-title{margin-bottom:6px;font-size:1rem;}
    .tile-body{font-size:0.875rem;}
    .tile:first-child .tile-body,.tile-lang .tile-body{font-size:1rem;}
    .move-band{gap:20px;padding:22px;border-radius:26px;}
    .move-band>div{flex-basis:100%;}
    .move-text{margin-top:10px;font-size:1rem;}
    .move-band .btn{display:flex;width:100%;min-height:0;padding:15px;font-size:1rem;}
    .news-layout{padding-top:24px;}
    .news-lead{margin-top:28px;}
    .news-sub{margin-top:48px;}
    .post-head{padding-top:24px;}
    .cl-layout{grid-template-columns:minmax(0,1fr);gap:24px;}
    .cl-jump{display:none;}
    .dl-step pre{font-size:0.69875rem;}
}

@media (max-width:620px){
    .post-pager{grid-template-columns:minmax(0,1fr);}
    .post-pager-link.is-next{grid-column:auto;align-items:flex-start;text-align:left;}
    .docs-pager{grid-template-columns:minmax(0,1fr);}
    .docs-pager-link.is-next{text-align:left;align-items:flex-start;}
    .prose table{display:block;overflow-x:auto;}
    .home-sub-wide{display:none;}
    .home-sub-phone{display:block;}
    .site-main .forums-search{width:100%;}
}

@media (prefers-reduced-motion:reduce){
    html{scroll-behavior:auto;}
    *,*::before,*::after{transition-duration:0.01ms!important;animation-duration:0.01ms!important;animation-iteration-count:1!important;}
    .btn:hover,.lift:hover,.docs-pager-link:hover,.tile:hover{transform:none;}
}

/* The menu pill sits on the page's centre line whatever the logo and the actions measure. */
@media (min-width:901px){.site-header-inner{display:grid;grid-template-columns:1fr auto 1fr;}.site-header-inner>.brand{justify-self:start;}}