/* ==========================================================================
   Orbit design system — shared core

   This block is identical in the Orbit Website (static/css/site.css) and Orbit
   MDM (static/css/orbit.css): the shared Orbit core with orbit.com.ai's navy
   palette (Orbit AI and Orbit Mail carry it monochrome). Each app appends its
   own components after it. Change both copies; Mission Control's
   scripts/check_shared.py checks them.

   Direction
   ---------
   The brand mark is a navy planet, so the interface is built around that
   navy rather than denying it: it is the accent for primary actions, focus,
   selection and links. Neutrals are cool-tinted so the navy sits naturally
   on them. Everything else is quiet.

   Theming follows the operating system by default; the theme control sets
   `data-theme` on <html>:

     (no attribute)      -> follow the system
     data-theme="light"  -> force light
     data-theme="dark"   -> force dark

   Dark values are defined twice on purpose — once for the system preference
   and once for the explicit override — so the two can never drift apart.
   Every text token clears WCAG AA (4.5:1) on the surfaces it is used on.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Tokens — light
   -------------------------------------------------------------------------- */

:root {
  color-scheme: light;

  /* Surfaces, flattest to most raised. */
  --bg: #ffffff;
  --bg-subtle: #f6f8fb;
  --bg-raised: #ffffff;
  --bg-inset: #eef1f6;
  --bg-hover: #f1f4f9;
  --bg-active: #e5eaf2;
  --sidebar-bg: #f6f8fb;

  /* Hairlines. */
  --border: #e4e8ef;
  --border-strong: #d0d7e2;

  /* Text. */
  --text: #0f172a;
  --text-muted: #4a556a;   /* 7.2:1 on --bg */
  --text-faint: #657189;   /* 4.9:1 on --bg */

  /* Brand navy, sampled from the logo. */
  --brand: #0b2a5b;
  --brand-bright: #1a56c9;

  /* Each Orbit app's own colours, the gradients behind its app icon (from
     scripts/orbitmark.swift). Like the icons, they are the same in light and
     dark, so the dark blocks below leave them alone. */
  --app-ai: linear-gradient(153deg, #b07cff, #5b2ee6);
  --app-mail: linear-gradient(153deg, #45b3ff, #1f5fe8);
  --app-calendar: linear-gradient(153deg, #ff7d6b, #e8344a);
  --app-chat: linear-gradient(153deg, #4be38f, #0fa35a);
  --app-ide: linear-gradient(153deg, #1c2540, #090d1a);
  --app-ide-ink: #5bd4f5; /* Orbit IDE's mark is cyan and violet on its dark tile, not white */
  --app-control: linear-gradient(153deg, #3b4fc4, #141b4d);
  --app-pass: #111111;
  --app-browser: linear-gradient(153deg, #b07cff, #e0379a);
  --app-installer: linear-gradient(153deg, #3f7bff, #0b2a5b);
  --app-ink: #ffffff;
  --app-edge: inset 0 0 0 1px rgb(255 255 255 / 0.12), 0 6px 14px -8px rgb(11 42 91 / 0.55);

  /* The accent is the brand. */
  --accent: #0b2a5b;
  --accent-hover: #143a7a;
  --accent-soft: #e8eefa;
  --accent-soft-text: #0b2a5b;
  --accent-text: #ffffff;
  --accent-ring: rgba(11, 42, 91, 0.22);
  --link: #1a56c9;

  --danger: #b42318;
  --danger-hover: #912018;
  --danger-soft: #fef3f2;
  --danger-text: #ffffff;

  --success: #067647;
  --success-soft: #ecfdf3;
  --warning: #b54708;
  --warning-soft: #fffaeb;

  /* User message bubble (Orbit AI). */
  --bubble-user: #e8eefa;
  --bubble-user-text: #0f172a;

  --scrim: rgba(15, 23, 42, 0.45);

  /* Radii — generous, to match the friendly mark. */
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 16px;
  --radius-xl: 22px;
  --radius-pill: 999px;

  /* Elevation. Navy-tinted so shadows read as depth, not dirt. */
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow: 0 1px 2px rgba(15, 23, 42, 0.05), 0 8px 24px -12px rgba(11, 42, 91, 0.22);
  --shadow-lg: 0 2px 4px rgba(15, 23, 42, 0.05), 0 20px 48px -16px rgba(11, 42, 91, 0.28);

  --ring: 0 0 0 3px var(--accent-ring);

  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --ease: cubic-bezier(0.2, 0, 0.13, 1);
  --dur-fast: 120ms;
  --dur: 180ms;
  --dur-slow: 260ms;
}

/* --------------------------------------------------------------------------
   Tokens — dark
   -------------------------------------------------------------------------- */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --bg: #0b0e14;
    --bg-subtle: #0f131b;
    --bg-raised: #141a25;
    --bg-inset: #1a2130;
    --bg-hover: #1b2232;
    --bg-active: #242d40;
    --sidebar-bg: #0d1118;

    --border: #212938;
    --border-strong: #303a4f;

    --text: #eef2f8;
    --text-muted: #a4afc4;
    --text-faint: #8291ab;

    --brand: #7aa7ff;
    --brand-bright: #9bbcff;

    --accent: #6d9eff;
    --accent-hover: #86afff;
    --accent-soft: #172543;
    --accent-soft-text: #b6ccff;
    --accent-text: #061225;
    --accent-ring: rgba(109, 158, 255, 0.32);
    --link: #8fb3ff;

    --danger: #f87171;
    --danger-hover: #fca5a5;
    --danger-soft: #2a1515;
    --danger-text: #1a0808;

    --success: #4ade80;
    --success-soft: #0f2a1c;
    --warning: #fbbf24;
    --warning-soft: #2b2110;

    --bubble-user: #1a2742;
    --bubble-user-text: #e8eefa;

    --scrim: rgba(0, 0, 0, 0.62);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px -8px rgba(0, 0, 0, 0.6);
    --shadow-lg: 0 2px 4px rgba(0, 0, 0, 0.4), 0 24px 56px -16px rgba(0, 0, 0, 0.75);
  }
}

[data-theme="dark"] {
  color-scheme: dark;

  --bg: #0b0e14;
  --bg-subtle: #0f131b;
  --bg-raised: #141a25;
  --bg-inset: #1a2130;
  --bg-hover: #1b2232;
  --bg-active: #242d40;
  --sidebar-bg: #0d1118;

  --border: #212938;
  --border-strong: #303a4f;

  --text: #eef2f8;
  --text-muted: #a4afc4;
  --text-faint: #8291ab;

  --brand: #7aa7ff;
  --brand-bright: #9bbcff;

  --accent: #6d9eff;
  --accent-hover: #86afff;
  --accent-soft: #172543;
  --accent-soft-text: #b6ccff;
  --accent-text: #061225;
  --accent-ring: rgba(109, 158, 255, 0.32);
  --link: #8fb3ff;

  --danger: #f87171;
  --danger-hover: #fca5a5;
  --danger-soft: #2a1515;
  --danger-text: #1a0808;

  --success: #4ade80;
  --success-soft: #0f2a1c;
  --warning: #fbbf24;
  --warning-soft: #2b2110;

  --bubble-user: #1a2742;
  --bubble-user-text: #e8eefa;

  --scrim: rgba(0, 0, 0, 0.62);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px -8px rgba(0, 0, 0, 0.6);
  --shadow-lg: 0 2px 4px rgba(0, 0, 0, 0.4), 0 24px 56px -16px rgba(0, 0, 0, 0.75);
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  height: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  min-height: 100%;
  margin: 0;
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.55;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }

.prose a,
.message a,
.notice a,
.text-link {
  color: var(--link);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--link) 40%, transparent);
  text-underline-offset: 3px;
  transition: text-decoration-color var(--dur-fast) var(--ease);
}
.prose a:hover,
.message a:hover,
.notice a:hover,
.text-link:hover { text-decoration-color: var(--link); }

h1, h2, h3, h4 {
  margin: 0 0 0.5em;
  line-height: 1.2;
  font-weight: 650;
  letter-spacing: -0.02em;
  color: var(--text);
}

h1 { font-size: 1.9rem; }
h2 { font-size: 1.35rem; }
h3 { font-size: 1.05rem; }
h4 { font-size: 0.95rem; }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

img, svg { max-width: 100%; }
img { display: block; }

hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 24px 0;
}

code, pre, kbd, samp {
  font-family: var(--mono);
  font-size: 0.875em;
}

code {
  background: var(--bg-inset);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  padding: 0.1em 0.4em;
}

pre {
  background: var(--bg-inset);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
  overflow-x: auto;
  line-height: 1.55;
}

pre code { background: none; border: none; padding: 0; font-size: 1em; }

kbd {
  display: inline-block;
  padding: 0.05em 0.45em;
  border: 1px solid var(--border-strong);
  border-bottom-width: 2px;
  border-radius: var(--radius-xs);
  background: var(--bg-raised);
  font-size: 0.78em;
  line-height: 1.5;
}

blockquote {
  margin: 0 0 1em;
  padding-left: 14px;
  border-left: 2px solid var(--border-strong);
  color: var(--text-muted);
}

ul, ol { margin: 0 0 1em; padding-left: 1.35em; }
li { margin: 0.2em 0; }

table { border-collapse: collapse; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

::selection { background: var(--accent-soft); color: var(--text); }
::-moz-focus-inner { border: 0; }

/* Icons inherit colour and sit on the text baseline. */
.icon {
  display: inline-block;
  flex: 0 0 auto;
  vertical-align: -0.18em;
}

/* --- Scrollbars --------------------------------------------------------- */

* {
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: var(--radius-pill);
  border: 3px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--text-faint); background-clip: content-box; }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 38px;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  background: var(--bg-raised);
  color: var(--text);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 550;
  line-height: 1.2;
  cursor: pointer;
  white-space: nowrap;
  text-align: center;
  text-decoration: none;
  box-shadow: var(--shadow-sm);
  transition: background var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease);
}

.btn:hover { background: var(--bg-hover); border-color: var(--border-strong); }
.btn:active { background: var(--bg-active); transform: translateY(0.5px); }

.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

.btn--primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-text);
  box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.btn--primary:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: var(--accent-text);
}
.btn--primary:active { background: var(--accent); }

.btn--ghost {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  color: var(--text-muted);
}
.btn--ghost:hover { background: var(--bg-hover); color: var(--text); border-color: transparent; }

.btn--soft {
  background: var(--accent-soft);
  border-color: transparent;
  color: var(--accent-soft-text);
  box-shadow: none;
}
.btn--soft:hover { background: var(--accent-soft); filter: brightness(0.97); }

.btn--danger {
  color: var(--danger);
  border-color: var(--border-strong);
}
.btn--danger:hover { background: var(--danger-soft); border-color: var(--danger); color: var(--danger); }

.btn--danger-solid {
  background: var(--danger);
  border-color: var(--danger);
  color: var(--danger-text);
}
.btn--danger-solid:hover { background: var(--danger-hover); border-color: var(--danger-hover); color: var(--danger-text); }

.btn--block { width: 100%; }
.btn--sm { min-height: 32px; padding: 5px 11px; font-size: 0.8rem; gap: 6px; border-radius: var(--radius-xs); }
.btn--lg { min-height: 46px; padding: 11px 22px; font-size: 0.95rem; border-radius: var(--radius); }
.btn--pill { border-radius: var(--radius-pill); }

.btn .icon { margin: 0 -2px; }

/* Icon-only buttons. */
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  border-radius: var(--radius-sm);
  cursor: pointer;
  line-height: 1;
  flex: 0 0 auto;
  padding: 0;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.icon-btn:hover { background: var(--bg-hover); color: var(--text); }
.icon-btn:active { background: var(--bg-active); }
.icon-btn[aria-expanded="true"] { background: var(--bg-active); color: var(--text); }
.icon-btn--bordered { border: 1px solid var(--border-strong); background: var(--bg-raised); box-shadow: var(--shadow-sm); }
.icon-btn--lg { width: 38px; height: 38px; }
.icon-btn.is-success { color: var(--success); }

/* Segmented control. */
.segmented {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  background: var(--bg-inset);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  flex-wrap: wrap;
}
.segmented .btn {
  min-height: 30px;
  padding: 4px 12px;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  color: var(--text-muted);
  font-weight: 500;
}
.segmented .btn:hover { background: var(--bg-raised); color: var(--text); }
.segmented .btn.is-active {
  background: var(--bg-raised);
  color: var(--text);
  font-weight: 600;
  box-shadow: var(--shadow-sm);
}
.segmented .btn .count {
  font-variant-numeric: tabular-nums;
  color: var(--text-faint);
  font-weight: 500;
}

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */

.field { margin-bottom: 18px; }
.field:last-child { margin-bottom: 0; }

.field__label {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 6px;
}

.field__hint {
  font-size: 0.78rem;
  color: var(--text-faint);
  margin: 6px 0 0;
  line-height: 1.5;
}

.field__hint a { color: var(--link); text-decoration: underline; text-underline-offset: 2px; }

.field__error {
  font-size: 0.78rem;
  color: var(--danger);
  margin: 6px 0 0;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="url"],
input[type="tel"],
input:not([type]),
select,
textarea {
  width: 100%;
  min-height: 40px;
  padding: 9px 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--bg-raised);
  color: var(--text);
  font: inherit;
  font-size: 0.9rem;
  box-shadow: var(--shadow-sm);
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}

textarea { resize: vertical; min-height: 96px; line-height: 1.55; }

select {
  cursor: pointer;
  padding-right: 36px;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23657189' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%238291ab' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  }
}
[data-theme="dark"] select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%238291ab' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--ring);
}

input:disabled, select:disabled, textarea:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  background: var(--bg-inset);
  box-shadow: none;
}

input::placeholder, textarea::placeholder { color: var(--text-faint); opacity: 1; }

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }

input[type="checkbox"],
input[type="radio"] {
  width: 17px;
  height: 17px;
  min-height: 0;
  margin: 0;
  flex: 0 0 auto;
  accent-color: var(--accent);
  cursor: pointer;
  box-shadow: none;
}

.checkbox {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.875rem;
  margin-bottom: 12px;
  cursor: pointer;
  line-height: 1.45;
  color: var(--text);
}
.checkbox:last-child { margin-bottom: 0; }
.checkbox input { margin-top: 2px; }
.checkbox__hint { display: block; font-size: 0.78rem; color: var(--text-faint); margin-top: 2px; }

/* Input with a leading icon. */
.input-icon { position: relative; }
.input-icon > .icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-faint);
  pointer-events: none;
}
.input-icon > input { padding-left: 36px; }

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */

.card {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 22px;
  box-shadow: var(--shadow-sm);
}
.card + .card { margin-top: 16px; }

.card__title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1rem;
  font-weight: 650;
  margin: 0 0 4px;
  letter-spacing: -0.01em;
}
.card__title .icon { color: var(--text-faint); }

.card__subtitle {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin: 0 0 16px;
  line-height: 1.5;
}
.card__subtitle:last-child { margin-bottom: 0; }

.card--flush { padding: 0; overflow: hidden; }
.card--soft { background: var(--bg-subtle); box-shadow: none; }
.card--accent { border-color: var(--accent); box-shadow: var(--shadow); }

.card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.card__header > div:first-child { min-width: 0; }
.card__header .card__subtitle { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   Badges
   -------------------------------------------------------------------------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.5;
  background: var(--bg-inset);
  color: var(--text-muted);
  border: 1px solid transparent;
  white-space: nowrap;
  vertical-align: middle;
}
.badge .icon { width: 12px; height: 12px; }

.badge--accent { background: var(--accent-soft); color: var(--accent-soft-text); }
.badge--outline { background: transparent; border-color: var(--border-strong); color: var(--text-muted); }
.badge--success { background: var(--success-soft); color: var(--success); }
.badge--warning { background: var(--warning-soft); color: var(--warning); }
.badge--danger { background: var(--danger-soft); color: var(--danger); }
.badge--premium { background: var(--accent-soft); color: var(--accent-soft-text); }
.badge--pro { background: var(--accent); color: var(--accent-text); }
.badge--free { background: var(--bg-inset); color: var(--text-muted); }
.badge--muted { background: var(--bg-inset); color: var(--text-muted); }
.badge--personal { background: var(--bg-inset); color: var(--text-muted); }

/* --------------------------------------------------------------------------
   Flash messages (Django messages framework)
   -------------------------------------------------------------------------- */

.messages { list-style: none; margin: 0 0 18px; padding: 0; }

.message {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 14px;
  border-radius: var(--radius);
  margin-bottom: 8px;
  font-size: 0.875rem;
  line-height: 1.5;
  border: 1px solid var(--border);
  background: var(--bg-raised);
  color: var(--text);
  box-shadow: var(--shadow-sm);
}
.message:last-child { margin-bottom: 0; }
.message > .icon { margin-top: 2px; flex: 0 0 auto; }

.message--success { border-color: color-mix(in srgb, var(--success) 35%, var(--border)); }
.message--success > .icon { color: var(--success); }
.message--info { border-color: color-mix(in srgb, var(--accent) 30%, var(--border)); }
.message--info > .icon { color: var(--accent); }
.message--warning { border-color: color-mix(in srgb, var(--warning) 40%, var(--border)); }
.message--warning > .icon { color: var(--warning); }
.message--error {
  background: var(--danger-soft);
  border-color: color-mix(in srgb, var(--danger) 30%, transparent);
  color: var(--danger);
  font-weight: 500;
}
.message--error > .icon { color: var(--danger); }

/* --------------------------------------------------------------------------
   Avatars
   -------------------------------------------------------------------------- */

.avatar {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: var(--accent-text);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  flex: 0 0 auto;
  overflow: hidden;
  line-height: 1;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar--soft { background: var(--accent-soft); color: var(--accent-soft-text); }
.avatar--neutral { background: var(--bg-inset); color: var(--text-muted); }
.avatar--square { border-radius: var(--radius-sm); }
.avatar--sm { width: 24px; height: 24px; font-size: 0.6rem; }
.avatar--lg { width: 40px; height: 40px; font-size: 0.85rem; border-radius: 12px; }
.avatar--xl { width: 56px; height: 56px; font-size: 1.1rem; border-radius: 16px; }

/* --------------------------------------------------------------------------
   Dropdown menus
   -------------------------------------------------------------------------- */

.menu { position: relative; }

.menu__panel {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  min-width: 220px;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 6px;
  z-index: 50;
  display: none;
  max-height: min(440px, 70vh);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.menu__panel.is-open { display: block; animation: menu-in var(--dur) var(--ease); }
.menu__panel--up { top: auto; bottom: calc(100% + 6px); }
.menu__panel--left { right: auto; left: 0; }

@keyframes menu-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}
.menu__panel--up.is-open { animation-name: menu-in-up; }
@keyframes menu-in-up {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}

.menu__item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 34px;
  padding: 7px 10px;
  border: none;
  background: transparent;
  border-radius: var(--radius-xs);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
  text-align: left;
  white-space: nowrap;
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.menu__item .icon { color: var(--text-faint); }
.menu__item:hover { background: var(--bg-hover); }
.menu__item:hover .icon { color: var(--text); }
.menu__item--danger { color: var(--danger); }
.menu__item--danger .icon { color: var(--danger); }
.menu__item--danger:hover { background: var(--danger-soft); color: var(--danger); }
.menu__item__value { margin-left: auto; color: var(--text-faint); font-weight: 500; font-size: 0.78rem; }
.menu__divider { height: 1px; background: var(--border); margin: 6px 4px; }
.menu__label {
  padding: 8px 10px 4px;
  font-size: 0.68rem;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* --------------------------------------------------------------------------
   Meter
   -------------------------------------------------------------------------- */

.meter {
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--bg-active);
  overflow: hidden;
}
.meter__fill {
  height: 100%;
  background: var(--accent);
  border-radius: var(--radius-pill);
  transition: width var(--dur-slow) var(--ease);
}
.meter__fill--warning { background: var(--warning); }
.meter__fill--danger { background: var(--danger); }

/* --------------------------------------------------------------------------
   Tables
   -------------------------------------------------------------------------- */

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}
.table th {
  text-align: left;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-faint);
  font-weight: 650;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
}
.table td {
  padding: 10px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.table tr:last-child td { border-bottom: none; }
.table td:last-child, .table th:last-child { text-align: right; }
.table--numeric td, .table--numeric th { font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   Empty states
   -------------------------------------------------------------------------- */

.empty {
  text-align: center;
  padding: 56px 24px;
  color: var(--text-muted);
}
.empty__icon {
  display: inline-grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: var(--bg-inset);
  color: var(--text-faint);
  margin-bottom: 14px;
}
.empty__title {
  font-size: 1.05rem;
  font-weight: 650;
  color: var(--text);
  margin-bottom: 6px;
  letter-spacing: -0.01em;
}
.empty__body { max-width: 44ch; margin: 0 auto; font-size: 0.9rem; }
.empty .btn { margin-top: 18px; }

/* --------------------------------------------------------------------------
   Site chrome — marketing nav and footer
   -------------------------------------------------------------------------- */

.site {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
}

.site__main { flex: 1 1 auto; }

.nav {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 16px 24px;
  max-width: 1120px;
  margin: 0 auto;
  width: 100%;
}

.nav__links {
  display: flex;
  gap: 6px;
  margin-left: auto;
  align-items: center;
  font-size: 0.875rem;
}

.nav__link {
  padding: 7px 11px;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-weight: 500;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.nav__link:hover { background: var(--bg-hover); color: var(--text); }
.nav__link.is-active { color: var(--text); }

.nav__sep { width: 1px; height: 20px; background: var(--border); margin: 0 6px; }

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--text);
  letter-spacing: -0.02em;
  min-width: 0;
  text-decoration: none;
}

.brand__logo {
  height: 28px;
  width: auto;
  flex: 0 0 auto;
  display: block;
}

/* The mark is drawn in Orbit's blues, which read on light and dark surfaces
   alike, so it is shown as it is. */

.brand__text { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.brand__name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.brand__sub {
  display: block;
  font-size: 0.64rem;
  font-weight: 650;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-faint);
  white-space: nowrap;
}

.footer {
  border-top: 1px solid var(--border);
  padding: 28px 24px;
  margin-top: auto;
}
.footer__inner {
  max-width: 1120px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 0.82rem;
  color: var(--text-faint);
}
.footer__brand { display: flex; align-items: center; gap: 10px; color: var(--text-muted); font-weight: 600; }
.footer__links { display: flex; gap: 4px; flex-wrap: wrap; }
.footer__links a {
  color: var(--text-faint);
  padding: 4px 8px;
  border-radius: var(--radius-xs);
}
.footer__links a:hover { color: var(--text); background: var(--bg-hover); }
.footer__sep { width: 1px; height: 14px; background: var(--border-strong); margin: 0 6px; align-self: center; }

/* --------------------------------------------------------------------------
   Entrance — sign in, sign up, reset, and every other allauth screen
   -------------------------------------------------------------------------- */

.entrance {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 24px 64px;
  position: relative;
}

.entrance__card {
  width: 100%;
  max-width: 420px;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 32px;
  box-shadow: var(--shadow);
  position: relative;
}

.entrance__mark {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: var(--accent-soft);
  margin: 0 0 18px;
}
.entrance__mark img { height: 30px; width: auto; }

.entrance__title {
  font-size: 1.45rem;
  font-weight: 650;
  letter-spacing: -0.025em;
  margin: 0 0 6px;
}
.entrance__lede {
  color: var(--text-muted);
  font-size: 0.9rem;
  margin: 0 0 22px;
  line-height: 1.5;
}
.entrance__card form { margin: 0; }
.entrance__card .field { margin-bottom: 14px; }
.entrance__card .stack > * + * { margin-top: 14px; }
.entrance__actions { margin-top: 18px; display: flex; flex-direction: column; gap: 10px; }
.entrance__actions .btn { width: 100%; min-height: 42px; }
.entrance__card h1 { font-size: 1.45rem; letter-spacing: -0.025em; margin-bottom: 6px; }
.entrance__card h2 { font-size: 0.95rem; margin: 0 0 10px; color: var(--text-muted); font-weight: 600; }
.entrance__card p { font-size: 0.9rem; color: var(--text-muted); }
.entrance__card hr { margin: 18px 0; }

.entrance__footer {
  margin-top: 20px;
  text-align: center;
  font-size: 0.85rem;
  color: var(--text-muted);
}
.entrance__meta {
  margin-top: 18px;
  display: flex;
  justify-content: center;
  gap: 4px;
  font-size: 0.78rem;
  color: var(--text-faint);
}
.entrance__meta a { padding: 2px 6px; border-radius: var(--radius-xs); }
.entrance__meta a:hover { color: var(--text); background: var(--bg-hover); }

/* "or" divider between the password form and third-party providers. */
.divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0;
  color: var(--text-faint);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--border); }

.providers { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.providers .btn { width: 100%; justify-content: center; min-height: 42px; font-weight: 550; }
.providers .btn .icon { width: 18px; height: 18px; }

/* Decorative orbit rings behind an entrance card. Pure CSS, no images. */
.orbit-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.orbit-bg::before,
.orbit-bg::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--accent) 14%, transparent);
  transform: translate(-50%, -50%);
}
.orbit-bg::before { width: 680px; height: 680px; }
.orbit-bg::after { width: 1040px; height: 1040px; border-color: color-mix(in srgb, var(--accent) 8%, transparent); }
.orbit-bg__glow {
  position: absolute;
  left: 50%;
  top: 40%;
  width: 720px;
  height: 520px;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 12%, transparent), transparent 70%);
}
.entrance > *:not(.orbit-bg) { position: relative; z-index: 1; }

/* --------------------------------------------------------------------------
   Prose (legal and about pages)
   -------------------------------------------------------------------------- */

.prose { max-width: 68ch; }
.prose h1 { font-size: 2rem; margin-bottom: 8px; }
.prose h2 { font-size: 1.15rem; margin: 36px 0 10px; }
.prose h3 { font-size: 0.98rem; margin: 24px 0 8px; }
.prose p, .prose li { color: var(--text-muted); font-size: 0.95rem; line-height: 1.7; }
.prose ul, .prose ol { padding-left: 20px; }
.prose .lede { font-size: 1.05rem; color: var(--text-muted); }
.prose__meta { font-size: 0.8rem; color: var(--text-faint); margin-bottom: 28px; }
/* The topbar is sticky, so a heading reached from the contents stops below it. */
.prose [id] { scroll-margin-top: 88px; }
/* The numbered contents at the top of the privacy policy and the terms. */
.prose .prose__contents {
  margin: 0 0 8px;
  padding: 16px 20px 16px 40px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-raised);
}
.prose__contents li { line-height: 1.9; }
@media (min-width: 640px) {
  .prose .prose__contents { columns: 2; column-gap: 32px; }
  .prose__contents li { break-inside: avoid; }
}

/* --------------------------------------------------------------------------
   Utilities
   -------------------------------------------------------------------------- */

.stack > * + * { margin-top: 16px; }
.stack--sm > * + * { margin-top: 8px; }
.row { display: flex; align-items: center; gap: 10px; }
.row--between { justify-content: space-between; }
.row--wrap { flex-wrap: wrap; }
.row--top { align-items: flex-start; }
.row--end { justify-content: flex-end; }
.row--center { justify-content: center; }
.row--tight { gap: 6px; }
.actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.actions--end { justify-content: flex-end; }
.actions--center { justify-content: center; }
.actions--spaced { margin-top: 20px; }
.grow, .flex-1 { flex: 1 1 auto; min-width: 0; }
.muted { color: var(--text-muted); }
.faint { color: var(--text-faint); }
.accent { color: var(--accent); }
.small { font-size: 0.85rem; }
.tiny { font-size: 0.74rem; }
.strong { font-weight: 600; }
.mono { font-family: var(--mono); font-size: 0.85em; }
.tabular { font-variant-numeric: tabular-nums; }
.center, .text-center { text-align: center; }
.text-right { text-align: right; }
.text-danger { color: var(--danger); }
.gap-3 { gap: 14px; }
.weight-normal { font-weight: 500; }
.entrance__mark--center { margin-left: auto; margin-right: auto; }
.entrance__mark--danger { background: var(--danger-soft); }
.grid-span { grid-column: 1 / -1; }
.hidden { display: none !important; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.px-1 { padding-left: 8px; padding-right: 8px; }
.pt-2 { padding-top: 16px; }
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 8px; }
.mt-2 { margin-top: 16px; }
.mt-3 { margin-top: 24px; }
.mt-4 { margin-top: 32px; }
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 8px; }
.mb-2 { margin-bottom: 16px; }
.mb-3 { margin-bottom: 24px; }
.mb-4 { margin-bottom: 32px; }

.shell { margin: 0 auto; width: 100%; }
.shell--xs { max-width: 420px; }
.shell--sm { max-width: 560px; }
.shell--md { max-width: 720px; }
.shell--lg { max-width: 960px; }

.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;
}

/* Eyebrow label above a heading. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}
/* An app's mark in an eyebrow is a small copy of its app icon. */
.eyebrow > :is(.icon--orbit-ai, .icon--orbit-mail, .icon--orbit-calendar, .icon--orbit-chat, .icon--orbit-ide, .icon--orbit-control, .icon--orbit-pass, .icon--orbit-browser) {
  box-sizing: content-box;
  padding: 3px;
  border-radius: 6px;
  color: var(--app-ink);
}
.eyebrow > .icon--orbit-ai { background: var(--app-ai); }
.eyebrow > .icon--orbit-mail { background: var(--app-mail); }
.eyebrow > .icon--orbit-calendar { background: var(--app-calendar); }
.eyebrow > .icon--orbit-chat { background: var(--app-chat); }
.eyebrow > .icon--orbit-ide { background: var(--app-ide); color: var(--app-ide-ink); }
.eyebrow > .icon--orbit-control { background: var(--app-control); }
.eyebrow > .icon--orbit-pass { background: var(--app-pass); }
.eyebrow > .icon--orbit-browser { background: var(--app-browser); }

/* Key/value definition rows. */
.kv { display: flex; flex-direction: column; gap: 0; }
.kv__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.875rem;
}
.kv__row:last-child { border-bottom: none; }
.kv__key { color: var(--text-muted); }
.kv__value { font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }

/* --------------------------------------------------------------------------
   Motion, contrast and print
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

@media (forced-colors: active) {
  .btn, .card, .badge, .menu__panel, .entrance__card, .avatar { border: 1px solid CanvasText; }
  .meter__fill { background: Highlight; }
  .icon-btn { border: 1px solid transparent; }
}

@media (max-width: 640px) {
  .nav { padding: 12px 16px; gap: 12px; }
  .nav__links { gap: 2px; }
  .nav__link { padding: 7px 8px; }
  .footer { padding: 22px 16px; }
  .footer__inner { flex-direction: column; align-items: flex-start; }
  .entrance { padding: 24px 16px 48px; }
  .entrance__card { padding: 24px 20px; border-radius: var(--radius-lg); }
}


/* ==========================================================================
   Orbit Website: marketing components
   ========================================================================== */

/* --------------------------------------------------------------------------
   Self-hosted Inter
   The site ships its own copy of Inter (a variable font, latin subset) so no
   page makes a request to Google Fonts. Kept out of the shared core above,
   which check_shared.py compares with the apps.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-latin.260c81a4759b.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --------------------------------------------------------------------------
   Site tokens
   The shared core above is kept identical to the apps. These tokens are the
   website's own: the backdrop behind the hero and the depth cues on cards.
   Light is a clear morning sky: a pale blue wash at the top, a faint dot
   grid, flat white cards. Dark is night: a navy nebula glowing up from the
   top edge, a scatter of stars that fades out below the hero, and cards with
   a hairline of light along their top edge so they read as raised surfaces.
   -------------------------------------------------------------------------- */

:root {
  --sky: linear-gradient(180deg, #eef3fc 0%, #f8fafe 45%, var(--bg) 100%);
  --nebula-1: color-mix(in srgb, var(--brand-bright) 14%, transparent);
  --nebula-2: color-mix(in srgb, var(--accent) 9%, transparent);
  --nebula-3: transparent;
  --grid-ink: color-mix(in srgb, var(--brand) 18%, transparent);
  --grid-opacity: 0.6;
  --stars-opacity: 0;
  --edge: 0 0 0 0 transparent;
  --card-hover-border: color-mix(in srgb, var(--accent) 45%, var(--border));
  --topbar-bg: color-mix(in srgb, var(--bg) 78%, transparent);
  --cta-bg:
    radial-gradient(60% 70% at 50% 0%, color-mix(in srgb, var(--brand-bright) 12%, transparent), transparent 70%),
    linear-gradient(180deg, var(--bg-raised), var(--bg-subtle));
  --headline-gradient: linear-gradient(100deg, var(--brand) 0%, var(--brand-bright) 100%);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --sky: linear-gradient(180deg, #0d1424 0%, #0b1019 40%, var(--bg) 100%);
    --nebula-1: rgba(70, 120, 255, 0.32);
    --nebula-2: rgba(130, 100, 255, 0.2);
    --nebula-3: rgba(56, 189, 248, 0.1);
    --grid-ink: transparent;
    --grid-opacity: 0;
    --stars-opacity: 1;
    --edge: inset 0 1px 0 rgba(255, 255, 255, 0.055);
    --card-hover-border: color-mix(in srgb, var(--accent) 60%, var(--border-strong));
    --topbar-bg: color-mix(in srgb, var(--bg) 70%, transparent);
    --cta-bg:
      radial-gradient(60% 70% at 50% 0%, rgba(70, 120, 255, 0.22), transparent 70%),
      linear-gradient(180deg, var(--bg-raised), var(--bg-subtle));
    --headline-gradient: linear-gradient(100deg, #b8ccff 0%, #7aa7ff 100%);
  }
}
[data-theme="dark"] {
  --sky: linear-gradient(180deg, #0d1424 0%, #0b1019 40%, var(--bg) 100%);
  --nebula-1: rgba(70, 120, 255, 0.32);
  --nebula-2: rgba(130, 100, 255, 0.2);
  --nebula-3: rgba(56, 189, 248, 0.1);
  --grid-ink: transparent;
  --grid-opacity: 0;
  --stars-opacity: 1;
  --edge: inset 0 1px 0 rgba(255, 255, 255, 0.055);
  --card-hover-border: color-mix(in srgb, var(--accent) 60%, var(--border-strong));
  --topbar-bg: color-mix(in srgb, var(--bg) 70%, transparent);
  --cta-bg:
    radial-gradient(60% 70% at 50% 0%, rgba(70, 120, 255, 0.22), transparent 70%),
    linear-gradient(180deg, var(--bg-raised), var(--bg-subtle));
  --headline-gradient: linear-gradient(100deg, #b8ccff 0%, #7aa7ff 100%);
}

/* Backdrop. The sky gradient tints the top of the page; the glow layers
   three soft nebulae over it; the stars (dark) or the dot grid (light) fade
   out below the hero. All of it sits behind everything and never catches
   the pointer. */
.site {
  background: var(--sky) no-repeat;
  background-size: 100% 1100px;
}
.site__glow {
  position: absolute;
  inset: 0 0 auto;
  height: 900px;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
  background:
    radial-gradient(60% 50% at 50% -4%, var(--nebula-1), transparent 70%),
    radial-gradient(34% 42% at 86% 6%, var(--nebula-2), transparent 70%),
    radial-gradient(30% 36% at 12% 14%, var(--nebula-3), transparent 70%);
}
.site__glow::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: var(--stars-opacity);
  background-image:
    radial-gradient(circle 1px at 6% 12%, rgba(255, 255, 255, 0.75) 0, transparent 100%),
    radial-gradient(circle 1.4px at 14% 31%, rgba(214, 228, 255, 0.85) 0, transparent 100%),
    radial-gradient(circle 1px at 22% 8%, rgba(255, 255, 255, 0.55) 0, transparent 100%),
    radial-gradient(circle 0.8px at 29% 22%, rgba(255, 255, 255, 0.6) 0, transparent 100%),
    radial-gradient(circle 1.2px at 37% 5%, rgba(214, 228, 255, 0.7) 0, transparent 100%),
    radial-gradient(circle 0.9px at 44% 17%, rgba(255, 255, 255, 0.5) 0, transparent 100%),
    radial-gradient(circle 1.6px at 52% 10%, rgba(255, 255, 255, 0.9) 0, transparent 100%),
    radial-gradient(circle 0.8px at 59% 26%, rgba(255, 255, 255, 0.45) 0, transparent 100%),
    radial-gradient(circle 1.1px at 66% 4%, rgba(214, 228, 255, 0.7) 0, transparent 100%),
    radial-gradient(circle 1px at 73% 19%, rgba(255, 255, 255, 0.6) 0, transparent 100%),
    radial-gradient(circle 1.5px at 81% 9%, rgba(255, 255, 255, 0.8) 0, transparent 100%),
    radial-gradient(circle 0.9px at 88% 28%, rgba(214, 228, 255, 0.55) 0, transparent 100%),
    radial-gradient(circle 1.2px at 94% 15%, rgba(255, 255, 255, 0.7) 0, transparent 100%),
    radial-gradient(circle 0.8px at 10% 44%, rgba(255, 255, 255, 0.4) 0, transparent 100%),
    radial-gradient(circle 1px at 33% 38%, rgba(255, 255, 255, 0.45) 0, transparent 100%),
    radial-gradient(circle 1.3px at 70% 36%, rgba(214, 228, 255, 0.6) 0, transparent 100%),
    radial-gradient(circle 0.9px at 91% 42%, rgba(255, 255, 255, 0.4) 0, transparent 100%),
    radial-gradient(circle 1px at 48% 46%, rgba(255, 255, 255, 0.35) 0, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 35%, transparent 80%);
  mask-image: linear-gradient(180deg, #000 0%, #000 35%, transparent 80%);
}
.site__glow::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, var(--grid-ink) 1px, transparent 1.2px);
  background-size: 24px 24px;
  -webkit-mask-image: radial-gradient(70% 60% at 50% 18%, #000 10%, transparent 72%);
  mask-image: radial-gradient(70% 60% at 50% 18%, #000 10%, transparent 72%);
  opacity: var(--grid-opacity);
}
.site > *:not(.site__glow) { position: relative; z-index: 1; }

/* Primary buttons carry a little of the accent in their shadow on hover, so
   they lift toward the pointer in either theme. */
.btn--primary:hover {
  box-shadow: var(--shadow-sm), 0 10px 24px -10px color-mix(in srgb, var(--accent) 70%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

/* Every section sits in the same column: 1120px at most, with a gutter that
   narrows from 24px to 16px on phones. Sections set only their block padding
   (padding-block), so `section container` on one element keeps the gutter. */
:root { --gutter: clamp(16px, 4vw, 24px); }
.container { max-width: 1120px; margin: 0 auto; padding-inline: var(--gutter); width: 100%; }

/* Sticky, translucent top bar. */
.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--topbar-bg);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
}

/* The header: brand, then the tabs, then the account actions on the right.
   The tabs are set in the text colour at a slightly larger size than body
   copy. Personal, Business, Download and Resources open a mega menu: a panel
   the width of the bar, under it, laid out after proton.me's. The panel hangs
   off the top bar (the nav itself is static), so it spans the whole window. */
.site > .topbar { position: sticky; top: 0; z-index: 30; }
.nav { position: static; gap: 28px; padding: 14px var(--gutter); }
.nav__toggle { display: none; }
.nav__menu { display: flex; align-items: center; flex: 1 1 auto; min-width: 0; gap: 16px; }
.nav__tabs { display: flex; align-items: center; gap: 2px; min-width: 0; list-style: none; margin: 0; padding: 0; }
.nav__item { position: static; }
.nav__tab {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 12px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.nav__tab:hover { background: var(--bg-hover); }
.nav__tab.is-active { color: var(--accent); }
.nav__chevron { color: var(--text-faint); transition: transform var(--dur) var(--ease); }
.nav__item.is-open > .nav__tab { background: var(--accent-soft); color: var(--accent-soft-text); }
.nav__item.is-open > .nav__tab .nav__chevron { transform: rotate(180deg); color: currentColor; }
.nav__actions { display: flex; align-items: center; gap: 10px; margin-left: auto; flex: 0 0 auto; }
.nav__cta { border-radius: var(--radius-pill); padding: 8px 18px; min-height: 38px; font-size: 0.88rem; }
.nav__cta .icon { color: inherit; }
.nav__signin {
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  color: var(--link);
  font-size: 0.92rem;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
}
.nav__signin:hover { background: var(--bg-hover); }
.nav__quick { display: none; }
.nav__theme-label { display: none; }

/* Under the open phone menu: the page dims and holds still, and the bar turns opaque. */
.site > .nav-scrim { position: fixed; inset: 0; z-index: 25; background: var(--scrim); }
.site > .nav-scrim[hidden] { display: none; }

/* --- Mega menus ---------------------------------------------------------- */

.mega {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--bg-raised);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  max-height: calc(100vh - 70px);
  overflow-y: auto;
}
.nav__item.is-open > .mega { display: block; animation: mega-in var(--dur) var(--ease); }
/* Without the script a menu opens while the pointer or the focus is in its tab. */
html:not(.js) .nav__item:hover > .mega,
html:not(.js) .nav__item:focus-within > .mega { display: block; }
@keyframes mega-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

.mega__inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 28px 24px 22px;
  display: grid;
  gap: 18px 36px;
}
.mega__inner--products { grid-template-columns: minmax(0, 2.1fr) minmax(0, 1fr) minmax(240px, 1.15fr); }
.mega__inner--download { grid-template-columns: 200px 290px minmax(0, 1fr); }
.mega__inner--resources { grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(240px, 1.15fr); }

.mega__title {
  margin: 0 0 12px;
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}
.mega__products { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 16px; }
.mega__product {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 9px 10px;
  margin: 0 -10px;
  border-radius: var(--radius);
  color: var(--text);
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease);
}
.mega__product:hover { background: var(--bg-hover); }
.mega__icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: 12px;
}
.mega__icon--plain { background: var(--bg-inset); color: var(--text-muted); }
.mega__text { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.mega__text strong { font-size: 0.95rem; font-weight: 600; }
.mega__text small { font-size: 0.82rem; color: var(--text-muted); margin-top: 2px; }
.mega__product:hover .mega__text strong { color: var(--accent); }

.mega__col { min-width: 0; }
.mega__links { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.mega__links a {
  display: block;
  padding: 7px 10px;
  margin: 0 -10px;
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 0.93rem;
  text-decoration: none;
}
.mega__links a:hover { background: var(--bg-hover); color: var(--accent); }

.mega__promo {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 250px;
  padding: 24px;
  border-radius: 20px;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(122, 167, 255, 0.45), transparent 60%),
    radial-gradient(90% 70% at 0% 100%, rgba(130, 100, 255, 0.35), transparent 65%),
    linear-gradient(160deg, #143a7a, #0b1a3a);
  grid-row: span 2;
}
.mega__promo::before,
.mega__promo::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.16);
  pointer-events: none;
}
.mega__promo::before { width: 260px; height: 260px; top: -110px; right: -90px; }
.mega__promo::after { width: 160px; height: 160px; top: -50px; right: -30px; border-color: rgba(255, 255, 255, 0.1); }
.mega__promo > * { position: relative; }
.mega__promo-apps { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: auto; padding-bottom: 20px; }
.mega__promo-apps .app-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; box-shadow: 0 0 0 1px rgb(255 255 255 / 0.18), 0 8px 18px -10px rgb(0 0 0 / 0.6); }
.mega__promo-eyebrow { font-size: 0.74rem; font-weight: 600; color: rgba(255, 255, 255, 0.78); }
.mega__promo-title { margin: 6px 0 6px; font-size: 1.32rem; font-weight: 650; line-height: 1.2; letter-spacing: -0.02em; text-wrap: balance; }
.mega__promo-text { margin: 0 0 16px; font-size: 0.86rem; line-height: 1.5; color: rgba(255, 255, 255, 0.8); }
.mega__promo-btn.btn { justify-content: center; border-radius: var(--radius-pill); background: #fff; color: #0b2a5b; border-color: transparent; font-weight: 650; }
.mega__promo-btn.btn:hover { background: #eef3fc; color: #0b2a5b; }

.mega__foot {
  grid-column: 1 / span 2;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 36px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.mega__inner--download .mega__foot { grid-column: 1 / -1; }
.mega__foot a { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 0.95rem; color: var(--link); text-decoration: none; transition: gap var(--dur) var(--ease); }
.mega__foot a:hover { gap: 12px; }

/* Download: the apps, the installer card, the chosen app's platforms. */
.mega__apps { list-style: none; margin: 0; padding: 0 22px 0 0; border-right: 1px solid var(--border); display: grid; gap: 2px; align-content: start; }
.mega__app {
  display: block;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  color: var(--text);
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
}
.mega__app:hover { background: var(--bg-hover); }
.mega__app.is-current { color: var(--accent); background: var(--accent-soft); }
.mega__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 22px 16px;
  border-radius: 20px;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
}
.mega__card-mark { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 13px; background: var(--app-installer); color: #fff; box-shadow: var(--app-edge); }
.mega__card-title { margin: 12px 0 10px; font-weight: 650; }
.mega__checks { list-style: none; margin: 0 0 12px; padding: 10px 12px; width: 100%; display: grid; gap: 7px; border-radius: var(--radius); background: var(--bg-raised); border: 1px solid var(--border); text-align: left; }
.mega__checks li { display: flex; align-items: center; gap: 8px; font-size: 0.8rem; font-weight: 600; }
.mega__check { display: grid; place-items: center; width: 16px; height: 16px; border-radius: 4px; background: var(--accent); color: var(--accent-text); flex: 0 0 auto; }
.mega__check-icon { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; flex: 0 0 auto; }
.mega__card-text { margin: 0 0 14px; font-size: 0.82rem; color: var(--text-muted); line-height: 1.45; }
.mega__card-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.mega__card-actions .btn { padding: 6px 11px; gap: 6px; font-size: 0.82rem; }
.mega__panes { min-width: 0; }
.mega__pane { display: none; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 18px 28px; }
.mega__pane.is-current { display: grid; }
.mega__platforms { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.mega__platforms a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  margin: 0 -10px;
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 0.95rem;
  text-decoration: none;
}
.mega__platforms a .icon { color: var(--text-muted); }
.mega__platforms a:hover { background: var(--bg-hover); color: var(--accent); }
.mega__platforms a:hover .icon { color: var(--accent); }
.mega__note { margin: 0; font-size: 0.88rem; color: var(--text-muted); line-height: 1.5; }

@media (max-width: 1040px) {
  .nav { position: relative; gap: 16px; }
  .nav__toggle { display: inline-flex; margin-left: auto; }
  .nav__quick { display: inline-flex; margin-left: auto; padding: 6px 14px; min-height: 36px; border-radius: var(--radius-pill); font-size: 0.85rem; white-space: nowrap; }
  .nav__quick + .nav__toggle { margin-left: 0; }
  html.nav-open { overflow: hidden; }
  html.nav-open .topbar { background: var(--bg); }
  .nav__menu {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 16px;
    right: 16px;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 10px;
    max-height: calc(100vh - 90px);
    overflow-y: auto;
    background: var(--bg-raised);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    z-index: 40;
  }
  .nav__menu.is-open { display: flex; }
  .nav__tabs { flex-direction: column; align-items: stretch; gap: 2px; }
  .nav__tab { width: 100%; justify-content: space-between; padding: 11px 12px; font-size: 0.98rem; }
  .nav__actions {
    margin-left: 0;
    flex-wrap: wrap;
    gap: 8px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
  }
  .nav__actions .nav__cta { flex: 1 1 auto; justify-content: center; }
  .nav__theme { flex: 1 1 100%; width: auto; height: 40px; justify-content: flex-start; gap: 10px; padding: 0 12px; }
  .nav__theme-label { display: inline; color: var(--text); font-size: 0.95rem; font-weight: 600; }
  .nav__signin { flex: 1 1 auto; text-align: center; }

  /* Each menu becomes a list under its tab. */
  .mega { position: static; border: 0; box-shadow: none; background: transparent; max-height: none; overflow: visible; }
  html:not(.js) .nav__item:hover > .mega { display: none; }
  .nav__item.is-open > .mega { animation: none; }
  .mega__inner { display: block; padding: 4px 4px 12px 12px; }
  .mega__products { grid-template-columns: 1fr; }
  .mega__product { margin: 0; padding: 8px; gap: 12px; }
  .mega__icon { width: 34px; height: 34px; border-radius: 10px; }
  .mega__text small { display: none; }
  .mega__col { margin-top: 12px; }
  .mega__links a { margin: 0; }
  .mega__title { margin: 12px 0 6px; }
  .mega__main > .mega__title:first-child { margin-top: 4px; }
  .mega__promo, .mega__card, .mega__panes { display: none; }
  .mega__apps { border: 0; padding: 0; }
  .mega__app.is-current { background: transparent; color: var(--text); }
  .mega__foot { border: 0; padding-top: 10px; flex-direction: column; gap: 10px; }
}

/* --- Hero --------------------------------------------------------------- */

.hero { text-align: center; padding-block: 84px 56px; }
.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg-raised) 80%, transparent);
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 600;
  box-shadow: var(--shadow-sm), var(--edge);
  margin-bottom: 28px;
}
.hero__eyebrow .icon { color: var(--accent); }
.hero__eyebrow > span:not(.hero__eyebrow-dot) { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.hero__eyebrow-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--border-strong); margin: 0 2px; }
.hero h1 {
  font-size: clamp(2.5rem, 6.4vw, 4.6rem);
  letter-spacing: -0.045em;
  line-height: 1.02;
  margin: 0 auto 22px;
  max-width: 17ch;
  font-weight: 700;
  text-wrap: balance;
}
.hero h1 em {
  font-style: normal;
  color: var(--accent);
  background: var(--headline-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero__lede {
  font-size: 1.15rem;
  color: var(--text-muted);
  max-width: 640px;
  margin: 0 auto 30px;
  line-height: 1.6;
  text-wrap: pretty;
}
.hero__actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.hero__note { font-size: 0.85rem; color: var(--text-muted); margin: 16px 0 0; text-wrap: balance; }
.hero__note .text-link { font-weight: 600; white-space: nowrap; }
.hero--compact { padding-block: 64px 24px; }
.hero--compact h1 { font-size: clamp(2.1rem, 4.6vw, 3.2rem); }

/* --- The showcase: every app under the hero ----------------------------- */

.hero--showcase { padding-bottom: 40px; }
.hero--showcase h1 { max-width: 15ch; }
.hero--showcase .hero__note { margin-top: 24px; }
/* The numbers band follows the showcase directly: the hero's padding is the gap. */
.hero--showcase + .section { padding-top: 0; }

/* One even grid of app tiles: eight across, four across below 1040px. Every
   tile is a link. The icon sits at the same height in every tile with the
   label under it, so a label that wraps never lifts its icon. */
.showcase {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 10px;
  max-width: 1000px;
  margin: 44px auto 0;
}

.tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  min-width: 0;
  padding: 18px 6px 16px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--bg-raised);
  box-shadow: var(--shadow-sm), var(--edge);
  color: var(--text);
  text-decoration: none;
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
a.tile:hover { transform: translateY(-3px); border-color: var(--card-hover-border); box-shadow: var(--shadow), var(--edge); }
.tile__icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 13px;
  background: var(--accent-soft);
  color: var(--accent-soft-text);
}
/* An app's mark on its own colours, as on its app icon: the showcase tiles,
   the product panels and the feature lists. Doubled classes so the colours
   win over each container's default background wherever it is declared. */
.app-icon.app-icon { color: var(--app-ink); box-shadow: var(--app-edge); }
.app-icon.app-icon--ai { background: var(--app-ai); }
.app-icon.app-icon--mail { background: var(--app-mail); }
.app-icon.app-icon--calendar { background: var(--app-calendar); }
.app-icon.app-icon--chat { background: var(--app-chat); }
.app-icon.app-icon--ide { background: var(--app-ide); color: var(--app-ide-ink); }
.app-icon.app-icon--control { background: var(--app-control); }
.app-icon.app-icon--pass { background: var(--app-pass); box-shadow: var(--app-edge), inset 0 0 0 1px rgb(255 255 255 / 0.16); }
.app-icon.app-icon--browser { background: var(--app-browser); }
.app-icon.app-icon--installer { background: var(--app-installer); }
.tile__label {
  font-size: 0.76rem;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  color: var(--text-muted);
  white-space: nowrap;
}
a.tile:hover .tile__label { color: var(--text); }

@media (max-width: 1040px) {
  .showcase { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 620px; }
}
/* On phones the names lose their "Orbit", and the one long name may wrap.
   The eyebrow keeps its first two promises, on one line. */
@media (max-width: 560px) {
  .hero__eyebrow > span:nth-last-child(-n + 2) { display: none; }
  .showcase { gap: 8px; margin-top: 32px; }
  .tile { gap: 8px; padding: 14px 4px 12px; border-radius: 14px; }
  .tile__icon { width: 38px; height: 38px; border-radius: 11px; }
  .tile__icon .icon { width: 24px; height: 24px; }
  .tile__label { font-size: 0.7rem; white-space: normal; text-wrap: balance; }
  .tile__prefix { display: none; }
}

/* --- Previews: the composer render shared by the product panels ---------- */

.preview__composer {
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  padding: 10px 10px 8px 14px;
  background: var(--bg-raised);
  box-shadow: var(--shadow), var(--edge);
  font-size: 0.82rem;
  color: var(--text-faint);
}
.preview__composer-row { display: flex; align-items: center; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.preview__pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  background: var(--bg-inset);
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 600;
}
.preview__pill.is-on { background: var(--accent-soft); color: var(--accent-soft-text); }
.preview__send {
  margin-left: auto;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-text);
  display: grid;
  place-items: center;
}

/* --- Sections ----------------------------------------------------------- */

.section { padding-block: 80px; }
.section--alt {
  background: linear-gradient(180deg, var(--bg-subtle), color-mix(in srgb, var(--bg-subtle) 40%, var(--bg)));
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.section--tight { padding-block: 36px 56px; }
.section__head { text-align: center; max-width: 640px; margin: 0 auto 40px; }
.section__head .eyebrow { margin-bottom: 14px; }
.section__title { text-align: center; font-size: clamp(1.7rem, 3.2vw, 2.3rem); letter-spacing: -0.035em; margin-bottom: 10px; text-wrap: balance; }
.section__lede { text-align: center; color: var(--text-muted); margin: 0 auto; max-width: 58ch; font-size: 1.02rem; text-wrap: pretty; }

/* --- The family: Orbit AI wide, the other two stacked beside it --------- */

.family { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 16px; align-items: stretch; }
.family__column { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.family--row { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 16px; }
.family--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.family__label { display: flex; align-items: center; gap: 8px; margin: 36px 0 14px; font-size: 0.84rem; font-weight: 650; color: var(--text-muted); }
.family__label .icon { flex: 0 0 auto; color: var(--accent); }
.product--quiet { background: var(--bg-subtle); box-shadow: none; }

.product {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 26px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--bg-raised);
  box-shadow: var(--shadow-sm), var(--edge);
  color: var(--text);
  text-decoration: none;
  min-width: 0;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
a.product:hover { border-color: var(--card-hover-border); transform: translateY(-2px); box-shadow: var(--shadow), var(--edge); }
a.product:hover .product__cta { color: var(--accent); gap: 10px; }
a.product::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(120% 80% at 100% 0%, color-mix(in srgb, var(--brand-bright) 10%, transparent), transparent 60%);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
  pointer-events: none;
}
a.product:hover::after { opacity: 1; }
.product > * { position: relative; z-index: 1; }
.product__icon {
  width: 44px;
  height: 44px;
  border-radius: 13px;
  background: var(--accent-soft);
  color: var(--accent-soft-text);
  display: grid;
  place-items: center;
  margin-bottom: 16px;
}
.product__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.product__head h3 { margin: 0; font-size: 1.1rem; }
.product p { color: var(--text-muted); font-size: 0.92rem; margin: 0; line-height: 1.6; }
.product__cta {
  margin-top: auto;
  padding-top: 20px;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--link);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: gap var(--dur) var(--ease), color var(--dur) var(--ease);
}
.product__cta--soon { color: var(--text-faint); }
.product--soon { background: var(--bg-subtle); box-shadow: none; }

.product--wide { padding: 32px; }
.product--wide .product__icon { width: 56px; height: 56px; border-radius: 16px; margin-bottom: 20px; }
.product--wide .product__head h3 { font-size: 1.35rem; letter-spacing: -0.02em; }
.product--wide p { font-size: 1rem; }
.product__facts { list-style: none; padding: 0; margin: 20px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.product__facts li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: var(--bg-subtle);
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--text-muted);
}
.product__facts .icon { color: var(--accent); }
.product__art { margin-top: auto; padding-top: 24px; }
.product__art.preview__composer { margin: auto 0 0; padding: 10px 10px 8px 14px; }
.product--wide .product__art { margin-top: 24px; }
.product--wide .product__cta { margin-top: 20px; padding-top: 0; }

/* --- Spotlights: copy beside a static render ---------------------------- */

.spotlight {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 56px;
  align-items: center;
}
.spotlight h2 { font-size: clamp(1.6rem, 2.8vw, 2.1rem); letter-spacing: -0.035em; text-wrap: balance; }
.spotlight p { color: var(--text-muted); font-size: 1rem; }
.spotlight__list { list-style: none; padding: 0; margin: 22px 0 28px; display: grid; gap: 12px; }
.spotlight__list li { display: flex; gap: 10px; align-items: flex-start; font-size: 0.92rem; color: var(--text-muted); line-height: 1.5; }
.spotlight__list li strong { color: var(--text); font-weight: 600; }
.spotlight__list .icon { color: var(--accent); margin-top: 3px; flex: 0 0 auto; }
.spotlight__aside { display: block; margin-top: 14px; font-size: 0.85rem; color: var(--text-faint); }
.spotlight--reverse > div:first-child { order: 2; }
.spotlight--reverse .spotlight__art { order: 1; }

.panel {
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--bg-raised);
  box-shadow: var(--shadow-lg), var(--edge);
  overflow: hidden;
  text-align: left;
}
.panel__head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  font-size: 0.8rem;
  font-weight: 600;
}
.panel__head .icon { color: var(--text-faint); }
.panel__head .badge { margin-left: auto; }
.panel__foot { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-top: 1px solid var(--border); font-size: 0.78rem; flex-wrap: wrap; }

/* Model picker render. */
.modelpick__row {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  font-size: 0.86rem;
}
.modelpick__row:last-child { border-bottom: 0; }
.modelpick__row.is-selected { background: var(--accent-soft); }
.modelpick__row .icon { color: var(--accent); }
.modelpick__name { font-weight: 600; }
.modelpick__meta { color: var(--text-faint); font-size: 0.78rem; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.modelpick__label { font-weight: 600; color: var(--text-muted); }
.panel__foot .modelpick__label + .segmented { margin-right: auto; }
.segmented { display: inline-flex; border: 1px solid var(--border-strong); border-radius: var(--radius-pill); padding: 2px; }
.segmented i { font-style: normal; padding: 3px 10px; border-radius: var(--radius-pill); font-size: 0.74rem; font-weight: 600; color: var(--text-muted); }
.segmented i.is-on { background: var(--accent); color: var(--accent-text); }
.switch { position: relative; display: inline-block; width: 34px; height: 20px; border-radius: 999px; background: var(--bg-active); }
.switch.is-on { background: var(--accent); }
.switch i { position: absolute; top: 3px; right: 3px; width: 14px; height: 14px; border-radius: 50%; background: #fff; }

/* Mail inbox render. */
.mailpreview {
  display: grid;
  grid-template-columns: 118px 170px minmax(0, 1fr);
  min-height: 250px;
  font-size: 0.72rem;
}
.mailpreview__folders { background: var(--bg-subtle); border-right: 1px solid var(--border); padding: 10px 6px; display: flex; flex-direction: column; gap: 1px; }
.mailpreview__folders span { display: flex; align-items: center; gap: 6px; padding: 5px 8px; border-radius: var(--radius-xs); color: var(--text-muted); white-space: nowrap; }
.mailpreview__folders span b { margin-left: auto; color: var(--accent); font-size: 0.66rem; }
.mailpreview__folders .is-active { background: var(--bg-active); color: var(--text); font-weight: 600; }
.mailpreview__folders .icon { color: var(--text-faint); flex: 0 0 auto; }
.mailpreview__folders .is-active .icon { color: var(--accent); }
.mailpreview__cal { margin-top: auto; border-top: 1px solid var(--border); padding-top: 8px !important; }
.mailpreview__list { border-right: 1px solid var(--border); }
.mailpreview__row { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 8px; padding: 8px 9px; border-bottom: 1px solid var(--border); align-items: start; position: relative; }
.mailpreview__row > div { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.mailpreview__row > div > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mailpreview__row em { font-style: normal; color: var(--text); }
.mailpreview__row small { color: var(--text-faint); font-size: 0.66rem; }
.mailpreview__row time { font-size: 0.64rem; color: var(--text-faint); }
.mailpreview__row .avatar { width: 22px; height: 22px; font-size: 0.5rem; }
.mailpreview__row.is-unread::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--brand-bright); }
.mailpreview__row.is-unread strong, .mailpreview__row.is-unread em { color: var(--accent); font-weight: 700; }
.mailpreview__row.is-selected { background: var(--accent-soft); }
.mailpreview__read { padding: 14px 16px; }
.mailpreview__read h4 { margin: 0 0 2px; font-size: 0.92rem; letter-spacing: -0.01em; }
.mailpreview__read p { margin: 0 0 8px; line-height: 1.5; color: var(--text-muted); }
.mailpreview__read p.faint { font-size: 0.66rem; }
.mailpreview__actions { display: flex; gap: 6px; margin-top: 10px; }
.mailpreview__actions span { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border: 1px solid var(--border-strong); border-radius: var(--radius-xs); font-size: 0.66rem; font-weight: 600; color: var(--text); }

/* Team chat render. */
.chatpreview {
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr);
  min-height: 250px;
  font-size: 0.72rem;
}
.chatpreview__channels { background: var(--bg-subtle); border-right: 1px solid var(--border); padding: 10px 6px; display: flex; flex-direction: column; gap: 1px; }
.chatpreview__channels span { display: flex; align-items: center; gap: 6px; padding: 5px 8px; border-radius: var(--radius-xs); color: var(--text-muted); white-space: nowrap; }
.chatpreview__channels span b { margin-left: auto; color: var(--accent); font-size: 0.66rem; }
.chatpreview__channels .is-active { background: var(--bg-active); color: var(--text); font-weight: 600; }
.chatpreview__channels .icon { color: var(--text-faint); flex: 0 0 auto; }
.chatpreview__channels .is-active .icon { color: var(--accent); }
.chatpreview__messages { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; }
.chatpreview__msg { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 8px; align-items: start; }
.chatpreview__msg .avatar { width: 22px; height: 22px; font-size: 0.5rem; }
.chatpreview__msg strong { display: flex; align-items: baseline; gap: 6px; }
.chatpreview__msg time { font-weight: 400; font-size: 0.64rem; color: var(--text-faint); }
.chatpreview__msg p { margin: 2px 0 0; line-height: 1.45; color: var(--text-muted); }
.chatpreview__msg.is-me p { color: var(--text); }
.chatpreview__call { margin-top: auto; display: flex; align-items: center; gap: 6px; padding: 7px 10px; border-radius: var(--radius-xs); background: var(--accent-soft); color: var(--accent-soft-text); font-weight: 600; }
.chatpreview__call span { margin-left: auto; font-weight: 500; font-size: 0.66rem; }

/* Password fill render: a sign-in form with Orbit Pass's menu under the field. */
.passpreview { display: flex; flex-direction: column; min-height: 250px; padding: 16px 18px 18px; font-size: 0.72rem; }
.passpreview__label { margin-bottom: 4px; font-weight: 600; color: var(--text-muted); }
.passpreview__field { display: flex; align-items: center; justify-content: flex-end; height: 30px; padding: 0 8px; border: 1px solid var(--border-strong); border-radius: var(--radius-xs); background: var(--bg); color: var(--text-faint); }
.passpreview__field.is-focused { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); color: var(--accent); }
.passpreview__menu { margin: 6px 0 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-raised); box-shadow: var(--shadow-lg); overflow: hidden; }
.passpreview__item { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 8px 10px; border-bottom: 1px solid var(--border); }
.passpreview__item:last-child { border-bottom: 0; }
.passpreview__item.is-selected { background: var(--accent-soft); }
.passpreview__item > div { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.passpreview__item > div > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.passpreview__item small { color: var(--text-faint); font-size: 0.66rem; }
.passpreview__item .avatar { width: 22px; height: 22px; font-size: 0.5rem; }
.passpreview__item > .icon { color: var(--accent); }
.passpreview__item code { font-family: var(--mono); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.04em; color: var(--text); }
.passpreview__button { align-self: flex-start; margin-top: 14px; padding: 6px 14px; border-radius: var(--radius-xs); background: var(--accent); color: var(--accent-text); font-weight: 600; }

/* --- How sign-in works: one panel, three steps -------------------------- */

.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--bg-raised);
  box-shadow: var(--shadow-sm), var(--edge);
  overflow: hidden;
}
.step { padding: 28px 26px; border-left: 1px solid var(--border); }
.step:first-child { border-left: 0; }
.step__num {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-text);
  font-size: 0.78rem;
  font-weight: 700;
  margin-bottom: 16px;
}
.step h3 { font-size: 1.02rem; margin-bottom: 6px; }
.step p { font-size: 0.9rem; color: var(--text-muted); margin: 0; line-height: 1.55; }

/* --- Who it is for: the two cards on the home page ----------------------- */

.audience { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.audience__card {
  display: flex;
  flex-direction: column;
  padding: 30px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--bg-raised);
  box-shadow: var(--shadow-sm), var(--edge);
  color: var(--text);
  text-decoration: none;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.audience__card:hover { border-color: var(--card-hover-border); transform: translateY(-2px); box-shadow: var(--shadow), var(--edge); }
.audience__card:hover .product__cta { color: var(--accent); gap: 10px; }
.audience__icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 13px;
  background: var(--accent-soft);
  color: var(--accent-soft-text);
  margin-bottom: 16px;
}
.audience__card h2 { font-size: 1.3rem; letter-spacing: -0.025em; margin: 0 0 8px; }
.audience__card p { color: var(--text-muted); font-size: 0.95rem; line-height: 1.6; margin: 0; }

/* --- Feature strip: one row, divided by hairlines ------------------------ */

.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: 20px;
  overflow: hidden;
}
/* Five cards (one per app on Personal and Business) fit one row at full width. */
.feature-grid--five { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.feature { padding: 24px; background: var(--bg-raised); }
.feature__icon {
  width: 36px;
  height: 36px;
  border-radius: 11px;
  background: var(--accent-soft);
  color: var(--accent-soft-text);
  display: grid;
  place-items: center;
  margin-bottom: 14px;
}
.feature h3 { margin: 0 0 6px; font-size: 1rem; }
.feature p { margin: 0; font-size: 0.9rem; color: var(--text-muted); line-height: 1.55; }

/* --- Plan strip: the prices in a sentence, and a link to Mission Control --- */

.planstrip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding: 32px 36px;
  border: 1px solid var(--border);
  border-radius: 22px;
  background: var(--bg-raised);
  box-shadow: var(--shadow-sm), var(--edge);
}
.planstrip__copy { min-width: 0; }
.planstrip__copy .eyebrow { margin-bottom: 10px; }
.planstrip__copy h2 { font-size: clamp(1.3rem, 2.4vw, 1.7rem); letter-spacing: -0.03em; margin: 0 0 8px; text-wrap: balance; }
.planstrip__copy p { color: var(--text-muted); margin: 0; max-width: 60ch; line-height: 1.55; }
.planstrip__actions { display: flex; flex-direction: column; gap: 10px; flex: 0 0 auto; }
.planstrip__actions .btn { justify-content: center; }

/* --- Pricing: the plans, every button leading to account creation ------- */

/* Personal and business prices live side by side in the markup. With
   JavaScript the switch shows one audience at a time; without it the switch
   stays hidden and both prices are shown, each labelled, so nothing is lost. */

.pricing { text-align: center; }
.pricing__switch {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  margin: 0 auto 18px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  background: var(--bg-raised);
}
.pricing__switch[hidden] { display: none; }
.pricing__tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 16px;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
}
.pricing__tab:hover { color: var(--text); }
.pricing__tab.is-active { background: var(--accent); color: var(--accent-text); }
.pricing__tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pricing__hint { font-size: 0.88rem; color: var(--text-muted); max-width: 60ch; margin: 0 auto 22px; line-height: 1.5; }
.pricing__note { font-size: 0.8rem; color: var(--text-faint); max-width: 64ch; margin: 22px auto 0; line-height: 1.5; }

/* Personal shows four plans in a row, then two by two, then one under another.
   Business shows three (Starter, Pro and Max — Free is personal only): three in
   a row, then one under another. Neither layout leaves an orphan card. */
.plans {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
  text-align: left;
}
.pricing[data-audience="business"] .plans { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 880px; margin-inline: auto; }
.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 28px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--bg-raised);
  box-shadow: var(--shadow-sm);
}
.plan--featured { border-color: var(--accent); box-shadow: var(--shadow); }
.plan__ribbon {
  position: absolute;
  top: -12px;
  right: 20px;
  padding: 4px 11px;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: var(--accent-text);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.plan__name { font-size: 1.2rem; margin: 0 0 4px; letter-spacing: -0.02em; }
.plan__lede { color: var(--text-muted); font-size: 0.92rem; margin: 0 0 18px; line-height: 1.5; }
.plan__prices { display: grid; gap: 10px; margin: 0 0 18px; }
.plan__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 2px; }
.plan__amount { font-size: 2rem; font-weight: 700; letter-spacing: -0.03em; line-height: 1; }
.plan__period { font-size: 0.9rem; color: var(--text-muted); }
.plan__for { flex-basis: 100%; font-size: 0.78rem; color: var(--text-faint); margin-top: 4px; }
.plan__list { list-style: none; padding: 0; margin: 0 0 22px; display: grid; gap: 10px; font-size: 0.9rem; }
.plan__list li { display: flex; gap: 8px; align-items: flex-start; line-height: 1.45; }
.plan__list .icon { color: var(--accent); margin-top: 3px; flex: 0 0 auto; }
/* What a plan leaves out, crossed rather than ticked. */
.plan__list .plan__without { color: var(--text-muted); }
.plan__list .plan__without .icon { color: var(--text-faint); }
.plan .btn { margin-top: auto; justify-content: center; }
.plan__fine { display: block; margin-top: 10px; text-align: center; font-size: 0.78rem; color: var(--text-faint); }
.plan__included {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: auto;
  padding: 9px 0;
  color: var(--text-muted);
  font-size: 0.9rem;
  font-weight: 600;
}
.plan__included .icon { color: var(--success); }

/* With the switch active only one audience's prices show, and the "Personal"
   label under a price is redundant. Business keeps its minimum-users note. */
.pricing[data-audience="personal"] [data-audience="business"],
.pricing[data-audience="business"] [data-audience="personal"] { display: none; }
.pricing[data-audience] .plan__for { display: none; }
.pricing[data-audience="business"] .plan__for { display: block; }

/* The apps one plan covers, then the ones that are free for everyone. They
   wrap rather than sit in a grid, so a short last row widens to fill instead
   of leaving gaps in the hairline background. */
.covered { margin: 56px 0 0; }
.covered__title { text-align: center; font-size: 1.25rem; letter-spacing: -0.025em; margin: 0 0 20px; }
.covered__subtitle { text-align: center; font-size: 0.95rem; font-weight: 600; color: var(--text-muted); margin: 28px 0 14px; }
.covered__apps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.covered__app { flex: 1 1 180px; margin: 0; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; padding: 18px 20px; background: var(--bg-raised); }
/* Its colours come from .app-icon--<app>, as on the app's own icon. */
.covered__mark {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  border-radius: 12px;
}
.covered__meta { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.covered__name { font-weight: 600; font-size: 0.95rem; }
.covered__blurb { font-size: 0.84rem; color: var(--text-muted); line-height: 1.45; }

/* The questions people ask before they create an account, in two columns;
   an odd last one takes the whole row rather than leave a gap beside it. */
.faq {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
}
.faq__item { padding: 20px 22px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg-raised); }
.faq__item:last-child:nth-child(odd) { grid-column: 1 / -1; }
.faq dt { font-weight: 600; margin: 0 0 6px; }
.faq dd { margin: 0; color: var(--text-muted); font-size: 0.92rem; line-height: 1.55; }

@media (max-width: 1000px) {
  .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 780px) {
  .pricing[data-audience="business"] .plans { grid-template-columns: 1fr; max-width: 460px; }
}
@media (max-width: 720px) {
  .plan { padding: 22px; }
  .faq { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .plans, .pricing[data-audience="business"] .plans { grid-template-columns: 1fr; }
}

/* --- About: the three things we hold to --------------------------------- */

.facts { display: grid; gap: 12px; margin: 18px 0 32px; padding: 0; }
.facts > div { padding: 18px 20px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg-raised); box-shadow: var(--edge); }
.facts dt { display: flex; align-items: center; gap: 8px; font-weight: 600; margin: 0 0 4px; }
.facts dt .icon { color: var(--accent); }
.facts dd { margin: 0; color: var(--text-muted); font-size: 0.92rem; line-height: 1.55; }

/* --- Closing call to action --------------------------------------------- */

.cta {
  text-align: center;
  padding: 60px 32px;
  border-radius: 24px;
  border: 1px solid var(--border);
  background: var(--cta-bg);
  box-shadow: var(--edge);
  position: relative;
  overflow: hidden;
}
.cta::before,
.cta::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--accent) 16%, transparent);
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.cta::before { width: 140%; aspect-ratio: 1; }
.cta::after { width: 90%; aspect-ratio: 1; border-color: color-mix(in srgb, var(--accent) 10%, transparent); }
.cta > * { position: relative; z-index: 1; }
.cta__mark {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: var(--accent);
  color: var(--accent-text);
  display: grid;
  place-items: center;
  margin: 0 auto 18px;
  box-shadow: var(--shadow);
}
.cta h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); letter-spacing: -0.035em; }
.cta p { color: var(--text-muted); max-width: 54ch; margin: 0 auto 24px; text-wrap: pretty; }
.cta__actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.cta .eyebrow { justify-content: center; margin: 0 auto 10px; }
.cta__fine { font-size: 0.82rem; color: var(--text-faint); margin: 18px auto 0; max-width: 54ch; }
/* The free-trial call-to-action: a warmer wash than the plain closing CTA. */
.cta--trial::before { border-color: color-mix(in srgb, var(--accent) 22%, transparent); }
.cta--trial .cta__mark { background: var(--accent-soft); color: var(--accent-soft-text); }

/* Error pages. */
.error { padding-block: 80px; }

/* --- Responsive --------------------------------------------------------- */

@media (max-width: 860px) {
  .family { grid-template-columns: 1fr; }
  .spotlight { grid-template-columns: 1fr; gap: 28px; }
  .spotlight__art { order: -1; }
  .spotlight--reverse > div:first-child { order: 2; }
  .spotlight--reverse .spotlight__art { order: 1; }
  .steps { grid-template-columns: 1fr; }
  .step { border-left: 0; border-top: 1px solid var(--border); }
  .step:first-child { border-top: 0; }
  .mailpreview { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .mailpreview__folders, .mailpreview__list { display: none; }
  .chatpreview { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .chatpreview__channels { display: none; }
  .family--row { grid-template-columns: 1fr; }
  .audience { grid-template-columns: 1fr; }
  .planstrip { flex-direction: column; align-items: stretch; text-align: center; }
  .planstrip__copy p { margin: 0 auto; }
}
@media (max-width: 720px) {
  .hero { padding-block: 52px 36px; }
  .section { padding-block: 48px; }
  .product--wide { padding: 24px; }
  .cta { padding: 40px 20px; border-radius: 18px; }
  .hero__actions .btn, .cta__actions .btn { width: 100%; }
  .modelpick__meta { display: none; }
  .planstrip { padding: 24px 20px; }
  .planstrip__actions .btn { width: 100%; }
}

/* ==========================================================================
   Products and downloads: each app's page (/pass/), its download page
   (/download/pass/mac/) and the download hub (/download/), all drawn from
   apps/pages/catalog.py.
   ========================================================================== */

/* --- Footer: columns of links, then the brand and the web apps ---------- */

.footer { padding: 48px var(--gutter) 28px; }
.footer__inner { display: block; }
.footer__columns { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 28px; padding-bottom: 32px; }
.footer__title { margin: 0 0 12px; font-size: 0.78rem; font-weight: 650; color: var(--text); }
.footer__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.footer__col a { color: var(--text-muted); font-size: 0.86rem; text-decoration: none; }
.footer__col a:hover { color: var(--accent); }
.footer__bottom { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 22px; border-top: 1px solid var(--border); }
.footer__github { display: inline-flex; align-items: center; gap: 6px; }

/* --- An app's page ------------------------------------------------------- */

.prodhero {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 48px;
  align-items: center;
  padding-top: 72px;
  padding-bottom: 56px;
}
.prodhero h1 {
  margin: 16px 0 18px;
  font-size: clamp(2.2rem, 4.8vw, 3.6rem);
  letter-spacing: -0.045em;
  line-height: 1.04;
  text-wrap: balance;
}
.prodhero__lede { font-size: 1.1rem; color: var(--text-muted); line-height: 1.6; margin: 0 0 28px; max-width: 58ch; text-wrap: pretty; }
.prodhero__actions { display: flex; gap: 10px; flex-wrap: wrap; }
.prodhero__platforms { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.prodhero__platforms a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--bg-raised) 80%, transparent);
  color: var(--text-muted);
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
}
.prodhero__platforms a:hover { border-color: var(--card-hover-border); color: var(--text); }

/* The app's icon in orbit: two rings and a moon round it. */
.orbitart { position: relative; width: min(100%, 380px); aspect-ratio: 1; margin: 0 auto; display: grid; place-items: center; }
.orbitart__ring {
  position: absolute;
  inset: 16%;
  border-radius: 50%;
  border: 1.5px solid color-mix(in srgb, var(--accent) 26%, transparent);
  transform: rotate(-24deg) scaleY(0.42);
}
.orbitart__ring--outer { inset: 0; border-color: color-mix(in srgb, var(--accent) 14%, transparent); transform: rotate(-24deg) scaleY(0.5); }
.orbitart__moon {
  position: absolute;
  top: 26%;
  right: 9%;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--headline-gradient);
  box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--accent) 70%, transparent);
}
.orbitart__icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 148px;
  height: 148px;
  border-radius: 38px;
  box-shadow: var(--app-edge), 0 30px 60px -24px rgba(11, 42, 91, 0.55);
}

.feature-grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.morelist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 24px; }
.morelist .mega__product { margin: 0; padding: 12px 14px; border: 1px solid var(--border); background: var(--bg-raised); box-shadow: var(--edge); }
.morelist .mega__product:hover { border-color: var(--card-hover-border); }

/* --- Platform cards (the hub and each app's page) ------------------------ */

/* An app has one to six platforms, and none is left alone on a row: four go
   in a row; three, five or six go three a row, five ending in two wider ones;
   two share the row. Narrower, two a row with an odd last one across both. */
.platforms { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 14px; }
@media (min-width: 1001px) {
  .platforms > * { grid-column: span 3; }
  .platforms > :first-child:nth-last-child(3), .platforms > :first-child:nth-last-child(3) ~ *,
  .platforms > :first-child:nth-last-child(5), .platforms > :first-child:nth-last-child(5) ~ *,
  .platforms > :first-child:nth-last-child(6), .platforms > :first-child:nth-last-child(6) ~ * { grid-column: span 4; }
  .platforms > :first-child:nth-last-child(2), .platforms > :first-child:nth-last-child(2) ~ *,
  .platforms > :first-child:nth-last-child(5) ~ :nth-child(n + 4) { grid-column: span 6; }
}
@media (max-width: 1000px) {
  .platforms > * { grid-column: span 6; }
  .platforms > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .platforms > *, .platforms > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}
.platform {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 22px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--bg-raised);
  box-shadow: var(--shadow-sm), var(--edge);
}
.platform--soon { background: var(--bg-subtle); box-shadow: none; }
.platform__head { display: flex; gap: 14px; align-items: flex-start; }
.platform__icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 13px;
  background: var(--bg-inset);
  color: var(--text);
}
.platform__name h3 { margin: 0 0 3px; font-size: 1.02rem; }
.platform__name p { margin: 0; font-size: 0.8rem; color: var(--text-faint); line-height: 1.45; }
.platform__gets { display: grid; gap: 14px; }
.platform__variant { display: inline-flex; align-items: center; gap: 6px; font-size: 0.84rem; font-weight: 600; color: var(--link); text-decoration: none; }
.platform__more {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--text-muted);
  text-decoration: none;
  transition: gap var(--dur) var(--ease), color var(--dur) var(--ease);
}
.platform__more:hover { color: var(--accent); gap: 10px; }

.get { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }
.get__title { margin: 0; font-size: 0.82rem; font-weight: 650; color: var(--text); }
.get__btn { max-width: 100%; }
.get__btn--soon { color: var(--text-faint); background: transparent; cursor: default; }
.get__btn--soon:hover { background: transparent; }
.get__meta { margin: 0; font-size: 0.76rem; color: var(--text-faint); font-variant-numeric: tabular-nums; }
.get__note { margin: 0; font-size: 0.78rem; color: var(--text-muted); }

/* --- An app's download page ---------------------------------------------- */

.dl { padding-top: 40px; padding-bottom: 40px; }
.crumbs { display: flex; align-items: center; gap: 6px; font-size: 0.84rem; color: var(--text-faint); margin-bottom: 22px; }
.crumbs a { color: var(--text-muted); text-decoration: none; }
.crumbs a:hover { color: var(--accent); }
.dl__head { display: flex; align-items: center; gap: 18px; margin-bottom: 28px; }
.dl__mark { display: grid; place-items: center; flex: 0 0 auto; width: 64px; height: 64px; border-radius: 18px; }
.dl__head h1 { margin: 0 0 4px; font-size: clamp(1.8rem, 3.6vw, 2.6rem); letter-spacing: -0.04em; }
.dl__lede { margin: 0; color: var(--text-muted); }
.dl__picker {
  display: flex;
  gap: 4px;
  padding: 4px;
  margin-bottom: 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--bg-raised);
  width: fit-content;
  max-width: 100%;
  overflow-x: auto;
  box-shadow: var(--shadow-sm), var(--edge);
}
.dl__pick {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: var(--radius-pill);
  color: var(--text-muted);
  font-size: 0.9rem;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
}
.dl__pick:hover { color: var(--text); background: var(--bg-hover); }
.dl__pick.is-active { background: var(--accent); color: var(--accent-text); }
.dl__panel[hidden] { display: none; }

.dlpanel {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 40px;
  align-items: center;
  padding: 40px;
  border: 1px solid var(--border);
  border-radius: 24px;
  background: var(--bg-raised);
  box-shadow: var(--shadow), var(--edge);
}
.dlpanel--wide { grid-template-columns: minmax(0, 1fr); align-items: start; }
.dlpanel > * { min-width: 0; }
.dlpanel__platform { display: inline-flex; align-items: center; gap: 7px; font-size: 0.78rem; font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); }
.dlpanel h2 { margin: 10px 0 10px; font-size: clamp(1.5rem, 2.8vw, 2rem); letter-spacing: -0.035em; }
.dlpanel__how { margin: 0 0 22px; color: var(--text-muted); font-size: 1rem; line-height: 1.6; max-width: 56ch; }
.dlpanel__gets { display: flex; flex-wrap: wrap; gap: 18px 28px; }
.dlpanel__variant { margin: 14px 0 0; font-size: 0.88rem; color: var(--text-muted); }
.dlpanel__facts { list-style: none; margin: 26px 0 0; padding: 18px 0 0; border-top: 1px solid var(--border); display: grid; gap: 10px; }
.dlpanel__facts li { display: flex; gap: 10px; align-items: flex-start; font-size: 0.88rem; color: var(--text-muted); line-height: 1.5; }
.dlpanel__facts .icon { color: var(--accent); margin-top: 3px; flex: 0 0 auto; }

/* Drawings of the device: a window on a desktop, a phone, a browser. */
.device {
  position: relative;
  margin: 0 auto;
  border: 1px solid var(--border-strong);
  background: linear-gradient(180deg, var(--bg-subtle), var(--bg-inset));
  box-shadow: var(--shadow-lg), var(--edge);
  overflow: hidden;
}
.device--desktop, .device--browser { width: min(100%, 420px); aspect-ratio: 16 / 11; border-radius: 16px; display: flex; flex-direction: column; }
.device__bar { display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 12px; border-bottom: 1px solid var(--border); background: var(--bg-raised); flex: 0 0 auto; }
.device--windows .device__bar { justify-content: flex-end; }
.device__controls { display: flex; gap: 14px; }
.device__controls i { width: 10px; height: 10px; border: 1.5px solid var(--text-faint); border-radius: 2px; }
.device__url { flex: 1 1 auto; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--radius-pill); background: var(--bg-inset); color: var(--text-muted); font-size: 0.74rem; font-weight: 600; }
.device__screen { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; }
.device__app { display: grid; place-items: center; width: 92px; height: 92px; border-radius: 24px; }
.device__name { font-weight: 650; font-size: 1rem; }
.device__os { display: inline-flex; align-items: center; gap: 6px; font-size: 0.76rem; color: var(--text-faint); font-weight: 600; }
.device--phone { width: 210px; aspect-ratio: 9 / 18; border-radius: 34px; border-width: 6px; border-color: var(--text); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; }
.device__notch { position: absolute; top: 10px; left: 50%; width: 70px; height: 20px; margin-left: -35px; border-radius: var(--radius-pill); background: var(--text); }

/* Orbit Pass in every browser. */
.browsers { list-style: none; margin: 4px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.browser {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 6px 14px;
  align-items: start;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--bg-subtle);
}
.browser--lead { border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); background: var(--bg-raised); }
.browser--soon { opacity: 0.8; }
.browser__icon { grid-row: span 2; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 13px; background: var(--bg-inset); color: var(--text); }
.browser__copy h3 { margin: 2px 0 4px; font-size: 1rem; }
.browser__copy p { margin: 0; font-size: 0.86rem; color: var(--text-muted); line-height: 1.5; }
.browser > .get, .browser > .btn { grid-column: 2; justify-self: start; margin-top: 8px; }
.unpacked { margin-top: 8px; padding: 22px 24px; border-radius: 16px; background: var(--bg-subtle); border: 1px solid var(--border); }
.unpacked h3 { margin: 0 0 12px; font-size: 1rem; }
.unpacked__steps { margin: 0; padding-left: 22px; display: grid; gap: 8px; font-size: 0.9rem; color: var(--text-muted); line-height: 1.5; }
.unpacked__steps strong { color: var(--text); }
.unpacked__note { display: flex; gap: 8px; align-items: center; margin: 14px 0 0; font-size: 0.84rem; color: var(--text-faint); }

.dlmore { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; padding: 22px 24px; border: 1px solid var(--border); border-radius: 18px; background: var(--bg-subtle); }
.dlmore h2 { margin: 0; font-size: 1rem; }
.dlmore__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.dlmore__list a { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: var(--radius-pill); border: 1px solid var(--border); background: var(--bg-raised); color: var(--text); font-size: 0.86rem; font-weight: 600; text-decoration: none; }
.dlmore__list a:hover { border-color: var(--card-hover-border); color: var(--accent); }
.dlmore__icon { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 8px; }

/* The Orbit Installer's list, drawn. */
.setup { max-width: 420px; margin: 0 auto; }
.setup__dots { display: inline-flex; gap: 6px; }
.setup__dots i { width: 10px; height: 10px; border-radius: 50%; background: #ff5f57; }
.setup__dots i:nth-child(2) { background: #febc2e; }
.setup__dots i:nth-child(3) { background: #28c840; }
.setup .panel__head { gap: 12px; }
.setup__body { padding: 18px; }
.setup__heading { margin: 0 0 12px; font-weight: 650; font-size: 0.92rem; }
.setup__list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.setup__list li { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-bottom: 1px solid var(--border); }
.setup__list li:last-child { border-bottom: 0; }
.setup__box { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 5px; background: var(--accent); color: var(--accent-text); flex: 0 0 auto; }
.setup__icon { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; flex: 0 0 auto; }
.setup__name { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.setup__name strong { font-size: 0.86rem; }
.setup__name small { font-size: 0.74rem; color: var(--text-faint); }
.setup__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; }
.setup__note { font-size: 0.74rem; color: var(--text-faint); }
.setup__btn { padding: 6px 16px; border-radius: var(--radius-sm); background: var(--accent); color: var(--accent-text); font-size: 0.82rem; font-weight: 650; }

/* A command to paste in a terminal, with its copy button. */
.cmd {
  display: flex;
  align-items: stretch;
  width: 100%;
  max-width: 100%;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--bg-inset);
  overflow: hidden;
}
.cmd__text {
  flex: 1 1 auto;
  min-width: 0;
  padding: 9px 12px;
  background: transparent;
  border: 0;
  font-family: var(--mono);
  font-size: 0.8rem;
  color: var(--text);
  white-space: nowrap;
  overflow-x: auto;
}
.cmd__copy {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  padding: 0 12px;
  border: 0;
  border-left: 1px solid var(--border-strong);
  background: var(--bg-raised);
  color: var(--text-muted);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
}
.cmd__copy:hover { color: var(--accent); }
.cmd__copy.is-copied { color: var(--success); }
.dlpanel .cmd { margin: 4px 0 4px; }

/* Linux, one card per family of distributions. */
.families { list-style: none; margin: 4px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.family-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--bg-subtle);
  min-width: 0;
}
.family-card--soon { opacity: 0.85; }
.family-card__head { display: flex; gap: 12px; align-items: flex-start; }
.family-card__icon { display: grid; place-items: center; flex: 0 0 auto; width: 42px; height: 42px; border-radius: 12px; background: var(--bg-inset); color: var(--text); }
.family-card h3 { margin: 2px 0 2px; font-size: 1rem; }
.family-card__distros { margin: 0; font-size: 0.82rem; color: var(--text-muted); line-height: 1.45; }
.family-card__what { margin: 0; font-size: 0.86rem; color: var(--text-muted); line-height: 1.5; }

/* --- The download hub ----------------------------------------------------- */

.jumps { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 8px; }
.jumps a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--bg-raised);
  color: var(--text-muted);
  font-size: 0.84rem;
  font-weight: 600;
  text-decoration: none;
  box-shadow: var(--edge);
}
.jumps a:hover { border-color: var(--card-hover-border); color: var(--text); }

.installer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px;
  align-items: center;
  padding: 40px;
  border: 1px solid var(--border);
  border-radius: 24px;
  background: var(--cta-bg);
  box-shadow: var(--shadow), var(--edge);
}
.installer h2 { margin: 12px 0 10px; font-size: clamp(1.6rem, 3vw, 2.2rem); letter-spacing: -0.035em; }
.installer__copy p { color: var(--text-muted); margin: 0 0 24px; line-height: 1.6; }
.installer__gets { display: flex; flex-wrap: wrap; gap: 18px 28px; }
.installer__get--linux { flex-basis: 100%; min-width: 0; }
.installer__os { display: inline-flex; align-items: center; gap: 7px; margin: 0 0 8px; font-size: 0.82rem; font-weight: 650; color: var(--text-muted); }
.installer__more { display: inline-flex; align-items: center; gap: 6px; margin-top: 22px; font-weight: 600; font-size: 0.9rem; }

.dlsection { padding-top: 44px; padding-bottom: 8px; scroll-margin-top: 80px; }
.dlsection__head { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.dlsection__icon { display: grid; place-items: center; flex: 0 0 auto; width: 52px; height: 52px; border-radius: 15px; }
.dlsection__copy { flex: 1 1 260px; min-width: 0; }
.dlsection__copy h2 { margin: 0 0 2px; font-size: 1.35rem; letter-spacing: -0.025em; }
.dlsection__copy p { margin: 0; color: var(--text-muted); font-size: 0.92rem; }
.dlsection__all { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 0.88rem; color: var(--link); text-decoration: none; }
#installer { scroll-margin-top: 80px; }

@media (max-width: 960px) {
  .footer__columns { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .prodhero { grid-template-columns: 1fr; gap: 24px; padding-top: 48px; }
  .prodhero__art { order: -1; }
  .orbitart { width: 240px; }
  .orbitart__icon { width: 108px; height: 108px; border-radius: 28px; }
  .orbitart__icon .icon { width: 56px; height: 56px; }
  .feature-grid--three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .morelist { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dlpanel { grid-template-columns: 1fr; padding: 28px; gap: 28px; }
  .dlpanel__art { order: -1; }
  .installer { grid-template-columns: minmax(0, 1fr); padding: 28px; }
}
@media (max-width: 640px) {
  .footer { padding: 36px 16px 24px; }
  .footer__columns { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; }
  .feature-grid--three, .morelist { grid-template-columns: 1fr; }
  .dl__head { align-items: flex-start; }
  .dl__mark { width: 52px; height: 52px; border-radius: 15px; }
  .dlpanel { padding: 22px 18px; border-radius: 18px; }
  .dlpanel__gets .btn, .installer__gets .btn { width: 100%; justify-content: center; }
  .dlpanel__gets .get, .installer__get { width: 100%; }
  .device--desktop, .device--browser { width: 100%; }
  .device--phone { width: 170px; }
  .browsers { grid-template-columns: 1fr; }
  .installer { padding: 22px 18px; }
}

/* ==========================================================================
   Why Orbit: privacy you can check and AI on your device. The home page's
   proof strip, "what our servers see", the on-device AI cards and the one-plan
   card; /security/ (the key flow, the ledger) and /on-device-ai/ (the
   principles and the model table).
   ========================================================================== */

/* Orbit AI's violet, the colour of the sparkle every AI feature carries in
   the apps (`--ai` in Orbit Mail's mail.css, `Color.ai` in the Swift apps). */
:root {
  --ai: #6d3fd8;
  --ai-soft: color-mix(in srgb, #6d3fd8 10%, var(--bg-raised));
  --ai-border: color-mix(in srgb, #6d3fd8 26%, var(--border));
  --ai-gradient: linear-gradient(100deg, #7c4dff 0%, #5b2ee6 100%);
  --ai-band:
    radial-gradient(70% 60% at 50% 0%, color-mix(in srgb, #7c4dff 9%, transparent), transparent 70%),
    linear-gradient(180deg, var(--bg-subtle), color-mix(in srgb, var(--bg-subtle) 40%, var(--bg)));
  --cipher: #626b80; /* 4.7:1 on the server panel */
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ai: #b49cfb;
    --ai-soft: color-mix(in srgb, #b49cfb 12%, var(--bg-raised));
    --ai-border: color-mix(in srgb, #b49cfb 28%, var(--border));
    --ai-gradient: linear-gradient(100deg, #d6c8ff 0%, #a98bff 100%);
    --ai-band:
      radial-gradient(70% 60% at 50% 0%, rgba(150, 110, 255, 0.16), transparent 70%),
      linear-gradient(180deg, var(--bg-subtle), color-mix(in srgb, var(--bg-subtle) 40%, var(--bg)));
    --cipher: #808ca6;
  }
}
[data-theme="dark"] {
  --ai: #b49cfb;
  --ai-soft: color-mix(in srgb, #b49cfb 12%, var(--bg-raised));
  --ai-border: color-mix(in srgb, #b49cfb 28%, var(--border));
  --ai-gradient: linear-gradient(100deg, #d6c8ff 0%, #a98bff 100%);
  --ai-band:
    radial-gradient(70% 60% at 50% 0%, rgba(150, 110, 255, 0.16), transparent 70%),
    linear-gradient(180deg, var(--bg-subtle), color-mix(in srgb, var(--bg-subtle) 40%, var(--bg)));
  --cipher: #808ca6;
}

/* The sparkle, small and beside the thing, as in the apps. */
.ai-mark { display: inline-flex; color: var(--ai); }
.ai-mark .icon { color: var(--ai) !important; }
.hero__eyebrow .ai-mark .icon { color: var(--ai); }
.eyebrow--ai { color: var(--ai); }
.hero h1 em.em--ai { background: var(--ai-gradient); -webkit-background-clip: text; background-clip: text; }
.hero--compact .eyebrow { margin-bottom: 18px; }
.hero--compact { max-width: 900px; }
.hero--compact h1 { max-width: 20ch; }
.section--ai { background: var(--ai-band); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }

/* --- Proof: four numbers under the hero --------------------------------- */

.proof {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--bg-raised);
  box-shadow: var(--shadow-sm), var(--edge);
  overflow: hidden;
}
.proof__item { padding: 26px 24px; border-left: 1px solid var(--border); }
.proof__item:first-child { border-left: 0; }
.proof dt {
  display: grid;
  justify-items: start;
  gap: 12px;
  margin: 0 0 8px;
  font-size: 1.02rem;
  font-weight: 650;
  letter-spacing: -0.015em;
  line-height: 1.3;
  color: var(--text);
  text-wrap: balance;
}
.proof__icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: var(--accent-soft); color: var(--accent-soft-text); }
.proof__icon--ai { background: var(--ai-soft); color: var(--ai); }
.proof dd { margin: 0; color: var(--text-muted); font-size: 0.9rem; line-height: 1.55; }
.proof dd strong { color: var(--text); font-weight: 650; font-variant-numeric: tabular-nums; }

/* --- What our servers see: the same thing on screen and in the database --- */

.xray { max-width: 1000px; margin: 0 auto; }
.xray__tabs { display: none; justify-content: center; gap: 6px; margin: 0 auto 22px; padding: 4px; width: max-content; max-width: 100%; border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--bg-subtle); }
.js .xray__tabs { display: flex; }
.xray__tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 16px 7px 8px;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.xray__tab .app-icon { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; }
.xray__tab:hover { color: var(--text); }
.xray__tab.is-current { background: var(--bg-raised); color: var(--text); box-shadow: var(--shadow-sm), var(--edge); }
.xray__tab:focus-visible { outline: none; box-shadow: var(--ring); }
.xray__panel + .xray__panel { margin-top: 40px; }
.js .xray__panel:not(.is-current) { display: none; }
.js .xray__panel + .xray__panel { margin-top: 0; }
.xray__nojs { text-align: center; font-size: 1rem; margin-bottom: 14px; }
.js .xray__nojs { display: none; }
.xray__pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.xray__side { margin: 0; display: flex; flex-direction: column; min-width: 0; }
.xray__side figcaption {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 10px;
  font-size: 0.74rem;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.xray__side--server figcaption { color: var(--accent); }
.xray__screen {
  flex: 1 1 auto;
  padding: 20px 22px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--bg-raised);
  box-shadow: var(--shadow), var(--edge);
  font-size: 0.9rem;
  line-height: 1.55;
}
.xray__screen p { margin: 0 0 10px; color: var(--text-muted); }
.xray__screen--server {
  background: var(--bg-inset);
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.06), var(--edge);
  font-family: var(--mono);
  font-size: 0.76rem;
}
.xray__mailhead { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.xray__mailhead div { display: flex; flex-direction: column; line-height: 1.3; }
.xray__mailhead small { color: var(--text-faint); font-size: 0.76rem; }
.xray__subject { font-weight: 650; color: var(--text) !important; font-size: 1.02rem; }
.xray__file { display: inline-flex; align-items: center; gap: 7px; padding: 6px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 0.8rem; font-weight: 600; }
.xray__file small { color: var(--text-faint); font-weight: 500; }
.xray__fields { margin: 0; display: grid; gap: 0; }
.xray__fields > div { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 12px; padding: 7px 0; border-bottom: 1px dashed var(--border-strong); }
.xray__fields > div:last-child { border-bottom: 0; }
.xray__fields dt { color: var(--text-muted); }
.xray__fields dd { margin: 0; color: var(--text); overflow-wrap: anywhere; }
.xray__cipher { color: var(--cipher) !important; word-break: break-all; }
.xray__sealed { display: inline-flex; align-items: center; gap: 6px; color: var(--success) !important; font-family: var(--font); font-weight: 600; }
.xray__channel { display: flex; align-items: center; gap: 6px; font-weight: 650; color: var(--text) !important; margin-bottom: 14px !important; }
.xray__msg, .xray__item { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--border); }
.xray__msg p, .xray__item p { margin: 0 !important; display: flex; flex-direction: column; line-height: 1.35; font-size: 0.86rem; }
.xray__msg strong, .xray__item strong { color: var(--text); font-size: 0.82rem; }
.xray__item code { font-family: var(--mono); font-size: 0.8rem; color: var(--text); }
.xray__note { display: flex; gap: 10px; align-items: flex-start; max-width: 760px; margin: 22px auto 0; color: var(--text-muted); font-size: 0.9rem; line-height: 1.55; }
.xray__note .icon { color: var(--accent); flex: 0 0 auto; margin-top: 3px; }
.xray__note a { color: var(--link); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--link) 40%, transparent); }
.xray__links a { white-space: nowrap; }

/* --- Orbit AI in the apps: one card per feature -------------------------- */

.aigrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.aicard {
  display: flex;
  flex-direction: column;
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--bg-raised);
  box-shadow: var(--shadow-sm), var(--edge);
  min-width: 0;
}
.aicard__head { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.aicard__head .app-icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; }
.aicard__app { font-size: 0.8rem; font-weight: 600; color: var(--text-faint); }
.aicard h3 { font-size: 1.05rem; letter-spacing: -0.015em; margin: 0 0 8px; text-wrap: balance; }
.aicard p { margin: 0; color: var(--text-muted); font-size: 0.9rem; line-height: 1.55; }
.aicard__metric { margin-top: auto !important; padding-top: 16px; font-size: 0.82rem !important; color: var(--text-muted) !important; }
.aicard__metric strong { color: var(--text); font-weight: 650; }
.aichips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.aichips span { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border: 1px solid var(--border); border-radius: var(--radius-pill); font-size: 0.72rem; font-weight: 600; color: var(--text-muted); background: var(--bg-raised); }
.aichips .is-on { border-color: var(--ai-border); background: var(--ai-soft); color: var(--text); }
.aichips .ai-mark { padding: 0; border: 0; background: none; }
.aichips--bar { margin: 0; padding: 8px 12px; border-bottom: 1px solid var(--border); }
.ailevels { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 6px; }
.ailevels li { display: flex; align-items: center; gap: 10px; font-size: 0.78rem; color: var(--text-muted); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ailevel { display: inline-flex; align-items: center; gap: 4px; flex: 0 0 74px; padding: 2px 8px; border-radius: var(--radius-pill); background: var(--bg-inset); color: var(--text-muted); font-size: 0.68rem; font-weight: 650; }
.ailevel--loud { background: var(--ai-soft); color: var(--ai); }
.ailevel--off { color: var(--text-faint); }

/* How Orbit's models work: copy beside one message going through the inbox model. */
.aimodels {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 40px;
  align-items: center;
  margin-top: 40px;
  padding: 32px 36px;
  border: 1px solid var(--ai-border);
  border-radius: 22px;
  background: var(--bg-raised);
  box-shadow: var(--shadow), var(--edge);
}
.aimodels--page { margin-top: 0; }
.aimodels__copy h2, .aimodels__copy h3 { letter-spacing: -0.03em; text-wrap: balance; }
.aimodels__copy h3 { font-size: 1.35rem; }
.aimodels__copy h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin-top: 12px; }
.aimodels__copy p { color: var(--text-muted); font-size: 0.95rem; text-wrap: pretty; }
.aimodels__copy .text-link { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 0.9rem; }

.modelrun { margin: 0; border: 1px solid var(--border); border-radius: 16px; background: var(--bg-subtle); overflow: hidden; }
.modelrun__head { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--border); background: var(--bg-raised); font-size: 0.82rem; }
.modelrun__head .app-icon { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; }
.modelrun__head span:last-child { margin-left: auto; color: var(--text-faint); font-size: 0.74rem; font-weight: 600; }
.modelrun__steps { list-style: none; margin: 0; padding: 6px 14px 14px; display: grid; }
.modelrun__step { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 12px; align-items: start; padding: 10px 0; border-top: 1px dashed var(--border-strong); }
.modelrun__step:first-child { border-top: 0; }
.modelrun__label { padding-top: 2px; font-size: 0.7rem; font-weight: 650; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-faint); }
.modelrun__mail { display: grid; gap: 2px; min-width: 0; }
.modelrun__mail small { color: var(--text-faint); font-size: 0.76rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.modelrun__mail strong { font-size: 0.9rem; }
.modelrun__features { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.modelrun__features code { padding: 2px 7px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg-raised); font-family: var(--mono); font-size: 0.7rem; color: var(--text-muted); }
.modelrun__features span { font-size: 0.72rem; color: var(--text-faint); }
.modelrun__scores { display: grid; gap: 5px; }
.modelrun__score { display: grid; grid-template-columns: 88px minmax(0, 1fr) 44px; gap: 8px; align-items: center; font-size: 0.76rem; color: var(--text-muted); }
.modelrun__score i { height: 6px; border-radius: var(--radius-pill); background: var(--bg-inset); overflow: hidden; }
.modelrun__score i::before { content: ""; display: block; width: max(var(--score), 3px); height: 100%; border-radius: inherit; background: var(--border-strong); }
.modelrun__score b { font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.modelrun__score.is-top { color: var(--text); }
.modelrun__score.is-top i::before { background: var(--ai-gradient); }
.modelrun__answer { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: 0.8rem; color: var(--text-muted); }
.modelrun__tag { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border: 1px solid var(--ai-border); border-radius: var(--radius-pill); background: var(--ai-soft); color: var(--text); font-weight: 650; }
.modelrun__time { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; font-weight: 650; color: var(--text); font-variant-numeric: tabular-nums; }
.modelrun__time .icon { color: var(--ai); }

/* --- One plan: what Pro replaces, and the price card ---------------------- */

.value { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: 48px; align-items: center; }
.value__copy h2 { font-size: clamp(1.6rem, 2.8vw, 2.1rem); letter-spacing: -0.035em; margin-top: 12px; text-wrap: balance; }
.value__copy p { color: var(--text-muted); }
.value__list { list-style: none; margin: 22px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 20px; }
.value__list li { display: flex; align-items: center; gap: 10px; font-size: 0.9rem; font-weight: 550; }
.value__list .app-icon { display: grid; place-items: center; flex: 0 0 28px; width: 28px; height: 28px; border-radius: 9px; }
.value__card {
  padding: 30px;
  border: 1px solid var(--border);
  border-radius: 22px;
  background: var(--bg-raised);
  box-shadow: var(--shadow-lg), var(--edge);
}
.value__plan { display: inline-block; padding: 3px 10px; border-radius: var(--radius-pill); background: var(--accent-soft); color: var(--accent-soft-text); font-size: 0.74rem; font-weight: 700; }
.value__price { margin: 14px 0 0; display: flex; align-items: baseline; gap: 4px; }
.value__price strong { font-size: 3rem; letter-spacing: -0.05em; line-height: 1; }
.value__price span { color: var(--text-muted); font-weight: 600; }
.value__sub { margin: 6px 0 18px; color: var(--text-faint); font-size: 0.86rem; }
.value__checks { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 9px; }
.value__checks li { display: flex; align-items: center; gap: 9px; font-size: 0.9rem; }
.value__checks .icon { color: var(--success); flex: 0 0 auto; }
.value__trial { display: flex; align-items: center; justify-content: center; gap: 7px; margin: 0 0 16px; padding: 9px 12px; border-radius: 10px; background: var(--accent-soft); color: var(--accent-soft-text); font-size: 0.84rem; font-weight: 600; }
.value__trial .icon { flex: 0 0 auto; }
.value__free { display: block; margin-top: 12px; text-align: center; font-size: 0.85rem; color: var(--link); }

/* --- Who makes Orbit: the team, and where to check our work --------------- */

.team { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 48px; align-items: center; }
.team__copy h2 { font-size: clamp(1.6rem, 2.8vw, 2.1rem); letter-spacing: -0.035em; margin: 12px 0; text-wrap: balance; }
.team__copy p { color: var(--text-muted); text-wrap: pretty; }
.team__copy p a { color: var(--link); }
.team__copy .text-link { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 0.9rem; }
.team__checks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.team__checks a {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  height: 100%;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--bg-raised);
  box-shadow: var(--shadow-sm), var(--edge);
  color: var(--text);
  text-decoration: none;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.team__checks a:hover { border-color: var(--card-hover-border); transform: translateY(-2px); }
.team__checks strong { display: block; margin-bottom: 4px; font-size: 0.94rem; line-height: 1.35; }
.team__checks small { display: block; color: var(--text-muted); font-size: 0.85rem; line-height: 1.5; }
.team__icon { display: grid; place-items: center; flex: 0 0 auto; width: 36px; height: 36px; border-radius: 11px; background: var(--accent-soft); color: var(--accent-soft-text); }

/* The downloads and the call to action close the page together. */
.section--closing { padding-top: 16px; }
.section--closing .cta { margin-top: 20px; }

/* --- Promises: the things Orbit will never do ----------------------------- */

.promises { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
/* Too narrow for five in a row: three, then the last row's two a little
   wider, so no promise sits alone. Phones stack them (below). */
@media (min-width: 721px) and (max-width: 960px) {
  .promises { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .promises li { grid-column: span 2; }
  .promises li:nth-last-child(2):nth-child(3n + 1),
  .promises li:last-child:nth-child(3n + 2) { grid-column: span 3; }
}
.promises li {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--bg-raised);
  box-shadow: var(--shadow-sm), var(--edge);
}
.promises__icon { display: grid; place-items: center; width: 38px; height: 38px; margin-bottom: 10px; border-radius: 11px; background: var(--accent-soft); color: var(--accent-soft-text); }
.promises__icon--ai { background: var(--ai-soft); color: var(--ai); }
.promises strong { font-size: 0.98rem; }
.promises li > span:last-child { color: var(--text-muted); font-size: 0.86rem; line-height: 1.5; }

/* --- /security/: the key flow ------------------------------------------- */

.keyflow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr 2fr 1fr; gap: 12px; counter-reset: none; }
.keyflow__step {
  position: relative;
  padding: 22px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--bg-raised);
  box-shadow: var(--shadow-sm), var(--edge);
}
.keyflow__step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -12px;
  width: 12px;
  height: 2px;
  background: var(--border-strong);
}
.keyflow__num { position: absolute; top: -11px; left: 18px; display: grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--bg-raised); font-size: 0.7rem; font-weight: 700; color: var(--text-muted); }
.keyflow { margin-top: 12px; row-gap: 22px; }
.keyflow__icon { display: grid; place-items: center; width: 38px; height: 38px; margin-bottom: 12px; border-radius: 11px; background: var(--accent-soft); color: var(--accent-soft-text); }
.keyflow__step h3 { font-size: 0.98rem; margin: 0 0 6px; }
.keyflow__step p { margin: 0; font-size: 0.86rem; color: var(--text-muted); line-height: 1.5; }
.keyflow__step--split { padding: 14px; }
.keyflow__fork { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; height: 100%; }
.keyflow__branch { padding: 14px; border-radius: 12px; background: var(--bg-subtle); border: 1px solid var(--border); }
.keyflow__branch--kept { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 22%, var(--border)); }
.keyflow__tag { display: inline-flex; align-items: center; gap: 5px; margin-bottom: 8px; padding: 2px 8px; border-radius: var(--radius-pill); background: var(--bg-raised); font-size: 0.68rem; font-weight: 700; color: var(--text-muted); }
.keyflow__branch--kept .keyflow__tag { color: var(--success); }
.keyflow__apps { list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.keyflow__apps li { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border: 1px dashed var(--border-strong); border-radius: 16px; font-size: 0.9rem; color: var(--text-muted); }
.keyflow__apps strong { color: var(--text); }
.keyflow__apps .app-icon { display: grid; place-items: center; flex: 0 0 32px; width: 32px; height: 32px; border-radius: 10px; }

/* --- /security/: the ledger --------------------------------------------- */

.ledger { border: 1px solid var(--border); border-radius: 20px; background: var(--bg-raised); box-shadow: var(--shadow-sm), var(--edge); overflow: hidden; }
.ledger__row { display: grid; grid-template-columns: 200px minmax(0, 1fr) minmax(0, 1.2fr); gap: 20px; padding: 16px 22px; border-top: 1px solid var(--border); font-size: 0.9rem; color: var(--text-muted); line-height: 1.5; align-items: center; }
.ledger__row--head { border-top: 0; background: var(--bg-subtle); font-size: 0.74rem; font-weight: 650; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-faint); }
.ledger__row--head span { display: inline-flex; align-items: center; gap: 6px; }
.ledger__app { display: flex; align-items: center; gap: 10px; font-weight: 600; color: var(--text); }
.ledger__app .app-icon { display: grid; place-items: center; flex: 0 0 28px; width: 28px; height: 28px; border-radius: 9px; }
.ledger__none { color: var(--warning); font-weight: 600; }
.ledger__foot { margin: 16px 0 0; text-align: center; font-size: 0.88rem; color: var(--text-faint); }
.ledger__foot a { color: var(--link); }

.relayflow { list-style: none; margin: 0; padding: 18px 20px; display: grid; gap: 4px; }
.relayflow li { display: grid; grid-template-columns: 18px minmax(0, 1fr); column-gap: 12px; padding: 8px 0; position: relative; }
.relayflow li:not(:last-child)::before { content: ""; position: absolute; left: 6px; top: 24px; bottom: -8px; width: 2px; background: var(--border); }
.relayflow__dot { grid-row: span 2; width: 14px; height: 14px; margin-top: 3px; border-radius: 50%; border: 2px solid var(--border-strong); background: var(--bg-raised); }
.relayflow strong { font-size: 0.88rem; }
.relayflow small { color: var(--text-faint); font-size: 0.78rem; }
.relayflow .is-sealed .relayflow__dot { border-color: var(--success); background: var(--success); }
.relayflow .is-sealed strong { color: var(--success); }

.facts--two { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; }
.report { display: flex; gap: 16px; align-items: flex-start; margin-top: 28px; padding: 22px 24px; border: 1px solid var(--border); border-radius: 18px; background: var(--bg-subtle); }
.report__icon { display: grid; place-items: center; flex: 0 0 40px; width: 40px; height: 40px; border-radius: 12px; background: var(--accent); color: var(--accent-text); }
.report h3 { margin: 0 0 4px; font-size: 1rem; }
.report p { margin: 0; color: var(--text-muted); font-size: 0.9rem; }
.report a { color: var(--link); }

/* --- /on-device-ai/ ------------------------------------------------------ */

.principles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.principles li { padding: 22px; border: 1px solid var(--border); border-radius: 18px; background: var(--bg-raised); box-shadow: var(--shadow-sm), var(--edge); }
.principles__icon { display: grid; place-items: center; width: 38px; height: 38px; margin-bottom: 12px; border-radius: 11px; background: var(--accent-soft); color: var(--accent-soft-text); }
.principles__icon--ai { background: var(--ai-soft); color: var(--ai); }
.principles h3 { font-size: 0.98rem; margin: 0 0 6px; }
.principles p { margin: 0; font-size: 0.86rem; color: var(--text-muted); line-height: 1.5; }

.modeltable { border: 1px solid var(--border); border-radius: 20px; background: var(--bg-raised); box-shadow: var(--shadow-sm), var(--edge); overflow: hidden; }
.modeltable__row { display: grid; grid-template-columns: 190px minmax(0, 1.1fr) 90px 130px minmax(0, 1.3fr); gap: 18px; padding: 16px 22px; border-top: 1px solid var(--border); align-items: center; font-size: 0.88rem; color: var(--text-muted); line-height: 1.5; }
.modeltable__row--head { border-top: 0; background: var(--bg-subtle); font-size: 0.72rem; font-weight: 650; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-faint); }
.modeltable__name { display: flex; align-items: center; gap: 10px; }
.modeltable__name > span:last-child { display: flex; flex-direction: column; line-height: 1.3; }
.modeltable__name strong { color: var(--text); }
.modeltable__name small { color: var(--text-faint); font-size: 0.76rem; }
.modeltable__name .app-icon { display: grid; place-items: center; flex: 0 0 28px; width: 28px; height: 28px; border-radius: 9px; }
.modeltable__num { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--text); }
.modeltable strong { color: var(--text); }

/* Orbit AI's models on /ai/ (partials/ai_chats.html): the model, its plans, who runs it. */
.modeltable--chat .modeltable__row { grid-template-columns: minmax(0, 1.3fr) 130px minmax(0, 1fr); }
@media (max-width: 960px) {
  .modeltable--chat .modeltable__row { grid-template-columns: 1fr 1fr; }
}
.modeltable + .facts { margin-top: 16px; }
.chats__more { margin: 24px 0 0; text-align: center; color: var(--text-muted); font-size: 0.9rem; }

.steps--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cta__mark--ai { background: var(--ai-gradient); color: #fff; }

@media (max-width: 960px) {
  .proof { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .proof__item:nth-child(3) { border-left: 0; }
  .proof__item:nth-child(n + 3) { border-top: 1px solid var(--border); }
  .aigrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .aimodels { grid-template-columns: 1fr; gap: 24px; padding: 26px; }
  .value { grid-template-columns: 1fr; gap: 28px; }
  .team { grid-template-columns: 1fr; gap: 28px; }
  .principles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .keyflow { grid-template-columns: 1fr 1fr; }
  .keyflow__step--split { grid-column: 1 / -1; }
  .keyflow__step:not(:last-child)::after { display: none; }
  .steps--four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps--four .step:nth-child(3) { border-left: 0; }
  .steps--four .step:nth-child(n + 3) { border-top: 1px solid var(--border); }
  .modeltable__row { grid-template-columns: 1fr 1fr; gap: 6px 16px; }
  .modeltable__row--head { display: none; }
  .modeltable__name { grid-column: 1 / -1; margin-bottom: 4px; }
}
@media (max-width: 860px) {
  .steps--four { grid-template-columns: 1fr; }
  .steps--four .step { border-left: 0; }
  .steps--four .step:nth-child(n + 2) { border-top: 1px solid var(--border); }
}
@media (max-width: 720px) {
  .proof { grid-template-columns: 1fr; }
  .proof__item { border-left: 0 !important; border-top: 1px solid var(--border); padding: 20px; }
  .proof__item:first-child { border-top: 0; }
  .xray__pair { grid-template-columns: 1fr; }
  .xray__tab { padding: 6px 12px 6px 6px; font-size: 0.82rem; }
  .xray__fields > div { grid-template-columns: 74px minmax(0, 1fr); }
  .aigrid { grid-template-columns: 1fr; }
  .aimodels { padding: 20px 16px; }
  .modelrun__step { grid-template-columns: 1fr; gap: 6px; }
  .modelrun__head span:last-child { display: none; }
  .value__list { grid-template-columns: 1fr; }
  .value__card { padding: 24px; }
  .team__checks { grid-template-columns: 1fr; }
  .promises { grid-template-columns: 1fr; }
  .principles { grid-template-columns: 1fr; }
  .keyflow { grid-template-columns: 1fr; }
  .keyflow__fork { grid-template-columns: 1fr; }
  .keyflow__apps { grid-template-columns: 1fr; }
  .ledger__row { grid-template-columns: 1fr; gap: 6px; padding: 16px 18px; }
  .ledger__row--head { display: none; }
  .ledger__row > span[role="cell"]::before { display: block; font-size: 0.68rem; font-weight: 650; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-faint); }
  .ledger__row > span[role="cell"]:nth-child(2)::before { content: "Sealed on your device"; }
  .ledger__row > span[role="cell"]:nth-child(3)::before { content: "Our servers can see"; }
  .facts--two { grid-template-columns: 1fr; }
  .modeltable__row { grid-template-columns: 1fr; padding: 16px 18px; }
}

/* Small renders inside the AI cards. */
.aifield { margin-top: 14px; display: grid; gap: 5px; }
.aifield__label { font-size: 0.72rem; font-weight: 600; color: var(--text-muted); }
.aifield__box { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 8px 7px 12px; border: 1.5px solid var(--ai-border); border-radius: 10px; background: var(--bg-raised); box-shadow: 0 0 0 3px var(--ai-soft); }
.aifield__value { font-family: var(--mono); font-size: 0.86rem; letter-spacing: 0.08em; color: var(--text); }
.aifield__tag { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: var(--radius-pill); background: var(--ai-soft); color: var(--ai); font-size: 0.68rem; font-weight: 650; white-space: nowrap; }
.aimention { margin-top: 14px; display: grid; gap: 6px; }
.aimention p { margin: 0 !important; padding: 8px 11px; border-radius: 12px; background: var(--bg-subtle); border: 1px solid var(--border); font-size: 0.8rem !important; color: var(--text) !important; }
.aimention strong { display: flex; align-items: center; gap: 4px; font-size: 0.7rem; color: var(--text-muted); margin-bottom: 1px; }
.aimention__at { color: var(--ai); font-weight: 650; margin-right: 4px; }
.aimention__reply { background: var(--ai-soft) !important; border-color: var(--ai-border) !important; }
.aimention__reply strong { color: var(--ai); }
.aimodes { margin-top: 14px; align-self: flex-start; }
.aimodes i { font-size: 0.72rem; }
.aisidebar { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 6px; }
.aisidebar li { display: flex; align-items: center; gap: 7px; padding: 6px 10px; border: 1px solid var(--border); border-radius: 10px; font-size: 0.78rem; color: var(--text-muted); }
.aisidebar li > .icon { color: var(--text-faint); }

/* ==========================================================================
   Orbit MDM and Orbit RMM: their own pages (/mdm/, /rmm/), priced per device.
   ========================================================================== */

:root {
  --app-mdm: linear-gradient(153deg, #2fe0c8, #0a7c8c);
  --app-rmm: linear-gradient(153deg, #ff7ac8, #b81f8a);
  --app-relay: linear-gradient(153deg, #8aa0c0, #3a4a66);
}
.app-icon.app-icon--mdm { background: var(--app-mdm); }
.app-icon.app-icon--rmm { background: var(--app-rmm); }
.app-icon.app-icon--relay { background: var(--app-relay); }
.eyebrow__mark { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; }
.prodhero__platforms li:not(:has(a)) {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--bg-raised);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-muted);
}
.cta__mark--mdm { background: var(--app-mdm); color: #fff; }
.cta__mark--rmm { background: var(--app-rmm); color: #fff; }

/* The device list on /mdm/. */
.mdmart { width: min(100%, 440px); margin: 0 auto; }
.mdmart__rows { display: grid; }
.mdmart__row { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.mdmart__row:last-child { border-bottom: 0; }
.mdmart__row strong { display: block; font-size: 0.88rem; }
.mdmart__row small { display: block; color: var(--text-faint); font-size: 0.76rem; }
.mdmart__icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--bg-inset); color: var(--text-muted); }
.mdmart__ok { color: var(--success); }
.mdmart__bad { color: var(--danger); }
.mdmart__action { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); font-weight: 600; font-size: 0.74rem; }
.mdmart__action--danger { color: var(--danger); }

/* A policy and what it becomes; and a list of updates. */
.policyart { padding: 6px 16px 16px; }
.policyart__rule { display: flex; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--border); font-size: 0.86rem; }
.policyart__rule span { color: var(--text-muted); text-align: right; }
.policyart__out { display: grid; gap: 6px; margin-top: 14px; }
.policyart__out span { display: inline-flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: var(--radius-sm); background: var(--accent-soft); color: var(--accent-soft-text); font-size: 0.8rem; font-weight: 600; }
.sev { white-space: nowrap; }
.sev--critical { color: var(--danger) !important; font-weight: 600; }

/* The console on /rmm/. */
.consoleart { width: min(100%, 460px); margin: 0 auto; }
.consoleart__gauges { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 14px 16px 6px; }
.consoleart__gauges span { display: grid; gap: 2px; }
.consoleart__gauges small { color: var(--text-faint); font-size: 0.72rem; font-weight: 600; }
.consoleart__gauges strong { font-size: 1.1rem; font-variant-numeric: tabular-nums; }
.consoleart__gauges i { display: block; height: 6px; border-radius: var(--radius-pill); background: linear-gradient(90deg, var(--accent) var(--v), var(--bg-inset) var(--v)); }
.consoleart__gauges i.is-bad { background: linear-gradient(90deg, var(--danger) var(--v), var(--bg-inset) var(--v)); }
.consoleart__out { margin: 10px 16px; padding: 12px 14px; border-radius: var(--radius); background: #0b0e14; color: #d6deeb; font-family: var(--mono); font-size: 0.74rem; line-height: 1.6; overflow-x: auto; }
.consoleart__out .p { color: #7aa7ff; }
.consoleart__out .m { color: #6c7891; }
.consoleart__alert { display: flex; align-items: center; gap: 8px; margin: 0 16px 16px; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--danger-soft); color: var(--danger); font-size: 0.8rem; }
.consoleart__alert strong { color: var(--text); }

/* Per-device plans, on /pricing/ under the Orbit plans. */
.plans--devices { margin-top: 8px; }
/* Free comes first and reads as the way in: a green ribbon, not the accent the best-value plan has. */
.plan--free { border-color: color-mix(in srgb, var(--success) 45%, var(--border)); }
.plan--free .plan__ribbon { background: var(--success); color: var(--bg-raised); }
.pricing__devices { margin-top: 64px; }
.plan__title { margin: 0 0 6px; font-size: 1.15rem; letter-spacing: -0.02em; }

/* --------------------------------------------------------------------------
   What buyers look for: limits (/pricing/#limits), the IT checklist
   (/business/#it), tables in docs, the switching guide, the changelog and
   the comparisons (/compare/<slug>/)
   -------------------------------------------------------------------------- */

/* A second list in one column of a mega menu (Company, then Your account). */
.mega__links + .mega__title { margin-top: 18px; }

.limits { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; }
.limits__group { padding: 20px 22px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg-raised); box-shadow: var(--edge); }
.limits__app { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font-size: 1rem; }
.limits__app .app-icon { display: grid; place-items: center; flex: 0 0 28px; width: 28px; height: 28px; border-radius: 9px; }
.limits__list { margin: 0; padding: 0; }
.limits__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 12px; padding: 10px 0; border-top: 1px solid var(--border); font-size: 0.9rem; }
.limits__row:first-child { border-top: 0; }
.limits__row dt { color: var(--text-muted); }
.limits__row dd { margin: 0; display: flex; flex-direction: column; gap: 2px; }
.limits__row dd strong { color: var(--text); font-weight: 600; }
.limits__row dd span { color: var(--text-faint); font-size: 0.8rem; line-height: 1.45; }

.checklist { margin: 0; padding: 0; border: 1px solid var(--border); border-radius: 20px; background: var(--bg-raised); box-shadow: var(--shadow-sm), var(--edge); overflow: hidden; }
.checklist__row { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 20px; padding: 18px 22px; border-top: 1px solid var(--border); }
.checklist__row:first-child { border-top: 0; }
.checklist__row dt { display: flex; align-items: flex-start; gap: 8px; font-weight: 600; }
.checklist__row dt .icon { flex: 0 0 auto; margin-top: 3px; color: var(--accent); }
.checklist__row dd { margin: 0; }
.checklist__row p { margin: 6px 0 0; color: var(--text-muted); font-size: 0.92rem; line-height: 1.6; }
.checklist__row a { color: var(--link); }
.checklist__status { display: inline-flex; padding: 2px 10px; border-radius: var(--radius-pill); font-size: 0.75rem; font-weight: 600; }
.checklist__status--yes { background: var(--success-soft); color: var(--success); }
.checklist__status--part { background: var(--accent-soft); color: var(--accent-soft-text); }
.checklist__status--no { background: var(--warning-soft); color: var(--warning); }
@media (max-width: 720px) {
  .checklist__row { grid-template-columns: 1fr; gap: 8px; padding: 16px 18px; }
  .limits { grid-template-columns: 1fr; }
}

.steps__more { margin: 24px 0 0; text-align: center; color: var(--text-muted); font-size: 0.92rem; }

/* A table inside a prose page (DNS records), scrolling on its own on a phone. */
.prose__table { margin: 14px 0 20px; overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg-raised); }
.prose__table table { width: 100%; border-collapse: collapse; font-size: 0.86rem; }
.prose__table th, .prose__table td { padding: 10px 14px; text-align: left; vertical-align: top; border-top: 1px solid var(--border); color: var(--text-muted); line-height: 1.5; }
.prose__table thead th { border-top: 0; background: var(--bg-subtle); color: var(--text-faint); font-size: 0.74rem; font-weight: 650; letter-spacing: 0.04em; text-transform: uppercase; }
.prose__table td:first-child { color: var(--text); font-weight: 600; white-space: nowrap; }
.prose__table code { white-space: nowrap; }

.prose .switch__chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 16px; padding: 0; list-style: none; }
.prose .switch__chips li { padding: 3px 10px; border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--bg-raised); font-size: 0.82rem; line-height: 1.6; }

.changelog { list-style: none; margin: 28px 0 8px; padding: 0; display: grid; gap: 28px; }
.changelog__date { margin: 0 0 12px; font-size: 1.05rem; }
.changelog__list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg-raised); box-shadow: var(--edge); }
.changelog__item { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 16px; padding: 12px 18px; border-top: 1px solid var(--border); }
.changelog__item:first-child { border-top: 0; }
.changelog__item p { margin: 0; color: var(--text-muted); font-size: 0.92rem; line-height: 1.55; }
.changelog__texts { margin: 0; padding-left: 18px; color: var(--text-muted); font-size: 0.92rem; line-height: 1.55; display: grid; gap: 4px; }
.changelog__app { display: flex; align-items: center; gap: 8px; font-size: 0.86rem; font-weight: 600; }
.changelog__app .app-icon { display: grid; place-items: center; flex: 0 0 24px; width: 24px; height: 24px; border-radius: 8px; background: var(--bg-inset); color: var(--text); }
@media (max-width: 640px) {
  .changelog__item { grid-template-columns: 1fr; gap: 4px; }
}

.compare { overflow-x: auto; border: 1px solid var(--border); border-radius: 20px; background: var(--bg-raised); box-shadow: var(--shadow-sm), var(--edge); }
.compare:focus-visible { outline: 2px solid var(--accent-ring); outline-offset: 2px; }
.compare__table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 0.9rem; }
.compare__table th, .compare__table td { padding: 14px 18px; text-align: left; vertical-align: top; border-top: 1px solid var(--border); line-height: 1.5; }
.compare__table thead th { border-top: 0; background: var(--bg-subtle); font-size: 0.95rem; }
.compare__table thead th .icon { margin-right: 6px; vertical-align: -2px; color: var(--accent); }
.compare__table tbody th { width: 22%; font-weight: 600; color: var(--text); }
.compare__table td { width: 39%; color: var(--text-muted); }
.compare__asof { display: block; font-size: 0.72rem; font-weight: 400; color: var(--text-faint); letter-spacing: 0; text-transform: none; margin-top: 2px; }
.compare__checked { margin: 14px 0 0; color: var(--text-faint); font-size: 0.84rem; text-align: center; }
.compare__checked a, .compare__side a { color: var(--link); }
.compare__sides { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.compare__side { padding: 24px 26px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg-raised); }
.compare__side--orbit { border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); }
.compare__side h2 { margin: 0 0 12px; font-size: 1.1rem; }
.compare__side ul { margin: 0 0 14px; padding-left: 20px; color: var(--text-muted); font-size: 0.92rem; line-height: 1.7; }
.compare__side p { margin: 0; color: var(--text-muted); font-size: 0.92rem; }
.compare__side p strong { color: var(--text); }
.compare__more { margin: 20px 0 0; text-align: center; font-size: 0.9rem; color: var(--text-faint); }
@media (max-width: 720px) {
  .compare__sides { grid-template-columns: 1fr; }
}

.dl__android { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 16px 20px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg-subtle); color: var(--text-muted); font-size: 0.9rem; line-height: 1.55; }
.dl__android .icon { flex: 0 0 auto; margin-top: 2px; color: var(--accent); }
.dl__android strong { color: var(--text); }
.dl__android a { color: var(--link); }