/* DeskHero — deskhero.finnrmn.com
   Shared styles for the marketing (/), privacy (/privacy) and 404 pages.
   Brand tokens mirror the app's M3 light theme (deskhero/src/theme/tokens.ts).
   "Tactile Minimalism": tonal layers + offset bottom-borders, no heavy shadows.
   Clean & premium: generous whitespace, brand teal/orange as deliberate accents. */

/* =========================================================================
   1. Design tokens
   ========================================================================= */
:root {
  /* ----- Primary: teal group ----- */
  --teal: #006b5f; /* primary */
  --teal-hover: #00786a;
  --teal-bright: #14b8a6; /* primaryContainer */
  --teal-deep: #00423b; /* onPrimaryContainer */
  --teal-fixed: #71f8e4; /* primaryFixed — bright highlight */
  --primary: var(--teal);
  --primary-container: var(--teal-bright);
  --on-primary-container: var(--teal-deep);

  /* ----- Secondary: orange (energy / accents) ----- */
  --orange: #fea619; /* secondaryContainer */
  --orange-on: #684000; /* onSecondaryContainer */
  --orange-deep: #855300; /* secondary */
  --orange-soft: #ffddb8; /* secondaryFixed — soft tint */
  --secondary-container: var(--orange);
  --on-secondary-container: var(--orange-on);

  /* ----- Tertiary: burnt orange ----- */
  --tertiary-container: #ff8134;
  --on-tertiary-container: #642800;

  /* ----- Watch: indigo (accent only — mode chip) ----- */
  --watch: #1e3a8a;
  --watch-container: #4f7def;
  --on-watch-container: #000d3a;
  --watch-soft: #e3e9fb; /* derived soft tint */

  /* ----- Mints ----- */
  --mint: #c0ecea; /* app adaptive-icon background */
  --mint-soft: #e4f6f5; /* section band background */

  /* ----- Neutrals / M3 surface scale ----- */
  --ink: #181c1d; /* onSurface */
  --ink-soft: #3c4947; /* onSurfaceVariant */
  --surface: #f7fafb;
  --surface-low: #f1f4f5; /* surfaceContainerLow */
  --surface-container: #ebeeef;
  --surface-high: #e6e9ea; /* surfaceContainerHigh */
  --surface-variant: #e0e3e4;
  --surface-dim: #d7dadb;
  --card: #ffffff; /* surfaceContainerLowest */
  --surface-lowest: #ffffff;
  --outline: #6c7a77;
  --outline-variant: #bbcac6;

  /* ----- Status ----- */
  --error: #ba1a1a;

  /* ----- Footer ----- */
  --footer-bg: #181c1d;
  --footer-fg: #c9d4d3;
  --footer-muted: #9aa6a4;
  --footer-link: #8fe3d7;

  /* ----- Type ----- */
  --font-head: 'Lexend', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-body: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --fs-display: clamp(2rem, 1.2rem + 3.4vw, 3rem); /* 32 → 48 */
  --fs-h2: clamp(1.5rem, 1.18rem + 1.5vw, 2.125rem); /* 24 → 34 */
  --fs-h3: clamp(1.075rem, 1.02rem + 0.3vw, 1.25rem);
  --fs-lead: clamp(1.125rem, 1.06rem + 0.45vw, 1.25rem); /* 18 → 20 */
  --fs-body: 1.0625rem; /* 17 */
  --fs-label: 0.75rem; /* 12 */
  --lh-tight: 1.1;
  --lh-snug: 1.28;
  --lh-body: 1.6;
  --tracking-display: -0.02em;
  --tracking-label: 0.06em;

  /* ----- Spacing (8pt) ----- */
  --space-xs: 4px;
  --space-sm: 12px;
  --space-md: 24px;
  --space-lg: 40px;
  --space-xl: 64px;
  --space-2xl: 96px;
  --gutter: 20px;
  --space-section: clamp(3rem, 6vw, 6rem); /* 48 → 96 */
  --maxw: 1200px;
  --maxw-content: 1120px;
  --maxw-prose: 760px;

  /* ----- Radius ----- */
  --r-sm: 4px;
  --r-base: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-full: 9999px;

  /* ----- Elevation (subtle) ----- */
  --edge-width: 4px;
  --shadow-float: 0 8px 24px rgba(0, 107, 95, 0.12); /* = app elevation.level3 */

  /* ----- Motion ----- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --dur-fast: 150ms;
  --dur-base: 220ms;
  --dur-slow: 300ms;

  /* ----- Layout offsets (pinned header + mobile sub-nav) ----- */
  --header-h: 64px; /* matches .site-header__inner min-height */
  --subnav-h: 52px; /* privacy: mobile pinned title + TOC bar */
  --scroll-offset: calc(var(--header-h) + 12px); /* anchors land just below the fixed header */

  /* ----- Z-index ----- */
  --z-header: 100;
  --z-subnav: 90; /* privacy mobile pinned bar — below header, above content */
  --z-skip: 300;
}

/* =========================================================================
   2. Reset / base
   ========================================================================= */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--scroll-offset);
  -webkit-text-size-adjust: 100%;
}

body {
  /* `clip` (not `hidden`) prevents horizontal scroll WITHOUT turning <body>
     into a scroll container — `hidden` would make the sticky header anchor to
     <body> instead of the viewport, so it would never actually stick. Scoped to
     <body> (not the <html> root) to avoid root→viewport overflow propagation. */
  overflow-x: clip;
}

body {
  margin: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Sticky footer: main grows to fill the viewport so the footer sits at the
   bottom of the screen on short pages (e.g. the download page), while long
   pages still flow naturally. Pairs with the flex column on <body> above. */
main {
  flex: 1 0 auto;
}

img,
svg,
video {
  max-width: 100%;
}
img {
  height: auto;
}

/* Language visibility — driven by data-lang on <html> (see assets/i18n.js).
   No-JS default: <html data-lang="de"> shows German. */
[data-lang='de'] [lang='en'] {
  display: none;
}
[data-lang='en'] [lang='de'] {
  display: none;
}

a {
  color: var(--teal);
  text-underline-offset: 2px;
}
a:hover {
  color: var(--teal-deep);
}

:focus-visible {
  outline: 3px solid var(--teal-bright);
  outline-offset: 2px;
  border-radius: 3px;
}
:focus:not(:focus-visible) {
  outline: none;
}

:where(button, [role='button'], summary, a.btn) {
  touch-action: manipulation;
}

/* Screen-reader-only + skip link */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: var(--z-skip);
  background: var(--teal);
  color: #fff;
  font-family: var(--font-head);
  font-weight: 600;
  padding: 10px 16px;
  border-radius: 0 0 var(--r-base) 0;
  text-decoration: none;
}
.skip-link:focus {
  left: 0;
}

/* =========================================================================
   3. Layout
   ========================================================================= */
.container {
  width: 100%;
  max-width: var(--maxw-content);
  margin-inline: auto;
  padding-left: max(var(--gutter), env(safe-area-inset-left));
  padding-right: max(var(--gutter), env(safe-area-inset-right));
}
.container--narrow {
  max-width: var(--maxw-prose);
}
.container--wide {
  max-width: var(--maxw);
}

section {
  padding: var(--space-section) 0;
}
section[id] {
  scroll-margin-top: 0; /* offset handled centrally by html { scroll-padding-top } */
}
section h2 {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  letter-spacing: -0.01em;
  margin: 0 0 12px;
  color: var(--ink);
}
.section__intro {
  color: var(--ink-soft);
  font-size: var(--fs-lead);
  max-width: 60ch;
  margin: 0 0 var(--space-lg);
}
.eyebrow {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--teal);
  margin: 0 0 8px;
}

/* =========================================================================
   4. Header + navigation
   ========================================================================= */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: rgba(247, 250, 251, 0.85);
  -webkit-backdrop-filter: saturate(150%) blur(10px);
  backdrop-filter: saturate(150%) blur(10px);
  border-bottom: 1px solid var(--outline-variant);
  padding-top: env(safe-area-inset-top);
  transition: box-shadow var(--dur-base) var(--ease-out);
}
/* Subtle elevation once the page is scrolled (set by ui.js) */
.site-header.is-scrolled {
  box-shadow: 0 2px 14px rgba(24, 28, 29, 0.1);
}
.site-header__inner {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 64px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--ink);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.1rem;
}
.brand img {
  width: 32px;
  height: 32px;
  border-radius: 8px;
}
.site-header__spacer {
  flex: 1;
}
.site-nav {
  display: flex;
  align-items: center;
  gap: 4px;
}
.site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-decoration: none;
  color: var(--ink);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 8px 14px;
  border-radius: var(--r-base);
}
.site-nav a:hover {
  color: var(--ink);
}
.site-nav a[aria-current='page'] {
  color: var(--teal);
  font-weight: 700;
}

/* Language toggle — minimal DE | EN text switch. The active language is marked
   by teal colour + weight (no pill chrome); works without JS via aria-pressed. */
.lang-toggle {
  display: inline-flex;
  align-items: center;
}
.lang-toggle button {
  position: relative;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.85rem;
  line-height: 1;
  border: 0;
  background: transparent;
  color: var(--ink-soft);
  padding: 10px 10px;
  cursor: pointer;
  border-radius: var(--r-sm);
  transition: color var(--dur-fast) var(--ease-out);
}
.lang-toggle button:hover {
  color: var(--ink);
}
.lang-toggle button.is-active,
.lang-toggle button[aria-pressed='true'] {
  color: var(--teal);
  font-weight: 700;
}
/* hairline divider between the two languages */
.lang-toggle button + button::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 14px;
  width: 1px;
  background: var(--outline-variant);
}

/* =========================================================================
   5. Buttons
   ========================================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  padding: 13px 22px;
  border-radius: var(--r-md);
  border: 0;
  transition: transform var(--dur-fast) var(--ease-out),
    background-color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out);
}
.btn:active {
  transform: translateY(2px);
}
.btn--primary {
  background: var(--teal);
  color: #fff;
  border-bottom: var(--edge-width) solid var(--teal-deep);
}
.btn--primary:hover {
  color: #fff;
  background: var(--teal-hover);
}
.btn--ghost {
  background: var(--card);
  color: var(--teal);
  border: 1.5px solid var(--outline-variant);
  border-bottom: var(--edge-width) solid var(--outline-variant);
}
.btn--ghost:hover {
  color: var(--teal-deep);
  border-color: var(--teal-hover);
  background: var(--mint-soft);
}
/* Leading icon inside a .btn (e.g. the download-page install buttons). The
   .btn flexbox + gap handles spacing; this only constrains the 24x24 SVGs. */
.btn__icon {
  width: 18px;
  height: 18px;
  flex: none;
}

/* =========================================================================
   6. Hero
   ========================================================================= */
.hero {
  position: relative;
  overflow: hidden;
  padding: clamp(40px, 7vw, 88px) 0 var(--space-2xl);
}
.hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
}
.hero__copy {
  max-width: 34rem;
}
.hero h1 {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
  margin: 18px 0 14px;
}
.hero .lead {
  font-size: var(--fs-lead);
  color: var(--ink-soft);
  max-width: 46ch;
  margin: 0 0 28px;
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.hero__mock {
  display: flex;
  justify-content: center;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--teal-deep);
  background: var(--mint);
  padding: 6px 12px;
  border-radius: var(--r-full);
}

/* =========================================================================
   7. CSS phone mockup (decorative, aria-hidden)
   ========================================================================= */
.phone {
  position: relative;
  width: min(300px, 80vw);
  aspect-ratio: 9 / 19;
  background: var(--ink);
  border-radius: var(--r-xl);
  padding: 10px;
  box-shadow: var(--shadow-float);
}
.phone__screen {
  position: relative;
  height: 100%;
  background: var(--surface);
  border-radius: 17px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.phone__home {
  position: absolute;
  left: 50%;
  bottom: 7px;
  transform: translateX(-50%);
  width: 36%;
  height: 4px;
  border-radius: var(--r-full);
  background: var(--ink);
  opacity: 0.85;
  z-index: 2;
}
.app {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.app__statusbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px 16px 2px;
  font-size: 11px;
  color: var(--ink);
}
.app__statusbar .time {
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: 0.01em;
}
.sysicons {
  display: flex;
  align-items: center;
  gap: 5px;
}
.sysicons svg {
  display: block;
  height: 11px;
  width: auto;
}
.ico--signal rect {
  fill: currentColor;
}
.ico--wifi {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
}
.ico--wifi circle {
  fill: currentColor;
  stroke: none;
}
.ico--batt .batt-shell {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.2;
  opacity: 0.45;
}
.ico--batt .batt-fill {
  fill: currentColor;
}
.ico--batt .batt-cap {
  fill: currentColor;
  opacity: 0.45;
}
.welcome {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  text-align: center;
  padding: 4px 18px 18px;
}
.welcome__dots {
  display: flex;
  align-items: center;
  gap: 4px;
  padding-top: 4px;
}
.wdot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--surface-variant);
}
.wdot--active {
  display: flex;
  width: 14px;
  height: 16px;
  padding-bottom: 2px;
  border-radius: var(--r-full);
  background: var(--on-tertiary-container);
}
.wdot--active::before {
  content: "";
  flex: 1;
  border-radius: var(--r-full);
  background: var(--tertiary-container);
}
.welcome__img {
  display: block;
  width: 100%;
  height: 170px;
  object-fit: contain;
}
.welcome__text {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.welcome__title {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 27px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0;
}
.welcome__body {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0;
}
.welcome__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 12px;
  border-radius: var(--r-lg);
  border-bottom: 4px solid var(--teal-deep);
  background: var(--teal);
  color: #fff;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 14px;
}

/* =========================================================================
   8. Stats
   ========================================================================= */
.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: var(--space-md);
}
.stat {
  background: var(--card);
  border: 2px solid var(--outline-variant);
  border-bottom: 4px solid var(--outline-variant);
  border-radius: var(--r-lg);
  padding: 24px 20px;
  text-align: center;
}
.stat .num {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.9rem;
  color: var(--teal);
  font-variant-numeric: tabular-nums;
}
.stat .lbl {
  color: var(--ink-soft);
  font-size: 0.95rem;
  margin-top: 2px;
}

/* =========================================================================
   9. Steps
   ========================================================================= */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: var(--space-md);
}
.step {
  background: var(--card);
  border: 2px solid var(--outline-variant);
  border-bottom: 4px solid var(--outline-variant);
  border-radius: var(--r-lg);
  padding: 24px;
}
.step .n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--r-full);
  background: var(--teal);
  color: var(--card);
  font-family: var(--font-head);
  font-weight: 700;
  margin-bottom: 14px;
}
.step h3 {
  font-family: var(--font-head);
  margin: 0 0 6px;
  font-size: 1.1rem;
}
.step p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.97rem;
}

/* =========================================================================
   10. Download page (platform toggle)
   ========================================================================= */
.download {
  padding-top: clamp(32px, 4vw, 44px);
  padding-bottom: var(--space-2xl);
}
.download__head {
  text-align: center;
  margin: 0 0 var(--space-lg);
}
.download__head .eyebrow {
  margin-bottom: 10px;
}
.download__head h1 {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
  margin: 0 0 12px;
}
.download__head .section__intro {
  max-width: 52ch;
  margin-inline: auto;
}

/* Segmented iOS | Android control — centered pill, brand-teal active state.
   Mirrors the lang toggle's is-active / aria-pressed contract (see i18n.js
   sibling logic in ui.js) so it also reads correctly with JavaScript off. */
.platform__switch {
  display: flex;
  justify-content: center;
  margin-bottom: var(--space-md);
}
.platform-toggle {
  display: inline-flex;
  gap: 4px;
  padding: 5px;
  background: var(--surface-container);
  border: 1px solid var(--outline-variant);
  border-radius: var(--r-full);
}
.platform-toggle button {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  cursor: pointer;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1;
  color: var(--ink-soft);
  background: transparent;
  padding: 11px 26px;
  border-radius: var(--r-full);
  transition: color var(--dur-fast) var(--ease-out),
    background-color var(--dur-fast) var(--ease-out);
}
.platform-toggle button:hover {
  color: var(--ink);
}
.platform-toggle button.is-active,
.platform-toggle button[aria-pressed='true'] {
  color: #fff;
  background: var(--teal);
}

/* Panes. Without JS (no .js on <html>) both panes stack and stay readable;
   with JS, only the selected platform's pane is shown. */
.platform-pane {
  max-width: var(--maxw-content);
  margin-inline: auto;
  text-align: left;
  /* .platform-pane is a <section>, so it would otherwise inherit the global
     section { padding: var(--space-section) 0 } — a ~88px band above (and below)
     the steps. It already sits inside the padded .download section, so it needs
     no vertical padding of its own. */
  padding-block: 0;
}
.platform-pane + .platform-pane {
  margin-top: var(--space-xl);
}
/* …but with JS only one pane is shown at a time. The hidden pane is still a DOM
   sibling, so without this reset the second pane (Android) would inherit the
   stacking margin above and sit lower than the first pane (iOS). */
html.js .platform-pane + .platform-pane {
  margin-top: 0;
}
.platform-pane h2 {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: var(--fs-h3);
  margin: 0 0 var(--space-md);
  color: var(--ink);
}
/* With JS the segmented toggle already names the platform, so the pane heading is
   redundant — keep it for the no-JS stacked view, hide it visually once JS runs. */
html.js .platform-pane h2 {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.platform-pane__lead {
  margin: 0;
  color: var(--ink-soft);
  font-size: var(--fs-lead);
}
html.js .platform[data-platform='ios'] .platform-pane[data-pane='android'],
html.js .platform[data-platform='android'] .platform-pane[data-pane='ios'] {
  display: none;
}

/* =========================================================================
   10b. Install guide — interactive stepper + phone preview (download page)
   Data-driven like the platform toggle: ui.js sets .is-active / .is-done on the
   steps and injects the active screenshot into the phone. All JS-only rules are
   gated on html.js, so without JS the <ol> with inline screenshots stays fully
   readable and the phone stage is hidden.
   ========================================================================= */
.guide {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  align-items: start;
}

/* ---- Step list ---------------------------------------------------------- */
.guide__steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-sm);
}
.guide__steptrigger {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  width: 100%;
  text-align: left;
  cursor: pointer;
  color: inherit;
  background: var(--card);
  border: 2px solid var(--outline-variant);
  border-bottom: var(--edge-width) solid var(--outline-variant);
  border-radius: var(--r-lg);
  padding: 15px 18px;
  transition: border-color var(--dur-fast) var(--ease-out),
    background-color var(--dur-fast) var(--ease-out);
}
.guide__steptrigger:hover {
  background: var(--mint-soft);
  border-color: var(--outline);
}
html.js .guide__step.is-active .guide__steptrigger {
  border-color: var(--teal);
  border-bottom-color: var(--teal-deep);
  background: var(--mint-soft);
}
.guide__badge {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--r-full);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--ink-soft);
  background: var(--surface-container);
  border: 2px solid var(--outline-variant);
  transition: background-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out);
}
html.js .guide__step.is-done .guide__badge {
  background: var(--mint);
  color: var(--teal-deep);
  border-color: var(--mint);
}
html.js .guide__step.is-active .guide__badge {
  background: var(--teal);
  color: #fff;
  border-color: var(--teal-deep);
}
html.js .guide__step--done.is-active .guide__badge {
  background: var(--orange);
  color: var(--orange-on);
  border-color: var(--orange-deep);
}
.guide__steptext {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-top: 5px;
}
.guide__steptitle {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1.02rem;
  line-height: 1.35;
  color: var(--ink);
}
html.js .guide__step:not(.is-active) .guide__steptitle {
  color: var(--ink-soft);
}
html.js .guide__step.is-active .guide__steptitle {
  color: var(--teal);
  font-weight: 700;
}
.guide__stepdesc {
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--ink-soft);
}

/* ---- Start step (step 1): install link + QR live INSIDE the step card ------
   Rather than a separate callout bar below the step, the install button + QR sit
   within step 1's own card: the <li> carries the card chrome, while the trigger
   (header row) and the action row below it are borderless, split by a hairline.
   Used by both panes — iOS and Android both flag step 1 as .guide__step--start. */
.guide__step--start {
  background: var(--card);
  border: 2px solid var(--outline-variant);
  border-bottom: var(--edge-width) solid var(--outline-variant);
  border-radius: var(--r-lg);
}
html.js .guide__step--start.is-active {
  border-color: var(--teal);
  border-bottom-color: var(--teal-deep);
  background: var(--mint-soft);
}
/* Header row: drop the standalone-card chrome — the <li> owns it now. */
.guide__step--start .guide__steptrigger,
.guide__step--start .guide__steptrigger:hover,
html.js .guide__step--start.is-active .guide__steptrigger {
  background: transparent;
  border: 0;
  border-radius: 0;
}
/* Action row: install button + QR, centered together on a single row
   (no wrap, so they stay side by side and on the same level on mobile too). */
.guide__startcard {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  margin-top: 0;
  padding: var(--space-sm) 18px 18px;
}
.guide__installbtn.is-disabled {
  opacity: 0.5;
  pointer-events: none;
}
.guide__qr {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
}
.guide__qrbox {
  flex: none;
  width: 92px;
  height: 92px;
  border-radius: var(--r-md);
  border: 2px dashed var(--outline);
  background-image: repeating-linear-gradient(
    45deg,
    var(--surface-container) 0 7px,
    var(--surface-variant) 7px 14px
  );
}
/* Real QR (set via download-config.js) — replaces .guide__qrbox in place. */
.guide__qrimg {
  flex: none;
  width: 92px;
  height: 92px;
  border-radius: var(--r-md);
  background: #fff;
  border: 2px solid var(--outline-variant);
  padding: 6px; /* quiet zone so the code stays scannable */
  box-sizing: border-box;
}
.guide__soon {
  /* Caption removed from the start card — the install button + QR speak for
     themselves, and the phone preview already carries the scan/coming-soon
     label. (JS still updates its text; it's just hidden here.) */
  display: none;
}

/* ---- No-JS inline screenshots (hidden once the phone stage takes over) ---- */
.guide__inlineimg {
  display: block;
  width: min(240px, 70%);
  height: auto;
  margin-top: 12px;
  border-radius: var(--r-md);
  border: 1px solid var(--outline-variant);
}
html.js .guide__inlineimg {
  display: none;
}

/* ---- Stage: phone preview + controls ------------------------------------ */
.guide__stage {
  display: none; /* no-JS: the list + inline images are the usable artefact */
}
html.js .guide__stage {
  display: grid;
  gap: 16px;
  justify-items: center;
}
.guide__phonewrap .phone {
  width: min(260px, 72vw);
}
.guide__media {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
}
.guide__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}
.guide__mediaplaceholder {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 24px;
  text-align: center;
  background: var(--mint-soft);
  color: var(--teal-deep);
  font-family: var(--font-head);
  font-weight: 700;
  line-height: 1.3;
}
.guide__mediaplaceholder img {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  box-shadow: var(--shadow-float);
}
/* Real QR in the phone preview (step 1). More specific than the rule above so
   it overrides the 64px app-icon sizing; large enough to scan off a screen. */
.guide__media .guide__mediaqr {
  width: min(190px, 64%);
  height: auto;
  aspect-ratio: 1 / 1;
  padding: 10px;
  background: #fff;
  border-radius: var(--r-md);
  box-sizing: border-box;
  box-shadow: var(--shadow-float);
}

/* 2-image in-frame gallery (native scroll-snap; JS only syncs the dots) */
.guide__gallery {
  display: flex;
  flex: 1;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.guide__gallery::-webkit-scrollbar {
  display: none;
}
.guide__gallery img {
  flex: 0 0 100%;
  scroll-snap-align: center;
}
.guide__dots {
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  display: flex;
  gap: 5px;
  z-index: 3;
}
.guide__dot {
  width: 7px;
  height: 7px;
  border-radius: var(--r-full);
  background: rgba(255, 255, 255, 0.65);
  box-shadow: 0 0 0 1px rgba(24, 28, 29, 0.18);
  transition: width var(--dur-fast) var(--ease-out),
    background-color var(--dur-fast) var(--ease-out);
}
.guide__dot.is-active {
  width: 16px;
  background: #fff;
}

/* ---- Controls + progress ------------------------------------------------ */
.guide__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}
.guide__prev,
.guide__next {
  padding: 10px 16px;
}
.guide__prev[disabled],
.guide__next[disabled] {
  opacity: 0.4;
  pointer-events: none;
}
.guide__progress {
  margin: 0;
  min-width: 5.5rem;
  text-align: center;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}
.guide__progressnow {
  color: var(--teal);
}

/* ---- Desktop: two columns, sticky phone on the right -------------------- */
@media (min-width: 900px) {
  .guide {
    grid-template-columns: minmax(0, 1fr) clamp(240px, 30%, 300px);
    gap: clamp(32px, 5vw, 64px);
  }
  html.js .guide__stage {
    position: sticky;
    top: var(--scroll-offset);
    order: 2;
  }
  /* Narrow phone column: keep Back / Step / Next on a single row. */
  .guide__nav {
    flex-wrap: nowrap;
    width: 100%;
    justify-content: space-between;
    gap: 8px;
  }
  .guide__prev,
  .guide__next {
    padding: 10px 12px;
  }
  .guide__progress {
    min-width: 0;
    white-space: nowrap;
  }
}

/* ---- Mobile: compact phone pinned above the steps ----------------------- */
@media (max-width: 899px) {
  html.js .guide__stage {
    order: -1;
    position: sticky;
    /* Flush against the sticky header — no gap, so scrolled content can't peek
       through between the header and the pinned phone preview. */
    top: var(--header-h);
    z-index: 10;
    gap: 10px;
    padding: 10px 0 12px;
    background: linear-gradient(var(--surface) 78%, rgba(247, 250, 251, 0));
  }
  .guide__phonewrap .phone {
    width: min(132px, 40vw);
    padding: 6px;
  }
  /* Tiny phone preview: tighten the padding and shrink the caption so the QR
     stays centred and "Scannen zum Installieren" no longer clips. */
  .guide__mediaplaceholder {
    padding: 10px;
    gap: 7px;
    font-size: 0.6rem;
    line-height: 1.25;
  }
  .guide__media .guide__mediaqr {
    width: min(118px, 74%);
    padding: 6px;
  }
}

/* =========================================================================
   10c. App Store card (iOS pane) — official-style badge + QR
   The iOS pane links straight to the App Store instead of a guide. The badge is
   recreated from the provided apple.svg (used as a mask so the glyph inherits the
   badge's white currentColor). Fully static; bilingual via lang spans.
   ========================================================================= */
.store {
  max-width: 560px;
  margin-inline: auto;
  text-align: center;
}
.store__lead {
  margin: 0 0 var(--space-md);
  color: var(--ink-soft);
  font-size: var(--fs-lead);
}
/* Card chrome matches the tactile-minimalism look of .guide__step--start. */
.store__card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(20px, 4vw, 44px);
  background: var(--card);
  border: 2px solid var(--outline-variant);
  border-bottom: var(--edge-width) solid var(--outline-variant);
  border-radius: var(--r-lg);
  padding: clamp(24px, 4vw, 40px);
}

/* ---- Apple "Download on the App Store" badge ---------------------------- */
.appstore-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  background: #000;
  color: #fff;
  border-radius: 13px;
  text-decoration: none;
  line-height: 1;
  transition: transform var(--dur-fast) var(--ease-out),
    background-color var(--dur-fast) var(--ease-out);
}
.appstore-badge:hover {
  color: #fff;
  background: #1d1d1f;
}
.appstore-badge:active {
  transform: translateY(2px);
}
.appstore-badge__logo {
  flex: none;
  width: 26px;
  height: 26px;
  background: currentColor; /* -> white, tinted by the badge color */
  -webkit-mask: url(/assets/icons/apple.svg) center / contain no-repeat;
  mask: url(/assets/icons/apple.svg) center / contain no-repeat;
}
.appstore-badge__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
}
.appstore-badge__pre {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.01em;
}
.appstore-badge__name {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1.35rem;
  line-height: 1;
  letter-spacing: -0.01em;
}

/* ---- QR beside the badge ------------------------------------------------- */
.store__qr {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.store__qr img {
  width: 120px;
  height: 120px;
  box-sizing: border-box;
  padding: 8px; /* quiet zone so the code stays scannable */
  background: #fff;
  border: 2px solid var(--outline-variant);
  border-radius: var(--r-md);
}
.store__qr figcaption {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--ink-soft);
}

/* Phones: the user is already on the device, so the QR is redundant — show just
   the App Store badge, centered. */
@media (max-width: 560px) {
  .store__card {
    flex-direction: column;
  }
  .store__qr {
    display: none;
  }
}

/* =========================================================================
   11. Research panel (study context)
   ========================================================================= */
.research-panel {
  background: var(--mint-soft);
  border: 2px solid var(--teal);
  border-left: 4px solid var(--teal);
  border-radius: var(--r-lg);
  padding: clamp(20px, 4vw, 36px);
  margin-top: var(--space-md);
}
.research-panel p {
  margin: 0 0 22px;
  color: var(--ink-soft);
}

/* =========================================================================
   12. Mint band + contact
   ========================================================================= */
.band {
  background: var(--mint-soft);
  border-top: 1px solid var(--outline-variant);
  border-bottom: 1px solid var(--outline-variant);
}

.contact-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-top: var(--space-md);
}
.contact-card {
  background: var(--card);
  border: 1.5px solid var(--outline-variant);
  border-bottom: 4px solid var(--outline-variant);
  border-radius: var(--r-lg);
  padding: 24px;
}
.contact-card h3 {
  font-family: var(--font-head);
  margin: 0 0 6px;
  font-size: 1.1rem;
}
.contact-card p {
  margin: 3px 0;
  color: var(--ink-soft);
  font-size: 0.95rem;
}
.contact-card__site {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  font-size: 0.95rem;
}
.contact-card__site svg {
  flex: none;
}
.mono {
  font-family: var(--mono);
  font-size: 0.95em;
}

/* =========================================================================
   13. Footer
   ========================================================================= */
.site-footer {
  background: var(--footer-bg);
  color: var(--footer-fg);
  padding: 22px 0 calc(22px + env(safe-area-inset-bottom));
}
.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
}
.site-footer__start {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 20px;
}
.site-footer__brand {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--footer-fg);
  text-decoration: none;
}
.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.site-footer__links a {
  color: var(--footer-fg);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
  padding: 6px 0;
}
.site-footer__links a:hover {
  color: var(--footer-link);
}
.site-footer__links a:not(:last-child)::after {
  content: '·';
  margin: 0 10px;
  color: var(--footer-muted);
}
.site-footer__meta {
  margin: 0;
  color: var(--footer-muted);
  font-size: 0.82rem;
  line-height: 1.6;
}
.site-footer__meta a {
  color: var(--footer-link);
}
@media (max-width: 820px) {
  .site-footer__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }
  .site-footer__meta {
    width: 100%;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
  }
}

/* =========================================================================
   14. Prose (privacy)
   ========================================================================= */
.prose {
  /* vertical only — keep the .container horizontal gutter so body text never
     touches the screen edge on mobile */
  padding-top: 40px;
  padding-bottom: 64px;
}
.prose > h1,
.prose > .updated,
.prose-body {
  max-width: var(--maxw-prose);
  margin-inline: auto;
}
.prose h1 {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
  margin: 0 0 10px;
}
.prose .updated {
  color: var(--ink-soft);
  font-size: 0.95rem;
  margin: 0 0 24px;
}
.prose h2 {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.4rem;
  margin: 40px 0 10px;
  scroll-margin-top: 0; /* offset via html scroll-padding; mobile adds the sub-nav below */
}
.prose h3 {
  font-family: var(--font-head);
  font-size: 1.1rem;
  margin: 22px 0 4px;
}
.prose p,
.prose li {
  color: #26302f;
  line-height: 1.7;
}
.prose ul {
  padding-left: 1.2em;
}
.prose li {
  margin: 6px 0;
}
.prose .callout {
  background: var(--mint-soft);
  border: 1.5px solid var(--teal);
  border-left: 4px solid var(--teal);
  border-radius: var(--r-md);
  padding: 18px 20px;
  margin: 20px 0 28px;
}
.prose .callout div {
  line-height: 1.7;
}
/* ----- Table of contents (privacy) ----- */
.toc {
  background: var(--card);
  border: 1.5px solid var(--outline-variant);
  border-radius: var(--r-lg);
  padding: 18px 22px;
  margin: 0 0 28px;
}
.toc summary {
  font-family: var(--font-head);
  font-weight: 700;
  margin-bottom: 8px;
  list-style: none;
  cursor: pointer;
}
.toc summary::-webkit-details-marker {
  display: none;
}
.toc ol {
  margin: 0;
  padding-left: 1.3em;
  /* plain block list — a CSS multi-column context with a constrained height
     spills overflow into off-screen columns instead of scrolling, so no columns. */
}
.toc li {
  margin: 5px 0;
  break-inside: avoid;
}
.toc a {
  color: var(--ink); /* inactive entries read as plain body text */
  text-decoration: none;
  border-radius: var(--r-sm);
}
.toc a:hover {
  text-decoration: underline;
}
.toc a.is-active {
  color: var(--teal); /* only the section in view is highlighted */
  font-weight: 700;
}
dl.contacts dt {
  font-weight: 700;
  margin-top: 12px;
  color: var(--ink);
}
dl.contacts dd {
  margin: 0;
  color: var(--ink-soft);
}

@media (min-width: 1024px) {
  /* Title + version span the full content width and scroll with the page,
     centered to line up with the (center-justified) grid below. */
  .prose > h1,
  .prose > .updated {
    max-width: calc(296px + var(--maxw-prose)); /* 240 sidebar + 56 gap */
    margin-inline: auto;
  }
  .prose-layout {
    display: grid;
    grid-template-columns: 240px minmax(0, var(--maxw-prose));
    gap: 56px;
    justify-content: center;
    align-items: start;
  }
  /* Only the TOC pins; the body content scrolls past it. */
  .prose-layout > .toc {
    position: sticky;
    top: var(--scroll-offset);
    align-self: start;
    margin: 0;
    max-height: calc(100dvh - var(--scroll-offset) - 24px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .toc summary {
    cursor: default; /* always open on desktop — reads as a heading */
  }
  .prose-layout > .prose-body {
    margin: 0;
    max-width: none;
    min-width: 0;
  }
}

/* Privacy: below desktop, the title + TOC become a pinned bar under the header,
   and the TOC opens as a dropdown overlaying the content (no layout shift). */
@media (max-width: 1023px) {
  /* Anchor jumps must clear BOTH the header and the pinned TOC bar; this
     scroll-margin adds to html { scroll-padding-top }. */
  .prose h2 {
    scroll-margin-top: var(--subnav-h);
  }
  /* Only the TOC pins as a bar under the header; title + version scroll above it. */
  .prose-layout > .toc {
    position: sticky;
    top: var(--header-h);
    z-index: var(--z-subnav);
    margin: 0 calc(50% - 50vw) 28px; /* full-bleed bar, gap before content */
    padding: 8px max(var(--gutter), env(safe-area-inset-right)) 8px
      max(var(--gutter), env(safe-area-inset-left));
    display: flex;
    align-items: center;
    min-height: var(--subnav-h);
    background: rgba(247, 250, 251, 0.9);
    -webkit-backdrop-filter: saturate(150%) blur(10px);
    backdrop-filter: saturate(150%) blur(10px);
    border: 0;
    border-bottom: 1px solid var(--outline-variant);
    border-radius: 0;
  }
  .toc summary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    min-height: 44px;
    padding: 8px 14px;
    border: 1.5px solid var(--outline-variant);
    border-radius: var(--r-full);
    background: var(--card);
    font-size: 0.9rem;
    white-space: nowrap;
  }
  .toc summary::after {
    content: '';
    width: 7px;
    height: 7px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translateY(-1px);
    transition: transform var(--dur-fast) var(--ease-out);
  }
  .toc details[open] > summary::after {
    transform: rotate(225deg) translateY(1px);
  }
  /* With JS the open list overlays the content as a dropdown (no shift); when
     collapsed it is fully hidden. Absolute positioning escapes the native
     <details> collapse, so the closed state must be hidden explicitly. The
     no-JS fallback keeps the list inline and uses native open/closed. */
  html.js .toc details:not([open]) > ol {
    display: none;
  }
  html.js .toc details[open] > ol {
    position: absolute;
    top: 100%;
    inset-inline: 0;
    margin: 0;
    /* gutter + list indent on the left so the numbers don't hug the edge */
    padding: 8px max(var(--gutter), env(safe-area-inset-right)) 12px
      calc(max(var(--gutter), env(safe-area-inset-left)) + 1.3em);
    max-height: calc(100dvh - var(--header-h) - var(--subnav-h) - 16px);
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--card);
    border-bottom: 1px solid var(--outline-variant);
    box-shadow: var(--shadow-float);
  }
  .toc li {
    margin: 0;
  }
  .toc a {
    display: block;
    padding: 9px 4px;
  }
}

/* =========================================================================
   15. 404
   ========================================================================= */
.notfound {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding: clamp(64px, 14vh, 140px) 0;
}
.notfound__inner {
  position: relative;
  z-index: 1;
}
.notfound img {
  width: 72px;
  height: 72px;
  border-radius: 18px;
  box-shadow: var(--shadow-float);
}
.notfound__code {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(3.5rem, 14vw, 6rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--teal);
  margin: 18px 0 8px;
}
.notfound p {
  color: var(--ink-soft);
  font-size: var(--fs-lead);
  margin: 0 0 28px;
}

/* =========================================================================
   16. Scroll reveal (gated on html.js; neutralized by reduced-motion)
   ========================================================================= */
.reveal {
  transition: opacity var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out);
  transition-delay: calc(var(--i, 0) * 60ms);
}
html.js .reveal {
  opacity: 0;
  transform: translateY(16px);
}
html.js .reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* =========================================================================
   17. Responsive
   ========================================================================= */
@media (max-width: 900px) {
  .hero__grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .hero__copy {
    max-width: none;
  }
  .hero__mock {
    order: 2;
  }
}

@media (max-width: 720px) {
  .stats,
  .steps,
  .contact-grid {
    grid-template-columns: 1fr;
  }
}

/* Compact header on small phones — all three nav links stay inline (no hamburger) */
@media (max-width: 480px) {
  .brand__name {
    display: none;
  }
  .site-header__inner {
    gap: 6px;
  }
  .site-nav {
    gap: 0;
  }
  .site-nav a {
    padding: 8px 8px;
    font-size: 0.85rem;
  }
  .lang-toggle button {
    padding: 9px 8px;
  }
}

/* Very small phones — keep Info · Herunterladen · Datenschutz + DE/EN on one row */
@media (max-width: 360px) {
  .site-nav a {
    padding: 8px 6px;
    font-size: 0.8rem;
  }
  .lang-toggle button {
    padding: 9px 6px;
    font-size: 0.8rem;
  }
}

/* =========================================================================
   18. Reduced motion
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* =========================================================================
   19. Print (privacy)
   ========================================================================= */
@media print {
  .site-header,
  .site-footer,
  .lang-toggle,
  .skip-link {
    display: none !important;
  }
  body {
    background: #fff;
    font-size: 12pt;
  }
  a {
    color: #000;
    text-decoration: underline;
  }
  .prose-layout {
    display: block;
  }
  .toc {
    position: static;
    margin: 0 0 28px;
    max-height: none;
    overflow: visible;
  }
  .toc ol {
    position: static;
  }
}