/* ==========================================================================
   Home Screen (מסך בית) — main stylesheet
   Concept: everyday tech help, framed as calm app windows on a dotted
   "desktop". RTL-first, logical properties throughout. Prefix: ms-
   ========================================================================== */

/* Fonts (self-hosted, per-subset) ----------------------------------------- */
@font-face { font-family: "Noto Sans Hebrew"; src: url(../fonts/noto-hebrew.woff2) format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; }
@font-face { font-family: "Noto Sans Hebrew"; src: url(../fonts/noto-latin.woff2) format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Rubik"; src: url(../fonts/rubik-hebrew.woff2) format("woff2"); font-weight: 300 900; font-display: swap; unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; }
@font-face { font-family: "Rubik"; src: url(../fonts/rubik-latin.woff2) format("woff2"); font-weight: 300 900; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Secular One"; src: url(../fonts/secular-hebrew.woff2) format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; }
@font-face { font-family: "Secular One"; src: url(../fonts/secular-latin.woff2) format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* Tokens ------------------------------------------------------------------ */
:root {
    --ms-primary: #22577A;
    --ms-primary-700: #1A4562;
    --ms-primary-900: #0F2A3C;
    --ms-teal: #38A3A5;
    --ms-teal-ink: #1C6C6E;
    --ms-teal-50: #E4F3F3;
    --ms-blue-50: #E6EEF5;
    --ms-coral: #E4705A;
    --ms-coral-ink: #A9402B;
    --ms-coral-50: #FBEAE6;
    --ms-amber: #E6AE45;
    --ms-amber-ink: #7E5A10;
    --ms-amber-50: #FAF1DE;

    --ms-bg: #F1F5F7;
    --ms-dot: #D3DEE5;
    --ms-surface: #FFFFFF;
    --ms-bar: #EBF1F4;
    --ms-line: #D6E0E6;
    --ms-ink: #132A3A;
    --ms-ink-2: #4A5F6E;
    --ms-link: #22577A;
    --ms-focus: #1C6C6E;
    --ms-shadow: 0 1px 2px rgb(15 42 60 / .05), 0 10px 28px -14px rgb(15 42 60 / .22);
    --ms-shadow-up: 0 2px 4px rgb(15 42 60 / .06), 0 18px 36px -16px rgb(15 42 60 / .30);

    --ms-mark-roof: #38A3A5;
    --ms-mark-body: #22577A;
    --ms-mark-tile: #FFFFFF;

    --ms-r: 14px;
    --ms-r-sm: 9px;
    --ms-font: "Noto Sans Hebrew", "Segoe UI", Arial, sans-serif;
    --ms-head: "Rubik", "Noto Sans Hebrew", "Segoe UI", Arial, sans-serif;
    --ms-logo: "Secular One", "Rubik", sans-serif;
    --ms-wrap: 1200px;
    --ms-measure: 46rem;
    color-scheme: light;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-mode="light"]) {
        --ms-teal-ink: #6FCDCE;
        --ms-teal-50: #12343A;
        --ms-blue-50: #172F40;
        --ms-coral-ink: #F29A87;
        --ms-coral-50: #3A2220;
        --ms-amber-ink: #EBC27A;
        --ms-amber-50: #352B17;
        --ms-bg: #0B171F;
        --ms-dot: #1B2D38;
        --ms-surface: #12222D;
        --ms-bar: #182C38;
        --ms-line: #24404F;
        --ms-ink: #E4EEF2;
        --ms-ink-2: #A3B6C2;
        --ms-link: #7FCFD0;
        --ms-focus: #7FCFD0;
        --ms-shadow: 0 1px 2px rgb(0 0 0 / .3), 0 12px 30px -16px rgb(0 0 0 / .7);
        --ms-shadow-up: 0 2px 4px rgb(0 0 0 / .35), 0 18px 36px -16px rgb(0 0 0 / .8);
        --ms-mark-body: #3D84B0;
        color-scheme: dark;
    }
}
:root[data-mode="dark"] {
    --ms-teal-ink: #6FCDCE;
    --ms-teal-50: #12343A;
    --ms-blue-50: #172F40;
    --ms-coral-ink: #F29A87;
    --ms-coral-50: #3A2220;
    --ms-amber-ink: #EBC27A;
    --ms-amber-50: #352B17;
    --ms-bg: #0B171F;
    --ms-dot: #1B2D38;
    --ms-surface: #12222D;
    --ms-bar: #182C38;
    --ms-line: #24404F;
    --ms-ink: #E4EEF2;
    --ms-ink-2: #A3B6C2;
    --ms-link: #7FCFD0;
    --ms-focus: #7FCFD0;
    --ms-shadow: 0 1px 2px rgb(0 0 0 / .3), 0 12px 30px -16px rgb(0 0 0 / .7);
    --ms-shadow-up: 0 2px 4px rgb(0 0 0 / .35), 0 18px 36px -16px rgb(0 0 0 / .8);
    --ms-mark-body: #3D84B0;
    color-scheme: dark;
}

/* Base -------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 88px; }
body {
    margin: 0;
    font-family: var(--ms-font);
    font-size: 1.0625rem;
    line-height: 1.75;
    color: var(--ms-ink);
    background-color: var(--ms-bg);
    /* The "desktop": a quiet dot grid behind every window. */
    background-image: radial-gradient(var(--ms-dot) 1.1px, transparent 1.3px);
    background-size: 22px 22px;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; height: auto; }
img { display: block; }
a { color: var(--ms-link); text-underline-offset: .2em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
h1, h2, h3, h4 { font-family: var(--ms-head); line-height: 1.25; color: var(--ms-ink); margin: 0; font-weight: 600; letter-spacing: -.005em; }
p { margin: 0 0 1em; }
:focus-visible { outline: 3px solid var(--ms-focus); outline-offset: 2px; border-radius: 4px; }
.ms-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.ms-ico { flex: none; display: inline-block; vertical-align: middle; }
.ms-main { display: block; outline: none; padding-block-end: 72px; }
.ms-skip {
    position: absolute; inset-inline-start: 12px; top: -60px; z-index: 100;
    background: var(--ms-primary); color: #fff; padding: 10px 16px; border-radius: var(--ms-r-sm);
    font-weight: 600; text-decoration: none; transition: top .15s;
}
.ms-skip:focus { top: 12px; }

.ms-wrap { max-width: var(--ms-wrap); margin-inline: auto; padding-inline: 20px; }
.ms-col { max-width: calc(var(--ms-measure) + 40px); margin-inline: auto; padding-inline: 20px; }
.ms-col--wide { max-width: calc(56rem + 40px); }
.ms-col--list { max-width: calc(54rem + 40px); }

/* Window chrome — the shared signature ----------------------------------- */
.ms-win {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--ms-surface);
    border: 1px solid var(--ms-line);
    border-radius: var(--ms-r);
    box-shadow: var(--ms-shadow);
    overflow: hidden;
}
.ms-win__bar {
    display: flex; align-items: center; gap: 12px;
    min-height: 36px; padding-inline: 14px;
    background: var(--ms-bar);
    border-block-end: 1px solid var(--ms-line);
    font-size: .8125rem; line-height: 1.3; color: var(--ms-ink-2);
}
.ms-dots { display: inline-flex; gap: 6px; flex: none; }
.ms-dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--ms-coral); }
.ms-dots i:nth-child(2) { background: var(--ms-amber); }
.ms-dots i:nth-child(3) { background: var(--ms-teal); }
.ms-win__label { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ms-app__count { margin-inline-start: auto; font-size: .78rem; font-weight: 600; color: var(--ms-ink-2); white-space: nowrap; }

/* Chips + meta */
.ms-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 12px; border-radius: 99px;
    background: var(--ms-teal-50); color: var(--ms-teal-ink);
    font-size: .8125rem; font-weight: 600; text-decoration: none; line-height: 1.5;
}
.ms-chip:hover { text-decoration: underline; }
.ms-meta { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: .8125rem; color: var(--ms-ink-2); }
.ms-meta__sep { opacity: .7; }

/* Header ------------------------------------------------------------------ */
.ms-top {
    position: sticky; top: 0; z-index: 50;
    background: color-mix(in srgb, var(--ms-surface) 92%, transparent);
    backdrop-filter: saturate(1.4) blur(10px);
    border-block-end: 1px solid var(--ms-line);
}
.ms-top__in {
    max-width: var(--ms-wrap); margin-inline: auto; padding-inline: 20px;
    display: flex; align-items: center; gap: 18px; min-height: 68px;
}
.ms-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ms-ink); flex: none; }
.ms-brand__name { font-family: var(--ms-logo); font-size: 1.6rem; line-height: 1; letter-spacing: -.01em; }
.ms-brand:hover { text-decoration: none; }
.ms-nav { display: flex; align-items: center; gap: 4px; margin-inline-start: auto; }
.ms-nav__list { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; }
.ms-nav__list a, .ms-nav__all {
    display: inline-flex; align-items: center; gap: 6px;
    min-height: 40px; padding: 6px 11px; border-radius: 10px;
    color: var(--ms-ink); text-decoration: none; font-size: .9rem; font-weight: 500; white-space: nowrap;
}
.ms-nav__list a:hover, .ms-nav__list .current-menu-item > a, .ms-nav__list .current-category-ancestor > a { background: var(--ms-bar); }
.ms-nav__list .current-menu-item > a { color: var(--ms-teal-ink); }
.ms-nav__all { background: var(--ms-primary); color: #fff; margin-inline-start: 6px; }
.ms-nav__all:hover { background: var(--ms-primary-700); }
.ms-top__tools { display: flex; align-items: center; gap: 4px; }
.ms-tool {
    display: inline-grid; place-items: center; width: 42px; height: 42px; padding: 0;
    border: 1px solid transparent; border-radius: 11px; background: transparent; color: var(--ms-ink); cursor: pointer;
}
.ms-tool:hover { background: var(--ms-bar); border-color: var(--ms-line); }
.ms-tool[aria-expanded="true"] { background: var(--ms-teal-50); color: var(--ms-teal-ink); }
.ms-tool__light, .ms-tool__close { display: none; }
[data-mode="dark"] .ms-tool__light { display: inline; }
[data-mode="dark"] .ms-tool__dark { display: none; }
@media (prefers-color-scheme: dark) {
    :root:not([data-mode="light"]) .ms-tool__light { display: inline; }
    :root:not([data-mode="light"]) .ms-tool__dark { display: none; }
}
.ms-tool--menu { display: none; }
.ms-tool--menu[aria-expanded="true"] .ms-tool__open { display: none; }
.ms-tool--menu[aria-expanded="true"] .ms-tool__close { display: inline; }
.ms-search { border-block-start: 1px solid var(--ms-line); background: var(--ms-surface); }
.ms-search__in { max-width: 680px; margin-inline: auto; padding: 16px 20px 18px; }

@media (max-width: 1239px) {
    .ms-tool--menu { display: inline-grid; }
    .ms-top__tools { margin-inline-start: auto; }
    .ms-nav {
        display: none; position: absolute; inset-inline: 0; top: 100%;
        flex-direction: column; align-items: stretch; gap: 0;
        background: var(--ms-surface); border-block-end: 1px solid var(--ms-line);
        box-shadow: var(--ms-shadow); padding: 10px 20px 18px; margin: 0;
        max-height: calc(100vh - 68px); overflow-y: auto;
    }
    .ms-nav.is-open { display: flex; }
    .ms-nav__list { flex-direction: column; align-items: stretch; }
    .ms-nav__list a { min-height: 46px; font-size: 1rem; border-radius: 10px; }
    .ms-nav__all { justify-content: center; margin: 10px 0 0; min-height: 46px; }
}

/* Search form ------------------------------------------------------------- */
.ms-sform {
    display: flex; align-items: center; gap: 8px;
    background: var(--ms-surface); border: 1.5px solid var(--ms-line); border-radius: 12px;
    padding: 5px; padding-inline-start: 14px;
}
.ms-sform:focus-within { border-color: var(--ms-teal); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ms-teal) 22%, transparent); }
.ms-sform__ico { color: var(--ms-ink-2); display: inline-flex; }
.ms-sform__input {
    flex: 1; min-width: 0; border: 0; background: transparent; color: var(--ms-ink);
    font: inherit; font-size: 1rem; padding: 8px 4px; outline: none;
}
.ms-sform__input::placeholder { color: var(--ms-ink-2); opacity: .85; }
.ms-sform__btn {
    flex: none; border: 0; border-radius: 9px; background: var(--ms-primary); color: #fff;
    font: inherit; font-weight: 600; font-size: .95rem; padding: 9px 18px; min-height: 42px; cursor: pointer;
}
.ms-sform__btn:hover { background: var(--ms-primary-700); }

/* Homepage bento ---------------------------------------------------------- */
.ms-home { padding-block-start: 32px; }
.ms-bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 20px; }
.ms-hero { grid-column: span 8; }
.ms-lead { grid-column: span 4; }
.ms-hero__body { padding: clamp(24px, 4vw, 48px); padding-block-end: clamp(24px, 3vw, 36px); display: flex; flex-direction: column; flex: 1; justify-content: center; }
.ms-hero__kicker { font-family: var(--ms-head); font-weight: 600; color: var(--ms-teal-ink); font-size: .95rem; margin-block-end: 12px; }
.ms-hero__kicker::after {
    content: ""; display: inline-block; width: .55em; height: 1.05em; margin-inline-start: 6px; vertical-align: -.15em;
    background: var(--ms-teal); border-radius: 2px; animation: ms-caret 1.1s steps(1) infinite;
}
@keyframes ms-caret { 50% { opacity: 0; } }
.ms-hero__title { font-size: clamp(1.85rem, 1.1rem + 2.6vw, 3.05rem); font-weight: 700; line-height: 1.15; max-width: 18em; text-wrap: balance; }
.ms-hero__lead { font-size: 1.125rem; color: var(--ms-ink-2); max-width: 36em; margin-block: 18px 26px; }
.ms-hero .ms-sform { max-width: 560px; }
.ms-hero__stats { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; padding: 0; margin: 22px 0 0; }
.ms-hero__stats li {
    display: inline-flex; align-items: baseline; gap: 6px; padding: 6px 14px; border-radius: 99px;
    background: var(--ms-bar); border: 1px solid var(--ms-line); font-size: .875rem; color: var(--ms-ink-2);
}
.ms-hero__stats strong { font-family: var(--ms-head); font-size: 1.05rem; color: var(--ms-ink); }

.ms-lead__media { display: block; flex: 1 1 auto; min-height: 240px; overflow: hidden; background: var(--ms-bar); }
.ms-lead__text { flex: none !important; }
.ms-lead__media img, .ms-app__media img, .ms-card__media img, .ms-figure img { width: 100%; height: 100%; object-fit: cover; }
.ms-lead__text { padding: 18px 22px 22px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; flex: 1; }
.ms-lead__title { font-size: 1.3rem; line-height: 1.3; }
.ms-lead__title a { color: var(--ms-ink); text-decoration: none; }
.ms-lead__title a::after { content: ""; position: absolute; inset: 0; }
.ms-lead:hover .ms-lead__title a { text-decoration: underline; }

/* Section heads */
.ms-block { margin-block-start: clamp(48px, 7vw, 80px); }
.ms-shead { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 4px 20px; margin-block-end: 22px; }
.ms-shead__kicker { flex-basis: 100%; margin: 0; font-size: .85rem; font-weight: 600; color: var(--ms-teal-ink); display: flex; align-items: center; gap: 8px; }
.ms-shead__kicker::before { content: ""; width: 22px; height: 3px; border-radius: 3px; background: var(--ms-teal); }
.ms-shead__title { font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2rem); font-weight: 700; }
.ms-shead__more { margin-inline-start: auto; display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: .95rem; text-decoration: none; min-height: 40px; }
.ms-shead__more:hover { text-decoration: underline; }

/* Topic "apps" */
.ms-bento--apps { grid-auto-flow: dense; }
.ms-app { transition: transform .18s ease, box-shadow .18s ease; }
.ms-app:hover, .ms-app:focus-within { transform: translateY(-3px); box-shadow: var(--ms-shadow-up); }
.ms-app--sm { grid-column: span 3; }
.ms-app--md { grid-column: span 4; grid-row: span 2; }
.ms-app--lg { grid-column: span 6; grid-row: span 2; }
.ms-app__body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.ms-app__icon {
    display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; flex: none;
    background: var(--ms-teal-50); color: var(--ms-teal-ink);
}
.ms-app__icon--lg { width: 60px; height: 60px; border-radius: 16px; }
.ms-tone-1 .ms-app__icon { background: var(--ms-blue-50); color: var(--ms-link); }
.ms-tone-2 .ms-app__icon { background: var(--ms-coral-50); color: var(--ms-coral-ink); }
.ms-tone-3 .ms-app__icon { background: var(--ms-amber-50); color: var(--ms-amber-ink); }
.ms-app__title { font-size: 1.12rem; font-weight: 600; }
.ms-app__title a { color: var(--ms-ink); text-decoration: none; }
.ms-app__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.ms-app:hover .ms-app__title a { color: var(--ms-link); }
.ms-app__lead { margin: 0; font-size: .9rem; line-height: 1.6; color: var(--ms-ink-2); }
.ms-app--sm .ms-app__body { flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: 12px; }
.ms-app--sm .ms-app__title { flex: 1; min-width: 0; }
.ms-app--sm .ms-app__lead { flex-basis: 100%; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ms-app__media { aspect-ratio: 16 / 9; overflow: hidden; background: var(--ms-bar); }
.ms-app--lg { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto 1fr; }
.ms-app--lg > .ms-win__bar { grid-column: 1 / -1; }
.ms-app--lg .ms-app__media { aspect-ratio: auto; grid-column: 2; grid-row: 2; min-height: 100%; }
.ms-app--lg .ms-app__body { grid-column: 1; grid-row: 2; padding: 24px; justify-content: flex-end; }
.ms-app--lg .ms-app__title { font-size: 1.5rem; font-weight: 700; }
.ms-app--lg .ms-app__lead { font-size: .98rem; }
.ms-app__newest { margin: 6px 0 0; font-size: .85rem; color: var(--ms-ink); padding-block-start: 12px; border-block-start: 1px dashed var(--ms-line); }
.ms-app__newest span { color: var(--ms-teal-ink); font-weight: 600; }
.ms-app--md .ms-app__body { flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: 12px; }
.ms-app--md .ms-app__title { flex: 1; min-width: 0; font-size: 1.2rem; }
.ms-app--md .ms-app__lead { flex-basis: 100%; }

/* Post cards -------------------------------------------------------------- */
.ms-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.ms-card { transition: transform .18s ease, box-shadow .18s ease; }
.ms-card:hover, .ms-card:focus-within { transform: translateY(-3px); box-shadow: var(--ms-shadow-up); }
.ms-card__in { display: flex; flex-direction: column; flex: 1; }
.ms-card__media { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--ms-bar); }
.ms-card__text { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.ms-card__title { font-size: 1.12rem; font-weight: 600; line-height: 1.35; }
.ms-card__title a { color: var(--ms-ink); text-decoration: none; }
.ms-card__title a::after { content: ""; position: absolute; inset: 0; }
.ms-card:hover .ms-card__title a { color: var(--ms-link); }
.ms-card__excerpt { margin: 0; font-size: .92rem; line-height: 1.6; color: var(--ms-ink-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ms-card .ms-meta { margin-block-start: auto; padding-block-start: 6px; }
.ms-thumb-empty { display: grid; place-items: center; width: 100%; height: 100%; }

.ms-rows { display: flex; flex-direction: column; gap: 18px; }
.ms-card--row .ms-card__in { flex-direction: row; }
.ms-card--row .ms-card__media { flex: none; width: 34%; aspect-ratio: auto; min-height: 190px; }
.ms-card--row .ms-card__text { padding: 20px 24px; justify-content: center; }
.ms-card--row .ms-card__title { font-size: 1.3rem; }

/* Writers */
.ms-writers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.ms-writer__body { display: flex; gap: 18px; align-items: flex-start; padding: 22px 24px 24px; }
.ms-writer__name { font-size: 1.2rem; margin-block-end: 6px; }
.ms-writer__bio { margin: 0; font-size: .95rem; color: var(--ms-ink-2); line-height: 1.7; }
.ms-avatar {
    display: inline-grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 13px;
    font-family: var(--ms-head); font-weight: 700; font-size: 1.05rem; color: #fff; background: var(--ms-primary);
}
.ms-avatar--b { background: var(--ms-teal-ink); }
:root[data-mode="dark"] .ms-avatar--b { background: #2A8587; }
.ms-avatar--lg { width: 64px; height: 64px; border-radius: 18px; font-size: 1.4rem; }

/* Document window (the homepage's own written body) */
.ms-block--doc { max-width: 54rem; margin-inline: auto; }
.ms-doc__body { padding: clamp(22px, 4.5vw, 52px); }
.ms-doc__body > :first-child { margin-block-start: 0; }

/* Article ----------------------------------------------------------------- */
.ms-article { padding-block-start: 26px; }
.ms-crumbs { font-size: .85rem; color: var(--ms-ink-2); margin-block-end: 18px; }
.ms-crumbs a { color: var(--ms-ink-2); }
.ms-crumbs a:hover { color: var(--ms-link); }
.ms-article__head { display: flex; flex-direction: column; align-items: flex-start; }
.ms-article__title { font-size: clamp(1.85rem, 1.25rem + 2.1vw, 2.7rem); font-weight: 700; line-height: 1.2; margin-block: 14px 22px; text-wrap: balance; }
.ms-article--page .ms-article__title { margin-block-start: 0; }
.ms-byline { display: flex; align-items: center; gap: 14px; padding-block: 14px; border-block: 1px solid var(--ms-line); width: 100%; }
.ms-byline__text { display: flex; flex-direction: column; gap: 2px; }
.ms-byline__name { font-weight: 600; }
.ms-byline__meta { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: .85rem; color: var(--ms-ink-2); }
.ms-byline__meta > span { display: inline-flex; align-items: center; gap: 5px; }
.ms-figure { margin-block: 30px 34px; }
.ms-figure__win img { aspect-ratio: 16 / 9; }

.ms-toc { margin-block: 6px 34px; border: 1px solid var(--ms-line); border-radius: var(--ms-r); background: var(--ms-surface); overflow: hidden; }
.ms-toc summary {
    display: flex; align-items: center; gap: 10px; cursor: pointer; list-style: none;
    padding: 12px 16px; background: var(--ms-bar); font-family: var(--ms-head); font-weight: 600; min-height: 48px;
}
.ms-toc summary::-webkit-details-marker { display: none; }
.ms-toc summary::after { content: "–"; margin-inline-start: 4px; color: var(--ms-ink-2); }
.ms-toc:not([open]) summary::after { content: "+"; }
.ms-toc__n { margin-inline-start: auto; font-family: var(--ms-font); font-weight: 500; font-size: .8rem; color: var(--ms-ink-2); }
.ms-toc ol { margin: 0; padding: 12px 16px 16px; list-style: none; counter-reset: toc; columns: 2; column-gap: 28px; }
.ms-toc li { counter-increment: toc; break-inside: avoid; display: flex; gap: 10px; padding-block: 5px; font-size: .92rem; line-height: 1.5; }
.ms-toc li::before { content: counter(toc); flex: none; font-family: var(--ms-head); font-weight: 600; font-size: .8rem; color: var(--ms-teal-ink); min-width: 1.4em; padding-block-start: 1px; }
.ms-toc a { color: var(--ms-ink); text-decoration: none; }
.ms-toc a:hover { color: var(--ms-link); text-decoration: underline; }

.ms-authorbox { margin-block-start: 44px; }
.ms-authorbox__body { display: flex; gap: 18px; padding: 22px 24px; align-items: flex-start; }
.ms-authorbox__name { font-family: var(--ms-head); font-weight: 600; font-size: 1.15rem; margin: 0 0 4px; }
.ms-authorbox__bio { margin: 0; color: var(--ms-ink-2); font-size: .95rem; line-height: 1.7; }

/* Prose ------------------------------------------------------------------- */
.ms-prose { font-size: 1.0625rem; line-height: 1.85; overflow-wrap: break-word; }
.ms-prose > * + * { margin-block-start: 0; }
.ms-prose p { margin-block-end: 1.15em; }
.ms-prose h2 {
    position: relative; font-size: clamp(1.4rem, 1.15rem + .8vw, 1.7rem); font-weight: 700;
    margin-block: 2.1em .7em; padding-block-start: .85em; border-block-start: 1px solid var(--ms-line);
}
.ms-prose h2::before { content: ""; position: absolute; top: -2px; inset-inline-start: 0; width: 44px; height: 3px; border-radius: 3px; background: var(--ms-teal); }
.ms-prose > h2:first-child { margin-block-start: .2em; }
.ms-prose h3 { font-size: 1.2rem; margin-block: 1.7em .5em; }
.ms-prose ul, .ms-prose ol { padding: 0; margin: 0 0 1.3em; list-style: none; }
.ms-prose li { position: relative; padding-inline-start: 1.9em; margin-block-end: .55em; }
.ms-prose ul > li::before {
    content: ""; position: absolute; inset-inline-start: .35em; top: .72em;
    width: .5em; height: .5em; border-radius: 3px; background: var(--ms-teal);
}
.ms-prose ol { counter-reset: ms-step; }
.ms-prose ol > li { counter-increment: ms-step; padding-inline-start: 2.6em; }
/* Steps as keyboard keycaps. */
.ms-prose ol > li::before {
    content: counter(ms-step); position: absolute; inset-inline-start: 0; top: .2em;
    display: grid; place-items: center; width: 1.75em; height: 1.75em;
    font-family: var(--ms-head); font-size: .85em; font-weight: 600; line-height: 1;
    color: var(--ms-ink); background: var(--ms-surface);
    border: 1px solid var(--ms-line); border-radius: 7px; box-shadow: 0 2px 0 var(--ms-line);
}
.ms-prose strong { font-weight: 700; color: var(--ms-ink); }
.ms-prose a { text-decoration-color: color-mix(in srgb, var(--ms-teal) 70%, transparent); text-decoration-thickness: 2px; }
.ms-prose blockquote { margin: 1.5em 0; padding: 4px 20px; border-inline-start: 4px solid var(--ms-teal); color: var(--ms-ink-2); }
.ms-prose kbd, .ms-prose code {
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: .86em;
    padding: .1em .45em; border-radius: 6px; background: var(--ms-bar); border: 1px solid var(--ms-line);
}
.ms-prose kbd { box-shadow: 0 2px 0 var(--ms-line); }
.ms-prose img { border-radius: var(--ms-r-sm); }
.ms-table { margin: 1.4em 0 1.8em; overflow-x: auto; border: 1px solid var(--ms-line); border-radius: var(--ms-r-sm); background: var(--ms-surface); }
.ms-table table { width: 100%; border-collapse: collapse; font-size: .95rem; line-height: 1.6; min-width: 480px; }
.ms-table th, .ms-table td { text-align: start; vertical-align: top; padding: 11px 14px; border-block-end: 1px solid var(--ms-line); }
.ms-table th { background: var(--ms-bar); font-family: var(--ms-head); font-weight: 600; font-size: .9rem; }
.ms-table tr:last-child td { border-block-end: 0; }
.ms-table tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--ms-bar) 45%, transparent); }
.ms-notice { margin: 2.2em 0 0; border: 1px solid color-mix(in srgb, var(--ms-teal) 45%, var(--ms-line)); border-radius: var(--ms-r); background: var(--ms-teal-50); overflow: hidden; }
.ms-notice__bar { display: flex; align-items: center; gap: 8px; padding: 10px 16px 0; color: var(--ms-teal-ink); font-family: var(--ms-head); font-size: .95rem; }
.ms-notice p { margin: 0; padding: 6px 16px 14px; font-size: .92rem; line-height: 1.7; color: var(--ms-ink); }
.ms-readalso { padding: 14px 18px; border-radius: var(--ms-r-sm); background: var(--ms-bar); border: 1px dashed var(--ms-line); font-size: .95rem; }

/* List pages -------------------------------------------------------------- */
.ms-listhead { padding-block: 30px 30px; }
.ms-listhead__row { display: flex; align-items: center; gap: 16px; }
.ms-listhead__kicker { margin: 0; font-size: .85rem; font-weight: 600; color: var(--ms-teal-ink); }
.ms-listhead__title { font-size: clamp(1.8rem, 1.2rem + 2vw, 2.5rem); font-weight: 700; }
.ms-listhead__intro { margin-block-start: 20px; color: var(--ms-ink); }
.ms-listhead__intro p:last-child { margin-block-end: 0; }
.ms-listhead__search { margin-block-start: 22px; }
.ms-listhead__count { margin: 18px 0 0; font-size: .85rem; color: var(--ms-ink-2); display: flex; align-items: center; gap: 10px; }
.ms-listhead__count::after { content: ""; flex: 1; height: 1px; background: var(--ms-line); }

.ms-pages ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; list-style: none; padding: 0; margin: 36px 0 0; }
.ms-pages a, .ms-pages span {
    display: inline-grid; place-items: center; min-width: 44px; height: 44px; padding-inline: 10px;
    border-radius: 10px; border: 1px solid var(--ms-line); background: var(--ms-surface); box-shadow: 0 2px 0 var(--ms-line);
    color: var(--ms-ink); text-decoration: none; font-weight: 600;
}
.ms-pages .current { background: var(--ms-primary); border-color: var(--ms-primary); color: #fff; box-shadow: 0 2px 0 var(--ms-primary-900); }
.ms-pages .dots { border: 0; background: none; box-shadow: none; }
.ms-pages a:hover { border-color: var(--ms-teal); }

.ms-empty__body, .ms-dialog__body { padding: 24px; }
.ms-empty__body .ms-sform { margin-block-start: 14px; }
.ms-404 { padding-block-start: 40px; }
.ms-dialog__body { display: flex; gap: 18px; align-items: flex-start; }
.ms-dialog__icon { display: inline-grid; place-items: center; width: 60px; height: 60px; border-radius: 16px; flex: none; background: var(--ms-coral-50); color: var(--ms-coral-ink); }
.ms-dialog__title { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.1rem); margin-block-end: 8px; }

/* Footer ------------------------------------------------------------------ */
.ms-foot {
    --ms-mark-body: #3D84B0; --ms-link: #9ADADB;
    background: var(--ms-primary-900); color: #D5E3EA; font-size: .95rem;
}
:root[data-mode="dark"] .ms-foot { background: #071118; }
.ms-foot__in {
    max-width: var(--ms-wrap); margin-inline: auto; padding: 56px 20px 40px;
    display: grid; grid-template-columns: 1.3fr 1.2fr .8fr; gap: 40px;
}
.ms-brand--foot { color: #fff; }
.ms-foot__tag { margin: 14px 0 0; color: #fff; font-weight: 500; }
.ms-foot__disclaimer { margin: 14px 0 0; font-size: .875rem; line-height: 1.7; color: #B5C9D4; max-width: 34em; }
.ms-foot__head { font-size: .85rem; font-weight: 600; color: #9ADADB; margin-block-end: 12px; }
.ms-foot__list { list-style: none; margin: 0; padding: 0; }
.ms-foot__list--two { columns: 2; column-gap: 24px; }
.ms-foot__list li { break-inside: avoid; }
.ms-foot__list a { display: inline-flex; align-items: center; min-height: 36px; color: #E3EEF3; text-decoration: none; }
.ms-foot__list a:hover { color: #fff; text-decoration: underline; }
.ms-foot__base {
    max-width: var(--ms-wrap); margin-inline: auto; padding: 18px 20px 26px;
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
    border-block-start: 1px solid rgb(255 255 255 / .12); font-size: .85rem; color: #B5C9D4;
}
.ms-foot__base p { margin: 0; }
.ms-foot__up { color: #E3EEF3; min-height: 40px; display: inline-flex; align-items: center; }

/* Contact form plugin harmonisation */
.adxc { --adxc-accent: var(--ms-primary); --adxc-radius: var(--ms-r); max-width: none; }
.adxc .adxc-form { background: var(--ms-surface); box-shadow: var(--ms-shadow); }

/* Responsive -------------------------------------------------------------- */
@media (max-width: 1100px) {
    .ms-app--sm { grid-column: span 4; }
    .ms-app--md { grid-column: span 6; }
    .ms-app--lg { grid-column: span 12; }
}
@media (max-width: 960px) {
    .ms-hero, .ms-lead { grid-column: span 12; }
    .ms-lead { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto 1fr; }
    .ms-lead > .ms-win__bar { grid-column: 1 / -1; }
    .ms-lead__media { aspect-ratio: auto; min-height: 220px; }
    .ms-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ms-foot__in { grid-template-columns: 1fr 1fr; }
    .ms-foot__brand { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
    body { font-size: 1rem; }
    .ms-home { padding-block-start: 18px; }
    .ms-bento { gap: 14px; }
    .ms-app--sm { grid-column: span 6; }
    .ms-app--md, .ms-app--lg { grid-column: span 12; }
    .ms-app--lg { grid-template-columns: 1fr; }
    .ms-app--lg .ms-app__media { grid-column: 1; grid-row: 2; aspect-ratio: 16 / 9; min-height: 0; }
    .ms-app--lg .ms-app__body { grid-row: 3; padding: 18px; }
    .ms-app--md { grid-row: span 1; }
    .ms-app--sm .ms-app__body { padding: 14px; flex-direction: column; flex-wrap: nowrap; align-items: flex-start; gap: 8px; }
    .ms-app--sm .ms-app__title { flex: none; }
    .ms-app--sm .ms-app__icon { width: 38px; height: 38px; border-radius: 10px; }
    .ms-app--sm .ms-app__title { font-size: 1rem; }
    .ms-app--sm .ms-app__lead { font-size: .82rem; -webkit-line-clamp: 3; }
    .ms-app--sm .ms-win__bar .ms-dots { display: none; }
    .ms-lead { display: flex; }
    .ms-lead__media { aspect-ratio: 16 / 10; min-height: 0; }
    .ms-grid, .ms-writers { grid-template-columns: 1fr; }
    .ms-card--row .ms-card__in { flex-direction: column; }
    .ms-card--row .ms-card__media { width: 100%; aspect-ratio: 16 / 9; min-height: 0; }
    .ms-card--row .ms-card__text { padding: 16px 18px 18px; }
    .ms-card--row .ms-card__title { font-size: 1.15rem; }
    .ms-toc ol { columns: 1; }
    .ms-hero__lead { font-size: 1.02rem; }
    .ms-sform__btn { padding-inline: 14px; }
    .ms-writer__body, .ms-authorbox__body, .ms-dialog__body { flex-direction: column; }
    .ms-foot__in { grid-template-columns: 1fr; gap: 30px; padding-block-start: 44px; }
    .ms-brand__name { font-size: 1.4rem; }
    .ms-top__in { min-height: 62px; gap: 10px; }
    .ms-brand .ms-mark { width: 34px; height: 34px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
    .ms-app:hover, .ms-card:hover, .ms-app:focus-within, .ms-card:focus-within { transform: none; }
}
@media print {
    .ms-top, .ms-foot, .ms-toc, .ms-related, .ms-skip { display: none !important; }
    body { background: #fff; }
}