/* ==========================================================================
   Qwinny for Brands
   --------------------------------------------------------------------------
   Standalone stylesheet — this page shares no CSS with the consumer landing
   page. The consumer site is deliberately bright and playful; an enterprise
   buyer needs the opposite: restraint, density, hierarchy and quiet motion.

   Light theme, two colours. Deep navy #102A4C is the ink and the primary
   action; teal #0F9F89 is the accent and is rationed — it marks one thing at
   a time (the active state, the live datum, a single icon) rather than
   colouring everything at once. Structure comes from hairlines and white
   space, not from saturated fills.

   1.  Tokens
   2.  Reset & base
   3.  Layout primitives
   4.  Typography & section headers
   5.  Buttons & links
   6.  Reveal motion
   7.  Masthead
   8.  Hero & console
   9.  Trust bar
   10. Ledger (the problem)
   11. Figures (the scale)
   12. Chain (the insight)
   13. Pillars (solution / consumer value)
   14. Process (how it works)
   15. Matrix (intelligence / security)
   16. Spec lists, callouts, ticks
   17. Balance (privacy)
   18. Outcomes (brand value)
   19. Sectors (industries)
   20. Scope (pilot)
   21. FAQ
   22. Reading (insights)
   23. Creed (about)
   24. Close (contact + form)
   25. Footer
   26. Reduced motion
   ========================================================================== */

/* ==========================================================================
   1. Tokens
   ========================================================================== */

:root {
  color-scheme: light;

  /* --- Brand ------------------------------------------------------------
     Two colours carry the page: a deep navy that does the heavy lifting
     (ink, primary action, logo) and a teal that is rationed as the accent.
     Nothing else is allowed to compete with them. */
  --brand: #102a4c;
  --brand-hover: #1b3c67;
  --brand-ink: #ffffff;

  /* Surfaces — a cool paper ramp, tinted toward the navy rather than grey. */
  --bg: #ffffff;
  --bg-raised: #eff4f8;
  --bg-tint: #f6f9fb;
  --bg-card: #ffffff;
  --bg-inset: #f4f8fa;

  /* Hairlines carry most of the structure on this page. Navy-tinted, never
     pure black — black rules look like dirt on a white page. */
  --hair: rgba(16, 42, 76, 0.1);
  --hair-mid: rgba(16, 42, 76, 0.16);
  --hair-strong: rgba(16, 42, 76, 0.28);

  /* Type — a four-step navy ink ramp. Every step clears AA on white, so the
     hierarchy is carried by weight and size, not by fading text out. */
  --fg: #102a4c;
  --fg-2: #3d5169;
  --fg-3: #566b85;
  --fg-4: #647891;

  /* Accent, used sparingly.
     --accent is the brand teal and marks graphical things (icons, rules,
     the chart line). --accent-deep is the same hue darkened for text, where
     the brand teal alone would not clear AA at small sizes. */
  --accent: #0f9f89;
  --accent-deep: #0a7f6d;
  --accent-ink: #ffffff;
  --accent-wash: rgba(15, 159, 137, 0.08);
  --accent-line: rgba(15, 159, 137, 0.35);

  /* Status — darkened for legibility on paper. */
  --ok: #0e7a4b;
  --watch: #2563c9;
  --warn: #9a6206;
  --risk: #c92a35;

  /* Elevation. On a light page a card cannot rely on being lighter than the
     band behind it, so it lifts with a shadow instead. */
  --lift-sm: 0 1px 2px rgba(16, 42, 76, 0.04), 0 2px 8px -4px rgba(16, 42, 76, 0.08);
  --lift-md: 0 1px 2px rgba(16, 42, 76, 0.05), 0 12px 32px -16px rgba(16, 42, 76, 0.16);

  --shell: 76rem;
  --pad: 1.5rem;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 12px;
}

@media (min-width: 768px) {
  :root {
    --pad: 2.5rem;
  }
}

@media (min-width: 1200px) {
  :root {
    --pad: 3rem;
  }
}

/* ==========================================================================
   2. Reset & base
   ========================================================================== */

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

html {
  background: var(--bg);
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  /* The sticky masthead must not cover the section a hash link lands on. */
  scroll-padding-top: 5.5rem;
}

body {
  background: var(--bg);
  color: var(--fg);
  font-family: 'Inter var', Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto,
    sans-serif;
  font-size: 16px;
  line-height: 1.6;
  font-feature-settings: 'cv02', 'cv03', 'cv04', 'ss01';
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

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

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

ul,
ol {
  list-style: none;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: 0;
  cursor: pointer;
}

::selection {
  background: rgba(15, 159, 137, 0.18);
  color: var(--fg);
}

:focus-visible {
  outline: 2px solid var(--accent-deep);
  outline-offset: 3px;
  border-radius: 2px;
}

::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-track {
  background: var(--bg);
}
::-webkit-scrollbar-thumb {
  background: #c3cfdc;
  border: 2px solid var(--bg);
  border-radius: 99px;
}
::-webkit-scrollbar-thumb:hover {
  background: #a6b6c8;
}

.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.icon {
  display: block;
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

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

.skip-link {
  position: absolute;
  top: -100px;
  left: 1rem;
  z-index: 200;
  border-radius: var(--r-md);
  background: var(--brand);
  color: var(--brand-ink);
  padding: 0.75rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 600;
  transition: top 0.2s ease;
}
.skip-link:focus {
  top: 1rem;
}

/* ==========================================================================
   3. Layout primitives
   ========================================================================== */

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--pad);
}

/* Bands are separated by a hairline, not by colour alone — it keeps the page
   feeling like a document rather than a stack of cards. */
.band {
  position: relative;
  padding-block: 5rem;
  border-top: 1px solid var(--hair);
}
.band--tint {
  background: var(--bg-tint);
}
.band--close {
  background: var(--bg-raised);
}

@media (min-width: 768px) {
  .band {
    padding-block: 7rem;
  }
}

.band__cta {
  display: flex;
  justify-content: center;
  margin-top: 3rem;
}

/* Lead column + detail column. */
.split {
  display: grid;
  gap: 3rem;
}

@media (min-width: 960px) {
  .split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 4.5rem;
    align-items: start;
  }
}

.split__note {
  margin-top: 1.5rem;
  font-size: 1rem;
  color: var(--fg-2);
}

/* ==========================================================================
   4. Typography & section headers
   ========================================================================== */

.overline {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--fg-3);
}

.sec-head {
  max-width: 48rem;
  margin-bottom: 3.5rem;
}
.sec-head--center {
  margin-inline: auto;
  text-align: center;
}

/* Numbered eyebrow: the index sets the page's editorial rhythm. */
.sec-head__index {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--fg-3);
}
.sec-head--center .sec-head__index {
  justify-content: center;
}
.sec-head__index span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.875rem;
  height: 1.5rem;
  border: 1px solid var(--accent-line);
  border-radius: var(--r-sm);
  background: var(--accent-wash);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  color: var(--accent-deep);
  font-variant-numeric: tabular-nums;
}

.sec-head__title {
  margin-top: 1.25rem;
  font-size: 2rem;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.03em;
  color: var(--fg);
  text-wrap: balance;
}
.sec-head__title--lg {
  max-width: 42rem;
  margin-inline: auto;
}

.sec-head__lede {
  margin-top: 1.125rem;
  max-width: 40rem;
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--fg-2);
}
.sec-head--center .sec-head__lede {
  margin-inline: auto;
}

/* A short accent rule closes every section header. It gives the block a
   bottom edge, so a headline reads as a titled unit rather than a sentence
   floating above a grid. */
.sec-head::after {
  content: '';
  display: block;
  width: 3.5rem;
  height: 3px;
  margin-top: 2rem;
  border-radius: 99px;
  background: var(--accent);
}
.sec-head--center::after {
  margin-inline: auto;
}

/* --------------------------------------------------------------------------
   Headline emphasis
   --------------------------------------------------------------------------
   Two marks, and a headline gets at most one of them: ink the phrase, or run
   a rule under it. Emphasis only works while it stays scarce — if every
   headline shouted, none of them would.
   ------------------------------------------------------------------------ */

/* Ink: the phrase that carries the argument, in brand teal. Deep enough to
   clear AA at body sizes too, since .hl is also used mid-sentence. */
.hl {
  color: var(--accent-deep);
}

/* Wash: a highlighter behind the lower half of the phrase. Reserved for the
   one or two places that need to shout louder than ink. */
.hl-mark {
  padding-inline: 0.12em;
  margin-inline: -0.12em;
  border-radius: 3px;
  background-image: linear-gradient(to top, var(--accent-wash) 0 38%, transparent 38%);
}

@media (min-width: 768px) {
  .sec-head__title {
    font-size: 2.75rem;
  }
  .sec-head__title--lg {
    font-size: 2.5rem;
  }
}

/* Centred editorial paragraphs. */
.prose {
  max-width: 42rem;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  text-align: center;
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--fg-2);
}

/* Closing line of a section — a rule, then the sentence. */
.statement {
  position: relative;
  margin-top: 3.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--hair);
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.015em;
  color: var(--fg);
  text-wrap: balance;
}
.statement--center {
  text-align: center;
}
.statement--tight {
  margin-top: 2.5rem;
}

@media (min-width: 768px) {
  .statement {
    font-size: 1.5rem;
  }
}

.accent-underline {
  position: relative;
  white-space: nowrap;
}
/* The hero's one mark. Thicker than a hairline and tapered away at the tail,
   so it reads as a drawn stroke rather than a border. */
.accent-underline::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.06em;
  height: 6px;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent) 58%, var(--accent-line) 100%);
}

.footnote {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--hair);
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--fg-3);
}

.sources {
  margin-top: 2.5rem;
  font-size: 0.8125rem;
  line-height: 1.7;
  color: var(--fg-3);
  text-align: center;
}
.sources__label {
  display: inline-block;
  margin-right: 0.5rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.6875rem;
  color: var(--fg-4);
}
.sources cite {
  font-style: italic;
}

/* ==========================================================================
   5. Buttons & links
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: var(--r-md);
  padding: 0.875rem 1.375rem;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  white-space: nowrap;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease,
    transform 0.18s var(--ease);
}
.btn .icon {
  width: 1rem;
  height: 1rem;
  transition: transform 0.18s var(--ease);
}
.btn:active {
  transform: translateY(1px);
}

/* The navy — not the teal — is the action colour. White on the brand teal
   does not clear AA, and reserving the teal for accents keeps exactly one
   thing shouting per screen. */
.btn--primary {
  background: var(--brand);
  color: var(--brand-ink);
  box-shadow: var(--lift-sm);
}
.btn--primary:hover {
  background: var(--brand-hover);
}
.btn--primary:hover .icon {
  transform: translateX(2px);
}

.btn--ghost {
  border: 1px solid var(--hair-mid);
  color: var(--fg);
  background: var(--bg);
}
.btn--ghost:hover {
  border-color: var(--hair-strong);
  background: rgba(16, 42, 76, 0.04);
}

.btn--sm {
  padding: 0.625rem 1rem;
  font-size: 0.875rem;
}
.btn--block {
  width: 100%;
}

.textlink {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding-bottom: 0.25rem;
  border-bottom: 1px solid var(--accent-line);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--accent-deep);
  transition: gap 0.18s var(--ease), border-color 0.18s ease;
}
.textlink:hover {
  gap: 0.75rem;
  border-bottom-color: var(--accent-deep);
}
.textlink .icon {
  width: 0.9375rem;
  height: 0.9375rem;
}
.textlink--sm {
  font-size: 0.8125rem;
}

/* ==========================================================================
   6. Reveal motion
   --------------------------------------------------------------------------
   Deliberately minimal: an 8px rise and a fade. Nothing floats, pulses or
   bounces — motion on this page should read as competence, not personality.
   ========================================================================== */

.js .reveal {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.55s var(--ease), transform 0.55s var(--ease);
  transition-delay: calc(var(--d, 0) * 60ms);
}
.js .reveal.is-in {
  opacity: 1;
  transform: none;
}

/* ==========================================================================
   7. Masthead
   ========================================================================== */

.masthead {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}
.masthead.is-stuck {
  border-bottom-color: var(--hair);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 1px 16px -8px rgba(16, 42, 76, 0.28);
}

.masthead__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  height: 4.5rem;
}

.brandmark {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
}
.brandmark img {
  height: 1.5rem;
  width: auto;
}
.brandmark__rule {
  width: 1px;
  height: 1.125rem;
  background: var(--hair-strong);
}
.brandmark__unit {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--fg-2);
  white-space: nowrap;
}

.masthead__nav {
  display: none;
  align-items: center;
  gap: 0.25rem;
}
.masthead__nav a {
  position: relative;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--fg-2);
  transition: color 0.18s ease;
}
.masthead__nav a::after {
  content: '';
  position: absolute;
  left: 0.75rem;
  right: 0.75rem;
  bottom: 0.125rem;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.22s var(--ease);
}
.masthead__nav a:hover {
  color: var(--fg);
}
.masthead__nav a:hover::after {
  transform: scaleX(1);
}

.masthead__actions {
  display: none;
}

.masthead__toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 2.5rem;
  height: 2.5rem;
  align-items: center;
  border: 1px solid var(--hair-mid);
  border-radius: var(--r-md);
}
.masthead__toggle span {
  display: block;
  width: 1rem;
  height: 1.5px;
  background: var(--fg);
  transition: transform 0.25s var(--ease), opacity 0.2s ease;
}
.masthead__toggle[aria-expanded='true'] span:first-child {
  transform: translateY(3.25px) rotate(45deg);
}
.masthead__toggle[aria-expanded='true'] span:last-child {
  transform: translateY(-3.25px) rotate(-45deg);
}

.mobile-nav {
  border-top: 1px solid var(--hair);
  background: var(--bg-raised);
  padding-block: 1rem;
}
.mobile-nav .shell {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}
.mobile-nav a {
  padding: 0.75rem 0;
  font-size: 1rem;
  font-weight: 500;
  color: var(--fg-2);
  border-bottom: 1px solid var(--hair);
}
.mobile-nav a:last-child {
  border-bottom: 0;
  margin-top: 0.75rem;
  color: var(--accent-ink);
}

@media (min-width: 1024px) {
  .masthead__nav,
  .masthead__actions {
    display: flex;
  }
  .masthead__toggle,
  .mobile-nav {
    display: none;
  }
}

/* ==========================================================================
   8. Hero & console
   ========================================================================== */

.hero {
  position: relative;
  overflow: hidden;
  padding-block: 4.5rem 5rem;
}

@media (min-width: 768px) {
  .hero {
    padding-block: 6.5rem 7rem;
  }
}

/* A faint engineering grid with a single cool wash — no particles, no blobs. */
.hero__field {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(rgba(16, 42, 76, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(16, 42, 76, 0.055) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: radial-gradient(ellipse 80% 55% at 50% 0%, #000 20%, transparent 78%);
  mask-image: radial-gradient(ellipse 80% 55% at 50% 0%, #000 20%, transparent 78%);
}
.hero__field::after {
  content: '';
  position: absolute;
  left: 50%;
  top: -18rem;
  width: 46rem;
  height: 34rem;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(15, 159, 137, 0.1), transparent);
}

.hero__inner {
  position: relative;
  display: grid;
  gap: 3.5rem;
  align-items: center;
}

@media (min-width: 1024px) {
  .hero__inner {
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
    gap: 4rem;
  }
}

.hero__title {
  margin-top: 1.5rem;
  font-size: 2.5rem;
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.035em;
  color: var(--fg);
}

@media (min-width: 768px) {
  .hero__title {
    font-size: 3.75rem;
  }
}

.hero__lede {
  margin-top: 1.5rem;
  max-width: 34rem;
  font-size: 1.125rem;
  line-height: 1.7;
  color: var(--fg-2);
}

.hero__pillars {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin-top: 1.75rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--hair);
}
.hero__pillars li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--fg-2);
}
.hero__pillars .icon {
  width: 1rem;
  height: 1rem;
  color: var(--accent);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2rem;
}

.hero__foot {
  margin-top: 1.75rem;
  font-size: 0.8125rem;
  color: var(--fg-3);
}

/* --- Console ------------------------------------------------------------- */

.console {
  border: 1px solid var(--hair-mid);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, var(--bg-card) 0%, var(--bg-inset) 100%);
  box-shadow: 0 24px 64px -28px rgba(16, 42, 76, 0.32), 0 2px 6px rgba(16, 42, 76, 0.05);
  overflow: hidden;
}

.console__chrome {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--hair);
  background: var(--bg-inset);
}
.console__dots {
  display: flex;
  gap: 0.3125rem;
}
.console__dots i {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 99px;
  background: #cdd8e4;
}
.console__path {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.6875rem;
  letter-spacing: 0.02em;
  color: var(--fg-3);
}
.console__live {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--fg-2);
}
.pulse {
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 99px;
  background: var(--ok);
  box-shadow: 0 0 0 0 rgba(14, 122, 75, 0.45);
  animation: pulse 2.4s ease-out infinite;
}

.console__tabs {
  display: flex;
  gap: 1.25rem;
  padding: 0 1rem;
  border-bottom: 1px solid var(--hair);
  font-size: 0.75rem;
  color: var(--fg-3);
}
.console__tabs span {
  padding: 0.75rem 0;
  border-bottom: 1px solid transparent;
}
.console__tabs .is-active {
  color: var(--fg);
  border-bottom-color: var(--accent);
}

.console__kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.kpi {
  padding: 1rem;
  border-right: 1px solid var(--hair);
  border-bottom: 1px solid var(--hair);
}
.kpi:last-child {
  border-right: 0;
}
.kpi__label {
  display: block;
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--fg-4);
}
.kpi__value {
  display: block;
  margin-top: 0.375rem;
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--fg);
}
.kpi__delta {
  display: block;
  margin-top: 0.125rem;
  font-size: 0.6875rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--fg-4);
}
.kpi__delta--up {
  color: var(--ok);
}
.kpi__delta--warn {
  color: var(--warn);
}

.console__chart {
  padding: 1rem 1rem 0.5rem;
  border-bottom: 1px solid var(--hair);
}
.console__chart-label {
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--fg-4);
}
.console__chart svg {
  display: block;
  width: 100%;
  height: 5.5rem;
  margin-top: 0.75rem;
  overflow: visible;
}
.console__chart .grid {
  stroke: rgba(16, 42, 76, 0.09);
  stroke-width: 1;
}
.console__chart .area {
  fill: url(#areaFill);
}
.console__chart .line {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.75;
  stroke-linejoin: round;
  stroke-linecap: round;
  /* Drawn in on load — the one flourish on the page. */
  stroke-dasharray: 640;
  stroke-dashoffset: 640;
  animation: draw 1.6s var(--ease) 0.35s forwards;
}
.console__chart .dot {
  fill: var(--accent);
  opacity: 0;
  animation: fade-in 0.4s ease 1.7s forwards;
}

.console__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.75rem;
}
.console__table th {
  padding: 0.625rem 1rem;
  text-align: left;
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--fg-4);
  border-bottom: 1px solid var(--hair);
}
.console__table td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--hair);
  color: var(--fg-2);
  vertical-align: middle;
}
.console__table tr:last-child td {
  border-bottom: 0;
}
.console__table tr.is-flagged {
  background: rgba(201, 42, 53, 0.045);
}
.cell-main {
  display: block;
  font-weight: 500;
  color: var(--fg);
}
.cell-sub {
  display: block;
  margin-top: 0.125rem;
  font-size: 0.6875rem;
  color: var(--fg-4);
}

.pill {
  display: inline-block;
  border-radius: var(--r-sm);
  padding: 0.125rem 0.4375rem;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  border: 1px solid;
}
.pill--ok {
  color: var(--ok);
  border-color: rgba(14, 122, 75, 0.3);
  background: rgba(14, 122, 75, 0.08);
}
.pill--risk {
  color: var(--risk);
  border-color: rgba(201, 42, 53, 0.3);
  background: rgba(201, 42, 53, 0.07);
}
.pill--watch {
  color: var(--watch);
  border-color: rgba(37, 99, 201, 0.28);
  background: rgba(37, 99, 201, 0.07);
}

/* ==========================================================================
   9. Trust bar
   ========================================================================== */

.trustbar {
  border-top: 1px solid var(--hair);
  background: var(--bg-raised);
  padding-block: 2rem;
}
.trustbar__inner {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  align-items: center;
  text-align: center;
}
.trustbar__label {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--fg-4);
}
.trustbar__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem 2.25rem;
}
.trustbar__list li {
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--fg-3);
}

/* ==========================================================================
   10. Ledger (the problem)
   ========================================================================== */

.ledger {
  border-top: 1px solid var(--hair);
}
.ledger__row {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  padding: 1.375rem 0.75rem 1.375rem 0;
  border-bottom: 1px solid var(--hair);
  transition: background 0.2s ease, padding-left 0.25s var(--ease);
}
.ledger__row:hover {
  background: rgba(16, 42, 76, 0.035);
  padding-left: 0.75rem;
}
.ledger__num {
  font-size: 0.75rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--fg-4);
}
.ledger__text {
  font-size: 1.0625rem;
  font-weight: 450;
  color: var(--fg);
}
.ledger__icon {
  width: 1.125rem;
  height: 1.125rem;
  color: var(--fg-4);
  transition: color 0.2s ease;
}
.ledger__row:hover .ledger__icon {
  color: var(--accent);
}

@media (min-width: 768px) {
  .ledger__text {
    font-size: 1.25rem;
  }
}

/* ==========================================================================
   11. Figures (the scale)
   ========================================================================== */

.figures {
  display: grid;
  border-top: 1px solid var(--hair);
}

@media (min-width: 768px) {
  .figures {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.figure {
  padding: 2.5rem 0 2rem;
  border-bottom: 1px solid var(--hair);
}

@media (min-width: 768px) {
  .figure {
    padding: 2.75rem 2rem;
    border-bottom: 0;
    border-right: 1px solid var(--hair);
  }
  .figure:first-child {
    padding-left: 0;
  }
  .figure:last-child {
    padding-right: 0;
    border-right: 0;
  }
}

.figure__value {
  font-size: 3rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  color: var(--fg);
}
.figure__value span:first-child {
  color: var(--accent);
}
.figure__body {
  margin-top: 1.25rem;
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--fg-2);
}
.figure__src {
  margin-top: 1rem;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--fg-4);
}

@media (min-width: 768px) {
  .figure__value {
    font-size: 3.5rem;
  }
}

/* ==========================================================================
   12. Chain (the insight)
   ========================================================================== */

.chain {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  margin-top: 3rem;
}

.chain__node {
  display: flex;
  align-items: center;
  gap: 1rem;
  border: 1px solid var(--hair);
  border-radius: var(--r-md);
  background: var(--bg-card);
  padding: 1.125rem 1.25rem;
  box-shadow: var(--lift-sm);
}
.chain__node--end {
  border-color: var(--accent-line);
}
.chain__mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  flex-shrink: 0;
  border: 1px solid var(--hair-mid);
  border-radius: var(--r-sm);
  color: var(--fg-2);
}
.chain__node--end .chain__mark {
  border-color: var(--accent-line);
  color: var(--accent);
}
.chain__mark .icon {
  width: 1.125rem;
  height: 1.125rem;
}
.chain__label {
  font-size: 1rem;
  font-weight: 600;
  color: var(--fg);
}
.chain__note {
  margin-left: auto;
  font-size: 0.75rem;
  color: var(--fg-4);
}

.chain__link {
  position: relative;
  height: 2rem;
  margin-left: 2.375rem;
  border-left: 1px solid var(--hair-mid);
}
/* The gap between market and consumer is the whole argument — draw it dashed. */
.chain__link--gap {
  border-left-style: dashed;
  border-left-color: var(--hair-strong);
  height: 2.75rem;
}
.chain__link--gap span {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--fg-4);
  white-space: nowrap;
}

@media (min-width: 900px) {
  .chain {
    flex-direction: row;
    align-items: center;
  }
  .chain__node {
    flex: 1;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1.5rem;
  }
  .chain__note {
    margin-left: 0;
  }
  .chain__link {
    width: 3rem;
    height: 0;
    margin-left: 0;
    border-left: 0;
    border-top: 1px solid var(--hair-mid);
  }
  .chain__link--gap {
    border-top-style: dashed;
    border-top-color: var(--hair-strong);
  }
  .chain__link--gap span {
    left: 50%;
    top: -1.5rem;
    transform: translateX(-50%);
  }
}

/* ==========================================================================
   13. Pillars (solution / consumer value)
   ========================================================================== */

.quad {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--hair);
}

@media (min-width: 640px) {
  .quad {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .quad {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.pillar {
  padding: 2.25rem 0;
  border-bottom: 1px solid var(--hair);
}

@media (min-width: 640px) {
  .pillar {
    padding: 2.25rem 1.75rem;
    border-right: 1px solid var(--hair);
  }
  .pillar:nth-child(2n) {
    border-right: 0;
  }
}

@media (min-width: 1024px) {
  .pillar {
    border-bottom: 0;
    border-right: 1px solid var(--hair);
  }
  .pillar:nth-child(2n) {
    border-right: 1px solid var(--hair);
  }
  .pillar:first-child {
    padding-left: 0;
  }
  .pillar:last-child {
    padding-right: 0;
    border-right: 0;
  }
}

.pillar__mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--hair-mid);
  border-radius: var(--r-sm);
  color: var(--accent);
}
.pillar__mark .icon {
  width: 1.125rem;
  height: 1.125rem;
}
.pillar__title {
  margin-top: 1.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--fg);
}
.pillar__body {
  margin-top: 0.75rem;
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--fg-2);
}

/* ==========================================================================
   14. Process (how it works)
   ========================================================================== */

/* --- Scene ---------------------------------------------------------------
   The one piece of illustration on the page. It is drawn inline rather than
   loaded as an image so it inherits the page's ink, accent and type tokens —
   the artwork restyles itself with the theme instead of drifting from it.
   Line weights match the icon set (2px ink, 1.5px secondary) so it reads as
   the same hand, scaled up.
   ------------------------------------------------------------------------ */

.scene {
  margin: 0 0 3.5rem;
  /* Below ~40rem the drawing would scale its 10px labels down to four or five
     pixels. A diagram is the one thing on the page allowed its own scroll
     rather than being shrunk past reading size. */
  overflow-x: auto;
  overscroll-behavior-x: contain;
  padding-bottom: 0.5rem;
}
.scene svg {
  display: block;
  width: 100%;
  min-width: 40rem;
  height: auto;
  max-width: 54rem;
  margin-inline: auto;
}

.sc-card {
  fill: var(--bg-card);
  stroke: var(--fg);
  stroke-width: 2;
  stroke-linejoin: round;
}
.sc-panel {
  fill: var(--bg-card);
  stroke: var(--hair-strong);
  stroke-width: 1.5;
}
.sc-inset {
  fill: var(--bg-inset);
}
.sc-line {
  fill: none;
  stroke: var(--fg);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.sc-soft {
  fill: none;
  stroke: var(--hair-strong);
  stroke-width: 1.5;
  stroke-linecap: round;
}
.sc-dim {
  fill: #c8d5e3;
}
.sc-ink {
  fill: var(--fg);
}
.sc-teal {
  fill: var(--accent);
}
.sc-teal-line {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.sc-beam {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 5 6;
}
.sc-wash {
  fill: var(--accent-wash);
}

.sc-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  fill: var(--fg-4);
}
.sc-strong {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  fill: var(--fg);
}
.sc-value {
  font-size: 15px;
  font-weight: 600;
  fill: var(--fg);
}

/* The scan flows for three passes when the figure comes into view and then
   rests — enough to read as a scan, not an animation that never stops. */
.js .scene.is-in .sc-beam {
  stroke-dashoffset: 132;
  animation: beam 2.2s linear 3 forwards;
}

@keyframes beam {
  to {
    stroke-dashoffset: 0;
  }
}

.process {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--hair);
}

@media (min-width: 700px) {
  .process {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1100px) {
  .process {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  /* Seven steps across four columns — let the final one take the spare cell. */
  .process__step--end {
    grid-column: span 2;
  }
}

.process__step {
  display: flex;
  gap: 1.125rem;
  padding: 1.75rem 0;
  border-bottom: 1px solid var(--hair);
}

@media (min-width: 700px) {
  .process__step {
    padding: 1.75rem;
    border-right: 1px solid var(--hair);
  }
  .process__step:nth-child(2n) {
    border-right: 0;
  }
}

@media (min-width: 1100px) {
  .process__step {
    border-right: 1px solid var(--hair);
  }
  .process__step:nth-child(2n) {
    border-right: 1px solid var(--hair);
  }
  .process__step:nth-child(4n),
  .process__step--end {
    border-right: 0;
  }
}

.process__no {
  font-size: 0.75rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--accent-deep);
  padding-top: 0.1875rem;
}
.process__title {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--fg);
}
.process__body {
  margin-top: 0.4375rem;
  font-size: 0.875rem;
  line-height: 1.65;
  color: var(--fg-2);
}

/* ==========================================================================
   15. Matrix (intelligence / security)
   ========================================================================== */

.matrix {
  display: grid;
  border: 1px solid var(--hair);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--bg-card);
  box-shadow: var(--lift-sm);
}

@media (min-width: 640px) {
  .matrix {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .matrix {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.matrix__cell {
  padding: 2rem 1.75rem;
  border-bottom: 1px solid var(--hair);
  transition: background 0.22s ease;
}
.matrix__cell:hover {
  background: rgba(16, 42, 76, 0.035);
}

@media (min-width: 640px) {
  .matrix__cell {
    border-right: 1px solid var(--hair);
  }
  .matrix__cell:nth-child(2n) {
    border-right: 0;
  }
}

@media (min-width: 1024px) {
  .matrix__cell {
    border-right: 1px solid var(--hair);
  }
  .matrix__cell:nth-child(2n) {
    border-right: 1px solid var(--hair);
  }
  .matrix__cell:nth-child(3n) {
    border-right: 0;
  }
  .matrix__cell:nth-last-child(-n + 3) {
    border-bottom: 0;
  }
}

.matrix--tight .matrix__cell {
  padding: 1.75rem 1.5rem;
}

.matrix__icon {
  width: 1.375rem;
  height: 1.375rem;
  color: var(--fg-3);
  transition: color 0.22s ease;
}
.matrix__cell:hover .matrix__icon {
  color: var(--accent);
}
.matrix__icon--risk {
  color: var(--risk);
}
.matrix__cell:hover .matrix__icon--risk {
  color: var(--risk);
}
.matrix__title {
  margin-top: 1.25rem;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--fg);
}
.matrix__body {
  margin-top: 0.5rem;
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--fg-2);
}

/* ==========================================================================
   16. Spec lists, callouts, ticks
   ========================================================================== */

.speclist {
  border-top: 1px solid var(--hair);
}
.speclist li {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 1rem 0.5rem 1rem 0;
  border-bottom: 1px solid var(--hair);
  font-size: 1rem;
  color: var(--fg);
  transition: padding-left 0.25s var(--ease), background 0.2s ease;
}
.speclist li:hover {
  padding-left: 0.5rem;
  background: rgba(16, 42, 76, 0.035);
}
.speclist .icon {
  width: 1.0625rem;
  height: 1.0625rem;
  color: var(--fg-4);
  transition: color 0.2s ease;
}
.speclist li:hover .icon {
  color: var(--accent);
}

.callout {
  display: flex;
  gap: 1rem;
  margin-top: 2.5rem;
  padding: 1.25rem 1.375rem;
  border: 1px solid var(--hair-mid);
  border-left: 2px solid var(--accent);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  background: var(--accent-wash);
}
.callout p {
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.6;
  color: var(--fg);
}
.callout__icon {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  color: var(--accent);
}

.ticks {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 1.25rem;
}
.ticks li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--hair);
  font-size: 0.9375rem;
  color: var(--fg);
}
.ticks li:last-child {
  border-bottom: 0;
}
.ticks .icon {
  width: 1rem;
  height: 1rem;
  color: var(--ok);
}
.ticks--alt .icon {
  color: var(--accent);
}

/* ==========================================================================
   17. Balance (privacy)
   ========================================================================== */

.balance {
  display: grid;
  gap: 0;
  border: 1px solid var(--hair);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--bg-card);
  box-shadow: var(--lift-sm);
}

@media (min-width: 860px) {
  .balance {
    grid-template-columns: 1.15fr 0.85fr;
  }
}

.balance__col {
  padding: 2rem 1.75rem;
  border-bottom: 1px solid var(--hair);
}
.balance__col--muted {
  background: var(--bg-inset);
}

@media (min-width: 860px) {
  .balance__col {
    border-bottom: 0;
    border-right: 1px solid var(--hair);
    padding: 2.5rem 2.25rem;
  }
  .balance__col--muted {
    border-right: 0;
  }
}

.balance__label {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--fg-4);
}
.balance__not {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.25rem;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.45;
  color: var(--fg);
}
.balance__not .icon {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--accent);
}
.balance__aside {
  margin-top: 1rem;
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--fg-3);
}

/* ==========================================================================
   18. Outcomes (brand value)
   ========================================================================== */

.outcomes {
  border-top: 1px solid var(--hair);
}
.outcome {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  gap: 1rem;
  padding: 1.75rem 0.75rem 1.75rem 0;
  border-bottom: 1px solid var(--hair);
  transition: background 0.2s ease, padding-left 0.25s var(--ease);
}
.outcome:hover {
  background: rgba(16, 42, 76, 0.035);
  padding-left: 0.75rem;
}
.outcome__no {
  font-size: 0.75rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--accent-deep);
  padding-top: 0.25rem;
}
.outcome__title {
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--fg);
}
.outcome__body p {
  margin-top: 0.375rem;
  max-width: 44rem;
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--fg-2);
}

@media (min-width: 768px) {
  .outcome {
    grid-template-columns: 4rem minmax(0, 1fr);
  }
  .outcome__title {
    font-size: 1.25rem;
  }
}

/* ==========================================================================
   19. Sectors (industries)
   ========================================================================== */

.sectors {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--hair);
}

@media (min-width: 640px) {
  .sectors {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .sectors {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.sector {
  padding: 2rem 0;
  border-bottom: 1px solid var(--hair);
}

@media (min-width: 640px) {
  .sector {
    padding: 2rem 1.75rem;
    border-right: 1px solid var(--hair);
  }
  .sector:nth-child(2n) {
    border-right: 0;
  }
}

@media (min-width: 1024px) {
  .sector {
    border-right: 1px solid var(--hair);
  }
  .sector:nth-child(2n) {
    border-right: 1px solid var(--hair);
  }
  .sector:nth-child(3n) {
    border-right: 0;
  }
  .sector:nth-last-child(-n + 3) {
    border-bottom: 0;
  }
  .sector:first-child,
  .sector:nth-child(4) {
    padding-left: 0;
  }
  .sector:nth-child(3n) {
    padding-right: 0;
  }
}

/* A plate rather than a bare glyph: the dot grid gives the card a printed
   texture and stops six icons on a flat band reading as a bulleted list. */
.sector__plate {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem;
  border: 1px solid var(--hair);
  border-radius: var(--r-md);
  background-color: var(--bg-card);
  background-image: radial-gradient(rgba(16, 42, 76, 0.11) 1px, transparent 1px);
  background-size: 7px 7px;
  box-shadow: var(--lift-sm);
  color: var(--accent);
  transition: color 0.22s ease, border-color 0.22s ease;
}
.sector:hover .sector__plate {
  border-color: var(--accent-line);
}

.sector__icon {
  width: 1.5rem;
  height: 1.5rem;
}
.sector__title {
  margin-top: 1.25rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--fg);
}
.sector__body {
  margin-top: 0.75rem;
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--fg-2);
}

/* ==========================================================================
   20. Scope (pilot)
   ========================================================================== */

.scope {
  display: grid;
  gap: 0;
  border: 1px solid var(--hair);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--bg-card);
  box-shadow: var(--lift-sm);
}

@media (min-width: 768px) {
  .scope {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.scope__card {
  padding: 2rem 1.75rem;
  border-bottom: 1px solid var(--hair);
}

@media (min-width: 768px) {
  .scope__card {
    border-bottom: 0;
    border-right: 1px solid var(--hair);
    padding: 2.5rem 2.25rem;
  }
  .scope__card:last-child {
    border-right: 0;
  }
}

.scope__label {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--fg-4);
}

/* ==========================================================================
   21. FAQ
   ========================================================================== */

.faq {
  border-top: 1px solid var(--hair);
}
.faq__item {
  border-bottom: 1px solid var(--hair);
}
.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  width: 100%;
  padding: 1.375rem 0;
  text-align: left;
  font-size: 1rem;
  font-weight: 500;
  color: var(--fg);
  transition: color 0.18s ease;
}
.faq__q:hover {
  color: var(--accent-deep);
}
.faq__toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  flex-shrink: 0;
  border: 1px solid var(--hair-mid);
  border-radius: var(--r-sm);
  color: var(--fg-3);
  transition: border-color 0.2s ease, color 0.2s ease;
}
.faq__item.is-open .faq__toggle {
  border-color: var(--accent-line);
  color: var(--accent);
}
.faq__toggle .icon {
  width: 0.875rem;
  height: 0.875rem;
}
.faq__minus,
.faq__item.is-open .faq__plus {
  display: none;
}
.faq__item.is-open .faq__minus {
  display: block;
}

.faq__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.32s var(--ease);
}
.faq__item.is-open .faq__a {
  grid-template-rows: 1fr;
}
.faq__a p {
  overflow: hidden;
  min-height: 0;
  max-width: 46rem;
  padding-right: 3rem;
  font-size: 0.9375rem;
  line-height: 1.75;
  color: var(--fg-2);
}
.faq__item.is-open .faq__a p {
  padding-bottom: 1.5rem;
}

@media (min-width: 768px) {
  .faq__q {
    font-size: 1.0625rem;
  }
}

/* ==========================================================================
   22. Reading (insights)
   ========================================================================== */

.reading {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--hair);
}

@media (min-width: 640px) {
  .reading {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .reading {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.entry {
  display: flex;
  flex-direction: column;
  padding: 2rem 0;
  border-bottom: 1px solid var(--hair);
}

@media (min-width: 640px) {
  .entry {
    padding: 2rem 1.75rem;
    border-right: 1px solid var(--hair);
  }
  .entry:nth-child(2n) {
    border-right: 0;
  }
}

@media (min-width: 1024px) {
  .entry {
    border-right: 1px solid var(--hair);
  }
  .entry:nth-child(2n) {
    border-right: 1px solid var(--hair);
  }
  .entry:nth-child(3n) {
    border-right: 0;
  }
}

/* Five entries never fill the final row — a trailing rule beside an empty
   cell reads as a broken table, so drop it. */
.entry:last-child {
  border-right: 0;
}

/* Thumbnails carry the section. They are flat vector plates in the brand's
   two colours rather than photography — a stock photo of a warehouse would
   say nothing these summaries do not already say, and would be the only
   photographic thing on an otherwise drawn page. */
.entry__thumb {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  margin-bottom: 1.25rem;
  border: 1px solid var(--hair);
  border-radius: var(--r-md);
  background: var(--bg-inset);
}

.entry__kicker {
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--fg-4);
}
.entry__title {
  margin-top: 0.875rem;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--fg);
}
.entry__body {
  margin-top: 0.625rem;
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--fg-2);
}
/* ==========================================================================
   23. Creed (about)
   ========================================================================== */

.connects {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 2rem;
  border-top: 1px solid var(--hair);
  border-left: 1px solid var(--hair);
}
.connects li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.9375rem 1rem;
  border-right: 1px solid var(--hair);
  border-bottom: 1px solid var(--hair);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--fg);
}
.connects .icon {
  width: 1rem;
  height: 1rem;
  color: var(--accent);
}

.creed {
  display: grid;
  gap: 1px;
  background: var(--hair);
  border: 1px solid var(--hair);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--lift-sm);
}
.creed__card {
  background: var(--bg-card);
  padding: 2rem 1.75rem;
}
.creed__label {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--accent-deep);
}
.creed__body {
  margin-top: 1rem;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--fg);
}

/* ==========================================================================
   24. Close (contact + form)
   ========================================================================== */

.close {
  display: grid;
  gap: 3rem;
}

@media (min-width: 960px) {
  .close {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 4.5rem;
    align-items: start;
  }
}

.close__title {
  margin-top: 1.25rem;
  font-size: 2rem;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.close__lede {
  margin-top: 1.25rem;
  max-width: 32rem;
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--fg-2);
}
.close__points {
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.close__points li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.9375rem;
  color: var(--fg-2);
}
.close__points .icon {
  width: 1rem;
  height: 1rem;
  color: var(--accent);
}
.close__sectors {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--hair);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: var(--fg-4);
}

@media (min-width: 768px) {
  .close__title {
    font-size: 2.75rem;
  }
}

.form {
  border: 1px solid var(--hair);
  border-radius: var(--r-lg);
  background: var(--bg-card);
  padding: 1.75rem;
  box-shadow: var(--lift-md);
}
.form__row {
  display: grid;
  gap: 1rem;
}

@media (min-width: 560px) {
  .form__row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.field {
  display: block;
  margin-bottom: 1rem;
}
.field__label {
  display: block;
  margin-bottom: 0.4375rem;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--fg-3);
}
.field input,
.field select,
.field textarea {
  width: 100%;
  border: 1px solid var(--hair-mid);
  border-radius: var(--r-md);
  background: var(--bg-inset);
  padding: 0.75rem 0.875rem;
  font-size: 0.9375rem;
  color: var(--fg);
  transition: border-color 0.18s ease, background 0.18s ease;
}
.field textarea {
  resize: vertical;
  min-height: 6rem;
}
.field input::placeholder,
.field textarea::placeholder {
  color: var(--fg-4);
}
.field input:hover,
.field select:hover,
.field textarea:hover {
  border-color: var(--hair-strong);
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--bg);
  box-shadow: 0 0 0 3px var(--accent-wash);
}
.field.is-invalid input,
.field.is-invalid select,
.field.is-invalid textarea {
  border-color: rgba(201, 42, 53, 0.6);
}
.field__error {
  display: block;
  margin-top: 0.375rem;
  font-size: 0.75rem;
  color: var(--risk);
}

.form__intent {
  border: 0;
  margin-bottom: 1.25rem;
}
.form__intent legend {
  margin-bottom: 0.5rem;
}
.radio {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-right: 1.25rem;
  font-size: 0.9375rem;
  color: var(--fg-2);
  cursor: pointer;
}
.radio input {
  accent-color: var(--accent);
  width: 0.9375rem;
  height: 0.9375rem;
}

/* Honeypot — off-canvas rather than display:none, which some bots skip. */
.form__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.btn:disabled {
  opacity: 0.6;
  cursor: progress;
  pointer-events: none;
}

.form__legal {
  margin-top: 1rem;
  font-size: 0.75rem;
  line-height: 1.6;
  color: var(--fg-4);
}
.form__status {
  margin-top: 1rem;
  padding: 0.75rem 0.875rem;
  border: 1px solid var(--accent-line);
  border-radius: var(--r-md);
  background: var(--accent-wash);
  font-size: 0.875rem;
  color: var(--fg);
}
.form__status--error {
  border-color: rgba(201, 42, 53, 0.4);
  background: rgba(201, 42, 53, 0.07);
}

/* ==========================================================================
   25. Footer
   ========================================================================== */

.footer {
  border-top: 1px solid var(--hair);
  background: var(--bg);
  padding-block: 3.5rem 2rem;
}
.footer__top {
  display: grid;
  gap: 2.5rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid var(--hair);
}

@media (min-width: 860px) {
  .footer__top {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 2fr);
    gap: 4rem;
  }
}

.footer__logo {
  height: 1.5rem;
  width: auto;
}
.footer__tagline {
  margin-top: 1rem;
  max-width: 22rem;
  font-size: 0.8125rem;
  line-height: 1.7;
  color: var(--fg-3);
}
.footer__brand .textlink {
  margin-top: 1.25rem;
}

.footer__cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2rem;
}

@media (min-width: 560px) {
  .footer__cols {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.footer__col-title {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--fg-4);
}
.footer__cols ul {
  display: flex;
  flex-direction: column;
  gap: 0.6875rem;
  margin-top: 1rem;
}
.footer__cols a {
  font-size: 0.875rem;
  color: var(--fg-2);
  transition: color 0.18s ease;
}
.footer__cols a:hover {
  color: var(--accent-deep);
}

.footer__bottom {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-top: 1.75rem;
  font-size: 0.75rem;
  color: var(--fg-4);
}

@media (min-width: 640px) {
  .footer__bottom {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

/* ==========================================================================
   Keyframes
   ========================================================================== */

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(14, 122, 75, 0.4);
  }
  70% {
    box-shadow: 0 0 0 6px rgba(14, 122, 75, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(14, 122, 75, 0);
  }
}

@keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes fade-in {
  to {
    opacity: 1;
  }
}

/* ==========================================================================
   26. Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  .js .reveal {
    opacity: 1;
    transform: none;
  }

  .console__chart .line {
    stroke-dashoffset: 0;
  }
  .console__chart .dot {
    opacity: 1;
  }
}