/* ══════════════════════════════════════════════════════════════════════════
   Kloudmint Tools — site theme (light "Clarity" default + dark mode)
   Tokens drive every shared component. Tool panels are adapted at runtime
   by /assets/js/km-theme.js, so no tool's own CSS or scripts are changed.
   ══════════════════════════════════════════════════════════════════════════ */

:root, :root[data-theme="light"] {
    --km-bg: #f6f8f7;
    --km-surface: #ffffff;
    --km-surface-2: #f2f6f4;
    --km-border: #e3ebe8;
    --km-border-strong: #d2ded9;
    --km-ink: #10201c;
    --km-muted: #4a605a;
    --km-faint: #61766f;
    --km-soft: #e8f5f0;
    --km-soft-ink: #1f6b58;
    --km-accent: #1f8a70;
    --km-accent-hover: #186e5a;
    --km-accent-ink: #ffffff;
    --km-brand: #4eb39a;
    --km-code: #f7faf9;
    --km-code-ink: #2b3f3a;
    --km-warn-bg: #fdf0e3;
    --km-warn-ink: #8a4b12;
    --km-shadow: 0 12px 40px rgba(16, 32, 28, .06);
    --km-cta-bg: #10201c;
    --km-cta-ink: #e9f4f0;
    --km-cta-muted: #b6ccc5;
    --km-logo-ink: #10201c;
    --km-logo-path: #1f8a70;
    --km-font: 'Manrope', -apple-system, 'Segoe UI', system-ui, sans-serif;
    --km-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;
    --km-radius: 14px;
    --km-side-w: 256px;
    color-scheme: light;
}
:root[data-theme="dark"] {
    --km-bg: #0b1513;
    --km-surface: #101d1a;
    --km-surface-2: #13221f;
    --km-border: #1d302b;
    --km-border-strong: #2a433c;
    --km-ink: #e6f2ee;
    --km-muted: #a9c1ba;
    --km-faint: #86a69d;
    --km-soft: #14302a;
    --km-soft-ink: #7fd8bf;
    --km-accent: #4eb39a;
    --km-accent-hover: #6cc7ae;
    --km-accent-ink: #0b1513;
    --km-brand: #4eb39a;
    --km-code: #0d1917;
    --km-code-ink: #cfe3dc;
    --km-warn-bg: #2a1f14;
    --km-warn-ink: #f3b27a;
    --km-shadow: none;
    --km-cta-bg: #0f2622;
    --km-cta-ink: #e9f4f0;
    --km-cta-muted: #b6ccc5;
    --km-logo-ink: #e6f2ee;
    --km-logo-path: #4eb39a;
    color-scheme: dark;
}

/* ── Base ───────────────────────────────────────────────────────────────── */
html, body { background: var(--km-bg) !important; }
body { font-family: var(--km-font); color: var(--km-ink); }
.km-skip { position: absolute; left: -9999px; top: 8px; z-index: 1000; background: var(--km-accent); color: var(--km-accent-ink); padding: 10px 14px; border-radius: 8px; }
.km-skip:focus { left: 8px; }
:focus-visible { outline: 2px solid var(--km-accent); outline-offset: 2px; }

/* ── Top bar ────────────────────────────────────────────────────────────── */
header.km-topbar { background: var(--km-surface) !important; border-bottom: 1px solid var(--km-border) !important; z-index: 50; }
.km-topbar-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 68px; padding: 0 24px; }
.km-logo { display: inline-flex; align-items: center; gap: 12px; text-decoration: none !important; color: var(--km-logo-ink) !important; flex-shrink: 0; }
.km-logo-tile { width: 32px; height: 32px; border-radius: 8px; background: var(--km-brand); color: #10201c; display: inline-flex; align-items: center; justify-content: center; font: 700 15px var(--km-font); }
.km-logo-word { font: 700 20px var(--km-font); letter-spacing: -0.01em; }
.km-logo-path { color: var(--km-logo-path); margin-left: 4px; }

.km-search { position: relative; flex: 0 1 420px; display: flex !important; align-items: center; }
.km-search .search-trigger-btn { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); background: none !important; border: 0 !important; color: var(--km-faint) !important; padding: 0 !important; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; pointer-events: none; box-shadow: none !important; }
.km-search .header-search-input, .km-search .header-search-input.expanded {
    width: 100% !important; height: 40px !important; opacity: 1 !important; visibility: visible !important;
    padding: 0 12px 0 36px !important; border-radius: 10px !important; border: 1px solid var(--km-border) !important;
    background: var(--km-surface-2) !important; color: var(--km-ink) !important; font: 500 14px var(--km-font) !important; position: static !important; transform: none !important; right: auto !important; top: auto !important;
}
.km-search .header-search-input::placeholder { color: var(--km-faint); }
.km-search .header-search-icon { display: none !important; }
.search-dropdown { background: var(--km-surface) !important; border: 1px solid var(--km-border) !important; box-shadow: 0 16px 40px rgba(0,0,0,.12) !important; border-radius: 12px !important; top: calc(100% + 6px) !important; left: 0 !important; right: 0 !important; width: auto !important; }
.search-result-item { color: var(--km-ink) !important; border-color: var(--km-border) !important; }
.search-result-item:hover { background: var(--km-soft) !important; }
.search-result-tag { background: var(--km-soft) !important; color: var(--km-soft-ink) !important; }

.km-topbar-right { display: flex; align-items: center; gap: 18px; }
.km-topnav ul { display: flex; gap: 22px; list-style: none; margin: 0; padding: 0; }
.km-topnav a { color: var(--km-muted) !important; font: 500 15px var(--km-font); text-decoration: none; background: none !important; padding: 0 !important; }
.km-topnav a:hover { color: var(--km-ink) !important; }
.km-theme-toggle { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--km-border); background: var(--km-surface); color: var(--km-ink); font: 600 14px var(--km-font); cursor: pointer; }
.km-theme-toggle:hover { border-color: var(--km-border-strong); }
.km-ico-sun { display: none; }
:root[data-theme="dark"] .km-ico-sun { display: inline; }
:root[data-theme="dark"] .km-ico-moon { display: none; }
#nav-toggle { background: var(--km-surface) !important; border: 1px solid var(--km-border) !important; }
#nav-toggle .bar { background: var(--km-ink) !important; }
#mobile-nav { background: var(--km-surface) !important; border-color: var(--km-border) !important; }
#mobile-nav ul li a, .mob-search-results li a { color: var(--km-ink) !important; }
#mobile-nav ul li a:hover { background: var(--km-soft) !important; }
.mob-search-input { background: var(--km-surface-2) !important; color: var(--km-ink) !important; border-color: var(--km-border) !important; }
.mob-divider { background: var(--km-border) !important; }

/* ── Shell: sidebar + content ───────────────────────────────────────────── */
.km-shell { display: flex; align-items: flex-start; min-height: calc(100vh - 69px); }
.km-side {
    flex: 0 0 var(--km-side-w); width: var(--km-side-w); box-sizing: border-box;
    position: sticky; top: 0; max-height: 100vh; overflow-y: auto;
    background: var(--km-surface); border-right: 1px solid var(--km-border);
    padding: 22px 14px 32px; font-size: 14px; align-self: stretch;
}
.km-side-group { margin-bottom: 22px; }
.km-side-label { font: 600 11px var(--km-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--km-faint); padding: 0 10px; margin-bottom: 8px; }
.km-side ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.km-side a { display: block; padding: 8px 10px; border-radius: 8px; color: var(--km-muted); text-decoration: none; line-height: 1.35; border-left: 3px solid transparent; }
.km-side a:hover { background: var(--km-surface-2); color: var(--km-ink); }
.km-side a.is-current { background: var(--km-soft); color: var(--km-ink); font-weight: 700; border-left-color: var(--km-accent); }
.km-side-more { margin: 4px 0 0; padding: 8px 10px; border: 0; background: none; color: var(--km-soft-ink); font: 600 13px var(--km-font); cursor: pointer; border-radius: 8px; }
.km-side-more:hover { background: var(--km-surface-2); }
.km-main { flex: 1 1 auto; min-width: 0; display: block; }
@media (max-width: 900px) { .km-side { display: none; } }

/* ── Breadcrumb ─────────────────────────────────────────────────────────── */
.breadcrumb-bar { background: transparent !important; border: 0 !important; padding: 14px 0 0 !important; }
.breadcrumb-bar .container { max-width: 1040px !important; padding: 0 40px !important; margin: 0 auto; }
.breadcrumb li, .breadcrumb li a, .breadcrumb-sep { color: var(--km-faint) !important; font: 500 13px var(--km-font) !important; }
.breadcrumb li.active, .breadcrumb li.active span { color: var(--km-ink) !important; }
.breadcrumb li a:hover { color: var(--km-accent) !important; }

/* ── Hero bands ─────────────────────────────────────────────────────────── */
/* Light theme: every band becomes the light "Clarity" band. Its inner panels
   are re-coloured by km-theme.js. Dark theme keeps the original dark bands. */
:root[data-theme="light"] .km-hero {
    background: var(--km-surface) !important;
    border-bottom: 1px solid var(--km-border) !important;
    color: var(--km-ink);
}
:root[data-theme="light"] .km-hero::before, :root[data-theme="light"] .km-hero::after { display: none !important; }
:root[data-theme="light"] .km-hero h1 { color: var(--km-ink) !important; font-family: var(--km-font) !important; font-weight: 800 !important; letter-spacing: -0.03em !important; }
:root[data-theme="light"] .km-hero h1 em, :root[data-theme="light"] .km-hero h1 mark, :root[data-theme="light"] .km-hero h1 span { color: var(--km-accent) !important; background: none !important; }
:root[data-theme="dark"] .km-hero { background: linear-gradient(160deg, #0e2d27 0%, #12382f 60%, #0b1f1b 100%) !important; border-bottom: 1px solid var(--km-border) !important; }
:root[data-theme="dark"] .km-hero h1 { color: #ffffff !important; }

/* Standard band (pages without their own): centred, like the design */
.km-hero.km-hero-std { padding: 44px 32px 36px !important; margin: 0 0 8px !important; text-align: center !important; }
.km-hero-std .km-hero-inner { max-width: 820px; margin: 0 auto; }
.km-hero-std h1 { font-size: clamp(1.9rem, 3.4vw, 2.75rem) !important; line-height: 1.12 !important; margin: 10px auto 12px !important; max-width: 780px; }
.km-hero-std .km-hero-lead { margin: 0 auto !important; max-width: 640px; color: var(--km-muted) !important; font: 400 18px/1.6 var(--km-font); }
:root[data-theme="dark"] .km-hero-std .km-hero-lead { color: #b7cdc6 !important; }
.km-hero-eyebrow { font: 600 12px var(--km-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--km-soft-ink); }

/* standard band is centred (overrides km-standard.css left-alignment) */
.km-hero.km-hero-std, .km-hero.km-hero-std .km-hero-inner, .km-hero.km-hero-std h1, .km-hero.km-hero-std p { text-align: center !important; }
.km-hero.km-hero-std h1, .km-hero.km-hero-std .km-hero-lead { margin-left: auto !important; margin-right: auto !important; }

/* Privacy note: a pill in the standard band, a slim row in other bands */
.km-privacy {
    display: flex; align-items: center; gap: 8px; box-sizing: border-box;
    background: var(--km-soft) !important; color: var(--km-soft-ink) !important;
    border: 1px solid transparent !important; border-radius: 12px;
    padding: 10px 14px; font: 500 14px/1.5 var(--km-font);
    max-width: var(--km-hero-max, 1200px); margin: 20px auto 0 !important;
}
.km-privacy strong { color: inherit; font-weight: 700; }
.km-hero-std .km-privacy { display: inline-flex; border-radius: 999px; padding: 6px 14px; font-size: 13px; margin: 0 auto 6px !important; max-width: 100%; }
.km-hero-std .km-privacy span { display: inline; }
:root[data-theme="dark"] .km-privacy { background: rgba(78,179,154,.12) !important; color: #9fe3cf !important; }

/* ── Guide, related, share, help ─────────────────────────────────────────── */
.km-related, .km-share, .km-cta { max-width: 1040px; margin: 32px auto 0; padding: 0 40px; box-sizing: border-box; }
.km-related h2 { font: 800 22px var(--km-font); letter-spacing: -0.01em; color: var(--km-ink); margin: 0 0 16px; }
.km-related-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.km-related-card { display: flex; flex-direction: column; gap: 6px; background: var(--km-surface); border: 1px solid var(--km-border); border-radius: var(--km-radius); padding: 18px 20px; text-decoration: none; transition: border-color .15s, transform .15s; }
.km-related-card:hover { border-color: var(--km-accent); transform: translateY(-1px); }
.km-related-cat { font: 600 11px var(--km-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--km-soft-ink); }
.km-related-name { font: 700 16px var(--km-font); color: var(--km-ink); }
.km-share { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding-top: 18px; padding-bottom: 18px; border-top: 1px solid var(--km-border); border-bottom: 1px solid var(--km-border); margin-top: 28px; }
.km-share-label { color: var(--km-muted); font: 500 14px var(--km-font); }
.km-share-links { display: flex; flex-wrap: wrap; gap: 8px; }
.km-share-links a, .km-share-links button { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--km-border); background: var(--km-surface); color: var(--km-ink); font: 600 13px var(--km-font); text-decoration: none; cursor: pointer; }
.km-share-links a:hover, .km-share-links button:hover { border-color: var(--km-accent); color: var(--km-accent); }
.km-cta { margin-bottom: 48px; }
.km-cta-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; background: var(--km-cta-bg); border: 1px solid var(--km-cta-bg); border-radius: 18px; padding: 26px 30px; }
:root[data-theme="dark"] .km-cta-inner { border-color: #2b5a4e; }
.km-cta h2 { margin: 0; font: 800 20px var(--km-font); color: var(--km-cta-ink); }
.km-cta p { margin: 4px 0 0; font: 400 15px/1.6 var(--km-font); color: var(--km-cta-muted); max-width: 620px; }
.km-cta-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.km-btn { display: inline-flex; align-items: center; min-height: 46px; padding: 0 20px; border-radius: 10px; font: 700 15px var(--km-font); text-decoration: none; }
.km-btn-primary { background: #4eb39a; color: #0b1513 !important; }
.km-btn-primary:hover { background: #6cc7ae; }
.km-btn-ghost { border: 1px solid rgba(233,244,240,.35); color: var(--km-cta-ink) !important; }
.km-btn-ghost:hover { border-color: var(--km-cta-ink); }
@media (max-width: 900px) {
    .km-related-grid { grid-template-columns: minmax(0, 1fr); }
    .km-related, .km-share, .km-cta, .breadcrumb-bar .container { padding-left: 16px !important; padding-right: 16px !important; }
}

/* ── Home & category cards (header-1.css) ───────────────────────────────── */
.card { background: var(--km-surface) !important; border-color: var(--km-border) !important; }
.card h3 { color: var(--km-ink) !important; }
.card p { color: var(--km-muted) !important; }
.btn { background: var(--km-accent) !important; color: var(--km-accent-ink) !important; }

/* ── Footer ─────────────────────────────────────────────────────────────── */
.km-footer { background: var(--km-surface); border-top: 1px solid var(--km-border); color: var(--km-faint); font: 400 14px/1.6 var(--km-font); }
.km-footer-inner { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 20px 40px; padding: 32px 24px 28px; }
.km-footer-brand p { margin: 10px 0 0; max-width: 320px; }
.km-footer-links { display: flex; flex-wrap: wrap; gap: 10px 22px; }
.km-footer-links a { color: var(--km-muted); text-decoration: none; }
.km-footer-links a:hover { color: var(--km-accent); }
.km-footer-copy { width: 100%; margin: 0; padding-top: 16px; border-top: 1px solid var(--km-border); font-size: 13px; }

/* Report-a-problem launcher: bottom-right so it never covers the sidebar */
.rw-trigger, #rw-trigger { left: auto !important; right: 24px !important; }
.rw-panel, #rw-panel { left: auto !important; right: 24px !important; }

/* ── Phone header: logo · theme icon · menu (search lives in the menu) ──── */
@media (max-width: 640px) {
    .km-topbar-inner { padding: 0 14px; gap: 10px; height: 60px; }
    .km-search, .km-topnav { display: none !important; }
    .km-logo-word { font-size: 17px; }
    .km-logo-tile { width: 28px; height: 28px; font-size: 13px; }
    .km-topbar-right { gap: 8px; }
    .km-theme-toggle { padding: 0; width: 44px; justify-content: center; }
    .km-theme-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    #nav-toggle { display: flex !important; width: 44px; height: 44px; align-items: center; justify-content: center; border-radius: 10px !important; }
}
@media (min-width: 641px) { #nav-toggle { display: none !important; } }

/* ══════════════════════════════════════════════════════════════════════════
   CLASSIC layout (W3Schools-style): flat header, dark category strip,
   grey grouped sidebar with solid active item, flat content, prev/next.
   ══════════════════════════════════════════════════════════════════════════ */
:root, :root[data-theme="light"] {
    --km-bg: #ffffff; --km-surface: #ffffff; --km-surface-2: #f1f1f1;
    --km-side-bg: #eef1f0; --km-side-hover: #cfd8d5; --km-cat-bg: #1d2a27; --km-cat-ink: #dfe9e6;
    --km-ex-bg: #f1f1f1; --km-intro-bg: #e7f4ef;
    --km-font: 'Source Sans 3', 'Segoe UI', Tahoma, Verdana, sans-serif;
    --km-mono: 'Source Code Pro', Consolas, ui-monospace, monospace;
    --km-radius: 6px; --km-side-w: 230px;
}
:root[data-theme="dark"] {
    --km-bg: #15191c; --km-surface: #1d2328; --km-surface-2: #262d33;
    --km-side-bg: #1d2328; --km-side-hover: #303a41; --km-cat-bg: #0b0f12; --km-cat-ink: #cfdcd8;
    --km-ex-bg: #262d33; --km-intro-bg: #183029; --km-border: #2c353b;
}
body { font-size: 16px; line-height: 1.55; }

/* header: white, slimmer, round search + round theme button */
.km-topbar-inner { height: 56px; }
.km-logo-tile { border-radius: 6px; }
.km-search .header-search-input, .km-search .header-search-input.expanded { border-radius: 999px !important; height: 38px !important; }
.km-theme-toggle { border-radius: 999px; min-height: 38px; }
header.km-topbar { box-shadow: 0 1px 3px rgba(0,0,0,.08); }

/* dark category strip */
.km-catbar { background: var(--km-cat-bg); position: sticky; top: 0; z-index: 40; }
.km-catbar-inner { display: flex; overflow-x: auto; scrollbar-width: none; padding: 0 8px; }
.km-catbar-inner::-webkit-scrollbar { display: none; }
.km-catbar a { flex: 0 0 auto; padding: 11px 16px; color: var(--km-cat-ink); font: 600 14px var(--km-font); letter-spacing: .04em; text-transform: uppercase; text-decoration: none; }
.km-catbar a:hover { background: #000; color: #fff; }
.km-catbar a.is-on { background: var(--km-accent); color: #fff; }
:root[data-theme="dark"] .km-catbar a.is-on { color: #0b1513; }

/* sidebar: grey, grouped, solid active block */
.km-side { background: var(--km-side-bg); border-right: 0; padding: 14px 0 40px; top: 44px; max-height: calc(100vh - 44px); }
.km-side-group { margin-bottom: 16px; }
.km-side-label { font: 700 17px var(--km-font); letter-spacing: 0; text-transform: none; color: var(--km-ink); padding: 4px 16px 6px; margin: 0; }
.km-side ul { gap: 0; }
.km-side a { border-radius: 0; border-left: 0; padding: 5px 16px; color: var(--km-ink); font-size: 15px; }
.km-side a:hover { background: var(--km-side-hover); color: var(--km-ink); }
.km-side a.is-current { background: var(--km-accent); color: #fff; font-weight: 400; }
:root[data-theme="dark"] .km-side a.is-current { color: #0b1513; }

/* flat content */
.km-main { background: var(--km-bg); }
.breadcrumb-bar .container, .km-pn, .km-related, .km-share, .km-cta { max-width: 1100px !important; }
.km-pn { display: flex; justify-content: space-between; gap: 12px; margin: 14px auto 0; padding: 0 40px; box-sizing: border-box; }
.km-pn-bottom { margin: 28px auto 36px; }
.km-pn-btn { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 5px; background: var(--km-accent); color: #fff !important; font: 400 16px var(--km-font); text-decoration: none; max-width: 48%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.km-pn-btn:hover { background: #000; }
:root[data-theme="dark"] .km-pn-btn { color: #0b1513 !important; }
:root[data-theme="dark"] .km-pn-btn:hover { background: #fff; }

/* hero → plain W3-style title block (both themes) */
.km-hero, :root[data-theme="light"] .km-hero, :root[data-theme="dark"] .km-hero { background: var(--km-bg) !important; border-bottom: 0 !important; box-shadow: none !important; }
.km-hero::before, .km-hero::after { display: none !important; }
.km-hero h1, :root[data-theme="light"] .km-hero h1, :root[data-theme="dark"] .km-hero h1 { color: var(--km-ink) !important; font-family: var(--km-font) !important; font-weight: 400 !important; letter-spacing: 0 !important; }
.km-hero h1 em, .km-hero h1 mark, .km-hero h1 span { color: var(--km-accent) !important; background: none !important; }
.km-hero.km-hero-std { padding: 18px 40px 10px !important; }
.km-hero.km-hero-std, .km-hero.km-hero-std .km-hero-inner, .km-hero.km-hero-std h1, .km-hero.km-hero-std p { text-align: left !important; }
.km-hero-std .km-hero-inner { max-width: 1020px; margin: 0 auto; }
.km-hero.km-hero-std h1, .km-hero.km-hero-std .km-hero-lead { margin-left: 0 !important; margin-right: 0 !important; max-width: none; }
.km-hero-std h1 { font-size: clamp(2rem, 3.6vw, 2.65rem) !important; }
.km-hero-std .km-hero-lead { background: var(--km-intro-bg); color: var(--km-ink) !important; padding: 14px 18px; border-radius: 0; font-size: 17px !important; margin-top: 8px !important; }
:root[data-theme="dark"] .km-hero-std .km-hero-lead { color: var(--km-ink) !important; }
.km-privacy, .km-hero-std .km-privacy { border-radius: 4px; }

/* guide, related, share, help: flat W3 boxes */
.km-related h2, .km-cta h2 { font-weight: 400 !important; font-size: 26px !important; }
.km-related-card { border-radius: 4px; background: var(--km-ex-bg); border-color: transparent; }
.km-related-card:hover { transform: none; border-color: var(--km-accent); }
.km-share-links a, .km-share-links button { border-radius: 4px; }
.km-cta-inner { border-radius: 4px; }
.km-btn { border-radius: 5px; font-weight: 600; }
.card { border-radius: 4px !important; box-shadow: none !important; }
pre, code { font-family: var(--km-mono); }

/* footer: dark like W3 */
.km-footer { background: var(--km-cat-bg); color: #b9c8c4; border-top: 0; }
.km-footer .km-logo { color: #fff !important; }
.km-footer-links a { color: #dfe9e6; }
.km-footer-copy { border-top-color: rgba(255,255,255,.12); }

@media (max-width: 900px) {
    .km-pn, .km-hero.km-hero-std { padding-left: 16px !important; padding-right: 16px !important; }
}
@media (max-width: 640px) {
    .km-topbar-inner { height: 56px; }
    .km-catbar a { padding: 10px 12px; font-size: 13px; }
    .km-pn-btn { font-size: 14px; padding: 0 12px; }
}

/* no sideways page scroll; wide tool diagrams scroll inside their own box */
.km-main { overflow-x: clip; }
.bit-row-128, :has(> .bit-group) { overflow-x: auto; max-width: 100%; }
.breadcrumb-bar .container, .km-pn { max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: 32px !important; padding-right: 32px !important; }
/* (old rule hiding the Connect/AWS links removed — the top bar now has the Tools menu + Blog) */
@media (max-width: 900px) { .breadcrumb-bar .container, .km-pn { padding-left: 16px !important; padding-right: 16px !important; } }
.hero-scroll { display: none !important; }
.search-result-item.km-active, .mob-search-results a.km-active { background: var(--km-soft) !important; }

/* ══ Homepage (W3-style, same theme tokens) ═════════════════════════════ */
.kmh-hero { background: var(--km-cat-bg); color: #fff; padding: 64px 32px 56px; text-align: center; }
.kmh-hero-inner { max-width: 860px; margin: 0 auto; }
.kmh-hero h1 { font: 700 clamp(2.2rem, 5vw, 3.6rem)/1.1 var(--km-font); margin: 0 0 16px; color: #fff; letter-spacing: -.01em; }
.kmh-hero h1 span { color: var(--km-brand); }
.kmh-lead { font: 400 19px/1.55 var(--km-font); color: #c9d8d4; margin: 0 auto 28px; max-width: 680px; }
.kmh-search { position: relative; max-width: 620px; margin: 0 auto; display: flex; align-items: center; background: #fff; border-radius: 999px; padding: 0 22px; color: #61766f; box-shadow: 0 6px 24px rgba(0,0,0,.25); }
.kmh-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; height: 58px; padding: 0 0 0 12px; font: 400 18px var(--km-font); color: #10201c; }
.kmh-results { display: none; position: absolute; left: 0; right: 0; top: calc(100% + 8px); background: var(--km-surface); border: 1px solid var(--km-border); border-radius: 12px; overflow: hidden; text-align: left; z-index: 30; box-shadow: 0 16px 40px rgba(0,0,0,.2); }
.kmh-results.open { display: block; }
.kmh-results a { display: flex; justify-content: space-between; align-items: center; padding: 12px 20px; color: var(--km-ink); text-decoration: none; font: 400 16px var(--km-font); border-bottom: 1px solid var(--km-border); }
.kmh-results a:last-child { border-bottom: 0; }
.kmh-results a:hover, .kmh-results a.km-active { background: var(--km-soft); }
.kmh-results a span { font: 600 11px var(--km-mono); text-transform: uppercase; color: var(--km-soft-ink); background: var(--km-soft); padding: 2px 8px; border-radius: 4px; }
.kmh-none { padding: 14px 20px; color: var(--km-muted); }
.kmh-popular { margin: 22px 0 0; color: #9fb4ae; font: 400 15px var(--km-font); display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 10px; align-items: center; }
.kmh-popular a { color: #fff; text-decoration: none; border: 1px solid rgba(255,255,255,.25); border-radius: 999px; padding: 4px 14px; }
.kmh-popular a:hover { background: var(--km-accent); border-color: var(--km-accent); }

.kmh-band { padding: 56px 32px; }
.kmh-band-a { background: var(--km-intro-bg); }
.kmh-band-b { background: var(--km-surface-2); }
.kmh-band-inner { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.kmh-band h2 { font: 700 clamp(2rem, 4vw, 3rem)/1.1 var(--km-font); margin: 0 0 14px; color: var(--km-ink); }
.kmh-band p { font: 400 18px/1.6 var(--km-font); color: var(--km-muted); margin: 0 0 22px; }
.kmh-band-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.kmh-btn { display: inline-flex; align-items: center; min-height: 44px; padding: 0 22px; border-radius: 999px; font: 600 16px var(--km-font); text-decoration: none; }
.kmh-btn-solid { background: var(--km-accent); color: #fff !important; }
.kmh-btn-solid:hover { background: #000; }
.kmh-btn-line { border: 1px solid var(--km-ink); color: var(--km-ink) !important; }
.kmh-btn-line:hover { background: var(--km-ink); color: var(--km-bg) !important; }
:root[data-theme="dark"] .kmh-btn-solid { color: #0b1513 !important; }
:root[data-theme="dark"] .kmh-btn-solid:hover { background: #fff; }
.kmh-example { background: var(--km-surface); border-radius: 6px; padding: 18px 20px 20px; box-shadow: 0 2px 10px rgba(0,0,0,.08); }
.kmh-example-h { font: 600 18px var(--km-font); color: var(--km-ink); margin-bottom: 10px; }
.kmh-example pre { margin: 0 0 16px; background: var(--km-ex-bg); border-left: 4px solid var(--km-accent); padding: 14px 16px; overflow-x: auto; font: 400 14px/1.6 var(--km-mono); color: var(--km-code-ink); }

.kmh-why { padding: 44px 32px; background: var(--km-bg); }
.kmh-why-inner { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.kmh-why-inner div { border-top: 4px solid var(--km-accent); padding-top: 14px; }
.kmh-why strong { display: block; font: 700 19px var(--km-font); color: var(--km-ink); margin-bottom: 6px; }
.kmh-why span { color: var(--km-muted); font: 400 16px/1.55 var(--km-font); }
.kmh-all-h { max-width: 1100px; margin: 24px auto 0; padding: 0 32px; font: 700 32px var(--km-font); color: var(--km-ink); }
.feature-strip { display: none !important; }

@media (max-width: 900px) {
    .kmh-band-inner, .kmh-why-inner { grid-template-columns: 1fr; gap: 24px; }
    .kmh-hero { padding: 44px 16px 40px; } .kmh-band, .kmh-why { padding: 40px 16px; } .kmh-all-h { padding: 0 16px; }
}

/* ══ Footer (clean, 4 columns) ══════════════════════════════════════════ */
.km-footer-inner { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; max-width: 1100px; margin: 0 auto; padding: 44px 32px 32px; }
.km-footer-brand p { color: #9fb4ae; margin-top: 12px; max-width: 280px; }
.km-footer-col { display: flex; flex-direction: column; gap: 9px; }
.km-footer-col h3 { margin: 0 0 4px; font: 700 13px var(--km-font); letter-spacing: .08em; text-transform: uppercase; color: #fff; }
.km-footer-col a, .km-footer-legal a { color: #b9c8c4; text-decoration: none; font-size: 15px; }
.km-footer-col a:hover, .km-footer-legal a:hover { color: var(--km-brand); }
.km-footer-bottom { max-width: 1100px; margin: 0 auto; padding: 16px 32px 24px; border-top: 1px solid rgba(255,255,255,.1); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; font-size: 14px; color: #8fa49e; }
.km-footer-legal { display: flex; gap: 18px; }
@media (max-width: 900px) { .km-footer-inner { grid-template-columns: 1fr 1fr; padding: 36px 16px 24px; } .km-footer-brand { grid-column: 1 / -1; } .km-footer-bottom { padding: 16px; } }
.kmh-btn-line { border: 1.5px solid currentColor !important; }
@media (min-width: 901px) { .km-shell { background: linear-gradient(to right, var(--km-side-bg) var(--km-side-w), transparent var(--km-side-w)); } }
.kmh-band-inner > *, .kmh-why-inner > * { min-width: 0; }
@media (max-width: 900px) { .kmh-band-inner { grid-template-columns: minmax(0, 1fr); } }

/* ══════════════════════════════════════════════════════════════════════════
   UNIFIED TOOL HERO — one clean design over every tool's own hero markup.
   Markup and IDs are untouched (live panels keep working); only looks change.
   ══════════════════════════════════════════════════════════════════════════ */
:root { --km-head: 'Plus Jakarta Sans', 'Source Sans 3', 'Segoe UI', sans-serif; --km-hero-band: linear-gradient(180deg, #eef8f4 0%, #ffffff 100%); --km-card-shadow: 0 1px 2px rgba(16,32,28,.05), 0 8px 24px rgba(16,32,28,.06); }
:root[data-theme="dark"] { --km-hero-band: linear-gradient(180deg, #17221f 0%, #15191c 100%); --km-card-shadow: 0 1px 2px rgba(0,0,0,.4); }
h1, h2, .kmh-hero h1, .kmh-band h2 { font-family: var(--km-head) !important; }

/* band */
.km-main .km-hero, :root[data-theme="light"] .km-main .km-hero, :root[data-theme="dark"] .km-main .km-hero {
    background: var(--km-hero-band) !important; border-bottom: 1px solid var(--km-border) !important;
    padding: 36px 32px 30px !important; margin: 0 !important; min-height: 0 !important; text-align: left !important;
}
.km-main .km-hero > div:not(.km-std):not(.ts-hero-bg),
.km-main .km-hero [class$="-hero-inner"], .km-main .km-hero [class*="-masthead-inner"], .km-main .km-hero .s3v-head-inner,
.km-main .km-hero .br-hero-content, .km-main .km-hero .container {
    max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important;
    gap: 32px !important; align-items: center !important; text-align: left !important;
}
.ts-hero-bg { display: none !important; }

/* title + lead */
.km-main .km-hero h1 {
    font-family: var(--km-head) !important; font-weight: 800 !important; font-size: clamp(1.85rem, 3.1vw, 2.6rem) !important;
    line-height: 1.15 !important; letter-spacing: -0.02em !important; color: var(--km-ink) !important;
    margin: 6px 0 12px !important; max-width: 820px; text-align: left !important;
}
.km-main .km-hero h1 em, .km-main .km-hero h1 mark, .km-main .km-hero h1 span:not([style]) { color: var(--km-accent) !important; background: none !important; font-style: normal !important; -webkit-text-fill-color: currentColor !important; }
.km-main .km-hero h1 span[style] { font-size: .42em !important; vertical-align: middle; }
.km-main .km-hero p:not(.km-privacy):not([class*="updated"]):not(.km-verified):not(.km-rates-asof),
.km-main .km-hero [class*="hero-desc"], .km-main .km-hero .lead, .km-main .km-hero .km-hero-lead {
    font: 400 18px/1.6 var(--km-font) !important; color: var(--km-muted) !important; max-width: 720px !important;
    margin: 0 0 14px !important; background: none !important; padding: 0 !important; text-align: left !important;
}
.km-main .km-hero [class*="brand-text"] > div:not([class]), .km-main .km-hero [class*="brand-text"] > span:not([class]) { font: 400 17px/1.5 var(--km-font) !important; color: var(--km-muted) !important; }

/* eyebrow / kicker → small clean label */
.km-main .km-hero [class*="eyebrow"], .km-main .km-hero [class*="kicker"], .km-main .km-hero [class$="-hero-tag"],
.km-main .km-hero .sqp-tag, .km-main .km-hero .conv-hero-tag, .km-main .km-hero .ts-badge, .km-main .km-hero .pq-badge:not(.green):not(.amber):not(.blue) {
    display: inline-flex !important; align-items: center; gap: 6px; font: 700 12.5px/1.2 var(--km-font) !important; letter-spacing: .08em !important;
    text-transform: uppercase !important; color: var(--km-accent) !important; background: none !important; border: 0 !important;
    padding: 0 !important; margin: 0 0 4px !important; box-shadow: none !important;
}
.km-main .km-hero [class*="eyebrow-dot"] { display: none !important; }

/* last-updated / verified notes → one subtle line */
.km-main .km-hero [class*="updated"], .km-main .km-hero .km-verified, .km-main .km-hero .km-rates-asof {
    display: block !important; font: 400 14px/1.5 var(--km-font) !important; color: var(--km-faint) !important; background: none !important;
    border: 0 !important; padding: 0 !important; margin: 0 0 12px !important; max-width: 720px; text-align: left !important;
}
.km-main .km-hero [class*="updated"] *, .km-main .km-hero .km-verified *, .km-main .km-hero .km-rates-asof * { font: inherit !important; color: inherit !important; background: none !important; }
.km-main .km-hero [class*="updated"] strong, .km-main .km-hero [class*="updated"] b, .km-main .km-hero .km-rates-asof strong { font-weight: 600 !important; color: var(--km-muted) !important; }
.km-main .km-hero [class*="updated"] a, .km-main .km-hero .km-verified a, .km-main .km-hero .km-rates-asof a { color: var(--km-accent) !important; }

/* clutter: feature bullet lists + duplicate privacy pill rows (privacy bar says it) */
.km-main .km-hero [class*="feat-list"], .km-main .km-hero .ctr-hero-feats, .km-main .km-hero .ccp-feature-list, .km-main .km-hero .ssml-feat-chips,
.km-main .km-hero .ccp-head-pills, .km-main .km-hero .ctr-header-pills, .km-main .km-hero .hero-pills, .km-main .km-hero .tool-badges,
.km-main .km-hero .sqp-chips, .km-main .km-hero .ct-badges, .km-main .km-hero .pq-badges, .km-main .km-hero .s3v-trust { display: none !important; }

/* remaining pills / badges / tags → one style */
.km-main .km-hero [class*="pill"]:not([class*="pills"]):not(.km-privacy), .km-main .km-hero [class*="chip"]:not([class*="chips"]),
.km-main .km-hero .hero-tag, .km-main .km-hero [class*="badge"]:not([class*="badges"]):not(.hero-badge):not([class*="hero-badge-"]):not(.ts-badge):not(.pq-badge) {
    display: inline-flex !important; align-items: center; gap: 6px; font: 600 12.5px/1 var(--km-font) !important; letter-spacing: .02em !important;
    text-transform: none !important; color: var(--km-soft-ink) !important; background: var(--km-soft) !important;
    border: 1px solid transparent !important; border-radius: 999px !important; padding: 6px 12px !important; box-shadow: none !important;
}
.km-main .km-hero [class*="pills"], .km-main .km-hero [class*="badges"], .km-main .km-hero .hero-tags, .km-main .km-hero .ac-status-bar {
    display: flex !important; flex-wrap: wrap; gap: 8px !important; margin: 0 0 14px !important; background: none !important; border: 0 !important; padding: 0 !important;
}

/* live side panels → matching cards */
.km-main .km-hero [class*="stat-panel"], .km-main .km-hero [class*="score-panel"], .km-main .km-hero .ctr-hero-stats, .km-main .km-hero .cw-hero-panel,
.km-main .km-hero .ts-hero-live, .km-main .km-hero .hero-badge, .km-main .km-hero .ac-overall-score, .km-main .km-hero .s3v-score-ring,
.km-main .km-hero .hero-stats, .km-main .km-hero .ssml-stats, .km-main .km-hero .acm-stats-row, .km-main .km-hero .pq-stats-row, .km-main .km-hero .ac-stat-row {
    background: var(--km-surface) !important; border: 1px solid var(--km-border) !important; border-radius: 14px !important;
    box-shadow: var(--km-card-shadow) !important; padding: 18px 20px !important; backdrop-filter: none !important;
}
.km-main .km-hero [class*="stat-panel"] [class*="title"], .km-main .km-hero [class*="score-panel"] [class*="title"], .km-main .km-hero .ctr-hero-stats-title,
.km-main .km-hero .cw-hp-title, .km-main .km-hero .ts-live-label, .km-main .km-hero .hero-badge-label {
    font: 700 12px var(--km-font) !important; letter-spacing: .08em !important; text-transform: uppercase !important; color: var(--km-faint) !important; border: 0 !important; margin-bottom: 10px !important;
}
.km-main .km-hero .hero-stats .hstat, .km-main .km-hero .ssml-stat, .km-main .km-hero .acm-stat, .km-main .km-hero .pq-stat, .km-main .km-hero .ac-stat { background: none !important; border: 0 !important; box-shadow: none !important; }

.km-main .km-hero .km-privacy { margin-top: 18px !important; }

@media (max-width: 900px) {
    .km-main .km-hero, :root[data-theme="light"] .km-main .km-hero, :root[data-theme="dark"] .km-main .km-hero { padding: 24px 16px 20px !important; }
    .km-main .km-hero > div:not(.km-std), .km-main .km-hero [class$="-hero-inner"], .km-main .km-hero [class*="-masthead-inner"], .km-main .km-hero .s3v-head-inner { flex-direction: column !important; align-items: stretch !important; grid-template-columns: minmax(0,1fr) !important; }
    .km-main .km-hero p:not(.km-privacy), .km-main .km-hero [class*="hero-desc"] { font-size: 16.5px !important; }
}
.km-main .km-hero [class*="eyebrow"]::before, .km-main .km-hero [class*="kicker"]::before, .km-main .km-hero [class$="-hero-tag"]::before,
.km-main .km-hero .sqp-tag::before, .km-main .km-hero .conv-hero-tag::before, .km-main .km-hero [class*="panel"] [class*="title"]::before,
.km-main .km-hero .ctr-hero-stats-title::before, .km-main .km-hero .cw-hp-title::before { content: none !important; display: none !important; }
.km-main .km-hero h1 span[style] { white-space: nowrap; display: inline-block; }
/* CTR "last updated" strip sits just above its hero: make it the same subtle note */
.ctr-updated-strip { background: var(--km-hero-band) !important; border: 0 !important; padding: 18px 32px 0 !important; text-align: left !important; display: block !important; }
.ctr-updated-strip, .ctr-updated-strip * { font: 400 14px/1.5 var(--km-font) !important; color: var(--km-faint) !important; background: none !important; letter-spacing: 0 !important; text-transform: none !important; display: inline !important; }
.ctr-updated-strip svg { display: none !important; }
.ctr-updated-strip strong, .ctr-updated-strip b { font-weight: 600 !important; color: var(--km-muted) !important; }
.ctr-updated-strip + .km-hero { padding-top: 14px !important; }
@media (max-width: 900px) { .ctr-updated-strip { padding: 14px 16px 0 !important; } }
.ctr-updated-strip { display: block !important; }
.km-main .km-hero .ccp-head-pills, .km-main .km-hero .ctr-header-pills, .km-main .km-hero .hero-pills, .km-main .km-hero .tool-badges,
.km-main .km-hero .sqp-chips, .km-main .km-hero .ct-badges, .km-main .km-hero .pq-badges { display: none !important; }

/* ══ Footer fixes (mobile) ══════════════════════════════════════════════ */
.km-footer, .km-footer * { text-align: left !important; }
.km-footer .km-logo { justify-content: flex-start; }
@media (max-width: 900px) {
    .km-footer-inner { grid-template-columns: 1fr 1fr; gap: 28px 20px; padding: 32px 20px 24px; }
    .km-footer-brand { grid-column: 1 / -1; }
    .km-footer-brand p { max-width: none; }
    .km-footer-col:last-child { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; gap: 8px 22px; }
    .km-footer-col:last-child h3 { width: 100%; }
    .km-footer-col a { font-size: 15.5px; padding: 3px 0; }
    .km-footer-bottom { flex-direction: column; align-items: flex-start; gap: 12px; padding: 18px 20px 96px; }
    .km-footer-legal { flex-wrap: wrap; gap: 8px 20px; }
}

/* ══ Sidebar polish ═════════════════════════════════════════════════════ */
.km-side { padding: 18px 12px 48px; scrollbar-width: thin; scrollbar-color: var(--km-side-hover) transparent; }
.km-side::-webkit-scrollbar { width: 6px; } .km-side::-webkit-scrollbar-thumb { background: var(--km-side-hover); border-radius: 6px; }
.km-side-group { margin-bottom: 20px; }
.km-side-label { display: flex; align-items: center; gap: 8px; font: 700 12px var(--km-head) !important; letter-spacing: .09em !important; text-transform: uppercase !important; color: var(--km-faint) !important; padding: 6px 10px 8px !important; }
.km-side-label::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--km-accent); flex: none; }
.km-side-group:nth-child(2) .km-side-label::before { background: #e8a33d; }
.km-side-group:nth-child(3) .km-side-label::before { background: #5b8def; }
.km-side ul { gap: 1px; }
.km-side a { position: relative; border-radius: 8px; padding: 7px 10px 7px 14px; font-size: 14.5px; color: var(--km-muted); transition: background .15s, color .15s, padding-left .15s; }
.km-side a::before { content: ""; position: absolute; left: 4px; top: 50%; width: 3px; height: 0; border-radius: 3px; background: var(--km-accent); transform: translateY(-50%); transition: height .15s; }
.km-side a:hover { background: var(--km-surface); color: var(--km-ink); padding-left: 18px; }
:root[data-theme="dark"] .km-side a:hover { background: var(--km-surface-2); }
.km-side a:hover::before { height: 14px; }
.km-side a.is-current { background: var(--km-accent); color: #fff; font-weight: 600; box-shadow: 0 2px 8px rgba(31,138,112,.28); padding-left: 14px; }
.km-side a.is-current::before { display: none; }
:root[data-theme="dark"] .km-side a.is-current { color: #0b1513; }
.km-side-group + .km-side-group { border-top: 1px solid var(--km-border); padding-top: 14px; }

/* MP3 converter: standard tool width inside the content column */
.conv-page { max-width: 1100px !important; margin: 0 !important; padding: 24px 32px 48px !important; }
@media (max-width: 900px) { .conv-page { padding: 20px 16px 40px !important; } }

/* ══════════════════════════════════════════════════════════════════════════
   STANDARD TOOL HERO (header.php + includes/km-tool-meta.php)
   Same label, H1, lead, "Last updated" line and privacy note on every tool;
   live panels from each tool sit in the right-hand column.
   ══════════════════════════════════════════════════════════════════════════ */
.km-tool-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 360px); gap: 28px; align-items: start;
    background: var(--km-hero-band); border-bottom: 1px solid var(--km-border); padding: 30px 32px 26px; margin-top: 14px; }
.km-tool-head.no-aside { grid-template-columns: minmax(0, 1fr); }
.km-tool-head-main { max-width: 820px; }
.km-tool-label { font: 700 12.5px/1.2 var(--km-font); letter-spacing: .08em; text-transform: uppercase; color: var(--km-accent); margin: 0 0 8px; }
.km-tool-head h1 { font: 800 clamp(1.85rem, 3.1vw, 2.55rem)/1.15 var(--km-head); letter-spacing: -0.02em; color: var(--km-ink); margin: 0 0 12px; }
.km-tool-lead { font: 400 18px/1.6 var(--km-font); color: var(--km-muted); margin: 0 0 12px; max-width: 760px; }
.km-tool-updated { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; font: 500 14px/1.4 var(--km-font); color: var(--km-faint); margin: 0 0 4px; }
.km-tool-updated time { font-weight: 700; color: var(--km-ink); }
.km-tool-updated svg { color: var(--km-accent); flex: none; }
.km-tool-badge-slot .km-privacy { margin: 14px 0 0 !important; max-width: none; }
.km-tool-head-aside { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.km-tool-head-aside > :not(.km-tool-status) { background: var(--km-surface) !important; border: 1px solid var(--km-border) !important; border-radius: 14px !important; box-shadow: var(--km-card-shadow) !important; padding: 16px 18px !important; margin: 0 !important; max-width: 100% !important; width: auto !important; box-sizing: border-box; }
.km-tool-head-aside [class*="title"], .km-tool-head-aside .ts-live-label, .km-tool-head-aside .hero-badge-label { font: 700 12px var(--km-font) !important; letter-spacing: .08em !important; text-transform: uppercase !important; color: var(--km-faint) !important; }
.km-tool-head-aside [class*="title"]::before { content: none !important; }
.km-tool-status { display: flex; flex-wrap: wrap; gap: 8px; }
.km-tool-status > * { display: inline-flex !important; align-items: center; gap: 6px; font: 600 12.5px/1 var(--km-font) !important; color: var(--km-soft-ink) !important; background: var(--km-soft) !important; border: 0 !important; border-radius: 999px !important; padding: 6px 12px !important; text-transform: none !important; letter-spacing: 0 !important; }
/* retire the legacy band once its panels have moved; hide its old title text straight away */
.km-hero.km-hero-merged, .km-main:has(.km-tool-head) .ctr-updated-strip { display: none !important; }
.km-main:has(.km-tool-head) .km-hero .km-legacy-h1, .km-main:has(.km-tool-head) .km-hero [class*="eyebrow"], .km-main:has(.km-tool-head) .km-hero [class*="kicker"],
.km-main:has(.km-tool-head) .km-hero [class*="updated"], .km-main:has(.km-tool-head) .km-hero [class$="-hero-tag"], .km-main:has(.km-tool-head) .km-hero .km-rates-asof,
.km-main:has(.km-tool-head) .km-hero .km-verified, .km-main:has(.km-tool-head) .km-hero > div p:not(.km-privacy) { display: none !important; }
@media (max-width: 900px) {
    .km-tool-head { grid-template-columns: minmax(0, 1fr); padding: 22px 16px 20px; gap: 16px; }
    .km-tool-lead { font-size: 16.5px; }
}