/* === Reset / base === */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  line-height: 1.6;
  color: #e8eaed;
  background: #0f1115;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { color: #e5a00d; text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3 { margin: 0; line-height: 1.25; }
p { margin: 0 0 1em; }

/* Keyboard focus — visible accent ring on any interactive element. */
:focus-visible {
  outline: 2px solid var(--accent, #e5a00d);
  outline-offset: 2px;
  border-radius: 4px;
}
button:focus-visible,
.cat-card:focus-visible,
.opt-row:focus-visible {
  outline-offset: -2px;
  border-radius: inherit;
}

/* Respect users who prefer reduced motion. */
@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;
  }
}

.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
}

/* === Header === */
.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(15, 17, 21, 0.85);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.header-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  font-weight: 600;
  font-size: 16px;
  text-decoration: none;
}
.brand:hover { text-decoration: none; }
.brand-logo {
  width: 24px;
  height: 24px;
  color: #e5a00d;
  filter: drop-shadow(0 0 8px rgba(229, 160, 13, 0.5));
}
.header-link {
  color: #9aa0a6;
  font-size: 14px;
  font-weight: 500;
}
.header-link:hover { color: #e5a00d; }

/* === Hero (home) === */
.hero {
  background: radial-gradient(ellipse at top, rgba(229, 160, 13, 0.18) 0%, transparent 60%);
  padding: 80px 24px 60px;
  text-align: center;
}
.hero-inner { max-width: 760px; margin: 0 auto; }
.hero-title {
  font-size: clamp(36px, 6vw, 56px);
  font-weight: 800;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, #fff 0%, #e5a00d 60%, #ff8c00 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 16px;
}
.hero-sub {
  font-size: 18px;
  color: #9aa0a6;
  margin: 0;
}

/* === 4K callout === */
.callout-4k {
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: 760px;
  margin: 32px auto 0;
  padding: 16px 20px;
  background: linear-gradient(135deg, rgba(229, 160, 13, 0.10), rgba(229, 160, 13, 0.02));
  border: 1px solid rgba(229, 160, 13, 0.25);
  border-radius: 14px;
  color: #e8eaed;
  font-size: 14px;
  line-height: 1.55;
}
.callout-4k strong { color: #fff; }
.badge-4k {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 12px;
  background: linear-gradient(135deg, #e5a00d, #ff8c00);
  color: #1a1500;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.05em;
  border-radius: 8px;
  box-shadow: 0 4px 14px rgba(229, 160, 13, 0.35);
}

/* === Why section === */
.why {
  margin: 36px auto 30px;
  padding: 0 4px;
  max-width: 760px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding-top: 40px;
}
.why-title {
  font-size: 24px;
  color: #fff;
  margin-bottom: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.why-title::before {
  content: "§ ";
  color: #e5a00d;
  font-weight: 400;
  margin-right: 2px;
}
.why p { color: #b8bdc4; font-size: 16px; line-height: 1.7; }
.benefits {
  margin: 16px 0 0;
  padding-left: 22px;
  color: #c8ccd1;
}
.benefits li { margin-bottom: 6px; }

/* === Device picker === */
.screen { margin: 50px 0; position: relative; }
.screen[hidden] { display: none; }
.screen-title {
  font-size: 28px;
  font-weight: 700;
  text-align: center;
  margin-bottom: 28px;
  color: #fff;
}
/* Root page title — solid, left-aligned editorial style. */
.screen-root { margin-top: 56px; }
.screen-root .screen-title {
  font-size: clamp(34px, 5vw, 48px);
  font-weight: 600;
  letter-spacing: -0.025em;
  margin-bottom: 14px;
  color: #fff;
  text-align: left;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}
.screen-root .screen-title::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #e5a00d;
  margin-right: 12px;
  vertical-align: 0.18em;
  box-shadow: 0 0 12px rgba(229, 160, 13, 0.6);
}
.screen-lede {
  color: #b8bdc4;
  font-size: 17px;
  max-width: 760px;
  margin: 0 auto 36px;
  line-height: 1.6;
  text-align: left;
}

/* Entrance animation when a screen becomes active */
@keyframes screen-enter {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.screen.screen-enter {
  animation: screen-enter 0.28s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

/* On non-root screens, give a soft branded backdrop so the page doesn't feel empty
   once the big hero is hidden, and let the screen fill the viewport so the footer
   doesn't pop up right under the cards. */
body.on-screen main {
  background: radial-gradient(ellipse 900px 360px at top, rgba(229, 160, 13, 0.05) 0%, transparent 70%);
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 64px);
}
body.on-screen main > .container {
  flex: 1;
  display: flex;
  flex-direction: column;
}
body.on-screen .screen:not([hidden]) {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding-top: 28px;
  margin: 0;
}
/* On category screens, center the title + cards together as one block
   so they sit balanced in the viewport. */
.screen-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-bottom: 5vh; /* nudge the block above the optical center for nicer balance */
}
.screen-body .screen-title { margin-bottom: 28px; }

/* Categories rendered as an accordion: stacked cards that expand inline. */
.cat-accordion {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 760px;
  margin: 0 auto;
}
.cat-item {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01));
  transition: border-color 0.2s ease;
}
.cat-item:has(.cat-card.is-open) { border-color: var(--accent); }
.cat-card {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px 20px;
  width: 100%;
  background: transparent;
  border: none;
  color: inherit;
  text-align: left;
  cursor: pointer;
  font: inherit;
  transition: background 0.15s ease;
}
.cat-card:hover { background: rgba(255, 255, 255, 0.03); }
.cat-card.is-open { background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 10%, transparent), transparent); }
.cat-card-icon {
  flex: 0 0 52px;
  width: 52px;
  height: 52px;
  background: var(--accent);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  box-shadow: 0 4px 16px color-mix(in srgb, var(--accent) 30%, transparent);
}
.cat-card-icon svg { width: 28px; height: 28px; }
.cat-card-body { flex: 1; min-width: 0; }
.cat-card-label {
  font-size: 17px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 3px;
}
.cat-card-sub {
  font-size: 13px;
  color: #9aa0a6;
}
.cat-card-chevron {
  color: #9aa0a6;
  transition: transform 0.25s ease, color 0.15s ease;
}
.cat-card-chevron svg { width: 22px; height: 22px; display: block; }
.cat-card.is-open .cat-card-chevron {
  transform: rotate(180deg);
  color: var(--accent);
}
.cat-card:hover .cat-card-chevron { color: #fff; }

/* The expandable options panel under each category */
.cat-options[hidden] { display: none; }
.cat-options {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(0, 0, 0, 0.18);
}
.opt-list {
  display: flex;
  flex-direction: column;
  animation: panel-in 0.22s cubic-bezier(0.2, 0.7, 0.2, 1);
}
@keyframes panel-in {
  from { opacity: 0; transform: translateY(-2px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Each option is a clean horizontal row, no nested card chrome. */
.opt-row {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 14px 22px 14px 18px;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  color: inherit;
  text-align: left;
  cursor: pointer;
  font: inherit;
  transition: background 0.15s ease, padding-left 0.15s ease;
}
.opt-row:last-child { border-bottom: none; }
.opt-row:hover {
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 8%, transparent), transparent 60%);
  padding-left: 22px;
}
.opt-row-icon {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  background: color-mix(in srgb, var(--accent) 18%, rgba(255, 255, 255, 0.04));
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  transition: background 0.15s ease, color 0.15s ease;
}
.opt-row-icon svg { width: 22px; height: 22px; }
.opt-row:hover .opt-row-icon {
  background: var(--accent);
  color: #fff;
}
.opt-row-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.opt-row-label {
  font-size: 15px;
  font-weight: 600;
  color: #fff;
}
.opt-row-hint {
  font-size: 13px;
  color: #8b9096;
  line-height: 1.35;
}
.opt-row-arrow {
  width: 18px;
  height: 18px;
  color: #5f6368;
  flex: 0 0 18px;
  transition: transform 0.15s ease, color 0.15s ease;
}
.opt-row:hover .opt-row-arrow {
  color: var(--accent);
  transform: translateX(3px);
}

/* Step 2 — back button + option cards */
.back-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px 8px 10px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  color: #c8ccd1;
  font: inherit;
  font-size: 14px;
  cursor: pointer;
  margin-bottom: 18px;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.back-btn svg { width: 16px; height: 16px; }
.back-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--accent, rgba(255, 255, 255, 0.16));
  color: #fff;
}
.opt-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 14px;
  max-width: 900px;
  margin: 0 auto;
}
.opt-card {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01));
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  text-decoration: none;
  color: inherit;
  transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.opt-card:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
  text-decoration: none;
}
.opt-card-icon {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  background: var(--accent);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}
.opt-card-icon svg { width: 24px; height: 24px; }
.opt-card-body { flex: 1; min-width: 0; }
.opt-card-label {
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 4px;
}
.opt-card-hint {
  font-size: 13px;
  color: #9aa0a6;
  line-height: 1.4;
}
.opt-card-arrow {
  align-self: center;
  color: #5f6368;
  transition: transform 0.15s ease, color 0.15s ease;
}
.opt-card-arrow svg { width: 20px; height: 20px; display: block; }
.opt-card:hover .opt-card-arrow {
  color: var(--accent);
  transform: translateX(3px);
}
/* === Note === */
.note {
  margin: 32px auto 60px;
  padding: 14px 20px;
  max-width: 760px;
  color: #8b9096;
  font-size: 14px;
  text-align: center;
}
.note p { margin: 0; }
.note strong { color: #e5a00d; }

/* === Footer === */
.site-footer {
  margin-top: 40px;
  padding: 24px 24px 32px;
  text-align: center;
  color: #5f6368;
  font-size: 12px;
}
.site-footer p { max-width: 640px; margin: 0 auto; line-height: 1.6; }
.site-footer p + p { margin-top: 10px; }
.footer-credit { color: #8b9096; font-size: 13px; }
.footer-credit a {
  color: #e5a00d;
  font-weight: 600;
}
.footer-legal { color: #5f6368; font-size: 11px; }
.site-footer a { color: #8b9096; }
.site-footer a:hover { color: #e5a00d; text-decoration: underline; }

/* === When focused on a device or category screen, hide the homepage hero + prose === */
body.on-screen .hero,
body:not(.is-root) .why,
body:not(.is-root) .note {
  display: none;
}

/* === Device screen (now inline inside the picker) === */
.device-screen {
  padding-top: 24px;
}
.device-screen .back-btn { margin-bottom: 16px; }
.device-screen .device-hero-inner {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 32px 28px;
  margin-bottom: 16px;
  background:
    radial-gradient(ellipse 90% 80% at top right, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
  border-radius: 20px;
}
.device-hero-icon {
  flex: 0 0 64px;
  width: 64px;
  height: 64px;
  background: var(--accent);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  box-shadow: 0 4px 20px color-mix(in srgb, var(--accent) 40%, transparent);
}
.device-hero-icon svg { width: 36px; height: 36px; }
.device-hero-cat {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
  margin-bottom: 6px;
}
.device-hero-title {
  font-size: clamp(28px, 4.5vw, 40px);
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.02em;
  margin-bottom: 10px;
}
.device-hero-sub {
  color: #c8ccd1;
  font-size: 16px;
  margin: 0;
  max-width: 720px;
}

.section-title {
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  margin: 48px 0 6px;
  letter-spacing: -0.01em;
}
.section-lede { color: #8b9096; margin-bottom: 20px; font-size: 14px; }

/* Settings summary table */
.settings-table-wrap {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.02);
}
.settings-table {
  width: 100%;
  border-collapse: collapse;
}
.settings-table th,
.settings-table td {
  padding: 12px 18px;
  text-align: left;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.settings-table th {
  background: rgba(255, 255, 255, 0.03);
  font-size: 13px;
  color: #6c7178;
  font-weight: 500;
  font-style: italic;
}
.settings-table td { color: #e8eaed; }
.settings-table tr:last-child td { border-bottom: none; }
.settings-table code {
  background: var(--accent);
  color: #fff;
  padding: 3px 10px;
  border-radius: 6px;
  font-size: 13px;
  font-family: "IBM Plex Mono", "SF Mono", Menlo, Consolas, monospace;
  font-weight: 500;
  letter-spacing: -0.01em;
}

/* Checkbox-style settings render as an actual checkmark — same shorthand the
   Plex UI uses on-device, so what you see here matches what you'll see there. */
.value-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--accent);
}
.value-check svg { width: 16px; height: 16px; }

/* Off / Disabled values get a quieter treatment than the bright accent pills. */
.value-off {
  display: inline-block;
  padding: 3px 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  font-size: 13px;
  color: #8b9096;
  font-family: "IBM Plex Mono", "SF Mono", Menlo, Consolas, monospace;
  font-weight: 500;
  letter-spacing: -0.01em;
}

/* Steps */
.steps-list {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: step;
}
.step {
  display: flex;
  gap: 20px;
  padding: 24px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.step:last-child { border-bottom: none; }
.step-num {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 16px;
  box-shadow: 0 2px 12px color-mix(in srgb, var(--accent) 30%, transparent);
}
.step-body { flex: 1; min-width: 0; }
.step-text {
  font-size: 16px;
  color: #e8eaed;
  margin-bottom: 14px;
}
.step-figure {
  margin: 0;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: #1a1d23;
  max-width: 720px;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.step-figure img { width: 100%; display: block; }
.step-figure:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--accent) 30%, rgba(255, 255, 255, 0.08));
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4),
              0 0 0 1px color-mix(in srgb, var(--accent) 20%, transparent);
}

/* Done section */
.done {
  margin: 60px 0 30px;
  padding: 32px;
  text-align: center;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 10%, transparent), rgba(255, 255, 255, 0.02));
  border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
  border-radius: 16px;
}
.done .section-title { margin-top: 0; }
.back-home {
  display: inline-block;
  margin-top: 12px;
  padding: 12px 22px;
  background: var(--accent);
  color: #fff !important;
  border-radius: 10px;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.back-home:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px color-mix(in srgb, var(--accent) 40%, transparent);
  text-decoration: none;
}

/* Device nav prev/next */
.device-nav {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  gap: 12px;
  margin: 40px 0;
}
.nav-btn {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 20px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  color: #e8eaed;
  text-decoration: none;
  flex: 1;
  max-width: 280px;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.nav-btn:hover {
  border-color: var(--accent, #e5a00d);
  background: rgba(255, 255, 255, 0.06);
  text-decoration: none;
}
.nav-btn svg { width: 18px; height: 18px; color: #9aa0a6; }
.nav-btn small {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #9aa0a6;
  font-weight: 600;
}
.nav-btn span { font-size: 14px; font-weight: 600; }
.nav-btn-next { margin-left: auto; text-align: right; }
.nav-btn-next span { text-align: right; }

/* Responsive */
@media (max-width: 600px) {
  .hero { padding: 50px 20px 40px; }
  .why, .note, .done { padding: 20px; }
  .device-hero-inner { flex-direction: column; align-items: flex-start; }
  .step { flex-direction: column; gap: 12px; padding: 18px 0; }
  .step-num { width: 30px; height: 30px; flex-basis: 30px; font-size: 14px; }
  .settings-table th, .settings-table td { padding: 10px 14px; font-size: 14px; }
  .nav-btn span { font-size: 13px; }
}