/* Current product surfaces. Keep the shared app illustrations at their authored scale. */
:root { --companion:#60cdff; --text-3:#87929d; }
html.lenis { scroll-behavior:auto; }
[hidden] { display:none !important; }
button,input { font:inherit; }
*, *::before, *::after, html, body, button, a { -webkit-tap-highlight-color:transparent; }
.release-text-mobile { display:none; }
.text-link { display:inline-flex; align-items:center; gap:.55rem; color:var(--accent); font-size:.9rem; font-weight:500; }
.text-link:hover { text-decoration:underline; text-underline-offset:5px; }
.section-tight { padding-top:2rem; }
.section-companion { background:radial-gradient(ellipse at 85% 45%,rgba(96,205,255,.08),transparent 65%),var(--bg-raised); }
.section-head-wide { max-width:none; }
.release-banner { display:flex; align-items:center; gap:1rem; width:fit-content; max-width:100%; padding:.5rem .8rem .5rem .5rem; border:1px solid var(--line-strong); border-radius:999px; color:var(--text-2); font-size:.8rem; margin-bottom:3.2rem; background:rgba(17,24,31,.85); }
.release-banner:hover { border-color:var(--accent-line); color:var(--text); }
.release-tag { display:inline-block; padding:.28rem .65rem; border:1px solid var(--accent-line); border-radius:999px; font:500 .68rem var(--mono); color:var(--accent); white-space:nowrap; }
.home-hero { padding-top:2.8rem; padding-bottom:0; }
.home-hero-heading { display:grid; grid-template-columns:1.08fr 1fr; align-items:end; gap:clamp(2rem,5vw,6rem); }
.home-hero h1 { font-size:clamp(3.2rem,6.4vw,7rem); line-height:1.04; letter-spacing:-.06em; margin-bottom:0; }
.home-hero .hero-sub { font-size:clamp(1rem,1.45vw,1.25rem); max-width:550px; }
.home-hero .hero-meta { margin-top:1.5rem; }
.home-hero .hero-stage { margin:clamp(3.5rem,6vw,5rem) auto 1rem; max-width:none; }
.product-strip { display:flex; justify-content:space-between; align-items:center; gap:1.5rem; padding:1.8rem 0; border-top:1px solid var(--line-strong); color:var(--text-2); font-size:.82rem; }
.product-strip span,.product-strip a { display:flex; gap:.6rem; align-items:center; }
.product-strip .icon { color:var(--accent); width:17px; height:17px; }
.product-strip .product-strip-check-mobile { display:none; }
.product-strip a .product-strip-arrow { margin-left:auto; }
.product-strip a:hover { color:var(--accent); }
/* Homepage product stories: restrained editorial rhythm around fragments copied
   from the real WPF Home, Drivers and window-shell structures. */
.experience-section { overflow:clip; }
.experience-story-shell,
.experience-stories .experience-story:last-child {
    min-height: auto;
    padding-bottom: 0;
}
.experience-intro {
    display:grid;
    grid-template-columns:minmax(0,1.05fr) minmax(340px,.72fr);
    gap:clamp(3rem,8vw,10rem);
    align-items:end;
    margin-bottom:0;
    padding-bottom:clamp(2.5rem,4.5vw,4rem);
    border-bottom:1px solid var(--line-strong);
}
.experience-intro h2 { max-width:15ch; margin:1rem 0 0; font-size:clamp(2.6rem,5.2vw,5.2rem); line-height:.98; letter-spacing:-.055em; }
.experience-intro>p { max-width:56ch; margin:0; color:var(--text-2); font-size:1.06rem; line-height:1.75; }
.experience-story {
    display:grid;
    grid-template-columns:minmax(300px,.68fr) minmax(560px,1.32fr);
    gap:clamp(3rem,6.5vw,8rem);
    align-items:center;
    min-height:520px;
    padding:clamp(4rem,6vw,6rem) 0;
    color:var(--text);
}
.experience-story+.experience-story { border-top:1px solid var(--line-strong); }
.experience-story-drivers { grid-template-columns:minmax(560px,1.32fr) minmax(300px,.68fr); }
.experience-story-drivers .experience-copy { order:2; }
.experience-story-drivers .experience-proof { order:1; }
.experience-copy { max-width:560px; }
.experience-label { display:flex; align-items:center; gap:1rem; margin-bottom:clamp(1.5rem,3vw,2.25rem); font-family:var(--mono); text-transform:uppercase; }
.experience-label span:first-child { display:grid; place-items:center; width:44px; height:44px; border:1px solid var(--accent-line); color:var(--accent); font-size:.82rem; }
.experience-label span:last-child { color:var(--text-3); font-size:.75rem; letter-spacing:.11em; }
.experience-copy h3 { max-width:12ch; font-size:clamp(2rem,3.6vw,3.9rem); line-height:1; letter-spacing:-.05em; text-wrap:balance; }
.experience-copy>p { max-width:56ch; margin:1.35rem 0 0; color:var(--text-2); font-size:1rem; line-height:1.75; }
.experience-button {
    display:inline-flex;
    align-items:center;
    gap:.85rem;
    width:fit-content;
    margin-top:1.75rem;
    padding:.75rem .8rem .75rem 1rem;
    border:1px solid var(--line-strong);
    border-radius:7px;
    background:#111519;
    color:var(--text);
    font-size:.9rem;
    font-weight:600;
    transition:color var(--motion-base) var(--ease-out),background-color var(--motion-base) var(--ease-out),border-color var(--motion-base) var(--ease-out),box-shadow var(--motion-base) var(--ease-out),transform var(--motion-base) var(--ease-out);
}
.experience-button .icon { color:var(--accent); transition:color var(--motion-fast) var(--ease-out),transform var(--motion-base) var(--ease-out); }
.experience-button:hover { transform:translateY(-3px); border-color:var(--accent); background:var(--accent); color:#04121c; box-shadow:0 18px 38px -22px rgba(96,205,255,.9); }
.experience-button:hover .icon { color:#04121c; transform:translateX(4px); }
.experience-button:active { transform:translateY(0) scale(.98); transition-duration:80ms; }

.experience-proof { min-width:0; color:#f4f4f4; font-family:'Segoe UI Variable Text','Segoe UI',sans-serif; }
/* The three proof canvases may reflow beyond their 720px authored width to fill
   the story column. Below 720px they retain the shared shrink-only scaling. */
.experience-section .experience-proof .ui-scale-canvas { width:max(720px,100%) !important; }
.proof-section-heading,.proof-page-heading,.proof-library-heading { display:flex; align-items:center; justify-content:space-between; gap:1.5rem; }
.proof-section-heading { margin-bottom:.8rem; }
.proof-section-heading>div>span { display:flex; align-items:center; gap:.65rem; font-size:1rem; font-weight:600; }
.proof-section-heading>div>span .icon { width:18px; height:18px; color:var(--accent); }
.proof-section-heading small,.proof-page-heading small,.proof-library-heading small { display:block; margin-top:.22rem; color:#89939c; font-size:.75rem; }
.proof-utility,.proof-primary,.proof-row-action { display:inline-flex; align-items:center; justify-content:center; gap:.45rem; flex:none; border:1px solid #ffffff2a; border-radius:6px; background:#252728; color:#d4d5d6; font-size:.75rem; font-weight:500; }
.proof-utility { padding:.52rem .7rem; }
.proof-utility .icon { width:14px; height:14px; }
.proof-settings { overflow:hidden; border:1px solid #ffffff2a; border-radius:8px; background:#1d1f20; }
.proof-setting { display:grid; grid-template-columns:38px minmax(160px,1fr) minmax(220px,auto); gap:1rem; align-items:center; min-height:88px; padding:1rem 1.15rem; }
.proof-setting+.proof-setting { border-top:1px solid #ffffff18; }
.proof-setting-icon { display:grid; place-items:center; width:38px; height:38px; border:1px solid #ffffff24; border-radius:6px; background:#252728; color:var(--accent); }
.proof-setting-icon .icon { width:18px; height:18px; }
.proof-setting strong,.proof-setting small { display:block; }
.proof-setting strong { font-size:.88rem; font-weight:600; }
.proof-setting small { margin-top:.18rem; color:#89939c; font-size:.75rem; }
.proof-segment { display:flex; justify-self:end; gap:.35rem; }
.proof-segment span { min-width:64px; padding:.42rem .6rem; border:1px solid #ffffff2a; border-radius:5px; background:#252728; color:#d4d5d6; font-size:.75rem; text-align:center; }
.proof-segment span.is-on { border-color:var(--accent); background:var(--accent); color:#04121c; }
.proof-slider { display:grid; grid-template-columns:minmax(120px,190px) 42px; gap:.8rem; align-items:center; justify-self:end; }
.proof-slider>i { position:relative; display:block; height:4px; border-radius:5px; background:#4a4f54; }
.proof-slider>i::before { content:''; position:absolute; inset:0 34% 0 0; border-radius:inherit; background:var(--accent); }
.proof-slider>i>b { position:absolute; left:66%; top:50%; width:14px; height:14px; border:3px solid var(--accent); border-radius:50%; background:#1d1f20; transform:translate(-50%,-50%); }
.proof-slider>span { font-size:.82rem; font-weight:600; }

.proof-page-heading { margin-bottom:1.8rem; }
.proof-page-heading strong { display:block; font-size:1.55rem; letter-spacing:-.035em; }
.proof-primary { padding:.62rem .82rem; border-color:var(--accent); background:var(--accent); color:#04121c; }
.proof-library-heading { align-items:end; margin-bottom:.75rem; }
.proof-library-heading strong { display:block; font-size:.95rem; }
.proof-filters { display:flex; gap:.35rem; }
.proof-filters span { padding:.4rem .58rem; border:1px solid #ffffff24; border-radius:5px; background:#252728; color:#89939c; font-size:.75rem; }
.proof-filters span.is-on { border-color:var(--accent-line); color:var(--accent); background:var(--accent-dim); }
.proof-driver-list { overflow:hidden; border:1px solid #ffffff2a; border-radius:8px; background:#1d1f20; }
.proof-driver { position:relative; display:grid; grid-template-columns:40px minmax(0,1fr) auto auto; gap:.9rem; align-items:center; min-height:72px; padding:.8rem 1rem .8rem 1.15rem; }
.proof-driver+.proof-driver { border-top:1px solid #ffffff18; }
.proof-driver>i { position:absolute; inset:0 auto 0 0; width:3px; background:#65717c; }
.proof-driver.is-update>i { background:var(--warn); }
.proof-driver-icon { display:grid; place-items:center; width:40px; height:40px; border-radius:7px; background:#ffffff0d; color:#89939c; }
.proof-driver.is-update .proof-driver-icon { background:rgba(255,193,77,.11); color:var(--warn); }
.proof-driver-icon .icon { width:18px; height:18px; }
.proof-driver strong,.proof-driver small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.proof-driver strong { font-size:.84rem; }
.proof-driver small { margin-top:.18rem; color:#89939c; font-size:.75rem; }
.proof-driver em { color:#89939c; font-size:.75rem; font-style:normal; font-weight:600; }
.proof-driver.is-update em { color:var(--warn); }
.proof-row-action { min-width:78px; padding:.48rem .62rem; }

.shell-proof { overflow:hidden; border:1px solid #ffffff2a; border-radius:8px; background:#171819; }
.experience-story-shell .shell-proof { border:none; border-radius:0; background:transparent; overflow:visible; }
.experience-story-shell .ui-scale-canvas { overflow:hidden; border:1px solid #ffffff2a; border-radius:8px; background:#171819; }
.proof-titlebar { display:grid; grid-template-columns:auto 1fr auto; align-items:center; min-height:48px; border-bottom:1px solid #ffffff20; background:#1d1f20; }
.proof-titlebar-nav { display:flex; align-items:stretch; height:48px; }
.proof-titlebar-nav>span { display:grid; place-items:center; width:40px; color:#b6b8ba; }
.proof-titlebar-nav>span.is-muted { opacity:.38; }
.proof-titlebar-nav .icon { width:16px; height:16px; }
.proof-status { display:flex; justify-content:flex-end; gap:.4rem; min-width:0; }
.proof-status>span { padding:.28rem .5rem; border:1px solid #ffffff22; border-radius:5px; color:#b6b8ba; font-size:.75rem; white-space:nowrap; }
.proof-status>span.is-accent { display:inline-flex; align-items:center; gap:.4rem; border-color:var(--accent-line); color:var(--accent); background:var(--accent-dim); }
.proof-status i { width:5px; height:5px; border-radius:50%; background:var(--accent); }
.proof-caption { padding:0 .85rem; color:#89939c; font-size:.75rem; white-space:nowrap; }
.proof-window { display:grid; grid-template-columns:minmax(155px,210px) minmax(0,1fr); min-height:290px; }
.proof-window nav { display:flex; flex-direction:column; gap:.32rem; padding:.75rem .55rem; border-right:1px solid #ffffff20; }
.proof-window nav>span { display:flex; align-items:center; gap:.7rem; min-height:38px; padding:0 .7rem; border-radius:5px; color:#b1b1a9; font-size:.78rem; }
.proof-window nav>span.is-on { background:#373736; color:#b1b1a9; }
.proof-window nav .icon { width:16px; height:16px; }
.proof-window-page { padding:clamp(1.5rem,3vw,2.6rem); background:radial-gradient(circle at 100% 0,rgba(96,205,255,.065),transparent 38%); }
.proof-window-page>strong,.proof-window-page>small { display:block; }
.proof-window-page>strong { font-size:clamp(1.35rem,2.2vw,2rem); letter-spacing:-.035em; }
.proof-window-page>small { margin-top:.25rem; color:#89939c; font-size:.75rem; }
.proof-window-page>p { margin:1.15rem 0 2rem; color:#b6b8ba; font-size:.84rem; }
.proof-window-rule { width:min(100%,440px); height:58px; border:1px solid #ffffff20; border-radius:7px; background:#1d1f20; }
.proof-window-rule.is-short { width:min(72%,320px); height:42px; margin-top:.65rem; }

.step-index { display:block; font:500 .75rem var(--mono); letter-spacing:.1em; color:var(--accent); text-transform:uppercase; }

/* Shared page sign-off. A large message field and full-width action rails make
   the ending feel composed for Arsenal rather than dropped in as a button card. */
.finale-section { overflow:clip; }
.finale {
    position:relative;
    isolation:isolate;
    overflow:hidden;
    border:1px solid var(--line-strong);
    background:
        linear-gradient(116deg,rgba(96,205,255,.075),transparent 31%),
        linear-gradient(180deg,#0c1218,#090c10);
    box-shadow:0 40px 110px -70px rgba(0,0,0,.95);
}
.finale::before {
    content:'';
    position:absolute;
    z-index:-2;
    inset:0;
    background-image:
        linear-gradient(rgba(96,205,255,.035) 1px,transparent 1px),
        linear-gradient(90deg,rgba(96,205,255,.035) 1px,transparent 1px);
    background-size:64px 64px;
    mask-image:linear-gradient(90deg,#000,transparent 68%);
    opacity:.7;
}
.finale::after {
    content:'';
    position:absolute;
    z-index:-1;
    top:-48%;
    right:-8%;
    width:min(58vw,880px);
    aspect-ratio:1;
    border:1px solid rgba(96,205,255,.1);
    border-radius:50%;
    background:radial-gradient(circle,rgba(96,205,255,.12),transparent 64%);
    box-shadow:0 0 0 70px rgba(96,205,255,.018),0 0 0 140px rgba(96,205,255,.012);
    pointer-events:none;
}
.finale-topline {
    display:flex;
    justify-content:space-between;
    gap:2rem;
    padding:1rem clamp(1.25rem,3vw,2.5rem);
    border-bottom:1px solid var(--line-strong);
    color:var(--text-3);
    font:500 .75rem var(--mono);
    letter-spacing:.11em;
    text-transform:uppercase;
}
.finale-label { display:inline-flex; align-items:center; gap:.65rem; color:var(--accent); }
.finale-label i { width:22px; height:1px; background:currentColor; }
.finale-signature { display:inline-flex; align-items:center; gap:.55rem; }
.finale-signature .mark { width:16px; height:16px; color:var(--accent); }
.finale-message {
    display:grid;
    grid-template-columns:minmax(0,1.25fr) minmax(300px,.58fr);
    gap:clamp(3rem,8vw,10rem);
    align-items:end;
    min-height:360px;
    padding:clamp(3rem,6vw,6.25rem) clamp(1.25rem,4.5vw,5rem);
}
.finale-message h2 { margin:0; font-size:clamp(2.8rem,6vw,6.5rem); line-height:.91; letter-spacing:-.065em; text-wrap:balance; }
.finale-message h2 span,.finale-message h2 em { display:block; }
.finale-message h2 em { margin-top:.12em; color:var(--accent); font-style:normal; }
.finale-message p { max-width:49ch; margin:0; color:var(--text-2); font-size:1.05rem; line-height:1.75; }
.finale-actions { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); border-top:1px solid var(--line-strong); }
.finale-action {
    display:grid;
    grid-template-columns:34px minmax(0,1fr) 48px;
    gap:1rem;
    align-items:center;
    min-height:110px;
    padding:1.25rem clamp(1.25rem,2.5vw,2rem);
    background:rgba(255,255,255,.014);
    color:var(--text);
    transition:color var(--motion-base) var(--ease-out),background-color var(--motion-base) var(--ease-out);
}
.finale-action+.finale-action { border-left:1px solid var(--line-strong); }
.finale-action-index { align-self:start; color:var(--text-3); font:500 .75rem var(--mono); }
.finale-action-copy small,.finale-action-copy strong { display:block; }
.finale-action-copy small { margin-bottom:.25rem; color:var(--text-3); font:500 .75rem var(--mono); letter-spacing:.08em; text-transform:uppercase; }
.finale-action-copy strong { font-size:clamp(1rem,1.4vw,1.2rem); letter-spacing:-.015em; }
.finale-action-icon { display:grid; place-items:center; width:48px; height:48px; border:1px solid var(--accent-line); color:var(--accent); transition:transform var(--motion-base) var(--ease-out),background-color var(--motion-base) var(--ease-out),color var(--motion-base) var(--ease-out); }
.finale-action-icon .icon { width:19px; height:19px; }
.finale-action.is-primary { background:rgba(96,205,255,.075); }
.finale-action:hover { background:var(--surface); color:var(--text); }
.finale-action:hover .finale-action-icon { transform:translateX(4px); background:var(--accent); color:#04121c; }
.finale-action:focus-visible { position:relative; z-index:2; }
.feature-filters { display:flex; flex-wrap:wrap; gap:.6rem; margin-bottom:1.7rem; }
.feature-filters button { border:1px solid var(--line-strong); border-radius:999px; background:var(--bg-raised); color:var(--text-2); padding:.65rem 1.05rem; cursor:pointer; font-size:.85rem; }
.feature-filters button[aria-pressed=true] { color:var(--accent); border-color:var(--accent-line); background:var(--accent-dim); }
/* The grid narrows to a single card on the Everyday use filter. Easing the width
   keeps that from snapping underneath the card cross-fade the explorer runs. */
.feature-grid { transition:max-width var(--motion-slow, 380ms) var(--ease-out); }
.feature-card { display:flex; flex-direction:column; }
.feature-card .text-link { margin-top:auto; padding-top:1.5rem; }
.feature-card-more {
    margin-left:.1rem;
    padding:.16rem .45rem;
    border:1px solid var(--accent-line);
    border-radius:999px;
    color:var(--text-3);
    font:500 .66rem var(--mono);
    letter-spacing:.06em;
    white-space:nowrap;
}
.feature-card .text-link:hover .feature-card-more { color:var(--accent); text-decoration:none; }
.card,
.download-card,
.companion-trust-cards article {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
.card > *:not(.card-watermark),
.download-card > *:not(.card-watermark),
.companion-trust-cards article > *:not(.card-watermark) {
    position: relative;
    z-index: 1;
}
.card h3 { display: block; }
.card-watermark {
    position: absolute;
    top: -10px;
    right: -10px;
    width: 96px;
    height: 96px;
    display: grid;
    place-items: center;
    pointer-events: none;
    user-select: none;
    z-index: 0;
    opacity: .045;
    color: var(--accent);
    transform-origin: top right;
    transition: transform .4s cubic-bezier(.16, 1, .3, 1), opacity .4s ease;
}
.card-watermark .icon {
    width: 100%;
    height: 100%;
}
.companion-card .card-watermark,
.companion-trust-cards .card-watermark {
    color: var(--companion);
}
.card:hover .card-watermark,
.companion-trust-cards article:hover .card-watermark {
    opacity: .09;
    transform: scale(1.08) translate(-2px, 2px);
}
.download-card .card-watermark {
    top: -16px;
    right: -16px;
    width: 144px;
    height: 144px;
    opacity: .04;
}
.download-card:hover .card-watermark {
    opacity: .085;
    transform: scale(1.06) translate(-3px, 3px);
}
.guide-grid .card { transition: border-color .2s; }
.guide-grid .card:hover { border-color: var(--accent-line); }
.button-companion { background:var(--companion); border-color:var(--companion); color:#051017; }
.button-companion:hover { background:#8fd9ff; border-color:#8fd9ff; }
.companion-hero-grid { display:grid; grid-template-columns:1.15fr 1fr; gap:clamp(2rem,7vw,8rem); align-items:center; }
.companion-hero h1 em,.section-companion .kicker,.companion-hero .kicker,.section-companion .checklist .icon { color:var(--companion); }
.companion-hero::before { background:radial-gradient(ellipse at 75% 50%,rgba(96,205,255,.13),transparent 70%); }
.companion-preview { margin:0 auto; width:100%; max-width:380px; min-width:0; }
.companion-preview figcaption { text-align:center; color:var(--text-3); font-size:.82rem; line-height:1.6; padding:1.2rem .4rem 0; }
.phone-frame { border:1px solid #35404c; padding:14px 18px 10px; border-radius:38px; background:linear-gradient(145deg,#111923,#090d13 48%); box-shadow:0 28px 90px #0007,0 0 70px rgba(96,205,255,.055),inset 0 0 0 5px #080c12; overflow:hidden; }
.phone-status { display:flex; justify-content:space-between; align-items:center; padding:0 8px; font-size:10px; font-weight:600; height:20px; }
.phone-camera { display:block; width:50px; height:12px; border-radius:20px; background:#03060a; }
.phone-eyebrow { display:flex; align-items:center; gap:5px; font:500 8px var(--mono); letter-spacing:.04em; color:var(--companion); margin:22px 0 10px; }
.phone-eyebrow .mark { width:15px; height:15px; }
.phone-connected { margin-left:auto; font:500 8px var(--font); padding:4px 6px; border-radius:8px; background:rgba(96,205,255,.075); }
.phone-screen { min-height:540px; }
.phone-screen h3 { font-size:25px; letter-spacing:-.035em; }
.phone-subtitle { font-size:10px; color:var(--text-2); margin:5px 0 16px; }
.phone-telemetry { background:linear-gradient(145deg,rgba(96,205,255,.075),rgba(16,24,34,.72)); border:1px solid rgba(96,205,255,.2); border-radius:18px; padding:15px; }
.phone-power { display:flex; justify-content:space-between; align-items:center; padding-bottom:12px; border-bottom:1px solid var(--line-strong); }
.phone-power>div>strong { display:block; font-size:25px; line-height:1.4; letter-spacing:-.03em; }
.phone-power small { font-size:10px; color:var(--text-2); }
.phone-ac { font-size:8px; color:var(--companion); letter-spacing:.07em; }
.phone-ring { display:flex; flex-direction:column; align-items:center; justify-content:center; border:4px solid var(--companion); border-right-color:rgba(96,205,255,.13); border-radius:50%; width:72px; height:72px; }
.phone-ring>strong { font-size:20px !important; }
.phone-ring span { font-size:6px; letter-spacing:.08em; color:var(--text-2); }
.phone-metrics { display:grid; grid-template-columns:1fr 1fr; gap:8px; padding-top:12px; }
.phone-metrics>div { border-radius:9px; padding:8px 10px; background:#ffffff04; }
.phone-metrics span,.phone-metrics small { display:block; font-size:8px; color:var(--text-2); }
.phone-metrics span { color:var(--accent); }
.phone-metrics>div:nth-child(2) span { color:#c5b4ff; }
.phone-metrics strong { font-size:23px; font-weight:500; }
.phone-screen h4 { font-size:13px; margin:18px 0 10px; }
.phone-controls { display:grid; grid-template-columns:1fr 1fr; gap:7px; }
.phone-controls>div { display:grid; grid-template-columns:20px 1fr; column-gap:8px; align-items:center; background:#ffffff04; padding:10px; border:1px solid var(--line); border-radius:11px; }
.phone-controls .icon { grid-row:span 2; color:var(--companion); width:17px; height:17px; }
.phone-controls strong { font-size:10px; font-weight:500; }
.phone-controls small { font-size:8px; color:var(--text-2); }
.phone-tabs { display:grid; grid-template-columns:repeat(5,1fr); margin-top:15px; padding-top:10px; border-top:1px solid var(--line-strong); gap:4px; }
.phone-tabs button { display:flex; flex-direction:column; align-items:center; gap:3px; padding:8px 1px; background:transparent; border:0; border-radius:12px; color:var(--text-2); font-size:9px; cursor:pointer; min-height:48px; }
.phone-tabs .icon { width:17px; height:17px; }
.phone-tabs button span { font-size:8.5px; letter-spacing:-.01em; }
.phone-tabs button[aria-pressed=true] { color:var(--companion); background:rgba(96,205,255,.07); }
.phone-home-indicator { margin:10px auto 0; width:90px; height:3px; background:#707b88; border-radius:3px; }
.phone-row { display:flex; gap:10px; align-items:center; border:1px solid var(--line-strong); border-radius:13px; padding:17px 12px; margin-bottom:11px; background:#ffffff03; }
.phone-row>.icon:first-child { color:var(--companion); }
.phone-row>.icon:last-child { margin-left:auto; }
.phone-row strong { display:block; font-size:12px; font-weight:500; }
.phone-row small { display:block; font-size:9px; color:var(--text-2); margin-top:3px; }
.phone-support-note { display:flex; gap:10px; align-items:center; font-size:10px; color:var(--text-2); padding:15px 8px; }
.platform-jump { display:flex; gap:1rem; margin-top:2rem; }
.platform-jump a { display:flex; align-items:center; gap:.6rem; padding:.6rem 1rem; border:1px solid var(--line-strong); border-radius:999px; font-size:.85rem; }
.platform-jump a:hover { border-color:var(--accent); }
.download-card { padding:clamp(1.5rem,3.5vw,3.5rem); }
.download-card h2 { font-size:clamp(1.6rem,2.5vw,2.5rem); margin:0 0 1rem; }
.platform-icon { display:grid; place-items:center; width:50px; height:50px; border:1px solid var(--accent-line); border-radius:14px; background:var(--accent-dim); color:var(--accent); margin-bottom:1.8rem; }
.platform-icon .icon { width:25px; height:25px; }
.release-line { display:flex; flex-wrap:wrap; gap:.8rem; align-items:center; margin-bottom:1.6rem; font-size:.8rem; color:var(--text-2); }
.companion-card { border-color:rgba(96,205,255,.27); background:radial-gradient(ellipse at 100% 0,rgba(96,205,255,.035),transparent 75%),var(--bg-raised); }
.companion-card .platform-icon { border-color:rgba(96,205,255,.27); background:rgba(96,205,255,.047); color:var(--companion); }
.companion-card .kicker,.companion-card .text-link { color:var(--companion); }
.companion-card .release-tag { color:var(--companion); border-color:rgba(96,205,255,.27); }
.download-card .package-note { margin-top:1rem; font-size:.78rem; color:var(--text-3); }

/* The two ways to install, side by side: the portable executable and the Store.
   They share the row and stretch to a common height, so neither reads as the
   afterthought of the other. Sized by their own content rather than a fixed basis,
   so they sit together wherever they both fit and drop to a column only on a card
   too narrow to hold them, instead of squeezing the labels. */
.download-actions { display:flex; flex-wrap:wrap; align-items:stretch; gap:.75rem; margin-top:auto; }
.download-actions > * { flex:1 1 auto; min-width:0; margin-top:0; white-space:nowrap; }
/* site.css pushes a lone card button down with margin-top:auto. In this row the row
   itself carries that, and an auto cross-axis margin cancels the stretch, so the
   button would sit two pixels shorter than the badge beside it. */
.download-actions .button { margin-top:0; padding-inline:1rem; }
.store-badge { display:inline-flex; align-items:center; justify-content:center; gap:.6rem; padding:.6rem .95rem; border:1px solid var(--line-strong); border-radius:var(--r-md); background:var(--surface-2); color:var(--text); transition:border-color .18s var(--ease),background .18s var(--ease),transform .18s var(--ease); }
.store-badge:hover { border-color:var(--accent-line); background:var(--accent-dim); transform:translateY(-1px); }
.store-badge .store-mark { width:22px; height:22px; color:var(--accent); flex:none; }
.store-badge-text { display:flex; flex-direction:column; line-height:1.15; text-align:left; }
.store-badge-eyebrow { font-size:.67rem; letter-spacing:.08em; text-transform:uppercase; color:var(--text-3); }
.store-badge-name { font-size:.98rem; font-weight:600; }
.store-offer-note { margin-top:1rem; font-size:.78rem; color:var(--text-3); }
@media(prefers-reduced-motion:reduce) { .store-badge:hover { transform:none; } }
.release-pending { display:flex; gap:.6rem; align-items:center; padding:.85rem 1rem; border:1px dashed rgba(96,205,255,.27); border-radius:8px; margin-top:auto; margin-bottom:0; color:var(--companion) !important; }
.download-runtime { margin-top:2rem; }
.checksum-block { border:1px solid var(--line-strong); border-radius:15px; padding:1.5rem; margin-bottom:2rem; min-width:0; }
.checksum-block h3 { font:500 .85rem var(--mono); overflow-wrap:anywhere; }
.checksum-value { display:flex; align-items:center; gap:1.5rem; justify-content:space-between; }
.checksum-value code { overflow-wrap:anywhere; white-space:normal; font-size:.8rem; color:var(--companion); min-width:0; }
.checksum-value button { flex-shrink:0; }
.release-timeline { max-width:1100px; margin-inline:auto; }

/* The index used to hold a column of its own, which at full width left nearly
   200px of empty gutter and started every heading well to the right of the
   page's own left edge. It rides above the title now, so the entries line up
   with the headline above them and nothing is pushed off the edge. */
.release-entry {
    display:grid;
    grid-template-columns:minmax(0, 1fr);
    gap:2rem;
    align-items:center;
    padding:3rem 0;
    border-bottom:1px solid var(--line-strong);
}

.release-entry:last-child { border-bottom:0; }
.release-entry-copy { min-width:0; }

/* The application beneath the words it describes on narrow screens, and beside
   them on wide screens. These are illustrations, not evidence, so they are held
   back: low opacity, desaturated, and dissolved only into the bottom of the
   page. Inert to the pointer and to assistive tech. */
.release-entry-art {
    display:block;
    min-width:0;
    /* Held to a band shorter than the panels themselves, so a row is never
       taller than its words need and each panel runs off the bottom edge. The
       bottom mask softens that crop, so it reads as the panel continuing past
       the row rather than as a cut. */
    max-height:264px;
    overflow:hidden;
    opacity:.68;
    filter:saturate(.88);
    pointer-events:none;
    user-select:none;
    -webkit-mask-image:linear-gradient(180deg, #000 0%, #000 62%, transparent 100%);
    mask-image:linear-gradient(180deg, #000 0%, #000 62%, transparent 100%);
    transition:opacity var(--motion-slow, 620ms) var(--ease-out);
}

.release-entry:hover .release-entry-art { opacity:.85; }

/* The shared proof blocks are authored for a full-width column on the home
   page. Held to the art column they need their own scale rather than the page's. */
.release-entry-art .home-proof,
.release-entry-art .drivers-proof,
.release-entry-art .companion-proof { font-size:.82rem; }
.release-entry-art .proof-page-heading { margin-bottom:1.1rem; }
.release-entry-art .proof-page-heading strong { font-size:1.15rem; }

/* Unlike the taller panels that intentionally continue below the row, the
   shell is a complete window and needs both side edges visible. Let its fluid
   internal grid fit the What’s New art column instead of cropping a 920px box. */
.release-entry-art .shell-proof { width:100%; max-width:100%; }

/* The companion page, laid out like the other proof blocks. */
.proof-setting.is-block { display:block; }
.proof-pair { display:grid; grid-template-columns:auto minmax(0,1fr); gap:14px; align-items:center; }
.proof-qr { display:grid; grid-template-columns:repeat(7, 9px); gap:2px; padding:9px; border-radius:7px; background:#ffffff0d; }
.proof-qr i { width:9px; height:9px; border-radius:1px; }
.proof-qr i.is-on { background:#d4dae0; }
.proof-pair-body { display:flex; flex-direction:column; gap:2px; min-width:0; }
.proof-pair-body strong { font-size:.9rem; }
.proof-pair-body small { color:#89939c; font-size:.72rem; }
.proof-code-label { margin-top:.45rem; font:500 .62rem var(--mono); letter-spacing:.14em; color:#89939c; }
.proof-code { font:600 1.05rem var(--mono); letter-spacing:.14em; color:var(--accent); }

/* Panels drawn for the What's new entries ---------------------------------- */
/* Built from the same pieces as the full application illustrations, at a
   narrower width, showing only the surface each entry actually describes. */

.wn-panel { padding:18px 18px 20px; }
.wn-frame-flush { padding:0; overflow:hidden; }

.wn-head { display:flex; align-items:center; gap:12px; }
.wn-device { display:flex; align-items:center; gap:11px; min-width:0; }
.wn-device>span:last-child { display:flex; flex-direction:column; min-width:0; }
.wn-device-art {
    display:grid; place-items:center; flex:none;
    width:34px; height:34px; border-radius:7px;
    border:1px solid var(--accent-line); background:var(--accent-dim); color:var(--accent);
}
.wn-device-art .icon { width:17px; height:17px; }
.wn-head .app-pill { margin-left:auto; flex:none; }
.wn-head .app-pill .icon { width:12px; height:12px; }

.wn-row { padding:11px 14px; }
.wn-row .app-row-icon { width:28px; height:28px; }
.wn-row .app-row-icon .icon { width:15px; height:15px; }

/* Reorder grip, the six-dot handle the list draws beside a movable control. */
.wn-grip { display:grid; grid-template-columns:repeat(2, 3px); gap:3px; flex:none; opacity:.5; }
.wn-grip i { width:3px; height:3px; border-radius:50%; background:#8b939b; }

.wn-badge {
    padding:3px 9px; border-radius:999px;
    border:1px solid var(--accent-line); background:var(--accent-dim);
    font:600 10.5px var(--font); letter-spacing:.02em; color:var(--accent); white-space:nowrap;
}
.wn-badge.is-quiet { border-color:rgba(255,255,255,.1); background:rgba(255,255,255,.04); color:#98a1a9; font-weight:500; }

.wn-filters { display:flex; gap:6px; margin:14px 0 2px; flex-wrap:wrap; }

/* Quick Panel pager */
.wn-pager { display:flex; align-items:center; justify-content:center; gap:10px; margin-top:14px; color:#868f98; }
.wn-pager-arrow { display:grid; place-items:center; width:24px; height:24px; border-radius:5px; background:rgba(255,255,255,.04); }
.wn-pager-arrow .icon { width:13px; height:13px; }
.wn-dots { display:flex; gap:5px; }
.wn-dots i { width:5px; height:5px; border-radius:50%; background:rgba(255,255,255,.22); }
.wn-dots i.is-on { background:var(--accent); }
.wn-pager-label { font:500 11px var(--mono); }

/* Window chrome: the title bar, the collapsing pane and its icon rail */
.wn-tb-search {
    display:flex; align-items:center; gap:8px; flex:1; min-width:0;
    margin-left:4px; padding:6px 10px; height:30px;
    border-radius:5px; background:rgba(255,255,255,.045); color:#9aa3ac; font-size:11.5px;
}
.wn-tb-search .icon { width:14px; height:14px; }
.wn-tb-search .kbd {
    margin-left:auto; padding:1px 5px; border-radius:4px;
    border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.05);
    font-family:var(--mono); font-size:10px; color:#7d868f;
}
.app-titlebar .app-tb-button.is-muted { opacity:.4; }

.wn-shell-body { display:grid; grid-template-columns:44px 168px minmax(0,1fr); }
.wn-rail { display:flex; flex-direction:column; gap:2px; padding:8px 0; border-right:1px solid rgba(255,255,255,.05); }
.wn-rail-item { display:grid; place-items:center; height:32px; margin:0 6px; border-radius:5px; color:#a9b2ba; }
.wn-rail-item .icon { width:16px; height:16px; }
.wn-rail-item.is-active { background:rgba(255,255,255,.06); color:var(--accent); }
.wn-pane { padding:8px 0; border-right:1px solid rgba(255,255,255,.05); }
.wn-shell-main { display:flex; flex-direction:column; gap:3px; padding:16px 18px; }
.wn-skeleton { display:flex; flex-direction:column; gap:9px; margin-top:14px; }
.wn-skeleton i { height:9px; border-radius:3px; background:rgba(255,255,255,.05); }

/* Pairing: the code block and the details a phone is pointed at by hand */
.wn-pair { display:grid; grid-template-columns:auto minmax(0,1fr); gap:16px; align-items:center; margin-top:16px; }
.wn-qr {
    display:grid; grid-template-columns:repeat(7, 10px); gap:2px; flex:none;
    padding:10px; border-radius:8px; background:rgba(255,255,255,.05);
}
.wn-qr i { width:10px; height:10px; border-radius:1px; background:transparent; }
.wn-qr i.is-on { background:#cfd6dc; }
.wn-pair-details { display:flex; flex-direction:column; gap:8px; min-width:0; }
.wn-field { display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.wn-field span { font-size:11.5px; color:#868f98; }
.wn-field b { font:500 12px var(--mono); color:#dfe4e9; }
.wn-field b.is-accent { color:var(--accent); letter-spacing:.06em; }

/* Item 07 composes the same Quick Panel and toast partials used elsewhere. */
.wn-polish-scene { position:relative; min-height:720px; }
.wn-polish-quick { position:absolute; top:52px; right:12px; }
.wn-polish-quick .app-glow::before { opacity:.32; }
.wn-polish-toast { position:absolute; z-index:2; width:330px; }
.wn-polish-toast .app-toast { margin:0; }
.wn-polish-toast-primary { top:0; left:0; }
.wn-polish-toast-secondary { top:82px; left:24px; opacity:.72; transform:translateX(8px); }


/* Wide screens place the same artwork beside the description. The base
   single-column flow intentionally keeps it immediately below the copy. */
@media(min-width:1120px) {
    .release-entry { grid-template-columns:minmax(0, 1fr) minmax(0, .92fr); gap:clamp(2rem, 4vw, 4.5rem); }
}

/* Features deliberately inherits the complete What’s New row treatment above:
   the same spacing, columns, quiet saturation, bottom crop and dissolve. */
.feature-screen-ui { display:grid; width:100%; place-items:start center; }
.feature-screen-ui .ui-scale { width:100%; }
.feature-screen-ui .experience-proof { width:100%; }
.feature-detail-button {
    appearance:none;
    margin:0;
    padding:0;
    border:0;
    background:none;
    cursor:pointer;
}

/* The page lock every modal holds ------------------------------------------- */
/* The welcome notice and the feature dialogs take the page out of the flow the
   same way, because the same two things go wrong otherwise. Hiding the page's
   overflow reclaims the scrollbar's width, and the layout underneath slides
   sideways by exactly that much behind the blur; the width is measured before
   the lock and handed back as padding so nothing moves. And position:sticky
   resolves against a scrolling ancestor, which the lock takes away — the header
   then falls back to its static place at the top of the document, off-screen by
   the distance the reader had scrolled. It is pinned for as long as the lock is
   held, and the body reserves the height it vacated so the page does not rise
   by one header as it goes behind the blur.                                    */

html.has-modal-lock,
body.has-modal-lock { overflow:hidden; }

body.has-modal-lock {
    padding-right:var(--modal-lock-gutter, 0px);
    padding-top:var(--modal-lock-header, 0px);
}

html.has-modal-lock .site-header {
    position:fixed;
    top:0;
    left:0;
    right:var(--modal-lock-gutter, 0px);
}

/* The feature dialogs -------------------------------------------------------- */
/* Same instrument as the welcome notice, in the browser's own top layer: the
   same edges and shadow, the same seam drawing itself along the top edge, the
   same rise on the same curve, and the same exit. Only the arrangement inside
   differs, because this card carries a fixed header and footer around a
   scrolling middle rather than one continuous column of prose.                */

.feature-modal {
    width:min(860px, calc(100% - 2rem));
    max-height:min(86dvh, 900px);
    padding:0;
    overflow:hidden;
    /* The lock reclaims the page's scrollbar, which widens the viewport the
       top layer centres this dialog in. Shrinking the right edge by that width
       keeps the card on the same pixels instead of sliding across as it
       arrives — margin:auto recentres it inside what is left.                 */
    right:var(--modal-lock-gutter, 0px);
    border:1px solid var(--line-strong);
    border-radius:var(--r-lg);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .028) 0%, transparent 34%),
        linear-gradient(168deg, #14181d 0%, #0b0d11 58%, #090a0d 100%);
    color:var(--text);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .06) inset,
        0 48px 120px -32px rgba(0, 0, 0, .92),
        0 0 0 1px rgba(0, 0, 0, .5),
        0 0 90px -30px rgba(96, 205, 255, .22);
    opacity:0;
    /* Rise only. A scale here would resample every glyph in the card for the
       whole transition, which reads as the text sliding around inside its own
       box rather than the card arriving.                                      */
    transform:translate3d(0, 22px, 0);
    transition:transform 640ms cubic-bezier(.16, 1, .3, 1), opacity 420ms var(--ease-out);
    will-change:transform, opacity;
}
.feature-modal[open] { display:block; }
.feature-modal:focus { outline:none; }
.feature-modal.is-visible { opacity:1; transform:translate3d(0, 0, 0); }
.feature-modal.is-closing {
    opacity:0;
    transform:translate3d(0, 8px, 0);
    transition-duration:340ms, 260ms;
    transition-timing-function:var(--ease-out), var(--ease-out);
}

/* The blur radius is fixed and only opacity moves: browsers do not interpolate
   backdrop-filter smoothly, and animating the radius drops the compositor to a
   handful of coarse steps. The blur still appears to build, because the whole
   filtered layer fades in over the sharp page beneath it.                     */
.feature-modal::backdrop {
    opacity:0;
    background:radial-gradient(115% 80% at 50% 0%, rgba(96,205,255,.10), transparent 62%), rgba(4,6,9,.66);
    -webkit-backdrop-filter:blur(24px) saturate(135%);
    backdrop-filter:blur(24px) saturate(135%);
    transition:opacity 420ms var(--ease-out);
    will-change:opacity;
}
.feature-modal.is-visible::backdrop { opacity:1; }
.feature-modal.is-closing::backdrop { opacity:0; transition-duration:280ms; }

.feature-modal-card {
    position:relative;
    display:grid;
    grid-template-rows:auto minmax(0,1fr) auto;
    max-height:min(86dvh, 900px);
}

/* The accent seam along the top edge, drawn short of the corners so the radius
   stays clean, and on its own compositor layer so the scaleX scales a texture
   rather than re-rasterising a blur every frame.                              */
.feature-modal-bezel {
    position:absolute;
    top:0;
    left:50%;
    width:72%;
    height:1px;
    z-index:3;
    transform:translateX(-50%) scaleX(.2);
    transform-origin:50% 50%;
    background:linear-gradient(90deg, transparent, var(--accent) 50%, transparent);
    box-shadow:0 0 14px rgba(96, 205, 255, .5);
    opacity:0;
    pointer-events:none;
    will-change:transform, opacity;
    transition:transform 900ms cubic-bezier(.16, 1, .3, 1) 120ms, opacity 600ms var(--ease-out) 120ms;
}
.feature-modal.is-visible .feature-modal-bezel { opacity:.85; transform:translateX(-50%) scaleX(1); }
.feature-modal.is-closing .feature-modal-bezel { opacity:0; transition-delay:0s; transition-duration:200ms; }
.feature-modal-header {
    position:relative;
    padding:2rem 4.5rem 1.6rem 2rem;
    border-bottom:1px solid var(--line-strong);
    background:radial-gradient(circle at 18% 0, rgba(96,205,255,.08), transparent 55%);
}
.feature-modal-index {
    display:block;
    margin-bottom:.7rem;
    color:var(--accent);
    font:600 .68rem var(--mono);
    letter-spacing:.13em;
    text-transform:uppercase;
}
.feature-modal .feature-modal-header h2 { margin:0 0 .55rem; font-size:clamp(1.65rem,3vw,2.25rem); }
.feature-modal .feature-modal-header p { max-width:64ch; margin:0; color:var(--text-2); line-height:1.6; }
.feature-modal-close {
    position:absolute;
    top:clamp(.9rem, 2vw, 1.4rem);
    right:clamp(.9rem, 2vw, 1.4rem);
    z-index:4;
    display:grid;
    width:34px;
    height:34px;
    padding:0;
    place-items:center;
    border:1px solid var(--line);
    border-radius:var(--r-sm);
    background:rgba(12, 15, 19, .92);
    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);
    color:var(--text-3);
    cursor:pointer;
    transition:background-color var(--motion-fast) var(--ease-out), border-color var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out);
}
.feature-modal-close:hover { background:var(--accent-dim); border-color:var(--accent-line); color:var(--accent); }
.feature-modal-close:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.feature-modal-close .icon { width:15px; height:15px; }
.release-entry .feature-modal-close .icon { color:#fff; }
/* Only the capability list scrolls; the header and the footer stay anchored to
   the card. Same hairline bar as the notice.                                  */
.feature-modal-body {
    overflow:auto;
    padding:.35rem 2rem 1rem;
    overscroll-behavior:contain;
    scrollbar-width:thin;
    scrollbar-color:var(--line-strong) transparent;
}
.feature-modal-body::-webkit-scrollbar { width:6px; }
.feature-modal-body::-webkit-scrollbar-track { background:transparent; }
.feature-modal-body::-webkit-scrollbar-thumb { background:var(--line-strong); border-radius:999px; }
.feature-modal-body::-webkit-scrollbar-thumb:hover { background:var(--accent-line); }
.feature-modal-group { padding:1.55rem 0; border-bottom:1px solid var(--line); }
.feature-modal-group:last-child { border-bottom:0; }
.feature-modal-group-head { display:flex; align-items:baseline; justify-content:space-between; gap:1rem; margin-bottom:1rem; }
.feature-modal-group h3 { margin:0; font-size:1rem; }
.feature-modal-group-head span { color:var(--text-3); font:500 .67rem var(--mono); letter-spacing:.08em; text-transform:uppercase; }
/* Columns, not a two-column grid. A grid aligns the rows, so a capability that
   wraps onto a second line stretches the row and leaves the one beside it
   sitting over an empty line. Flowing the list into two columns lets every
   entry pack against the one above it, and the browser balances the two
   columns so they end level.                                                  */
.feature-modal-list {
    columns:2;
    column-gap:2rem;
    margin:0;
    padding:0;
    list-style:none;
}
.feature-modal-list li {
    position:relative;
    margin-bottom:.72rem;
    padding-left:1rem;
    /* An entry must never be split across the column break: its bullet is
       positioned against the first line and would be left behind. */
    break-inside:avoid;
    -webkit-column-break-inside:avoid;
    page-break-inside:avoid;
    color:var(--text-2);
    font-size:.86rem;
    line-height:1.52;
}
.feature-modal-list li:last-child { margin-bottom:0; }
.feature-modal-list li::before {
    content:'';
    position:absolute;
    left:0;
    top:.62em;
    width:5px;
    height:5px;
    border-radius:50%;
    background:var(--accent);
    box-shadow:0 0 12px rgba(96,205,255,.5);
}
.feature-modal-footer {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1.5rem;
    padding:1.15rem 2rem;
    border-top:1px solid var(--line-strong);
    background:rgba(5,8,10,.55);
}
.release-entry .feature-modal-footer p,
.capability-modal .feature-modal-footer p { margin:0; color:var(--text-3); font-size:.76rem; line-height:1.5; }
.feature-modal-footer .button { flex:none; }
.release-entry .feature-modal-footer .button .icon,
.capability-modal .feature-modal-footer .button .icon { color:#051017; }

/* Capability dialogs: the home-page grid shows five lines per card, and this is
   where the rest of the group lives, with the context a card has no room for. */
.capability-modal .feature-modal-close .icon { color:#fff; }
.feature-modal-notes { display:grid; gap:1rem; margin:0; padding:0; list-style:none; }
.feature-modal-notes li { padding-top:.8rem; border-top:1px solid var(--accent-line); }
.feature-modal-notes strong { display:block; color:var(--text); font-size:.84rem; }
.feature-modal-notes span { display:block; margin-top:.28rem; color:var(--text-3); font-size:.8rem; line-height:1.55; }

/* Support modal: Arsenal leads; the upstream acknowledgement stays quieter. */
.site-nav-support .icon { color:var(--accent); }
.site-nav-support:hover .icon { color:inherit; }
.support-modal { width:min(760px, calc(100% - 2rem)); }
.support-modal .feature-modal-close .icon { color:#fff; }
.support-modal-header { padding-right:4.75rem; }
.support-modal-body { padding:.3rem 2rem 0; }
.support-primary { padding:1.65rem 0 1.55rem; }
.support-primary-heading { display:flex; align-items:center; gap:1rem; margin-bottom:1rem; }
.support-primary-mark {
    display:grid;
    width:52px;
    height:52px;
    flex:0 0 52px;
    place-items:center;
    border:1px solid var(--accent-line);
    border-radius:14px;
    background:linear-gradient(145deg,var(--accent-dim),rgba(96,205,255,.025));
}
.support-modal-mark { width:29px; height:29px; }
.support-section-label {
    display:block;
    margin-bottom:.25rem;
    color:var(--accent);
    font:600 .66rem var(--mono);
    letter-spacing:.12em;
    text-transform:uppercase;
}
.support-primary h3,.support-upstream h3 { margin:0; font-size:1.05rem; }
.support-primary>p { max-width:62ch; color:var(--text-2); font-size:.9rem; line-height:1.62; }
.support-impact-list {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:1.25rem;
    margin:1.35rem 0 0;
    padding:0;
    list-style:none;
}
.support-impact-list li { padding-top:.85rem; border-top:1px solid var(--accent-line); }
.support-impact-list strong { display:block; color:var(--text); font-size:.82rem; }
.support-impact-list span { display:block; margin-top:.22rem; color:var(--text-3); font-size:.76rem; line-height:1.45; }
.support-upstream {
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:2rem;
    padding:1.35rem 0 1.45rem;
    border-top:1px solid var(--line);
}
.support-upstream>div { max-width:53ch; }
.support-upstream .support-section-label { color:var(--text-3); }
.support-upstream h3 { color:var(--text-2); }
.support-upstream p { margin:.45rem 0 0; color:var(--text-3); font-size:.82rem; line-height:1.55; }
.support-upstream-link {
    display:inline-flex;
    flex:none;
    align-items:center;
    gap:.45rem;
    color:var(--text-2);
    font-size:.78rem;
    white-space:nowrap;
    transition:color var(--motion-fast) var(--ease-out);
}
.support-upstream-link:hover { color:var(--accent); }
.support-upstream-link .icon { width:14px; height:14px; }
.support-modal-footer p { margin:0; color:var(--text-3); font-size:.76rem; line-height:1.5; }
.support-modal-footer .button .icon { color:#051017; }

@media(max-width:620px) {
    .feature-modal { width:calc(100% - 1rem); max-height:92dvh; border-radius:var(--r-md); }
    .feature-modal-card { max-height:92dvh; }
    .feature-modal-header { padding:1.55rem 3.8rem 1.25rem 1.25rem; }
    .feature-modal-close { top:.9rem; right:.9rem; }
    .feature-modal-body { padding:.25rem 1.25rem .8rem; }
    .feature-modal-list { columns:1; }
    .feature-modal-list li { margin-bottom:.65rem; }
    .feature-modal-group-head { align-items:start; flex-direction:column; gap:.35rem; }
    .feature-modal-footer { align-items:stretch; flex-direction:column; gap:.8rem; padding:1rem 1.25rem; }
    .feature-modal-footer .button { justify-content:center; }
    .feature-modal::backdrop { transition-duration:380ms; }
    .feature-modal { transition-duration:520ms, 300ms; }
    .feature-modal.is-closing::backdrop { transition-duration:240ms; }
    .feature-modal.is-closing { transition-duration:320ms, 220ms; }
    .feature-modal-bezel { transition-duration:640ms, 440ms; }
    .support-modal-body { padding:.2rem 1.25rem 0; }
    .support-primary-heading { align-items:flex-start; }
    .support-impact-list { grid-template-columns:minmax(0,1fr); gap:.75rem; }
    .support-impact-list li { display:grid; grid-template-columns:92px minmax(0,1fr); gap:.65rem; align-items:baseline; padding-top:.65rem; }
    .support-impact-list span { margin-top:0; }
    .support-upstream { display:block; padding-block:1.2rem 1.35rem; }
    .support-upstream-link { margin-top:.9rem; }
    .support-modal-footer .button { width:100%; }
}

@media(prefers-reduced-motion:reduce) {
    .release-entry-art { transition:none; }
}

.release-entry-meta { display:flex; align-items:center; gap:.65rem; margin-bottom:1.15rem; }
.release-entry-index { font:500 .8rem var(--mono); letter-spacing:.1em; color:var(--accent); flex:none; }
.release-entry-meta .icon { width:17px; height:17px; flex:none; }
/* Carries the eye across to the title rather than leaving the number stranded. */
.release-entry-rule { height:1px; flex:1 1 auto; max-width:120px; background:linear-gradient(90deg, var(--accent-line), transparent); }

.release-entry h2 { font-size:clamp(1.5rem,2.5vw,2rem); margin:0 0 .9rem; }
.release-entry p { color:var(--text-2); max-width:780px; margin:0 0 1.15rem; }
.release-entry .icon { color:var(--accent); }
.app-controls-heading { display:flex; justify-content:space-between; align-items:center; }
.app-edit-label { font-size:11px; color:#b7c4cd; border:1px solid #ffffff15; padding:4px 10px; border-radius:5px; margin-top:12px; }
.quick-pager { display:flex; align-items:center; gap:10px; color:#7e8e9a; font-size:9px; margin-top:14px; padding:8px 0; border-bottom:1px solid #ffffff10; }
.quick-pager .is-current { color:var(--accent); }
.quick-edit { margin-left:auto; font-size:10px; }
.ui-scale-canvas { will-change:auto; }
.ui-scale { container-type:inline-size; }
/* Proportional imagery before JS loads, and when it is disabled. */
@supports (zoom: calc(100cqw / 1180px)) {
    .ui-scale:not([data-ui-ready])[data-ui-width="1180"] .ui-scale-canvas { zoom:min(1,calc(100cqw / 1180px)); }
    .ui-scale:not([data-ui-ready])[data-ui-width="432"] .ui-scale-canvas { zoom:min(1,calc(100cqw / 432px)); }
    .ui-scale:not([data-ui-ready])[data-ui-width="720"] .ui-scale-canvas { zoom:min(1,calc(100cqw / 720px)); }
    .ui-scale:not([data-ui-ready])[data-ui-width="760"] .ui-scale-canvas { zoom:min(1,calc(100cqw / 760px)); }
    .ui-scale:not([data-ui-ready])[data-ui-width="600"] .ui-scale-canvas { zoom:min(1,calc(100cqw / 600px)); }
    .ui-scale:not([data-ui-ready])[data-ui-width="880"] .ui-scale-canvas { zoom:min(1,calc(100cqw / 880px)); }
    .ui-scale:not([data-ui-ready])[data-ui-width="1600"] .ui-scale-canvas { zoom:min(1,calc(100cqw / 1600px)); }
    .ui-scale:not([data-ui-ready])[data-ui-width="420"] .ui-scale-canvas { zoom:min(1,calc(100cqw / 420px)); }
}
.docs-search { margin-bottom:1.4rem; }
.docs-search label { display:block; font-size:.75rem; color:var(--text-2); margin-bottom:.45rem; }
.docs-search input {
    width:100%;
    min-width:0;
    background:var(--surface);
    border:1px solid var(--line-strong);
    color:var(--text);
    padding:.65rem .7rem;
    border-radius:7px;
    font-size:.8rem;
    transition:
        border-color 220ms var(--ease-out),
        background-color 220ms var(--ease-out),
        box-shadow 280ms var(--ease-out);
}

.docs-search input::placeholder { color:var(--text-3); }

/* A ring that arrives rather than snapping on, drawn as a shadow so it can be
   transitioned at all - an outline cannot - with the accent glow sitting
   outside it. */
.docs-search input:focus,
.docs-search input:focus-visible {
    outline:none;
    border-color:var(--accent);
    background:var(--surface-2);
    box-shadow:
        0 0 0 3px var(--accent-dim),
        0 0 20px -2px rgba(96, 205, 255, .38);
}

/* A box-shadow is not painted in forced-colours mode, so the real outline has
   to come back there or the field would focus invisibly. */
@media (forced-colors: active) {
    .docs-search input:focus,
    .docs-search input:focus-visible { outline:2px solid Highlight; outline-offset:2px; }
}
.docs-search p { font-size:.75rem; color:var(--text-2); margin-top:.5rem; }
.footer-meta { flex-wrap:wrap; }
@media(min-width:1400px) { .companion-features { grid-template-columns:repeat(4,minmax(0,1fr)); } }
@media(max-width:1150px) { .product-strip { flex-wrap:wrap; } }
@media(max-width:1040px) {
    .experience-intro { grid-template-columns:minmax(0,1fr); gap:1.5rem; }
    .experience-intro>p { max-width:66ch; }
    .experience-story,.experience-story-drivers { grid-template-columns:minmax(0,1fr); gap:2.25rem; min-height:0; }
    .experience-story-drivers .experience-copy,.experience-story-drivers .experience-proof { order:initial; }
    .experience-copy { max-width:680px; }
    .finale-message { grid-template-columns:minmax(0,1fr); gap:2rem; min-height:0; }
    .finale-message p { max-width:62ch; }
}
@media(min-width:861px) and (max-width:1000px) { .site-nav { gap:.8rem; } .site-nav-link { font-size:.77rem; } .site-header-inner { gap:1rem; } }
@media(max-width:860px) { .home-hero-heading,.companion-hero-grid { grid-template-columns:minmax(0,1fr); } .home-hero h1 { font-size:clamp(3.5rem,10vw,6rem); } .companion-hero-grid { gap:3rem; } .companion-preview { max-width:370px; } .site-nav:not(.is-open) { visibility:hidden; } .site-nav.is-open { visibility:visible; } }

/* Current Windows surfaces. These are interface diagrams, not device captures. */
.latest-surfaces-section { background:var(--bg-raised); }
.latest-surfaces-section .section-head { max-width:860px; }
.latest-surfaces-section .section-head .kicker { display:block; margin-bottom:1rem; }
.latest-surfaces-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }
.latest-surfaces-grid article { min-width:0; overflow:hidden; border:1px solid var(--line-strong); border-radius:12px; background:var(--bg); }
.latest-surfaces-copy { padding:clamp(1.4rem,3vw,2.3rem); }
.latest-surfaces-copy>span { color:var(--accent); font:600 .7rem var(--mono); letter-spacing:.1em; }
.latest-surfaces-copy h3 { margin:.75rem 0; font-size:clamp(1.45rem,2.2vw,2.1rem); letter-spacing:-.04em; }
.latest-surfaces-copy p { max-width:50ch; color:var(--text-2); line-height:1.65; }
.latest-surfaces-copy .text-link { margin-top:1rem; }
.latest-surfaces-art { min-width:0; padding:0 1.2rem 1.3rem; }
.latest-surfaces-art .ui-scale { width:100%; }
.companion-remote-section { background:var(--bg-raised); }
.companion-remote-section .split { align-items:center; }
.companion-remote-section .split-body p { max-width:56ch; }

.report-preview,.remote-preview,.navigation-preview { margin:0; color:#e9ecec; font:13px/1.45 var(--font); user-select:none; }
.report-preview-window,.navigation-preview-window { border:1px solid #44484a; border-radius:12px; background:#17191a; box-shadow:0 24px 55px -25px rgba(0,0,0,.72); overflow:hidden; }
.report-preview-path { display:flex; align-items:center; gap:10px; padding:14px 22px; border-bottom:1px solid #35393a; color:#c2c9ca; font-size:12px; }
.report-preview-path .icon { width:13px; height:13px; }
.report-preview-path span { color:#728082; }
.report-preview-heading { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:23px 26px 18px; }
.report-preview-kicker { color:#8de2c3; font:600 10px var(--mono); letter-spacing:.12em; }
.report-preview-heading h3,.remote-preview-options h3,.navigation-preview-body h3 { margin:6px 0 1px; color:#f5f7f6; font-size:24px; line-height:1.2; letter-spacing:-.035em; }
.report-preview-heading p,.navigation-preview-body main>p { margin:0; color:#9ba6a6; font-size:12px; }
.report-preview-action { display:inline-flex; align-items:center; gap:7px; flex:none; border:1px solid #567a6c; border-radius:5px; padding:7px 10px; color:#9ee6cb; font-size:11px; }
.report-preview-metrics { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; padding:0 26px 18px; }
.report-preview-metrics>div { display:flex; flex-direction:column; min-width:0; padding:14px 12px; border:1px solid #3b4040; border-radius:7px; background:#202324; }
.report-preview-metrics small { color:#8de2c3; font:600 9px var(--mono); letter-spacing:.08em; }
.report-preview-metrics strong { margin:8px 0 3px; font-size:22px; font-weight:650; }
.report-preview-metrics span { color:#91a09d; font-size:10px; }
.report-preview-chart { margin:0 26px 24px; padding:15px 16px 10px; border:1px solid #373d3a; border-radius:7px; background:#1c211f; }
.report-preview-chart>div:first-child { display:flex; justify-content:space-between; gap:12px; }
.report-preview-chart strong { font-size:12px; }.report-preview-chart span { color:#8b9895; font-size:10px; }
.report-preview-chart svg { display:block; width:100%; height:124px; margin-top:9px; }
.report-chart-grid { stroke:#3b4942; stroke-width:1; fill:none; }.report-chart-fill { fill:rgba(91,215,163,.14); }.report-chart-line { stroke:#7ce1b6; stroke-width:2.5; fill:none; }
.report-preview-axis { display:flex; justify-content:space-between; }

.remote-preview-layout { display:grid; grid-template-columns:280px minmax(0,1fr); gap:18px; align-items:center; padding:22px; border:1px solid #44484a; border-radius:12px; background:linear-gradient(125deg,#171a1c,#1f2524); }
.remote-preview-phone { border:5px solid #090b0c; border-radius:22px; background:#111719; overflow:hidden; box-shadow:0 16px 35px rgba(0,0,0,.55); }
.remote-preview-phone-head { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:14px 11px; font-size:10px; }
.remote-preview-phone-head span:first-child { display:flex; align-items:center; gap:6px; }
.remote-preview-live { color:#91e9c0; font:700 9px var(--mono); letter-spacing:.1em; }
.remote-preview-screen { margin:0 7px; height:238px; border:1px solid #5a6669; background:#1b1f20; overflow:hidden; }
.remote-preview-desktopbar { display:flex; justify-content:space-between; padding:6px 7px; border-bottom:1px solid #3e4748; font-size:8px; }
.remote-preview-desktopbar span:first-child { display:flex; align-items:center; gap:4px; }.remote-preview-desktopbar .mark { width:10px; height:10px; }
.remote-preview-desktop { display:grid; grid-template-columns:68px 1fr; height:100%; }
.remote-preview-desktop nav { display:flex; flex-direction:column; gap:9px; padding:12px 5px; background:#151819; color:#a4aeb0; font-size:7px; }
.remote-preview-desktop>div { padding:11px; }.remote-preview-desktop strong,.remote-preview-desktop small { display:block; }.remote-preview-desktop strong { font-size:10px; }.remote-preview-desktop small { color:#a7b1ae; font-size:7px; }
.remote-preview-mini-metrics { display:flex; gap:5px; margin:12px 0; }.remote-preview-mini-metrics span { flex:1; padding:10px 6px; background:#28302d; font-size:7px; }.remote-preview-mini-metrics b { display:block; font-size:12px; }
.remote-preview-desktop i { display:block; height:20px; margin:6px 0; border:1px solid #3f5147; background:#212924; }
.remote-preview-toolbar { display:flex; justify-content:space-between; margin:9px 7px; padding:8px; border-radius:5px; background:#202a2a; font-size:9px; }.remote-preview-toolbar span { display:flex; align-items:center; gap:4px; }
.remote-preview-phone-foot { padding:4px 6px 13px; color:#92a1a0; text-align:center; font-size:9px; }
.remote-preview-options>p { margin:8px 0 16px; color:#aeb8b6; font-size:12px; line-height:1.6; }
.remote-preview-options>div { display:flex; justify-content:space-between; gap:8px; padding:11px 0; border-top:1px solid #3a4140; font-size:11px; }
.remote-preview-switch,.navigation-preview-toggle { width:26px; height:15px; flex:none; border-radius:99px; background:#5bcb9b; }.remote-preview-switch::after,.navigation-preview-toggle::after { content:''; display:block; width:11px; height:11px; margin:2px 2px 2px auto; border-radius:50%; background:#111915; }.remote-preview-switch.is-off { background:#5a6262; }.remote-preview-switch.is-off::after { margin-left:2px; margin-right:auto; }
.remote-preview-options>small { display:block; margin-top:12px; color:#8b9996; font-size:10px; line-height:1.55; }

.navigation-preview-titlebar { display:flex; align-items:center; gap:17px; height:48px; padding:0 14px; border-bottom:1px solid #343a38; background:#151818; font-size:11px; }
.navigation-preview-buttons { display:flex; align-items:center; gap:12px; color:#c4cfca; }.navigation-preview-path { color:#d9e2df; }.navigation-preview-path b { padding:0 6px; color:#73817c; }.navigation-preview-status { margin-left:auto; color:#9eddbd; font:600 9px var(--mono); }.navigation-preview-status i { display:inline-block; width:3px; height:3px; margin:0 6px; border-radius:50%; background:#7cb39b; vertical-align:middle; }
.navigation-preview-body { display:grid; grid-template-columns:175px minmax(0,1fr); min-height:325px; }.navigation-preview-body nav { display:flex; flex-direction:column; gap:5px; padding:17px 9px; border-right:1px solid #353a38; background:#151818; }.navigation-preview-body nav span { display:flex; align-items:center; gap:8px; padding:8px; color:#aab6b1; font-size:10px; }.navigation-preview-body nav .is-active { border-radius:5px; background:#273e32; color:#b3f0cb; }
.navigation-preview-body main { padding:22px; }.navigation-preview-back { display:inline-flex; align-items:center; gap:6px; padding:5px 8px; border:1px solid #547962; border-radius:5px; color:#a9e9c2; font-size:10px; }.navigation-preview-body h3 { margin-top:14px; }
.navigation-preview-group { margin-top:22px; border:1px solid #38443e; border-radius:7px; overflow:hidden; }.navigation-preview-group>div { display:grid; grid-template-columns:1fr auto; gap:2px 10px; align-items:center; padding:14px 16px; border-left:3px solid #69d69c; }.navigation-preview-group>div+div { border-top:1px solid #38443e; border-left-color:transparent; }.navigation-preview-group strong { font-size:11px; }.navigation-preview-group small { grid-column:1; color:#95a29b; font-size:9px; }.navigation-preview-group b { grid-column:2; grid-row:1/3; color:#a9ebc1; font-size:12px; }
@media(max-width:780px) { .latest-surfaces-grid { grid-template-columns:1fr; } }
@media(max-width:620px) {
    .experience-intro { margin-bottom:0; padding-bottom:2.25rem; }
    .experience-intro h2 { font-size:clamp(2.35rem,11.5vw,3.4rem); }
    .experience-story { gap:2rem; padding:3.25rem 0; }
    .experience-label { margin-bottom:1.25rem; }
    .experience-copy h3 { font-size:clamp(2rem,10vw,2.8rem); }
    .finale-topline { padding:.9rem 1rem; }
    .finale-signature { display:none; }
    .finale-message { padding:2.75rem 1rem 3rem; }
    .finale-message h2 { font-size:clamp(2.5rem,12vw,3.6rem); }
    .finale-actions { grid-template-columns:minmax(0,1fr); }
    .finale-action { min-height:100px; padding:1rem; }
    .finale-action+.finale-action { border-left:0; border-top:1px solid var(--line-strong); }
    .release-text-full { display:none; }
    .release-text-mobile { display:inline; }
    .release-banner {
        display:inline-flex;
        align-items:center;
        gap:.55rem;
        padding:.35rem .75rem .35rem .45rem;
        border-radius:999px;
        font-size:.74rem;
        white-space:nowrap;
        max-width:100%;
        margin-bottom:2rem;
    }
    .release-banner .release-tag {
        font-size:.62rem;
        padding:.2rem .55rem;
        border-radius:999px;
    }
    .release-banner>.icon {
        display:inline-flex;
        width:13px;
        height:13px;
        flex:none;
        color:var(--accent);
        margin-left:2px;
    }
    .product-strip {
        display:grid;
        grid-template-columns:repeat(2, minmax(0, 1fr));
        gap:.45rem;
        padding:1.25rem 0;
        border-top:1px solid var(--line-strong);
    }
    .product-strip>span,
    .product-strip>a {
        display:flex;
        align-items:center;
        min-width:0;
        padding:.5rem;
        border-radius:var(--r-md);
        border:1px solid var(--line);
        background:var(--bg-raised);
        font-size:clamp(.75rem, 2.7vw, .78rem);
        font-weight:500;
        line-height:1.25;
        gap:.4rem;
        color:var(--text);
        white-space:nowrap;
    }
    .product-strip .icon {
        flex:none;
        width:clamp(12px, 3.6vw, 15px);
        height:clamp(12px, 3.6vw, 15px);
        color:var(--accent);
    }
    .product-strip a {
        color:var(--accent);
        border-color:rgba(96, 205, 255, .28);
        background:rgba(96, 205, 255, .05);
    }
    .product-strip .product-strip-check-full { display:none; }
    .product-strip .product-strip-check-mobile { display:inline; }
    .home-hero .hero-stage { margin-top:2.5rem; }
    .checksum-value { flex-direction:column; align-items:start; }
    .release-entry { padding:2.25rem 0; }
    .card-grid { grid-template-columns:minmax(0,1fr); }
    .phone-frame { padding-inline:14px; }
    .phone-screen h3 { font-size:23px; }
}
@media(max-width:620px) {
    .home-hero h1 { font-size:clamp(2.4rem,10vw,3.6rem); }
    .home-hero-heading { gap:1.5rem; }
    .home-hero .hero-actions { margin-top:1.5rem; gap:.6rem; }
    .home-hero .hero-intro .button { padding:.9rem .8rem; font-size:.82rem; flex:1; white-space:nowrap; }
    .home-hero .release-banner { margin-bottom:2.4rem; }
}

/* September polish pass: wide shells, quieter surfaces and complete motion. */
:root {
    --page-gutter: clamp(20px, 3.25vw, 72px);
    --content-max:1760px;
    --ease-out: cubic-bezier(.22, 1, .36, 1);
    --motion-fast: 180ms;
    --motion-base: 320ms;
}

body { min-height:100vh; display:flex; flex-direction:column; }
#swup { flex:1 0 auto; width:100%; }
.shell { max-width:var(--content-max); padding-inline:var(--page-gutter); }
.site-header-inner { max-width:var(--content-max); }

/* Keep the page wide without turning reading copy into wall-to-wall text. */
.page-head { padding:clamp(3rem,5vw,4.5rem) 0 clamp(3rem,4.5vw,4rem); }
.page-head .lede { max-width:82ch; }
.section-head:not(.section-head-wide) {
    max-width:none;
    display:grid;
    grid-template-columns:minmax(0,1.05fr) minmax(320px,.95fr);
    column-gap:clamp(3rem,8vw,10rem);
    align-items:end;
}
.section-head:not(.section-head-wide)>.kicker { grid-column:1; grid-row:1; }
.section-head:not(.section-head-wide)>h2 { grid-column:1; grid-row:2; }
.section-head:not(.section-head-wide)>p { grid-column:2; grid-row:1 / span 2; max-width:70ch; justify-self:end; }
.section-head-wide p { max-width:70ch; }
.faq-list { grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start; gap:1rem; }
.faq-item p, .faq-body p { max-width:none; }
.release-timeline { max-width:none; }
.release-entry p { max-width:90ch; }
.footer-legal p { max-width:110ch; }
.inline-link { color:var(--accent); text-decoration:underline; text-decoration-color:var(--accent-line); text-underline-offset:.18em; transition:text-decoration-color var(--motion-fast) ease; }
.inline-link:hover { text-decoration-color:var(--accent); }
.faq-finale { margin-top:clamp(3rem,5vw,4rem); }
.requirements-actions { margin-top:2.5rem; }
.card-action { margin-top:.8rem; }

/* Flat, native-feeling surfaces replace decorative card gradients. */
#main>.section,
.section-companion { background:var(--bg); }
#main>.section:nth-of-type(even) { background:#0d1013; }
#main>.section:nth-of-type(odd) { background:#090b0e; }
.hero::after { opacity:.22; }
.companion-card { background:var(--bg-raised); border-radius:12px; }
.release-banner,
.release-tag,
.feature-filters button,
.platform-jump a { border-radius:7px; }
.card,.download-card,.mode-card,.spec-list,.table-wrap,.checksum-block { border-radius:10px; }

/* Companion presentation --------------------------------------------------
   The page is built from panels, not rules. Every group of facts sits on a
   surface of its own; the only hairlines left are the ones that divide rows
   inside a single contained list. The hero keeps its quiet field of offset
   points, and the phone stays unframed so the interface remains the focus. */
.companion-hero {
    border-bottom:1px solid var(--line-strong);
    background:
        radial-gradient(ellipse 44% 62% at 76% 45%,rgba(96,205,255,.14),transparent 72%),
        radial-gradient(ellipse 38% 48% at 18% 18%,rgba(46,159,232,.09),transparent 74%),
        linear-gradient(180deg,#0a1118 0%,#080c11 56%,#07090c 100%);
}
.companion-hero::before {
    inset:0;
    height:auto;
    background:
        linear-gradient(122deg,transparent 0 42%,rgba(96,205,255,.055) 42.15%,transparent 42.3% 66%,rgba(96,205,255,.035) 66.15%,transparent 66.3%),
        radial-gradient(ellipse 52% 60% at 72% 44%,rgba(46,159,232,.1),transparent 72%);
    opacity:.9;
}
.companion-hero::after {
    background-image:
        radial-gradient(circle,rgba(122,215,255,.34) 0 .75px,transparent 1px),
        radial-gradient(circle,rgba(96,205,255,.16) 0 .65px,transparent .9px);
    background-size:24px 24px,41px 41px;
    background-position:0 0,11px 7px;
    -webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,.42),#000 46%,rgba(0,0,0,.72));
    mask-image:linear-gradient(90deg,rgba(0,0,0,.42),#000 46%,rgba(0,0,0,.72));
    opacity:.5;
}
.companion-hero-grid {
    grid-template-columns:minmax(0,1.12fr) minmax(400px,.72fr);
    gap:clamp(2.5rem,5vw,6rem);
}
.companion-page-hero-copy { position:relative; z-index:2; }
.companion-hero .companion-preview { max-width:420px; position:relative; z-index:2; }
.companion-hero .phone-frame { box-shadow:0 38px 110px rgba(0,0,0,.68),0 0 90px rgba(96,205,255,.09),inset 0 0 0 5px #080c12; }

/* Release availability, stated once, as a badge rather than a bordered box. */
.companion-status {
    display:inline-flex;
    align-items:baseline;
    flex-wrap:wrap;
    gap:.2rem .6rem;
    max-width:100%;
    margin:1.9rem 0 0;
    padding:.55rem 1rem .55rem .85rem;
    border:1px solid var(--line);
    border-radius:999px;
    background:rgba(14,19,25,.72);
    font-size:.82rem;
}
.companion-status-dot {
    align-self:center;
    width:7px; height:7px; flex:none;
    border-radius:50%;
    background:#68727b;
    box-shadow:0 0 0 4px rgba(104,114,123,.12);
}
.companion-status.is-live .companion-status-dot { background:var(--companion); box-shadow:0 0 0 4px rgba(96,205,255,.14); }
.companion-status strong { color:var(--text); font-weight:600; }
.companion-status>span:not(.companion-status-dot) { color:var(--text-3); }

/* Three essentials as chips. No dividers: the gap does the separating. */
.companion-facts {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:.7rem;
    margin:2.1rem 0 0;
    padding:0;
    list-style:none;
}
.companion-facts li {
    display:flex;
    align-items:center;
    gap:.75rem;
    min-width:0;
    padding:.85rem .85rem;
    border:1px solid var(--line);
    border-radius:12px;
    background:rgba(14,19,25,.66);
}
.companion-facts li>div { min-width:0; flex:1; }
.companion-fact-icon {
    display:grid; place-items:center;
    flex:none;
    width:44px; height:44px;
    border-radius:11px;
    background:rgba(96,205,255,.1);
    color:var(--companion);
}
.companion-fact-icon .icon { width:20px; height:20px; }
.companion-facts strong,.companion-facts small { display:block; min-width:0; }
.companion-facts strong { font-size:.86rem; }
.companion-facts small { margin-top:.2rem; color:var(--text-3); font-size:.74rem; line-height:1.45; }

/* Section openers. The shared intro carried a full-width rule under it; here
   the space alone separates the heading from what follows. */
.companion-intro {
    display:grid;
    grid-template-columns:minmax(0,1.12fr) minmax(300px,.68fr);
    gap:clamp(2rem,4vw,4.5rem);
    align-items:end;
    margin-bottom:clamp(2.75rem,5vw,4rem);
}
.companion-intro h2 { margin:1rem 0 0; font-size:clamp(1.6rem,2.48vw,2.56rem); line-height:1.06; letter-spacing:-.045em; text-wrap:balance; }
.companion-intro>p { max-width:56ch; margin:0; color:var(--text-2); font-size:1.04rem; line-height:1.72; }

/* One phone the visitor can drive, beside the five destinations it holds. */
.companion-app-layout {
    display:grid;
    grid-template-columns:minmax(0,1.14fr) minmax(320px,.86fr);
    gap:clamp(2.5rem,6vw,6rem);
    align-items:start;
}
.companion-app-stage { position:sticky; top:calc(var(--site-header-height,72px) + 2.5rem); min-width:0; }
.companion-app-stage .companion-preview { max-width:400px; justify-self:end; margin-left:auto; }
.companion-app-stage .phone-frame { box-shadow:0 34px 90px -30px rgba(0,0,0,.8),0 0 70px rgba(96,205,255,.06),inset 0 0 0 5px #080c12; }

.companion-destinations { display:grid; gap:.75rem; margin:0; padding:0; list-style:none; }
.companion-destination {
    display:grid;
    grid-template-columns:44px minmax(0,1fr);
    gap:1.15rem;
    padding:1.4rem 1.5rem;
    border:1px solid var(--line);
    border-radius:14px;
    background:var(--bg-raised);
    transition:border-color .18s var(--ease),background .18s var(--ease),transform .18s var(--ease);
}
.companion-destination:hover {
    border-color:var(--accent-line);
    background:var(--surface);
    transform:translateY(-2px);
}
.companion-destination-icon {
    display:grid; place-items:center;
    width:44px; height:44px;
    border-radius:12px;
    background:rgba(96,205,255,.09);
    color:var(--companion);
}
.companion-destination-icon .icon { width:20px; height:20px; }
.companion-destination-tab { display:block; color:var(--companion); font:500 .66rem var(--mono); letter-spacing:.11em; }
.companion-destination h3 { margin:.55rem 0 .4rem; font-size:1.12rem; }
.companion-destination p { margin:0; max-width:62ch; color:var(--text-2); font-size:.88rem; line-height:1.62; }

/* Pairing: the Windows surface presented as the window it actually is. */
.companion-pairing-layout {
    display:grid;
    grid-template-columns:minmax(0,1.2fr) minmax(330px,.8fr);
    gap:clamp(2.5rem,5vw,4.5rem);
    align-items:start;
}
.companion-windows-proof { min-width:0; margin:0; }
.companion-window {
    overflow:hidden;
    border:1px solid var(--line-strong);
    border-radius:14px;
    background:#131516;
    box-shadow:0 40px 90px -50px #000;
}
.companion-window-bar {
    display:flex; align-items:center; gap:.75rem;
    padding:.7rem 1rem;
    border-bottom:1px solid rgba(255,255,255,.1);
    background:#191b1c;
}
.companion-window-dots { display:flex; gap:6px; }
.companion-window-dots i { width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,.12); }
.companion-window-title {
    display:inline-flex; align-items:center; gap:.5rem;
    color:var(--text-3); font:500 .72rem var(--mono); letter-spacing:.05em;
}
.companion-window-title .mark { width:14px; height:14px; color:var(--companion); }
.companion-window-body { padding:clamp(1rem,2vw,1.6rem); }
.companion-windows-proof figcaption { margin-top:1rem; color:var(--text-3); font-size:.78rem; text-align:center; }

.companion-steps { display:grid; gap:.75rem; margin:0; padding:0; list-style:none; }
.companion-step {
    display:grid;
    grid-template-columns:38px minmax(0,1fr);
    gap:1.1rem;
    padding:1.35rem 1.45rem;
    border:1px solid var(--line);
    border-radius:14px;
    background:var(--bg-raised);
}
.companion-step>span {
    display:grid; place-items:center;
    width:38px; height:38px;
    border-radius:11px;
    background:rgba(96,205,255,.09);
    color:var(--companion);
    font:500 .76rem var(--mono);
}
.companion-step h3 { margin:.3rem 0 .45rem; font-size:1.05rem; }
.companion-step p { margin:0; color:var(--text-2); font-size:.9rem; line-height:1.62; }
.companion-step strong { color:var(--text); font-weight:600; }
.companion-note {
    display:flex; align-items:flex-start; gap:.65rem;
    margin:1.1rem 0 0;
    padding:1rem 1.15rem;
    border:1px solid var(--line);
    border-radius:12px;
    background:rgba(96,205,255,.045);
    color:var(--text-3); font-size:.82rem; line-height:1.6;
}
.companion-note .icon { margin-top:.22em; color:var(--companion); }

/* Trust: four claims as cards, so the icons and the prose share one rhythm. */
.companion-trust-grid {
    display:grid;
    grid-template-columns:minmax(300px,.74fr) minmax(0,1.26fr);
    gap:clamp(2.5rem,6vw,6rem);
    align-items:start;
}
.companion-trust-intro { position:sticky; top:calc(var(--site-header-height,72px) + 2rem); }
.companion-trust-intro h2 { margin:.9rem 0 1rem; font-size:clamp(1.6rem,3.2vw,2.72rem); line-height:1.04; letter-spacing:-.045em; }
.companion-trust-intro p { max-width:52ch; color:var(--text-2); }
.companion-trust-intro .text-link { margin-top:1.4rem; }
.companion-trust-cards { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.85rem; }
.companion-trust-cards article {
    min-width:0;
    padding:1.6rem 1.65rem;
    border:1px solid var(--line);
    border-radius:14px;
    background:var(--bg-raised);
    transition:border-color .18s var(--ease),background .18s var(--ease);
}
.companion-trust-cards article:hover { border-color:var(--accent-line); background:var(--surface); }
.companion-trust-cards h3 { margin:0 0 .5rem; font-size:1.02rem; }
.companion-trust-cards p { margin:0; color:var(--text-2); font-size:.87rem; line-height:1.62; }

/* Readiness: the call to action on a panel, the checklist in a framed list. */
.companion-readiness-grid {
    display:grid;
    grid-template-columns:minmax(0,1.06fr) minmax(340px,.94fr);
    gap:clamp(2rem,4vw,3.5rem);
    align-items:stretch;
}
.companion-release-panel {
    padding:clamp(1.75rem,3.2vw,2.75rem);
    border:1px solid var(--accent-line);
    border-radius:16px;
    background:
        radial-gradient(ellipse 80% 120% at 0% 0%,rgba(96,205,255,.075),transparent 70%),
        var(--bg-raised);
}
.companion-release-panel h2 { max-width:16ch; margin:.95rem 0 1rem; font-size:clamp(1.52rem,2.72vw,2.32rem); line-height:1.05; letter-spacing:-.045em; }
.companion-release-panel>p { max-width:52ch; margin:0; color:var(--text-2); font-size:.98rem; }
.companion-release-panel .hero-actions { margin-top:1.9rem; }

/* The closing statement is the shared finale, also used on Home and the FAQ, so
   the reduction that applies to this page's headings is scoped to this page
   rather than changing that component everywhere. Both of the finale's own
   sizes are restated at 80%, because the narrow one lives inside a media query
   that this more specific selector would otherwise out-rank. */
body[data-section="companion"] .finale-message h2 { font-size:clamp(2.24rem,4.8vw,5.2rem); }

@media(max-width:620px) {
    body[data-section="companion"] .finale-message h2 { font-size:clamp(2rem,9.6vw,2.88rem); }
}

.companion-requirements {
    overflow:hidden;
    border:1px solid var(--line);
    border-radius:16px;
    background:var(--bg-raised);
}
.companion-requirements-head { padding:clamp(1.5rem,2.6vw,2rem) clamp(1.5rem,2.6vw,2rem) 1.25rem; }
.companion-requirements-head h3 { margin:.8rem 0 0; font-size:1.25rem; }
.companion-requirements ul { margin:0; padding:0; list-style:none; }
.companion-requirements li {
    display:grid;
    grid-template-columns:34px minmax(0,1fr);
    gap:.9rem;
    padding:1.05rem clamp(1.5rem,2.6vw,2rem);
    border-top:1px solid var(--line);
}
.companion-requirements li>span { color:var(--companion); font:500 .68rem var(--mono); padding-top:.15rem; }
.companion-requirements strong,.companion-requirements small { display:block; }
.companion-requirements strong { font-size:.92rem; }
.companion-requirements small { margin-top:.28rem; color:var(--text-3); font-size:.78rem; line-height:1.5; }

body[data-section="home"] #main>.section.section-companion {
    overflow:hidden;
    background:
        radial-gradient(ellipse 42% 66% at 80% 48%,rgba(96,205,255,.095),transparent 72%),
        linear-gradient(118deg,rgba(96,205,255,.035),transparent 42%),
        #080c10;
}
body[data-section="home"] .section-companion::before {
    content:'';
    position:absolute;
    z-index:-1;
    inset:0;
    background-image:
        radial-gradient(circle,rgba(96,205,255,.22) 0 .7px,transparent .95px),
        linear-gradient(126deg,transparent 0 58%,rgba(96,205,255,.035) 58.15%,transparent 58.3%);
    background-size:28px 28px,320px 320px;
    -webkit-mask-image:linear-gradient(90deg,transparent 12%,#000 58%,rgba(0,0,0,.72));
    mask-image:linear-gradient(90deg,transparent 12%,#000 58%,rgba(0,0,0,.72));
    opacity:.42;
}
.companion-home-grid { grid-template-columns:minmax(0,1.08fr) minmax(380px,.72fr); gap:clamp(2.5rem,5vw,6rem); }
.companion-home-grid .split-body { max-width:720px; }
.companion-home-copy {
    position:relative;
    padding:clamp(2rem,4vw,4rem);
    border:1px solid var(--line-strong);
    background:linear-gradient(145deg,rgba(17,25,33,.9),rgba(8,12,16,.74));
    box-shadow:0 38px 100px -72px #000;
}
.companion-home-copy::before { content:''; position:absolute; inset:-1px auto -1px -1px; width:2px; background:linear-gradient(180deg,transparent,var(--companion),transparent); }
.companion-home-copy h3 em { color:var(--companion); font-style:normal; }
.companion-home-copy .checklist { margin-top:2rem; padding-top:1.5rem; border-top:1px solid var(--line-strong); }
.companion-home-copy .hero-actions { margin-top:2.25rem; }
.section-companion .companion-preview { max-width:400px; position:relative; z-index:1; }

@media(max-width:1180px) {
    .companion-app-layout { grid-template-columns:minmax(300px,.92fr) minmax(0,1.08fr); gap:clamp(2rem,4vw,3rem); }
    .companion-pairing-layout { grid-template-columns:minmax(0,1fr); }
    .companion-readiness-grid { grid-template-columns:minmax(0,1fr); }
    .companion-windows-proof { max-width:820px; }
    .companion-pairing-copy { max-width:820px; }
}

@media(max-width:1040px) {
    .companion-hero-grid,
    .companion-home-grid { grid-template-columns:minmax(0,1fr); gap:clamp(2.5rem,6vw,4.5rem); }
    .companion-page-hero-copy,
    .companion-home-grid .split-body { max-width:820px; }
    .companion-intro { grid-template-columns:minmax(0,1fr); gap:1.5rem; align-items:start; }
    .companion-intro h2 { max-width:22ch; }
    .companion-app-layout { grid-template-columns:minmax(0,1fr); gap:clamp(2.5rem,6vw,3.5rem); }
    .companion-app-stage { position:static; }
    .companion-app-stage .companion-preview { margin-inline:auto; }
    .companion-destinations { max-width:820px; }
    .companion-trust-grid { grid-template-columns:minmax(0,1fr); }
    .companion-trust-intro { position:static; }
    .companion-trust-cards { max-width:820px; }
}

@media(max-width:760px) {
    .companion-trust-cards { grid-template-columns:minmax(0,1fr); }
}

@media(max-width:620px) {
    .companion-hero .companion-preview,
    .section-companion .companion-preview { max-width:min(100%,370px); }
    .companion-home-copy { padding:2rem 1.25rem; }
    .companion-facts { grid-template-columns:minmax(0,1fr); gap:.5rem; }
    .companion-facts li { padding:.8rem .95rem; }
    .companion-status { border-radius:12px; }
    .companion-destination,
    .companion-step { padding:1.15rem 1.15rem; gap:.9rem; }
    .companion-destination { grid-template-columns:38px minmax(0,1fr); }
    .companion-destination-icon { width:38px; height:38px; }
    .companion-window-body { padding:.85rem; }
    .companion-requirements li { padding-inline:1.25rem; }
    .companion-requirements-head { padding:1.35rem 1.25rem 1.1rem; }
    .companion-pairing-layout { gap:2.5rem; }
    .companion-trust-grid,.companion-readiness-grid { gap:2.5rem; }
}

/* One motion language for every interactive surface. */
a:not(.button) { transition:color var(--motion-fast) var(--ease-out),opacity var(--motion-fast) var(--ease-out),text-decoration-color var(--motion-fast) var(--ease-out); }
.button,
.release-banner,
.site-nav-link,
.nav-toggle,
.docs-toggle,
.docs-drawer-close,
.text-link,
.experience-button,
.finale-action,
.guide-grid .card,
.feature-filters button,
.platform-jump a,
.phone-tabs button,
.docs-link,
.docs-toc a,
.pager-link,
.footer-col a,
.footer-legal a,
.code-copy,
.faq-item,
.faq-item summary::after {
    transition-duration:var(--motion-base);
    transition-timing-function:var(--ease-out);
}
.button { transition-property:color,background-color,border-color,box-shadow,transform; }
.experience-copy .experience-button {
    transition-property:color,background-color,border-color,box-shadow,transform;
    transition-duration:360ms;
    transition-timing-function:var(--ease-out);
}
.finale-actions .finale-action {
    transition-property:color,background-color,border-color,box-shadow;
    transition-duration:360ms;
    transition-timing-function:var(--ease-out);
}
.button:hover { transform:translateY(-2px); box-shadow:0 12px 30px -16px rgba(96,205,255,.72); }
.button:active { transform:translateY(0) scale(.98); transition-duration:80ms; }
.button-ghost:hover { transform:translateY(-2px); }
.release-banner { transition-property:color,background-color,border-color; }
.release-banner:hover { background:var(--surface); }
.text-link { transition-property:color,text-decoration-color; text-decoration:underline; text-decoration-color:transparent; text-underline-offset:5px; }
.text-link .icon,.product-strip a .product-strip-arrow,.pager-link .icon { transition:transform var(--motion-base) var(--ease-out); }
.text-link:hover .icon,.product-strip a:hover .product-strip-arrow { transform:translateX(4px); }
.guide-grid .card { transition-property:color,background-color,border-color,box-shadow,transform; }
.guide-grid .card:hover { transform:translateY(-4px); background:var(--surface); box-shadow:0 22px 50px -34px #000; }
.feature-card { transition:background-color var(--motion-base) var(--ease-out),box-shadow var(--motion-base) var(--ease-out); }
.feature-card:hover { background:var(--surface); box-shadow:inset 0 2px 0 var(--accent-line); }
.feature-filters button,.platform-jump a,.phone-tabs button { transition-property:color,background-color,border-color,box-shadow,transform; }
.feature-filters button:hover,.platform-jump a:hover { color:var(--text); border-color:var(--accent-line); background:var(--surface); transform:translateY(-2px); }
.phone-tabs button:hover { color:var(--companion); background:rgba(96,205,255,.043); transform:translateY(-2px); }
.docs-link { transition-property:color,background-color,border-color,transform; }
.docs-link:hover { transform:translateX(3px); background:rgba(255,255,255,.025); }
.pager-link { transition-property:color,background-color,border-color,box-shadow,transform; }
.footer-col a,.footer-legal a { transition-property:color,text-decoration-color,transform; width:fit-content; }
.footer-col a:hover { transform:translateX(3px); }
.nav-toggle:hover,
.docs-toggle:hover,
.docs-drawer-close:hover { background:var(--surface); border-color:var(--line-strong); color:var(--accent); }
.spec-row { transition:background-color var(--motion-fast) var(--ease-out); }
.spec-row:hover { background:var(--surface); }
tbody tr { transition:background-color var(--motion-fast) var(--ease-out); }
tbody tr:hover { background:rgba(255,255,255,.025); }
.brand { transition:opacity var(--motion-fast) var(--ease-out); }
.brand:hover { opacity:.78; }


/* Current Windows shell details reflected by the live source. */
.is-home-preview .app-frame {
    background:#171819;
    border-color:#ffffff2a;
    border-radius:10px;
    box-shadow:0 32px 80px -34px rgba(0,0,0,.9);
    color:#f4f4f4;
    font-family:'Segoe UI Variable Text','Segoe UI',sans-serif;
}
.is-home-preview .app-titlebar { background:#1d1f20; border-bottom-color:#ffffff18; }
.is-home-preview .app-body { grid-template-columns:232px minmax(0,1fr); min-height:600px; background:#171819; }
.is-home-preview .app-pane { background:#1d1f20; border-right-color:#ffffff18; padding:4px; }
.is-home-preview .app-nav-item { height:40px; margin:0 4px; padding-inline:12px; border-radius:6px; color:#b1b1a9; font-size:13px; }
.is-home-preview .app-nav-item .icon,
.is-home-preview .app-nav-item.is-active,
.is-home-preview .app-nav-item.is-active .icon { color:#b1b1a9; }
.is-home-preview .app-nav-item.is-active { background:#373736; }
.is-home-preview .app-nav-item.is-active::before { left:-4px; top:10px; bottom:10px; width:3px; }
.is-home-preview .app-content { background:#171819; padding:24px 32px 40px; }
.is-home-preview .app-content>* { width:min(100%,1120px); margin-inline:auto; }
.is-home-preview .app-page-title { font-family:'Segoe UI Variable Display','Segoe UI',sans-serif; font-size:28px; line-height:36px; font-weight:600; }
.is-home-preview .app-page-sub { color:#b6b8ba; font-size:12px; line-height:16px; margin-top:3px; }
.is-home-preview .app-tiles { gap:10px; margin-top:18px; }
.is-home-preview .app-tile { min-height:116px; padding:16px; border-radius:8px; border-color:#ffffff2a; background:#252728; }
.is-home-preview .app-tile-head { display:flex; align-items:center; gap:9px; color:#b6b8ba; font-size:12px; }
.is-home-preview .app-tile-head .icon { color:#b6b8ba; }
.is-home-preview .app-tile-value { display:flex; align-items:baseline; gap:8px; margin-top:11px; color:#f4f4f4; font-size:22px; font-weight:600; }
.is-home-preview .app-tile-value small { color:#b6b8ba; font-size:12px; font-weight:500; }
.is-home-preview .app-tile-bar { margin-top:10px; background:#ffffff2a; }
.is-home-preview .app-tile-detail { margin-top:8px; color:#86898c; font-size:11px; line-height:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.is-home-preview .app-controls-heading { margin-top:20px; margin-bottom:10px; }
.is-home-preview .app-section-title { display:flex; align-items:center; gap:10px; font-size:16px; line-height:22px; font-weight:600; }
.is-home-preview .app-section-title .icon { color:var(--accent); width:18px; height:18px; }
.is-home-preview .app-section-desc { color:#b6b8ba; font-size:12px; line-height:16px; margin-top:5px; }
.is-home-preview .app-edit-label { display:inline-flex; align-items:center; gap:7px; margin-top:0; padding:7px 12px; border:1px solid #ffffff2a; border-radius:6px; background:#252728; color:#f4f4f4; font-size:12px; }
.is-home-preview .app-card { border-radius:8px; border-color:#ffffff2a; background:#252728; }
.is-home-preview .app-row { min-height:72px; padding:10px 16px; }
.is-home-preview .app-row+.app-row { border-top-color:#ffffff18; }
.is-home-preview .app-row-icon { width:24px; height:24px; border-radius:0; background:transparent; color:#b6b8ba; }
.is-home-preview .app-row-icon .icon { width:18px; height:18px; }
.is-home-preview .app-row-label { color:#f4f4f4; font-size:14px; line-height:20px; }
.is-home-preview .app-row-desc { color:#b6b8ba; font-size:12px; line-height:16px; margin-top:3px; }
.is-home-preview .app-segment { gap:6px; padding:0; background:transparent; }
.is-home-preview .app-segment span { min-width:82px; padding:7px 12px; border:1px solid #ffffff2a; border-radius:6px; background:#1d1f20; color:#d4d5d6; text-align:center; }
.is-home-preview .app-segment span.is-on { border-color:var(--accent); background:var(--accent); color:#04121c; }
.is-home-preview .app-pill { padding:3px 9px; border-radius:6px; border-color:#ffffff2a; background:#252728; font-family:'Segoe UI Variable Text','Segoe UI',sans-serif; font-size:11px; }
.is-home-preview .app-pill.is-accent { border-color:var(--accent-line); background:var(--accent-dim); font-size:11px; }
.app-titlebar-nav { display:flex; align-items:center; gap:2px; }
.app-titlebar-nav .app-tb-button { flex:none; color:#b1b1a9; }
.app-tb-button.is-muted { opacity:.38; }
.is-home-preview .app-tb-button { width:40px; height:40px; border-radius:6px; }
.app-body { min-height:540px; }
.app-pane { display:flex; flex-direction:column; }
.app-pane-footer { margin-top:auto; }
.app-pane-rule { background:var(--line); margin-block:8px; }
.quick-title { display:flex; flex-direction:column; line-height:1.15; }
.quick-title small { margin-top:3px; color:#89939c; font-size:9px; font-weight:400; }
.quick-live { margin-left:auto; }
.quick-close { color:#84909a; font-size:16px; line-height:1; }
.quick-readout .d { color:#737f89; font-size:8px; margin-top:1px; white-space:nowrap; }
.quick-panel { width:432px; padding:20px; border-radius:16px; border-color:#ffffff2a; background:#1d1f20; box-shadow:0 30px 70px -30px rgba(0,0,0,.9); font-family:'Segoe UI Variable Text','Segoe UI',sans-serif; }
.quick-head { margin-bottom:16px; }
.quick-head .mark { width:34px; height:34px; padding:9px; border:1px solid #ffffff2a; border-radius:6px; background:#252728; }
.quick-title { font-size:16px; }
.quick-live { padding:6px 9px; border:1px solid #ffffff2a; border-radius:6px; background:#252728; font-family:'Segoe UI Variable Text','Segoe UI',sans-serif; font-size:10px; letter-spacing:0; text-transform:none; color:#f4f4f4; }
.quick-readouts { gap:0; padding:14px 10px; border:1px solid #ffffff2a; border-radius:8px; background:#252728; }
.quick-readout+.quick-readout { border-left:1px solid #ffffff18; }
.quick-readout .k { font-size:8px; }
.quick-readout .v { font-size:16px; }
.quick-tile { min-height:52px; border-color:#ffffff2a; border-radius:8px; background:#252728; }
.quick-tile.is-on { border-color:var(--accent-line); background:var(--accent-dim); }
.quick-sliders { gap:12px; padding:14px; border:1px solid #ffffff2a; border-radius:8px; background:#252728; }
.quick-slider .n { color:#b6b8ba; }

/* Footer begins immediately after the final content section. */
/* The bottom padding moves to the legal block so the bar under the footer can
   sit flush against the foot of the page. */
.site-footer { margin-top:0; padding:clamp(3rem,5vw,4.5rem) 0 0; }
.footer-legal { padding-bottom:clamp(2rem,4vw,3rem); }
#main>.section:last-child { padding-bottom:clamp(3.5rem,5vw,5rem); }

/* Licence, privacy and terms ------------------------------------------------
   These are long documents, so they use an editorial system rather than the
   marketing card grid: a full site-width head, a compact contents rail and one
   continuous reading column made from rules, not stacked boxes. */
.legal-page-head { padding-bottom: clamp(3rem, 5vw, 5rem); }
.legal-head-container { max-width: 880px; }
.legal-badge {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .32rem .75rem;
    border-radius: 9999px;
    background: rgba(96, 205, 255, 0.08);
    border: 1px solid var(--accent-line);
    color: var(--accent);
    font: 600 .7rem var(--mono);
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-bottom: 1.25rem;
}
.legal-badge .icon { width: 14px; height: 14px; }
.legal-page-head h1 {
    margin: 0 0 1.25rem;
    font-size: clamp(2.4rem, 4.2vw, 3.6rem);
    line-height: 1.08;
    letter-spacing: -.035em;
    color: var(--text);
}
.legal-page-head .lede {
    max-width: 72ch;
    font-size: clamp(1.02rem, 1.3vw, 1.18rem);
    line-height: 1.68;
    color: var(--text-2);
    margin: 0;
}
.legal-meta-strip {
    display: flex;
    flex-wrap: wrap;
    gap: .85rem;
    margin-top: 2rem;
}
.legal-meta-pill {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: .85rem 1.15rem;
    border-radius: 8px;
    border: 1px solid var(--line);
    background: var(--bg-card, rgba(255, 255, 255, 0.02));
    flex: 1 1 240px;
    min-width: 220px;
}
.legal-meta-icon {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: rgba(96, 205, 255, 0.1);
    color: var(--accent);
    flex: none;
}
.legal-meta-icon .icon { width: 15px; height: 15px; }
.legal-meta-text strong {
    display: block;
    font-size: .84rem;
    font-weight: 600;
    color: var(--text);
    line-height: 1.3;
}
.legal-meta-text span {
    display: block;
    font-size: .76rem;
    color: var(--text-3);
    line-height: 1.4;
    margin-top: .15rem;
}

.legal-document-section { padding-block: clamp(3rem, 5vw, 5.5rem) !important; }
.legal-document-layout {
    display: grid;
    grid-template-columns: minmax(220px, 260px) minmax(0, 1fr);
    gap: clamp(2.5rem, 5vw, 6rem);
    align-items: start;
}
.legal-rail { position: sticky; top: calc(var(--site-header-height, 64px) + 2rem); min-width: 0; }
.legal-document-switcher {
    display: flex;
    gap: 3px;
    padding: 3px;
    background: var(--bg-input, rgba(255, 255, 255, 0.03));
    border: 1px solid var(--line);
    border-radius: 8px;
}
.legal-document-switcher a {
    flex: 1;
    text-align: center;
    padding: .5rem .35rem;
    color: var(--text-3);
    font: 600 .7rem var(--mono);
    letter-spacing: .04em;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 6px;
    transition: all var(--motion-base) var(--ease-out);
}
.legal-document-switcher a:hover { color: var(--text); background: rgba(255, 255, 255, 0.04); }
.legal-document-switcher a[aria-current="page"] {
    color: var(--accent);
    background: rgba(96, 205, 255, 0.12);
    font-weight: 700;
}
.legal-rail-contents { margin-top: 2rem; }
.legal-rail-heading {
    margin: 0 0 .75rem;
    color: var(--text-3);
    font: 600 .68rem var(--mono);
    letter-spacing: .12em;
    text-transform: uppercase;
}
.legal-rail-list {
    list-style: none;
    margin: 0;
    padding: 0;
    border-left: 1px solid var(--line);
}
.legal-rail-list li { margin: 0; }
.legal-rail-list a {
    display: block;
    padding: .45rem 0 .45rem .95rem;
    color: var(--text-2);
    font-size: .83rem;
    line-height: 1.4;
    text-decoration: none;
    border-left: 2px solid transparent;
    margin-left: -1px;
    transition: all var(--motion-base) var(--ease-out);
}
.legal-rail-list a:hover {
    color: var(--accent);
    border-left-color: var(--accent);
    transform: translateX(2px);
}
.legal-rail-card {
    margin-top: 2rem;
    padding: 1.15rem;
    border-radius: 10px;
    border: 1px solid var(--line);
    background: var(--bg-card, rgba(255, 255, 255, 0.02));
}
.legal-rail-card-meta {
    margin-bottom: .85rem;
}
.legal-rail-card-meta strong {
    display: block;
    font-size: .83rem;
    color: var(--text);
    margin-bottom: .2rem;
}
.legal-rail-card-meta p {
    font-size: .75rem;
    color: var(--text-3);
    line-height: 1.45;
    margin: 0;
}
.legal-rail-card-links {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    border-top: 1px solid var(--line);
    padding-top: .75rem;
}
.legal-rail-card-links a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: .79rem;
    color: var(--text-2);
    text-decoration: none;
    padding: .2rem 0;
    transition: color var(--motion-base);
}
.legal-rail-card-links a:hover { color: var(--accent); }
.legal-rail-revision {
    display: flex;
    align-items: center;
    gap: .45rem;
    font-size: .72rem;
    color: var(--text-3);
    border-top: 1px solid var(--line);
    padding-top: .75rem;
    margin-top: .75rem;
}
.legal-rail-revision .icon { width: 13px; height: 13px; color: var(--accent); flex: none; }

.legal-article { min-width: 0; max-width: 820px; }
.legal-chapter {
    scroll-margin-top: calc(var(--site-header-height, 64px) + 2rem);
    padding-block: clamp(2.5rem, 4vw, 4rem);
    border-bottom: 1px solid var(--line);
}
.legal-chapter:first-child { padding-top: 0; }
.legal-chapter:last-child { border-bottom: 0; padding-bottom: 0; }
.legal-chapter-header { margin-bottom: 1.6rem; }
.legal-chapter-header h2 {
    margin: 0 0 .5rem;
    font-size: clamp(1.75rem, 2.6vw, 2.25rem);
    line-height: 1.16;
    letter-spacing: -.03em;
    color: var(--text);
}
.legal-chapter-lead {
    margin: 0;
    font-size: 1.02rem;
    line-height: 1.55;
    color: var(--accent);
}

.legal-prose {
    font-size: .95rem;
    line-height: 1.74;
    color: var(--text-2);
}
.legal-prose p { margin: 0 0 1.25rem; }
.legal-prose p:last-child { margin-bottom: 0; }
.legal-prose h3 {
    margin: 2rem 0 .75rem;
    font-size: 1.22rem;
    line-height: 1.35;
    letter-spacing: -.015em;
    color: var(--text);
}
.legal-prose h4 {
    margin: 1.35rem 0 .45rem;
    font-size: 1.02rem;
    line-height: 1.4;
    color: var(--text);
}
.legal-prose ul, .legal-prose ol {
    margin: 0 0 1.35rem 1.25rem;
    padding: 0;
}
.legal-prose li {
    margin-bottom: .6rem;
    line-height: 1.65;
}
.legal-prose li:last-child { margin-bottom: 0; }
.legal-prose a:not(.button) {
    color: var(--accent);
    text-decoration: underline;
    text-decoration-color: var(--accent-line);
    text-underline-offset: .2em;
    transition: text-decoration-color var(--motion-base);
}
.legal-prose a:not(.button):hover { text-decoration-color: var(--accent); }
.legal-prose .button {
    color: #04121c;
    text-decoration: none;
}
.legal-prose .button:hover {
    color: #04121c;
    text-decoration: none;
}
.legal-prose .button.button-ghost {
    color: var(--text);
}
.legal-prose .button.button-ghost:hover {
    color: var(--text);
}
.legal-prose code {
    font-family: var(--mono);
    font-size: .84em;
    padding: .15em .4em;
    border-radius: 4px;
    background: var(--bg-card, rgba(255, 255, 255, 0.05));
    border: 1px solid var(--line);
    color: var(--text);
}

.legal-grid-features {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.15rem;
    margin: 1.65rem 0;
}
.legal-feature-item {
    padding: 1.2rem;
    border-radius: 10px;
    border: 1px solid var(--line);
    background: var(--bg-card, rgba(255, 255, 255, 0.02));
}
.legal-feature-header {
    display: flex;
    align-items: center;
    gap: .65rem;
    margin-bottom: .55rem;
}
.legal-feature-icon {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    background: rgba(96, 205, 255, 0.1);
    color: var(--accent);
    flex: none;
}
.legal-feature-icon .icon { width: 14px; height: 14px; }
.legal-feature-header h3 {
    margin: 0;
    font-size: .94rem;
    font-weight: 600;
    color: var(--text);
}
.legal-feature-item p {
    margin: 0;
    font-size: .84rem;
    line-height: 1.55;
    color: var(--text-2);
}

.legal-comparison-columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.35rem;
    margin: 1.65rem 0;
}
.legal-comparison-card {
    padding: 1.35rem;
    border-radius: 10px;
    border: 1px solid var(--line);
    background: var(--bg-card, rgba(255, 255, 255, 0.02));
}
.legal-comparison-card h4 {
    margin: 0 0 .9rem;
    font: 600 .72rem var(--mono);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--accent);
}
.legal-comparison-card ul {
    margin: 0;
    padding-left: 1.1rem;
}
.legal-comparison-card li {
    font-size: .84rem;
    margin-bottom: .6rem;
    color: var(--text-2);
    line-height: 1.55;
}

.legal-support-box, .legal-repo-box, .legal-contact-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    padding: 1.25rem 1.45rem;
    border-radius: 10px;
    border: 1px solid var(--line);
    background: var(--bg-card, rgba(255, 255, 255, 0.025));
    margin: 1.75rem 0;
    flex-wrap: wrap;
}
.legal-support-box strong, .legal-repo-box strong, .legal-contact-box strong {
    display: block;
    font-size: .92rem;
    color: var(--text);
    margin-bottom: .25rem;
}
.legal-support-box p, .legal-repo-box p, .legal-contact-box p {
    font-size: .82rem;
    color: var(--text-3);
    margin: 0;
    line-height: 1.5;
}
.legal-support-actions {
    display: flex;
    gap: .65rem;
    flex-wrap: wrap;
}
.legal-repo-info {
    display: flex;
    align-items: center;
    gap: .85rem;
}
.legal-repo-icon {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(96, 205, 255, 0.1);
    color: var(--accent);
    flex: none;
}
.legal-repo-icon .icon { width: 17px; height: 17px; }

.legal-scope-list {
    display: flex;
    flex-direction: column;
    gap: .85rem;
    margin: 1.5rem 0;
}
.legal-scope-card {
    padding: 1.2rem 1.35rem;
    border-radius: 10px;
    border: 1px solid var(--line);
    background: var(--bg-card, rgba(255, 255, 255, 0.02));
}
.legal-scope-title {
    display: flex;
    align-items: center;
    gap: .65rem;
    margin-bottom: .45rem;
    flex-wrap: wrap;
}
.legal-scope-tag {
    font: 600 .64rem var(--mono);
    padding: .15rem .5rem;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: .06em;
}
.legal-scope-tag.gpl {
    background: rgba(96, 205, 255, 0.12);
    color: var(--accent);
    border: 1px solid var(--accent-line);
}
.legal-scope-tag.proprietary {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-3);
    border: 1px solid var(--line);
}
.legal-scope-card h3 {
    margin: 0;
    font-size: .98rem;
    color: var(--text);
}
.legal-scope-card p {
    margin: 0;
    font-size: .86rem;
    line-height: 1.58;
    color: var(--text-2);
}

.legal-callout {
    position: relative;
    margin: 1.65rem 0;
    padding: 1.25rem 1.45rem;
    border-radius: 10px;
    border: 1px solid var(--line);
    border-left: 3px solid var(--accent);
    background: linear-gradient(90deg, rgba(96, 205, 255, 0.06), transparent 70%);
}
.legal-callout-risk {
    border-left-color: #ffb65c;
    background: linear-gradient(90deg, rgba(255, 182, 92, 0.07), transparent 70%);
}
.legal-callout-risk .legal-callout-title > .icon { color: #ffb65c; }
.legal-callout-credit {
    border-left-color: var(--accent);
    background: linear-gradient(90deg, rgba(96, 205, 255, 0.09), transparent 70%);
}
.legal-callout-title {
    display: flex;
    align-items: center;
    gap: .65rem;
    margin-bottom: .55rem;
}
.legal-callout-title > .icon {
    width: 17px;
    height: 17px;
    color: var(--accent);
    flex: none;
}
.legal-callout h3 {
    margin: 0;
    font-size: .98rem;
    font-weight: 600;
    color: var(--text);
}
.legal-callout p {
    margin: 0 0 .65rem;
    font-size: .86rem;
    line-height: 1.62;
    color: var(--text-2);
}
.legal-callout p:last-child { margin-bottom: 0; }

.legal-table-wrapper {
    overflow-x: auto;
    margin: 1.65rem 0;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--bg-card, rgba(255, 255, 255, 0.015));
}
.legal-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    font-size: .85rem;
    line-height: 1.55;
}
.legal-table th {
    padding: .8rem 1.1rem;
    font: 600 .68rem var(--mono);
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--text-3);
    background: rgba(255, 255, 255, 0.025);
    border-bottom: 1px solid var(--line);
    white-space: nowrap;
}
.legal-table td {
    padding: .9rem 1.1rem;
    border-bottom: 1px solid var(--line);
    color: var(--text-2);
    vertical-align: top;
}
.legal-table tr:last-child td { border-bottom: 0; }
.legal-table strong { color: var(--text); }
.license-badge {
    display: inline-block;
    font: 600 .66rem var(--mono);
    padding: .15rem .45rem;
    border-radius: 4px;
    background: rgba(96, 205, 255, 0.1);
    color: var(--accent);
    border: 1px solid var(--accent-line);
}

@media(max-width: 1020px) {
    .legal-document-layout { grid-template-columns: 210px minmax(0, 1fr); gap: 2.5rem; }
}

@media(max-width: 820px) {
    .legal-document-layout { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
    .legal-rail { position: static; }
    .legal-rail-list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .25rem;
    }
    .legal-comparison-columns { grid-template-columns: minmax(0, 1fr); }
    .legal-grid-features { grid-template-columns: minmax(0, 1fr); }
}

@media(max-width: 620px) {
    .legal-page-head { padding-bottom: 2.5rem; }
    .legal-meta-strip { flex-direction: column; gap: .65rem; }
    .legal-meta-pill { min-width: 0; }
    .legal-rail-list { grid-template-columns: minmax(0, 1fr); }
    .legal-support-box, .legal-repo-box, .legal-contact-box { flex-direction: column; align-items: flex-start; }
    .legal-table th, .legal-table td { padding: .7rem .8rem; font-size: .8rem; }
}


@supports (zoom: calc(100cqw / 1600px)) {
    .ui-scale:not([data-ui-ready])[data-ui-width="1600"] .ui-scale-canvas { zoom:min(1,calc(100cqw / 1600px)); }
}

@media(max-width:1100px) {
    .faq-list { grid-template-columns:minmax(0,1fr); }
    .faq-col { display: contents; }
}

@media(max-width:860px) {
    .section-head:not(.section-head-wide) { display:block; }
    .section-head:not(.section-head-wide)>p { margin-top:.9rem; }
}

@media(max-width:620px) {
    :root { --page-gutter:20px; }
    .section { padding-block:clamp(3.5rem,14vw,5rem); }
    .site-footer { padding-top:2.75rem; }
    .footer-grid { gap:2rem; padding-bottom:2.25rem; }
}

/* September refinement: compact chrome, editorial page heads and clear rhythm. */
.site-header-inner { height:64px; }
.site-nav-link.is-current::after { bottom:-19px; }

.page-head {
    position:relative;
    isolation:isolate;
    overflow:hidden;
    border-bottom:1px solid var(--line-strong);
    background:#0c0f12;
}
.page-head::before {
    content:'';
    position:absolute;
    z-index:-1;
    inset:-70% -5% auto 38%;
    height:480px;
    background:radial-gradient(ellipse,rgba(96,205,255,.095),transparent 68%);
    pointer-events:none;
}
.page-head::after {
    content:'';
    position:absolute;
    z-index:-1;
    inset:auto 0 0;
    height:1px;
    background:linear-gradient(90deg,var(--accent-line),transparent 42%);
    pointer-events:none;
}
.page-head .shell { position:relative; }
.page-head .breadcrumbs { margin-bottom:.75rem; }
.page-head h1 {
    max-width:19ch;
    margin:.75rem 0 .8rem;
    font-size:clamp(2.5rem,5.2vw,4.5rem);
    line-height:1.02;
    letter-spacing:-.045em;
}
.page-head .lede { max-width:76ch; font-size:clamp(1.05rem,1.5vw,1.2rem); line-height:1.65; }
.page-head .hero-actions { margin-top:1.65rem; }
.page-head-meta {
    display:inline-flex;
    align-items:center;
    gap:.6rem;
    margin-top:1.5rem;
    padding:.55rem .8rem;
    border:1px solid var(--line-strong);
    border-radius:7px;
    background:rgba(255,255,255,.025);
    color:var(--text-2);
    font:500 .72rem var(--mono);
    letter-spacing:.09em;
    text-transform:uppercase;
}
.status-dot { width:7px; height:7px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 4px var(--accent-dim); }

/* Donation return pages: one calm, personal moment after leaving the payment flow. */
.donation-result {
    position:relative;
    isolation:isolate;
    display:grid;
    min-height:calc(100svh - 64px);
    place-items:center;
    overflow:hidden;
    padding:clamp(4.5rem,10vw,8rem) 0;
    border-bottom:1px solid var(--line-strong);
    background:
        linear-gradient(180deg,rgba(96,205,255,.025),transparent 38%),
        var(--bg);
}
.donation-result::before {
    content:'';
    position:absolute;
    z-index:-1;
    width:min(780px,90vw);
    aspect-ratio:1;
    border-radius:50%;
    background:radial-gradient(circle,rgba(96,205,255,.11),rgba(46,159,232,.035) 42%,transparent 70%);
    filter:blur(10px);
    pointer-events:none;
}
.donation-result::after {
    content:'';
    position:absolute;
    z-index:-1;
    inset:auto 8% 0;
    height:1px;
    background:linear-gradient(90deg,transparent,var(--accent-line),transparent);
    pointer-events:none;
}
.donation-result-shell { display:flex; justify-content:center; }
.donation-result-content { width:min(100%,760px); text-align:center; }
.donation-result-emblem {
    position:relative;
    display:grid;
    width:96px;
    height:96px;
    margin:0 auto 2rem;
    place-items:center;
    border:1px solid var(--line-strong);
    border-radius:27px;
    background:linear-gradient(145deg,var(--surface-2),var(--bg-raised));
    box-shadow:0 28px 70px -42px rgba(96,205,255,.85),inset 0 1px rgba(255,255,255,.04);
}
.donation-result-mark { width:52px; height:52px; }
.donation-result-badge {
    position:absolute;
    right:-8px;
    bottom:-8px;
    display:grid;
    width:36px;
    height:36px;
    place-items:center;
    border:4px solid var(--bg);
    border-radius:50%;
    background:var(--accent);
    color:#04121c;
}
.donation-result-badge .icon { width:17px; height:17px; stroke-width:2; }
.donation-result-cancelled .donation-result-badge { border-color:var(--bg); background:var(--surface-hover); color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent-line); }
.donation-result .kicker { justify-content:center; }
.donation-result h1 {
    max-width:15ch;
    margin:.9rem auto 1.1rem;
    font-size:clamp(2.75rem,7vw,5.25rem);
    line-height:1;
    letter-spacing:-.055em;
}
.donation-result-lede {
    max-width:66ch;
    margin:0 auto;
    color:var(--text-2);
    font-size:clamp(1.05rem,1.6vw,1.22rem);
    line-height:1.7;
}
.donation-result-note {
    display:flex;
    max-width:620px;
    margin:2.25rem auto 0;
    padding:1.1rem 1.2rem;
    gap:1rem;
    align-items:flex-start;
    border-top:1px solid var(--line-strong);
    border-bottom:1px solid var(--line-strong);
    text-align:left;
}
.donation-result-note-icon {
    display:grid;
    width:34px;
    height:34px;
    flex:0 0 34px;
    place-items:center;
    border:1px solid var(--accent-line);
    border-radius:50%;
    background:var(--accent-dim);
    color:var(--accent);
}
.donation-result-note-icon .icon { width:16px; height:16px; }
.donation-result-note strong { display:block; margin:.05rem 0 .15rem; color:var(--text); font-size:.95rem; }
.donation-result-note p { color:var(--text-2); font-size:.88rem; line-height:1.55; }
.donation-result-actions { justify-content:center; margin-top:2.25rem; }
.donation-result-signoff { margin-top:1.5rem; color:var(--text-3); font:500 .72rem/1.5 var(--mono); letter-spacing:.04em; }
@media(max-width:620px) {
    .donation-result { min-height:auto; padding:4rem 0 4.5rem; }
    .donation-result-emblem { width:84px; height:84px; margin-bottom:1.75rem; border-radius:23px; }
    .donation-result-mark { width:46px; height:46px; }
    .donation-result h1 { font-size:clamp(2.55rem,13vw,3.55rem); }
    .donation-result-note { padding-inline:.35rem; }
    .donation-result-actions { display:grid; }
    .donation-result-actions .button { width:100%; white-space:normal; }
}

#main>.section { border-top:1px solid var(--line-strong); }
#main>.page-head+.section { border-top:0; }
#main>.section::after {
    content:'';
    position:absolute;
    z-index:-1;
    inset:0 var(--page-gutter) auto;
    height:1px;
    background:linear-gradient(90deg,transparent,var(--line-strong) 24%,var(--line-strong) 76%,transparent);
    opacity:.65;
}
#main>.page-head+.section::after { display:none; }
.section-head { margin-bottom:clamp(2.5rem,4.5vw,4rem); }
.section-head h2 { letter-spacing:-.035em; line-height:1.08; }

/* Homepage: the full app and flyout share one canvas and one baseline. */
.product-suite-wrap { width:100%; }
.product-suite {
    display:grid;
    grid-template-columns:minmax(0,1150px) 432px;
    gap:18px;
    width:1600px;
    align-items:stretch;
}
.product-suite>.app-figure,
.product-suite>.app-figure>.app-glow,
.product-suite>.app-figure>.app-glow>.app-focus { height:772px; }
.product-suite .app-frame,
.product-suite .quick-panel { height:772px; box-sizing:border-box; }
.product-suite .app-body { min-height:0; height:722px; }
.product-suite .quick-panel { display:flex; flex-direction:column; justify-content:space-between; }
.product-suite .quick-head,
.product-suite .quick-readouts { margin-bottom:0; }
.product-suite .quick-tiles,
.product-suite .quick-sliders { margin-top:0; }
.product-suite-caption,
.app-figure-caption {
    display:flex;
    align-items:flex-start;
    gap:.6rem;
    margin-top:1.1rem;
    color:var(--text-3);
    font-size:.86rem;
    line-height:1.55;
}
.product-suite-caption::before,
.app-figure-caption::before { content:''; flex:none; width:14px; height:1px; margin-top:.75em; background:var(--line-strong); }
@media(max-width:620px) {
    .product-suite-caption,
    .app-figure-caption {
        font-size:.82rem;
        line-height:1.5;
        margin-top:.85rem;
    }
}

/* Mockups use current SurfaceBase/SurfaceLayer/Card geometry everywhere. */
.is-current-app .app-frame {
    border-color:#ffffff2a;
    border-radius:10px;
    background:#171819;
    color:#f4f4f4;
    font-family:'Segoe UI Variable Text','Segoe UI',sans-serif;
}
.is-fan-preview .app-frame { padding:22px 24px 20px !important; background:#1d1f20; }
.is-overlay-preview .app-frame { border-radius:8px; background:rgba(23,24,25,.94) !important; }
.is-toast-preview .app-toast { border-color:#ffffff2a; border-radius:8px; background:#1d1f20; font-family:'Segoe UI Variable Text','Segoe UI',sans-serif; }

/* Keep focus annotations inside the authored canvas and make every edge legible. */
.app-focus[data-focus] .app-card { overflow:visible; }
.app-focus[data-focus] .app-subject {
    outline:1px solid rgba(96,205,255,.88);
    outline-offset:-1px;
    box-shadow:
        inset 0 0 0 2px rgba(96,205,255,.18),
        0 0 0 5px rgba(96,205,255,.1),
        0 16px 40px -22px rgba(96,205,255,.85);
}
.app-callout {
    border:1px solid rgba(255,255,255,.34);
    border-radius:6px;
    box-shadow:0 10px 30px -12px rgba(96,205,255,.8),0 1px 0 rgba(255,255,255,.26) inset;
    letter-spacing:.055em;
}
.app-callout::after {
    content:'';
    position:absolute;
    width:7px;
    height:7px;
    background:var(--accent);
    border-right:1px solid rgba(255,255,255,.34);
    border-bottom:1px solid rgba(255,255,255,.34);
}
.app-callout[data-side="top"]::after { left:50%; bottom:-5px; transform:translateX(-50%) rotate(45deg); }
.app-callout[data-side="bottom"]::after { left:50%; top:-5px; transform:translateX(-50%) rotate(225deg); }
.app-callout[data-side="right"]::after { left:-5px; top:50%; transform:translateY(-50%) rotate(135deg); }
.app-callout[data-side="left"]::after { right:-5px; top:50%; transform:translateY(-50%) rotate(-45deg); }

/* Current Quick Panel chrome: bare Arsenal mark, direct mode rows, three tile
   rows and compact sliders whose end values sit beside the track. */
.quick-brand-mark { width:15px; height:17px; flex:none; color:var(--accent); }
.quick-close {
    display:grid;
    place-items:center;
    width:34px;
    height:34px;
    border:1px solid #ffffff2a;
    border-radius:6px;
    background:#252728;
}
.quick-modes { position:relative; margin-bottom:12px; }
.quick-mode-head {
    display:flex;
    align-items:center;
    justify-content:space-between;
    min-height:20px;
    padding:0 2px 4px;
    color:#b6b8ba;
    font-size:10.5px;
    font-weight:600;
}
.quick-mode-head.is-gpu { margin-top:7px; }
.quick-mode-head i { display:grid; place-items:center; width:22px; height:20px; color:#9ca4aa; font-style:normal; }
.quick-mode-head .icon { width:12px; height:12px; }
.quick-mode-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:5px; }
.quick-mode {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:4px;
    min-width:0;
    height:42px;
    padding:0 5px;
    border:1px solid #ffffff2a;
    border-radius:7px;
    background:#252728;
    color:#d4d5d6;
}
.quick-mode .icon { width:12px; height:12px; flex:none; color:#9ea7ae; }
.quick-mode b { overflow:hidden; font-size:9.5px; font-weight:600; text-overflow:ellipsis; white-space:nowrap; }
.quick-mode.is-on { border-color:var(--accent-line); background:var(--accent-dim); color:var(--accent); }
.quick-mode.is-on .icon { color:var(--accent); }
.quick-mode.is-action { background:#202223; }
.quick-section-head {
    display:grid;
    grid-template-columns:1fr auto 1fr;
    align-items:center;
    min-height:30px;
    color:#b6b8ba;
    font-size:11px;
    font-weight:600;
}
.quick-page-controls { display:flex; align-items:center; justify-content:center; gap:7px; }
.quick-page-controls b,
.quick-edit-controls b,
.quick-edit-controls em {
    display:grid;
    place-items:center;
    height:24px;
    min-width:24px;
    border:1px solid #ffffff2a;
    border-radius:5px;
    background:#252728;
    color:#d4d5d6;
    font:500 10px 'Segoe UI Variable Text','Segoe UI',sans-serif;
    font-style:normal;
}
.quick-page-controls i { width:5px; height:5px; border-radius:50%; background:#717577; }
.quick-page-controls i.is-current { background:var(--accent); box-shadow:0 0 0 3px var(--accent-dim); }
.quick-edit-controls { display:flex; justify-content:flex-end; gap:5px; }
.quick-edit-controls em { min-width:42px; padding-inline:7px; }
.quick-tiles { margin-top:8px; }
.quick-tile { min-height:62px; padding:0; overflow:hidden; }
.quick-tile-main { display:flex; align-items:center; gap:9px; min-width:0; flex:1; align-self:stretch; padding:10px 9px 10px 11px; }
.quick-tile-text { min-width:0; }
.quick-tile-text .t,.quick-tile-text .s { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.quick-tile-expander {
    display:grid;
    place-items:center;
    align-self:stretch;
    width:38px;
    flex:none;
    border-left:1px solid #ffffff2a;
    color:#b6b8ba;
    transition:color var(--motion-fast) var(--ease-out),background-color var(--motion-fast) var(--ease-out);
}
.quick-tile-expander .icon { width:13px; height:13px; }
.quick-tile.is-on .quick-tile-expander .icon { color:inherit; }
.quick-tile-expander:hover { background:var(--accent); color:#04121c; }
.quick-sliders { margin-top:13px; }
.quick-slider { display:grid; grid-template-columns:100px 30px minmax(0,1fr) 34px; gap:6px; }
.quick-slider .n { width:auto; min-width:0; }
.quick-slider-end { color:#86898c; font-size:9.5px; line-height:1; }
.quick-slider-end.is-min { text-align:right; }
.quick-slider-end.is-max { text-align:left; }

/* Performance plan library mockup. It follows the app's OverlayHost rather
   than inventing a separate marketing card system. */
.is-plan-preview .app-glow,
.is-plan-preview .app-focus { min-height:510px; }
.plan-window {
    position:relative;
    min-height:510px;
    overflow:hidden;
    border:1px solid #ffffff2a;
    border-radius:10px;
    background:#171819;
    color:#f4f4f4;
    font-family:'Segoe UI Variable Text','Segoe UI',sans-serif;
    box-shadow:0 30px 70px -36px rgba(0,0,0,.9);
}
.plan-page { padding:24px; }
.plan-page-head { position:relative; display:flex; align-items:flex-start; justify-content:space-between; gap:24px; }
.plan-page-head strong { display:block; font-size:20px; font-weight:600; }
.plan-page-head small,
.plan-group-label small,
.plan-profile-row small,
.plan-library-head small,
.plan-library-row small { display:block; margin-top:3px; color:#b6b8ba; font-size:10.5px; font-weight:400; }
.plan-actions { display:flex; gap:7px; }
.plan-actions span,
.plan-library-foot>span,
.plan-select,
.plan-row-tool {
    display:grid;
    place-items:center;
    min-height:30px;
    padding:0 10px;
    border:1px solid #ffffff2a;
    border-radius:6px;
    background:#252728;
    color:#d4d5d6;
    font-size:9.5px;
    font-weight:600;
}
.plan-actions span.is-primary { border-color:var(--accent); background:var(--accent); color:#04121c; }
.plan-settings-group { position:relative; margin-top:22px; overflow:visible; border:1px solid #ffffff22; border-radius:8px; background:#1d1f20; }
.plan-group-label { padding:13px 15px; border-bottom:1px solid #ffffff18; }
.plan-group-label strong { font-size:12px; font-weight:600; }
.plan-profile-row { display:grid; grid-template-columns:minmax(140px,.72fr) minmax(0,1.28fr); align-items:center; gap:18px; padding:14px 15px; }
.plan-profile-row>div>strong { display:block; font-size:11.5px; }
.plan-profile-picks { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:5px; }
.plan-profile-picks span,
.plan-profile-picks em { padding:6px 9px; border:1px solid #ffffff2a; border-radius:5px; background:#252728; color:#d4d5d6; font-size:9px; font-style:normal; }
.plan-profile-picks span.is-on { border-color:var(--accent); background:var(--accent); color:#04121c; }
.plan-profile-picks em { border-color:transparent; background:transparent; color:var(--accent); }
.plan-ghost-group { display:grid; gap:8px; margin-top:12px; padding:14px; border:1px solid #ffffff18; border-radius:8px; background:#1d1f20; }
.plan-ghost-group span { display:block; height:10px; border-radius:3px; background:#ffffff10; }
.plan-ghost-group span:nth-child(2) { width:82%; }
.plan-ghost-group span:nth-child(3) { width:64%; }
.plan-scrim { position:absolute; inset:0; background:rgba(0,0,0,.58); backdrop-filter:blur(1.5px); }
.plan-library {
    position:absolute;
    inset:50% auto auto 50%;
    width:620px;
    padding:20px;
    transform:translate(-50%,-50%);
    border:1px solid #ffffff2f;
    border-radius:10px;
    background:#202223;
    box-shadow:0 28px 70px -26px rgba(0,0,0,.95);
}
.plan-library-head { position:relative; display:flex; justify-content:space-between; gap:20px; }
.plan-library-head strong { display:block; font-size:18px; font-weight:600; }
.plan-library-head i { display:grid; place-items:center; width:30px; height:30px; border:1px solid #ffffff2a; border-radius:6px; background:#292b2c; color:#b6b8ba; font-style:normal; }
.plan-library-list { display:grid; gap:6px; margin-top:16px; }
.plan-library-row { display:grid; grid-template-columns:30px minmax(0,1fr) auto auto auto; align-items:center; gap:8px; min-height:54px; padding:8px 10px; border:1px solid #ffffff20; border-radius:7px; background:#252728; }
.plan-library-row.is-active { border-color:var(--accent-line); background:var(--accent-dim); }
.plan-library-row>div>strong { display:block; font-size:11.5px; font-weight:600; }
.plan-row-icon { display:grid; place-items:center; width:26px; height:26px; border-radius:7px; background:var(--accent-dim); color:var(--accent); }
.plan-row-icon .icon { width:13px; height:13px; }
.plan-select { min-height:27px; }
.plan-library-row.is-active .plan-select { border-color:transparent; background:transparent; color:var(--accent); }
.plan-row-tool { width:27px; min-height:27px; padding:0; }
.plan-library-foot { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:14px; color:#89939c; }
.plan-library-foot small { font-size:9.5px; }
.plan-library-foot>span { min-height:29px; }

/* Documentation pager: directional, balanced and easy to scan. */
.docs-pager {
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:1.25rem;
    margin-top:clamp(3.5rem, 6vw, 5rem);
    padding-top:2rem;
    border-top:1px solid var(--line);
}
.pager-link,
.docs-content a.pager-link {
    position:relative;
    display:flex;
    align-items:center;
    gap:1.25rem;
    min-height:98px;
    padding:1.25rem 1.5rem;
    border-radius:12px;
    border:1px solid rgba(255, 255, 255, .08);
    background:linear-gradient(135deg, rgba(18, 23, 30, .75) 0%, rgba(11, 14, 18, .85) 100%);
    box-shadow:0 4px 20px -4px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .05);
    text-decoration:none;
    color:inherit;
    overflow:hidden;
    isolation:isolate;
    transition-property:color, background-color, border-color, box-shadow, transform;
    transition-duration:var(--motion-base);
    transition-timing-function:var(--ease-out);
}
.pager-link:hover,
.docs-content a.pager-link:hover {
    text-decoration:none;
}
.pager-link::before {
    content:'';
    position:absolute;
    inset:0;
    opacity:0;
    pointer-events:none;
    z-index:-1;
    transition:opacity var(--motion-base) var(--ease-out);
}
.pager-link:not(.is-next)::before {
    background:radial-gradient(380px circle at 0% 50%, rgba(96, 205, 255, .12), transparent 70%);
}
.pager-link.is-next::before {
    background:radial-gradient(380px circle at 100% 50%, rgba(96, 205, 255, .12), transparent 70%);
}
.pager-link:not(.is-next) {
    grid-column:1;
    justify-content:flex-start;
}
.pager-link.is-next {
    grid-column:2;
    justify-content:space-between;
}
.pager-link.is-next .pager-copy {
    align-items:flex-end;
    text-align:right;
}
.pager-icon {
    position:relative;
    display:grid;
    place-items:center;
    width:44px;
    height:44px;
    flex:none;
    border:1px solid rgba(255, 255, 255, .09);
    border-radius:11px;
    background:rgba(255, 255, 255, .035);
    color:var(--text-3);
    transition:transform var(--motion-base) var(--ease-out), border-color var(--motion-base) var(--ease-out), background-color var(--motion-base) var(--ease-out), color var(--motion-base) var(--ease-out), box-shadow var(--motion-base) var(--ease-out);
}
.pager-icon .icon {
    width:19px;
    height:19px;
    transition:transform var(--motion-base) var(--ease-out);
}
.pager-copy {
    display:flex;
    min-width:0;
    flex:1;
    flex-direction:column;
}
.pager-dir {
    font-family:var(--mono);
    font-size:.68rem;
    font-weight:500;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:var(--text-3);
    transition:color var(--motion-fast) var(--ease-out);
}
.pager-title {
    margin-top:.3rem;
    font-size:1.05rem;
    font-weight:600;
    color:var(--text);
    line-height:1.35;
    text-wrap:balance;
    transition:color var(--motion-fast) var(--ease-out);
}
.pager-link:hover {
    transform:translateY(-3px);
    border-color:rgba(96, 205, 255, .38);
    background:linear-gradient(135deg, rgba(23, 31, 40, .85) 0%, rgba(13, 17, 22, .95) 100%);
    box-shadow:0 16px 36px -10px rgba(0, 0, 0, .75), 0 0 24px -4px rgba(96, 205, 255, .12), inset 0 1px 0 rgba(255, 255, 255, .12);
}
.pager-link:hover::before {
    opacity:1;
}
.pager-link:hover .pager-dir {
    color:var(--accent);
}
.pager-link:hover .pager-title {
    color:#ffffff;
}
.pager-link:hover .pager-icon {
    border-color:rgba(96, 205, 255, .5);
    background-color:rgba(96, 205, 255, .14);
    color:var(--accent);
    box-shadow:0 0 20px -2px rgba(96, 205, 255, .4);
}
.pager-link:not(.is-next):hover .pager-icon .icon {
    transform:translateX(-4px);
}
.pager-link.is-next:hover .pager-icon .icon {
    transform:translateX(4px);
}
.pager-link:active {
    transform:translateY(-1px) scale(.992);
    transition-duration:80ms;
}
.pager-link:focus-visible {
    outline:none;
    border-color:var(--accent);
    box-shadow:0 0 0 3px var(--accent-dim);
}

/* Release ledger. */
.changelog-list-section { padding-top:clamp(3rem,5vw,5rem); }
.changelog-list { display:grid; gap:1.25rem; }
.changelog-current { display:flex; flex-wrap:wrap; align-items:center; gap:.55rem; margin-top:1.5rem; }
.changelog-current .page-head-meta { margin-top:0; }
.release-note { overflow:hidden; border:1px solid var(--line-strong); border-radius:10px; background:#0e1216; }
.release-note.is-current { border-color:var(--accent-line); box-shadow:inset 3px 0 0 var(--accent); }
.release-note-head { display:flex; align-items:flex-start; justify-content:space-between; gap:2rem; padding:clamp(1.4rem,3vw,2.3rem); }
.release-note-head h3 { margin:.65rem 0 .55rem; font-size:clamp(1.55rem,3vw,2.35rem); letter-spacing:-.035em; }
.release-note-head p { max-width:72ch; margin:0; color:var(--text-2); }
.release-note-meta { display:flex; flex-wrap:wrap; align-items:center; gap:.65rem; color:var(--text-3); font:500 .68rem var(--mono); letter-spacing:.08em; text-transform:uppercase; }
.release-channel,.release-current { padding:.28rem .46rem; border:1px solid var(--line-strong); border-radius:4px; }
.release-current { border-color:var(--accent-line); background:var(--accent-dim); color:var(--accent); }
.release-version-link { flex:none; color:var(--accent); font:500 .78rem var(--mono); }
.release-platform-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); border-top:1px solid var(--line-strong); }
.release-platform-grid--single { grid-template-columns:minmax(0,1fr); }
.release-platform-grid>section { padding:clamp(1.3rem,2.5vw,2rem); }
.release-platform-grid>section+section { border-left:1px solid var(--line-strong); }
.release-platform-title { display:flex; align-items:center; gap:.7rem; }
.release-platform-title .icon { width:19px; height:19px; color:var(--accent); }
.release-platform-title h3 { margin:0; font-size:1rem; }
.release-platform-title span { margin-left:auto; color:var(--text-3); font:500 .72rem var(--mono); }
.release-platform-grid ul { display:grid; gap:.65rem; margin:1.1rem 0 0; padding:0; color:var(--text-2); list-style:none; }
.release-platform-grid li { position:relative; padding-left:1.15rem; }
.release-platform-grid li::before { content:''; position:absolute; left:0; top:.72em; width:5px; height:5px; border-radius:50%; background:var(--accent); }

@media(max-width:860px) {
    .site-header-inner { height:60px; }
    .page-head { padding-block:2.75rem 3rem; }
    .release-platform-grid { grid-template-columns:1fr; }
    .release-platform-grid>section+section { border-left:0; border-top:1px solid var(--line-strong); }
    .docs-pager { grid-template-columns:minmax(0, 1fr); gap:.85rem; }
    .docs-pager .pager-link.is-next { grid-column:1; }
    .docs-pager .pager-link.is-next .pager-copy { align-items:flex-start; text-align:left; }
    .docs-pager .pager-link { min-height:84px; padding:1.1rem 1.25rem; gap:1rem; }
}

@media(max-width:620px) {
    .page-head h1 { font-size:clamp(2.35rem,12vw,3.35rem); }
    .release-note-head { display:block; }
    .release-version-link { display:inline-block; margin-top:1rem; }
    .docs-pager { gap:.75rem; }
    .pager-link { min-height:80px; padding:1rem 1.15rem; }
}

@media(prefers-reduced-motion:reduce) {
    .pager-link:hover,
    .pager-link:active,
    .pager-link:not(.is-next):hover .pager-icon .icon,
    .pager-link.is-next:hover .pager-icon .icon {
        transform:none !important;
    }
}

/* Homepage Quick Panel story: useful density without competing with the mockup. */
.quick-panel-split { grid-template-columns:minmax(0,.92fr) minmax(430px,1.08fr); gap:clamp(3rem,7vw,8rem); }
.quick-panel-copy { position:relative; }
.quick-panel-copy h3 { margin:.9rem 0 1rem; font-size:clamp(2.1rem,4vw,3.55rem); line-height:1.02; letter-spacing:-.045em; }
.quick-panel-lede { max-width:58ch; font-size:1.05rem; line-height:1.7; }
.quick-panel-facts { margin-top:clamp(1.75rem,3vw,2.5rem); border-block:1px solid var(--line-strong); }
.quick-panel-fact { display:grid; grid-template-columns:46px minmax(0,1fr); gap:1rem; align-items:center; padding:1rem 0; }
.quick-panel-fact+.quick-panel-fact { border-top:1px solid var(--line); }
.quick-panel-fact-icon {
    display:grid;
    place-items:center;
    width:46px;
    height:46px;
    border:1px solid var(--line-strong);
    border-radius:7px;
    background:var(--surface);
    color:var(--accent);
}
.quick-panel-fact-icon .icon { width:20px; height:20px; }
.quick-panel-fact strong { display:block; margin:.05rem 0 .25rem; font-size:.94rem; font-weight:600; }
.quick-panel-fact div>span { display:block; max-width:54ch; color:var(--text-3); font-size:.84rem; line-height:1.55; }
.quick-panel-cta {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1.5rem;
    width:100%;
    margin-top:1.35rem;
    padding:1rem 1rem 1rem 1.15rem;
    border:1px solid var(--line-strong);
    border-radius:8px;
    background:#101316;
    color:var(--text);
    transition:background-color var(--motion-base) var(--ease-out),border-color var(--motion-base) var(--ease-out),color var(--motion-fast) var(--ease-out);
}
.quick-panel-cta small { display:block; margin-bottom:.2rem; color:var(--text-3); font:500 .64rem var(--mono); letter-spacing:.09em; text-transform:uppercase; }
.quick-panel-cta strong { font-size:.95rem; }
.quick-panel-cta-icon {
    display:grid;
    place-items:center;
    width:40px;
    height:40px;
    flex:none;
    border-radius:6px;
    background:var(--accent);
    color:#04121c;
    transition:transform var(--motion-base) var(--ease-out),background-color var(--motion-base) var(--ease-out);
}
.quick-panel-cta-icon .icon { width:17px; height:17px; }
.quick-panel-cta:hover { border-color:var(--accent-line); background:var(--surface); color:var(--text); }
.quick-panel-cta:hover .quick-panel-cta-icon { transform:translateX(3px); background:#7ad7ff; }

@media(max-width:980px) {
    .quick-panel-split { grid-template-columns:minmax(0,1fr); }
    .quick-panel-copy { max-width:760px; }
    .quick-panel-split .split-media { width:100%; max-width:620px; }
}

@media(max-width:620px) {
    .quick-panel-fact { grid-template-columns:42px minmax(0,1fr); gap:.85rem; }
    .quick-panel-fact-icon { width:42px; height:42px; }
}

/* A brighter, layered hero atmosphere without sacrificing product contrast. */
.home-hero {
    isolation:isolate;
    background:
        linear-gradient(118deg,rgba(96,205,255,.055),transparent 32%,rgba(46,159,232,.045) 68%,transparent),
        linear-gradient(180deg,#0a1118 0%,#080c11 50%,#07090c 100%);
}
.home-hero::before {
    inset:0;
    height:auto;
    background:
        radial-gradient(ellipse 46% 34% at 18% 20%,rgba(96,205,255,.23),transparent 72%),
        radial-gradient(ellipse 42% 38% at 82% 24%,rgba(46,159,232,.19),transparent 74%),
        radial-gradient(ellipse 70% 28% at 50% 78%,rgba(96,205,255,.14),transparent 74%);
    animation:arsenal-hero-light 16s ease-in-out infinite alternate;
}
.home-hero::after {
    background-image:
        linear-gradient(rgba(96,205,255,.055) 1px,transparent 1px),
        linear-gradient(90deg,rgba(96,205,255,.055) 1px,transparent 1px);
    background-size:72px 72px;
    mask-image:linear-gradient(to bottom,#000 0%,rgba(0,0,0,.78) 58%,transparent 94%);
    opacity:.52;
}
.home-hero-emblem {
    position:absolute;
    inset:0;
    z-index:0;
    overflow:hidden;
    pointer-events:none;
    -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 54%,transparent 88%);
    mask-image:linear-gradient(180deg,#000 0%,#000 54%,transparent 88%);
}
.home-hero-emblem::before {
    content:'';
    position:absolute;
    top:-6%;
    left:50%;
    transform:translate3d(-50%,0,0);
    width:min(60vw,900px);
    aspect-ratio:1;
    border-radius:50%;
    background:radial-gradient(circle,rgba(96,205,255,.17),rgba(46,159,232,.055) 42%,transparent 70%);
    filter:blur(34px);
    animation:arsenal-hero-halo 12s ease-in-out infinite alternate;
}
.home-hero-emblem-mark {
    position:absolute;
    top:-8%;
    left:50%;
    transform:translate3d(-50%,0,0);
    width:min(54vw,820px);
    height:auto;
    opacity:.14;
    filter:drop-shadow(0 0 46px rgba(96,205,255,.22));
    transform-origin:50% 50%;
    animation:arsenal-hero-mark 18s cubic-bezier(.45,0,.55,1) infinite alternate;
}
.home-hero-emblem-mark .mark-a { fill:#7ad7ff; }
.home-hero-emblem-mark .mark-b { fill:#2e9fe8; }
.home-hero>.shell { position:relative; z-index:1; isolation:isolate; }
.home-hero>.shell::before {
    content:'';
    position:absolute;
    z-index:-1;
    top:3rem;
    left:50%;
    transform:translateX(-50%);
    width:min(60vw,800px);
    aspect-ratio:1.6;
    background-image:radial-gradient(circle,rgba(122,215,255,.35) .8px,transparent 1px);
    background-size:18px 18px;
    mask-image:radial-gradient(ellipse at center,#000,transparent 72%);
    opacity:.34;
    pointer-events:none;
}

@keyframes arsenal-hero-light {
    from { opacity:.86; transform:translate3d(-.5%, -.35%, 0) scale(1); }
    to { opacity:1; transform:translate3d(.7%, .45%, 0) scale(1.035); }
}
@keyframes arsenal-hero-halo {
    from { opacity:.72; transform:translate3d(-50%, -2%, 0) scale(.94); }
    to { opacity:1; transform:translate3d(-50%, 4%, 0) scale(1.06); }
}
@keyframes arsenal-hero-mark {
    from { transform:translate3d(-50%, -8px, 0) scale(.985); }
    to { transform:translate3d(-50%, 14px, 0) scale(1.025); }
}

@media(max-width:860px) {
    .home-hero-emblem-mark { top:1.5rem; width:min(90vw,600px); opacity:.12; }
    .home-hero-emblem::before { top:0; width:min(96vw,700px); }
}

@media(max-width:620px) {
    .home-hero-emblem-mark { top:3rem; width:min(110vw,480px); opacity:.115; }
    .home-hero-emblem::before { top:1rem; width:min(120vw,560px); }
}

@media(prefers-reduced-motion:reduce) {
    .home-hero::before,
    .home-hero-emblem::before,
    .home-hero-emblem-mark { animation:none; }
}
.home-hero .hero-stage { position:relative; }
.home-hero .hero-stage::before {
    content:'';
    position:absolute;
    z-index:-1;
    inset:18% 8% 4%;
    border-radius:50%;
    background:rgba(53,174,237,.14);
    filter:blur(90px);
    pointer-events:none;
}
.home-hero .hero-stage::after {
    content:'';
    position:absolute;
    z-index:-1;
    top:-1.5rem;
    left:6%;
    right:6%;
    height:1px;
    background:linear-gradient(90deg,transparent,var(--accent-line) 24%,rgba(96,205,255,.68) 50%,var(--accent-line) 76%,transparent);
    box-shadow:0 18px 70px 12px rgba(46,159,232,.12);
    pointer-events:none;
}

/* -----------------------------------------------------------------------------
   Changelog platform timelines

   Windows and Android are separate release histories. The hidden tablist is
   progressively revealed by site.js; without JavaScript both complete product
   timelines remain stacked and readable.
   -------------------------------------------------------------------------- */
.changelog-tablist {
    display:inline-grid;
    grid-template-columns:repeat(2,max-content);
    gap:.7rem;
    width:max-content;
    max-width:100%;
    margin-bottom:clamp(2rem,4vw,3.5rem);
    padding:.55rem;
    border:1px solid var(--line-strong);
    border-radius:10px;
    background:#0e1216;
}
.platform-tab {
    display:flex; align-items:center; gap:.8rem; min-width:0;
    padding:.95rem 1.05rem; border:1px solid transparent; border-radius:6px;
    background:transparent; color:var(--text-2);
    font:500 .9rem var(--font); text-align:left; cursor:pointer;
    transition:background-color .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease);
}
.platform-tab:hover { border-color:var(--line-strong); color:var(--text); }
.platform-tab .icon { width:19px; height:19px; flex:none; color:currentColor; }
.platform-tab-copy { display:grid; gap:.16rem; min-width:0; }
.platform-tab-copy strong { color:inherit; font-size:.94rem; }
.platform-tab-copy small { overflow:hidden; color:var(--text-3); font:500 .7rem var(--mono); text-overflow:ellipsis; white-space:nowrap; }
.platform-tab.is-active { background:var(--accent-dim); border-color:var(--accent-line); color:var(--text); }
.platform-tab.is-active .icon { color:var(--accent); }
.platform-tab:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }

/* Simple or Technical. The tablist above chooses a product; this chooses how
   much of the release is spelled out, so it reads as a setting rather than a
   second set of tabs. Both tracks are served, and without JavaScript they stack
   under their own headings the way the two product timelines do. */
/* One row of furniture, not two: the product tabs choose what you are reading
   and this chooses how it is written, so it sits at the far end of the same
   line. It is deliberately plain text — a second boxed control under the first
   read as a duplicate tablist rather than a preference. */
.changelog-controls {
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:space-between;
    gap:1rem 1.75rem;
    margin-bottom:clamp(2rem,4vw,3.5rem);
}
.changelog-controls .changelog-tablist { margin-bottom:0; }
.changelog-detail { display:flex; align-items:center; gap:.85rem; }
.changelog-detail-label { color:var(--text-3); font:500 .68rem var(--mono); letter-spacing:.11em; text-transform:uppercase; }
.changelog-detail-switch { display:flex; align-items:center; }
.changelog-detail-option {
    padding:.25rem .6rem;
    border:0;
    background:none;
    color:var(--text-3);
    font:500 .85rem var(--font);
    cursor:pointer;
    transition:color .18s var(--ease);
}
.changelog-detail-option+.changelog-detail-option { box-shadow:inset 1px 0 0 var(--line-strong); }
.changelog-detail-option:hover { color:var(--text); }
.changelog-detail-option.is-active { color:var(--accent); }
.changelog-detail-option:focus-visible { outline:2px solid var(--accent); outline-offset:2px; border-radius:4px; }

/* The heading names which telling you are reading. Once the switch is live only
   one track is on screen at a time and the switch itself already says which, so
   the heading stands down to a quiet label. */
.release-track+.release-track { margin-top:1.6rem; padding-top:1.4rem; border-top:1px solid var(--line); }
.release-track-heading { margin:0 0 .9rem; color:var(--text-3); font:500 .68rem var(--mono); letter-spacing:.11em; text-transform:uppercase; }
[data-active-track] .release-track+.release-track { margin-top:0; padding-top:0; border-top:0; }
[data-active-track] .release-track-heading { display:none; }

.changelog-platform-view { scroll-margin-top:7rem; }
.changelog-platform-view+.changelog-platform-view { margin-top:clamp(4rem,8vw,7rem); }
.changelog-platforms.has-tabs .changelog-platform-view+.changelog-platform-view { margin-top:0; }
.changelog-platforms.has-tabs .changelog-platform-view[hidden] { display:none; }
.changelog-platform-head {
    display:flex;
    align-items:center;
    gap:1rem;
    margin-bottom:1.35rem;
    padding-bottom:1.2rem;
    border-bottom:1px solid var(--line-strong);
}
.changelog-platform-icon {
    display:grid;
    place-items:center;
    width:44px;
    height:44px;
    flex:none;
    border:1px solid var(--accent-line);
    border-radius:6px;
    background:var(--accent-dim);
    color:var(--accent);
}
.changelog-platform-icon .icon { width:21px; height:21px; }
.changelog-platform-head h2 { margin:0; font-size:clamp(1.4rem,2.5vw,2rem); letter-spacing:-.03em; }
.changelog-platform-count { margin-left:auto; color:var(--text-3); font:500 .72rem var(--mono); text-transform:uppercase; letter-spacing:.08em; }
.changelog-empty { padding:clamp(2.2rem,5vw,4rem); border:1px solid var(--line-strong); border-radius:10px; background:#0e1216; text-align:center; }
.changelog-empty>.icon { width:26px; height:26px; color:var(--accent); }
.changelog-empty h3 { margin:1rem 0 .45rem; font-size:1.15rem; }
.changelog-empty p { margin:0; color:var(--text-3); }
.release-paired-link {
    display:flex;
    align-items:center;
    gap:.65rem;
    padding:.8rem clamp(1.4rem,3vw,2.3rem);
    border-top:1px solid var(--line-strong);
    background:rgba(255,255,255,.018);
    color:var(--text-2);
    font-size:.82rem;
}
.release-paired-link>.icon { color:var(--accent); }
.release-paired-link strong { display:inline-flex; align-items:center; gap:.35rem; margin-left:auto; color:var(--accent); font:500 .72rem var(--mono); }
.release-paired-link:hover { background:var(--accent-dim); color:var(--text); }
.release-paired-link:focus-visible { outline:2px solid var(--accent); outline-offset:-3px; }

/* A release that describes the whole application, set out area by area.
   Eighteen undifferentiated bullets are a list nobody reads; the same notes
   under Performance, Graphics, Display and the rest are a feature summary. */
.release-first {
    display:flex;
    align-items:center;
    gap:.5rem;
    width:fit-content;
    margin:1.1rem 0 0;
    padding:.3rem .7rem .3rem .55rem;
    border:1px solid var(--accent-line);
    border-radius:999px;
    background:var(--accent-dim);
    font:500 .68rem var(--mono);
    letter-spacing:.1em;
    text-transform:uppercase;
    color:var(--accent);
}

.release-first-dot { width:5px; height:5px; border-radius:50%; background:var(--accent); flex:none; }

/* A numbered ledger of the application, area by area.

   Laid out in columns rather than a grid on purpose. Grid rows are as tall as
   their tallest cell, so a five-note area sitting beside two one-note areas
   left most of a row empty, and at full width the tracks grew narrow enough to
   break lines after three words. Columns let each block take exactly the height
   it needs and flow on, which balances the whole ledger with no holes in it.  */
.release-areas {
    margin-top:1.5rem;
    column-count:2;
    column-gap:clamp(1.75rem, 3.5vw, 3.5rem);
}

.release-area {
    /* Keeps a block whole rather than splitting it across a column break. */
    break-inside:avoid;
    -webkit-column-break-inside:avoid;
    page-break-inside:avoid;
    position:relative;
    padding-top:.95rem;
    margin-bottom:1.7rem;
    border-top:1px solid var(--line-strong);
}

/* A short accent segment struck over the rule, the way the section labels
   elsewhere on the site carry one. */
.release-area::before {
    content:'';
    position:absolute;
    top:-1px;
    left:0;
    width:30px;
    height:1px;
    background:var(--accent);
}

.release-area-head {
    display:flex;
    align-items:baseline;
    gap:.55rem;
    margin:0 0 .8rem;
    font-family:var(--mono);
    font-weight:500;
}

.release-area-index {
    font-size:.68rem;
    letter-spacing:.06em;
    color:var(--accent);
    flex:none;
}

.release-area-icon {
    align-self:center;
    display:grid;
    place-items:center;
    flex:none;
}

.release-area-icon .icon { width:14px; height:14px; color:var(--text-3); }

.release-area-name {
    font-size:.72rem;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:var(--text);
}

.release-platform-grid .release-areas ul {
    grid-template-columns:minmax(0, 1fr);
    gap:.55rem;
    margin:0;
    font-size:.9rem;
    line-height:1.58;
}

.release-platform-grid .release-areas li { padding-left:1rem; }
.release-platform-grid .release-areas li::before { top:.62em; width:4px; height:4px; }

@media(min-width:1340px) { .release-areas { column-count:3; } }
@media(max-width:780px)  { .release-areas { column-count:1; } }

.release-platform-empty { margin:0; color:var(--text-3); font-size:.92rem; }
.release-platform:focus-visible { outline:2px solid var(--accent); outline-offset:-4px; border-radius:8px; }

@media(max-width:620px) {
    .changelog-tablist { grid-template-columns:repeat(2,minmax(0,1fr)); gap:.45rem; width:100%; padding:.4rem; }
    .changelog-controls { gap:.9rem; }
    .changelog-detail { gap:.65rem; }
    .platform-tab { padding:.8rem .7rem; gap:.55rem; }
    .platform-tab .icon { width:17px; height:17px; }
    .platform-tab-copy small { font-size:.62rem; }
    .changelog-platform-head { align-items:flex-start; }
    .changelog-platform-count { display:none; }
    .release-paired-link { align-items:flex-start; flex-wrap:wrap; }
    .release-paired-link strong { width:100%; margin:.15rem 0 0 1.65rem; }
}

/* First-visit author notice ------------------------------------------------ */
/* An instrument bezel rather than a dialog box: hairline edges, a mono label,
   and a single accent seam along the top. The container itself never fades —
   the backdrop owns the blur and the card owns the lift, so the blur can ramp
   instead of popping and the two can settle on different curves.              */

.author-modal {
    position:fixed;
    inset:0;
    height:100vh;
    height:100dvh;
    max-height:100dvh;
    z-index:10000;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:clamp(1rem, 4vw, 3rem);
    padding-top:max(clamp(1rem, 4vw, 3rem), env(safe-area-inset-top, 0px));
    padding-bottom:max(clamp(1rem, 4vw, 3rem), env(safe-area-inset-bottom, 0px));
    /* Locking the page hides its scrollbar, which widens the viewport this
       fixed layer is measured against. Absorbing that width keeps the card
       centred on the same pixels instead of sliding across as it arrives.     */
    padding-right:calc(clamp(1rem, 4vw, 3rem) + var(--modal-lock-gutter, 0px));
    pointer-events:none;
    box-sizing:border-box;
}

.author-modal[hidden] { display:none; }
.author-modal:focus { outline:none; }
.author-modal.is-visible { pointer-events:auto; }

/* Backdrop.

   The blur radius used to be animated from 0 to 24px. Browsers do not
   interpolate backdrop-filter smoothly — each frame re-blurs everything behind
   the layer at a new radius, which is expensive enough that the compositor
   drops to a handful of coarse steps. That stepping is what read as the overlay
   arriving in jerks rather than ramping.

   The radius is now fixed and only opacity moves. One cheap, compositor-driven
   property, and the blur still appears to build because the whole filtered
   layer fades in over the sharp page beneath it.                              */
.author-modal-backdrop {
    position:absolute;
    inset:0;
    z-index:1;
    cursor:pointer;
    opacity:0;
    background:
        radial-gradient(115% 80% at 50% 0%, rgba(96, 205, 255, .10), transparent 62%),
        rgba(4, 6, 9, .66);
    backdrop-filter:blur(24px) saturate(135%);
    -webkit-backdrop-filter:blur(24px) saturate(135%);
    transition:opacity 420ms var(--ease-out);
    will-change:opacity;
}

.author-modal.is-visible .author-modal-backdrop {
    opacity:1;
}

.author-modal.is-closing .author-modal-backdrop {
    opacity:0;
    transition-duration:280ms;
}

.author-modal-dialog {
    position:relative;
    z-index:2;
    width:100%;
    max-width:640px;
    max-height:min(90vh, 920px);
    max-height:min(90dvh, 920px);
    display:flex;
    min-height:0;
}

.author-modal-card {
    position:relative;
    display:flex;
    flex-direction:column;
    width:100%;
    min-height:0;
    max-height:100%;
    overflow:hidden;
    border-radius:var(--r-lg);
    border:1px solid var(--line-strong);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .028) 0%, transparent 34%),
        linear-gradient(168deg, #14181d 0%, #0b0d11 58%, #090a0d 100%);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .06) inset,
        0 48px 120px -32px rgba(0, 0, 0, .92),
        0 0 0 1px rgba(0, 0, 0, .5),
        0 0 90px -30px rgba(96, 205, 255, .22);
    opacity:0;
    /* Rise only. A scale here would resample every glyph in the card for the
       whole transition, which reads as the text sliding around inside its own
       box rather than the card arriving.                                      */
    transform:translate3d(0, 22px, 0);
    transition:
        transform 640ms cubic-bezier(.16, 1, .3, 1),
        opacity 420ms var(--ease-out);
    will-change:transform, opacity;
}

.author-modal.is-visible .author-modal-card {
    opacity:1;
    transform:translate3d(0, 0, 0);
}

.author-modal.is-closing .author-modal-card {
    opacity:0;
    transform:translate3d(0, 8px, 0);
    transition-duration:340ms, 260ms;
    transition-timing-function:var(--ease-out), var(--ease-out);
}

/* The accent seam along the top edge, drawn short of the corners so the radius
   stays clean. It draws itself outward as the card lands.

   It used to sit at top:-1px. The card clips to its padding box, so a 1px line
   one pixel above that box is flush against the clip edge with zero overlap:
   the line never drew at all, and the only thing reaching the screen was the
   downward half of its box-shadow. That halo was then re-blurred every frame as
   scaleX ran, clipped at a boundary the box sat exactly on, at a device pixel
   ratio that does not divide evenly — which is what flickered.

   Now it sits inside the clip where it can actually render, above the card's
   top fade rather than beneath it, and on its own compositor layer so the
   scaleX scales a texture instead of re-rasterising a blur each frame.        */
.author-modal-bezel {
    position:absolute;
    top:0;
    left:50%;
    width:72%;
    height:1px;
    z-index:3;
    transform:translateX(-50%) scaleX(.2);
    transform-origin:50% 50%;
    background:linear-gradient(90deg, transparent, var(--accent) 50%, transparent);
    box-shadow:0 0 14px rgba(96, 205, 255, .5);
    opacity:0;
    pointer-events:none;
    will-change:transform, opacity;
    transition:transform 900ms cubic-bezier(.16, 1, .3, 1) 120ms, opacity 600ms var(--ease-out) 120ms;
}

.author-modal.is-visible .author-modal-bezel { opacity:.85; transform:translateX(-50%) scaleX(1); }
.author-modal.is-closing .author-modal-bezel { opacity:0; transition-delay:0s; transition-duration:200ms; }

/* Meet the fade to the card's exact outer edge so a scrolling line can never
   flash through the one-pixel border gap above it. */
.author-modal-card::after {
    content:'';
    position:absolute;
    top:0;
    left:0;
    right:0;
    height:30px;
    border-radius:var(--r-lg) var(--r-lg) 0 0;
    background:linear-gradient(180deg, #12161b 0, rgba(18, 22, 27, .94) 28%, rgba(18, 22, 27, 0) 100%);
    pointer-events:none;
    z-index:2;
}

.author-modal-glow {
    position:absolute;
    top:0;
    left:50%;
    width:min(420px, 90%);
    height:190px;
    transform:translateX(-50%);
    background:radial-gradient(ellipse at 50% 0%, rgba(96, 205, 255, .13), transparent 68%);
    border-radius:var(--r-lg) var(--r-lg) 0 0;
    pointer-events:none;
    z-index:0;
}

/* Sequenced contents. The card is already rising, so these only resolve in
   opacity — giving each block its own travel as well put the text under two
   movements at once on two different curves, and the prose appeared to drift
   while you were trying to read it. The stagger carries the sequence; nothing
   inside the card changes position. The exit collapses to a single quick fade
   so closing never feels laboured.                                            */
.author-modal [data-reveal] {
    opacity:0;
    transition:opacity 280ms var(--ease-out);
}

.author-modal.is-visible [data-reveal] { opacity:1; }

.author-modal.is-closing [data-reveal] {
    opacity:0;
    transition-duration:180ms;
}

.author-modal-close {
    position:absolute;
    top:clamp(.9rem, 2vw, 1.15rem);
    right:clamp(.9rem, 2vw, 1.15rem);
    z-index:4;
    display:grid;
    place-items:center;
    width:34px;
    height:34px;
    padding:0;
    border-radius:var(--r-sm);
    border:1px solid var(--line);
    /* Nearly opaque: the prose scrolls underneath this button, and at .03 alpha
       the text read straight through it. */
    background:rgba(12, 15, 19, .92);
    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);
    color:var(--text-3);
    cursor:pointer;
    transition:background-color var(--motion-fast) var(--ease-out), border-color var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out);
}

.author-modal-close:hover { background:var(--accent-dim); border-color:var(--accent-line); color:var(--accent); }
.author-modal-close:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.author-modal-close .icon { width:15px; height:15px; }

/* Only the prose scrolls; the button stays anchored to the card.

   scrollbar-gutter reserves the scrollbar's width whether or not a scrollbar is
   showing, and both-edges mirrors it so the prose stays centred in the card.
   Without it the bar appearing or disappearing — when the webfonts land, when
   the viewport is resized, when the content lands a line either side of the
   card's height — narrows the text column and re-wraps every paragraph.        */
.author-modal-scroll {
    position:relative;
    z-index:1;
    min-height:0;
    flex:1 1 auto;
    overflow-y:auto;
    overscroll-behavior:contain;
    scrollbar-gutter:stable both-edges;
    scrollbar-width:thin;
    scrollbar-color:var(--line-strong) transparent;
    /* Trimmed by roughly the reserved gutter, so the prose lines up with the
       button below it rather than sitting inset from it. */
    padding:clamp(1.3rem, 2.6vw, 1.8rem) clamp(1.05rem, 2.5vw, 1.8rem) 2rem;
}

.author-modal-scroll::-webkit-scrollbar { width:6px; }
.author-modal-scroll::-webkit-scrollbar-track { background:transparent; }
.author-modal-scroll::-webkit-scrollbar-thumb { background:var(--line-strong); border-radius:999px; }
.author-modal-scroll::-webkit-scrollbar-thumb:hover { background:var(--accent-line); }

.author-modal-header { margin-bottom:1.05rem; }

.author-modal-eyebrow {
    display:flex;
    align-items:center;
    gap:.6rem;
    margin:0 0 .8rem;
    font-family:var(--mono);
    font-size:.68rem;
    font-weight:500;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--accent);
}

.author-modal-eyebrow-rule {
    width:26px;
    height:1px;
    flex:none;
    background:linear-gradient(90deg, transparent, var(--accent));
}

.author-modal-mark-wrap { display:grid; place-items:center; width:14px; height:14px; flex:none; }
.author-modal-mark { width:13px; height:13px; }
.author-modal-mark .mark-a { fill:var(--accent); }
.author-modal-mark .mark-b { fill:var(--accent-deep); }

.author-modal-title {
    margin:0 0 1rem;
    font-size:clamp(1.7rem, 3.1vw, 2.2rem);
    font-weight:600;
    letter-spacing:-.032em;
    line-height:1.08;
    color:var(--text);
    text-wrap:balance;
}

.author-modal-body { color:var(--text-2); font-size:.94rem; line-height:1.62; }
.author-modal-body p { margin:0 0 .8rem; }

/* The lead carries the accent rule the section labels elsewhere use. */
.author-modal-lead {
    position:relative;
    padding-left:1.05rem;
    color:var(--text);
    font-size:1.03rem;
    font-weight:400;
    line-height:1.58;
    letter-spacing:-.008em;
}

.author-modal-lead::before {
    content:'';
    position:absolute;
    left:0;
    top:.35em;
    bottom:.35em;
    width:2px;
    border-radius:2px;
    background:linear-gradient(180deg, var(--accent), rgba(96, 205, 255, .06));
}

/* The credit to G-Helper. Set apart from the letter as its own inset panel, so
   it reads as an acknowledgement rather than another paragraph of mine.       */
.author-modal-thanks {
    margin-top:.15rem;
    padding:.75rem .9rem .8rem;
    border:1px solid var(--line);
    border-left:2px solid var(--accent-line);
    border-radius:var(--r-sm);
    background:rgba(255, 255, 255, .022);
}

.author-modal-thanks-label {
    display:block;
    margin-bottom:.35rem;
    font-family:var(--mono);
    font-size:.62rem;
    font-weight:500;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--text-3);
}

.author-modal-thanks p {
    margin:0;
    color:var(--text-2);
    font-size:.86rem;
    line-height:1.6;
}

.author-modal-thanks strong { color:var(--text); font-weight:600; }

.author-modal-thanks a {
    color:#8edcff;
    text-decoration:underline;
    text-decoration-color:var(--accent-line);
    text-underline-offset:2px;
    transition:text-decoration-color var(--motion-fast) var(--ease-out);
}

.author-modal-thanks a:hover { text-decoration-color:var(--accent); }
.author-modal-thanks a:focus-visible { outline:2px solid var(--accent); outline-offset:2px; border-radius:2px; }

.author-modal-signature {
    display:flex;
    flex-direction:column;
    gap:.12rem;
    padding:.85rem 0 .45rem;
    margin-top:.4rem;
    border-top:1px solid var(--line);
}

.signature-line { font-size:.85rem; font-style:italic; color:var(--text-3); }
.signature-name { font-size:1.05rem; font-weight:600; letter-spacing:-.015em; color:#fff; }
.signature-role {
    margin-top:.25rem;
    font-family:var(--mono);
    font-size:.66rem;
    letter-spacing:.09em;
    text-transform:uppercase;
    color:var(--accent);
}

.author-modal-footer {
    position:relative;
    z-index:1;
    flex:0 0 auto;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:.8rem;
    padding:clamp(1rem, 2.2vw, 1.25rem) clamp(1.4rem, 3.2vw, 2.4rem) clamp(1.15rem, 2.4vw, 1.4rem);
    border-top:1px solid var(--line);
    background:linear-gradient(180deg, rgba(255, 255, 255, .014), transparent);
}

/* Keep the footer edge crisp. The scroll area's bottom padding now provides
   the breathing room that this overlay used to obscure. */
.author-modal-footer::before {
    content:none;
}

.author-modal-btn {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:.6rem;
    width:100%;
    /* Matches .button exactly; only the full width sets it apart. */
    padding:.72rem 1.25rem;
    border:1px solid transparent;
    border-radius:var(--r-md);
    background:linear-gradient(180deg, #7ad7ff, var(--accent) 62%, #4bbdf4);
    color:#04121c;
    font:inherit;
    font-size:.95rem;
    font-weight:600;
    cursor:pointer;
    box-shadow:0 10px 30px -14px rgba(96, 205, 255, .85);
    transition:filter var(--motion-fast) var(--ease-out), transform var(--motion-fast) var(--ease-out), box-shadow var(--motion-fast) var(--ease-out);
}

.author-modal-btn:hover { filter:brightness(1.06); transform:translateY(-1px); box-shadow:0 16px 38px -14px rgba(96, 205, 255, .95); }
.author-modal-btn:active { transform:translateY(0); }
.author-modal-btn:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.author-modal-btn .icon { width:17px; height:17px; transition:transform var(--motion-base) var(--ease-out); }
.author-modal-btn:hover .icon { transform:translateX(4px); }

@media(max-width:620px) {
    .author-modal {
        padding:max(.75rem, env(safe-area-inset-top, 0px)) max(.75rem, env(safe-area-inset-right, 0px)) max(.75rem, env(safe-area-inset-bottom, 0px)) max(.75rem, env(safe-area-inset-left, 0px));
        padding-right:calc(max(.75rem, env(safe-area-inset-right, 0px)) + var(--modal-lock-gutter, 0px));
        align-items:center;
        height:100vh;
        height:100dvh;
        max-height:100dvh;
    }
    .author-modal-dialog {
        max-height:calc(100vh - 1.5rem);
        max-height:calc(100dvh - 1.5rem);
        margin:auto 0;
    }
    .author-modal-card {
        max-height:calc(100vh - 1.5rem);
        max-height:calc(100dvh - 1.5rem);
        border-radius:var(--r-md);
    }
    .author-modal-title { font-size:1.55rem; margin-bottom:1rem; }
    .author-modal-header { margin-bottom:1.25rem; }
    .author-modal-body { font-size:.9rem; line-height:1.66; }
    .author-modal-lead { font-size:.96rem; }
    .author-modal-glow { height:140px; }
    /* Phones ran the longest timings on the least capable compositor: close to a
       second for the card and over one for the seam, on top of a backdrop that
       was stepping rather than ramping. Long is not the same as smooth. These
       are roughly two-thirds of the old values, which is quick enough to feel
       answered and still slow enough to read as motion. */
    .author-modal-backdrop {
        transition-duration:380ms;
    }
    .author-modal-card {
        transition-duration:520ms, 300ms;
    }
    .author-modal-bezel {
        transition-duration:640ms, 440ms;
    }
    .author-modal.is-closing .author-modal-backdrop {
        transition-duration:240ms;
    }
    .author-modal.is-closing .author-modal-card {
        transition-duration:320ms, 220ms;
    }
}

/* The standing bar that reopens the notice ---------------------------------- */
/* Same material as the header, mirrored to the foot of the window. The body
   reserves its height, so a fixed bar never sits on top of a page's last line. */

.author-bar {
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    z-index:90;
    border-top:1px solid var(--line-strong);
    background:rgba(8, 9, 11, .82);
    backdrop-filter:blur(18px) saturate(140%);
    -webkit-backdrop-filter:blur(18px) saturate(140%);
    box-shadow:0 -14px 40px rgba(0, 0, 0, .3);
    transform:translate3d(0, 100%, 0);
    opacity:0;
    transition:transform 560ms cubic-bezier(.16, 1, .3, 1), opacity 320ms var(--ease-out);
}

.author-bar[hidden] { display:none; }
.author-bar.is-visible { transform:translate3d(0, 0, 0); opacity:1; }

/* The bar stays where it is while the notice is open, the same way the header
   does, and is dimmed and blurred by the backdrop rather than sliding away.
   It needs the header's scrollbar-gutter compensation for the same reason:
   locking the page reclaims that width, and a bar pinned to right:0 would
   stretch into it as the notice arrives. */
html.has-modal-lock .author-bar {
    right:var(--modal-lock-gutter, 0px);
}

html.has-author-bar body { padding-bottom:var(--author-bar-height, 56px); }

.author-bar-inner {
    width: 100%;
    max-width: var(--shell);
    margin-inline: auto;
    padding-inline: clamp(24px, 4vw, 72px);
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1.5rem;
    min-height:56px;
    padding-block:.6rem;
}
@media(max-width:620px) {
    .author-bar-inner { padding-inline: 20px; }
}

/* One line of type, in two colours.

   The label and the sentence used to be set differently: uppercase mono at
   .66rem beside sentence-case Inter at .88rem. Two sizes, two families and two
   cap heights sitting side by side never settle onto a shared baseline, which
   is what made the bar read as two mismatched fragments. They now share the
   family, the size and the line height declared here, and inherit all three,
   so only colour separates them.                                             */
.author-bar-text {
    display:flex;
    align-items:center;
    gap:.7rem;
    margin:0;
    min-width:0;
    font-size:.85rem;
    line-height:1.45;
}

.author-bar-label {
    display:inline-flex;
    align-items:center;
    gap:.45rem;
    flex:none;
    font-size:inherit;
    line-height:inherit;
    font-weight:500;
    color:var(--accent);
    white-space:nowrap;
}

.author-bar-mark { display:grid; place-items:center; width:14px; height:14px; flex:none; }

.author-bar-sep { width:1px; height:1.05em; flex:none; background:var(--line-strong); }

.author-bar-short,
.author-bar-short-xs {
    min-width:0;
    color:var(--text-2);
    font-size:inherit;
    line-height:inherit;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

/* The narrow phrasing only exists below 560px, where the full one wraps to
   three lines and pushes the bar to the height of a second header. */
.author-bar-short-xs { display:none; }

.author-bar-btn {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:.5rem;
    flex:none;
    margin-left:auto;
    padding:.5rem .95rem;
    border:1px solid var(--accent-line);
    border-radius:var(--r-md);
    background:var(--accent-dim);
    color:var(--accent);
    font:inherit;
    font-size:.85rem;
    font-weight:500;
    cursor:pointer;
    white-space:nowrap;
    transition:background-color var(--motion-fast) var(--ease-out), border-color var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out);
}

.author-bar-btn:hover { background:var(--accent); border-color:var(--accent); color:#04121c; }
.author-bar-btn:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.author-bar-btn .icon { width:15px; height:15px; transition:transform var(--motion-base) var(--ease-out); }
.author-bar-btn:hover .icon { transform:translateX(3px); }

@media(max-width:860px) {
    .author-bar-inner { gap:1rem; }
    .author-bar-label,
    .author-bar-sep { display:none; }
}

@media(max-width:560px) {
    .author-bar-short { display:none; }
    .author-bar-short-xs { display:inline; white-space:normal; font-size:.82rem; line-height:1.4; }
    .author-bar-inner { gap:.75rem; }
    .author-bar-btn { padding:.45rem .8rem; font-size:.8rem; }
    .author-bar-btn .icon { width:14px; height:14px; }
}

/* No motion: present and dismiss the notice outright. */
@media(prefers-reduced-motion:reduce) {
    .author-modal-backdrop,
    .author-modal-card,
    .author-modal-bezel,
    .author-modal [data-reveal],
    .author-bar {
        transition:opacity 120ms linear !important;
        transform:none !important;
    }
    .author-modal-bezel,
    .author-modal.is-visible .author-modal-bezel { transform:translateX(-50%) !important; }
    .author-modal.is-visible .author-modal-backdrop {
        backdrop-filter:blur(24px) saturate(135%);
        -webkit-backdrop-filter:blur(24px) saturate(135%);
    }
}

/* Keyboard preview --------------------------------------------------------- */
/* The card the application's Lighting page opens with: the brightness selector,
   the board itself, and the two switches that correct its shape.              */
.app-keyboard-head { display:flex; align-items:center; gap:10px; }
.app-keyboard-head .app-segment { margin-left:auto; }
.app-keyboard-well {
    margin-top:14px; padding:10px; border-radius:8px;
    background:#131415; border:1px solid #ffffff1a;
}
.app-keyboard-layout {
    display:flex; align-items:center; flex-wrap:wrap; gap:8px 18px; margin-top:12px;
}
.app-keyboard-switch {
    display:inline-flex; align-items:center; gap:8px;
    font-size:11.5px; color:#b6b8ba; white-space:nowrap;
}
.app-keyboard-workspace { display:grid; grid-template-columns:minmax(0,1fr) 188px; gap:16px; align-items:start; }
.app-keyboard-preview-column { min-width:0; }
.app-keyboard-layout>.app-row-desc { flex-basis:100%; }
.app-keyboard-switch { border:1px solid rgba(255,255,255,.1); border-radius:6px; padding:7px; background:rgba(255,255,255,.025); }
.app-keyboard-picker { padding-top:14px; min-width:0; }
.app-keyboard-spectrum { height:142px; border:1px solid rgba(255,255,255,.18); border-radius:6px; background:linear-gradient(0deg,#050607,transparent),linear-gradient(90deg,#fff,#ff1744); }
.app-keyboard-hue { height:9px; margin:10px 0; border-radius:99px; background:linear-gradient(90deg,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00); }
.app-keyboard-colour-value { display:flex; align-items:center; gap:9px; margin:13px 0; }
.app-keyboard-colour-value i { width:34px; height:34px; flex:none; border:1px solid rgba(255,255,255,.2); border-radius:5px; background:#ff3b80; }
.app-keyboard-colour-value strong,.app-keyboard-colour-value small { display:block; }.app-keyboard-colour-value strong { font:600 12px var(--mono); }.app-keyboard-colour-value small,.app-keyboard-picker>small { color:#99a3a9; font-size:10px; }
.app-keyboard-presets { display:flex; gap:6px; margin:7px 0 13px; }.app-keyboard-presets i { width:18px; height:18px; border:2px solid #272b2d; border-radius:50%; background:#ff3b30; }.app-keyboard-presets i:nth-child(2) { background:#ff9f0a; }.app-keyboard-presets i:nth-child(3) { background:#32d74b; }.app-keyboard-presets i:nth-child(4) { background:#0a84ff; }.app-keyboard-presets i:nth-child(5) { background:#bf5af2; }.app-keyboard-presets i:nth-child(6) { background:#fff; }
.app-keyboard-apply { display:inline-flex; align-items:center; gap:5px; padding:6px 9px; border:1px solid #8bcbb3; border-radius:5px; color:#b3efd7; font-size:10px; }

/* Licence page package list.
   Plain, tight and unbulleted: it is a reference list inside a card, not prose, and
   the names in it are long unbreakable tokens that must be allowed to wrap mid-word
   rather than pushing the page sideways on a narrow screen. */
.license-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .3rem;
    font-size: .875rem;
    color: var(--text-2);
}

.license-list li {
    overflow-wrap: anywhere;
}

/* Appearance guide: identical controls reveal the two template treatments. */
.theme-compare { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:1.8rem 0 .7rem; }
.theme-compare-column { min-width:0; }
.theme-compare-label { display:flex; justify-content:space-between; gap:12px; margin-bottom:9px; color:var(--text); font:600 .78rem var(--mono); letter-spacing:.02em; }
.theme-compare-label span:last-child { color:var(--text-3); font-weight:400; }
.theme-compare-window { min-height:365px; overflow:hidden; border-radius:10px; background:#1b1d21; color:#f0f1f4; box-shadow:0 16px 40px rgba(0,0,0,.18); font-family:var(--font); }
.theme-compare-standard { border:1px solid #45484e; }
.theme-compare-arsenal { border:1px solid #397d78; background:radial-gradient(ellipse at 75% 0%,#183832 0%,#141d1f 46%,#101719 100%); box-shadow:0 16px 40px rgba(0,0,0,.2),0 0 0 1px rgba(81,215,173,.12); }
.theme-compare-titlebar { display:flex; align-items:center; gap:8px; height:38px; padding:0 12px; border-bottom:1px solid rgba(255,255,255,.09); font-size:11px; }
.theme-compare-mark { display:grid; place-items:center; width:17px; height:17px; border:1px solid currentColor; border-radius:4px; font:700 11px var(--mono); }
.theme-compare-arsenal .theme-compare-mark { color:#65d5b1; }
.theme-compare-window-controls { margin-left:auto; color:#a4abb0; font-size:14px; white-space:nowrap; }
.theme-compare-body { padding:16px 12px 18px; }
.theme-compare-path { color:#8a949b; font:10px var(--mono); }
.theme-compare-path span { padding:0 4px; }
.theme-compare-arsenal .theme-compare-path { color:#71cbae; }
.theme-compare-heading { display:flex; flex-direction:column; gap:3px; margin:12px 0 14px; }
.theme-compare-heading>span { font-size:18px; font-weight:650; line-height:1.2; }
.theme-compare-heading small { color:#9da7ac; font-size:10px; line-height:1.4; }
.theme-compare-group { border:1px solid #3c4147; border-radius:8px; background:#25282d; overflow:hidden; }
.theme-compare-arsenal .theme-compare-group { border-color:#416c66; border-radius:6px; background:rgba(30,52,51,.65); box-shadow:inset 0 1px rgba(141,243,207,.07); }
.theme-compare-row { display:flex; flex-direction:column; align-items:stretch; gap:10px; min-width:0; padding:12px; border-top:1px solid rgba(255,255,255,.1); }
.theme-compare-row:first-child { border-top:0; }
.theme-compare-arsenal .theme-compare-row { position:relative; padding-left:15px; border-color:rgba(134,225,193,.14); }
.theme-compare-arsenal .theme-compare-row-active::before { content:''; position:absolute; top:11px; bottom:11px; left:0; width:3px; background:#65d5b1; box-shadow:0 0 12px rgba(101,213,177,.6); }
.theme-compare-row-copy { display:flex; flex-direction:column; gap:2px; min-width:0; }
.theme-compare-row-copy strong { color:#eef3f2; font-size:11px; font-weight:600; }
.theme-compare-row-copy small { color:#a5afb1; font-size:9px; line-height:1.35; }
.theme-compare-choices { display:flex; flex-wrap:wrap; gap:3px; }
.theme-compare-choices span { padding:5px 6px; border:1px solid #555b60; border-radius:4px; color:#d6dcdf; font-size:9px; line-height:1; }
.theme-compare-standard .theme-compare-choices .is-selected { border-color:#78b9e8; background:#3d7297; color:#fff; }
.theme-compare-arsenal .theme-compare-choices span { border-color:#5fbe9f; color:#b5ecd8; background:transparent; }
.theme-compare-arsenal .theme-compare-choices .is-selected { border-color:#88ebc7; background:#278567; color:#fff; box-shadow:inset 3px 0 #bcf6df,0 0 11px rgba(92,221,174,.2); }
.theme-compare-switch { width:28px; height:16px; padding:2px; border:1px solid #788389; border-radius:99px; background:#42494d; }
.theme-compare-switch i { display:block; width:10px; height:10px; border-radius:50%; background:#d6dcdf; }
.theme-compare-arsenal .theme-compare-switch { border-color:#64b99c; background:#263f3c; }
@media(max-width:620px) { .theme-compare { grid-template-columns:1fr; gap:24px; } .theme-compare-window { min-height:0; } .theme-compare-body { padding:18px; } }

/* Stable Windows controls captured from the WPF Appearance, Battery, Mobile
   companion, Charge limit and Lighting sections. */
.stable-capture { margin:0; line-height:0; overflow:hidden; background:#151a1f; }
.stable-capture img { display:block; width:100%; height:auto; }
.theme-captures { display:grid; gap:1.3rem; margin:1.8rem 0 .8rem; }
.theme-captures-item { min-width:0; }
.theme-captures-label { display:flex; justify-content:space-between; align-items:baseline; gap:1rem; margin-bottom:.55rem; color:var(--text); font-size:.88rem; }
.theme-captures-label span { color:var(--text-3); font:.68rem var(--mono); text-transform:uppercase; letter-spacing:.08em; }
.theme-captures-image { display:block; overflow:hidden; background:#151a1f; box-shadow:0 16px 38px rgba(0,0,0,.18); }
.theme-captures-image img { display:block; width:100%; height:auto; }
.theme-captures-image:focus-visible { outline:2px solid var(--accent); outline-offset:4px; }
@media (max-width:760px) {
    .theme-captures-image { overflow-x:auto; overscroll-behavior-inline:contain; }
    .theme-captures-image img { width:760px; max-width:none; }
}