/* =============================================================================
   Evinra Landing — Design System
   Rebuilt 1:1 from Figma (Website / node 711-2) via get_design_context.
   Exact tokens, paddings, type, colors and assets — no approximations.
   Shared by the static preview and the WordPress block theme (extra.css).
   ============================================================================= */

@font-face {
  font-family: "Inter";
  font-weight: 100 900; font-style: normal; font-display: swap;
  src: url("../fonts/inter-variable.woff2") format("woff2");
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-weight: 200 800; font-style: normal; font-display: swap;
  src: url("../fonts/plus-jakarta-sans-variable.woff2") format("woff2");
}

:root {
  --teal: #209991;
  --teal-dark: #12615c;
  --teal-light: #2abdb5;
  --teal-tint-10: rgba(32, 153, 145, 0.1);

  --dark-deep: #060d14;
  --dark-navy: #071830;      /* stats band + demo/CTA section (Figma home 911:30) */
  --dark-base: #0d1520;
  --dark-elevated: #263148;
  --dark-border: rgba(58, 75, 112, 0.38);
  --overlay-white-6: rgba(255, 255, 255, 0.06);
  --overlay-white-10: rgba(255, 255, 255, 0.1);

  --light-base: #ffffff;
  --light-subtle: #f8fafc;
  --light-muted: #eef2f7;
  --border: #e2e8f0;

  --text-primary: #0d1520;
  --text-secondary: #3a4b70;
  --text-tertiary: #5a6b8a;
  --text-muted: #8a9bb8;
  --text-subtle: #c3d6e3;
  --text-on-dark: #ffffff;
  --text-on-dark-50: rgba(255, 255, 255, 0.5);

  --font-head: "Dela Gothic One", "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --container: 1280px;        /* outer content width (incl. 24px inner padding) */
  --pad-x: 24px;
  --radius-pill: 999px;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --dur: 200ms;
}

/* Reset ----------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
/* Dela Gothic One ships a single 400 face; existing rules declare font-weight:700.
   Without this the browser fakes bold and smears the display face. Inter and
   Plus Jakarta are variable with real weights, so disabling synthesis is safe. */
html { font-synthesis-weight: none; -webkit-font-synthesis: none; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-tertiary);
  background: var(--light-base);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
h1, h2, h3, h4 { margin: 0; font-family: var(--font-head); color: var(--text-primary); font-weight: 700; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

/* Layout ---------------------------------------------------------------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--pad-x); }
.section { padding-block: 80px; }
.section--line { border-bottom: 1px solid var(--border); }

/* WordPress block-theme reset: kill the default block-gap that leaves white
   bands between our full-bleed <section>s (header/main/footer + each pattern). */
.wp-site-blocks > * + *,
.wp-block-group.is-layout-flow > * + *,
.wp-block-group.is-layout-constrained > * + *,
main.wp-block-group > * + *,
main.wp-block-group > * { margin-block-start: 0 !important; margin-block-end: 0 !important; }
.wp-site-blocks, .wp-block-group, main.wp-block-group { margin-block: 0 !important; }
.nav, .hero, .stats, .problem, .whitelabel, .platform, .realworld, .testimonial, .cta, .footer, .story, .page-hero, .page-body { margin: 0 !important; }
.hero + section, .stats + section, section + section { margin-top: 0 !important; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-body); font-weight: 500; font-size: 12px; line-height: 1.4;
  color: var(--teal);
}

/* Section heads (shared) */
.s-head { max-width: 672px; display: flex; flex-direction: column; gap: 15.375px; }
.s-head h2 { font-size: 36px; line-height: 1.1; }
.s-head p { font-size: 14px; line-height: 1.5; color: var(--text-tertiary); }
.s-head--center { margin-inline: auto; text-align: center; }
.s-head--dark h2 { color: var(--text-on-dark); }
.s-head--dark p { color: var(--text-subtle); }

/* Buttons --------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 20px; border-radius: 6px; border: 1px solid transparent;
  font-family: var(--font-body); font-weight: 600; font-size: 14px; line-height: 1.4;
  white-space: nowrap; transition: background var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), transform var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.btn svg { width: 16px; height: 16px; }
.btn-primary { background: var(--teal); color: #fff; }
.btn-primary:hover { background: var(--teal-dark); }
.btn-ghost { background: transparent; color: var(--text-subtle); border-color: rgba(255, 255, 255, 0.18); padding: 13px 21px; font-weight: 500; }
.btn-ghost:hover { border-color: rgba(255, 255, 255, 0.4); color: #fff; }
.btn-block { width: 100%; }

.link-arrow {
  display: inline-flex; align-items: center; gap: 4px;
  color: var(--teal); font-weight: 600; font-size: 14px; line-height: 1.4;
}
.link-arrow svg { width: 16px; height: 16px; transition: transform var(--dur) var(--ease-out); }
.link-arrow:hover svg { transform: translateX(3px); }

/* ============================ NAVBAR (dark) =========================== */
/* The header template-part renders as <header class="wp-block-template-part">
   wrapping our <header class="nav">. A sticky element only sticks inside its
   own container, and that wrapper is exactly nav-height — so sticking .nav
   alone does nothing: the wrapper scrolls away and takes it along. The wrapper
   is what has to stick. */
header.wp-block-template-part {
  position: sticky; top: 0; z-index: 100;
}
.nav {
  background: var(--dark-elevated);
  border-top: 2px solid var(--teal);
  box-shadow: 0 4px 2px rgba(0, 0, 0, 0.25);
}
/* Anchor links (#platform, #demo, #why) must not land under the fixed bar. */
:root { scroll-padding-top: 72px; }
.nav__inner { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.nav__logo { color: #fff; }
.nav__logo svg { height: 28px; width: auto; }
.nav__check { display: none; }
.nav__links { display: flex; align-items: center; gap: 28px; }
.nav__item { position: relative; display: inline-flex; align-items: center; }
.nav__link, .nav__trigger {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 14px; font-weight: 500; line-height: 1.4;
  color: var(--text-subtle); transition: color var(--dur);
  cursor: pointer; user-select: none; background: none; border: 0; padding: 0;
}
.nav__link:hover, .nav__trigger:hover,
.nav__item--menu:hover .nav__trigger,
.nav__item--menu:focus-within .nav__trigger { color: #fff; }
.nav__trigger:focus-visible { outline: 2px solid var(--teal); outline-offset: 4px; border-radius: 4px; }
.nav__trigger .chev { width: 14px; height: 14px; opacity: 0.8; transition: transform var(--dur) var(--ease-out); }
.nav__item--menu:hover .chev, .nav__item--menu:focus-within .chev { transform: rotate(180deg); }
/* invisible bridge so the cursor can travel from trigger to panel */
.nav__item--menu::after { content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 14px; }
.nav__menu {
  position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%) translateY(6px);
  min-width: 234px; padding: 8px;
  background: var(--dark-elevated);
  border: 1px solid var(--dark-border); border-radius: 12px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
  display: flex; flex-direction: column; gap: 2px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
  z-index: 110;
}
.nav__item--menu:hover .nav__menu,
.nav__item--menu:focus-within .nav__menu {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.nav__menu a {
  display: block; padding: 9px 12px; border-radius: 8px;
  font-size: 14px; font-weight: 500; color: var(--text-subtle); white-space: nowrap;
  transition: background var(--dur), color var(--dur);
}
.nav__menu a:hover, .nav__menu a:focus-visible { background: var(--overlay-white-6); color: #fff; }
.nav__mobilecta { display: none; }
.nav__actions { display: flex; align-items: center; gap: 20px; }
.nav__login { font-size: 14px; font-weight: 500; color: var(--text-subtle); }
.nav__login:hover { color: #fff; }
.nav__toggle { display: none; }

/* Nav collapses to a hamburger earlier than the rest of the layout (the 5
   top-level items + CTAs need room) — switch at 980px, not 760px. */
@media (max-width: 980px) {
  .nav__inner { position: relative; }
  .nav__actions { display: none; }
  .nav__toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 6px; border: 1px solid var(--dark-border); color: #fff; background: transparent; }
  .nav__links {
    position: absolute; top: 64px; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--dark-elevated); border-top: 1px solid var(--dark-border);
    padding: 8px 0 16px; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
    max-height: 0; overflow: hidden; opacity: 0; visibility: hidden;
    transition: max-height var(--dur) var(--ease-out), opacity var(--dur);
  }
  .nav__check:checked ~ .nav__links { max-height: calc(100vh - 64px); overflow-y: auto; opacity: 1; visibility: visible; }
  .nav__item { width: 100%; display: block; }
  .nav__link, .nav__trigger { width: 100%; padding: 14px 24px; }
  .nav__item--menu::after { display: none; }
  .nav__item--menu .chev { display: none; }
  .nav__menu {
    position: static; transform: none; opacity: 1; visibility: visible; pointer-events: auto;
    min-width: 0; box-shadow: none; border: none; background: transparent; padding: 2px 0 8px;
  }
  .nav__menu a { padding: 10px 24px 10px 40px; white-space: normal; }
  .nav__mobilecta { display: flex; flex-direction: column; gap: 10px; padding: 14px 24px 4px; border-top: 1px solid var(--dark-border); margin-top: 6px; }
  .nav__mobilecta .nav__login { display: block; padding: 6px 0; }
  .nav__mobilecta .btn { width: 100%; justify-content: center; }
}

/* ============================ HERO ==================================== */
.hero { position: relative; overflow: hidden; background: var(--dark-base); color: #fff; isolation: isolate; }
.hero__bg { position: absolute; inset: 0; z-index: 0; background: var(--dark-base); }
/* Layer 1 — faint full-bleed "Venue Details" report texture (Figma: 10% opacity). */
.hero__texture { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; opacity: 0.1; }
.hero__texture img { position: absolute; width: 141.18%; height: 196.63%; left: -23.27%; top: -0.92%; max-width: none; }
/* Layer 2 — colorful aurora glow (top corners). */
.hero__aurora { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
.hero__aurora img { position: absolute; top: 0; left: 0; width: 100%; height: auto; max-width: none; }
/* Layer 3 — bright Evinra dashboard panel, right side (Figma node 748:1880, x=864 y=100). */
/* Left edge anchored to where the 520px text column ends (Figma: x≈864/1920 = 45%),
   never crossing into the copy; right edge bleeds off-screen like Figma. */
.hero__dash { position: absolute; z-index: 3; top: 88px; left: max(560px, 45%); right: -24px; width: auto; pointer-events: none; filter: drop-shadow(0 30px 70px rgba(0, 0, 0, 0.5)); }
/* Home hero (Figma 911:71) — full-bleed aerial fairground photo, centered copy.
   Replaces the old texture/aurora/dashboard stack; those layers stay defined
   above because other pages (.hero--story, .hero--byod) still use them. */
.hero--photo .hero__photo { position: absolute; inset: 0; z-index: 1; }
.hero--photo .hero__photo img,
.hero--photo .hero__video { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Scrim: darkest where the copy sits so white/teal display text stays legible
   over the busy photo, easing off at the edges, then settling into --dark-base
   at the bottom so the stats band butts up seamlessly.
   Opacities sampled off the Figma render: ~0.5 behind the copy, ~0.05-0.10 at
   the edges. Going darker than that erases the fairground entirely. */
.hero--photo .hero__scrim {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: radial-gradient(58% 54% at 50% 45%, rgba(13, 21, 32, 0.78) 0%, rgba(13, 21, 32, 0.52) 60%, rgba(13, 21, 32, 0.20) 100%);
}
.hero--photo .hero__inner { min-height: 0; padding: 112px 0 80px; }
.hero--photo .hero__content { max-width: 1226px; margin-inline: auto; align-items: center; text-align: center; }
.hero--photo .hero__sub { max-width: 818px; }
.hero--photo h1 { font-size: clamp(38px, 5.35vw, 100px); }

.hero__inner { position: relative; z-index: 4; padding-top: 112px; min-height: 748px; }
.hero__content { position: relative; z-index: 4; max-width: 520px; display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.hero__pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 13px; border-radius: var(--radius-pill);
  background: var(--teal-tint-10); border: 1px solid var(--teal-tint-10);
  color: var(--teal-light); font-size: 12px; font-weight: 500; line-height: 1.4;
}
.hero__pill .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--teal); }
.hero h1 { color: #fff; font-size: 56px; line-height: 1.05; font-weight: 700; }
.hero h1 .accent { color: var(--teal); }
.hero__sub { max-width: 448px; font-size: 16px; line-height: 1.5; color: var(--text-subtle); }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.hero__micro { font-size: 12px; line-height: 1.5; color: var(--text-subtle); }

/* Stats band (dark) ----------------------------------------------------- */
.stats { background: var(--dark-navy); }
.stats__inner { display: grid; grid-template-columns: repeat(4, 1fr); }
.stat { padding: 48px 24px; text-align: center; }
.stat + .stat { border-left: 1px solid rgba(255, 255, 255, 0.08); }
.stat__num { font-family: var(--font-head); font-weight: 700; font-size: 40px; line-height: 1; color: var(--teal); }
.stat__label { margin-top: 12px; font-size: 12px; color: var(--text-muted); }

/* ====================== PROBLEM (light) =============================== */
.problem { background: var(--light-muted); }
.problem__head { max-width: 1004px; font-size: clamp(28px, 2.9vw, 55px); line-height: 1.1; }
.problem__head .accent { color: var(--teal); }
.problem__list { margin-top: 56px; }
.problem__row {
  display: grid; grid-template-columns: 80px 280px minmax(0, 1fr); gap: 40px;
  padding: 41px 0 40px; border-top: 1px solid var(--border);
}
.problem__row:last-child { border-bottom: 1px solid var(--border); }
/* Figma staggers each row ~108px further right (x = 24 / 132 / 240). */
.problem__row:nth-child(2) { margin-left: 108px; }
.problem__row:nth-child(3) { margin-left: 216px; }
@media (max-width: 900px) {
  .problem__row:nth-child(2), .problem__row:nth-child(3) { margin-left: 0; }
}
.problem__num { font-family: var(--font-head); font-weight: 700; font-size: 40px; line-height: 1; color: var(--teal); }
.problem__icon { margin-top: 12px; width: 32px; height: 32px; border-radius: 8px; background: var(--teal-tint-10); display: grid; place-items: center; }
.problem__icon svg { width: 16px; height: 16px; }
.problem__row h3 { padding-top: 4px; font-size: 18px; font-weight: 600; line-height: 1.3; color: var(--text-primary); }
.problem__row p { max-width: 574px; font-size: 14px; line-height: 1.5; color: var(--text-tertiary); }

/* ====================== WHITE-LABEL (light split) ==================== */
.whitelabel { background: var(--light-base); }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; margin-top: 56px; }
.split__copy { display: flex; flex-direction: column; gap: 15.4px; }
.split__copy h3 { font-size: 30px; line-height: 1.15; color: var(--text-primary); }
.split__copy > p { font-size: 14px; line-height: 1.5; color: var(--text-tertiary); }
.feature-list { display: flex; flex-direction: column; gap: 12px; padding-top: 8.6px; }
.feature-list li { display: flex; align-items: center; gap: 12px; font-size: 14px; line-height: 1.5; color: var(--text-secondary); }
.feature-list .check { flex: 0 0 20px; width: 20px; height: 20px; border-radius: 50%; background: var(--teal-tint-10); display: grid; place-items: center; }
.feature-list .check svg { width: 12px; height: 12px; }
.split__copy .link-arrow { padding-top: 14.6px; }

/* Ticket-app mockups flanking the copy (Figma 911:152). Both columns show the
   same tall screenshot cropped to different parts of the ticket: the left card
   sits on the confirmation/wallet top, the right card on the order summary. */
.wl-stage {
  display: grid; grid-template-columns: 342px minmax(0, 1fr) 342px; gap: 64px;
  align-items: center; max-width: 1472px; margin-inline: auto; padding-inline: var(--pad-x);
}
.wl-mid { min-width: 0; display: flex; flex-direction: column; gap: 40px; }
.wl-phone {
  border-radius: 20px; overflow: hidden; background: var(--dark-base);
  border: 1px solid var(--dark-border); box-shadow: 0 24px 60px -18px rgba(13, 21, 32, 0.45);
}
.wl-phone img { width: 100%; height: 100%; object-fit: cover; }
.wl-phone--left { height: 640px; }
.wl-phone--left img { object-position: top; }
.wl-phone--right { height: 716px; }
.wl-phone--right img { object-position: bottom; }
/* Mockups are decorative; drop them before they squeeze the copy. */
@media (max-width: 1180px) {
  .wl-stage { grid-template-columns: 260px minmax(0, 1fr); gap: 40px; }
  .wl-phone--right { display: none; }
}
@media (max-width: 860px) {
  .wl-stage { grid-template-columns: minmax(0, 1fr); }
  .wl-phone--left { display: none; }
}

/* ====================== PLATFORM GRID (dark bento) =================== */
/* Figma 911:205 — flat full-bleed dark panel (the old aurora + 16px radius are gone). */
.platform { position: relative; overflow: hidden; isolation: isolate; background: var(--dark-base); color: #fff; }
.platform > .container { position: relative; z-index: 1; }
.platform__grid { margin-top: 56px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: stretch; }
.pcol { display: flex; flex-direction: column; gap: 16px; }
.pcard { background: var(--dark-elevated); border: 1px solid var(--dark-border); border-radius: 12px; padding: 21px; flex: 1; transition: border-color var(--dur) var(--ease-out), transform var(--dur) var(--ease-out); }
.pcard:hover { border-color: rgba(42, 189, 181, 0.5); transform: translateY(-3px); }
.pcard__icon { width: 36px; height: 36px; border-radius: 8px; background: var(--teal-tint-10); display: grid; place-items: center; }
.pcard__icon svg { width: 20px; height: 20px; }
.pcard h3 { padding-top: 6px; font-family: var(--font-body); font-size: 14px; font-weight: 600; line-height: 1.4; color: #fff; }
.pcard p { margin-top: 6px; font-size: 12px; line-height: 1.5; color: var(--text-subtle); }
/* ecosystem hero card */
.pcard--eco { background: var(--dark-elevated); border: 1px solid var(--dark-elevated); border-radius: 16px; padding: 44px 25px 51px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.pcard--eco .eco-logo { height: 90px; display: grid; place-items: center; padding-bottom: 16px; }
.pcard--eco .eco-logo svg { height: 40px; width: auto; color: #fff; }
.eco-divider { width: 100%; border-top: 1px solid var(--dark-border); margin: 12px 0; }
.eco-label { font-size: 12px; line-height: 1.5; color: var(--text-subtle); text-align: center; padding-bottom: 16px; }
.eco-chips { display: grid; grid-template-columns: 1fr; gap: 8px; width: 100%; }
.eco-chip { padding: 6px 8px; border-radius: 4px; background: var(--teal-tint-10); color: var(--teal-light); font-size: 12px; font-weight: 500; line-height: 1.4; text-align: center; }

/* ====================== REAL WORLD (light, 2-up) ===================== */
/* ==================== ROI BAND (photo, Figma 911:192) ================= */
.band { position: relative; overflow: hidden; isolation: isolate; background: var(--dark-base); color: #fff; }
.band__photo { position: absolute; inset: 0; z-index: 0; }
.band__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.band__scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, rgba(12, 15, 18, 0.55) 0%, rgba(9, 20, 40, 0.82) 42%, rgba(7, 24, 48, 0.92) 100%);
}
.band__inner { position: relative; z-index: 2; }
.band__content { max-width: 640px; margin-inline: auto; padding-block: 96px; }
.band h2 { font-size: clamp(26px, 2.5vw, 48px); line-height: 1.1; color: #fff; }
.band p { margin-top: 14px; max-width: 560px; font-size: 14px; line-height: 1.6; color: var(--text-subtle); }
.band .btn { margin-top: 28px; }
@media (max-width: 700px) { .band__content { padding-block: 64px; } }

/* overflow-x clip: the dashboard tablet deliberately overhangs the right card
   edge, and must not create a horizontal scrollbar on narrower viewports. */
.realworld { background: var(--light-subtle); overflow-x: clip; }
/* Figma 911:277 — heading + field photo on the left (775), two stacked cards right (433).
   The photo bleeds to the bottom of the section (Figma leaves only ~18px), so the
   section drops its bottom padding and the photo is bottom-anchored: the right
   column is the taller one, and align-items:start would otherwise strand the
   photo mid-air above the next (dark) section. */
.realworld { padding-bottom: 18px; }
.realworld__grid { display: grid; grid-template-columns: minmax(0, 775fr) minmax(0, 433fr); gap: 72px; align-items: stretch; }
.rw-left { min-width: 0; display: flex; flex-direction: column; }
.rw-photo { margin-top: auto; padding-top: 48px; }
.rw-photo img { width: 100%; height: auto; display: block; }
.rw-right { position: relative; display: flex; flex-direction: column; gap: 0; padding-top: 33px; }
/* The dashboard tablet overlaps both cards (Figma reserves the blank space at
   the bottom of card 1 / top of card 2 for exactly this). It stays in flow and
   pulls itself over the cards with negative margins, so the overlap self-adjusts
   to the tablet's real height instead of depending on a hand-tuned free zone. */
.rw-dash {
  order: 1; position: relative; z-index: 2; width: 115%; height: auto;
  max-width: none; /* beat the global img{max-width:100%} so the overhang survives */
  margin: -104px 0 -104px 6%; pointer-events: none;
  filter: drop-shadow(0 24px 48px rgba(13, 21, 32, 0.28));
}
.rw-right .rcard:first-of-type { order: 0; padding-bottom: 120px; }
.rw-right .rcard:last-of-type { order: 2; padding-top: 120px; }
@media (max-width: 980px) {
  /* Stacked, the cards end the section — restore normal bottom padding so they
     don't sit flush against the next section. */
  .realworld { padding-bottom: 80px; }
  .realworld__grid { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .rw-photo { margin-top: 0; }
  .rw-right { gap: 24px; padding-top: 0; }
  /* Stacked: no room to overlap — let it sit inline between the cards. */
  .rw-dash { width: 100%; margin: 0; }
  .rw-right .rcard:first-of-type { padding-bottom: 33px; }
  .rw-right .rcard:last-of-type { padding-top: 33px; }
}
.rcard { background: var(--light-base); border: 1px solid var(--border); border-radius: 12px; padding: 33px; display: flex; flex-direction: column; gap: 12px; }
.rcard__bar { width: 4px; height: 32px; border-radius: var(--radius-pill); background: var(--teal); }
.rcard h3 { padding-top: 8px; font-family: var(--font-body); font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--text-primary); }
.rcard p { font-size: 14px; line-height: 1.5; color: var(--text-tertiary); }

/* ====================== TESTIMONIAL (dark + photo) =================== */
.testimonial { background: var(--dark-base); color: #fff; padding-block: 80px; }
.testimonial__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: stretch; min-height: 640px; }
.testimonial__copy { align-self: flex-start; max-width: 560px; min-width: 0; }
.testimonial__mark { font-family: var(--font-head); font-weight: 700; font-size: 56px; line-height: 1.05; color: var(--teal); }
.testimonial__lead { font-family: var(--font-head); font-weight: 700; font-size: 30px; line-height: 1.15; color: #fff; padding-bottom: 26px; }
/* Body copy uses --font-body: the display face has no italic, so italics here
   would be synthesized into a smeared oblique. */
.testimonial__body { padding-left: 22px; font-family: var(--font-body); font-style: italic; font-weight: 400; font-size: 14px; line-height: 1.5; color: var(--text-subtle); }
.testimonial__card { margin-top: 30px; background: var(--dark-base); border: 1px solid var(--dark-border); border-radius: 12px; padding: 24px 25px; display: flex; flex-direction: column; gap: 16px; }
.testimonial__quote { font-family: var(--font-body); font-style: italic; font-size: 14px; line-height: 1.5; color: var(--text-subtle); }
.testimonial__meta { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.testimonial__who strong { display: block; font-family: var(--font-body); font-size: 12px; font-weight: 600; line-height: 1.4; color: #fff; }
.testimonial__who span { font-size: 12px; line-height: 1.5; color: var(--text-tertiary); }
.testimonial__link { font-weight: 500; font-size: 12px; color: var(--teal); white-space: nowrap; }
.testimonial__photo { align-self: flex-end; width: 100%; min-width: 0; aspect-ratio: 576 / 784; overflow: hidden; }
.testimonial__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }

/* ====================== FINAL CTA + FORM (dark) ====================== */
.cta { position: relative; overflow: hidden; isolation: isolate; background: var(--dark-base); color: #fff; }
.cta::before { content: ""; position: absolute; inset: 0; z-index: 0; background: url("../img/cta-aurora.webp") center / cover no-repeat; pointer-events: none; }
/* Home CTA (Figma 911:321) is a flat deep-navy panel with no aurora. Scoped to
   --home so the shared .cta used by Contact/White-Label/etc. keeps its aurora. */
.cta--home { background: var(--dark-navy); }
.cta--home::before { display: none; }
.cta > .container { position: relative; z-index: 1; }
.cta__grid { margin-top: 48px; display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.form-card { background: var(--dark-elevated); border: 1px solid var(--dark-border); border-radius: 12px; padding: 33px; }
.form-card h3 { font-family: var(--font-body); font-size: 14px; font-weight: 600; line-height: 1.4; color: #fff; }
.form-card > p { margin-top: 4px; font-size: 12px; line-height: 1.5; color: var(--text-subtle); }
.form-card form { padding-top: 20px; display: flex; flex-direction: column; gap: 16px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 12px; font-weight: 500; line-height: 1.4; color: var(--text-subtle); }
.field label .opt { color: var(--text-tertiary); }
.field input, .field textarea {
  width: 100%; padding: 12px 13px 13px; border: 1px solid var(--overlay-white-10); border-radius: 6px;
  font: inherit; font-size: 14px; line-height: 1.5; color: #fff; background: var(--overlay-white-6);
  transition: border-color var(--dur), box-shadow var(--dur);
}
.field input::placeholder, .field textarea::placeholder { color: var(--text-on-dark-50); }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px var(--teal-tint-10); }
.field textarea { resize: vertical; min-height: 92px; padding-bottom: 16px; }
.form-card .btn { margin-top: 4px; }
/* WP theme.json element globals (body .wp-site-blocks input:not()x8 ~0,9,2; button[type=submit] 0,3,1)
   override the dark .field controls + static submit button — reassert with !important (cf .evinra-ff/.cf-field). */
.form-card .field input, .form-card .field textarea { background: var(--overlay-white-6) !important; border: 1px solid var(--overlay-white-10) !important; color: #fff !important; border-radius: 6px !important; }
.form-card .field input:focus, .form-card .field textarea:focus { border-color: var(--teal) !important; box-shadow: 0 0 0 3px var(--teal-tint-10) !important; }
.form-card button.btn-primary { background: var(--teal) !important; color: #fff !important; border: none !important; }
.form-card button.btn-primary:hover { background: var(--teal-dark) !important; }

.contact-aside { color: #fff; }
.contact-aside h3 { font-family: var(--font-head); font-size: 18px; font-weight: 600; line-height: 1.3; color: #fff; padding-bottom: 8px; }
.contact-aside > p { font-size: 14px; line-height: 1.5; color: var(--text-muted); padding-bottom: 4px; }
.contact-note { font-size: 12px; line-height: 1.5; color: var(--text-subtle); padding-bottom: 40px; }
.contact-method { display: flex; gap: 16px; align-items: center; }
.contact-method + .contact-method { margin-top: 20px; }
.contact-method__icon { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 8px; background: var(--dark-elevated); display: grid; place-items: center; }
.contact-method__icon svg { width: 20px; height: 20px; }
.contact-method strong { display: block; font-size: 14px; font-weight: 500; line-height: 1.4; color: #fff; }
.contact-method span { font-size: 12px; line-height: 1.5; color: var(--text-subtle); }

/* ============================ FOOTER (dark) ========================== */
.footer { background: var(--dark-base); color: var(--text-subtle); padding: 56px 0 32px; }
.footer__top { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
.footer__col { display: flex; flex-direction: column; gap: 16px; }
.footer__brand svg { height: 28px; width: auto; color: #fff; }
.footer__brand p { font-size: 12px; line-height: 1.5; color: var(--text-subtle); }
.footer__social { display: flex; gap: 12px; padding-top: 4px; }
.footer__social a { width: 32px; height: 32px; border-radius: 6px; background: var(--dark-elevated); display: grid; place-items: center; transition: background var(--dur); }
.footer__social a:hover { background: var(--teal); }
.footer__social svg { width: 16px; height: 16px; }
.footer__col h4 { font-family: var(--font-body); font-size: 12px; font-weight: 600; line-height: 1.4; color: var(--text-secondary); }
.footer__col ul { display: flex; flex-direction: column; gap: 10px; }
.footer__col li a { font-size: 12px; line-height: 1.5; color: var(--text-subtle); transition: color var(--dur); }
.footer__col li a:hover { color: var(--teal-light); }
.footer__bottom { margin-top: 48px; padding-top: 25px; border-top: 1px solid rgba(255, 255, 255, 0.05); display: flex; align-items: center; justify-content: space-between; gap: 16px; font-size: 12px; line-height: 1.5; color: var(--text-muted); }
.footer__legal { display: flex; gap: 20px; }
.footer__legal a:hover { color: var(--text-subtle); }

/* ============ Fluent Forms skin (demo form inherits .field look) ===== */
.form-card .evinra-ff .ff-el-group { margin-top: 16px; margin-bottom: 0; }
.form-card .evinra-ff .ff-el-input--label { margin-bottom: 6px; padding: 0; }
.form-card .evinra-ff .ff-el-input--label label { font-size: 12px; font-weight: 500; }
/* Box ALL FF controls in the dark style — !important to beat Fluent Forms' default underline inputs */
.form-card .evinra-ff input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
.form-card .evinra-ff select,
.form-card .evinra-ff textarea {
  width: 100% !important; box-sizing: border-box !important; height: auto !important; min-height: 46px;
  padding: 12px 14px !important; border: 1px solid var(--overlay-white-10) !important; border-radius: 6px !important;
  background: var(--overlay-white-6) !important; color: #fff !important; box-shadow: none !important;
  font: inherit !important; font-size: 14px !important; line-height: 1.5 !important;
}
.form-card .evinra-ff textarea { min-height: 92px; resize: vertical; }
.form-card .evinra-ff input::placeholder, .form-card .evinra-ff textarea::placeholder { color: var(--text-on-dark-50) !important; }
.form-card .evinra-ff input:focus, .form-card .evinra-ff select:focus, .form-card .evinra-ff textarea:focus { outline: none !important; border-color: var(--teal) !important; box-shadow: 0 0 0 3px var(--teal-tint-10) !important; }
.form-card .evinra-ff button.ff-btn-submit, .form-card .evinra-ff .ff-btn.ff-btn-submit {
  margin-top: 8px; width: 100%; padding: 13px; border: 0; border-radius: 6px;
  background: var(--teal) !important; color: #fff !important;
  font-family: var(--font-body); font-weight: 600; font-size: 14px; line-height: 1.4;
  cursor: pointer; box-shadow: none; transition: background var(--dur) var(--ease-out);
}
.form-card .evinra-ff button.ff-btn-submit:hover, .form-card .evinra-ff .ff-btn.ff-btn-submit:hover { background: var(--teal-dark) !important; }
/* FF labels/asterisks/required marks on the dark card */
.form-card .evinra-ff label, .form-card .evinra-ff .ff-el-input--label label { color: var(--text-subtle) !important; }
.form-card .evinra-ff .ff-el-is-required.asterisk-right label:after, .form-card .evinra-ff .ff_t_c label { color: var(--teal-light); }

/* Fluent Forms LIGHT skin — used on the light cards (Contact, Request-a-Demo).
   The WP theme.json globals (input :not()x8 ≈ 0,9,2) aren't !important, so any
   !important here wins; the two-class .evinra-ff-light also beats the dark
   .form-card .evinra-ff rules. Mirrors the .cf-* light card controls. */
.evinra-ff-light .ff-el-input--label label { color: var(--text-primary) !important; font-weight: 600; }
.evinra-ff-light input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
.evinra-ff-light textarea,
.evinra-ff-light select {
  background: #fff !important; border: 1px solid var(--border) !important; color: var(--text-primary) !important;
  border-radius: 6px !important; box-shadow: none !important;
}
.evinra-ff-light input::placeholder, .evinra-ff-light textarea::placeholder { color: var(--text-muted) !important; }
.evinra-ff-light input:focus, .evinra-ff-light textarea:focus, .evinra-ff-light select:focus {
  border-color: var(--teal) !important; box-shadow: 0 0 0 3px var(--teal-tint-10) !important;
}
.evinra-ff-light button.ff-btn-submit, .evinra-ff-light .ff-btn.ff-btn-submit {
  background: var(--teal) !important; color: #fff !important; border: 0 !important; border-radius: 6px !important;
}
.evinra-ff-light button.ff-btn-submit:hover, .evinra-ff-light .ff-btn.ff-btn-submit:hover { background: var(--teal-dark) !important; }

/* ====================== Scroll reveal + a11y ========================= */
[data-reveal] { opacity: 0; transform: translateY(20px); transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out); }
[data-reveal].is-visible { opacity: 1; transform: none; }
:focus-visible { outline: 3px solid var(--teal-light); outline-offset: 2px; border-radius: 4px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
  [data-reveal] { opacity: 1; transform: none; }
}

/* ===================== SUBPAGE HERO + BODY (scaffold) ================ *
   Branded hero used by every non-home WordPress page (page.html). Title and
   intro come from the page's title + excerpt; CTA + footer are shared. */
.page-hero { position: relative; background: var(--dark-base); color: #fff; overflow: hidden; isolation: isolate; }
/* Match the .hero--story/.hero--glow heroes: dark base + "Venue Details" report
   texture (::before) + subtle aurora glow with a bottom vignette (::after).
   Applies to the For Event Operators pages (Fairs & Festivals, Touring
   Productions, Traveling Circuses) which use the generic .page-hero. */
.page-hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: url(/wp-content/uploads/2026/06/byod-hero-bg.jpg) center/cover no-repeat;
  opacity: 0.5;
}
.page-hero::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    linear-gradient(180deg, transparent 60%, var(--dark-base)),
    url(/wp-content/themes/evinra/assets/img/hero-aurora.webp) top center / 100% auto no-repeat;
  opacity: 0.5;
}
.page-hero__inner { position: relative; z-index: 1; padding-block: 92px 84px; }
.page-hero .wp-block-post-title {
  font-family: var(--font-head); color: #fff; font-weight: 700;
  /* tracking stays normal: the negative value was tuned for Plus Jakarta Sans;
     the Figma sets letterSpacing 0 on the display face and tightening it makes
     the heavy letterforms collide */
  font-size: clamp(34px, 4.6vw, 56px); line-height: 1.06; letter-spacing: normal; max-width: 18ch;
}
.page-hero .wp-block-post-excerpt { margin-top: 20px; }
.page-hero .wp-block-post-excerpt__excerpt { margin: 0; font-size: 18px; line-height: 1.6; color: var(--text-subtle); max-width: 60ch; }
.page-hero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }

/* ==================== COOKIE CONSENT BANNER ========================== */
/* Injected by consent.js. z-index sits above the sticky nav (100). Accept and
   Decline are deliberately the same size and weight: a reject that is harder to
   find than accept is a dark pattern, and under GDPR it invalidates consent. */
.cc {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 200;
  background: var(--dark-elevated);
  border-top: 2px solid var(--teal);
  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.35);
  transform: translateY(100%);
  transition: transform var(--dur) var(--ease-out);
}
.cc.is-open { transform: none; }
.cc__inner {
  max-width: var(--container); margin-inline: auto; padding: 18px var(--pad-x);
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
}
.cc__copy { margin: 0; font-size: 14px; line-height: 1.6; color: var(--text-subtle); max-width: 72ch; }
.cc__copy a { color: var(--teal-light); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.cc__actions { display: flex; gap: 12px; flex-shrink: 0; }
.cc__actions .btn { min-height: 44px; }  /* touch target */
@media (max-width: 640px) {
  .cc__inner { flex-direction: column; align-items: stretch; gap: 14px; padding-block: 16px; }
  .cc__actions .btn { flex: 1; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .cc { transition: none; }
}

/* Legal pages (Privacy / Terms / Cookies) — long-form prose inside page-body. */
.legal { max-width: 760px; }
.legal h2 { font-size: 22px; line-height: 1.25; margin: 40px 0 14px; }
.legal h2:first-child { margin-top: 0; }
.legal h3 { font-family: var(--font-body); font-weight: 600; font-size: 16px; line-height: 1.4; color: var(--text-primary); margin: 24px 0 8px; }
.legal p { margin: 0 0 14px; }
.legal ul { margin: 0 0 14px; padding-left: 20px; }
.legal li { margin: 0 0 8px; }
.legal a { color: var(--teal); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.legal strong { color: var(--text-primary); font-weight: 600; }
.legal__meta { font-size: 13px; color: var(--text-muted); margin: 0 0 32px; padding-bottom: 20px; border-bottom: 1px solid var(--border); }
.legal__note { margin: 32px 0 0; padding: 18px 20px; background: var(--light-muted); border-left: 3px solid var(--teal); border-radius: 0 8px 8px 0; font-size: 14px; }
.legal table { width: 100%; border-collapse: collapse; margin: 0 0 14px; font-size: 14px; }
.legal th, .legal td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border); vertical-align: top; }
.legal th { font-family: var(--font-body); font-weight: 600; color: var(--text-primary); background: var(--light-subtle); }

.page-body { background: var(--light-base); }
.page-body__inner { padding-block: 64px 8px; }
/* Legal pages end at the body — no CTA section follows — so the 8px bottom
   padding above would leave the text almost touching the footer. */
.page-body--legal .page-body__inner { padding-bottom: 88px; }
.page-body .wp-block-post-content { max-width: 760px; color: var(--text-tertiary); font-size: 16px; line-height: 1.7; }
.page-body .wp-block-post-content > * + * { margin-top: 18px; }
.page-body .wp-block-post-content h2 { font-family: var(--font-head); color: var(--text-primary); font-size: 28px; line-height: 1.2; margin-top: 36px; }
.page-body .wp-block-post-content h3 { font-family: var(--font-head); color: var(--text-primary); font-size: 20px; margin-top: 24px; }
.page-body .wp-block-post-content ul { list-style: disc; padding-left: 22px; }
.page-body .wp-block-post-content li + li { margin-top: 8px; }
.page-body .wp-block-post-content a { color: var(--teal); font-weight: 600; }
@media (max-width: 760px) {
  .page-hero__inner { padding-block: 72px 56px; }
  .page-body__inner { padding-block: 48px 4px; }
}

/* ===================== OUR STORY page (node 711:1157) ================ */
/* Hero variant: dark base + the "Venue Details" report texture, no dashboard,
   single left column, NO colorful aurora — matches the Our Story Figma (711:1157).
   Reuses the .hero infra from the home hero. */
.hero--story .hero__dash { display: none; }
.hero--story .hero__inner { min-height: 0; padding-top: 112px; padding-bottom: 80px; }
.hero--story .hero__content { max-width: 640px; }
/* Dark "Venue Details" report texture via center/cover so it reads at any hero
   height (the stretched <img> washed out on taller heroes). Same asset as the
   BYOD hero. Aurora kept but SUBTLE (opacity .5) — a soft purple/teal tint over
   the report, per the Our Story Figma (711:1157, aurora is color-dodge @ 50%),
   NOT the old vivid neon-on-black. */
.hero--story .hero__texture { opacity: 0.5; background: url(/wp-content/uploads/2026/06/byod-hero-bg.jpg) center/cover no-repeat; }
.hero--story .hero__texture img { display: none; }
.hero--story .hero__aurora,
.hero--glow .hero__aurora { opacity: 0.5; }
.hero--glow .hero__bg { background: var(--dark-base); }
.hero--story h1 { font-size: 48px; line-height: 1.1; max-width: 13ch; }
.hero--story .hero__sub { color: var(--text-muted); max-width: 600px; }

/* Narrative sections (alternating navy / light / dark+aurora / light) */
.story__inner { max-width: 896px; margin-inline: auto; padding-block: 80px; padding-inline: var(--pad-x); }
.story__title { font-family: var(--font-head); font-weight: 700; font-size: 36px; line-height: 1.1; letter-spacing: normal; margin: 0 0 28px; }
.story__body { display: flex; flex-direction: column; gap: 16px; }
.story__body p { font-size: 14px; line-height: 1.5; margin: 0; }
.story--navy { background: var(--dark-elevated); }
.story--navy .story__title { color: #fff; }
.story--navy .story__body p { color: var(--text-subtle); }
.story--light { background: var(--light-subtle); }
.story--light .story__title { color: var(--text-primary); }
.story--light .story__body p { color: var(--text-tertiary); }
.story--dark { background: var(--dark-base); position: relative; overflow: hidden; isolation: isolate; }
.story--dark .story__title { color: #fff; }
.story--dark .story__body p { color: var(--text-muted); }
.story--aurora::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(42% 70% at 8% 25%, rgba(32, 153, 145, 0.30), transparent 70%),
    radial-gradient(40% 65% at 94% 75%, rgba(110, 80, 210, 0.22), transparent 70%),
    radial-gradient(34% 55% at 72% 6%, rgba(42, 189, 181, 0.18), transparent 72%);
}
.story--aurora .story__inner { position: relative; z-index: 1; }
@media (max-width: 760px) {
  .hero--story h1 { font-size: 34px; }
  .hero--story .hero__inner { padding-top: 88px; padding-bottom: 56px; }
  .story__inner { padding-block: 56px; }
  .story__title { font-size: 28px; }
}

/* ===================== FIELD RESULTS page (node 711:1495) =========== */
/* Stats band — 4 dark cards on a navy band */
.fr-stats { background: var(--dark-elevated); }
.fr-stats__inner { max-width: var(--container); margin-inline: auto; padding: 64px var(--pad-x); display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.fr-stat { background: var(--dark-base); border: 1px solid var(--dark-border); border-radius: 12px; padding: 25px; text-align: center; }
.fr-stat__num { font-family: var(--font-head); font-weight: 700; font-size: 30px; line-height: 1.15; color: var(--teal); }
.fr-stat__label { margin-top: 7px; font-size: 12px; line-height: 1.4; font-weight: 500; color: var(--text-muted); }

/* Generic results section (light/dark) + heading */
.fr-section--light { background: var(--light-subtle); }
.fr-section--dark { background: var(--dark-base); }
.fr-section__inner { max-width: var(--container); margin-inline: auto; padding: 80px var(--pad-x); }
.fr-head { max-width: 576px; }
.fr-head__eyebrow { font-size: 12px; font-weight: 600; color: var(--teal); margin: 0 0 12px; }
.fr-head h2 { font-family: var(--font-head); font-weight: 700; font-size: 30px; line-height: 1.15; margin: 0; }
.fr-section--dark .fr-head h2 { color: #fff; }
.fr-section--light .fr-head h2 { color: var(--text-primary); }
.fr-head__sub { margin: 12px 0 0; font-size: 14px; line-height: 1.5; color: var(--text-tertiary); }

/* Before / After compare cards */
.fr-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 40px; }
.fr-compare__card { border-radius: 12px; padding: 29px; }
.fr-compare__card--before { background: #fff; border: 1px solid var(--border); }
.fr-compare__card--after { background: rgba(32, 153, 145, 0.04); border: 1px solid rgba(32, 153, 145, 0.19); }
.fr-compare__label { font-size: 12px; font-weight: 600; margin: 0 0 16px; }
.fr-compare__card--before .fr-compare__label { color: #ef4444; }
.fr-compare__card--after .fr-compare__label { color: var(--teal); }
.fr-compare__list { display: flex; flex-direction: column; gap: 12px; }
.fr-compare__item { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; line-height: 1.5; margin: 0; }
.fr-compare__item svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 3px; }
.fr-compare__card--before .fr-compare__item { color: var(--text-tertiary); }
.fr-compare__card--after .fr-compare__item { color: var(--text-secondary); }

/* Settlement report card (data table) */
.fr-report { margin-top: 40px; background: #fff; border: 1px solid var(--border); border-radius: 16px; box-shadow: 0 24px 48px -12px rgba(13, 21, 32, 0.12); overflow: hidden; }
.fr-report__bar { background: var(--dark-base); display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 20px; flex-wrap: wrap; }
.fr-report__title { display: flex; gap: 12px; align-items: center; }
.fr-report__title strong { font-size: 12px; font-weight: 600; color: #fff; }
.fr-pill { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 500; white-space: nowrap; }
.fr-pill--live { background: var(--teal-tint-10); color: var(--teal-light); }
.fr-report__meta { display: flex; gap: 16px; align-items: center; font-size: 12px; color: var(--text-tertiary); }
.fr-report__meta strong { color: var(--teal-light); font-weight: 600; }
.fr-gates { display: grid; grid-template-columns: repeat(6, 1fr); background: var(--light-subtle); border-bottom: 1px solid var(--border); }
.fr-gate { padding: 10px 8px; text-align: center; border-right: 1px solid var(--border); }
.fr-gate:last-child { border-right: 0; }
.fr-gate__id { font-size: 12px; font-weight: 600; color: var(--text-tertiary); }
.fr-gate__val { font-size: 14px; font-weight: 700; color: var(--teal); margin-top: 2px; }
.fr-gate__val--off { color: var(--text-subtle); }
.fr-gate__unit { font-size: 12px; color: var(--text-tertiary); }
.fr-vrow { display: flex; gap: 16px; align-items: center; padding: 14px 20px; border-bottom: 1px solid var(--border); }
.fr-vrow:last-child { border-bottom: 0; }
.fr-vrow__name { width: 128px; flex-shrink: 0; }
.fr-vrow__name strong { display: block; font-size: 12px; font-weight: 500; color: var(--text-primary); }
.fr-vrow__name span { font-size: 12px; color: var(--text-tertiary); }
.fr-vrow__track { flex: 1; min-width: 24px; height: 6px; background: var(--light-muted); border-radius: 999px; overflow: hidden; }
.fr-vrow__fill { height: 100%; border-radius: 999px; background: var(--teal); }
.fr-vrow__fill--navy { background: var(--dark-elevated); }
.fr-vrow__amt { width: 64px; text-align: right; font-size: 14px; font-weight: 700; color: var(--text-primary); flex-shrink: 0; }
.fr-vrow__status { width: 64px; flex-shrink: 0; text-align: center; font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 999px; }
.fr-vrow__status--settled { background: var(--teal-tint-10); color: var(--teal); }
.fr-vrow__status--live { background: rgba(32, 153, 145, 0.04); color: var(--text-secondary); }
.fr-report__foot { background: var(--light-subtle); border-top: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 13px 20px; font-size: 12px; flex-wrap: wrap; }
.fr-report__foot-left { color: var(--text-tertiary); }
.fr-report__foot-right { color: var(--teal); font-weight: 600; display: flex; align-items: center; gap: 6px; }

/* Operator quote cards */
.fr-quotes { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 48px; }
.fr-quote { background: var(--dark-elevated); border: 1px solid var(--dark-border); border-radius: 12px; padding: 33px; display: flex; flex-direction: column; gap: 19px; }
.fr-quote__icon { width: 24px; height: 24px; color: var(--teal); }
.fr-quote p { font-size: 14px; line-height: 1.5; color: #fff; margin: 0; }
.fr-quote__cite { font-size: 12px; font-weight: 500; color: var(--teal-light); }

/* "What Evinra Tracks" bento */
.fr-bento { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 40px; }
.fr-bcard { background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 25px; }
.fr-bcard__bar { width: 4px; height: 20px; border-radius: 4px; background: var(--teal); }
.fr-bcard h4 { font-family: var(--font-body); font-size: 14px; font-weight: 600; color: var(--text-primary); margin: 8px 0 0; line-height: 1.4; }
.fr-bcard p { font-size: 12px; line-height: 1.5; color: var(--text-tertiary); margin: 8px 0 0; }

/* Live gate-velocity chart panel */
.fr-chart { margin-top: 40px; background: var(--dark-base); border: 1px solid var(--dark-border); border-radius: 16px; overflow: hidden; }
.fr-chart__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 24px; border-bottom: 1px solid var(--dark-border); flex-wrap: wrap; }
.fr-chart__title { display: flex; gap: 12px; align-items: center; font-size: 14px; font-weight: 600; color: #fff; }
.fr-chart__dot { width: 8px; height: 8px; border-radius: 999px; background: var(--teal); }
.fr-chart__meta { display: flex; gap: 24px; align-items: center; font-size: 11px; color: var(--text-tertiary); }
.fr-chart__meta b { color: #fff; font-weight: 600; }
.fr-chart__meta b.is-teal { color: var(--teal); }
.fr-chart__grid { display: grid; grid-template-columns: repeat(6, 1fr); }
.fr-col { display: flex; flex-direction: column; align-items: center; padding: 24px 8px; border-right: 1px solid var(--dark-border); }
.fr-col:last-child { border-right: 0; }
.fr-col__area { height: 80px; display: flex; align-items: flex-end; margin-bottom: 12px; }
.fr-col__bar { width: 24px; border-radius: 4px 4px 0 0; background: var(--teal); }
.fr-col__bar--navy { background: var(--dark-elevated); }
.fr-col__val { font-size: 18px; font-weight: 700; color: var(--teal); line-height: 1.3; }
.fr-col__val--muted { color: var(--text-muted); }
.fr-col__val--dim { color: var(--text-tertiary); }
.fr-col__unit { font-size: 12px; color: var(--text-tertiary); }
.fr-col__id { font-size: 12px; font-weight: 600; color: var(--text-tertiary); margin-top: 4px; }
.fr-chart__foot { background: var(--dark-deep); border-top: 1px solid var(--dark-border); display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 13px 24px; font-size: 12px; flex-wrap: wrap; }
.fr-chart__foot-left { color: var(--text-tertiary); }
.fr-chart__foot-right { color: var(--teal); font-weight: 600; }

@media (max-width: 900px) {
  .fr-stats__inner { grid-template-columns: repeat(2, 1fr); }
  .fr-compare, .fr-quotes { grid-template-columns: 1fr; }
  .fr-bento { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .fr-bento { grid-template-columns: 1fr; }
  .fr-section__inner { padding-block: 56px; }
  .fr-stats__inner { padding-block: 48px; }
  .fr-vrow__name { width: 104px; }
}

/* ===================== BRING YOUR OWN DEVICE page (711:2043) ======== */
/* Figma BYOD hero (node 711:2043): dark base + a SUBTLE "Venue Details" report
   texture with the colorful aurora glow bleeding in from BOTH sides (same neon
   treatment as the other Platform heroes). Single left column: pill + H1 + sub +
   CTAs. No device-network diagram — it is not in the approved Figma. */
.hero--byod .hero__dash { display: none; }
.hero--byod .hero__texture { opacity: .5; background: url(/wp-content/uploads/2026/06/byod-hero-bg.jpg) center/cover no-repeat; }
.hero--byod .hero__texture img { display: none; }
.hero--byod .hero__aurora { opacity: 0.5; } /* subtle glow, consistent with the story/glow heroes */
.hero--byod .hero__inner { min-height: 0; padding-top: 128px; padding-bottom: 104px; }
.hero--byod h1 { font-size: 48px; line-height: 1.1; }
.byod-hero { max-width: 640px; }
.byod-hero__copy { max-width: 600px; }
.byod-hero__copy .hero__sub { color: var(--text-muted); }

/* Baseline Specs key/value grid (uses .fr-section--dark + .fr-head) */
.spec-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 40px; }
.spec-row { background: var(--dark-elevated); border: 1px solid var(--dark-border); border-radius: 12px; padding: 17px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.spec-row__k { font-size: 14px; font-weight: 500; color: var(--text-muted); }
.spec-row__v { font-size: 14px; font-weight: 600; color: #fff; text-align: right; }

/* Field-Tested device categories (uses .fr-section--light + .fr-head) */
.devcat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 48px; align-items: start; }
.devcat { background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 25px; }
.devcat__head { display: flex; gap: 8px; align-items: center; margin-bottom: 16px; }
.devcat__icon { width: 28px; height: 28px; border-radius: 6px; background: var(--teal-tint-10); display: flex; align-items: center; justify-content: center; color: var(--teal); flex-shrink: 0; }
.devcat__icon svg { width: 16px; height: 16px; }
.devcat__cat { font-size: 12px; font-weight: 600; color: var(--teal); }
.devcat__list { display: flex; flex-direction: column; gap: 10px; }
.devcat__name { font-size: 14px; font-weight: 500; color: var(--text-primary); margin: 0; }
.devcat__desc { font-size: 12px; line-height: 1.5; color: var(--text-tertiary); margin: 0; }

/* POS Integration connection cards */
.byod-conn { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 40px; max-width: 768px; }
.byod-conn__card { background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 25px; }
.byod-conn__icon { width: 28px; height: 28px; border-radius: 6px; background: var(--teal-tint-10); display: flex; align-items: center; justify-content: center; color: var(--teal); }
.byod-conn__icon svg { width: 16px; height: 16px; }
.byod-conn__card h4 { font-family: var(--font-body); font-size: 14px; font-weight: 600; color: var(--text-primary); margin: 10px 0 6px; }
.byod-conn__card p { font-size: 12px; line-height: 1.5; color: var(--text-tertiary); margin: 0; }

/* Two-column sections (Offline Bubble navy, White-Glove light) */
.byod-sec--navy { background: var(--dark-elevated); }
.byod-sec--light { background: var(--light-subtle); }
.byod-sec__inner { max-width: var(--container); margin-inline: auto; padding: 80px var(--pad-x); }
.byod-split { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.byod-split__copy h2 { font-family: var(--font-head); font-weight: 700; font-size: 30px; line-height: 1.15; margin: 0; }
.byod-sec--navy .byod-split__copy h2 { color: #fff; }
.byod-sec--light .byod-split__copy h2 { color: var(--text-primary); }
.byod-split__sub { font-size: 14px; line-height: 1.5; margin: 12px 0 0; }
.byod-sec--navy .byod-split__sub { color: var(--text-muted); }
.byod-sec--light .byod-split__sub { color: var(--text-tertiary); }
.byod-list { display: flex; flex-direction: column; gap: 12px; margin-top: 20px; }
.byod-list__item { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; line-height: 1.5; margin: 0; }
.byod-list__item svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 3px; color: var(--teal); }
.byod-sec--navy .byod-list__item { color: var(--text-muted); }
.byod-sec--navy .byod-list__item strong { color: #fff; font-weight: 600; }
.byod-sec--light .byod-list__item { color: var(--text-secondary); }
.byod-split .btn { margin-top: 20px; align-self: flex-start; }
/* dark process card (right column) */
.byod-card { background: var(--dark-base); border: 1px solid var(--dark-border); border-radius: 16px; padding: 33px; }
.byod-card--elevated { background: var(--dark-elevated); }
.byod-card__title { font-size: 12px; font-weight: 600; color: var(--teal-light); margin: 0 0 24px; }
.byod-card__row { display: flex; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--dark-border); }
.byod-card__row:last-child { border-bottom: 0; }
.byod-card__row--stack { flex-direction: column; gap: 3px; }
.byod-card__label { width: 80px; flex-shrink: 0; font-family: var(--font-head); font-weight: 700; font-size: 12px; color: var(--teal); }
.byod-card__rowtitle { font-size: 14px; font-weight: 600; color: #fff; }
.byod-card__desc { font-size: 12px; line-height: 1.5; color: var(--text-muted); margin: 0; }

@media (max-width: 980px) {
  .byod-hero { grid-template-columns: 1fr; }
  .byod-net { min-height: 320px; margin-top: 16px; }
}
@media (max-width: 900px) {
  .spec-grid { grid-template-columns: 1fr; }
  .devcat-grid { grid-template-columns: 1fr 1fr; }
  .byod-conn { grid-template-columns: 1fr; }
  .byod-split { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .devcat-grid { grid-template-columns: 1fr; }
  .byod-sec__inner { padding-block: 56px; }
  .hero--byod h1 { font-size: 34px; }
}

/* ============================ RESPONSIVE ============================= */
@media (max-width: 1024px) {
  .hero h1 { font-size: 44px; }
  .hero__dash { display: none; }
  .hero__inner { min-height: 0; padding-bottom: 64px; }
  .split, .realworld__grid, .cta__grid, .testimonial__grid { grid-template-columns: 1fr; gap: 40px; }
  .platform__grid { grid-template-columns: 1fr; }
  .pcol { gap: 16px; }
  .problem__row { grid-template-columns: 64px 1fr; }
  .problem__row p { grid-column: 1 / -1; }
  .footer__top { grid-template-columns: 1fr 1fr; }
  .testimonial__photo { aspect-ratio: 16 / 10; }
}
@media (max-width: 760px) {
  .section { padding-block: 56px; }
  .hero__inner { padding-top: 72px; min-height: 0; padding-bottom: 64px; }
  .hero h1 { font-size: 36px; }
  .stats__inner { grid-template-columns: 1fr 1fr; }
  .stat { padding: 24px 16px; min-width: 0; }
  .stat__num { font-size: 26px; }
  .stat:nth-child(odd) { border-left: none; }
  .stat:nth-child(3), .stat:nth-child(4) { border-top: 1px solid rgba(255, 255, 255, 0.08); }
  .problem__row { grid-template-columns: 48px 1fr; gap: 16px; }
  .s-head h2, .testimonial__lead { font-size: 28px; }
  .footer__top { grid-template-columns: 1fr; }
  .footer__bottom { flex-direction: column; align-items: flex-start; }
}

/* ===================== CONTACT page (823:103) ======================= */
/* Section "Who Do You Need to Reach?" — navy elevated bg, dark cards */
.contact-reach { background: var(--dark-elevated); }
.contact-reach__inner { max-width: var(--container); margin-inline: auto; padding: 80px var(--pad-x); }
.contact-reach__head { max-width: 576px; }
.contact-reach__head h2 { font-family: var(--font-head); font-weight: 700; font-size: 30px; line-height: 1.2; color: #fff; margin: 0; }
.contact-reach__head p { margin: 12px 0 0; font-size: 14px; line-height: 1.625; color: var(--text-muted); }
.contact-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 40px; }
.contact-card { background: var(--dark-base); border: 1px solid var(--dark-border); border-radius: 12px; padding: 29px; display: flex; flex-direction: column; }
.contact-card h3 { font-family: var(--font-body); font-size: 16px; font-weight: 600; line-height: 1.5; color: #fff; margin: 0 0 12px; }
.contact-card p { font-size: 14px; line-height: 1.625; color: var(--text-tertiary); margin: 0 0 24px; }
.contact-card a { margin-top: auto; font-size: 14px; font-weight: 600; color: var(--teal-light); text-decoration: none; transition: color var(--dur) var(--ease-out); }
.contact-card a:hover { color: var(--teal); }
.contact-strip { display: flex; flex-wrap: wrap; gap: 32px; align-items: center; margin-top: 24px; background: rgba(32,153,145,.06); border: 1px solid rgba(32,153,145,.14); border-radius: 12px; padding: 25px; }
.contact-strip__eyebrow { font-size: 12px; font-weight: 600; color: var(--teal-light); margin: 0 0 6px; }
.contact-strip__line { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.contact-strip__val { font-size: 14px; font-weight: 600; color: #fff; text-decoration: none; }
a.contact-strip__val:hover { color: var(--teal-light); }
.contact-strip__meta { font-size: 12px; color: var(--text-tertiary); }
.contact-strip__col--bordered { padding-left: 33px; border-left: 1px solid var(--dark-border); }
.contact-strip__email { font-size: 14px; font-weight: 500; color: var(--text-muted); text-decoration: none; }
.contact-strip__email:hover { color: var(--teal-light); }

/* Section "Send Us a Message" — light bg, white form card */
.contact-form-sec { background: var(--light-subtle); }
.contact-form-sec__inner { max-width: var(--container); margin-inline: auto; padding: 80px var(--pad-x); }
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.contact-intro h2 { font-family: var(--font-head); font-weight: 700; font-size: 30px; line-height: 1.2; color: var(--text-primary); margin: 0; }
.contact-intro > p { margin: 12px 0 0; font-size: 14px; line-height: 1.625; color: var(--text-tertiary); }
.contact-points { margin-top: 21px; display: flex; flex-direction: column; gap: 12px; }
.contact-point { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; line-height: 1.43; color: var(--text-tertiary); margin: 0; }
.contact-point svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; color: var(--teal); }
.contact-point a { color: var(--teal); font-weight: 500; text-decoration: none; }
.contact-point a:hover { text-decoration: underline; }
.contact-formcard { background: #fff; border: 1px solid var(--border); border-radius: 16px; padding: 33px; }
.contact-formcard form { display: flex; flex-direction: column; gap: 16px; }
.cf-field { display: flex; flex-direction: column; gap: 6px; }
.cf-field label { font-size: 12px; font-weight: 500; line-height: 1.33; color: var(--text-tertiary); }
/* WP theme.json global form styles are highly specific (body .wp-site-blocks input:not()x8 ≈ 0,9,2;
   .wp-site-blocks button[type=submit] = 0,3,1) — override with !important, same pattern as .evinra-ff skin */
.cf-field input, .cf-field select, .cf-field textarea { width: 100%; font-family: var(--font-body); font-size: 14px; line-height: 1.43; color: var(--text-primary) !important; background: #fff !important; border: 1px solid var(--border) !important; border-radius: 8px !important; padding: 13px 17px !important; transition: border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out); }
.cf-field input::placeholder, .cf-field textarea::placeholder { color: rgba(13,21,32,.5); }
.cf-field input:focus, .cf-field select:focus, .cf-field textarea:focus { outline: none; border-color: var(--teal) !important; box-shadow: 0 0 0 3px var(--teal-tint-10) !important; }
.cf-field textarea { min-height: 106px; resize: vertical; }
.cf-field select { appearance: none !important; -webkit-appearance: none !important; padding-right: 40px !important; cursor: pointer; color: var(--text-primary) !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M3.5 5.25L7 8.75L10.5 5.25' stroke='%235a6b8a' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right 17px center !important; background-size: 12px !important; }
.cf-field select:invalid { color: rgba(13,21,32,.5) !important; }
.contact-formcard .cf-submit { width: 100%; margin-top: 4px; border: none !important; cursor: pointer; background: var(--teal) !important; color: #fff !important; font-family: var(--font-body); font-size: 14px; font-weight: 600; line-height: 1.43; border-radius: 8px !important; padding: 14px !important; display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: background var(--dur) var(--ease-out); }
.contact-formcard .cf-submit:hover { background: var(--teal-dark) !important; }
.cf-submit svg { width: 16px; height: 16px; }

@media (max-width: 900px) {
  .contact-cards { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .contact-strip__col--bordered { padding-left: 0; border-left: 0; }
}
/* ===================== WHITE LABEL page (823:347) =================== */
/* Alternating 3-card sections. Section bg / card bg invert per the Figma. */
.wl-sec--navy { background: var(--dark-elevated); }   /* #263148 */
.wl-sec--base { background: var(--dark-base); }        /* #0d1520 */
.wl-sec--light { background: var(--light-subtle); }    /* #f8fafc */
.wl-sec__inner { max-width: var(--container); margin-inline: auto; padding: 80px var(--pad-x); }
.wl-head { max-width: 672px; }
.wl-head h2 { font-family: var(--font-head); font-weight: 700; font-size: 30px; line-height: 1.2; margin: 0; }
.wl-head p { margin: 12px 0 0; font-size: 14px; line-height: 1.625; }
.wl-sec--navy .wl-head h2, .wl-sec--base .wl-head h2 { color: #fff; }
.wl-sec--light .wl-head h2 { color: var(--text-primary); }
.wl-sec--navy .wl-head p, .wl-sec--base .wl-head p { color: var(--text-muted); }
.wl-sec--light .wl-head p { color: var(--text-tertiary); }
.wl-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 48px; align-items: start; }
.wl-grid--2 { grid-template-columns: 1fr 1fr; max-width: 768px; }
.wl-card { border: 1px solid var(--dark-border); border-radius: 12px; padding: 29px; display: flex; flex-direction: column; gap: 12px; }
.wl-sec--navy .wl-card { background: var(--dark-base); }
.wl-sec--base .wl-card { background: var(--dark-elevated); }
.wl-sec--light .wl-card { background: #fff; border-color: var(--border); }
.wl-card__icon { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.wl-card__icon svg { width: 16px; height: 16px; }
.wl-card__icon--red { background: rgba(239,68,68,.1); color: #f87171; }
.wl-card__icon--teal { background: var(--teal-tint-10); color: var(--teal); }
.wl-card h3 { font-family: var(--font-body); font-size: 16px; font-weight: 600; line-height: 1.5; margin: 0; }
.wl-sec--navy .wl-card h3, .wl-sec--base .wl-card h3 { color: #fff; }
.wl-sec--light .wl-card h3 { color: var(--text-primary); }
.wl-card p { font-size: 14px; line-height: 1.625; color: var(--text-tertiary); margin: 0; }
.wl-card--plain { padding: 25px; gap: 8px; }
.wl-card--plain h3 { font-size: 14px; line-height: 1.43; }
/* hero footnote (under CTAs) */
.hero__note { margin-top: 16px; font-size: 12px; line-height: 1.33; color: var(--text-tertiary); }

@media (max-width: 900px) {
  .wl-grid { grid-template-columns: 1fr; }
}
/* ===================== REQUEST A DEMO standalone page (823:2) ======== */
.rd-page { background: var(--dark-base); min-height: 100dvh; display: flex; flex-direction: column; color: #fff; }
.rd-header { background: var(--dark-elevated); box-shadow: 0 4px 2px rgba(0,0,0,.25); border-top: 2px solid var(--teal); }
.rd-header__inner { max-width: var(--container); margin-inline: auto; padding: 0 var(--pad-x); height: 64px; display: flex; align-items: center; justify-content: space-between; }
.rd-header__logo svg { height: 28px; width: auto; display: block; }
.rd-header__back { color: var(--text-tertiary); font-size: 14px; text-decoration: none; transition: color var(--dur) var(--ease-out); }
.rd-header__back:hover { color: var(--teal-light); }
.rd-main { width: 100%; max-width: 976px; margin: 64px auto 0; padding: 0 var(--pad-x); display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.rd-intro h1 { font-family: var(--font-head); font-weight: 700; font-size: 36px; line-height: 1.375; color: #fff; margin: 0; }
.rd-intro__sub { margin: 15px 0 0; font-size: 14px; line-height: 1.625; color: var(--text-muted); }
.rd-eyebrow { margin: 25px 0 0; font-size: 12px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; color: var(--teal-light); }
.rd-checks { margin: 18px 0 0; display: flex; flex-direction: column; gap: 16px; }
.rd-check { display: flex; gap: 12px; align-items: flex-start; }
.rd-check__icon { width: 20px; height: 20px; flex-shrink: 0; margin-top: 2px; border-radius: 999px; background: rgba(32,153,145,.13); color: var(--teal); display: flex; align-items: center; justify-content: center; }
.rd-check__icon svg { width: 12px; height: 12px; }
.rd-check p { margin: 0; font-size: 14px; line-height: 1.375; color: var(--text-muted); }
.rd-check strong { color: #fff; font-weight: 700; }
.rd-quote { margin: 24px 0 0; background: var(--dark-elevated); border: 1px solid var(--dark-border); border-radius: 16px; padding: 25px; }
.rd-quote__mark { width: 20px; height: 20px; color: var(--teal); }
.rd-quote p { margin: 16px 0 0; font-size: 14px; line-height: 1.625; color: #fff; }
.rd-quote cite { display: block; margin: 16px 0 0; font-style: normal; font-size: 12px; font-weight: 500; color: var(--teal-light); }
.rd-contact { margin: 24px 0 0; background: rgba(32,153,145,.08); border: 1px solid rgba(32,153,145,.19); border-radius: 12px; padding: 25px 21px 23px; }
.rd-contact__eyebrow { font-size: 12px; font-weight: 600; color: var(--teal-light); margin: 0; }
.rd-contact__sub { font-size: 12px; color: var(--text-tertiary); margin: 2px 0 0; }
.rd-contact__phone { display: inline-block; margin: 8px 0 0; font-size: 14px; font-weight: 600; color: #fff; text-decoration: none; }
.rd-contact__meta { font-size: 12px; color: var(--text-tertiary); margin: 0 0 8px; }
.rd-contact__email { font-size: 14px; font-weight: 500; color: var(--teal-light); text-decoration: none; }
.contact-formcard .rd-formcard__title { font-family: var(--font-body); font-size: 16px; font-weight: 600; line-height: 1.5; color: var(--text-primary); margin: 0 0 18px; }
.rd-formnote { margin: 16px 0 0; text-align: center; font-size: 12px; line-height: 1.33; color: var(--text-tertiary); }
.rd-footer { margin: 64px 0 0; border-top: 1px solid rgba(58,75,112,.25); padding: 21px var(--pad-x) 20px; text-align: center; }
.rd-footer p { margin: 0; font-size: 12px; line-height: 1.33; color: var(--text-tertiary); }
.rd-footer a { font-weight: 500; color: var(--teal-light); text-decoration: none; }

@media (max-width: 760px) {
  .rd-main { grid-template-columns: 1fr; gap: 32px; margin-top: 40px; }
  .rd-intro h1 { font-size: 30px; }
}