/* RotatoCAM site — graphite / system-blue theme.
   Built from design_handoff_rotatocam_site. The handoff's prototype uses inline styles as an
   artifact of its authoring format; this is the production stylesheet it asks for.

   Two rules hold the whole aesthetic together, so do not "improve" them:
   - Depth comes from surface value plus a 1px hairline. There are no shadows anywhere.
   - Radius is 5px on buttons ONLY. Panels, cards, images and tables are square.
   Hairline grids are drawn by a 1px gap over a --rule background, not by per-cell borders.
   The layout was tightened twice at the client's request: do not reintroduce vertical air. */

:root {
  --bg: #0e0f11;
  --bg-footer: #0b0c0e;
  --surface: #16181b;
  --surface-2: #14171c;
  --stripe-a: #17191c;
  --stripe-b: #131518;
  --zebra: #121417;
  --rule: #24272c;
  --rule-soft: #1d2024;
  --rule-warm: #2e3440;
  --text: #e8eaed;
  --text-2: #b6bbc3;
  --text-3: #a8adb5;
  --text-4: #969ba3;
  --text-muted: #8a9099;
  --text-dim: #6b7079;
  --text-faint: #4c5058;
  --text-legal: #464b52;
  --numeral: #262a30;
  --accent: #7aa2f7;
  --accent-hover: #9db8ff;
  --warn: #d9a441;          /* safety contexts ONLY, never decoration */
  --ok: #8bbf5a;
  --dev-on: #4faa5a;
  --dev-left: #d8b326;
  --dev-gouge: #c0392b;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans: Archivo, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --wrap: 1280px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }
img { display: block; max-width: 100%; }
h1, h2, h3 { margin: 0; }
p { margin: 0; text-wrap: pretty; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 28px; }
.view { max-width: var(--wrap); margin: 0 auto; padding: 24px 28px 36px; }
.view[hidden] { display: none; }

.mono { font-family: var(--mono); }
.kicker {
  font-family: var(--mono); font-size: 11.5px; color: var(--accent);
  letter-spacing: .16em; margin-bottom: 10px;
}
h2.sec {
  font-weight: 900; font-size: 44px; line-height: .94;
  letter-spacing: -.035em; text-transform: uppercase; text-wrap: balance;
}
.lede { font-size: 15.5px; line-height: 1.55; color: var(--text-3); max-width: 820px; }

/* ---------------------------------------------------------------- announcement banner
   Scrolls away on purpose: it must not eat viewport on every tab. */
.banner { background: var(--surface-2); border-bottom: 1px solid var(--rule); }
.banner-inner {
  max-width: var(--wrap); margin: 0 auto; padding: 11px 28px;
  display: flex; gap: 14px; align-items: flex-start;
}
.banner-tag {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em;
  color: var(--warn); white-space: nowrap; padding-top: 2px;
}
.banner-body {
  font-family: var(--mono); font-size: 11.5px; line-height: 1.65;
  color: var(--text-muted);
}
.banner-body b { color: var(--text-2); font-weight: 400; }

/* ---------------------------------------------------------------- header */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: var(--bg); border-bottom: 1px solid var(--rule);
}
.header-inner {
  max-width: var(--wrap); margin: 0 auto; padding: 9px 28px; min-height: 60px;
  display: flex; align-items: center; gap: 16px; flex-wrap: nowrap;
}
.wordmark {
  font-weight: 900; font-size: 19px; letter-spacing: -.02em;
  text-transform: uppercase; color: var(--text); white-space: nowrap;
}
.wordmark span { color: var(--accent); }
.verchip {
  font-family: var(--mono); font-size: 10px; color: var(--text-dim);
  letter-spacing: .08em; padding-left: 8px;
  border-left: 1px solid var(--rule); margin-left: 4px; white-space: nowrap;
}
.nav { display: flex; gap: 2px; margin-left: auto; }
.nav a {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .09em;
  text-transform: uppercase; padding: 8px 10px; white-space: nowrap;
  border-radius: 5px; border: 1px solid var(--rule);
  background: transparent; color: var(--text-muted); cursor: pointer;
}
.nav a:hover { border-color: var(--accent); color: var(--text-muted); }
.nav a[aria-current="page"] {
  border-color: var(--accent); background: var(--accent); color: var(--bg);
}

/* ---------------------------------------------------------------- floating Buy Pro
   Always on screen, parked just under the sticky header so it never covers the safety banner or
   the tabs.

   It rides a zero-height STICKY dock rather than being position:fixed. The header is sticky too,
   which means before you scroll it sits below the announcement banner and only afterwards sits at
   the top: a fixed button cannot clear it in both states, and a fixed top offset that looked right
   scrolled landed on the header unscrolled. A sticky dock placed immediately after the header
   follows it in either state. --pro-top is the header height at each breakpoint, so keep the two
   in step. Height 0 keeps it out of the layout; the button itself is absolute inside it. */
:root { --pro-top: 60px; }

.pro-dock {
  position: sticky; top: var(--pro-top); z-index: 70;
  height: 0; max-width: var(--wrap); margin: 0 auto;
}

.pro-float {
  position: absolute; top: 12px; right: 20px;
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  font-weight: 600; padding: 11px 16px; border-radius: 999px;
  background: var(--accent); color: var(--bg); border: 1px solid var(--accent);
  text-decoration: none; white-space: nowrap;
  animation: pro-breathe 3.4s ease-in-out infinite;
}
.pro-float:hover, .pro-float:focus-visible {
  background: var(--accent-hover); border-color: var(--accent-hover); color: var(--bg);
  animation-play-state: paused;                 /* stop breathing while it is being aimed at */
}
.pro-float .pro-price { opacity: .78; font-weight: 400; }

/* Breathe on the GLOW, and only a hair on the size. A button that visibly grows and shrinks under
   the cursor is hard to hit, and this one sits over live content. */
@keyframes pro-breathe {
  0%, 100% { box-shadow: 0 0 14px 1px rgba(122, 162, 247, .28), 0 2px 10px rgba(0, 0, 0, .45);
             transform: scale(1); }
  50%      { box-shadow: 0 0 30px 6px rgba(122, 162, 247, .52), 0 2px 10px rgba(0, 0, 0, .45);
             transform: scale(1.028); }
}

/* Anyone who has asked their system to calm down gets a still button with a steady glow, not a
   dimmer pulse. Motion sensitivity is not a preference about intensity. */
@media (prefers-reduced-motion: reduce) {
  .pro-float { animation: none; box-shadow: 0 0 18px 2px rgba(122, 162, 247, .38), 0 2px 10px rgba(0, 0, 0, .45); }
}

/* ---------------------------------------------------------------- buttons */
.btn {
  display: inline-block; font-family: var(--mono); font-size: 11.5px;
  letter-spacing: .12em; text-transform: uppercase; border-radius: 5px;
  padding: 11px 16px; border: 1px solid transparent; cursor: pointer;
}
.btn-primary { background: var(--accent); color: var(--bg); font-weight: 600; }
.btn-primary:hover { background: var(--accent-hover); color: var(--bg); }
.btn-outline { border-color: var(--accent); color: var(--accent); background: transparent; }
.btn-outline:hover { background: var(--accent); color: var(--bg); }
.btn-ghost { border-color: var(--rule); color: var(--text); background: transparent; }
.btn-ghost:hover { border-color: var(--accent); color: var(--text); }
.btn-sm { font-size: 10.5px; padding: 9px 13px; }

/* ---------------------------------------------------------------- hairline grids
   The 1px gap over a --rule field is what draws every internal rule. */
.grid { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.grid > * { background: var(--bg); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.card { padding: 19px 20px 21px; }
.card h3 { font-size: 19px; font-weight: 700; letter-spacing: -.015em; margin-bottom: 8px; }
.card p { font-size: 14.5px; line-height: 1.5; color: var(--text-4); }
.card .idx { font-family: var(--mono); font-size: 11.5px; color: var(--accent); letter-spacing: .12em; }

/* ---------------------------------------------------------------- warning box
   Amber appears ONLY here and in true safety contexts. Never decoration.
   There is no hazard-stripe tape anywhere; that was explicitly rejected. */
.warn-box {
  border: 1px solid var(--rule-warm); background: var(--surface-2);
  padding: 17px 20px; display: flex; gap: 14px; align-items: flex-start;
}
.warn-box .glyph {
  color: var(--warn); font-family: var(--mono); font-size: 13px;
  letter-spacing: .14em; white-space: nowrap; padding-top: 1px;
}
.warn-box p { color: var(--text-2); font-size: 15px; line-height: 1.55; }
.warn-box.accent .glyph { color: var(--accent); }

/* ---------------------------------------------------------------- hero */
.hero {
  display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
  gap: 26px; padding: 26px 0 22px; border-bottom: 1px solid var(--rule);
}
.termline { font-family: var(--mono); font-size: 12px; color: var(--text-dim); margin-bottom: 14px; }
.termline b { color: var(--accent); font-weight: 400; }
.cursor { animation: blink 1.1s step-end infinite; }
@keyframes blink { 0%, 55% { opacity: 1 } 56%, 100% { opacity: 0 } }
.hero h1 {
  font-weight: 900; font-size: 62px; line-height: .9; letter-spacing: -.035em;
  text-transform: uppercase; text-wrap: balance; margin-bottom: 18px;
}
.hero h1 .b { color: var(--accent); display: block; }
.hero p { font-size: 17px; line-height: 1.5; color: var(--text-3); max-width: 560px; margin-bottom: 12px; }
.hero-cta { margin-top: 18px; display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.cta-note { font-family: var(--mono); font-size: 10.5px; color: var(--text-dim); letter-spacing: .1em; line-height: 1.7; }

/* app-window frame */
.appwin { border: 1px solid var(--rule); background: var(--surface); align-self: start; }
.appwin .bar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 9px 12px; font-family: var(--mono); font-size: 10.5px;
  color: var(--text-dim); letter-spacing: .08em; border-bottom: 1px solid var(--rule);
}
.appwin .bar .rec { color: var(--accent); }
.appwin .foot {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 9px 12px; font-family: var(--mono); font-size: 10.5px;
  color: var(--text-dim); letter-spacing: .06em; border-top: 1px solid var(--rule);
}
.appwin .foot .ok { color: var(--ok); }

/* spec strip */
.specs { border-bottom: 1px solid var(--rule); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* Labels sit on a common baseline even when a value wraps to two lines, or the row reads ragged. */
.specs > div { padding: 16px 20px 15px; display: flex; flex-direction: column; }
.specs .l { margin-top: auto; }
.specs > div + div { border-left: 1px solid var(--rule); }
.specs .v { font-family: var(--mono); font-size: 14px; color: var(--text); margin-bottom: 6px; }
.specs .l { font-family: var(--mono); font-size: 10.5px; color: var(--text-dim); letter-spacing: .14em; text-transform: uppercase; }

/* section rhythm */
.block { padding: 30px 0 0; }
.block > .kicker { margin-top: 0; }
.block h2.sec { margin-bottom: 18px; }

/* sim two-up + legend */
.simrow { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 26px; align-items: start; }
.legend { margin-top: 18px; display: grid; gap: 9px; }
.legend div { display: flex; gap: 11px; align-items: center; font-family: var(--mono); font-size: 12px; color: var(--text-muted); letter-spacing: .08em; }
.legend i { width: 16px; height: 16px; display: block; }
.frame { border: 1px solid var(--rule); }

/* closing bar */
.closing {
  margin-top: 30px; border-top: 1px solid var(--rule); padding-top: 20px;
  display: flex; justify-content: space-between; gap: 18px; align-items: center; flex-wrap: wrap;
}
.closing .t { font-family: var(--mono); font-size: 12.5px; color: var(--text-dim); }
.closing .t b { color: var(--accent); font-weight: 400; }
.closing .btns { display: flex; gap: 10px; flex-wrap: wrap; }

/* ---------------------------------------------------------------- editions */
.panels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.panel { padding: 24px 24px 26px; display: flex; flex-direction: column; background: var(--bg); }
.panel.pro { background: var(--surface); border-top: 2px solid var(--accent); }
.panel .title { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; }
.panel h3 { font-size: 26px; font-weight: 800; text-transform: uppercase; letter-spacing: -.02em; }
.panel .price { font-size: 34px; font-weight: 900; letter-spacing: -.03em; }
.panel.pro .price { color: var(--accent); }
.panel .terms { font-family: var(--mono); font-size: 10.5px; color: var(--text-dim); letter-spacing: .12em; margin: 8px 0 18px; }
.panel ul { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 10px; }
.panel li { display: flex; gap: 12px; font-size: 14.5px; line-height: 1.45; color: var(--text-3); }
.panel li::before { content: "✓"; font-family: var(--mono); color: var(--accent); }
.panel .plus { font-size: 13.5px; color: var(--text-muted); margin-bottom: 12px; }
.panel .cta { margin-top: auto; }
.panel .cta .btn { display: block; text-align: center; }

/* comparison table */
.cmp { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr) minmax(0, 1fr); border: 1px solid var(--rule); }
.cmp > div { padding: 9px 14px; font-size: 14.5px; border-bottom: 1px solid var(--rule-soft); }
.cmp .hd { background: var(--surface); font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); }
.cmp .hd.pro { color: var(--accent); }
.cmp .zebra { background: var(--zebra); }
.cmp .no { color: var(--text-faint); }
.cmp .yes { color: var(--accent); }

/* ---------------------------------------------------------------- gallery */
.shots { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.shots figure { margin: 0; background: var(--bg); }
.shots figure.wide { grid-column: span 4; }
.shots figure.half { grid-column: span 2; }
/* The handoff specified 16/10 + cover, sized for its placeholder art. The real screenshots run
   1.78 to 2.23, so cover was slicing up to 28% off the sides and cutting the app's own panels out
   of frame. These are UI shots: losing the interface defeats the point. Contain at 16/9 fits the
   common case exactly and letterboxes the two widest by a hair, against the panel colour so the
   bars read as frame rather than as a gap. */
.shots img { width: 100%; aspect-ratio: 16 / 9; object-fit: contain; background: var(--surface); }
.shots figcaption {
  padding: 14px 18px; border-top: 1px solid var(--rule-soft);
  font-family: var(--mono); font-size: 11px; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .08em; line-height: 1.5;
}
.videorow { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 26px; align-items: start; }
.videorow .strip { font-family: var(--mono); font-size: 11px; color: var(--text-dim); letter-spacing: .1em; margin-bottom: 10px; }
.videoframe { border: 1px solid var(--rule); aspect-ratio: 16 / 9; }
.videoframe iframe { width: 100%; height: 100%; border: 0; display: block; }

/* submission slots — striped placeholders, filled as material comes in.
   The grid must survive with as few as two filled. */
.slots { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.slot {
  aspect-ratio: 4 / 3; padding: 14px 16px; position: relative;
  background: repeating-linear-gradient(135deg, var(--stripe-a) 0 10px, var(--stripe-b) 10px 20px);
  display: flex; flex-direction: column; justify-content: space-between;
}
.slot .n { font-family: var(--mono); font-size: 11px; color: var(--accent); letter-spacing: .14em; }
.slot .d { font-family: var(--mono); font-size: 11px; color: var(--text-dim); line-height: 1.6; }
.slots-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }

/* ---------------------------------------------------------------- how-to / safety */
.steps .card .num { font-family: var(--mono); font-size: 28px; font-weight: 600; color: var(--numeral); line-height: 1; margin-bottom: 10px; }
.try { font-family: var(--mono); font-size: 11.5px; color: var(--accent); letter-spacing: .06em; margin-top: 12px; }
.tag { font-family: var(--mono); font-size: 11px; color: var(--accent); letter-spacing: .14em; margin-bottom: 10px; }
.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.checklist li { display: flex; gap: 12px; font-size: 14.5px; line-height: 1.45; color: var(--text-3); }
.checklist li::before {
  content: ""; width: 13px; height: 13px; flex: 0 0 13px;
  border: 1px solid var(--accent); margin-top: 3px;
}
.bugrow {
  margin-top: 26px; background: var(--surface); border: 1px solid var(--rule);
  padding: 20px 22px; display: flex; justify-content: space-between; gap: 20px; align-items: center; flex-wrap: wrap;
}

/* ---------------------------------------------------------------- download */
.view-download h2.sec { font-size: 56px; }
.dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.dl > div { background: var(--bg); padding: 24px; display: flex; flex-direction: column; }
.dl .pro { background: var(--surface); border-top: 2px solid var(--accent); }
.dl h3 { font-size: 22px; font-weight: 800; text-transform: uppercase; letter-spacing: -.02em; margin-bottom: 10px; }
.dl p { font-size: 14.5px; line-height: 1.5; color: var(--text-4); margin-bottom: 18px; }
.dl .cta { margin-top: auto; }
.dl .cta .btn { display: block; text-align: center; }
.dl .spec { font-family: var(--mono); font-size: 10.5px; color: var(--text-dim); letter-spacing: .1em; text-align: center; margin-top: 11px; }
.reqbox { background: var(--surface-2); border-left: 1px solid var(--rule-warm); padding: 20px 22px; }

/* ---------------------------------------------------------------- footer */
.site-footer { border-top: 1px solid var(--rule); background: var(--bg-footer); margin-top: 40px; }
.footer-inner { max-width: var(--wrap); margin: 0 auto; padding: 22px 28px 18px; }
.footer-term { font-family: var(--mono); font-size: 12.5px; color: var(--text-dim); margin-bottom: 20px; }
.footer-term b { color: var(--accent); font-weight: 400; }
.footer-row { display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; margin-bottom: 20px; }
.footer-bio { font-size: 13.5px; line-height: 1.55; color: var(--text-muted); max-width: 460px; margin-top: 8px; }
.footer-cols { display: flex; gap: 52px; }
.footer-cols h4 { margin: 0 0 10px; font-family: var(--mono); font-size: 10.5px; color: var(--text-legal); letter-spacing: .16em; text-transform: uppercase; font-weight: 400; }
.footer-cols ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.footer-cols a { font-family: var(--mono); font-size: 12px; color: var(--text-muted); }
.footer-cols a:hover { color: var(--accent); }
.legal { font-family: var(--mono); font-size: 10.5px; line-height: 1.9; color: var(--text-legal); letter-spacing: .1em; text-transform: uppercase; border-top: 1px solid var(--rule); padding-top: 16px; }

/* ---------------------------------------------------------------- responsive
   The nav must never wrap to a second row. Below 900px the header CTA goes;
   the Download tab already exists, so nothing becomes unreachable. */
@media (max-width: 1000px) {
  .hero { grid-template-columns: minmax(0, 1fr); }
  .hero h1 { font-size: 48px; }
}
@media (max-width: 900px) {
  .header-cta { display: none; }
  .nav { overflow-x: auto; -ms-overflow-style: none; scrollbar-width: none; }
  .nav::-webkit-scrollbar { display: none; }
}
/* Phones. Six tabs cannot share a row with the wordmark, so give the nav its own full-width row.
   It used to stay beside the wordmark: on a 390 px screen that left it 66 px to hold 454 px of
   tabs, and because a flex item with overflow-x:auto has an automatic minimum size of zero, it
   simply collapsed. Four of the six tabs sat off-screen and the first was clipped mid-word, with
   the scrollbar hidden so nothing suggested they were there. That is the menu "disappearing".
   Given its own row the tabs WRAP rather than scroll, so nothing is ever off-screen and there is
   nothing to swipe for: on the narrowest phones they take two rows, which is the honest use of the
   space. Scrolling was the earlier fix and it still left Download over the edge at 320 px. */
@media (max-width: 720px) {
  /* Header grows to two rows on the narrowest phones (121px), so the dock clears the taller case.
     Between 430 and 720 the header is 86px and the button simply sits a little lower; that costs
     nothing and is far better than the button tucking under the tabs on a 320px screen. */
  :root { --pro-top: 124px; }
  .pro-float { right: 14px; top: 8px; font-size: 10px; padding: 9px 13px; }
  .header-inner { flex-wrap: wrap; row-gap: 9px; padding-top: 10px; padding-bottom: 10px; }
  .nav {
    flex: 1 0 100%; margin-left: 0; min-width: 0;
    flex-wrap: wrap; overflow-x: visible; row-gap: 5px;
  }
  .nav a { padding: 8px 8px; font-size: 10px; letter-spacing: .05em; }
}
@media (max-width: 860px) {
  .g3, .g4, .g2, .panels, .cmp, .simrow, .videorow, .dl, .slots, .specs {
    grid-template-columns: minmax(0, 1fr);
  }
  .specs > div + div { border-left: 0; border-top: 1px solid var(--rule); }
  .cmp > div { border-bottom: 1px solid var(--rule-soft); }
  .shots { grid-template-columns: minmax(0, 1fr); }
  .shots figure.wide, .shots figure.half { grid-column: span 1; }
  .view, .view-download { padding: 20px 18px 30px; }
  .banner-inner, .header-inner, .footer-inner, .wrap { padding-left: 18px; padding-right: 18px; }
  h2.sec, .view-download h2.sec { font-size: 34px; }
  .hero h1 { font-size: 40px; }
  .footer-cols { gap: 32px; }
}