/* AdvisorPPC public marketing surface.
   Warm ivory, graphite, emerald, restrained amber. System fonts only. */

:root {
  --ink: #16181d;
  --muted: #5a5f5a;
  /* --soft was #7a7f7a: 3.91:1 on --paper, below the 4.5:1 body-text floor.
     #666b66 keeps the same warm grey-green step below --muted at 5.21:1. */
  --soft: #666b66;
  --paper: #fbfaf7;
  --surface: #ffffff;
  --line: #e7e2d8;
  --line-strong: #d9d3c6;
  /* --emerald was #0f8a62: 4.16:1 on --paper. It is text (the wordmark's
     "PPC", .eyebrow, in-panel links), so it has to clear 4.5:1. */
  --emerald: #0b7250;
  --emerald-soft: #e7f6ef;
  /* Ink pairs for the tinted chips and callouts: --emerald/--amber are the
     accent hues and are far too light to sit ON their own soft washes. */
  --emerald-ink: #0a6446;
  --amber: #c49214;
  --amber-soft: #f8efd6;
  --amber-ink: #5a4708;
  --danger-soft: #fdecec;
  --danger-ink: #8a1f1f;
  --graphite: #1c1f1c;
  /* Text that sits ON --graphite. Flips with the theme, so the primary button
     and the skip link stay legible without a component-level dark override. */
  --on-graphite: #ffffff;
  --graphite-hover: #000000;
  --elevated: #f3efe6;
  /* Translucent sticky header, and the always-dark bands (endpoint, CTA). */
  --header-bg: rgba(251, 250, 247, 0.94);
  --panel-dark: #1c1f1c;
  --panel-dark-ink: #f4f6f5;
  --panel-dark-muted: #b8beb9;
  --field-bg: #ffffff;
  --shadow: 0 18px 48px rgba(22, 24, 29, 0.08);
  --radius: 16px;
  --tap: 44px;
  --wrap: 1120px;
  /* Names the docs suite still uses (former connector_base inline palette). */
  --green: #10b981;
  --card: #fff;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 16px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
a:hover { color: var(--emerald); }
code, kbd {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.92em;
}
:focus-visible {
  outline: 2px solid var(--emerald);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  left: 16px;
  top: -80px;
  z-index: 80;
  padding: 10px 14px;
  background: var(--graphite);
  color: var(--on-graphite);
  border-radius: 8px;
  text-decoration: none;
}
.skip-link:focus { top: 12px; }

.wrap {
  width: min(var(--wrap), calc(100% - 40px));
  margin-inline: auto;
}

/* ----- Header ----- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--header-bg);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(12px);
}
.nav-bar {
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: 68px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--ink);
  flex: 0 0 auto;
}
.brand img {
  width: 32px;
  height: 32px;
  border-radius: 8px;
}
.brand strong { color: var(--emerald); }

.nav-desktop {
  display: none;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}
.nav-desktop a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding: 0 12px;
  color: var(--muted);
  text-decoration: none;
  font-size: 14px;
  font-weight: 650;
  border-radius: 10px;
}
.nav-desktop a:hover,
.nav-desktop a[aria-current="page"] {
  color: var(--ink);
  background: var(--elevated);
}

.nav-cta-desktop {
  display: none;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.nav-drawer {
  margin-left: 0;
}
.nav-drawer > summary {
  list-style: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--tap);
  min-height: var(--tap);
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  cursor: pointer;
  font-weight: 700;
  font-size: 14px;
}
.nav-drawer > summary::-webkit-details-marker { display: none; }
.nav-mobile-panel {
  position: absolute;
  left: 0;
  right: 0;
  top: 68px;
  display: grid;
  gap: 4px;
  padding: 12px 20px 20px;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.nav-mobile-panel a:not(.btn) {
  display: flex;
  align-items: center;
  min-height: var(--tap);
  padding: 0 12px;
  text-decoration: none;
  color: var(--ink);
  font-weight: 650;
  border-radius: 10px;
}
.nav-mobile-panel a:not(.btn):hover,
.nav-mobile-panel a:not(.btn)[aria-current="page"] {
  color: var(--ink);
  background: var(--elevated);
}
.nav-mobile-panel .btn { justify-content: center; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap);
  padding: 0 18px;
  border-radius: 10px;
  border: 1px solid transparent;
  text-decoration: none;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  background: transparent;
  color: var(--ink);
}
.btn:hover { color: inherit; }
.btn-primary {
  background: var(--graphite);
  color: var(--on-graphite);
  border-color: var(--graphite);
}
.btn-primary:hover { background: var(--graphite-hover); color: var(--on-graphite); }
.btn-secondary {
  background: var(--surface);
  border-color: var(--line-strong);
}
.btn-ghost {
  color: var(--muted);
}
.btn-block { width: 100%; }
.copy-btn {
  min-height: 36px;
  padding: 0 12px;
  font-size: 13px;
}

/* ----- Hero and type ----- */
.hero { padding: 56px 0 28px; }
.hero-split {
  display: grid;
  gap: 36px;
  align-items: center;
}
.eyebrow {
  margin: 0 0 12px;
  color: var(--emerald);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
h1, h2, h3 { letter-spacing: -0.04em; line-height: 1.12; text-wrap: balance; }
h1 { margin: 0; font-size: clamp(34px, 5vw, 56px); }
h2 { margin: 0 0 10px; font-size: clamp(26px, 3.4vw, 36px); }
h3 { margin: 0 0 8px; font-size: 18px; }
.lead {
  margin: 16px 0 0;
  max-width: 42rem;
  color: var(--muted);
  font-size: clamp(17px, 2vw, 19px);
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 26px;
}
.integration-badge {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin: 18px 0 0;
  padding: 10px 14px;
  border: 1px solid #d9d3c6;
  border-radius: 999px;
  background: #fbfaf7;
  color: #16181d;  /* Claude's lockup keeps its light chip in every theme. */
  font-size: 13px;
  font-weight: 700;
}
.integration-badge img { width: 102px; height: auto; }
.integration-badge span {
  padding-left: 12px;
  border-left: 1px solid #d9d3c6;
  color: #16181d;
}
.hero-visual {
  margin: 0;
}
.hero-visual img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 22px;
  border: 1px solid var(--line);
  background: var(--elevated);
  box-shadow: var(--shadow);
}
.hero-visual figcaption {
  margin-top: 8px;
  color: var(--soft);
  font-size: 13px;
}

.page-head { padding: 48px 0 8px; }
.page-head .lead { max-width: 46rem; }

.proof-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}
.proof-stats li {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px 14px 12px;
}
.proof-stats b { display: block; font-size: 24px; letter-spacing: -0.04em; }
.proof-stats span { color: var(--muted); font-size: 13px; }

.trust-row {
  display: grid;
  gap: 10px;
  margin-top: 22px;
}
.trust-item {
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
}
.trust-item strong { display: block; margin-bottom: 4px; }
.trust-item p { margin: 0; color: var(--muted); font-size: 14px; }

/* ----- Sections ----- */
.section { padding: 52px 0; }
.section-head { max-width: 46rem; margin-bottom: 28px; }
.section-lead { margin: 0 0 20px; color: var(--muted); }
.grid-2, .grid-3, .grid-4 { display: grid; gap: 12px; }
.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
}
.panel p { margin: 8px 0 0; color: var(--muted); font-size: 15px; }
.panel a { color: var(--emerald); }

.steps { margin: 0; padding-left: 22px; }
.steps li { margin: 10px 0; }
.step-grid { display: grid; gap: 12px; counter-reset: step; }
.step-grid article {
  position: relative;
  padding: 20px 20px 20px 64px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.step-grid article::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  left: 18px;
  top: 18px;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: var(--graphite);
  color: var(--on-graphite);
  font-weight: 800;
  font-size: 14px;
  display: grid;
  place-items: center;
}

.client-jump {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 28px;
}
.client-jump a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
  background: var(--surface);
}
.client-jump a:hover { border-color: var(--ink); color: var(--ink); }

/* Keep tool section headings visible below the sticky navigation. */
section[id^="platform-"] { scroll-margin-top: 84px; }

.client-card .endpoint { margin-top: 14px; }
.endpoint {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 14px 16px;
  background: var(--panel-dark);
  color: var(--panel-dark-ink);
  border-radius: 12px;
}
.endpoint span {
  color: var(--panel-dark-muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.endpoint code { word-break: break-all; }
.endpoint .copy-btn {
  background: var(--panel-dark-ink);
  color: var(--panel-dark);
  border: 0;
}
.endpoint .copy-btn[hidden] { display: none; }

.note {
  margin: 16px 0 0;
  padding: 14px 16px;
  background: var(--amber-soft);
  border-left: 4px solid var(--amber);
  border-radius: 0 12px 12px 0;
  color: var(--amber-ink);
  font-size: 14px;
}
.note.ok {
  background: var(--emerald-soft);
  border-left-color: var(--emerald);
  color: var(--emerald-ink);
}

.cta-band {
  padding: 36px;
  background: var(--panel-dark);
  color: var(--panel-dark-ink);
  border-radius: 22px;
}
.cta-band p { max-width: 40rem; color: var(--panel-dark-muted); }
.cta-band .btn-primary {
  background: var(--panel-dark-ink);
  color: var(--panel-dark);
  border-color: var(--panel-dark-ink);
}
.cta-band .btn-primary:hover { background: #fff; color: var(--panel-dark); }
.cta-band a:not(.btn) { color: var(--panel-dark-ink); }

.faq-list { display: grid; gap: 10px; }
details.faq {
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
}
details.faq summary {
  cursor: pointer;
  font-weight: 750;
  min-height: 28px;
}
details.faq p { margin: 10px 0 0; color: var(--muted); }

.media-slot { margin: 24px 0; padding: 0; }
.media-slot img,
.media-slot video {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: var(--panel-dark);
}
.media-slot-video video,
.media-slot-video img {
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.media-slot-featured {
  max-width: 960px;
  margin: 0 auto;
}
.media-slot figcaption {
  margin-top: 8px;
  color: var(--muted);
  font-size: 13px;
  text-align: center;
}
@media (prefers-reduced-motion: reduce) {
  .media-slot-featured video { scroll-margin-top: 80px; }
}

/* ----- Tools ----- */
.tool-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 18px;
}
.tool-toolbar label {
  display: grid;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
}
.tool-toolbar input,
.tool-toolbar select {
  min-height: var(--tap);
  min-width: 220px;
  padding: 0 12px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--surface);
  font: inherit;
  color: var(--ink);
}
.tool-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.tool-list li {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 13px;
  padding: 15px 17px;
}
.tool-list h3 { margin: 0 0 4px; font-size: 16px; }
.tool-list code { color: var(--soft); }
.tool-list p { margin: 6px 0 0; color: var(--muted); font-size: 14px; }
.badge {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  vertical-align: middle;
}
.badge.read { background: var(--emerald-soft); color: var(--emerald-ink); }
.badge.write { background: var(--amber-soft); color: var(--amber-ink); }

/* ----- Auth ----- */
.auth-layout {
  display: grid;
  gap: 28px;
  padding: 36px 0 20px;
  align-items: start;
}
.auth-panel, .auth-aside {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 28px 24px;
}
.auth-panel h1 { font-size: clamp(28px, 4vw, 36px); }
.auth-panel .muted { color: var(--muted); }
.auth-panel form { display: grid; gap: 12px; margin-top: 8px; }
.auth-panel label { display: grid; gap: 6px; font-weight: 650; font-size: 14px; }
.auth-panel input[type="email"],
.auth-panel input[type="password"] {
  min-height: var(--tap);
  padding: 0 12px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  font: inherit;
  font-size: 16px;
  background: var(--field-bg);
  color: var(--ink);
}
.auth-panel .error {
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--danger-soft);
  color: var(--danger-ink);
}
.auth-panel .flash,
.auth-panel .ok-flash {
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--emerald-soft);
  color: var(--emerald-ink);
}
.auth-aside ul { margin: 12px 0 0; padding-left: 18px; color: var(--muted); }
.auth-aside li { margin: 8px 0; }
.auth-links { display: flex; flex-wrap: wrap; gap: 10px 16px; margin-top: 18px; font-size: 14px; }
.auth-links a { color: var(--emerald); }
.divider {
  display: flex;
  align-items: center;
  margin: 18px 0 14px;
  color: var(--muted);
  font-size: 0.86rem;
}
.divider::before,
.divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}
.divider::before { margin-right: 12px; }
.divider::after { margin-left: 12px; }
.google-login-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: var(--tap);
  padding: 11px 16px;
  background: #ffffff;
  border: 1px solid #dadce0;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 500;
  color: #1f1f1f;
  cursor: pointer;
  text-decoration: none;
  box-sizing: border-box;
}
.google-login-btn:hover { background: #fbfaf8; color: #1f1f1f; text-decoration: none; }
.google-login-btn svg { width: 18px; height: 18px; flex-shrink: 0; }
.linkedin-login-btn { margin-top: 8px; }
.linkedin-login-btn svg { fill: #0A66C2; }
.small { font-size: 14px; }

/* ----- Pricing extras (used with the existing storefront markup) ----- */
.plan-badge {
  display: inline-block;
  margin-bottom: 8px;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--emerald-soft);
  color: var(--emerald-ink);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.plan-badge.soon {
  background: var(--elevated);
  color: var(--muted);
}
.compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  background: var(--surface);
  border-radius: 14px;
  overflow: hidden;
}
.compare-table th, .compare-table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}
.compare-table th { background: var(--elevated); color: var(--ink); }
.notice-banner {
  margin-top: 16px;
  text-align: center;
  background: var(--elevated);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 16px;
  font-size: 0.95rem;
}

/* ----- Footer ----- */
.site-footer {
  margin-top: 24px;
  padding: 42px 0 56px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 14px;
}
.footer-grid {
  display: grid;
  gap: 28px;
}
.footer-grid h2 {
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0;
}
.footer-grid ul { margin: 12px 0 0; padding: 0; list-style: none; }
.footer-grid li { margin: 0 0 8px; }
.footer-grid a { text-decoration: none; color: var(--muted); }
.footer-grid a:hover { color: var(--ink); }
.footer-brand { max-width: 22rem; }
.footer-legal { margin-top: 28px; color: var(--soft); font-size: 12px; }

@media (min-width: 900px) {
  .hero-split { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); }
  .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .trust-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .step-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .step-grid article { padding: 22px; }
  .step-grid article::before { position: static; margin-bottom: 14px; }
  .nav-desktop, .nav-cta-desktop { display: flex; }
  .nav-drawer { display: none; }
  .footer-grid { grid-template-columns: 1.4fr repeat(4, 1fr); }
  .auth-layout { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.9fr); padding-top: 48px; }
  .proof-stats { max-width: 36rem; }
}

@media (max-width: 899px) {
  .wrap { width: min(100% - 28px, var(--wrap)); }
  .hero { padding-top: 32px; }
  .proof-stats { grid-template-columns: 1fr; }
  .cta-band { padding: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ---------- Theme ----------
   Three states, and the CSS has to honour all three:

     no data-theme on <html>   -> follow the OS (prefers-color-scheme)
     data-theme="light"        -> stay light even on a dark OS
     data-theme="dark"         -> go dark even on a light OS

   The attribute is written by the toggle in _theme_toggle.html and replayed
   before first paint by the inline script in the page <head>. A visitor who
   never touches the toggle has no attribute and keeps tracking the OS, so
   nothing about the previous automatic behaviour changes for them.

   Same pattern and same storage key as static/app.css and brand-tokens.css.
   Every dark value is a token: there are deliberately no component-level dark
   overrides here, so the two blocks below stay identical and cannot drift. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --ink: #ececec;
    --muted: #a3a8a3;
    /* was #818681 -> 4.48:1 on --surface, a hair under the floor. */
    --soft: #929792;
    --paper: #141614;
    --surface: #1c1f1c;
    --line: #2c312c;
    --line-strong: #3a403a;
    --emerald: #3dcf91;
    --emerald-soft: #163326;
    --emerald-ink: #6fe0ae;
    --amber: #e0b355;
    --amber-soft: #2a2312;
    --amber-ink: #e8c169;
    --danger-soft: #2a1a1a;
    --danger-ink: #f2908f;
    --graphite: #ececec;
    --on-graphite: #141614;
    --graphite-hover: #ffffff;
    --elevated: #2a302a;
    --header-bg: rgba(20, 22, 20, 0.94);
    --panel-dark: #0f1110;
    --panel-dark-ink: #f4f6f5;
    --panel-dark-muted: #b8beb9;
    --field-bg: #141614;
    --shadow: 0 18px 48px rgba(0, 0, 0, 0.35);
  }
}
:root[data-theme="dark"] {
    color-scheme: dark;
    --ink: #ececec;
    --muted: #a3a8a3;
    /* was #818681 -> 4.48:1 on --surface, a hair under the floor. */
    --soft: #929792;
    --paper: #141614;
    --surface: #1c1f1c;
    --line: #2c312c;
    --line-strong: #3a403a;
    --emerald: #3dcf91;
    --emerald-soft: #163326;
    --emerald-ink: #6fe0ae;
    --amber: #e0b355;
    --amber-soft: #2a2312;
    --amber-ink: #e8c169;
    --danger-soft: #2a1a1a;
    --danger-ink: #f2908f;
    --graphite: #ececec;
    --on-graphite: #141614;
    --graphite-hover: #ffffff;
    --elevated: #2a302a;
    --header-bg: rgba(20, 22, 20, 0.94);
    --panel-dark: #0f1110;
    --panel-dark-ink: #f4f6f5;
    --panel-dark-muted: #b8beb9;
    --field-bg: #141614;
    --shadow: 0 18px 48px rgba(0, 0, 0, 0.35);
}

/* ---------- Theme toggle ----------
   Round icon button in the header. Real <button>, labelled, keyboard operable,
   and it inherits the global :focus-visible ring. The icons swap in CSS on the
   same three states as the tokens, so the glyph never lies about the theme. */
.theme-toggle {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}
.theme-toggle:hover { background: var(--elevated); color: var(--ink); }
.theme-toggle svg {
  grid-area: 1 / 1;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.theme-toggle .icon-moon { visibility: hidden; }
:root[data-theme="dark"] .theme-toggle .icon-sun { visibility: hidden; }
:root[data-theme="dark"] .theme-toggle .icon-moon { visibility: visible; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .icon-sun { visibility: hidden; }
  :root:not([data-theme="light"]) .theme-toggle .icon-moon { visibility: visible; }
}
/* Below 900px the desktop nav and the CTA pair are hidden, so the toggle is
   what pushes itself and the drawer to the right edge; above it the nav has
   already taken the free space and the toggle just sits next to it. */
.nav-theme { display: flex; align-items: center; flex: 0 0 auto; margin-left: auto; }
@media (min-width: 900px) { .nav-theme { margin-left: 0; } }

/* Portrait media slot (e.g. a 2:3 vertical clip). The shared rules above size
   media to the full column and crop to 3:2, which would reduce a portrait
   video to a thin horizontal band. Cap the height and centre it instead. */
.media-slot-portrait video {
  width: auto;
  max-width: 100%;
  max-height: 72vh;
  aspect-ratio: 784 / 1168;
  margin: 0 auto;
  display: block;
  object-fit: contain;
}