/* ==========================================================================
   Inferock site theme: rules. Tokens in tokens.css. Direction: the observatory console - a static sky chart under the
   headline, an almanac row of mono facts, panels on a blue-black ground, colour only for a state.
   - The shell regions (rs-*) are self-contained (font, colour, list resets), because on an older
     page they sit beside the older sheets.
   - The rebuilt page bodies keep plain class names, and every such rule is scoped under #main.
     Older pages use #main-content, so these rules never touch an older body; that is re-skinned
     only through the bridge tokens. A repository test asserts the scope.
   Motion only inside @media (prefers-reduced-motion: no-preference); the static page is the default.
   ========================================================================== */

/* ---- the swap-source page: both pages carry the page class on <html> and <body> (a plain class, so every engine reads it) ---- */
html.rs-site {
  color-scheme: dark; background: var(--r-c-ground);
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 1.25rem; scroll-padding-bottom: 5rem;
}
body.rs-site {
  margin: 0; background: var(--r-c-ground); color: var(--r-c-text); font-family: var(--r-font-text);
  font-size: var(--r-step-body); line-height: var(--r-leading-body); font-kerning: normal; overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}
#main, #main *, #main *::before, #main *::after { box-sizing: border-box; }
#main [hidden] { display: none !important; }
#main svg { display: block; max-width: 100%; height: auto; }
#main :is(h1, h2, h3, p, dl, dd, ol, ul, pre, figure) { margin: 0; }
#main :is(ul, ol) { padding: 0; list-style: none; }
#main code { font-family: var(--r-font-mono); font-size: 0.92em; }
#main a { color: var(--r-c-accent-strong); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
#main a:hover { color: var(--r-c-text); text-decoration-thickness: 2px; }
#main :focus-visible { outline: var(--r-focus-ring); outline-offset: var(--r-focus-offset); }
#main:focus { outline: none; }
#main .vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* spaced caps in the mono: the almanac's voice */
#main :is(.eyebrow, .badge, .snippet-title, .price-cell dt, .trail-label, .contents-num, .section-num) {
  font-family: var(--r-font-mono); font-size: var(--r-step-micro); font-weight: 500; letter-spacing: 0.08em;
  text-transform: uppercase; line-height: 1.4;
}

/* ---- shell regions: own font, colour and resets (old sheets may sit beside them) ---- */
.rs-launch-bar, .rs-header, .rs-footer {
  font-family: var(--r-font-text); color: var(--r-c-text); line-height: var(--r-leading-body); font-kerning: normal;
  -webkit-font-smoothing: antialiased; text-align: left;
}
.rs-launch-bar *, .rs-launch-bar *::before, .rs-launch-bar *::after,
.rs-header *, .rs-header *::before, .rs-header *::after,
.rs-footer *, .rs-footer *::before, .rs-footer *::after { box-sizing: border-box; }
.rs-header :is(ul, ol), .rs-footer :is(ul, ol) { margin: 0; padding: 0; list-style: none; }
.rs-header :is(p, h2), .rs-footer :is(p, h2), .rs-launch-bar p { margin: 0; }
.rs-launch-bar :focus-visible, .rs-header :focus-visible, .rs-footer :focus-visible, .rs-skip-link:focus-visible {
  outline: var(--r-focus-ring); outline-offset: var(--r-focus-offset);
}
.rs-header-inner, .rs-footer-inner { width: min(calc(100% - 2 * var(--r-gutter)), var(--r-container)); margin-inline: auto; }

/* ---- skip link (swap sources carry it; other pages keep theirs) ---- */
.rs-skip-link {
  position: absolute; display: inline-block; left: var(--r-s-4); top: var(--r-s-2); z-index: 100; padding: var(--r-s-2) var(--r-s-4);
  background: var(--r-c-text); color: var(--r-c-surface); font-family: var(--r-font-text); font-weight: 700; text-decoration: none;
  transform: translateY(-300%);
}
.rs-skip-link:focus { transform: none; color: var(--r-c-surface); }

/* ---- launch bar: the collar ---- */
.rs-launch-bar {
  background: var(--r-c-surface-2); border-bottom: 1px solid var(--r-c-line); font-family: var(--r-font-mono); font-size: 0.8125rem;
  padding-inline: max(var(--r-gutter), calc((100% - var(--r-container)) / 2));
}
.rs-launch-bar > p { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.7rem; padding-block: 0.5rem; }
.rs-launch-bar a { color: var(--r-c-accent-strong); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.rs-launch-bar a:hover { color: var(--r-c-text); text-decoration-thickness: 2px; }
.rs-launch-dot { display: inline-block; width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--r-warning); flex: none; }

/* ---- header + primary nav ---- */
.rs-header { position: relative; background: var(--r-c-ground); border-bottom: 1px solid var(--r-c-line); font-size: 1rem; }
.rs-header-inner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--r-s-4) var(--r-s-6); min-height: 4.5rem; }
.rs-brand {
  display: inline-flex; align-items: center; gap: 0.6rem; min-height: 2.75rem; color: var(--r-c-text); text-decoration: none;
  font-family: var(--r-font-display); font-size: 1.05rem; font-weight: 600; font-stretch: 125%; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1;
}
.rs-brand:hover { color: var(--r-c-text); text-decoration: none; }
/* the brand mark: the object in its finder ring */
.rs-brand-mark { position: relative; display: block; flex: none; width: 1.1rem; height: 1.1rem; border: 1.5px solid var(--r-c-text); border-radius: 50%; box-shadow: inset 0 0 0 4px var(--r-c-ground), inset 0 0 0 9px var(--r-c-text); }
.rs-brand-mark::after { content: none; }
/* in the header the mark is the logo itself, without the ring */
.rs-header .rs-brand-mark { border: 0; border-radius: 0; box-shadow: none; }
.rs-brand-word { display: inline-block; }
.rs-nav { display: flex; flex: 1; align-items: center; justify-content: space-between; gap: var(--r-s-5); }
.rs-header .rs-nav-list { display: flex; align-items: center; gap: var(--r-s-5); }
.rs-header .rs-nav-item { display: flex; align-items: center; gap: 0.5rem; }
.rs-header .rs-nav-link {
  display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0; color: var(--r-c-text); background: none;
  font-family: var(--r-font-text); font-size: 1rem; font-weight: 500; font-stretch: 112%; text-decoration: none; cursor: pointer;
}
.rs-header .rs-nav-link:hover, .rs-header .rs-nav-link[aria-current="page"] {
  color: var(--r-c-text); text-decoration: underline; text-decoration-color: var(--r-c-accent-strong); text-decoration-thickness: 2px;
  text-underline-offset: 0.4em;
}
.rs-pill {
  display: inline-flex; align-items: center; margin-left: 0.45rem; padding: 0.05rem 0.45rem; border: 1px solid var(--r-warning);
  border-radius: var(--r-radius-pill); color: var(--r-warning); font-family: var(--r-font-text); font-size: var(--r-step-micro);
  font-weight: 700; letter-spacing: var(--r-tracking-caps); text-transform: uppercase; line-height: 1.4;
}
.rs-nav-dane-sections {
  display: flex; align-items: center; font-family: var(--r-font-text); font-size: 0.6875rem; font-weight: 700;
  letter-spacing: var(--r-tracking-caps); text-transform: uppercase;
}
.rs-nav-dane-sections a {
  display: inline-flex; align-items: center; min-height: 2.75rem; padding-inline: 0.4rem; color: var(--r-c-text-muted); text-decoration: none;
}
.rs-nav-dane-sections a:hover { color: var(--r-c-accent-strong); text-decoration: underline; }

/* Products: one native <details>, no script. The menu is a map legend: one symbol per product. */
.rs-products-menu { position: relative; }
.rs-products-menu > summary { list-style: none; gap: 0.45rem; }
.rs-products-menu > summary::-webkit-details-marker { display: none; }
.rs-products-menu > summary::after {
  content: ""; width: 0.42rem; height: 0.42rem; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: translateY(-0.15rem) rotate(45deg);
}
.rs-products-menu[open] > summary::after { transform: translateY(0.1rem) rotate(-135deg); }
.rs-products-menu > .rs-products-list {
  position: absolute; z-index: 40; top: calc(100% + 0.6rem); left: -1rem; min-width: 16rem; padding: 0.5rem 0;
  background: var(--r-c-surface-2); border: 1px solid var(--r-c-line-strong); border-radius: var(--r-radius-1);
}
.rs-products-list a {
  display: flex; align-items: center; gap: 0.8rem; min-height: 2.75rem; padding: 0.4rem 1rem; color: var(--r-c-text);
  font-size: 1rem; font-weight: 600; text-decoration: none;
}
.rs-products-list a::before { content: ""; display: inline-block; flex: none; width: 0.7rem; height: 0.7rem; background: var(--r-c-text); }
.rs-products-list li:nth-child(1) a::before { border-radius: 50%; }
.rs-products-list li:nth-child(2) a::before { clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.rs-products-list li:nth-child(3) a::before { width: 0.62rem; height: 0.62rem; }
.rs-products-list li:nth-child(4) a::before { transform: rotate(45deg) scale(0.85); }
.rs-products-list a:hover { background: var(--r-c-surface); color: var(--r-c-accent-strong); text-decoration: none; }
.rs-products-list a:hover::before { background: var(--r-c-accent-strong); }

/* account: Log in + Sign up. Sign up is a SECONDARY action: the page's one primary action is
   Try Dane (#main .btn--primary). So rs-btn is an outline, never the accent fill. */
.rs-nav-account { display: flex; align-items: center; gap: var(--r-s-5); }
.rs-header .rs-nav-login { white-space: nowrap; }
/* the Log in anchor keeps the older class the deploy strip spares; on pages that still load the older
   sheets their rules for it reach this anchor, so this rule (higher specificity, later) restyles it. */
.rs-header .rs-nav-login > .shared-login-link {
  display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0; border: 0; border-radius: 0; background: none;
  color: var(--r-c-text); font-family: var(--r-font-text); font-size: 1rem; font-weight: 600; line-height: 1.2; text-decoration: none;
}
.rs-header .rs-nav-login > .shared-login-link:hover {
  color: var(--r-c-text); text-decoration: underline; text-decoration-color: var(--r-c-accent-strong); text-decoration-thickness: 2px;
  text-underline-offset: 0.4em;
}
.rs-btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 2.75rem; padding: 0 1rem;
  border: 1px solid var(--r-c-text); border-radius: var(--r-radius-1); background: transparent; color: var(--r-c-text);
  font-family: var(--r-font-text); font-size: 1rem; font-weight: 700; line-height: 1.2; text-decoration: none; white-space: nowrap;
}
.rs-btn--signup { border-color: var(--r-c-text); background: transparent; color: var(--r-c-text); }
.rs-btn--signup:hover { background: var(--r-c-surface-2); color: var(--r-c-text); text-decoration: none; }

/* phone menu: a second <details>; hidden on wide screens */
.rs-nav-phone { display: none; }
.rs-nav-phone > summary {
  display: inline-flex; align-items: center; gap: 0.6rem; min-height: 2.75rem; padding: 0 0.9rem; list-style: none; cursor: pointer;
  border: 1px solid var(--r-c-line-strong); border-radius: var(--r-radius-1); background: var(--r-c-surface); color: var(--r-c-text);
  font-family: var(--r-font-text); font-size: 1rem; font-weight: 500;
}
.rs-nav-phone > summary::-webkit-details-marker { display: none; }
.rs-nav-phone > summary::after {
  content: ""; width: 1rem; height: 0.65rem; border-block: 1.5px solid currentColor;
  background: linear-gradient(currentColor, currentColor) center / 100% 1.5px no-repeat;
}
.rs-nav-phone > nav {
  position: absolute; z-index: 40; left: 0; right: 0; top: 100%; padding: var(--r-s-2) var(--r-gutter) var(--r-s-5);
  background: var(--r-c-ground); border-bottom: 1px solid var(--r-c-line-strong);
}
.rs-nav-phone .rs-nav-list { flex-direction: column; align-items: stretch; gap: 0; }
.rs-nav-phone .rs-nav-item { flex-wrap: wrap; justify-content: space-between; border-top: 1px solid var(--r-c-line); }
.rs-nav-phone .rs-nav-item > span { display: inline-flex; align-items: center; min-height: 2.75rem; font-weight: 600; }
.rs-nav-phone .rs-products-list {
  flex-basis: 100%; margin: 0 0 0.5rem 0.3rem; padding: 0; border-left: 1px solid var(--r-c-text); background: transparent;
}
.rs-nav-phone .rs-nav-account { padding-top: var(--r-s-4); }

@media (max-width: 1023px) {
  .rs-nav { flex-wrap: wrap; justify-content: flex-end; gap: var(--r-s-4); }
  .rs-nav-account { gap: var(--r-s-4); }
  .rs-nav-phone { display: block; }
  /* with a phone menu present (the header carries its menu modifier), the bar keeps only the account (Sign up stays in the bar) */
  .rs-header-inner.rs-header-inner--menu > .rs-nav > .rs-nav-list { display: none; }
  .rs-header-inner.rs-header-inner--menu > .rs-nav { flex: 1; }
  .rs-header .rs-nav-list { flex-wrap: wrap; gap: 0 var(--r-s-4); }
}
@media (max-width: 479px) {
  .rs-header-inner { gap: var(--r-s-2) var(--r-s-4); }
  .rs-header-inner.rs-header-inner--menu .rs-nav > .rs-nav-account > .rs-nav-login { display: none; }
}

/* ---- footer: a panel under the sky ---- */
.rs-footer { margin-top: var(--r-s-8); background: var(--r-c-surface); border-top: 1px solid var(--r-c-line); font-size: var(--r-step-body); }
.rs-footer-inner { display: grid; gap: var(--r-s-7); padding-block: var(--r-s-8) var(--r-s-9); }
@media (min-width: 1024px) { .rs-footer-inner { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(0.75rem, 1.6vw, 1.5rem); } }
.rs-footer-lead { display: flex; flex-direction: column; align-items: flex-start; gap: var(--r-s-4); }
.rs-footer .rs-footer-bridge {
  max-width: 32ch; font-family: var(--r-font-display); font-stretch: 112%; font-size: var(--r-step-lead); line-height: 1.4;
}
.rs-footer-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--r-s-6) clamp(0.75rem, 1.6vw, 1.5rem); }
@media (min-width: 640px) { .rs-footer-nav { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.rs-footer-col { min-width: 0; }
.rs-footer .rs-footer-h {
  margin-bottom: 0.4rem; color: var(--r-c-text-muted); font-family: var(--r-font-text); font-size: var(--r-step-micro);
  font-weight: 700; line-height: 1.4; letter-spacing: var(--r-tracking-caps); text-transform: uppercase;
}
.rs-footer .rs-footer-group a { display: inline-flex; align-items: center; min-height: 2.25rem; color: var(--r-c-text); text-decoration: none; }
.rs-footer .rs-footer-group a:hover { color: var(--r-c-accent-strong); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
/* the compact not-found footer: one row of links, no columns */
.rs-footer-nav > .rs-footer-group { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 0 var(--r-s-5); }

/* ---- page containers ---- */
#main .hero, #main .contents, #main .section, #main > .strap { width: min(calc(100% - 2 * var(--r-gutter)), var(--r-container)); margin-inline: auto; }

/* ---- buttons ---- */
#main .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem; min-height: 3rem; padding-inline: 1.3rem;
  font-family: var(--r-font-text); font-weight: 600; font-stretch: 112%; letter-spacing: 0.02em; font-size: 1rem; text-decoration: none; border: 1px solid transparent;
  border-radius: var(--r-radius-1);
}
#main .btn--primary { background: var(--r-c-accent); color: var(--r-c-on-accent); }
#main .btn--primary:hover { background: var(--r-c-accent-strong); color: var(--r-c-on-accent); }
#main .btn--primary::after { content: ""; width: 0.45rem; height: 0.45rem; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg); }
#main .btn--secondary { border-color: var(--r-c-line-strong); background: var(--r-c-ground); color: var(--r-c-text); }
#main .btn--secondary:hover { border-color: var(--r-c-accent-strong); color: var(--r-c-accent-strong); }

/* ---- hero: one column; the sky chart spans the width under the headline ---- */
#main .hero { padding-block: clamp(1.5rem, 1rem + 2vw, 3rem) var(--r-s-7); }
#main .hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--r-s-6); align-items: start; }
#main .hero-main { min-width: 0; }
#main .eyebrow { display: block; margin-bottom: var(--r-s-5); color: var(--r-c-text-muted); }
#main .hero-title {
  font-family: var(--r-font-display); font-weight: 500; font-stretch: 112%; font-size: var(--r-step-display); line-height: var(--r-leading-display);
  letter-spacing: var(--r-tracking-display); max-width: 30ch; text-wrap: balance;
}
#main .hero--home .hero-title { max-width: 30ch; }
#main .hero--dane .hero-title { font-size: var(--r-step-h1-model); max-width: 30ch; }
#main .badges { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: var(--r-s-5); }
#main .badge { display: inline-flex; align-items: center; padding: 0.2rem 0.7rem; border: 1px solid var(--r-c-line-strong); border-radius: var(--r-radius-pill); }
#main .hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: var(--r-s-6); }
#main .strap { margin-top: var(--r-s-6); color: var(--r-c-text-muted); font-size: var(--r-step-lead); }
#main > .strap { margin-top: var(--r-s-7); }

/* the device: the sky chart (inline SVG, aria-hidden) above the almanac row; hues are the theme's roles */
#main .hero-device, #main .observatory { min-width: 0; }
#main .sky {
  position: relative; aspect-ratio: 1200 / 460; overflow: hidden; background: var(--r-c-ground);
  border: 1px solid var(--r-c-line); border-bottom: 0; border-radius: var(--r-radius-1) var(--r-radius-1) 0 0;
}
#main .sky-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
#main .sky-svg .ground { fill: var(--r-c-surface); }
#main .sky-svg .grid path { fill: none; stroke: var(--r-c-line); stroke-width: 1; }
#main .sky-svg :is(.alt, .az) { vector-effect: non-scaling-stroke; }
#main .sky-svg .field circle { fill: var(--r-c-text-muted); }
#main .sky-svg .horizon { fill: none; stroke: var(--r-c-line-strong); stroke-width: 1.6; }
/* the quieter cardinal marks: N the only letter, the rest ticks, all at the muted contrast */
#main .sky-svg .cardinal text { fill: var(--r-c-text-muted); font-family: var(--r-font-display); font-stretch: 125%; font-weight: 600; font-size: 22px; letter-spacing: 0.1em; }
#main .sky-svg .cardinal .tick { fill: none; stroke: var(--r-c-text-muted); stroke-width: 1.5; }
#main .sky-svg .object-ring { fill: none; stroke: var(--r-c-text); stroke-width: 1.5; }
#main .sky-svg .object-core { fill: var(--r-c-text); }
#main .sky-svg .leader { fill: none; stroke: var(--r-c-text); stroke-width: 1.2; }
#main .sky-svg .object-label { fill: var(--r-c-text); font-family: var(--r-font-display); font-stretch: 125%; font-weight: 700; font-size: 34px; letter-spacing: 0.16em; }
@media (max-width: 640px) {
  #main .sky { aspect-ratio: 4 / 3; }
  #main .sky-svg .object-label { font-size: 40px; }
  #main .sky-svg .cardinal text { font-size: 28px; }
}
#main .almanac {
  display: flex; flex-wrap: wrap; background: var(--r-c-surface); border: 1px solid var(--r-c-line-strong);
  border-radius: 0 0 var(--r-radius-1) var(--r-radius-1); font-family: var(--r-font-mono); font-size: 0.75rem;
}
#main .almanac li { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.75rem; padding: 0.4rem 1rem; border-right: 1px solid var(--r-c-line); }
#main .almanac li:last-child { border-right: 0; }
#main .almanac a { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--r-c-text); }
#main .alm-k { color: var(--r-c-text-muted); letter-spacing: 0.06em; text-transform: uppercase; }
#main .lamp-dot { display: inline-block; flex: none; width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--r-warning); }
#main .model-id-code { font-weight: 700; color: var(--r-c-text); }
@media (max-width: 640px) { #main .almanac li { flex: 1 1 45%; border-bottom: 1px solid var(--r-c-line); } }

/* the spec rows (Limits): one symbol per fact */
#main .spec { margin: 0; }
#main .spec-row { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding-block: 0.55rem; border-bottom: 1px solid var(--r-c-line); }
#main .spec-row:last-child { border-bottom: 0; }
#main .spec-row dt { display: inline-flex; align-items: center; gap: 0.6rem; color: var(--r-c-text-muted); }
#main .spec-row dd { text-align: right; font-family: var(--r-font-mono); font-size: 0.92em; }
#main .spec-row dt::before { content: ""; display: inline-block; flex: none; width: 0.7rem; height: 0.7rem; background: var(--r-c-text-muted); }
#main .spec--limits .spec-row:nth-child(1) dt::before { border-radius: 50%; }
#main .spec--limits .spec-row:nth-child(2) dt::before { clip-path: polygon(50% 0, 100% 100%, 0 100%); }
#main .spec--limits .spec-row:nth-child(3) dt::before { width: 0.62rem; height: 0.62rem; }
#main .spec--limits .spec-row:nth-child(4) dt::before { transform: rotate(45deg) scale(0.85); }
#main .spec-row--wide dt::before { width: 0.9rem; height: 0.2rem; }

/* ---- /dane: a sheet index for the contents ---- */
#main .contents { padding-block: var(--r-s-6) var(--r-s-4); }
#main .contents-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--r-c-line); border-left: 1px solid var(--r-c-line); }
@media (min-width: 760px) { #main .contents-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { #main .contents-list { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
#main .contents li { border-right: 1px solid var(--r-c-line); border-bottom: 1px solid var(--r-c-line); }
#main .contents a {
  display: flex; flex-direction: column; gap: 0.15rem; min-height: 4rem; padding: 0.6rem 0.8rem; color: var(--r-c-text);
  font-weight: 500; text-decoration: none; background: var(--r-c-ground);
}
#main .contents a:hover { background: var(--r-c-surface); color: var(--r-c-accent-strong); }
#main .contents-num { color: var(--r-c-text-muted); }
#main .contents a:hover .contents-num { color: var(--r-c-text-muted); }

/* ---- sections: panels on the sky, each under a hairline; expanded caps heads ---- */
#main .section { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--r-s-5); padding-block: var(--r-s-8) var(--r-s-4); border-top: 1px solid var(--r-c-line); }
@media (min-width: 1024px) { #main .section { grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: clamp(0.75rem, 1.6vw, 1.5rem); } }
#main .section-head { display: flex; flex-direction: column; gap: 0.35rem; }
#main .section-head h2 {
  font-family: var(--r-font-display); font-weight: 600; font-stretch: 125%; font-size: clamp(1.25rem, 1rem + 1vw, 1.875rem); line-height: 1.08;
  letter-spacing: 0.03em; text-transform: uppercase;
}
#main .section-num { order: -1; color: var(--r-c-text-muted); }
#main .section-body { min-width: 0; }
#main .section-body > p + p { margin-top: var(--r-s-4); }
#main .section-body > p, #main .section-body > .call-note { max-width: var(--r-measure); }
#main .section-link { margin-top: var(--r-s-4); }
#main .section-link a { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.75rem; font-weight: 700; }
#main .section-link a::after {
  content: ""; width: 0.42rem; height: 0.42rem; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: rotate(45deg);
}
#main .section--results, #main .section--price, #main .section--call, #main .section--limits, #main .section--log, #main .section--questions { scroll-margin-top: var(--r-s-5); }
#main :is(.trail, .price-pair, .snippet, .spec--limits, .faq) { background: var(--r-c-surface); border: 1px solid var(--r-c-line-strong); border-radius: var(--r-radius-1); }

/* results: the trail (a sentence row, or the release table; the table scrolls in its own box) */
#main .trail { overflow-x: auto; padding: var(--r-s-5); }
#main .trail table { width: 100%; border-collapse: collapse; font-size: var(--r-step-small); }
#main .trail th {
  padding: 0 0.75rem 0.5rem 0; color: var(--r-c-text-muted); font-size: var(--r-step-micro); font-weight: 700; letter-spacing: var(--r-tracking-caps);
  text-transform: uppercase; text-align: left; white-space: nowrap; border-bottom: 1px solid var(--r-c-text);
}
#main .trail td { padding: 0.65rem 0.75rem 0.65rem 0; border-bottom: 1px solid var(--r-c-line); vertical-align: baseline; }
#main .trail tr:last-child td { border-bottom: 0; }
#main .trail-row { font-family: var(--r-font-text); font-weight: 800; font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.5rem); line-height: 1.2; letter-spacing: -0.015em; }
#main .trail-label { display: block; margin-bottom: 0.4rem; color: var(--r-c-text-muted); }
#main .trail-cell { white-space: nowrap; }
#main .trail-value { font-variant-numeric: tabular-nums; }
#main .trail-source { margin-top: var(--r-s-4); font-size: var(--r-step-small); color: var(--r-c-text-muted); }

/* price */
#main .price-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
#main .price-cell { display: flex; flex-direction: column; gap: 0.5rem; min-width: 0; padding: var(--r-s-4) var(--r-s-5) var(--r-s-5); }
#main .price-cell + .price-cell { border-left: 1px solid var(--r-c-text); }
#main .price-cell dt { color: var(--r-c-text-muted); }
#main .price-cell dd { font-family: var(--r-font-text); font-weight: 800; font-size: var(--r-step-figure); line-height: 1; letter-spacing: -0.03em; }
#main .price-unit { margin-top: var(--r-s-4); font-family: var(--r-font-mono); font-size: var(--r-step-small); }
#main .price-notes { display: grid; gap: 0.4rem; margin-top: var(--r-s-3); max-width: var(--r-measure); }

/* call it */
#main .model-id { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.75rem; margin-top: var(--r-s-4); font-family: var(--r-font-mono); font-size: var(--r-step-small); }
#main .model-id > span { color: var(--r-c-text-muted); }
#main .snippets { display: grid; gap: var(--r-s-4); margin-top: var(--r-s-5); }
#main .snippet { min-width: 0; }
#main .snippet-title { padding: 0.6rem 1rem; border-bottom: 1px solid var(--r-c-line); color: var(--r-c-text-muted); }
#main .snippet-code {
  margin: 0; padding: 1rem 1rem 1.15rem; color: var(--r-c-text); font-family: var(--r-font-mono); font-size: 0.84rem; line-height: 1.7;
  white-space: pre-wrap; overflow-wrap: anywhere; tab-size: 2;
}
#main .snippet-code code { font-size: inherit; }
#main .tok-id { color: var(--r-c-accent-strong); font-weight: 700; }
#main .tok-h { color: var(--r-c-text); font-weight: 700; }
#main .call-note { margin-top: var(--r-s-5); max-width: var(--r-measure); }

/* limits: the legend, full size */
#main .spec--limits { padding: var(--r-s-2) var(--r-s-5); }
#main .spec--limits .spec-row { padding-block: 0.9rem; }
#main .spec--limits dt { color: var(--r-c-text); font-weight: 600; }
#main .spec--limits dd { font-size: 1rem; }
#main .spec-row--wide dd { text-align: left; }
@media (max-width: 600px) {
  #main .spec--limits .spec-row--wide { flex-direction: column; gap: 0.25rem; }
  #main .spec--limits .spec-row--wide dd { text-align: left; }
}
#main .num { font-variant-numeric: tabular-nums; }
#main .unit { color: var(--r-c-text-muted); }
#main .limits-note { margin-top: var(--r-s-4); max-width: var(--r-measure); color: var(--r-c-text-muted); }

/* the closing sections: the empty-list note and the questions */
#main .log-empty { color: var(--r-c-text-muted); }
#main .faq { padding: var(--r-s-5); }
#main .faq + .faq { margin-top: var(--r-s-4); }
#main .faq-q { font-family: var(--r-font-text); font-weight: 800; font-size: clamp(1.375rem, 1.15rem + 0.9vw, 1.875rem); line-height: 1.2; }
#main .faq-a { margin-top: var(--r-s-3); max-width: var(--r-measure); font-size: var(--r-step-lead); line-height: 1.5; }

/* the homepage product entry (Watch + Serve sign-up) */
#main .entry-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--r-s-4) var(--r-s-5); }
#main .entry-grid h3 { font-family: var(--r-font-text); font-weight: 800; font-size: var(--r-step-h3); line-height: 1.2; }
#main .entry-grid > h3 { padding-block: var(--r-s-3); border-bottom: 1px solid var(--r-c-line); }

/* ---- motion: opt-in only; every duration is a --r-dur-* (0ms under prefers-reduced-motion) ---- */
@media (prefers-reduced-motion: no-preference) {
  html.rs-site { scroll-behavior: smooth; }
  #main a, #main .btn, .rs-header .rs-nav-link, .rs-header .rs-nav-login > .shared-login-link, .rs-products-list a, .rs-btn, .rs-launch-bar a, .rs-footer .rs-footer-group a {
    transition: color var(--r-dur-fast) var(--r-ease-standard), background-color var(--r-dur-fast) var(--r-ease-standard),
      border-color var(--r-dur-fast) var(--r-ease-standard), text-decoration-color var(--r-dur-fast) var(--r-ease-standard);
  }
  .rs-products-menu[open] > .rs-products-list { animation: r-menu-in var(--r-dur-menu) var(--r-ease-entrance); }
  .rs-nav-phone[open] > nav { animation: r-menu-in var(--r-dur-menu) var(--r-ease-entrance); }
  /* the leader draws to the label, then the label fades in (their start is hidden here, and only here: no-preference) */
  #main .sky-svg .leader { stroke-dasharray: 1; stroke-dashoffset: 1; animation: r-lead-in calc(var(--r-dur-lead) + var(--r-dur-fast) * 2.5) var(--r-ease-entrance) calc(var(--r-dur-menu) * 1.25) forwards; } /* 1200ms after 200ms */
  #main .sky-svg .object-label { opacity: 0; animation: r-label-in var(--r-dur-fade) var(--r-ease-standard) calc(var(--r-dur-lead) + var(--r-dur-menu) * 1.25) forwards; } /* 500ms after 1100ms */
  @keyframes r-menu-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
  @keyframes r-lead-in { to { stroke-dashoffset: 0; } }
  @keyframes r-label-in { to { opacity: 1; } }
}

/* ---- the sky chart rotates into place once on arrival; the blocks reveal on scroll; opt-in only ----
   Every animation and transition below sits inside prefers-reduced-motion: no-preference, so with reduced motion on this
   is the static page. Anything kept back is kept only under the motion class on #main, which the page sets before first paint (an inline
   line right after the #main open tag) when the reader allows motion: it holds the hero device until /theme/motion.js starts
   its entrance; the blocks hold only once the script has shown the ones in view (.motion-ready); if the script never runs the
   hero is shown when the document is parsed. Kept back means a start angle, opacity or an undrawn stroke only. */

/* interaction (every mode): focus and open states on the Products menu */
.rs-products-menu > summary:focus-visible { text-decoration: underline; text-decoration-color: var(--r-c-accent-strong); text-decoration-thickness: 2px; text-underline-offset: 0.4em; }
.rs-products-menu[open] > summary { text-decoration: underline; text-decoration-color: var(--r-c-accent-strong); text-decoration-thickness: 2px; text-underline-offset: 0.4em; }
.rs-products-list a:focus-visible { background: var(--r-c-surface); color: var(--r-c-accent-strong); outline-offset: -4px; }
.rs-products-list a:focus-visible::before { background: var(--r-c-accent-strong); }
/* the menu ring sits inside the item: the older shell sheets set their focus offset with !important, so this offset needs it too */
.rs-header .rs-products-list a:focus-visible { outline-offset: -4px !important; }

@media (prefers-reduced-motion: no-preference) {
  /* the star wheel (the azimuth lines, the faint points and the object) rotates into place once about the zenith (600, -260 in
     the chart's units) under the fixed horizon and marks; the ring closes on the object, then N's own leader draws and the label
     fades in. The wheel and the ring fill backwards, so once they end the device is N's static render; the leader and the label
     keep N's own forwards fill (their static start is hidden in the rules above, no-preference only). */
  /* until the hero's sky comes into view the device holds its first frame (the wheel at its start angle, the ring hidden, the
     leader and the label waiting), so the entrance never flashes from settled to unsettled */
  #main.motion-on .hero:not(.is-in) .sky-svg .grid .az, #main.motion-on .hero:not(.is-in) .sky-svg .field, #main.motion-on .hero:not(.is-in) .sky-svg .object { transform-box: view-box; transform-origin: 600px -260px; transform: rotate(-12deg); }
  #main.motion-on .hero:not(.is-in) .sky-svg .object-ring { opacity: 0; }
  #main.motion-on .hero:not(.is-in) .sky-svg .leader, #main.motion-on .hero:not(.is-in) .sky-svg .object-label { animation: none; }
  #main.motion-on .hero.is-in .sky-svg .grid .az, #main.motion-on .hero.is-in .sky-svg .field, #main.motion-on .hero.is-in .sky-svg .object { transform-box: view-box; transform-origin: 600px -260px; animation: r-wheel var(--r-dur-hero) cubic-bezier(0.3, 0.6, 0.25, 1) backwards; } /* 2400ms */
  #main.motion-on .hero.is-in .sky-svg .object-ring { transform-box: fill-box; transform-origin: center; animation: r-acquire var(--r-dur-acquire) var(--r-ease-entrance) calc(var(--r-dur-hero) - var(--r-dur-acquire)) backwards; } /* 700ms after 1700ms */
  #main.motion-on .hero.is-in .sky-svg .leader { animation: r-lead-in var(--r-dur-lead) var(--r-ease-entrance) calc(var(--r-dur-hero) - var(--r-dur-menu) * 1.25) forwards; } /* 900ms after 2200ms */
  #main.motion-on .hero.is-in .sky-svg .object-label { animation: r-label-in var(--r-dur-fade) var(--r-ease-standard) calc(var(--r-dur-hero) + var(--r-dur-fade)) forwards; } /* 500ms after 2900ms */
  /* blocks fade in as they scroll into view (opacity only; kept back only once the script has shown the ones in view) */
  #main.motion-on > .section { transition: opacity var(--r-dur-reveal) var(--r-ease-entrance); } /* 650ms */
  #main.motion-on.motion-ready > .section:not(.is-in) { opacity: 0; }
  /* interaction easing */
  .rs-products-menu > summary { transition: background-color var(--r-dur-fast) var(--r-ease-standard), color var(--r-dur-fast) var(--r-ease-standard), text-decoration-color var(--r-dur-fast) var(--r-ease-standard); }
  .rs-products-list a::before { transition: background-color var(--r-dur-fast) var(--r-ease-standard); }
  @keyframes r-wheel { from { transform: rotate(-12deg); } to { transform: none; } }
  @keyframes r-acquire { from { opacity: 0; transform: scale(2.6); } to { opacity: 1; transform: none; } }
}
@media print { #main.motion-on > .section { opacity: 1 !important; } }
/* print the device settled */
@media print and (prefers-reduced-motion: no-preference) {
  #main.motion-on .hero .sky-svg * { animation: none !important; }
  #main.motion-on .hero .sky-svg .leader { stroke-dashoffset: 0; }
  #main.motion-on .hero .sky-svg .object-label { opacity: 1; }
}

/* ---- tap targets on narrow screens: the shell links and the skip link at the touch size ---- */
@media (max-width: 760px) {
  .rs-launch-bar > p { padding-block: 0.1rem; }
  .rs-launch-bar a { display: inline-flex; align-items: center; min-height: 2.75rem; }
  .rs-footer .rs-footer-group a { min-height: 2.75rem; min-width: 2.75rem; }
  #main .section-link a, .rs-nav-dane-sections a { min-width: 2.75rem; justify-content: center; }
  .rs-skip-link { min-height: 2.75rem; }
  .rs-header .rs-nav-link { min-width: 2.75rem; }
}