/* ==========================================================================
   VisaRoxy — visaroxy.com
   Single shared stylesheet for every page. No preprocessor, no build step.

   Design source: website-ui.png (project root). Values below were sampled from
   that reference, not guessed:
     canvas #F5F4F0 · alt band #ECE9E2 · surface #FFFFFF
     ink #0D1113 · ink surface #15191C · ink hairline #272D31
     accent #C0330A (reference sampled #F64C21; darkened so accent-on-canvas and
     accent-on-alt-band both clear 4.5:1, and white-on-accent clears 5.6:1)
     heading #0D1113 weight 800 tight, body #0D1113 weight 400 — heavy display
     against light body, two families maximum.
     radius 6px everywhere · 1px hairline borders, shadows used once · alternating
     paper / ink bands · nav = logo left, centred links, single accent CTA right.

   Sections: 01 tokens · 02 reset & base · 03 layout · 04 typography
             05 components · 06 product mockups · 07 forms · 08 utilities
             09 motion · 10 responsive
   ========================================================================== */

/* 01 =======================================================================
   TOKENS — every colour, size and space in this file resolves to one of these.
   ========================================================================== */

:root {
  /* --- palette: light canvas --- */
  --color-bg:            #F5F4F0;  /* warm off-white canvas, site-wide        */
  --color-bg-alt:        #ECE9E2;  /* second canvas tone for alternating bands */
  --color-surface:       #FFFFFF;  /* raised card on the canvas                */
  --color-text:          #0D1113;  /* 18.1:1 on --color-bg                     */
  --color-text-muted:    #5F656B;  /*  5.4:1 on --color-bg, 4.9:1 on bg-alt    */
  --color-border:        #DEDCD5;  /* hairline; 3.1:1 against --color-bg       */
  --color-accent:        #C0330A;  /* 5.1:1 on canvas, 4.7:1 on bg-alt, 5.6:1 behind white */
  --color-accent-contrast: #FFFFFF;

  /* --- palette: ink bands --- */
  --color-ink:           #0D1113;
  --color-ink-surface:   #15191C;
  --color-ink-border:    #2C3236;
  --color-ink-text:      #F2F1ED;
  --color-ink-text-muted:#9BA2A8;  /* 7.3:1 on --color-ink                     */
  --color-accent-tint:   #FF6A3D;  /* accent on ink only: 6.7:1 on --color-ink */

  /* --- state colours (always paired with text, never colour alone) --- */
  --color-signal-live:   #FF6A3D;
  --color-signal-warn:   #E8B33A;
  --color-signal-ok:     #4E9E6A;
  --color-signal-error:  #B3261E;  /* 5.9:1 on --color-surface                 */
  --color-focus:         #C0330A;
  --color-focus-ink:     #FF6A3D;

  /* --- type --- */
  --font-heading: "Archivo", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-body:    "Inter", "Segoe UI", "Helvetica Neue", Arial, sans-serif;

  /* Type scale, ratio 1.25 on the declared minimum of each step. Steps 1-4
     ramp fluidly; step-4 is the display step and carries the widest ramp. */
  --step--1: 0.8rem;
  --step-0:  1rem;
  --step-1:  clamp(1.25rem,   1.19rem + 0.28vw, 1.4rem);
  --step-2:  clamp(1.5625rem, 1.41rem + 0.68vw, 1.85rem);
  --step-3:  clamp(1.9531rem, 1.63rem + 1.45vw, 2.45rem);
  --step-4:  clamp(2.4414rem, 1.74rem + 3.15vw, 4.1rem);

  /* --- space: 4px base --- */
  --space-1: 0.25rem;   /*  4px */
  --space-2: 0.5rem;    /*  8px */
  --space-3: 1rem;      /* 16px */
  --space-4: 1.5rem;    /* 24px */
  --space-5: 2rem;      /* 32px */
  --space-6: 3rem;      /* 48px */
  --space-7: 4rem;      /* 64px */
  --space-8: 6rem;      /* 96px */

  /* --- structure --- */
  --radius:            6px;
  --container-width:   1200px;
  --section-padding:   var(--space-8);
  --border-width:      1px;
  --tap-target:        44px;
  --header-height:     68px;
  --measure:           68ch;
  --reveal-shift:      14px;

  /* --- effects --- */
  --shadow-card:  0 1px 2px rgba(13, 17, 19, 0.05);
  --shadow-raise: 0 10px 30px rgba(13, 17, 19, 0.10);
  --focus-ring:   3px;
  --focus-offset: 2px;

  /* --- motion (all under 400ms) --- */
  --duration-fast: 140ms;
  --duration-base: 220ms;
  --duration-slow: 340ms;
  --ease: cubic-bezier(0.2, 0.7, 0.3, 1);
}

/* Ink bands re-declare the same token names, so every component inside them
   adapts without a single one-off override. */
.band--ink,
.site-footer,
.mock {
  --color-bg:            var(--color-ink);
  --color-bg-alt:        var(--color-ink-surface);
  --color-surface:       var(--color-ink-surface);
  --color-text:          var(--color-ink-text);
  --color-text-muted:    var(--color-ink-text-muted);
  --color-border:        var(--color-ink-border);
  --color-accent:        var(--color-accent-tint);
  --color-accent-contrast: var(--color-ink);
  --color-focus:         var(--color-focus-ink);
  --shadow-card:         none;
  --shadow-raise:        none;
}

/* 02 =======================================================================
   RESET AND BASE
   ========================================================================== */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--step-0);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Body scroll lock while the mobile drawer is open. */
body.is-locked { overflow: hidden; }

img,
svg,
picture { max-width: 100%; }

img { height: auto; display: block; }

figure { margin: 0; }

hr {
  border: 0;
  border-top: var(--border-width) solid var(--color-border);
  margin: var(--space-6) 0;
}

::selection {
  background-color: var(--color-accent);
  color: var(--color-accent-contrast);
}

/* Focus: never removed, always replaced with a visible ring. */
:focus-visible {
  outline: var(--focus-ring) solid var(--color-focus);
  outline-offset: var(--focus-offset);
  border-radius: var(--radius);
}
:focus:not(:focus-visible) { outline: none; }

/* 03 =======================================================================
   LAYOUT
   ========================================================================== */

.container-x {
  width: 100%;
  max-width: var(--container-width);
  margin-inline: auto;
  padding-inline: var(--space-4);
}

.container-x--narrow { max-width: 860px; }

/* A band is one horizontal slice of the page. Rhythm comes from alternating
   paper / alt / ink, never from per-section spacing values. */
.band {
  background-color: var(--color-bg);
  color: var(--color-text);
  padding-block: var(--section-padding);
}
.band--alt  { background-color: var(--color-bg-alt); }
.band--ink  { background-color: var(--color-ink); color: var(--color-ink-text); }
.band--flush-top    { padding-block-start: 0; }
.band--flush-bottom { padding-block-end: 0; }
.band--tight { padding-block: var(--space-6); }
.band--hairline-top { border-top: var(--border-width) solid var(--color-border); }

/* 04 =======================================================================
   TYPOGRAPHY
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 var(--space-3);
  font-family: var(--font-heading);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.022em;
  color: var(--color-text);
  text-wrap: balance;
}

h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); line-height: 1.15; }
h4 { font-size: var(--step-1); line-height: 1.25; font-weight: 700; }

h5, h6 {
  font-size: var(--step-0);
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: -0.01em;
}

p {
  margin: 0 0 var(--space-3);
  max-width: var(--measure);
}

p:last-child { margin-bottom: 0; }

.lede {
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--color-text-muted);
  max-width: 56ch;
}

.eyebrow {
  display: block;
  margin: 0 0 var(--space-3);
  font-family: var(--font-heading);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.section-head { margin-bottom: var(--space-6); }
.section-head p { color: var(--color-text-muted); }
.section-head--split {
  display: grid;
  gap: var(--space-4);
  align-items: end;
}
.section-head--split > :last-child { max-width: 46ch; }

.prose { max-width: var(--measure); }
.prose p { color: var(--color-text); }
.prose h2 { margin-top: var(--space-7); }
.prose h3 { margin-top: var(--space-6); }
.prose ul,
.prose ol { margin: 0 0 var(--space-4); padding-left: var(--space-4); }
.prose li { margin-bottom: var(--space-2); }

a {
  color: var(--color-accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
a:hover { text-decoration-thickness: 2px; }

.link-quiet {
  color: var(--color-text);
  text-decoration: none;
  border-bottom: var(--border-width) solid var(--color-border);
}
.link-quiet:hover { border-bottom-color: var(--color-accent); }

.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 600;
  text-decoration: none;
  color: var(--color-accent);
}
.arrow-link:hover { text-decoration: underline; }

/* 05 =======================================================================
   COMPONENTS
   ========================================================================== */

/* --- skip link ---------------------------------------------------------- */
.skip-link {
  position: absolute;
  left: var(--space-3);
  top: calc(var(--space-8) * -1);
  z-index: 200;
  padding: var(--space-2) var(--space-4);
  background-color: var(--color-accent);
  color: var(--color-accent-contrast);
  border-radius: var(--radius);
  font-weight: 600;
  text-decoration: none;
  transition: top var(--duration-fast) var(--ease);
}
.skip-link:focus { top: var(--space-3); }

/* --- buttons ------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--tap-target);
  padding: var(--space-2) var(--space-4);
  border: var(--border-width) solid transparent;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: var(--step-0);
  font-weight: 600;
  line-height: 1.2;
  /* Bootstrap's .btn component colours buttons from its own variables; restate
     it so a button inside an ink band cannot inherit dark text. */
  color: var(--color-text);
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease),
              border-color var(--duration-fast) var(--ease),
              color var(--duration-fast) var(--ease);
}
.btn i { font-size: var(--step-1); line-height: 1; }

/* Bootstrap's button components are replaced wholesale by the modifiers below.
   Neutralise its state styling so no :active inset shadow leaks in. */
.btn:hover,
.btn:focus,
.btn:active,
.btn:first-child:active,
.btn.active,
.btn:disabled {
  box-shadow: none;
}

.btn--primary {
  background-color: var(--color-accent);
  color: var(--color-accent-contrast);
}
.btn--primary:hover { background-color: var(--color-text); color: var(--color-bg); }

.btn--outline {
  background-color: transparent;
  border-color: var(--color-border);
  color: var(--color-text);
}
.btn--outline:hover { border-color: var(--color-text); }

.btn--ghost {
  background-color: transparent;
  color: var(--color-text);
  padding-inline: var(--space-3);
}
.btn--ghost:hover { background-color: var(--color-bg-alt); }

.btn--block { width: 100%; }

.btn[disabled],
.btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}

/* --- header and navigation --------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: var(--color-bg);
  border-bottom: var(--border-width) solid var(--color-border);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-height: var(--header-height);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text);
  text-decoration: none;
  flex: 0 0 auto;
}
.brand__mark {
  width: var(--space-5);
  height: var(--space-5);
  flex: 0 0 auto;
}
.brand__mark .mark__frame  { fill: none; stroke: currentColor; stroke-width: 2.6; }
.brand__mark .mark__action { fill: none; stroke: var(--color-accent); stroke-width: 2.6; }
.brand__name {
  font-family: var(--font-heading);
  font-size: var(--step-1);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
}

.site-nav { margin-inline-start: auto; }

.nav__list {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav__link,
.nav__trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: var(--tap-target);
  padding: var(--space-2) var(--space-3);
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  font-family: var(--font-body);
  font-size: var(--step-0);
  font-weight: 500;
  color: var(--color-text);
  text-decoration: none;
  cursor: pointer;
}
.nav__link:hover,
.nav__trigger:hover { background-color: var(--color-bg-alt); }

.nav__link[aria-current="page"] {
  color: var(--color-accent);
  font-weight: 600;
  box-shadow: inset 0 -2px 0 0 var(--color-accent);
  border-radius: var(--radius) var(--radius) 0 0;
}

/* A dropdown trigger marks the section its children belong to. */
.nav__trigger[aria-current] { color: var(--color-accent); font-weight: 600; }

.nav__item { position: relative; }

.nav__trigger i { font-size: var(--step-0); transition: transform var(--duration-fast) var(--ease); }
.nav__trigger[aria-expanded="true"] i { transform: rotate(180deg); }

.nav__menu {
  position: absolute;
  top: calc(100% + var(--space-1));
  left: 0;
  min-width: 260px;
  margin: 0;
  padding: var(--space-2);
  list-style: none;
  background-color: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-raise);
}
.nav__menu[hidden] { display: none; }

.nav__menu-link {
  display: block;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius);
  color: var(--color-text);
  font-size: var(--step-0);
  font-weight: 500;
  text-decoration: none;
}
.nav__menu-link:hover { background-color: var(--color-bg-alt); }
.nav__menu-link[aria-current="page"] { color: var(--color-accent); font-weight: 600; }
.nav__menu-desc {
  display: block;
  font-size: var(--step--1);
  font-weight: 400;
  color: var(--color-text-muted);
}

.header-cta { margin-inline-start: var(--space-2); }

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: var(--tap-target);
  height: var(--tap-target);
  margin-inline-start: auto;
  background: transparent;
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius);
  color: var(--color-text);
  font-size: var(--step-1);
  cursor: pointer;
}

/* --- cards and panels --------------------------------------------------- */
.card {
  background-color: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-5);
  /* Bootstrap's .card sets colour from its own variable, which would keep dark
     body text inside an ink band. Restate it so cards follow the band tokens. */
  color: var(--color-text);
  box-shadow: var(--shadow-card);
}
.card h3 { margin-bottom: var(--space-2); }
.card p { color: var(--color-text-muted); }

.card__meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  font-family: var(--font-heading);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-5);
  height: var(--space-5);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius);
  color: var(--color-accent);
  font-size: var(--step-1);
}

/* --- ruled fact row (the band directly under the hero) ------------------ */
.fact-row {
  display: grid;
  gap: var(--space-4);
  margin: 0;
}
.fact {
  padding-inline-start: var(--space-4);
  border-inline-start: var(--border-width) solid var(--color-border);
}
.fact:first-child { padding-inline-start: 0; border-inline-start: 0; }
.fact__label {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--step-1);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-1);
}
.fact__text {
  margin: 0;
  font-size: var(--step-0);
  color: var(--color-text-muted);
}

/* --- numbered list (capabilities, principles) --------------------------- */
.number-list {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: num;
}
.number-list__item {
  counter-increment: num;
  border-top: var(--border-width) solid var(--color-border);
}
.number-list__item:last-child { border-bottom: var(--border-width) solid var(--color-border); }

.number-list__btn,
.number-list__static {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-4);
  align-items: start;
  width: 100%;
  padding: var(--space-4) var(--space-2);
  background: transparent;
  border: 0;
  text-align: start;
  font-family: var(--font-body);
  color: var(--color-text);
  text-decoration: none;
}
.number-list__btn { cursor: pointer; }
.number-list__btn:hover { background-color: var(--color-bg-alt); }

.number-list__item::before { content: none; }

.number-list__num {
  font-family: var(--font-heading);
  font-size: var(--step-1);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--color-text-muted);
  min-width: 2.2em;
}
.number-list__item.is-active .number-list__num { color: var(--color-accent); }
.number-list__item.is-active { box-shadow: inset 3px 0 0 0 var(--color-accent); }
.number-list__title {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--step-1);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.2;
}
.number-list__desc {
  display: block;
  margin-top: var(--space-1);
  color: var(--color-text-muted);
  font-size: var(--step-0);
}

/* Capability switcher: the numbered list drives one panel.
   With JS off every panel is visible and the page still reads in full. */
.tabs__panel { display: block; }
.js .tabs__panel { display: none; }
.js .tabs__panel.is-active { display: block; animation: panel-in var(--duration-base) var(--ease); }

@keyframes panel-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.number-list__btn[aria-selected="true"] .number-list__title { color: var(--color-accent); }
.number-list__btn[aria-selected="true"] .number-list__num { color: var(--color-accent); }
.number-list__item.is-active { background-color: var(--color-bg-alt); }

/* --- comparison table --------------------------------------------------- */
.compare {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--step-0);
}
.compare caption {
  caption-side: top;
  text-align: start;
  padding-bottom: var(--space-3);
  color: var(--color-text-muted);
  font-size: var(--step-0);
}
.compare th,
.compare td {
  padding: var(--space-3) var(--space-4);
  text-align: start;
  vertical-align: top;
  border-bottom: var(--border-width) solid var(--color-border);
}
.compare thead th {
  font-family: var(--font-heading);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  border-bottom-color: var(--color-text);
}
.compare tbody th {
  font-weight: 600;
  font-size: var(--step-0);
}
.compare td { color: var(--color-text-muted); }
.compare .is-accent { color: var(--color-text); font-weight: 500; }

/* Stacked labelled rows on small screens — see section 10. */

/* --- deployment flow (horizontal stepped sequence) ---------------------- */
.flow {
  display: grid;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: flow;
}
.flow__step {
  position: relative;
  padding: var(--space-4);
  background-color: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}
.flow__title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-2);
  font-family: var(--font-heading);
  font-size: var(--step-1);
  font-weight: 700;
  letter-spacing: -0.015em;
}
.flow__meta {
  margin: 0 0 var(--space-3);
  font-size: var(--step--1);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  font-weight: 600;
}
.flow__list {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--step-0);
  color: var(--color-text-muted);
}
.flow__list li {
  display: flex;
  gap: var(--space-2);
  padding-block: var(--space-1);
}
.flow__list i { color: var(--color-accent); font-size: var(--step-0); }

/* --- accordion (FAQ) ---------------------------------------------------- */
.faq-list {
  border-top: var(--border-width) solid var(--color-border);
}
.faq-list__item {
  border-bottom: var(--border-width) solid var(--color-border);
}
.faq-list__summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  min-height: var(--tap-target);
  cursor: pointer;
  list-style: none;
  font-family: var(--font-heading);
  font-size: var(--step-1);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.3;
}
.faq-list__summary::-webkit-details-marker { display: none; }
.faq-list__summary:hover { color: var(--color-accent); }
.faq-list__summary i {
  flex: 0 0 auto;
  margin-top: var(--space-1);
  font-size: var(--step-1);
  color: var(--color-accent);
  transition: transform var(--duration-base) var(--ease);
}
.faq-list__item[open] .faq-list__summary i { transform: rotate(45deg); }
.faq-list__body {
  padding-bottom: var(--space-4);
  max-width: var(--measure);
  color: var(--color-text-muted);
}

/* --- call to action band ------------------------------------------------ */
.cta-band {
  background-color: var(--color-accent);
  color: var(--color-accent-contrast);
  padding-block: var(--section-padding);
}
.cta-band h2 { color: var(--color-accent-contrast); }
.cta-band p { color: var(--color-accent-contrast); }
.cta-band__inner {
  display: grid;
  gap: var(--space-5);
  align-items: center;
}
.cta-band .btn--primary {
  background-color: var(--color-ink);
  color: var(--color-ink-text);
}
.cta-band .btn--primary:hover { background-color: var(--color-surface); color: var(--color-ink); }
.cta-band .btn--outline {
  border-color: rgba(255, 255, 255, 0.55);
  color: var(--color-accent-contrast);
}
.cta-band .btn--outline:hover { border-color: var(--color-accent-contrast); background-color: rgba(255, 255, 255, 0.12); }

/* --- footer ------------------------------------------------------------- */
.site-footer {
  background-color: var(--color-ink);
  color: var(--color-ink-text);
  padding-block-start: var(--section-padding);
  overflow: hidden;
}
.site-footer a { color: var(--color-ink-text-muted); text-decoration: none; }
.site-footer a:hover { color: var(--color-ink-text); text-decoration: underline; }

.footer__top {
  display: grid;
  gap: var(--space-6);
  padding-bottom: var(--space-6);
}
.footer__brand .brand { color: var(--color-ink-text); }
.footer__desc {
  margin: var(--space-3) 0 var(--space-2);
  max-width: 34ch;
  color: var(--color-ink-text-muted);
  font-size: var(--step-0);
}
.footer__domain {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--step-0);
  color: var(--color-ink-text);
}

.footer__cols {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.footer__col h2 {
  margin: 0 0 var(--space-3);
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-ink-text);
}
.footer__col ul { margin: 0; padding: 0; list-style: none; }
.footer__col li { margin-bottom: var(--space-2); }
.footer__col a { font-size: var(--step-0); }

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-5);
  align-items: center;
  justify-content: space-between;
  padding-block: var(--space-4);
  border-top: var(--border-width) solid var(--color-ink-border);
  font-size: var(--step--1);
  color: var(--color-ink-text-muted);
}
.footer__legal { display: flex; flex-wrap: wrap; gap: var(--space-4); margin: 0; padding: 0; list-style: none; }

/* --- page hero (interior pages) ---------------------------------------- */
.page-hero {
  padding-block: var(--section-padding);
  border-bottom: var(--border-width) solid var(--color-border);
}
.page-hero__inner { max-width: 62ch; }
.page-hero h1 { margin-bottom: var(--space-4); }
.page-hero__grid {
  display: grid;
  gap: var(--space-6);
  align-items: center;
}
.page-hero__media {
  position: relative;
  margin: 0;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background-color: var(--color-ink);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}
.page-hero__media::after {
  content: "";
  position: absolute;
  inset: var(--space-3);
  border-top: 2px solid var(--color-accent);
  border-right: 2px solid var(--color-accent);
  width: var(--space-6);
  height: var(--space-6);
  margin-inline-start: auto;
  pointer-events: none;
}
.page-hero__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.9) contrast(1.03);
}

/* --- hero (home) -------------------------------------------------------- */
/* Height is bounded so the hero never swallows the viewport on desktop. */
.hero { padding-block: var(--space-7) var(--section-padding); }
.hero__inner { display: grid; gap: var(--space-6); align-items: center; }
.hero h1 { margin-bottom: var(--space-4); }
.hero__lede {
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--color-text-muted);
  max-width: 52ch;
  margin-bottom: var(--space-5);
}
.hero__trust {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin: var(--space-5) 0 0;
  font-size: var(--step--1);
  color: var(--color-text-muted);
  max-width: 46ch;
}
.hero__trust i { color: var(--color-accent); font-size: var(--step-0); margin-top: 2px; }


/* --- scenario blocks (problem / response / result) --------------------- */
.scenario {
  border-top: var(--border-width) solid var(--color-border);
  padding-block: var(--space-5);
}
.scenario:last-of-type { border-bottom: var(--border-width) solid var(--color-border); }
.scenario__grid { display: grid; gap: var(--space-5); }
.scenario__label {
  font-family: var(--font-heading);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-2);
}
.scenario__block h4 { margin-bottom: var(--space-2); }
.scenario__block p { color: var(--color-text-muted); margin-bottom: 0; }

/* --- definition list (specs, demo facts) ------------------------------- */
.spec-list {
  margin: 0;
  border-top: var(--border-width) solid var(--color-border);
}
.spec-list__row {
  display: grid;
  gap: var(--space-1) var(--space-4);
  padding-block: var(--space-3);
  border-bottom: var(--border-width) solid var(--color-border);
}
.spec-list dt {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--step-0);
  letter-spacing: -0.01em;
}
.spec-list dd {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--step-0);
}

/* --- timeline / ordered steps (how it works) --------------------------- */
.steps { margin: 0; padding: 0; list-style: none; counter-reset: step; }
.steps__item {
  position: relative;
  padding-inline-start: var(--space-6);
  padding-bottom: var(--space-6);
  border-inline-start: var(--border-width) solid var(--color-border);
  margin-inline-start: var(--space-3);
}
.steps__item:last-child { border-inline-start-color: transparent; padding-bottom: 0; }
.steps__num {
  position: absolute;
  inset-inline-start: calc(var(--space-3) * -1 - 1px);
  top: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-6);
  height: var(--space-6);
  border-radius: var(--radius);
  background-color: var(--color-accent);
  color: var(--color-accent-contrast);
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: var(--step-0);
}
.steps__item h3 { margin-bottom: var(--space-2); }
.steps__item p { color: var(--color-text-muted); }

/* --- chips and status --------------------------------------------------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius);
  background-color: var(--color-surface);
  font-family: var(--font-heading);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.chip--accent { color: var(--color-accent); border-color: var(--color-accent); }
.chip__dot {
  width: var(--space-2);
  height: var(--space-2);
  border-radius: 50%;
  background-color: currentColor;
  flex: 0 0 auto;
}
.chip__dot--live { background-color: var(--color-signal-live); }
.chip__dot--warn { background-color: var(--color-signal-warn); }
.chip__dot--ok   { background-color: var(--color-signal-ok); }

/* --- callout ------------------------------------------------------------ */
.callout {
  border-inline-start: 3px solid var(--color-accent);
  padding: var(--space-2) 0 var(--space-2) var(--space-4);
  margin-block: var(--space-5);
}
.callout p:last-child { margin-bottom: 0; }
.callout__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--step-0);
  margin-bottom: var(--space-1);
}

/* --- pricing plans ------------------------------------------------------ */
.plans {
  display: grid;
  gap: var(--space-5);
  align-items: stretch;
}
.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  background-color: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-5);
  /* The badge strip is reserved on every card so the plan names and prices line
     up across the row whether or not a card carries a badge. */
  padding-top: var(--space-7);
  box-shadow: var(--shadow-card);
}
/* The recommended plan is marked by its border and a text badge — never by
   colour alone. */
.plan--featured {
  border: 2px solid var(--color-accent);
  box-shadow: var(--shadow-raise);
}
.plan__badge {
  position: absolute;
  top: var(--space-4);
  left: var(--space-5);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius);
  background-color: var(--color-accent);
  color: var(--color-accent-contrast);
  font-family: var(--font-heading);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.plan__name {
  margin: 0 0 var(--space-2);
  font-size: var(--step-2);
}
.plan__for {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--step-0);
  min-height: 3.4em;
}
.plan__price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: var(--space-4) 0 var(--space-1);
  padding-top: var(--space-4);
  border-top: var(--border-width) solid var(--color-border);
}
.plan__amount {
  font-family: var(--font-heading);
  font-size: var(--step-3);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1;
}
.plan__period {
  color: var(--color-text-muted);
  font-size: var(--step-0);
}
.plan__basis {
  margin: 0 0 var(--space-4);
  font-size: var(--step--1);
  color: var(--color-text-muted);
}
.plan__features {
  flex: 1 1 auto;
  margin: 0;
  padding: 0;
  list-style: none;
}
.plan__features li {
  display: flex;
  gap: var(--space-2);
  align-items: baseline;
  padding-block: var(--space-2);
  border-bottom: var(--border-width) solid var(--color-border);
  font-size: var(--step-0);
}
.plan__features li:last-child { border-bottom: 0; }
.plan__features i { color: var(--color-accent); flex: 0 0 auto; }
.plan__features .is-muted { color: var(--color-text-muted); }
.plan__features .is-muted i { color: var(--color-border); }
.plan__cta { margin-top: var(--space-5); }
.plan__cta .btn { width: 100%; }

.plans-note {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  align-items: baseline;
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: var(--border-width) solid var(--color-border);
  font-size: var(--step--1);
  color: var(--color-text-muted);
}
.plans-note p { margin: 0; max-width: 78ch; }

/* add-on rows */
.addon-list { margin: 0; padding: 0; list-style: none; }
.addon {
  display: grid;
  gap: var(--space-1) var(--space-5);
  padding-block: var(--space-4);
  border-bottom: var(--border-width) solid var(--color-border);
}
.addon:first-child { border-top: var(--border-width) solid var(--color-border); }
.addon__name {
  font-family: var(--font-heading);
  font-size: var(--step-1);
  font-weight: 700;
  letter-spacing: -0.015em;
  margin: 0 0 var(--space-1);
}
.addon__desc { margin: 0; color: var(--color-text-muted); font-size: var(--step-0); }
.addon__price {
  font-family: var(--font-heading);
  font-size: var(--step-1);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0;
  white-space: nowrap;
}
.addon__price span {
  display: block;
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 400;
  letter-spacing: 0;
  color: var(--color-text-muted);
}

/* --- role list ---------------------------------------------------------- */.role-list { margin: 0; padding: 0; list-style: none; }
.role {
  padding-block: var(--space-4);
  border-bottom: var(--border-width) solid var(--color-border);
}
.role:first-child { border-top: var(--border-width) solid var(--color-border); }
.role h3 { font-size: var(--step-1); margin-bottom: var(--space-2); }
.role p { color: var(--color-text-muted); margin-bottom: var(--space-2); }
.role__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* 06 =======================================================================
   PRODUCT MOCKUPS — built in HTML/CSS so they stay readable and updatable.
   Every one is a real interface fragment: real column headers, real field
   names, real status values. Illustrative data only.
   ========================================================================== */

.mock {
  background-color: var(--color-ink-surface);
  border: var(--border-width) solid var(--color-ink-border);
  border-radius: var(--radius);
  color: var(--color-ink-text);
  overflow: hidden;
  font-size: var(--step--1);
}
.mock__bar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  padding: var(--space-3);
  border-bottom: var(--border-width) solid var(--color-ink-border);
  background-color: var(--color-ink);
}
.mock__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--step-0);
  letter-spacing: -0.01em;
  margin: 0;
}
.mock__sub {
  margin: 0;
  color: var(--color-ink-text-muted);
  font-size: var(--step--1);
}
.mock__spacer { margin-inline-start: auto; }
.mock__body { padding: var(--space-3); }
.mock__section-title {
  margin: 0 0 var(--space-2);
  font-family: var(--font-heading);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--color-ink-text-muted);
}

/* live scene: a real camera frame with labelled vector detection overlays */
.scene { position: relative; background-color: rgba(13, 17, 19, 0.55); overflow: hidden; }
.scene__image {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  filter: saturate(0.88) contrast(1.04);
}
.scene svg { display: block; width: 100%; height: auto; }
.scene .scene__overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
/* Zone-map labels are SVG text sized in user units, so they scale down with the
   graphic and become unreadable on a phone. The panel beside the map carries the
   same information, so they are dropped rather than shrunk; the SVG's own
   aria-label still describes the whole scene for assistive technology. */
@media (max-width: 767px) {
  .scene__label { display: none; }
}
.scene__caption {
  position: absolute;
  inset-inline-start: var(--space-3);
  top: var(--space-3);
  padding: var(--space-1) var(--space-2);
  background-color: rgba(13, 17, 19, 0.82);
  border: var(--border-width) solid var(--color-ink-border);
  border-radius: var(--radius);
  font-family: var(--font-heading);
  font-size: var(--step--1);
  font-weight: 700;
  color: var(--color-ink-text);
}

/* environment photography echoes the compact industrial mosaic in the brief */
.operations-showcase {
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-7);
}
.operations-card {
  position: relative;
  min-height: 17rem;
  margin: 0;
  overflow: hidden;
  background-color: var(--color-ink);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius);
}
.operations-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(13, 17, 19, 0.04) 35%, rgba(13, 17, 19, 0.9) 100%);
  pointer-events: none;
}
.operations-card img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 17rem;
  object-fit: cover;
  transition: transform var(--duration-base) var(--ease);
}
.operations-card:hover img { transform: scale(1.025); }
.operations-card figcaption {
  position: absolute;
  z-index: 1;
  inset-inline: var(--space-4);
  bottom: var(--space-4);
  color: var(--color-ink-text);
}
.operations-card figcaption span {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--step-2);
  font-weight: 800;
  letter-spacing: -0.025em;
}
.operations-card figcaption small {
  display: block;
  margin-top: var(--space-1);
  color: var(--color-ink-text-muted);
  font-size: var(--step-0);
}

/* event log */
.log { margin: 0; padding: 0; list-style: none; }
.log__row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-1) var(--space-3);
  align-items: baseline;
  padding-block: var(--space-2);
  border-bottom: var(--border-width) solid var(--color-ink-border);
}
.log__row:last-child { border-bottom: 0; }
.log__time {
  font-variant-numeric: tabular-nums;
  color: var(--color-ink-text-muted);
  font-size: var(--step--1);
}
.log__what { font-weight: 600; color: var(--color-ink-text); }
.log__state {
  grid-column: 2;
  font-size: var(--step--1);
  color: var(--color-ink-text-muted);
}
.log__state i { color: var(--color-signal-ok); margin-inline-end: var(--space-1); }
.log__state--alert i { color: var(--color-signal-live); }
.log__state--warn i { color: var(--color-signal-warn); }

/* rule builder fragment */
.rule-grid {
  display: grid;
  gap: var(--space-4);
}
.rule-field { display: block; }
.rule-field__label {
  display: block;
  margin-bottom: var(--space-1);
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--color-ink-text-muted);
}
.rule-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2);
  background-color: var(--color-ink);
  border: var(--border-width) solid var(--color-ink-border);
  border-radius: var(--radius);
  font-size: var(--step--1);
  font-weight: 600;
}
.rule-chip--accent { border-color: var(--color-accent-tint); color: var(--color-accent-tint); }
.rule-chip select,
.rule-chip input {
  background: transparent;
  border: 0;
  color: inherit;
  font: inherit;
  padding: 0;
}
.rule-stack { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }

/* agent builder panel (light surface) */
.agent {
  background-color: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.agent__bar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  padding: var(--space-3) var(--space-4);
  border-bottom: var(--border-width) solid var(--color-border);
}
.agent__name {
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--step-1);
  font-weight: 700;
  letter-spacing: -0.015em;
}
.agent__purpose { margin: 0; color: var(--color-text-muted); font-size: var(--step--1); }
.agent__body { padding: var(--space-4); display: grid; gap: var(--space-4); }
.agent__cols { display: grid; gap: var(--space-4); }
.agent__col-title {
  margin: 0 0 var(--space-2);
  font-family: var(--font-heading);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.check-list { margin: 0; padding: 0; list-style: none; font-size: var(--step--1); }
.check-list li {
  display: flex;
  gap: var(--space-2);
  align-items: baseline;
  padding-block: var(--space-1);
}
.check-list i { color: var(--color-accent); }
.check-list--plain i { color: var(--color-text-muted); }
.check-list__note { color: var(--color-text-muted); display: block; }
.agent__box {
  padding: var(--space-3);
  background-color: var(--color-bg);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius);
  font-size: var(--step--1);
  line-height: 1.5;
}

/* event payload sample */
.payload {
  margin: 0;
  padding: var(--space-4);
  background-color: var(--color-ink);
  border: var(--border-width) solid var(--color-ink-border);
  border-radius: var(--radius);
  color: var(--color-ink-text);
  font-family: ui-monospace, "Cascadia Mono", "SFMono-Regular", Consolas, monospace;
  font-size: var(--step--1);
  line-height: 1.6;
  overflow-x: auto;
  white-space: pre;
}
.payload__key { color: var(--color-ink-text-muted); }
.payload__val { color: var(--color-accent-tint); }

/* 07 =======================================================================
   FORMS
   ========================================================================== */

.form { max-width: 640px; }
.form__grid { display: grid; gap: var(--space-4); }

.field { display: block; }
.field__label {
  display: block;
  margin-bottom: var(--space-1);
  font-weight: 600;
  font-size: var(--step-0);
}
.field__hint {
  display: block;
  margin-bottom: var(--space-2);
  font-size: var(--step--1);
  color: var(--color-text-muted);
}
.field__req { color: var(--color-accent); }

/* Checkbox rows: the label wraps the control so the whole line is the target. */
.field__label--check {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  font-weight: 500;
}
.field__label--check input {
  flex: 0 0 auto;
  width: var(--space-4);
  height: var(--space-4);
  margin-top: var(--space-1);
  accent-color: var(--color-accent);
}
.field__label--check input[aria-invalid="true"] {
  outline: 2px solid var(--color-signal-error);
  outline-offset: 2px;
}

.input,
.select,
.textarea {
  width: 100%;
  min-height: var(--tap-target);
  padding: var(--space-2) var(--space-3);
  background-color: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.4;
}
.textarea { min-height: calc(var(--tap-target) * 3); resize: vertical; }
.select { appearance: none; background-image: none; }

.input:hover,
.select:hover,
.textarea:hover { border-color: var(--color-text-muted); }

.input[aria-invalid="true"],
.select[aria-invalid="true"],
.textarea[aria-invalid="true"] {
  border-color: var(--color-signal-error);
  border-width: 2px;
}

.field__error {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--color-signal-error);
}
.field__error:empty { display: none; }
.field__error i { margin-inline-end: var(--space-1); }

.form__foot {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
  margin-top: var(--space-5);
}
.form__note { font-size: var(--step--1); color: var(--color-text-muted); margin: 0; }

/* success / status region */
.form-status {
  border: var(--border-width) solid var(--color-border);
  border-inline-start: 3px solid var(--color-signal-ok);
  border-radius: var(--radius);
  background-color: var(--color-surface);
  padding: var(--space-5);
  box-shadow: var(--shadow-card);
}
.form-status__title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-3);
  font-family: var(--font-heading);
  font-size: var(--step-1);
  font-weight: 700;
  letter-spacing: -0.015em;
}
.form-status__title i { color: var(--color-signal-ok); }
.form-status p { color: var(--color-text-muted); }
.form-status__meta {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: var(--border-width) solid var(--color-border);
  font-size: var(--step--1);
  color: var(--color-text-muted);
}

/* 08 =======================================================================
   UTILITIES

   Bootstrap ships a utility layer (.text-muted, .mt-*, .mb-*) that carries
   !important. Where a name is shared, these restatements also carry !important
   so the design tokens above stay authoritative instead of Bootstrap's default
   spacing and grey winning by cascade order.
   ========================================================================== */

.stack-sm > * + * { margin-top: var(--space-3); }
.stack > * + *    { margin-top: var(--space-5); }
.stack-lg > * + * { margin-top: var(--space-7); }

.flow-text > * + * { margin-top: var(--space-1); }

.text-muted { color: var(--color-text-muted) !important; }
.text-small { font-size: var(--step--1); }
.text-center { text-align: center !important; }
.measure { max-width: var(--measure); }
.measure-tight { max-width: 48ch; }

.mt-0 { margin-top: 0 !important; }
.mt-3 { margin-top: var(--space-3) !important; }
.mt-4 { margin-top: var(--space-4) !important; }
.mt-5 { margin-top: var(--space-5) !important; }
.mt-6 { margin-top: var(--space-6) !important; }
.mb-0 { margin-bottom: 0 !important; }
.mb-4 { margin-bottom: var(--space-4) !important; }
.mb-5 { margin-bottom: var(--space-5) !important; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Bounded horizontal scroll for wide content on small screens. */
.scroll-x {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius);
}
.scroll-x > * { min-width: 620px; }
.scroll-x--flush { border: 0; border-radius: 0; }

/* 09 =======================================================================
   MOTION — one scroll-reveal treatment, applied consistently. Content is
   visible by default; only a JS-enabled document hides it first.
   ========================================================================== */

.js .reveal {
  opacity: 0;
  transform: translateY(var(--reveal-shift));
  transition: opacity var(--duration-slow) var(--ease),
              transform var(--duration-slow) var(--ease);
}
.js .reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .js .reveal { opacity: 1; transform: none; }
}

/* 10 =======================================================================
   RESPONSIVE — reflow, do not shrink. Breakpoints: 575, 767, 991, 1199.
   ========================================================================== */

/* --- >= 576px ----------------------------------------------------------- */
@media (min-width: 576px) {
  .container-x { padding-inline: var(--space-5); }
  .fact-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .scenario__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .agent__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form__grid--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- >= 768px ----------------------------------------------------------- */
@media (min-width: 768px) {
  .section-head--split { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
  .cta-band__inner { grid-template-columns: minmax(0, 1.6fr) auto; }
  .spec-list__row { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
  .rule-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .agent__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .addon { grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; }
  .footer__top { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
  .footer__cols { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .form__grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .operations-showcase { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .operations-card { grid-column: span 5; min-height: 20rem; }
  .operations-card:nth-child(4n + 1),
  .operations-card:nth-child(4n + 4) { grid-column: span 7; }
  .operations-card img { min-height: 20rem; }
}

/* --- >= 992px ----------------------------------------------------------- */
@media (min-width: 992px) {
  .fact-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .flow { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .scenario__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .split { display: grid; gap: var(--space-7); align-items: center; }
  .split--text-visual { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
  .split--visual-text { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
  .split--even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split--sidebar { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); align-items: start; }
  .sticky-side { position: sticky; top: calc(var(--header-height) + var(--space-5)); }
  .hero { padding-block: var(--space-8) var(--space-8); }
  .hero__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); gap: var(--space-7); }
  .page-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(22rem, 0.9fr); gap: var(--space-7); }
  /* Three plans sit side by side only once each card has room for a price line
     and a feature list without wrapping badly. */
  .plans { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .plan__for { min-height: 3.4em; }
  /* Holds the feature lists on a shared baseline across the three cards. */
  .plan__basis { min-height: calc(var(--space-6) + var(--space-3)); }
}

/* --- < 992px: collapse the desktop navigation into a real drawer -------- */
@media (max-width: 991px) {
  .nav-toggle { display: inline-flex; }

  /* Visibility flips instantly when opening and only after the slide when
     closing, so a focus() call made in the same tick actually lands. */
  .site-nav {
    position: fixed;
    inset: var(--header-height) 0 0 0;
    z-index: 99;
    margin: 0;
    padding: var(--space-4) var(--space-4) var(--space-8);
    background-color: var(--color-bg);
    border-top: var(--border-width) solid var(--color-border);
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform var(--duration-base) var(--ease),
                visibility 0s linear var(--duration-base);
  }
  .site-nav.is-open {
    transform: none;
    visibility: visible;
    transition: transform var(--duration-base) var(--ease), visibility 0s linear 0s;
  }

  .nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .nav__item { border-bottom: var(--border-width) solid var(--color-border); }

  .nav__link,
  .nav__trigger {
    width: 100%;
    justify-content: space-between;
    padding: var(--space-3) var(--space-1);
    font-family: var(--font-heading);
    font-size: var(--step-1);
    font-weight: 700;
    letter-spacing: -0.015em;
    border-radius: 0;
  }
  .nav__link:hover,
  .nav__trigger:hover { background-color: transparent; color: var(--color-accent); }

  .nav__link[aria-current="page"] {
    box-shadow: none;
    color: var(--color-accent);
    border-radius: 0;
  }

  .nav__menu {
    position: static;
    min-width: 0;
    padding: 0 0 var(--space-3) 0;
    border: 0;
    box-shadow: none;
    background-color: transparent;
  }
  .nav__menu-link { padding: var(--space-2) var(--space-3); font-size: var(--step-0); }
  .nav__menu-link:hover { background-color: var(--color-bg-alt); }

  .header-cta { display: none; }
  .nav__cta {
    display: flex;
    width: 100%;
    margin-top: var(--space-5);
  }
}

@media (min-width: 992px) {
  .nav__cta { display: none; }
  .nav-toggle { display: none; }
}

/* --- < 768px: reduce type steps and section padding, stack everything --- */
@media (max-width: 767px) {
  :root { --section-padding: var(--space-7); }

  .footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fact-row { gap: var(--space-3); }
  .fact { padding-inline-start: var(--space-3); }

  /* Comparison table becomes labelled stacked rows, not a shrunken table. */
  .compare thead { display: none; }
  .compare,
  .compare tbody,
  .compare tr,
  .compare th,
  .compare td { display: block; width: 100%; }
  /* A caption left as display:table-caption outside a real table gets wrapped in
     an anonymous shrink-to-fit box and wraps into a narrow column. */
  .compare caption { display: block; }
  .compare tr {
    padding-block: var(--space-4);
    border-bottom: var(--border-width) solid var(--color-border);
  }
  .compare tbody th {
    padding: 0 0 var(--space-2);
    border: 0;
    font-family: var(--font-heading);
    font-size: var(--step-1);
  }
  .compare td {
    border: 0;
    padding: 0 0 var(--space-1);
    display: grid;
    grid-template-columns: minmax(0, 9rem) minmax(0, 1fr);
    gap: var(--space-3);
  }
  .compare td::before {
    content: attr(data-label);
    font-family: var(--font-heading);
    font-size: var(--step--1);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-muted);
  }

  .scene__label { display: none; }
}
/* --- < 576px: the tightest layout, targets 360px ----------------------- */
@media (max-width: 575px) {
  :root { --section-padding: var(--space-6); }

  /* 24px, not 16px: a Bootstrap row carries a negative inline margin of half
     its gutter, so the container padding must be at least as large or the row
     pushes past the page edge. */
  .container-x { padding-inline: var(--space-4); }
  .card { padding: var(--space-4); }
  .btn-row .btn { width: 100%; }
  .footer__cols { grid-template-columns: minmax(0, 1fr); }
  .number-list__btn,
  .number-list__static { gap: var(--space-3); padding-inline: 0; }
  .steps__item { padding-inline-start: var(--space-5); }
  .mock__bar { padding: var(--space-2); }
}

/* --- print -------------------------------------------------------------- */
@media print {
  .site-header, .nav-toggle, .cta-band, .site-footer { display: none; }
  body { background: var(--color-surface); color: var(--color-ink); }
  .band { padding-block: var(--space-4); }
}