/* ==========================================================================
   Rosetta Technologies — site stylesheet
   Built on the Engitech template's design language (eyebrow + heading pattern,
   icon boxes, dark technology band, counter strip, angled CTA band), rebuilt
   against the Rosetta brand standards of Sept 14 2026.

   Replaces: bootstrap.min.css, style.css, animate.css, owl.carousel.min.css,
   owl.theme.css, magnific-popup.css, flaticon.css, font-awesome.min.css.
   That consolidation is the "six overlapping libraries / 2.7s first paint"
   finding from the audit.

   Contents
     01  Tokens
     02  Reset and base
     03  Typography
     04  Layout primitives
     05  Buttons and links
     06  Header and navigation
     07  Hero
     08  Proof strip
     09  Icon boxes and pillars
     10  Differentiator band and chart
     11  Segment router
     12  Product cards
     13  Answer block (MICR education)
     14  Category guide grid
     15  Guarantee band
     16  Footer
     17  Utilities
     18  Motion and print
   ========================================================================== */

/* --------------------------------------------------------------------------
   01  Tokens
   -------------------------------------------------------------------------- */

/* Self-hosted fonts (build 43). Variable weight files from Fontsource,
   SIL Open Font License. Latin is the only file most pages ever load;
   latin-ext downloads only when a page uses a character from it. */
@font-face { font-family: 'Roboto Slab'; font-style: normal; font-display: swap; font-weight: 100 900; src: url('../fonts/roboto-slab-latin-ext-wght-normal.woff2') format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Roboto Slab'; font-style: normal; font-display: swap; font-weight: 100 900; src: url('../fonts/roboto-slab-latin-wght-normal.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-display: swap; font-weight: 100 700; src: url('../fonts/ibm-plex-sans-latin-ext-wght-normal.woff2') format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-display: swap; font-weight: 100 700; src: url('../fonts/ibm-plex-sans-latin-wght-normal.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'IBM Plex Sans'; font-style: italic; font-display: swap; font-weight: 100 700; src: url('../fonts/ibm-plex-sans-latin-ext-wght-italic.woff2') format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'IBM Plex Sans'; font-style: italic; font-display: swap; font-weight: 100 700; src: url('../fonts/ibm-plex-sans-latin-wght-italic.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

:root {
  /* Primary palette */
  --rt-blue:    #004A91;  /* logo and links only, never the default CTA */
  --rt-navy:    #001B35;  /* all body copy and headlines, instead of true black */
  --rt-black:   #000000;  /* rare, technical/high-contrast use only */
  --rt-grey:    #D2DAE1;
  /* Brand grey. It measures 4.3:1 on white, so it is a graphic colour only:
     bars, rules, fills. Small text that used to take it now takes
     --rt-ink-faint, which is the same grey darkened until it passes AA. */
  --rt-silver:  #6B7C8C;
  --rt-white:   #FFFFFF;

  /* Accents: tint / base / shade */
  --rt-ember-tint:  #F9C08A;
  --rt-ember:       #ED7D22;
  /* Darkened from #B85A0F. White text on the old value measured 4.34:1 against
     the subtle ground and 4.66:1 on white, which puts the eyebrow labels under
     the 4.5:1 AA threshold at 13px. This value is 5.05:1 and 5.42:1. */
  --rt-ember-shade: #A85209;

  --rt-purple-tint:  #C6A9DC;
  --rt-purple:       #7A4CA0;
  --rt-purple-shade: #532F70;

  --rt-teal-tint:  #99DAD4;
  --rt-teal:       #0E8C82;
  --rt-teal-shade: #0A655E;

  --rt-gold-tint:  #FBE29B;
  --rt-gold:       #F2B705;
  --rt-gold-shade: #B88604;

  /* Semantic */
  --rt-success: #1E8E5A;
  --rt-warning: #F2B705;
  --rt-error:   #B3261E;
  --rt-info:    #0E8C82;

  /* Derived surfaces */
  --rt-surface:        #FFFFFF;
  --rt-surface-subtle: #F5F7F9;
  --rt-surface-grey:   #D2DAE1;
  --rt-ink:            #001B35;
  --rt-ink-muted:      #4A5C6E;
  /* Darkened from #6B7C8C, which measured 4.3:1 on white and 4.0:1 on the
     subtle ground: under AA at every size it is used at. Captions, figure
     notes and spec notes are all set in it, which made it the single largest
     source of failing text on the site. This value is 5.24:1 and 4.88:1. */
  --rt-ink-faint:      #5E6E7E;
  --rt-border:         #DCE3E9;
  --rt-border-strong:  #BFCAD4;

  /* Approved gradients */
  --rt-gradient-hero:  linear-gradient(118deg, #ED7D22 0%, #A0509E 52%, #7A4CA0 100%);
  --rt-gradient-deep:  linear-gradient(140deg, #004A91 0%, #001B35 100%);
  --rt-gradient-tech:  linear-gradient(140deg, #0E8C82 0%, #004A91 100%);

  /* Type */
  --rt-font-display: "Roboto Slab", "Georgia", "Times New Roman", serif;
  --rt-font-body:    "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, sans-serif;

  --rt-fs-eyebrow: 0.8125rem;
  --rt-fs-body:    1.0625rem;
  --rt-fs-lead:    1.1875rem;
  --rt-fs-h4:      clamp(1.125rem, 0.4vw + 1rem, 1.375rem);
  --rt-fs-h3:      clamp(1.375rem, 0.8vw + 1.1rem, 1.75rem);
  --rt-fs-h2:      clamp(1.75rem, 2vw + 1.1rem, 2.75rem);
  --rt-fs-h1:      clamp(2rem, 2.6vw + 1.05rem, 3.125rem);
  --rt-fs-stat:    clamp(2.5rem, 4vw + 1rem, 4.25rem);

  /* Space */
  --rt-gutter:     clamp(1.25rem, 4vw, 2.5rem);
  --rt-container:  1220px;
  --rt-section-y:  clamp(3.5rem, 7vw, 6.5rem);

  /* Shape */
  --rt-radius:    6px;
  --rt-radius-lg: 12px;
  --rt-shadow:      0 2px 6px rgba(0, 27, 53, 0.06), 0 12px 28px rgba(0, 27, 53, 0.07);
  --rt-shadow-lift: 0 4px 10px rgba(0, 27, 53, 0.08), 0 22px 46px rgba(0, 27, 53, 0.12);
}

/* --------------------------------------------------------------------------
   02  Reset and base
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--rt-font-body);
  font-size: var(--rt-fs-body);
  line-height: 1.65;
  color: var(--rt-ink);
  background: var(--rt-surface);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { max-width: 100%; height: auto; display: block; }
[hidden] { display: none !important; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  background: var(--rt-navy);
  color: var(--rt-white);
  padding: 0.75rem 1.25rem;
  font-weight: 600;
}
.skip-link:focus { left: 0; }

:focus-visible {
  outline: 3px solid var(--rt-ember);
  outline-offset: 2px;
  border-radius: 2px;
}

/* --------------------------------------------------------------------------
   03  Typography
   -------------------------------------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--rt-font-display);
  color: var(--rt-navy);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin: 0 0 0.6em;
  text-wrap: balance;
}

h1 { font-size: var(--rt-fs-h1); font-weight: 800; }
h2 { font-size: var(--rt-fs-h2); }
h3 { font-size: var(--rt-fs-h3); }
h4 { font-size: var(--rt-fs-h4); }

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

.lead {
  font-size: var(--rt-fs-lead);
  line-height: 1.6;
  color: var(--rt-ink-muted);
}

strong, b { font-weight: 600; }

/* The template's "// eyebrow" pattern, kept as the recurring section device. */
.ot-eyebrow {
  display: block;
  font-family: var(--rt-font-body);
  font-size: var(--rt-fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rt-ember-shade);
  margin-bottom: 0.85rem;
}
.ot-eyebrow::before { content: "// "; color: var(--rt-ember); }

.ot-heading { margin-bottom: 1.75rem; }

/* The glyph above a page's eyebrow. Small, ember, and set on its own line so it
   reads as a mark on the page rather than as a bullet on the label. */
.hero-glyph { margin-bottom: 0.9rem; line-height: 0; }
.hero-glyph .hg { color: var(--rt-ember); }
.ot-heading .main-heading { margin-bottom: 0; }
.ot-heading + .lead,
.ot-heading + p { margin-top: 1rem; }

.on-dark,
.on-dark h1, .on-dark h2, .on-dark h3, .on-dark h4 { color: var(--rt-white); }
.on-dark .lead,
.on-dark p { color: rgba(255, 255, 255, 0.86); }
.on-dark .ot-eyebrow { color: var(--rt-ember-tint); }
.on-dark .ot-eyebrow::before { color: var(--rt-ember-tint); }

/* --------------------------------------------------------------------------
   04  Layout primitives
   -------------------------------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--rt-container);
  margin-inline: auto;
  padding-inline: var(--rt-gutter);
}

.section { padding-block: var(--rt-section-y); }
.section-tight { padding-block: clamp(2.5rem, 5vw, 4rem); }
.section-subtle { background: var(--rt-surface-subtle); }
/* The header's main band, below the topbar. Carries the border that
   separates the header from the page. */
.main-header { border-bottom: 1px solid var(--rt-border); background: var(--rt-white); }

.grid { display: grid; gap: clamp(1.25rem, 2.5vw, 2rem); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* A set whose count does not divide evenly into the column count. A grid leaves
   a hole in the last row, which reads as a missing item rather than as the end
   of the list. Flex with centered wrapping keeps the set looking complete. */
.grid-center {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(1.25rem, 2.5vw, 2rem);
}
.grid-center > * { flex: 1 1 17rem; max-width: 23rem; }

.split {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
}
.split-wide-left { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
.split-top { align-items: start; }

/* A hand-authored drawing is a direct child of a split on four pages. Half a
   split is 536px, and these are drawn on a 720-unit canvas, so the whole
   drawing was rendering at 0.74 scale: a 13-unit label came out at 9.7 CSS
   pixels, which is below the size at which anybody reads a word rather than
   recognising its shape. The drawing takes the full row instead, where the
   same label renders at 20px. Text in a picture has to survive the layout the
   picture is put in, and a two-column split is not a layout a detailed
   diagram survives. */
.split > .diagram-figure { grid-column: 1 / -1; }

/* Scene photograph in the right column of a page hero (build 39).
   Ten heroes used to carry a diagram here, and the rule above pushed every one
   of them onto its own row, leaving the column beside the headline empty. The
   hero now holds a photograph and the drawings sit in the section below it.
   One frame for every scene regardless of the source crop, so a wide 1600x840
   photograph and a 720x560 one line up the same way beside the headline. */
.hero-scene {
  margin: 0;
  position: relative;
  aspect-ratio: 9 / 7;
  border-radius: var(--rt-radius-lg);
  overflow: hidden;
  background: linear-gradient(135deg, #0b2745, #16395f);
  box-shadow: 0 30px 60px -20px rgba(0, 27, 53, 0.45);
}
.hero-scene picture { display: block; width: 100%; height: 100%; }
.hero-scene img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.hero-scene::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  pointer-events: none;
}
@media (max-width: 980px) {
  .hero-scene { aspect-ratio: 16 / 10; }
}

@media (max-width: 980px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split, .split-wide-left { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 620px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0, 1fr); }
}

.section-head {
  max-width: 44rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.section-head-center { margin-inline: auto; text-align: center; }
.section-head-center .ot-eyebrow { text-align: center; }

/* --------------------------------------------------------------------------
   05  Buttons and links
   -------------------------------------------------------------------------- */

a { color: var(--rt-blue); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--rt-ember-shade); }
.on-dark a { color: var(--rt-ember-tint); }

.octf-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--rt-font-body);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 0.85rem 1.6rem;
  border: 2px solid transparent;
  border-radius: var(--rt-radius);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease,
              border-color 0.18s ease, transform 0.18s ease;
}
.octf-btn:hover { transform: translateY(-2px); }
.octf-btn-lg { padding: 1.05rem 2rem; font-size: 1rem; }

/* The primary button.
   -------------------------------------------------------------------------
   White on ember base measured 2.78:1, which is not a near miss: it is well
   under the 4.5:1 threshold and it was on every page. Ember base stays the
   accent for rules, marks and small non-text ornament, where contrast rules do
   not apply. A button carries text, so it takes the shade. */
.octf-btn-primary {
  background: var(--rt-ember-shade);
  color: var(--rt-white);
  border-color: var(--rt-ember-shade);
}
.octf-btn-primary:hover {
  background: #8F450B;
  border-color: #8F450B;
  color: var(--rt-white);
}

.octf-btn-secondary {
  background: transparent;
  color: var(--rt-navy);
  border-color: var(--rt-border-strong);
}
.octf-btn-secondary:hover {
  background: var(--rt-navy);
  border-color: var(--rt-navy);
  color: var(--rt-white);
}

.octf-btn-ghost {
  background: rgba(255, 255, 255, 0.1);
  color: var(--rt-white);
  border-color: rgba(255, 255, 255, 0.55);
}
.octf-btn-ghost:hover {
  background: var(--rt-white);
  color: var(--rt-navy);
  border-color: var(--rt-white);
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  align-items: center;
}

/* Inline text link with a trailing chevron, used to enter deeper pages. */
.link-more {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--rt-blue);
  text-decoration: none;
}
.link-more::after {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-right: 2px solid currentColor;
  border-top: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.18s ease;
}
.link-more:hover { color: var(--rt-ember-shade); }
.link-more:hover::after { transform: rotate(45deg) translate(2px, -2px); }

/* --------------------------------------------------------------------------
   06  Header and navigation
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--rt-white);
  box-shadow: 0 1px 0 var(--rt-border);
}

.header-topbar {
  background: var(--rt-navy);
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.8125rem;
}
.topbar-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 40px;
  flex-wrap: wrap;
}
.topbar-info {
  display: flex;
  gap: 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.topbar-info li { display: flex; align-items: center; gap: 0.4rem; white-space: nowrap; }
/* The phone number and the address in the top bar are the two things a person
   on a phone taps first. At the bar's own line height they were 21px tall. */
.topbar-info a {
  color: var(--rt-white);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}
.topbar-info a:hover { color: var(--rt-ember-tint); }
.topbar-info .hg { color: var(--rt-ember-tint); }

.header-row {
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 1.5vw, 1.5rem);
  min-height: 78px;
}
.site-logo { flex: 0 1 auto; min-width: 0; }
.site-logo img { width: clamp(168px, 16vw, 224px); height: auto; }

.main-nav { margin-left: auto; min-width: 0; }
.nav-list {
  display: flex;
  align-items: center;
  gap: 0.1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-item { position: relative; }
.nav-item > a {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.6rem 0.55rem;
  font-size: 0.875rem;
  font-weight: 600;
  white-space: nowrap;
  color: var(--rt-navy);
  text-decoration: none;
  border-radius: var(--rt-radius);
}
.nav-item > a:hover,
.nav-item:focus-within > a { color: var(--rt-ember-shade); background: var(--rt-surface-subtle); }

.nav-caret {
  width: 0.4rem;
  height: 0.4rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  opacity: 0.65;
}

.submenu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 20rem;
  background: var(--rt-white);
  border: 1px solid var(--rt-border);
  border-top: 3px solid var(--rt-ember);
  border-radius: 0 0 var(--rt-radius) var(--rt-radius);
  box-shadow: var(--rt-shadow);
  list-style: none;
  margin: 0;
  padding: 0.5rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;
}
/* The last four menus sit near the right edge. A left-anchored panel there
   pushes the document wider than the viewport even while hidden, because
   visibility:hidden still occupies layout, and the body's overflow-x clips it
   when it opens. Only the last two used to be anchored, so the two-column
   Support panel ran 85px past a 1440px window and Solutions 167px past a
   1100px one, each losing the end of its second column (build 40). */
.nav-item:nth-last-child(-n+4) > .submenu { left: auto; right: 0; }

.nav-item:hover > .submenu,
.nav-item:focus-within > .submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.submenu a {
  display: block;
  padding: 0.6rem 0.75rem;
  border-radius: var(--rt-radius);
  text-decoration: none;
  color: var(--rt-navy);
}
.submenu a:hover { background: var(--rt-surface-subtle); color: var(--rt-ember-shade); }

/* A long dropdown reads better as two columns than as a list that runs past
   the fold. Applied by count rather than by menu name, so it keeps working
   when items move between menus. */
/* Desktop only. This selector outranks the mobile rule that hides closed
   submenus, so applied at every width it held every menu with seven or more
   items open in the phone menu (Solutions, Support, Resources), pushing About
   out of reach. */
@media (min-width: 981px) {
  .submenu:has(> li:nth-child(7)) {
    display: grid;
    grid-template-columns: repeat(2, minmax(14rem, 1fr));
    width: max-content;
    max-width: min(42rem, calc(100vw - 3rem));
  }
}
@media (min-width: 981px) and (max-width: 1000px) {
  .submenu:has(> li:nth-child(7)) { grid-template-columns: minmax(0, 1fr); width: auto; }
}
.submenu-label { display: block; font-size: 0.9375rem; font-weight: 600; }
.submenu-desc { display: block; font-size: 0.8125rem; color: var(--rt-ink-faint); }

.header-cta { flex: 0 0 auto; margin-left: 0.5rem; }
.header-cta .octf-btn { padding: 0.75rem 1.15rem; font-size: 0.875rem; white-space: nowrap; }
.submenu-toggle { display: none; }

.nav-toggle {
  display: none;
  margin-left: auto;
  width: 46px;
  height: 46px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--rt-border-strong);
  border-radius: var(--rt-radius);
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.nav-toggle-bar {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--rt-navy);
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 1240px) {
  .header-cta { display: none; }
}

@media (max-width: 980px) {
  .topbar-hide-sm { display: none; }
  .nav-toggle { display: flex; }

  .main-nav {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background: var(--rt-white);
    border-top: 1px solid var(--rt-border);
    box-shadow: var(--rt-shadow);
    max-height: calc(100vh - 118px);
    overflow-y: auto;
    display: none;
    margin-left: 0;
  }
  .main-nav.is-open { display: block; }

  .nav-list { flex-direction: column; align-items: stretch; gap: 0; padding: 0.5rem; }
  .nav-item { border-bottom: 1px solid var(--rt-border); }
  .nav-item:last-child { border-bottom: 0; }
  .nav-item > a { padding: 0.95rem 0.75rem; font-size: 1rem; }
  .nav-caret { display: none; }

  .submenu-toggle {
    display: block;
    position: absolute;
    top: 0.4rem;
    right: 0.25rem;
    width: 44px;
    height: 44px;
    background: transparent;
    border: 0;
    cursor: pointer;
  }
  .submenu-toggle::before,
  .submenu-toggle::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    background: var(--rt-navy);
    transform: translate(-50%, -50%);
    transition: opacity 0.18s ease;
  }
  .submenu-toggle::before { width: 13px; height: 2px; }
  .submenu-toggle::after  { width: 2px; height: 13px; }
  .submenu-toggle[aria-expanded="true"]::after { opacity: 0; }

  .submenu {
    position: static;
    min-width: 0;
    opacity: 1;
    visibility: visible;
    transform: none;
    display: none;
    border: 0;
    border-left: 3px solid var(--rt-ember);
    border-radius: 0;
    box-shadow: none;
    background: var(--rt-surface-subtle);
    margin: 0 0 0.5rem 0.75rem;
  }
  .submenu.is-open { display: block; }
  .nav-item:hover > .submenu { opacity: 1; visibility: visible; }
  .nav-item:hover > .submenu:not(.is-open) { display: none; }
}

/* --------------------------------------------------------------------------
   07  Hero
   -------------------------------------------------------------------------- */

/* The approved Ember Orange to Signal Purple gradient carries the hero instead
   of product photography. The audit flagged hero text as unreadable against
   photos; text now sits on a controlled gradient and the printer is a cut-out
   layered on top of it. */
.hero {
  position: relative;
  background: var(--rt-gradient-hero);
  color: var(--rt-white);
  padding-block: clamp(3rem, 6vw, 5.5rem);
  overflow: hidden;
  isolation: isolate;
}
.hero::after {
  /* Hieroglyph column watermark, the recurring brand device at low contrast. */
  content: "";
  position: absolute;
  inset: 0 0 0 auto;
  width: min(42%, 520px);
  background: url("../img/patterns/hieroglyph-column.svg") right center / contain no-repeat;
  opacity: 0.14;
  pointer-events: none;
  z-index: -1;
}

.hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
@media (max-width: 980px) {
  .hero-inner { grid-template-columns: minmax(0, 1fr); }
}

.hero h1 { color: var(--rt-white); margin-bottom: 1rem; }
.hero .hero-sub {
  font-size: clamp(1.0625rem, 0.6vw + 1rem, 1.25rem);
  color: rgba(255, 255, 255, 0.92);
  max-width: 36rem;
  margin-bottom: 1.75rem;
}
.hero .ot-eyebrow,
.hero .ot-eyebrow::before { color: rgba(255, 255, 255, 0.85); }

.hero-proof {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  list-style: none;
  margin: 1.75rem 0 0;
  padding: 0;
}
.hero-proof li {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  background: rgba(0, 27, 53, 0.24);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 100px;
  padding: 0.4rem 0.85rem;
}

.hero-figure { position: relative; }
.hero-figure img {
  width: 100%;
  border-radius: var(--rt-radius-lg);
  filter: drop-shadow(0 26px 44px rgba(0, 27, 53, 0.34));
}

/* Floating stat card over the hero image. */
/* The named machine in the hero.
   Top right of the figure, opposite the 0.1% stat card at bottom left, so the
   two do not compete. Navy on white at the same lift as the stat card, because
   they are the same kind of object: a small claim attached to the picture. */
.hero-machine {
  position: absolute;
  top: -0.9rem;
  right: -1.1rem;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  max-width: 15rem;
  padding: 0.7rem 0.95rem;
  background: var(--rt-navy);
  color: #fff;
  border-radius: var(--rt-radius-lg);
  box-shadow: var(--rt-shadow-lift);
  text-decoration: none;
  border-left: 4px solid var(--rt-ember);
}
.hero-machine:hover,
.hero-machine:focus-visible { background: #002a52; }
.hero-machine-glyph { color: var(--rt-ember-tint); flex: none; margin-top: 0.15rem; }
.hero-machine-glyph.hg { color: var(--rt-ember-tint); }
.hero-machine-text { display: block; min-width: 0; }
.hero-machine strong {
  display: block;
  font-family: var(--rt-font-display);
  font-size: 1.0625rem;
  line-height: 1.2;
}
.hero-machine-desc,
.hero-machine-spec { display: block; font-size: 0.75rem; line-height: 1.35; }
.hero-machine-desc { color: var(--rt-grey); margin-top: 0.15rem; }
.hero-machine-spec { color: var(--rt-ember-tint); margin-top: 0.2rem; }
@media (max-width: 980px) {
  /* Static on a phone, above the stat card, so neither overlaps the image. */
  .hero-machine { position: static; max-width: none; margin-top: 1.25rem; }
}

.hero-stat {
  position: absolute;
  left: -1.75rem;
  bottom: -1.75rem;
  background: var(--rt-white);
  color: var(--rt-navy);
  border-radius: var(--rt-radius-lg);
  box-shadow: var(--rt-shadow-lift);
  padding: 1.15rem 1.35rem;
  max-width: 17rem;
  border-left: 5px solid var(--rt-ember);
}
.hero-stat .hero-stat-value {
  font-family: var(--rt-font-display);
  font-size: 2.25rem;
  font-weight: 800;
  line-height: 1;
  color: var(--rt-ember-shade);
}
.hero-stat p { font-size: 0.875rem; color: var(--rt-ink-muted); margin: 0.35rem 0 0; }
@media (max-width: 980px) {
  .hero-stat { position: static; margin-top: 1.25rem; max-width: none; }
}

/* --------------------------------------------------------------------------
   08  Proof strip
   -------------------------------------------------------------------------- */

.proof-strip {
  background: var(--rt-navy);
  color: var(--rt-white);
  padding-block: clamp(2rem, 4vw, 3rem);
}
.proof-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.25rem, 3vw, 2.5rem);
}
@media (max-width: 860px) { .proof-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 460px) { .proof-grid { grid-template-columns: minmax(0, 1fr); } }

.proof-item { border-left: 3px solid var(--rt-ember); padding-left: 1.1rem; }
.proof-value {
  font-family: var(--rt-font-display);
  font-size: var(--rt-fs-stat);
  font-weight: 800;
  line-height: 1;
  color: var(--rt-white);
  display: block;
}
/* A phrase-shaped stat ("2% to 4%") gets a smaller step so it holds one line
   and its label still baselines with the numeric stats beside it. */
.proof-value-phrase { font-size: clamp(1.75rem, 2.4vw + 0.9rem, 2.75rem); white-space: nowrap; }

.proof-label {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.9375rem;
  color: rgba(255, 255, 255, 0.82);
}
.proof-source {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.55);
}

/* --------------------------------------------------------------------------
   09  Icon boxes and pillars
   -------------------------------------------------------------------------- */

.hg { display: inline-block; vertical-align: middle; color: currentColor; }
.hg-xs { width: 16px; height: 16px; }
.hg-accent { color: var(--rt-ember); }

.iconbox {
  position: relative;
  background: var(--rt-white);
  border: 1px solid var(--rt-border);
  border-radius: var(--rt-radius-lg);
  /* Eased in from 2rem. The card is a reading surface, and every pixel of
     inner padding comes straight off the line length of the text in it. */
  padding: clamp(1.35rem, 2.2vw, 1.75rem);
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.iconbox:hover {
  transform: translateY(-4px);
  box-shadow: var(--rt-shadow-lift);
  border-color: var(--rt-ember-tint);
}
.iconbox::before {
  content: "";
  position: absolute;
  top: -1px;
  left: clamp(1.35rem, 2.2vw, 1.75rem);
  width: 48px;
  height: 4px;
  background: var(--rt-ember);
  border-radius: 0 0 4px 4px;
}
.iconbox .icon-main {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  background: var(--rt-surface-subtle);
  border-radius: var(--rt-radius);
  color: var(--rt-ember-shade);
  margin-bottom: 1.25rem;
}
/* An icon box titles itself at h2 on interior pages (where the page H1 is the
   product name) and at h3 on the homepage. Both should read the same size. */
.iconbox h2,
.iconbox h3 { font-size: var(--rt-fs-h3); margin-bottom: 0.6rem; }
.iconbox p { color: var(--rt-ink-muted); font-size: 1rem; }
.iconbox .link-more { margin-top: auto; padding-top: 1.1rem; align-self: flex-start; }

.iconbox-list {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  font-size: 0.9375rem;
  color: var(--rt-ink-muted);
}
.iconbox-list li {
  position: relative;
  padding-left: 1.4rem;
  margin-bottom: 0.4rem;
}
.iconbox-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 0.45rem;
  height: 0.45rem;
  background: var(--rt-teal);
  transform: rotate(45deg);
}

/* --------------------------------------------------------------------------
   10  Differentiator band and chart
   -------------------------------------------------------------------------- */

.band-deep {
  background: var(--rt-gradient-deep);
  color: var(--rt-white);
  padding-block: var(--rt-section-y);
}

.chart-card {
  background: var(--rt-white);
  border-radius: var(--rt-radius-lg);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  color: var(--rt-navy);
  box-shadow: var(--rt-shadow-lift);
}
/* The chart sits inside an .on-dark block. Reassert light-surface ink so the
   dark-band rules do not bleach the card's own type. */
.on-dark .chart-card,
.on-dark .chart-card h1,
.on-dark .chart-card h2,
.on-dark .chart-card h3,
.on-dark .chart-card h4 { color: var(--rt-navy); }
.on-dark .chart-card p { color: var(--rt-ink-muted); }
.chart-card h3 { font-size: 1.125rem; margin-bottom: 0.35rem; }
.chart-caption { font-size: 0.8125rem; color: var(--rt-ink-faint); margin: 1rem 0 0; }
.on-dark .chart-caption,
.on-dark .chart-card .bar-note { color: var(--rt-ink-faint); }

/* Two-bar comparison. Colors validated for CVD separation and contrast:
   #B85A0F (Rosetta) vs #6B7C8C (industry reference). Both bars are directly
   labeled, so identity never rests on color alone. */
.bar-compare { margin-top: 1.5rem; display: grid; gap: 1.5rem; }
.bar-row { display: grid; gap: 0.5rem; }
.bar-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.875rem;
}
.bar-name { font-weight: 600; color: var(--rt-navy); display: flex; align-items: center; gap: 0.5rem; }
.bar-swatch { width: 12px; height: 12px; border-radius: 3px; flex: 0 0 auto; }
.bar-value { font-family: var(--rt-font-display); font-weight: 700; font-size: 1.125rem; }
/* 4px rounded data-end anchored to the baseline; 2px surface gap via the
   track inset so adjacent fills never touch. */
.bar-track {
  background: var(--rt-surface-subtle);
  border: 1px solid var(--rt-border);
  border-radius: 5px;
  height: 26px;
  overflow: hidden;
}
.bar-fill {
  height: 100%;
  min-width: 4px;
  border-radius: 0 4px 4px 0;
}
.bar-fill-rosetta  { background: #B85A0F; }
.bar-fill-industry { background: #6B7C8C; }
.bar-note { font-size: 0.8125rem; color: var(--rt-ink-faint); margin: 0; }

/* Reveal animation is opt-in: JS adds .chart-animate, so if the script never
   runs, never fires, or errors, the bars still render at their true width. */
.chart-animate .bar-fill { width: 0 !important; }
.chart-animate .bar-fill { transition: width 0.9s cubic-bezier(0.22, 1, 0.36, 1); }

.diff-list { list-style: none; margin: 1.75rem 0 0; padding: 0; display: grid; gap: 1.1rem; }
.diff-list li { display: flex; gap: 1rem; align-items: flex-start; }
.diff-list .hg {
  color: var(--rt-ember-tint);
  flex: 0 0 auto;
  margin-top: 0.1rem;
  padding: 0.45rem;
  background: rgba(255, 255, 255, 0.08);
  border-radius: var(--rt-radius);
  box-sizing: content-box;
}
.diff-list h3 { font-size: 1.0625rem; color: var(--rt-white); margin-bottom: 0.25rem; }
.diff-list p { font-size: 0.9375rem; margin: 0; }

/* --------------------------------------------------------------------------
   11  Segment router
   -------------------------------------------------------------------------- */

.segment-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--rt-white);
  border: 1px solid var(--rt-border);
  border-radius: var(--rt-radius-lg);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.segment-card:hover { transform: translateY(-4px); box-shadow: var(--rt-shadow-lift); color: inherit; }
.segment-card figure { margin: 0; background: var(--rt-surface-subtle); }
.segment-card img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.segment-body { padding: 1.35rem 1.4rem 1.5rem; display: flex; flex-direction: column; flex: 1; }
.segment-kicker {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--rt-teal-shade);
  margin-bottom: 0.5rem;
}
.segment-card h3 { font-size: 1.1875rem; margin-bottom: 0.5rem; }
.segment-card p { font-size: 0.9375rem; color: var(--rt-ink-muted); }
.segment-card .link-more { margin-top: auto; padding-top: 1rem; }

/* --------------------------------------------------------------------------
   12  Product cards
   -------------------------------------------------------------------------- */

.product-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--rt-white);
  border: 1px solid var(--rt-border);
  border-radius: var(--rt-radius-lg);
  padding: 1.35rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.product-card:hover { transform: translateY(-4px); box-shadow: var(--rt-shadow-lift); border-color: var(--rt-border-strong); }

/* A card is one target.
   -------------------------------------------------------------------------
   Every card that ends in a "more" link behaves as a single clickable block:
   the whole box, not just the last line of it. The link stays a real link in
   the markup, and a pseudo-element of it is stretched over the card, so the
   accessible name and the keyboard focus stop are unchanged.

   It has to be ::before. .link-more already spends its ::after on the arrow
   glyph, and reusing it would replace the arrow with an invisible box.

   Anything inside that must stay independently clickable is lifted above the
   overlay. A card title pointing at the same page is fine either way; a
   category chip pointing somewhere else would otherwise be swallowed. */
.product-card,
.iconbox,
.post-card { position: relative; }

.product-card .link-more::before,
.iconbox .link-more::before,
.post-card .link-more::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--rt-radius-lg);
}

.product-card a:not(.link-more),
.iconbox a:not(.link-more),
.post-card a:not(.link-more) { position: relative; z-index: 1; }

/* The lift on hover now belongs to the whole card, including when the pointer
   is anywhere inside it rather than on the link itself. */
.post-card { transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; }
.post-card:hover { transform: translateY(-4px); box-shadow: var(--rt-shadow-lift); border-color: var(--rt-border-strong); }
.product-card:hover .link-more,
.iconbox:hover .link-more,
.post-card:hover .link-more { color: var(--rt-ember-shade); }
.product-card:hover .link-more::after,
.iconbox:hover .link-more::after,
.post-card:hover .link-more::after { transform: rotate(45deg) translate(2px, -2px); }
.product-card figure {
  margin: 0 0 1.1rem;
  background: var(--rt-surface-subtle);
  border-radius: var(--rt-radius);
  display: grid;
  place-items: center;
  padding: 1rem;
}
.product-card img { max-height: 190px; width: auto; object-fit: contain; }
.product-class {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--rt-purple);
  margin-bottom: 0.4rem;
}
.product-card h3 { font-size: 1.125rem; margin-bottom: 0.5rem; }
.product-spec {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  font-size: 0.875rem;
  color: var(--rt-ink-muted);
  display: grid;
  gap: 0.3rem;
}
.product-spec li { display: flex; justify-content: space-between; gap: 1rem; border-bottom: 1px dotted var(--rt-border); padding-bottom: 0.3rem; }
.product-spec span:last-child { font-weight: 600; color: var(--rt-navy); }
.product-card .link-more { margin-top: auto; }

/* --------------------------------------------------------------------------
   13  Answer block (MICR education)
   -------------------------------------------------------------------------- */

/* Built for answer engines as much as readers: a plain question heading
   followed immediately by a short, self-contained definition paragraph that
   can be lifted whole into an AI answer. */
.answer-block {
  background: var(--rt-white);
  border: 1px solid var(--rt-border);
  border-left: 5px solid var(--rt-teal);
  border-radius: var(--rt-radius);
  padding: clamp(1.35rem, 2.5vw, 1.85rem);
}
.answer-block + .answer-block { margin-top: 1.1rem; }
.answer-block h3 { font-size: 1.125rem; margin-bottom: 0.55rem; }
.answer-block p { font-size: 1rem; color: var(--rt-ink-muted); }

.micr-figure {
  background: var(--rt-surface-subtle);
  border: 1px solid var(--rt-border);
  border-radius: var(--rt-radius-lg);
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
}
.micr-figure figcaption {
  font-size: 0.8125rem;
  color: var(--rt-ink-faint);
  margin-top: 0.9rem;
  /* The figure moved out of the split to the full container, which took its
     caption with it: 139 characters a line. */
  max-width: 76ch;
}

/* --------------------------------------------------------------------------
   14  Category guide grid
   -------------------------------------------------------------------------- */

.guide-card {
  display: block;
  height: 100%;
  background: var(--rt-white);
  border: 1px solid var(--rt-border);
  border-radius: var(--rt-radius-lg);
  padding: 1.5rem;
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.guide-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--rt-shadow-lift);
  border-color: var(--rt-purple-tint);
  color: inherit;
}
.guide-card .hg { color: var(--rt-purple); margin-bottom: 1rem; }
.guide-card h3 { font-size: 1.0625rem; margin-bottom: 0.45rem; }
.guide-card p { font-size: 0.9375rem; color: var(--rt-ink-muted); margin: 0; }

/* --------------------------------------------------------------------------
   15  Guarantee band
   -------------------------------------------------------------------------- */

.guarantee {
  background: var(--rt-gradient-tech);
  color: var(--rt-white);
  border-radius: var(--rt-radius-lg);
  padding: clamp(1.75rem, 4vw, 3rem);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  align-items: center;
}
@media (max-width: 900px) {
  .guarantee { grid-template-columns: minmax(0, 1fr); text-align: left; }
}
.guarantee h2 { color: var(--rt-white); font-size: var(--rt-fs-h3); margin-bottom: 0.6rem; }
.guarantee p { color: rgba(255, 255, 255, 0.9); font-size: 0.9375rem; }
.guarantee-seal { flex: 0 0 auto; }
.guarantee-actions { display: grid; gap: 0.65rem; justify-items: stretch; }
.guarantee-actions .octf-btn { justify-content: center; white-space: nowrap; }
.guarantee-fine { font-size: 0.8125rem; color: rgba(255, 255, 255, 0.72); margin-top: 0.75rem; }

/* Lead magnet card, the answer to the audit's single generic "Explore More" CTA. */
.magnet {
  background: var(--rt-white);
  border: 1px solid var(--rt-border);
  border-top: 4px solid var(--rt-gold);
  border-radius: var(--rt-radius-lg);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  box-shadow: var(--rt-shadow);
}
.magnet h2 { font-size: var(--rt-fs-h3); }
.magnet-form { display: grid; gap: 0.75rem; margin-top: 1.25rem; }
.magnet-form label { font-size: 0.8125rem; font-weight: 600; color: var(--rt-ink-muted); }
.magnet-form input {
  width: 100%;
  font: inherit;
  font-size: 1rem;
  padding: 0.8rem 0.9rem;
  border: 1px solid var(--rt-border-strong);
  border-radius: var(--rt-radius);
  color: var(--rt-navy);
  background: var(--rt-white);
}
.magnet-form input:focus-visible { border-color: var(--rt-ember); }
.magnet-fine { font-size: 0.75rem; color: var(--rt-ink-faint); margin-top: 0.5rem; }

/* --------------------------------------------------------------------------
   16  Footer
   -------------------------------------------------------------------------- */

.site-footer { background: var(--rt-navy); color: rgba(255, 255, 255, 0.8); }

.footer-cta { background: var(--rt-gradient-hero); color: var(--rt-white); }
.footer-cta-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.6fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
  padding-block: clamp(2.25rem, 4vw, 3.25rem);
}
@media (max-width: 900px) { .footer-cta-inner { grid-template-columns: minmax(0, 1fr); } }
.footer-cta h2 { color: var(--rt-white); font-size: var(--rt-fs-h3); margin: 0.75rem 0 0.6rem; }
.footer-cta p { color: rgba(255, 255, 255, 0.9); font-size: 0.9375rem; margin: 0; max-width: 42rem; }
.footer-cta-copy .hg { color: rgba(255, 255, 255, 0.9); }
.footer-cta-action { display: grid; gap: 0.75rem; justify-items: start; }
.footer-cta-phone {
  font-family: var(--rt-font-display);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--rt-white);
  text-decoration: none;
}

.footer-main { padding-block: clamp(2.75rem, 5vw, 4rem); }
.footer-grid {
  display: grid;
  /* The brand column holds a paragraph, the address and the social row, so it
     gets roughly twice a link column. At 1.5fr it landed at 269px, which put
     the blurb on 32-character lines. */
  grid-template-columns: minmax(0, 1.85fr) repeat(4, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
}
@media (max-width: 1080px) { .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px)  { .footer-grid { grid-template-columns: minmax(0, 1fr); } }

.footer-brand img { width: 220px; margin-bottom: 1.15rem; }
.footer-blurb { font-size: 0.9375rem; color: rgba(255, 255, 255, 0.72); }
.footer-address { font-style: normal; font-size: 0.9375rem; line-height: 1.8; margin-top: 1rem; }
.footer-address a { color: var(--rt-white); text-decoration: none; }
.footer-address a:hover { color: var(--rt-ember-tint); }
.footer-hours { font-size: 0.8125rem; color: rgba(255, 255, 255, 0.55); margin-top: 0.75rem; }

/* The one social link. Set in the footer's link color rather than the muted
   hours line above it, because this one is meant to be clicked. */
/* Social accounts. A row of official brand marks, each a link with a hidden
   accessible name. The circle is ours; the mark inside it is theirs and is not
   restyled beyond taking the footer's color. */
.footer-social {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1.25rem;
  padding: 0;
  list-style: none;
}
.footer-social li { margin: 0; }
.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.82);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  text-decoration: none;
  transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}
.footer-social a:hover,
.footer-social a:focus-visible {
  color: #fff;
  background: var(--rt-ember);
  border-color: var(--rt-ember);
}
.footer-social .social-icon { display: block; }

.footer-col-title {
  font-family: var(--rt-font-body);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--rt-ember-tint);
  margin-bottom: 1rem;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; }
.footer-col a {
  display: inline-block;
  padding-block: 0.3rem;
  color: rgba(255, 255, 255, 0.78);
  text-decoration: none;
  font-size: 0.9375rem;
}
.footer-col a:hover { color: var(--rt-white); text-decoration: underline; }

.footer-bottom { border-top: 1px solid rgba(255, 255, 255, 0.12); }
.footer-bottom-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  align-items: center;
  padding-block: 1.25rem;
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.6);
}
.footer-bottom-inner p { margin: 0; }
.footer-legal { display: flex; flex-wrap: wrap; gap: 1.25rem; list-style: none; margin: 0; padding: 0; }
.footer-legal a {
  display: inline-block;
  padding-block: 0.35rem;
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
}
.footer-legal a:hover { color: var(--rt-white); }

/* --------------------------------------------------------------------------
   17  Interior pages: breadcrumbs, page hero, prose, tables, FAQ
   -------------------------------------------------------------------------- */

.breadcrumbs {
  background: var(--rt-surface-subtle);
  border-bottom: 1px solid var(--rt-border);
  font-size: 0.8125rem;
}
.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  list-style: none;
  margin: 0;
  padding-block: 0.85rem;
}
.breadcrumbs li { display: flex; align-items: center; gap: 0.75rem; }
.breadcrumbs li + li::before {
  content: "";
  width: 0.35rem;
  height: 0.35rem;
  border-right: 1.5px solid var(--rt-border-strong);
  border-top: 1.5px solid var(--rt-border-strong);
  transform: rotate(45deg);
  flex: 0 0 auto;
}
.breadcrumbs a { color: var(--rt-ink-muted); text-decoration: none; }
.breadcrumbs a:hover { color: var(--rt-ember-shade); text-decoration: underline; }
.breadcrumbs [aria-current="page"] { color: var(--rt-navy); font-weight: 600; }

/* Interior page hero: quieter than the homepage gradient, since these pages
   are read rather than scanned. */
.page-hero {
  background: var(--rt-surface-subtle);
  border-bottom: 1px solid var(--rt-border);
  padding-block: clamp(2.5rem, 5vw, 4.25rem);
}
.page-hero h1 { margin-bottom: 0.75rem; }
.page-hero .lead { margin-bottom: 1rem; }
/* Same reason as .prose: a hero paragraph across the full container ran to 133
   characters. The heading above it is still free to use the whole width. */
.page-hero > .container > p { max-width: 64ch; }
.hero-proof-light { margin-top: 1.5rem; }
.hero-proof-light li {
  background: var(--rt-white);
  border-color: var(--rt-border-strong);
  color: var(--rt-navy);
}
.hero-proof-light .hg { color: var(--rt-ember-shade); }

/* Diagram figures carry the software and supplies pages, where a screenshot
   would date faster than the product and explain less. */
.diagram-figure {
  margin: 0;
  background: var(--rt-white);
  border: 1px solid var(--rt-border);
  border-radius: var(--rt-radius-lg);
  overflow: hidden;
  box-shadow: var(--rt-shadow);
}
.diagram-figure img { width: 100%; height: auto; display: block; }
/* A caption under a full-width drawing sits on a 900px line at 13px, which is
   over 120 characters. The figure keeps its width; the sentence does not.
   The cap is extra right padding rather than a max-width, because the caption
   bar paints its own background and a narrower box left a half-painted strip
   running off to the right of the text. */
.diagram-figure figcaption {
  font-size: 0.8125rem;
  color: var(--rt-ink-faint);
  padding: 0.85rem max(1.1rem, 100% - 76ch) 0.85rem 1.1rem;
  border-top: 1px solid var(--rt-border);
}

/* Diagrams on a narrow screen.
   -------------------------------------------------------------------------
   These are drawn on a 720 unit canvas. Scaled to fit a 390px phone they
   render about 348px wide, which takes 10 unit labels down to roughly 5 CSS
   pixels: not small, unreadable. Reported from the live site as the images
   looking strange on mobile.

   Shrinking further is not the answer and neither is redrawing 25 diagrams
   for one breakpoint. Below 760px the drawing keeps a readable width and its
   own wrapper scrolls sideways, which is exactly what the wide data tables on
   this site already do. At 680 of a 720 canvas a 10 unit label lands near
   9.4px, which reads.

   The .diagram-canvas wrapper scrolls, not the <figure>, so the caption stays
   put and the page body never scrolls horizontally.

   The selectors below are deliberately two levels deep. `.diagram-wide img`
   appears later in this file at the same specificity, so a single-class rule
   here loses to it on source order and the override silently does nothing. */
.diagram-canvas { display: block; }
.diagram-canvas img { width: 100%; height: auto; display: block; }

@media (max-width: 760px) {
  /* The canvas scrolls, the figure does not, so the caption below it stays
     put and wraps at the reader's screen width instead of being dragged
     sideways with the drawing. */
  .diagram-canvas {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
  }
  /* .micr-figure is the third frame a drawing appears in, and it was left out
     of this list, so the MICR line diagram was the one drawing on the site
     that still shrank to the phone's width: 228px, which put its field labels
     at 4.3 CSS pixels. */
  .diagram-figure .diagram-canvas img,
  .diagram-wide .diagram-canvas img,
  .micr-figure .diagram-canvas img {
    width: 680px;
    max-width: none;
  }
}

/* An aside promoted out of the hero column to full width. */
.aside-wide { position: static; }
/* Six editions read as three across and two down. auto-fit was giving four
   across and a row of two, which made the last row look like an afterthought
   rather than part of the set. */
.aside-wide .edition-jump {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
}
@media (max-width: 860px) {
  .aside-wide .edition-jump { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .aside-wide .edition-jump { grid-template-columns: minmax(0, 1fr); }
}
.aside-wide .spec-table { max-width: 44rem; }

.product-hero-figure {
  margin: 0;
  background: var(--rt-white);
  border: 1px solid var(--rt-border);
  border-radius: var(--rt-radius-lg);
  padding: clamp(1rem, 2vw, 1.75rem);
  display: grid;
  place-items: center;
}
.product-hero-figure img { width: 100%; height: auto; }

.prose h2 { margin-top: 0; }
/* An article body lays its blocks out flat under the page <h1>, so its
   subheadings are h2 by level. They are still subheadings by role, and should
   read at the same weight as a guide's h3 rather than at page-title size. */
.post-body.prose > h2 {
  font-size: 1.25rem;
  margin-top: 2.25rem;
  margin-bottom: 0.5rem;
}
.post-body.prose > h2:first-child { margin-top: 0; }
.prose h3 {
  font-size: 1.125rem;
  margin-top: 2rem;
  margin-bottom: 0.5rem;
}
.prose p { color: var(--rt-ink-muted); }
.prose > p:first-of-type { color: var(--rt-ink); }

/* Measure. A .prose block dropped straight into a 1140px container was setting
   body copy on 121-character lines, which is where the eye stops finding the
   next line reliably. The cap is on the runs, not the block, so headings,
   tables, figures and callouts still use the full column. */
.prose p,
.prose li,
.prose dd,
.prose blockquote { max-width: 74ch; }

.aside-card {
  background: var(--rt-surface-subtle);
  border: 1px solid var(--rt-border);
  border-top: 4px solid var(--rt-teal);
  border-radius: var(--rt-radius-lg);
  padding: clamp(1.35rem, 2.5vw, 1.85rem);
  align-self: start;
  position: sticky;
  top: 140px;
}
.aside-card h2 { font-size: 1.0625rem; margin-bottom: 0.9rem; }
@media (max-width: 980px) { .aside-card { position: static; } }

/* Specification tables */
.spec-groups { display: grid; gap: clamp(1.5rem, 3vw, 2.25rem); }
@media (min-width: 900px) { .spec-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.spec-group {
  background: var(--rt-white);
  border: 1px solid var(--rt-border);
  border-radius: var(--rt-radius-lg);
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
}
.spec-group h3 {
  font-size: 0.8125rem;
  font-family: var(--rt-font-body);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--rt-ember-shade);
  margin-bottom: 1rem;
}

.spec-table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.spec-table th,
.spec-table td {
  text-align: left;
  vertical-align: top;
  padding: 0.65rem 0;
  border-bottom: 1px solid var(--rt-border);
}
.spec-table tr:last-child th,
.spec-table tr:last-child td { border-bottom: 0; }
.spec-table th {
  font-family: var(--rt-font-body);
  font-weight: 600;
  color: var(--rt-ink-muted);
  width: 38%;
  padding-right: 1rem;
}
.spec-table td { color: var(--rt-navy); }

/* The base engine, named in the hero of every printer page.

   We re-engineer proven Ricoh hardware instead of manufacturing a proprietary
   printer, and that is the clearest difference between us and TROY or
   SourceTech. It carries no weight as a general claim, so the machine is named
   and the evidence for naming it sits underneath. Styled as a quiet aside
   rather than a callout: it is provenance, not a selling point being shouted. */
.engine-note {
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
  margin-top: 1.5rem;
  padding: 0.95rem 1.1rem;
  border-left: 3px solid var(--rt-teal);
  background: var(--rt-surface-subtle);
  border-radius: 0 var(--rt-radius) var(--rt-radius) 0;
  max-width: 46rem;
}
.engine-glyph { color: var(--rt-teal); flex: none; margin-top: 0.15rem; }
.engine-glyph.hg { color: var(--rt-teal); }
.engine-note p { margin: 0; font-size: 0.875rem; color: var(--rt-ink-muted); }
.engine-note .engine-model {
  font-size: 1rem;
  color: var(--rt-navy);
  margin-bottom: 0.25rem;
}
.engine-note .engine-model strong { font-weight: 700; }

.spec-note {
  font-size: 0.8125rem;
  color: var(--rt-ink-faint);
  margin-top: 1.5rem;
  /* Was 60rem, which at this type size is over 100 characters a line. In ch it
     tracks the type instead of the root font size. */
  max-width: 76ch;
}
/* The honest-gaps block. Accuracy over volume means naming what is not
   published rather than quietly omitting it. */
.spec-gaps {
  margin-top: 2rem;
  background: var(--rt-white);
  border: 1px solid var(--rt-border);
  border-left: 5px solid var(--rt-gold);
  border-radius: var(--rt-radius);
  padding: clamp(1.25rem, 2.5vw, 1.6rem);
}
.spec-gaps h3 { font-size: 1.0625rem; margin-bottom: 0.5rem; }
.spec-gaps p { font-size: 0.9375rem; color: var(--rt-ink-muted); }
.spec-gaps .iconbox-list li::before { background: var(--rt-gold-shade); }

/* Data tables: supplies, part numbers, model comparison */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--rt-border);
  border-radius: var(--rt-radius-lg);
  background: var(--rt-white);
}
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
  /* The min-width is here so a wide specification table keeps its columns
     legible instead of squashing, and the wrapper scrolls it. A two-column
     table needs none of that, and forcing it on produced a scrollbar under
     tables that fit the page perfectly well. Applied by column count. */
  min-width: 0;
}
.data-table:has(thead th:nth-child(3)) { min-width: 34rem; }
.data-table th,
.data-table td {
  text-align: left;
  vertical-align: top;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--rt-border);
}
.data-table thead th {
  font-family: var(--rt-font-body);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rt-white);
  background: var(--rt-navy);
  white-space: nowrap;
}
.data-table tbody tr:last-child th,
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table tbody tr:nth-child(even) { background: var(--rt-surface-subtle); }
.data-table tbody th {
  font-family: var(--rt-font-body);
  font-weight: 600;
  color: var(--rt-navy);
  white-space: nowrap;
}
.data-table tbody th a { color: var(--rt-blue); text-decoration: none; }
.data-table tbody th a:hover { color: var(--rt-ember-shade); text-decoration: underline; }
.data-table td { color: var(--rt-ink-muted); }
.mono { font-variant-numeric: tabular-nums; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.875rem; color: var(--rt-navy); }
.compare-table { min-width: 48rem; }

/* Service plan cards */
.plan-hours {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rt-teal-shade);
  margin-bottom: 0.6rem;
}

/* Ceramic model blocks */
.model-block {
  background: var(--rt-white);
  border: 1px solid var(--rt-border);
  border-radius: var(--rt-radius-lg);
  padding: clamp(1.5rem, 3vw, 2.25rem);
}
.model-block + .model-block { margin-top: clamp(1.5rem, 3vw, 2.25rem); }
/* The block is full width because it holds a spec table. Its prose is not. */
.model-block > p { max-width: 74ch; }
.model-block-head {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 1.5rem;
}
.model-block-head > div:first-child { flex: 1 1 24rem; }
.model-tagline {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--rt-purple);
  margin-bottom: 0.6rem;
}
.model-block .spec-group { border: 0; padding: 0; }

/* FAQ disclosure */
.faq-list { max-width: 100%; }

.faq-item {
  border-bottom: 1px solid var(--rt-border);
  padding-block: 0.85rem;
}
.faq-item:last-child { border-bottom: 0; padding-bottom: 0; }
.faq-item summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--rt-navy);
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: flex-start;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "";
  flex: 0 0 auto;
  width: 0.5rem;
  height: 0.5rem;
  margin-top: 0.3rem;
  border-right: 2px solid var(--rt-ember);
  border-bottom: 2px solid var(--rt-ember);
  transform: rotate(45deg);
  transition: transform 0.18s ease;
}
.faq-item[open] summary::after { transform: rotate(-135deg); }
.faq-item p {
  font-size: 0.9375rem;
  color: var(--rt-ink-muted);
  margin: 0.75rem 0 0;
  max-width: 46rem;
}

/* Edition jump list, used in the aside on hub and consolidation pages */
.edition-jump { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.25rem; }
.edition-jump a {
  display: block;
  padding: 0.6rem 0.7rem;
  border-radius: var(--rt-radius);
  text-decoration: none;
  color: inherit;
  transition: background-color 0.15s ease;
}
.edition-jump a:hover { background: var(--rt-white); color: inherit; }
.edition-jump-name { display: block; font-weight: 600; font-size: 0.9375rem; color: var(--rt-navy); }
.edition-jump-kicker { display: block; font-size: 0.8125rem; color: var(--rt-ink-faint); }

/* Comparison table rows where the editions actually differ */
.row-differs { background: var(--rt-gold-tint) !important; }
.row-differs th, .row-differs td { color: var(--rt-navy); }
.differs-tag {
  display: inline-block;
  margin-left: 0.5rem;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  /* Not --rt-gold-shade. At 10px on white that measures 3.26:1, and this is a
     10px uppercase word, which is the hardest thing on the page to read. */
  color: #8A6303;
  background: var(--rt-white);
  border-radius: 100px;
  padding: 0.1rem 0.45rem;
  vertical-align: middle;
}

/* Edition meta footer inside a model block */
.edition-meta {
  margin-top: 1.5rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--rt-border);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2rem;
  font-size: 0.9375rem;
  color: var(--rt-ink-muted);
}
.edition-meta p { margin: 0; }
.edition-meta strong { color: var(--rt-navy); }

/* Numbered process list */
.step-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(1.25rem, 2.5vw, 2rem);
  /* Two across, not four. Each step carries a sentence or two of explanation,
     and four columns left that text on a 208px line: 25 characters, with
     "Image Replacement Document" broken across three of them. Two rows of two
     still reads as four numbered steps, which is what the headings promise. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  counter-reset: step;
}
@media (max-width: 560px) { .step-list { grid-template-columns: minmax(0, 1fr); } }
.step-list li {
  background: var(--rt-white);
  border: 1px solid var(--rt-border);
  border-top: 4px solid var(--rt-teal);
  border-radius: var(--rt-radius-lg);
  padding: clamp(1.25rem, 2.5vw, 1.6rem);
}
.step-number {
  display: block;
  font-family: var(--rt-font-display);
  font-size: 1.75rem;
  font-weight: 800;
  line-height: 1;
  color: var(--rt-teal);
  margin-bottom: 0.75rem;
}
.step-list h3 { font-size: 1.0625rem; margin-bottom: 0.4rem; }
.step-list p { font-size: 0.9375rem; color: var(--rt-ink-muted); margin: 0; }

/* Print manager capability sections */
.rpm-icon {
  display: inline-grid;
  place-items: center;
  width: 64px;
  height: 64px;
  background: var(--rt-surface-subtle);
  border-radius: var(--rt-radius);
  color: var(--rt-ember-shade);
  margin-bottom: 1.25rem;
}
.section-subtle .rpm-icon { background: var(--rt-white); }
.feature-list li { margin-bottom: 0.85rem; font-size: 1rem; }

.sub-head {
  font-family: var(--rt-font-body);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--rt-ember-shade);
  margin-bottom: 1rem;
}
.format-head {
  font-family: var(--rt-font-body);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rt-teal-shade);
  margin: 1.25rem 0 0.5rem;
}
.aside-card .format-head:first-of-type { margin-top: 0.75rem; }

.compare-half {
  background: var(--rt-white);
  border: 1px solid var(--rt-border);
  border-radius: var(--rt-radius-lg);
  padding: clamp(1.5rem, 3vw, 2.25rem);
}
.compare-half h3 { margin-bottom: 0.6rem; }
.compare-half p { color: var(--rt-ink-muted); }
.compare-half .link-more { margin-top: 1.25rem; }

.iconbox h4 { font-size: 1.0625rem; margin-bottom: 0.4rem; }

/* 404 */
.error-page { max-width: 60rem; }
.error-page h1 { margin-top: 1.25rem; }

/* --------------------------------------------------------------------------
   18  Utilities
   -------------------------------------------------------------------------- */

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.mt-2 { margin-top: 1.25rem; }
.mt-3 { margin-top: 2rem; }

/* --------------------------------------------------------------------------
   19  Motion and print
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@media print {
  .site-header, .site-footer, .nav-toggle, .hero-figure { display: none; }
  body { color: #000; }
  a::after { content: " (" attr(href) ")"; font-size: 0.8em; }
}

/* Wide diagram figure: a full-bleed-within-container explanatory image that
   breaks up long text sections. Added in the visual-density pass. */
.diagram-wide { max-width: 56rem; margin-inline: auto; }
.diagram-wide img { width: 100%; }

/* Photographic figures.
   -------------------------------------------------------------------------
   Same frame as a diagram figure, so the two read as one system down a page
   that mixes them. The difference is the ground: a diagram is drawn on white
   and needs white behind it, a photograph fills its frame edge to edge and
   only shows its ground for the moment before it loads. */
.photo-figure {
  margin: 0;
  background: var(--rt-surface-subtle);
  border: 1px solid var(--rt-border);
  border-radius: var(--rt-radius-lg);
  overflow: hidden;
  box-shadow: var(--rt-shadow);
}
.photo-figure img { width: 100%; height: auto; display: block; }
.photo-figure figcaption {
  font-size: 0.8125rem;
  color: var(--rt-ink-faint);
  padding: 0.85rem max(1.1rem, 100% - 76ch) 0.85rem 1.1rem;
  border-top: 1px solid var(--rt-border);
  background: var(--rt-white);
}
/* A figure spanning the reading column, but never wider than the file it
   holds: --photo-max carries the image's own pixel width where a template
   knows it, so a small archive photograph is shown at its real size instead of
   being stretched and going soft. */
.photo-wide {
  max-width: min(56rem, var(--photo-max, 56rem));
  margin-inline: auto;
}

/* A photograph inside an article body. It breaks out of the reading column by
   a little on each side, which is enough to register as a change of pace, and
   it drops the border and the caption bar: the line under it is a line of the
   article, set small, not a label attached to an object. */
.article-photo {
  margin: clamp(1.75rem, 4vw, 2.75rem) 0;
  width: min(100% + 8rem, 100vw - 2 * var(--rt-gutter));
  margin-inline: calc(50% - min(50% + 4rem, 50vw - var(--rt-gutter)));
  border-radius: var(--rt-radius-lg);
  overflow: hidden;
}
.article-photo img { width: 100%; height: auto; display: block; }
.article-photo figcaption {
  font-size: 0.8125rem;
  color: var(--rt-ink-faint);
  padding: 0.7rem 0.1rem 0;
  max-width: 68ch;
}

/* --------------------------------------------------------------------------
   Photograph bands
   --------------------------------------------------------------------------
   Rendered by includes/components/media.php. The reasoning is in that file's
   header: a bordered, captioned box in its own padded section reads as an
   insert, and a photograph that is part of the argument should not.

   Both treatments are flush. No padding-block of their own, so the band meets
   the section above and the section below with no gap, which is the whole
   point. Nothing here uses 100vw: a viewport unit includes the scrollbar and
   produces a sideways scroll on Windows. These are already full width because
   the band is not inside a container. */

.media-band { position: relative; }

/* ---- feature: full bleed, the line set over the image --------------------- */

.media-feature {
  display: grid;
  align-items: end;
  min-height: clamp(18rem, 32vw, 30rem);
  isolation: isolate;
  background: var(--rt-navy);
}
.media-feature .media-image {
  grid-area: 1 / 1;
  align-self: stretch;
  overflow: hidden;
}
.media-feature .media-image img,
.media-feature .media-image picture {
  width: 100%;
  height: 100%;
  display: block;
}
.media-feature .media-image img { object-fit: cover; object-position: center 45%; }
/* The scrim. Dark enough at the foot to hold white type at any weight, gone by
   the middle of the frame so the photograph is still a photograph. */
.media-feature::after {
  content: "";
  grid-area: 1 / 1;
  /* The band aligns its children to the end, and an empty pseudo-element
     aligned to the end has no height, so the scrim was drawing nothing. It has
     to stretch over the whole cell. */
  align-self: stretch;
  background: linear-gradient(
    to top,
    rgba(0, 27, 53, 0.96) 0%,
    rgba(0, 27, 53, 0.86) 16%,
    rgba(0, 27, 53, 0.52) 40%,
    rgba(0, 27, 53, 0.12) 66%,
    rgba(0, 27, 53, 0) 85%
  );
}
.media-feature .media-copy {
  grid-area: 1 / 1;
  align-self: end;
  z-index: 1;
  padding-block: clamp(1.5rem, 3.5vw, 2.75rem);
}
.media-feature .media-line {
  color: #fff;
  font-family: var(--rt-font-display, inherit);
  font-weight: 600;
  font-size: clamp(1.125rem, 2.1vw, 1.625rem);
  line-height: 1.32;
  max-width: 36ch;
  margin: 0;
  text-wrap: balance;
  /* The scrim does the work, but a bench lit from above can still push a
     highlight up under a word. The shadow is the belt to that brace. */
  text-shadow: 0 1px 3px rgba(0, 27, 53, 0.55);
}
.media-feature .media-eyebrow { color: var(--rt-ember-tint); }

/* ---- inset: the image runs off one edge, the line sits beside it ---------- */

.media-inset {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  background: var(--rt-surface-subtle);
  /* Without this the image is only as tall as the line beside it, which on a
     one-sentence band leaves a letterbox strip rather than a photograph. */
  min-height: clamp(15rem, 25vw, 23rem);
}
.media-inset .media-image img { width: 100%; height: 100%; object-fit: cover; }
.media-inset .media-image { align-self: stretch; overflow: hidden; }
/* The copy column is padded so its text starts on the same vertical line as
   every other paragraph on the page, rather than wherever the grid put it. */
.media-inset .media-copy {
  padding-block: clamp(1.75rem, 4vw, 3rem);
  max-width: 34ch;
}
.media-inset-left  .media-copy { padding-right: max(var(--rt-gutter), calc((100% - var(--rt-container)) / 2 + var(--rt-gutter))); }
.media-inset-right .media-image { order: 2; }
.media-inset-right .media-copy  { order: 1; justify-self: end; padding-left: max(var(--rt-gutter), calc((100% - var(--rt-container)) / 2 + var(--rt-gutter))); }
.media-inset .media-line {
  color: var(--rt-navy);
  font-size: clamp(1.125rem, 1.8vw, 1.5rem);
  font-family: var(--rt-font-display);
  line-height: 1.4;
  font-weight: 600;
  margin: 0;
  text-wrap: balance;
}
.media-inset .media-eyebrow { color: var(--rt-ember-shade); }

.media-eyebrow {
  font-size: 0.75rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  font-weight: 700;
  margin: 0 0 0.5rem;
}

@media (max-width: 860px) {
  /* One column on a phone. The inset image goes above its line and keeps a
     fixed shape so a tall crop cannot take over the screen. */
  .media-inset { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .media-inset .media-image { aspect-ratio: 16 / 9; order: 1; }
  .media-inset .media-copy {
    order: 2;
    max-width: none;
    padding: clamp(1.25rem, 5vw, 1.75rem) var(--rt-gutter);
  }
  .media-feature { min-height: 16rem; }
}

/* --------------------------------------------------------------------------
   Newsroom
   --------------------------------------------------------------------------
   One lead story with room, then a dated list grouped by year. Twenty-five
   announcements as a grid of equal cards reads as twenty-five things of equal
   importance, which is not what a newsroom is. */

.news-lead {
  border: 1px solid var(--rt-border);
  border-left: 5px solid var(--rt-ember);
  border-radius: var(--rt-radius-lg);
  background: var(--rt-white);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  box-shadow: var(--rt-shadow);
}
/* With a photograph the lead splits in two; without one it stays a single
   column, so an item that has no picture does not leave a gap where one would
   have been. */
.news-lead-illustrated {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(1.25rem, 3vw, 2rem);
  align-items: center;
}
.news-lead-figure {
  margin: 0;
  background: var(--rt-surface-subtle);
  border: 1px solid var(--rt-border);
  border-radius: var(--rt-radius);
  overflow: hidden;
}
/* The lead photograph is whatever shape it was published at: a 991x465
   letterbox for a product launch, a 592x866 portrait for a headshot. Capping
   the height and containing rather than cropping means the portrait sits in
   the card instead of running it to twice the height of the text beside it,
   and nobody's head gets cut off by an object-fit: cover. */
.news-lead-figure {
  display: grid;
  place-items: center;
  max-height: 22rem;
}
.news-lead-figure img {
  max-width: 100%;
  max-height: 22rem;
  width: auto;
  height: auto;
  display: block;
}
/* The text half of an illustrated lead. It exists so the two halves are
   siblings in the grid rather than the copy being a bare run of children. */
.news-lead-body { min-width: 0; }
@media (max-width: 700px) {
  .news-lead-illustrated { grid-template-columns: minmax(0, 1fr); }
}
.news-lead h2 { font-size: var(--rt-fs-h2); margin: 0.5rem 0 0.75rem; max-width: 28ch; }
.news-lead h2 a { color: inherit; text-decoration: none; }
.news-lead h2 a:hover { color: var(--rt-blue); }
.news-lead p { color: var(--rt-ink-muted); max-width: 62ch; margin-bottom: 1rem; }

.news-year + .news-year { margin-top: 2.5rem; }
.news-year-label {
  font-family: var(--rt-font-mono);
  font-size: 0.875rem;
  letter-spacing: 0.14em;
  color: var(--rt-ember-shade);
  padding-bottom: 0.5rem;
  margin-bottom: 0;
  border-bottom: 2px solid var(--rt-border);
}

.news-list { list-style: none; margin: 0; padding: 0; }
.news-row {
  display: grid;
  /* date, thumbnail, text */
  grid-template-columns: 5.5rem 7.5rem minmax(0, 1fr);
  gap: 0 1.25rem;
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--rt-border);
  align-items: start;
}
.news-row-thumb {
  background: var(--rt-surface-subtle);
  border: 1px solid var(--rt-border);
  border-radius: var(--rt-radius);
  overflow: hidden;
  aspect-ratio: 16 / 9;
  display: grid;
  place-items: center;
}
.news-row-thumb:empty { visibility: hidden; }
.news-row-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.news-row:last-child { border-bottom: 0; }
.news-row-date {
  font-family: var(--rt-font-mono);
  font-size: 0.8125rem;
  color: var(--rt-ink-faint);
  padding-top: 0.2rem;
  font-variant-numeric: tabular-nums;
}
.news-row-body h4 { font-size: 1.0625rem; margin: 0 0 0.35rem; }
.news-row-body h4 a { color: var(--rt-navy); text-decoration: none; }
.news-row-body h4 a:hover { color: var(--rt-blue); }
.news-row-body p { font-size: 0.9375rem; color: var(--rt-ink-muted); margin: 0; max-width: 68ch; }

@media (max-width: 860px) {
  .news-row { grid-template-columns: 5.5rem minmax(0, 1fr); }
  .news-row-thumb { display: none; }
}
@media (max-width: 560px) {
  .news-row { grid-template-columns: minmax(0, 1fr); gap: 0.3rem; }
  .news-row-date { padding-top: 0; }
}

/* ==========================================================================
   Pillar guides
   A two-column reading layout: a sticky table of contents beside a single
   measured column of prose. The measure is capped in characters rather than
   pixels, because line length is what decides whether long-form gets read.
   ========================================================================== */

.page-hero-guide {
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
  border-bottom: 1px solid var(--rt-grey);
}
.page-hero-guide h1 { max-width: 20ch; }
.page-hero-guide .lead { max-width: 60ch; }

.guide-meta {
  margin-top: 1.25rem;
  font-family: var(--rt-font-mono);
  font-size: 0.8125rem;
  color: var(--rt-ink-faint);
  letter-spacing: 0.02em;
}

.guide-layout {
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
  padding-block: clamp(2.5rem, 5vw, 4rem);
}

.guide-toc {
  position: sticky;
  top: calc(env(safe-area-inset-top, 0px) + 1.5rem);
  padding: 1.5rem;
  background: var(--rt-surface-subtle);
  border-radius: 4px;
  border-left: 3px solid var(--rt-ember);
}
.guide-toc h2 {
  font-family: var(--rt-font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rt-ember-shade);
  margin: 0 0 0.875rem;
}
.guide-toc ol {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: toc;
}
.guide-toc li { counter-increment: toc; margin-bottom: 0.625rem; }
.guide-toc li:last-child { margin-bottom: 0; }
.guide-toc a {
  display: grid;
  grid-template-columns: 1.75rem 1fr;
  align-items: center;
  min-height: 24px;
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--rt-navy);
  text-decoration: none;
}
.guide-toc a::before {
  content: counter(toc, decimal-leading-zero);
  font-family: var(--rt-font-mono);
  font-size: 0.75rem;
  color: var(--rt-ink-faint);
}
.guide-toc a:hover { color: var(--rt-ember-shade); }
.guide-toc a:hover::before { color: var(--rt-ember); }

.guide-body { max-width: 68ch; }
.guide-section { margin-bottom: clamp(2.5rem, 5vw, 3.5rem); scroll-margin-top: 6rem; }
.guide-section:last-child { margin-bottom: 0; }
.guide-section > h2 {
  font-size: clamp(1.375rem, 2.5vw, 1.75rem);
  line-height: 1.25;
  margin: 0 0 1rem;
  padding-top: 0.5rem;
  border-top: 3px solid var(--rt-navy);
  text-wrap: balance;
}
.guide-section h3 {
  font-size: 1.0625rem;
  margin: 1.75rem 0 0.5rem;
}
.guide-section p { margin: 0 0 1rem; }

.guide-list { margin: 0 0 1.25rem; padding-left: 0; list-style: none; }
.guide-list li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.5rem;
}
.guide-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.55em;
  width: 7px; height: 7px;
  background: var(--rt-teal);
  transform: rotate(45deg);
}

.guide-steps { margin: 0 0 1.25rem; padding-left: 1.25rem; }
.guide-steps li { margin-bottom: 0.75rem; padding-left: 0.25rem; }
.guide-steps li::marker { color: var(--rt-ember); font-weight: 700; }

.guide-callout {
  margin: 1.75rem 0;
  padding: 1.25rem 1.5rem;
  background: var(--rt-surface-subtle);
  border-left: 4px solid var(--rt-teal);
  border-radius: 0 4px 4px 0;
}
/* The callout's heading level follows the depth the block was rendered at, so
   the styling is bound to its place rather than to one tag. */
.guide-callout :is(h2, h3, h4) {
  margin: 0 0 0.5rem;
  font-size: 1rem;
  color: var(--rt-navy);
}
.guide-callout p { margin: 0; font-size: 0.9375rem; }

.guide-section .diagram-figure { margin: 1.75rem 0; }
.guide-section .table-scroll { margin: 1.5rem 0; }

.guide-end {
  padding: 1.75rem;
  background: var(--rt-surface-subtle);
  border-radius: 4px;
}
.guide-end > h2 { border-top: none; padding-top: 0; }

/* Grid items default to min-width:auto, so a wide table inside the prose
   column forces the whole track open rather than scrolling inside its own
   container. minmax(0, ...) on every track, plus min-width:0 on the items,
   is what keeps a 68ch column from becoming a 715px one at phone width. */
.guide-toc, .guide-body { min-width: 0; }

@media (max-width: 900px) {
  .guide-layout { grid-template-columns: minmax(0, 1fr); }
  .guide-toc { position: static; }
  .guide-body { max-width: none; }
}

/* ==========================================================================
   Blog
   ========================================================================== */

.chip-row { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4375rem 0.875rem;
  font-size: 0.875rem;
  color: var(--rt-navy);
  background: var(--rt-surface-subtle);
  border: 1px solid var(--rt-grey);
  border-radius: 999px;
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.chip:hover { background: #fff; border-color: var(--rt-ember); }
.chip-active {
  background: var(--rt-navy);
  border-color: var(--rt-navy);
  color: #fff;
}
.chip-count {
  font-family: var(--rt-font-mono);
  font-size: 0.75rem;
  color: var(--rt-ink-faint);
}
.chip-active .chip-count { color: rgba(255,255,255,0.7); }


.post-card {
  display: flex;
  flex-direction: column;
  padding: 1.5rem;
  background: #fff;
  border: 1px solid var(--rt-grey);
  border-radius: 4px;
  border-top: 3px solid var(--rt-ember);
}
.post-card-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.625rem;
}
.post-card-meta time {
  font-family: var(--rt-font-mono);
  font-size: 0.75rem;
  color: var(--rt-ink-faint);
}
.post-card h2, .post-card h3 {
  font-size: 1.125rem;
  line-height: 1.3;
  margin: 0 0 0.625rem;
  text-wrap: balance;
}
.post-card h2 a, .post-card h3 a { color: var(--rt-navy); text-decoration: none; }
.post-card h2 a:hover, .post-card h3 a:hover { color: var(--rt-ember-shade); }
.post-card p { margin: 0 0 1rem; font-size: 0.9375rem; color: var(--rt-ink-muted); }
.post-card .link-more { margin-top: auto; }

/* A card carrying a thumbnail. The image runs to the card's edges rather than
   sitting inside its padding, so the padding is moved off the card and onto the
   content below the image. The top border stays on the card, not the image, or
   the ember rule would sit above a bleed and read as a stray line. */
.post-card-media {
  padding: 0;
  overflow: hidden;
}
.post-card-media > :not(.post-card-thumb) {
  margin-inline: 1.5rem;
}
.post-card-media > .post-card-meta { margin-top: 1.25rem; }
.post-card-media > .link-more { margin-bottom: 1.5rem; }
.post-card-thumb {
  display: block;
  /* Reserved before the image loads, so a card never changes height mid-scroll. */
  aspect-ratio: 600 / 315;
  background: var(--rt-surface-subtle);
  overflow: hidden;
}
.post-card-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.post-card-media:hover .post-card-thumb img { transform: scale(1.03); }
@media (prefers-reduced-motion: reduce) {
  .post-card-thumb img, .post-card-media:hover .post-card-thumb img {
    transition: none;
    transform: none;
  }
}

/* The post hero. Sits between the heading block and the body column, at the
   container's full width rather than the body's reading measure, because the
   image is the one element on the page that earns the extra width.

   The aspect ratio and the clipping belong to the PICTURE, not the figure. A
   figure that is itself ratio-locked and overflow-hidden crops its own
   caption. */
.post-hero-figure {
  margin: 0 0 2.5rem;
}
.post-hero-figure picture,
.post-hero-figure > img {
  display: block;
  border-radius: 4px;
  overflow: hidden;
  background: var(--rt-surface-subtle);
  aspect-ratio: 1180 / 620;
}
.post-hero-figure img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.post-hero-figure figcaption {
  margin-top: 0.75rem;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--rt-ink-faint);
  max-width: 68ch;
}

.post-body {
  max-width: 68ch;
  margin-inline: auto;
  padding-block: clamp(2.5rem, 5vw, 4rem);
}
.post-body h3 {
  font-size: 1.125rem;
  margin: 2rem 0 0.625rem;
  padding-top: 0.5rem;
  border-top: 2px solid var(--rt-grey);
}
.post-body p { margin: 0 0 1rem; }

/* The filter row sits directly above the post grid, so collapse the gap the
   two stacked section paddings would otherwise create between them. */
.page-blog-index .section-tight { padding-bottom: 0; }
.page-blog-index .section-tight + .section { padding-top: clamp(1.5rem, 3vw, 2rem); }

/* ==========================================================================
   Contact and About
   ========================================================================== */

.contact-card {
  padding: 2rem;
  background: #fff;
  border: 1px solid var(--rt-grey);
  border-radius: 4px;
  border-top: 3px solid var(--rt-ember);
}
.contact-card h2 { font-size: 1.25rem; margin: 0.5rem 0 0.75rem; }
.contact-big {
  font-family: var(--rt-font-display);
  font-size: clamp(1.375rem, 3vw, 1.875rem);
  line-height: 1.2;
  margin: 0 0 0.75rem;
  overflow-wrap: anywhere;
}
.contact-big a { color: var(--rt-navy); text-decoration: none; }
.contact-big a:hover { color: var(--rt-ember-shade); }

.contact-block {
  font-style: normal;
  line-height: 1.7;
  margin: 0 0 1rem;
}

.prose-centered { max-width: 68ch; margin-inline: auto; }

.stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 1px;
  background: var(--rt-grey);
  border: 1px solid var(--rt-grey);
  border-radius: 4px;
  overflow: hidden;
}
.stat { background: #fff; padding: 1.5rem; }
.stat-value {
  display: block;
  font-family: var(--rt-font-display);
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 700;
  line-height: 1;
  color: var(--rt-navy);
  font-variant-numeric: tabular-nums;
}
.stat-label {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--rt-ink-muted);
}

/* ===========================================================================
   Call-to-action bands and forms
   ---------------------------------------------------------------------------
   Every page ends in one of these. The copy sits on the left with the two
   channels that always work, and the form on the right, so a reader who would
   rather telephone never has to scroll past a form to find the number.
   ========================================================================= */

.cta-band {
  background: var(--rt-navy);
  color: #fff;
}
.cta-band .ot-eyebrow { color: var(--rt-ember-tint, #F9C08A); }
.cta-band .main-heading,
.cta-band h2 { color: #fff; }
.cta-band .lead { color: rgba(255, 255, 255, 0.82); }

.cta-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 2.5rem;
  align-items: start;
}
@media (max-width: 900px) {
  .cta-inner { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; }
}

.cta-contacts {
  list-style: none;
  margin: 1.25rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  font-size: 0.9375rem;
}
.cta-contacts li { display: flex; align-items: center; gap: 0.6rem; color: rgba(255,255,255,0.82); }
/* These are standalone controls, not links inside a sentence, so they carry
   the 24px minimum target height on a phone. */
.cta-contacts a {
  color: #fff;
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,0.3);
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}
.cta-contacts a:hover { border-bottom-color: var(--rt-ember); }
.cta-contacts .hg { fill: var(--rt-ember); flex: none; }

.cta-form-card {
  background: #fff;
  border-radius: var(--rt-radius-lg);
  padding: 1.75rem;
  box-shadow: 0 18px 40px rgba(0, 12, 26, 0.28);
}
.cta-form-off { color: var(--rt-navy); }
.cta-form-off p { margin-top: 0; }

.field-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0 1rem;
}
@media (max-width: 560px) {
  .field-row { grid-template-columns: minmax(0, 1fr); }
}
.field { margin-bottom: 1rem; }
.field label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--rt-navy);
  margin-bottom: 0.35rem;
}
.field-opt { font-weight: 400; color: var(--rt-ink-faint); }
.field input,
.field textarea {
  width: 100%;
  box-sizing: border-box;
  font: inherit;
  font-size: 0.9375rem;
  color: var(--rt-navy);
  background: var(--rt-surface-subtle);
  border: 1px solid var(--rt-grey);
  border-radius: 4px;
  padding: 0.625rem 0.75rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.field textarea { resize: vertical; min-height: 6rem; }
.field input:focus,
.field textarea:focus {
  outline: none;
  background: #fff;
  border-color: var(--rt-ember);
  box-shadow: 0 0 0 3px rgba(237, 125, 34, 0.18);
}
.field input:user-invalid,
.field textarea:user-invalid { border-color: #B3261E; }

.field-note {
  font-size: 0.8125rem;
  color: var(--rt-ink-faint);
  margin: 0 0 1rem;
}
.field-note a { color: var(--rt-blue); }

/* The honeypot. Taken out of the layout without display:none, because some
   bots skip anything display:none and fill everything else. */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Submission result, shown at the top of the contact page. */
.form-result {
  border-radius: var(--rt-radius-lg);
  padding: 1.25rem 1.5rem;
  margin: 1.5rem 0 0;
  border-left: 4px solid var(--rt-teal, #0E8C82);
  background: var(--rt-surface-subtle);
}
.form-result h2 { margin: 0 0 0.35rem; font-size: 1.125rem; }
.form-result p { margin: 0; color: var(--rt-ink-muted); }
.form-result-ok  { border-left-color: var(--rt-teal, #0E8C82); }
.form-result-bad { border-left-color: #B3261E; }

/* ---------------------------------------------------------------------------
   Long unbreakable strings
   ---------------------------------------------------------------------------
   An email address or a URL has no break opportunity in it, so at phone width
   one can run past the edge and take the whole page with it.
   "hardwaresupport@rosettatechnologies.com" did exactly that on the support
   page: 39 characters, 4px of body overflow, and a page that scrolled
   sideways.

   break-word rather than anywhere, so ordinary prose still breaks between
   words and only a token with nowhere else to break is split.
   --------------------------------------------------------------------------- */
body,
.prose a,
.iconbox-list a,
.contact-big a,
.footer-address a,
.cta-contacts a {
  overflow-wrap: break-word;
}

/* ==========================================================================
   Downloadable literature
   --------------------------------------------------------------------------
   The block a page uses to offer its own brochures and datasheets. Rendered by
   includes/components/brochure-block.php, which reads the same $DOWNLOADS
   registry the downloads page reads, so a document cannot appear in one place
   and not the other.
   ========================================================================== */

.doc-block {
  background: var(--rt-surface-subtle);
  border: 1px solid var(--rt-border);
  border-left: 4px solid var(--rt-ember);
  border-radius: 0 var(--rt-radius-lg) var(--rt-radius-lg) 0;
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
}
.doc-block-title {
  font-size: 1.0625rem;
  margin: 0 0 0.9rem;
  color: var(--rt-navy);
}
.doc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.doc-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem 0.75rem;
  padding: 0.55rem 0;
  border-top: 1px solid var(--rt-border);
}
.doc-row:first-child { border-top: 0; padding-top: 0; }
.doc-link {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 24px;
  color: var(--rt-navy);
  text-decoration: none;
  font-weight: 600;
  flex: 1 1 18rem;
}
.doc-link:hover .doc-name { color: var(--rt-blue); text-decoration: underline; }
.doc-icon { color: var(--rt-ember); flex: none; }
.doc-icon .hg { color: var(--rt-ember); }
.doc-rev {
  font-family: var(--rt-font-mono);
  font-size: 0.75rem;
  color: var(--rt-ink-faint);
}
.doc-kind {
  font-family: var(--rt-font-mono);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--rt-ember-shade);
  background: var(--rt-white);
  border: 1px solid var(--rt-border);
  border-radius: 100px;
  padding: 0.1rem 0.45rem;
}

/* --------------------------------------------------------------------------
   Contact routes
   --------------------------------------------------------------------------
   The left column of the contact page: Call, Email, Visit, stacked beside the
   form rather than in a row above it. Three cards across the full width read
   as the page's main content, which pushed the form, the thing the page is
   for, below the fold on a laptop.
   -------------------------------------------------------------------------- */

.contact-routes {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: grid;
  gap: 1.35rem;
}
.contact-routes > li {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 0 0.85rem;
  align-items: start;
  padding-top: 1.35rem;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}
.contact-routes > li:first-child { padding-top: 0; border-top: 0; }
.contact-routes .hg { color: var(--rt-ember); flex: none; margin-top: 0.15rem; }

.contact-route-label {
  display: block;
  font-family: var(--rt-font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rt-ember-tint);
  margin-bottom: 0.3rem;
}
.contact-route-value {
  font-family: var(--rt-font-display);
  font-size: 1.25rem;
  line-height: 1.3;
  margin: 0 0 0.3rem;
  color: #fff;
}
.contact-route-value a {
  color: #fff;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.35);
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}
.contact-route-value a:hover { border-bottom-color: var(--rt-ember); }
.contact-route-address { font-style: normal; }
.contact-route-note {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.72);
  margin: 0;
  max-width: 46ch;
}

/* ==========================================================================
   Explanatory panels
   --------------------------------------------------------------------------
   These replaced the drawings that were only ever text in boxes. The visual
   weight is carried by the hieroglyph set rather than by a border: a mark, a
   heading and a line of explanation, on the page's own type scale, as real
   text that reflows and can be selected.

   Rendered by includes/components/panel.php from includes/data/panels.php.
   ========================================================================== */

.panel { margin: 0; }

.panel-eyebrow {
  font-family: var(--rt-font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rt-ember-shade);
  margin: 0 0 1.25rem;
}

/* ---- cards, chain and steps all run as one list ------------------------- */

.panel-items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1rem;
  /* --panel-cols is set by the component from the item count, so a panel of
     five does not lay out four across with one stranded underneath. The
     minmax floor still wins on a narrow screen, where everything stacks. */
  grid-template-columns: repeat(var(--panel-cols, 3), minmax(0, 1fr));
  counter-reset: panel;
}
.panel-item {
  position: relative;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 0 0.8rem;
  align-items: start;
  padding: 1.15rem 1.25rem;
  background: var(--rt-white);
  border: 1px solid var(--rt-border);
  border-top: 3px solid var(--rt-ember);
  border-radius: 0 0 var(--rt-radius) var(--rt-radius);
}
.panel-glyph { color: var(--rt-ember); flex: none; margin-top: 0.1rem; }
.panel-glyph.hg { color: var(--rt-ember); }
.panel-body { min-width: 0; }
.panel-item-title {
  font-size: 1rem;
  line-height: 1.35;
  margin: 0 0 0.3rem;
  color: var(--rt-navy);
}
.panel-item p {
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--rt-ink-muted);
  margin: 0;
  max-width: 44ch;
}
.panel-step {
  position: absolute;
  right: 0.9rem;
  bottom: 0.6rem;
  font-family: var(--rt-font-mono);
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--rt-ember);
  opacity: 0.28;
}

/* A chain reads left to right, so each step but the first carries a mark
   showing it follows from the one before. Hidden on a phone, where the cards
   stack and the arrow would point at the wrong edge. */
@media (max-width: 900px) { .panel-items { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .panel-items { grid-template-columns: minmax(0, 1fr); } }

@media (min-width: 720px) {
  .panel-chain .panel-item + .panel-item::before {
    content: "";
    position: absolute;
    left: -0.72rem;
    top: 1.9rem;
    width: 0.45rem;
    height: 0.45rem;
    border-top: 2px solid var(--rt-border-strong, #BFCAD4);
    border-right: 2px solid var(--rt-border-strong, #BFCAD4);
    transform: rotate(45deg);
  }
}

/* ---- compare ------------------------------------------------------------ */

.panel-columns {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}
.panel-column {
  background: var(--rt-white);
  border: 1px solid var(--rt-border);
  border-top: 3px solid var(--rt-teal);
  border-radius: 0 0 var(--rt-radius) var(--rt-radius);
  padding: 1.15rem 1.25rem;
}
.panel-column-title {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 1.0625rem;
  margin: 0 0 0.5rem;
  color: var(--rt-navy);
}
.panel-column .panel-glyph { color: var(--rt-teal); margin-top: 0; }
.panel-column .panel-glyph.hg { color: var(--rt-teal); }
.panel-badge {
  display: inline-block;
  font-family: var(--rt-font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  color: var(--rt-teal-shade);
  background: var(--rt-surface-subtle);
  border-radius: 100px;
  padding: 0.15rem 0.55rem;
  margin: 0 0 0.85rem;
}
.panel-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.45rem;
}
.panel-list li {
  position: relative;
  padding-left: 1rem;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--rt-ink-muted);
}
.panel-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 5px;
  height: 5px;
  background: var(--rt-teal);
  transform: rotate(45deg);
}

/* ---- ledger: a question on the left, the document that answers it on the
       right. Two columns on a desktop, stacked on a phone, because the answer
       is short and the question is not. -------------------------------------- */

.panel-ledger { margin: 0; }
.panel-ledger-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.5rem 1.5rem;
  align-items: baseline;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--rt-grey);
}
.panel-ledger-row:first-child { border-top: 1px solid var(--rt-grey); }
.panel-ledger dt {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  min-width: 0;
  font-weight: 600;
  color: var(--rt-navy);
}
.panel-ledger dd {
  margin: 0;
  text-align: right;
  font-weight: 600;
  color: var(--rt-ember-shade);
}
@media (max-width: 560px) {
  .panel-ledger-row { grid-template-columns: minmax(0, 1fr); }
  .panel-ledger dd { text-align: left; }
}

/* ---- the dark summary block ---------------------------------------------- */

.panel-note {
  margin-top: 1rem;
  padding: 1.25rem 1.4rem;
  background: var(--rt-navy);
  border-radius: var(--rt-radius);
  color: #fff;
}
.panel-note h3 {
  font-size: 1.0625rem;
  margin: 0 0 0.4rem;
  color: #fff;
}
.panel-note p {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.84);
  max-width: 76ch;
}
.panel-fine {
  margin-top: 0.6rem !important;
  font-size: 0.8125rem !important;
  color: rgba(255, 255, 255, 0.62) !important;
}
.panel-source {
  font-size: 0.8125rem;
  color: var(--rt-ink-faint);
  margin: 0.9rem 0 0;
  max-width: 76ch;
}


/* --------------------------------------------------------------------------
   Printer photo gallery (build 40)
   One frame and a row of thumbnails. The frame is 4:3, which is every
   gallery photograph's own shape; the studio shot that opens each gallery is
   a little narrower and sits on white, so it is contained rather than
   cropped. See includes/components/gallery.php.
   -------------------------------------------------------------------------- */
.product-hero-figure.has-gallery {
  padding: 0;
  border: 0;
  background: transparent;
  display: block;
}
.product-gallery { display: grid; gap: 0.75rem; }
.gallery-stage {
  aspect-ratio: 4 / 3;
  background: var(--rt-white);
  border: 1px solid var(--rt-border);
  border-radius: var(--rt-radius-lg);
  overflow: hidden;
  box-shadow: var(--rt-shadow);
}
.gallery-stage picture { display: block; width: 100%; height: 100%; }
.gallery-stage img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: opacity 0.25s ease;
}
.gallery-stage.is-loading img { opacity: 0.4; }
.gallery-thumbs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(var(--thumbs, 6), minmax(0, 1fr));
  gap: 0.5rem;
}
.gallery-thumb {
  display: block;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--rt-border);
  border-radius: var(--rt-radius);
  overflow: hidden;
  background: var(--rt-white);
  opacity: 0.7;
  transition: opacity 0.2s ease, box-shadow 0.2s ease;
}
.gallery-thumb picture { display: block; width: 100%; height: 100%; }
.gallery-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gallery-thumb:hover,
.gallery-thumb:focus-visible { opacity: 1; }
.gallery-thumb:focus-visible { outline: 2px solid var(--rt-blue); outline-offset: 2px; }
.gallery-thumb[aria-current="true"] {
  opacity: 1;
  border-color: var(--rt-ember);
  box-shadow: 0 0 0 2px var(--rt-ember);
}
@media (max-width: 560px) {
  .gallery-thumbs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .gallery-stage img,
  .gallery-thumb { transition: none; }
}

/* --------------------------------------------------------------------------
   Scene keys (build 40)
   The labels of a drawing that a photograph replaced, set under the
   photograph in the same figure. Small, tabular, and clearly part of the
   figure rather than a section of the page. See
   includes/components/scene-key.php.
   -------------------------------------------------------------------------- */
.scene-key {
  padding: clamp(1rem, 2.4vw, 1.5rem);
  background: var(--rt-white);
  border-top: 1px solid var(--rt-border);
}
.micr-figure .scene-key {
  margin-top: 1rem;
  border: 1px solid var(--rt-border);
  border-radius: var(--rt-radius);
}
.micr-figure img { width: 100%; height: auto; display: block; border-radius: var(--rt-radius); }
/* Scoped under .scene-key so a key inside .prose (guides, blog posts) keeps
   its own colours: .prose p would otherwise win and set the note's body text
   in dark ink on the navy panel. */
.scene-key .scene-key-title {
  font-size: var(--rt-fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rt-ember-shade);
  margin: 0 0 0.85rem;
}
.scene-key-items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(var(--scene-cols, 3), minmax(0, 1fr));
  gap: 0.9rem 1.25rem;
  counter-reset: scene;
}
.scene-key-items li {
  display: grid;
  gap: 0.2rem;
  align-content: start;
  padding-top: 0.65rem;
  border-top: 2px solid var(--rt-border);
}
.scene-key-steps .scene-key-items li { counter-increment: scene; }
.scene-key-steps .scene-key-items li::before {
  content: counter(scene, decimal-leading-zero);
  font-family: var(--rt-font-mono, ui-monospace, monospace);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: var(--rt-ember-shade);
}
.scene-key-term { font-weight: 600; font-size: 0.9375rem; color: var(--rt-navy); }
.scene-key-text { font-size: 0.875rem; line-height: 1.5; color: var(--rt-ink-muted); }
.scene-key-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
}
.scene-key-column { padding-top: 0.65rem; border-top: 2px solid var(--rt-border); }
.scene-key-column + .scene-key-column { border-top-color: var(--rt-ember); }
.scene-key .scene-key-column-title { margin: 0; font-weight: 600; font-size: 1rem; color: var(--rt-navy); }
.scene-key .scene-key-sub { margin: 0.15rem 0 0.55rem; font-size: 0.8125rem; color: var(--rt-ink-faint); }
.scene-key-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; }
.scene-key-list li {
  position: relative;
  padding-left: 1rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--rt-ink-muted);
}
.scene-key-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 0.45rem;
  height: 2px;
  background: var(--rt-ember);
}
.scene-key-ledger { margin: 0; }
.scene-key-ledger > div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.5rem 0;
  border-top: 1px solid var(--rt-border);
}
.scene-key-ledger dt { font-weight: 600; font-size: 0.9375rem; color: var(--rt-navy); }
.scene-key-ledger dd {
  margin: 0;
  font-size: 0.9375rem;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--rt-ink-muted);
}
.scene-key .scene-key-note {
  margin: 1rem 0 0;
  padding: 0.9rem 1.1rem;
  background: var(--rt-navy);
  border-radius: var(--rt-radius);
  font-size: 0.9375rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.86);
}
.scene-key .scene-key-note strong { color: #fff; }
.scene-key .scene-key-fine {
  margin: 0.75rem 0 0;
  font-size: 0.8125rem;
  color: var(--rt-ink-faint);
  max-width: 76ch;
}
@media (max-width: 860px) {
  .scene-key-items { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .scene-key-items,
  .scene-key-columns { grid-template-columns: minmax(0, 1fr); }
  .scene-key-ledger > div { flex-direction: column; gap: 0.15rem; }
  .scene-key-ledger dd { text-align: left; }
}

/* ==========================================================================
   Build 41
   ========================================================================== */

/* Full-bleed home hero. The photograph is the section; the copy sits over its
   dark left side. Deep Navy is the ground, so on a cold cache the hero is a
   dark panel with the headline on it, never an empty box. */
.hero-bleed {
  background: var(--rt-navy);
  min-height: clamp(560px, 72vh, 720px);
  display: flex;
  align-items: center;
  padding-block: clamp(4rem, 9vw, 7rem);
}
.hero-bleed::after { display: none; }
.hero-bleed-media {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: var(--rt-navy);
}
.hero-bleed-media picture { display: block; width: 100%; height: 100%; }
.hero-bleed-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 72% 100%;
  border-radius: 0;
  filter: none;
}
.hero-bleed::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(0, 27, 53, 0.94) 0%, rgba(0, 27, 53, 0.82) 34%, rgba(0, 27, 53, 0.25) 64%, rgba(0, 27, 53, 0.05) 100%),
    linear-gradient(0deg, rgba(0, 27, 53, 0.55) 0%, rgba(0, 27, 53, 0) 30%);
}
.hero-bleed-inner { width: 100%; }
.hero-bleed .hero-copy { max-width: 38rem; }
.hero-shown {
  position: absolute;
  right: var(--rt-gutter);
  bottom: 1rem;
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.82);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}
.hero-shown:hover, .hero-shown:focus-visible { color: #fff; border-color: var(--rt-ember); }
@media (max-width: 780px) {
  .hero-bleed { min-height: 0; flex-direction: column; align-items: stretch; }
  .hero-bleed::before {
    background: linear-gradient(0deg, rgba(0, 27, 53, 0.96) 0%, rgba(0, 27, 53, 0.86) 55%, rgba(0, 27, 53, 0.55) 100%);
  }
  .hero-shown { position: static; display: inline-block; margin: 1.5rem var(--rt-gutter) 0; }
}

/* Every frame a hero photograph loads into has a navy ground. */
.hero-scene,
.hero-bleed-media,

.post-hero-figure { background-color: var(--rt-navy); }

/* Product cards with an in-scene photograph: the photo fills the tile. */
.product-card figure.is-scene {
  display: block;
  padding: 0;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--rt-navy);
}
.product-card figure.is-scene picture { display: block; width: 100%; height: 100%; }
.product-card figure.is-scene img {
  max-height: none;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.class-card figure.is-scene { aspect-ratio: 16 / 9; }
.class-models { font-size: 0.875rem; color: var(--rt-ink-muted); }

/* A studio cutout that has to stay on a card gets a darker tile, so a light
   gray machine does not dissolve into a light gray background. */
.product-card figure:not(.is-scene) { background: linear-gradient(180deg, #E6ECF1 0%, #CBD5DE 100%); }

/* A photograph that fills the second column of a section head, so the column
   beside the text is never left empty. */
.section-split { align-items: center; margin-bottom: clamp(2rem, 4vw, 3rem); }
.section-figure { margin: 0; border-radius: var(--rt-radius-lg); overflow: hidden; background: var(--rt-navy); }
.section-figure picture, .section-figure img { display: block; width: 100%; height: auto; }
.section-figure figcaption {
  background: var(--rt-white);
  padding: 0.75rem 1rem 0;
  font-size: 0.875rem;
  color: var(--rt-ink-faint);
}
.micr-figure.section-figure { margin-top: 1.5rem; }

/* The challenger line: one sentence, set large, once. */
.statement-band {
  background: var(--rt-gradient-deep);
  color: var(--rt-white);
  padding-block: clamp(2.25rem, 5vw, 3.5rem);
}
.statement {
  font-family: var(--rt-font-display);
  font-size: clamp(1.375rem, 1.6vw + 1rem, 2.125rem);
  line-height: 1.3;
  font-weight: 600;
  max-width: 46ch;
  margin: 0;
  padding-left: 1.25rem;
  border-left: 4px solid var(--rt-ember);
}

/* Leadership: one portrait frame for every person (build 41). */
.leader-card {
  display: grid;
  grid-template-columns: 9.5rem minmax(0, 1fr);
  gap: 1.25rem;
  align-items: start;
  background: var(--rt-white);
  border: 1px solid var(--rt-border);
  border-radius: var(--rt-radius-lg);
  padding: 1.25rem;
}
.leader-portrait {
  margin: 0;
  aspect-ratio: 4 / 5;
  border-radius: var(--rt-radius);
  overflow: hidden;
  background: var(--rt-navy);
}
.leader-portrait picture, .leader-portrait img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
}
.leader-body h3 { margin-bottom: 0.5rem; }
.leader-body p { font-size: 0.9375rem; }
.leader-linkedin {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.875rem;
  font-weight: 600;
}
.leader-linkedin svg { width: 18px; height: 18px; fill: currentColor; flex: none; }
@media (max-width: 520px) {
  .leader-card { grid-template-columns: 1fr; }
  .leader-portrait { max-width: 12rem; }
}

/* Why Rosetta Technologies: the three-script stele and the dark stat row. */
.stele {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  border: 2px solid var(--rt-navy);
  border-radius: 6px 6px 2px 2px;
  background: linear-gradient(180deg, #24313d 0%, #121a22 100%);
  color: #fff;
}
.stele li {
  display: grid;
  gap: 0.15rem;
  padding: 0.9rem 1.1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}
.stele li:last-child { border-bottom: 0; }
.stele-script {
  font-family: var(--rt-font-display);
  font-weight: 700;
  font-size: 1.0625rem;
}
.stele-reader { font-size: 0.8125rem; color: rgba(255, 255, 255, 0.72); }
.stele-glyphs { display: flex; gap: 0.5rem; margin-top: 0.35rem; color: var(--rt-ember-tint); }
.stele-glyphs .hg { color: var(--rt-ember-tint); }
.stat-row-dark { gap: 1px; background: rgba(255, 255, 255, 0.14); border-radius: var(--rt-radius-lg); overflow: hidden; }
.stat-row-dark .stat { background: rgba(0, 27, 53, 0.55); }
.on-dark .stat-row-dark .stat-value { color: var(--rt-ember-tint); }
.on-dark .stat-row-dark .stat-label { color: rgba(255, 255, 255, 0.8); }

/* Home hero callouts on the full-bleed scene (restored October 2). */
.hero-bleed-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: end;
}
.hero-callouts {
  display: flex;
  flex-direction: row-reverse;
  align-items: flex-start;
  align-self: start;
  gap: 0.9rem;
  margin-right: -0.5rem;
}
/* Both cards ride above the machine, over the light bars, so neither covers
   the press. */
.hero-callouts .hero-machine,
.hero-callouts .hero-stat {
  position: static;
  flex: 0 1 15.5rem;
  max-width: 15.5rem;
  margin: 0;
}
.hero-callouts .hero-stat { padding: 0.8rem 1rem; }
.hero-callouts .hero-stat .hero-stat-value { font-size: 1.75rem; }
.hero-callouts .hero-stat p { font-size: 0.78rem; line-height: 1.4; }
@media (max-width: 980px) {
  .hero-bleed-inner { grid-template-columns: minmax(0, 1fr); }
  .hero-callouts { flex-direction: column; align-items: stretch; margin-right: 0; }
  .hero-callouts .hero-machine,
  .hero-callouts .hero-stat { max-width: none; flex-basis: auto; }
}

/* MICR quality checklist download page. */
.checklist-cover { margin: 0; justify-self: center; max-width: 360px; width: 100%; }
.checklist-cover a { display: block; border-radius: var(--rt-radius-lg); overflow: hidden; background: var(--rt-navy); box-shadow: 0 30px 60px -20px rgba(0, 27, 53, 0.45); transition: transform 0.2s ease; }
.checklist-cover a:hover, .checklist-cover a:focus-visible { transform: translateY(-4px); }
.checklist-cover picture, .checklist-cover img { display: block; width: 100%; height: auto; }
.magnet .form-result { margin: 0 0 1rem; padding: 0.75rem 1rem; font-size: 0.9375rem; }

/* Brochure covers (October 2026 editions). */
.doc-thumb {
  flex: none;
  width: 48px;
  aspect-ratio: 1020 / 1320;
  border-radius: 3px;
  overflow: hidden;
  background: var(--rt-navy);
  box-shadow: 0 2px 6px rgba(0, 27, 53, 0.25);
}
.doc-thumb picture, .doc-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.doc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr));
  gap: clamp(1.25rem, 2.5vw, 2rem);
}
.doc-card { display: flex; flex-direction: column; gap: 0.9rem; }
.doc-card-cover {
  display: block;
  aspect-ratio: 1020 / 1320;
  border-radius: var(--rt-radius);
  overflow: hidden;
  background: var(--rt-navy);
  box-shadow: 0 18px 36px -18px rgba(0, 27, 53, 0.5);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.doc-card-cover:hover, .doc-card-cover:focus-visible { transform: translateY(-4px); box-shadow: 0 24px 44px -18px rgba(0, 27, 53, 0.6); }
.doc-card-cover picture, .doc-card-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.doc-card-placeholder { display: grid; place-items: center; width: 100%; height: 100%; color: var(--rt-ember-tint); }
.doc-card-placeholder .hg { color: var(--rt-ember-tint); }
.doc-card-body h3 { font-size: 1.0625rem; margin: 0 0 0.25rem; }
.doc-card-meta { font-size: 0.8125rem; color: var(--rt-ink-faint); margin: 0 0 0.75rem; }
.doc-card-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; }
.octf-btn-sm { padding: 0.55rem 0.95rem; font-size: 0.8125rem; }

/* ===========================================================================
   Build 43: stat grids that never leave an empty cell
   ---------------------------------------------------------------------------
   The stat row draws its dividers with a 1px gap over a tinted background.
   auto-fit put four facts into three columns inside a half-width column, so
   the fourth sat alone and the two empty cells showed as a blank tinted block.
   The row now sizes itself to the width of its own wrapper (a container
   query, so it works the same in a full-width band or a half column):
   one column when narrow, two, then all of them in one line when there is
   room. An odd last item spans the row, so no cell is ever left empty.
   ========================================================================= */
.stat-wrap { container-type: inline-size; }
.stat-wrap .stat-row { grid-template-columns: minmax(0, 1fr); }
@container (min-width: 22rem) {
  .stat-wrap .stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat-wrap .stat-row > .stat:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@container (min-width: 46rem) {
  .stat-wrap .stat-row:has(> .stat:nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stat-wrap .stat-row:has(> .stat:nth-child(4):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .stat-wrap .stat-row:has(> .stat:nth-child(3):last-child) > .stat:last-child { grid-column: auto; }
}
@container (min-width: 58rem) {
  .stat-wrap .stat-row:has(> .stat:nth-child(5):last-child) { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .stat-wrap .stat-row:has(> .stat:nth-child(5):last-child) > .stat:last-child { grid-column: auto; }
}
.stat-row-dark .stat { padding: 1.5rem 1.25rem; }

/* ===========================================================================
   Build 43: no stranded last row
   ---------------------------------------------------------------------------
   Checked every page at 360, 768, 1024, 1280, 1440 and 1920 px. About thirty
   grids left one card alone on the last row at some width (three cards in a
   two-column tablet layout, four or five printers in a row of three, seven
   segments in two columns). A lone card next to empty space reads as
   something that failed to load. The rules below either change the column
   count so the set divides evenly, or center the last row so it reads as the
   end of the set.
   ========================================================================= */

/* Card grids, three across on a wide screen. */
@media (min-width: 981px) {
  /* Four cards: four across when there is room, otherwise two by two. */
  .grid-3:has(> :nth-child(4):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  /* Any other count that does not divide by three: a six-track grid where
     each card takes two tracks, so a short last row can sit in the middle. */
  .grid-3:has(> :nth-child(3n+5):last-child),
  .grid-3:has(> :nth-child(3n+7):last-child) { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .grid-3:has(> :nth-child(3n+5):last-child) > *,
  .grid-3:has(> :nth-child(3n+7):last-child) > * { grid-column: span 2; }
  .grid-3:has(> :nth-child(3n+5):last-child) > :nth-last-child(2) { grid-column: 2 / span 2; }
  .grid-3:has(> :nth-child(3n+7):last-child) > :last-child { grid-column: 3 / span 2; }
}
@media (min-width: 981px) and (max-width: 1180px) {
  .grid-3:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Card grids in their two-column state (two-up everywhere above a phone;
   three- and four-up between a phone and 980 px): an odd last card is
   centered under the others instead of left alone at the left edge. */
@media (min-width: 621px) {
  .grid-2:has(> :last-child:nth-child(odd):nth-child(n+3)) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .grid-2:has(> :last-child:nth-child(odd):nth-child(n+3)) > * { grid-column: span 2; }
  .grid-2:has(> :last-child:nth-child(odd):nth-child(n+3)) > :last-child { grid-column: 2 / span 2; }
}
@media (min-width: 621px) and (max-width: 980px) {
  .grid-3:has(> :last-child:nth-child(odd):nth-child(n+3)),
  .grid-4:has(> :last-child:nth-child(odd):nth-child(n+3)) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .grid-3:has(> :last-child:nth-child(odd):nth-child(n+3)) > *,
  .grid-4:has(> :last-child:nth-child(odd):nth-child(n+3)) > * { grid-column: span 2; }
  .grid-3:has(> :last-child:nth-child(odd):nth-child(n+3)) > :last-child,
  .grid-4:has(> :last-child:nth-child(odd):nth-child(n+3)) > :last-child { grid-column: 2 / span 2; }
}

/* Numbered panels (chains, steps, cards). Five or seven on a wide screen use
   the same centered last row; an odd count in the two-column tablet state
   lets the last item run the full width, since these are text, not pictures. */
@media (min-width: 901px) {
  .panel-items:has(> :nth-child(5):last-child),
  .panel-items:has(> :nth-child(7):last-child) { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .panel-items:has(> :nth-child(5):last-child) > *,
  .panel-items:has(> :nth-child(7):last-child) > * { grid-column: span 2; }
  .panel-items:has(> :nth-child(5):last-child) > :nth-last-child(2) { grid-column: 2 / span 2; }
  .panel-items:has(> :nth-child(7):last-child) > :last-child { grid-column: 3 / span 2; }
}
@media (min-width: 561px) and (max-width: 900px) {
  .panel-items > :last-child:nth-child(odd):nth-child(n+3) { grid-column: 1 / -1; }
}
@media (min-width: 561px) and (max-width: 860px) {
  .scene-key-items > :last-child:nth-child(odd):nth-child(n+3) { grid-column: 1 / -1; }
}

/* Side-by-side comparison panels: three sit in one row when they fit; when
   only two fit, the third is centered at the same width as the others. */
.panel-columns:has(> :nth-child(3):last-child) {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.panel-columns:has(> :nth-child(3):last-child) > * {
  flex: 1 1 15rem;
  max-width: calc(50% - 0.5rem);
}
@media (min-width: 1100px) {
  .panel-columns:has(> :nth-child(3):last-child) > * { max-width: none; }
}
@media (max-width: 560px) {
  .panel-columns:has(> :nth-child(3):last-child) > * { max-width: none; flex-basis: 100%; }
}

/* Edition jump lists of four (Software, Support): one row of four. */
@media (min-width: 861px) {
  .aside-wide .edition-jump:has(> :nth-child(4):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Specification groups have different lengths, so a two-column grid left
   tall gaps under the short tables and the last table alone. Two balanced
   newspaper columns instead. */
@media (min-width: 900px) {
  .spec-groups { display: block; columns: 2; column-gap: clamp(1.5rem, 3vw, 2.25rem); }
  .spec-groups > * { break-inside: avoid; margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
}

/* Footer between a phone and a laptop: the brand column runs the full width
   above the four link columns, which then sit two by two. */
@media (min-width: 621px) and (max-width: 1080px) {
  .footer-grid > :first-child { grid-column: 1 / -1; }
}

/* Product gallery thumbnails on a phone: five in one row. */
@media (max-width: 560px) {
  .gallery-thumbs:has(> :nth-child(5):last-child) { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* Product gallery: the studio photographs are 1120 x 880 and the scenes
   1200 x 900, so "contain" in a 4:3 frame left a thin off-white band down
   both sides of the studio shot, which read as an image that had not
   finished loading. "cover" fills the frame and trims only white margin. */
.gallery-stage img { object-fit: cover; }

/* Downloads page on a phone: two brochure covers per row instead of one
   320 px cover per screen, which made the list fifteen screens long. */
@media (max-width: 480px) {
  .doc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
  .doc-grid > :last-child:nth-child(odd):nth-child(n+3) {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc(50% - 0.375rem);
  }
}

/* ===========================================================================
   Site search (build 45)
   ---------------------------------------------------------------------------
   A magnifier in the header opens a search box under it; /search/ lists the
   results. Everything is searched on this server (includes/search.php).
   ========================================================================= */

/* Header order: logo, menu, magnifier, Contact us. On a phone the magnifier
   sits beside the menu button. */
.site-logo { order: 0; }
.main-nav { order: 1; }
.header-search-toggle { order: 2; }
.header-cta { order: 3; }
.nav-toggle { order: 4; }

.header-search-toggle {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: var(--rt-radius);
  color: var(--rt-navy);
  text-decoration: none;
}
.header-search-toggle:hover,
.header-search-toggle.is-active { background: var(--rt-surface-subtle); color: var(--rt-ember-shade); }
.header-search-toggle:focus-visible { outline: 2px solid var(--rt-blue); outline-offset: 2px; }
@media (max-width: 980px) {
  .header-search-toggle { margin-left: auto; width: 46px; height: 46px; }
  .nav-toggle { margin-left: 0.5rem; }
}

.site-search {
  border-top: 1px solid var(--rt-border);
  background: var(--rt-white);
  padding: 0.9rem 0;
  box-shadow: 0 8px 18px rgba(0, 27, 53, 0.06);
}
.site-search[hidden] { display: none; }

.search-form {
  display: flex;
  gap: 0.6rem;
  width: 100%;
  max-width: 46rem;
}
.search-form input[type="search"] {
  flex: 1 1 auto;
  min-width: 0;
  height: 48px;
  padding: 0 1rem;
  font: inherit;
  font-size: 1rem;
  color: var(--rt-navy);
  background: var(--rt-white);
  border: 1px solid var(--rt-border-strong);
  border-radius: var(--rt-radius);
}
.search-form input[type="search"]:focus { outline: 2px solid var(--rt-blue); outline-offset: 1px; border-color: var(--rt-blue); }
.search-form .octf-btn { flex: 0 0 auto; height: 48px; padding-block: 0; display: inline-flex; align-items: center; }
.search-form-lg { margin-top: 1.25rem; }
.search-form-lg input[type="search"],
.search-form-lg .octf-btn { height: 54px; }
.error-page .search-form { margin-inline: auto; }

.search-count { margin: 0.9rem 0 0; color: var(--rt-ink-muted); font-size: 0.9375rem; }

.search-layout > * { max-width: 52rem; }
.search-layout > .search-empty { max-width: none; }
.search-results { list-style: none; margin: 0; padding: 0; }
.search-result {
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--rt-border);
}
.search-result:first-child { padding-top: 0.25rem; }
.search-result-section {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--rt-ember-shade);
}
.search-result-title { font-size: 1.25rem; margin: 0.3rem 0 0.35rem; line-height: 1.3; }
.search-result-title a { color: var(--rt-navy); text-decoration: none; }
.search-result-title a:hover { color: var(--rt-blue); text-decoration: underline; }
.search-result-snippet { margin: 0; color: var(--rt-ink-muted); line-height: 1.6; }
.search-result-snippet mark { background: rgba(237, 125, 34, 0.18); color: var(--rt-navy); padding: 0 0.1em; border-radius: 2px; }
.search-result-url { display: block; margin-top: 0.35rem; font-size: 0.8125rem; color: var(--rt-ink-faint); overflow-wrap: anywhere; }
.search-result-related { display: inline-block; margin-top: 0.35rem; font-size: 0.875rem; }

.search-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 1.75rem;
  color: var(--rt-ink-muted);
  font-size: 0.9375rem;
}
.search-empty h2 { font-size: 1.25rem; }
.search-empty .guide-card h3 { margin: 0.5rem 0 0; font-size: 1rem; }

@media (max-width: 560px) {
  .search-form { flex-direction: row; }
  .search-form .octf-btn { padding-inline: 1rem; }
}