/* ==========================================================================
   Revvi — shared stylesheet (base for every page)
   ========================================================================== */

:root {
  --navy: #0D162B;
  --navy-soft: #16213d;
  --purple: #7B3DFF;
  --purple-dark: #6529e6;
  --purple-light: #B69BFF;
  --green: #1F9E5A;
  --green-light: #4FD98C;
  --navy-card: #182248;
  --navy-card-border: rgba(123, 61, 255, 0.27);
  --off-white: #F8F9FB;
  --lavender: #F1EBFF;
  --white: #FFFFFF;
  --ink: #0D162B;
  --ink-soft: #4B5468;
  --border-soft: #E4E6EF;

  --font-heading: 'Poppins', sans-serif;
  --font-body: 'Inter', sans-serif;

  --container-width: 1160px;
  --radius: 16px;
  --radius-sm: 10px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  display: block;
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  color: var(--ink);
  line-height: 1.2;
  margin: 0 0 16px;
  font-weight: 600;
}

h1 { font-size: clamp(2.1rem, 4.5vw, 3.4rem); font-weight: 700; }
h2 { font-size: clamp(1.7rem, 3vw, 2.3rem); }
h3 { font-size: 1.15rem; }

p {
  margin: 0 0 16px;
  color: var(--ink-soft);
}

a {
  color: inherit;
  text-decoration: none;
}

ul, ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.container {
  width: 100%;
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 24px;
}

section {
  padding: 88px 0;
}

.section-sub {
  font-size: 1.1rem;
  max-width: 620px;
}

.section-header {
  margin-bottom: 48px;
}

.section-header.center {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.section-header.center .section-sub {
  margin-left: auto;
  margin-right: auto;
}

/* Section background helpers */
.bg-navy { background: var(--navy); color: var(--white); }
.bg-navy h1, .bg-navy h2, .bg-navy h3 { color: var(--white); }
.bg-navy p { color: rgba(255,255,255,0.72); }

.bg-white { background: var(--white); }
.bg-grey { background: var(--off-white); }
.bg-lavender { background: var(--lavender); }

/* Inline checkmark trust row (hero + final CTA) */
.trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin-top: 20px;
}

.trust-row.center {
  justify-content: center;
  margin-top: 24px;
}

.trust-row li {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  font-weight: 500;
  color: rgba(255,255,255,0.65);
}

.trust-row svg {
  flex-shrink: 0;
  color: var(--purple);
}

/* Small reassurance line under the hero's trust row, muted so it doesn't
   compete with the headline/CTA, with a lock icon tying it to the
   Security & Control section further down the page. */
.hero .hero-reassurance {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  font-size: 0.82rem;
  font-weight: 500;
  /* Beats .bg-navy p's rgba(255,255,255,0.72) on specificity so this
     actually reads as more muted than regular hero body text. */
  color: rgba(255,255,255,0.45);
}

.hero-reassurance svg {
  flex-shrink: 0;
  color: var(--purple-light);
}

/* Compact, reusable version of the same reassurance-line treatment for
   other pages (How It Works, Solutions) — not a full section, just a
   small centred line. Defaults to muted-on-light since it's more often
   dropped between light sections; .bg-navy scoping below flips it to the
   muted-on-dark treatment when it sits inside a dark section instead. */
.section-trust-line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 0 0 12px;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--ink-soft);
}

.section-trust-line svg {
  flex-shrink: 0;
  color: var(--purple);
}

.bg-navy .section-trust-line {
  color: rgba(255,255,255,0.45);
}

.bg-navy .section-trust-line svg {
  color: var(--purple-light);
}

.trust-line-band {
  padding: 28px 0;
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1rem;
  padding: 15px 28px;
  border-radius: 999px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease;
  white-space: nowrap;
}

.btn-primary {
  background: var(--purple);
  color: var(--white);
  box-shadow: 0 8px 24px rgba(123, 61, 255, 0.35);
}

.btn-primary:hover {
  background: var(--purple-dark);
  transform: translateY(-1px);
  box-shadow: 0 10px 28px rgba(123, 61, 255, 0.45);
}

.btn:disabled {
  opacity: 0.65;
  cursor: not-allowed;
  transform: none;
}

/* On dark (navy) sections the button's own colour already reads as vivid
   against the background, so the base shadow above looks like a separate
   bright halo rather than a glow the button is sitting in. Softer, cooler
   (true button purple, not a hotter pink-purple) and more spread out so it
   fades into the navy instead of stopping at a hard edge. Scoped via
   .bg-navy so it applies automatically anywhere this button appears on a
   dark section (hero, final CTA) without touching each instance. */
.bg-navy .btn-primary {
  box-shadow: 0 6px 20px rgba(123, 61, 255, 0.35), 0 0 60px rgba(123, 61, 255, 0.18);
}

.bg-navy .btn-primary:hover {
  box-shadow: 0 8px 24px rgba(123, 61, 255, 0.4), 0 0 70px rgba(123, 61, 255, 0.22);
}

/* ==========================================================================
   Site header / nav
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  /* Matches the exact fill colour baked into revvi-logo-lockup-dark-bg.png
     (not --navy) so the logo's card edge doesn't show a seam against the header. */
  background: #010F29;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 76px;
}

.site-logo {
  position: relative;
  display: inline-flex;
}

.site-logo img {
  height: 34px;
  width: auto;
}

/* The "R | revvi" divider is drawn here in CSS rather than baked into the PNG:
   at this element's small rendered size, the source line was only ~1px wide
   at native resolution, and downscaling it ~3.4x produced a blurred/doubled
   line. A CSS line stays crisp at any scale or DPI. */
.site-logo::after {
  content: '';
  position: absolute;
  left: 33.6%;
  top: 24%;
  bottom: 1%;
  width: 1px;
  background: rgba(255, 255, 255, 0.3);
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 40px;
}

.site-nav-links {
  display: flex;
  align-items: center;
  gap: 32px;
}

.site-nav-links a {
  font-size: 0.95rem;
  font-weight: 500;
  color: rgba(255,255,255,0.82);
  transition: color 0.2s ease;
}

.site-nav-links a:hover,
.site-nav-links a.is-active {
  color: var(--white);
}

.nav-cta {
  padding: 11px 22px;
  font-size: 0.92rem;
}

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
}

.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--white);
  transition: transform 0.2s ease, opacity 0.2s ease;
}

/* ==========================================================================
   1. Hero
   ========================================================================== */

.hero {
  padding: 72px 0 96px;
  overflow: hidden;
}

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

.hero-content {
  min-width: 0;
}

.hero-content h1 {
  margin-bottom: 20px;
}

.hero-sub {
  font-size: 1.15rem;
  max-width: 560px;
}

.hero-visual {
  position: relative;
  min-height: 340px;
  min-width: 0;
  border-radius: var(--radius);
}

/* Hero animation diagram (Sales/Finance/Operations rotating workflow) */
.diagram {
  position: relative;
  min-height: 420px;
}

.node {
  border-radius: 12px;
  background: var(--navy-card);
  border: 1.5px solid var(--navy-card-border);
  padding: 16px 26px;
  text-align: center;
  font-size: 14px;
  color: #dfe1ea;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.node.show {
  opacity: 1;
  transform: translateY(0);
}

.node.dim {
  opacity: 0.4;
}

.n-start {
  width: 200px;
  margin: 0 auto 6px;
  position: relative;
  z-index: 2;
}

.line {
  width: 2px;
  height: 34px;
  margin: 0 auto;
  position: relative;
  background: linear-gradient(180deg, transparent, transparent);
  transition: background 0.3s ease;
}

.line.active {
  background: linear-gradient(180deg, rgba(123, 61, 255, 0.6), rgba(123, 61, 255, 0.13));
}

.packet {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--purple);
  box-shadow: 0 0 10px var(--purple);
  position: absolute;
  left: -3.5px;
  top: -10px;
  opacity: 0;
}

.packet.travel {
  animation: travelDown 0.5s ease forwards;
}

@keyframes travelDown {
  0% { opacity: 1; top: -10px; }
  100% { opacity: 1; top: calc(100% - 4px); }
}

.core {
  width: 126px;
  height: 126px;
  border-radius: 50%;
  background: radial-gradient(circle, #2A1856 0%, #1B1035 70%);
  border: 2.5px solid var(--purple);
  box-shadow: 0 0 44px rgba(123, 61, 255, 0.4), 0 0 90px rgba(123, 61, 255, 0.15);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
  font-family: var(--font-heading);
  font-weight: 700;
  color: #fff;
  font-size: 18px;
  transition: box-shadow 0.4s ease, transform 0.4s ease;
}

.core.pulse {
  box-shadow: 0 0 65px rgba(123, 61, 255, 0.6), 0 0 130px rgba(123, 61, 255, 0.25);
  transform: scale(1.03);
}

/* Ambient breathing glow, independent of the packet-arrival .pulse state above
   (a ::before layer so it never fights the JS-toggled box-shadow on .core itself) */
.core::before {
  content: '';
  position: absolute;
  inset: -22px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(123, 61, 255, 0.55) 0%, rgba(123, 61, 255, 0) 72%);
  opacity: 0.4;
  z-index: -1;
  pointer-events: none;
  animation: heroGlowBreathe 3s ease-in-out infinite;
}

@keyframes heroGlowBreathe {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 0.6; }
}

@media (prefers-reduced-motion: reduce) {
  .core::before,
  .security-core::before {
    animation: none;
    opacity: 0.5;
  }
}

.systems {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-bottom: 8px;
}

.systems .node {
  padding: 16px 20px;
  width: auto;
  margin: 0;
  font-weight: 600;
  color: #eef0f8;
}

.result {
  border-radius: 12px;
  background: rgba(31, 158, 90, 0.16);
  border: 1.5px solid rgba(31, 158, 90, 0.55);
  padding: 16px 24px;
  text-align: center;
  margin: 0 auto;
  width: 210px;
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.result.show {
  opacity: 1;
  transform: scale(1);
}

.result span {
  font-size: 14px;
  color: var(--green-light);
  font-weight: 600;
}

/* ==========================================================================
   2. Where Revvi finds opportunities
   ========================================================================== */

.opportunity-row {
  display: flex;
  background: var(--off-white);
  border-radius: var(--radius);
  overflow: hidden;
}

.opportunity-item {
  flex: 1;
  min-width: 0;
  padding: 36px 32px;
  border-left: 1px solid var(--border-soft);
}

.opportunity-item:first-child {
  border-left: none;
}

.opportunity-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--lavender);
  color: var(--purple);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.1rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.opportunity-item:hover .opportunity-icon {
  transform: translateY(-3px);
  box-shadow: 0 8px 18px rgba(123, 61, 255, 0.25);
}

.opportunity-item h3 {
  font-size: 1.05rem;
  margin-bottom: 6px;
}

.opportunity-item p {
  font-size: 0.88rem;
  margin: 0;
}

/* ==========================================================================
   3 & 5. Stat sections
   ========================================================================== */

.stat-section {
  position: relative;
  background-image: radial-gradient(rgba(255,255,255,0.07) 1px, transparent 1px);
  background-size: 18px 18px;
}

.stat-grid {
  display: flex;
  align-items: center;
  gap: 48px;
}

.stat-ring-wrap {
  position: relative;
  flex-shrink: 0;
  width: 140px;
  height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.stat-ring {
  position: absolute;
  top: 0;
  left: 0;
}

.stat-ring-fill {
  transition: stroke-dashoffset 1s ease-out;
}

.stat-ring-purple { stroke: var(--purple); }
.stat-ring-green { stroke: var(--green); }

.stat-ring-value {
  position: relative;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.9rem;
  color: var(--white);
}

.stat-copy {
  max-width: 600px;
  min-width: 0;
}

.stat-label {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.stat-label-purple { color: var(--purple-light); }
.stat-label-green { color: var(--green-light); }

.stat-copy h2 {
  margin-bottom: 12px;
}

.stat-source {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.5);
  margin: 0;
}

/* ==========================================================================
   4. Savings calculator
   ========================================================================== */

.calculator-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  background: var(--white);
  border-radius: var(--radius);
  padding: 40px;
  box-shadow: 0 20px 50px rgba(13, 22, 43, 0.08);
}

.calc-inputs {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
  padding-right: 40px;
  border-right: 1px solid var(--border-soft);
}

.calc-inputs label {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ink);
}

.calc-inputs input {
  font-family: var(--font-body);
  font-size: 1.1rem;
  font-weight: 600;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--border-soft);
  color: var(--ink);
  background: var(--off-white);
  width: 100%;
}

.calc-input-prefix {
  position: relative;
  display: block;
}

.calc-prefix-symbol {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-weight: 600;
  color: var(--ink);
  pointer-events: none;
}

.calc-input-prefix input {
  padding-left: 26px;
}

.calc-inputs input:focus {
  outline: none;
  border-color: var(--purple);
  background: var(--white);
}

.calc-results {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}

.calc-results-label {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 10px;
}

.calc-results-value {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(2.2rem, 4vw, 3rem);
  color: var(--green);
  margin: 0 0 8px;
}

.calc-results-sub {
  font-size: 0.92rem;
  color: var(--ink-soft);
  margin-bottom: 24px;
}

.calc-disclaimer {
  font-size: 0.82rem;
  color: var(--ink-soft);
  text-align: center;
  margin: 24px 0 0;
}

/* ==========================================================================
   7. Start small
   ========================================================================== */

.start-steps {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 20px;
}

.start-steps::before {
  content: '';
  position: absolute;
  top: 20px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--border-soft);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.6s ease-out;
  z-index: 0;
}

.start-steps.visible::before {
  transform: scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
  .start-steps::before {
    transform: scaleX(1);
    transition: none;
  }
}

.start-step {
  position: relative;
  z-index: 1;
  flex: 1;
  min-width: 0;
}

.start-step-label {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.85rem;
  line-height: 1.2;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--purple);
  margin: 0 0 8px;
}

.start-step-desc {
  font-size: 0.9rem;
  margin: 0;
}

.start-step-arrow {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  color: var(--border-soft);
  font-size: 1.1rem;
  line-height: 1;
  padding-top: 11px;
  background: var(--white);
}

/* ==========================================================================
   8. How Revvi works
   ========================================================================== */

.timeline {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  position: relative;
}

.timeline::before {
  content: '';
  position: absolute;
  top: 22px;
  left: 10%;
  right: 10%;
  height: 2px;
  background: var(--border-soft);
  z-index: 0;
}

.timeline-step {
  position: relative;
  z-index: 1;
  padding: 20px 12px;
  border-radius: var(--radius);
  transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.timeline-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--white);
  border: 2px solid var(--purple);
  color: var(--purple);
  font-family: var(--font-heading);
  font-weight: 700;
  margin-bottom: 18px;
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

/* One-time glow as each step activates during the sequential scroll reveal */
.timeline-step.reveal.visible .timeline-num {
  animation: timelineNumGlow 0.8s ease-out;
}

@keyframes timelineNumGlow {
  0% { box-shadow: 0 0 0 0 rgba(123, 61, 255, 0); }
  40% { box-shadow: 0 0 0 8px rgba(123, 61, 255, 0.25); }
  100% { box-shadow: 0 0 0 0 rgba(123, 61, 255, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .timeline-step.reveal.visible .timeline-num {
    animation: none;
  }
}

.timeline-step h3 {
  font-size: 1.02rem;
  margin-bottom: 8px;
}

.timeline-step p {
  font-size: 0.88rem;
  margin: 0;
}

.timeline-step:hover,
.timeline-step.is-active {
  background: var(--white);
  box-shadow: 0 20px 44px rgba(13, 22, 43, 0.12);
  transform: translateY(-6px);
}

.timeline-step:hover .timeline-num,
.timeline-step.is-active .timeline-num {
  background: var(--purple);
  color: var(--white);
  box-shadow: 0 0 0 6px rgba(123, 61, 255, 0.15);
}

/* ==========================================================================
   9. Security & control
   ========================================================================== */

.security-layout {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 56px;
  align-items: center;
}

.security-copy {
  min-width: 0;
}

.trust-points {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 28px;
}

.trust-points li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 500;
  color: rgba(255,255,255,0.9);
}

.trust-points svg {
  flex-shrink: 0;
  color: var(--purple-light);
}

.security-diagram {
  min-width: 0;
  text-align: center;
}

.security-diagram-label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  margin-bottom: 14px;
}

.security-nodes {
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}

.security-node {
  background: var(--navy-card);
  border: 1.5px solid var(--navy-card-border);
  border-radius: 10px;
  padding: 10px 16px;
  font-size: 0.82rem;
  font-weight: 500;
  color: #dfe1ea;
}

.security-connector {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 0;
}

.security-connector-line {
  position: relative;
  width: 2px;
  height: 26px;
  background: linear-gradient(180deg, rgba(123, 61, 255, 0.5), rgba(123, 61, 255, 0.1));
}

/* Data flows from the 4 system nodes toward Revvi, never the reverse, and never
   toward the Human approval badge below (that connector stays static, on purpose). */
.security-connector-line-pulse::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--purple);
  box-shadow: 0 0 8px var(--purple);
  transform: translateX(-50%);
  animation: securityPulseDown 2.2s ease-in-out infinite;
}

@keyframes securityPulseDown {
  0% { top: 0%; opacity: 0; }
  15% { opacity: 1; }
  85% { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .security-connector-line-pulse::after {
    animation: none;
    opacity: 0;
  }
}

.security-connector-caption {
  font-size: 0.72rem;
  font-style: italic;
  color: rgba(255,255,255,0.4);
}

.security-core {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: radial-gradient(circle, #2A1856 0%, #1B1035 70%);
  border: 2.5px solid var(--purple);
  box-shadow: 0 0 40px rgba(123, 61, 255, 0.4);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-weight: 700;
  color: #fff;
  font-size: 15px;
  position: relative;
  z-index: 2;
}

/* Same breathing-glow technique as the hero's .core::before, scaled down to
   this node's smaller size, so the Revvi node reads consistently wherever
   it appears on the site. */
.security-core::before {
  content: '';
  position: absolute;
  inset: -16px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(123, 61, 255, 0.55) 0%, rgba(123, 61, 255, 0) 72%);
  opacity: 0.4;
  z-index: -1;
  pointer-events: none;
  animation: heroGlowBreathe 3s ease-in-out infinite;
}

.security-approval {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(31, 158, 90, 0.16);
  border: 1.5px solid rgba(31, 158, 90, 0.55);
  border-radius: 999px;
  padding: 10px 22px;
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--green-light);
}

.security-diagram-caption {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.4);
  margin: 10px 0 0;
}

/* ==========================================================================
   10. Industries
   ========================================================================== */

.industry-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 32px;
}

/* Dark-card pill, matching the node/workflow-group-item component used
   for the hero diagram and Solutions' workflow diagrams elsewhere on the
   site, rather than a bespoke light-card style. */
.industry-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px 10px 14px;
  border-radius: 999px;
  background: var(--navy-card);
  border: 1px solid var(--navy-card-border);
  color: #dfe1ea;
  font-size: 0.92rem;
  font-weight: 500;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.industry-chip:hover {
  border-color: var(--purple);
  background: var(--navy-soft);
}

.industry-chip-icon {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  padding: 6px;
  border-radius: 50%;
  background: var(--navy-soft);
  color: var(--purple-light);
}

/* ==========================================================================
   11. FAQ accordion
   ========================================================================== */

.faq-list {
  max-width: 760px;
  margin: 0 auto;
}

.faq-item {
  border-bottom: 1px solid var(--border-soft);
  padding: 8px 0;
}

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 4px;
  cursor: pointer;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--ink);
  list-style: none;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--purple);
  transition: transform 0.2s ease;
}

.faq-item[open] .faq-icon {
  transform: rotate(45deg);
}

.faq-item p {
  padding: 0 4px 16px;
  margin: 0;
  font-size: 0.95rem;
}

/* ==========================================================================
   12. Final CTA
   ========================================================================== */

.final-cta {
  /* The button glow below bleeds 30px past its own edges; on mobile the
     button is full-width, so the glow can extend past the viewport.
     Clip it here rather than shrinking the glow itself. */
  overflow-x: hidden;
}

.final-cta .container {
  max-width: 680px;
  text-align: center;
}

.final-cta h2 {
  margin-bottom: 28px;
}

.final-cta .btn-primary {
  position: relative;
  z-index: 1;
}

.final-cta .btn-primary::before {
  content: '';
  position: absolute;
  inset: -30px;
  z-index: -1;
  border-radius: 999px;
  /* Softer + a further-out fade (75% vs the old 70%) so this ambient pulse
     matches the calmer .bg-navy .btn-primary shadow above rather than
     reading as its own separate bright halo on top of it. */
  background: radial-gradient(circle, rgba(123, 61, 255, 0.35) 0%, rgba(123, 61, 255, 0) 75%);
  opacity: 0.4;
  animation: finalCtaGlow 4.5s ease-in-out infinite;
}

@keyframes finalCtaGlow {
  0%, 100% { opacity: 0.22; transform: scale(0.96); }
  50% { opacity: 0.4; transform: scale(1.04); }
}

@media (prefers-reduced-motion: reduce) {
  .final-cta .btn-primary::before {
    animation: none;
    opacity: 0.3;
  }
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
  padding: 40px 0;
}

.site-footer .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

.site-footer p {
  margin: 0;
  font-size: 0.88rem;
  color: rgba(255,255,255,0.6);
}

.footer-contact {
  display: flex;
  align-items: center;
  gap: 10px;
}

.footer-contact-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.16);
  font-size: 0.82rem;
  font-weight: 500;
  color: rgba(255,255,255,0.6);
  transition: border-color 0.2s ease, color 0.2s ease;
}

.footer-contact-link svg {
  flex-shrink: 0;
}

.footer-contact-link:hover {
  border-color: rgba(255,255,255,0.35);
  color: rgba(255,255,255,0.85);
}

.footer-legal-row {
  display: flex;
  justify-content: center;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,0.08);
}

.footer-legal {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 0.8rem;
  color: rgba(255,255,255,0.4);
}

.footer-legal a {
  color: inherit;
  transition: color 0.2s ease;
}

.footer-legal a:hover {
  color: rgba(255,255,255,0.8);
}

/* ==========================================================================
   Legal pages (Privacy Policy, Terms & Conditions): single-column shell,
   headings + placeholder body copy only, no marketing-page section rhythm.
   ========================================================================== */

.legal-page {
  padding: 96px 0 88px;
}

.legal-page .container {
  max-width: 760px;
}

.legal-page h1 {
  margin-bottom: 40px;
}

.legal-page h2 {
  font-size: 1.25rem;
  margin: 40px 0 12px;
}

.legal-page h2:first-of-type {
  margin-top: 0;
}

.legal-page p {
  margin: 0;
}

/* ==========================================================================
   How It Works page: page hero + examples grid
   ========================================================================== */

.hiw-hero {
  padding: 88px 0;
  text-align: center;
}

.hiw-hero .container {
  max-width: 680px;
}

.hiw-hero .hero-sub {
  margin: 0 auto 28px;
}

/* ==========================================================================
   Before / After (invoice example) — standalone component.
   Reuses .node / .core / .line / .packet / .result for visual consistency
   with the hero diagram, but is driven by its own script and its own
   layout classes below, not the hero's runStory().
   ========================================================================== */

.ba-stage {
  position: relative;
  min-height: 560px;
}

.ba-before,
.ba-after {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
  pointer-events: none;
}

.ba-before.show {
  opacity: 1;
}

.ba-before.collapsing {
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 1.6s ease-out, transform 1.6s ease-out;
}

.ba-after {
  transform: scale(0.94);
}

.ba-after.show {
  opacity: 1;
  transform: scale(1);
}

.ba-label {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
  margin: 0 0 20px;
}

.ba-label-after {
  color: var(--green-light);
}

.ba-before-steps {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.ba-step {
  width: 100%;
  max-width: 300px;
  margin: 0 auto;
  font-size: 13px;
  padding: 12px 20px;
}

/* Slightly lower opacity than a fully "shown" node, so the manual steps
   read as muted/tedious next to the vivid purple + green automated flow. */
.ba-step.show {
  opacity: 0.72;
}

.ba-step-line {
  width: 2px;
  height: 16px;
  margin: 2px auto;
  background: rgba(255,255,255,0.18);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.ba-step-line.show {
  opacity: 1;
}

.ba-after-flow {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0;
}

.ba-after-flow .node {
  flex-shrink: 0;
}

.ba-after-flow .core {
  flex-shrink: 0;
  margin: 0 6px;
}

.ba-after-flow .result {
  width: auto;
  flex-shrink: 0;
  margin: 0;
}

.ba-after-flow .line {
  width: 34px;
  height: 2px;
  margin: 0;
  background: linear-gradient(90deg, rgba(123, 61, 255, 0.5), rgba(123, 61, 255, 0.13));
}

.ba-after-flow .line.active {
  background: linear-gradient(90deg, rgba(123, 61, 255, 0.6), rgba(123, 61, 255, 0.13));
}

.ba-after-flow .packet {
  top: 50%;
  left: -3.5px;
  transform: translateY(-50%);
}

.ba-after-flow .packet.travel {
  animation: travelRight 0.5s ease forwards;
}

@keyframes travelRight {
  0% { opacity: 1; left: -3.5px; }
  100% { opacity: 1; left: calc(100% - 4px); }
}

.ba-static {
  display: none;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}

.ba-static-col ol {
  list-style: decimal;
  padding-left: 20px;
}

.ba-static-col li {
  color: rgba(255,255,255,0.72);
  padding: 4px 0;
}

@media (prefers-reduced-motion: reduce) {
  .ba-stage {
    display: none;
  }

  .ba-static {
    display: grid;
  }
}

.example-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.example-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: var(--off-white);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 28px 20px;
}

.example-card h3 {
  font-size: 1rem;
  margin: 0 0 8px;
}

.example-card p {
  font-size: 0.88rem;
  margin: 0;
}

/* Compact single-paragraph + flow-line section, deliberately simpler
   than Home's 4-step Start Small component */
.one-process {
  text-align: center;
}

.one-process .container {
  max-width: 640px;
}

.one-process p {
  margin: 0 auto 36px;
}

.one-process-flow {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
}

.one-process-node {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--purple);
  padding: 10px 18px;
  border: 1.5px solid var(--purple);
  border-radius: 999px;
  background: var(--white);
}

.one-process-arrow {
  color: var(--border-soft);
  font-size: 1.1rem;
  flex-shrink: 0;
}

/* ==========================================================================
   Solutions page
   ========================================================================== */

.solutions-hero {
  padding: 96px 0 72px;
  text-align: center;
}

.solutions-hero .container {
  max-width: 720px;
}

.solutions-hero .hero-sub {
  margin: 0 auto 12px;
}

.solutions-disclaimer {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.45);
  margin: 0;
}

.pillar-section h2 {
  margin-bottom: 8px;
}

.pillar-tagline {
  font-size: 1.05rem;
  max-width: 560px;
  margin-bottom: 24px;
}

.pillar-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 36px;
}

.pillar-pill {
  font-size: 0.85rem;
  font-weight: 500;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--lavender);
  color: var(--purple-dark);
}

.workflow-bar {
  background: var(--navy);
  border-radius: var(--radius);
  padding: 44px 32px;
  margin-bottom: 36px;
}

.workflow-flow {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0;
}

/* Reuses .node/.core/.line/.packet/.result from the hero diagram, driven by
   the same JS-toggled .show/.pulse/.active/.travel classes (see the
   runWorkflow() script at the bottom of solutions.html), just laid out
   horizontally instead of vertically. */
.workflow-flow .node,
.workflow-flow .result {
  flex-shrink: 0;
}

.workflow-flow .core {
  flex-shrink: 0;
  margin: 0 6px;
}

.workflow-flow .result {
  width: auto;
  margin: 0;
}

.workflow-flow .line {
  width: 34px;
  height: 2px;
  margin: 0;
  background: linear-gradient(90deg, rgba(123, 61, 255, 0.5), rgba(123, 61, 255, 0.13));
}

.workflow-flow .line.active {
  background: linear-gradient(90deg, rgba(123, 61, 255, 0.6), rgba(123, 61, 255, 0.13));
}

.workflow-flow .packet {
  top: 50%;
  left: -3.5px;
  transform: translateY(-50%);
}

.workflow-flow .packet.travel {
  animation: travelRight 0.5s ease forwards;
}

.workflow-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex-shrink: 0;
}

.workflow-group-item {
  border-radius: 12px;
  background: var(--navy-card);
  border: 1.5px solid var(--navy-card-border);
  padding: 12px 20px;
  text-align: center;
  font-size: 13px;
  color: #dfe1ea;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.workflow-group-item.show {
  opacity: 1;
  transform: translateX(0);
}

@media (prefers-reduced-motion: reduce) {
  .workflow-group-item {
    transition: none;
  }
}

.pillar-bullets {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 560px;
}

.pillar-bullets li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.95rem;
  color: var(--ink-soft);
}

.pillar-bullets svg {
  flex-shrink: 0;
  color: var(--green);
  margin-top: 3px;
}

.tool-pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 32px;
}

.tool-pill {
  padding: 10px 20px;
  border-radius: 999px;
  background: var(--white);
  border: 1px solid var(--border-soft);
  font-size: 0.92rem;
  font-weight: 500;
}

.tools-note {
  text-align: center;
  margin: 24px 0 0;
  font-size: 0.9rem;
}

.value-row {
  display: flex;
  gap: 24px;
  margin-top: 8px;
}

.value-item {
  flex: 1;
  text-align: center;
  padding: 28px 20px;
  border-radius: var(--radius);
  background: var(--navy-card);
  border: 1px solid var(--navy-card-border);
}

.value-label {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.15rem;
  margin: 0 0 8px;
}

.value-label-purple { color: var(--purple-light); }
.value-label-green { color: var(--green-light); }

.value-caption {
  font-size: 0.9rem;
  margin: 0;
}

.value-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 32px;
}

.value-tag {
  font-size: 0.82rem;
  font-weight: 500;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.75);
  border: 1px solid rgba(255,255,255,0.12);
}

.built-around-layout {
  max-width: 640px;
  text-align: center;
  margin: 0 auto;
}

.built-around-layout p {
  margin: 0 auto;
}

/* ==========================================================================
   About page
   ========================================================================== */

.about-hero {
  padding: 96px 0 72px;
  text-align: center;
}

.about-hero .container {
  max-width: 720px;
}

.about-hero .hero-sub {
  margin: 0 auto;
}

.founder {
  text-align: center;
}

.founder .container {
  max-width: 640px;
}

.founder-label {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--purple);
  margin: 0 0 12px;
}

.founder h2 {
  margin-bottom: 20px;
}

.approach-cards {
  display: flex;
  gap: 24px;
}

.approach-card {
  flex: 1;
  background: var(--white);
  border-radius: var(--radius);
  padding: 36px 32px;
  box-shadow: 0 8px 28px rgba(13, 22, 43, 0.06);
}

.approach-label {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0 0 14px;
}

.approach-label-purple { color: var(--purple); }
.approach-label-green { color: var(--green); }

.approach-card h3 {
  font-size: 1.25rem;
  margin-bottom: 14px;
}

.approach-card p {
  margin: 0;
}

.about-features {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  text-align: center;
}

.about-feature-icon {
  width: 48px;
  height: 48px;
  margin: 0 auto 16px;
  border-radius: 12px;
  background: var(--lavender);
  color: var(--purple);
  display: flex;
  align-items: center;
  justify-content: center;
}

.about-feature h3 {
  font-size: 1rem;
  margin-bottom: 8px;
}

.about-feature p {
  font-size: 0.88rem;
  margin: 0;
}

.security-trust-points {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 24px;
  padding: 0;
}

.security-trust-points li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.92rem;
  color: rgba(255,255,255,0.75);
}

.security-trust-points svg {
  flex-shrink: 0;
  color: var(--purple-light);
}

/* About's security visual: a vertical 3-step chain (Revvi -> pending -> approved),
   reusing the Home security diagram's node/connector/approval primitives rather
   than introducing new ones. */
.about-security-visual {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.about-security-visual .security-node {
  margin: 0;
}

/* Sequential reveal (revvi pulse -> pending -> approved), gated by the
   IntersectionObserver script at the bottom of about.html. Scoped to this
   component only so Home's static security-node/security-approval usage
   is unaffected. */
.about-security-visual .security-core {
  transition: box-shadow 0.4s ease, transform 0.4s ease;
}

.about-security-visual .security-core.pulse {
  box-shadow: 0 0 60px rgba(123, 61, 255, 0.6);
  transform: scale(1.05);
}

.about-security-visual .security-node,
.about-security-visual .security-approval {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.about-security-visual .security-node.show,
.about-security-visual .security-approval.show {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .about-security-visual .security-core,
  .about-security-visual .security-node,
  .about-security-visual .security-approval {
    transition: none;
  }
}

.technical-capability .tool-pills {
  justify-content: flex-start;
}

.technical-capability .tools-note {
  text-align: left;
}

/* ==========================================================================
   Free Assessment (multi-step form)
   ========================================================================== */

/* Small text label replacing the nav CTA on this page (we're already here),
   mirrors .nav-cta's own show/hide behaviour at the mobile breakpoint. */
.nav-page-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: rgba(255,255,255,0.55);
  padding: 11px 4px;
}

.assessment-hero {
  padding: 96px 0 72px;
  text-align: center;
}

.assessment-hero .container {
  max-width: 720px;
}

.assessment-hero .hero-sub {
  margin: 0 auto;
}

.assessment-form-container {
  max-width: 640px;
}

.progress-bar {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}

.progress-segment {
  flex: 1;
  height: 6px;
  border-radius: 999px;
  background: var(--border-soft);
  transition: background 0.3s ease;
}

.progress-segment.is-active {
  background: var(--purple);
}

.progress-label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink-soft);
  margin: 0 0 28px;
}

.assessment-card {
  background: var(--white);
  border-radius: var(--radius);
  padding: 40px;
  box-shadow: 0 20px 50px rgba(13, 22, 43, 0.08);
}

.assessment-card h2 {
  margin-bottom: 24px;
}

.form-step {
  border: none;
  margin: 0;
  padding: 0;
  display: none;
}

.form-step.is-active {
  display: block;
  animation: formStepIn 0.4s ease;
}

@keyframes formStepIn {
  from { opacity: 0; transform: translateX(8px); }
  to { opacity: 1; transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
  .form-step.is-active {
    animation: none;
  }
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 24px;
}

.form-label {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--ink);
}

.form-input {
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--border-soft);
  color: var(--ink);
  background: var(--off-white);
  width: 100%;
}

.form-input:focus {
  outline: none;
  border-color: var(--purple);
  background: var(--white);
}

.form-group-label {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 24px 0 10px;
}

.form-group-label:first-of-type {
  margin-top: 0;
}

.radio-group,
.checkbox-group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.checkbox-group-standalone {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--border-soft);
}

.radio-option input,
.checkbox-option input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.radio-option span,
.checkbox-option span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  border-radius: 999px;
  border: 1.5px solid var(--border-soft);
  background: var(--off-white);
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.radio-option input:checked + span,
.checkbox-option input:checked + span {
  border-color: var(--purple);
  background: var(--lavender);
  color: var(--purple-dark);
  font-weight: 600;
}

.radio-option input:focus-visible + span,
.checkbox-option input:focus-visible + span {
  outline: 2px solid var(--purple);
  outline-offset: 2px;
}

/* Error colour is a deliberate one-off for form validation feedback, not
   part of the brand palette (which has no "danger" colour defined). */
.form-error {
  display: none;
  font-size: 0.82rem;
  color: #D64545;
  margin: 0;
}

.form-field.has-error .form-error {
  display: block;
}

.form-field.has-error .form-input {
  border-color: #D64545;
}

.form-error-group {
  margin-top: 16px;
}

.form-error-group.is-visible {
  display: block;
}

/* Honeypot: kept in the layout flow and readable to screen readers'
   accessibility tree removed via aria-hidden, but positioned off-screen
   so sighted visitors never see or tab to it. display:none/visibility:hidden
   are avoided since some bots skip fields hidden that way. */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-submit-error {
  display: none;
  margin: 0 0 16px;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  background: rgba(214, 69, 69, 0.08);
  border: 1px solid rgba(214, 69, 69, 0.3);
  color: #B93A3A;
  font-size: 0.88rem;
}

.form-submit-error a {
  color: inherit;
  text-decoration: underline;
}

.form-submit-error.is-visible {
  display: block;
}

.form-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 32px;
}

.form-nav-single {
  justify-content: flex-end;
}

.btn-secondary {
  background: transparent;
  color: var(--ink-soft);
  border: 1.5px solid var(--border-soft);
}

.btn-secondary:hover {
  border-color: var(--purple);
  color: var(--purple);
}

.assessment-success {
  text-align: center;
}

.assessment-success h2 {
  margin-bottom: 12px;
}

.calendly-inline-widget {
  margin-top: 24px;
}

/* ==========================================================================
   Responsive
   Breakpoints per brief: 860px (tablet), 480px (phone), 340px (small phone).
   Multi-column sections get an explicit stacking rule here rather than
   relying on flex-wrap alone.
   ========================================================================== */

@media (max-width: 860px) {
  section {
    padding: 64px 0;
  }

  .site-nav-links,
  .nav-cta,
  .nav-page-label {
    display: none;
  }

  .nav-toggle {
    display: flex;
  }

  .site-header.is-open .site-nav {
    position: fixed;
    top: 76px;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--navy);
    flex-direction: column;
    align-items: stretch;
    padding: 32px 24px;
    gap: 28px;
    overflow-y: auto;
  }

  .site-header.is-open .site-nav-links {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }

  .site-header.is-open .site-nav-links a {
    font-size: 1.1rem;
  }

  .site-header.is-open .nav-cta {
    display: inline-flex;
  }

  .site-header.is-open .nav-page-label {
    display: block;
    padding: 0;
  }

  .nav-toggle.is-active span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }

  .nav-toggle.is-active span:nth-child(2) {
    opacity: 0;
  }

  .nav-toggle.is-active span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  /* Hero: text first, diagram below (explicit order, not source-order reliant) */
  .hero-grid {
    grid-template-columns: 1fr;
  }

  .hero-content {
    order: 1;
  }

  .hero-visual {
    order: 2;
    min-height: 220px;
  }

  .diagram {
    min-height: 380px;
    margin-top: 30px;
  }

  .core {
    width: 104px;
    height: 104px;
    font-size: 16px;
  }

  .n-start {
    width: 170px;
  }

  .result {
    width: 180px;
  }

  /* Opportunities */
  .opportunity-row {
    flex-direction: column;
  }

  .opportunity-item {
    border-left: none;
    border-top: 1px solid var(--border-soft);
  }

  .opportunity-item:first-child {
    border-top: none;
  }

  /* Stats: ring centered above text */
  .stat-grid {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  /* Calculator */
  .calculator-card {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 28px;
  }

  .calc-inputs {
    padding-right: 0;
    padding-bottom: 28px;
    border-right: none;
    border-bottom: 1px solid var(--border-soft);
  }

  .calc-results {
    text-align: center;
    align-items: center;
  }

  /* Start small */
  .start-steps {
    flex-direction: column;
    gap: 28px;
  }

  .start-step-arrow {
    display: none;
  }

  /* How Revvi works: vertical list with a vertical connecting line
     (not the horizontal desktop layout, and not hidden) */
  .timeline {
    display: flex;
    flex-direction: column;
    grid-template-columns: none;
    gap: 28px;
  }

  .timeline::before {
    top: 22px;
    bottom: 22px;
    left: 22px;
    right: auto;
    width: 2px;
    height: auto;
  }

  .timeline-step {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 16px;
    text-align: left;
    padding: 4px;
  }

  .timeline-num {
    margin-bottom: 0;
  }

  .timeline-step.is-active {
    transform: none;
  }

  /* Security: text first, diagram below */
  .security-layout {
    grid-template-columns: 1fr;
  }

  .security-diagram {
    margin-top: 8px;
  }

  /* Footer */
  .site-footer .container {
    flex-direction: column;
    text-align: center;
  }

  /* How It Works: examples grid to 2 columns */
  .example-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .one-process-flow {
    flex-direction: column;
  }

  .one-process-arrow {
    transform: rotate(90deg);
  }

  /* Before / After: after-flow drops to the same vertical pattern as
     the before-list, instead of a horizontal row */
  .ba-stage {
    min-height: 620px;
  }

  .ba-after-flow {
    flex-direction: column;
  }

  .ba-after-flow .core {
    margin: 6px 0;
  }

  .ba-after-flow .line {
    width: 2px;
    height: 26px;
  }

  .ba-after-flow .packet {
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
  }

  .ba-after-flow .packet.travel {
    animation: travelDown 0.5s ease forwards;
  }

  .ba-static {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  /* Solutions: workflow diagrams drop to vertical, matching the
     before/after horizontal-to-vertical pattern above */
  .workflow-flow {
    flex-direction: column;
  }

  .workflow-flow .core {
    margin: 6px 0;
  }

  .workflow-flow .line {
    width: 2px;
    height: 26px;
  }

  .workflow-flow .packet {
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
  }

  .workflow-flow .packet.travel {
    animation: travelDown 0.5s ease forwards;
  }

  .workflow-group-item.show {
    transform: none;
  }

  .value-row {
    flex-direction: column;
  }

  /* About: two-column cards and 4-column features stack */
  .approach-cards {
    flex-direction: column;
  }

  .about-features {
    grid-template-columns: repeat(2, 1fr);
  }

  .about-security-flow {
    margin-top: 8px;
  }
}

@media (max-width: 480px) {
  .btn {
    width: 100%;
    white-space: normal;
    text-align: center;
  }

  .site-header.is-open .nav-cta {
    width: 100%;
  }

  .diagram {
    min-height: 300px;
  }

  .n-start {
    width: 150px;
    padding: 9px 14px;
  }

  .node {
    font-size: 12px;
    padding: 9px 14px;
  }

  .core {
    width: 76px;
    height: 76px;
    font-size: 13px;
  }

  .systems {
    flex-direction: column;
    align-items: center;
    gap: 7px;
  }

  .systems .node {
    padding: 9px 11px;
    font-size: 12px;
  }

  .result {
    width: 160px;
    padding: 9px 14px;
  }

  .result span {
    font-size: 12px;
  }

  .line {
    height: 20px;
  }

  .stat-ring-wrap {
    width: 110px;
    height: 110px;
  }

  .stat-ring {
    width: 110px;
    height: 110px;
  }

  .stat-ring-value {
    font-size: 1.5rem;
  }

  .stat-copy h2 {
    font-size: 1.4rem;
  }

  .security-nodes {
    flex-direction: column;
    align-items: center;
  }

  /* How It Works: examples grid to 1 column */
  .example-grid {
    grid-template-columns: 1fr;
  }

  .workflow-bar {
    padding: 28px 16px;
  }

  .workflow-group-item {
    font-size: 12px;
    padding: 9px 14px;
  }

  .about-features {
    grid-template-columns: 1fr;
  }

  .technical-capability .tool-pills {
    justify-content: center;
  }

  .technical-capability .tools-note {
    text-align: center;
  }

  /* Free assessment: buttons are full-width at this breakpoint (see .btn
     above), so stack Back/Next instead of squeezing them side by side.
     column-reverse keeps the primary action (Next/Submit) on top for
     easier thumb reach. */
  .assessment-card {
    padding: 28px 20px;
  }

  .form-nav {
    flex-direction: column-reverse;
    gap: 12px;
  }

  .form-nav-single {
    align-items: stretch;
  }

  /* Calendly's own embed snippet sets an inline min-width:320px on the
     widget, which is wider than the space left once the container and
     card padding are subtracted at this breakpoint, causing horizontal
     overflow. The !important is necessary to beat that inline style. */
  .calendly-inline-widget {
    min-width: 0 !important;
  }
}

@media (max-width: 340px) {
  .calculator-card {
    padding: 20px;
  }

  .assessment-card {
    padding: 22px 16px;
  }
}