/* Palette from the site template (design_handoff_openrmm_website).
 *
 * Three states, not two. An explicit choice stamps data-theme on <html> and
 * wins in both directions; with nothing stamped, the operating system decides.
 * That is why the dark rules are written twice: once behind the media query,
 * guarded so a chosen light theme is not overridden by a dark OS, and once
 * behind the attribute, so choosing dark works on a light OS.
 *
 * Every colour is defined here, on bare :root, and only redefined below. A
 * value whose sole definition lives inside a media query is a value that
 * vanishes in the other theme. */
:root {
  --bg: #f6f7f9;
  --surface: #ffffff;
  --elevated: #ffffff;
  --line: #e3e6ec;
  --ink: #191b21;
  --muted: #565b68;
  --faint: #838895;
  /* A darker indigo than the dark theme's: #6366f1 on white is 3.6:1, which
   * fails on body text. This one clears 4.5:1. */
  --brand: #4f46e5;
  --brand-hi: #4338ca;
  --brand-soft: rgba(79, 70, 229, 0.09);
  --good: #059669;
  --warn: #b45309;
  --bad: #dc2626;
  /* Status text sits on a 10%-alpha wash of its own colour, so it needs a tone
   * with enough contrast against that wash rather than against the page. */
  --good-ink: #047857;
  --warn-ink: #92400e;
  --bad-ink: #b91c1c;
  --header-bg: rgba(246, 247, 249, 0.78);
  --shadow: 0 12px 40px rgba(24, 28, 40, .16);
  --radius: 14px;
  --font: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #15171c;
    --surface: #1a1c22;
    --elevated: #202229;
    --line: #34373f;
    --ink: #e9eaee;
    --muted: #9da1ac;
    --faint: #6b6f79;
    --brand: #6366f1;
    --brand-hi: #818cf8;
    --brand-soft: rgba(99, 102, 241, 0.14);
    --good: #34d399;
    --warn: #fbbf24;
    --bad: #f87171;
    --good-ink: #9ae6cb;
    --warn-ink: #f5d998;
    --bad-ink: #fcbcbc;
    --header-bg: rgba(21, 23, 28, 0.72);
    --shadow: 0 12px 40px rgba(0, 0, 0, .45);
  }
}

:root[data-theme="dark"] {
  --bg: #15171c;
  --surface: #1a1c22;
  --elevated: #202229;
  --line: #34373f;
  --ink: #e9eaee;
  --muted: #9da1ac;
  --faint: #6b6f79;
  --brand: #6366f1;
  --brand-hi: #818cf8;
  --brand-soft: rgba(99, 102, 241, 0.14);
  --good: #34d399;
  --warn: #fbbf24;
  --bad: #f87171;
  --good-ink: #9ae6cb;
  --warn-ink: #f5d998;
  --bad-ink: #fcbcbc;
  --header-bg: rgba(21, 23, 28, 0.72);
  --shadow: 0 12px 40px rgba(0, 0, 0, .45);
}

/* Tells the browser which way to paint form controls, scrollbars and the space
 * beyond the page. Without it a light page keeps dark native widgets. */
:root { color-scheme: light; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; } }
:root[data-theme="dark"] { color-scheme: dark; }
:root[data-theme="light"] { color-scheme: light; }

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--font); font-size: 15px; line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--brand-hi); text-decoration: none; }
a:hover { text-decoration: underline; }
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 24px; }

/* ---------- header ---------- */
header {
  position: sticky; top: 0; z-index: 50;
  background: var(--header-bg); backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.nav { display: flex; align-items: center; gap: 28px; padding: 14px 0; }
.logo { display: flex; align-items: center; transition: opacity .2s; }
.logo img { height: 61px; width: auto; display: block; }
.logo:hover { opacity: .82; text-decoration: none; }
.logo-main { gap: 10px; margin-left: -14px; color: var(--ink); }
.logo-main img { width: 38px; height: 38px; object-fit: contain; }
.logo-main .logo-name {
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.025em;
}
.logo-main + .nav-links { margin-left: 24px; }
.logo .sub {
  margin-left: 12px; align-self: center; font-size: 13px;
  font-weight: 600; color: var(--faint); letter-spacing: .04em; text-transform: uppercase;
}
.logo-main .sub { margin-left: 2px; }
.nav-links {
  display: flex; align-items: center; gap: 26px; margin-left: 8px;
  font-size: 14.5px; font-weight: 500; color: var(--muted);
}
.nav-links a { color: var(--muted); transition: color .2s; }
.nav-links a:hover { color: var(--ink); text-decoration: none; }
.nav-actions { margin-left: auto; display: flex; align-items: center; gap: 12px; }
/* Plain, not a filled button: it points at the repository, which is somewhere
 * to read rather than the thing the page is asking anyone to do. A filled
 * button here competed with the actual call to action further down. */
.nav-cta {
  display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto;
  height: 38px; padding: 0 12px;
  border-radius: 10px; border: 1px solid var(--line);
  color: var(--muted); font-size: 14px; font-weight: 500;
  transition: color .2s, border-color .2s;
}
.nav-cta:hover { color: var(--ink); border-color: var(--brand); text-decoration: none; }
.nav-cta svg { width: 16px; height: 16px; fill: currentColor; }
/* The header gives way in steps on narrow screens instead of pushing "Sign in"
 * off the edge. Measured in all nine languages: the menu's links fit from just
 * above 1100px; at 1100px and below they fold behind the menu button
 * (public/nav.js) and open as a panel under the header. The logo's name plus
 * every action fit only from about 520px. The GitHub link keeps its icon and
 * its aria-label. */
/* ---------- header menus ----------
 * Product, Solutions and Compare open a panel under the header. The panel is a
 * list of links, so it works without script as far as the links go; nav.js
 * only opens and closes it. At 1100px and below the panels open inline inside the
 * folded menu instead of floating. */
.has-menu { position: relative; }
.nav-trigger {
  display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; background: none;
  font: inherit; color: var(--muted); cursor: pointer; transition: color .2s;
}
.nav-trigger:hover, .nav-trigger[aria-expanded="true"] { color: var(--ink); }
.nav-trigger svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s; }
.nav-trigger[aria-expanded="true"] svg { transform: rotate(180deg); }
.nav-trigger:focus-visible { outline: 2px solid var(--brand); outline-offset: 4px; border-radius: 4px; }
.mega {
  position: absolute; top: calc(100% + 18px); left: -14px; z-index: 60; width: min(680px, 92vw);
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 14px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
}
.mega.narrow { width: 340px; grid-template-columns: 1fr; }
.nav-links .mega a { display: flex; gap: 12px; padding: 12px; border-radius: 10px; color: var(--ink); font-weight: 400; }
.nav-links .mega a:hover { background: var(--brand-soft); color: var(--ink); text-decoration: none; }
.mega .mi { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 9px; background: var(--brand-soft); color: var(--brand-hi); }
.mega .mi svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mega strong { display: block; font-size: 14.5px; font-weight: 600; line-height: 1.3; }
.mega a > span:last-child > span { display: block; margin-top: 2px; color: var(--muted); font-size: 13px; line-height: 1.45; }
.mega-foot {
  grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px;
  margin-top: 6px; padding: 12px 12px 4px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13.5px;
}
.nav-links .mega-foot a { display: inline; padding: 0; color: var(--brand-hi); font-weight: 500; }
.nav-links .mega-foot a:hover { background: none; text-decoration: underline; }

@media (max-width: 1100px) {
  .nav-links { display: none; }
  .nav-toggle:not([hidden]) { display: inline-flex; }
  header.nav-open .nav-links {
    display: flex; position: absolute; top: 100%; left: 0; right: 0; margin: 0;
    flex-direction: column; align-items: stretch; gap: 0; padding: 4px 24px 10px;
    background: var(--surface); border-bottom: 1px solid var(--line); box-shadow: var(--shadow);
    font-size: 16px;
  }
  header.nav-open .nav-links { max-height: calc(100vh - 72px); overflow-y: auto; }
  header.nav-open .nav-links > a, header.nav-open .nav-trigger { padding: 13px 0; }
  header.nav-open .nav-links > a + a, header.nav-open .nav-links > .has-menu + a,
  header.nav-open .nav-links > .has-menu + .has-menu, header.nav-open .nav-links > a + .has-menu { border-top: 1px solid var(--line); }
  header.nav-open .nav-trigger { width: 100%; justify-content: space-between; }
  header.nav-open .mega {
    position: static; width: auto; grid-template-columns: 1fr; padding: 0 0 10px;
    background: transparent; border: 0; box-shadow: none;
  }
  header.nav-open .nav-links .mega a { padding: 10px 0; }
  header.nav-open .mega-foot { display: none; }
}
/* Product, Solutions and Compare made the row wider than the five flat links it replaced: in
 * Russian and Malay it needs about 1160px, more than the 1080px container, so with the menu
 * folded only at 960px the header pushed the page into a sideways scroll up to about 1200px.
 * The menu now folds at 1100px (public/nav.js reads the same number) and, above it, tighter
 * spacing keeps every language inside the container. Measured in all nine languages. */
@media (min-width: 1101px) and (max-width: 1280px) {
  .nav { gap: 16px; }
  .nav-links { gap: 16px; font-size: 14px; }
  .logo-main + .nav-links { margin-left: 4px; }
  .nav-actions { gap: 8px; }
}
/* `.nav` sets its own vertical padding and, with it, dropped the 24px side padding it gets from
 * .wrap. From 1128px up the container is narrower than the screen so nothing shows; below that the
 * logo and the last control touched the edges of the screen. */
@media (max-width: 1128px) {
  .nav { padding-inline: 24px; }
}
@media (max-width: 640px) {
  .nav { gap: 12px; }
  .nav-actions { gap: 8px; }
  .nav-cta { padding: 0 10px; }
  .nav-cta svg + span { display: none; }
}
@media (max-width: 480px) {
  .logo-main .logo-name { display: none; }
  .nav { padding-inline: 16px; }
}
/* The language box is wider in Japanese and Malay, and at 360px the row ran 6px past the edge. */
@media (max-width: 400px) {
  .nav { gap: 8px; }
  .nav-actions { gap: 6px; }
  .nav-signin { padding: 0 9px; }
}
/* Logo, language, theme, GitHub, "Sign in" and the menu button need about 330px; a 320px phone has
 * 288px inside the margins. The GitHub link also sits in the footer and in the community section,
 * so it is the one control that gives way. */
@media (max-width: 359px) {
  .nav { gap: 8px; }
  .nav-actions { gap: 6px; }
  .nav-actions .nav-cta:not(.nav-signin) { display: none; }
}

/* ---------- theme toggle ---------- */
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  /* A square that flex must not compress: without this it is the first thing
   * to give when the header runs out of room, and the icon comes out oval. */
  flex: 0 0 auto; width: 34px; height: 34px; padding: 0;
  background: var(--elevated); color: var(--muted);
  border: 1px solid var(--line); border-radius: 8px;
  cursor: pointer; transition: color .2s, border-color .2s;
}
.theme-toggle:hover { color: var(--ink); border-color: var(--brand); }
.theme-toggle svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; }
/* One icon is shown at a time: the sun when the page is dark (press it for
 * light), the moon when it is light. */
.theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .icon-sun { display: block; }
  :root:not([data-theme="light"]) .theme-toggle .icon-moon { display: none; }
}
:root[data-theme="light"] .theme-toggle .icon-sun { display: none; }
:root[data-theme="light"] .theme-toggle .icon-moon { display: block; }

/* The menu button: the same box as the theme toggle, shown at 1100px and below
 * (see the header above). Three lines while the menu is closed, a cross while
 * it is open. */
.nav-toggle {
  display: none; flex: 0 0 auto; align-items: center; justify-content: center;
  width: 34px; height: 34px; padding: 0;
  background: var(--elevated); color: var(--muted);
  border: 1px solid var(--line); border-radius: 8px;
  cursor: pointer; transition: color .2s, border-color .2s;
}
.nav-toggle:hover, .nav-toggle[aria-expanded="true"] { color: var(--ink); border-color: var(--brand); }
.nav-toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.nav-toggle .icon-close, .nav-toggle[aria-expanded="true"] .icon-menu { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: inline; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 20px; border-radius: 10px; border: 1px solid transparent;
  font-size: 14px; font-weight: 600; cursor: pointer; font-family: inherit;
  transition: background .15s, border-color .15s, opacity .15s;
}
.btn-primary { background: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-hi); text-decoration: none; }
.btn-primary:disabled { opacity: .5; cursor: not-allowed; }
.btn-ghost { background: transparent; border-color: var(--line); color: var(--ink); }
.btn-ghost:hover { border-color: var(--brand); text-decoration: none; }

/* ---------- hero ---------- */
.hero { padding: 92px 0 72px; text-align: center; }
.hero h1 {
  font-size: clamp(34px, 5.5vw, 54px); line-height: 1.12;
  letter-spacing: -0.025em; margin: 0 0 18px; font-weight: 700;
}
.hero h1 em { font-style: normal; color: var(--brand-hi); }
.hero p { font-size: 18px; color: var(--muted); max-width: 620px; margin: 0 auto 30px; }
.hero-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.badge {
  display: inline-block; padding: 5px 12px; border-radius: 999px;
  background: var(--brand-soft); border: 1px solid rgba(99,102,241,.3);
  color: var(--brand-hi); font-size: 12.5px; font-weight: 600; margin-bottom: 20px;
}

/* ---------- sections ---------- */
section { padding: 64px 0; }
/* A menu link lands its section just below the sticky header (67px), not under it. */
section[id] { scroll-margin-top: 67px; }
.section-head { text-align: center; margin-bottom: 44px; }
.section-head h2 { font-size: 30px; letter-spacing: -0.02em; margin: 0 0 10px; }
.section-head p { color: var(--muted); margin: 0; }

.grid { display: grid; gap: 18px; }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
/* Eight cards: four across on a desktop, so no row is left half empty. */
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }

.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 24px;
}
.card h3 { margin: 0 0 8px; font-size: 16.5px; }
.card p { margin: 0; color: var(--muted); font-size: 14px; }
.card .icon {
  width: 38px; height: 38px; border-radius: 10px; margin-bottom: 14px;
  background: var(--brand-soft); border: 1px solid rgba(99,102,241,.25);
  display: flex; align-items: center; justify-content: center; font-size: 18px;
}

/* ---------- pricing ---------- */
.billing-period-field { margin-bottom: 18px; }
.billing-period-field select { width: 100%; }
#annual-savings { margin: 8px 0 14px; }

.pricing-calculator {
  display: grid; grid-template-columns: minmax(240px, .8fr) minmax(340px, 1.2fr);
  gap: 28px 38px; padding: 32px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 16px 50px rgba(24, 28, 40, .08);
}
.pricing-result { display: flex; flex-direction: column; justify-content: center; gap: 8px; }
.pricing-kicker {
  color: var(--brand-hi); font-size: 12px; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase;
}
.pricing-result .price {
  color: var(--ink); font-size: clamp(36px, 5vw, 48px); font-weight: 700;
  letter-spacing: -.035em; line-height: 1.08;
}
.pricing-result .price small { margin-left: 5px; color: var(--muted); font-size: 14px; font-weight: 500; letter-spacing: 0; }
.pricing-result strong { font-size: 16px; }
.pricing-progressive { color: var(--muted); font-size: 13.5px; line-height: 1.5; }
.device-picker { align-self: center; }
.device-picker-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
.device-picker-head > label { color: var(--muted); font-size: 14px; font-weight: 600; }
.device-number-wrap { display: flex; align-items: center; gap: 9px; color: var(--faint); font-size: 13px; }
.device-number-wrap input { width: 112px; text-align: right; font-family: var(--mono); font-weight: 600; }
.device-range {
  width: 100%; height: 6px; padding: 0; appearance: none;
  border: 0; border-radius: 99px; background: var(--line); cursor: pointer;
}
.device-range::-webkit-slider-thumb {
  width: 22px; height: 22px; appearance: none; border: 3px solid var(--surface);
  border-radius: 50%; background: var(--brand); box-shadow: 0 1px 5px rgba(0,0,0,.32);
}
.device-range::-moz-range-thumb {
  width: 17px; height: 17px; border: 3px solid var(--surface);
  border-radius: 50%; background: var(--brand); box-shadow: 0 1px 5px rgba(0,0,0,.32);
}
.range-labels { display: flex; justify-content: space-between; margin-top: 9px; color: var(--faint); font: 11px var(--mono); }
.device-picker .hint { margin: 16px 0 0; color: var(--muted); font-size: 12.5px; line-height: 1.5; }
.pricing-benefits {
  grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 22px; padding-top: 22px; border-top: 1px solid var(--line);
  color: var(--muted); font-size: 13.5px;
}
.pricing-benefits span { position: relative; padding-left: 22px; }
.pricing-benefits span::before { content: "✓"; position: absolute; left: 0; color: var(--good); font-weight: 700; }
.pricing-cta { grid-column: 1 / -1; width: 100%; }
.pricing-benefits[hidden] { display: none; }
/* Cloud or self-hosted with support: one calculator, two products. */
.product-toggle {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 6px;
  width: fit-content; max-width: 100%; margin: 0 auto 14px; padding: 4px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--surface);
}
.product-option {
  border: 0; border-radius: 999px; padding: 8px 16px; background: transparent;
  color: var(--muted); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
}
.product-option[aria-pressed="true"] { background: var(--brand); color: #fff; }
.product-option:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
/* On a phone the two labels do not fit on one line, and a pill that wraps into two rows looks
 * broken: share the width equally and let each label wrap inside its own half. */
@media (max-width: 560px) {
  .product-toggle { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; border-radius: 16px; gap: 4px; }
  .product-option { border-radius: 12px; padding: 10px 8px; line-height: 1.25; text-align: center; }
}
.product-note { max-width: 640px; margin: 0 auto 18px; text-align: center; color: var(--muted); font-size: 13.5px; }
.sales-panel {
  max-width: 780px; margin: 28px auto 0; padding: 30px;
  background: var(--surface); border: 1px solid var(--brand); border-radius: var(--radius);
}
.sales-panel .section-head { margin-bottom: 28px; }
.sales-panel .section-head h3 { margin: 0 0 9px; font-size: 25px; }
.sales-panel .badge { margin-bottom: 14px; }
.sales-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
.sales-form textarea { min-height: 112px; resize: vertical; }
.sales-form > .btn { width: 100%; }
.form-trap { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; }
.checkout-quote {
  display: grid; grid-template-columns: 1fr auto; gap: 5px 16px;
  margin-bottom: 22px; padding: 14px; border: 1px solid var(--line);
  border-radius: 10px; background: var(--bg); font-size: 13px;
}
.checkout-quote > span { grid-column: 1 / -1; color: var(--faint); font-weight: 600; }
.checkout-quote strong:last-child { color: var(--brand-hi); }

/* ---------- forms ---------- */
.field { margin-bottom: 16px; }
.field label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; color: var(--muted); }
.field .hint { font-size: 12px; color: var(--faint); margin-top: 5px; }
.checkout-terms { margin: 10px 0 0; text-align: center; font-size: 12px; color: var(--faint); }
input, select, textarea {
  width: 100%; padding: 11px 13px; border-radius: 10px;
  background: var(--elevated); border: 1px solid var(--line); color: var(--ink);
  font-size: 14px; font-family: inherit;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--brand); }
.suffix-wrap { display: flex; align-items: stretch; }
.suffix-wrap input { border-radius: 10px 0 0 10px; border-right: none; }
.suffix {
  display: flex; align-items: center; padding: 0 13px; font-size: 13px;
  color: var(--faint); background: var(--bg); border: 1px solid var(--line);
  border-left: none; border-radius: 0 10px 10px 0; font-family: var(--mono);
}
.methods { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; align-items: start; }
.method, .payment-provider-summary {
  padding: 13px 10px; text-align: center; border-radius: 10px; cursor: pointer;
  background: var(--elevated); border: 1px solid var(--line); font-family: inherit;
  font-size: 13px; font-weight: 600; color: var(--ink); width: 100%;
}
.method.active, .payment-provider.active > .payment-provider-summary {
  border-color: var(--brand); background: var(--brand-soft); color: var(--brand-hi);
}
.method small, .payment-provider-summary small {
  display: block; font-weight: 500; color: var(--faint); font-size: 11.5px; margin-top: 3px;
}
.method:focus-visible, .payment-provider-summary:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
/* Paused by the server for a while (src/index.js pausedPaymentMethods): in view, not choosable. */
.method.paused { cursor: not-allowed; color: var(--faint); border-style: dashed; }
.method.paused small { color: var(--warn-ink); }
.payment-provider { min-width: 0; }
.payment-provider-summary { position: relative; list-style: none; padding-right: 24px; }
.payment-provider-summary::-webkit-details-marker { display: none; }
.payment-provider-chevron { position: absolute; right: 10px; top: 13px; line-height: 1; font-size: 18px; }
.payment-provider[open] .payment-provider-chevron { transform: rotate(180deg); }
.payment-provider-options { display: grid; gap: 8px; margin-top: 8px; }
.payment-provider:not([open]) .payment-provider-options { display: none; }

.notice { padding: 12px 14px; border-radius: 10px; font-size: 13.5px; margin-bottom: 16px; }
.notice-bad { background: rgba(248,113,113,.1); border: 1px solid rgba(248,113,113,.3); color: var(--bad-ink); }
.notice-good { background: rgba(52,211,153,.1); border: 1px solid rgba(52,211,153,.3); color: var(--good-ink); }
.notice-warn { background: rgba(251,191,36,.1); border: 1px solid rgba(251,191,36,.3); color: var(--warn-ink); }

/* ---------- table ---------- */
table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
th {
  text-align: left; padding: 10px 12px; font-size: 11px; text-transform: uppercase;
  letter-spacing: .06em; color: var(--faint); border-bottom: 1px solid var(--line); font-weight: 700;
}
td { padding: 12px; border-bottom: 1px solid var(--line); color: var(--muted); }
td strong { color: var(--ink); font-weight: 600; }
.mono { font-family: var(--mono); font-size: 12.5px; }
.pill {
  display: inline-block; padding: 3px 9px; border-radius: 999px;
  font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
}
.pill-good { background: rgba(52,211,153,.14); color: var(--good-ink); }
.pill-warn { background: rgba(251,191,36,.14); color: var(--warn-ink); }
.pill-bad  { background: rgba(248,113,113,.14); color: var(--bad-ink); }
.pill-mute { background: rgba(157,161,172,.12); color: var(--muted); }

/* ---------- admin: period and reports ---------- */
.range-bar {
  display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: center; justify-content: space-between;
  margin-bottom: 18px; padding: 14px 16px;
}
.range-presets { display: flex; flex-wrap: wrap; gap: 6px; }
.range-presets .btn, .range-dates .btn { padding: 6px 12px; font-size: 12.5px; }
.range-presets .btn.active { border-color: var(--brand); background: var(--brand-soft); color: var(--brand); }
.range-dates { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 13px; color: var(--muted); }
.range-dates label { display: flex; gap: 6px; align-items: center; }
.range-dates input { width: auto; padding: 6px 8px; }
.range-label { font-size: 14px; font-weight: 500; color: var(--muted); }
.kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 12px; margin-bottom: 18px; }
.kpi { padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; }
.kpi-label { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--faint); font-weight: 700; }
.kpi-value { font-size: 19px; color: var(--ink); font-weight: 600; line-height: 1.3; white-space: pre-line; }
.kpi-sub { font-size: 12.5px; color: var(--muted); }
.report-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 12px; margin-bottom: 18px; }
.report-grid .card { padding: 18px; }
.report-grid.wide { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
.report-grid.tight { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); margin: 12px 0 0; }
/* The admin console keeps its menu on every width, scrolling sideways when
 * it does not fit: the public header hides its menu at 1100px and below, and the
 * console has no other way between its tabs. */
.nav-links.admin-nav {
  display: flex; gap: 18px; overflow-x: auto; white-space: nowrap; scrollbar-width: none; min-width: 0; flex: 1 1 auto;
}
@media (max-width: 960px) {
  .nav-links.admin-nav { font-size: 13.5px; margin-left: 0; }
}
@media (max-width: 640px) {
  .kpis { grid-template-columns: 1fr 1fr; gap: 10px; }
  .kpi { padding: 12px; }
  .kpi-value { font-size: 16px; }
}
.chart-max { font-size: 11px; color: var(--faint); margin: 6px 0 4px; }
.chart-cols {
  display: flex; align-items: flex-end; gap: 2px; height: 160px;
  border-top: 1px dashed var(--line); border-bottom: 1px solid var(--line);
}
.col { flex: 1 1 0; min-width: 0; height: 100%; display: flex; align-items: flex-end; }
.col-bar {
  width: 100%; background: var(--brand); border-radius: 3px 3px 0 0;
  display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden;
}
.col:hover .col-bar { background: var(--brand-hi); }
.col-accent { width: 100%; background: var(--good); }
.chart-axis { display: flex; justify-content: space-between; font-size: 11px; color: var(--faint); margin-top: 4px; }
.chart-legend { display: flex; flex-wrap: wrap; gap: 12px; font-size: 12px; color: var(--muted); margin-top: 8px; }
.swatch { display: inline-block; width: 10px; height: 10px; border-radius: 2px; background: var(--brand); margin-right: 5px; vertical-align: -1px; }
.swatch-accent { background: var(--good); }
.hbar { margin-top: 12px; }
.hbar-group > strong { font-size: 13px; color: var(--ink); }
.hbar-head { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; color: var(--ink); }
.hbar-head span:last-child { color: var(--muted); white-space: nowrap; }
.hbar-track { height: 8px; background: var(--brand-soft); border-radius: 999px; margin: 5px 0 3px; overflow: hidden; }
.hbar-fill { height: 100%; background: var(--brand); border-radius: 999px; }
.hbar-sub { font-size: 12px; color: var(--faint); }

footer { border-top: 1px solid var(--line); padding: 34px 0; color: var(--faint); font-size: 13px; }
.footer-row { display: flex; gap: 18px; flex-wrap: wrap; align-items: center; }
.footer-row .spacer { margin-left: auto; }
/* Brand marks from Simple Icons 16.32.0 (CC0), drawn in the text colour. */
.footer-social { display: inline-flex; gap: 2px; align-items: center; }
.footer-social a { display: inline-flex; padding: 6px; border-radius: 8px; color: var(--muted); transition: color .2s; }
.footer-social a:hover { color: var(--ink); text-decoration: none; }
.footer-social svg { width: 18px; height: 18px; fill: currentColor; }

/* The calculator's two columns need about 690px (240 + 340, the gap and the
 * padding): narrower, they pushed the device picker past the page's edge. */
@media (max-width: 760px) {
  .pricing-calculator { grid-template-columns: 1fr; }
  .pricing-benefits, .pricing-cta { grid-column: 1; }
}
@media (max-width: 640px) {
  .nav-links { display: none; }
  .methods { grid-template-columns: 1fr; }
  .pricing-calculator { padding: 24px 20px; }
  .pricing-benefits, .sales-grid { grid-template-columns: 1fr; }
  .device-picker-head { align-items: flex-start; flex-direction: column; gap: 10px; }
  .device-number-wrap { width: 100%; }
  .device-number-wrap input { flex: 1; width: auto; }
  .range-labels span:nth-child(2), .range-labels span:nth-child(4) { display: none; }
  .sales-panel { padding: 24px 20px; }
}

@media (max-width: 1120px) {
  .logo-main { margin-left: 0; }
}

/* ---------- language switcher ---------- */
/* Sized to the two-letter codes it now shows, and to the same 34px box as the
 * theme toggle beside it, so the two read as one pair of controls rather than
 * as a widget with a text field next to it. */
.lang-select {
  /* `width: auto` is the whole reason this control was stretching across the
   * header: the forms rule above sets `input, select { width: 100% }`, and a
   * class selector only wins for the properties it actually declares. Every
   * other property here overrode that rule; width was the one nothing claimed,
   * so `flex: 0 0 auto` sized the box to a 100% basis. */
  flex: 0 0 auto; width: auto;
  height: 34px; padding: 0 4px 0 6px;
  background: var(--elevated); color: var(--muted);
  border: 1px solid var(--line); border-radius: 8px;
  font-family: var(--font); font-size: 12.5px; font-weight: 600;
  cursor: pointer; transition: color .2s, border-color .2s;
}
.lang-select:hover { color: var(--ink); border-color: var(--brand); }
/* .nav-actions is declared once, up with the header. Redeclaring it here is
 * what squashed the toggle: this copy won and dropped `margin-left: auto`, so
 * the actions stopped being pushed to the right edge and the row competed for
 * space with the nav links. */

/* ---------- cookie banner ---------- */
.cookie-banner {
  position: fixed; z-index: 100;
  left: 16px; right: 16px; bottom: 16px;
  max-width: 720px; margin: 0 auto;
  background: var(--elevated); border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px 20px;
  display: flex; align-items: center; gap: 20px;
  animation: cookie-in .28s ease-out;
}
@keyframes cookie-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
.cookie-banner p { margin: 0; color: var(--muted); font-size: 13.5px; line-height: 1.55; }
.cookie-actions { display: flex; gap: 10px; flex-shrink: 0; }
.cookie-actions .btn { padding: 9px 16px; font-size: 13.5px; white-space: nowrap; }

@media (max-width: 640px) {
  .cookie-banner { flex-direction: column; align-items: stretch; gap: 14px; }
  .cookie-actions { justify-content: stretch; }
  .cookie-actions .btn { flex: 1; text-align: center; }
  .nav-links { display: none; }
}

/* Someone who prefers reduced motion gets the banner without the slide. */
@media (prefers-reduced-motion: reduce) {
  .cookie-banner { animation: none; }
}

/* The AI note sits under the plan grid, where someone is comparing prices and
   about to assume the model is part of what they are paying for. */
.ai-note { margin-top: 22px; margin-bottom: 0; }

/* The way into the customer portal. Given the accent border rather than a fill
   so it reads as an action without competing with the checkout button, which is
   the thing the page is actually asking for. */
.nav-signin { border-color: var(--brand); color: var(--brand-hi); }
.nav-signin:hover { color: var(--ink); background: var(--brand-soft); }

/* ---------- contributions ---------- */
.donation-page { min-height: calc(100vh - 166px); }
.donation-wrap { max-width: 840px; }
.donation-hero { padding: 78px 0 34px; text-align: center; }
.donation-hero h1 {
  margin: 14px 0 14px; font-size: clamp(32px, 5vw, 48px);
  line-height: 1.14; letter-spacing: -.025em;
}
.donation-hero > .wrap > p { max-width: 620px; margin: 0 auto 24px; color: var(--muted); font-size: 17px; }
.donation-warning { max-width: 700px; margin: 0 auto; text-align: left; }
.donation-methods { padding: 16px 0 80px; }
.donation-status {
  padding: 22px; border: 1px dashed var(--line); border-radius: var(--radius);
  color: var(--muted); text-align: center;
}
.donation-card {
  display: flex; align-items: center; gap: 18px; margin-bottom: 34px;
}
.donation-card h2 { margin: 0 0 4px; font-size: 20px; }
.donation-card p { margin: 0; }
.donation-method-copy { flex: 1; }
.donation-method-icon {
  display: grid; place-items: center; flex: 0 0 auto; width: 46px; height: 46px;
  border-radius: 12px; color: #fff; background: #0070ba; font-size: 24px; font-weight: 700;
}
.donation-section-head { margin-bottom: 18px; }
.wallet-grid { display: grid; gap: 16px; }
.wallet-card { display: flex; align-items: center; gap: 26px; }
.wallet-details { flex: 1; min-width: 0; }
.wallet-title { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.wallet-title h3 { margin: 0; font-size: 20px; }
.wallet-warning { color: var(--warn-ink) !important; margin-bottom: 12px !important; }
.wallet-address {
  display: block; overflow-wrap: anywhere; padding: 11px 12px; margin-bottom: 12px;
  border: 1px solid var(--line); border-radius: 9px; background: var(--bg);
  color: var(--ink); font-family: var(--mono); font-size: 12px; line-height: 1.5;
}
.wallet-copy { padding: 8px 14px; }
.wallet-qr {
  display: grid; place-items: center; flex: 0 0 166px; min-height: 166px;
  padding: 9px; border: 1px solid var(--line); border-radius: 12px; background: #fff;
}
.wallet-qr canvas, .wallet-qr img, .wallet-qr svg { display: block; width: 148px !important; height: 148px !important; }
.donation-disclaimer { margin: 22px 0 0; border: 1px solid var(--line); color: var(--muted); }

/* ---------- privacy policy ---------- */
.legal-page { padding: 64px 0 80px; }
.legal-wrap { max-width: 780px; }
/* German compounds ("Datenschutzerklärung") are wider than a 320px phone at
 * heading size: they hyphenate where the browser can, and break where it cannot. */
.legal { overflow-wrap: break-word; }
.legal h1, .legal h2 { hyphens: auto; }
.legal h1 { margin: 0 0 8px; font-size: clamp(30px, 4.6vw, 42px); line-height: 1.15; letter-spacing: -.02em; }
.legal-updated { margin: 0 0 24px; color: var(--faint); font-size: 14px; }
.legal-note { border: 1px solid var(--line); color: var(--muted); }
.legal h2 { margin: 40px 0 12px; font-size: 21px; letter-spacing: -.01em; }
.legal p, .legal li { color: var(--muted); font-size: 15.5px; line-height: 1.65; }
.legal p { margin: 0 0 14px; }
.legal strong { color: var(--ink); }
.legal ul { margin: 0 0 14px; padding-left: 22px; }
.legal li { margin: 7px 0; }
.legal code { font-family: var(--mono); font-size: .9em; color: var(--ink); }
/* The cookie table scrolls inside its box on a phone rather than widening the page. */
.legal-table { margin: 0 0 16px; overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; }
.legal table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.legal th, .legal td { padding: 10px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); color: var(--muted); }
.legal th { background: var(--elevated); color: var(--ink); font-weight: 600; }
.legal tbody tr:last-child td { border-bottom: 0; }

@media (max-width: 640px) {
  .donation-hero { padding-top: 56px; }
  .donation-card, .wallet-card { align-items: stretch; flex-direction: column; }
  .donation-card .btn { width: 100%; }
  .wallet-qr { align-self: center; flex-basis: 166px; width: 166px; }
}

/* Sign in / create account. A segmented control rather than two pages: the
   fields overlap almost entirely, and a full navigation to swap two inputs
   loses whatever was already typed. */
.flex-tabs { display: flex; gap: 2px; padding: 3px; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; }
.flex-tabs button {
  flex: 1; height: 34px; border: 0; border-radius: 8px; cursor: pointer;
  background: transparent; color: var(--faint);
  font-family: inherit; font-size: 13px; font-weight: 600; transition: color .2s, background .2s;
}
.flex-tabs button:hover { color: var(--muted); }
.flex-tabs button.active { background: var(--elevated); color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.12); }

/* The sign-in panel: a single column, centred in the page rather than pinned to
   the left like the marketing sections. There is nothing else on this screen to
   align to, so the form is the page. */
.auth-panel {
  max-width: 420px;
  margin: 0 auto;
  display: flex; flex-direction: column; gap: 18px;
}
.auth-lede { margin: 0; color: var(--muted); font-size: 13.5px; text-align: center; }
.auth-panel .card > .auth-lede {
  margin: 18px 2px 0;
  line-height: 1.55;
  text-align: left;
}
.auth-panel .card { margin: 0; }
.auth-panel .field { text-align: left; }

/* The customer's account. A section of its own rather than .hero: the hero
   centres its text and sizes paragraphs for a landing page, which put every
   heading in the middle of the page while the forms under it sat on the left. */
.portal-page { padding: 56px 0 80px; text-align: left; }
.portal-page h1 { font-size: 28px; line-height: 1.2; margin: 0 0 4px; letter-spacing: -.01em; }
.portal-page h2 { font-size: 18px; margin: 36px 0 12px; }
.portal-page .account-email { color: var(--muted); margin: 0; }
.portal-form { max-width: 460px; }
.section-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 36px 0 12px; }
.section-bar h2 { margin: 0; }
.doc-links { display: flex; gap: 12px; white-space: nowrap; }
/* A hint outside a field (the note under a form) reads like one inside it. */
.portal-page .hint { font-size: 12.5px; color: var(--faint); line-height: 1.5; }