/* Annual-report tone: typography and whitespace carry the page. Minimal
   decoration — the product's own screenshots are the proof, not graphics.
   The page uses the full width of the screen rather than a narrow centred
   column — a wide outer container throughout, with each report section
   split into a label column (the kicker) and a content column, so long
   lines of body text never stretch edge to edge even though the page does. */

:root {
  --m-page-width: 1500px;
}

.m-page {
  max-width: var(--m-page-width);
  margin: 0 auto;
  padding: 0 40px;
}

.m-page.m-page-wide {
  max-width: var(--m-page-width);
}

.m-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 40px;
  max-width: var(--m-page-width);
  margin: 0 auto;
  gap: 16px;
}

.m-nav .links {
  display: flex;
  gap: 22px;
  white-space: nowrap;
}

.m-nav .brand {
  display: flex;
  align-items: center;
  gap: 9px;
  font-weight: 700;
  font-size: 17px;
  color: var(--text-primary);
  text-decoration: none;
}

.m-nav .links a {
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 13px;
}

.m-nav .cta {
  background: var(--accent);
  color: #ffffff !important;
  padding: 7px 14px;
  border-radius: 6px;
  font-weight: 600;
  font-size: 13px;
  text-decoration: none;
}

.m-nav .cta.secondary {
  background: transparent;
  color: var(--text-secondary) !important;
  border: 1px solid var(--border);
}

/* Industries dropdown — the only nav item that needs a submenu (three
   dedicated industry pages hanging off one entry point), so this is
   scoped narrowly rather than building a generic mega-nav system. */
.m-nav-dropdown { position: relative; }
.m-nav-dropdown > a { display: inline-flex; align-items: center; gap: 5px; }
.m-nav-dropdown .caret { width: 9px; height: 9px; border: none; transition: transform 0.15s; }
.m-nav-dropdown:hover .caret, .m-nav-dropdown:focus-within .caret { transform: rotate(180deg); }
.m-nav-dropdown-panel {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  margin-top: 14px; padding: 8px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 20px 48px rgba(0,0,0,0.45);
  min-width: 200px;
  opacity: 0; visibility: hidden; transform: translateX(-50%) translateY(-6px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
  z-index: 40;
}
.m-nav-dropdown:hover .m-nav-dropdown-panel,
.m-nav-dropdown:focus-within .m-nav-dropdown-panel {
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}
.m-nav-dropdown-panel a {
  display: block; padding: 10px 14px; border-radius: 8px;
  color: var(--text-primary) !important; font-size: 13px; text-decoration: none;
}
.m-nav-dropdown-panel a:hover { background: var(--surface); }

@media (max-width: 900px) {
  .m-nav .links { display: none; }
}

/* Mobile nav toggle — the hamburger button + stacked .links panel it
   opens (see marketing-nav.js). The rules above already close the panel
   by default under 900px; everything below is what lets it open again.
   Guard rule: [hidden] must beat the base `.m-nav .links{display:flex}`
   rule (same trap that's bitten this repo twice before), so the panel
   genuinely disappears rather than sitting there ignoring the attribute. */
.m-nav .links[hidden] { display: none; }

.m-nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-primary);
  cursor: pointer;
  flex-shrink: 0;
}
.m-nav-toggle:focus-visible { outline: 2px solid var(--accent-bright); outline-offset: 2px; }

@media (max-width: 900px) {
  .m-nav-toggle { display: inline-flex; }

  /* Open state: overrides the plain `display:none` above (both are
     equally specific two-class-plus-attribute selectors, so this simply
     never matches the same element the guard rule does) and lays the
     links out as a stacked dropdown panel under the nav bar. */
  .m-nav .links:not([hidden]) {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--surface-2);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    padding: 10px 20px 18px;
    white-space: normal;
    z-index: 60;
  }

  .m-nav .links a { padding: 8px 0; }

  /* The Industries dropdown has no hover on a touch screen, so inside
     the open mobile panel it's just an always-expanded inline sublist
     rather than a hover flyout. */
  .m-nav-dropdown { width: 100%; }
  .m-nav-dropdown > a { width: 100%; justify-content: space-between; }
  .m-nav-dropdown .caret { display: none; }
  .m-nav-dropdown-panel {
    position: static;
    transform: none;
    opacity: 1;
    visibility: visible;
    box-shadow: none;
    border: none;
    background: transparent;
    margin: 0 0 4px 14px;
    padding: 0;
    min-width: 0;
  }
  .m-nav-dropdown-panel a { padding: 6px 0; }
}

@media (min-width: 901px) {
  /* Above the breakpoint there's no hamburger and the panel is never
     toggled closed by JS, so the hidden attribute (present in the
     markup by default) must not hide the desktop nav at all. */
  .m-nav .links[hidden] { display: flex; }
}

/* Hero — immersive full-bleed gradient with an abstract "flight path /
   network" motif standing in for stock photography (no third-party image
   downloaded — an abstract mark avoids any licensing question entirely
   while still giving the page an immersive opening). */
.m-hero {
  position: relative;
  overflow: hidden;
  background: #05070d;
  padding: 96px 40px 88px;
  color: #ffffff;
}

.hero-glow {
  position: absolute;
  inset: -20% -10% auto -10%;
  height: 780px;
  background:
    radial-gradient(ellipse 700px 420px at 20% 20%, rgba(79,140,255,0.30), transparent 60%),
    radial-gradient(ellipse 600px 500px at 85% 10%, rgba(147,51,234,0.20), transparent 60%);
  pointer-events: none;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 56px;
  align-items: center;
}

@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; }
}

.m-hero-bg {
  position: absolute;
  inset: 0;
  opacity: 0.4;
  pointer-events: none;
}

.m-hero-bg svg { width: 100%; height: 100%; }

.hero-route {
  fill: none;
  stroke: rgba(255, 255, 255, 0.35);
  stroke-width: 1.5;
  stroke-dasharray: 2 8;
  stroke-linecap: round;
}

.hero-node {
  fill: #ffffff;
  opacity: 0.7;
}

.hero-stars circle { fill: #ffffff; opacity: 0.5; }

.hero-skyline rect {
  fill: rgba(255, 255, 255, 0.12);
}

.hero-skyline rect.skyline-bright {
  fill: rgba(255, 255, 255, 0.2);
}

.hero-tower rect,
.hero-tower line {
  fill: rgba(255, 255, 255, 0.28);
  stroke: rgba(255, 255, 255, 0.28);
}

.hero-tower line { stroke-width: 2; }

.tower-light {
  fill: #ff5c5c;
  animation: towerBlink 1.8s ease-in-out infinite;
}

@keyframes towerBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.25; }
}

.hero-runway { fill: rgba(255, 255, 255, 0.07); }

.hero-runway-line {
  stroke: rgba(255, 255, 255, 0.25);
  stroke-width: 2;
  stroke-dasharray: 14 12;
}

.hero-flightpath {
  fill: none;
  stroke: rgba(255, 255, 255, 0.55);
  stroke-width: 1.5;
  stroke-dasharray: 3 7;
  stroke-linecap: round;
}

.hero-plane { fill: rgba(255, 255, 255, 0.92); }

.m-hero-content {
  position: relative;
  max-width: var(--m-page-width);
  margin: 0 auto;
}

.hero-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 12px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.7);
  margin: 0 0 16px;
}

.m-hero-content h1 {
  font-family: var(--font-display);
  font-size: 58px;
  line-height: 1.05;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-wrap: balance;
  max-width: 880px;
  margin: 0 0 22px;
  color: #ffffff;
}

@media (max-width: 700px) {
  .m-hero-content h1 { font-size: 38px; }
}

.m-hero-content .lead {
  font-size: 18px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.92);
  max-width: 720px;
  margin: 0 0 14px;
}

.m-hero-content .lead-sub {
  font-size: 15px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.62);
  max-width: 700px;
  margin: 0 0 34px;
}

.hero-pillars {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 30px;
}
.hero-pillars span {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--accent-bright);
  background: rgba(79, 140, 255, 0.12);
  border: 1px solid rgba(79, 140, 255, 0.3);
  padding: 7px 14px;
  border-radius: 999px;
}

.hero-ctas {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

@media (max-width: 700px) {
  .m-hero { padding: 64px 24px 56px; }
}

/* Hero visual — a live-looking mock screen cycling through price,
   ad, and second-category content, proving "this is a media network"
   visually rather than just claiming it in copy. Pure CSS animation,
   offset per slide so exactly one is visible at a time. */
.hero-visual { position: relative; }
.hero-screen {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  background: #000;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 30px 90px rgba(79, 140, 255, 0.28), 0 0 0 1px rgba(255,255,255,0.08);
}
.hero-slide {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 26px 30px;
  opacity: 0;
  animation: heroCycle 9s infinite;
}
.hero-slide-1 { animation-delay: 0s; background: linear-gradient(160deg, #0d1220 0%, #16264d 100%); }
.hero-slide-2 { animation-delay: 3s; background: linear-gradient(160deg, #1a0d3d 0%, #3a1470 100%); align-items: flex-start; text-align: left; }
.hero-slide-3 { animation-delay: 6s; background: linear-gradient(160deg, #0d1220 0%, #0d3a45 100%); }
@keyframes heroCycle {
  0% { opacity: 0; }
  3% { opacity: 1; }
  30% { opacity: 1; }
  36% { opacity: 0; }
  100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-slide { animation: none; opacity: 0; }
  .hero-slide-1 { opacity: 1; }
}
.hero-slide-eyebrow { text-transform: uppercase; letter-spacing: 0.1em; color: var(--accent-bright); font-weight: 700; font-size: 12px; margin-bottom: 6px; }
.hero-slide-price { font-family: var(--font-display); font-size: 46px; font-weight: 700; color: #ffffff; line-height: 1; margin-bottom: 8px; }
.hero-slide-tag { display: inline-block; background: var(--accent); color: #fff; font-weight: 700; font-size: 12px; padding: 5px 12px; border-radius: 999px; width: fit-content; }
.hero-slide-ad { font-family: var(--font-display); font-size: 34px; font-weight: 700; color: #fff; letter-spacing: 0.02em; margin-bottom: 8px; }
.hero-slide-adline { font-size: 13px; color: rgba(255,255,255,0.75); max-width: 240px; }
.hero-screen-caption { text-align: center; font-size: 12px; color: var(--text-muted); margin-top: 14px; letter-spacing: 0.02em; }
.hero-screen-shot { width: 100%; height: 100%; object-fit: contain; background: #000; display: block; }
.hero-screen.hero-screen-real { aspect-ratio: 1568 / 615; }

.product-shot-row { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-top: 8px; }
.product-shot { border-radius: 14px; overflow: hidden; background: #000; box-shadow: 0 20px 60px rgba(0,0,0,0.35), 0 0 0 1px rgba(255,255,255,0.08); }
.product-shot img { width: 100%; display: block; }
.product-shot-caption { margin-top: 12px; font-size: 14px; color: var(--text-secondary); }
.product-shot-caption strong { color: var(--text-primary); }
@media (max-width: 800px) { .product-shot-row { grid-template-columns: 1fr; } }

/* Scroll reveal — sections fade/rise into place once, on first view. */
[data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity 0.7s ease, transform 0.7s ease; }
[data-reveal].is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
}

.m-btn {
  display: inline-block;
  padding: 12px 22px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
}

.m-btn.large { padding: 14px 26px; font-size: 16px; }

.m-btn.primary { background: var(--accent); color: #ffffff; }
.m-btn.secondary { background: var(--surface); color: var(--text-primary); border: 1px solid var(--border); }

.m-hero .m-btn.secondary {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.5);
}

/* Who It's For — vertical cards */
.m-verticals {
  padding: 56px 40px;
  border-bottom: 1px solid var(--gridline);
}

.m-verticals-inner {
  max-width: var(--m-page-width);
  margin: 0 auto;
}

.vertical-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 28px;
}

@media (min-width: 1001px) {
  .vertical-grid .vertical-card:last-child:nth-child(3n+1) { grid-column: 1 / -1; max-width: calc((100% - 40px) / 3); justify-self: center; }
}

@media (max-width: 1000px) {
  .vertical-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
  .vertical-grid { grid-template-columns: 1fr; }
}

.vertical-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 24px;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.vertical-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(11, 11, 11, 0.08);
}

/* Icon chips — replaces flat emoji with line-art SVGs on a coloured
   gradient badge, so each vertical/value column gets a distinct accent
   instead of relying on system emoji rendering (which varies by OS and
   reads as "cheap" rather than designed). */
.icon-chip {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #ffffff;
}

.icon-chip svg { width: 26px; height: 26px; }

.icon-chip-1 { background: linear-gradient(135deg, #2a78d6, #123a8c); }
.icon-chip-2 { background: linear-gradient(135deg, #9333ea, #5b1fa8); }
.icon-chip-3 { background: linear-gradient(135deg, #2ab6d6, #1d5fd6); }
.icon-chip-4 { background: linear-gradient(135deg, #fab219, #e08600); }

/* Icon to the left, title to the right, vertically centred on the icon's
   square footprint — a compact header row instead of the icon sitting
   stacked full-width above the title. */
.card-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 12px;
}

.card-header h3 {
  margin: 0;
}

.vertical-card h3 {
  font-size: 16px;
}

.industry-card { position: relative; }
.industry-status {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 999px;
  margin-bottom: 14px;
}
.status-live { background: rgba(46, 207, 122, 0.15); color: #2ecf7a; }
.status-emerging { background: rgba(79, 140, 255, 0.15); color: var(--accent-bright); }
.industry-card p a { color: var(--accent-bright); font-weight: 600; }

/* The industries hub — bigger, whole-card-clickable tiles, one level
   more substantial than the homepage's small teaser cards, since this
   page's only job is routing into the four real industry pages. */
.industries-index { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.industries-index .industry-index-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
.industries-index .industry-index-card:last-child:nth-child(odd) p { max-width: 640px; }
@media (max-width: 800px) {
  .industries-index { grid-template-columns: 1fr; }
  .industries-index .industry-index-card:last-child:nth-child(odd) { grid-column: auto; }
}
.industry-index-card {
  display: block; padding: 36px; border-radius: 18px;
  background: var(--surface); border: 1px solid var(--border);
  text-decoration: none; color: inherit;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.industry-index-card:hover {
  transform: translateY(-4px);
  border-color: var(--accent);
  box-shadow: 0 20px 48px rgba(0,0,0,0.12);
}
.industry-index-card h2 { margin: 0 0 12px; font-size: 26px; }
.industry-index-card p { margin: 0 0 20px; color: var(--text-secondary); font-size: 15px; line-height: 1.6; }
.industry-index-status {
  display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; padding: 3px 10px; border-radius: 999px; margin-bottom: 16px;
}
.industry-index-status.status-live { background: rgba(46, 207, 122, 0.15); color: #2ecf7a; }
.industry-index-status.status-emerging { background: rgba(79, 140, 255, 0.15); color: var(--accent-bright); }
.industry-index-link { color: var(--accent-bright); font-weight: 700; font-size: 14px; }

.vertical-card p {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0;
}

/* Proof-point callout — a highlighted box inside a report section, rather
   than plain paragraphs, so supporting evidence reads as a distinct,
   citable aside instead of blending into the main claim. */
.proof-callout {
  background: var(--page);
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: 10px;
  padding: 22px 26px;
  margin-top: 20px;
  max-width: 700px;
}

.proof-callout-kicker {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--accent);
  margin-bottom: 10px;
}

.proof-callout p {
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.7;
  margin: 0 0 10px;
}

.proof-callout p:last-child { margin-bottom: 0; }

/* Generic report section — a hairline rule, a small-caps kicker sitting in
   its own left-hand label column, body content in a wide column beside it.
   Uses the full page width; the kicker column keeps that width from just
   becoming empty margin the way a single centred column would. */
.m-report-section {
  display: grid;
  grid-template-columns: 220px 1fr;
  column-gap: 48px;
  padding: 44px 40px;
  border-top: 1px solid var(--gridline);
  max-width: var(--m-page-width);
  margin: 0 auto;
  box-sizing: border-box;
}

@media (max-width: 700px) {
  .m-report-section { padding: 32px 20px; }
}

.kicker {
  font-family: var(--font-display);
  color: var(--accent-bright);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.m-report-section > .kicker {
  grid-column: 1;
  margin-bottom: 0;
}

.m-report-section > *:not(.kicker) {
  grid-column: 2;
}

@media (max-width: 900px) {
  .m-report-section {
    grid-template-columns: 1fr;
  }
  .m-report-section > .kicker {
    margin-bottom: 14px;
  }
  .m-report-section > *:not(.kicker) {
    grid-column: 1;
  }
}

.m-report-section p.lead {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.5;
  margin: 0 0 14px;
  max-width: 700px;
}

.m-report-section p.body {
  color: var(--text-secondary);
  font-size: 15px;
  line-height: 1.7;
  margin: 0 0 14px;
  max-width: 700px;
}

.report-list {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  max-width: 700px;
}

.report-list li {
  font-size: 15px;
  color: var(--text-primary);
  padding: 7px 0 7px 20px;
  border-top: 1px solid var(--gridline);
  position: relative;
}

.report-list li:first-child { border-top: none; }

.report-list li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--text-muted);
}

.report-list.report-list-columns {
  max-width: 100%;
  column-count: 3;
  column-gap: 40px;
}

@media (max-width: 1100px) {
  .report-list.report-list-columns { column-count: 2; }
}
@media (max-width: 700px) {
  .report-list.report-list-columns { column-count: 1; }
}

.report-list.report-list-columns li {
  break-inside: avoid;
}

.report-steps {
  list-style: none;
  counter-reset: rstep;
  margin: 0 0 24px;
  padding: 0;
  max-width: 700px;
}

.report-steps li {
  counter-increment: rstep;
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-primary);
  padding: 10px 0 10px 34px;
  border-top: 1px solid var(--gridline);
  position: relative;
}

.report-steps li:first-child { border-top: none; }

.report-steps li::before {
  content: counter(rstep);
  position: absolute;
  left: 0;
  top: 10px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent);
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.report-footnote {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.8;
  margin: 0;
}

.patent-cert-figure-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: start;
  margin: 32px 0 8px;
}
@media (max-width: 860px) {
  .patent-cert-figure-row { grid-template-columns: 1fr; }
}
.patent-figure { margin: 0; }
.patent-figure img {
  width: 100%;
  max-width: 760px;
  display: block;
  margin: 0 auto;
  border: 1px solid var(--gridline);
  border-radius: 10px;
  background: #ffffff;
  padding: 10px;
}
.patent-mapping { margin-top: 8px; border-top: 1px solid var(--gridline); }
.patent-mapping-row {
  display: grid;
  grid-template-columns: 1fr auto 1.5fr;
  gap: 16px;
  align-items: baseline;
  padding: 13px 0;
  border-bottom: 1px solid var(--gridline);
  font-size: 0.95rem;
}
.patent-term { color: var(--text-primary); font-weight: 600; }
.patent-arrow-inline { color: var(--accent); }
.patent-equiv { color: var(--text-secondary); }
@media (max-width: 640px) {
  .patent-mapping-row { grid-template-columns: 1fr; gap: 2px; padding: 12px 0; }
  .patent-arrow-inline { display: none; }
}

/* The one process diagram */
.process-flow {
  display: flex;
  align-items: stretch;
  gap: 0;
  flex-wrap: wrap;
  margin: 8px 0 28px;
}

.process-step {
  flex: 1;
  min-width: 140px;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px 12px;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  color: var(--text-primary);
  background: var(--surface);
}

.process-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  color: var(--text-muted);
  font-size: 16px;
}

@media (max-width: 700px) {
  .process-flow { flex-direction: column; }
  .process-arrow { transform: rotate(90deg); padding: 4px 0; }
}

.pipeline-flow {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin: 20px 0 8px;
}
.pipeline-flow span:not(.arrow) {
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  background: var(--surface-2);
  white-space: nowrap;
}
.pipeline-flow .arrow { color: var(--text-muted); font-size: 14px; }

.qr-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  margin-top: 24px;
}
.qr-compare-col {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 24px;
  background: var(--surface-2);
}
.qr-compare-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-bottom: 14px;
}
.qr-compare-chain {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.qr-compare-chain-stack { flex-direction: column; align-items: flex-start; gap: 10px; }
.qr-compare-chain-stack > div { display: flex; align-items: center; gap: 10px; }
.qr-chip {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  background: var(--surface);
}
.qr-chip-end { color: var(--accent-bright); border-color: var(--accent-bright); }
.qr-arrow { color: var(--text-muted); }
@media (max-width: 700px) {
  .qr-compare { grid-template-columns: 1fr; }
}

.compare-table-wrap { overflow-x: auto; margin-top: 20px; }
.compare-table { width: 100%; border-collapse: collapse; min-width: 480px; }
.compare-table th, .compare-table td {
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  text-align: center;
  font-size: 14px;
}
.compare-table td:first-child, .compare-table th:first-child { text-align: left; color: var(--text-secondary); }
.compare-table th { color: var(--text-muted); font-weight: 600; text-transform: uppercase; font-size: 12px; letter-spacing: 0.06em; }
.compare-table .ct-yes { color: #4ade80; font-weight: 700; font-size: 16px; }
.compare-table .ct-no { color: var(--text-muted); font-weight: 700; font-size: 16px; }

/* "Owned by You" — text plus a flat vector scene (reception counter,
   staff badge, guest, rating star on a dotted link) standing in for a
   stock photo of a check-in encounter; keeps the same line-art language
   as the icon chips instead of introducing a photographic style. */
.owned-by-you-grid {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 40px;
  align-items: center;
}

@media (max-width: 900px) {
  .owned-by-you-grid { grid-template-columns: 1fr; }
  .scene-panel { max-width: 320px; margin: 0 auto; }
}

.scene-panel svg { width: 100%; height: auto; }

.scene-floor { stroke: var(--gridline); stroke-width: 1.5; }
.scene-outline { fill: none; stroke: var(--accent); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.scene-solid { fill: var(--accent); }
.scene-fill { fill: var(--accent-track); stroke: var(--accent); stroke-width: 1.6; }
.scene-badge { fill: #ffffff; stroke: var(--accent); stroke-width: 1.6; }
.scene-desktop { fill: var(--surface); stroke: var(--border); }
.scene-desk { fill: var(--accent-track); stroke: var(--accent); stroke-width: 1.5; }
.scene-desk-accent { fill: var(--accent); }
.scene-dotted { fill: none; stroke: var(--text-muted); stroke-width: 1.4; stroke-dasharray: 2 5; stroke-linecap: round; }
.scene-star { fill: var(--warning); }

/* Business Value — three plain columns, no card chrome */
.value-columns {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  max-width: 100%;
}

@media (max-width: 1100px) {
  .value-columns { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px) {
  .value-columns { grid-template-columns: 1fr; }
}

.value-col {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 26px;
}

.value-col h3 {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin: 0;
}

.value-col p.lead {
  font-size: 16px;
}

.value-col p.body {
  font-size: 14px;
}

.value-col .report-list li {
  font-size: 13px;
}

/* Team Rewards — a highlighted blue band, distinct from the plain report
   sections around it, since it's a key differentiator worth visually
   standing out rather than reading like just another paragraph. */
.m-report-section.band-blue {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #0a1c47 0%, #123a8c 55%, #1d5fd6 100%);
  color: #ffffff;
  border-top: none;
  border-radius: 16px;
  padding: 48px 40px;
  margin: 36px auto;
}

/* A trophy + team-of-people mark, faint in the corner — reinforces the
   section's subject without competing with the text for attention. */
.band-motif {
  position: absolute;
  top: -20px;
  right: -20px;
  width: 260px;
  height: 260px;
  fill: rgba(255, 255, 255, 0.07);
  pointer-events: none;
}

.band-blue .kicker { color: rgba(255, 255, 255, 0.75); }
.band-blue p.lead { color: #ffffff; }
.band-blue p.body { color: rgba(255, 255, 255, 0.85); }
.band-blue p.body em { color: #ffffff; font-style: normal; font-weight: 600; }
.band-blue .report-footnote { color: rgba(255, 255, 255, 0.55); }
.band-blue .report-footnote em { font-style: italic; }

@media (max-width: 900px) {
  .m-report-section.band-blue { padding: 36px 24px; }
}

/* Zero-CAPEX banner — the same bold blue band as Team Rewards, but with
   its own pill row (regular .hero-pillars are tuned for a dark hero
   background and read low-contrast on this blue gradient) and a CTA
   button forced to solid white so it actually pops against the band
   instead of blending into it like .m-btn.primary normally would. */
.band-blue .capex-pills { display: flex; gap: 10px; flex-wrap: wrap; margin: 22px 0 0; }
.band-blue .capex-pills span {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.3);
  padding: 7px 14px;
  border-radius: 999px;
}
.band-blue .m-btn.primary { background: #ffffff; color: #123a8c; }
.band-blue .band-motif { color: #ffffff; }

.team-rewards-grid {
  display: grid;
  grid-template-columns: minmax(240px, 300px) 1fr;
  gap: 32px;
  align-items: start;
  margin: 22px 0 26px;
}

@media (max-width: 900px) {
  .team-rewards-grid { grid-template-columns: 1fr; gap: 24px; }
}

.team-rewards-copy p.body:first-child { margin-top: 0; }

.stat-callouts {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.stat-callout {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 12px;
  padding: 20px 24px;
  max-width: 320px;
  width: 100%;
}

.stat-callout-value {
  font-size: 42px;
  font-weight: 800;
  line-height: 1;
  color: #ffffff;
  margin-bottom: 8px;
}

.stat-callout-label {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.5;
}

.stat-callout-source {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.55);
  margin-top: 8px;
}

/* Final CTA — still a centred, narrower reading measure on purpose: a
   closing statement, not a data section, so it doesn't need the kicker/
   content split. The page around it is full width; this one block staying
   readable-width is a typographic choice, not leftover unused margin. */
.m-cta-report {
  text-align: center;
  padding: 56px 40px 64px;
  max-width: var(--m-page-width);
  margin: 0 auto;
  box-sizing: border-box;
}

@media (max-width: 700px) {
  .m-cta-report { padding: 40px 20px 48px; }
}

.m-cta-report h2 {
  font-size: 24px;
  max-width: 720px;
  margin: 0 auto 16px;
}

.m-cta-report p {
  color: var(--text-secondary);
  font-size: 15px;
  line-height: 1.65;
  max-width: 720px;
  margin: 0 auto 12px;
}

.m-cta-report .m-btn {
  margin-top: 12px;
}

/* Collapsible patent section — the certificate/diagram/mapping detail
   is real and worth having, but shouldn't dominate the page by default. */
.patent-details summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding: 18px 22px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.patent-details summary::-webkit-details-marker { display: none; }
.patent-summary-text { font-size: 15px; color: var(--text-primary); max-width: 640px; }
.patent-summary-text em { color: var(--text-secondary); font-style: normal; }
.patent-summary-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--accent-bright);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}
.patent-summary-toggle svg { width: 16px; height: 16px; transition: transform 0.2s ease; }
.patent-summary-toggle .hide-text { display: none; }
.patent-details[open] .patent-summary-toggle .show-text { display: none; }
.patent-details[open] .patent-summary-toggle .hide-text { display: inline; }
.patent-details[open] .patent-summary-toggle svg { transform: rotate(180deg); }
.patent-details[open] summary { border-radius: 12px 12px 0 0; margin-bottom: 0; }
.patent-details-body {
  padding: 28px 22px 8px;
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 12px 12px;
}

footer.m-footer {
  border-top: 1px solid var(--gridline);
  padding: 40px 40px 28px;
  color: var(--text-muted);
  font-size: 13px;
  max-width: var(--m-page-width);
  margin: 0 auto;
  box-sizing: border-box;
}

.m-footer-inner {
  display: flex;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}

.m-footer-brand .m-footer-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
}

.m-footer-brand .m-footer-tagline {
  font-size: 12px;
  margin-top: 2px;
}

.m-footer-offices {
  display: flex;
  gap: 48px;
  flex-wrap: wrap;
}

.m-footer-office h4 {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin: 0 0 8px;
}

.m-footer-office p {
  margin: 0 0 6px;
  line-height: 1.5;
}

.m-footer-office a {
  color: var(--text-muted);
}

.m-footer-legal {
  margin-top: 28px;
  padding-top: 16px;
  border-top: 1px solid var(--gridline);
  font-size: 11px;
}

@media (max-width: 760px) {
  .m-hero-report h1 { font-size: 26px; }
  /* `.m-nav .links{display:none}` used to be repeated here, below the mobile
     menu's own rules. It only lost to the open state on specificity
     (.m-nav .links:not([hidden]) is 0,3,0 against 0,2,0) — so the menu opened
     by a hair, and any later edit that simplified either selector would have
     silently sealed it shut on the narrowest phones. The rule at the 900px
     breakpoint already covers this width. One source of truth. */
  footer.m-footer { padding: 28px 20px 24px; }
  .m-footer-inner { gap: 24px; }
  .m-footer-offices { gap: 24px; }
}

/* Division strip — a slim, always-visible row under the hero listing
   every division. Not navigation in the URL-bar sense: each link jumps
   to that division's own full band further down this same page. */
.division-strip-wrap {
  border-top: 1px solid var(--gridline);
  border-bottom: 1px solid var(--gridline);
  background: var(--surface-2);
}
.division-strip {
  max-width: var(--m-page-width);
  margin: 0 auto;
  padding: 0 40px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.division-strip a {
  padding: 16px 22px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.division-strip a:hover,
.division-strip a:focus-visible { color: var(--accent-bright); border-color: var(--accent-bright); }
@media (max-width: 700px) {
  .division-strip { padding: 0 12px; }
  .division-strip a { padding: 12px 14px; font-size: 12px; }
}

/* Division bands — one full-bleed section per division, stacked down
   the homepage. Alternates background (.division-band-alt) and which
   side the visual sits on (band markup order, not a CSS flip) for
   rhythm, the way a real corporate site presents its divisions rather
   than a card grid. */
.division-band { width: 100%; border-top: 1px solid var(--gridline); padding: 76px 40px; }
.division-band-alt { background: var(--surface-2); }
.division-band-inner {
  max-width: var(--m-page-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}
@media (max-width: 900px) {
  .division-band { padding: 48px 20px; }
  .division-band-inner { grid-template-columns: 1fr; gap: 32px; }
}
.division-band-visual {
  border-radius: 14px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 20px 60px rgba(0,0,0,0.35), 0 0 0 1px rgba(255,255,255,0.08);
}
.division-band-visual img { width: 100%; display: block; }
/* Diagram variant: divisions without a real product photo yet get an
   honest process-flow diagram instead — visually distinct from a photo
   so nothing is presented as a screenshot when it isn't one. */
.division-band-visual.is-diagram {
  background: var(--surface);
  border: 1px solid var(--gridline);
  box-shadow: none;
  padding: 36px;
  min-height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.division-band-copy h2 {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 700;
  line-height: 1.2;
  margin: 10px 0 14px;
}
.division-band-copy p.lead { max-width: 560px; }
.division-band-copy p.body { max-width: 560px; }
.division-band-copy .industry-index-status { margin-bottom: 4px; }