:root {
  /* v4 palette — dark navy chrome, gold/orange accent, white content
     cards. --cream/--cream-2/--ink/--body/--white/--line keep their
     original light-mode meaning (they still describe the white/cream
     CARD surfaces — chat bubbles, form fields, the signup modal — which
     stay light regardless of page theme, the same way the reference
     app's own white "Wallet"/"Hotels" screens sit on top of its dark
     chrome). The page-level dark background is driven separately by
     --void/--navy plus the new --page-ink/--page-body pair below, applied
     directly on body/hero/section rules — see the CSS lower down. --blue
     is repointed to the brand's gold/orange so every existing accent use
     (buttons, links, prices, icon strokes) recolors in one place. */
  /* v6 — "serious infrastructure".
     Light, precise, undecorated. The previous dark-with-glow treatment was
     competent but it was the house style of every AI product site in 2026,
     which is exactly why it read as generated. This version takes its cues
     from infrastructure companies instead: near-white ground, hairline
     rules, real data set in mono, and almost no ornament. Credibility comes
     from precision and density here, not from atmosphere. */
  --cream: #ffffff;
  --cream-2: #f4f6f8;
  --ink: #0B1B2B;
  --body: #55627A;
  --grey: #8794A8;
  /* Sampled from the Swipgo mark: the bright azure of the wordmark's left
     letters, the mid ocean-blue of the globe, and the deep navy of
     "GLOBAL TRANSPORT HUB". --blue stays the name every component already
     references, so repointing it here recolours the entire site at once. */
  /* Deeper than the logo's azure — that bright blue is right on dark, but
     fails contrast as a link/button colour on white. Same family, darkened
     until text on it is genuinely readable. */
  --blue: #1264C8;
  --blue-dark: #0D4B99;
  --blue-tint: #EAF2FD;
  --amber: #1264C8;
  --line: rgba(11,27,43,0.11);
  --line-dark: rgba(11,27,43,0.11);
  --line-void: rgba(11,27,43,0.09);
  --white: #ffffff;
  /* Deep BLUE-navy rather than the near-black used before. The old base was
     so close to black that the brand colour had nothing to sit in and the
     whole site read as unwelcoming; carrying the logo's navy through the
     background makes the blue feel intentional and lifts the mood without
     giving up the premium dark theme. */
  /* Page grounds are now light. Kept under the same variable names so every
     existing rule repoints at once instead of needing 500 edits. */
  --void: #FFFFFF;
  --navy: #F4F6F8;
  /* Page-level text on the dark chrome (nav, hero, statement sections,
     footer) — distinct from --ink/--body so white card content doesn't
     get swept up in the same flip. */
  --page-ink: #0B1B2B;
  --page-body: #55627A;
  --gold-tracked: #1264C8;
  /* Layered shadow tokens — a crisp near shadow plus a soft far one reads
     as "designed" rather than a single blurry drop-shadow, which is one
     of the fastest tells of an unrefined/templated UI. */
  /* Barely-there. Infrastructure UIs separate things with rules, not with
     drop shadows — heavy shadows are what made the previous version feel
     like a deck of floating marketing cards. */
  --shadow-sm: 0 1px 2px rgba(11,27,43,0.05);
  --shadow-md: 0 1px 3px rgba(11,27,43,0.07);
  --shadow-lg: 0 2px 8px rgba(11,27,43,0.08);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  font-feature-settings: 'ss01' 1;
  -webkit-font-smoothing: antialiased;
  color: var(--page-ink);
  background: var(--void);
  position: relative;
}
/* Static grain — a single baked-in SVG feTurbulence data URI painted once
   as a fixed background layer, NOT a live mix-blend-mode filter (a
   previous version of this did that and forced a full-viewport repaint on
   every frame alongside the page's other infinite animations, which kept
   the tab permanently "busy" — see git history). This version costs
   nothing at runtime: it's one static image, same as any background-image
   would be. Very low opacity — felt, not seen — which is most of what
   separates a considered surface from a flat one. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  mix-blend-mode: normal;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
body > * { position: relative; z-index: 1; }
h1, h2, h3, .logo { font-family: 'IBM Plex Sans', sans-serif; letter-spacing: -0.02em; }
/* Mono is reserved for machine output — labels, times, prices, scores,
   metrics. That split is the whole typographic idea: prose in sans,
   anything the engine computed in mono. It signals precision without
   having to claim it. */
.tracked, .n, .mono { font-family: 'IBM Plex Mono', ui-monospace, monospace; }
/* Editorial serif — used sparingly, only where a considered agency site
   would reach for a second typeface: large index numerals and pull-quote
   style lines. Everywhere else stays on the two-weight Space
   Grotesk/Manrope system so this reads as one deliberate accent, not a
   third random font creeping in. */
.serif-accent { font-family: 'IBM Plex Sans', sans-serif; }
/* White/light card surfaces float on top of the new dark page chrome
   everywhere (hero demo card, dashboard chat, forms, the signup modal,
   sidebar panels) — same pattern as the reference app's own white detail
   screens sitting on its dark navy chrome. These containers pin their own
   descendant text back to dark ink regardless of the (now light) color
   the surrounding dark section would otherwise hand down by inheritance. */
.hero-demo-card, .demo-card, .sidebar-block, .live-box, .signup-card, .partner-form, .oc-chat-card, .hero-itinerary-card { color: var(--ink); }
a { color: inherit; text-decoration: none; }
.tracked { letter-spacing: 2px; text-transform: uppercase; font-size: 12px; }
.wrap { max-width: 1400px; margin: 0 auto; padding-left: 6vw; padding-right: 6vw; }

.line-mask { overflow: hidden; display: block; }
.word { display: inline-block; will-change: transform; }
/* NOTE: these used to be opacity:0 by default in plain CSS, relying on
   JS (GSAP) to ever bring them back to visible. Same failure mode as the
   hero bug: if the animation script is slow, throttled, or blocked, the
   content is permanently invisible with no fallback. Visibility now
   defaults to normal; app.js applies the hidden starting state itself,
   only in browsers where it can also guarantee completing the reveal. */

/* ---------- NAV (shared, light) ---------- */
nav { display: flex; align-items: center; justify-content: space-between; padding: 26px 0; }
.logo-mark { display: flex; align-items: center; gap: 10px; }
/* The globe IS the mark now, so it no longer sits inside a coloured disc —
   that disc existed only to give the old flat crown glyph some presence.
   Boxing a detailed logo inside another shape is a classic way to make a
   real brand look like clip-art. */
/* Rhys's actual logo, regenerated on dark navy so there is no pale
   background to key out — the earlier cream original could not be cut
   cleanly at any threshold, because its glow is painted as light pixels on
   a light ground. Both pieces are crops of that one file, positioned with
   background-size/position rather than saved as separate images, because
   this CDN can't be downloaded into the project folder from here.
   Each element's aspect ratio is matched to its crop so nothing stretches. */
:root { --logo-src: url('assets/logo-mark.png'); }

.logo-icon {
  width: 50px; height: 44px; flex-shrink: 0;
  background-image: var(--logo-src);
  background-repeat: no-repeat;
  background-size: 168% auto;
  background-position: 50% 12%;
}
.logo-lockup { display: flex; flex-direction: column; justify-content: center; }
.logo-wordmark {
  display: block;
  width: 132px; height: 27px;
  background-image: var(--logo-src);
  background-repeat: no-repeat;
  background-size: 116% auto;
  background-position: 50% 74%;
  text-indent: -9999px;   /* keeps the accessible name, hides the fallback text */
  overflow: hidden;
}
/* Wordmark carries the same left-to-right azure→deep-blue gradient as the
   logo's lettering, rather than being flat white next to a full-colour
   mark. Tight tracking matches the original's geometric compression. */
.logo {
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 1.6px;
  line-height: 1;
  background: linear-gradient(96deg, #6FC4F8 0%, #2E9BE8 45%, #1A5FAE 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.logo-caption { font-size: 8px; letter-spacing: 2.6px; text-transform: uppercase; color: var(--grey); font-weight: 700; margin-top: 4px; }
.nav-links { display: flex; align-items: center; gap: 34px; font-size: 14.5px; color: var(--page-body); font-weight: 500; }
.nav-links a:hover { color: var(--page-ink); }
.nav-links a.current { color: var(--page-ink); }
.nav-btn { background: var(--blue); background-image: linear-gradient(180deg, rgba(255,255,255,0.16), rgba(255,255,255,0) 40%); box-shadow: inset 0 1px 0 rgba(255,255,255,0.16), inset 0 -1px 0 rgba(0,0,0,0.12); color: var(--white); border-radius: 999px; padding: 11px 22px; font-size: 14px; font-weight: 600; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; border: none; cursor: pointer; font-family: 'IBM Plex Sans', sans-serif; }
.nav-btn:hover { background: var(--blue-dark); transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.16), inset 0 -1px 0 rgba(0,0,0,0.12), var(--shadow-sm); }
.nav-right { display: flex; align-items: center; gap: 18px; }

/* Account avatar — replaces plain "Hi, name" text. Click toggles a small
   dropdown with sign out, same pattern as any consumer app account menu. */
.nav-account { position: relative; display: none; align-items: center; gap: 10px; cursor: pointer; }
.nav-account.active { display: flex; }
.nav-account .acct-name { font-size: 14px; font-weight: 600; color: var(--page-ink); }
.nav-account .avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--blue); color: var(--white); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; letter-spacing: 0.5px; }
.nav-account .acct-menu { display: none; position: absolute; top: 46px; right: 0; background: var(--white); border: 1px solid var(--line); border-radius: 14px; padding: 8px; min-width: 150px; box-shadow: var(--shadow-md); z-index: 50; }
.nav-account.open .acct-menu { display: block; }
.nav-account .acct-menu .signout { display: block; padding: 10px 12px; border-radius: 8px; font-size: 13.5px; color: var(--body); }
.nav-account .acct-menu .signout:hover { background: var(--cream); color: var(--ink); }

/* Slim dark top bar for pages that don't open with the full hero — same
   network visual as the hero/statement sections, very dim, so every page
   carries a trace of it rather than only the homepage. */
.topbar {
  position: relative;
  background: none;
  border-bottom: 1px solid var(--line-void);
}
.topbar::before { content: ''; position: absolute; inset: 0; background: rgba(7,21,40,0.97); pointer-events: none; }
.topbar nav { position: relative; z-index: 1; }

/* ---------- HERO (dark navy chrome, Home only) ----------
   Background is a generated visualization of the Orchestra Brain itself —
   a data/decision network rendered as light, not a stock photo of cars or
   jets. It's the software's own "mind" made visible, which is the actual
   product being sold, not a lifestyle scene standing in for it. A
   left-to-right dark fade keeps the headline legible over the busiest
   part of the image, which sits on the right where the network is
   densest. */
.hero {
  position: relative;
  overflow: hidden;
  padding-bottom: 40px;
  background: none;
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--void) 0%, rgba(7,21,40,0.97) 30%, rgba(7,21,40,0.86) 55%, rgba(7,21,40,0.70) 78%, rgba(7,21,40,0.62) 100%);
  pointer-events: none;
}
.hero-glow { position: absolute; top: -10%; right: -8%; width: 60%; height: 90%; background: radial-gradient(ellipse at center, rgba(18,100,200,0.10) 0%, rgba(18,100,200,0) 72%); pointer-events: none; }
.hero-inner { position: relative; z-index: 2; }
.hero-body { padding: 60px 0 20px; display: grid; grid-template-columns: 1.05fr 0.95fr; align-items: center; gap: 40px; }
.hero-content { max-width: 600px; }
.eyebrow { color: var(--gold-tracked); margin-bottom: 22px; display: flex; align-items: center; gap: 8px; }
.pulse-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--amber); display: inline-block; animation: pulse 2s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }
h1.display { font-size: clamp(38px, 5vw, 66px); font-weight: 700; line-height: 1.08; letter-spacing: -1.4px; margin-bottom: 24px; color: var(--page-ink); }
h1.display .accent { color: var(--blue); }
.hero-sub { font-size: 18px; color: var(--page-body); max-width: 480px; margin-bottom: 34px; line-height: 1.6; }

/* The search-bar-style hero input that doubles as the live Orchestra demo —
   this is what makes the homepage itself the "try it, don't even have to
   think" moment instead of a separate ask. */
.hero-demo-card { background: var(--white); border: 1px solid var(--line); border-radius: 20px; padding: 22px 24px; box-shadow: var(--shadow-md); }
.hero-demo-top { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--body); margin-bottom: 12px; }
.hero-demo-top .ready { display: flex; align-items: center; gap: 6px; letter-spacing: 1px; text-transform: uppercase; font-weight: 600; }
.hero-demo-row { display: flex; align-items: center; gap: 12px; }
.hero-input { flex: 1; border: none; background: transparent; font-size: 18px; color: var(--ink); font-family: 'IBM Plex Sans', sans-serif; outline: none; }
.hero-input::placeholder { color: #9a9584; }
.hero-go { background: var(--blue); background-image: linear-gradient(180deg, rgba(255,255,255,0.16), rgba(255,255,255,0) 40%); box-shadow: inset 0 1px 0 rgba(255,255,255,0.16), inset 0 -1px 0 rgba(0,0,0,0.12); color: var(--white); border-radius: 999px; padding: 13px 22px; font-size: 14px; font-weight: 600; white-space: nowrap; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; border: none; transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; }
.hero-go:hover { background: var(--blue-dark); transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.16), inset 0 -1px 0 rgba(0,0,0,0.12), var(--shadow-sm); }
.hero-go.loading { opacity: 0.6; pointer-events: none; }
.hero-demo-foot { display: flex; justify-content: space-between; font-size: 12px; color: var(--body); margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.hero-demo-foot .dot { width: 6px; height: 6px; border-radius: 50%; background: #3f6b4a; display: inline-block; margin-right: 6px; }
/* Modifier for the homepage's scripted-demo footer: instead of the two
   trust-copy labels either side, this holds the single "Sign up" (or,
   once signed in, "Go to your dashboard") call to action, full-width. */
.hero-demo-foot.cta { flex-direction: column; align-items: stretch; gap: 12px; margin-top: 20px; padding-top: 20px; }
.hero-demo-foot.cta .hero-go { justify-content: center; width: 100%; }
.hero-examples { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 18px; font-size: 13px; color: var(--body); }
.hero-examples .label { color: #9a9584; }
.chip { background: var(--white); border: 1px solid var(--line); border-radius: 999px; padding: 8px 14px; cursor: pointer; transition: border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease; }
.chip:hover { border-color: var(--blue); color: var(--blue); box-shadow: var(--shadow-sm); }

/* Locked preview card (Try Orchestra page) — shows a real example exchange
   with a soft fade-to-white and a Sign up CTA over the bottom, instead of
   a live input anyone can type into before signing up. */
.demo-card-locked { position: relative; overflow: hidden; padding-bottom: 190px; }
.demo-lock-overlay { position: absolute; left: 0; right: 0; bottom: 0; border-radius: 0 0 20px 20px; background: linear-gradient(180deg, rgba(255,255,255,0) 0%, var(--white) 44%, var(--white) 100%); display: flex; flex-direction: column; align-items: center; justify-content: flex-end; text-align: center; padding: 46px 32px 32px; gap: 14px; }
.demo-lock-icon { width: 42px; height: 42px; border-radius: 50%; background: var(--blue-tint); display: flex; align-items: center; justify-content: center; }
.demo-lock-icon svg { width: 18px; height: 18px; stroke: var(--blue); }
.demo-lock-overlay p { font-size: 15px; color: var(--body); max-width: 360px; }

/* ---------- hero visual: a real assembled itinerary, not an AI orb ----------
   Deliberately built from the same row/tag/price language already used in
   the Try Orchestra itinerary and the dashboard — one consistent visual grammar
   for "here's what Orchestra arranged" everywhere it appears on the site,
   rather than a separate decorative graphic invented just for the hero. */
@keyframes fadeInUpCss { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.hero-cta-row { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; margin-bottom: 26px; }
.hero-trust { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--page-body); }

/* The client's own words, sitting above the result inside the same card —
   the whole proposition in two lines: this is what you say, this is what
   you get back. */
.hero-ask { padding-bottom: 18px; margin-bottom: 20px; border-bottom: 1px solid var(--line); }
.hero-ask-label { font-size: 10.5px; letter-spacing: 1.4px; text-transform: uppercase; font-weight: 700; color: var(--body); margin-bottom: 7px; }
.hero-ask-text { font-family: 'IBM Plex Mono', monospace; font-style: normal; font-size: 19px; line-height: 1.4; color: var(--ink); }

.hero-visual { width: 100%; max-width: 440px; justify-self: center; animation: fadeInUpCss 0.7s ease-out both; }
.hero-itinerary-card { background: var(--white); border: 1px solid var(--line); border-radius: 20px; padding: 26px 26px 22px; box-shadow: var(--shadow-lg); }
.hero-itinerary-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.hero-itinerary-head .tracked { color: var(--blue); }
.hii-row { display: grid; grid-template-columns: 40px 16px 1fr auto; align-items: start; gap: 4px 12px; padding: 13px 0; border-top: 1px solid var(--line); }
.hero-itinerary-head + .hii-row { border-top: none; }
.hii-row.last { padding-bottom: 4px; }
.hii-time { font-size: 12px; color: var(--body); padding-top: 2px; }
.hii-line { position: relative; display: flex; justify-content: center; align-self: stretch; }
.hii-line::before { content: ''; position: absolute; top: 4px; bottom: -13px; width: 1px; background: var(--line); }
.hii-row.last .hii-line::before { display: none; }
.hii-dot { position: relative; z-index: 1; width: 7px; height: 7px; border-radius: 50%; background: var(--blue); margin-top: 4px; }
.hii-title { font-size: 14px; font-weight: 700; color: var(--ink); }
.hii-tag { color: #3f6b4a; font-size: 10px; letter-spacing: 0.6px; text-transform: uppercase; margin-left: 7px; font-weight: 700; }
.hii-sub { font-size: 12px; color: var(--body); margin-top: 2px; }
.hii-price { font-size: 13px; font-weight: 600; color: var(--blue); white-space: nowrap; padding-top: 2px; }
.hero-itinerary-foot { font-style: normal; font-size: 15px; color: var(--body); text-align: center; margin-top: 18px; padding-top: 16px; border-top: 1px dashed var(--line); }
.hero-visual-caption { text-align: center; margin-top: 18px; font-size: 11.5px; color: var(--page-body); display: flex; align-items: center; justify-content: center; gap: 6px; }
.hero-visual-caption .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--blue); display: inline-block; }

/* ==========================================================================
   v5 — SURFACES, BENTO, METRICS, PROVIDER WALL
   --------------------------------------------------------------------------
   Diagnosis this pass is built on: the site read as one continuous dark
   blur. Every section was near-black on near-black with nothing between
   them, so scrolling felt like nothing was happening — which is what
   "boring" actually meant, not the palette itself.

   The fix is the pattern every tier-1 product site converged on (Linear,
   Stripe, Vercel, Apple): keep a dark base, but make CARDS distinctly
   raised surfaces with visible hairline borders and a slight top-light
   gradient, and pack them densely into an asymmetric bento grid. Contrast
   comes from elevation and density, not from flipping to a light theme.
   ========================================================================== */

/* Raised surface — one token, used by every card so elevation is
   consistent everywhere rather than re-invented per component. */
.surface {
  position: relative;
  background: #FFFFFF;
  border: 1px solid var(--line);
  border-radius: 18px;
  transition: border-color 0.3s ease, transform 0.3s cubic-bezier(0.2,0.7,0.3,1), box-shadow 0.3s ease;
}
.surface:hover {
  border-color: rgba(18,100,200,0.42);
  box-shadow: var(--shadow-md);
}

/* ---------- PROVIDER WALL ----------
   A transport platform lives or dies on who it can actually reach, so the
   network is the single most persuasive thing above the fold. Text
   wordmarks rather than logo images: no licensing question, no broken
   images, and it stays crisp at any size. */
.provider-wall { background: var(--void); padding: 44px 0 52px; border-top: 1px solid var(--line-void); border-bottom: 1px solid var(--line-void); }
.provider-wall .pw-label { text-align: center; font-size: 11px; letter-spacing: 2.4px; text-transform: uppercase; color: var(--grey); font-weight: 700; margin-bottom: 26px; }
.pw-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 44px; }
.pw-item { font-family: 'IBM Plex Sans', sans-serif; font-size: 17px; font-weight: 600; letter-spacing: 0.4px; color: var(--grey); transition: color 0.25s ease; white-space: nowrap; }
.pw-item:hover { color: var(--gold-tracked); }

/* ---------- METRICS BAND ----------
   Big numbers, small labels. The scale contrast is doing the work — a
   metric set at body size reads as a footnote and persuades nobody. */
.metrics { background: var(--navy); padding: 76px 0; border-bottom: 1px solid var(--line-void); }
.metrics-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line-void); border-radius: 18px; overflow: hidden; }
.metric { background: var(--navy); padding: 38px 30px; text-align: center; }
.metric-value { font-family: 'IBM Plex Sans', sans-serif; font-size: clamp(34px, 4vw, 52px); font-weight: 700; line-height: 1; letter-spacing: -1.5px; color: var(--page-ink); }
.metric-value .unit { color: var(--blue); }
.metric-label { font-size: 12.5px; color: var(--page-body); margin-top: 12px; line-height: 1.45; }

/* ---------- BENTO GRID ----------
   Asymmetric on purpose: a double-height anchor cell on the left carrying
   the flagship capability, smaller cells filling the rest. A grid of
   identical boxes reads as a spec sheet; an anchored asymmetric one reads
   as art-directed, and it also matches how people actually rank these
   features in their heads. */
.bento { background: var(--void); padding: 110px 0; position: relative; }
.bento-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(180px, auto);
  gap: 16px;
}
/* Entrance is CSS-only and ends visible no matter what. These cells used
   to carry .reveal (JS/GSAP-driven), and four of six were sitting at
   opacity 0 permanently — the animation's start state applied but its
   ScrollTrigger never fired, so the content was simply invisible. Content
   that can only be revealed by a script is content that can silently
   disappear; this version animates for free and cannot get stuck. */
.bento-cell { padding: 28px 28px 26px; display: flex; flex-direction: column; overflow: hidden; animation: fadeInUpCss 0.55s ease-out both; }
.bento-cell:nth-child(2) { animation-delay: 0.06s; }
.bento-cell:nth-child(3) { animation-delay: 0.12s; }
.bento-cell:nth-child(4) { animation-delay: 0.18s; }
.bento-cell:nth-child(5) { animation-delay: 0.24s; }
.bento-cell:nth-child(6) { animation-delay: 0.30s; }
.bento-cell.anchor { grid-column: span 1; grid-row: span 2; }
.bento-cell.wide { grid-column: span 2; }
.bento-icon { width: 38px; height: 38px; border-radius: 11px; background: rgba(18,100,200,0.12); border: 1px solid rgba(18,100,200,0.28); display: flex; align-items: center; justify-content: center; margin-bottom: 20px; flex-shrink: 0; }
.bento-icon svg { width: 19px; height: 19px; stroke: var(--blue); fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.bento-cell h3 { font-size: 17.5px; font-weight: 700; line-height: 1.3; margin-bottom: 9px; color: var(--page-ink); }
.bento-cell p { font-size: 14px; line-height: 1.62; color: var(--page-body); }
.bento-cell .bento-spacer { flex: 1; min-height: 14px; }

/* Miniature product UI inside a cell — showing the real thing beats
   describing it, and it's what makes a bento grid feel like a product
   site rather than a brochure. */
.mini-ui { margin-top: 18px; border-radius: 12px; border: 1px solid var(--line); background: var(--cream-2); padding: 13px 14px; }
.mini-row { display: flex; align-items: center; gap: 10px; padding: 7px 0; font-size: 12.5px; color: var(--page-body); }
.mini-row + .mini-row { border-top: 1px solid var(--line); }
.mini-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--blue); flex-shrink: 0; }
.mini-row .mini-main { color: var(--page-ink); font-weight: 600; }
.mini-row .mini-right { margin-left: auto; color: var(--blue); font-weight: 600; white-space: nowrap; }
.mini-strike { text-decoration: line-through; opacity: 0.45; }
.mini-chip { display: inline-block; font-size: 10px; letter-spacing: 0.6px; text-transform: uppercase; font-weight: 700; padding: 2px 7px; border-radius: 999px; background: rgba(95,174,114,0.16); color: #7fc794; margin-left: 6px; }
.mini-chip.warn { background: rgba(18,100,200,0.16); color: var(--gold-tracked); }

/* Chat fragment for the anchor cell */
.mini-chat { margin-top: 18px; display: flex; flex-direction: column; gap: 9px; }
.mini-bubble { border-radius: 13px; padding: 10px 13px; font-size: 12.5px; line-height: 1.5; max-width: 92%; }
.mini-bubble.you { align-self: flex-end; background: var(--blue); color: #fff; border-bottom-right-radius: 4px; }
.mini-bubble.oc { align-self: flex-start; background: var(--line); border: 1px solid var(--line); color: var(--page-ink); border-bottom-left-radius: 4px; }

@media (max-width: 1000px) {
  .bento-grid { grid-template-columns: repeat(2, 1fr); }
  .bento-cell.anchor { grid-row: span 1; }
  .bento-cell.wide { grid-column: span 2; }
  .metrics-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .bento-grid, .metrics-grid { grid-template-columns: 1fr; }
  .bento-cell.wide { grid-column: span 1; }
}

/* ==========================================================================
   ENGINE SHOWCASE — the "watch it work" panel on How it works
   --------------------------------------------------------------------------
   Built as a live DOM animation rather than an exported video file. Three
   reasons that's the better call here: it stays perfectly crisp at any
   screen size (a video is fixed-resolution and goes soft on a 5K display),
   it starts instantly instead of buffering several megabytes, and the data
   in it is real markup — so when the provider list or the reasoning stages
   change, this changes with them instead of silently becoming a lie about
   a product that has moved on.
   ========================================================================== */
.showcase { position: relative; overflow: hidden; background: var(--navy); padding: 96px 0 110px; }
.showcase::before {
  content: '';
  position: absolute; inset: 0;
  background: none;
  opacity: 0.10; pointer-events: none;
}
.showcase > .wrap { position: relative; z-index: 1; }

.engine {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 0;
  border: 1px solid var(--line);
  border-radius: 20px;
  overflow: hidden;
  background: linear-gradient(180deg, #FFFFFF, #FFFFFF);
  box-shadow: 0 30px 70px -30px rgba(0,0,0,0.8);
}

/* Fake window chrome — a small honesty cue that says "this is the software",
   the same way a product screenshot would. */
.engine-bar { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--line); background: var(--cream-2); }
.engine-bar .dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,0.18); }
.engine-bar .title { margin-left: 10px; font-size: 11.5px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--grey); font-weight: 700; }
.engine-bar .live { margin-left: auto; display: flex; align-items: center; gap: 7px; font-size: 11px; color: var(--blue); font-weight: 700; letter-spacing: 0.6px; }

/* --- left rail: the pipeline --- */
.engine-rail { border-right: 1px solid var(--line); padding: 22px 20px; background: var(--cream-2); }
.rail-label { font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--grey); font-weight: 700; margin-bottom: 18px; }
.stage { display: flex; align-items: flex-start; gap: 12px; padding: 11px 0; position: relative; opacity: 0.34; transition: opacity 0.45s ease; }
.stage::before { content: ''; position: absolute; left: 7px; top: 30px; bottom: -11px; width: 1px; background: var(--line); }
.stage:last-child::before { display: none; }
.stage-dot { width: 15px; height: 15px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.28); flex-shrink: 0; margin-top: 2px; position: relative; z-index: 1; background: var(--navy); transition: border-color 0.35s ease, background 0.35s ease, box-shadow 0.35s ease; }
.stage-name { font-size: 13.5px; font-weight: 600; color: var(--page-ink); line-height: 1.3; }
.stage-note { font-size: 11.5px; color: var(--page-body); margin-top: 3px; min-height: 15px; }
.stage.active { opacity: 1; }
.stage.active .stage-dot { border-color: var(--blue); background: var(--blue); box-shadow: 0 0 0 5px rgba(18,100,200,0.18); }
.stage.done { opacity: 0.72; }
.stage.done .stage-dot { border-color: var(--blue); background: var(--blue); }

/* --- right canvas --- */
.engine-canvas { padding: 24px 26px 28px; min-height: 430px; display: flex; flex-direction: column; }
.engine-ask { border-radius: 13px; background: var(--blue); color: #fff; padding: 12px 16px; font-size: 14px; align-self: flex-end; max-width: 78%; border-bottom-right-radius: 4px; opacity: 0; transform: translateY(8px); transition: opacity 0.4s ease, transform 0.4s ease; }
.engine-ask.show { opacity: 1; transform: none; }

.engine-section-label { font-size: 10px; letter-spacing: 1.8px; text-transform: uppercase; color: var(--grey); font-weight: 700; margin: 22px 0 11px; opacity: 0; transition: opacity 0.4s ease; }
.engine-section-label.show { opacity: 1; }

/* provider candidates being weighed */
.cand-row { display: flex; flex-wrap: wrap; gap: 8px; }
.cand {
  display: flex; align-items: center; gap: 9px;
  border: 1px solid var(--line); border-radius: 999px;
  padding: 7px 14px; font-size: 12.5px; color: var(--page-body);
  background: var(--cream-2);
  opacity: 0; transform: translateY(6px);
  transition: opacity 0.35s ease, transform 0.35s ease, border-color 0.35s ease, color 0.35s ease, background 0.35s ease;
}
.cand.show { opacity: 1; transform: none; }
.cand .score { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--grey); }
.cand.win { border-color: var(--blue); background: rgba(18,100,200,0.14); color: var(--page-ink); }
.cand.win .score { color: var(--blue); }
.cand.out { opacity: 0.26; text-decoration: line-through; }

/* itinerary assembling */
.build-list { margin-top: 4px; }
.build-row { display: grid; grid-template-columns: 54px 14px 1fr auto; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid var(--line); opacity: 0; transform: translateY(8px); transition: opacity 0.45s ease, transform 0.45s ease; }
.build-row:first-child { border-top: none; }
.build-row.show { opacity: 1; transform: none; }
.build-time { font-size: 12px; color: var(--page-body); font-variant-numeric: tabular-nums; }
.build-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--blue); }
.build-what { font-size: 13.5px; font-weight: 600; color: var(--page-ink); }
.build-who { font-size: 11.5px; color: var(--page-body); margin-top: 2px; }
.build-price { font-size: 13px; font-weight: 600; color: var(--blue); font-variant-numeric: tabular-nums; }
.build-row.dropped .build-what, .build-row.dropped .build-who { text-decoration: line-through; opacity: 0.45; }
.build-row.moved .build-time { color: var(--blue); font-weight: 700; }

.engine-flash { margin-top: 18px; border-radius: 12px; border: 1px solid rgba(18,100,200,0.4); background: rgba(18,100,200,0.10); padding: 12px 15px; font-size: 13px; color: var(--page-ink); opacity: 0; transform: translateY(6px); transition: opacity 0.4s ease, transform 0.4s ease; }
.engine-flash.show { opacity: 1; transform: none; }
.engine-flash b { color: var(--blue); }

@media (max-width: 860px) {
  .engine { grid-template-columns: 1fr; }
  .engine-rail { border-right: none; border-bottom: 1px solid var(--line); }
}

/* ==========================================================================
   DEPTH & MOTION
   --------------------------------------------------------------------------
   Cards tilt toward the cursor in real 3D. Kept deliberately restrained
   (max ~6°): past that it stops reading as a considered surface and starts
   reading as a gimmick, and text rendering degrades on a steeply rotated
   plane. Perspective lives on the PARENT so several cards in a grid share
   one vanishing point — giving each its own makes them tilt like unrelated
   objects and the whole grid feels wobbly.
   ========================================================================== */
.tilt-scene { perspective: 1400px; }
.tilt {
  transform-style: preserve-3d;
  transition: transform 0.5s cubic-bezier(0.2,0.7,0.3,1);
  will-change: transform;
}
.tilt.tilting { transition: transform 0.09s linear; }
/* Lifts slightly out of the card's own plane on hover, so the contents feel
   like they sit above the surface rather than printed onto it. */
.tilt-layer { transform: translateZ(26px); transition: transform 0.5s cubic-bezier(0.2,0.7,0.3,1); }

/* A specular sheen that follows the cursor — this is what sells a surface as
   physical. Pointer-events off so it never blocks clicks. */
.tilt-sheen {
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(600px circle at var(--mx, 50%) var(--my, 50%), var(--line), transparent 42%);
  opacity: 0; transition: opacity 0.35s ease;
}
.tilt:hover .tilt-sheen { opacity: 1; }

/* Motion is decoration. Anyone who has asked their system to reduce motion
   gets the static card — not a smaller animation, none. */
@media (prefers-reduced-motion: reduce) {
  .tilt, .tilt-layer { transition: none !important; transform: none !important; }
  .tilt-sheen { display: none; }
  .bento-cell, .hero-visual { animation: none !important; }
}

/* ---------- STATEMENT BLOCKS ---------- */
/* Dark sections with a short text block used to just be a ~760px column
   floating on an otherwise completely flat, empty black background — at a
   normal desktop width that leaves roughly half the screen as dead void,
   which reads as broken/unfinished far more than it reads as "spacious."
   position:relative + overflow:hidden here lets each one carry its own
   background glow and a huge, barely-there crown watermark so the empty
   area has depth and a sense of scale instead of just being nothing. */
.statement { position: relative; overflow: hidden; padding: 130px 0; display: flex; flex-direction: column; justify-content: center; }
/* Same generated "Orchestra Brain" network visual as the hero, reused here
   at low strength as each dark section's own background instead of a
   flat color plus a CSS-drawn glow — one consistent piece of imagery
   representing the software's intelligence, recurring across the site
   rather than invented fresh (and inconsistently) per section. */
.statement::before {
  content: '';
  position: absolute;
  inset: 0;
  background: none;
  opacity: 0.09;
  pointer-events: none;
}
.statement::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--void) 0%, rgba(7,21,40,0.85) 34%, rgba(7,21,40,0.55) 60%, rgba(7,21,40,0.35) 100%);
  pointer-events: none;
}
.statement.navy::after { background: linear-gradient(90deg, var(--navy) 0%, rgba(12,35,64,0.85) 34%, rgba(12,35,64,0.55) 60%, rgba(12,35,64,0.35) 100%); }
.statement-inner { position: relative; z-index: 1; max-width: 760px; }
.statement.dark { background: var(--void); color: var(--ink); }
.statement.navy { background: var(--navy); color: var(--ink); }
.statement.cream { background: var(--navy); color: var(--page-ink); }
.statement.cream-2 { background: var(--void); color: var(--page-ink); }
/* Centered CTA sections don't have the same lopsided empty-side problem
   (the content is centered, not pinned left), so the big side watermark
   would just look like a random smudge behind centered text — hide it
   there and let the glow alone do the work. */
/* Centered CTA sections have text in the middle, not pinned left, so the
   left-to-right fade would leave the centre — exactly where the text
   sits — too bright. A centred radial fade instead. */
.statement:has(.statement-inner.center)::after {
  background: radial-gradient(ellipse at center, rgba(7,21,40,0.88) 0%, rgba(7,21,40,0.72) 45%, rgba(7,21,40,0.55) 100%);
}
.statement.navy:has(.statement-inner.center)::after {
  background: radial-gradient(ellipse at center, rgba(12,35,64,0.88) 0%, rgba(12,35,64,0.72) 45%, rgba(12,35,64,0.55) 100%);
}
.statement-inner.center { max-width: 820px; margin: 0 auto; text-align: center; }
.statement .tracked { color: var(--blue); margin-bottom: 22px; display: inline-block; }
.statement.dark .tracked, .statement.navy .tracked { color: var(--gold-tracked); }
.statement h2 { font-size: clamp(30px, 4vw, 52px); font-weight: 700; line-height: 1.14; letter-spacing: -0.5px; margin-bottom: 24px; }
.statement p.lead { font-size: 18px; line-height: 1.7; opacity: 0.72; max-width: 600px; margin-bottom: 36px; }
.statement-inner.center p.lead { margin-left: auto; margin-right: auto; }
.statement .cta-row { display: flex; align-items: center; gap: 26px; }
.statement-inner.center .cta-row { justify-content: center; }

.preview-card { background: var(--cream-2); border: 1px solid var(--line-void); border-radius: 16px; padding: 26px 28px; max-width: 460px; margin-top: 6px; }
.preview-card .preview-label { font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--gold-tracked); margin-bottom: 16px; font-weight: 700; }
.preview-card .preview-line { font-size: 15px; line-height: 1.6; opacity: 0.88; margin-bottom: 10px; }
.preview-card .preview-line:last-child { margin-bottom: 0; }
.preview-card .preview-line b { font-weight: 700; opacity: 1; }

/* Buttons — a subtle inner highlight (inset top-light + inset bottom-line)
   on top of the flat fill so the pill reads as a lightly crafted physical
   surface rather than a single flat CSS color, which is one of the
   fastest tells of a templated button. Kept subtle: this is a materiality
   cue, not a skeuomorphic 2012 button. */
.btn-solid { background: var(--blue); background-image: linear-gradient(180deg, rgba(255,255,255,0.16), rgba(255,255,255,0) 40%); box-shadow: inset 0 1px 0 rgba(255,255,255,0.16), inset 0 -1px 0 rgba(0,0,0,0.12); color: var(--white); border-radius: 999px; padding: 15px 28px; font-size: 14.5px; font-weight: 600; display: inline-flex; align-items: center; gap: 8px; transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; }
.btn-solid:hover { background: var(--blue-dark); transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.16), inset 0 -1px 0 rgba(0,0,0,0.12), var(--shadow-sm); }
.btn-solid.on-dark { background: var(--blue); color: #fff; }
.btn-solid.on-dark:hover { background: #e7e4da; }
/* Underline-reveal text links — the rule draws in from the left on hover
   instead of a static border always being there, a small piece of motion
   that a component-library default wouldn't bother with. */
.btn-text { position: relative; font-size: 13px; letter-spacing: 0.3px; font-weight: 600; color: var(--blue); padding-bottom: 3px; }
.btn-text::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform: scaleX(0.32); transform-origin: left; opacity: 0.4; transition: transform 0.3s cubic-bezier(0.4,0,0.2,1), opacity 0.3s ease; }
.btn-text:hover::after { transform: scaleX(1); opacity: 0.9; }
.btn-text.on-dark { color: var(--blue); }

/* ---------- DENSER CONTENT SECTIONS (Product page) ---------- */
.dark-section { position: relative; overflow: hidden; background: var(--void); color: var(--ink); padding: 120px 0; }
.dark-section.alt-navy { background: var(--navy); }
.dark-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: none;
  opacity: 0.06;
  pointer-events: none;
}
.dark-section::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, var(--void) 0%, rgba(7,21,40,0.9) 40%, rgba(7,21,40,0.6) 70%, rgba(7,21,40,0.4) 100%);
  pointer-events: none;
}
.dark-section.alt-navy::after { background: linear-gradient(100deg, var(--navy) 0%, rgba(12,35,64,0.9) 40%, rgba(12,35,64,0.6) 70%, rgba(12,35,64,0.4) 100%); }
.dark-section .wrap { position: relative; z-index: 1; }
.section-head { max-width: 680px; margin-bottom: 68px; padding-top: 22px; border-top: 1px solid var(--line-void); }
.section-head .tracked { color: var(--gold-tracked); margin-bottom: 20px; }
.section-head h2 { font-size: clamp(30px, 3.6vw, 46px); font-weight: 700; line-height: 1.2; }
.section-head p { color: var(--body); font-size: 17px; line-height: 1.75; margin-top: 22px; max-width: 600px; }
.demo-head { padding-top: 20px; border-top: 1px solid var(--line-void); }

/* Editorial index numeral — replaces the small uppercase "tag" label on
   numbered items with a large, lightweight serif numeral plus a hairline
   rule underneath. This one swap is most of what separates "designed" from
   "templated": a set of identical boxes with tiny caption labels reads as
   a component library default, a big quiet numeral with generous space
   around it reads as art-directed. */
.n { display: block; font-family: 'IBM Plex Mono', monospace; font-size: 40px; font-weight: 400; font-style: italic; line-height: 1; color: var(--gold-tracked); margin-bottom: 26px; }
.n::after { content: ''; display: block; width: 28px; height: 1px; background: currentColor; opacity: 0.35; margin-top: 16px; }

.problem-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line-void); max-width: 900px; border-radius: 18px; overflow: hidden; }
.problem-point { background: var(--void); padding: 46px 40px; transition: background 0.25s ease; }
.problem-point:hover { background: var(--cream-2); }
.problem-point p { font-size: 17.5px; line-height: 1.6; font-weight: 500; max-width: 320px; }

.feature-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line-dark); border-radius: 18px; overflow: hidden; }
.feature-cell { background: var(--navy); padding: 46px 40px; transition: background 0.25s ease; }
.feature-cell:hover { background: var(--cream-2); }
.feature-cell h3 { font-size: 19px; font-weight: 700; line-height: 1.3; margin-bottom: 12px; }
.feature-cell p { font-size: 14.5px; color: var(--body); line-height: 1.6; max-width: 320px; }

.partner-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line-void); border-radius: 18px; overflow: hidden; }
.partner-card { background: var(--void); padding: 44px 36px; transition: background 0.25s ease; }
.partner-card:hover { background: var(--cream-2); }
.partner-card .tag { color: var(--gold-tracked); font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 20px; font-weight: 700; }
.partner-card h3 { font-size: 20px; font-weight: 700; margin-bottom: 14px; }
.partner-card p { font-size: 15px; color: var(--body); line-height: 1.65; max-width: 340px; }

/* ---------- CONSUMER BRIDGE ---------- */
.bridge { position: relative; overflow: hidden; background: var(--navy); color: var(--page-ink); padding: 90px 0 44px; text-align: center; }
.bridge::before {
  content: '';
  position: absolute;
  inset: 0;
  background: none;
  opacity: 0.07;
  pointer-events: none;
}
.bridge::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(12,35,64,0.82) 0%, rgba(12,35,64,0.68) 45%, rgba(12,35,64,0.5) 100%);
  pointer-events: none;
}
.bridge.on-dark::after { background: radial-gradient(ellipse at center, rgba(7,21,40,0.82) 0%, rgba(7,21,40,0.68) 45%, rgba(7,21,40,0.5) 100%); }
.bridge > .wrap { position: relative; z-index: 1; }
.bridge .tracked { color: var(--gold-tracked); margin-bottom: 18px; }
.bridge h2 { font-size: clamp(28px,3.4vw,42px); font-weight: 700; max-width: 680px; margin: 0 auto 18px; }
.bridge p { color: var(--page-body); max-width: 540px; margin: 0 auto; font-size: 16px; line-height: 1.65; }
.bridge.on-dark { background: var(--cream-2); color: var(--ink); }
.bridge.on-dark .tracked { color: var(--gold-tracked); }
.bridge.on-dark p { color: var(--body); }

/* ---------- DEMO SECTIONS (Try Orchestra page) — dark navy chrome, white
   content cards floating on top ---------- */
.demo { position: relative; overflow: hidden; background: var(--navy); padding: 88px 0; color: var(--page-ink); }
.demo.alt { background: var(--void); }
.demo::before {
  content: '';
  position: absolute;
  inset: 0;
  background: none;
  opacity: 0.05;
  pointer-events: none;
}
.demo::after { content: ''; position: absolute; inset: 0; background: rgba(12,35,64,0.65); pointer-events: none; }
.demo.alt::after { background: rgba(7,21,40,0.65); }
.demo > .wrap { position: relative; z-index: 1; }
.demo-head { margin-bottom: 46px; }
.demo-head .tracked { color: var(--gold-tracked); margin-bottom: 14px; }
.demo-head h2 { font-size: clamp(28px, 3.2vw, 40px); font-weight: 700; }
.demo-card { background: var(--white); border: 1px solid var(--line); border-radius: 20px; padding: 30px 32px; box-shadow: var(--shadow-md); }
.demo-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 40px; align-items: start; }
.field-box { border: none; border-bottom: 1px solid var(--line); padding-bottom: 16px; margin-bottom: 20px; font-size: 19px; color: var(--ink); background: transparent; width: 100%; font-family: 'IBM Plex Sans', sans-serif; outline: none; border-radius: 0; }
.field-box::placeholder { color: #9a9584; }
.field-box:focus { border-bottom-color: var(--blue); }
#ocSubmit { cursor: pointer; }
#ocSubmit.loading { opacity: 0.6; pointer-events: none; }
.demo-cta-row { display: flex; justify-content: flex-end; margin-bottom: 26px; }
.btn-muted { background: var(--blue); color: var(--white); border-radius: 999px; padding: 12px 22px; font-size: 13.5px; font-weight: 600; transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; }
.btn-muted:hover { background: var(--blue-dark); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.example-item { border-top: 1px solid var(--line); padding: 14px 0; font-size: 15px; color: var(--body); display: flex; gap: 12px; }
.example-item span:first-child { color: #9a9584; }
.qa-option { border-top: 1px solid var(--line); padding: 14px 0; font-size: 15px; display: flex; gap: 12px; }
.qa-option span:first-child { color: #9a9584; }

.oc-leg { border-top: 1px solid var(--line); padding: 14px 0; font-size: 14px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.oc-leg .leg-main { font-weight: 700; }
.oc-leg .leg-sub { color: var(--body); font-size: 12.5px; margin-top: 3px; max-width: 480px; }
.oc-leg .leg-price { font-weight: 600; white-space: nowrap; color: var(--blue); }
.leg-pending { font-size: 10px; letter-spacing: 0.6px; text-transform: uppercase; font-weight: 700; color: var(--blue); background: var(--blue-tint); border-radius: 999px; padding: 2px 8px; margin-left: 8px; vertical-align: middle; }
.example-item.oc-example { cursor: pointer; }
.example-item.oc-example:hover span:last-child { color: var(--blue); }
.oc-turn { padding: 18px 0; border-top: 1px solid var(--line); }
.oc-turn:first-child { border-top: none; padding-top: 0; }
.oc-turn-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--body); margin-bottom: 6px; font-weight: 700; }
.oc-turn-orchestra .oc-turn-label { color: var(--blue); }
.oc-turn-text { font-size: 16px; line-height: 1.6; max-width: 640px; }
.oc-turn-user .oc-turn-text { font-weight: 600; }

/* ---------- ORCHESTRA CHAT (Dashboard) — a real chat panel: fixed-height
   scrollable message window with the composer pinned underneath, instead
   of a growing block that pushes the whole page down and makes people
   scroll to keep up with the conversation. ---------- */
.oc-chat-card { background: var(--white); border: 1px solid var(--line); border-radius: 20px; padding: 26px 26px 20px; box-shadow: var(--shadow-md); display: flex; flex-direction: column; }
.oc-chat-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.oc-chat-head h2 { font-size: 22px; margin-top: 5px; }

.voice-toggle { flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: var(--cream); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: border-color 0.2s ease; }
.voice-toggle:hover { border-color: var(--blue); }
.voice-toggle svg { width: 18px; height: 18px; stroke: var(--blue); }

.oc-chat-window { max-height: 440px; min-height: 170px; overflow-y: auto; scroll-behavior: smooth; padding-right: 4px; margin-bottom: 4px; }
.oc-chat-empty { padding: 6px 2px 10px; }
.oc-chat-empty-label { font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: #9a9584; font-weight: 700; margin-bottom: 14px; }
.oc-chat-empty .oc-example { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; font-size: 14px; color: var(--body); margin-bottom: 10px; cursor: pointer; transition: border-color 0.2s ease, color 0.2s ease; }
.oc-chat-empty .oc-example:hover { border-color: var(--blue); color: var(--blue); }

.oc-msg { display: flex; margin-bottom: 16px; }
.oc-msg-user { justify-content: flex-end; }
.oc-msg-orchestra { justify-content: flex-start; }
.oc-msg-col { display: flex; flex-direction: column; max-width: 84%; }
.oc-msg-user .oc-msg-col { align-items: flex-end; }
.oc-msg-label { font-size: 10.5px; letter-spacing: 1px; text-transform: uppercase; font-weight: 700; margin-bottom: 5px; }
.oc-msg-user .oc-msg-label { color: var(--body); }
.oc-msg-orchestra .oc-msg-label { color: var(--blue); }
.oc-bubble { padding: 12px 16px; border-radius: 16px; font-size: 15px; line-height: 1.58; }
.oc-msg-user .oc-bubble { background: var(--blue); color: var(--white); border-bottom-right-radius: 4px; }
.oc-msg-orchestra .oc-bubble { background: var(--cream); border: 1px solid var(--line); color: var(--ink); border-bottom-left-radius: 4px; }
.oc-bubble strong { font-weight: 700; }
.oc-bubble .oc-leg { padding: 12px 0; }

.oc-chat-note { font-size: 12px; color: var(--body); min-height: 16px; margin: 10px 0 14px; }

.oc-chat-inputbar { display: flex; align-items: center; gap: 10px; border-top: 1px solid var(--line); padding-top: 16px; }
.oc-chat-input { flex: 1; border: 1px solid var(--line); background: var(--cream); border-radius: 999px; padding: 12px 18px; font-size: 15px; color: var(--ink); font-family: 'IBM Plex Sans', sans-serif; outline: none; }
.oc-chat-input::placeholder { color: #9a9584; }
.oc-chat-input:focus { border-color: var(--blue); }
.oc-chat-send { flex-shrink: 0; width: 42px; height: 42px; border-radius: 50%; background: var(--blue); border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.2s ease, transform 0.2s ease, opacity 0.2s ease; }
.oc-chat-send svg { width: 18px; height: 18px; stroke: var(--white); }
.oc-chat-send:hover { background: var(--blue-dark); }
.oc-chat-send.loading { opacity: 0.55; pointer-events: none; }
.mic-btn { flex-shrink: 0; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line); background: var(--cream); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.2s ease, border-color 0.2s ease; }
.mic-btn svg { width: 18px; height: 18px; stroke: var(--body); transition: stroke 0.2s ease; }
.mic-btn:hover { border-color: var(--blue); }
.mic-btn:hover svg { stroke: var(--blue); }
.mic-btn.listening { background: #fdeceb; border-color: #d9534f; animation: micPulse 1.4s ease-in-out infinite; }
.mic-btn.listening svg { stroke: #d9534f; }
@keyframes micPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(217,83,79,0.35); } 50% { box-shadow: 0 0 0 8px rgba(217,83,79,0); } }

/* Itinerary result */
.itinerary-head { font-size: clamp(26px,3.2vw,36px); font-weight: 700; margin-bottom: 4px; }
.itinerary-head .dim { color: var(--page-body); font-weight: 500; font-size: 20px; }
.itinerary-quote { font-family: 'IBM Plex Mono', monospace; font-style: normal; color: var(--page-body); margin-bottom: 44px; font-size: 16px; line-height: 1.55; max-width: 520px; }
.itinerary-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 40px; }
/* The example itinerary used to be bare rows floating on the section
   background, which read as unfinished next to the real product cards
   elsewhere. Same raised surface as everything else now. */
.itin-panel { padding: 24px 26px 10px; }
.itin-panel-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 16px; border-bottom: 1px solid var(--line-void); }
.itin-panel-head .tracked { color: var(--gold-tracked); }
.itin-total { font-size: 13px; font-weight: 700; color: var(--blue); }
.itin-panel .leg:last-child { border-bottom: none; }
.leg { border-bottom: 1px solid var(--line-void); padding: 16px 0; display: grid; grid-template-columns: 60px 1fr auto; gap: 14px; align-items: start; }
.leg-time { color: var(--page-body); font-size: 13px; padding-top: 3px; }
.leg-title { font-weight: 700; font-size: 15px; margin-bottom: 3px; color: var(--page-ink); }
.leg-tag { color: #5fae72; font-size: 10.5px; letter-spacing: 1px; text-transform: uppercase; margin-left: 8px; }
.leg-meta { color: var(--page-body); font-size: 12.5px; }
.leg-meta a { text-decoration: underline; color: var(--blue); }
.leg-price { font-weight: 600; font-size: 14px; color: var(--blue); }
.sidebar-block { border: 1px solid var(--line); border-radius: 16px; padding: 20px; margin-bottom: 16px; background: var(--white); transition: box-shadow 0.25s ease, transform 0.25s ease; }
.sidebar-block:hover { box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.sidebar-block .tracked { color: var(--blue); margin-bottom: 14px; display: block; }
.sidebar-block .row { border-top: 1px solid var(--line); padding: 9px 0; font-size: 13.5px; }
.sidebar-block .row:first-of-type { border-top: none; }
.live-box { background: var(--blue-tint); border-radius: 16px; padding: 20px; }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: #3f6b4a; display: inline-block; margin-right: 8px; animation: pulse 2s ease-in-out infinite; }
.live-box .title { font-weight: 700; font-size: 14.5px; margin-bottom: 10px; }
.live-event { background: var(--white); border-radius: 10px; padding: 12px 14px; font-size: 13px; }
.live-event b { display: block; margin-bottom: 3px; }
.live-clock { font-size: 11px; color: var(--body); margin-top: 10px; }

/* Dashboard "still watching" panel */
.watch-panel { margin-top: 16px; padding: 20px 22px 18px; }
.watch-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.watch-head .tracked { color: var(--gold-tracked); font-size: 11px; }
.watch-pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--blue); animation: pulse 2s ease-in-out infinite; }
.watch-row { display: flex; gap: 11px; align-items: flex-start; padding: 9px 0; border-top: 1px solid var(--line); }
.watch-row:first-of-type { border-top: none; }
.watch-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--blue); margin-top: 6px; flex-shrink: 0; }
.watch-t { font-size: 13.5px; font-weight: 600; color: var(--page-ink); }
.watch-s { font-size: 12px; color: var(--page-body); margin-top: 2px; }
.watch-foot { margin-top: 14px; padding-top: 13px; border-top: 1px dashed var(--line); font-size: 12px; color: var(--page-body); line-height: 1.55; }

/* ==========================================================================
   DASHBOARD SHELL
   --------------------------------------------------------------------------
   A real application layout: persistent left rail, switchable views on the
   right. Previously the dashboard was a marketing section with a chat box
   dropped into it — fine as a demo, wrong as somewhere a client returns to
   week after week. Navigation stays on screen because a dashboard's job is
   to make everything reachable at a glance, not to be toured once.
   ========================================================================== */
.dash { background: var(--void); padding: 40px 0 90px; min-height: 78vh; }
.dash-shell { display: grid; grid-template-columns: 268px 1fr; gap: 30px; align-items: start; }

.dash-nav { position: sticky; top: 24px; }
.dash-greet { display: flex; align-items: center; gap: 12px; padding: 16px 16px 18px; border-bottom: 1px solid var(--line-void); margin-bottom: 14px; }
.dash-avatar { width: 42px; height: 42px; border-radius: 50%; background: linear-gradient(140deg, var(--blue), #1A5FAE); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; letter-spacing: 0.5px; flex-shrink: 0; }
.dash-name { font-size: 15px; font-weight: 700; color: var(--page-ink); }
.dash-sub { font-size: 11.5px; color: var(--page-body); margin-top: 2px; }

.dash-links { display: flex; flex-direction: column; gap: 2px; }
.dash-link {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 14px; border-radius: 11px;
  background: none; border: none; cursor: pointer;
  font-family: 'IBM Plex Sans', sans-serif; font-size: 14px; font-weight: 500;
  color: var(--page-body); text-align: left; width: 100%;
  transition: background 0.2s ease, color 0.2s ease;
}
.dash-link svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.dash-link:hover { background: var(--cream-2); color: var(--page-ink); }
.dash-link.active { background: rgba(18,100,200,0.15); color: var(--page-ink); font-weight: 600; }
.dash-link.active svg { stroke: var(--blue); }
.dash-count { margin-left: auto; font-size: 11px; font-weight: 700; color: var(--blue); background: rgba(18,100,200,0.16); border-radius: 999px; padding: 1px 8px; min-width: 20px; text-align: center; }
.dash-count:empty { display: none; }

.dash-watch { margin-top: 22px; padding: 15px 16px; border-radius: 13px; border: 1px solid rgba(18,100,200,0.24); background: rgba(18,100,200,0.07); }
.dash-watch-top { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700; color: var(--page-ink); }
.dash-watch-sub { font-size: 11.5px; color: var(--page-body); line-height: 1.55; margin-top: 7px; }

/* Views. Only one is in the document flow at a time; the rest are fully
   removed rather than just faded, so hidden panels can't be tabbed into. */
.dash-view { display: none; animation: fadeInUpCss 0.4s ease-out both; }
.dash-view.active { display: block; }
.dash-head { margin-bottom: 26px; }
.dash-head h2 { font-size: clamp(24px, 2.6vw, 33px); font-weight: 700; margin-top: 8px; }
.dash-head .tracked { color: var(--gold-tracked); }
.dash-lead { color: var(--page-body); font-size: 14.5px; line-height: 1.6; margin-top: 10px; max-width: 520px; }
.dash-sec-label { font-size: 10.5px; letter-spacing: 1.8px; text-transform: uppercase; color: var(--grey); font-weight: 700; margin-bottom: 12px; }

.stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 34px; }
.stat { padding: 20px 20px 18px; }
.stat-v { font-family: 'IBM Plex Sans', sans-serif; font-size: 27px; font-weight: 700; color: var(--page-ink); letter-spacing: -0.6px; }
.stat-l { font-size: 11.5px; color: var(--page-body); margin-top: 6px; line-height: 1.4; }

.dash-split { display: grid; grid-template-columns: 1.35fr 1fr; gap: 26px; align-items: start; }

/* Journey card */
.jcard { border-radius: 16px; margin-bottom: 14px; padding: 20px 22px 16px; }
.jcard-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--line-void); }
.jcard-dest { font-size: 17px; font-weight: 700; color: var(--page-ink); }
.jcard-when { font-size: 12.5px; color: var(--page-body); margin-top: 3px; }
.jcard-total { font-size: 15px; font-weight: 700; color: var(--blue); white-space: nowrap; }
.jstatus { display: inline-block; font-size: 10px; letter-spacing: 0.8px; text-transform: uppercase; font-weight: 700; padding: 3px 9px; border-radius: 999px; margin-left: 9px; vertical-align: 2px; }
.jstatus.active { background: rgba(95,174,114,0.16); color: #7fc794; }
.jstatus.replanning { background: rgba(18,100,200,0.18); color: var(--blue); }
.jstatus.cancelled { background: var(--line); color: var(--grey); }
.jleg { display: grid; grid-template-columns: 62px 1fr auto; gap: 12px; align-items: center; padding: 11px 0; border-top: 1px solid var(--line); }
.jleg:first-of-type { border-top: none; }
.jleg-t { font-size: 12px; color: var(--page-body); font-variant-numeric: tabular-nums; }
.jleg-w { font-size: 13.5px; font-weight: 600; color: var(--page-ink); }
.jleg-p { font-size: 12.5px; color: var(--page-body); margin-top: 2px; }
.jleg-c { font-size: 13px; font-weight: 600; color: var(--blue); }
.jleg.cancelled .jleg-w, .jleg.cancelled .jleg-p { text-decoration: line-through; opacity: 0.42; }
.jleg.cancelled .jleg-c { opacity: 0.42; }

.act-panel { padding: 8px 18px 12px; }
.act-row { display: flex; gap: 11px; align-items: flex-start; padding: 11px 0; border-top: 1px solid var(--line); font-size: 12.5px; }
.act-row:first-child { border-top: none; }
.act-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--blue); margin-top: 6px; flex-shrink: 0; }
.act-k { color: var(--page-ink); font-weight: 600; }
.act-t { color: var(--page-body); font-size: 11px; margin-top: 2px; }

.mem-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.mem-card { padding: 20px 22px; }
.mem-h { font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase; font-weight: 700; color: var(--gold-tracked); margin-bottom: 14px; }
.mem-row { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 13.5px; color: var(--page-ink); }
.mem-row:first-of-type { border-top: none; }
.mem-meta { font-size: 11.5px; color: var(--page-body); white-space: nowrap; }

.acct-card { padding: 22px 24px; max-width: 520px; }
.acct-row { display: flex; justify-content: space-between; gap: 16px; padding: 13px 0; border-top: 1px solid var(--line); font-size: 14px; }
.acct-row:first-child { border-top: none; }
.acct-k { color: var(--page-body); }
.acct-v { color: var(--page-ink); font-weight: 600; }
.acct-actions { margin-top: 20px; }

.dash-empty { padding: 30px 24px; text-align: center; color: var(--page-body); font-size: 14px; line-height: 1.6; border: 1px dashed var(--line); border-radius: 16px; }

@media (max-width: 1000px) {
  .dash-shell { grid-template-columns: 1fr; }
  .dash-nav { position: static; }
  .dash-links { flex-direction: row; overflow-x: auto; gap: 6px; }
  .dash-link { white-space: nowrap; }
  .stat-row { grid-template-columns: repeat(2, 1fr); }
  .dash-split, .mem-grid { grid-template-columns: 1fr; }
}

/* ---------- CLOSING VISION / PARTNER FORM (Contact page) ---------- */
.closing { position: relative; overflow: hidden; background: var(--void); color: var(--page-ink); padding: 120px 0; }
.closing::before {
  content: '';
  position: absolute;
  inset: 0;
  background: none;
  opacity: 0.06;
  pointer-events: none;
}
.closing::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, var(--void) 0%, rgba(7,21,40,0.85) 45%, rgba(7,21,40,0.55) 100%); pointer-events: none; }
.closing-grid { position: relative; z-index: 1; }
.closing-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; }
.closing .tracked { color: var(--gold-tracked); margin-bottom: 20px; }
.closing h2 { font-size: clamp(30px,3.8vw,48px); font-weight: 700; line-height: 1.16; margin-bottom: 22px; }
.closing p { color: var(--page-body); font-size: 17px; line-height: 1.75; max-width: 460px; }
/* Contact page — the left column was one paragraph against a lot of nothing.
   These three steps give the "first application / eventual infrastructure"
   claim something concrete to stand on. */
.reach-list { margin-top: 40px; border-top: 1px solid var(--line-void); }
.reach-row { display: grid; grid-template-columns: 46px 1fr; gap: 18px; padding: 20px 0; border-bottom: 1px solid var(--line-void); }
.reach-n { font-family: 'IBM Plex Mono', monospace; font-style: italic; font-size: 22px; color: var(--gold-tracked); line-height: 1.2; }
.reach-t { font-size: 15.5px; font-weight: 700; color: var(--page-ink); }
.reach-s { font-size: 13.5px; color: var(--page-body); margin-top: 4px; line-height: 1.6; max-width: 380px; }

.partner-form { background: var(--white); border: 1px solid var(--line); border-radius: 20px; padding: 32px; box-shadow: var(--shadow-md); }
.form-row { display: flex; flex-direction: column; gap: 8px; margin-bottom: 24px; }
.form-row label { font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: #9a9584; font-weight: 700; }
.form-row select, .form-row input { background: var(--cream); border: 1px solid var(--line); border-radius: 10px; color: var(--ink); font-size: 15px; padding: 12px 14px; font-family: 'IBM Plex Sans', sans-serif; }
.form-row input::placeholder { color: #9a9584; }
.partner-form button { background: var(--blue); color: var(--white); border-radius: 999px; padding: 14px 28px; font-size: 13.5px; font-weight: 700; letter-spacing: 0.3px; cursor: pointer; border: none; transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; }
.partner-form button:hover { background: var(--blue-dark); transform: translateY(-1px); box-shadow: var(--shadow-sm); }

/* ---------- SITE FOOTER — a real multi-column close instead of a single
   thin credit line. A one-line footer is one of the fastest tells that a
   site was assembled rather than designed; this gives the page an actual
   bottom register with its own hierarchy (brand + description, grouped
   links, a separate legal bar) the way an agency-built site would. ---------- */
.site-footer { background: var(--void); color: var(--page-body); border-top: 1px solid var(--line-void); }
.footer-top { padding: 68px 0 48px; display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; }
.footer-brand .logo-mark { margin-bottom: 16px; }
.footer-brand p { font-size: 14px; line-height: 1.65; max-width: 280px; opacity: 0.85; }
.footer-col-title { font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; font-weight: 700; color: var(--page-ink); opacity: 0.55; margin-bottom: 18px; }
.footer-col { display: flex; flex-direction: column; gap: 12px; font-size: 14px; }
.footer-col a, .footer-col span { color: inherit; opacity: 0.82; transition: opacity 0.2s ease; }
.footer-col a:hover { opacity: 1; }
.footer-bottom { border-top: 1px solid var(--line-void); padding: 22px 0 40px; display: flex; justify-content: space-between; font-size: 12px; opacity: 0.75; }

/* ---------- SIGNUP MODAL (injected by app.js on any page with #ocInput) ---------- */
.signup-overlay { display: none; position: fixed; inset: 0; background: rgba(11,15,26,0.6); z-index: 1000; align-items: center; justify-content: center; padding: 24px; }
.signup-card { background: var(--white); border-radius: 22px; max-width: 460px; width: 100%; padding: 44px 38px; max-height: 90vh; overflow-y: auto; box-shadow: var(--shadow-lg); }
.signup-card h3 { font-family: 'IBM Plex Sans', sans-serif; font-size: 25px; margin-bottom: 10px; }
.signup-card > p { font-size: 14.5px; color: var(--body); line-height: 1.55; margin-bottom: 28px; }
.signup-field { margin-bottom: 16px; }
.signup-field label { display: block; font-size: 12px; color: var(--body); margin-bottom: 6px; font-weight: 600; }
.signup-field input, .signup-field select { width: 100%; padding: 12px 14px; font-size: 15px; border: 1px solid var(--line); border-radius: 10px; background: var(--cream); font-family: 'IBM Plex Sans', sans-serif; }
.signup-error { display: none; color: #a33; font-size: 13px; margin-bottom: 14px; }
.signup-submit { width: 100%; padding: 15px; font-size: 14.5px; cursor: pointer; border: none; }

@media (max-width: 900px) {
  .wrap { padding-left: 24px; padding-right: 24px; }
  .nav-links { display: none; }
  .hero-body { grid-template-columns: 1fr; }
  /* Below this width the card layer stops overlaying the orb (there's no
     longer room) and becomes a plain stacked list underneath it instead —
     this is what actually fixes the overlap, not just shrinking numbers. */
  .hero-visual { max-width: 420px; margin: 44px auto 0; }
  .demo-grid, .itinerary-grid, .closing-grid { grid-template-columns: 1fr; }
  .feature-grid, .partner-grid, .problem-grid { grid-template-columns: 1fr; }
  .dark-section, .demo, .closing { padding: 76px 0; }
  .statement { min-height: auto; padding: 70px 0; }
  .footer-top { grid-template-columns: 1fr 1fr; gap: 32px; padding: 52px 0 36px; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-bottom { flex-direction: column; gap: 8px; }
}

/* ---------- MACHINE OUTPUT ----------
   Times, prices, scores and counts all set in Plex Mono with tabular
   figures, so columns line up and numbers stop looking like prose. */
.hii-time, .hii-price, .leg-time, .leg-price, .jleg-t, .jleg-c,
.build-time, .build-price, .cand .score, .metric-value, .stat-v,
.itin-total, .jcard-total, .mem-meta, .dash-count, .mini-row .mini-right {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}
.tracked { font-size: 11px; letter-spacing: 0.14em; }
.metric-value, .stat-v { letter-spacing: -0.03em; }

/* Section rhythm comes from rules, not from colour blocks — alternating
   dark panels were doing that job before and they've all gone light. */
.dark-section + .dark-section, .statement + .statement { border-top: 1px solid var(--line); }
.provider-wall { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.metrics { border-bottom: 1px solid var(--line); }
.bento { border-bottom: 1px solid var(--line); }

/* Hero: no glow, no image — just type and the product card. */
.hero::before { display: none; }
.hero-glow { display: none; }
.topbar::before { display: none; }
.statement::before, .statement::after,
.dark-section::before, .dark-section::after,
.bridge::before, .bridge::after,
.demo::before, .demo::after,
.closing::before, .closing::after,
.showcase::before { display: none; }