/* Orbit website: the home page only, on top of styles.css (same tokens, square corners and hairline grids).
   The recordings player, the full-size view, the pricing strip and plans, the calculator, and the home sections. */

html, body { background: #ffffff; color-scheme: light; }
.wrap, .nav-in, .mobile-menu nav { width: auto; max-width: var(--wrap); margin-inline: auto; padding-left: max(24px, env(safe-area-inset-left, 0px)); padding-right: max(24px, env(safe-area-inset-right, 0px)); box-sizing: content-box; }
.nav { top: env(safe-area-inset-top, 0px); }

/* Everything stays readable at rest: the reveal only lifts and brightens a little */
.js [data-reveal] { opacity: .45; transform: translateY(14px); }
.js [data-reveal].in { opacity: 1; transform: none; }

/* ---------- Hero ---------- */
.hero .lead { max-width: 580px; }
.hero-art .illo { max-width: 620px; margin-left: auto; }
.hero-strip { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 26px 0 0; padding: 0; list-style: none; color: var(--muted); font-size: 15px; }
.hero-strip li { display: inline-flex; align-items: center; gap: 8px; }
.hero-strip .ic { width: 16px; height: 16px; color: var(--ok); }


/* ---------- See it working: real recordings in a window frame ---------- */
.see { border-top: 1px solid var(--line); }
.player { max-width: 1040px; margin: 0 auto; }
.player .console-tabs { overflow-x: auto; scrollbar-width: none; }
.player .console-tabs::-webkit-scrollbar { display: none; }
.console-tabs button { position: relative; display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.console-tabs button[aria-selected="true"] { color: var(--ink); }
.console-tabs button:focus-visible { outline: 2px solid var(--accent); outline-offset: -6px; }
.console-tabs .tn { display: inline-grid; place-items: center; width: 19px; height: 19px; border: 1px solid var(--line-2); color: var(--muted); font: 500 11px/1 var(--mono); transition: background .2s, color .2s, border-color .2s; }
.console-tabs button[aria-selected="true"] .tn { border-color: var(--ink); background: var(--ink); color: #fff; }
/* The line under the active tab; while the player runs on its own it fills over the clip's length */
.console-tabs .tp { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left center; pointer-events: none; }
.console-tabs button[aria-selected="true"] .tp { transform: scaleX(1); }
.player.auto .console-tabs button[aria-selected="true"] .tp { transform: scaleX(0); }
.player.auto .console-tabs button[aria-selected="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--line-2); z-index: -1; }
.console-tabs button { isolation: isolate; }
.play-toggle { display: inline-flex; flex: none; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border: 1px solid var(--line-2); background: #fff; color: var(--ink-2); font: 600 12.5px/1 var(--sans); cursor: pointer; }
.play-toggle[hidden] { display: none; }
.play-toggle .ic { width: 12px; height: 12px; }
.play-toggle:hover { border-color: var(--ink); color: var(--ink); }
.play-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.reel { background: #fff; }
.js .clip { display: none; }
.js .clip.on { display: block; }
.js .clip.on .shot { animation: clip-in .45s var(--ease); }
@keyframes clip-in { from { opacity: 0; } to { opacity: 1; } }
html:not(.js) .clip + .clip { border-top: 1px solid var(--line-2); }
.shot { position: relative; display: block; overflow: hidden; background: #f4f5f8; cursor: zoom-in; }
.reel .shot { border-bottom: 1px solid var(--line); }
.shot img, .shot video { display: block; width: 100%; height: auto; }
.reel .shot img, .reel .shot video { aspect-ratio: 16 / 10; }
.reel .shot video { object-fit: cover; background: #f4f5f8; }
.shot.crop img { max-width: none; }
.shot:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.zoom { position: absolute; right: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 6px; padding: 7px 10px; background: rgba(12, 26, 56, .84); color: #fff; font: 600 12.5px/1 var(--sans); opacity: 0; transition: opacity .2s; pointer-events: none; }
.zoom .ic { width: 13px; height: 13px; }
.shot:hover .zoom, .shot:focus-visible .zoom { opacity: 1; }
@media (hover: none) { .zoom { opacity: 1; } }
.clip-cap { display: flex; align-items: baseline; gap: 12px; margin: 0; padding: 16px 20px 18px; color: var(--muted); font-size: 15.5px; line-height: 1.55; }
.clip-cap b { color: var(--ink); font-weight: 600; }
.clip-cap .st { flex: none; position: relative; top: -2px; }
.js .alt { display: none; }
.js .alt.on { display: block; }
html:not(.js) .alt-switch { display: none; }
.alt-switch { display: flex; flex-wrap: wrap; width: max-content; max-width: calc(100% - 40px); margin: 0 20px 18px; border: 1px solid var(--line-2); }
.alt-switch button { padding: 8px 12px; border: 0; background: #fff; color: var(--muted); font: 600 13.5px/1 var(--sans); cursor: pointer; }
.alt-switch button[aria-pressed="true"] { background: var(--ink); color: #fff; }
.alt-switch button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.stage-cap { margin: 14px 2px 0; color: var(--muted); font-size: 13.5px; line-height: 1.5; }
@media (max-width: 860px) { .player .console-url { display: none; } }
/* Phones: every team visible as a wrapped row of tabs instead of a strip that scrolls out of sight */
@media (max-width: 600px) {
  .player .console-bar { flex-wrap: wrap; height: auto; padding: 0; gap: 0; }
  .player .console-bar .dots { display: flex; margin-left: 14px; }
  .player .console-tabs { order: 1; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); width: 100%; margin: 0; overflow: visible; border-top: 1px solid var(--line); }
  .player .console-tabs button { grid-column: span 2; justify-content: center; height: 44px; padding: 0 6px; font-size: 13.5px; }
  .player .console-tabs button:nth-child(4), .player .console-tabs button:nth-child(5) { grid-column: span 3; }
  .player .console-tabs button + button { box-shadow: inset 1px 0 0 var(--line); }
  .player .console-tabs button:nth-child(4) { box-shadow: none; }
  .player .console-tabs button:nth-child(n+4) { border-top: 1px solid var(--line); }
  .player .play-toggle { margin: 7px 8px 7px auto; }
  .clip-cap { flex-direction: column; gap: 8px; padding: 14px 14px 16px; font-size: 15px; }
  .alt-switch { margin: 0 14px 16px; max-width: calc(100% - 28px); }
}

/* Full-size view */
.lightbox { width: min(96vw, 1680px); max-width: none; max-height: 94vh; margin: auto; padding: 0; border: 1px solid var(--line-2); background: #fff; color: var(--ink); box-shadow: var(--shadow); overflow: hidden; }
.lightbox::backdrop { background: rgba(12, 26, 56, .74); }
.lb-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 50px; padding: 6px 8px 6px 16px; border-bottom: 1px solid var(--line); background: #fbfaf7; }
.lb-title { min-width: 0; overflow: hidden; color: var(--ink-2); font-size: 14px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.lb-actions { display: flex; flex: none; gap: 8px; }
.lb-actions [hidden] { display: none; }
.lb-body { display: grid; place-items: center; background: #f4f5f8; }
.lb-body img, .lb-body video { display: block; max-width: 100%; max-height: calc(94vh - 52px); width: auto; height: auto; }

/* Pricing: run your numbers, folded into an expander */
.numbers { margin-top: 28px; border: 1px solid var(--line-2); background: #fff; }
.numbers summary { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 6px 18px; padding: 18px 22px; cursor: pointer; list-style: none; }
.numbers summary::-webkit-details-marker { display: none; }
.numbers summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.num-t { display: inline-flex; align-items: center; gap: 10px; }
.num-t b { color: var(--ink); font: 600 19px/1.2 var(--sans); letter-spacing: -.015em; }
.num-s { color: var(--muted); font-size: 15px; }
.numbers summary > .ic { width: 18px; height: 18px; color: var(--accent); transition: transform .25s var(--ease); }
.numbers[open] summary { border-bottom: 1px solid var(--line); }
.numbers[open] summary > .ic { transform: rotate(45deg); }
.numbers .calc { border: 0; background: var(--line); }
.calc-row { display: flex; flex-wrap: wrap; gap: 18px 26px; }
.calc-row fieldset { margin: 0; }
@media (max-width: 700px) {
  .numbers summary { grid-template-columns: minmax(0, 1fr) auto; padding: 16px; }
  .num-s { grid-column: 1 / -1; grid-row: 2; }
}

/* ---------- Capabilities ---------- */
.caps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.caps .spot h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
@media (max-width: 960px) { .caps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .caps { grid-template-columns: 1fr; } }

.models-band { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(28px, 5vw, 64px); align-items: center; margin-top: clamp(40px, 5vw, 56px); padding: clamp(22px, 4vw, 40px); border: 1px solid var(--line); background: #fff; }
.mb-title { margin: 0; color: var(--ink); font: 600 26px/1.15 var(--sans); letter-spacing: -.025em; }
.model-line { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin: 20px 0 0; padding: 0; list-style: none; border: 1px solid var(--line); background: var(--line); }
.model-line li { display: flex; flex-direction: column; gap: 5px; padding: 14px; background: #fff; }
.model-line b { color: var(--ink); font-size: 16px; font-weight: 600; }
.model-line .ver { color: var(--muted); font: 500 12px/1 var(--mono); }
.model-line em { margin-top: 4px; color: var(--accent-text); font-size: 13.5px; font-style: normal; font-weight: 600; }
.model-line li:nth-child(3) em { color: var(--sky-text); }
.model-line li:nth-child(4) em { color: var(--ok); }
.more-models { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 12px 0 0; color: var(--muted); font-size: 14.5px; }
.heavy-p { margin: 22px 0 0; max-width: 620px; color: var(--muted); font-size: 16.5px; line-height: 1.6; }
.heavy-p b { color: var(--ink); font-weight: 600; }
.models-band .art .illo { max-width: 380px; margin-left: auto; }
@media (max-width: 1000px) { .model-line { grid-template-columns: 1fr 1fr; } }
@media (max-width: 860px) { .models-band { grid-template-columns: 1fr; } .models-band .art .illo { margin: 0; max-width: 320px; } }

/* Real screenshots beside the drawings */
.shots { display: grid; gap: clamp(20px, 3vw, 32px); align-items: start; margin-top: clamp(40px, 5vw, 56px); }
/* Columns sized so both frames in a row share one height at their real proportions */
.setup-shots { grid-template-columns: minmax(0, 1.027fr) minmax(0, 1.6fr); }
.safe-shots { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); margin-top: 0; }
.shots figure { margin: 0; }
.shots .shot { border: 1px solid var(--line-2); box-shadow: var(--shadow); }
.shots figcaption { display: flex; align-items: baseline; gap: 10px; margin-top: 12px; color: var(--muted); font-size: 14.5px; line-height: 1.5; }
.shots figcaption .st { flex: none; position: relative; top: -1px; }
@media (max-width: 760px) { .setup-shots, .safe-shots { grid-template-columns: 1fr; } }
.tpls.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 860px) { .tpls.three { grid-template-columns: 1fr; } }
.custom-line { margin-top: clamp(28px, 4vw, 40px); padding: 18px 22px; border: 1px dashed var(--line-2); background: var(--soft); }
.custom-line p { margin: 0; color: var(--ink-2); font-size: 16.5px; line-height: 1.6; }
.custom-line b { color: var(--ink); }
.custom-line .st { margin-left: 4px; }

/* ---------- Templates and marketplace ---------- */
.tpls { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.tpls .spot h3 { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tpl-price { margin: 4px 0 0; color: var(--accent-text); font-size: 14px; font-weight: 600; }
.tpl-state { margin: 12px 0 0; color: var(--muted); font-size: 13.5px; line-height: 1.5; }
.tpl-state .st { margin-right: 6px; }
.tpls .ticks { margin-top: 18px; gap: 8px; }
.tpls .ticks li { font-size: 15px; }
@media (max-width: 1000px) { .tpls { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .tpls { grid-template-columns: 1fr; } }
.paths { margin-top: clamp(48px, 6vw, 72px); }
.market { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 72px); align-items: center; margin-top: clamp(48px, 6vw, 72px); padding: clamp(24px, 4vw, 44px); border: 1px solid var(--line); background: var(--soft); }
.market .illo { max-width: 380px; margin-left: auto; }
.market h3 { margin: 0; color: var(--ink); font: 600 26px/1.15 var(--sans); letter-spacing: -.025em; }
.market p { margin: 12px 0 0; color: var(--muted); font-size: 16.5px; }
@media (max-width: 860px) { .market { grid-template-columns: 1fr; } .market .illo { margin: 0; max-width: 340px; } }

/* ---------- Safety ---------- */
.trust.five-up { grid-template-columns: repeat(5, minmax(0, 1fr)); margin-top: clamp(32px, 4vw, 48px); }
.trust .spot { padding: 24px; }
.trust .spot > svg.ic { margin-bottom: 16px; }
.trust .spot h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: 17px; }
.trust .spot h3 .st { margin-left: 0; }
.trust .spot p { font-size: 15px; }
@media (max-width: 1100px) { .trust.five-up { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .trust.five-up { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .trust.five-up { grid-template-columns: 1fr; } }

/* ---------- Savings calculator ---------- */
.calc { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 1px; border: 1px solid var(--line-2); background: var(--line-2); }
.calc-in, .calc-out { padding: clamp(22px, 3vw, 34px); background: #fff; }
.calc fieldset { margin: 0 0 22px; padding: 0; border: 0; min-width: 0; }
.calc legend, .calc .lab { display: flex; justify-content: space-between; gap: 12px; width: 100%; margin-bottom: 10px; padding: 0; color: var(--ink); font-size: 15px; font-weight: 600; }
.calc output { color: var(--accent-text); font: 600 15px/1 var(--mono); }
.calc .hint { display: block; margin: -4px 0 10px; color: var(--muted); font-size: 13.5px; font-weight: 400; }
.calc input[type=range] { width: 100%; height: 28px; margin: 0; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; }
.calc input[type=range]::-webkit-slider-runnable-track { height: 4px; background: linear-gradient(90deg, var(--accent) var(--p, 50%), var(--line-2) var(--p, 50%)); }
.calc input[type=range]::-moz-range-track { height: 4px; background: linear-gradient(90deg, var(--accent) var(--p, 50%), var(--line-2) var(--p, 50%)); }
.calc input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; margin-top: -7px; background: var(--ink); border: 3px solid #fff; box-shadow: 0 0 0 1px var(--ink); }
.calc input[type=range]::-moz-range-thumb { width: 14px; height: 14px; border-radius: 0; background: var(--ink); border: 3px solid #fff; box-shadow: 0 0 0 1px var(--ink); }
.radios { display: flex; flex-wrap: wrap; gap: 0; border: 1px solid var(--line-2); width: max-content; max-width: 100%; }
.radios label { position: relative; }
.radios input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.radios span { display: block; padding: 9px 13px; color: var(--muted); font-size: 14px; font-weight: 600; cursor: pointer; }
.radios input:checked + span { background: var(--ink); color: #fff; }
.radios input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.res { display: grid; gap: 18px; }
.res-row { display: grid; gap: 6px; }
.res-row .top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.res-row b { color: var(--ink); font-size: 15.5px; font-weight: 600; }
.res-row strong { color: var(--ink); font: 600 26px/1 var(--sans); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.res-row.orb strong { color: var(--accent-text); }
.res-row small { color: var(--muted); font-size: 13.5px; }
.res-row .bar { height: 10px; }
.res-row .bar i { transition: width .5s var(--ease); }
.res-row.today .bar i { background: #9aa3b5; }
.res-row.all .bar i { background: repeating-linear-gradient(45deg, #d4cfc3 0 3px, #efece5 3px 6px); }
.verdict { margin: 4px 0 0; padding: 16px 18px; background: var(--peach); border: 1px solid #f6dccb; color: var(--ink); font-size: 16.5px; line-height: 1.5; }
.verdict b { color: var(--accent-text); }
.assume { margin: 16px 0 0; color: var(--muted); font-size: 13.5px; line-height: 1.6; }
@media (max-width: 860px) { .calc { grid-template-columns: 1fr; } }
/* ---------- FAQ ---------- */
.faq-list details p a { color: var(--ink); }

/* ---------- Small screens ---------- */
@media (max-width: 560px) {
  .hero-strip { font-size: 14px; }
}
@media (max-width: 480px) {
  .wrap, .nav-in, .mobile-menu nav { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); width: auto; }
  .wide-art { margin-inline: -16px; padding-inline: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1; transform: none; }
  .js .clip.on .shot { animation: none; }
}
/* Calculator: keep each value on one line; the label wraps instead */
.calc .lab output { flex: none; white-space: nowrap; }
.calc .lab label { min-width: 0; }
.calc fieldset, .calc-in { min-width: 0; }
.radios { flex-wrap: wrap; }
@media (max-width: 360px) { .calc .lab { flex-wrap: wrap; } }
.market .kicker { margin: 0 0 12px; color: var(--accent-text); font-size: 15px; }
@media (max-width: 380px) { .player .console-tabs .tn { display: none; } }
.mb-sub { margin: 10px 0 0; max-width: 60ch; color: var(--muted); font-size: 15.5px; line-height: 1.55; }
.name-note { max-width: 62ch; margin: clamp(18px, 3vw, 28px) auto 0; color: var(--muted); font-size: 16px; line-height: 1.6; text-align: center; }
.name-note b { color: var(--ink); font-weight: 600; }