/* ═══════════════════════════════════════════════════════════
   OPSDESK — page-specific styles (loaded in addition to styles.css)
   Palette: hero/product blue #4a93e0, hero bg #080d18, dark UI recreation tones
   ═══════════════════════════════════════════════════════════ */

:root {
  --od-bg: #080d18;
  --od-blue: #4a93e0;
  --od-blue-bright: #4FA3F0;

  /* ── Real OpsDesk app tokens — copied from
     bass-aero-ops/frontend/src/styles/tokens.css so the interface
     recreations match the product exactly rather than approximating it. */
  --oda-primary: #cc0000;
  --oda-bg: #f5f5f5;
  --oda-surface: #ffffff;
  --oda-border: #e0e0e0;
  --oda-text: #1a1a1a;
  --oda-muted: #666666;
  --oda-sidebar: #1a1a1a;
  --oda-sidebar-text: #d6d6d6;
  --oda-success: #16a34a;
  --oda-warning: #d97706;
  --oda-danger: #dc2626;
  /* module accents, per page components in the real app */
  --oda-gh: #cc0000;        /* Local Ground Handling */
  --oda-permits: #7c3aed;   /* Flight Permits */
  --oda-ferry: #059669;     /* Ferry / Overseas */
  --oda-adhoc: #0891b2;     /* Adhoc Services */
}

@font-face { font-family: 'Montserrat-fallback'; src: local('Arial'); }

/* ── Hero — "the screen in the dark" ───────────────────────────
   The laptop screen is the scene's light source: a blue bloom spills
   out of it, falls off into black, and appears to light the copy on the
   right. Flight-path arcs sweep the full viewport catching that glow.
   ───────────────────────────────────────────────────────────── */
.od-hero {
  background: var(--od-bg); min-height: 100vh; position: relative; overflow: hidden;
  display: flex; align-items: center; padding: 150px var(--pad-x) 120px;
}
/* vignette — pulls the corners into black so the glow reads as the only light */
.od-hero::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(120% 105% at 34% 48%, rgba(5,8,16,0) 34%, rgba(5,8,16,.62) 78%, rgba(5,8,16,.9) 100%);
}
.od-hero-grid {
  display: grid; grid-template-columns: 46% 1fr; gap: 56px; align-items: center;
  width: 100%; position: relative; z-index: 2;
  opacity: calc(1 - var(--hero-exit, 0));
  transform: translateY(calc(var(--hero-exit, 0) * -55px));
  will-change: opacity, transform;
}
.od-starfield { position: absolute; inset: 0; z-index: 0; filter: brightness(calc(1 - var(--hero-exit, 0) * .5)); }
.od-star { position: absolute; border-radius: 50%; background: #fff; animation: odTwinkle 4s ease-in-out infinite; }
@keyframes odTwinkle { 0%, 100% { opacity: .12; } 50% { opacity: .6; } }

/* full-bleed flight paths sweeping the hero */
.od-paths { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; }
.od-path {
  fill: none; stroke: var(--od-blue-bright); stroke-width: 1.1;
  stroke-dasharray: var(--len); stroke-dashoffset: var(--len);
  animation: odDraw 1.7s ease-out var(--d, 1.1s) forwards;
  opacity: .3;
}
@keyframes odDraw { to { stroke-dashoffset: 0; } }

.od-mark-col { display: flex; flex-direction: column; align-items: center; text-align: center; position: relative; }
.od-mark-wrap { position: relative; width: min(440px, 94%); aspect-ratio: 156 / 105; }
/* the bloom, centred on the laptop screen inside the mark's viewBox */
.od-mark-wrap::before {
  content: ''; position: absolute; left: 50%; top: 42%; width: 260%; height: 300%;
  transform: translate(-50%, -50%); pointer-events: none; z-index: 0;
  background: radial-gradient(circle, rgba(79,163,240,.42) 0%, rgba(79,163,240,.16) 26%, rgba(79,163,240,.05) 48%, rgba(79,163,240,0) 68%);
  opacity: 0; animation: odBloomIn 1.5s ease-out .45s forwards;
}
@keyframes odBloomIn { to { opacity: 1; } }
.od-mark-svg {
  position: relative; z-index: 1; width: 100%; height: 100%; opacity: 0; transform: scale(.9);
  animation: odMarkIn .8s ease-out .3s forwards;
  filter: drop-shadow(0 0 26px rgba(79,163,240,.5)) drop-shadow(0 18px 46px rgba(0,0,0,.55));
}
@keyframes odMarkIn { to { opacity: 1; transform: scale(1); } }
.od-wordmark { font-family: 'Montserrat', 'Arial', sans-serif; font-size: clamp(38px, 4.6vw, 62px);
  letter-spacing: -0.015em; margin-top: 26px; opacity: 0; transform: translateY(10px);
  animation: odFadeUp .55s ease-out 1.8s forwards; position: relative; z-index: 1; }
.od-wordmark b { font-weight: 700; color: #fff; }
.od-wordmark span { font-weight: 300; color: var(--od-blue-bright); }
@keyframes odFadeUp { to { opacity: 1; transform: none; } }

.od-hero-copy .od-eyebrow { opacity: 0; transform: translateY(10px); animation: odFadeUp .55s ease-out 2.2s forwards; }
.od-hero-copy .od-h1 { opacity: 0; transform: translateY(10px); animation: odFadeUp .6s ease-out 2.45s forwards; }
.od-hero-copy .od-sub { opacity: 0; transform: translateY(10px); animation: odFadeUp .6s ease-out 2.7s forwards; }
.od-eyebrow {
  font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 600; letter-spacing: .26em;
  text-transform: uppercase; color: var(--od-blue); margin-bottom: 26px; font-variant-numeric: tabular-nums;
}
.od-h1 { font-size: clamp(40px, 5.4vw, 76px); font-weight: 800; line-height: 1.02; letter-spacing: -0.03em; color: #fff; margin-bottom: 28px; max-width: 660px; }
.od-sub { font-family: 'DM Sans', sans-serif; font-size: 18px; line-height: 1.65; color: #9aa7bd; max-width: 500px; }
@media (prefers-reduced-motion: reduce) {
  .od-mark-svg, .od-wordmark, .od-eyebrow, .od-h1, .od-sub { animation: none; opacity: 1; transform: none; }
  .od-mark-wrap::before { animation: none; opacity: 1; }
  .od-path { animation: none; stroke-dashoffset: 0; }
  .od-star { animation: none; opacity: .35; }
  .od-toast, .od-modal-overlay, .od-exit-row { transition: none; }
}

/* ── Lifecycle — "the tracking shot" ───────────────────────────
   The content is one flight travelling seven stages, so the camera
   travels it: the section pins and the stages move horizontally past a
   fixed frame as you scroll. Falls back to a vertical stack below
   1025px and under reduced-motion (see the overrides at the end).
   ───────────────────────────────────────────────────────────── */
.od-h2 { font-size: clamp(34px, 4.4vw, 56px); font-weight: 700; letter-spacing: -0.025em; color: var(--head); line-height: 1.08; }
.od-lifecycle { background: var(--base); position: relative; }
.od-lifecycle-pin {
  position: sticky; top: 0; height: 100vh; overflow: hidden;
  display: flex; flex-direction: column; justify-content: center;
  padding: 90px 0 70px;
}
.od-lifecycle-head { text-align: center; padding: 0 var(--pad-x); margin-bottom: clamp(40px, 6vh, 76px); }
/* align-items:flex-start keeps every node at the same Y regardless of how
   many lines a stage title wraps to — the rail is then pinned to the node
   centre (9px = half the 18px node) instead of the track's midpoint. */
/* Trailing padding is deliberately large: at full scroll the track's right
   edge meets the viewport's, so without it the last stages would come to
   rest right-of-centre and never cross the activation line. */
.od-track { display: flex; align-items: flex-start; gap: clamp(40px, 5vw, 84px); padding: 0 32vw 0 max(var(--pad-x), 8vw); position: relative; will-change: transform; }
.od-rail { position: absolute; left: 0; right: 0; top: 9px; height: 2px; background: var(--border); }
.od-rail-fill {
  position: absolute; left: 0; top: 9px; height: 2px; width: 0; background: var(--red);
  box-shadow: 0 0 14px rgba(204,19,9,.75); transition: width .12s linear;
}
.od-stage {
  position: relative; flex: 0 0 auto; width: clamp(240px, 22vw, 330px);
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.od-stage-ghost {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  font-size: clamp(96px, 11vw, 168px); font-weight: 900; line-height: 1;
  color: rgba(255,255,255,.035); letter-spacing: -0.05em; pointer-events: none; z-index: 0;
  transition: color .45s ease;
}
.od-stage.is-active .od-stage-ghost { color: rgba(74,147,224,.09); }
.od-stage.is-billed.is-active .od-stage-ghost { color: rgba(204,19,9,.11); }
.od-stage-node {
  position: relative; z-index: 2; width: 18px; height: 18px; border-radius: 50%;
  background: var(--base); border: 2px solid var(--border); margin-bottom: 26px;
  transition: border-color .4s ease, background .4s ease, box-shadow .4s ease, transform .4s ease;
}
.od-stage.is-active .od-stage-node {
  border-color: var(--od-blue-bright); background: var(--od-blue-bright);
  box-shadow: 0 0 18px rgba(79,163,240,.8); transform: scale(1.15);
}
.od-stage.is-billed.is-active .od-stage-node {
  border-color: var(--red); background: var(--red); box-shadow: 0 0 20px rgba(204,19,9,.85);
}
.od-stage-body { position: relative; z-index: 1; opacity: .45; transform: translateY(6px); transition: opacity .45s ease, transform .45s ease; }
.od-stage.is-active .od-stage-body { opacity: 1; transform: none; }
.od-stage-title { font-size: clamp(19px, 1.7vw, 25px); font-weight: 700; color: var(--head); margin-bottom: 12px; line-height: 1.2; }
.od-stage-chip {
  display: inline-block; font-family: 'DM Sans', sans-serif; font-size: 11.5px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--body); background: var(--even);
  padding: 5px 14px; border-radius: 999px; transition: background .4s ease, color .4s ease, box-shadow .4s ease;
}
.od-stage.is-billed.is-active .od-stage-chip { background: var(--red); color: #fff; box-shadow: 0 0 18px rgba(204,19,9,.5); }
.od-lifecycle-close {
  text-align: center; max-width: 620px; margin: clamp(40px, 6vh, 72px) auto 0; padding: 0 var(--pad-x);
  font-family: 'DM Sans', sans-serif; font-size: clamp(15px, 1.3vw, 18px); color: var(--body); line-height: 1.6;
  opacity: 0; transform: translateY(10px); transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.od-lifecycle-close.is-shown { opacity: 1; transform: none; }

/* ── Interface screens — recreated from the real OpsDesk app ───
   Tokens, module accents and component specs mirror
   bass-aero-ops/frontend/src/styles/{tokens,components,layout}.css.
   Density is deliberately reduced (fewer columns/rows, no per-column
   filter inputs) so each screen reads at a glance on a dark page —
   design language faithful, information volume trimmed.
   ───────────────────────────────────────────────────────────── */
/* The section is a dark room and each screen is a lit panel in it: the
   background carries ambient blue pools, and every frame throws its own
   glow rather than sitting on flat grey. Labels alternate side to give
   the stack a rhythm without shrinking the screens. */
.od-screens {
  padding: clamp(90px, 9vw, 140px) var(--pad-x) clamp(100px, 10vw, 150px);
  border-top: 1px solid var(--border);
  background:
    radial-gradient(1000px 620px at 82% 8%, rgba(74,147,224,.10), transparent 62%),
    radial-gradient(900px 560px at 10% 42%, rgba(74,147,224,.07), transparent 64%),
    radial-gradient(900px 560px at 88% 76%, rgba(74,147,224,.07), transparent 64%),
    linear-gradient(180deg, #212121 0%, #191919 55%, #1d1d1d 100%);
}
.od-screen-block { max-width: 1240px; margin: 0 auto clamp(90px, 10vw, 140px); perspective: 1700px; }
.od-screen-block:last-child { margin-bottom: 0; }

.od-screen-label { margin-bottom: 24px; display: flex; flex-direction: column; gap: 8px; }
.od-screen-block:nth-of-type(even) .od-screen-label { align-items: flex-end; text-align: right; }
.od-screen-eyebrow { display: flex; align-items: baseline; gap: 12px; }
.od-screen-idx {
  font-size: clamp(30px, 3.2vw, 44px); font-weight: 900; line-height: 1;
  color: transparent; -webkit-text-stroke: 1.5px var(--red); letter-spacing: -0.02em;
}
.od-screen-num { font-family: 'DM Sans', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .22em; color: var(--red); text-transform: uppercase; }
.od-screen-caption { font-size: clamp(21px, 2.3vw, 31px); font-weight: 700; color: var(--head); letter-spacing: -0.025em; line-height: 1.2; max-width: 660px; }

.od-frame {
  border-radius: 10px; overflow: hidden; transform-origin: 50% 100%;
  /* ambient bloom (wide + tight) + contact shadow + bezel highlight */
  box-shadow:
    0 0 150px rgba(79,163,240,.34),
    0 0 54px rgba(120,190,255,.20),
    0 34px 70px rgba(0,0,0,.55),
    0 2px 0 rgba(255,255,255,.09) inset;
}
.od-frame.reveal { opacity: 0; transition: opacity .8s var(--ease), transform .8s var(--ease); }
.od-screen-block:nth-of-type(odd) .od-frame.reveal { transform: rotateX(6deg) rotateY(-4deg) translate(34px, 32px) scale(.98); }
.od-screen-block:nth-of-type(even) .od-frame.reveal { transform: rotateX(6deg) rotateY(4deg) translate(-34px, 32px) scale(.98); }
.od-frame.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .od-frame.reveal, .od-frame.reveal.in,
  .od-screen-block:nth-of-type(odd) .od-frame.reveal,
  .od-screen-block:nth-of-type(even) .od-frame.reveal { opacity: 1; transform: none; transition: none; }
}

/* App shell */
.od-app {
  display: flex; background: var(--oda-bg); font-family: 'Inter', sans-serif;
  font-size: 13px; color: var(--oda-text); min-height: 430px;
}
.od-sidebar { width: 186px; flex-shrink: 0; background: var(--oda-sidebar); display: flex; flex-direction: column; }
.od-sidebar-logo { background: #fff; border-radius: 6px; margin: 10px; padding: 9px 10px; display: flex; justify-content: center; }
.od-sidebar-logo img { height: 26px; width: auto; display: block; }
.od-nav { flex: 1; padding: 4px 0; }
.od-nav-item {
  display: flex; align-items: center; gap: 8px; padding: 7px 14px;
  font-size: 12.5px; color: var(--oda-sidebar-text); white-space: nowrap;
}
.od-nav-item.is-active { background: var(--oda-primary); color: #fff; font-weight: 600; }
.od-nav-ico { width: 13px; text-align: center; opacity: .85; flex-shrink: 0; font-size: 11px; }
.od-sidebar-foot { padding: 8px 10px 12px; }
.od-sidebar-foot span { display: block; font-size: 11.5px; color: #8b8b8b; padding: 5px 4px; }

.od-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
/* Topbar + rolling METAR ticker (station red, raw green mono) */
.od-topbar { background: var(--oda-sidebar); display: flex; align-items: center; gap: 10px; padding: 7px 12px; overflow: hidden; }
.od-topbar-burger { color: #d6d6d6; font-size: 14px; flex-shrink: 0; }
.od-ticker { flex: 1; min-width: 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%); }
.od-ticker-inner { display: inline-flex; align-items: center; white-space: nowrap; animation: odTicker 40s linear infinite; }
@keyframes odTicker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.od-ticker-stn { font-size: 13px; font-weight: 700; color: var(--oda-primary); letter-spacing: .5px; }
.od-ticker-raw { font-size: 12px; margin-left: 6px; color: #00AA55; font-family: 'JetBrains Mono', 'Courier New', monospace; }
.od-ticker-sep { padding: 0 14px; color: rgba(204,0,0,.5); }
.od-topbar-user { flex-shrink: 0; text-align: right; line-height: 1.2; }
.od-topbar-user b { display: block; font-size: 11.5px; color: #fff; font-weight: 700; }
.od-topbar-user span { font-size: 10px; color: rgba(255,255,255,.6); }
.od-topbar-brand { flex-shrink: 0; font-size: 12px; font-weight: 700; color: #fff; }
.od-topbar-brand i { font-style: normal; color: #4FA3F0; font-weight: 400; }
@media (prefers-reduced-motion: reduce) { .od-ticker-inner { animation: none; } }

.od-page { flex: 1; padding: 18px 20px; position: relative; overflow: hidden; }
.od-page-h { font-size: 19px; font-weight: 700; color: var(--oda-text); border-left: 3px solid var(--oda-primary); padding-left: 11px; }
.od-page-sub { font-size: 12px; color: var(--oda-muted); margin: 4px 0 16px; padding-left: 14px; }

/* Alert banner */
.od-alert { background: #fffbeb; border: 1px solid var(--oda-primary); border-radius: 6px; padding: 8px 12px; font-size: 12px; color: var(--oda-text); margin-bottom: 14px; display: flex; justify-content: space-between; }
.od-alert b { font-weight: 700; }
.od-alert i { font-style: normal; color: var(--oda-muted); }

/* Stat cards */
.od-stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 16px; }
.od-stat-card { background: #fff; border: 1px solid var(--oda-border); border-top: 3px solid var(--sc, var(--oda-primary)); border-radius: 8px; padding: 11px 13px; box-shadow: 0 2px 12px rgba(0,0,0,.07); }
.od-stat-num { font-size: 21px; font-weight: 700; color: var(--sc, var(--oda-primary)); line-height: 1.1; }
.od-stat-label { font-size: 11px; color: var(--oda-muted); margin-top: 2px; }

/* Section card — 3px accent top border, accent title with divider */
.od-card { background: #fff; border: 1px solid var(--oda-border); border-top: 3px solid var(--ca, var(--oda-primary)); border-radius: 12px; padding: 16px 18px; box-shadow: 0 2px 12px rgba(0,0,0,.07); margin-bottom: 14px; }
.od-card:last-child { margin-bottom: 0; }
.od-card-title { font-size: 15px; font-weight: 600; color: var(--ca, var(--oda-primary)); margin-bottom: 12px; padding-bottom: 9px; border-bottom: 1px solid var(--oda-border); display: flex; justify-content: space-between; align-items: center; }
.od-card-title .od-viewall { font-size: 11px; font-weight: 600; color: var(--oda-muted); border: 1px solid var(--oda-border); border-radius: 4px; padding: 3px 9px; }
.od-empty { font-size: 12.5px; color: var(--oda-muted); padding: 4px 0; }

/* Tables */
.od-tbl { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.od-tbl th { padding: 8px 10px; text-align: left; font-size: 10.5px; font-weight: 700; color: var(--oda-muted); text-transform: uppercase; letter-spacing: .5px; border-bottom: 2px solid var(--ca, var(--oda-primary)); white-space: nowrap; }
.od-tbl td { padding: 8px 10px; border-bottom: 1px solid var(--oda-border); vertical-align: middle; white-space: nowrap; }
.od-tbl tr:last-child td { border-bottom: none; }
.od-exit-row { transition: opacity .45s ease, transform .45s ease; }
.od-exit-row.is-exiting { opacity: 0; transform: translateX(26px); }
.od-ref { font-family: 'JetBrains Mono', 'Courier New', monospace; font-size: 11px; }
.od-sec { font-size: 9.5px; color: var(--oda-muted); margin-right: 5px; }

/* Badges */
.od-badge { display: inline-block; padding: 2px 8px; border-radius: 99px; font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; white-space: nowrap; }
.b-draft { background: #e5e7eb; color: #374151; }
.b-active { background: #dbeafe; color: #1e40af; }
.b-qb { background: #fffbeb; color: #d97706; }

/* Buttons */
.od-btn { display: inline-block; padding: 5px 10px; border-radius: 4px; font-size: 10.5px; font-weight: 600; white-space: nowrap; }
.od-btn + .od-btn { margin-left: 6px; }
.b-primary { background: var(--oda-primary); color: #fff; }
.b-success { background: var(--oda-success); color: #fff; }
.b-danger { background: var(--oda-danger); color: #fff; }
.b-warning { background: var(--oda-warning); color: #fff; }
.b-secondary { background: var(--oda-border); color: var(--oda-text); }

/* Toggle tabs + filter chips */
.od-toggle { display: inline-flex; border: 1px solid var(--oda-border); border-radius: 4px; overflow: hidden; margin-bottom: 12px; }
.od-toggle span { padding: 5px 13px; font-size: 12px; font-weight: 500; background: #fff; color: var(--oda-muted); }
.od-toggle span.is-active { background: var(--oda-primary); color: #fff; }
.od-chips { display: flex; gap: 6px; margin-bottom: 12px; flex-wrap: wrap; }
.od-chips span { font-size: 11.5px; padding: 4px 11px; border-radius: 4px; color: var(--oda-muted); border: 1px solid var(--oda-border); background: #fff; }
.od-chips span.is-active { background: var(--oda-text); color: #fff; border-color: var(--oda-text); }

/* Form (flight creation) */
.od-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.od-field label { display: block; font-size: 10.5px; font-weight: 600; color: var(--oda-muted); margin-bottom: 4px; text-transform: uppercase; letter-spacing: .5px; }
.od-input { border: 1px solid var(--oda-border); border-radius: 4px; background: #fff; padding: 7px 9px; font-size: 12px; color: var(--oda-text); }
.od-input.ph { color: #9aa0a6; }
.od-inline-tbl { border: 1px solid var(--oda-border); border-radius: 8px; overflow: hidden; }
.od-inline-tbl .od-tbl th { background: #eef1f6; border-bottom: 1px solid var(--oda-border); }
.od-addrow { display: inline-block; margin-top: 9px; border: 1px dashed var(--oda-border); color: var(--oda-muted); padding: 5px 11px; border-radius: 4px; font-size: 10.5px; }
.od-actionbar { display: flex; gap: 9px; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--oda-border); }
.od-actionbar .od-btn { padding: 7px 15px; font-size: 12px; }

/* Toast */
.od-toast { position: absolute; bottom: 16px; right: 16px; background: #1a1a1a; color: #fff; font-size: 11.5px; padding: 9px 14px; border-radius: 6px; display: flex; align-items: center; gap: 7px; box-shadow: 0 8px 20px rgba(0,0,0,.3); opacity: 0; transform: translateY(8px); transition: opacity .35s ease, transform .35s ease; }
.od-toast::before { content: '\2713'; color: #4ade80; font-weight: 700; }
.od-toast.is-shown { opacity: 1; transform: none; }

/* QuickBooks modal */
/* The finance page must be tall enough to hold the export modal without
   clipping it against .od-page's overflow:hidden. */
.od-frame[data-anim="finance"] .od-page { min-height: 480px; }
.od-modal-overlay { position: absolute; inset: 0; background: rgba(10,12,20,.5); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .4s ease; }
.od-modal-overlay.is-shown { opacity: 1; }
.od-modal { background: #fff; border-radius: 10px; padding: 14px 16px; width: 88%; max-width: 390px; box-shadow: 0 24px 60px rgba(0,0,0,.4); }
.od-modal-title { font-size: 14px; font-weight: 700; color: var(--oda-text); margin-bottom: 4px; }
.od-modal-note { font-size: 10px; color: var(--oda-muted); line-height: 1.45; margin-bottom: 9px; }
.od-modal-sum { background: #f1f3f5; border-radius: 6px; padding: 7px 9px; margin-bottom: 9px; }
.od-modal-sum div { display: flex; justify-content: space-between; font-size: 11px; padding: 2px 0; }
.od-modal-sum span:first-child { color: var(--oda-muted); }
.od-modal-charges { border-top: 1px solid var(--oda-border); margin-top: 9px; padding-top: 8px; }
.od-modal-charges h5 { font-size: 9.5px; font-weight: 700; color: var(--oda-muted); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 6px; }
.od-modal-line { display: flex; justify-content: space-between; font-size: 11px; padding: 3px 0; color: var(--oda-text); }
.od-modal-total { display: flex; justify-content: space-between; font-size: 11.5px; font-weight: 700; padding-top: 6px; margin-top: 3px; border-top: 1px solid var(--oda-border); }
/* ── Modules ───────────────────────────────────────────────── */
.od-modules { background: var(--base); padding: clamp(90px, 9vw, 130px) var(--pad-x); border-top: 1px solid var(--border); }
.od-modules-count { font-size: clamp(64px, 9vw, 120px); font-weight: 900; color: var(--red); line-height: 1; text-align: center; margin-bottom: 8px; }
.od-modules-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 48px; }
.od-module-card {
  background: var(--even); border: 1px solid var(--border); border-radius: 10px; padding: 26px 24px;
  position: relative; transition: border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease);
}
/* Every card responds to the pointer — the red edge is the hover state and
   follows the cursor across the grid. */
.od-module-card:hover, .od-module-card:focus-visible {
  border-color: var(--red); background: #383838; transform: translateY(-3px);
  box-shadow: 0 0 0 1px rgba(204,19,9,.35), 0 18px 42px rgba(0,0,0,.4), 0 0 46px rgba(204,19,9,.22);
  outline: none;
}
/* All nine cards are visually identical at rest — red is purely the hover
   state. (The brief asked for Reports to carry permanent extra weight, but
   a always-red card next to eight inert ones read as stuck mid-hover, so
   Mat called it: they all match.) */
@media (prefers-reduced-motion: reduce) {
  .od-module-card { transition: border-color .25s ease, box-shadow .25s ease; }
  .od-module-card:hover { transform: none; }
}
.od-module-title { font-size: 17px; font-weight: 700; color: var(--head); margin-bottom: 8px; }
.od-module-line { font-family: 'DM Sans', sans-serif; font-size: 14.5px; color: var(--body); line-height: 1.55; }

/* ── Origin story ──────────────────────────────────────────── */
.od-origin { background: #FAF5EA; padding: clamp(90px, 9vw, 130px) var(--pad-x) 0; }
.od-origin-inner { max-width: 720px; margin: 0 auto; }
.od-origin h2 { font-size: clamp(30px, 3.6vw, 44px); font-weight: 700; letter-spacing: -0.02em; color: var(--ink); line-height: 1.15; margin-bottom: 32px; }
.od-origin p { font-family: 'DM Sans', sans-serif; font-size: 17px; line-height: 1.7; color: #444; margin-bottom: 22px; }

/* ── The punch: stays on the cream field, but breaks out of the 720px
   prose column to full width and jumps to display scale — the drama is
   size and isolation, not a change of background. ───────────────────── */
.od-origin-punch-wrap {
  /* full-bleed: cancel the section's own side padding so this band runs
     edge-to-edge regardless of viewport width */
  margin: clamp(60px, 7vw, 90px) calc(-1 * var(--pad-x)) 0;
  width: calc(100% + 2 * var(--pad-x));
  padding: clamp(70px, 9vw, 120px) var(--pad-x) clamp(90px, 10vw, 130px);
  background: #FAF5EA;
  text-align: center;
  position: relative;
}
/* a thin red beat marking this as its own moment, not another paragraph */
.od-origin-punch-wrap::before {
  content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 56px; height: 3px; background: var(--red);
}
.od-origin-punch-wrap .od-origin-punch {
  position: relative; margin: 0;
  font-family: 'Inter', sans-serif;
  font-size: clamp(40px, 6.4vw, 96px); font-weight: 800; color: var(--ink);
  letter-spacing: -0.04em; line-height: 1.02;
}
.od-origin-punch-wrap .od-origin-punch .red { color: var(--red); }
/* punch in with weight, not just a fade — a slight rise plus a settle from
   a touch larger than rest, so it reads as landing rather than drifting up */
.od-origin-punch-wrap .od-origin-punch.reveal { transition-duration: .85s; transform: translateY(28px) scale(1.04); }
.od-origin-punch-wrap .od-origin-punch.reveal.in { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .od-origin-punch-wrap .od-origin-punch.reveal, .od-origin-punch-wrap .od-origin-punch.reveal.in { transform: none; transition: none; }
}

/* ── Differentiation ───────────────────────────────────────── */
.od-diff-slide { background: #101010; min-height: 60vh; display: flex; align-items: center; justify-content: center; text-align: center; padding: 80px var(--pad-x); border-bottom: 1px solid rgba(255,255,255,.06); position: relative; overflow: hidden; }
.od-diff-slide:nth-of-type(even) { background: #16171a; }

/* a slow spotlight rising up behind the quote — the same blue light that
   identifies OpsDesk elsewhere on the page, just quieter here */
.od-diff-glow {
  position: absolute; left: 50%; top: 50%; width: 900px; height: 900px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(79,163,240,.16) 0%, rgba(79,163,240,.05) 40%, transparent 70%);
  pointer-events: none; z-index: 0;
}
.od-diff-glow.reveal { opacity: 0; transform: translate(-50%, -50%); transition: opacity 1.1s var(--ease); }
.od-diff-glow.reveal.in { opacity: 1; }

.od-diff-inner { max-width: 720px; position: relative; z-index: 2; }
.od-diff-inner .od-diff-h.reveal { transition-duration: .75s; transition-delay: .18s; }
.od-diff-inner .od-diff-p.reveal { transition-duration: .75s; transition-delay: .34s; }

.od-diff-h { font-size: clamp(34px, 5vw, 62px); font-weight: 800; color: #fff; letter-spacing: -0.02em; margin-bottom: 22px; }
.od-diff-p { font-family: 'DM Sans', sans-serif; font-size: 17px; color: #9aa0b8; line-height: 1.65; max-width: 560px; margin: 0 auto; }

@media (prefers-reduced-motion: reduce) {
  .od-diff-glow.reveal, .od-diff-glow.reveal.in { opacity: 1; transition: none; }
}

/* ── Closing + contact ─────────────────────────────────────── */
.od-close { background: var(--odd); padding: clamp(90px, 9vw, 130px) var(--pad-x) 60px; text-align: center; border-top: 1px solid var(--border); }
.od-close-h { font-size: clamp(30px, 3.8vw, 46px); font-weight: 700; color: var(--head); letter-spacing: -0.02em; margin-bottom: 16px; max-width: 720px; margin-left: auto; margin-right: auto; }
.od-close-line { font-family: 'DM Sans', sans-serif; font-size: 17px; color: var(--body); margin-bottom: 56px; }
.od-contact-block { display: flex; flex-wrap: wrap; justify-content: center; gap: 48px; max-width: 900px; margin: 0 auto; text-align: left; }

/* Fade-up reveals reuse .reveal / IntersectionObserver from styles.css + script.js — not duplicated here. */

/* ── Lifecycle vertical fallback ───────────────────────────────
   The pinned horizontal track needs real estate and a pointer; below
   1025px (and under reduced-motion) it becomes an ordinary vertical
   stack with everything already in its final state. JS skips the pin
   maths entirely in these cases — see opsdesk.js.
   ───────────────────────────────────────────────────────────── */
@media (max-width: 1024px), (prefers-reduced-motion: reduce) {
  .od-lifecycle { height: auto !important; padding: clamp(80px, 9vw, 120px) 0; }
  .od-lifecycle-pin { position: static; height: auto; overflow: visible; padding: 0; }
  .od-track {
    flex-direction: column; align-items: flex-start; gap: 38px;
    transform: none !important; padding: 0 var(--pad-x); max-width: 640px; margin: 0 auto;
  }
  .od-rail { left: 8px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; }
  .od-rail-fill { display: none; }
  .od-stage { width: 100%; flex-direction: row; align-items: flex-start; gap: 22px; text-align: left; }
  .od-stage-ghost { display: none; }
  .od-stage-node {
    margin-bottom: 0; margin-top: 6px; flex-shrink: 0;
    border-color: var(--od-blue-bright); background: var(--od-blue-bright);
  }
  .od-stage.is-billed .od-stage-node { border-color: var(--red); background: var(--red); }
  .od-stage-body { opacity: 1; transform: none; }
  .od-stage.is-billed .od-stage-chip { background: var(--red); color: #fff; }
  .od-lifecycle-close { opacity: 1; transform: none; }
}

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .od-hero-grid { grid-template-columns: 1fr; text-align: center; }
  .od-hero-copy { text-align: center; }
  .od-h1, .od-sub { margin-left: auto; margin-right: auto; }
  .od-modules-grid { grid-template-columns: repeat(2, 1fr); }
  .od-stat-row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .od-modules-grid { grid-template-columns: 1fr; }
  .od-contact-block { flex-direction: column; gap: 24px; text-align: center; }
  /* Screens: drop the sidebar and let the workspace use the full width —
     a 186px nav rail plus a table is unreadable at phone widths. */
  .od-sidebar { display: none; }
  .od-stat-row { grid-template-columns: repeat(2, 1fr); }
  .od-grid3 { grid-template-columns: 1fr; }
  .od-screens-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .od-app { min-width: 620px; }
}