/* ============================================================
   KimaraCode Editorial Orbit - shared site system
   Quiet globally, expressive on indexes, restrained for reading.
   ============================================================ */

:root {
  --kc-bg: #f2ecdf;
  --kc-bg-elev: #fffdf7;
  --kc-ink: #18261f;
  --kc-kimara: #777777;
  --kc-code: #a8aaa0;
  --kc-muted: #7d776c;
  --kc-kimara-text: #6b6b6b;
  --kc-muted-text: #6f6a60;
  --kc-rule: rgba(24,38,31,.16);
  --kc-rule-soft: rgba(24,38,31,.09);
  --kc-bg-dark: #111c16;
  --kc-bg-elev-dark: #19271f;
  --kc-ink-dark: #f2ecdf;
  --kc-rule-dark: rgba(242,236,223,.17);
  --kc-rule-soft-dark: rgba(242,236,223,.09);
  --orbit-ink: #18261f;
  --orbit-paper: #f2ecdf;
  --orbit-sheet: #fffdf7;
  --orbit-rust: #cb4630;
  --orbit-rust-text: #b8412c;
  --orbit-leaf: #355e4d;
  --orbit-lime: #c7dd5a;
  --orbit-blue: #b8d2de;
  --orbit-page-title-tracking: -.045em;
  --orbit-legal-title-tracking: -.04em;
  --orbit-app-display-leading: .92;
  --orbit-app-section-leading: 1;
}

/* Text on theme-controlled dark surfaces needs the lighter rust step. The
   paper/leaf editorial panels keep the darker text-safe rust declared above. */
[data-theme="dark"] .kc-header,
[data-theme="dark"] .kc-studio-view .kc-hero-masthead,
[data-theme="dark"] .kc-studio-view .kc-about,
[data-theme="dark"] .kc-studio-view .kc-cat-page,
[data-theme="dark"] .kc-apps-editorial,
[data-theme="dark"] .kc-guide,
[data-theme="dark"] .kc-legal,
[data-theme="dark"] .kc-article,
[data-theme="dark"] .kc-releases { --orbit-rust-text: #ed8a74; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .kc-header,
  :root:not([data-theme="light"]) .kc-studio-view .kc-hero-masthead,
  :root:not([data-theme="light"]) .kc-studio-view .kc-about,
  :root:not([data-theme="light"]) .kc-studio-view .kc-cat-page,
  :root:not([data-theme="light"]) .kc-apps-editorial,
  :root:not([data-theme="light"]) .kc-guide,
  :root:not([data-theme="light"]) .kc-legal,
  :root:not([data-theme="light"]) .kc-article,
  :root:not([data-theme="light"]) .kc-releases { --orbit-rust-text: #ed8a74; }
}

/* Global shell - the quiet 20% layer. */
.kc-header {
  background: color-mix(in srgb, var(--bg) 97%, transparent);
  backdrop-filter: blur(18px) saturate(130%);
  -webkit-backdrop-filter: blur(18px) saturate(130%);
}
.kc-header-row { min-height: 72px; }
.kc-brand-mark { color: var(--orbit-leaf); }
.kc-brand-word { font-size: 15px; letter-spacing: -.03em; }
.kc-nav-link { font-family: var(--font-mono); font-size: 10px; letter-spacing: .07em; text-transform: uppercase; }
.kc-nav-link.active { color: var(--orbit-rust-text); text-decoration-color: var(--orbit-rust); }
.kc-icon-btn { width: 38px; height: 38px; border-radius: 50%; }
.kc-btn-primary { background: var(--orbit-leaf); color: var(--orbit-sheet); }
.kc-mono-link:hover { color: var(--orbit-rust-text); }

.kc-footer {
  position: relative;
  overflow: hidden;
  padding-top: 72px;
  border-top: 0;
  background: var(--orbit-ink);
  color: var(--orbit-sheet);
}
.kc-footer::before {
  content: "";
  position: absolute;
  width: 430px;
  aspect-ratio: 1;
  right: -210px;
  top: -250px;
  border: 1px solid rgba(255,253,247,.14);
  border-radius: 50%;
  box-shadow: 0 0 0 62px rgba(255,253,247,.025), 0 0 0 124px rgba(255,253,247,.02);
}
.kc-footer-sitemap,
.kc-footer-row { position: relative; z-index: 1; }
.kc-footer-sitemap { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; margin-bottom: 58px; border-top: 1px solid rgba(255,253,247,.18); border-bottom: 1px solid rgba(255,253,247,.18); }
.kc-footer-cat { padding: 22px 18px; border-right: 1px solid rgba(255,253,247,.18); color: rgba(255,253,247,.72); font-family: Georgia, "Times New Roman", serif; font-size: 18px; }
.kc-footer-cat:last-child { border-right: 0; }
.kc-footer-cat:hover { color: var(--orbit-lime); }
.kc-footer-brand .label .kimara { color: rgba(255,253,247,.78); }
.kc-footer-brand .label .code { color: var(--kc-code); }
.kc-footer-links a,
.kc-footer-meta,
.kc-footer-social a { color: rgba(255,253,247,.52); }
.kc-footer-links a:hover,
.kc-footer-social a:hover { color: var(--orbit-sheet); }

/* Homepage - 60% expression. */
.kc-studio-view { overflow: clip; background: var(--bg); }
.kc-studio-view .kc-hero-masthead {
  position: relative;
  min-height: 740px;
  padding: 78px 0 70px;
  overflow: hidden;
  background-image: linear-gradient(var(--rule-soft) 1px, transparent 1px), linear-gradient(90deg, var(--rule-soft) 1px, transparent 1px);
  background-size: 72px 72px;
}
.kc-studio-view .kc-hero-masthead > .kc-container { position: relative; z-index: 2; }
.kc-studio-orbit { position: absolute; border: 1px solid var(--rule); border-radius: 50%; }
.kc-studio-orbit-a { width: min(68vw, 940px); aspect-ratio: 1; right: -24vw; top: -39vw; box-shadow: 0 0 0 90px rgba(53,94,77,.025), 0 0 0 180px rgba(53,94,77,.018); }
.kc-studio-orbit-b { width: 250px; aspect-ratio: 1; left: -150px; bottom: -80px; }
.kc-studio-edition { display: inline-block; margin-bottom: 70px; padding: 9px 13px; background: var(--orbit-ink); color: var(--orbit-paper); font-family: var(--font-mono); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; transform: rotate(-1deg); }
.kc-studio-view .kc-hero-masthead .kc-hero-display { display: flex; margin-bottom: 32px; font-size: clamp(66px, 11vw, 150px); line-height: .73; letter-spacing: -.075em; }
.kc-studio-view .kc-hero-display .kimara { color: var(--kc-kimara); }
.kc-studio-view .kc-hero-display .code { color: var(--kc-code); font-family: var(--kc-wordmark-font, var(--font-mono)); font-style: normal; font-weight: 500; }
.kc-studio-view .kc-hero-tag { font-family: Georgia, "Times New Roman", serif; font-size: clamp(29px, 4vw, 46px); font-weight: 400; }
.kc-studio-view .kc-hero-sub { color: var(--fg2); }
.kc-studio-view .kc-masthead-meta { max-width: 760px; margin-top: 68px; padding-top: 24px; }
.kc-studio-view .kc-masthead-meta-item .k { color: var(--orbit-rust-text); }

.kc-studio-index {
  /* This chapter deliberately stays on the warm paper surface in both
     themes, so it also needs its own dark-on-paper semantic text tokens. */
  --fg1: var(--orbit-ink);
  --fg2: #56625c;
  --fg3: #68736d;
  --rule: rgba(24,38,31,.18);
  --rule-soft: rgba(24,38,31,.1);
  padding: 130px 0 142px;
  background: var(--orbit-sheet);
  color: var(--fg1);
}
.kc-studio-index .kc-section-head { display: grid; grid-template-columns: .55fr 1.45fr; gap: 40px; margin-bottom: 68px; }
.kc-studio-index .kc-section-head .eyebrow { padding-top: 12px; color: var(--orbit-rust-text); font-family: var(--font-mono); }
/* 110px fitted "Aktuelle Arbeit." but not "Aktuelle Arbeiten.", which is the
   correct German and two characters longer, so the heading broke to two lines.
   Sized to hold the longer German on one line in the 794px column; balance
   keeps any future wrap even rather than orphaning a word. */
.kc-studio-index .kc-section-head h2 { font-size: clamp(52px, 7vw, 92px); line-height: .82; letter-spacing: -.07em; text-wrap: balance; }
.kc-studio-index .kc-section-aside { grid-column: 2; max-width: 580px; font-family: Georgia, "Times New Roman", serif; font-size: 18px; }
.kc-studio-index .kc-contents { border: 0; border-radius: 0; background: transparent; }
.kc-studio-index .kc-contents-mast { padding: 18px 0; border-color: var(--rule); }
.kc-studio-index .kc-crow { grid-template-columns: 76px 1fr 44px; padding: 30px 20px 30px 0; }
.kc-studio-index .kc-crow:hover { padding-left: 18px; background: var(--orbit-paper); }
.kc-studio-index .kc-crow.is-featured { margin: 18px 0; padding: 42px 28px; border: 0; background: var(--orbit-leaf); color: var(--orbit-sheet); }
.kc-studio-index .kc-crow.is-featured:hover { padding-left: 38px; background: var(--orbit-rust); }
.kc-studio-index .kc-crow.is-featured .kc-cname,
.kc-studio-index .kc-crow.is-featured .kc-cdesc,
.kc-studio-index .kc-crow.is-featured .kc-cgo { color: var(--orbit-sheet); }
.kc-studio-index .kc-crow.is-featured .kc-cnum,
.kc-studio-index .kc-crow.is-featured .kc-ccount { color: var(--orbit-lime); }
.kc-studio-index .kc-cname { font-family: Georgia, "Times New Roman", serif; font-size: 32px; font-weight: 400; }
.kc-studio-index .kc-cnum { color: var(--orbit-rust-text); }
.kc-studio-approach { padding: 130px 0; border: 0; background: var(--orbit-leaf); color: var(--orbit-sheet); }
.kc-studio-approach .kc-manifesto { max-width: 920px; }
.kc-studio-approach .eyebrow { color: var(--orbit-lime); }
.kc-studio-approach .kc-manifesto p { color: var(--orbit-sheet); font-family: Georgia, "Times New Roman", serif; font-size: clamp(29px, 4.2vw, 50px); line-height: 1.12; }
.kc-studio-approach .kc-manifesto p.muted { max-width: 760px; color: rgba(255,253,247,.74); font-family: var(--font-sans); font-size: 16px; line-height: 1.65; }
.kc-studio-approach .kc-manifesto-more { color: var(--orbit-lime); }

/* About and quiet category pages. */
.kc-studio-view .kc-about { padding: 112px 0 140px; background-image: linear-gradient(var(--rule-soft) 1px, transparent 1px); background-size: 100% 42px; }
.kc-studio-view .kc-about-content { max-width: 900px; padding: 70px; background: var(--bg-elev); box-shadow: 16px 18px 0 var(--orbit-rust); }
.kc-studio-view .kc-about .eyebrow { color: var(--orbit-rust-text); font-family: var(--font-mono); }
.kc-studio-view .kc-about h1 { max-width: 820px; font-size: clamp(56px, 7vw, 92px); line-height: .86; letter-spacing: var(--orbit-page-title-tracking); }
.kc-studio-view .kc-about p { max-width: 720px; font-family: Georgia, "Times New Roman", serif; font-size: 20px; line-height: 1.52; }
.kc-studio-view .kc-about p.muted { font-family: var(--font-sans); font-size: 15px; }
.kc-about-editorial { margin-top: 64px; padding-top: 46px; border-top: 1px solid var(--rule); scroll-margin-top: calc(var(--header-h) + 24px); }
.kc-studio-view .kc-about-editorial h2 { max-width: 680px; margin: 12px 0 20px; font-size: clamp(34px, 4.5vw, 54px); line-height: 1; letter-spacing: -.04em; }
.kc-editorial-principles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 36px; margin-top: 36px; }
.kc-editorial-principles h3 { margin: 0 0 8px; font-size: 18px; letter-spacing: -.02em; }
.kc-studio-view .kc-editorial-principles p { margin: 0; font-family: var(--font-sans); font-size: 15px; line-height: 1.6; }
.kc-studio-view .kc-about-editorial > p.muted { margin-top: 34px; }
.kc-studio-view .kc-cat-page:not(.kc-apps-editorial) { min-height: 680px; padding: 64px 0 130px; background-image: linear-gradient(var(--rule-soft) 1px, transparent 1px), linear-gradient(90deg, var(--rule-soft) 1px, transparent 1px); background-size: 72px 72px; }
.kc-studio-view .kc-cat-page:not(.kc-apps-editorial) .kc-cat-page-head { max-width: 900px; margin: 78px 0 70px; }
.kc-studio-view .kc-cat-page:not(.kc-apps-editorial) .kc-cat-page-head .eyebrow { color: var(--orbit-rust-text); font-family: var(--font-mono); }
.kc-studio-view .kc-cat-page:not(.kc-apps-editorial) .kc-cat-page-head h1 { font-size: clamp(78px, 13vw, 172px); line-height: .72; letter-spacing: -.08em; }
.kc-studio-view .kc-cat-page:not(.kc-apps-editorial) .kc-cat-page-head .lead { max-width: 650px; font-family: Georgia, "Times New Roman", serif; font-size: 24px; }
.kc-studio-view .kc-empty { max-width: 740px; padding: 50px; border: 0; background: var(--orbit-leaf); color: var(--orbit-sheet); box-shadow: 14px 16px 0 var(--orbit-rust); transform: rotate(-.5deg); }
.kc-studio-view .kc-empty p { color: var(--orbit-sheet); font-family: Georgia, "Times New Roman", serif; font-size: 28px; }
.kc-studio-view .kc-empty p.note { color: rgba(255,253,247,.6); font-family: var(--font-mono); font-size: 11px; }

/* Apps catalog - the expressive 70% index. */
.kc-apps-editorial { position: relative; min-height: 900px; padding: 52px 0 130px; overflow: hidden; background-image: linear-gradient(var(--rule-soft) 1px, transparent 1px), linear-gradient(90deg, var(--rule-soft) 1px, transparent 1px); background-size: 72px 72px; }
.kc-apps-orbit { position: absolute; width: 720px; aspect-ratio: 1; right: -310px; top: -280px; border: 1px solid var(--rule); border-radius: 50%; box-shadow: 0 0 0 80px rgba(53,94,77,.025), 0 0 0 160px rgba(53,94,77,.018); }
.kc-apps-editorial > .kc-container { position: relative; z-index: 1; }
.kc-apps-editorial .kc-cat-page-head { max-width: 920px; margin: 72px 0 82px; }
.kc-apps-editorial .kc-cat-page-head .eyebrow { color: var(--orbit-rust-text); font-family: var(--font-mono); }
.kc-apps-editorial .kc-cat-page-head h1 { margin: 14px 0 30px; font-size: clamp(96px, 15vw, 190px); line-height: .68; letter-spacing: -.085em; }
.kc-apps-editorial .kc-cat-page-head .lead { max-width: 690px; font-family: Georgia, "Times New Roman", serif; font-size: clamp(23px, 2.8vw, 36px); line-height: 1.22; }
.kc-app-feature { position: relative; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(340px, .92fr); min-height: 720px; overflow: hidden; background: var(--orbit-leaf); color: var(--orbit-sheet); text-decoration: none; box-shadow: 0 34px 64px -44px rgba(24,38,31,.7); }
.kc-app-feature:hover { text-decoration: none; }
.kc-app-feature-tab { position: absolute; z-index: 4; left: 42px; top: -1px; padding: 13px 19px; background: var(--orbit-rust); color: var(--orbit-sheet); font-family: var(--font-mono); font-size: 9px; letter-spacing: .08em; }
.kc-app-feature-copy { position: relative; z-index: 2; display: flex; min-width: 0; flex-direction: column; padding: 86px 64px 56px; }
.kc-app-feature-id { display: flex; align-items: center; gap: 16px; }
.kc-app-feature-id img { width: 68px; height: 68px; border-radius: 15px; box-shadow: 0 16px 28px -18px rgba(0,0,0,.5); }
.kc-app-feature-id span { max-width: 220px; color: rgba(255,253,247,.78); font-family: var(--font-mono); font-size: 9px; line-height: 1.5; letter-spacing: .06em; text-transform: uppercase; }
.kc-app-feature h2 { max-width: 670px; margin: 58px 0 24px; color: var(--orbit-sheet); font-size: clamp(55px, 6.4vw, 90px); line-height: .82; letter-spacing: -.07em; }
.kc-app-feature-copy > p { max-width: 610px; color: rgba(255,253,247,.76); font-size: 15px; line-height: 1.62; }
.kc-app-feature dl { display: grid; grid-template-columns: repeat(3, 1fr); margin: auto 0 42px; padding-top: 34px; border-top: 1px solid rgba(255,253,247,.2); }
.kc-app-feature dl > div { padding-right: 18px; }
.kc-app-feature dt { margin-bottom: 7px; color: var(--orbit-lime); font-family: var(--font-mono); font-size: 8px; letter-spacing: .08em; text-transform: uppercase; }
.kc-app-feature dd { display: flex; align-items: flex-start; gap: 8px; margin: 0; color: rgba(255,253,247,.72); font-size: 11px; line-height: 1.4; }
.kc-app-feature-copy > strong { font-family: var(--font-mono); font-size: 10px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; }
.kc-app-feature-copy > strong span { display: inline-block; margin-left: 9px; transition: transform 180ms ease; }
.kc-app-feature:hover .kc-app-feature-copy > strong span { transform: translate(4px, -4px); }
.kc-app-feature-visual { position: relative; min-height: 720px; overflow: hidden; background: var(--orbit-rust); }
.kc-app-feature-ring { position: absolute; width: 560px; aspect-ratio: 1; left: -70px; top: 70px; border: 1px solid rgba(255,253,247,.34); border-radius: 50%; box-shadow: 0 0 0 62px rgba(255,253,247,.04), 0 0 0 124px rgba(255,253,247,.03); }
.kc-app-feature-visual picture { position: absolute; z-index: 2; left: 50%; bottom: -105px; width: min(78%, 390px); transform: translateX(-50%) rotate(2.5deg); transition: transform 320ms var(--ease-enter); }
.kc-app-feature:hover .kc-app-feature-visual picture { transform: translateX(-50%) translateY(-10px) rotate(1deg); }
.kc-app-feature-visual img { display: block; width: 100%; height: auto; }
.kc-app-feature-visual > span { position: absolute; z-index: 3; left: 28px; bottom: 28px; max-width: 190px; padding: 20px; background: var(--orbit-lime); color: var(--orbit-ink); font-family: Georgia, "Times New Roman", serif; font-size: 18px; line-height: 1.25; transform: rotate(-3deg); }
.kc-apps-principles { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 50px; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.kc-apps-principles span { display: flex; align-items: center; gap: 16px; padding: 24px; border-right: 1px solid var(--rule); font-family: var(--font-mono); font-size: 10px; letter-spacing: .04em; text-transform: uppercase; }
.kc-apps-principles span:last-child { border-right: 0; }
.kc-apps-principles b { display: grid; width: 34px; aspect-ratio: 1; place-items: center; border: 1px solid var(--rule); border-radius: 50%; color: var(--orbit-rust-text); font-weight: 500; }

/* Shared app index - enters after each hero, then stays as a compact wayfinder. */
.kc-app-subnav {
  position: sticky;
  top: 72px;
  z-index: 32;
  display: flex;
  align-items: center;
  gap: 22px;
  width: 100%;
  margin: 0 auto 58px;
  padding: 12px 14px;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  background: color-mix(in srgb, var(--bg) 93%, transparent);
  box-shadow: 0 12px 22px -22px rgba(24,38,31,.5);
  backdrop-filter: blur(16px) saturate(125%);
  -webkit-backdrop-filter: blur(16px) saturate(125%);
}
.kc-app-subnav > a.kc-app-subnav-label { flex: none; padding: 8px 0; color: var(--orbit-rust-text); font-family: var(--font-mono); font-size: 8px; letter-spacing: .08em; text-decoration: none; text-transform: uppercase; }
.kc-app-subnav > a.kc-app-subnav-label:hover { color: var(--orbit-ink); text-decoration: underline; text-underline-offset: 4px; }
.kc-app-subnav-links { display: flex; flex: 1; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.kc-app-subnav-links::-webkit-scrollbar { display: none; }
.kc-app-subnav a { flex: none; padding: 8px 11px; color: var(--fg2); font-family: var(--font-mono); font-size: 9px; letter-spacing: .04em; text-decoration: none; text-transform: uppercase; }
.kc-app-subnav a:hover { color: var(--orbit-rust-text); }
.kc-app-subnav a.active { background: var(--orbit-ink); color: var(--orbit-sheet); }
/* Product guides - editorial evidence pages, 45% expression. */
.kc-guide { position: relative; padding: 52px 0 130px; overflow: clip; background-image: linear-gradient(var(--rule-soft) 1px, transparent 1px); background-size: 100% 42px; }
.kc-guide::before { content: ""; position: absolute; width: 560px; aspect-ratio: 1; right: -270px; top: -260px; border: 1px solid var(--rule); border-radius: 50%; box-shadow: 0 0 0 68px rgba(53,94,77,.025), 0 0 0 136px rgba(53,94,77,.018); }
.kc-guide .kc-container { position: relative; z-index: 1; }
.kc-guide-content { max-width: 1080px; }
.kc-guide-hero { max-width: 920px; margin: 58px 0 54px; }
.kc-guide-hero .eyebrow { color: var(--orbit-rust-text); font-family: var(--font-mono); }
/* balance stops a display heading dropping one short word onto its own line.
   The German export title used to end "... CSV oder PDF / mit", which was fixed
   in the copy; this keeps the next one from needing a rewrite. */
.kc-guide-hero h1 { max-width: 920px; margin-bottom: 28px; font-size: clamp(58px, 8vw, 108px); line-height: var(--orbit-app-display-leading); letter-spacing: var(--orbit-page-title-tracking); text-wrap: balance; }
.kc-guide-hero p { max-width: 760px; font-family: Georgia, "Times New Roman", serif; font-size: clamp(20px, 2.4vw, 29px); line-height: 1.4; }
.kc-guide-highlights { gap: 14px; margin-bottom: 100px; padding: 0; overflow: visible; border-radius: 0; background: transparent; }
.kc-guide-highlights li { position: relative; min-height: 128px; padding: 26px 22px; border: 1px solid var(--rule); background: var(--bg-elev); box-shadow: 7px 8px 0 rgba(24,38,31,.07); font-family: Georgia, "Times New Roman", serif; font-size: 17px; }
.kc-guide-highlights li:nth-child(2) { background: color-mix(in srgb, var(--orbit-blue) 42%, var(--bg-elev)); transform: rotate(.7deg); }
.kc-guide-highlights li:nth-child(3) { background: color-mix(in srgb, var(--orbit-lime) 35%, var(--bg-elev)); transform: rotate(-.6deg); }
.kc-guide-sections { display: grid; gap: 30px; border: 0; }
.kc-guide-section,
.kc-guide-section.has-media,
.kc-guide-section.is-reverse.has-media { padding: clamp(42px, 6vw, 76px); border: 1px solid var(--rule); background: var(--bg-elev); }
.kc-guide-section:nth-child(even),
.kc-guide-section.has-media:nth-child(even),
.kc-guide-section.is-reverse.has-media:nth-child(even) { background: var(--orbit-leaf); color: var(--orbit-sheet); }
.kc-guide-section:nth-child(even) .kc-guide-copy h2 { color: var(--orbit-sheet); }
.kc-guide-section:nth-child(even) .kc-guide-copy p { color: rgba(255,253,247,.67); }
.kc-guide-copy h2 { font-size: clamp(34px, 4.2vw, 58px); line-height: var(--orbit-app-section-leading); letter-spacing: -.05em; }
.kc-guide-media a { padding: 0; background: transparent; box-shadow: none; transform: none; }
.kc-guide-media a:nth-child(even) { transform: none; }
.kc-guide-media img { border-radius: 0; filter: drop-shadow(0 24px 24px rgba(24,38,31,.16)); }
.kc-guide-media .kc-shot-cap { margin-top: 14px; color: currentColor; text-align: center; }
.kc-guide-related { padding-top: 100px; }
.kc-guide-related > h2 { color: var(--orbit-rust-text); }
.kc-guide-related-grid a { min-height: 190px; padding: 28px; border: 0; background: var(--orbit-blue); box-shadow: 9px 10px 0 rgba(24,38,31,.09); }
.kc-guide-related-grid a:nth-child(even) { background: var(--orbit-lime); }
.kc-guide-related-grid strong { max-width: 360px; font-family: Georgia, "Times New Roman", serif; font-size: 25px; font-weight: 400; line-height: 1.1; }
.kc-guide-related-grid span { border-color: rgba(24,38,31,.22); background: transparent; }
.kc-guide-related-grid a.kc-guide-related-all {
  gap: 10px;
  justify-content: flex-start;
  border: 1px solid var(--orbit-rust);
  background: var(--orbit-sheet);
}
.kc-guide-related-grid a.kc-guide-related-all:hover,
.kc-guide-related-grid a.kc-guide-related-all:focus-visible { border-color: var(--orbit-rust); background: var(--orbit-sheet); }
.kc-guide-related-all small { color: var(--orbit-rust-text); font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.kc-guide-related-all p { margin: 0; color: rgba(24,38,31,.7); font-size: 14px; line-height: 1.45; }
.kc-guide-related-all span { margin-top: auto; }
.kc-guide-end { margin-top: 88px; padding: 48px; border: 0; background: var(--orbit-rust); color: var(--orbit-sheet); }
.kc-guide-end p { color: rgba(255,253,247,.76); font-family: Georgia, "Times New Roman", serif; font-size: 19px; }
.kc-guide-end .kc-store-platform { color: rgba(255,253,247,.86); }
.kc-guide-end .kc-app-store-badge,
.kc-guide-end .kc-android-store-soon { border-radius: 8px; box-shadow: 0 0 0 1px rgba(255,253,247,.46); }
.kc-guide-end .kc-btn { border-color: rgba(255,253,247,.35); color: var(--orbit-sheet); }
.kc-guide-end .kc-mono-link { color: var(--orbit-sheet); }

/* FAQ and legal - 15% expression, maximum readability. */
.kc-legal { position: relative; padding: 52px 0 140px; overflow: clip; background: var(--bg); }
.kc-legal::before { content: ""; position: absolute; inset: 0 0 auto; height: 430px; opacity: .48; background-image: linear-gradient(var(--rule-soft) 1px, transparent 1px), linear-gradient(90deg, var(--rule-soft) 1px, transparent 1px); background-size: 72px 72px; mask-image: linear-gradient(#000, transparent); }
.kc-legal .kc-container { position: relative; z-index: 1; }
.kc-legal-content { max-width: 880px; }
.kc-legal-content > h1 { max-width: 850px; margin: 70px 0 22px; font-size: clamp(62px, 9vw, 118px); line-height: .78; letter-spacing: var(--orbit-legal-title-tracking); }
.kc-app-legal .kc-legal-content > h1 { line-height: var(--orbit-app-display-leading); }
.kc-legal .subtitle { max-width: 720px; margin-bottom: 54px; color: var(--fg2); font-family: Georgia, "Times New Roman", serif; font-size: clamp(19px, 2.4vw, 28px); line-height: 1.42; }
.kc-legal .kc-app-subnav { margin-bottom: 52px; }
/* Anchor offset has to clear whatever is sticky above it, and that differs by
   page: the app legal pages carry the header and the app subnav, while
   /privacy/ and /imprint/ are site level and carry only the header. One flat
   154px meant the site pages landed roughly 60px below their own heading.
   The header-only figures match #whats-new, which already had them. */
.kc-legal { --kc-sticky-stack: 88px; }
.kc-app-legal { --kc-sticky-stack: 143px; }
.kc-legal-content > section { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 8px 36px; margin: 0; padding: 34px 0; scroll-margin-top: var(--kc-sticky-stack); border-top: 1px solid var(--rule); }
.kc-legal-content > section:last-child { border-bottom: 1px solid var(--rule); }
.kc-legal section h2 { grid-column: 1; align-self: start; padding-top: 4px; color: var(--orbit-rust-text); font-family: var(--font-mono); font-size: 10px; }
.kc-legal section p,
.kc-legal section address,
.kc-legal section ul { grid-column: 2; font-size: 15px; line-height: 1.72; }
.kc-legal hr { margin: 40px 0; border-color: var(--orbit-rust); }
.kc-faq > section h2 { color: var(--fg1); font-family: Georgia, "Times New Roman", serif; font-size: 23px; font-weight: 400; line-height: 1.2; text-transform: none; }
.kc-faq > section p { color: var(--fg2); }

/* Releases - an edition log rather than a developer table. */
.kc-releases { position: relative; padding: 52px 0 130px; background-image: linear-gradient(var(--rule-soft) 1px, transparent 1px); background-size: 100% 42px; }
.kc-releases .kc-app-subnav { margin: 58px auto 0; }
.kc-rel-hero { max-width: 960px; margin: 62px auto 20px; padding: 58px; background: var(--orbit-leaf); color: var(--orbit-sheet); box-shadow: 14px 16px 0 var(--orbit-rust); }
.kc-rel-hero .kc-app-id { align-items: flex-start; }
.kc-rel-hero .kc-app-id h1 { color: var(--orbit-sheet); font-size: clamp(54px, 7vw, 88px); line-height: var(--orbit-app-display-leading); letter-spacing: var(--orbit-page-title-tracking); }
.kc-rel-hero .kc-rel-version,
.kc-rel-hero .kc-rel-version .v,
.kc-rel-hero .lead { color: rgba(255,253,247,.7); }
/* .now and .sep were left behind when this panel went dark: both kept the
   light-theme --fg3, which is a mid grey, and sat on leaf green at 1.37:1.
   Same story for the status dot, --intent-positive being a dark green on dark
   green at 1.23:1. Lime is the accent this surface already uses elsewhere. */
.kc-rel-hero .kc-rel-version .now { color: rgba(255,253,247,.76); }
.kc-rel-hero .kc-rel-version .sep { color: rgba(255,253,247,.55); }
.kc-rel-hero .kc-status-dot,
.kc-app-feature .kc-status-dot { background: var(--orbit-lime); }
.kc-rel-body { max-width: 880px; margin-top: 96px; }
.kc-rel-section { margin-bottom: 92px; }
.kc-rel-section > .eyebrow { color: var(--orbit-rust-text); font-family: var(--font-mono); }
.kc-rel-section h2 { font-size: clamp(43px, 5vw, 66px); line-height: var(--orbit-app-section-leading); letter-spacing: -.055em; }
.kc-rel-section .kc-rel-intro { max-width: 660px; font-family: Georgia, "Times New Roman", serif; font-size: 18px; }
.kc-changelog { display: grid; gap: 18px; border: 0; }
.kc-rel { padding: 32px; border: 1px solid var(--rule); background: var(--bg-elev); box-shadow: 7px 8px 0 rgba(24,38,31,.07); }
.kc-rel-v { color: var(--orbit-rust-text); }
.kc-soon { border: 0; }
.kc-soon-row { margin-bottom: 12px; padding: 24px; border: 1px solid var(--rule); background: var(--bg-elev); }
.kc-rel-foot { border-color: var(--orbit-rust); }

@media (max-width: 900px) {
  .kc-app-feature { grid-template-columns: 1fr; }
  .kc-app-feature-visual { min-height: 600px; }
  .kc-app-feature-copy { min-height: 680px; }
  .kc-guide-highlights { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  /* App wayfinders become edge-to-edge together while their page copy keeps
     the shared responsive gutter. The gutter token follows the container, so
     this does not need per-viewport offsets. Its fallback also keeps a
     staggered CDN rollout of the shared and editorial stylesheets harmless. */
  .kc-container > .kc-app-subnav {
    --kc-app-subnav-gutter: var(--kc-page-gutter, 32px);
    width: calc(100% + (2 * var(--kc-app-subnav-gutter)));
    margin-inline: calc(-1 * var(--kc-app-subnav-gutter));
  }
}

@media (max-width: 600px) {
  .kc-container > .kc-app-subnav {
    --kc-app-subnav-gutter: var(--kc-page-gutter, 20px);
  }
}

@media (max-width: 660px) {
  .kc-header-row { min-height: 64px; }
  .kc-footer { padding-top: 50px; }
  .kc-footer-sitemap { grid-template-columns: repeat(2, 1fr); margin-bottom: 42px; }
  .kc-footer-cat { border-bottom: 1px solid rgba(255,253,247,.18); font-size: 16px; }
  .kc-footer-cat:nth-child(even) { border-right: 0; }
  .kc-footer-row { align-items: flex-start; flex-direction: column; }
  .kc-studio-view .kc-hero-masthead { min-height: 690px; padding-top: 54px; background-size: 42px 42px; }
  .kc-studio-edition { margin-bottom: 80px; }
  /* The wordmark is one nowrap line, so it has to fit the container outright:
     at 18vw "KimaraCode" ran past the right edge of a 393pt phone and was cut
     mid-word. 13.5vw leaves room at every width down to 320pt. */
  .kc-studio-view .kc-hero-masthead .kc-hero-display { font-size: clamp(38px, 13.5vw, 78px); }
  .kc-studio-view .kc-hero-tag { font-size: 29px; }
  .kc-studio-view .kc-masthead-meta { margin-top: 56px; }
  .kc-studio-index { padding: 94px 0 100px; }
  .kc-studio-index .kc-section-head { grid-template-columns: 1fr; gap: 18px; }
  .kc-studio-index .kc-section-head h2 { font-size: 62px; }
  .kc-studio-index .kc-section-aside { grid-column: 1; }
  .kc-studio-index .kc-crow { grid-template-columns: 38px 1fr; padding: 22px 0; }
  .kc-studio-index .kc-crow.is-featured { padding: 30px 20px; }
  .kc-studio-index .kc-crow.is-featured:hover { padding-left: 24px; }
  .kc-studio-index .kc-cname { font-size: 25px; }
  .kc-studio-approach { padding: 94px 0; }
  .kc-studio-approach .kc-manifesto p { font-size: 31px; }
  .kc-studio-view .kc-about { padding: 70px 0 90px; }
  .kc-studio-view .kc-about-content { padding: 44px 24px; box-shadow: 10px 12px 0 var(--orbit-rust); }
  /* The card is only ~305px wide inside its padding at 393pt, and a German
     compound like "unabhaengiges" set at 54px is wider than that, so the
     heading broke out over the shadow. Smaller, and hyphenating as a backstop
     for whatever compound the copy uses next. */
  .kc-studio-view .kc-about h1 {
    font-size: 42px;
    -webkit-hyphens: auto;
    hyphens: auto;
  }
  .kc-studio-view .kc-about p { font-size: 18px; }
  .kc-studio-view .kc-cat-page:not(.kc-apps-editorial) { padding-bottom: 90px; background-size: 42px 42px; }
  .kc-studio-view .kc-cat-page:not(.kc-apps-editorial) .kc-cat-page-head { margin: 62px 0 58px; }
  .kc-studio-view .kc-cat-page:not(.kc-apps-editorial) .kc-cat-page-head h1 { font-size: 78px; }
  .kc-studio-view .kc-empty { padding: 34px 26px; box-shadow: 9px 10px 0 var(--orbit-rust); }
  .kc-studio-view .kc-empty p { font-size: 23px; }
  .kc-apps-editorial { padding: 42px 0 90px; background-size: 42px 42px; }
  .kc-apps-editorial .kc-cat-page-head { margin: 58px 0 62px; }
  .kc-apps-editorial .kc-cat-page-head h1 { font-size: 96px; }
  .kc-apps-editorial .kc-cat-page-head .lead { font-size: 24px; }
  .kc-app-feature-copy { min-height: 0; padding: 68px 24px 50px; }
  .kc-app-feature-tab { left: 18px; }
  .kc-app-feature h2 { margin-top: 44px; font-size: clamp(36px, 11.5vw, 50px); }
  .kc-app-feature-copy > p { font-size: 14px; }
  .kc-app-feature dl { grid-template-columns: 1fr; gap: 17px; margin-top: 46px; }
  .kc-app-feature-copy > strong { margin-top: 34px; }
  .kc-app-feature-visual { min-height: 540px; }
  .kc-app-feature-visual picture { bottom: -80px; width: 76%; }
  .kc-app-feature-visual > span { left: 18px; bottom: 22px; }
  .kc-apps-principles { grid-template-columns: 1fr; }
  .kc-apps-principles span { border-right: 0; border-bottom: 1px solid var(--rule); }
  .kc-apps-principles span:last-child { border-bottom: 0; }
  .kc-app-subnav { top: 64px; display: block; margin-bottom: 46px; }
  .kc-app-subnav-label { display: block; margin: 4px 10px 8px; }
  .kc-app-subnav-links { margin-right: 0; padding-right: 20px; }
  .kc-guide { padding: 40px 0 90px; }
  .kc-guide-hero { margin: 48px 0 42px; }
  .kc-guide-hero h1 { font-size: 54px; }
  .kc-guide-hero p { font-size: 20px; }
  .kc-guide-highlights { display: flex; gap: 14px; margin: 0 -20px 72px 0; padding: 0 20px 18px 0; overflow-x: auto; }
  .kc-guide-highlights li { flex: 0 0 min(76vw, 300px); min-height: 120px; }
  .kc-guide-section,
  .kc-guide-section.has-media,
  .kc-guide-section.is-reverse.has-media { padding: 34px 24px; }
  .kc-guide-copy h2 { font-size: 39px; }
  .kc-guide-related { padding-top: 74px; }
  .kc-guide-end { margin-top: 72px; padding: 34px 24px; }
  .kc-legal { padding: 40px 0 90px; }
  .kc-legal-content > h1 { margin-top: 54px; font-size: 62px; }
  .kc-legal .subtitle { margin-bottom: 60px; font-size: 20px; }
  .kc-legal { --kc-sticky-stack: 76px; }
  .kc-app-legal { --kc-sticky-stack: 160px; }
  .kc-legal-content > section { display: block; padding: 28px 0; }
  .kc-legal section h2 { margin-bottom: 14px; }
  .kc-legal section p,
  .kc-legal section address,
  .kc-legal section ul { font-size: 14px; }
  .kc-faq > section h2 { font-size: 21px; }
  .kc-releases { padding: 40px 0 90px; }
  .kc-rel-hero { margin-top: 52px; padding: 38px 24px; box-shadow: 9px 10px 0 var(--orbit-rust); }
  .kc-rel-hero .kc-app-id { flex-direction: column; }
  .kc-rel-hero .kc-app-id h1 { font-size: 54px; }
  .kc-rel-body { margin-top: 74px; }
  .kc-rel-section h2 { font-size: 45px; }
  .kc-rel { display: block; padding: 26px 22px; }
  .kc-rel-meta { margin-bottom: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .kc-app-feature-visual picture,
  .kc-app-feature-copy > strong span { transition: none; }
}
/* Ratgeber articles: markdown-driven editorial pages plus the hub list. */
.kc-article { padding: 108px 0 96px; background: var(--bg); }
.kc-article .kc-article-content { max-width: 760px; margin: 0 auto; }
.kc-article-hero { margin: 26px 0 50px; }
.kc-article-hero h1 { margin: 14px 0 16px; font-size: clamp(38px, 5.4vw, 64px); line-height: 1.04; letter-spacing: -.045em; text-wrap: balance; }
.kc-article-lead { max-width: 620px; color: var(--fg2); font-size: 18px; line-height: 1.6; }
.kc-article-byline { margin: 0 0 5px; color: var(--fg2); font-size: 13px; }
.kc-article-byline a { color: var(--fg1); text-decoration: underline; text-decoration-color: var(--orbit-rust); text-underline-offset: 3px; }
.kc-article-meta { margin: 0; color: var(--fg2); font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.kc-article-body { font-size: 17px; line-height: 1.72; }
.kc-article-body h2 { margin: 52px 0 18px; font-size: clamp(26px, 3.2vw, 36px); line-height: 1.14; letter-spacing: -.035em; }
.kc-article-body h3 { margin: 34px 0 12px; font-size: 20px; letter-spacing: -.02em; }
.kc-article-body p { margin: 0 0 18px; color: var(--fg2); }
.kc-article-body ul, .kc-article-body ol { margin: 0 0 18px; padding-left: 22px; }
.kc-article-body li { margin: 0 0 10px; color: var(--fg2); }
.kc-article-body a { color: inherit; text-decoration: underline; text-decoration-color: var(--orbit-rust); text-underline-offset: 3px; }
.kc-article-body a:hover { color: var(--orbit-rust-text); }
.kc-article-body strong { color: var(--fg1); }
.kc-article-faq { margin-top: 64px; }
.kc-article-faq h2 { margin-bottom: 18px; font-size: clamp(26px, 3.2vw, 36px); letter-spacing: -.035em; }
.kc-article-faq details { padding: 16px 0; border-top: 1px solid var(--rule); }
.kc-article-faq details:last-of-type { border-bottom: 1px solid var(--rule); }
.kc-article-faq summary { cursor: pointer; font-size: 17px; font-weight: 600; }
.kc-article-faq details p { margin: 12px 0 0; color: var(--fg2); line-height: 1.65; }
.kc-article-stand { margin-top: 42px; color: var(--fg2); font-family: var(--font-mono); font-size: 11px; letter-spacing: .05em; }
.kc-article-cta { position: relative; margin-top: 72px; padding: 30px 26px 26px; border: 1px solid var(--rule); background: var(--bg-elev); box-shadow: 7px 8px 0 rgba(24,38,31,.07); }
.kc-article-cta h2 { margin: 10px 0; font-size: 26px; letter-spacing: -.03em; }
.kc-article-cta p { margin: 0 0 14px; color: var(--fg2); line-height: 1.6; }
.kc-article-cta-title { color: inherit; text-decoration: none; }
.kc-article-cta-title::after { content: ""; position: absolute; inset: 0; cursor: pointer; }
.kc-article-cta-title:hover { color: var(--orbit-rust-text); text-decoration: none; }
.kc-article-cta .kc-article-cta-note { max-width: 62ch; margin: 18px 0 20px; font-size: 14px; line-height: 1.55; letter-spacing: 0; text-transform: none; }
.kc-article-cta .kc-store-choices,
.kc-article-cta > .kc-mono-link { position: relative; z-index: 1; }
.kc-article-cta .kc-mono-link { display: inline-block; margin-top: 14px; }
.kc-article-list { display: grid; gap: 22px; }
.kc-article-card { display: block; padding: 26px 24px; border: 1px solid var(--rule); background: var(--bg-elev); box-shadow: 7px 8px 0 rgba(24,38,31,.07); color: inherit; text-decoration: none; }
.kc-article-card:hover strong { color: var(--orbit-rust-text); }
.kc-article-card-meta { display: block; margin-bottom: 10px; color: var(--fg2); font-family: var(--font-mono); font-size: 10px; letter-spacing: .07em; text-transform: uppercase; }
.kc-article-card strong { display: block; margin-bottom: 8px; font-size: 22px; letter-spacing: -.025em; line-height: 1.15; }
.kc-article-card p { margin: 0 0 12px; color: var(--fg2); line-height: 1.55; }
@media (max-width: 760px) {
  .kc-article { padding: 84px 0 72px; }
  .kc-editorial-principles { grid-template-columns: 1fr; gap: 22px; }
}

/* Article-scoped variants: compact highlights and the device screenshot block. */
.kc-article .kc-guide-highlights { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); margin: 0 0 56px; list-style: none; }
.kc-article .kc-guide-highlights li { min-height: 104px; }
.kc-article-shots { margin-top: 56px; }
.kc-article-shots h2 { margin-bottom: 20px; font-size: clamp(26px, 3.2vw, 36px); letter-spacing: -.035em; }
.kc-article-shots-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 26px; }
.kc-article-shots figure { margin: 0; }
.kc-article-shots img { width: 100%; height: auto; }
.kc-article-shots .kc-shot-cap { margin-top: 10px; color: var(--fg2); font-family: var(--font-mono); font-size: 11px; letter-spacing: .05em; text-transform: uppercase; text-align: center; }

/* Article callout: rendered from a markdown blockquote. */
.kc-article-body blockquote { margin: 28px 0; padding: 18px 22px; border-left: 3px solid var(--orbit-rust); background: var(--bg-elev); }
.kc-article-body blockquote p { margin: 0; color: var(--fg1); font-family: Georgia, "Times New Roman", serif; font-size: 18px; line-height: 1.55; }
.kc-article .kc-guide-related { margin-top: 64px; }

/* Article TLDR box and in-article jump list. */
.kc-article-tldr { margin: 0 0 26px; padding: 20px 22px; border: 1px solid var(--rule); background: var(--bg-elev); box-shadow: 7px 8px 0 rgba(24,38,31,.07); }
.kc-article-tldr .eyebrow { display: block; margin-bottom: 10px; }
.kc-article-tldr ul { margin: 0; padding-left: 18px; }
.kc-article-tldr li { margin: 0 0 8px; color: var(--fg2); line-height: 1.55; }
.kc-article-tldr li:last-child { margin-bottom: 0; }
.kc-article .kc-jump { margin: 0 0 42px; }
.kc-article .kc-jump .eyebrow { display: block; margin-bottom: 12px; }
.kc-article .kc-jump ol { margin: 0; padding: 0; list-style: none; columns: 2; column-gap: 28px; }
.kc-article .kc-jump li { break-inside: avoid; margin-bottom: 9px; }
.kc-article .kc-jump a { color: var(--fg2); font-size: 14px; line-height: 1.45; text-decoration-color: var(--rule); text-underline-offset: 3px; }
.kc-article .kc-jump a:hover { color: var(--orbit-rust-text); }
@media (max-width: 560px) { .kc-article .kc-jump ol { columns: 1; } }

/* Clickable highlight cards and hub topic sections. */
.kc-article .kc-guide-highlights li.has-link { padding: 0; }
.kc-article .kc-guide-highlights li.has-link a { display: block; height: 100%; padding: 26px 22px; color: inherit; text-decoration: none; }
.kc-article .kc-guide-highlights li.has-link a:hover { color: var(--orbit-rust-text); }
.kc-article-topic { margin-bottom: 44px; }
.kc-article-topic-title { margin: 0 0 18px; font-size: clamp(22px, 2.6vw, 30px); letter-spacing: -.03em; }

/* A11y batch 2026-08-19: the tinted related cards keep fixed light
   backgrounds in both themes, so their text must stay ink, not theme fg. */
.kc-guide-related-grid a { color: var(--orbit-ink); }
.kc-guide-related-grid span { color: var(--orbit-ink); }
.kc-article .kc-jump a { text-decoration-color: var(--fg2); }
.kc-article .kc-guide-highlights li.has-link a:hover { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.kc-article-card-title { display: block; margin: 0 0 8px; font-size: 22px; font-weight: 600; letter-spacing: -.025em; line-height: 1.15; }
.kc-article-card:hover .kc-article-card-title { color: var(--orbit-rust-text); }

/* Hub v2: two-column card grid, collapsible topic sections, article tables. */
.kc-article-list { grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 18px; }
.kc-article-card { padding: 22px 20px; }
.kc-article-card-title { font-size: 19px; }
.kc-article-card p { font-size: 14px; }
details.kc-article-topic { margin-bottom: 12px; }
details.kc-article-topic[open] { margin-bottom: 36px; }
.kc-article-topic-summary { display: flex; align-items: baseline; gap: 14px; padding: 16px 0; border-top: 1px solid var(--rule); cursor: pointer; list-style: none; }
.kc-article-topic-summary::-webkit-details-marker { display: none; }
.kc-article-topic-summary::after { content: "\FF0B"; margin-left: auto; color: var(--fg2); font-family: var(--font-mono); font-size: 14px; }
details[open] > .kc-article-topic-summary::after { content: "\2212"; }
.kc-article-topic-summary h2 { margin: 0; }
.kc-article-topic-summary:hover .kc-article-topic-title { color: var(--orbit-rust-text); }
.kc-article-topic-count { color: var(--fg2); font-family: var(--font-mono); font-size: 11px; letter-spacing: .05em; text-transform: uppercase; }
details.kc-article-topic > .kc-article-list { padding-top: 8px; }
.kc-article-body table { width: 100%; margin: 0 0 18px; border-collapse: collapse; font-size: 15px; }
.kc-article-body th, .kc-article-body td { padding: 10px 12px; border: 1px solid var(--rule); color: var(--fg2); text-align: left; vertical-align: top; }
.kc-article-body th { background: var(--bg-elev); color: var(--fg1); font-weight: 600; }
@media (max-width: 600px) { .kc-article-body table { font-size: 13px; } .kc-article-body th, .kc-article-body td { padding: 7px 8px; } }

/* Ratgeber teaser on the DE app landing. */
.kc-launch-ratgeber { margin: 96px 0 0; }
.kc-launch-ratgeber h2 { margin: 10px 0 24px; font-size: clamp(30px, 4vw, 46px); letter-spacing: -.04em; }
.kc-launch-ratgeber .kc-mono-link { display: inline-block; margin-top: 20px; }
.kc-launch-ratgeber .kc-article-card-title { font-size: 18px; }

/* Hub: wider column so the card grid fits three per row on desktop. */
.kc-article-hub .kc-article-content { max-width: 1040px; }

/* Narrow viewports: the comparison table scrolls inside its own box instead
   of widening the page. display block trades some table semantics on small
   screens for a page that never pans horizontally. */
@media (max-width: 720px) {
  .kc-article-body table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; }
}
.kc-article-tldr-links { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 14px 0 0; }